O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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...
Próximos SlideShares
Carregando em…5
×

Skjemadesign

2.009 visualizações

Publicada em

Publicada em: Design, Tecnologia, Negócios

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 />

×