Interaktion 1
Boken Typer av interaktion (Kap 2.5) Typer av användargränssnitt (Kap 6.1-6.2) Översikt, navigering och orientering (ej i boken) Felhantering (kort på sid 138) OBS! Konkret interaktion är inte bokens starka sida. OBS! Jag har skrivit fel kapitel i kursprogrammet Uppdaterad version kommer.
Typer av interaktion
Instructing Conversing Manipulating Exploring Fyra grundläggande typer av interaktion ta denna väldigt grova indelning med en REJÄL nypa salt. Verkligheten är oerhört mycket mer komplex.
Instructing Kommando-baserad interaktion, menyer, knappar etc.
Conversing The user has a dialog with the system
Manipulating The user interacts with objects by directly manipulating them
Exploring Virtual reality, augmented reality, ambient environments etc.
Typer av användargränssnitt
Typer av användargränssnitt Command-based WIMP and GUI Multimedia Virtual reality Information visualization Web Consumer electronics and appliances Mobile Speech Pen Touch Air-based gesture Multimodal Shareable Tangible Haptic Augmented & mixed reality Wearable Robotic Brain-computer
Kommandobaserad interaktion
Kommandobaserad interaktion
AutoCAD
Kommandobaserad interaktion + Snabbt för vana användare
Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt
Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter
UNIX
Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande
Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande Hög felfrekvens
Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande Hög felfrekvens Svårt att komma igång med
WIMP
The Xerox Star Interface Utvecklades 1973 av Xerox PARC i Palo Alto, Kalifornien Mål: användargränssnitt som alla kan klara av
WIMP Windows Icons Menues Pointing device
WIMP + Lätt att lära, lätt att minnas
WIMP + Lätt att lära, lätt att minnas Rikligt med feedback
WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande
WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ibland ta onödigt mycket skärmyta
WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner
WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation
WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation Tidsödande byta styrdon
Graphical User Interface (GUI) Vanliga GUI-komponenter Fönster Dialogrutor Formulär Menyer
Fönster
Fönster
Fönster För att överkomma skärmens begränsade yta Översikt, navigering och orientering försvåras Att växla mellan olika fönster är en av de vanligaste operationerna när vi interagerar med ett datorsystem Att designa bra fönsterhantering är svårt!
Alt + Tab
Exposé (Mac OS X)
Windows Flip 3D
Windows 8 Bara ett fönster av samma program öppet på samma gång
Dialogrutor
Dialogrutor
Spara som i tidig Office-version
Spara som i Office Xp
Dialogrutor Visuell organisation viktigt! Man pratar ibland om mappning av handlingssekvens dvs. att styra användarens uppmärksamhet och handlingar så att han/hon gör saker och ting i rätt ordning.
Dialogrutor med tabbar Utrymmeseffektiv metod Översikt, navigering och orientering försvåras (speciellt om flera rader av tabbar används)
Formulär
Formulär
Riktlinjer för formulär
Högerjustera titlar
Tillåt smidig navigering
Ge tydlig feedback när fält har fyllts i fel
Menyer
Menyer
Menyer Bygger på principen att vi har lättare för att känna igen än att dra oss till minnes (recogntion over recall)
Generella riktlinjer för menyer
Presentera relevanta val
Bättre gråmarkera än ta bort Positional constancy: Saker och ting bör befinna sig där vi är vana vid att hitta dem
Lägg mest använda valen överst, minst använda nederst
Dela in valen i naturliga grupper
Undvik väldigt långa listor
Använd genvägar
Olika typer av menyer Drop-down-meny Cascading drop-down-meny Pop-up-meny Pajmeny Menyer för långa listor Adaptiva menyer
Drop-down-meny
Cascading drop-down-meny Ger tillgång till många val Kräver bra motorisk kontroll Kan vara omöjliga att använda för personer med funktionsnedsättning samt för äldre människor
Pop-up-meny
Pop-up-meny Snabbare att nå än topp-placerad drop-down-meny Speciellt lämpliga för large wall displays
Pajmeny
Pajmeny Går snabbare att välja Man kan välja utan att titta (muskelminnet) Callahan et al (1988)
Menyer för långa listor: fisheye-meny
Menyer för långa listor: fisheye-meny Kan öka hastigheten. Inte alla uppskattar dem och de rekommenderas därför inte som defaultmeny.
Menyer för långa listor: iphone datepicker
Adaptiva menyer De minst använda valen visas ej Fungerar bra för en del användare men väcker starkt ogillande hos vissa användare Bör ej användas som defaultinställning
Andra typer av användargränssnitt Mobile Touch Air-based gesture Multimodal Haptic Mixed & augmented reality Virtual reality dessa kan man studera i kurserna Avancerad interaktionsdesign och Virtual Reality i teori och praktik
Översikt, orientering och navigering
Översikt: Vad finns? Orientering: Var är jag? Navigering: Hur kommer jag dit jag vill?
Översikt: vad finns? Ge användaren en översikt över vad produkten erbjuder Tätt kopplat till synlighet (Norman)
Översikt i Handbrake
Översikt i Handbrake Lätt att missa möjligheten att använda presets Denna del tar väldigt mycket av användarens uppmärksamhet i anspråk
The F-shaped pattern
The F-shaped pattern Hur vi läser webbinnehåll Nästan 70% av läsarens fokus ligger till vänster i vyn 1. 2. Det vanligaste läsmönstret: 1. Horisontell ögonrörelse #1 2. Horisontell ögonrörelse #2 3. Vertikal ögonrörelse 3.
Orientering: var är jag?
Navigering: hur kommer jag dit jag vill?
Felhantering
Vad är ett fel? Handhavandefel Misstag (man tänker fel) Slip (man tänker rätt, men gör fel) Systemfel
Upptäckt-diagnos-åtgärd Hur lätt eller svårt är det att upptäcka felet/problemet och hur lång tid tar det? Hur lätt eller svårt är det att diagnostisera felet/problemet? Hur tydligt framgår det vilken åtgärd som är rätt (t ex klicka på undo-knappen eller ringa tekniker för service)?
Principer för god felhantering Synlighet (gör rätt saker synliga) Feedback (bra & begriplig) Vettig layout (rätt saker på rätt plats: mappning) Reversibilitet (markera om något ej är reversibelt + man ska bara behöva ändra/reversera det som är fel) Överväg så kallade forcing functions
Riktlinjer för design av felmeddelanden Upplys med artig ton användaren om vad han/hon behöver göra för att åtgärda felet. Undvik ord som FATAL, ERROR, INVALID etc. Undvik långa felkoder och stora bokstäver. Ljudfeedback ska användaren själv kunna ställa in, eftersom de kan orsaka förlägenhet hos honom/henne. Ge exakt information. Erbjud en hjälpikon med vilken användaren kan få kontextberoende hjälp. Erbjud information på olika nivåer så att kortare meddelanden kompletteras med längre förklaringar.
Vad tycker ni om den här?