Webbteknik Användarcentrerad design Structure plane (tredje nivån) Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se
" our concerns shi? from more abstract issues of strategy and scope to the concrete factors that will determine what users finally experience." Structure plane (GarreG, 2011, s. 80) Vad/hur ska användaren göra för ag upöra "uppgirer"? Hur ska informavonen organiseras och struktureras? Vad/Hur? Vad? GarreG, J. J. (2011) The Elements of User Experience, 2nd edi<on, New Riders 2 Varför/Vem?
Interak<onsdesign och informa<onsarkitektur InterakVonsdesign och informavonsarkitektur handlar Vll stor del om: " understanding people the way they behave and think." (GarreJ, 2011, s. 81) Hur vill vi att det ska fungera för användaren?! Möjlig konflikt Hur uppfattar användarna vad och hur man gör?! GarreG, J. J. (2011) The Elements of User Experience, 2nd edi<on, New Riders 3
Interak<onsdesign "Interac<on design is concerned with describing possible user behavior and defining how the system will accommodate and respond to that behavior." (Garret, 2011, s.81) The user's way to think and interpret User s goals SVmuli Feedback Gulf of evaluavon UPörandegap (Gulf of execuvon) Avstånd mellan användarens mål och möjlighet ag uppnå dessa med systemet (webbplatsen). Tolkningsgap (Gulf of evaluavon) Avstånd mellan systemets (webbplatsens) representavon och användarens mål. ReacVon Gulf of execuvon AcVon Response Physical system Designer's representavon of the goals GarreG, J. J. (2011) The Elements of User Experience, 2nd edi<on, New Riders Preece, J., et al. (2015) InteracVon Design: Beyond Human- Computer InteracVon, Wiley 4
Informa<onsarkitektur "On content sites, informa<on architecture is concerned with crea<ng organiza<onal and naviga<onal schemes that allow users to move through the site content efficiently and effec<vely." Organisera Dela upp och gruppera i kategorier. Var ska olika delar av informavonen finnas? (Garret, 2011, s.89) Strukturera Gör lämplig indelning av informavonen i dokument, objekt, etc. Bestäm relavonen mellan delarna. Intern struktur på sidorna. GarreG, J. J. (2011) The Elements of User Experience, 2nd edi<on, New Riders 5
Uppdelning i informavonsobjekt (webbsidor eller delar av dem) och navigeringslänkar mellan dem. Strukturering Några exempel på strukturer: Linjär Cirkulär (Ring) Träd (Hierarkisk) GarreG, J. J. (2011) The Elements of User Experience, 2nd edi<on, New Riders, s.92-95 Felke- Morris, T. (2015) Basics of Web Design HTML5 & CSS3, Third edivon, Addison- Wesley EducaVonal Publishers Inc., s.72-73 6
Användare vill snabbt higa den informavon de söker HiJa informa<on Användare vill också snabbt kunna se om det de söker ej finns på webbplatsen Användare har olika utgångspunkter Exempel: Användare Vll en webbplats för en elektronikbuvk vet vad de söker och vad det heter "jag vill se vilka 40'' TV- apparater som finns här" vet ej vad de vill ha "det här verkar vara intressant, finns det något användbart för mig?" vet ungefär vad de vill ha, men ej vad det heter "finns det någon 'mojäng' för aj koppla ihop datorn och TV:n?" 7
Tolkningsproblem vid organisering Viss info kan höra hemma i flera kategorier T.ex. en webbplats om filmer där man delat in i acvon, drama, komedi, thriller, etc. Var placerar man en acvonkomedi? Rubriker och organisavon kan tolkas olika av olika personer Den som utvecklar webbplatsen kanske har eg annat perspekvv än användarna. Förstår användarna vad som menas? Olika typer av informavon (heterogen informavon) T.ex. en fotoklubb har informavon om fototeknik: Vps och råd kameror: test av eg antal kameror fotografer: reportage om några kända fotografer Kan vara svårt ag veta vad som finns bakom rubrikerna Rosenfeld, L. & Morville, P. (2007) Informa<on Architecture for the World Wide Web, 3rd edi<on, O'Reilley 8 Bild från Master isolated images at FreeDigitalPhotos.net
Exemplet med fotoklubben i föregående föreläsningar. Exempel Krav på innehåll Beskrivning av vad medlemmar erbjuds Föreningsstadgar PresentaVon av styrelsen Bild, namn, epost, telefon KontaktuppgiRer Epost, adress, kontaktperson Bild på klubblokal Kalendarium med alla akvviteter, både för medlemmar och öppna Protokoll från möten Bildgalleri med möjlighet Vll olika kategorier Bildreportage från föreningens fotoutställningar Länklista Aktuellt, t.ex. fototävling Krav på funkvonalitet Fylla i formulär för ag bli medlem I kalendariet markeras om akvviteter är för medlemmar eller öppna Bilder ska visas i en storlek anpassad Vll användarens enhet (dator, mobil) Bilderna ska vara möjliga ag visa i originalupplösning Alla sidor ska fungera i olika enheter (dator, mobil) All text ska följa den terminologi och språkbruk som finns i föreningens övriga informavonsmaterial 9