codexier.

Design och UX

Designa långa formulär och ansökningar

Av CodexierPublicerad 4 min läsning

Långa formulär går inte att undvika i alla verksamheter: medlemsansökningar, skadeanmälningar, registrering av leverantörer, detaljerade offertförfrågningar, hälsodeklarationer. Det är också där många tänkbara kunder ger upp. Det goda är att längden sällan är det egentliga problemet. Folk överger formulär som känns meningslösa, tappar det de fyllt i eller straffar små misstag. Här går vi igenom designbesluten som gör ett långt formulär hanterbart, från att ifrågasätta varje fält till att förklara varför du frågar.

Ifrågasätt varje fält

Sätt dig med den som använder uppgifterna och gå igenom formuläret fält för fält. Fråga för varje fält: vilket beslut styr svaret, och behöver vi det nu? Fält som finns för att den gamla pappersblanketten hade dem, eller för att någon kanske vill ha uppgiften en dag, åker först. Enligt GDPR är uppgiftsminimering också en rättslig princip, så färre fält ger både mindre risk och mindre friktion.

Typ av fältBehåll, flytta eller ta bort
Behövs för beslut eller leverans nuBehåll
Behövs först efter godkännande eller köpFlytta till ett senare steg eller en uppföljning
Finns på annat håll, som företagsuppgifter via organisationsnumretHämta automatiskt
Bra att veta, ingen konkret användningTa bort

Steg och förloppsindikator

Att dela upp ett formulär i steg gör varje skärm lättare att klara och ger en känsla av framsteg. Gruppera frågorna efter ämne, som om dig, ditt företag, ditt ärende och granska. Lägg de lätta frågorna först för att få fart, och spara de mest krävande, som uppladdningar eller detaljerade beskrivningar, till slutet när engagemanget är större.

  • Visa stegens namn, inte bara nummer, så att man vet vad som väntar.
  • Gör förloppsindikatorn ärlig. Göm inte extra steg som dyker upp senare beroende på svaren.
  • Låt användaren gå tillbaka utan att tappa det som fyllts i.
  • Avsluta med en granskningsvy där varje svar går att ändra innan det skickas.

Spara och fortsätta senare

Långa formulär kräver ofta uppgifter man inte har till hands: ett fakturanummer, en kollegas godkännande, ett dokument att ladda upp. Om det innebär att allt försvinner när man går ifrån kommer många inte tillbaka. Spara utkast automatiskt medan användaren skriver. För inloggade användare sparas utkastet på servern; för anonyma kan ni erbjuda en länk via mejl för att fortsätta, eller använda BankID-inloggning när formuläret ändå kräver identifiering.

Säg tydligt att framstegen sparas och hur länge utkast finns kvar. Radera övergivna utkast efter en bestämd tid, eftersom de också innehåller personuppgifter.

Validering och fel

  • Validera ett fält när användaren lämnar det, inte vid varje tangenttryck och inte bara när formuläret skickas.
  • Acceptera vanliga format: personnummer med eller utan bindestreck, telefonnummer med mellanslag, postnummer med eller utan mellanrum.
  • Skriv felmeddelanden som säger vad man ska göra: ange organisationsnumret med tio siffror, inte ogiltig inmatning.
  • Placera felet vid fältet, och flytta fokus till första felet när formuläret skickas så att skärmläsaranvändare hittar det.
  • Töm aldrig formuläret på grund av ett fel.

Felmeddelanden är små texter med stor effekt. Vår guide om mikrotext för knappar och felmeddelanden har fler exempel, och tillgänglig felhantering ingår i att designa för WCAG 2.2.

Förklara varför du frågar

Folk tvekar inför frågor som känns närgångna: inkomst, hälsa, personnummer, varför man lämnar sin nuvarande leverantör. En kort hjälptext om varför ni frågar och hur svaret används tar ofta bort tvekan. Den hjälper er också att uppfylla GDPR:s krav på information precis där uppgifterna samlas in. Kan du inte skriva ett övertygande skäl borde frågan troligen inte finnas där.

En designsprint är ett bra format för att göra om ett viktigt formulär: kartlägg det, ta fram en prototyp och testa den med riktiga användare inom en kort, fast period. Priserna finns på prissidan. När du inte ska köpa av oss: har formuläret ett fåtal fält och folk fyller i det, behövs ingen sprint; använd checklistan ovan själv. Är du osäker ger ett kostnadsfritt samtal besked.

Vanliga frågor

Är en lång sida bättre än flera steg?

För korta formulär fungerar en sida bra. För långa fungerar steg oftast bättre, eftersom varje skärm känns överkomlig och framstegen syns. Viktigast är att gruppera frågor som hör ihop och låta användaren röra sig fritt fram och tillbaka.

Ska vi använda BankID i formulär?

När ni ändå behöver styrka identitet eller samla in personnummer kan BankID förifylla namn och nummer och minska felen. För enkla förfrågningar blir det ett onödigt steg.

Hur ser vi var folk ger upp?

Mät varje steg som en händelse i analysverktyget och se var tappet är störst. Kombinera det med några användartester där du ser personer fylla i formuläret.

Är frivilliga fält en bra idé?

Sparsamt. Varje frivilligt fält kostar ändå uppmärksamhet. Är ett fält verkligen frivilligt, fråga dig om det behövs alls, och markera de frivilliga fälten i stället för de obligatoriska när de flesta är obligatoriska.

Tappar ni sökande eller kunder i ett långt formulär?

Skicka formuläret och berätta var folk hoppar av. På femton minuter pekar vi ut de största problemen och säger om en designsprint vore värd det.

Boka ett kostnadsfritt 15-minuterssamtal