Föreläsning i webbdesign Användarcentrerad design Interak3on och informa3on Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se
Structure Plane our concerns shi9 from more abstract issues of strategy and scope to the concrete factors that will determine what users finally experience. (GarreE, 2011, s. 80) GarreE, J. J. (2011) The Elements of User Experience, 2nd edifon, New Riders 2
Structure Plane Vad/hur ur ska användaren göra för ae uoöra uppgirer? Vad/Hur? Hur ska informa3onen organiseras och struktureras? Vad? Varför? 3
InterakFonsdesign och informafonsarkitektur Interak3onsdesign och informa3onsarkitektur handlar 3ll stor del om: understanding people the way they behave and think. (GarreM, 2011, s. 81) Hur vill vi att det ska fungera för användaren?" Hur uppfattar användarna vad och hur man gör?" GarreE, J. J. (2011) The Elements of User Experience, 2nd edifon, New Riders 4
KogniFva aspekter UOörandegap (Gulf of execu3on) Avstånd mellan användarens mål och möjlighet ae uppnå dessa med systemet (webbplatsen) The user's way to think and interpret User s goals S3muli Feedback Gulf of evalua3on Tolkningsgap (Gulf of evalua3on) Avstånd mellan systemets Reac3on Response (webbplatsens) representa3on och användarens mål Physical system Gulf of execu3on Ac3on Designer's representa3on of the goals Informa3onsarkitekten (webbdesignern) bör sträva erer ae dessa gap blir så små som möjligt Preece, J., et al. (1994) Human- Computer InteracFon, Addison- Wesley 5
InterakFonsdesign Garrett (2011, s. 83-88) tar upp:" Conceptual Model (konceptuell modell, begreppsmodell)" Användarnas föreställning, beteende" Konvention, hur man vanligen gör" Error Handling (hantering av användarens fel )" Hur hanterar vi situationer där användaren kan göra fel?" Förhindra" Rätta" Återställa" GarreE, J. J. (2011) The Elements of User Experience, 2nd edifon, New Riders 6
InformaFonsarkitektur Organisera Dela upp och gruppera i kategorier Var ska olika delar av informa3onen finnas? Strukturera Bestäm lämplig indelning av informa3onen i dokument, objekt, etc. Bestäm rela3onen mellan delarna På vilka sidor och var på sidorna ska informa3onen finnas? 7
HiMa informafon Användare vill snabbt hiea den informa3on de söker Användare vill också snabbt kunna se om det de söker ej finns på webbplatsen Olika utgångspunkter Användare: vet vad de söker och vad det heter jag vill ha informafon om TV- apparater vet ungefär vad de vill ha, men ej vad det heter finns det någon mojäng för am koppla ihop datorn och TV:n? vet ej vad de vill ha det här verkar vara intressant, finns det något användbart för mig? 8
Tolkningsproblem vid organisering Viss info kan höra hemma i flera kategorier T.ex. en webbplats om filmer där man delat in i ac3on, drama, komedi, thriller, etc. Var placerar man en ac3onkomedi? Rubriker och organisa3on kan tolkas olika av olika personer Den som utvecklar webbplatsen kanske har ee annat perspek3v än användarna. Förstår användarna vad som menas? Olika typer av informa3on (heterogen informa3on) T.ex. en fotoklubb har informa3on om fototeknik: 3ps och råd kameror: test av ee antal kameror fotografer: reportage om några kända fotografer Kan vara svårt ae veta vad som finns bakom rubrikerna 9
OrganisaFonsscheman Otvetydiga (exakta) T.ex. alfabe3sk, kronologisk, geografisk Bra då man vet vad det man letar erer heter, eller var det hör hemma i organisa3onen Tvetydiga T.ex. ämne Bra då man inte exakt vet vad man letar erer, eller vad det heter Erbjud, om möjligt, flera alterna3va säe ae hiea fram 10
Strukturering Uppdelning i informa3onsobjekt (webbsidor eller delar av dem) och navigeringslänkar mellan dem Några exempel på strukturer: Linjär Cirkulär (Ring) Träd (Hierarkisk) GarreE, J. J. (2011) The Elements of User Experience, 2nd edifon, New Riders, s.92f Felke- Morris, T. (2012) Basics of Web Design, Addison- Wesley Educa3onal Publishers Inc., s.72f 11
Övning Studera organisa3on och struktur på t.ex. följande webbplatser: hep://www.coop.se hep://www.skaeeverket.se hep://www.kalmarlansmuseum.se hep://amazing- space.stsci.edu/resources/explora3ons/groundup Exempel på frågor: Hur är webbplatserna organisreade och strukturerade? Vad är det för skillnad på organisa3on och struktur? Vilken funkionalitet finns? Vad är karaktäris3skt för webbplatserna? Vad finns det för likheter och skillnader?... ta fram egna frågor (baserat på det som tas upp i kurslieeraturen). 12