En besökare kommer till din webbplats och klickar på "Logga in." Hen förväntar sig en smidig inloggning. I stället möts hen av ett formulär som irriterar. Lösenordskraven är dolda tills hen skickar in. Lösenordsfältet är litet och svårt att skriva i. Det finns inget alternativ för att visa lösenordet, så hen kan inte kontrollera vad hen skrev. Hen skriver fel lösenord. Hen klickar på "Glömt lösenord" och hamnar i ett förvirrande flöde för återställning. Några minuter senare ger hen upp och kommer aldrig tillbaka.
Formulär för inloggning och återställning av lösenord är avgörande kontaktpunkter. De här formulären står mellan en återvändande besökare och hens konto. Om upplevelsen är dålig lämnar besökaren inte bara sidan. Hen utgår från att din webbplats inte är pålitlig. Det här kapitlet går igenom hur du bygger formulär för inloggning och återställning av lösenord som är säkra, intuitiva och respekterar användarens tid.
Vilka fält behöver ett inloggningsformulär?
Ett inloggningsformulär behöver exakt tre saker. För det första ett sätt att identifiera vem personen är. För det andra ett sätt att verifiera identiteten. För det tredje ett sätt att förbli inloggad. Det betyder tre fält som minst.
E-postfältet
Använd e-postadress, inte användarnamn. E-postadress är enklare. Användare glömmer användarnamn. De glömmer inte sin e-postadress. Låt fältet ta emot en e-postadress och märk det tydligt som "E-postadress." Använd HTML `type="email"` så att mobiltangentborden visar @-tecknet och valideringen av e-postadressen sker automatiskt. Lägg till `autocomplete="username"` i HTML-attributet så att webbläsare och lösenordshanterare vet att det är här inloggningsuppgiften ska anges och kan fylla i den åt användare som har sparade inloggningsuppgifter.
Lösenordsfältet
Använd `type="password"` så att texten döljs. Lägg till `id="current-password"` och `autocomplete="current-password"` så att lösenordshanterare kan identifiera fältet och fylla i sparade lösenord. Tillåt inklistring. Säkerhetsexperter är överens om att det inte förhindrar attacker att stänga av inklistring i lösenordsfält. Det irriterar bara dem som använder lösenordshanterare.
Gör lösenordsfältet visuellt minst 10 tecken brett. Ett litet inmatningsfält känns trångt. Användare tvivlar på att deras långa lösenord ryms. Ett bredare fält ger trygghet och minskar fel vid inskickning.
Knapp för att visa lösenordet
Ta med en knapp eller kryssruta för att "Visa lösenord" eller "Avslöja lösenord" (oftast en ögonikon eller en kryssruta). När den är aktiverad ändras lösenordsfältet till `type="text"` så att användare kan se vad de skrev. Det är ingen säkerhetsrisk. Det är en användbarhetsfunktion som minskar fel vid inskickning och irritation. Användare skriver lösenord noggrant och vill kontrollera dem innan de klickar på skicka.
Kryssruta för att komma ihåg mig (valfri men rekommenderas)
En kryssruta med "Kom ihåg mig på den här enheten" eller "Håll mig inloggad" är valfri, men den förbättrar upplevelsen. När den är ikryssad varar sessionen längre eller så lagrar webbläsaren en bestående inloggningstoken (på ett säkert sätt). Det betyder att användare inte behöver logga in varje gång de besöker sidan. För konton med låg risk är det säkert. För konton med höga säkerhetskrav (ekonomi, hälsa, adminpaneler), hoppa över det eller kräv ny autentisering för känsliga åtgärder.
Om du tar med en kryssruta för att komma ihåg mig, var tydlig med vad den gör. "Kom ihåg mig i 30 dagar" är tydligare än bara "Kom ihåg mig."
Länk för glömt lösenord
Placera en länk med "Glömt lösenordet?" direkt under lösenordsfältet eller till höger om det. Det är inte valfritt. Användare glömmer lösenord. Ge en tydlig väg att återställa det. Om de inte hittar länken lämnar de sidan och kommer kanske aldrig tillbaka.
Hur ska ett formulär för återställning av lösenord fungera?
Ett flöde för återställning av lösenord har flera steg. Varje steg spelar roll. Varje steg är ett ställe där användare kan bli förvirrade och hoppa av.
Steg ett: Be om e-postverifiering
Återställningsflödet börjar när en användare klickar på "Glömt lösenordet" i inloggningsformuläret. De hamnar på en sida som säger något i stil med "Ange din e-postadress för att återställa ditt lösenord." Ett enda e-postfält visas. Det är allt. Inga extra fält. Ingen fråga om användarnamn eller säkerhetsfrågor. Bara e-postadressen.
Knappen ska säga något tydligt och handlingsinriktat. "Skicka återställningslänk" eller "Få instruktioner för återställning" talar om vad som händer härnäst. "Skicka" är vagt.
Steg två: Skicka återställningslänk via e-post
När de skickar in sin e-postadress skickar ditt system direkt ett e-postmeddelande för återställning av lösenord. Mejlet ska komma fram inom sekunder, inte minuter. Snabbheten spelar roll. Om mejlet tar 10 minuter utgår användare från att det inte fungerade och försöker igen, eller värre, de lämnar sidan.
Återställningsmejlet innehåller en unik länk (eller en kod som de anger på nästa sida). Länken ska sluta gälla efter en viss tid, oftast 24 timmar. En länk som aldrig slutar gälla är en säkerhetsrisk om någon får tillgång till deras e-post.
Steg tre: Verifiera länken och visa formuläret för återställning
När de klickar på återställningslänken i mejlet kommer de till formuläret för att återställa lösenordet. Sidan ska tydligt bekräfta vad som händer: "Återställ ditt lösenord" eller "Skapa ett nytt lösenord." Ingen förvirring om huruvida de är på rätt ställe.
Visa vilken e-postadress de återställer lösenordet för. "Du återställer lösenordet för exempel@epost.se." Det lugnar dem att de återställer rätt konto.
Steg fyra: Ange lösenordskraven tydligt innan de skickar in
Visa lösenordskraven i återställningsformuläret INNAN de försöker skicka in. Låt dem inte gissa. "Ditt lösenord måste vara minst 12 tecken, innehålla en versal, en siffra och ett specialtecken." Var specifik. Visa exempel på vad som godkänns.
En indikator för lösenordsstyrka (ett fält som visar svagt, medel, starkt) hjälper användare att förstå om lösenordet uppfyller kraven utan att skicka in och få ett fel. Vissa användare tycker att det hjälper. Andra tycker att det är irriterande om kraven är oklara. Om du använder en styrkemätare, para ihop den med tydliga textkrav.
Steg fem: Lösenordsfält och bekräftelse
Be om ett nytt lösenord. Be dem sedan bekräfta det genom att skriva det igen. Bekräftelsesteget fångar stavfel. Nackdelen är att ett bekräftelsefält ger mer krångel. Forskning visar att andelen som fyller i klart ökar om du tar bort fältet för att bekräfta lösenordet. Om du behåller det, låt båda fälten ha en knapp för att visa lösenordet så att de kan kontrollera att båda inmatningarna stämmer innan de skickar in.
Steg sex: Direkt bekräftelse och nästa steg
När de har återställt sitt lösenord visar du ett bekräftelsemeddelande. "Ditt lösenord har återställts. Du kan nu logga in med ditt nya lösenord." Ge sedan en länk tillbaka till inloggningsformuläret eller en knapp med "Gå till inloggning" så att de slipper navigera eller leta.
Skicka också ett bekräftelsemejl. "Ditt lösenord har nyligen återställts. Om det inte var du, klicka här för att skydda ditt konto." Det varnar dem om någon annan återställde deras lösenord och ger dem ett sätt att ångra det.
Var placerar du inloggningsformulär på din webbplats?
Inloggningsformulär är inte dekoration. De måste gå att hitta utan att leta.
Sidhuvud eller navigering
Den mest synliga platsen är sidhuvudet. En länk (eller knapp) med "Logga in" uppe till höger på din webbplats är där användare förväntar sig den. När de klickar på den tar du dem antingen till en egen inloggningssida eller öppnar en modal med inloggningsformuläret. Mobilanvändare förväntar sig alternativet för inloggning i hamburgarmenyn. Göm det aldrig bakom flera lager av navigering.
Egen inloggningssida
Skapa en egen sida på `/login` eller `/sign-in`. Sidan innehåller inloggningsformuläret och inget annat. Inga blogginlägg. Ingen marknadsföringstext. Bara formuläret och nödvändig hjälptext. En ren, fokuserad sida konverterar bättre än att bädda in inloggningsformuläret på en allmän sida.
Sida för återställning av lösenord
Formuläret för återställning av lösenord ska ligga på en egen webbadress som `/reset-password` eller `/forgot-password`. Sidan går bara att nå från inloggningsformuläret eller från en länk i återställningsmejlet. Den ska inte indexeras av sökmotorer. Lägg till `noindex` på sidan i din HTML eller robots.txt så att Google inte försöker ranka den.
Vanliga misstag i utformningen av inloggningsformulär
Även välmenande inloggningsformulär har ofta problem som skadar användarupplevelsen.
För många fält före inloggning
Vissa webbplatser frågar efter användarnamn, e-postadress, telefonnummer och svar på en säkerhetsfråga i själva inloggningsformuläret. Gör inte det. Inloggning är inte registrering. Fråga bara efter e-postadress och lösenord. Allt annat är extra krångel.
Dolda eller oklara lösenordskrav
Om lösenordskraven är dolda tills de skickar in blir användare frustrerade. De anger ett lösenord. De klickar på skicka. Ett fel visas: "Lösenordet måste vara 12 tecken och innehålla en siffra." Nu måste de försöka igen. Visa kraven i förväg.
Inget alternativ för att visa lösenordet
Användare kan inte se vad de skrev. De skickar in. De skriver fel. De försöker igen. De skriver fel igen. En enkel knapp sparar den här irritationen.
Förvirrande felmeddelanden
Skriv aldrig "Ogiltig inloggning" till användare. Det hjälper inte. Använder de fel e-postadress? Fel lösenord? Är kontot inte aktiverat? Var specifik. "Inget konto hittades för den här e-postadressen" eller "Lösenordet är fel" talar om vad som ska rättas till. Eller om du av säkerhetsskäl vill vara vag, ge dem en väg framåt. "E-postadress och lösenord stämmer inte överens. Försök igen eller återställ ditt lösenord."
Återställningslänken slutar gälla för snabbt
En återställningslänk som slutar gälla efter 15 minuter irriterar användare. De kollar sin e-post efter jobbet. Länken är död. De måste börja om. Ge dem minst 24 timmar.
Återställningsflödet skickar till en förvirrande sida
Vissa återställningsflöden skickar användare till en sida som inte tydligt säger vad de ska göra. De klickar på återställningslänken. De hamnar på en sida med oklar text och inget formulär. De tror att något gick fel. Gör det tydligt. "Återställ ditt lösenord för exempel@epost.se" med ett lösenordsfält och en skickaknapp.
Säkerhetsaspekter för inloggning och återställning av lösenord
Ett inloggningsformulär är en säkerhetskritisk del av din webbplats. Skydda det ordentligt.
Använd HTTPS för all inloggningstrafik
Din inloggningssida måste levereras över HTTPS, inte HTTP. HTTPS krypterar datan under överföringen så att hackare inte kan läsa e-postadressen och lösenordet medan de färdas till din server. Det är ett absolut krav. Om din webbplats inte har ett SSL-certifikat, skaffa ett. De flesta webbhotell erbjuder numera gratis SSL-certifikat.
Validera lösenordsstyrkan på servern
Validering i webbläsaren hjälper användare, men lita inte enbart på den. JavaScript-validering kan kringgås. Validera lösenordet på din server. Kontrollera att det uppfyller dina krav. Godkänn bara lösenord som uppfyller dina styrkekrav.
Hasha och salta lösenord i din databas
Lagra aldrig lösenord i klartext. Använd en säker hashalgoritm (som bcrypt eller Argon2) med salt. Även om någon bryter sig in i din databas kan de inte läsa lösenorden. Ett korrekt hashat lösenord går inte att räkna tillbaka till det ursprungliga lösenordet.
Begränsa antalet inloggningsförsök
Om någon försöker logga in 10 gånger på en minut, blockera dem. Begränsning av antalet försök förhindrar brute force-attacker där hackare testar tusentals lösenordskombinationer. Efter några misslyckade försök, pausa i 15 minuter innan fler försök tillåts.
Låt token för återställning av lösenord sluta gälla snabbt
En token för återställning av lösenord som gäller i 24 timmar är standard. Token som gäller i 7 dagar eller längre ökar risken att ett kapat e-postkonto leder till ett kapat konto på webbplatsen. Håll token kortlivade.
Logga inloggningsaktivitet för att upptäcka bedrägerier
Spara en logg över lyckade och misslyckade inloggningsförsök. Om någon loggar in från ett nytt land eller vid en ovanlig tid, flagga det. Vissa system skickar ett mejl när ett konto loggas in från en ny enhet. Det varnar kontoägaren om någon annan har kommit åt kontot.
Inloggningsformulär på mobilen: vad är annorlunda?
Mobilen förändrar hur inloggningsformulär måste fungera.
Tryckytor och knappstorlek
På mobilen är fingrar inte lika exakta som muspekare. Knappar och inmatningsfält behöver vara större. Skickaknappen ska vara minst 44 pixlar hög. Inmatningsfält ska vara tillräckligt höga för att det ska vara bekvämt att skriva. Sikta på 44 till 48 pixlar i höjd.
Mobiltangentbord och inmatningstyper
Använd `type="email"` för e-postfältet. Det talar om för mobila enheter att visa e-posttangentbordet med @ och . tecken. Utan det måste användare byta tangentbordsläge. Använd `type="password"` för lösenordsfältet så att tangentbordet passar. Den här lilla detaljen sparar tryck och irritation.
Autoifyllning och lösenordshanterare
Mobila webbläsare och appar för lösenordshanterare (som 1Password eller Bitwarden) kan fylla i inloggningsuppgifter automatiskt. Se till att dina HTML-attribut stöder det. Ta med `autocomplete="username"` på e-postfältet och `autocomplete="current-password"` på lösenordsfältet. Det är en stor bekvämlighet på mobilen där det går långsammare att skriva.
Formulärlayout på små skärmar
Stapla fälten lodrätt. Lägg inte e-postadress och lösenord sida vid sida på en mobilskärm. Ett fält per rad. Formuläret ska använda hela bredden med tillräckliga marginaler. Ett formulär som känns trångt på mobilen blir inte ifyllt.
Undvik att mobiltangentbordet täcker formuläret
När mobiltangentbordet visas täcker det halva skärmen. Se till att inloggningsknappen syns ovanför tangentbordet, eller ge ett sätt att enkelt stänga tangentbordet. Vissa webbplatser visar knappen först efter att tangentbordet har stängts. Det irriterar användare. Låt knappen vara synlig.
Vanliga frågor
Hur många lösenordskrav ska jag ställa?
Ska jag visa en indikator för lösenordsstyrka?
Vad händer om någon glömmer både lösenordet OCH e-postadressen?
Behöver jag tvåfaktorsautentisering i mitt inloggningsformulär?
Hur ofta ska någon behöva återställa sitt lösenord?
Är det bättre att fråga efter användarnamn eller e-postadress?
Så hjälper WEMASY dig med formulär för inloggning och återställning av lösenord
WEMASY:s formulärbyggare stöder säkra flöden för inloggning och återställning av lösenord. Skapa ett inloggningsformulär med fält för e-postadress och lösenord. Lägg till en knapp för att visa lösenordet med ett klick. Ställ in lösenordskrav (teckenlängd, versaler, siffror, specialtecken). Använd villkorsstyrd logik för att visa en kryssruta för att komma ihåg mig eller hoppa över den utifrån dina säkerhetsbehov. Koppla till WEMASY:s autentiseringssystem eller integrera med externa leverantörer av autentisering via API. WEMASY sköter hashning av lösenord, begränsning av antalet försök och sessionshantering automatiskt. Mejl för återställning av lösenord skickas säkert från din domän. Token för återställning slutar gälla efter 24 timmar. Se vad som ingår i WEMASY-planerna.