9/9/10 

1 

Design av användargränssni1 

Jan Gulliksen 

Processen snarare än produkten 

•  Analys     ‐> 

•  Design     ‐> •  Utvärdering  ‐> •  Återkoppling ‐> 

•  IteraCv •  Inkrementellt 

Design Utvärdering

Återkoppling Analys

9/9/10 

2 

Analys •  Användaranalyser 

–  Vilka användare har vi? (demografi) 

–  Vad har dessa användare för mål, krav och behov? 

–  Hur ser situaConen ut idag? –  Är IT egentligen lösningen på deras problem? (OUast inte!) 

•  UppgiUsanalyser –  Användningsfall och andra formella notaConer 

–  InformaConsanvändningsanalys 

•  DokumentaCon –  Samla kopior av alla dokument  

 som används 

–  Fotografera mycket 

–  Videofilma 

Analys

Design/Prototyper 

•  Skissernas styrka •  Parallell design •  KreaCvitetshöjande åtgärder •  Deltagande design 

Design

9/9/10 

3 

Utvärdering •  Exper1yckande tämligen värdelöst 

•  Enkäter ger tvivelakCga resultat och är arbetskrävande a1 konstruera och sammanställa 

•  Deltagande metoder där användaren u^ör uppgiUer under det a1 de observeras är klart underska1ade 

•  Utvärdera oUa •  Utvärdera inte när det är för sent!                        

– FormaCva utvärderingar                              framför summaCva 

Utvärdering

Återkoppling •  Fa1a medvetet beslut baserat på resultaten 

•  Dokumentera inte för mycket 

•  Visa video 

•  Deltag i överlämnandet förklara/förstå/lös problemen •  Tala inte bara om a1 något är fel utan även varför! 

•  Tveka inte a1 föreslå alternaCva lösningar 

•  Ödmjukhet och respekt 

Återkoppling

9/9/10 

4 

Standarder och riktlinjer 

•  Standarder är riktlinjer som formaliseras eUersom de anses som Cllräckligt vikCga och använda 

•  Riktlinjer (Guidelines) är vägledande vid lösning av designproblem 

Standarder 

•  De Facto (emacs, QWERTY, TCO‐95) 

•  Kommersiella (MicrosoU, IBM CUA, OSF/MoCf) •  Formella (ANSI kompilatorer, Fortran77) 

Gränssni1sstandarder baseras på användbarhet och beteende, inte på produk1ekniska aspekter. 

9/9/10 

5 

Standardiseringsorgan 

•  ISO (InternaConal Standards OrganisaCon)  ideell organisaCon, medlemmarna betalar för a1 få vara med. 

•  NaConella motsvarigheter STG (Sverige), ANSI (USA), BSI (England), etc. 

 genomför, kommenterar ISO‐standarderna 

InternaConella standarder 

•  ISO 9241 Ergonomic requirements for office work with visual display terminals. Del 1‐17  –  Part 110 – Dialogue design principles –  Part 11 – Guidance on usability,  –  Part 12 – PresentaCon of informaCon. 

•  ISO 9241‐210 (Cdigare 13407) Human centred design process for interacCve systems. 

•  ISO/IEC 14915 MulCmedia user interface design.  •  ISO/TS 9241‐171 (Cdigare 16071) Guidance on soUware 

accessibility. •  ISO/IEC 11581 Icon symbols and funcCons. 

9/9/10 

6 

ISO 6385 Ergonomic principles in the design of work system

Ergonomics produces and integrates knowledge from the human and technology sciences to match jobs, systems, products and environments to the physical and mental abilities and limitations of people. In doing so it seeks to safeguard safety, health and well-being whilst optimising efficiency and performance

Design av användargränssni1 

Jan Gulliksen 

9/9/10 

7 

SkärmdisposiCon och layout 

•  Skärmytan är en begränsad resurs 

•  Behövs verkligen all informaCon som finns på sidan? 

•  Hellre för mycket informaCon än för lite 

•  SamCdig informaConsvisning kontra sekvenCell •  Överblick och detalj 

•  Metaforer 

•  Kollisionen mellan hypertext och skrivbordsmetaforen ‐ eller vem har fönster på si1 skrivbord? 

•  Mönsterigenkänning 

•  Undvik a1 rulla text – tag vara på spaCal informaCon 

Vilken information är viktig?

9/9/10 

8 

Hur effek(vt har du utny0jat skärmytan? 

9/9/10 

9 

9/9/10 

10 

U^orma sin text 

•  Stöd skannade! –  Talande rubriker –  Kort sammanfa1ning –  Dela upp texten 

•  Tomrum mellan avsni1 •  Korta avsni1, tydliga rubriker 

–  Framhäv nyckelord •  ..som länkar •  ..som fetsCl •  ..som punktlista 

9/9/10 

11 

InformaConsvisualisering 

•  Skapa effekCva informaConsmönster 

•  Färg, form, placering, inbördes relaCon etc. bidrar Cll användarnas uppfa1ning 

•  Stöd kogniCvt automaCserad informaConsbehandling 

Visualisering av Napoleons marsch mot Moskva 

9/9/10 

12 

Treemap VisualizaCon 

9/9/10 

13 

9/9/10 

14 

9/9/10 

15 

Hur ska man utny0ja skärmytan? 

9/9/10 

16 

InformaConskodning 

•  Ge färger, former, fonter, platser betydelse 

•  AkCvt, valbart, ej valbart •  Avvikande data, relaConer mellan data, kategorisera, etc.. 

•  Var konsekvent •  Starka koder för vikCg informaCon 

•  Lås val av koder •  Använd starka koder sparsamt 

Inmatning 

•  Mänsklig inmatning är en långsam process 

•  Typiska uppgiUer –  Kan användaren överhuvudtaget göra uppgiUen? –  Hur lång Cd tar det? –  Hur mycket Cd är vänteCd och hur mycket tänkeCd? 

–  Hur mycket fel gör användaren? 

–  Kan man återhämta sig fullständigt från felen? –  Hur lång Cd tar det a1 återhämta sig? 

–  Hur pass säker är användaren på a1 man kommit fram Cll rä1 resultat? 

–  etc. 

–  Hur Cllfredsställande upplever användaren a1 det är? 

9/9/10 

17 

Vad är det MEST avgörande problemet? 

  Brister i SÖK-funktionen eller visualiseringen av sökresultaten

  Webbplatsen återspeglar den organisatoriska strukturen

  Den enorma mängden information som återfinns på webbplatsen - hur åskådliggöra den?

  Case: Uppsala universitet

Vad skulle ni mata in här? 

9/9/10 

18 

Knappar och ikoner 

•  Bra om ikonen är självförklarande •  Bä1re med enkla än detaljrika ikoner 

•  Gruppera logiskt 

•  Konsekvens vad gäller utseende – funkCon •  Tillräcklig träffyta 

•  Knappar som används i sekvens nära varandra 

•  Sammanhanget är vikCgt •  Miniatyrer kan fylla e1 behov 

9/9/10 

19 

Vad betyder följande ikoner? 

9/9/10 

20 

Återkoppling, felmeddelanden •  A1 visa vad som händer •  VikCgt för säkerhet •  Tangentnedtryckning, vänteCd, vilket Cllstånd 

•  Tydliga, informaCva felmeddelanden 

Exempel på ej informaCva felmeddelanden 

•  E1 fel av typen 3 inträffade. •  OgilCgt värde. •  OCllåten handling. •  Programmet ”okänd” har avslutats på grund av e1 oväntat fel. 

•  Illegal error. 

9/9/10 

21 

FATAL ERROR!

illegal operation

File not found

OBJECT NOT FOUND

9/9/10 

22 

Sammanfa1ning riktlinjer för design 

•  Utny1ja skärmytan effekCvt, hellre för mycket än för litet 

•  SamCdig informaConsvisning allCd effekCvare än sekvenCell informaCon 

•  Minimera inmatning 

•  Gör designen klar och begränsa användarens frihet. •  Skapa effekCva informaConsmönster 

9/9/10 

23 

Y1erligare designregler 

•  Betona intressant, tona ned ovikCgt. •  Visa översikt och detalj samCdigt 

•  Undvik skrollning av text •  Det finns ingen kunskap i världen som kan ersä1a användarsynpunkter 

HAIKU by Else Nygren 

”For every design rule one can find 

 at least one situa4on  where following the rule 

would be  sheer madness”