7 hemmeligheder til at designe store former
Næsten hver hjemmeside design indeholder en form for form. Fra simpel e-mail-samling for at tilmelde dig et nyhedsbrev eller en meddelelse til fuld betalingsopsamlingsformularer, er det afgørende, at du designer en formular, som er nem at bruge og forstå.
Standarderne for formdesign udvikler sig også. Mens mange former bruges til at inkludere flere kolonner og bede om masser af oplysninger, foreslår de fleste bedste praksis nu at holde formularer så enkle som muligt. Og der er også meget til designet. En god form er scannable, kræver ikke meget at skrive og indeholder smart mærkning og formatering for at hjælpe brugerne med at udfylde formularer korrekt første gang.
Her er et par hemmeligheder for at sikre, at du designer en formular, som brugerne faktisk udfylder.
1. Gør det nemt at scanne og læse
Du ved, at brugere scanner websites for at hente oplysninger og bestemme hvilke handlinger de vil tage, eller om indhold og design interesserer dem eller ej. Det samme gælder for former. Brugeren skal kunne fortælle, hvilke oplysninger der er behov for på et øjeblik og give en klar forklaring på, hvilken formularen er til, og hvordan man sender den.
En meget scannable form indeholder følgende:
- Kontrast: Tekst skal være kort og let at læse. Undgå masser af farve og hold dig til traditionel mørk på lyse tekst-baggrund kombinationer.
- Gruppering og rum: Gruppér oplysninger, der ligner hinanden på længere formularer. Når du f.eks. Indsamler betalingsoplysninger, kan du gruppere kundeoplysninger, betalingsoplysninger og forsendelsesoplysninger. Tre kortere blokke er lettere at fordøje end en lang en. Brug smart afstand til, at etiketter er forbundet til det felt, de forklarer, snarere end ensartet afstand mellem tekst og feltelementer.
- Klar finish / opfordring til handling : Gør knappen stor og nem at se. Mikroskopien inde i knappen skal fortælle brugerne, hvad der vil ske, såsom "indsende", "betal nu" eller "fortsæt til næste trin." Husk at lukke tilbagekoblingssløjfen og lad brugerne vide, hvornår en formular er korrekt indsendt.
2. Overvej flydende etiketter
Der har været en masse debat om, hvorvidt man skal bruge hinttekst inden for formularfelterne. Hovedproblemet er, at denne tekst for ofte ikke går væk med et klik, og brugerne skal aktivt slette det for at begynde at skrive. Det er akavet.
Yderligere, den Nielsen Norman Group fundet at tomme felter kan trække øjet og hjælpe brugerne med at indtaste oplysninger tydeligere.
Hvis du føler behov for brug af tip, skal du overveje en interaktiv løsning-flydende etiketter. Medtag dine etiketoplysninger inde i formularfelter, så det ser ud som pladsteksttekst, men lad teksten animere og skifte til øverste venstre position, når en bruger svæver over eller klikker ind i feltet. Etiketten eller hint går aldrig væk, og det kommer ikke i vejen for brugeren at forsøge at udfylde formularen. (Plus den lille animation er en sjov overraskelse for brugere.)
3. Brug feltmasker
Feltmasker kan give nogle af de samme spor og danne hints, men uden at komme i vejen for brugervenligheden. En feltmaske vises kun, når en bruger aktiverer et felt og giver en yderligere scanningstank om, hvilke oplysninger der er behov for. Maskeren kan hjælpe brugeren yderligere ved automatisk at formatering af oplysninger for at undgå fejl, der vil skubbe formularen ud ved indsendelse.
Et godt eksempel på en feltmaske i aktion er med telefonnumre. Overvej muligheden for flere format:
- (000) 000-0000
- 000-000-0000
- 0000000000
Hvordan ved en bruger, hvem der vil arbejde? Formularfeltet vil angive og justere formatet som en brugertyper, så han eller hun behøver ikke at tænke over det og må kun indtaste tal. (Dette sparer også besværet med at skifte mellem tastaturer på en mobil enhed.)
4. Gør formularer tastaturvenlige
Du har ingen måde at vide, hvilken type enhed en bruger vil støde på din form på, men det skal være lige så let at udfylde alligevel. Overvej alle de forskellige typer tastaturer, der kunne sende information til formularen og justere felter for at opdage og bruge den relevante mulighed.
På desktops skal brugerne kunne indtaste en formular og udfylde hvert felt uden at skulle klikke på en mus. Advance automatisk fra et felt til det næste ved afslutningen eller brug faner eller indtast for at flytte rundt. W3.org har et solidt sæt af tastatur anbefalinger for dig at følge.
På mobilenheder skal du matche tastaturtypen til de krævede data. Hvis indtastningen er for bogstaver, skal du oprette alfanumerisk tastatur; for tal, hent den numeriske indstilling. Fra Google: "Appbrugere sætter pris på apps, der giver et passende tastatur til tekstindtastning. Sørg for, at dette implementeres konsekvent gennem hele appen i stedet for kun for bestemte opgaver, men ikke andre. "
5. Opt for lodret format
Lodrette former er lettere for brugere end flere kolonneformater. Til bedste praksis regel er at sikre, at alle felter kan passe på skærmen uden at rulle i et top til bund format.
Den ene undtagelse er for superkorte formularer, hvor en bruger kun skal indtaste en e-mail-adresse eller navn og e-mail-adresse. To kolonner side om side efterfulgt af et opkald til handlingsknap kan fungere godt i denne situation, så længe email-kassen er lang nok til, at brugerne kan se alle bogstaverne i deres adresse.
Husk at bestille elementer også logisk i lodret form. Hvis du samler fornavn, efternavn, e-mail-adresse og hårfarve sekvenser dem på den måde.
6. Limit Typing
Brug så mange forfyldte løsninger som muligt med formularer. Intet er mere dejligt, så skal du tilføje en adresse, og efter de første få vandhaner kigger Google API ind og foreslår adressemuligheder.
Dette gør tre ting:
- Det gør det lettere for brugerne, især på mobilen.
- Det hjælper med at begrænse antallet af nødvendige felter.
- Det kan hjælpe med at fjerne nogle brugerfejl, som f.eks. Fejltyper.
Overvej det samme med e-mail-adresser, så brugerne får populære e-mail-domæner efter @ -symbolet. Når en bruger skriver i [email protected] .... feltet foreslår automatisk [email protected] .
7. Hold det kort og sødt
Du vil blive fristet til at bede brugerne om en masse oplysninger i formularer. Modstå trangen!
Bede kun om vigtige oplysninger i formularer. Der er en større sandsynlighed for, at brugerne vil udfylde formularer, der kræver mindre engagement. Hvis du har brug for flere oplysninger senere, kan du derefter sende dem fra din liste som bede om yderligere oplysninger. (Som en person, der allerede har tilmeldt sig, er brugeren mere tilbøjelige til at engagere dig til mere på nuværende tidspunkt.)
Undgå valgfrie felter. Spørg ikke om overflødige oplysninger. Brug ikke flere felter, hvor du kan bruge en (f.eks. Telefonnumre).
Konklusion
Giv brugere noget til gengæld for at udfylde en formular. Gør det sjovt eller interessant. Tak brugeren.
Oprettelse af en formular, der er let at læse og nem at bruge, vil øge dine chancer for at indsamle data og gøre en website besøgende til en gentager bruger.