Designmetodik

Systemering med användarfokus

Malin Pongolini

Malin P (omarb från Snis)

ACD metoden: faserna

Analys Användaranalys

Uppgiftsanalys

Kravställande Användbarhetskrav

Funktionalitetskrav

Design Prototyping

Utvärdering

Malin P (omarb från Snis)

Upplägg för Design och Protyping

Evolutionär utveckling

- iterativ design

konceptuell design

interaktionsdesign

detaljerad design

Användningsscenarier

mock-up:s,

pappersskisser

designmöten

workshops

Vad? Hur?

Prototyper, inkrement

Kriterielistor, designguidelines

navigeringsstruktur

Dokumentationssätt?

Malin P (omarb från Snis)

Håll kvar vid ACD:s karaktärsdrag!

Användarfokus

involvera användare genom hela processen

kunskap och utbildning efter hand

empirisk mätning (verklig mätning/studie av användare, ej antaganden!)

Prototyping

iterativ utveckling

inkrementell utveckling

integrerad utveckling

tidig test och utvärdering

Malin P (omarb från Snis)

Användarnas roll

”When an artifact has been constructed and put to use,

people change it, adjudting it to their needs. Once an

artifact leaves the hands of the professional constructor,

it begins to evolve.”

(Dahlbom & Mathiasen, 1993, s 73)

Malin P (omarb från Snis)

VAD ska man “designa” och “prototypa”?

Design av “artefakten” (tekniken)

Design av “innehållet” (informationen)

Design av “utformningen” (interaktionen, bilden, ljudet)

Design av “testsituationen” (interaktionen)

…

Experiment och prototyping!

Malin P (omarb från Snis)

Design av tekniken

Prototypens utseende

Hörlurar/headset och knappar/reglage

Skärmstorlek/upplösning

Greppvänlighet/form

Färg/kontrast

Prototypens funktionalitet

Av/på

Start/stop - nästa/förra

Hoppa framåt/bakåt

Hastighet

Höja och sänka tonläget

Touch-teknik

Malin P (omarb från Snis)

Interaktionsdesgin

skärmbildslayout

dialoginteraktion

gränssnittsdesign

GUI-Graphical User Interface grafiska användargränssnitt

… kärt barn har många namn

Design av interaktionen. Design av gränssnittet

Malin P (omarb från Snis)

Design av gränssnitt

utgår från användningsfall och kravspecifikation

designa rätt dialogform för de önskade funktionerna och användbarheten

designa rätt gränssnittskontroller och element i vald dialogform

tidig test och utvärdering av användbarheten (mått)

Syftet med gränssnittskomponenter???

Malin P (omarb från Snis)

Tekniska genombrott inom GUI

och gränssnittsdesign

Mus, Fönster, Ritprogram (Englebart ~1965)

Virtual reality (Sutherland ~1968)

Hypertext (Bush ~1945, Nelson ~1960)

Smalltalk miljöer (Key ~1975)

Inmatningsdon (Card ~1978)

Direktmanipulation (Schneiderman ~1982)

Informationsvisualisering (Card, Schneiderman,…)

fokus på information

World Wide Web

behov: informationsöverflöd, tekniska mekanismer

Malin P (omarb från Snis)

Flera interaktionsparadigm och interaktionssätt

Hypertext-interaktion

Röstigenkänning

Känsel/beröring-applikationer

Mobile computing

Wearable computing

Smart materials

Etc…

Malin P (omarb från Snis)

GUI bygger bl a på

WYSIWYG (What You See Is What You Get)

WIMP-komponenter (Windows, Icons, Menues,

Pointers)

Kontroller (knappar, listboxar, inmatningsfält,

radioknappar, kryssrutor, bläddringslist,

verktygsfält)

Andra hypertextkomponenter (länkar, noder)

Designmetodik -tekniker och principer

Systemering med användarfokus

Malin Pongolini

Malin P (omarb från Snis)

Metoder för design och prototyping

Kontext-baserad design

Konceptuell design

Knep&Knåp workshop

Brainstorming

Interaktionsdesign

Scenarier och Storyboards

Prototyping

M fl…

Malin P (omarb från Snis)

Hjälpmedel och tekniker

Papper, penna, tejp, sax, post-it, kritor, etc

Konceptuella modeller

Prototyper

Storbildsskärm (projektor), videoinspelning/uppspelning

Programvaror (rit/layoutprogramvaror etc)

Rollspel

Designprinciper (färdiga guidelines)

Designkriterier (identifierade designkrav)

etc

Malin P (omarb från Snis)

Konceptuella modeller

Koncept

Allmän idé om hur en produkt (system/webbplats) eller

verksamhet bör se ut och fungera

Konceptualisering

Att uppfatta och beskriva något m h a begrepp eller

bilder som tillsammans utgör en meningsfullhet

Metaforer

skrivbordsmetaforen, forum-metaforen, köpprocessen

(kunvagn/kundkorg) etc…

Malin P (omarb från Snis)

Skrivbordsmetaforen

Utnyttjar användarens tidigare kunskap

Skrivbordet

Mappar

Kan förvirra om den inte stämmer till 100%

Papperskorgen på bordet

E-postmetaforen (jmf. postgång)

Fungerar när 2 korresponderar

När flera gör det är mötesmetaforen bättre

Malin P (omarb från Snis)

Konceptuella modeller

metaforiskt tänkande (att tänka i liknelser med ting)

analogiskt tänkande (att tänka i liknelser med tidigare kunskaper och erfarenheter = överensstämmelsegraden…)

överlappningsgrad?

ursprungsdomän

källdomän

tillämpningsdomän

måldomän

Malin P (omarb från Snis)

DesignModel

User’sModel

Designer User

System

Systemimage

Konceptuella modeller

Designerns och användarens konceptuella modell

stämmer inte alltid överens

Används olika mycket och på olika sätt

Malin P (omarb från Snis)

Designprinciper

Ge användaren feedback

Vanligtvis genom olika typer av dialogrutor

Felmeddelanden

Systemets läge

Processer

Använd användares erfarenhet

Utnyttja användarnas erfarenhet och förkunskaper

Malin P (omarb från Snis)

Designprinciper

T ex för ”Användarhjälp”…

Felmeddelanden

Hjälp F1

Användardokumentation (manual)

T ex för ”Användarfel”…

Användare gör fel

Vi kan inte styra det, men vi kan styra följderna Inga klagomål betyder inte inga problem

Användare skyller på sig själva

Försök att förutse tänkbara problem som kan uppstå

Ctrl + z - Det bör vara möjligt att ångra ett val: underbart ;-)

Styrande funktioner - bör inte användas i onödan

Malin P (omarb från Snis)

Systemorienterat felmeddelande

Malin P (omarb från Snis)

Användarorienterat felmeddelande

Malin P (omarb från Snis)

Designprinciper för t ex GUI...

enligt CUA-standard

Alla val i menyraden ska vara vägalternativ

Menyvalen bör ges lämpliga sammanfattande namn

Ordningen på menyvalen bör vara: Arkiv, Redigera, Vy, Tillval, Fönster, Hjälp

I rullgardinsmenyn bör alternativen grupperas rätt

Pop-up meny ska endast avse egenskaper för det aktuella objektet

I vissa situationer ska otillgängliga kommandon skuggas

Kommandon som följs av dialogrutor ska ha ... efter sig

Kommandon som följs av kaskadmeny ska ha pil efter sig

Bakom vissa kommandon ska motsvarande tangentbordskombination anges

MENYER

Malin P (omarb från Snis)

Bakgrundsfärg på inmatningsfält bör skiljas från icke inmatningsfält

Listboxar bör visa 6-8 alternativ och kompletteras med en rullningslist

Använd knappar då det endast finns få funktioner

Frekventa funktioner kan tilldelas både knappar och menyval

Visa defaultvärden på de vanligast förekommande alternativen

Placera knappar med början längst ned i vänstra hörnet och endast på en rad

Var konsekvent!

Tänk på färgblinda!

INMATNINGSFÄLT OCH LISTBOXAR

KNAPPAR OCH RUTOR

FÄRGSÄTTNING OCH PLACERING

Designprinciper för t ex GUI...

enligt CUA-standard forts.

Designprinciper. Inmatningsfält och listboxar

Malin P (omarb från Snis)

Malin P (omarb från Snis)

Designprinciper. Ikoner

Ikoner är små bilder som används för att

representera system objekt, verktyg osv.

Den begränsade storleken gör det ofta

svårt att skapa bra ikoner

Malin P (omarb från Snis)

away

not available

mobile phone

Designprinciper. Awareness

Indikatorer:

External representations