Design af brugergrænseflader GUI: Graphical user interface Historisk:

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!

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)

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

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

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

Sketches: Det er en kultur...

Forholdet sketches/prototyper

Sketch - prototype

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.

Papirprototyper Vi leger computer!

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)

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

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

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?

Paperprototyping

Funktionel prototype (Axure)

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...

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...

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:

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

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?”

The Perpetual Intermediate

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)

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

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

Guidelines Bogens appendix: GUI Design Guidlines HOMERUN Tilgængelighedsprincipper

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

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

WORLD WIDE WEB

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

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!

Information scent Vi skimmer og scanner Information scent: Information foraging ”Maximum benefit for minimum effort” Jared Spool om information scent

Norsk video Usability er tidsløst

Aftenense øvelse Forberedelse, rekruttering pre-test