1. Skjemadesign Thor Fredrik Eie

2. Skjemadesign (nesten) Alle nettsider/applikasjoner har skjema Skaper stor frustrasjon Vi har brukertestet utrolig mange skjemaer

3. Første møte med forsikring IF.no - Storebrand

4. Vanlige problemer

5. Har ikke lyst! Dårlig motivasjon Redd for å gjøre feil Stresset Hvor langt er skjemaet?

6. Databasevrengning System Grensesnitt Database Applikasjon Brukeren forstår ikke datamodellen! Skjema Tabell Kolonne Felt

8. Mindre trykk på kundestøtte

10. Designprinsipper i skjemadesign

11. Designprinsipper Minst mulig svette Ingen liker å fylle ut skjemaer Smarte standardverdier, inline validering, snille felt

12. Designprinsipper Veien til målet må være tydelig

13. Designprinsipper Vær konteksten bevisst Kjent informasjon vs. ukjent informasjon Ofte vs. sjeldent brukt Avbrytelser i arbeidet

14. Designprinsipper Vær konsistent i kommunikasjonen Feilmeldinger, hjelp og suksess Bruk samme språk selv om mange er involvert Brun RødBlåSvart

15. Vit mer om skjemaet ditt Brukertesting Feilmeldinger, problemer, gjennomføringsgrad Kundestøtte Hva er de vanligste problemene? Hvor ofte skjer de? Statistikk Hvor forsvinner kunden i skjemaet? Er det et stort frafall fra et skjermbilde til et annet?

16. Visualisering av trinnvis progresjon Flere sider Visualiser at det er en prosess Disse er ikke prosesser

17. Visualisering av skjema

18. Vi skal redesigne et skjema

19. Skjemaet vårt Fornavn Etternavn Adresse Postnummer Poststed Vi skal redesigne dette skjemaet for å gjøre det lettere å bruke

20. Feltlengde Fornavn Etternavn Adresse Postnummer Poststed Lengden på feltet kommuniserer til brukeren La feltlengden fortelle hvor mye brukeren skal fylle ut

21. Gruppering av felt Fornavn Etternavn Adresse Postnummer Poststed Plasser felt som hører sammen tett, og ha mellomrom til neste gruppe

22. Visuell støy

23. Tekst på knapper Fornavn Etternavn Adresse Postnummer Poststed La det som skjer synes på knappen Teksten bør være så forståelig som mulig

24. Utseende på knapper Fornavn Etternavn Adresse Postnummer Poststed Knappeutseende La knappen se ut som en knapp La primærvalget være tydeligere Farge, størrelse

25. Knapper forts. Hjelp brukeren med å prioritere hvilken man skal klikke på. Unngå knapperader på bunnen av skjemaer Kanskje de andre valgene ikke bør se ut som knapper?

26. Knapper Hva er primær og hva er sekundær aksjon? Primære er den knappen brukerne mest sannsynlig skal klikke på Sekundære – den nest mest viktige knappen Gjør det tydelig hvilken som bør klikkes Størrelse, farge, utforming

27. Hvor klikker du?

29. Raskere utfylling

30. Trenger mer vertikal plass

31. Pixelnazisme er nødvendig for å få ledetekstene til være scannbareEtternavn Adresse Postnummer Poststed

32. Obligatoriske felt Fornavn Etternavn Adresse Postnummer Poststed Marker dem der det er mange felt, men bare noen er obligatoriske Marker frivillige felt i skjema der de fleste er obligatoriske

33. Obligatoriske felt Fornavn obligatorisk Etternavn obligatorisk Adresse Postnummer Poststed Tekst er best, men * funker også (pass på å forklare hva * betyr)

34. Obligatoriske felt Fornavn Etternavn Adresse Postnummer Poststed Marker dem der det er mange felt, men bare noen er obligatoriske Marker frivillige felt i skjema der de fleste er obligatoriske

35. Hjelpetekster Trenger du når Det er uvant data som skal fylles ut Brukeren synes det er rart at det spørres om Hjelpetekster kan forkludre og skape mye visuell støy Vurder dynamiske teknikker Hjelpeteksten vises når et felt er aktivt

36. Hjelpetekster Skriv teksten fullt ut Unngå å bruke ? ikoner etc. Legg hjelpeteksten tett på det det forklarer

37. Validering

38. Validering Bruk inline validering

39. Validering Gode forslag

40. Feilmeldinger

41. Feilmeldinger

43. Feilmeldinger Ha topplassering Gjør feilmeldingen visuell, så den synes Fortell brukeren hva han/hun skal gjøre Marker feltet som trenger en korreksjon Bruk samme farger og visuell kommunikasjon både i feilmeldingen og i markeringen av feltet

44. www.bloglines.com

45. Tilgjengelighet i skjema

46. Tilgjengelighet - <accesskey> & <tabindex> Rekkefølgen på skjema – horisontalt og tabell skaper problemer Accesskey <input type="text" name="firstName" size="15" accesskey=v> Tabindex <input type="text" name="firstName" size="15" accesskey=v tabindex=1>

47. Tilgjengelighet - <label> Bruk <label> <label for="phonehm">Phone Home:</label> <input id="phonehm" type="text" title="type your home phone number" name="homephone" size="15"> <label for="roses">Roses</label> <input id="roses" type="checkbox" title ="rose factsheet" name="roses" value="checkbox">

48. Tilgjengelighet - <fieldset> Bruk <fieldset> og <legend> for å gruppere felt <fieldset> <legend> <b>Personal Details</b> </legend> skjemainnhold </fieldset>

49. Pass også på Tabindex -> la tab flyte pent gjennom skjemaet

50. Verktøy for tilgjengelighet Firefox Accessibility Extension https://addons.mozilla.org/en-US/firefox/addon/5809 IE: Web Accessibility Toolbar http://www.visionaustralia.org.au/info.aspx?page=1569

51. Leseliste Web Form Design Luke Wroblewski www.lukew.com/ff The Inmates are Running the Asylum Alan Cooper