Innehåll
- 1. Markera inte obligatoriska fält
- 2. Använd inte spinnare
- 3. Ha bara en typ av knapp eller ännu bättre bara en knapp per formulär
- 4. Klumpfält
- 5. Tänk varför du frågar något och hur det känns för användaren
- 6. Datum är knarriga små killar
- 7. Formulär som utvecklare
- 8. Använd inte kolumner i formulär
- 9. Använd inte två fält när ett kommer att göra det
- 10. Var snäll
Former, det finns inget som många designers hatar mer än former. De tar inte nödvändigtvis ut kreativiteten, eller hur? Kanske är det dags att vi tittar på formulär igen och förstår att ett formulär, som det mest grundläggande, är en konversation mellan användaren och programvaran.
Glöm peka och klicka, formulär representerar den rikaste interaktionen vi som digitala designers kommer att möta. Nästa gång ett formulär kommer din väg ska du inte tro att det bara handlar om att använda några fina CSS-effekter eller lägga till en fin jQuery-blomning. Det finns mycket mer djup i utformningen av formulär.
Jag har testat hundratals formulär och designat några komplexa formulär för försäkringsbolag, interaktioner med semesterbokningar och många fler. Chansen är stor att du har använt ett av mina formulär under de senaste månaderna.
Här är de lektioner som jag önskade att jag hade lärt mig innan jag började utforma formulär.
1. Markera inte obligatoriska fält
Känner du till den lilla asterisken som anger ett obligatoriskt fält? Jag har sett att misslyckas många gånger i användartestning. Som ett koncept är obligatoriska fält inte mycket meningsfulla, de har ingen offlineekvivalent. De är bra för utvecklare eftersom de erbjuder en fin svartvit inställning till slutförandet. Asterisken och det obligatoriska fältet misslyckas eftersom det är ett inlärt beteende. Vanligt beteende som jag har sett vid användartestning är att användaren fyller i formuläret högst upp och avslutar antingen när det finns något som hindrar dem eller de trycker på en knapp.
Lösningen är enkel, markera valfria fält, markera den plats där vår trevliga användare måste stanna och tänka på om de behöver fylla i det fältet.
2. Använd inte spinnare
HTML5 är lysande, eller hur? Det erbjuder massor av spännande nya glänsande verktyg att leka med. Vi måste tänka på lämpligheten av våra nya leksaker. Nummerfältet innehåller nu små upp- och nedpilar för att låta användaren bläddra igenom siffror.
Det finns två problem här. För det första gör standardvisningen av pilarna webbläsare riktigt små. Mycket fiffigt att klicka och de feta fingrarna bland oss kommer att kämpa på en iPhone. Det kallas Fitt's Law, ju mindre något är desto svårare är det att klicka på det.
Men jag hör dig skrika, du kan bara skriva numret direkt i nummerfältet. Ja, det kan du, men låt oss titta på webbläsarens display, upp / ner-spinnpilarna liknar vår pålitliga vän, välj rutan. En användare som får en spinner för första gången kommer att anta att den inte kan skriva in eftersom den liknar en markeringsruta.
Mitt råd är att undvika tills de blir vanligare eller webbläsarutvecklarna sorterar standarddesignen.
3. Ha bara en typ av knapp eller ännu bättre bara en knapp per formulär
Det finns en lite känd psykologiprincip som heter Hicks lag. Hicks lag säger att ju fler alternativ vi erbjuds desto svårare är det att göra ett val. Inte raketvetenskap vet jag, men en regel som är värt att tänka på.
Du kan hjälpa din trevliga användare genom att hjälpa dem att göra ett val. Genom att göra alla primärknappar en färg och bara ha en av dem per sida blir valet enklare. Vilken är knappen jag ska trycka på? Åh, det är enkelt, det är den stora färgade.
4. Klumpfält
Jag studerade neurovetenskap i ett tidigare liv och studerade så psykologin i minnet - särskilt korttids- eller arbetsminne. Nu innan du säger det; nej, korttidsminneskapaciteten är inte 7 +/- 2, 4 +/- 1 eller på människa talar tre till fem bitar. Vi som människor är bra på att utvärdera visuella stimuli, begränsningen är att vi är bättre när antalet är mindre. Att dela upp ett formulär i mindre grupper gör utvärderingen enklare, så ofta kommer det som användaren måste ange i formuläret från deras minne.
Se till att dina grupper av fält är ungefär fyra långa.
5. Tänk varför du frågar något och hur det känns för användaren
Detta är förmodligen det mest rakt fram råd jag ger men är ofta det minst använda.
Låt oss ta följande:
Fråga varje fråga du ställer. Är det nödvändigt? Hur känns det att bli frågad om detta?
Oftare än inte finns det ett affärsbehov att ställa en fråga och vi som designers kan diskutera om nödvändighet tills vi är blåa i ansiktet. Frågan måste ställas. För att förstå affärsbehovet för dessa uppgifter kan vi ofta kompromissa.
Vi kan hjälpa till genom att berätta för vår trevliga användare varför vi behöver ställa den frågan. Försäkra dig om användningen och delningen av den informationen och var bara trevlig.
Tar vårt exempel igen:
Det är fortfarande en tuff fråga men förhoppningsvis har vi sötat p-piller.
6. Datum är knarriga små killar
Att ange datum kan vara en riktig utmaning och det finns några fallgropar du kan undvika. Det enskilt största problemet är att hantera fel.
Det enklaste sättet är att starta en kalender. Det är värt att notera att veckor börjar på en måndag i Storbritannien och en söndag i USA. Om din användare inte koncentrerar sig kan de välja en söndag när de menar en måndag.
Det är också värt att nämna internationella datumformat. USA placerar månaden först, i Japan är det första året. Så ett datum som 5/5/12 kan tolkas på tre sätt.
Det är därför det är bäst att använda utvalda rutor.
7. Formulär som utvecklare
Formulär är hantverk för såväl utvecklare som designers. Att förstå vilka möjliga misstag som kan göras med att mata in data och utforma din back-end-kod för att klara är en utmaning.
Här är en enkel. Ange ett valutavärde. De möjliga misstag som användaren kan göra är enorma. Att tvinga dataformat som användare måste möta är frustrerande för din användare och, låt oss inse det, lite lat från utvecklarens sida.
Vilken bättre utmaning för en utvecklare än att bygga en skottsäker form.
8. Använd inte kolumner i formulär
Det stora problemet med att använda kolumner i formulär är flöde. Vi börjar ett formulär längst upp och slutar längst ner. Vid introduktion av kolumner kan formulärets flöde brytas.
Antag inte att användare flikar genom formulär och därför är fokus ett sätt att navigera i formulär i kolumner. Det är sällsynt att jag har sett det vid användartestning. För det mesta ser vi ange detaljer, klicka till nästa fält med musen / styrplattan / fingret och ange detaljer och så vidare.
9. Använd inte två fält när ett kommer att göra det
De flesta människor är inte touch-typister. Vid användartest ser vi människor som tittar på tangentbordet medan de skriver.
När du anger ett telefonnummer som delar upp formulärfältet, säg att lägga till riktnummer och nummer, orsakar verkliga problem. Användare ser inte eller kommer inte ihåg att det finns två fält så ange hela numret i det första fältet, värre om fältet är begränsat till ett visst antal tecken.
Använd bara ett fält för telefonnummer, detsamma gäller för husnummer / gata - använd bara en textinmatningsruta.
10. Var snäll
Du skulle bli förvånad över hur många ganska ganska oförskämda felmeddelanden som finns där ute.
Här är ett exempel på en som jag nyligen stötte på.
Det faktum att de föreslår att du villigt ange ett datum i framtiden och sedan ett ganska facetious svar, ja, det är inte så trevligt.
Återigen sätt dig själv på platsen för användaren, hur skulle du känna att du ser detta fel? Irriterad? Kanske ännu värre. Att vara trevlig är lätt.
Jag har tagit fram ett nedladdningsbart spjälsäng / fuskark som hjälper dig att designa bättre former. Det innehåller många fler bästa metoder för att designa bättre former.
