10 tips för att utforma perfekta former

Denna artikel publicerades ursprungligen på onepixelout.com

Blanketter är portalen mellan användaren och systemet och är ofta i fokus på en webbsida. Logga in, registrera, uppdatera din status, ange betalningsinformation och leveransadress - alla dessa hanteras med hjälp av formulär. För webbplatser med e-handel kan väl utformade former göra stor skillnad.

Enligt min erfarenhet kan förbättra designen av en enda form till och med fördubbla försäljningen av en onlinebutik.

... och jag älskar att utforma former.

Eftersom formulär är en funktionell aspekt av användargränssnittet finns det några regler när det gäller att utforma dem. Idag ska vi titta på tips och bästa praxis när det gäller att få formulär för att göra allt benarbetet, så användaren behöver inte göra det.

1. Börja med ingångarna

Börja med det vanligaste formelementet: textinmatningsfältet. Det är den vanligaste komponenten i de flesta former, så ordna det och du är redan halvvägs dit.

Det finns tre grundelement i varje forminmatning: textfältet, etiketten och felmeddelandet. Oavsett vilket sätt du valde att designa detta mest grundläggande byggsten, se till att det alltid finns ett sätt för användaren att veta vilken information som behövs, och om det fanns ett fel - hur de kan återhämta sig från det felet. Vilket ger oss snyggt var man kan sätta etiketter.

Etiketter går på toppen

Trender kommer och går. Det finns en trend som lutar sig mot att använda platshållaren som etikett. Även om det inte nödvändigtvis är fel att använda platshållare för etiketter, presenterar de dock vissa UX-problem. Problemet med det är om användaren knackar på den, etiketten är borta. Om användaren återgår till det här formuläret och ingången är fokuserad på grund av ett fel, är också etiketten försvunnen.

Etiketter måste vara synliga hela tiden. Av denna anledning går etiketter på toppen.

Varför överst och inte till vänster om inmatningsfältet?

När etiketten är till vänster om fältet måste detta staplas en ovanpå den andra på mobilen. Tänk mobil först.

bild från giphy

Vägleda användaren att ange korrekt information med platshållare och använda etiketter för deras avsedda användning.

Det andra argumentet för att sätta etiketterna ovanför sina inmatningsfält är att läsaren har en linjär vertikal linje för att läsa informationen, vilket forskning har visat är snabbare än att hoppa från en vänster kolumn till en högra kolumn. Så gör saker enklare för din användare - en ren linje för dem att läsa de saker de behöver ange för att gå vidare med din webbplats.

2. Felstater och varningar

För varje standardinmatningsfält behöver du ett motsvarande felmeddelande. Här är några tips för att designa för felfallet:

Felmeddelandet kan komma från antingen klienten eller servern. Klientsidan kan upptäcka saker som när ett obligatoriskt fält inte är befolkat eller när en e-postadress är i fel format. Serversidan kan ta reda på om det finns en e-postadress för närvarande. Vet vilka som är klient och vilka som är server. Kundens sidfel bör ges till användaren innan formuläret har skickats in som tips. Fel på klientsidan bör hindra användaren från att skicka felaktig information.

Bli smart med felmeddelandena.

När en användare gör ett fel, ge dem information om vilket fält som orsakat felet. För säkerhet kanske vissa utvecklare inte vill ange vid inloggningen om e-postmeddelandet eller lösenordet är fel, och det är helt bra. Men när användaren helt enkelt registrerar sig för ett e-postmeddelande eller anger sin adress vid kassan, berätta för dem vilket fält som är fel och varför.

Varje gång du utformar textinmatningen bör du också ta hänsyn till hur felmeddelandet ser ut både före och efter att användaren träffar "Skicka".

Inkludera varningar

Om ett visst fält kräver vissa kriterier - till exempel måste ett lösenord ha ett visst antal tecken och kombinera både siffror och bokstäver, låt användaren veta det. Du kan inkludera sätt att visa hur starkt lösenordet är när de anger det. Det kan också vara användbart att visa om ett e-postmeddelande redan har registrerats eller om ett användarnamn redan har tagits.

3. Gruppera som med gilla

Visuellt ser formen snyggare ut när du grupperar med liknande, men ur användarupplevelsens synvinkel är det också bättre. Tänk på hur mobilanvändaren kommer att interagera med detta formulär. Om textinmatningsfältet är tillsammans måste användaren stanna kvar på tangentbordet för att fylla i fälten.

Om du ber användaren att växla från textinmatningsfält till dropdowns, till radio och tillbaka till textinmatningsfält, skiftar det mer från användarsidan. Tänk på hur användaren håller på sin mobila enhet och hur detta kan minska friktionen genom att gruppera liknande inmatningsfält.

4. Radioknappar, dropdowns och kryssrutor

Ibland kan det vara förvirring när det är dags att använda radioknappar, dropdowns och kryssrutor.

Radioknappar är ett bra sätt att visa användaren ett lågt antal möjliga svar. Som designer kan du välja ett svar eller lämna det tomt. Radioknappar är det bästa valet när bara ett alternativ kan väljas.

När det finns många möjliga svar, är en dropdown lämpligare (min tumregel är om det finns fler än 5 eller 6). Du kan förval välja ett svar eller lämna toppobjektet som "Please Select" för att instruera användaren att göra ett val.

Kryssrutor är det bästa valet när du har en enda ruta att kryssa för (till exempel villkor) eller om du har fler än ett möjligt val. Om du vill ta reda på vilka marknadsföringsmeddelanden du ska skicka en användare tillåter en grupp kryssrutor att göra mer än ett val.

Att använda kryssrutor istället för alternativknappar bör inte begränsa dig i dina beslut om användargränssnitt. Som designer har du mycket flexibilitet i hur dessa UI-element kan visas på skärmen. Om du fortfarande vill utforma kryssrutor så att de ser mer intressanta ut, borde detta inte påverka användarupplevelsen. I stället för att ha en lista med text bredvid en liten cirkel, kan du göra detta mer engagerande genom att designa bilder eller ikoner som kan väljas.

5. Om möjligt, eliminera valfält

Om affärsmålet är att få en användare att köpa något från din webbplats är ditt mål som designer att eliminera så mycket friktion som möjligt mellan kunden och systemet. Om du tar ut onödiga fält får formen att se ut som mindre arbete på användarens sida.

Detta är viktigt att veta när du utformar någon form av utcheckning eller leveransadressformulär. Om marknadsavdelningen vill ta reda på kundernas intressen så att de vet vilka marknadsföringsmeddelanden som de ska skicka kan det finnas andra sätt att hitta denna information efter att kunden har köpt sina varor (till exempel på sidan de besöker när de ”bekräftar sina e-post").

Leta alltid efter kreativa sätt att bara ha minst antalet fält synliga. Om ditt mål är att optimera för konvertering på en e-handelswebbplats, fokusera på att minimera antalet fält i formulärerna för leveransadress och kassa. Om du utformar ett gränssnitt för att boka flyg, visa användaren det minsta antal fält de behöver för att se tillgängliga flygningar. När din användare har investerat kan du börja ta reda på mer av den perifera informationen som de kan behöva - till exempel antal påsar etc.

6. Använd Auto-complete för längre fält

Fältet för gatunamn kan, beroende på gatans namn, ta mycket tid att skriva - särskilt på en mobil enhet. Det kan vara ännu svårare att skriva korrekt.

Du kan tänka på att integrera Google maps API för att göra gatunamnet automatiskt komplett. Detta innebär att användaren kanske bara måste skriva de första tecknen och välja rätt gata i listrutan med möjliga gatunamn. Det är till och med möjligt att automatiskt fylla postnumret också, bara genom att ha gatans namn, men vi diskuterar detta i nästa punkt.

7. Använd villkorlig logik

Det finns sätt att använda logik för att ange viss information på användarens vägnar, vilket gör deras liv bara lite lättare.

  • Om du känner till användarlandet kan designen förutbestämma ytterligare fält som de kan behöva ("ange" om de är i USA, "län" om de är i Irland osv.)
  • Du kan använda postnumret för att fylla namnet på staden, staten eller provinsen.
  • Om du har sitt land baserat på IP-adressen kan du fylla i landskoden i fältet telefonnummer?

Om du ska fylla fält på användarens vägnar, ge dem alltid ett sätt att redigera den här informationen. Det är möjligt att du inte har rätt.

Till exempel — Du kan använda Google Maps API för att få namnet på en tysk gata. Genom att känna till gatans namn kan du också få riktnummer. Vissa gator i Tyskland är dock tillräckligt stora för att spänna över olika områdeskoder, så informationen kommer att vara fel för ett litet antal kantfall. Ge alltid användaren möjlighet att redigera data vid behov.

Att utforska villkorad logik för varje land i världen skulle vara en enorm mängd arbete - så var smart med dina ansträngningar. Titta på de länder där du får flest order eller trafik och börja optimera för dem först. Om du ser en stark avkastning kan du fortsätta att implementera samma villkorade logik för fler länder.

8. Bli smart med platshållare

Tidigare talade vi om hur vi inte ska använda platshållare som textfältetikett, eftersom det kommer att försvinna när användaren tappar på det. Vi utforskade inte de andra sätten som platshållare kan göra användarupplevelsen bättre.

Platshållare erbjuder en snygg möjlighet att visa en användare hur man formaterar sin information. Telefonnummer är ett bra exempel. Bör användaren inkludera sin landskod? Eller riktnummer?

När du behöver ett telefonnummer i ett visst format, eller ett kreditkortsnummer för att inkludera streck, kan du informera användaren om denna information genom att tillhandahålla ett exempel i platshållaren. Detta är ett coolt sätt att minimera felen genom att tydligt säga att du behöver landskoder etc.

9. Kommunicera klart nästa steg

Få dina knappar att arbeta övertid genom att kommunicera vad som händer nästa. Om det finns ett ytterligare steg att slutföra, gör detta känt för användaren också.

I stället för att använda "Nästa" eller "Kassa" kan du säga "Granska order" eller "Betala nu med Paypal". Lägg till en annan kommunikationsnivå genom att specifikt berätta för användaren vad som kommer att hända när de trycker på den. Kommer den här knappen att slutföra deras beställning, eller kommer de ha tid att granska den? Kommer de att föras till en PayPal-inloggning?

Leta alltid efter sätt att få användaren att känna sig lugn under upplevelsen, särskilt om det påverkar deras banksaldo.

Jag blir fortfarande orolig varje gång jag använder Amazon-kassan eftersom de inte berättar för mig hela beloppet inklusive fraktavgiften förrän det sista steget. Var transparent med din användare. Kör förtroende genom att ge dem den information de behöver i varje steg och förklara tydligt vad de kan förvänta sig när de slår till en uppmaning.

10. Fortsätt leta efter sätt att optimera

När du startar din ljusa, blanka nya form - fortsätt titta på analysen. Om du hittar att ett stort antal människor studsar när de ser det, ta reda på varför. Gör användartest för att se var dina användare känner sig obekväma och arbeta för att ta bort den friktionen. Som designer är vårt arbete ofta aldrig "gjort".

Sammanfattningsvis

Blanketter är ibland inte så roliga att utforma, men när de görs bra kan de göra en stor skillnad för användarupplevelsen på en webbplats eller app. Designa dina formulär för att arbeta hårdare så att användaren inte behöver.

Kommunicera tydligt om uppmaningar, ge antydningar till användaren genom varningar och platshållare och erbjuda auto fullständig. Leta alltid efter nya sätt att göra mer av det tunga lyftet, så användaren får en friktion utan upplevelse.