SlideShare une entreprise Scribd logo
1  sur  167
Télécharger pour lire hors ligne
Bestepraksis på web
Jakob Thyness / Nina Furu
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
Nina Furu
• Partner, Webgruppen AS

• Driver Nettredaktør-skolen

• Utstrakt kurs- og konsulent-
  virksomhet

• Erfaring med web/digitale medier
  siden 1995

  nina@webgruppen.no
Hvorfor bestepraksis?



 • Bestepraksis er snarveien til å nå målene
 • Det finnes faktisk riktig og galt på web
Mål for nettsiden

 • Distribuere informasjon
 • Selge produkter
 • Drive markedsføring
 • Avlaste ekspedisjonen
 • Understøtte andre aktiviteter
 • ...
SMART
      Specific
 (Spesifikt, ikke generelt)
SMART
 Measurable
 (Målbart og tallfestet)
SMART
 Attainable
  (Oppnåelig)
SMART
 Results-oriented
   (Resultatorientert)
SMART
 Time-based
   (Tidfestet)
Ved å følge bestepraksis når man målene
             man har satt opp
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/
Hvilke elementer er kritiske?

 • Findability
 • Innhold/konsept
 • Tekster
 • Navigasjon
 • Layout
 • Typografi
Morville-modellen

                                      useful

                          usable                desirable

                                     valuable

                          findable              accessible

                                     credible
Peter Morville
Semantic Studios
www.semanticstudios.com
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
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.
“Lukten av informasjon”
”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/
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!)
Hvor brukes trigger-ord?

 Trigger-ord skal brukes:
 • ...i menyer
 • ...i overskrifter
 • ...i tekster
 • ...i lenker
Gode trigger-ord bør være:


 • Enkle             • Løsninger
 • Beskrivende       • Brukerdefinerte
 • Konkrete          • Ikke beskrive brukeren
 • Substantiver      • Ikke nye ord
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.
Tekster
Tekster



• God webtekst er enkel og søkevennlig

• God webtekst er sjangerriktig

• God webtekst er tilrettelagt for vertikal lesning
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
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
              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
Sjangerriktige tekster



• Et typisk firmanettsted
  trenger kanskje ca 80 %
  informasjonstekster, 15 %
  nyhetstekster og 5 %
  handlingsutløsende tekster.
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
Og P.S.: Skriv ordentlig rettskrivning!



                                              For tips og fasiter, se
                                              www.korrekturavdelingen.no



  Takk til Per-Erik Skramstad for eksemplet
Findability



• WAI

• Søkemotorsynlighet

• Intern findability
WAI



• Web Accessability Initiative (www.w3.org/wai)
• Tilrettelegging av web for blinde, lesesvake mm.


• http://kvalitet.difi.no
Linker på
 overskrifter
-ikke bare “Les mer”
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
Søkemotorsynlighet
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
Hva styrer
rangeringen?
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.
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)
Feil redirect


• 301-redirect = permanent = riktig

• 302-redirect = midlertidig = FEIL!



• Sjekk selv:

• http://www.webconfs.com/http-header-check.php
Søkemotordreperteknologi
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)
Dårlig teknisk kvalitet
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
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
Dårlig intern linking
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)
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
Google vekter forekomster av ord
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
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
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
Utforming av nettstedet
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
Plassering av meny


Optimal plassering av en
meny er i venstre marg,
alternativt langs toppen av
siden i tillegg.
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
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
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!
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
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
A-scenarier
Innholdsfelt på forside
A og B-scenarier
             Meny


   A-scenarier
Innholdsfelt på forside
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
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
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
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.
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
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
Toppbanner




                         Sekundær-
Meny     Primærinnhold
                          innhold




       3-spalter I
Toppbanner

               Hovedmeny




                              Sekundær-
Undermeny     Primærinnhold
                               innhold




            3-spalter II
Toppbanner




Meny   Innhold        Innhold   Innhold




         4-spalter
Toppbanner




Meny              Innhold




       2-spalter
Toppbanner




  Innhold            Meny




2-spalter (Blogg)
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)
Det folk kommer
   for å finne
Det folk kommer
   for å gjøre
Det folk kommer
   for å finne
  akkurat NÅ
Det folk kommer
   for å finne
Viktigste
produkter
Viktigste
tjenester
Viktigste
Informasjon
Bannerblindhet




                 Banner-
                 blindhet
Bannerblindhet


Avsenders identitet




                      Banner-
                      blindhet
Bannerblindhet


Avsenders identitet
       Meny




                      Banner-
                      blindhet
Bannerblindhet


          Avsenders identitet
                 Meny




Primærinnhold           Sekundær-   Banner-
                         innhold    blindhet
Bannerblindhet


          Avsenders identitet
                 Meny




Primærinnhold           Sekundær-   Banner-
                         innhold    blindhet
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)
Lay-out



• Plassering av elementer

• Orden

• Konsekvens

• Brukervennlighet
Plassering av elementer



• Følg konvensjoner

• Følg øyemønstre (”det gylne triangel”)

• Signaliser viktighet med plassering
Skap orden




• Sett ting på linje både vertikalt og horisontalt, så blir siden
  lettere leselig
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).
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 …
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
                                                      -
Typografi



• Valg av font

• Størrelser og forskjeller

• Teksteffekter

• Tekstbilde
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.)
Andale Mono         Impact

    Arial        Trebuchet MS

Comic Sans MS   Times New Roman

Courier New        Verdana

   Georgia      
Skriftstørrelser og forskjeller
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)
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
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)
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
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.
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
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.
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
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
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å
En side kan bestå av flere
innholdstyper
Ulike innholdstyper må presenteres
              forskjellig



• Innholdstypene har egne kjennetegn som lar bruker
  identifisere dem og forstå hvordan de skal benyttes
Bruksegenskaper
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
Vi kan som oftest se hva en ting er
   - og hvordan den skal brukes
Det er lett å designe bort bruksegenskaper!
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
Tekstlenken


 • Signaliserer at ytterligere informasjon er tilgjengelig
 • Skal skille seg fra teksten rundt
 • Markeres normalt gjennom at den er blå og
   understreket
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å
Funksjonelle elementer - knapper




 • En knapp brukes til å sette igang og avbryte
   handlinger, foreta valg, og skru funksjoner på eller av.
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
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
Persuasive path
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
Persuasive path-mekanismer
Laget for
 bruker




            Laget for
              deg
Slott og såpe
Slott og såpe



• Det er viktig at såpen plasseres nedtonet i forhold til
  slottet
• Slott først, så såpe
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.
POC
POI’er
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.
Persuasive path-grep


• Alltid avslutte en side med en lenke
• Implementere faste mersalgs- og oppsalgs-felter på
  siden
• Tenke ønskede veier videre

Contenu connexe

Similaire à Bestepraksis

Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Veronica Heltne
 
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Yggdrasilkonferansen
 
Webprosjekt v11
Webprosjekt v11Webprosjekt v11
Webprosjekt v11Nina Furu
 
Brukersentrert søk
Brukersentrert søkBrukersentrert søk
Brukersentrert søkAnders Hoff
 
20090924 Foredrag J Magnussen
20090924 Foredrag J Magnussen20090924 Foredrag J Magnussen
20090924 Foredrag J MagnussenWebRed
 
Optimalisering av innhold for søk
Optimalisering av innhold for søkOptimalisering av innhold for søk
Optimalisering av innhold for søkAre Halland
 
Gode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbrukerGode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbrukerNina Taraldsen
 
Universell utforming av digitale løsninger
Universell utforming av digitale løsningerUniversell utforming av digitale løsninger
Universell utforming av digitale løsningerMetronet
 
2010 10 14 innholdsstrategi og analyse 2
2010 10 14 innholdsstrategi og analyse 22010 10 14 innholdsstrategi og analyse 2
2010 10 14 innholdsstrategi og analyse 2Eirik Hafver Rønjum
 
Strategisk prototyping
Strategisk prototypingStrategisk prototyping
Strategisk prototypingJanne Flusund
 
Hva kjennetegner de beste nettredaktørene?
Hva kjennetegner de beste nettredaktørene?Hva kjennetegner de beste nettredaktørene?
Hva kjennetegner de beste nettredaktørene?Ove Dalen
 
Don't Believe The Hype: Et kritisk blikk på intranett
Don't Believe The Hype: Et kritisk blikk på intranettDon't Believe The Hype: Et kritisk blikk på intranett
Don't Believe The Hype: Et kritisk blikk på intranettKari Hamnes
 
Er brukerne dumme? (Frokostseminar om brukertesting)
Er brukerne dumme? (Frokostseminar om brukertesting)Er brukerne dumme? (Frokostseminar om brukertesting)
Er brukerne dumme? (Frokostseminar om brukertesting)Haakon Halvorsen
 
Nettredaktørens rolle og verden
Nettredaktørens rolle og verdenNettredaktørens rolle og verden
Nettredaktørens rolle og verdenOve Dalen
 
Innhold på nye gjensidige.no
Innhold på nye gjensidige.noInnhold på nye gjensidige.no
Innhold på nye gjensidige.noLisa Kjelstad
 
Tips og triks for bedre brukeropplevelser
Tips og triks for bedre brukeropplevelserTips og triks for bedre brukeropplevelser
Tips og triks for bedre brukeropplevelserVegard Johansen
 

Similaire à Bestepraksis (20)

Hvordan skrive for web?
Hvordan skrive for web?Hvordan skrive for web?
Hvordan skrive for web?
 
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
 
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
 
Webprosjekt v11
Webprosjekt v11Webprosjekt v11
Webprosjekt v11
 
Brukersentrert søk
Brukersentrert søkBrukersentrert søk
Brukersentrert søk
 
20090924 Foredrag J Magnussen
20090924 Foredrag J Magnussen20090924 Foredrag J Magnussen
20090924 Foredrag J Magnussen
 
Innholdsstrategi
InnholdsstrategiInnholdsstrategi
Innholdsstrategi
 
Optimalisering av innhold for søk
Optimalisering av innhold for søkOptimalisering av innhold for søk
Optimalisering av innhold for søk
 
Innholdsstrategi
InnholdsstrategiInnholdsstrategi
Innholdsstrategi
 
Gode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbrukerGode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbruker
 
Universell utforming av digitale løsninger
Universell utforming av digitale løsningerUniversell utforming av digitale løsninger
Universell utforming av digitale løsninger
 
2010 10 14 innholdsstrategi og analyse 2
2010 10 14 innholdsstrategi og analyse 22010 10 14 innholdsstrategi og analyse 2
2010 10 14 innholdsstrategi og analyse 2
 
Strategisk prototyping
Strategisk prototypingStrategisk prototyping
Strategisk prototyping
 
Hva kjennetegner de beste nettredaktørene?
Hva kjennetegner de beste nettredaktørene?Hva kjennetegner de beste nettredaktørene?
Hva kjennetegner de beste nettredaktørene?
 
Don't Believe The Hype: Et kritisk blikk på intranett
Don't Believe The Hype: Et kritisk blikk på intranettDon't Believe The Hype: Et kritisk blikk på intranett
Don't Believe The Hype: Et kritisk blikk på intranett
 
Er brukerne dumme? (Frokostseminar om brukertesting)
Er brukerne dumme? (Frokostseminar om brukertesting)Er brukerne dumme? (Frokostseminar om brukertesting)
Er brukerne dumme? (Frokostseminar om brukertesting)
 
Nettredaktørens rolle og verden
Nettredaktørens rolle og verdenNettredaktørens rolle og verden
Nettredaktørens rolle og verden
 
Innhold på nye gjensidige.no
Innhold på nye gjensidige.noInnhold på nye gjensidige.no
Innhold på nye gjensidige.no
 
Tips og triks for bedre brukeropplevelser
Tips og triks for bedre brukeropplevelserTips og triks for bedre brukeropplevelser
Tips og triks for bedre brukeropplevelser
 
Sett på nett oppdal - per wangen
Sett på nett   oppdal - per wangenSett på nett   oppdal - per wangen
Sett på nett oppdal - per wangen
 

Bestepraksis

  • 1. Bestepraksis på web Jakob Thyness / Nina Furu
  • 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 • ...
  • 6. SMART Specific (Spesifikt, ikke generelt)
  • 7. SMART Measurable (Målbart og tallfestet)
  • 8. SMART Attainable (Oppnåelig)
  • 9. SMART Results-oriented (Resultatorientert)
  • 10. SMART Time-based (Tidfestet)
  • 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/
  • 13. Hvilke elementer er kritiske? • Findability • Innhold/konsept • Tekster • Navigasjon • Layout • Typografi
  • 14. Morville-modellen useful usable desirable valuable findable accessible credible Peter Morville Semantic Studios www.semanticstudios.com
  • 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
  • 34. WAI • Web Accessability Initiative (www.w3.org/wai) • Tilrettelegging av web for blinde, lesesvake mm. • http://kvalitet.difi.no
  • 35. Linker på overskrifter -ikke bare “Les mer”
  • 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
  • 39.
  • 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)
  • 43. Feil redirect • 301-redirect = permanent = riktig • 302-redirect = midlertidig = FEIL! • Sjekk selv: • http://www.webconfs.com/http-header-check.php
  • 44.
  • 46.
  • 47.
  • 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)
  • 50.
  • 51.
  • 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
  • 54.
  • 56.
  • 57.
  • 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
  • 60.
  • 62.
  • 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
  • 78.
  • 80. A og B-scenarier Meny A-scenarier Innholdsfelt på forside
  • 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
  • 89. Toppbanner Meny Innhold Innhold Innhold 4-spalter
  • 90. Toppbanner Meny Innhold 2-spalter
  • 91. Toppbanner Innhold Meny 2-spalter (Blogg)
  • 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)
  • 93. Det folk kommer for å finne
  • 94. Det folk kommer for å gjøre
  • 95. Det folk kommer for å finne akkurat NÅ
  • 96. Det folk kommer for å finne
  • 97.
  • 101.
  • 102. Bannerblindhet Banner- blindhet
  • 104. Bannerblindhet Avsenders identitet Meny Banner- blindhet
  • 105. Bannerblindhet Avsenders identitet Meny Primærinnhold Sekundær- Banner- innhold blindhet
  • 106. Bannerblindhet Avsenders identitet Meny Primærinnhold Sekundær- Banner- innhold blindhet
  • 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)
  • 108. Lay-out • Plassering av elementer • Orden • Konsekvens • Brukervennlighet
  • 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 
  • 123.
  • 125.
  • 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å
  • 142.
  • 143. En side kan bestå av flere innholdstyper
  • 144.
  • 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
  • 149. Det er lett å designe bort bruksegenskaper!
  • 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
  • 159. Laget for bruker Laget for deg
  • 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.
  • 163.
  • 164. POC
  • 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