Boosta din loginsida med hjälp av UX design

Hur kan du enklast boosta din loginsida? Formulär för login på en hemsida eller app känns kanske rätt så standard idag. Men dyker vi lite djupare på ämnet kan vi snabbt identifiera stora skillnader i detaljerna.
För att säkerställa att din användarupplevelse är sömlös redan från början bör du designa dina loginformulär så de är så genomtänkta som möjligt. "Hur svårt kan det vara att designa ett loginformulär?" Ja det kan man ju fråga sig, och det är en fråga jag får av mina kunder ibland också. Om den frågan någonsin har flugit genom ditt huvud skulle du nog också bli förvånad över hur många små detaljer kan ge negativa intryck hos dina användare. Eller, åt andra hållet, höja konverteringarna på din hemsida eller produkt. För om du tänker på det, så är loginformuläret porten mellan dina kunder och dina produkter. Och jag tror att vi alla vid det här laget vet att det första intrycket spelar roll! Därför kommer du älska denna artikeln som tar dig igenom hur du boostar din loginsida med hjälp av UX design!

Så hur enkelt det än må låta, så är det oerhört viktigt att designa en bra användarupplevelse för kunderna när de ska logga in. Men för att göra detta tydligare tänkte jag att vi kan kika på lite olika varianter så ska jag också förklara varför jag anser att de riskerar att få negativa reaktioner från sina användare.

Loginmodul

Dribbbles loginmodul ser väldigt trevlig ut vid första anblick. Men den har flera tekniska begränsningar och brister.

En loginmodul kan se väldigt trevlig ut. Men de kommer med flertalet tekniska begränsningar och brister i designen. Den största nackdelen är att det inte är möjligt att länka direkt till inloggningen, vilket kan vara ett stort problem för din kundsupport. Nu måste de, istället för att skicka en länk till användaren, guida dom steg för steg bara för att ta dom till inloggningen.

Det kommer också skapa ett problem för ditt marknadsteam eftersom de inte kommer kunna spåra hur många användare som besöker loginsidan. Vi kan alltså inte veta hur många som "vänder i dörren". Ett annat problem är marknadskampanjer där syftet är att få användarna att skapa ett konto. Åter igen, det går inte att länka direkt till inloggningen. Man tvingas då antingen skicka potentiella kunder till startsidan istället. Eller sätta upp en separat inloggningssida enbart i kampanjsyfte. Grattis, du måste nu administrera två olika login som utför samma uppgift men nås på olika sätt.

Flerstegsraketen är helt idiotisk

På Shopify måste du först skriva in adressen till din butik.

För att i steg 2 fylla i epost och lösenord.

 

Jag förstår verkligen inte varför vissa produkter (och designers!?!) fortfarande gör detta. Det är väldigt irriterande att behöva ta sig igenom ett flerstegsformulär. Den vanligaste förklaringen jag får är att man inte vill överösa kunden med all information och alla frågor på en gång. Men allvarligt? Lägg av! Om 2-3 fält får era kunder att känna sig överösta med information, hur hanterade de då er massiva startsida med all information om era tjänster och produkter?

Denna logik kan vara (helst inte) ok att använda vid exempelvis en utcheckning av varor i en e-handel. Där man måste avklara frakt, betalsätt, leveransadress osv. Men även där är det väldigt sällan befogat att använda sig av en flerstegsraket. Så om ni befinner er där, revidera, omgående!

Tydlighet, tydlighet, tydlighet!

Vid första anblick, kan du se skillnaden på "sign up" och "sign in" ?

Har du någon gång klickat på fel länk, bara för att den var lik den länk du tänkt klicka på? Det är väldigt lätt att blanda ihop "sign in" och "sign up". Texterna är nästan identiska, samma längd och placerade intill varandra. Idag när allt ska gå så snabbt vore det knappast konstigt om flertalet av besökarna klickade fel här med jämna mellanrum. Att ersätta "sign in" med "Login" skulle skapa den skillnaden som behövs för att få två tydliga alternativ.

Vad som händer om en stressad besökare klickar fel, och påbörjar en registrering när de egentligen hade som syfte att logga in? Båda formulären ser i skrivande stund rätt lika ut (e-post och lösenord). När kunden upptäcker detta, och inser att hen måste börja om, skapas irritation, frustration, besvikelse. Känslor vi absolut inte vill associera med vårt företag.

Undvik onödiga negativa känslor genom att vara tydlig. Kunderna har inget emot det, tvärtom.

Så kan sociala inlogg boosta din loginsida

Airbnb har ett enkelt men väldigt effektivt user interface

Det är väl lika bra att vi inser det med en gång (om du inte redan har gjort det). Människor blir latare för var dag som går. Och i samma takt kommer tjänster och produkter som tar hand om alla våra problem och göromål. Det vi ännu inte löst är den efterlängtade "gå till jobbet och gör jobbet åt mig"-appen. Men den kommer väl också snart. Annars kan vi beställa både mat, taxi, besöka läkare, gå till veterinären osv, från vår egen soffa. Vi behöver inte ens gå utanför dörren. Dessa beteenden kan vi också se när vi kikar på inloggningsformulär och insikten om att majoriteten av användarna hellre använder sig av sin facebook-inloggning eller sitt google konto, snarare än att behöva fylla i sina uppgifter på nytt och komma ihåg ännu ett omöjligt lösenord.

Så även om det har surrats en hel del kring datalagring i sociala nätverk senaste året, är det kanske ändå inte helt galet att använda sociala login för er hemsida eller app? Vi är trots allt mer benägna att undvika onödigt skrivande än vi oroar oss för vart vår information hamnar.

CAPS LOCK ÄR AKTIVERAT

Det är enkelt att undvika frustration

Den personen som först kom att tänka på detta är ett geni. Hur många gånger har vi inte blivit frustrerade, galna, tokarga, för att vi inte lyckats logga in. Fast vi vet vilket användarnamn och lösenord vi har, så får vi ändå ett felmeddelande. Först när vi är redo att slita av oss håret ser vi att "ah, capslock är påslaget". Genom att visa ut valideringen direkt och berätta att användarens capslock är aktiv sparar vi både tid och undviker negativa känslor som kopplas till vårt varumärke.

En annan, nästan lika bra lösning, är ett "visa lösenord" alternativ. På så vis kan användaren dubbelkolla att de skrivit rätt. Detta är en passiv lösning som väntar på att användaren ska aktivera den. Därför är det inte en lika bra lösning som den första, som direkt och på ett tydligt sätt visar ut vad som blivit tokigt.

Boosta din loginsida med direktvalidering

Mailchimps design för att skapa ett konto.

Jag älskar verkligen hur Mailchimp har designat sin inloggning. Genom att visa ut alla kraven tydligt, och sen låta dessa försvinna när du uppfyller riktlinjerna. Det inte bara minskar risken att användaren gör fel, det skapar också ett element av "gamification" i själva skapandet av kontot. Användaren känner sig belönad när hen har mött alla kriterier. Det är ett av de absolut enklaste sätten för att boosta din loginsida.

Jag har sett många andra liknande lösningar där valideringen visas först när du fyller i ett fällt. Det är också en bra och tydlig lösning.

Den i mitt tycke sämsta lösningen däremot är när jag får ett felmeddelande först efter att jag tryckt på knappen. "ditt lösenord måste vara minst 8 tecken långt", ja men tack för den, kunde du inte sagt det tidigare så jag slapp slösa tid? Det är alltid en bättre lösning att säkerställa att användaren har all information de behöver i tid. Ännu viktigare blir det eftersom olika hemsidor och produkter har olika krav på sina lösenord etc. Det kommer inte få användaren att älska din inloggning, men det kommer inte heller skapa några negativa känslor. Vilket är en enormt stor vinst.

Boosta din loginsida genom att komma ihåg dina användare

Googles loginsida

Det är alltid possitivt att bli ihågkommen av någon. Det boostar din självkänsla och ger en varm magkänsla. Google skapade just den känslan på sin loginsida. Och som användare känns det väldigt skönt att inte behöva skriva in mina uppgifter varje gång jag loggar in på google.

Detta är också en bra lösning om användaren vill förbli inloggad. Men av säkerhetsskäl rekommenderar jag alltid att det skapas en tidsgräns för när en automatisk utloggning sker. För att förhindra obehöriga från att komma åt kontot.

Sammanfattning

Inloggningsformulär kan se enkla ut på ytan, men gräver du lite djupare märker du snabbt att det finns mycket att tänka på och ta hänsyn till. Små detaljer kan göra stor skillnad, både för användarna och i marknadssyfte. Jag hoppas du haft stor nytta och glädje av artikeln. Kanske hjälpte den dig ta ett beslut kring ett formulär du designar just nu?

Läs gärna mer om våra tjänster. Om du vill sammarbeta, snacka UX & UI Design, undrar något, eller kanske bara vill snacka lite, skicka ett mail till bjorn@pixelpappa.com