GUI - design. Noen prinsipper Don’ make me think –Tar ikke optimale valg, først og best –Vi leser ikke, vi skanner –Ikke rasjonelle, prøver og feiler.

Presentasjon om: "GUI - design. Noen prinsipper Don’ make me think –Tar ikke optimale valg, først og best –Vi leser ikke, vi skanner –Ikke rasjonelle, prøver og feiler."— Utskrift av presentasjonen:

1 GUI - design

2 Noen prinsipper Don’ make me think –Tar ikke optimale valg, først og best –Vi leser ikke, vi skanner –Ikke rasjonelle, prøver og feiler Konisistens –Med standarder –Innenfor applikasjonen Tydelighet –Tydelige valg –Tydelige veier –Tydelig hva som hører sammen

3 RAND’s visjon om fremtiden From ImageShack web site //www.imageshack.us ; original source unknown

4 Grids - rutenett Horisontale og vertikale linjer for plassering av windows komponenter - Justerer relaterte komponenter Organisering - fremhev dominerende elementer (kontrast) - elementer grupperes etter nærhet - organisatorisk struktur - justering, oppretting Konsistens - plassering - format - repetisjon av elementer - organisering window to widget spacing Widget to widget spacing NoOk Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents

5 NoOk Message text in Arial 14, left adjusted Standard icon set NoOk Do you really want to delete the file “myfile.doc” from the folder “junk”? ?  Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. !  Apply Cancel The file was destroyed

6 Two-level Hierarchy indentation contrast Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow

7 Visuell konsistens Intern konsistens -elementer følger samme regler og konvensjoner -bruk av applikasjonsspesifikke grids sørger for dette Ekstern konsistens - følg plattform og grensesnittkonvensjoner - bruk plattform og objektspesifikke grids Avvik kun når det gir brukeren en klar fordel Warning mmmm mmm mmm Okay ! Help mmmm mmm mmm Okay ? Tip of the day: Monday, Mar 12 mmmm mmm mmm Dismiss  

8 Mangel på konsistens - eksempel Hvilket print-ikon skal brukes

9 Relaterte skjermelementer Gruppering: nærhet, likhet og lukket (gestalt lovene) Bruk av hvite flater og eksplisitte strukturer som rammer Mmmm:  

10 Forferdelig oppstilling - ingen flyt Dårlig kontrast - kan ikke skille fargete labels fra editerbare felter Dårlig repetisjon - Knapper ser ikke ut som knapper Svak eksplisitt struktur - blokker konkurrerer med opstilling Webforms

11 Ingen tanke på orden og organisering IBM's Aptiva Communication Center

12 Tilfeldig oppsett Mullet & Sano

13 Forbedring av oppsettet Mullet & Sano

14 Bruk av eksplisitt struktur som en støtte Mullet & Sano

15 Overdreven bruk 3-d effekter gjør vinduet unødvendig rotete

16 Hvordan velger du elementer når du ikke kan atskille dem

17 Navigerings signaler Foreskriv innledende fokus Diriger oppmerksomheten etter hva som er formålstjenlig til viktige, mindre viktige og perifere enheter Rekkefølgen skal følge brukerens konseptuelle modell av sekvens  

18 Viktigheten av ”negative space” og plassering Mullet & Sano

19 Besparelse av visuelle elementer Minimaliser antall kontroller Inkluder bare de som er nødvendige - eliminer eller henvis andre til underordnede vinduer Minimaliser rot - slik at informasjon ikke blir skjult NNNN MMMM xxx: ____ MMMM NNNN  

20 Tabs (faneark) - Egnet til gruppering av relaterte gjenstander - Kan overdrives

21 Lesbarhet Karakterer, symboler og grafiske elementer skal være lette å se og gjenkjenne Text set in Braggadocio Text set in Helvetica Text set in Courier TEXT SET IN CAPITOLS   Text set in Times Roman

22 Lesbarhet Riktig bruk av typografi –1-2 typefaces (3 max) –normal, italics, bold –1-3 størrelser maks Large Medium Small Large Medium Small   Readable Design components to be inviting and attractive Design components to be inviting and attractive Unreadable Design components to be inviting and attractive Design components to be inviting and attractive

23 Lesbarhet Typesetting - point size - word and line spacing - line length - Indentation - color Readable Design components to be inviting and attractive Design components to be inviting and attractive Unreadable: Design components to be easy to interpret and understand. Design components to be inviting and attractive

24 Popkin Software’s System Architect

25 Disse valgene må være veldig viktige, eller? Time & Chaos

26 Grå’et eksempeltekst er vanskelige å lese hvorfor ikke gjøre den svart? Regional preferences in Windows 95

27 Tekstorientering som er vanskelig å lese

28 Bilder og bildespråk Tegn, ikoner og symboler - objekter, handlinger, metaforer, abstraksjoner, konvensjoner - enkle(re) å huske og forstå Ikondesign er vanskelig - bruk labels Bør være sammenheng mellom ikontype og posisjon - ikonfamilie Partial icon family

29 Hva betyr disse bildene? -Tooltips er ikke brukt -Et av fanearkene inneholder en forklaring på bildene, hvilken?

30 GUI-språk og dialekter (idioms) Kjente måter å bruke GUI komponenter på -Egnet for både tilfeldige og ekspertbrukere -Bygger på ”computer literacy” -Må anvendes med nøyaktighet i systemer som skal brukes der og da. Pulldown menus Cascading menu Dialog box item Toolbars and tooltips Window manipulation Standard typographic controls Files What you see is what you get displays Microsoft Powerpoint

31 Vinduer og navigasjon Hvordan kan vindusnavigering reduseres? -Unngå lange stier -Unngå dype hierarkier  

32

33 Elektronisk stemmeseddel Bush and Gore oppnådde et valgresultat som var helt tett under valget i Florida. Hvilken rolle spilte grensesnittet for stemmegivning?