Your SlideShare is downloading. ×
Skjemadesign
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Skjemadesign

1,259
views

Published on

Published in: Design, Technology, Business

1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,259
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 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
    • 7. ”Det tar for lang tid å implementere”
      Antall minutter hver bruker er forvirret
      *
      Antall brukere
      =
      Antall minutter du bør bruke på implementering
      I tillegg får du:
      • Flere fornøyde kunder
      • 8. Mindre trykk på kundestøtte
      • 9. Høyere konverteringsrate (potensielle kunder som blir kunder)
    • Obey!
      Copyright NetLife Research - www.netliferesearch.com - kontakt@netliferesearch.comNetLife Research AS,
    • 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?
    • 28. Ledetekster/labels
      Fornavn
      Topplabels
      • Når det er ”vanlige data” som samles inn
      • 29. Raskere utfylling
      • 30. Trenger mer vertikal plass
      • 31. Pixelnazisme er nødvendig for å få ledetekstene til være scannbare
      Etternavn
      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
    • 42.
    • 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