Webdesign. Håkon Tolsby Håkon Tolsby

Transkript

1 Webdesign Håkon Tolsby Håkon Tolsby 1

2 Hva er det viktigste for å lage et BRUKEVENNLIG websted Don t make me think Steve Krug Webstedet skal være: Selvinnlysende Selvforklarende Ikke rocket science ingen fasit (som golf: en handfull måter å få ballen i hullet på og en million måter å mislykkes) Husk BRUKERVENLIG er ikke det samme som BRUKBAR Håkon Tolsby 2

3

4

5 Hva får oss til å tenke? Merkesystemet må være intuitivt og forståelig for brukeren: kortsortering Håkon Tolsby 5

6 Hver gang vi lurer på noe øker den kognitive belastningen Gjør valgene tydelig: Brukertesting og Heuristisk evaluering God affordance Håkon Tolsby 6

7 Mennesker liker ikke å måtte gruble over hvordan ting skal brukes Håkon Tolsby 7

8 Håkon Tolsby 8

9 En krevende indre samtale Støy! Hvordan kan vi avdekke slike problemer? Håkon Tolsby 9

10 Håkon Tolsby 10

11 Brukeren skal slippe å tenke over: Hvor er jeg? Hvor skal jeg begynne? Hvor har de plassert det? Hva er det viktigste på denne siden? Hvor går jeg videre? Hvorfor har de kalt linken/tittelen det? Unngå ting som får deg til å måtte tenke før du bruker Håkon Tolsby 11

12 Alt kan ikke være selvinnlysende Noen ganger må du ta til takke med selvforklarende Forklarende tekst, illustrasjoner Konkurrenten er bare et klikk unna Hvis brukeren blir frustrert går han/hun til et annet nettsted Håkon Tolsby 12

13 Hvordan bruker vi webben? Vi tror at brukerne vil studere websiden nøye og lese hver eneste tekstlinje som en brosjyre. Stemmer det? De fleste brukere: kaster et øye på siden skanner gjennom noe av teksten Klikker på det første de finner interessant Håkon Tolsby 13

14 Virkeligheten Håkon Tolsby 14

15 Faktum 1 Vi leser ikke websider. Vi skanner dem Vi har det travelt Vi vet vi ikke må lese alt Vi er gode til å skanne Håkon Tolsby 15

16 Hva designeren lager Håkon Tolsby 16

17 Hva én bruker ser

18 Hva en annen bruker ser

19 Eyetracking About-side: Leser i et "F" mønster, og fokuserer på tekst som er i tydelige punktlister Håkon Tolsby 19

20 Faktum 2 Vi gjør ikke optimale valg - Vi tilfredsstiller Vi velger ikke det beste valget Vi velger det første som virker fornuftig Så snart vi finner en link vi tror er riktig, så klikker vi på den Håkon Tolsby 20

21 Gary Klein Sources of Power: How People Make Decisions Vi har det vanligvis travelt Det er liten straff knyttet til et feil valg Vurdering av valgmulighetene forbedrer ikke mulighetene Det er morsommere å gjette Mindre arbeid Hvis du har rett er det raskere Hyggelig overraskelse - serendipity Håkon Tolsby 21

22 Faktum 3 Vi finner ikke ut av hvordan ting virker. Vi rører rundt (med vår mentale modell) Spiller det noen rolle hvordan vi finner fram? Håkon Tolsby 22

23 Håkon Tolsby 23

24 Design for skanning ikke lesing Lag et klart visuelt hierarki Konvensjoner er din venn Del sidene inn i klart definerte områder Gjør det tydelig hva som er klikkbart Minimaliser unødvendig støy Bruk intuitive merker og begreper Håkon Tolsby 24

25 Et klart visuelt hierarki Viktige ting er mer fremstående enn mindre viktige Ting som er logisk relatert er også visuelt relatert Ting er nøstet visuelt for å vise hva som er en del av hva Håkon Tolsby 25

26 Webdesign konvensjoner Håkon Tolsby 26

27 Visuelt støy Stressende støy. Over- «ivrige» sider Bakgrunnsstøy Health World View Gender Issues Local News Events Health World View Gender Issues Local News Events Håkon Tolsby 27

28 Unngå unødvendige ord Bort med: Unødvendig tekst som f.eks. forteller oss hva vi skal se (Happy talk). Instruksjoner for hvordan websiden skal brukes Håkon Tolsby 28

29 C. R. A. P. Huskeliste for enkle designprinsipper Håkon Tolsby 29

30 Alignment - Justering Idéen er at: Ingenting skal plasseres på siden tilfeldig. Alle elementer skal ha en visuell kobling med noe annet på siden. Guide brukerens øye Gjøre det enklere å browse. Trekke øyet mot de viktigste delene av siden. I henhold til Williams: Bruk sterk venstre- og høyrejustering Unngå sentrering (rotete) Håkon Tolsby 30

31 Justering - sentrert I henhold til Williams: Bruk sterk venstre- og høyrejustering Unngå sentrering (rotete) Håkon Tolsby 31

32 Justering eksempel Håkon Tolsby 32

33 Justering eksempel Håkon Tolsby 33

34 Rotete justering Håkon Tolsby 34

35 Kontrast Kontrast gjør en side mer interessent og leselig Idéen er at: Hvis to ting ikke er helt like, gjør dem forskjellig, ordentlig Form, font, størrelse, vekt, tekstur, linje, mellomrom farge etc Håkon Tolsby 35

36 Kontrast eksempel Håkon Tolsby 36

37 Kontrast og tekst Tekst og bakgrunnsfarge må ha høy kontrast for å være leselig Bruk gjerne en interessant font-face i tittel Bruk enkel san-serif font-face i body tekst Bruk veldig enkel san-serif font-face i knapper (liten og enkel = lesbar) Bruk kontraster til å gjøre overskrifter tydelige (font-face, farge, border, bilder) Kontrast verktøy Colorzilla add on Håkon Tolsby 37

38 Kontrast eksempel Mindre effektivt Mer effektivt Håkon Tolsby 38

39 Kontrast eksempel Mindre effektivt Mer effektivt Håkon Tolsby 39

40 Proximity - Nærhet Idéen er å gruppere ting som hører sammen Nærhet hjelper brukeren å identifisere hvilke ting som hører sammen Håkon Tolsby 40

41 Nærhet - eksempel Håkon Tolsby 41

42 Hvordan kan nærhet forbedre dette designet? Håkon Tolsby 42

43 Nærhet hva er best design? Håkon Tolsby 43

44 Repetition - Gjentagelse Idéen er å: GJENTA noen aspekter av designet i hele oppsettet. Gjentagelse av visuelle elementer styrker designet gjennom å binde sammen ellers separate deler. Hvis et websted ser profesjonelt ut og er lett å navigere så gjentar det antageligvis: Farger Fonter Grafiske elementer Navigasjon Sidedestruktur Håkon Tolsby 44

45 Gjentagelse eksempel Håkon Tolsby 45

46 Gjentagelse - eksempel Håkon Tolsby 46

47 Regelen om tredeling Prøv å dele websiden inn i tredeler for å skap et mer interessant design Tre-farger-skjema gjør websiden profesjonell og ikke overfylt (Ikke et absolutt krav) Regelen om tre-klikk Håkon Tolsby 47

48 Valg av bilder Bilder skal vise: Bedriftens kjerneverdier Bedriftens løfte til brukeren Produkter og tjenester Håkon Tolsby 48

49 Kjerneverdier, løfter, produkt, tjeneste Håkon Tolsby 49

50 Kjerneverdier, løfter, produkt, tjeneste Håkon Tolsby 50

51 Moodboard Kollasj av bilder Utrykke merkevarens kjerneverdier og essens Papir og lime eller online Moodboards kan lages i samarbeid med oppdragsgiver og brukere Håkon Tolsby 51

52 Moodboard Håkon Tolsby 52

53 Moodboard Håkon Tolsby 53

54 Farger Koordiner fargebruken og hold det enkelt. Velg 2-3 harmonerende farger og noen få markeringsfarger Bruk sterke farger varsomt og med et formål for å oppnå oppmerksomhet Håkon Tolsby 54

55 Nyttige verktøy for valg av farger Pantone, app for mobil som gjenskaper fargene i omgivelsene. Velg harmonerende fargeskjemaer fra et fargehjul Finn et eksisterende fargeskjema som du liker Håkon Tolsby 55