1 / 33

GUI - design

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 Konisistens Med standarder Innenfor applikasjonen Tydelighet Tydelige valg Tydelige veier Tydelig hva som hører sammen.

laasya
Download Presentation

GUI - design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 Format of variable contents Message text in Arial 14, left adjusted Standard icon set Widget to widget spacing No Ok window to widget spacing Fixed components • 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

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

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

  7. Warning Tip of the day: Monday, Mar 12 mmmm mmm mmm ! mmmm mmm mmm Help Dismiss Okay mmmm mmm mmm mmm ? Okay 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

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

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

  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 ogorganisering 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ødvendigrotete

  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. NNNN MMMM xxx: ____ xxx: ____ MMMM xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ NNNN xxx: ____ xxx: ____ xxx: ____ xxx: ____ 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

  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 Helvetica TEXT SET INCAPITOLS Text set in Braggadocio Text set in Times Roman Text set in Courier

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

  23. Readable Design components to be inviting and attractive Design components to be inviting and attractive Lesbarhet Typesetting - point size - word and line spacing - line length - Indentation - color 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. Partial icon family 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

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

  30. Files Window manipulation Standardtypographic controls Toolbars and tooltips What you see is what you get displays Pulldown menus Cascading menu Dialog box item 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. Microsoft Powerpoint

  31. Vinduer og navigasjon Hvordan kan vindusnavigering reduseres? • Unngå lange stier • Unngå dype hierarkier

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

More Related