1. Brukervennlige og
effektive nettsider
Are Gjertin Urkegjerde Halland
Informasjonskontoret for kristne folkehøgskoler
Kongsvinger, 8. november 2007
2. NetLife Research er uavhengige
eksperter på brukervennlig design
• Brukersentrerte designprosesser
• Informasjonsarkitektur og interaksjonsdesign
• Brukertesting og eyetracking
• Evalueringer, kurs og rådgivning
11. Myter om brukervennligheit
• Maks tre klikk til alt
• Sju elementer i menyen
• Unngå scrolling
• Mykje funksjonalitet
• Ser fint ut
12. Definisjonar av brukskvalitet
Eit system skal være
– lett å lære,
– effektivt,
– lett å huske,
– håndtere feil på ein god måte
– og være behagelig å bruke
http://www.useit.com/alertbox/20030825.html
13. Kordan sikre brukervennligheit?
• Involver brukarar og brukarkrav i
utviklingsprosessen
• Tilpass innhold og teknologi til brukarane,
ikkje omvendt
• Gjer løysninga oppgåvefokusert
• Følge utbredte retningslinjer
• Iterativ utvikling
• Brukertest
16. ”I will accept poor usability if I
get what I need, if the total
experience is great. I will reject
perfect usability if I am not
rewarded with a useful,
engaging experience.”
- Donald Norman
19. Eit spørsmål om tillit
”If possible, avoid having ads on your site.
If you must have ads, clearly distinguish
the sponsored content from your own.
Avoid pop-up ads, unless you don't mind
annoying users and losing credibility.”
http://credibility.stanford.edu/guidelines
21. 10 retningslinjer for truverdigheit
1. Gjer det lett å verifisere innhaldet ditt (lenker ut er bra)
2. Vis at det står ein ekte organisasjon bak
3. Vis fram ekspertise gjennom innhald
4. Vis fram ekte og truverdige mennesker
5. Gjer det lett å kontakte deg
6. Utform sidene profesjonelt og hensiktsmessig (design)
7. Gjer nettstaden nyttig og brukarvennlig (oppgåvefokusert)
8. Vis at innhaldet er oppdatert
9. Vis stor varsemd med annonser
10. Unngå feil av alle slag (også småfeil)
http://credibility.stanford.edu/guidelines
22. Lett å finne?
Utfordringa er ikkje lenger å gjere
informasjon tilgjengeleg, men å
besvare informasjonsbehov når
dei oppstår, der dei oppstår
23. Verdien som blir skapt er avgjerande
• Verdi for brukaren
– Nytteverdi
– Opplevelse
– Return on Experience
• Verdi for avsendar
– Inntjening
– Innsparing
– Return on Investment
25. 4 smarte ting å tenke på
• Legg til rett for skumming
• Bruk triggerord aktivt
• Lag oppgåvefokuserte innganger
• Vurder om nyheiter er riktig
26. 1) Folk les ikkje tekstar, dei skummar
• Skriv kort og legg til rette for skumming
– Korte setningar
– Korte avsnitt
– Punktlister
– Utheva nøkkelord
27. 2) Folk leiter etter triggerord
• Triggerord
– Ordet brukeren ”har i hodet sitt”
– Det du bruker når du søker på Google
• Sjekk søkeloggen hvis du har!
• Bruk triggerord aktivt i tekst og lenker
Kva er våre triggerord?
28. 3) Tenk viktigste oppgåver
• Utgangspunkt i personas og scenarier
• Lukten av informasjon og triggerord
32. 4) Er nyheiter den beste måten?
• Burde vi heller ha
oppgåvefokuserte
inngangar?
• Blogg kan vere eit meir
personleg og betre
alternativ
33. “(…) etter ei uke har (nyheiten) ingen verdi lenger. Den
er gløymt, og ligg difor og rotnar i arkivet. Og det luktar
ikkje godt om nokon skulle slumpe til å finne den.”
http://www.nettskriving.no/skrivetips/2005/10/794553.shtml
34. Agenda
10.00 – 10.45 Hva er gode brukeropplevelser?
10.45 – 11.15 Kaffepause
11.15 – 12.30 Personas, bruksoppgaver og forretningsmål
12.30 – 13.30 Lunsj
13.30 – 14.00 Intro til kjernemodellen
14.00 – 15.30 Kjernesider (Gruppearbeid)
15.30 – 16.00 Kaffepause
16.00 – 17.00 Presentasjon og tilbakemeldinger
35. Agenda
10.00 – 10.45 Hva er gode brukeropplevelser?
10.45 – 11.15 Kaffepause
11.15 – 12.30 Personas, bruksoppgaver og forretningsmål
12.30 – 13.30 Lunsj
13.30 – 14.00 Intro til kjernemodellen
14.00 – 15.30 Kjernesider (Gruppearbeid)
15.30 – 16.00 Kaffepause
16.00 – 17.00 Presentasjon og tilbakemeldinger
37. Tre viktige spørsmål
1. Kven er brukarane? 2. Kva mål har dei?
3. Hvordan kan vi hjelpe dem å nå sine mål?
38. 1. Kven er brukargruppene?
• Målgrupper er på ikkje tilstrekkelig
• Vi må vite kven dei faktiske brukargruppene er
• Aller helst bør vi snakke med folk for å finne
ut dette
?
39. 2. Kva mål har dei?
Døme: NRK
Kva er oppskrifta på skillingsbollar?
Døme: Lånekassen
Når er fristen for å søke fast rente?
Døme: SFT
Kor mykje PCB-holdig rivningsmateriale er på
?
avveie?
40. 3. Korleis kan vi hjelpe folk å nå sine mål?
• På internett?
?
– Innhold
– Funksjonalitet
– Design og layout
• Og korleis skal nettet forholde seg til andre
kanaler: brosjyrer, kampanjer, kundeservice?
41. Personas og scenarier
• Kva er personas?
– Ikkje reelle brukere
– Ikkje gjennomsnittlege brukere
– Men typiske brukere
• Kvifor personas?
– Konkretisering
– Vise brukarane sitt handlingsmønster
– Gi prosjektet brukarfokus
– Styrande for videre utvikling
– Felles referanse for prosjektteamet
– Evalueringsverktøy
43. Case: Vinmonopolet
Scenario 1
Eli skal ha jentekveld på lørdag
og vet at hun snart må begynne
å tenke på å bestille, helst i løpet
av mandagen. Hun ringer
kundesenteret og ønsker ikke
postoppkrav. Kundesenteret
anbefaler å betale med
kredittkort, men Eli er skeptisk til
å oppgi dette over telefon.
Kundesenteret anbefaler henne
da å ta turen innom nettsidene
til Vinmonopolet og bestille via
nettbutikken. Eli har ikke gjort
dette før, men tar anbefalingen
og går inn på
www.vinmonopolet.no.
44. Andre prioriterte brukargrupper
• Mat & vinkobleren – Kristian
– Litt perfeksjonist. Opptatt av at vinen passer til
maten.
Ønsker å briljere når det kommer gjester.
• Butikkhandelsplanleggeren - Finn
– Ansvarlig for å organisere innkjøp av drikkevarer til
forspillene.
Ønsker å kjøpe noe godt å drikke til en romantisk
kveld.
45. Eli - distriktsbrukaren
Finn - butitikkhandel
Kristian – mat&vin-kobler
pris
Rolf – vineksperten
type
land
drue
47. Oppgave
• Grupper på to og to
• Lag ein persona og typiske scenarier
• Tid: 20 minutter
Bilde Navn, alder, bakgrunn
eller Viktigste mål
tegning Viktigste triggerord’
Bruksscenario: Kordan ville
vedkommande ønske å
a) finne våre nettsider og
b) bruke våre nettsider?
50. Har du målsetningar for nettstaden?
Passive målsetningar:
• ”Få informasjon ut på nett” (men kvifor?)
• ”Ha vårt på det tørre” (men kven har nytte av
det?)
• ”Lansere på tid og budsjett” (men kva?)
• ”Tre nyheter i veka” (men kvifor?)
• ”Få fleire besøk til nettsidene” (men kven?)
• ”Meir effektiv arbeidsflyt” (men kordan?)
• ”Færre henvendelsar” (men kva slags
henvendelsar?)
51. Investeringar skal gi avkastning
• Design, utvikling og drift av nettstaden din er
ei investering
• Alle investeringar bør gi ein målbar avkastning
• Kva slags ”avkastning” kan nettstaden din gi?
• Kva slags grep kan du gjere for å auke
avkastninga?
• Kordan kan du måle avkastninga?
65. Design med kjernemodellen
Prioritér og design kjernen
(Prioritert innhald og funksjonalitet som tilfredsstiller brukarmål)
Design vegar inn til kjernen
(SEO, fasetter, menyar, søk, RSS, nyheitsbrev – alle mulige midler)
Tilby relevante vegar vidare frå kjernen
(”Calls to Action” som møter brukar-, forretnings- og sosiale mål)
66. Kjerne, vegar inn og vegar vidare
Mest optimale informasjonsenhet
Kjernen
Balanserer brukar- og forretningsmål
67. Eksempel: Kommune
Kjerne: Tenester , t.d. barnehage
Forside Online søknad
Søk om barnehageplass
Søknadsfristen for hovudopptaket er 1. mars, men ein kan søkja
Internt søk barnehageplass heile året. Du søkjer plass ved å bruka vår fullelektroniske
Offline søknad
søknadsportal. Her sender du oss søknaden frå dataskjermen:
n Opplysningane går direkte inn i vårt barnehagesystem
Google/SEO n Du får ei kvittering på at søknaden er motteken Kontaktpunkter
Søk om barnehageplass
Inngåande lenker Skriv ut
Spørsmål & svar
Nyheitsbrev - Kor gamalt må barnet vera før det kan byrja i barnehage? Send til ein venn
Barnet må vere fylt 10 månader før det kan begynne i barnehagen.
Det kan søkjast plass i inntil 3 barnehagar.
+ Kva er prioriterte grupper?
Brosjyrer + Kor mykje kostar det?
Kart over barnehagar
+ Finst det barnehagar som er opne på kvelden og om natta?
+ Kor lang tid tar det før eg får svar på søknaden?
RSS + Kan eg klage på utfallet av søknaden?
Lenker til barnehagar
Barnehagar i Førde
Kommunale barnehagar
Førde familiebarnehage Kyrkjevegen barnehage
Slåttebøen 33 Postboks 6
6800 FØRDE 6800 FØRDE
57 83 22 47 916 90 359
68. Eksempel: Finn
Forside Online søknad
Internt søk Offline søknad
Google/SEO Kontaktpunkter
Inngåande lenker Skriv ut
Nyheitsbrev Send til ein venn
Brosjyrer Kart over barnehagar
RSS Lenker til barnehagar
73. Kjernevariasjonar
Kjerneside Kjerneflyt Mange kjerner
Distribuert kjerne Kjerne-mal Long Tail-kjerne
74. Design gode vegar inn til kjernen
Internt søk
Forside
RSS
Opne APIer
Affiliates
Nyheitsbrev
Google/SEO
75. Vegar vidare: Calls to action
Legg i handlevogn
Kjøp brukt
Legg i ønskeliste
Andre kjøpte...
Se også...
Gi vurdering
Tagg produktet
76. Temaer og referanser
Inward Paths
Findability Core
Prioritiering Outward Paths
Verdi
Search Engine Epicenter Design Copy Calls to Action Captology
Optimization Ads as interface Simplicity Getting Persuasion Tunelling
Links Search Marketing Real Adaptive Design Agile Rhetorics Kairos Persuasion
Feeds Newsletters Affiliates Development Flow Paths Conversion Statistics
Information scent Offline Human Information Interaction
ROI Social Design
marketing Site navigation Sensemaking Hub-Spoke Tagging Recommendation
Facets Residue Attraction Tags IA2.0 Microformats Systems Viral Marketing
Taxonomies Site Search Best Semantic Web APIs Personal Social Media Optimization
Bets Link-rich frontpages InfoClud
77. Alternative bruksområder
• Enkelt, fleksibelt tankeverktøy
• Støtteverktøy for intuitive valg
• Flygande start på konseptfasen
• Zoom inn på konsept utan å låse
• Prioritering for redesign
• Kommunikasjonsverktøy
• Flytte fokus frå forsida
79. Og la oss bygge eit vakkert...
... informasjonsunivers!
80. Agenda
10.00 – 10.45 Hva er gode brukeropplevelser?
10.45 – 11.15 Kaffepause
11.15 – 12.30 Personas, bruksoppgaver og forretningsmål
12.30 – 13.30 Lunsj
13.30 – 14.00 Intro til kjernemodellen
14.00 – 15.30 Kjernesider (Gruppearbeid)
15.30 – 16.00 Kaffepause
16.00 – 17.00 Presentasjon og tilbakemeldinger
81. 1) Finn mulige kjerner
Gruppeoppgave
• Lag en liste over de mest åpenbare
kjernene/kjernesidene for din skule
Ønsket resultat
• Opplisting på A4-ark
Tips!
• Hva er det brukeren aller helst vil gjøre?
Tid • Hva skal til for at brukeren blir fornøyd?
• Hva er det DU aller helst vil oppnå?
• 5 minutter • En kjerne kan være en side, men også en flyt,
et element, eller noe helt annet...
82. 2) Velg ut én kjerne
Gruppeoppgave
• Velg ut én av kjernene/kjernesidene
(den dere tror er aller viktigs)
• Sett en stor ring rundt denne
• Denne skal vi jobbe videre med etterpå
Tips!
• Hva er det brukeren aller helst vil gjøre?
Tid • Hva skal til for at brukeren blir fornøyd?
• Hva er det DU aller helst vil oppnå?
• 5 minutter
83. 3) List mulige elementer i kjernen
Gruppeoppgave
• List opp alle potensielle elementer i kjernen (eller
på kjernesiden om du vil)
Ønsket resultat
• Opplisting på et A4-ark Tips!
• Elementer kan f.eks. være tittel,
bilde, kart, søknadsknapp,
spørsmål og svar, kontaktperson,
Tid osv.
• Tenk på både kjerne-elementer og
• 5 minutter støtteinformasjon
84. 4) Velg kjerne-elementer
Gruppeoppgave
• Velg ut 1-3 kjerneelementer
(det aller, aller viktigste!)
Ønsket resultat
• Sett ring rundt kjerne-elementet/-ene i lista
Tips!
• Kjerne-elementer er de aller, aller mest
Tid sentrale elementene i kjernen/kjernesiden
• Hva står igjen hvis du måtte fjerne alt unntatt
• 5 minutter det som absolutt MÅ være der?
• Det KAN være mer enn ett kjerne-element,
men prøv først å unngå dette...
85. 5) Velg støtteinformasjon
Gruppeoppgave
• Velg ut de elementene som må være med som
støtteinformasjon
Ønsket resultat
• Sett kryss ved støtte-elementene
Tips!
• Støtteinformasjon er nødvendig
Tid informasjon som brukeren kan ha
behov for for å løse sine oppgaver,
• 5 minutter føle trygghet ved sine valg, osv.
86. 6) Design kjernen!
Gruppeoppgave
• Fyll ut brukermål og forretningsmål øverst
• Stryk elementer som ikke skal være med
• Design kjernen/kjernesiden slik den bør være
Tips!
Tid • Fokuser på det viktigste kjerneelementet
• Det er lov å delegere design av enkeltelementer
• 25 minutter innad i gruppen.
• Bruk gjerne post-it-lapper som kan limes på skissen.
• Tekst og innhold er også design!
87. 7) Lag gode veier inn til kjernen
Gruppeoppgave
• List opp alle mulige veier inn til kjernen dere har
laget, og prioritér de viktigste
Tips!
Ønsket resultat • Tenk så fritt som overhode mulig
• Skriv inn veier inn på for å finne veier inn til kjernen
• Veier inn kan være gjennom intern
pilene til venstre på arket navigasjon på nettstedet, men også
gjennom andre nettsteder, offline
kanaler, osv.
Tid • Tenk på hvor brukeren befinner seg
• 15 minutter (fysisk, mentalt og virtuelt) og
hvordan veien derfra kan lede til
din kjerne
88. 8) Lag gode veier videre fra kjernen
Gruppeoppgave
• List opp alle mulige veier videre fra kjernen utfra
brukermål og forretningsmål
• Prioritér de viktigste Tips!
• Når brukeren har fått ”svar
på sine spørsmål” eller ”løst
Ønsket resultat sitt problem”, hva er da
• Veier videre til høyre på arket naturlige veier videre?
• Hva er det vi som avsendere
ønsker at brukeren skal
gjøre?
Tid • Har våre veier videre en
• 15 minutter form for relevans til der
brukeren er nå?
89. Agenda
10.00 – 10.45 Hva er gode brukeropplevelser?
10.45 – 11.15 Kaffepause
11.15 – 12.30 Personas, bruksoppgaver og forretningsmål
12.30 – 13.30 Lunsj
13.30 – 14.00 Intro til kjernemodellen
14.00 – 15.30 Kjernesider (Gruppearbeid)
15.30 – 16.00 Kaffepause
16.00 – 17.00 Presentasjon og tilbakemeldinger
90. Agenda
10.00 – 10.45 Hva er gode brukeropplevelser?
10.45 – 11.15 Kaffepause
11.15 – 12.30 Personas, bruksoppgaver og forretningsmål
12.30 – 13.30 Lunsj
13.30 – 14.00 Intro til kjernemodellen
14.00 – 15.30 Kjernesider (Gruppearbeid)
15.30 – 16.00 Kaffepause
16.00 – 17.00 Presentasjon og tilbakemeldinger
91. 9) Vi presenterer for hverandre!
• Vi tar runden fra bord til bord og ser hva de
ulike gruppen har kommet fram til
92. Oppsummering
Uten kjernemodell
• Hvor langt ville vi kommet uten?
• Har vi fått andre idéer nå ?
• Hvor ville vi ha begynt uten?
• Gjenstår fortsatt mye arbeid med å detaljere
innhold, navigasjon og design
• MEN vi har satt fokus på det viktigste!