2. Jakob Thyness
• Partner, Webgruppen AS
• Utdannet art director
• Mer enn 20 års designerfaring
• Erfaring med web/digitale
medier siden 1993
• Medlem av Grafill,
Dataforeningen (BITS)
jakob@webgruppen.no
3. Nina Furu
• Partner, Webgruppen AS
• Driver Nettredaktør-skolen
• Utstrakt kurs- og konsulent-
virksomhet
• Erfaring med web/digitale medier
siden 1995
nina@webgruppen.no
4. Hvorfor bestepraksis?
• Bestepraksis er snarveien til å nå målene
• Det finnes faktisk riktig og galt på web
5. Mål for nettsiden
• Distribuere informasjon
• Selge produkter
• Drive markedsføring
• Avlaste ekspedisjonen
• Understøtte andre aktiviteter
• ...
11. Ved å følge bestepraksis når man målene
man har satt opp
12. For å verifisere bestepraksis bør man...
Måle, måle og måle!
• Mål før endring
• Mål etter endring
• Se forskjellen
Gratis analyseverktøy: www.google.com/analytics/
15. Avstøting
• Ca. 50% avstøting er vanlig for nettsteder med god
søkemotorsynlighet
• Du har maks. 2-3 sekunder til å overbevise brukeren
om at han bør bli og kikke nærmere på ditt nettsted
Hvordan kan dette gjøres?
★ Ved å forstå teorien om lukten av informasjon
★ Ved bevisst bruk av trigger-ord
16. Vi dømmer en nettside på
millisekunder
En kanadisk undersøkelse understreker hvor viktig design og bilder er for en nettside.
En kanadisk undersøkelse hevder at vanlige nettbrukere ikke leser når de vurderer en
nettside. Hjernen hos en vanlig nettbruker gjør en antagelse av kvaliteten på nettsiden i løpet
av bare 50 millisekunder, hevder forskere på Carleton University i Ottawa.
Undersøkelsen er publisert i den akademiske tidsskriftet "Behaviour & Information
Technology", skriver nyhetstjenesten newsfactor.com. Nå vil en del brukere likevel gå videre
på nettsiden, men hvis brukeren vurderer siden som rotete, faller sjansen for dette dramatisk.
Forskerne gjennomførte studiet ved å vise brukerne nettsider i bare 50 millisekunder og så be
brukerne vurdere nettsidens kvalitet. Vurderingene ble de samme når brukerne fikk lov til å se
på nettsiden i en lengre periode.
Forskerne mener at deres resultater viser hvor viktig riktig design er.
- Er ikke førsteinntrykket godt, vil brukerne gå videre før de en gang har sett på innholdet at du
tilbyr noe som er bedre enn konkurrentens, sier Gitte Lindgaard, en forskerne bak studiet.
Annen forskning viser at folk lar seg lede over tid av sitt førsteinntrykk og at det er vanskelig å
endre et negativt eller positivt førsteinntrykk.
18. ”Lukten av informasjon”
• Teori om hvordan brukerne orienterer seg på web
• Underbygd av flere tusen brukerobservasjoner
• Jared Spool, Christine Perfetti og David Brittan
• User Interface Engineering
• www.uie.com
• ”Designing for the scent of information”:
http://www.uie.com/reports/scent_of_information/
19. Trigger-ord
• Trigger-ordet beskriver det brukeren leter etter på nettstedet.
• Kommer brukeren fra en søkemotor, er trigger-ordet det han
har søkt på der.
• Trigger-ordet er ordet (eller ordene) i brukerens
”tankeboble”.
• Trigger-ordet er altså brukerens eget ord (og ikke ditt!)
20. Hvor brukes trigger-ord?
Trigger-ord skal brukes:
• ...i menyer
• ...i overskrifter
• ...i tekster
• ...i lenker
21. Gode trigger-ord bør være:
• Enkle • Løsninger
• Beskrivende • Brukerdefinerte
• Konkrete • Ikke beskrive brukeren
• Substantiver • Ikke nye ord
22.
23. Husk søkeordene!
• Dine viktigste søkeord bør finnes
– I TITLE-tag
– I overskrift
– I global meny (= den menyen som er lik på alle sider)
• Bruk tid og krefter på å analysere deg fram til de ordene
dine potensielle kunder/brukere søker på når de etterspør
din informasjon.
• Pass på at du bruker nettopp disse ordene.
25. Tekster
• God webtekst er enkel og søkevennlig
• God webtekst er sjangerriktig
• God webtekst er tilrettelagt for vertikal lesning
26. Enkle tekster
• Skriv korte setninger
• Skriv muntlig (prøv gjerne å lese teksten høyt og se om det
lyder naturlig)
• Bruk trigger-ord; spesielt i overskrifter og i linker
• Bruk mellomoverskrifter
• Mellomoverskrift skal stå til avsnittet som følger etter
mellomoverskriften
• Presenter bare ett poeng per avsnitt
27. Sjangerriktige tekster
• Nyhetstekst: Tekst som skal orientere om en hendelse
• Informasjonstekst: Tekst som skal orientere om et emne
• Handlingsutløsende tekst (”Salgstekst”): Tekst som skal få
brukeren til å gjøre noe spesielt
28. Nyhetstekst Informasjonstekst Salgstekst
Hva heter denne Hvilke fordeler får
Hva har skjedd? Hvorfor
informasjonen for bruker? brukeren ved å gjøre den
Fokus er dette interessant for
Hva er bruker interessert i handlingen du ønsker å
bruker?
å få vite? utløse?
Det viktigste ved det som Den viktigste fordelen
er skjedd, sett fra Trigger-ordet som brukeren får ved å gjøre
Overskriften brukerens side (ex. beskriver emnet (ex. den handlingen du
Mann drept av tog på Svangerskaps-permisjon) ønsker å utløse (”Du kan
Skøyen) redde et barns liv”)
Overvelder brukeren
Skumlesning Gir brukeren en oversikt Hjelper brukeren å se hvor
med alle fordelene han
av mellomtitler over hele saken han skal gå inn i teksten
får
29. Sjangerriktige tekster
• Et typisk firmanettsted
trenger kanskje ca 80 %
informasjonstekster, 15 %
nyhetstekster og 5 %
handlingsutløsende tekster.
30. Skrive for vertikal lesning
• Brukerne leser ikke linje for linje på web.
• De skumleser ved å la blikket flakke over siden.
• Gjør innholdet synlig for brukeren ved å bruke virkemidler for
vertikal lesning:
– Kulepunkter
– Mellomtitler
– Uthevede enkeltord
– Filformatsikoner
– Tydelig formaterte lenker
31.
32. Og P.S.: Skriv ordentlig rettskrivning!
For tips og fasiter, se
www.korrekturavdelingen.no
Takk til Per-Erik Skramstad for eksemplet
36. WAI-kravene
• Retningslinjene for tilgjengelighet heter WCAG 1.0 (Web
Content Accessibility Guidelines)
• Det oppdaterte dokumentet finner du her:
• http://www.w3.org/TR/WCAG10/
• Den fullstendige sjekklisten for WAI:
• http://www.w3.org/TR/WCAG10/full-checklist.html
38. Søkemotorsynlighet
• 91,7 % av brukerne benytter søkemotorer
• Hver av oss søker ca 6,5 ganger pr dag
• Søkemotorene er brukernes førstevalgskanal for all
informasjon der leverandøren ikke er kjent
• Er ikke siden din synlig på søkemotorer, går du glipp av svært
mye trafikk
• God synlighet = førstesiderangering på ord og uttrykk som
beskriver din kjernevirksomhet
41. Hva styrer rangeringen?
• Relevans!
• Målt i et vektet antall forekomster av søkeord- og fraser;
justert for inngående linker, page rank og klikkrate.
42. Forutsetning: At sidene er indeksert
Hva kan hindre indeksering?
• Feil redirect
• Søkemotordreperteknologi (frames, menyer i flash eller java-
script, URL’er med sesjons-ID’er eller for mange variabler,
spider traps)
• Dårlig teknisk kvalitet (test på http://validator.w3.org)
• Dårlig strukturering av sider (for mye for langt ned)
• Dårlig intern linking (ikke bruk av tekstlige trigger-ord i
menypunkter og linker)
48. Søkemotordreperteknologi
• Unngå alltid frames
• Unngå menyer i flash eller java-script
• Unngå løsninger som lager unike URL’er for hvert besøk
• Unngå løsninger som lager URL’er med mer enn 2
variabler (se etter ? og & i URL’en)
• Unngå kalenderfunksjoner
• Omgå eventuelt flash- og java-script menyer med en
sitemap (men du går glipp av en del linkrelevans)
52. Dårlig teknisk kvalitet
• Sjekk egne sider på http://validator.w3.org
• Skriv alltid i kravspekk at sidene skal validere
• Verifiser før akseptanse at sidene validerer
53. Dårlig strukturering av sider
• Google vil ikke indeksere alt for dypt i tjenesten.
• Mål: Alle sider bør være tilgjengelige på maks 3 nivåer.
• Lag eventuelt en site-map
58. Dårlig intern lenking
• Tekst laget som bilde kan ikke leses
• Menypunkter MÅ lages i tekst
• Menypunktene MÅ være meningsbærende
• Linker MÅ være meningsbærende
• ”Klikk her” forteller Google at siden linken fører til
handler om ”Klikk her” (Dessuten er det dårlig WAI)
59. Når det tekniske er ute av veien
• … er det INNHOLDET det kommer an på
• Du MÅ faktisk skrive om de ordene du vil bli synlig på
• I tillegg bør du sette opp malverket smart, slik at du
signaliserer at de viktigste ordene er de viktigste
63. Google vekter forekomster av ord
• Forekomst i TITLE-tag vekter tyngst
• Deretter forekomst i overskrift
• Deretter forekomster i linker
• Deretter forekomster i brødtekst
• Antallet forekomster tidlig i teksten har også en viss
betydning
• Bruk Meta Keywords og Meta Description riktig
64. Sett opp malverket riktig
• Ha differensierte TITLE-tagger
• Gjør TITLE-tag = Overskrift
• Gjør META Description = Ingress
• Ha 2-10 sentrale ord i META Keywords
• Kall overskriftsfonten H1 og mellomoverskrifter H2
• Ha linker på overskrifter på teasere
• Ha en tekstbasert, venstrestilt meny
65. Lag riktig innhold
• Bruk trigger-ord i menypunktene
• Ha viktigste menypunkter først
• Bruk trigger-ord i linker
• Bruk trigger-ord i overskrifter
• Lag gjerne linker = overskrift på landingsside (som også =
TITLE-tag)
• Skriv det viktigste først i teksten
67. Meny
• Menyen er brukerens inngangsportal til innholdet
• Den skal være tekstbasert (for søkemotorsynlighet)
• Den bør være mest mulig uttømmende
• Den bør bruke både store og små bokstaver
• Den bør ikke ha for mange nivåer
• Plasseringen skal være lett synlig og tilgjengelig
68. Plassering av meny
Optimal plassering av en
meny er i venstre marg,
alternativt langs toppen av
siden i tillegg.
69.
70.
71. Innhold i menyen
• Trigger-ord
• Så konkret som mulig
• Beskriver produktene hvis du selger produkter
• Beskriver tjenestene hvis du selger tjenester
• Beskriver informasjonen hvis du formidler informasjon
72. Menyens lengde
• Lange menyer er ikke farlig
• Lengre meny = flere trigger-ord = lavere avstøting =
flere som finner det de leter etter
• Bruk eventuelt “...-trikset”
• Lag eventuelt kategorioverskrifter
73. Søk som navigasjon?
• Ja - hvis innholdet på sidene (dvs. produktene,
tjenestene eller informasjonen) er så omfattende at
søk er den naturlige navigasjonsformen
• Ellers: prioriter å lage en god, klikkbar tekstbasert
meny, og evt. ha søk som tillegg (plassering øverst til
høyre)
• De aller fleste nettsteder bør unngå søk som
hovednavigasjon
• Husk at søk forutsetter at brukeren vet navnet på det
han skal søke etter!
74.
75.
76. A- B- og C-scenarier
A-scenarier = de tingene som 80% av brukerne leter
etter, eller ønsker å gjøre
B-scenarier = de tingene som bare 20% av brukerne
leter etter, eller ønsker å gjøre
C-scenarier = de tingene bedriften ønsker å legge ut,
men som få eller ingen etterspør
77. Hvordan scenariene adresseres
• A-scenariene adresseres både direkte på forsiden og
gjennom menyer og navigasjon
• B-scenariene adresseres gjennom menyer og
navigasjon
• C-scenariene kan være tilgjengelige gjennom søk eller
gjennom dyplenking lenger ned i tjenesten, men hvis C-
scenariene er forretningskritiske får de egen plass på
siden
81. A og B-scenarier
Meny
A-scenarier
Innholdsfelt på forside
C-scenarier
Det man først kommer 2l e4er at A-‐ eller B-‐scenariene er oppfylt
82. Plassering skjer etter prioritering
• Si det viktigste først
• Tenk på hva brukeren trenger tilgang til, og plasser
dette der brukeren lett kan finne det.
• Tenk også på når bruker trenger tilgang til hvilket
innhold
83. Gode deler gjør en bedre helhet
• Når hver enkelt innholdstype på nettstedet er optimalt
designet vil også nettstedet fungere optimalt,
uavhengig av det overordnete designkonseptet
84. Hvor faller blikket vårt?
Eyetracking-studier viser
at blikket vårt har en
tendens til å falle øverst til
venstre på skjermen.
Dette må vi ta i betraktning
ved plassering av
elementer på siden.
85. Prioritering for avsender og bruker
Prioritering for bruker
A B C
A
Prioritering for avsender
Pri 1 Pri 1 Pri 2
B Pri 1 Pri 2 Pri 2/3
C Pri 1 Pri 2 Pri 3
86. Riktig innholdsplassering
• Den vanligste formen for layout på nettsider er
3-spalteren
• Innhold plasseres etter scenariet det tilhører
• Primærinnholdet plasseres sentralt på siden,
alternativt helt til venstre hvis man ikke har
venstremeny
• Sekundærinnhold plasseres til høyre på siden
87. Toppbanner
Sekundær-
Meny Primærinnhold
innhold
3-spalter I
88. Toppbanner
Hovedmeny
Sekundær-
Undermeny Primærinnhold
innhold
3-spalter II
92. Riktig innholdsplassering 2
• Gi brukeren det han kommer for i første skjermbilde
• Hvis du må velge, så prioriter de største
brukergruppene
• Ikke kast bort verdifull plass på nyheter (med mindre
du er en nettavis)
107. Innhold i prime site
• Gi brukeren det han kommer for i første skjermbilde
• Må du velge, så prioriter de største brukergruppene
• Ikke kast bort prime site på nyhetssaker med mindre nyheter
er ditt innhold (dvs at du er en nettavis)
109. Plassering av elementer
• Følg konvensjoner
• Følg øyemønstre (”det gylne triangel”)
• Signaliser viktighet med plassering
110. Skap orden
• Sett ting på linje både vertikalt og horisontalt, så blir siden
lettere leselig
111.
112. Vær konsekvent
• Menyer må oppføre seg forutsigbart.
• Samme type sider skal se likedan ut.
• Alle linker skal være formatert på samme måte.
• Alle menypunkter på samme nivå skal være formatert på
samme måte.
• Samme type innhold skal eventuelt plasseres på samme sted
på forskjellige sider (hvis relevant).
113.
114.
115.
116.
117. Brukervennlighet
• Alle aktive elementer må være 150% selvforklarende:
• Linker må formateres riktig
• Knapper må se ut som knapper
• Utfyllingsbokser må se ut som utfyllingsbokser …
118. Brukervennlighet
Brukervennlige linker
• Blå og understreket +
• En tydelig annen farge og understreket
• Ganske lik farge, men understreket
• Blå og ikke understreket
• En tydelig annen farge og ikke understreket
• Ganske lik farge og ikke understreket
• Ingen markering
-
119.
120. Typografi
• Valg av font
• Størrelser og forskjeller
• Teksteffekter
• Tekstbilde
121. Valg av font
• Sans-serif fonter er best leselige på skjerm
• Velg en sans-serif font (Arial, Verdana, Trebuchet) fremfor en
seriff-font (Georgia)
• Georgia kan brukes til overskrifter, men bare over 16px
• (Pass på når du limer inn fra Word, slik at ikke
fontformatering kommer med.)
122. Andale Mono Impact
Arial Trebuchet MS
Comic Sans MS Times New Roman
Courier New Verdana
Georgia
126. Skriftstørrelser og forskjeller
• 12 - 14 piksels skrift er optimalt
• 10 piksels skrift er for lite
• Det bør være 2 - 4 pikselstørrelser forskjell mellom overskrift
og tekst
• En begrenset mengde forskjellige skriftstørrelser er ryddig
(for eksempel 3 kategorier; brødtekst, mellomtittel og
hovedoverskrift)
127. Teksteffekter
• STORE BOKSTAVER er tungt leselig og bør unngås i menyer
og i overskrifter
• Kursiv blir visuelt grumsete og bør unngås
• Fancy fonter bør alltid unngås på web
• Ord i andre farger bør aldri brukes til annet enn linker
• Fet skrift kan brukes til å utheve enkelte ord
128. Tekstbilde
• Unngå linjer som er mer enn 70 tegn lange
• Unngå avsnitt som er mer enn 100 ord lange
• Unngå overskrifter som er mer enn 6 ord lange
• Unngå ingresser som er lenger enn et eventuelt teaserbilde
(eller lenger enn 4-5 setninger)
129.
130. Innholdstyper
• Transaksjon - å utføre en handling
• Informasjon - å finne spesifikke opplysninger
• Dialog - å utveksle informasjon
• Oppdatering - å få opplysninger om nye ting som skjer
• Opplevelse - å bli underholdt
• Applikasjon - å behandle data
131. Transaksjon
• Det må vises hvor mange trinn transaksjonen har
• Det må markeres hvilket trinn man befinner seg på
• Man skal alltid kunne bevege seg minst ett trinn
bakover
• Når feil blir gjort, skal feilen markeres, og man skal gis
mulighet til å rette feilen uten at transaksjonen
havarerer
• Når en transaksjon fullføres skal brukeren alltid få
melding om at den er gjennomført.
132.
133. Informasjon
• Bruk riktige trigger-ord
• Del opp og grupper informasjonen på en relevant måte
• Velg riktig sidelengde
• Følg buffet-prinsippet - vis fram hva du har, og la
bruker velge selv
• Bruk innholdsmaler når det er relevant
134.
135. Dialog
• Dialog kan foregå mellom bruker og avsender, eller
bare brukere imellom
• Hvis dialogen foregår i sanntid må den være
umiddelbart tilgjengelig for bruker
• Hvis dialogen skjer i form av lagrede meldinger, f. eks.
på et forum, bør den deles opp tematisk.
136.
137. Oppdatering
• Brukeren leter ofte ikke etter noe spesielt, men ønsker
å finne ut om det er noe nytt han bør vite om
• Innholdet bør ha bredde heller enn dybde, og bør derfor
bestå av flere ulike saker
• Innholdet bør være kronologisk ordnet
• De nyeste/viktigste sakene bør stå øverst og/eller være
størst
138.
139. Opplevelse
• Opplevelsesinnhold bør oppfylle nettstedets mål,
samtidig som det bør gi brukeren en positiv opplevelse
• Opplevelsesinnhold bør være raskt tilgjengelig -
kortest mulig ventetid for brukeren
• Man bør gjøre seg minst mulig avhengig av spesialisert
maskin- eller programvare
• Navigasjon og betjening bør være enklest mulig
140.
141. Applikasjon
• Applikasjoner bør oppfylle nettstedets mål, samtidig
som det har en nytteverdi for brukeren
• På web bør applikasjoner i størst mulig grad benytte
seg av standard HTML-elementer
• Applikasjoner bør ha kortest mulig responstid
• Navigasjon og betjening bør være enklest mulig
• Informasjonssikkerhet må være ivaretatt
• Applikasjonens output må være til å stole på
145. Ulike innholdstyper må presenteres
forskjellig
• Innholdstypene har egne kjennetegn som lar bruker
identifisere dem og forstå hvordan de skal benyttes
147. Bruksegenskap
En gjenstands oppfattede og
faktiske egenskaper, først og
fremst de grunnleggende
egenskapene som avgjør mulige
måter å bruke gjenstanden på.
Donald Norman: The Design of Everyday Things
148. Vi kan som oftest se hva en ting er
- og hvordan den skal brukes
150. Bruksegenskaper på nett
• Alle funksjonselementer på en nettside har visse
bruksegenskaper
• Det er viktig at disse bruksegenskapene fremtrer
tydelig
• Det er viktig å matche riktig funksjonselement til riktig
funksjon
151. Tekstlenken
• Signaliserer at ytterligere informasjon er tilgjengelig
• Skal skille seg fra teksten rundt
• Markeres normalt gjennom at den er blå og
understreket
152. Må tekstlenken være blå og
understreket?
• Hvis lenken er i løpende tekst, må den ihvertfall være
en annen farge enn teksten rundt, og aller helst
understreket i tillegg
• Hvis lenken er et sted vi venter å finne lenker, f.eks. i
en meny, kan vi droppe fargeforandring og/eller
understreking, men vi bør vurdere sekundære måter å
vise klikkbarhet på
153. Funksjonelle elementer - knapper
• En knapp brukes til å sette igang og avbryte
handlinger, foreta valg, og skru funksjoner på eller av.
154. Regler for brukervennlige knapper
1. Knappen må se ut som en knapp
2. Knappen må skille seg tydelig ut fra omgivelsene
3. Knappen må vise sin egen funksjon
4. Knappen må ha tydelige tilstander
5. Knappen må være stor nok
155. Funksjonelle elementer - faner
A B C
• Faner brukes til å velge mellom likeverdige alternativer
• Faner er ofte et naturlig valg for en toppmeny
• Det må være tydelig hvilken fane som er aktiv, f.eks. at
den har samme farge som den siden som vises
157. Persuasive path
• Bygge veier fra det bruker kommer for til det du ønsker
han skal gjøre
• Ta utgangspunkt i et A- eller B-scenario og konvertere til
et C-scenario
161. Slott og såpe
• Det er viktig at såpen plasseres nedtonet i forhold til
slottet
• Slott først, så såpe
162. To typer lenker
• POC – point of conversion. Den handlingen som er det du
ønsker bruker skal gjøre – leder til neste trinn på
persuasive path
• POI – point of information (kalles også noen ganger point
of resolution). Leder til informasjon som noen kunder
trenger for å kunne gå til neste skritt i persuasive path.
166. POC og POI
• Man kan ha mange POI’er …
• … men som regel kun én POC
• POC skal alltid være større, tydeligere og ”skitnere” enn
POI’ene.
167. Persuasive path-grep
• Alltid avslutte en side med en lenke
• Implementere faste mersalgs- og oppsalgs-felter på
siden
• Tenke ønskede veier videre