Bestepraksis på webJakob Thyness / Nina Furu
Jakob Thyness • Partner, Webgruppen AS • Utdannet art director • Mer enn 20 års designerfaring • Erfaring med web/digitale...
Nina Furu• Partner, Webgruppen AS• Driver Nettredaktør-skolen• Utstrakt kurs- og konsulent-  virksomhet• Erfaring med web/...
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 ...
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    Gra...
Hvilke elementer er kritiske? • Findability • Innhold/konsept • Tekster • Navigasjon • Layout • Typografi
Morville-modellen                                      useful                          usable                desirable    ...
Avstøting • Ca. 50% avstøting er vanlig for nettsteder med god   søkemotorsynlighet • Du har maks. 2-3 sekunder til å over...
Vi dømmer en nettside påmillisekunderEn kanadisk undersøkelse understreker hvor viktig design og bilder er for en nettside...
“Lukten av informasjon”
”Lukten av informasjon”• Teori om hvordan brukerne orienterer seg på web• Underbygd av flere tusen brukerobservasjoner• Ja...
Trigger-ord• Trigger-ordet beskriver det brukeren leter etter på nettstedet.• Kommer brukeren fra en søkemotor, er trigger...
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          • Ikk...
Husk søkeordene!• Dine viktigste søkeord bør finnes  – I TITLE-tag  – I overskrift  – I global meny (= den menyen som er l...
Tekster
Tekster• God webtekst er enkel og søkevennlig• God webtekst er sjangerriktig• God webtekst er tilrettelagt for vertikal le...
Enkle tekster• Skriv korte setninger• Skriv muntlig (prøv gjerne å lese teksten høyt og se om det  lyder naturlig)• Bruk t...
Sjangerriktige tekster• Nyhetstekst: Tekst som skal orientere om en hendelse• Informasjonstekst: Tekst som skal orientere ...
              Nyhetstekst            Informasjonstekst             Salgstekst                                             ...
Sjangerriktige tekster• Et typisk firmanettsted  trenger kanskje ca 80 %  informasjonstekster, 15 %  nyhetstekster og 5 % ...
Skrive for vertikal lesning• Brukerne leser ikke linje for linje på web.• De skumleser ved å la blikket flakke over siden....
Og P.S.: Skriv ordentlig rettskrivning!                                              For tips og fasiter, se              ...
Findability• WAI• Søkemotorsynlighet• Intern findability
WAI• Web Accessability Initiative (www.w3.org/wai)• Tilrettelegging av web for blinde, lesesvake mm.• http://kvalitet.difi...
Linker på overskrifter-ikke bare “Les mer”
WAI-kravene• Retningslinjene for tilgjengelighet heter WCAG 1.0 (Web  Content Accessibility Guidelines)• Det oppdaterte do...
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 bruke...
Hva styrerrangeringen?
Hva styrer rangeringen?• Relevans!• Målt i et vektet antall forekomster av søkeord- og fraser;  justert for inngående link...
Forutsetning: At sidene er indeksertHva kan hindre indeksering?• Feil redirect• Søkemotordreperteknologi (frames, menyer i...
Feil redirect• 301-redirect = permanent = riktig• 302-redirect = midlertidig = FEIL!• Sjekk selv:• http://www.webconfs.com...
Søkemotordreperteknologi
Søkemotordreperteknologi• Unngå alltid frames• Unngå menyer i flash eller java-script• Unngå løsninger som lager unike URL...
Dårlig teknisk kvalitet
Dårlig teknisk kvalitet• Sjekk egne sider på http://validator.w3.org• Skriv alltid i kravspekk at sidene skal validere• Ve...
Dårlig strukturering av sider• Google vil ikke indeksere alt for dypt i tjenesten.• Mål: Alle sider bør være tilgjengelige...
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ær...
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...
Google vekter forekomster av ord
Google vekter forekomster av ord• Forekomst i TITLE-tag vekter tyngst• Deretter forekomst i overskrift• Deretter forekomst...
Sett opp malverket riktig• Ha differensierte TITLE-tagger• Gjør TITLE-tag = Overskrift• Gjør META Description = Ingress• H...
Lag riktig innhold• Bruk trigger-ord i menypunktene• Ha viktigste menypunkter først• Bruk trigger-ord i linker• Bruk trigg...
Utforming av nettstedet
Meny• Menyen er brukerens inngangsportal til innholdet• Den skal være tekstbasert (for søkemotorsynlighet)• Den bør være m...
Plassering av menyOptimal plassering av enmeny er i venstre marg,alternativt langs toppen avsiden i tillegg.
Innhold i menyen • Trigger-ord • Så konkret som mulig • Beskriver produktene hvis du selger produkter • Beskriver tjeneste...
Menyens lengde • Lange menyer er ikke farlig • Lengre meny = flere trigger-ord = lavere avstøting =   flere som finner det...
Søk som navigasjon? • Ja - hvis innholdet på sidene (dvs. produktene,   tjenestene eller informasjonen) er så omfattende a...
A- B- og C-scenarier  A-scenarier = de tingene som 80% av brukerne leter  etter, eller ønsker å gjøre  B-scenarier = de ti...
Hvordan scenariene adresseres • A-scenariene adresseres både direkte på forsiden og   gjennom menyer og navigasjon • B-sce...
A-scenarierInnholdsfelt på forside
A og B-scenarier             Meny   A-scenarierInnholdsfelt på forside
A og B-scenarier                                           Meny                       A-scenarier                Innholdsf...
Plassering skjer etter prioritering• Si det viktigste først• Tenk på hva brukeren trenger tilgang til, og plasser  dette d...
Gode deler gjør en bedre helhet • Når hver enkelt innholdstype på nettstedet er optimalt   designet vil også nettstedet fu...
Hvor faller blikket vårt? Eyetracking-studier viser at blikket vårt har en tendens til å falle øverst til venstre på skjer...
Prioritering for avsender og bruker                                          Prioritering for bruker                      ...
Riktig innholdsplassering • Den vanligste formen for layout på nettsider er   3-spalteren • Innhold plasseres etter scenar...
Toppbanner                         Sekundær-Meny     Primærinnhold                          innhold       3-spalter I
Toppbanner               Hovedmeny                              Sekundær-Undermeny     Primærinnhold                      ...
ToppbannerMeny   Innhold        Innhold   Innhold         4-spalter
ToppbannerMeny              Innhold       2-spalter
Toppbanner  Innhold            Meny2-spalter (Blogg)
Riktig innholdsplassering 2 • Gi brukeren det han kommer for i første skjermbilde • Hvis du må velge, så prioriter de stør...
Det folk kommer   for å finne
Det folk kommer   for å gjøre
Det folk kommer   for å finne  akkurat NÅ
Det folk kommer   for å finne
Viktigsteprodukter
Viktigstetjenester
ViktigsteInformasjon
Bannerblindhet                 Banner-                 blindhet
BannerblindhetAvsenders identitet                      Banner-                      blindhet
BannerblindhetAvsenders identitet       Meny                      Banner-                      blindhet
Bannerblindhet          Avsenders identitet                 MenyPrimærinnhold           Sekundær-   Banner-               ...
Bannerblindhet          Avsenders identitet                 MenyPrimærinnhold           Sekundær-   Banner-               ...
Innhold i prime site• Gi brukeren det han kommer for i første skjermbilde• Må du velge, så prioriter de største brukergrup...
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...
Brukervennlighet• Alle aktive elementer må være 150% selvforklarende:• Linker må formateres riktig• Knapper må se ut som k...
BrukervennlighetBrukervennlige linker• Blå og understreket                                 +• En tydelig annen farge og un...
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...
Andale Mono         Impact    Arial        Trebuchet MSComic Sans MS   Times New RomanCourier 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 pik...
Teksteffekter• STORE BOKSTAVER er tungt leselig og bør unngås i menyer  og i overskrifter• Kursiv blir visuelt grumsete og...
Tekstbilde• Unngå linjer som er mer enn 70 tegn lange• Unngå avsnitt som er mer enn 100 ord lange• Unngå overskrifter som ...
Innholdstyper • Transaksjon - å utføre en handling • Informasjon - å finne spesifikke opplysninger • Dialog - å utveksle i...
Transaksjon • Det må vises hvor mange trinn transaksjonen har • Det må markeres hvilket trinn man befinner seg på • Man sk...
Informasjon • Bruk riktige trigger-ord • Del opp og grupper informasjonen på en relevant måte • Velg riktig sidelengde • F...
Dialog • Dialog kan foregå mellom bruker og avsender, eller   bare brukere imellom • Hvis dialogen foregår i sanntid må de...
Oppdatering • Brukeren leter ofte ikke etter noe spesielt, men ønsker   å finne ut om det er noe nytt han bør vite om • In...
Opplevelse • Opplevelsesinnhold bør oppfylle nettstedets mål,   samtidig som det bør gi brukeren en positiv opplevelse • O...
Applikasjon • Applikasjoner bør oppfylle nettstedets mål, samtidig   som det har en nytteverdi for brukeren • På web bør a...
En side kan bestå av flereinnholdstyper
Ulike innholdstyper må presenteres              forskjellig• Innholdstypene har egne kjennetegn som lar bruker  identifise...
Bruksegenskaper
BruksegenskapEn gjenstands oppfattede ogfaktiske egenskaper, først ogfremst de grunnleggendeegenskapene som avgjør muligem...
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 bruk...
Tekstlenken • Signaliserer at ytterligere informasjon er tilgjengelig • Skal skille seg fra teksten rundt • Markeres norma...
Må tekstlenken være blå ogunderstreket? • Hvis lenken er i løpende tekst, må den ihvertfall være   en annen farge enn teks...
Funksjonelle elementer - knapper • En knapp brukes til å sette igang og avbryte   handlinger, foreta valg, og skru funksjo...
Regler for brukervennlige knapper 1. Knappen må se ut som en knapp 2. Knappen må skille seg tydelig ut fra omgivelsene 3. ...
Funksjonelle elementer - faner                A           B           C • Faner brukes til å velge mellom likeverdige alte...
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-...
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...
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” e...
Persuasive path-grep• Alltid avslutte en side med en lenke• Implementere faste mersalgs- og oppsalgs-felter på  siden• Ten...
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Bestepraksis
Upcoming SlideShare
Loading in...5
×

Bestepraksis

879

Published on

Kurspresentasjon fra Webgruppen

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
879
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Bestepraksis

  1. 1. Bestepraksis på webJakob Thyness / Nina Furu
  2. 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. 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. 4. Hvorfor bestepraksis? • Bestepraksis er snarveien til å nå målene • Det finnes faktisk riktig og galt på web
  5. 5. Mål for nettsiden • Distribuere informasjon • Selge produkter • Drive markedsføring • Avlaste ekspedisjonen • Understøtte andre aktiviteter • ...
  6. 6. SMART Specific (Spesifikt, ikke generelt)
  7. 7. SMART Measurable (Målbart og tallfestet)
  8. 8. SMART Attainable (Oppnåelig)
  9. 9. SMART Results-oriented (Resultatorientert)
  10. 10. SMART Time-based (Tidfestet)
  11. 11. Ved å følge bestepraksis når man målene man har satt opp
  12. 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. 13. Hvilke elementer er kritiske? • Findability • Innhold/konsept • Tekster • Navigasjon • Layout • Typografi
  14. 14. Morville-modellen useful usable desirable valuable findable accessible crediblePeter MorvilleSemantic Studioswww.semanticstudios.com
  15. 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. 16. Vi dømmer en nettside påmillisekunderEn 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 ennettside. Hjernen hos en vanlig nettbruker gjør en antagelse av kvaliteten på nettsiden i løpetav bare 50 millisekunder, hevder forskere på Carleton University i Ottawa.Undersøkelsen er publisert i den akademiske tidsskriftet "Behaviour & InformationTechnology", skriver nyhetstjenesten newsfactor.com. Nå vil en del brukere likevel gå viderepå 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å bebrukerne vurdere nettsidens kvalitet. Vurderingene ble de samme når brukerne fikk lov til å sepå 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 dutilbyr 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.
  17. 17. “Lukten av informasjon”
  18. 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. 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. 20. Hvor brukes trigger-ord? Trigger-ord skal brukes: • ...i menyer • ...i overskrifter • ...i tekster • ...i lenker
  21. 21. Gode trigger-ord bør være: • Enkle • Løsninger • Beskrivende • Brukerdefinerte • Konkrete • Ikke beskrive brukeren • Substantiver • Ikke nye ord
  22. 22. 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.
  23. 23. Tekster
  24. 24. Tekster• God webtekst er enkel og søkevennlig• God webtekst er sjangerriktig• God webtekst er tilrettelagt for vertikal lesning
  25. 25. 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
  26. 26. 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
  27. 27.   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 hanav mellomtitler over hele saken han skal gå inn i teksten får
  28. 28. Sjangerriktige tekster• Et typisk firmanettsted trenger kanskje ca 80 % informasjonstekster, 15 % nyhetstekster og 5 % handlingsutløsende tekster.
  29. 29. 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
  30. 30. Og P.S.: Skriv ordentlig rettskrivning! For tips og fasiter, se www.korrekturavdelingen.no Takk til Per-Erik Skramstad for eksemplet
  31. 31. Findability• WAI• Søkemotorsynlighet• Intern findability
  32. 32. WAI• Web Accessability Initiative (www.w3.org/wai)• Tilrettelegging av web for blinde, lesesvake mm.• http://kvalitet.difi.no
  33. 33. Linker på overskrifter-ikke bare “Les mer”
  34. 34. 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
  35. 35. Søkemotorsynlighet
  36. 36. 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
  37. 37. Hva styrerrangeringen?
  38. 38. 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.
  39. 39. Forutsetning: At sidene er indeksertHva 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)
  40. 40. Feil redirect• 301-redirect = permanent = riktig• 302-redirect = midlertidig = FEIL!• Sjekk selv:• http://www.webconfs.com/http-header-check.php
  41. 41. Søkemotordreperteknologi
  42. 42. 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)
  43. 43. Dårlig teknisk kvalitet
  44. 44. 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
  45. 45. 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
  46. 46. Dårlig intern linking
  47. 47. 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)
  48. 48. 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
  49. 49. Google vekter forekomster av ord
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Utforming av nettstedet
  54. 54. 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
  55. 55. Plassering av menyOptimal plassering av enmeny er i venstre marg,alternativt langs toppen avsiden i tillegg.
  56. 56. 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
  57. 57. 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
  58. 58. 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!
  59. 59. 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
  60. 60. 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
  61. 61. A-scenarierInnholdsfelt på forside
  62. 62. A og B-scenarier Meny A-scenarierInnholdsfelt på forside
  63. 63. A og B-scenarier Meny A-scenarier Innholdsfelt på forside C-scenarierDet  man  først  kommer  2l  e4er  at  A-­‐  eller  B-­‐scenariene  er  oppfylt
  64. 64. 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
  65. 65. 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
  66. 66. 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.
  67. 67. Prioritering for avsender og bruker Prioritering for bruker A B C APrioritering for avsender Pri 1 Pri 1 Pri 2 B Pri 1 Pri 2 Pri 2/3 C Pri 1 Pri 2 Pri 3
  68. 68. 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
  69. 69. Toppbanner Sekundær-Meny Primærinnhold innhold 3-spalter I
  70. 70. Toppbanner Hovedmeny Sekundær-Undermeny Primærinnhold innhold 3-spalter II
  71. 71. ToppbannerMeny Innhold Innhold Innhold 4-spalter
  72. 72. ToppbannerMeny Innhold 2-spalter
  73. 73. Toppbanner Innhold Meny2-spalter (Blogg)
  74. 74. 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)
  75. 75. Det folk kommer for å finne
  76. 76. Det folk kommer for å gjøre
  77. 77. Det folk kommer for å finne akkurat NÅ
  78. 78. Det folk kommer for å finne
  79. 79. Viktigsteprodukter
  80. 80. Viktigstetjenester
  81. 81. ViktigsteInformasjon
  82. 82. Bannerblindhet Banner- blindhet
  83. 83. BannerblindhetAvsenders identitet Banner- blindhet
  84. 84. BannerblindhetAvsenders identitet Meny Banner- blindhet
  85. 85. Bannerblindhet Avsenders identitet MenyPrimærinnhold Sekundær- Banner- innhold blindhet
  86. 86. Bannerblindhet Avsenders identitet MenyPrimærinnhold Sekundær- Banner- innhold blindhet
  87. 87. 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)
  88. 88. Lay-out• Plassering av elementer• Orden• Konsekvens• Brukervennlighet
  89. 89. Plassering av elementer• Følg konvensjoner• Følg øyemønstre (”det gylne triangel”)• Signaliser viktighet med plassering
  90. 90. Skap orden• Sett ting på linje både vertikalt og horisontalt, så blir siden lettere leselig
  91. 91. 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).
  92. 92. 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 …
  93. 93. BrukervennlighetBrukervennlige 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 -
  94. 94. Typografi• Valg av font• Størrelser og forskjeller• Teksteffekter• Tekstbilde
  95. 95. 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.)
  96. 96. Andale Mono Impact Arial Trebuchet MSComic Sans MS Times New RomanCourier New Verdana Georgia 
  97. 97. Skriftstørrelser og forskjeller
  98. 98. 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)
  99. 99. 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
  100. 100. 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)
  101. 101. 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
  102. 102. 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.
  103. 103. 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
  104. 104. 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.
  105. 105. 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
  106. 106. 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
  107. 107. 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å
  108. 108. En side kan bestå av flereinnholdstyper
  109. 109. Ulike innholdstyper må presenteres forskjellig• Innholdstypene har egne kjennetegn som lar bruker identifisere dem og forstå hvordan de skal benyttes
  110. 110. Bruksegenskaper
  111. 111. BruksegenskapEn gjenstands oppfattede ogfaktiske egenskaper, først ogfremst de grunnleggendeegenskapene som avgjør muligemåter å bruke gjenstanden på.Donald Norman: The Design of Everyday Things
  112. 112. Vi kan som oftest se hva en ting er - og hvordan den skal brukes
  113. 113. Det er lett å designe bort bruksegenskaper!
  114. 114. 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
  115. 115. Tekstlenken • Signaliserer at ytterligere informasjon er tilgjengelig • Skal skille seg fra teksten rundt • Markeres normalt gjennom at den er blå og understreket
  116. 116. Må tekstlenken være blå ogunderstreket? • 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å
  117. 117. Funksjonelle elementer - knapper • En knapp brukes til å sette igang og avbryte handlinger, foreta valg, og skru funksjoner på eller av.
  118. 118. 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
  119. 119. 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
  120. 120. Persuasive path
  121. 121. 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
  122. 122. Persuasive path-mekanismer
  123. 123. Laget for bruker Laget for deg
  124. 124. Slott og såpe
  125. 125. Slott og såpe• Det er viktig at såpen plasseres nedtonet i forhold til slottet• Slott først, så såpe
  126. 126. 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.
  127. 127. POC
  128. 128. POI’er
  129. 129. 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.
  130. 130. Persuasive path-grep• Alltid avslutte en side med en lenke• Implementere faste mersalgs- og oppsalgs-felter på siden• Tenke ønskede veier videre
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×