Design af brugergrænseflader GUI: Graphical user interface Historisk: www.digibarn.com.

Præsentationer af emnet: "Design af brugergrænseflader GUI: Graphical user interface Historisk: www.digibarn.com."— Præsentationens transcript:

1 Design af brugergrænseflader GUI: Graphical user interface Historisk: www.digibarn.com

2

3

4 Applikation eller Web? Interaktionsdesign Informationarkitektur Typisk en blanding: Web apps, Funktioner på hjemmeside De samme regler gælder begge steder – med variationer Hvem er interesseret i hvad? – hands up!

5 Tidspunkt i udviklingsprocessen Analyse – Design – Evaluering Bridging the Gap Hvordan etablerer vi grænsefladen? Vi har fået/lavet et udgangspunkt... Eller som evaluering (data er reelt de samme – man har bare noget at arbejde ud fra / teste)

6 Metodikker Bottom-up Søren Lauesen: Design af brugergrænseflader og design Baseret på opgaver, vinduer og data Top-down Alan Cooper: Face 2.0 => Personas Mål og motivations-orienteret Modellering af brugeren Behaviours

7 Udgangspunktet Domænet Brugerne Opgaverne Kravspecifikationer Tekniske muligheder/begrænsninger Hvor kommer disse data fra? Har man selv været involveret?

8 Hvordan kommer man igang? Sketches – Bill Buxton Prototyper Flowcharts Wireframes Workshops Er man til top-down eller Bottom-up?

9 Sketches: Det er en kultur...

10

11 Forholdet sketches/prototyper

12 Sketch - prototype

13 Wireframes – en form for sketch A static wireframe or page schematic is a single drawing of an individual page template that shows the information components, especially the navigation, that will appear on a page, in a rough form, so that navigation components can be documented and assessed. The drawing may suggest a basic visual layout, but doesn't commit to any specific appearance.

14 Papirprototyper Vi leger computer!

15 Fordele proces Billigt at lave fejl – fordele ligesom sketches Hurtigt – måske kun dage Behøver ikke at blive til noget 3. lov: Jo mere energi der lægges i en prototype, des mindre lyst til at ændre den. Giver god feedback, inden investering Understøtter hurtigt iterativ udviklingsmetode Danner bro mellem analyse og design (fx. VW)

16 Fordele form Vi er gode til at abstrahere Fokus på opgaven snarere end design og teknik Fremelsker kreativitet – i formsproget Skaber kommunikation i teamet (eller projektgruppe) Kræver ingen tekniske færdigheder og adskiller fra teknologi – alle kan være med

17 Hvor fin/færdig skal min prototype være? Det kommer an på tidspunktet i processen og på hvad den skal afprøve

18

19

20 4 dimensioner af en prototype Bredde – hvor meget af produktet Dybde – hvor detaljeret (horisontal og vertikal) Udseende/finish – Hvor pænt skal det være? Interaktion Hvor meget skal det kunne?

21

22

23 Paperprototyping http://www.paperprototyping.com

24 Funktionel prototype (Axure)

25 Bogen kapitel 16 Hvordan skal vi vælge elementer, hvilken skal vi vælge og hvordan kombineres disse? Felter, knapper, afkrydninsfelter, menuer - rulle, drop-down, vinduer, dialogbokse, grafikker, osv...

26 To tilgange 1.Hvad skal man IKKE gøre Fx. Contingency / Defensive design 2.Design efter tidligere erfaringer og retningslinjer, fx. patterns, guidelines, heuristikker eller regelsæt Kombination af de to...

27

28 Patterns og guidelines Vi ved efterhånden en masse om hvordan brugere opfører sig, handler og tilgår software og information... Derfor kan vi beskrive nogle mønstre, både for deres handlen og for det design der skal interageres med:

29 Usage patterns 1.Safe Exploration 2.Instant gratification 3.Satisficing 4.Changes in midstream 5.Deferred choices 6.Incremental construction 7.Habituation 8.Spatial Memory 9.Prospective memory 10.Streamlined repetition 11.Keyboard only 12.Other people’s advise

30 Usage patterns 1.Safe Exploration - Undo ”Let me explore without getting lost or getting into trouble” 2.Satisficing – Gør det kort og nemt ”This is good enough. I don’t want to spend more time learning to do it better” 3.Spatial Memory – Konsistent og konventioner ”I Swear that button was here a minute ago. Where did it go?”

31 The Perpetual Intermediate

32 Den evig mellembruger Nobody want to remain a beginnerImagine users as very intelligent, but very busy Vi bliver hurtigt mere end begyndere, men sjældent eksperter. Vi bølger frem og tilbage mellem begynder og ekspert Begyndere vil have wizards, men skal kunne slå det fra senere, menuer, adgang til funktioner Experter vil have genveje, effektivitet Mellembrugeren vil have tooltips, online help, index Information in the head, information in the world (Norman – ham med affordance)

33 Design patterns Microsoft - VistaMicrosoft Yahoo! – Web apps patternsYahoo! Apple

34 Design regler Universal Principles of Design Gestalt principperne: Se bogen side 94

35 Guidelines Bogens appendix: GUI Design Guidlines HOMERUN Tilgængelighedsprincipper

36 Terminologi Primære vinduer Besked vinduer (modale) Dialog vinduer Wizards (streng rækkefølge) Menuer: Rulle, drop-down, pull, pop-up Checkbutton, radiobutton Faneblade, knapper

37 Brug af elementer Vi må lære hvad de egner sig til - og ikke egner sig til Prøve os frem og teste

38 WORLD WIDE WEB

39 Dele opgaven op i to Generel informationsarkitektur, navigation, struktur, organisering Konkrete funktioner, deres flow og interaktion (nyhedsbrev, emailfunktioner, køb, søgning) Afvigelser: E-handel og webapps og sikkert også flere

40 Web: Informationsarkitektur Hjælpe brugere til at FINDE information Det omvendte udgangspunkt: En lang side Alle information lige vigtige Opbygge en struktur, organisere, prioritere Sammenhænge mellem information Navigation og hjælp til orientering Sprog, tekster og knapper Søgning! – Tænk på Google’s succesSøgning!

41 Information scent Vi skimmer og scanner Information scent: http://www.hp.com/ Information foraging ”Maximum benefit for minimum effort” Jared Spool om information scent

42 Norsk video Usability er tidsløst

43 Aftenense øvelse Forberedelse, rekruttering pre-test