Designmetodik Systemering med användarfokus Malin Pongolini
ACD metoden: faserna Analys Användaranalys Uppgiftsanalys Kravställande Användbarhetskrav Funktionalitetskrav Design Prototyping Utvärdering
Upplägg för Design och Protyping Vad? Evolutionär utveckling - iterativ design konceptuell design interaktionsdesign detaljerad design Hur? Användningsscenarier mock-up:s, pappersskisser designmöten workshops Dokumentationssätt? Prototyper, inkrement Kriterielistor, designguidelines navigeringsstruktur
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
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)
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!
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
Design av interaktionen. Design av gränssnittet Interaktionsdesgin skärmbildslayout dialoginteraktion gränssnittsdesign GUI-Graphical User Interface grafiska användargränssnitt kärt barn har många namn
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???
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
Flera interaktionsparadigm och interaktionssätt Hypertext-interaktion Röstigenkänning Känsel/beröringapplikationer Mobile computing Wearable computing Smart materials Etc
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
Metoder för design och prototyping Kontext-baserad design Konceptuell design Knep&Knåp workshop Brainstorming Interaktionsdesign Scenarier och Storyboards Prototyping M fl
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
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
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
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 ) ursprungsdomän källdomän tillämpningsdomän måldomän överlappningsgrad?
Konceptuella modeller Designerns och användarens konceptuella modell stämmer inte alltid överens Används olika mycket och på olika sätt Design Model Designer User s Model User System System image
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
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
Systemorienterat felmeddelande
Användarorienterat felmeddelande
Designprinciper för t ex GUI... enligt CUA-standard MENYER 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
Designprinciper för t ex GUI... enligt CUA-standard forts. INMATNINGSFÄLT OCH LISTBOXAR 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 KNAPPAR OCH RUTOR 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 FÄRGSÄTTNING OCH PLACERING Var konsekvent! Tänk på färgblinda!
Designprinciper. Inmatningsfält och listboxar
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
Designprinciper. Awareness Indikatorer: External representations away not available mobile phone