allt
Företag
datavetenskap
design
utveckling
vår resa
Strategimönster
Tack! Din inlämning har mottagits!
Hoppsan! Något gick fel när du skickade in formuläret.
Tack! Din inlämning har mottagits!
Hoppsan! Något gick fel när du skickade in formuläret.
Alexandra Mendes
Joana Eitner

15 april 2024

Min läsning

12 kraftfulla tips för registrering och inloggningssida design

När du utformar en registrerings- eller inloggningssida måste du överväga det ur användarens synvinkel. Användare har en onboarding-upplevelse på registrerings- och inloggningssidor, så du vill se till att de inte känner sig förvirrade eller frustrerade.


Således är en väldesignad inloggningssida nyckeln till din webbplats UX-process. Det hjälper till att locka besökare till din webbplats och omvandlar besökare till leads, och att ha en vänlig portal är viktigt. Detta belyser nödvändigheten av en enkel inloggningssida som inte överväldigar användare och låter dem logga in i bara några steg.


Vår erfarenhet av 12 års erfarenhet av att skapa webbplatser för branschledare gör att vi kan ge rekommendationer. Vi är stolta över att skapa webbplatser som ser bra ut och fungerar bra. Därför kommer vi att diskutera de bästa strategierna och exemplen på utmärkt design av registrerings- och inloggningssidor - och ge bra exempel för att inspirera dig.

blå pil till vänster
Imaginary Cloud-logotyp

Gör det uppenbart

Gör det klart var inloggningsområdet är. Om användaren måste söka efter inloggningsområdet blir de frustrerade och mindre benägna att registrera sig.

Gmail's login page

blå pil till vänster
Imaginary Cloud-logotyp

Möjlighet att registrera sig med sociala mediekonton - ett klick

Att registrera sig för en ny applikation med befintliga sociala mediekonton blir populärt bland användare. Denna process är snabb och effektiv, eftersom det inte finns något behov av att skapa ett nytt konto och tillhandahålla all information från grunden.

Egentligen 86% av användarna är ofta irriterade av behovet av att skapa nya konton på webbplatser, och 88% använder sociala medier för att logga in. Så när användare bara behöver klicka på en registreringsknapp för sociala medier för att komma in i applikationen känner de sig mer bekväma. Det kommer också att göra registreringsprocessen mer social och engagerande, vilket gör det mer troligt för nya användare att dela din webbplats med sina vänner och kollegor.

Att logga in med ett socialt mediekonto är också en fördel för företaget eftersom det i de flesta fall kommer att ha tillgång till mer information som sociala medier ger om användaren - demografi, intressen, beteenden etc.


Genom att kartlägga sina användare, a företaget upptäckte vilka sociala medieplattformar som är mest populära att registrera sig för. Enligt deras statistik föredrar användarna Google (70,97%), följt av Facebook (19,69%) och sedan Twitter (9,32%).


Betyder det att användarna ska använda Google eller Facebook? Det beror på ditt mål. Men dina användare loggar vanligtvis in med det sociala de bryr sig mindre om på grund av säkerhetsproblem, till exempel Gmail eller Facebook.


Medium's login page
Mediums inloggningssida.

Undvik att be om lösenordsbekräftelse

Webbplatser ber ofta användare att bekräfta sitt lösenord när de loggar in. Denna säkerhetsåtgärd har blivit standardpraxis sedan de första dataintrången rapporterades, och fältet Bekräfta lösenord hjälper användare att undvika felstavning av sina lösenord när de registrerar sig för appen.

Även om det är vettigt att webbplatser vill göra detta, är det kontraproduktivt. Lösenordsbekräftelse skapar en falsk känsla av säkerhet. I den här processen måste du först ange ett lösenord två gånger om det inte matchar systemets krav.

Användaren kan dock inte se eller hitta felet. På grund av detta bör de ta bort båda lösenorden och skriva dem igen utan någon aning. Som ett resultat kommer användarnas frustration att öka.


Att tillhandahålla alternativet Visa lösenord med fältet Lösenord är en bättre lösning som är både snabb och effektiv. Användarna kan klicka på alternativet och se lösenordet de anger, vilket gör omedelbara korrigeringar enkla.

Ikea's login page
IKEAs inloggningssida.
blå pil till vänster
Imaginary Cloud-logotyp

Signalera alternativet caps lock

Användare kan skriva ett felaktigt lösenord om de inte känner till om Caps Lock-tangenten är på eller av. Detta kommer att resultera i ett fel när appens eller webbplatsens inställda lösenord inte matchar när en användare loggar in. Så du bör se till att du meddelar användare när de anger lösenord i inmatningsfältet för att undvika oväntade fel när du återanvänder lösenordet.

GitHub's login page
GitHubs inloggningssida.

blå pil till vänster
Imaginary Cloud-logotyp

Var konsekvent med dina ord

I hela världen verkar den vanligaste frasen vara ”logga in”, enligt Google Trends. Även om ”logga in”, ”logga in”, ”logga in” och ”logga in” är synonymer, verkar ”logga in” vara den mest populära termen.

Det som är viktigt ur ett UX-perspektiv är att du väljer samma term på varje plats. Du bör inte använda ”logga in” på ett ställe och ”logga in” på ett annat, till exempel. Men om du använder ”logga in” bör du använda ”logga ut” istället för ”logga ut”.


Det kan verka som en liten detalj, men det är viktigt att upprätthålla konsistens på hela din webbplats eller app. Detta hjälper besökarna att känna sig mer lugna och mindre förvirrade när de använder din produkt.

The Washington Post's login page
blå pil till vänster
Imaginary Cloud-logotyp

Omedelbar inmatningsvalidering krävs

Att använda inmatningsvalidering på dina registrerings- och inloggningssidor förbättrar deras användbarhet. Valideringen underlättar registreringsprocessen, förhindrar fel och känner igen och korrigerar snabbt feedbacken, med vetskap om att inmatningen är korrekt.

Tänk på några kritiska faktorer när du erbjuder användbar omedelbar validering. Inkludera ett användbart felmeddelande som förklarar problemet och hur du åtgärdar det och hjälper användaren att bygga förtroende för din produkt. Och visa bara meddelandet när användaren nyligen har lämnat inmatningsfältet.

Men tänk på att vi vill hjälpa användaren så mycket som möjligt. Vi måste komma ihåg att allt som hjälper användarna också hjälper hackare. Till exempel: När ett lösenord och ett e-postmeddelande inte matchar, skulle det vara mer fördelaktigt för användaren att visa något som ”Fel e-post” eller ”Fel lösenord” eftersom han skulle veta vilket fält som är felaktigt.

Å andra sidan skulle detta också ta bort 50% av en hackers arbete eftersom han vet att det här e-postmeddelandet har ett konto på den webbplatsen och bara behöver ändra lösenordsfältet. På grund av detta skulle ett meddelande som ”Ogiltig kombination” vara att föredra eftersom det inte ger bort någon information till hackare men ändå informerar användaren om vad som händer och varför han inte kunde logga in.

Också, gör registreringsprocessen enklare genom att bara be om nödvändig information. Allt som inte är nödvändigt för att skapa konto bör gå till onboarding i appen, där användaren kan lägga till mer personlig information för att anpassa plattformen efter sina behov. Genom att göra detta undviker vi att sänka priserna på grund av alltför komplexa processer. Du vill inte frustrera användare med en lång, tråkig form där de måste spendera en massa tid på att välja vad de inte behöver.

Evernote's login page
Evernotes inloggningssida.

UX Audit

Användare behöver veta lösenordskrav

Antag aldrig att användare är medvetna om starka lösenordsregler. Kräv lösenord nära kontrollen så att användarna kan se dem.

Dölj inte lösenordskraven i standardvyn; visa dem bara när användaren anger ett svagt lösenord. Förutom att slösa bort användarnas tid kommer detta också att minska deras förtroende för din produkt.

AirBnB's login page
blå pil till vänster
Imaginary Cloud-logotyp

Knappetiketter ska relatera till den utförda åtgärden

Om det finns flera registreringsalternativ, se till att knappens etikett tydligt anger vilket alternativ användaren väljer. Detta eliminerar förvirring och hjälper användare att gå igenom registreringsprocessen snabbare. Låt oss till exempel säga att du har två olika planer: den grundläggande och proffsplanen. Om du har två registreringsalternativ, ett för grundplanen och ett för pro-planen, se till att du utan tvekan anger vilket alternativ användaren väljer.

AWWWARDS's login page
AWWWARDS inloggningssida.
blå pil till vänster
Imaginary Cloud-logotyp

Växla mellan inloggnings- och registreringslägen

Du vill att användarna ska veta vart de ska gå om de vill registrera sig eller logga in på din webbplats. Det är inte roligt om en användare inte kan hitta registrerings- eller inloggningsknappen på en webbsida.

Du kan använda olika färger, layouter och kopior för att skilja dina inloggningsfält från dina registreringsfält.

Diprella's login page
blå pil till vänster
Imaginary Cloud-logotyp

Istället för att använda ett användarnamn, använd e-post

Låt din användare registrera sig med sin e-postadress eller telefonnummer istället för ett användarnamn. Användare måste ibland ge upp att välja ett unikt användarnamn om ett inte är tillgängligt, vilket gör det utmanande att komma ihåg användarnamn för flera webbplatser.

Det är bättre att be om registreringsuppgifter snarare än användarnamn för att spara dem besväret med att komma med och komma ihåg en, vilket gör inloggningsprocessen mycket enklare.

Detta ger dig också ett sätt att kontakta användaren om det behövs vilket kan vara mycket användbart för ditt företag:

1. Marknadsföringsändamål: Om du vill skicka ut meddelanden eller till och med en kampanj.

2. Kundtjänst och supportteam: Om du märker att användaren inte interagerar med din produkt har du en andra kontaktpunkt för att kommunicera med användaren direkt och försöka vinna honom tillbaka.

LinkedIn's login page
LinkedIns inloggningssida.
blå pil till vänster
Imaginary Cloud-logotyp

Tillåt enkel lösenordsåterställning

Det är också viktigt att tillhandahålla en enkel lösenordsåterställningsprocess. Användare kommer oundvikligen att glömma sina lösenord eller få dem hackade, och du vill göra det enkelt för dem att återställa sina konton. Du kan göra detta genom att låta användare återställa sina lösenord via e-post, ge dem möjlighet att lägga till ett reservtelefonnummer eller säkerhetsfrågor, eller låta dem använda ett pålitligt konto.

DropoBox's login page
Dropboxs inloggningssida.

Dela upp registreringsprocessen

Användare kan hantera massor av data mer effektivt med ett flerstegsformulär. De kan koncentrera sig på en specifik kategori av data åt gången.

De flesta webbplatser kräver att användare skapar ett konto innan de använder det. När du utformar ditt registreringsformulär kan du dela upp registreringsprocessen i olika steg för att göra det enklare och mindre förvirrande för nya användare.

Du kanske vill dela upp registreringsprocessen i tre steg:

  • Det första steget kan vara att ange användarens uppgifter.
  • Det andra steget kan vara att välja ett användarnamn.
  • Det tredje steget kan vara att ange användarens lösenord.

Att dela upp registreringsprocessen gör det lättare för nya användare att registrera sig för din webbplats och förstå de olika stegen som är involverade.

Glöm inte att utforma ett flerstegsformulär är avgörande för att göra det användarvänligt för användaren. Se till att stegen har lämpliga namn, att användaren enkelt kan hoppa mellan dem och att användaren kan se en sammanfattning av data innan du skickar formuläret.

Detta kommer också att ge användaren en känsla av prestation eftersom vi gillar att slutföra uppgifter och se att vi närmar oss slutet på något.

Ett exempel på god praxis är ett ”tack” -meddelande i slutet av flödet, så användaren känner att hans ansträngning värderas.

Uber's login page
Ubers inloggningssida - steg 1.
blå pil till vänster
Imaginary Cloud-logotyp

Ge ett alternativ för att komma ihåg mig

Ett uttryckligt alternativ Kom ihåg mig gör det lättare för användare att uttrycka om de vill att webbplatsen ska komma ihåg autentiseringsuppgifterna när de återvänder. De kan avmarkera rutan om de inte vill att webbplatsen ska komma ihåg sin e-postadress, vilket gör det enklare för en annan person att gissa sitt lösenord.

Det finns två sätt att göra detta:

  • Användare kan välja alternativet Kom ihåg mig under registreringsprocessen, och deras e-postadress sparas, så att de inte behöver skriva den igen nästa gång de loggar in.
  • Användare kan välja alternativet att komma ihåg sin e-postadress efter att de loggat in. Det sparar deras e-postadress, så att de inte behöver komma ihåg det.

Mailchimp's login page
Mailchimps inloggningssida.

Förpackning

I den här artikeln har vi gett dig de bästa metoderna för att utforma en registrerings- och inloggningssida. Men du måste alltid vara uppmärksam för att passa dina behov baserat på din publik och projektmål. Ju mer ansträngning du lägger på din registrering, och inloggningssidor, desto mer sannolikt kommer användarna att känna sig motiverade att registrera sig och logga in.


Så du måste skapa en engagerande och tillgänglig upplevelse för dina användare under hela deras onboarding-process. Om de har problem måste du vägleda dem genom processen. Några saker att tänka på är att skapa en användarvänlig inloggnings- och registreringsprocess och vara transparent om din registrerings- och inloggningsprocess.


Om du vill förbättra din webbplats registrerings- och inloggningsupplevelser kan du komma i kontakt med Imaginary Cloud.

Build user-friendly products with UX/UI design CTA
blå pil till vänster
Imaginary Cloud-logotyp
Alexandra Mendes
Alexandra Mendes

Alexandra Mendes är Senior Growth Specialist på Imaginary Cloud med 3+ års erfarenhet av att skriva om mjukvaruutveckling, AI och digital transformation. Efter att ha avslutat en frontend-utvecklingskurs tog Alexandra upp några praktiska kodningskunskaper och arbetar nu nära med tekniska team. Alexandra brinner för hur ny teknik formar affärer och samhälle och tycker om att förvandla komplexa ämnen till tydligt och användbart innehåll för beslutsfattare.

Linkedin

Läs fler inlägg av denna författare
Joana Eitner
Joana Eitner

Ung UX/UI-designer som brinner för detaljer och mänskligt beteende som älskar att lära sig något nytt varje dag.

Läs fler inlägg av denna författare

Människor som läste det här inlägget tyckte också att dessa var intressanta:

pil vänster
pilen till höger
Dropdown caret icon