Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Skjemadesign<br />Thor Fredrik Eie<br />
Skjemadesign<br />(nesten) Alle nettsider/applikasjoner har skjema<br />Skaper stor frustrasjon<br />Vi har brukertestet u...
Første møte med forsikring<br />IF.no - <br />Storebrand<br />
Vanlige problemer<br />
Har ikke lyst!<br />Dårlig motivasjon<br />Redd for å gjøre feil<br />Stresset<br />Hvor langt er skjemaet?<br />
Databasevrengning<br />System<br />Grensesnitt<br />Database<br />Applikasjon<br />Brukeren forstår ikke datamodellen!<br ...
”Det tar for lang tid å implementere”<br />Antall minutter hver bruker er forvirret<br />*<br />Antall brukere<br />=<br /...
 Mindre trykk på kundestøtte
 Høyere konverteringsrate (potensielle kunder som blir kunder)</li></li></ul><li>Obey!<br />Copyright NetLife Research - w...
Designprinsipper i skjemadesign<br />
Designprinsipper <br />Minst mulig svette<br />Ingen liker å fylle ut skjemaer<br />Smarte standardverdier, inline valider...
Designprinsipper<br />Veien til målet må være tydelig<br />
Designprinsipper<br />Vær konteksten bevisst<br />Kjent informasjon vs. ukjent informasjon<br />Ofte vs. sjeldent brukt<br...
Designprinsipper<br />Vær konsistent i kommunikasjonen<br />Feilmeldinger, hjelp og suksess<br />Bruk samme språk selv om ...
Vit mer om skjemaet ditt<br />Brukertesting<br />Feilmeldinger, problemer, gjennomføringsgrad<br />Kundestøtte<br />Hva er...
Visualisering av trinnvis progresjon<br />Flere sider<br />Visualiser at det er en prosess<br />Disse er ikke prosesser<br />
Visualisering av skjema<br />
Vi skal redesigne et skjema<br />
Skjemaet vårt<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Vi skal redesigne dette skjemaet...
Feltlengde<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Lengden på feltet kommuniserer til ...
Gruppering av felt<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Plasser felt som hører samm...
Visuell støy<br />
Tekst på knapper<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />La det som skjer synes på kna...
Utseende på knapper<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Knappeutseende<br />La kna...
Knapper forts.<br />Hjelp brukeren med å prioritere hvilken man skal klikke på.<br />Unngå knapperader på bunnen av skjema...
Knapper<br />Hva er primær og hva er sekundær aksjon?<br />Primære er den knappen brukerne mest sannsynlig skal klikke på<...
Hvor klikker du?<br />
Ledetekster/labels<br />Fornavn<br />Topplabels<br /><ul><li>Når det er ”vanlige data” som samles inn
Raskere utfylling
Trenger mer vertikal plass
Pixelnazisme er nødvendig for å få ledetekstene til være scannbare</li></ul>Etternavn<br />Adresse<br />Postnummer<br />Po...
Obligatoriske felt<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Marker dem der det er mange...
Obligatoriske felt<br />Fornavn<br />obligatorisk<br />Etternavn<br />obligatorisk<br />Adresse<br />Postnummer<br />Posts...
Obligatoriske felt<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Marker dem der det er mange...
Hjelpetekster<br />Trenger du når<br />Det er uvant data som skal fylles ut<br />Brukeren synes det er rart at det spørres...
Hjelpetekster<br />Skriv teksten fullt ut<br />Unngå å bruke  ?  ikoner etc.<br />Legg hjelpeteksten tett på det det forkl...
Validering<br />
Validering<br />Bruk inline validering<br />
Validering<br />Gode forslag<br />
Feilmeldinger<br />
Feilmeldinger<br />
Feilmeldinger<br />Ha topplassering<br />Gjør feilmeldingen visuell, så den synes<br />Fortell brukeren hva han/hun skal g...
www.bloglines.com<br />
Tilgjengelighet i skjema<br />
Tilgjengelighet - <accesskey> & <tabindex><br />Rekkefølgen på skjema – horisontalt og tabell skaper problemer <br />Acces...
Tilgjengelighet - <label><br />Bruk <label><br /><label for="phonehm">Phone Home:</label><br />	<input id="phonehm" type="...
Tilgjengelighet - <fieldset><br />Bruk <fieldset> og <legend> for å gruppere felt<br /><fieldset>    <legend><br /><b>Pers...
Prochain SlideShare
Chargement dans…5
×

5

Partager

Skjemadesign

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Livres audio associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Skjemadesign

  1. 1. Skjemadesign<br />Thor Fredrik Eie<br />
  2. 2. Skjemadesign<br />(nesten) Alle nettsider/applikasjoner har skjema<br />Skaper stor frustrasjon<br />Vi har brukertestet utrolig mange skjemaer<br />
  3. 3. Første møte med forsikring<br />IF.no - <br />Storebrand<br />
  4. 4. Vanlige problemer<br />
  5. 5. Har ikke lyst!<br />Dårlig motivasjon<br />Redd for å gjøre feil<br />Stresset<br />Hvor langt er skjemaet?<br />
  6. 6. Databasevrengning<br />System<br />Grensesnitt<br />Database<br />Applikasjon<br />Brukeren forstår ikke datamodellen!<br />Skjema<br />Tabell<br />Kolonne<br />Felt<br />
  7. 7. ”Det tar for lang tid å implementere”<br />Antall minutter hver bruker er forvirret<br />*<br />Antall brukere<br />=<br />Antall minutter du bør bruke på implementering<br />I tillegg får du:<br /><ul><li> Flere fornøyde kunder
  8. 8. Mindre trykk på kundestøtte
  9. 9. Høyere konverteringsrate (potensielle kunder som blir kunder)</li></li></ul><li>Obey!<br />Copyright NetLife Research - www.netliferesearch.com - kontakt@netliferesearch.comNetLife Research AS, <br />
  10. 10. Designprinsipper i skjemadesign<br />
  11. 11. Designprinsipper <br />Minst mulig svette<br />Ingen liker å fylle ut skjemaer<br />Smarte standardverdier, inline validering, snille felt<br />
  12. 12. Designprinsipper<br />Veien til målet må være tydelig<br />
  13. 13. Designprinsipper<br />Vær konteksten bevisst<br />Kjent informasjon vs. ukjent informasjon<br />Ofte vs. sjeldent brukt<br />Avbrytelser i arbeidet<br />
  14. 14. Designprinsipper<br />Vær konsistent i kommunikasjonen<br />Feilmeldinger, hjelp og suksess<br />Bruk samme språk selv om mange er involvert<br />Brun RødBlåSvart<br />
  15. 15. Vit mer om skjemaet ditt<br />Brukertesting<br />Feilmeldinger, problemer, gjennomføringsgrad<br />Kundestøtte<br />Hva er de vanligste problemene?<br />Hvor ofte skjer de?<br />Statistikk<br />Hvor forsvinner kunden i skjemaet?<br />Er det et stort frafall fra et skjermbilde til et annet?<br />
  16. 16. Visualisering av trinnvis progresjon<br />Flere sider<br />Visualiser at det er en prosess<br />Disse er ikke prosesser<br />
  17. 17. Visualisering av skjema<br />
  18. 18. Vi skal redesigne et skjema<br />
  19. 19. Skjemaet vårt<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Vi skal redesigne dette skjemaet for å gjøre det lettere å bruke<br />
  20. 20. Feltlengde<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Lengden på feltet kommuniserer til brukeren<br />La feltlengden fortelle hvor mye brukeren skal fylle ut<br />
  21. 21. Gruppering av felt<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Plasser felt som hører sammen tett, og ha mellomrom til neste gruppe<br />
  22. 22. Visuell støy<br />
  23. 23. Tekst på knapper<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />La det som skjer synes på knappen<br />Teksten bør være så forståelig som mulig<br />
  24. 24. Utseende på knapper<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Knappeutseende<br />La knappen se ut som en knapp<br />La primærvalget være tydeligere<br />Farge, størrelse<br />
  25. 25. Knapper forts.<br />Hjelp brukeren med å prioritere hvilken man skal klikke på.<br />Unngå knapperader på bunnen av skjemaer<br />Kanskje de andre valgene ikke bør se ut som knapper?<br />
  26. 26. Knapper<br />Hva er primær og hva er sekundær aksjon?<br />Primære er den knappen brukerne mest sannsynlig skal klikke på<br />Sekundære – den nest mest viktige knappen<br />Gjør det tydelig hvilken som bør klikkes<br />Størrelse, farge, utforming<br />
  27. 27. Hvor klikker du?<br />
  28. 28. Ledetekster/labels<br />Fornavn<br />Topplabels<br /><ul><li>Når det er ”vanlige data” som samles inn
  29. 29. Raskere utfylling
  30. 30. Trenger mer vertikal plass
  31. 31. Pixelnazisme er nødvendig for å få ledetekstene til være scannbare</li></ul>Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />
  32. 32. Obligatoriske felt<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Marker dem der det er mange felt, men bare noen er obligatoriske<br />Marker frivillige felt i skjema der de fleste er obligatoriske<br />
  33. 33. Obligatoriske felt<br />Fornavn<br />obligatorisk<br />Etternavn<br />obligatorisk<br />Adresse<br />Postnummer<br />Poststed<br />Tekst er best, men * funker også (pass på å forklare hva * betyr)<br />
  34. 34. Obligatoriske felt<br />Fornavn<br />Etternavn<br />Adresse<br />Postnummer<br />Poststed<br />Marker dem der det er mange felt, men bare noen er obligatoriske<br />Marker frivillige felt i skjema der de fleste er obligatoriske<br />
  35. 35. Hjelpetekster<br />Trenger du når<br />Det er uvant data som skal fylles ut<br />Brukeren synes det er rart at det spørres om <br />Hjelpetekster kan forkludre og skape mye visuell støy<br />Vurder dynamiske teknikker<br />Hjelpeteksten vises når et felt er aktivt<br />
  36. 36. Hjelpetekster<br />Skriv teksten fullt ut<br />Unngå å bruke ? ikoner etc.<br />Legg hjelpeteksten tett på det det forklarer<br />
  37. 37. Validering<br />
  38. 38. Validering<br />Bruk inline validering<br />
  39. 39. Validering<br />Gode forslag<br />
  40. 40. Feilmeldinger<br />
  41. 41. Feilmeldinger<br />
  42. 42.
  43. 43. Feilmeldinger<br />Ha topplassering<br />Gjør feilmeldingen visuell, så den synes<br />Fortell brukeren hva han/hun skal gjøre<br />Marker feltet som trenger en korreksjon<br />Bruk samme farger og visuell kommunikasjon både i feilmeldingen og i markeringen av feltet<br />
  44. 44. www.bloglines.com<br />
  45. 45. Tilgjengelighet i skjema<br />
  46. 46. Tilgjengelighet - <accesskey> & <tabindex><br />Rekkefølgen på skjema – horisontalt og tabell skaper problemer <br />Accesskey<br /><input type="text" name="firstName" size="15" accesskey=v><br />Tabindex<br /><input type="text" name="firstName" size="15" accesskey=v tabindex=1><br />
  47. 47. Tilgjengelighet - <label><br />Bruk <label><br /><label for="phonehm">Phone Home:</label><br /> <input id="phonehm" type="text" title="type your home phone number" name="homephone" size="15"><br /><label for="roses">Roses</label><br /><input id="roses" type="checkbox" title ="rose factsheet" name="roses" value="checkbox"> <br />
  48. 48. Tilgjengelighet - <fieldset><br />Bruk <fieldset> og <legend> for å gruppere felt<br /><fieldset>    <legend><br /><b>Personal Details</b><br /> </legend><br />skjemainnhold<br /></fieldset><br />
  49. 49. Pass også på<br />Tabindex -> la tab flyte pent gjennom skjemaet<br />
  50. 50. Verktøy for tilgjengelighet<br />Firefox Accessibility Extension<br />https://addons.mozilla.org/en-US/firefox/addon/5809<br />IE: Web Accessibility Toolbar<br />http://www.visionaustralia.org.au/info.aspx?page=1569<br />
  51. 51. Leseliste<br />Web Form Design<br />Luke Wroblewski<br />www.lukew.com/ff<br />The Inmates are Running the Asylum<br />Alan Cooper<br />
  • ThomasAndrStrmsnes

    Aug. 23, 2015
  • miracules

    Jul. 2, 2015
  • tronerud

    Nov. 7, 2012
  • hansp

    Jun. 17, 2010
  • seomorten

    Jun. 10, 2010

Vues

Nombre de vues

2 141

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

75

Actions

Téléchargements

0

Partages

0

Commentaires

0

Mentions J'aime

5

×