Optimer dine mobile formularer for en problemfri brugeroplevelse

Forestil dig at sidde i toget, vente i lufthavnen eller slappe af på sofaen, og du skal udfylde en online formular på din smartphone. Har du nogensinde tænkt over, hvordan selve designet af formularen påvirker din oplevelse? Sandsynligvis ikke. Og det er præcis målet – at give brugerne en intuitiv oplevelse, der lader dem udfylde formularen ubesværet og fortsætte med deres dag. Mobilformular design handler om at skabe og implementere formularer på din hjemmeside, der er yderst funktionelle og nemme at se, udfylde og indsende fra mobile enheder som smartphones og tablets, i modsætning til desktops.

Mobil vs. Desktop Formular Design

I dag besøger dine hjemmesidebesøgende ikke kun din side og udfylder formularer fra deres stationære computere. De gør det i stigende grad fra deres mobile enheder. Mobilens andel af den globale webtrafik var næsten 60% fra april til juni 2022. Det betyder, at det er kritisk, at dine formularer er simple at gennemgå, udfylde og indsende via en mobil enhed.

Hvorfor er Mobil Formular Design Vigtigt?

Det bedste mobil formular design sikrer en positiv brugeroplevelse, hvilket resulterer i en glad hjemmesidebesøgende, der med større sandsynlighed konverterer til en kunde og vender tilbage. Designet, layoutet og funktionaliteten af dine mobile formularer spiller en stor rolle for din hjemmesides samlede brugeroplevelse. Hvis dine formularer ikke er mobilvenlige, risikerer du færre konverteringer, et tab af mobil trafik og en stigning i utilfredse og frustrerede kunder. Og hvem ønsker det?

Hvorfor Skal Mobil Formular Design Adskille Sig fra Desktop Design?

"Alt fungerer anderledes på mobilen, så marketingfolk skal sikre sig, at alle elementer på deres hjemmesider altid er optimeret til mobil," siger Lilach Bullock, en anerkendt marketing influencer og strateg. "Og det inkluderer selvfølgelig formularer – især da det føles som om, man konstant skal udfylde formularer, mens man er på mobilen." Tænk specifikt på forskellen i skærmstørrelse mellem en mobil enhed som en iPhone (typisk 4,7" til 6,7") og en bærbar computer eller stationær computer (typisk 13" til 24"). Det er sikkert at antage, at en formular, der passer til en iPhone-skærm, ikke passer perfekt til en desktop-skærm. Hvis dine mobile besøgende ikke nemt kan læse, udfylde og indsende din formular, kan du miste deres forretning. Derfor er det afgørende at skabe en mobilvenlig formular, der passer til enhver mobil enheds skærm, for at skabe en god brugeroplevelse, efterlade et varigt indtryk på dine besøgende og hjælpe dig med at øge dine konverteringer.

Hvad er Responsivt Webdesign?

Hvis du vil tage mobil formular design et skridt videre og sikre, at hele din hjemmeside fungerer på alle typer enheder, kan du implementere et responsivt webdesign. Responsivt webdesign tager højde for brugerens skærmstørrelse, platform, orientering og miljø. Dette er en enkel og effektiv måde at skabe en god brugeroplevelse på, da så mange mennesker konstant besøger og browser forskellige hjemmesider på forskellige enheder. Der er flere måder at sikre et responsivt design på. For eksempel, hvis du bruger WordPress, findes der mange responsive WordPress-temaer, du kan installere. Ligeledes, hvis du bygger din side med software som Squarespace, kommer din side sandsynligvis automatisk med responsivt webdesign. I dag er responsivt webdesign et populært valg for virksomheder på grund af det store antal mennesker, der besøger hjemmesider via en bred vifte af mobile enheder. Men lad os nu vende tilbage til at diskutere mobil formular design.

Mobil Formular Design: 11 UX Retningslinjer

"Når du designer dine mobile formularer," forklarer Bullock, "er det vigtigt at holde tingene enkle og gøre dem så hurtige som muligt. [Formularer] er sværere at udfylde på mobilen, og alt føles som om, det tager længere tid, end det burde." Med andre ord er det vigtigste simplicitet for slutbrugeren. Når du opretter en mobilvenlig formular, er der nogle trin, du bør tage for at give den bedst mulige brugeroplevelse for dine besøgende. Lad os gennemgå 11 af disse bedste praksisser for mobil formular design, som du kan begynde at implementere i dag.

1. Minimer antallet af formularfelter

Har du hørt udtrykket "mindre er mere"? Det er præcis, hvad du bør tænke på, når du opretter din mobile formular. Mellem størrelsen på en mobilenheds skærm og mængden af indhold, du skal placere i din formular, er det nemt ved et uheld at få din formular til at føles rodet. Husk at fjerne unødvendige elementer. Behold kun de formularfelter, der er absolut nødvendige for at indsamle den ønskede information. For at strømline processen bør du også tydeligt og kortfattet mærke dine formularfelter og markere valgfrie felter som "valgfrit" eller inkludere en asterisk ved siden af de påkrævede felter. Målet er at gøre formularen så nem som mulig at udfylde, så chancerne for, at folk fuldfører formularen, øges.

2. Automatiser input, når det er muligt

Hvis du ved et uheld skriver din gadeadresse forkert, og formularen retter stavningen for dig, er det autoforrektion. Hvis du begynder at skrive din leveringsadresse, og en boks dukker op med resten af din adresse og spørger, om du vil "autofylde" resten af formularfelterne med din gemte adresse, så autocompleterer formularen dit svar. Ved at implementere autoforrektion og autofyld-funktioner på dine mobile formularer forbedrer du brugeroplevelsen ved at gøre det hurtigt, simpelt og ligetil for brugerne at indtaste deres detaljer.

3. Brug et enkelt kolonne layout

Når du opretter en lang eller flertrins formular, skal du liste alt dit indhold i et enkelt kolonne layout. Enkelte kolonne formular layouts er:

• Nemmere at læse: Ved at placere alle dine formularfelter i et enkelt kolonne format giver du dine besøgende mulighed for at fokusere på kun ét element ad gangen, hvilket gør din formular nemmere at læse.
• Mindre skræmmende: Hvis du ser på en formular, især i et trangt rum som på en mobil enhed, og ser en stor mængde indhold presset sammen, kan du føle dig overvældet. Derfor gør adskillelse af dit indhold i rækker og placering af dine formularfelter i et enkelt kolonne format dit indhold mindre intimiderende.
• Hurtigere at udfylde: Når du placerer din flertrins formular i en enkelt kolonne, kan leads udfylde den hurtigere, end de ville kunne med en to-kolonne formular. Det skyldes, at formatet gør formularen nemmere at læse og arbejde igennem trin for trin.

Tag et kig på denne tilmeldingsformular på HubSpot's hjemmeside, når den ses fra en desktop eller bærbar computer. To-kolonne layoutet giver mening her, da der er masser af plads på den bredere skærm. Nu skal du se på den samme formular, når den ses fra en mobil enhed. Dette enkelt kolonne layout lader øjet flyde naturligt, mens det forhindrer rod på den kompakte mobilskærm. Dette er et eksempel på, hvordan designet skal tilpasses.

4. Konsistens betyder noget (og det gør formularudseendet også)

Hvordan lukker du en mappe eller en åben fane på din bærbare computer? Ved at klikke på 'x'-knappen i øverste højre hjørne. Men hvad nu hvis knappen ikke dukkede op i en bestemt applikation? Hvordan ville du føle, når du skulle lukke vinduet? Forvirret eller irriteret, måske. Du ville måske bruge et minut eller to på at finde ud af, hvordan du lukker applikationen. Dette er et bredt eksempel, men det tjener godt til at illustrere vigtigheden af konsistens. Konsistens i formular design gælder ikke kun for stil (farver, typografi, logo osv.), men også for generelt accepterede konventioner, som folk er vant til. Her er et par tips til at sikre en konsistent oplevelse: Match din formulars udseende og følelse med dit brand og din hjemmeside. Sørg for, at din formulars styling og formatering er konsistent og komplementær (intet bør se forstyrrende eller ude af sted ud). Juster dine formularfelter til venstre. Fastgør hver etiket over den tilsvarende inputboks og juster den til venstre. Brug en asterisk til at angive obligatoriske spørgsmål. Første indtryk efterlader et varigt indtryk (i livet og i forretningen). Det gælder også dine mobile formularer. Ingen ønsker at udfylde en mørk, svær at læse, rodet og uattraktiv formular. Din mobile formular skal være yderst funktionel såvel som æstetisk tiltalende. Dens udseende bør bidrage til dens læsbarhed og positive brugeroplevelse. For at opnå dette skal du bruge en simpel og letlæselig skrifttypestil og størrelse, en farvepalet, der ikke føles overvældende, og minimale formularfelter. Klarhed er nøglen.

5. Hav touch-oplevelsen i tankerne

Tænk over, hvordan du holder din telefon, mens du sender beskeder. Sandsynligvis griber du telefonen med to hænder og bruger dine tommelfingre til at interagere med skærmen. Eller du gør det måske med én hånd eller skriver med din pegefinger. Vi interagerer med smartphones meget anderledes end med en bærbar computer eller stationær computer (tænk på den "tekst-tommel"), og mobil formular design bør afspejle dette. Her er et par forslag, du skal huske på:

• Hav tilstrækkeligt med mellemrum til at holde formularen ryddelig og undgå utilsigtede knaptryk.
• Sørg for, at knapperne er logisk placeret (f.eks. indsende-knappen nær bunden af formularen, så brugerne ikke behøver at scrolle op for at finde den).
• Tjek, at teksten (skriftstørrelse og stil) er læselig på den lille mobilskærm (ingen ønsker at klemme deres skærm og zoome ind for at kunne læse teksten).
• Sørg for, at formularfelterne og knapperne er store nok til at blive trykket komfortabelt med en finger.
• Få formular pop-ups til at dukke op mod den nederste del af skærmen (hvor det er muligt) for at gøre dem nemme at nå.

Dette sikrer en behagelig interaktion.

6. Udnyt input-begrænsninger

Input-begrænsninger begrænser den type svar, en person kan indtaste i et formularfelt. Dette kan omfatte en ordgrænse (f.eks. mens du udfylder en jobansøgningsformular) eller kun at kunne indtaste cifre (i tilfælde af et telefonnummer). Dette ses i formularen nedenfor, hvor et numerisk tastatur dukker op, når en person indtaster sit telefonnummer. Input-begrænsninger maksimerer formular effektivitet ved at begrænse utilsigtede fejl, forsinkelser eller forvirring. For eksempel, hvis nogen forsøgte at foretage en reservation af et bord på en restaurant og ved et uheld valgte en dato i fortiden, ville begrænsningen forhindre dem i rent faktisk at kunne vælge og bekræfte den dato. Dette er især vigtigt ved design til mobil, da mindre skærme gør det sværere at indtaste information præcist. Ved at indstille input-begrænsninger sparer du folk tid, mens de udfylder dine formularfelter, og forhindrer dig i at modtage lange eller ugyldige svar.

7. Opret klare handlingsknapper

Knapper er et undervurderet aspekt af mobil formular design. Tænk over det: Du får en formularindsending eller konvertering kun efter, at den rigtige knap er trykket. Så du kan virkelig ikke overse dette element. Her er et par principper, du kan anvende på dine mobile formularer: For mange knapper ødelægger suppen (ligesom formularfelter, behold kun de essentielle knapper). Stil og mærk dine knapper konsekvent (store bogstaver, formatering, justering osv.). Lad fokus skinne på den primære knap (den vigtigste handling, du ønsker, at brugeren skal foretage) ved at få den til at skille sig ud med størrelse eller farve. Højre er rigtigt - en almindelig tommelfingerregel for mobil er at placere hovedknappen på højre side og den sekundære på venstre (selvom dette kan variere afhængigt af individuelle behov). Specifikke etiketter er næsten altid svaret ("Rediger denne side" frem for "Rediger"). En klar opfordring til handling er afgørende.

8. Tilbyd kortskannere til betalinger

Har du prøvet at indtaste dine kreditkortoplysninger i en formular via din smartphone? At skrive en masse tal på en lille skærm med et lille tastatur kan være en kedelig proces. Kortskanningsapps er blevet stadig mere populære af netop den grund. Når dine besøgende foretager et køb, kan de klikke på en knap, der fører dem til en skærm, hvor de kan bruge deres mobile enheds kamera til at tage et sikkert billege af forsiden og bagsiden af deres kort. Med blot et par billeder er dine leads færdige med en af de mest tidskrævende dele af mobil formularudfyldningsprocessen – hvilket holder dine besøgende effektive og fri for frustration og fejl. Dette forenkler betalingsprocessen.

9. Forklar behovet for specifik information

Når du udfylder en simpel e-mail-tilmelding eller en registreringsformular, er du nogensinde blevet bedt om at give personlige oplysninger, der intet har at gøre med selve tilmeldingsformularen? Dette er en almindelig forekomst i alle typer formularer (ikke kun mobile). At bede nogen om personlige eller andre følsomme oplysninger uden at forklare dit behov for det, kan virke mistænkeligt. Når du stiller et spørgsmål, der ikke direkte relaterer sig til årsagen til, at din besøgende udfylder formularen, er det essentielt at oprette en opsummeringsboks (med yderligere information), som personen kan klikke på for at forstå, hvorfor du beder om disse oplysninger. Sådanne indikatorer kan også give ekstra vejledning til at udfylde et formularfelt, når instruktionerne ikke er umiddelbart tydelige. Disse små detaljer vil få din formular til at føles professionel og gennemtænkt, samtidig med at de reducerer sandsynligheden for, at brugeren forlader den halvvejs. Gennemsigtighed skaber tillid.

10. Indsaml validering og feedback

Brugeroplevelse er kernen i godt mobil formular design. Og validering og feedback spiller en vigtig rolle i at levere en god UX. Validering lader folk vide, om de oplysninger, de har indtastet, er korrekte (eller ej). Bemærk de grønne flueben i formularfelterne nedenfor. Mens dine besøgende udfylder mobile formularer, vil de uundgåeligt begå fejl. Formularen bør markere disse fejl i realtid, så brugeren kan rette dem med det samme. For eksempel, hvis nogen indtaster den forkerte postnummer ved siden af deres gadenavn, bør den mobile formular vise en fejlmeddelelse. Denne bør angive – på et letforståeligt sprog – fejlens placering og hvordan personen kan rette den. Det er også afgørende at give folk feedback, mens de gennemgår formularen. For eksempel kan en statuslinje på lange, flertrins formularer gøre formularudfyldningsprocessen mere engagerende ved at vise brugerne, hvor langt de er nået, og hvor lang tid de har tilbage til at fuldføre den. Overvej en person, der udfylder ovenstående formular uden en statuslinje. De vil klikke på 'næste'-knappen uden at vide, hvornår formularen slutter, og kan endda opgive den lige før det sidste trin af frustration. Når folk har indsendt deres formularer, skal du omdirigere dem til en anden skærm eller side, der siger noget som "Succes!" eller "Tak", så de ved, at deres indsendelse virkede. Feedback forbedrer brugeroplevelsen.

11. Gør formularer tilgængelige

Tilgængelighed er grundlæggende for brugervenligheden af din formular. Formularer designet med tilgængelighed in mente kan bruges af en bredere vifte af mennesker, herunder dem med syns-, fysiske, sensoriske og kognitive handicap. Her er et par specifikke anbefalinger til at skabe tilgængelige formularer: Tjek, at teksten ikke pixelerer eller bliver uklar, når du zoomer ind på din formular (for bedre visualisering). Mærk dine formelementer på en måde, der kan forstås tydeligt, når den læses af en skærmlæser. Sørg for, at din formular er tilgængelig i både stående og liggende tilstand. Undgå tidsbegrænsninger (hvor det er muligt) for at give folk tilstrækkelig tid til at svare. Inkluder undertekster eller transskriptioner til eventuelle video- eller lydkomponenter i din formular. Hav farvekontrast i tankerne. Tjek, at din formular er fuldt ud brugbar med kun et tastatur. En god måde at sikre, at alle ovenstående strategier for mobil formular design holder, er ved at udforske, hvad du ikke bør gøre i formular design. En god formular er tilgængelig for alle.

Konklusion

Det er ingen hemmelighed, at dine hjemmesidebesøgende udfylder og indsender dine webformularer via deres mobile enheder. Det skyldes, at det er praktisk og effektivt, da de fleste mennesker bærer en form for mobil enhed med sig overalt, hvilket gør det afgørende, at dine formularer er mobilvenlige. Ellers vil dine formularer være svære at læse, udfylde og indsende, hvilket kan frustrere dine leads eller føre til, at du mister deres forretning helt. Ved at overveje dit mobil formular design og implementere disse retningslinjer vil du forbedre din mobile formular brugeroplevelse, opbygge positive relationer med dine leads og kunder og øge dine konverteringer. Et godt design er afgørende for succes.

Hvis du vil læse andre artikler, der ligner Optimer dine mobile formularer for bedre brugeroplevelse, kan du besøge kategorien Mobil.