4 Form Design UX Tips du bør vite (med eksempler)

Vi pleier å tenke på skjemaer som bare et middel for å samle brukerdata, men de er også en måte, noen ganger den eneste måten, for våre brukere å Koble til oss. Det er sannsynligvis vrangforestillinger å tro at vi kan gjøre brukere kjærlighet fylle ut skjemaer, men det er sikkert mulig å finne løsninger som ikke irriterer dem for mye, og hjelpe dem langs prosessen.

Mens du surfer på nettet, finner vi noen ganger overraskende løsninger som er programmatisk korrekte, men er utformet på en måte som mest sannsynlig gjør at mange brukere forlater nettstedet på grunn av den dårlige brukeropplevelsen.

Hvis våre skjemaer er utformet godt, vil vi ikke bare kunne glede våre brukere, men også backend-teamet som kan håndtere mye mindre brukerinnsatsfeil. I denne artikkelen skal vi se på hvordan vi kan minimere brukerinngangsfeil og fremdeles holde brukerne glade.

Forutse brukernes behov

Nettsteder og applikasjoner har forskjellige brukerbaser og mål, og til og med samme sted kan være vert for mange former som samler ulike typer data, bare for å nevne de hyppigste:

• Innloggingsskjemaer
• Registreringsskjemaer
• Brukerprofilskjemaer
• Nyhetsbrev registreringsskjemaer
• Checkout skjemaer
• Brukerundersøkelser
• Kontaktskjemaer
• Kommentar skjemaer
• Søk skjemaer

Alle disse skjema typer krever forskjellige ting. Når du utarbeider et betalingsskjema, er det avgjørende å trolig forsikre brukerne om sikkerhet, mens i tilfelle kommentasjonsskjemaer er det en god ide å legg til emojis eller andre metoder som gjør at brukerne kan uttrykke sin egentlige stemning.

Likevel kan liknende formetyper bli utformet annerledes, som alle nettsteder har sine unik brukerbase. Før du drar på designprosessen, er det alltid en god idé å Forvent hva våre brukere trenger, og designe tilsvarende.

Eksempel: Sosiallogg for å målrette brukerbehov

Codepen sin påloggingsskjema inneholder tre sosiale innlogginger med Github øverst. Dette valget ville være urimelig for de fleste nettsteder.

Men det er perfekt for Codepen, siden brukerbasen deres består av utviklere, hvorav mange vil logge inn med sine Github-kontoer, eller koble sammen utviklingsregnskapene med hverandre samtidig.

Tenk Mobile-Først

Mobil og desktop brukere har forskjellige behov, men som Å fylle skjemaer er en mye større utfordring på en mobil skjerm, bruker håndbevis enn på et fysisk tastatur, a mobil-første tilnærming kan ta oss videre når vi ønsker å designe brukbare skjemaer.

Dessuten fungerer mange form UI-mønstre som fungerer bra på mobilen, også bra på skrivebordet.

Eksempel: Tappable Controls

Mobilskjemaer av høy kvalitet kan ikke forestilles uten synlige kontroller på hvilken mobile brukere kan enkelt trykke på med fingrene.

Nyhetsbrevet registreringsskjema for webdesign konferansen An Event Apart tilpasser seg måten mobilbrukere får tilgang til skjermen - den inneholder to enkelt å skrive inn feltene og a fingertupp størrelse knapp.

Tekstfeltene er høyere som vanlig, slik at mobilbrukere enkelt kan trykke på dem, og den store oransje knappen med et ikonikon oppfordrer videre brukerne til å sende skjemaet.

Den stasjonære versjonen av nettstedet bruker samme formdesign, som det også ser bra ut og fungerer bra på større skjermer.

Eksempel: Utgifter

Ved utforming av skjemaer for mobil er det alltid viktig å vurdere hvordan vi kan minimere plassen vi bruker. De forbruksinngang UI-designmønsteret har blitt ganske populært i det siste, og det fungerer spesielt godt på mobil.

Booking.com bruker dette mønsteret i søkeskjemaet på mobilnettstedet. Når brukeren tapper inn i søkefeltet, utvides den for å la mer plass til bevegelser, og en valgliste med anbefalinger vises også under den.

Når brukeren tapper ut av feltet, krymper den, og den ekstra informasjonen forsvinner.

Eksempel: Morphing Button

Morphing knapper Ta det forbrukeinngangsmønsteret ett skritt enda lenger, siden brukerne først ser en knapp, som da morphs inn i et skjema når de klikker på den.

Skjermbildet nedenfor er fra The Startups briljante artikkel om innovativ formdesign, som også presenterer mange andre kreative løsninger.

Tilrettelegge inngangsinntak

Langvarige former har en tendens til å avskrekke brukere. Det beste vi kan gjøre er å bare spør etter innspillet vi virkelig trenger. Dette er ikke bare viktig fra et brukeropplevelsesperspektiv, men brukerne kan også nøle med å gi ut for mye personlig informasjon på grunn av personvern bekymringer.

Noen ganger, men vi fortsatt må gå sammen med lengre former. I dette tilfellet er det en god ide å skjær dem opp i mindre biter, og tjene bitene som påfølgende skjermer.

Mange e-handelsnettsteder (for eksempel Amazon) bruker denne løsningen for å redusere vognfrekvensen.

Hvis vi vil lette utfylle skjemafelter, er tommelfingerregelen til redusere både distraksjoner og brukerhandlinger så mye som mulig.

Eksempel: Personlig inngangsvelger

Ulike innholdsplukkere, for eksempel dataplukkere eller fargeplukkere, gjør det ikke bare lettere å ta inn riktig inngang, men de lager også skjemaet mer attraktiv, og betydelig redusere brukerfeil.

Den Todoist listen-tar app gir personlige tips inne i datoperioden når brukeren svinger over dagene.

For eksempel på skjermbildet under, kan brukeren se at før 31. august har hun allerede 2 på grunn av oppgaver, og kan ta hensyn til denne informasjonen når man bestemmer riktig dato for oppgaver. Det er en utmerket ide for en app hvor produktivitet er brukerens største bekymring.

Eksempel: Dra-og-slipp-inngang

Dra-og-slipp-design fungerer vanligvis bra med filopplastingsfelter, spesielt der brukerne skal laste opp bilder.

De reduserer sannsynligvis ikke brukerhandlinger som mye sammenlignet med den vanlige Last opp en filknapp, men de gjør det mye lettere å velg hvilken fil brukeren ønsker å laste opp, Derfor reduserer sjansen for å sende inn en feil fil.

WordPress.com gir et elegant og intuitivt dra-og-slipp-brukerinngangsgrensesnitt i postredigeringsskjemaet. De små miniatyrbilder og visuell representasjon av de allerede opplastede filene Videre hjelper brukerne raskt å utføre opplastingen.

Eksempel: Overlegg for å fjerne distraksjoner

Hvis brukerne blir distrahert når de fyller skjemaet, er de mer utsatt for feil, og blir også irritert lettere

Innhold overlegg er et flott alternativ til minimalistisk formdesign. De brukes av mer komplekse steder som vil vise forskjellige typer informasjon på samme skjerm.

På skjermbildet under, kan du se den stasjonære versjonen av Booking.com. Når brukerne svinger på søkeskjemaet, får resten av innholdet dekket av et gråaktig overlegg å hjelpe dem Fortsett å fokusere på utfyllingsprosessen.

Gi tilbakemelding til brukere

Å gi riktig tilbakemelding til rett tid kan forbedre brukeropplevelsen betydelig.

I formdesign er det to typer bruker tilbakemeldinger:

1. Tilbakemelding gitt før skjema innsending - for å redusere feil og form abandonment priser, for eksempel fremdriftssporere, umiddelbar inngangsvalidering som umiddelbart belønner brukere for den riktige inntastingen eller hjelperverktøystipsene
2. Tilbakemelding gitt etter skjema innsending - for å la brukerne vite de begikk en feil, for eksempel feilmeldinger

Den type tilbakemeldinger brukerne våre trenger, avhenger av egenskapene til målgruppen og målet for nettstedet vårt.

Eksempel: Progress Tracker

Skjemaer som er lengre enn én side, for eksempel spørreundersøkelser og de fleste e-handelskassen, kan ta utbytte av fremdriftssporing design mønster. Progress trackers gi en øyeblikkelig visuell tilbakemelding til brukerne om deres status, og oppfordre dem til å fortsette med prosessen.

SnapSurveys undersøkelsesopprettingsweb-app viser en liten fremdriftssporing rett over innsendingsknappene slik at brukerne kan Naturligvis få øye på det.

Han fremgang Tracker bruker ikke noen etiketter, men måten den er designet på gjør sitt mål klart - Antall sirkler indikerer antall trinn, de allerede utførte trinnene blir blå, og brukere kan enkelt se hvor mange trinn som er fremdeles foran dem.

Eksempel: Validering i sanntid

The Body Shop kosmetikk forhandler bruker sanntids validering på skjemaet Brukerprofil for å eliminere feil og forbedre UX av skjemaets fullføringsprosess.

Inngangene kontrolleres mens brukerne fyller ut skjemaet, og de riktige og gale svarene blir umiddelbart angitt av lett skillebare ikoner litt lenger til høyre, men fortsatt i det synlige området.

Eksempel: Ekspressive verktøytips

Forståelig mikrokopi er også en viktig del av vellykket brukerfeedback i formdesign. Per definisjon består mikroskopien av et nettsted av små biter av tekst brukes i forskjellige elementer - etiketter, knapper, feilmeldinger, verktøytips, osv.

I sitt innloggingsskjema svarer Barclays bankkonsern på spørsmålene brukerne potensielt kan spørre ved hjelp av godt utformede verktøytips som inkluderer lettforståelig mikrokopi.

Verktøytipsene er skjult bak litt? ikoner Ikke for å distrahere brukere hvem vet hvordan du fullfører påloggingsskjemaet, men å være alltid til stede for brukere som er usikre.

Noen av verktøylippene inneholder selv litt visuelt om et annotert debetkort slik at brukerne enkelt kan finne de dataene de må legge inn på innloggingsskjemaet.