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

Skifte beite? Gresset er grønnere hos oss

Sammen sprenger vi grenser for hva web kan være. Vi ser spesielt etter: Tekstforfattere, prosjektledere, designere og interaksjonsdesignere.

  1. Denne våren skal du kle deg i responsiv design
  2. Fjortisene kommer – og de vil ta jobben din
  3. UX-konferanser 2012
  4. Tverrfaglighet og typografi

Sist kommentert

Brukervennlighet vs. Sikkerhet vol. 2

Brukervennlighet vs. Sikkerhet er en unyttig kamp. Ofrer du brukervennligheten så senker du den faktiske sikkerheten. Er det på tide å legge boksehanskene på hyllen?

  1. Denne våren skal du kle deg i responsiv design 29
  2. Passordtyranniet — til glede for nye lesere 8
  3. Brukervennlighet vs Sikkerhet – en unyttig kamp? 13
  4. UX-konferanser 2012 2