Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webprosjekt v11

1,634 views

Published on

Slik driver du et forprosjekt for utvikling av nye websider.

Published in: Technology
  • Be the first to comment

Webprosjekt v11

  1. 1. Lynkurs i sosiale medier <ul><li>Nina Furu og Kenneth Eriksen </li></ul><ul><li>16. februar 2011 </li></ul>
  2. 2. <ul><li>Jobber med webkommunikasjon og webstrategi </li></ul><ul><li>Senior partner i Webgruppen </li></ul><ul><li>Driver Nettredaktørskolen i Oslo </li></ul><ul><li>Styreleder i Webforum Norge </li></ul><ul><li>Kurs- og konsulentvirksomhet </li></ul><ul><li>www.nettredaktor.no </li></ul><ul><li>www.websuksess.no </li></ul><ul><li>Mangeårig portalredaktør </li></ul><ul><li>Lærebokforfatter </li></ul><ul><li>Med mer </li></ul>Nina Furu
  3. 3. <ul><li>ha definert 3 SMART'e mål for din webside </li></ul><ul><li>vite hvordan du kartlegger din brukers behov </li></ul><ul><li>kunne formulere et relevant konsept for ditt nettsted </li></ul><ul><li>kjenne til personas og scenarier som verktøy i utviklingsarbeidet </li></ul><ul><li>kunne definere de viktigste brukerscenariene </li></ul><ul><li>vite hvordan du lager en prototype for din webside </li></ul><ul><li>vite hvor viktig forankring i organisasjonen er og hvordan du kan jobbe for å få det </li></ul>Mål for dagen: Du skal …
  4. 6. 1. Målsetting
  5. 7. Målsetting Bedriftens målsetting Brukernes behov
  6. 8. <ul><li>Hvorfor er du egentlig på web? </li></ul><ul><li>Hva er egentlig vitsen med sidene? </li></ul><ul><li>Hva er det du ønsker å oppnå? </li></ul><ul><li>Hva er det du ønsker å kommunisere? </li></ul><ul><li>Hva er det du ønsker å gi brukeren? </li></ul><ul><li>Å definere dine mål med satsningen er den grunnleggende strategiske vurderingen du gjør for websiden </li></ul>Målsetting
  7. 9. Strategi-pyramiden Strategisk Taktisk Operasjonelt Hvorfor gjør vi noe? Hvorfor? Hva gjør vi? Hvordan gjør vi det? Hvordan?
  8. 10. <ul><li>Specific - konkrete </li></ul><ul><li>Measurable - målbare </li></ul><ul><li>Attainable - oppnåelige </li></ul><ul><li>Results oriented - resultatorienterte </li></ul><ul><li>Time based – tidsbaserte </li></ul>Dine mål bør være SMARTe
  9. 11. <ul><li>Vi skal ha 12% økning i salg av lydbøker innen 31.12 </li></ul><ul><li>Alle kurspåmeldinger skjer elektronisk fra 1. mai </li></ul><ul><li>Selvbetjent henting av kundeopplysninger fra lansering av min side </li></ul><ul><li>10% reduksjon i behandlingstid fra 1. august </li></ul>Eksempler på SMARTe mål
  10. 12. Målfastsettelse Verdier (på hvilke måter?) Visjon (hvor skal vi?) Hovedmål 1 Hovedmål 2 Hovedmål 3 Hovedmål 4 Hovedmål 6 Konkretiseres i form av SMART’e mål for websatsningen
  11. 13. Målfastsettelse Verdier: enkelhet, troverdighet, kvalitet Visjon: Være Norges ledende xxx Hovedmål 1 Hovedmål 2 Hovedmål 3 Hovedmål 4 Hovedmål 6
  12. 14. Målfastsettelse Verdier: enkelhet, troverdighet, kvalitet Visjon: Være Norges ledende xxx Hovedmål 1 Hovedmål 2 Hovedmål 3 Hovedmål 4 Hovedmål 6 Redusere telefonhenvendelser med 40% innen desember 2011 Selvbetjeningsweb innen desember 2011
  13. 15. Målfastsettelse Verdier: enkelhet, troverdighet, kvalitet Visjon: Være Norges ledende xxx Hovedmål 1 Hovedmål 2 Hovedmål 3 Hovedmål 4 Hovedmål 6 Redusere telefonhenvendelser med 40% innen desember 2011 Nedlastbare mobilinnstillinger fra august 2011 Nedlastbare brukermanualer for alle produkter innen juli 2011 Alle bestillinger gjøres elektronisk Selvbetjeningsweb innen desember 2011 MinSide med fakturadetaljer fra juni 2011
  14. 16. <ul><li>Tips: Mål det du vil ha mer av! </li></ul>Målfastsettelse
  15. 17. 2. Brukerbehov
  16. 18. Brukerbehov Bedriftens målsetting Brukernes behov
  17. 19. <ul><li>Push til pull </li></ul><ul><li>Trigger-ord </li></ul><ul><li>Hva er det brukeren kommer til din web for å gjøre? (Scenarier) </li></ul>2. Brukerbehov
  18. 20. ” Lukten av informasjon”
  19. 21. <ul><li>Teori om hvordan brukerne orienterer seg på web </li></ul><ul><li>Underbygd av flere tusen brukerobservasjoner </li></ul><ul><li>Jared Spool, Christine Perfetti og David Brittan </li></ul><ul><li>User Interface Engineering </li></ul><ul><li>www.uie.com </li></ul><ul><li>” Designing for the scent of information”: </li></ul><ul><li>http://www.uie.com/reports/scent_of_information/ </li></ul>” Lukten av informasjon”
  20. 22. Trigger-ord
  21. 23. <ul><li>Trigger-ordet beskriver det brukeren leter etter på nettstedet. </li></ul><ul><li>Kommer brukeren fra en søkemotor, er trigger-ordet det han har søkt på der. </li></ul><ul><li>Trigger-ordet er ordet (eller ordene) i brukerens ”tankeboble”. </li></ul><ul><li>Trigger-ordet er altså brukerens eget ord (og ikke ditt!) </li></ul>Trigger-ord
  22. 24. <ul><li>Når brukeren ser sitt trigger-ord i en link, så klikker han på det </li></ul>Sentralt prinsipp:
  23. 25. <ul><li>At du må prioritere å identifisere de sentrale trigger-ordene for din virksomhet (Hva er det din kunde kaller ditt produkt/din informasjon?) </li></ul><ul><li>At du bør bruke disse trigger-ordene i navigasjon. </li></ul><ul><li>At du bør bruke disse trigger-ordene i overskrifter og i tekster </li></ul><ul><li>(Og at navigasjon bør se ut som linker) </li></ul>Dette betyr
  24. 26. <ul><li>Enkle </li></ul><ul><li>Beskrivende </li></ul><ul><li>Konkrete </li></ul><ul><li>Substantiver </li></ul><ul><li>Løsninger </li></ul><ul><li>Brukerdefinerte </li></ul><ul><li>Ikke beskrive bruker selv </li></ul><ul><li>Ikke nye ord </li></ul>Gode trigger-ord bør være:
  25. 27. <ul><li>Se på sideinterne søk </li></ul><ul><li>Se på eksterne websøk ( http://www.google.com/insights/search ) </li></ul><ul><li>Spør brukerne direkte </li></ul><ul><li>Gjennomfør bruker-workshops </li></ul><ul><li>Gjennomfør elektroniske undersøkelser </li></ul><ul><li>Gjør split-testing </li></ul><ul><li>Gjør papir-prototyping </li></ul><ul><li>Spør sentralbordet </li></ul>Hvordan identifisere trigger-ord?
  26. 28. <ul><li>Statistikk </li></ul><ul><li>Egen erfaring </li></ul><ul><li>Personas </li></ul><ul><li>Skissere brukerscenarier </li></ul><ul><li>Workshop </li></ul><ul><li>Brukerundersøkelser </li></ul><ul><li>Brukertesting </li></ul>Kartlegging av brukers behov
  27. 29. <ul><li>Statistikk fra websiden </li></ul><ul><li>Statistikk fra internsøk på siden </li></ul><ul><li>Statistikk fra hva de har søkt på for å komme til din web </li></ul><ul><li>Statistikk fra kundeservice (telefonhenvendelser) </li></ul><ul><li>Osv </li></ul>Statistikk
  28. 30. <ul><li>www.google.no/analytics </li></ul>Gratis statistikk
  29. 31. <ul><li>Erfaringer med drift av dagens løsninger </li></ul><ul><li>Hva ringer kundene for? </li></ul><ul><li>Hvor i prosessen mister man brukere? </li></ul><ul><li>Hva vet de som er i førstehånds kontakt med brukerne; resepsjonen, selgere, kundesenter, support …? </li></ul>Egne erfaringer
  30. 32. <ul><li>Hva er de viktigste brukerscenariene for ditt nettsted? </li></ul>Hva er din brukers behov?
  31. 33. <ul><li>Arketyper som representerer brukerne dine </li></ul><ul><li>Fiktive personer du oppretter, gir navn og demografisk beskrivelse </li></ul>Personas
  32. 34. <ul><li>Arketyper som representerer brukerne dine </li></ul><ul><li>Fiktive personer du oppretter, gir navn og demografisk beskrivelse </li></ul><ul><li>Tips: Steve Mulder, The user is always right </li></ul>Personas
  33. 35. <ul><li>Karakteristikk som baseres på faktaopplysninger </li></ul><ul><li>Et hjelpemiddel til å redusere usikkerhet rundt problemstillinger </li></ul><ul><li>Kan gjøre det lettere å ta beslutninger i utviklingen </li></ul><ul><li>Gjør at vi kan fokusere på detaljer – vi går fra det generelle til det spesifikke </li></ul><ul><li>Distanserer seg fra sine egne meninger </li></ul>Personas
  34. 36. Å lage Personas Fredrik Flittig Klara Klok Espen Egenrådig Nina Nøysom Proffbruker Jevnlig bruker Utenlandsk bruker Nybegynner Kompetanselinje ( - ) (+)
  35. 37. <ul><li>… men forskjellige personas kan ha samme scenario, og samme persona kan ha flere scenarier </li></ul>Forskjellige brukere, forskjellige scenarier
  36. 38. <ul><li>Ja, fordi de kan hjelpe deg å tenke scenarier </li></ul><ul><li>Men du kan også tolke deg fram til scenarier direkte, for eksempel ut fra statistikk (mest besøkte sider, mest klikkede lenker …) eller brukerundersøkelser (”hvilket innhold er du mest interessert i på våre sider?”) erfaring med dagens nettside (hva ringer bruker til oss for?) </li></ul>Er personas viktig? Det aller viktigste er scenariene
  37. 39. Hva er brukernes scenarier?
  38. 43. <ul><li>Hva er det brukeren kommer for å finne? </li></ul><ul><li>Hva er det brukeren har behov for å få vite? </li></ul><ul><li>Hva er det brukeren er interessert i? </li></ul><ul><li>Hvorfor kommer brukeren til siden? </li></ul>Brukernes scenarier <ul><li>Husk 80/20-regelen: </li></ul><ul><li>80% av brukerne kommer for 20% av innholdet </li></ul>
  39. 44. <ul><li>A-scenarier = De tingene som 80% av brukerne leter etter eller ønsker å gjøre </li></ul><ul><li>B-scenarier = De tingene som bare 20% av brukerne leter etter eller ønsker å gjøre </li></ul><ul><li>(C-scenarier = De tingene som dine kolleger ønsker å legge ut, men som få eller ingen brukere etterspør …  ) </li></ul>A og B-scenarier
  40. 45. <ul><li>A-scenarier = Forside, menyer og dyplenking/søk </li></ul><ul><li>B-scenarier = Menyer og dyplenking/søk </li></ul><ul><li>C-scenarier = Dyplenking/søk, eller egne felter når C-scenariene er forretningskritiske </li></ul><ul><li>Dermed får du tilfredsstilt flest mulig brukere med nettstedet ditt </li></ul>En god regel for å møte scenarier
  41. 46. <ul><li>Bestille abonnement? </li></ul><ul><li>Bestille brosjyrer? </li></ul><ul><li>Se på nye bilmodeller? </li></ul><ul><li>Finne priser? </li></ul><ul><li>Finne forhandlere? </li></ul><ul><li>Kjøpe smykker? </li></ul><ul><li>Lære om resirkulering? </li></ul><ul><li>Levere skjema? </li></ul>Hva er viktige scenarier for bedriften?
  42. 47. <ul><li>Statistikk </li></ul><ul><li>Egen erfaring </li></ul><ul><li>Personas </li></ul><ul><li>Skissere brukerscenarier </li></ul><ul><li>Workshop </li></ul><ul><li>Brukerundersøkelser </li></ul><ul><li>Brukertesting </li></ul>Kartlegging av brukers behov
  43. 48. <ul><li>Idémyldring </li></ul><ul><li>Kartlegge innhold </li></ul><ul><li>Kartlegge trigger-ord </li></ul><ul><li>Strukturering – ”card sorting” </li></ul><ul><li>Innholdselementer og plassering – ”wireframes” </li></ul>Workshop med brukerne
  44. 50. <ul><li>Brukerundersøkelser </li></ul><ul><ul><li>Elektronisk spørreundersøkelse </li></ul></ul><ul><ul><li>Personlig intervju </li></ul></ul><ul><li>Brukertesting </li></ul><ul><ul><li>Brukerteste på prototype </li></ul></ul><ul><ul><li>Brukerteste webløsning </li></ul></ul><ul><li>Skissere brukerscenarier </li></ul><ul><ul><li>Storyboard </li></ul></ul>Kartlegging av brukers behov
  45. 51. <ul><li>Budsjetter </li></ul><ul><li>Interne / eksterne ressurser </li></ul><ul><li>Tidsrammer </li></ul><ul><li>Prosess og fremdrift </li></ul><ul><li>Fasing </li></ul><ul><li>Ambisjonsnivå? </li></ul>Ressurser
  46. 52. ” Drømmewebben” Forretningsnytte Behov for integrasjon Kilde: Drömwebben av Maria Langen Nettstedet har utstrakt kunnskapsdeling gjennom prosjektrom, dokumenthåndtering og stor grad av selvbetjening Nettstedet utvides for å understøtte flere prosesser i organisasjonen som går på kommunikasjon internt og eksternt Nettstedet utvides med enkle funksjoner som gjør det enkelt for den besøkende å finne og utveksle informasjon. For eksempel søk og disk.forum Nettstedet er en elektronisk oppslagstavle med administrasjon av innhold og har som hovedoppgave å gi informasjon Nettstedet er navet for all informasjon og prosesser som foregår mellom ansatte, forhandlere og kunder
  47. 53. Enkeltfaser
  48. 54. 3. Webkonsept
  49. 55. 3. Konsept Bedriftens målsetting Brukernes behov Webkonsept med suksesspotensiale
  50. 56. <ul><li>Svar på spørsmålene: </li></ul><ul><li>Hva skal din web være for hvem? </li></ul><ul><li>Hvorfor skal brukeren ønske å oppsøke dine sider? </li></ul><ul><li>Hva skal være verdien av websiden din for brukeren? </li></ul><ul><li>Hva skal brukeren oppleve websiden din som? </li></ul><ul><li>Hva skal kjennetegne opplevelsen av din web? </li></ul><ul><li>Hvilket innhold er det både i bedriftens interesse å formidle og i brukerens interesse å finne? </li></ul>Webkonseptet
  51. 57. <ul><li>Digitalt servicekontor </li></ul><ul><li>Nettbank </li></ul><ul><li>Nyhetskilde om forskningen </li></ul><ul><li>Lekeplass på nett </li></ul><ul><li>Et sted å finne norges laveste priser på mobiltelefoner </li></ul><ul><li>Gratis nettressurs for deg som jobber med innhold på web (nettredaktor.no) </li></ul>Noen eksempler på webkonsepter
  52. 58. 4. Innhold
  53. 59. <ul><li>Informasjonsarkitektur </li></ul><ul><li>Wireframes, og senere design </li></ul><ul><li>(Regler og rutiner) </li></ul>Innhold spesifiseres i …
  54. 60. <ul><li>Informasjonsarkitektur </li></ul><ul><ul><li>Cardsorting </li></ul></ul><ul><li>Wireframes (skisse til innholdsplassering) </li></ul><ul><ul><li>Innholdsmaler </li></ul></ul><ul><ul><li>Transaksjonsbeskrivelser </li></ul></ul><ul><ul><li>Portlet-beskrivelser </li></ul></ul><ul><ul><li>Kriterier for enkeltelementer </li></ul></ul>Disponere skjermflaten
  55. 61. <ul><li>Card-sorting </li></ul><ul><li>Tematisk sortering og kategorisering av innhold </li></ul><ul><li>Hvilket innhold hører naturlig sammen </li></ul><ul><li>Hva kan være en overskrift/fellesbetegnelse for temaet? </li></ul>Strukturere innhold
  56. 62. <ul><li>Trigger-ord organisert i hierarkier </li></ul><ul><li>Prinsipper: </li></ul><ul><li>Balanse (jevntunge kategorier) </li></ul><ul><li>Avpassede generalitetsnivåer sidestilt (epler og pærer, ikke epler og grønnsaker) </li></ul><ul><li>Skille på akser (emner vs målgrupper vs funksjonalitet osv.) </li></ul>Informasjonsarkitektur
  57. 64. Kontrollér
  58. 65. Kontrollér
  59. 66. Kontrollér
  60. 67. Informasjonseiermatrisen
  61. 68. <ul><li>Mindjet MindManager </li></ul><ul><li>www.mindjet.com </li></ul><ul><li>Kan prøves gratis i 30 dager </li></ul><ul><li>Excel </li></ul><ul><li>PPT </li></ul>Verktøy for informasjonsarkitektur
  62. 69. <ul><li>En prototype = en tegning av hvordan det kommer til å bli </li></ul><ul><li>Skisser lar andre se hva du har tenkt </li></ul><ul><li>Skisser kan avsløre fundamentale feil før du bruker programmerertimer </li></ul><ul><li>Du kan brukerteste på en papir-prototype (vis bruker skissen, beskriv en oppgave og spør hvordan brukeren ville gå fram for å få dette gjort) </li></ul><ul><li>Du kan brukerteste på en prototype på skjerm (bruker kan klikke seg rundt og vise hvordan bruker vil gå frem) </li></ul>Lag wireframes
  63. 71. <ul><li>Axure RP pro </li></ul><ul><li>www.axure.com </li></ul><ul><li>Kan prøves gratis i 30 dager </li></ul><ul><li>Papirskisse </li></ul><ul><li>Gratis alternativ: </li></ul><ul><li>http://gomockingbird.com </li></ul>Verktøy for Wireframes
  64. 72. Oppsummering
  65. 73. Oppsummering <ul><li>Avklaring av mål </li></ul><ul><li>SMARTe mål </li></ul><ul><li>Avklaring av </li></ul><ul><li>brukerbehov </li></ul><ul><li>Definere brukergrupper </li></ul><ul><li>Bruker-undersøkelse </li></ul><ul><li>Workshop </li></ul><ul><li>Intervjuer </li></ul><ul><li>Personas </li></ul><ul><li>Statistikk </li></ul><ul><li>Erfaring </li></ul>Avklare Rammer Finne ambisjonsnivå Definisjon av webkonsept <ul><li>Kartlegging av </li></ul><ul><li>relevant innhold </li></ul><ul><li>Info.arkitektur </li></ul><ul><li>Wireframes </li></ul><ul><li>Prototyping </li></ul><ul><li>Teknisk løp </li></ul><ul><li>Kravspekk </li></ul><ul><li>Valg </li></ul><ul><li>Implementering </li></ul><ul><li>Designløp </li></ul><ul><li>Innholdsløp </li></ul><ul><li>Fordeling av oppgaver </li></ul><ul><li>Innlegging av tekst </li></ul><ul><li>Godkjenning </li></ul><ul><li>Revisjoner og oppdatering </li></ul><ul><li>Definering av rutiner </li></ul><ul><li>Etablering av fora </li></ul>
  66. 74. Presentasjonen
  67. 75. <ul><li>Nina Furu </li></ul><ul><li>www.nettredaktor.no </li></ul><ul><li>Mobil 92208015 </li></ul><ul><li>[email_address] </li></ul>Lykke til!

×