To ud af tre formularindsendelser sker nu på en telefon. Alligevel designer de fleste hjemmesider deres formularer på en computer og presser dem så ind på en mobilskærm. Resultatet: formularer, der er irriterende at udfylde, oftere bliver droppet og gør færre besøgende til kunder.
Formulardesign til mobil handler ikke om at gøre formularer til computer mindre. Det handler om at tænke hele oplevelsen forfra for en person, der holder en skærm på 6 tommer, bruger sin tommelfinger og sidder i en rystende bus eller en travl café. Alt ændrer sig. Pladsen bliver mindre. Trykfladerne skal være større. Tastaturet popper op og skjuler halvdelen af formularen. Den besøgende bliver afbrudt og går.
Formulardesign til mobil først betyder, at du optimerer hver detalje i en formular til den måde, folk faktisk bruger telefoner på. Dette kapitel gennemgår de konkrete ændringer, der mindsker afbrud, gør det hurtigere at gennemføre og gør flere besøgende på mobil til leads eller kunder.
Formularer på mobil, der er designet til computer, mister kunder
Se, hvad der sker, når nogen åbner en formular på telefonen i stedet for på en computer. Brugeren på telefonen har mindre plads på skærmen, mindre tålmodighed og flere forstyrrelser. De jonglerer med flere ting. Deres opmærksomhed er splittet. Én akavet interaktion, og de går.
Tallene bekræfter det. Formularer med dårligt design til mobil har afbrud, der ligger 20-40 procentpoint højere end på computer. Et enkelt dårligt placeret felt kan udløse en bølge af frafald. En lille knap, der er svær at ramme, skaber friktion, der ganges op over tusindvis af indsendelser.
Men det her overser de fleste: At optimere til mobil sinker ikke brugere på computer. En formular, der er designet til mobil først og så forbedret til større skærme, virker faktisk bedre for alle. Mere kompakte layouts. Bedre afstand. Tydeligere hierarki. Det er ikke kompromiser for mobil. Det er forbedringer af designet.
Udfordringen i formulardesign til mobil: Hvad er egentlig anderledes
Formularer på mobil har begrænsninger, som formularer på computer ikke har. Når du forstår, hvad der ændrer sig, kan du designe klogere:
Pladsen på skærmen er begrænset
En telefonskærm viser omkring 30-40 % af det indhold, en computerskærm kan vise på én gang. Hvert element fylder fysisk. Ekstra etiketter, anvisninger, hints og formularfelter konkurrerer alle om den samme lille plads. Tastaturet dukker op og gør den ledige plads endnu mindre. Lange afsnit med vejledning forsvinder ud af skærmen.
Fingre er større og mindre præcise end en mus
En finger er 40-50 pixel bred. En musemarkør er 1 pixel. Det betyder, at knapper, afkrydsningsfelter, radioknapper og links skal være markant større på mobil for at være lette at ramme. De standardstørrelser, Apple og Google anbefaler, er mindst 44x44 pixel. Er de for små, rammer brugerne ved siden af, bliver frustrerede og dropper formularen.
Tastaturer tager kontrollen
På mobil glider tastaturet op og dækker halvdelen af skærmen, når en bruger trykker på et formularfelt. Nogle felter åbner forskellige tastaturer: felter til e-mail viser @-tegnet, felter til tal skjuler bogstaver, og felter til datoer åbner en kalender. Hver type tastatur ændrer, hvad brugeren ser, og hvordan de bruger det. Design til hver især.
Situationen skifter hele tiden
Brugere på computer sætter sig ned og udfylder en formular uden afbrydelser. Brugere på mobil udfylder formularer i toget, i butikker og mellem andre apps. De får en notifikation, skifter app og kommer tilbage fem minutter senere. Det føles, som om der er uendeligt at rulle. Formularens felter flyder sammen. Ethvert trin, der kræver hukommelse eller skift mellem situationer, får folk til at holde op.
Én hånd styrer enheden
De fleste, der bruger telefon, holder den i én hånd og navigerer med tommelfingeren. Knapper nederst til højre er lette at nå. Knapper øverst i en høj formular kræver en anden hånd eller en akavet strækning. Etiketter til venstre for felter er sværere at læse, mens tommelfingeren holdes på plads. Design til betjening med én hånd.
Regel 1: Spørg om færre felter
Hvert felt, du spørger om, er endnu et tryk, endnu et valg, endnu en chance for, at nogen går. Formularen behøver ikke alt. Den behøver kun det, du faktisk bruger til at følge op.
Se på dine faktiske brugssituationer. En kontaktformular behøver sjældent mellemnavne, firmaets størrelse eller branche ved første indsendelse. En bookingformular behøver ikke kundens mors pigenavn. En tilmelding til nyhedsbrev behøver ikke postnummer den første dag. Du kan spørge om mere senere, når du allerede har skabt tillid.
En stor rejseside testede princippet og sparede 12 millioner $ om året ved at fjerne valgfrie felter fra bookingformularen. Brugerne gennemførte flere formularer. Der skete flere konverteringer. Forenklingen betalte sig.
Start med det absolutte minimum. På mobil er reglen strengere: Hvis du ikke har brug for det for at gennemføre kernen af handlingen, så fjern det. Prøv at fjerne felterne et efter et, og se, om flere gennemfører.
Regel 2: Stil felterne i én kolonne
Layouts med to kolonner på mobil er en fejl. De kræver rulning til siden, skaber et forvirrende visuelt hierarki og spilder plads på bredden. Én kolonne stillet lodret er hurtigst at skimme og udfylde.
Hvert felt fylder hele bredden. Etiketter står over feltet og ikke ved siden af. Brugeren ruller ned, læser etiketten, trykker på feltet, skriver og går videre til det næste. Forløbet er lineært. Den mentale belastning er lav.
Stå imod fristelsen til at sætte for- og efternavn side om side eller adresse og postnummer på samme linje. Lodret stabling er langsommere på computer, ja. Men mobil er to tredjedele af din trafik. Optimér til flertallet.
Regel 3: Gør trykflader store nok til, at man rammer dem sikkert
Knapper skal være mindst 44x44 pixel. Afkrydsningsfelter og radioknapper skal være mindst 40x40 pixel. Små knapper tvinger brugerne til at sigte omhyggeligt eller trykke flere gange. Frustrationen vokser. De går.
Læg mærke til din egen brug af telefonen i en dag. Se, hvor mange tryk der rammer forkert. Selv erfarne brugere rammer ved siden af. Design til de fejltryk, der følger med menneskers fingre.
Afstanden mellem trykflader har også betydning. Hvis en ja-knap står lige ved siden af en nej-knap, rammer brugerne den forkerte. Tilføj 10-15 pixel luft mellem elementer, man kan trykke på.
Regel 4: Sæt etiketter over felterne og ikke inde i dem
Pladsholdertekst inde i felter forsvinder, så snart brugeren begynder at skrive. De glemmer, hvad feltet var til. Så laver de en fejl, ser en fejlmeddelelse og ved ikke, hvad der skal rettes.
Etiketter skal stå uden for og over feltet. Tydelige, synlige, altid til stede. Når brugeren trykker på feltet, og tastaturet dukker op, bliver etiketten stående og minder dem om, hvad de skriver.
En etiket inde i et felt er bare en lille lettelse for designeren. Den sparer et par pixel. Den koster dig konverteringer.
Regel 5: Vælg den rette felttype til tastaturet på mobil
Forskellige felttyper åbner forskellige tastaturer på mobile enheder. Brug dem til at gøre indtastning hurtigere og mere præcis:
E-mailadresser
Brug `type="email"` for at åbne et tastatur med @-tegnet og tasterne .com/.org synlige. Brugerne skal ikke lede efter specialtegn. Kontrollen sker også automatisk.
Telefonnumre
Brug `type="tel"` for at vise et tastatur med tal. Spring den smarte formatering over, der deler feltet op i segmenter med (områdenummer) og nummer. Brugerne kæmper med faste opdelinger og sletter tilbage i den forkerte del. Ét enkelt telefonfelt, der tager imod cifre og mellemrum, er hurtigere.
Tal og antal
Brug `type="number"` for kun at vise tal på tastaturet. Skjul bogstaverne. Nogle talfelter skal have decimaler. Brug `inputmode="decimal"` for at tillade dem.
Datoer
Brug `type="date"` for at åbne en indbygget datovælger i stedet for at bede brugerne skrive 15/03/2026. Kalenderen er hurtigere, giver færre fejl og føles som en del af telefonen.
URL'er
Brug `type="url"` for at vise et tastatur med skråstreg og tasten .com. Brugerne kan skrive en webadresse uden at lede efter specialtegn.
Hver felttype fortæller browseren på mobilen, hvilke data du forventer. Browseren tilpasser så tastaturet. Du behøver ikke forklare formatet. Tastaturet gør arbejdet.
Regel 6: Skriv tydelige fejlmeddelelser, der vises i realtid
Når nogen udfylder en formular på mobil og trykker på send, bare for at se "Ugyldig e-mailadresse", har de allerede glemt, hvad de skrev. De ved ikke, hvilket felt der gav fejlen. På en lille skærm kan fejlmeddelelsen stå under nederste kant. De må rulle op igen.
Kontroller i stedet felterne, mens brugeren udfylder dem. Så snart de går videre til næste felt, tjekker du det, de lige har forladt. Hvis der er en fejl, så vis den med det samme lige under det felt. De ser problemet, mens situationen stadig er i hovedet på dem.
Fejlmeddelelser skal være tydelige. FORKERT: "Ugyldig indtastning." RIGTIGT: "E-mailadressen skal have et @-tegn." Brugeren ved præcis, hvordan det rettes.
Undgå kun at bruge rød farve til at vise fejl. Farveblinde brugere overser den. Brug rød plus et ikon eller en tekst. "Fejl: Dette felt er obligatorisk."
Regel 7: Optimér knapper til brug på mobil
Send-knapper skal være store, tydeligt trykbare og placeret, hvor en tommelfinger naturligt hviler. En tekst på 16 pixel i en knap på 44 pixels højde er let at ramme. En tekst på 14 pixel i en knap på 32 pixel er et fejltryk, der venter på at ske.
Knappens bredde skal dække det meste af skærmens bredde og ikke presses ind i en smal kolonne. Knapper i fuld bredde på mobil mindsker den mentale belastning ved "hvor klikker jeg næste gang".
Undgå mindre vigtige knapper på samme skærm, medmindre det er helt nødvendigt. For mange knapper gør det svært at vælge. Én hovedhandling pr. skærm er reglen for mobil først.
Regel 8: Brug indikatorer for fremdrift i formularer med flere trin
Hvis din formular strækker sig over flere skærme, så vis en statuslinje øverst. "Trin 1 af 3" fortæller brugeren, hvad de kan forvente. De ved, at de ikke udfylder en uendelig formular. De kan se målstregen.
Hvert trin skal tage sig af én logisk bid information. Smid ikke fem forskellige emner ind på trin ét. Del dem op. Lad brugerne mærke fremdrift, mens de går igennem.
Lad brugerne gå tilbage og rette tidligere trin. De skal ikke føle sig låst fast. Brugere på mobil er hurtigt væk igen. En udvej mindsker uroen.
Regel 9: Sørg for, at din formular virker med tastaturer og afbrydelser på mobil
Tastaturet popper op og skjuler din formular. Brugeren ruller for at se næste felt. Godt. Nu kommer der en notifikation, og tastaturet lukker. Formularen er synlig, men brugeren har glemt, hvad de udfyldte. Dårligt.
Test din formular på en rigtig telefon og et rigtigt tastatur. Se, hvor meget af formularen der forsvinder, når tastaturet dukker op. Hvis et felt er helt skjult, kan det ikke bruges. Lav layoutet om, så det aktive felt forbliver synligt med tastaturet åbent.
Gem fremdriften i formularen, mens brugeren udfylder hvert felt. Hvis de skifter app, eller formularen ved et uheld lukkes, bliver deres data bevaret. Når de kommer tilbage, er formularen præcis, som de forlod den. Det fjerner en stor kilde til afbrud.
Regel 10: Brug autoudfyldning og forhåndsudfyldning for at gøre det hurtigere
Mobiltelefoner gemmer kontaktoplysninger, e-mailadresser, navne og betalingsoplysninger. Når din formular bruger standardnavne til felter og HTML-egenskaber, kan browseren udfylde dem automatisk. Et felt til telefonnummer med `autocomplete="tel"` viser gemte telefonnumre som forslag.
Forhåndsudfyldning af felter med data, du allerede kender, er endnu stærkere. Hvis nogen logger ind og starter en formular, er deres e-mail allerede udfyldt. Deres adresse er allerede udfyldt. De skriver kun det, der er nyt. Gennemførelsen stiger, når brugerne ikke skal skrive oplysninger igen, som du allerede har.
Autoudfyldning og forhåndsudfyldning er ikke snyd. De respekterer brugerens tid. De mindsker indtastning. De mindsker fejl. De øger gennemførelsen.
Regel 11: Test på rigtige telefoner med rigtige brugere
Browsere til computer har emulering af enheder. Den efterligner en telefonskærm. Den er nyttig til hurtige tjek. Men den efterligner ikke den rigtige oplevelse på mobil. Tastaturet virker ikke på samme måde. Det føles ikke, som at rulle. Trykfladerne kræver ikke din rigtige tommelfinger.
Test din formular på rigtige telefoner. Bed en kollega om at udfylde den. Se, hvor de tøver. Se, hvor de laver fejl. Se, hvor de dropper den. De rigtige data fortæller dig mere end enhver tjekliste.
Almindelige fejl i formularer på mobil er svære at få øje på uden test. En knap, der ser stor ud i en emulator på computer, kan være for lille på en rigtig telefon i skarpt sollys. Etiketter, der ser tydelige ud i en skitse, kan være svære at læse i den vinkel, man holder en telefon. Kun rigtig test afslører de problemer.
Sådan hjælper WEMASY med formulardesign til mobil
WEMASYs formularbygger har design til mobil først som standard. Formularer stables automatisk i én kolonne på mobil. Trykfladerne har den rette størrelse. Etiketter forbliver synlige, mens brugerne udfylder felter. Tastaturet på mobil er optimeret til hver felttype.
Indbygget kontrol af formularer sker i realtid og ikke efter indsendelsen. Indikatorer for fremdrift vises i formularer med flere trin. Svar i formularer gemmes automatisk, så brugerne aldrig mister deres fremdrift. Analyse følger, hvilke felter der giver flest afbrud, så du kan optimere de største steder med friktion.
Se hvad der er med i hver WEMASY-plan, og hvordan formularbyggeren passer til dit arbejde.