Design af brugergrænseflader Fokus på strategisk arbejde med brugergrænsefladedesign samt heuristisk evaluering / ekspertvurdering Usability - 25. oktober 2006 Ian Wisler-Poulsen iwp@itu.dk

Agenda Opfattelse af Design og Usability Øvelse: Fjernbetjening Visuelle Virkemidler til Brugergrænseflader Øvelse: Hjemmeside

Spørgsmål Husk at spørge! …og husk at svare!

Visuel kommunikation

Arkitektur Vitruvius: Form Struktur Funktion Litteratur: Webgenre og stilarter, Engholm & Klastrup

Industrialismen og moderne design Form Konstruktion Funktion Litteratur: Webgenre og stilarter, Engholm & Klastrup

Usability Funktionalitet Effektivitet Tilfredshed (efficiency) (effectiveness) Tilfredshed (satisfaction) ISO DIS 9241-11 John Paulin Hansen

Pålidelighed og troværdighed Topic of Credibility Comment Incidence Design Look 46,1 % Information Design / Structure 28,5 % Information Focus 25,1 % Company Motive 15,5 % Usefulness of Information 14,8 % Litteratur: How Do Users Evaluate the Credibility of Web Sites?, B.J. Fogg et al.

- it’s the way you said it! Grafisk Design It’s not what you said, - it’s the way you said it!

Alt som bliver sanset ved det pågældende produkt Grafisk Design Indhold Det, som bliver sagt Form Måden det siges på Oplevelsen Alt som bliver sanset ved det pågældende produkt

Vi har byens fineste restaurant Grafisk Design Indhold (det som de siger): Vi har byens fineste restaurant Form (måden de siger det på):

Det handler om oplevelse Web-design Curt Clooninger: Det handler om oplevelse Litteratur: Fresh Styles, Curt Clooninger

Vi går ikke på restaurant fordi vi er sultne! Web-design Vi går ikke på restaurant fordi vi er sultne!

Vi køber ikke både for at sejle fra Odden til Ebeltoft. Web-design Vi køber ikke både for at sejle fra Odden til Ebeltoft.

Visuelle Virkemidler Det er helt naturligt!

Aesthetic-Usability Effect Æstetisk design opfattes som værende lettere at anvende end mindre æstetisk design. Litteratur: Universal Principles of Design, p. 18

Aesthetic-Usability Effect

Proximity / Loven om Nærhed De elementer, der er anbragt tæt på hinanden (i forhold til andre elementer) opfattes som hørende sammen. Litteratur: Smukkere grafisk design, p. 44 Stram op på dine websider, kap. 2 Universal Principles of Design, p. 160

Proximity / Loven om Nærhed

Proximity / Loven om Nærhed

En teknik, hvor man kobler flere enheder samme Chunking En teknik, hvor man kobler flere enheder samme til en begrænset mængde ”klumper” (chunks). På den måde er informationen lettere at behandle og huske. Litteratur: Stram op på dine websider, kap. 2 Universal Principles of Design, p. 30

Chunking

Chunking 4526604910 (+45) 26 60 49 10

Chunking

De elementer, der er lukket inde (af kasser eller streger) Lukkethed De elementer, der er lukket inde (af kasser eller streger) opfattes som samhørende elementer. Litteratur: Smukkere grafisk design, p. 46 Stram op på dine websider, kap. 2

Lukkethed

Lukkethed

Farver kan anvendes til at tiltrække opmærksomhed, gruppere elementer samt fremme æstetik. Litteratur: Universal Principles of Design, p. 38

Farve

Farve

Farve

Farve

Farve

Hierarkisk organisation er den simpleste struktur for visualisering og forståelse af kompleksitet. … ”Træ”-strukturen illustrerer hierarki ved at placerer underelementer nedenunder og til højre for overelementer… Litteratur: Stram op på dine websider, kap. 1 Universal Principles of Design, p. 104

Hierarki

Hierarki

Hierarki

Et systems brugervenlighed forbedres, Consistency Et systems brugervenlighed forbedres, når ensartede dele har ensartet udtryk. Litteratur: Universal Principles of Design, p. 46

Consistency

Consistency

Elementer der er ensartede, opfattes som værende relaterede Similarity Elementer der er ensartede, opfattes som værende relaterede i højere grad end elementer, der ikke er ensartede. Litteratur: Universal Principles of Design, p. 184

Similarity

Elementer der er placeret på en linie Good Continuation Elementer der er placeret på en linie (ret eller buet) opfattes som værende en gruppe, og opfattes som værende mere sammenhængende, end elementer, der ikke er på en linie. Litteratur: Universal Principles of Design, p. 98

Good Continuation

Good Continuation

Placeringen af elementer bør være således, Alignment Placeringen af elementer bør være således, at kanterne følger fælles linier (lodret eller vandret). …Dette skaber tilhørsforhold og bidrager til det overordnede æstetiske udtryk… Litteratur: Universal Principles of Design, p. 22

Alignment

Den tid det tager at træffe et valg forøges, Hick´s Law Den tid det tager at træffe et valg forøges, når antallet af valgmuligheder forøges. Litteratur: Universal Principles of Design, p. 102

Hick´s Law

Hick´s Law

Hick´s Law

Når et systems fleksibilitet forøges, formindskes dets brugervenlighed Flexibility-Usability Tradeoff Når et systems fleksibilitet forøges, formindskes dets brugervenlighed (og omvendt). Litteratur: Universal Principles of Design, p. 86

Flexibility-Usability Tradeoff

Flexibility-Usability Tradeoff

Øvelse I skal samarbejde med jeres sidemand! Hvilke af de omtale principper kan I finde på denne hjemmeside! Hvordan vurderer I anvendelsen af de pågældende principper!

Litteratur Smukkere grafisk design Henrik Birkvig Grafisk Litteratur, 1999 Stram op på dine websider Kim Pedersen Grafisk Litteratur, 2002 Universal Principles of Design William Lidwell, Kritina Holden & Jill Butler Rockport, 2003