Interface design. Praktisk handler det om MOCK UP. 1. trunk test 2. implementation. 2 iteration: code, design, test. Usability og Grafiske Virkemidler

Transkript

1 Interface design Usability og Grafiske Virkemidler 2 iteration: code, design, test 1 Praktisk handler det om MOCK UP 1. trunk test 2. implementation 2

2 Ny plan Næste gang: FORELÆSNINGSFRI Arbejde med mockup + evt. hængepartier. Gangen efter påske: mock-up feedback session 3 Usability Brugere Principper, Tommelfingerregler og Guidelines. Grafiske virkemidler - mediets byggesten og teknikker. Trunktest Mock-up 4

3 Usability Studiet af hvor nemt et redskab er at bruge til at opnå et bestemt mål. Handler om målemetoder (definition af kriterier) og principper bag brugervenlighed. Nemt at lære Effektivt Nemt at huske Sikkerhed Subjektiv Tilfredshed 5 Karakteristika ved et godt interface Klarhed: Hensigtsmæssig brug af sprog, flow, hierarki og metaforer. Kortfattethed: Reduction af visuel støj uden at gå på kompromis med klarhed. Velkendthed: Genkendelige interface elementer. Responsivenes: Hurtig feedback fra systemet Sammenhæng: Logisk sammenhæng på tværs af sitet. Æstetik: visuelt attraktiv grænseflade. Effektivitet: design for øget produktivitet genveje. Tilgivelse: mulighed for at skippe, fortryde, gendanne. Smashing Book side 11. 6

4 Jacob Nielsens Heuristikker Smashing book 1 Visibility of system status Responsiveness 2 Match between system and the real world Klarhed 3 User control and freedom Tilgivelse 4 Consistency and standards Sammenhæng 5 Error prevention Tilgivelse 6 Recognition rather than recall Velkendthed 7 Flexibility and efficiency of use Efficiency 8 Aesthetic and minimalist design Kortfattethed 9 Help users recognize, diagnose, and recover from errors Tilgivelse 10 Help and documentation 7 Ikke en af Jacob Nielsen Heuristikker: Æstetik: visuelt attraktiv grænseflade Hvorfor? 8

5 useit 9 Brugervenlighed vs. brugeroplevelse Brugeroplevelse har større betydning for opfattelsen af brugervenlighed end hidtil antaget. Web 2.0 Trend: Brug af grafiske virkemidler til andet end optimering af systemets effektivitet. What is beautiful is usable, Tractinsky, A. S. Katz and D. Ikar,

6 Opmærksomhedsøkonomi We now live within an attention economy where designers must effectively arbitrate the scarcity of human attention. Those who know how to command the landscape of competing words, images, sounds, and motion will aid user goals more effectively. Richard A. Lanham Uday Gajendar med reference til Richard Lanham 11 Nye tendenser i anvendelsen af grafiske virkemidler i webdesign 12

7 Grafiske virkemidler Layout og positionering Form og størrelse Farver Kontrast Tekstur: Transparens, Gradients, Gloss effekt, Skygger, Glow, Bevel Se også Smashing Book s Udstandsede bogstaver Rige grænseflader Transparens Stor typografi Modal bokse Medie blokke Magasin look Karusel slideshows Font repracement Introduktions blokke 14

8 Kreative layouts Alt på én side Social design elements Talende navigation Mange kollonner Tabs Kæmpe illustrationer Store søgebokse 15 Hvordan opnår man så brugervenlighed? Principper, Tommelfingerregler og Guidelines, der tager udgangspunkt i en forståelse af brugere. 16

9 Brugere - Nogle facts og formodninger om brugere. 17 Fra kognitionsforskningen Millers law: Mennesket kan holde 5 til 9 (7 plus minus 2) ting i deres korttidshukommelse. Fitts law: Jo mindre eller fjernere en knap er jo længere tid tager det at ramme den med musen. (Paul Fitts 1954). Locus of attention: Mennsket er indrettet til at fokusere på én ting ad gangen og filtrere alt andet fra. Mennesket har ikke fuld kontrol over hvad der er genstand for deres fokus. Andet? 1: "The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information", George A. Miller. 2: Mere om Fitts law: 3: "Humane Interface, The: New Directions for Designing Interactive 18 Systems", kap 2-3, Jef Raskin

10 Steve Krug om brugere Brugere læser ikke, de scanner Brugere træffer ikke optimale beslutninger, de tager-til-takke-med. Brugere finder ikke ud af hvordan ting fungerer, de sjusser sig frem. 19 We don t read pages, we scan them Fra Don t make me think, kap 2, Steve Krug. 20

11 The F -pattern Sådan skanner brugere: To vandrette linier og en lodret 21 Jacob Nielsen Web users have always been ruthless and now are even more so People want sites to get to the point, they have very little patience, Citeret I artikel på BBC: 22

12 Det kommer an på genren Data visulisering, digital kunst, visuel kommunikation OPLEVELSE INFORMATION Findability, organisering, informationsdesign HANDLING Usability, applikationsdesign, interaktionsdesign 23 Craigslist: Et handlingsorienteret website Målet for brugeren er at finde noget specifict. 24

13 Craig Newmark "People are good and trustworthy and generally just concerned with getting through the day," fra interview i Wired: /ff_craigslist?currentPage=all 25 Brendan Dawes...we re humans, full of flaws like emotions and taste. We re not machines that make decisions based simply on efficiency Fra Analog In, Digital Out 26

14 Magnetic North Et oplevelsesorienteret site 27 About us på mnatwork.com [...] We create digital experiences of all kinds - experiences that are useful, playful, and have a story to tell - stuff that people want to spend time with. 28 [...]

15 Principper, Tommelfingerregler og Guidelines 29 Steve Krug s guidelines Billboard design Hvis brugere kun scanner din hjemmeside, så design siden som et vejskilt 30

16 1. Skab et klart visuelt hierarki Vigtighed Relateret Del af Skab et klart visuelt hierarki Det er det man gør når man laver i high-fidelity wireframe Virkemidler til at vise relationer: - White space - Farvede baggrunde Virkemidler til at vise vigtighed: - Placering - Tekst-formatering 32

17 2. Følg konventioner - og bryd dem når der er god grund 33 Konventioner skaber genkendelighed. En konvention behøver ikke være udtryk for en bedre metode, men metoden bliver bedre fordi det er en konvention. Konventioner skal udfordres. 34

18 Placering af siteid I øverste venstre hjørne. 35 Placering af navigation Global menu i toppen af sitet Redskaber og søgning i øverste højre hjørne 36

19 Placering af navigation Lokal menu i venstre side Breadcrumbs menu 37 Placering af navigation Meta menu i bunden. Brug af seperator 38

20 Andre konventioner Link konventioner Farve konventioner: Fonte: times new roman, courier,verdana. Iconer: Navngivning : HOME, CONTACT, SEARCH, Formatering 39 Venstremenu konventionen udfordres 40

21 Og venstermenuen testes Ingen signifikant forskel Forbedring af tid ved de sidste opgaver hos højre gruppen. Mere fokus på indholdet hos højregruppen. Kilde: 41 Generelt indifferens, dog flere for end imod. 3. Opdel skærm i klart afgænsede områder Hjælper brugere at vælge fokusområde - locus of attention 42

22 3. Opdel skærm i klart afgænsede områder Virkemiddel: Runde hjørner Opdel skærm i klart afgænsede områder Virkemiddel: Kontrast 44

23 3. Opdel skærm i klart afgænsede områder Virkemiddel: Runde hjørner OG Kontrast Gør det tydeligt hvad der er klikbart Farver og understregning cursor opførsel knap kvalitet knap stadier 46

24 Button states Tooltips 47 Kontrast 48

25 Kontrast Høj kontrast - lille søgknap Lav kontrast - stor søgknap 49 SK s Problem med rollovers Man skal finde dem Man ser kun én ad gangen Ineffektive hvis de ikke er tæt på musen 50

26 5. Hold det visuelle støjniveau nede. Anvend det som i Smashing Book kaldes Reduction : 2) labels inde i input feltet 1) brug hover til gentagelser 3) kontekst afhængige interface elementer 4) iconer Hold det visuelle støjniveau nede....ved at skabe Fokus på noget: Preview af theme i Wordpress s dashboard. Brugerens fokus skærpes ved at skrue ned for kontrasten bag modal boxen. 52

27 SK s Problem med dropdowns De sparer plads, men de gemmer hvad sitet indeholder. Man skal klikke på dem De er svære at scanne 53 Flere guidelines fra Smashing Book Relationer: White space Grænser: Runde hjørner Betydning: Farvebrug Opmærksomhed: animation Fokus: Skygger og mørke transparente lag. Handling: fremhæv primær funktionalitet visuelt. Ergonomi: Block links. Klarhed: Verber som labels. 54 Effektivitet: Autofokus på input felter Reduction: 1) brug hover (fx. til at vise kontrol knapper), 2) labels inde i input feltet, 3) kontekst afhængige interface elementer, 4) iconer. Response: Support: 1) udfyld blank states, 2) hint om features (software as service) Foregiveness: gendan, fortryd, bekræft. Æstetik: Texturer: transparens, gradients, gloss effekt, skygger, glow, bevel, cut-out

28 The homepage is beyond your control 55 56

29 Anybody who really needs our site site will know what it is 57 58

30 The Trunk Test Hvad ER det her? Hvad kan jeg her? Hvad findes her? Hvorfor skal jeg være her og ikke et andet sted? Hvor starter jeg? 59 Problem: At formidle det centrale budskab Løsning: Taglines og welcome blurps 60

31 Taglines Taglines er ikke mottoer Taglines må ikke være for lange eller korte Taglines må ikke være vage 61 Tagline el. wellcome blurp? 62

32 Tagline og wellcome blurp 63 Hvor skal jeg starte? 64

33 Hvor skal jeg starte? 65 Hvorfor lige her? 66

34 Navigation 1) Navigation hjælper brugeren med at komme fra A til B.orientere sig. 2) Hjælper brugeren med at bestemme sin position 67 Ofte oversete Formål med navigationen giver en fornemmelse af sted fortæller hvad man kan finde her fortæller implicit hvordan man bruger sitet fortæller noget om menneskene bag sitet. 68

35 Mock-up 69 Interface Mockup redskaber Billedbehandlingsprogram Dreamweaver/HTML editor Frameworks og skabeloner (fx. 960 Grid System) 70

36 Billedbehandlingsredskaber standard: Photoshop open source: Gimp webbaseret: picnik.com 71 3 ud af 10 tips fra PlasticMind 72

37 Tip 4 web safe fonts Mark wubben og sifr 73 Tip 9 Form elementer 74

38 Tip 8 Get your width right A) B) Grid System 960.pdf: kolonne ark til papir mock-ups 960_12_col.psd: photoshop skabelon 960.css: stylesheet med layout klasser 76

39 Øvelser Lav en mock-up til forsiden på Jeres projekt site. Brug grafiske virkmidler og følg de omtalte guidelines til at få siden til at leve op til usability kravene (slide 3). Husk også at medtage jeres beslutninger omkring brugeroplevelse fra øvelserne til lektion 4. En mockup kan laves i et billedbehandlingsprogram eller det kan kodes i HTML/ CSS. Hvis I ikke kan bruge et billedbehandlingsprogram, kan I gøre én af flg: 1. Følg en photoshop tutorial for at opnå de nødvendige kompetencer. 2. Find websites der demonstrerer nogle af de interface elementer I gerne vil bruge. Tydeliggør herefter med tekst og billeder af disse elementer hvad der er jeres vision for interfacet. Det skal være sådan at en designer kan bruge dokumentet til at lave en mock-up. 77 Resourser Smashing Magazine: Essential colour checklist for Web design: Photoshop tutorials: Picknik (webbaseret billededitering): Gimp: 10 tips for creating website mockups in photoshop: blog.plasticmind.com/design/creating-mockups-in-photoshop/ Mock-up design elementer: 78

40 79