UI12: Korleis laga skjema som funkar? 4

På sesjon to, tirsdag, pepra Luke Wroblewski oss med gode retningslinjer for skjemadesign. Her er det du treng for å designa eit brukarvenleg skjema:

  1. Treng du alle felta? Gå gjennom kvart enkelt felt og kutt alle som du ikkje treng (og ja, det er garantert nokre du ikkje treng :)
  2. Ledeteksten til kvart skjemafelt bør i dei fleste tilfella stå rett over innskrivingsfeltet.
  3. Høgrejusterte ledetekstar bør brukast når det ikkje er plass til å ha tekstane over.
  4. Venstrejusterte ledetekstar kan fungera bra dersom det er viktig at brukeren enkelt kan skanna gjennom ledetekstane. Dette gjeld spesielt dersom det er ukjent og/eller avansert informasjon brukaren skal leggja inn.
  5. Fjern unødvendige valgfrie felt. I dei aller fleste tilfella treng du ikkje desse.
  6. Dersom 8 av 10 felt er obligatoriske; ikkje ha stjerne på desse 8, men skriv “valgfri” bak dei 2 som er valgfrie.
  7. Obligatorisk-merke (*) skal vera plassert saman med ledeteksten og ikkje innskrivingsfeltet.
  8. Grupper elementa med bakgrunnsfargar, boksar eller horisontale linjer, men begrens talet på grafiske verkemidlar til eit minimum.
  9. Bruk feltstorleiken til å kommunisera kor langt innhaldet som skal skrivast inn er.
  10. Dersom ein har eit skjema på ei side er det mest effektive å plassera “Send”-knappen nede til venstre, og skriva “Avbryt” som ei lita lenke rett ved sida av.
  11. Ta høgde for at folk skriv telefonnummer, kontonummer o.l på ulike måtar.
  12. Bruk Ajax for å sjekka om passord er bra nok, og om brukarnamnet er ledig medan brukaren fyller ut skjemaet.

Treng du eit eksempel på eit skjema som har gjort ting rett? Her er eit bra skjemadesign frå Yahoo!

4 kommentarer

  1. Hei Martha, ser dere har en del bra poster fra User Interface 12. Skulle virkelig ønske jeg kunne inntatt en plass der selv, men som student er det ikke lett å ha råd til det, dessverre.

    En del bra punkter fra Luke Wroblewski. Anbefaler alle å gå gjennom artiklene hans, dette er virkelig en person med peiling på forms. Alle punktene ovenfor finner man veldig god forklaring på gjennom artiklene hans.

    Dog er jeg nok ikke helt enig med deg når det kommer til eksempelet du trekker fram. Jeg kan være enig i at skjemaet fungerer bra når du har JavaScript på, men hva skjer når du skrur det av? Da får man plutselig ingen hjelp på feltene i det hele tatt. Og i tillegg er CAPTCHA-en deres så vanskelig å tolke at jeg sliter med å se hva som står der i det hele tatt. Hva er deres tanker i Netlife Research om CAPTCHA? Hvordan mener dere det bør gjøres?

  2. Det var Luke W sitt eksempel(: Men eg er heilt enig i at skjemaet bør funka når ein skrur av JavaScript. Det kan ein for eksempel gjera ved å ha ei fallback-løysing, noko Anders har skrive om tidlegare i blogginnlegget Ajax og tilgjengelighet. Om Captcha så bør denne heilt klart fjernast om det går, dei er ofte irriterande for brukarar og lite tilgjengeleg. Alternativ til ein skrift-captcha kan vera ein bilde-kaptcha, for eksempel Kitten Auth, der ein klikkar på dei dyra som passar inn i rett kategori.

  3. Justaddwater.dk har også et innlegg om CAPTCHA usability

  4. Jeg har ikke lest innlegget til Anders, men JavaScript bør alltid være unobtrusive (kommer ikke på et godt ord for det på norsk, liker det engelske). Personlig mener jeg at en bilde-CAPTCHA ikke på noen måte er bedre enn en skrift-CAPTCHA, jeg ville i stor grad jobbet for å finne andre, og mer tilgjengelige, løsninger på problemet. Jeg kan anbefale og lese Stopping spambots with hashes and honeypots av Ned Batchelder og Battle comment spam with an extra form field av Olav Bjørkøy. Målet må være å gjøre det så enkelt for brukerne å komme gjennom, samtidig som man ikke skaper tilgjengelighetsproblemer. Veldig interessant problem.

Skriv en kommentar

  • *
  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Mest lest

Tid for ømhet

Det hjelper lite med kurs og kompetanse hvis vi ikke har tid. Juristen skriver dårlig, vi sender ham på skrivekurs. Saksbehandlerne eier ikke språkøre, vi arrangerer et kurs i nettskriving. [...]

  1. Prototyping i Xcode
  2. Slik jobber du strategisk med innhold
  3. Ett år og fortsatt grønnskollinger
  4. Denne våren skal du kle deg i responsiv design

Sist kommentert

Bruk nettstedsøket til å forbedre innholdet ditt

Lou Rosenfelds syv tips til hvordan du kan forbedre innholdet ved hjelp av nettstedsøket.

  1. Slik jobber du strategisk med innhold 2
  2. Effektiv bruk av brukarprofilar 6
  3. Prototyping i Xcode 1
  4. Slik jobber vi i Netlife 2