Grundläggande teori för användargränssni3, del 1

Innehåll Mentala och konceptuella modeller (Kap 2.3) Metaforer (Kap 2.4) Donald Normans designprinciper (Kap 1.6.3)

Mentala och konceptuella modeller

Mentala och konceptuella modeller Designerns mentala modell Systemets konceptuella modell Användar- gränssni3 Användarens mentala modell System

Vi uoormar en dörr som öppnas med en fotocell! SJ:s tågdörrar

...men folk begriper sig inte på fotoceller så vi gör en låtsasknapp istället! Låtsasknapp Dörr

Ibland reagerar inte fotocellen Huh? Jag trycker men inget händer? Gör jag fel? Är dörren trasig? Låtsasknapp Dörr

Varför inte erbjuda en mer korrekt konceptuell modell från början? De3a är en dörr som öppnas med en gest.

Donald Normans kylskåp Donald Norman, The Design of Everyday Things, sid. 13-17

Vilken konceptuell modell erbjuder de3a användargränsni3? Kylens temperatur kontrolleras med e3 reglage och frysens temperatur med e3 annat reglage.

Den mest kända konceptuella modellen A3 använda en dator är som a3 arbeta på kontor.

Webbu\ker Diskussion: På vilken konceptuell modell bygger de flesta webbu\ker?

I projektet: Vilken eller vilka konceptuella modeller bör ni erbjuda era användare?

Metaforer

Vad är en metafor? l Inom li3eraturen: Min ros, jag älskar dig! l Inom interak\onsdesing: konceptuella metaforer

Defini\on l Mappning mellan två kogni\va domäner, en källdomän och en måldomän Källdomän Metafor Måldomän

Outlook Calendar

Time Machine (Mac OS X)

Varför metaforer? l Används i användargränssni3 för a3 underlä3a för användaren a3 förstå måldomänen. l Kunskap, erfarenheter och begrepp från källdomänen används för a3 organisera innehållet i måldomänen. l En väl uoormad metafor erbjuder användaren en god konceptuell modell.

Problem med metaforer i användargränssni3

Gammal källdomän l En metafor som bygger på en gammal källdomän ak\verar lite eller ingen förkunskap hos yngre användare

Ak\verar olämplig bakgrundskunskap i användarens mentala modell Hur matar man ut diske3en på en gammal Mac?

Hjälper inte användaren a3 hi3a tjänster som är datorspecifika Hur gör man en sökning i en bokhylla?

Riskerar a3 bryta konven\oner och kulturella regler Ha en papperskorg PÅ skrivbordet??

De lider av den fysiska världens begränsningar Vad händer när bokhyllan blir full? Det går snabbare a3 hi3a rä3 bok med en lista.

Begränsar fantasin hos designers a3 komma på nya konceptuella modeller l Skrivbordsmetaforen är nästan 40 år gammal!

... men ändå så kommer användargränssni3 förmodligen bygga på metaforer för en lång \d framöver.

I projektet: Finns det metaforer som erbjuder användaren en god konceptuell modell som ni kan använda er av?

Donald Normans designprinciper Synlighet Feedback Begränsningar (constraints) Konsekvens (consistency) Affordance Mappning Kap 1.6.3 i kursboken

Synlighet

Synlighet Vad man ser och inte ser i e3 användargränssni3. Vägledning \ll vad man ska/kan göra. Understödjer den automa\ska handlingsnivån.

Riktlinjer Göm eller ta bort mindre nödvändiga funk\oner. Knappar bakom luckan.

Riktlinjer En funk\on en kontroll.

Riktlinjer Utny3ja riktlinjer för layout, färg, ikoner, text, gruppering, etc.

Feedback

Feedback A3 återkoppla informa\on \ll användaren om vilka handlingar som gjorts och vad resultatet blivit.

Riktlinjer Varje handling ska ge effekt(er) Vanlig handling liten feedback Ovanlig handling mer feedback Utny3ja människans sinnen Relevanta och begripliga felmeddelanden Delmålsfeedback

Utny3ja människans sinnen Critical stop Notify

Relevanta och begripliga felmeddelanden

Delmålsfeedback

Begränsningar (constraints)

Begränsningar (constraints) A3 begränsa den möjliga interak\on för användaren vid e3 visst \llfälle.

Konsekvens (consistency)

Konsekvens (consistency) Liknande uppgiper bör uoöras med liknande handlingar och objekt. Öppna dialogruta Spara som dialogruta

Affordance

Affordance De upplevda egenskaperna hos e3 objekt. De handlingar e3 objekt tycks inbjuda \ll. Affordance förmedlar ledtrådar \ll användaren.

Hur öppnar man sockerbitsförpackningen?

Vad kan jag egentligen klicka på?

Hur justerar jag \d och effekt?

Riktlinjer för affordance Synlighet vik\g faktor för a3 förmedla rä3 affordance. Begränsningar (constraints) kan utny3jas för a3 begränsa e3 föremåls affordance. Forcing func;ons tvingar användaren a3 uppfa3a en viss sorts affordance.

Begränsningar och forcing func;ons

Donald Norman: Upplevd och verklig affordance Verkliga objekt har verklig affordance som inte behöver läras in. Virtuella objekt saknar verklig affordance. Kan vara olämpligt a3 designa för verklig affordance i e3 datoranvändargränssni3!

Verklig vs. virtuell almanacka

Mappning (ej med i kursboken)

Mappning

Mappning Rela\onen mellan någon egenskap hos e3 objekt och dess funk\on.

Riktlinjer Sträva eper naturlig mappning! God synlighet är e3 grundkrav för a3 mappningen ska kunna bli bra.

Naturlig mappning A3 dra fördel av fysiska liknelser, kulturella standarder och generella biologiska förhållanden för a3 stödja en enkel, omedelbar och entydig förståelse.

Fysiska liknelser

Kulturella standarder

Biologiska förhållanden

Designsteg 2: Konceptuell design Tekniksystemets/användargränssni3ets övergripande struktur och konceptuella modell. Användarens mentala modell. Metaforer. Gruppering av tjänster i naturliga grupper. Språkbruk/terminologi. På denna nivå ska ni börja uoorska designrymden, dvs. ni ska arbeta med flera olika alterna\va lösningar (parallell design), genom a3 varje gruppmedlem tar fram var si3 designkoncept i form av skisser.

Designsteg 2: Konceptuell design OBS! Ni jobbar foroarande med ALLA de tjänster ni få3 fram i designsteg 1! Applika'onens samtliga tjänster ABSTRAKT VISION, ANVÄNDARSTUDIE & TJÄNSTER KONCEPTUELL DESIGN Två tjänster LO- FI- PROTOTYPING KONKRET HI- FI- PROTOTYPING

A3 maila \ll handledaren Text om punkterna ovan. Era skisser. Deadline 17 januari, kl 23.59.