tips og triks for bedre brukeropplevelser
DESCRIPTION
Presentasjon for IT-forum Nord-Norge, Sjøgata 12, 15. juni 2011TRANSCRIPT
![Page 1: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/1.jpg)
Tips og triks for bedre brukeropplevelser
Vegard A. JohansenInformasjonsarkitekt / interaksjonsdesigner
![Page 2: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/2.jpg)
Ramsalt Lab ● Etablert 2010 etter sammenslåing av Ramsalt Web og
Aurora Labs● 4 ansatte: Yngve, Martin, Ole og Vegard ● Rådgivning og utvikling av nettløsninger● Spesialister på webplattformen Drupal● Ambassadører for fri programvare
![Page 3: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/3.jpg)
Drupal
● Er fri programvare = sikkerhet for våre kunder
● Aktiv utvikling● Gir få føringer på hvilke løsninger du
kan lage med det● Er søkemotoroptimalisert● Kan utvides lett● Kan integreres lett med både sosiale
medier og interne systemer
![Page 4: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/4.jpg)
Drupal i verden
![Page 5: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/5.jpg)
Drupal fra oss
![Page 6: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/6.jpg)
..noen flere● Senter for IKT i utdanningen● Morgenbladet● Kommunal Rapport● Svalbardposten● Tromsø internasjonale filmfestival● Kongsberg Sattelite Service● Nasjonalt senter for samhandling og telemedisin● Douc Universidad Católica de Chile● Sparebanken Nord-Norge● Buktafestivalen● Eiendomsmegler1 ● Rica Ishavshotell, ● Studentparlamentet● +++
![Page 7: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/7.jpg)
Meg● Vegard A. Johansen● Hovedfag i medievitenskap fra Universitetet i København ● 34 år, samboer og 0,9 barn (ett i august)● Arbeidet på Universitetet i Tromsø, Grey Digital i
København, Nasjonalt senter for samhandling og telemedisin, freelance webutvikler og nå på Ramsalt Lab.
![Page 8: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/8.jpg)
Informasjonsarkitektur
Informasjonsarkitektur handler om å sortere, kategorisere og organisere innhold på den mest logiske måten for brukeren.
Hensikten er å gjøre informasjonen oversiktlig og forståelig og å effektivisere navigasjon og gjenfinning. (Halogen)
~
Ofte brukt som stillingsbetegnelse på oss som arbeider med de mer strategiske og konseptuelle aspektene av webutvikling.
![Page 9: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/9.jpg)
![Page 10: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/10.jpg)
Bransjeutvikling
● Programmereren ● Prosjektlederen ● Webredaktøren● Webskribenten● Markedsføreren● Søkemotoroptimalisereren● Designeren● Informasjonsarkitekten● Interaksjonsdesigneren● Stategen
○ sosiale medie-stategen ● Dialogsjef (community manager) ● Programmereren● Driftseksperten● ++
![Page 11: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/11.jpg)
Hovedområder● Strategi● Design / estetikk● Brukeropplevelse ● Teknologi● Markedsføring (inkludert søkemotoroptimalisering)
![Page 12: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/12.jpg)
"Brukeropplevelse"totalopplevelsen en bruker har ved anvendelse av et produkt, tjeneste eller et system
![Page 13: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/13.jpg)
"Nyttig"Er den mest etterspurte / nyttigste informasjonen sentralt plassert, og der brukerne ønsker å finne det?
Lider du av nyhetssyken?
![Page 14: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/14.jpg)
![Page 15: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/15.jpg)
"Brukervennlig"● Lett å lære● Effektiv å bruke● Lett å huske● Relativt feilfritt og
feiltolerant● Behagelig å bruke
![Page 16: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/16.jpg)
"Finnbar"Brukeres mulighet til å finne relevante websider, og å finne relevant informasjon på de.
Ekstern
● Søkemotoroptimalisering● Optimalisering for sosiale
medier: "Like", "Share"
Intern
● Finn lett frem i eksisterende informasjon hos deg
![Page 17: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/17.jpg)
"Tilgjengelig"Universell tilrettelegging: Nettstedet kan brukes av alle uansett funksjonshemming
● WAI / WCAG● 6-8% er fargeblinde● Google er en blind
bruker● Tilgjengelighet =
søkemotoroptimert
![Page 18: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/18.jpg)
![Page 19: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/19.jpg)
RestenKredibel
● Hva gir tillit og kredibilitet?
● Overbevisningspsykologi
Attråverdig● Hva påvirker oss på et
mer emosjonelt plan?
Verdifull● Sluttmålet: må gi verdi til
de som står bak (flere medlemmer, mer salg etc.)
![Page 20: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/20.jpg)
Spørsmål så langt?
![Page 21: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/21.jpg)
"It's not rocket science" - Steve Krug
![Page 22: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/22.jpg)
Metodikker, uten brukere
● Interne søkelogger, Google analytics og Google webmaster tools
● Split-testing● WAI / WCAG-validatorer + fargeblindfilter +
skjermleserfilter● Heuristikker / ekspertevalueringer
![Page 23: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/23.jpg)
Google Analytics
![Page 24: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/24.jpg)
Google Webmaster Tools
![Page 25: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/25.jpg)
Meta descriptions og Google (og Facebook)
![Page 26: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/26.jpg)
Sosiale medier
![Page 27: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/27.jpg)
Sosiale medier
![Page 28: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/28.jpg)
Noen ting å ta med
● Førstesiden ikke alltid viktigst! (bruk footer)● Hva gir treff? Nyheter eller faktasider? Sier bounce rate
noe? ● Tilsvarer din ordbruk brukernes ordbruk? ● Utnytter du sosiale medier? ● Optimere sidene med mest treff● Fjerne sider som ikke har treff
![Page 29: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/29.jpg)
Split-testing
● Google Website Optimizer● Styr brukere mot to eller flere forskjellige inngangsporter,
mål resultatene
![Page 30: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/30.jpg)
![Page 31: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/31.jpg)
![Page 32: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/32.jpg)
![Page 33: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/33.jpg)
![Page 34: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/34.jpg)
Split-testing
![Page 35: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/35.jpg)
Validatorer
● Automatisk validering av sider etter standarder: HTML, WAI / WCAG
● www.cynthiasays.com / validator.w3.org
![Page 36: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/36.jpg)
![Page 37: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/37.jpg)
Heuristikker (indikatorer) / ekspertevalueringer
![Page 38: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/38.jpg)
Heuristikker (indikatorer) / ekspertevalueringer
● Bør ikke brukes ukritisk, men veldig bra som sjekklister og for å gjøre seg oppmerksom på ting man kanskje ikke har tenkt på
● Må kunne tolke og forstå resultatene● Bedre på tilgjengelighet enn på brukervennlighet, da
tilgjengelighet ofte handler om rene tekniske implementeringer.
![Page 39: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/39.jpg)
Spørsmål så langt?
![Page 40: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/40.jpg)
Metodikker, med brukere
● Brukertester○ Lag scenarier basert på strategi / mål:
■ Finn parkeringsplass i forbindelse med fødsel på UNN.
■ Ditt scenarie?○ 3-5 korte tester identifiserer nesten alltid noe ○ Juster, test på nytt.
● (Papir)prototypetesting og Kortsortering
![Page 41: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/41.jpg)
Prototypetesting
![Page 42: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/42.jpg)
Prototypetesting
![Page 43: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/43.jpg)
Prototypetesting
![Page 44: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/44.jpg)
Prototypetesting
![Page 45: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/45.jpg)
Kortsortering
● La brukerne sortere innholdet ditt, gir unik innsikt i hva de assosierer med det.
● Flere metoder, men skriv eksempelvis alle titler på undersider på post-it-lapper, og la brukerne sortere dem i frie eller faste kategorier.
![Page 46: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/46.jpg)
Kortsortering
Siste nyttom tilbudenekontakt ossnettbaserte kurs guider og veiledninger fagnettopptak oversikt videokonferanser om helsekompetanse brukerveiledningervåre tjenester
![Page 47: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/47.jpg)
![Page 48: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/48.jpg)
Kortsortering - finn logiske inngangsporter til innholdet
![Page 49: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/49.jpg)
![Page 50: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/50.jpg)
![Page 51: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/51.jpg)
![Page 52: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/52.jpg)
Andre metodikker
● Spørreundersøkelser● Andre kvalitative metoder (workshops, intervjuer) ● Personas
![Page 53: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/53.jpg)
![Page 54: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/54.jpg)
Oppsummering
● Ramsalt, Drupal, Vegard● Hovedområder i bransjen● Teoretisk bakteppe ● Metodikker uten brukere
○ søkelogger / analyseverktøy○ integrere med sosiale medier / trafikk-kilder○ split-testing○ validatorer / sjekklister
● Metodikker med brukere ○ brukertester○ kortsortering○ workshops / intervju / personas
![Page 55: Tips og triks for bedre brukeropplevelser](https://reader033.vdocuments.site/reader033/viewer/2022051108/54550674af795994188b468f/html5/thumbnails/55.jpg)
Spørsmål? Kommentarer?
www.ramsalt.com www.facebook.com/ramsaltlab
www.twitter.com/ramsalt