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

RAND’s visjon om fremtiden

From ImageShack web site //www.imageshack.us ; original source unknown

Grids - rutenettHorisontale og vertikale linjer for plassering av windows komponenter

- Justerer relaterte komponenterOrganisering

- 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

No Ok

Message text in Arial 14, left adjusted

Standard icon set

Fixed components

Format of variable contents

No Ok

Message text in Arial 14, left adjusted

Standard icon set

No Ok

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

Two-level Hierarchy•indentation•contrast

Grouping by white space

Alignment connects visual elements in a sequence

Logic of organizationalflow

Visuell konsistensIntern 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 mmmmmm

Okay

!Help

mmmm mmmmmm mmm

Okay

?

Tip of the day: Monday, Mar 12

mmmm mmmmmm

Dismiss

Mangel på konsistens - eksempel

Hvilket print-ikon skal brukes

Relaterte skjermelementer

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

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Forferdelig oppstilling - ingen flytDårlig kontrast - kan ikke skille fargete labels fra editerbare felterDårlig repetisjon - Knapper ser ikke ut som knapperSvak eksplisitt struktur - blokker konkurrerer med opstilling

Webforms

Ingen tanke påorden og

organisering

IBM's Aptiva Communication Center

Tilfeldig oppsett

Mullet & Sano

Forbedring av oppsettet

Mullet & Sano

Bruk av eksplisitt struktur som en støtte

Mullet & Sano

Overdreven bruk 3-d effekter gjør vinduet unødvendigrotete

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

Navigerings signaler

Foreskriv innledende fokusDiriger oppmerksomheten etter hva som er formålstjenlig til viktige, mindre viktige og perifere enheterRekkefølgen skal følge brukerens konseptuelle modell av sekvens

Viktigheten av ”negative space” og plassering

Mullet & Sano

Besparelse av visuelle elementer

Minimaliser antall kontrollerInkluder bare de som er nødvendige

- eliminer eller henvis andre til underordnede vinduer

Minimaliser rot- slik at informasjon ikke blir skjult

NNNNMMMM

xxx: ____xxx: ____xxx: ____

xxx: ____xxx: ____

xxx: ____xxx: ____

xxx: ____xxx: ____

xxx: ____xxx: ____

xxx: ____xxx: ____

xxx: ____xxx: ____

MMMM

NNNN

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

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 INCAPITOLS

Text set in Times Roman

Lesbarhet

Riktig bruk av typografi– 1-2 typefaces (3 max)– normal, italics, bold– 1-3 størrelser maks

LargeMediumSmall

LargeMediumSmall

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

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 andunderstand. Design components to be inviting and attractive

Popkin Software’s System Architect

Disse valgene må være veldig viktige, eller?

Time & Chaos

Grå’et eksempeltekst er vanskelige å lese hvorfor ikke gjøre den svart?

Regional preferences in Windows 95

Tekstorientering som er vanskelig å lese

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

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

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

Standardtypographic controls

Files

What you see is what you get displays

Microsoft Powerpoint

Vinduer og navigasjon

Hvordan kan vindusnavigering reduseres?- Unngå lange stier- Unngå dype hierarkier

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