WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
GUI - design
description
Transcript of GUI - design
![Page 1: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/1.jpg)
GUI - design
![Page 2: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/2.jpg)
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
![Page 3: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/3.jpg)
RAND’s visjon om fremtiden
From ImageShack web site //www.imageshack.us ; original source unknown
![Page 4: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/4.jpg)
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
![Page 5: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/5.jpg)
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
![Page 6: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/6.jpg)
Two-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
![Page 7: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/7.jpg)
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
![Page 8: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/8.jpg)
Mangel på konsistens - eksempel
Hvilket print-ikon skal brukes
![Page 9: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/9.jpg)
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:
![Page 10: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/10.jpg)
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
![Page 11: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/11.jpg)
Ingen tanke påorden og
organisering
IBM's Aptiva Communication Center
![Page 12: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/12.jpg)
Tilfeldig oppsett
Mullet & Sano
![Page 13: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/13.jpg)
Forbedring av oppsettet
Mullet & Sano
![Page 14: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/14.jpg)
Bruk av eksplisitt struktur som en støtte
Mullet & Sano
![Page 15: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/15.jpg)
Overdreven bruk 3-d effekter gjør vinduet unødvendigrotete
![Page 16: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/16.jpg)
Hvordan velger du elementer når du ikke kan atskille dem
![Page 17: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/17.jpg)
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
![Page 18: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/18.jpg)
Viktigheten av ”negative space” og plassering
Mullet & Sano
![Page 19: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/19.jpg)
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
![Page 20: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/20.jpg)
Tabs (faneark) - Egnet til gruppering av relaterte gjenstander- Kan overdrives
![Page 21: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/21.jpg)
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
![Page 22: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/22.jpg)
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
![Page 23: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/23.jpg)
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
![Page 24: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/24.jpg)
Popkin Software’s System Architect
![Page 25: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/25.jpg)
Disse valgene må være veldig viktige, eller?
Time & Chaos
![Page 26: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/26.jpg)
Grå’et eksempeltekst er vanskelige å lese hvorfor ikke gjøre den svart?
Regional preferences in Windows 95
![Page 27: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/27.jpg)
Tekstorientering som er vanskelig å lese
![Page 28: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/28.jpg)
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
![Page 29: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/29.jpg)
Hva betyr disse bildene?-Tooltips er ikke brukt-Et av fanearkene inneholder en forklaring på bildene, hvilken?
![Page 30: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/30.jpg)
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
![Page 31: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/31.jpg)
Vinduer og navigasjon
Hvordan kan vindusnavigering reduseres?- Unngå lange stier- Unngå dype hierarkier
![Page 32: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/32.jpg)
![Page 33: GUI - design](https://reader036.fdocument.pub/reader036/viewer/2022062411/56814a9a550346895db7aa9d/html5/thumbnails/33.jpg)
Elektronisk stemmeseddelBush and Gore oppnådde et valgresultat som var helt tett under valget i Florida. Hvilken rolle spilte grensesnittet for stemmegivning?