10 tip til design af perfekte formularer

Denne artikel blev oprindeligt offentliggjort på onepixelout.com

Formularer er portalen mellem brugeren og systemet og er ofte i fokus på en webside. Login, registrering, opdatering af din status, indtastning af betalingsoplysninger og leveringsadresse - alle disse håndteres ved hjælp af formularer. For eCommerce-websteder kan godt udformede former gøre hele forskellen.

Efter min erfaring kan forbedring af designet til en enkelt form endda fordoble salget af en online butik.

... og jeg elsker at designe former.

Da formularer er et funktionelt aspekt af brugergrænsefladen, er der nogle regler for, hvordan man designer dem. I dag skal vi se på tip og bedste praksis, når det kommer til at få former til at udføre alt benarbejdet, så brugeren ikke behøver det.

1. Start med input

Start med det mest almindelige formelement: tekstindtastningsfeltet. Det er den mest almindelige komponent i mest form, så få det rigtigt, og du er allerede halvvejs der.

Der er 3 grundlæggende elementer i hver forminput: tekstfeltet, etiketten og fejlmeddelelsen. Uanset hvilken måde du valgte at designe denne mest grundlæggende byggesten, skal du sørge for, at der altid er en måde for brugeren at vide, hvilket stykke information der er behov for, og hvis der var en fejl - hvordan de kan gendanne sig fra denne fejl. Hvilket bringer os pænt på, hvor vi kan sætte etiketter.

Etiketter går på toppen

Tendenser kommer og går. Der er en tendens, der læner sig mod at bruge pladsholderen som etiketten. Selvom det ikke nødvendigvis er forkert at bruge pladsholdere til etiketter, viser de dog nogle UX-problemer. Problemet med det er, hvis brugeren banker på det, etiketten er væk. Hvis brugeren vender tilbage til denne formular, og input er fokuseret på grund af en fejl, er etiketten også væk.

Etiketter skal være synlige på alle tidspunkter. Af denne grund går etiketter på toppen.

Hvorfor den øverste og ikke den venstre side af inputfeltet?

Når etiketten er til venstre for feltet, skal dette stables den ene oven på den anden på mobilen. Tænk mobil først.

billede fra giphy

Vejled brugeren til at indtaste de korrekte oplysninger med pladsholdere, og brug etiketter til deres tilsigtede brug.

Det andet argument for at placere etiketterne over deres inputfelter er, at læseren har en lineær lodret linje til at læse informationen, hvilket forskning har vist er hurtigere end at hoppe fra en venstre kolonne til en højre kolonne. Så gør ting lettere for din bruger - en ren linje for dem at læse de ting, de skal indtaste for at komme videre med dit websted.

2. Fejlstater og advarsler

For hvert standard tekstindtastningsfelt har du brug for en tilsvarende fejlmeddelelse. Her er et par tip til design til fejlsagen:

Fejlmeddelelsen kan komme fra enten klienten eller serveren. Klientsiden kan registrere ting, som når et obligatorisk felt ikke er befolket, eller når en e-mail-adresse er i det forkerte format. Serversiden kan finde ud af, om der i øjeblikket findes en e-mail-adresse. Ved, hvilke der er klient, og hvilke der er server. Fejl på klientsiden skal gives til brugeren, inden formularen er indsendt som tip. Fejl på klientsiden skal forhindre brugeren i at indsende forkerte oplysninger.

Bliv smart med fejlmeddelelserne.

Når en bruger laver en fejl, skal du give dem oplysninger om, hvilket felt der har forårsaget fejlen. Af sikkerhedsmæssige grunde ønsker nogle udviklere muligvis ikke ved login, om e-mailen eller adgangskoden er forkert, og det er helt fint. Men når brugeren blot tilmelder sig en e-mail eller indtaster deres adresse ved kassen, fortæl dem, hvilket felt der er forkert, og hvorfor.

Hver gang du designer tekstindtastningen, skal du også tage hensyn til, hvordan fejlmeddelelsen ser ud både før og efter, at brugeren rammer “Send”.

Medtag advarsler

Hvis et bestemt felt kræver et vist kriterium - for eksempel skal en adgangskode have et vist antal tegn og kombinere både tal og bogstaver, fortæl brugeren. Du kan medtage måder at vise, hvor stærk adgangskoden er, når de indtaster den. Det kan også være nyttigt at vise, om der allerede er registreret en e-mail, eller hvis der allerede er taget et brugernavn.

3. Grupper som med lignende

Visuelt ser formen pænere ud, når du grupperer lignende, men fra en brugeroplevelses synsvinkel er den også bedre. Tænk på, hvordan den mobile bruger vil interagere med denne form. Hvis tekstindtastningsfelterne er sammen, skal brugeren forblive på tastaturet for at udfylde felterne.

Hvis du beder brugeren om at skifte fra tekstindtastningsfelter til dropdowns, til radio og tilbage til tekstindtastningsfelter, skifter dette mere fra brugersiden. Tænk på, hvordan brugeren holder sin mobile enhed, og hvordan dette kan reducere friktion ved at gruppere lignende inputfelter sammen.

4. Radioknapper, dropdowns og afkrydsningsfelter

Nogle gange kan der være forvirring over, hvornår det er tid til at bruge radioknapper, dropdowns og afkrydsningsfelter.

Radioknapper er en fantastisk måde at vise brugeren et lavt antal mulige svar på. Som designer er du i stand til at forudvælge et svar eller lade dette være tomt. Radioknapper er det bedste valg, når kun én mulighed kan vælges.

Når der er mange mulige svar, er en dropdown mere velegnet (min tommelfingerregel er, hvis der er mere end 5 eller 6). Du kan forudvælge et svar eller forlade det øverste punkt som "Venligst Vælg" for at instruere brugeren til at træffe et valg.

Afkrydsningsfelter er det bedste valg, når du har et enkelt felt, der skal krydses af (f.eks. Betingelser og vilkår), eller hvis du har mere end et muligt valg. Hvis du vil finde ud af, hvilke marketing-e-mails du skal sende en bruger, giver en gruppe af afkrydsningsfelter dig mulighed for at foretage mere end et valg.

Brug af afkrydsningsfelter i stedet for radioknapper bør ikke begrænse dig i dine beslutninger om design af brugergrænseflade. Som designer har du en masse fleksibilitet i, hvordan disse UI-elementer kan vises på skærmen. Hvis du stadig ønsker at style afkrydsningsfelter for at få dem til at se mere interessante ud, bør dette ikke have nogen indflydelse på brugeroplevelsen. I stedet for at have en liste med tekst ved siden af ​​en lille cirkel, kan du gøre dette mere spændende ved at designe valgbare billeder eller ikoner.

5. Fjern eventuelle felter, hvor det er muligt

Hvis det forretningsmæssige mål er at få en bruger til at købe noget fra dit websted, er dit mål som designer at eliminere så meget friktion som muligt mellem kunden og systemet. Udtagelse af unødvendige felter får formen til at virke som mindre arbejde på brugerens side.

Dette er vigtigt at vide, når du designer enhver form for kasse eller leveringsadresse-formularer. Hvis marketingafdelingen vil finde ud af kundens interesser, så de ved, hvilke marketing-e-mails de skal sende, kan der være andre måder at finde disse oplysninger på, når kunden har købt deres varer (for eksempel på den side, de besøger, når de ”bekræfter deres e-mail”).

Se altid efter kreative måder, hvor kun det minimale antal felter er synlige. Hvis dit mål er at optimere til konvertering på et e-handelswebsted, skal du fokusere på at minimere antallet af felter i formularerne til leveringsadresse og kasse. Hvis du designer en grænseflade til booking af flyvninger, skal du vise brugeren det mindste antal felter, de har brug for for at se de tilgængelige flyvninger. Når du har investeret din bruger, kan du begynde at finde ud af mere af de perifere oplysninger, som de muligvis har brug for - f.eks. Antal poser osv.

6. Brug Auto-complete til længere felter

Gadenavnfeltet kan, afhængigt af gadenavnet, tage meget tid at skrive - især på en mobilenhed. Det kan være endnu vanskeligere at indtaste korrekt.

Du kunne overveje at inkorporere Google maps API for at gøre gadenavnet automatisk komplet. Dette betyder, at brugeren muligvis kun skal indtaste de første par tegn og vælge den rigtige gade fra rullelisten med mulige gadenavne. Det er endda muligt at udfylde postnummeret automatisk, bare ved at have navnet på gaden, men vi diskuterer dette i det næste punkt.

7. Brug betinget logik

Der er måder at bruge logik til at indtaste nogle oplysninger på brugerens vegne, hvilket gør deres liv bare en smule lettere.

  • Hvis du kender brugerlandet, kan designet forud bestemme yderligere felter, de muligvis har brug for ('stat', hvis de er i USA, 'amt', hvis de er i Irland osv.)
  • Du kan bruge postnummeret til at udfylde navnet på byen, staten eller provinsen.
  • Hvis du har deres land baseret på IP-adressen, kan du udfylde landekoden i telefonnummerfeltet?

Hvis du vil udfylde felter på brugerens vegne, skal du altid give dem en måde at redigere disse oplysninger på. Det er muligt, at du ikke har ret.

For eksempel — du kan bruge Google Maps API til at få navnet på en tysk gade. Ved at kende gadenavnet kan du også få områdekoden. Nogle gader i Tyskland er imidlertid store nok til at spænde over forskellige områdekoder, så oplysningerne vil være forkerte for et lille antal kantsager. Giv altid brugeren muligheden for at redigere dataene om nødvendigt.

At udforske betinget logik for hvert eneste land i verden ville være en enorm mængde arbejde - så vær smart med din indsats. Se på de lande, hvor du får flest ordrer eller trafik, og start først med at optimere dem. Hvis du ser et stærkt afkast, kan du fortsætte med at implementere den samme betingede logik for flere lande.

8. Bliv smart med pladsholdere

Tidligere talte vi om, hvordan vi ikke skulle bruge pladsholdere som tekstfeltmærke, da det forsvinder, når brugeren tapper på det. Vi udforskede ikke de andre måder, som pladsholdere kan gøre brugeroplevelsen bedre.

Stedholdere tilbyder en pæn mulighed for at vise en bruger, hvordan man formaterer deres information. Telefonnumre er et godt eksempel. Bør brugeren medtage deres landekode? Eller retningsnummer?

Når du har brug for et telefonnummer i et bestemt format eller et kreditkortnummer for at inkludere bindestreger, kan du informere brugeren om disse oplysninger ved at give et eksempel i pladsholderen. Dette er en cool måde at minimere fejlene ved tydeligt at angive, at du har brug for landekoder osv.

9. Kommuniker klart det næste trin

Få dine knapper til at arbejde overtid ved at kommunikere, hvad der vil ske næste. Hvis der er et yderligere trin at gennemføre, skal du gøre dette kendt for brugeren.

I stedet for at bruge “Next” eller “Checkout”, kunne du sige “Review Order” eller “Pay Now with Paypal”. Tilføj et andet niveau af kommunikation ved specifikt at fortælle brugeren, hvad der vil ske, når de trykker på det. Vil denne knap fuldføre ordren, eller har de tid til at gennemgå den? Vil de blive bragt til et PayPal-login?

Se altid efter måder, hvorpå brugeren skal føle sig godt tilpas under oplevelsen, især hvis det påvirker deres banksaldo.

Jeg bliver stadig ængstelig, hver gang jeg bruger Amazon-kassen, fordi de ikke fortæller mig det fulde beløb inklusive forsendelsesgebyret indtil det sidste trin. Vær gennemsigtig med din bruger. Få tillid ved at give dem de oplysninger, de har brug for på hvert trin, og forklar tydeligt, hvad de kan forvente, når de rammer et opfordring til handling.

10. Fortsæt med at lede efter måder at optimere på

Når du har lanceret din lyse, skinnende nye form - bliv ved med at se på analysen. Hvis du finder et stort antal mennesker hopper, når de ser det, kan du finde ud af hvorfor. Foretag brugertest for at se, hvor dine brugere føler sig utilpas, og arbejde for at fjerne denne friktion. Som designer er vores arbejde ofte aldrig 'færdig'.

Afslutningsvis

Formularer er lejlighedsvis ikke en meget sjov ting at designe, men når de gøres godt, kan de gøre en enorm forskel for brugeroplevelsen på et websted eller en app. Design dine formularer til at arbejde hårdere, så brugeren ikke behøver det.

Kommuniker tydeligt om opfordringer til handling, give tip til brugeren gennem advarsler og pladsholdere, og tilbud auto komplet. Se altid efter nye måder at udføre mere af den tunge løft på, så brugeren får en friktionsfri oplevelse.