Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Nächste SlideShare
Vil Du Ha Kunder Eller ?
Vil Du Ha Kunder Eller ?
Wird geladen in …3
×
1 von 48

Skjemadesign

5

Teilen

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

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

Notizen

  • Treklikksparadigmet
  • Eksempler:Reiseselskap – brukerne går på trynet hele tiden på samme sted (dette kan man også sjekke i statistikken)Verdipapirsentralen – Du får brev fra VPS hver jul, tror du ikke at du kan logge inn på vps.no da?
  • De kan styles med css, slik at det passer med resten av designet.
  • ×