Föreläsning i webbdesign Interak*onsdesign Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se
Från föreläsning F1 Användarcentrerad design "Take the user into account every step of the way as you develop your product" (Garre>, sid. 17) Varför? Vad? Hur? Vem? Garre>, J. J. (2011) The Elements of User Experience, 2nd edifon, New Riders 2
Från föreläsning F2 Två sidor av GarreJs modell Funk*onalitet Informa*on Interak*on Funk*onalitet Vad ska användaren kunna göra? Hur ska användaren agera? Informationsarkitektur! Interaktionsdesign! Informa*on Organisa*on Vad ska användaren kunna se? Hur ska användaren kunna hi>a? Garre>, J. J. (2011) The Elements of User Experience, 2nd edifon, New Riders, s.29 3
Från föreläsning F6 & F10 SäJa samman ej interakfvt program Konceptuell design Bestäm syve med programmet Bestäm funk*onalitet Vad användaren ska göra, vad programmet gör - Varför, Mål - Vad, UppgiNer (Tasks) Fysisk design Bestäm gränssni> Visibility och affordance, s*muli och sä>et a> ge respons Skapa gränssni>et i HTML och CSS Strukturera funk*onaliteten i funk*oner Bestäm koppling (händelser) mellan gränssni> och funk*oner Bestäm målrespons, verklig respons och programmets resultat Bestäm vilken data som behövs Variabler och parametrar - Hur, Handlingar (AcFons) Skriv funk*onerna i JavaScript Skapa programmet i små steg och testa ever varje ny> steg 4
Skapa program Vad (Konceptuell design) Börja med a> skriva kommentarer, för a> förklara vad programmet ska göra. // Kasta tärning: // Ta fram e> slumptal mellan 1 och 6 // Visa bild som motsvarar talet Hur (Fysisk design) Skriv sedan JavaScript- koden, för a> beskriva hur det ska göras. // Kasta tärning: func*on throwdice() { // Ta fram e> slumptal mellan 1 och 6 var dicenr = getrandom(6); // Visa bild som motsvarar talet dicetag.src = dicenr+".gif"; } 5
InterakFvitet Ur ordboken (Bra Böckers Lexikon, 1988): Interak*vitet: växelverkan, ömsesidig påverkan, samverkan Interak*v bearbetning: användaren arbetar i dialog med datorn, real*dsbearbetning, indata bearbetas och resultat lämnas så snabbt som möjligt, användaren kan direkt påverka den fortsa>a behandlingen Egenskaper i människa- datorinterak*vitet Dialog där datorn ger respons i real2d på användarens handlingar Användaren är ak2v och bör vara den som styr dialogen 6
AnvändargränssniJ Kontaktyta mellan användaren och datorn/informa*onen/informa*onsägare Användare Dator Informa*on Informa*ons- ägare Hur förstår användaren a> det går a> interagera och hur man gör de>a? Visibility Synliggörande, grafisk presenta*on,... Affordance Erbjudande, lockelse, är *ll för,... Metafor Liknelse Anpassa *ll målgruppen Utny>ja vad användaren redan kan 7 - Vad? Hur? - Vem? - Vem? BokFps: The Design of Everyday Things av Donald A. Norman
Från föreläsning F5 KogniFva aspekter Usörandegap (Gulf of execu*on) Avstånd mellan användarens mål och möjlighet a> uppnå dessa med systemet (webbplatsen) The user's way to think and interpret User s goals S*muli Feedback Gulf of evalua*on Tolkningsgap (Gulf of evalua*on) Avstånd mellan systemets Reac*on Response (webbplatsens) representa*on och användarens mål Physical system Gulf of execu*on Ac*on Designer's representa*on of the goals Webbdesignern bör sträva ever a> dessa gap blir så små som möjligt Preece, J., et al. (1994) Human- Computer InteracFon, Addison- Wesley 8
InterakFonens faser Program Programmerad dialog Användare 1. S*muli Visa a> något kan göras Ak*vera användaren Affordance 2. Sä>et a> ge respons Visa också hur användaren kan agera - klicka på knapp, välja i meny, Datorns respons 5. Resultat Vad som händer som direkt konsekvens av användarens respons Användaren styr vad som ska göras 3. Målrespons (förväntad respons) Vad användaren kan göra för a> uppnå målet 4. Verklig respons Användaren kan även göra något annat, vilket kan leda *ll andra resultat än målet 9
Exempel Ge s*muli i exemplet med bildsortering CSS för a> byta markör då den förs in över bilderna Markören byts också i JavaScript- koden, då bilderna fly>as Gränssni> för e> beställningsformulär form1.htm meny för rumstyp och texsält för antal nä>er och personer form2.htm: menyn ersa> av radioknappar form3.htm: vid e> fåtal alterna*v blir det mer överskådligt meny istället för texsält för antal nä>er form4.htm: minskar risken a> användaren skriver något annat än *llåtna val meny för antal personer och det kan endast väljas då det är aktuellt mer strukturerat och tydligare gränssni> ex1! ex2! 10
Utveckla för människor (användarna) user experience: the experience the product creates for the people who use it in the real world. (Garre>, 2011, s. 6) Användarvänlig (User Friendly) Tydligt, enkelt gränssni> Användbarhet (Usability) Effek*vt, användarna kan uppnå sina mål Användarupplevelse (User Experience, UX) Hur användarna känner (subjek*vt) Garre>, J. J. (2011) The Elements of User Experience, 2nd edifon, New Riders 11 Bilder från freedigitalphotos.net
Användarupplevelse (User Experience) Jakob Nielsen och Donald Norman: "User experience" encompasses all aspects of the end- user's interac2on with the company, its services, and its products. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high- quality user experience in a company's offerings there must be a seamless merging of the services of mul*ple disciplines, including engineering, marke*ng, graphical and industrial design, and interface design. Nielsen, J. & Norman, D. (2011) User Experience Our DefiniFon, Nielsen Norman Group, Tillgänglig: h>p://www.nngroup.com/about/userexperience.html [2012-11- 05] 12