according to Bill Verplank

1 according to Bill Verplank

1. Planera den användarnära processen 2. Förstå och specificera brukssituationen Uppfyller kraven 5. Utvärdera mot användarkrav 3. Specificera användar- och verksamhetskrav En designprocess med människan i fokus (ISO 9241-210, 2010) 4. Producera designlösningar 28 2

Framtid 3

Nuvarande forskningsteman och trender Hållbarhet Systemtänkande Tjänstedesign Användarupplevelse Connectivity Internet of things Kontextmedvetenhet Förstärkt och blandad verklighet (AR och MR) Communities Intelligenta agenter Robotar Wearables Sensorer Design för beteendeförändring / övertygande system 4

Fysiska gränssnitt TUI och förstärkt verklighet Vi är fysiska varelser och interagerar med världen genom vår kropp. Vi består inte bara av ett par ögon och ett pekfinger. Varför inte dra nytta av det i människadatorinteraktion? Reactable: http://www.youtube.com/watch?v=vm_fzlya8y4 5

Förstärkt verklighet Head mounted Mobil Projektorbaserad 6

Användargränssnitt När användaren kommer i en fördefinierad region spelas berättelser och filmer upp. Om kameran riktas mot markörer på den tryckta kartan eller markörer uppsatta i omgivningen utlöses andra händelser och skatter kan hittas eller så kan 3D-objekt överlagras på markören i kamerabilden. Figur 65 visar hur det ser ut på kartan. När användaren hittar skatter bytts bilderna pånavigation kartan ut, och de börjar studsa istället för Place-based att vaja. Minnesmark och Astrids spår 7 Figur 65. Den datorförstärkta kartan.

Device-movement based zooming 1. The user sees the hole when directing the camera to the marker. 2. He zooms in by moving closer. 8 3. When moving close enough the user can view the inside of the tree and see the birds nest and the eggs. 4. As the user move backwards he can againsee the outside view of the hole and zoom out.

Two-dimensional device-direction based panning 9 Figur 67. Användaren ser sig om i det virtuella huset genom att vända sig och plattan eller

Summa summarum Design handlar om att forma framtiden För att förstå gränssnittsdesign i praktiken måste vi känna dess historia, dess nutid och dess framtid ps. läs kursinformationen. 10

Linköpings universitet En förnyare av forskning och utbildning Förnamn Efternamn Institution 11

Dagens föreläsning Designmönster Skissning Wireframes Wireflows Sitemaps Pappersprototyper 12

Designmönster Kontext med överliggande mönster Problem Krafter Lösning Underliggande mönster Inspiration och saker att tänka på Komposition Inga recept! Ingen kokboksdesign! 13

Magnetism Use when: The user needs to position objects very precisely, such as next to other objects or against Guides. Why: Magnetism helps compensate for users lack of perfect dexterity with a mouse. How: When the user drags an object closer to another object s edge, make it snap to the other object. Likewise, when it s dragged away, keep it there for a few pixels, and then let it move away. 14

15

Skissning av Pirmin Buchenberg 16

Skissning Gastaltar, utvecklar och kommunicerar designidéer Är en grund för att generera, bearbeta och välja designalternativ 17

Skapa genom skissning Greenberg m.fl. tidig idégenerering tänka fritt runt idéer tänka igenom idéer tvingar dig att gestalta hur delarna ska bilda en helhet brainstorming: generera mängder med idéer utan att bry sig om kvalitet uppfinna och utforska koncept 18

Dokumentera genom skissning Greenberg m.fl. idéer du utvecklar idéer som du hittar arkivera idéer att fundera över senare 19

Att reflektera, dela, kritisera, besluta genom skissning Greenberg m.fl. kommunicera idéer till andra bjuda in till kritik och alternativa förslag välja idéer som är värda att fortsätta på 20

Att få designen rätt Greenberg m.fl. Ta fram en idé Iterera och utveckla den 21

Att få rätt design Greenberg m.fl. 22

Utforskning Greenberg m.fl. 23

Vad är en skiss? Greenberg m.fl. Snabb katalysator Inbjudande och öppet förslag I stunden Lagom detaljerad Lätt att kasta Mängder 24

25 En skiss är inte en prototyp

26 Greenberg m.fl.

Design rationale av Matilda Zetterblom + -!? Alt # 27

Scenarios och storyboards Pia, Tom och Ola startar Minnesmark-appen för att gå på en datorförstärkt skattjakt. Pia väljer skattjakt och sedan beger de sig iväg. På platser längs med vägen tar de del av berättelser. Markörbaserad augmented reality används för att levandegöra berättelsen. Så att virtuella objekt bäddas in med kameravyn i bakgrunden. På en del platser finns panoraman som visar hur det såg ut förr i tiden. De ser man sig omkring i genom att hålla sin ipad framför sig och vända sig runt. Längs med vägen har de hittat skatter i form av media som i slutet av skattjakten skickas till Olas e-postadress. Vad bra att Olas lärare med hjälp av Minnesmark Editor, kunde sätta upp den här skattjakten åt dem. 28

MINNESMARK Pia, Tom och Ola startar Minnesmark-appen för att gå på en datorförstärkt skattjakt. Pia väljer skattjakt och sedan beger de sig iväg. På platser längs med vägen tar de del av berättelser. Bjud med hjälp av ipadappen Minnesmark in till en datorförstärkt skattjakt där deltagarna kan utforska både den fysiska miljön och de media som du förberett. Använd editorn för att skapa skattjakten. Minnesmark är en ARbrowser (AR = augmented reality) som bygger på en princip om fysisk interaktion i den verkliga världen, vilket bidrar till en motiverande aktivitet. Deltagarna hittar skatter i form av media, som sedan skickas till dem via e-post i slutet av skattjakten. Med editorn kan vem som helst sätta ihop egna skattjakter. Markörbaserad augmented reality används för att levandegöra berättelsen. Så att virtuella objekt bäddas in med kameravyn i bakgrunden. På en del platser finns panoraman som visar hur det såg ut förr i tiden. De ser man sig omkring i genom att hålla sin ipad framför sig och vända sig runt. Mattias Arvola @mattiasarvola mattias.arvola@liu.se www.minnesmark.se 29 Längs med vägen har de hittat skatter i form av media som i slutet av skattjakten skickas till Olas e-postadress. Vad bra att Olas lärare med hjälp av Minnesmark Editor, kunde sätta upp den här skattjakten åt dem.

START Listen to verbal or read printed instructions in the reception to install and start the application. MINNESMARK Task Flow END A final story is played (audio or video) when all peices of the puzzle are found and the camera is pointed to the jigsaw poster in the reception. View the jigsaw poster with lost pieces in the reception View the map Start the Log of Wood story View the compass Enter the Owl Tree region Enter the Kristin's House region Enter the Astrid's Home region Reset the application Read printed instructions on how to solve the puzzle Point the camera to the jigsaw poster View the question marks where the lost pieces should have been. Found pieces are shown at their positions Project: Digital Landscapes Creator: Mattias Arvola Modified: 17 June 2011 Product: Minnesmark Phase: Detailed Design Version: 1.3 See question marks where the lost pieces can be found See the pieces you have found on the places you found them Point the camera to the start marker outside the reception Listen to the log of wood story (or watch the movie) Get the piece of the puzzle with log of wood Read instructions on screen Point the camera to the ground See in what direction the closest peice of the puzzle is, and also the directions to the pieces further away Listen to story and read instructions to raise the phone Raise the phone and view Pippi (or Astrid) in the tree Point the camera to the marker behind the tree View photo or film of the inside of the tree and listen to sounds of owl chicken Get the piece of the puzzle with eggs, and read instructions Listen to story and read instructions to raise the phone Raise the phone and view Kristin's house from the outside. Walk closer and passed the walls of the house to see the kitchen on the other side of the walls Point to marker, find the milk piece, and read instructions Listen to story and read instructions to raise the phone View someone walking on the roof top Point camera to marker and read instructions to turn around View a panorama from the rooftop and find a whisker If all peices are found, read final instructions, and go to view the jigsaw poster in the reception Read printed instructions Point the camera to the printed reset-marker Confirm the reset on screen See how all found pieces are deleted Note: Content objects are bold. Actions are italic. 30

MINNESMARK Object-Action Model Skissa upp OBJECTS ACTIONS funktioner och innehåll jigsaw poster marker region map the ground direction camera the phone the application the compass screen question marks lost pieces found pieces closest piece instructions pieces further away positions for pieces background sound foreground sound movie image 3D-object panorama the reset dialog listen read raise view watch point to turn around find get reset confirm see walk closer and passed enter start Vad ska objekten ha för datatyp? Vilka tillstånd kan de vara i? Vad kan man göra med dem? Vilka attribut ska de ha? 31

Kravspecifikation F. FUNCTIONAL REQUIREMENTS 1. Be able to listen to sound 2. Be able to read text 3. Be able to view visual media F. FUNCTIONAL REQUIREMENTS 1. Change accessed media by entering and leaving a region 2. Be able to see or hear media in a 3. specific diraction with camera image in the background 4. Be able to change accessed media by changing direction in which the phone is held 5. Be able to change view of media by changing direction in which the phone is held 6. Be able to see or hear media in the place of a marker detected by the camera, with the camera image in the background 7. Change view of object by walking closer to a position, passed it, and further away from it 8. Be able to view media fullscreen 9. Pause media playback 10. Resume media playback BM. BASIC MEDIA MC. MEDIA CONTROL D. DATA REQUIREMENTS 1. Short texts 2. Background sound loops 3. Foreground sounds 4. Movies 5. 2D-images 6. 3D-objects 7. Panorama D. DATA REQUIREMENTS 1. Markers 2. Regions 3. Self position 4. Other positions 5. Map data 6. Compass directions 7. Gyroscope data 8. Accellerometer data 9. Camera image 10. Media size 11. On screen position F. FUNCTIONAL REQUIREMENTS 1. Be able to reset the application, so that no lost pieces are found. 2. Not be able to reset the application by mistake. F. FUNCTIONAL REQUIREMENTS 1. Be able to see in which direction the closest piece is 2. Be able to see in which directions all not found pieces are F. FUNCTIONAL REQUIREMENTS 1. Be able to see where lost pieces can be found on an augmented printed map 2. Be able to find a lost piece 3. Be able to see all found pieces on augmented printed media 4. Be able to see your own position AC. APPLICATION CONTROL D. DATA REQUIREMENTS 1. The reset dialog TC. TREASURE HUNT COMPASS TM. TREASURE HUNT MAP D. DATA REQUIREMENTS 1. Self position 2. Other positions 3. Compass directions 4. 2D-images 4. On screen position D. DATA REQUIREMENTS 1. Self position 2. Other positions 3. 3D-objects 4. Markers 5. On screen position 6. Camera image 32

Innehållsorganisation, kortsortering http://www.interaction-design.org/encyclopedia/card_sorting.html Få koll på: Terminology (what people call things) Relationships (proximity, similarity) Categories (groups and their names) 33

Ansatser till kortsortering Open sorting, where users make up their own categories Closed sorting, where categories are predefined Hybrid sorting; some combination of the two 34

35 http://www.interaction-design.org/encyclopedia/card_sorting.html

Sitemaps HOME Den enklaste varianten är som en organisationshierarki Boxarna representerar sidor eller skärmbilder Linjerna representerar länkar 36

Teknisk info Sitemap med storlek Manual för att visa vikt Butiker Produkt -typ Start Om oss Kontakt Produktinfo Policy Kundtjänst FAQ 37

En skiss visar gränssnittet men inte beteendet 38

Wireframes i en storyboard Sekventiell visuell narrativ visar en serie ögonblicksbilder 39

Wireframes Design by Pirmin Buchenberg 40

Tillståndsdiagram Greenberg m.fl. Användaren kan ta olika vägar Tillstånden är ögonblick och pilarna är transitioner ger upphov till förändrade tillstånd En väg beskriver en sekvens genom tillstånden 41

42 Greenberg m.fl.

Wireflows TAP SWIPE TAP TAP TAP 14 43

Från arbetsskisser till beskrivande och specificerande bilder 44

There is no such thing as a failed experiment, only experiments with unexpected outcomes. Buckminster Fuller 45

Skissade pappersprototyper Görs tidigt i utvecklingsprocessen för att utforska idéer Interaktiva! Billiga, snabba och portabla Lätta att ändra, kan t.o.m. skapas under en session med användare Användare har lätt att föreslå förändringar Vad vill du testa? Ju finare de är desto mer fokuserar användare på utseende 46

47

48

49

50

51

52

Dagens föreläsning Designmönster Skissning Wireframes Wireflows Sitemaps Pappersprototyper 53

Nästa föreläsning Principer i gränssnitt Heuristisk utvärdering 54