Skjemadesign

1,776 views

Published on

Published in: Design, Technology, Business
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
1,776
On SlideShare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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 />

    ×