En besøgende kommer ind på din hjemmeside og klikker på "Log ind". De forventer et let login. I stedet møder de en formular, der frustrerer dem. Kravene til adgangskoden er skjult, indtil de sender. Feltet til adgangskoden er lille og svært at skrive i. Der er ingen mulighed for at vise adgangskoden, så de kan ikke tjekke, hvad de har skrevet. De skriver adgangskoden forkert. De klikker på "Glemt adgangskode" og havner i et forvirrende flow til nulstilling. Et par minutter senere giver de op og kommer aldrig tilbage.
Formularer til login og nulstilling af adgangskode er afgørende kontaktpunkter. De formularer står mellem en besøgende, der vender tilbage, og deres konto. Hvis oplevelsen er dårlig, går de ikke bare. De tror, at din hjemmeside ikke er til at stole på. Her gennemgår vi, hvordan du bygger formularer til login og nulstilling af adgangskode, der er sikre, intuitive og respekterer brugerens tid.
Hvilke felter skal en loginformular have?
En loginformular skal have præcis tre ting. For det første en måde at se, hvem personen er. For det andet en måde at bekræfte deres identitet. For det tredje en måde at forblive logget ind. Det betyder tre felter som minimum.
Feltet til e-mail
Brug e-mail og ikke brugernavn. E-mail er enklere. Brugerne glemmer brugernavne. De glemmer ikke deres e-mailadresse. Lad feltet acceptere en e-mailadresse, og navngiv det tydeligt som "E-mailadresse". Brug HTML `type="email"`, så tastaturet på mobilen viser @ og valideringen af e-mail sker automatisk. Tilføj `autocomplete="username"` i HTML-attributten, så browsere og administratorer af adgangskoder ved, at det er her, loginoplysningen skal stå, og kan udfylde den for brugere, der har gemt deres oplysninger.
Feltet til adgangskode
Brug `type="password"`, så teksten er skjult. Tilføj `id="current-password"` og `autocomplete="current-password"`, så administratorer af adgangskoder kan genkende feltet og udfylde gemte adgangskoder. Tillad indsæt. Sikkerhedseksperter er enige om, at det ikke forhindrer angreb at slå indsæt fra i felter til adgangskode. Det frustrerer kun dem, der bruger administratorer af adgangskoder.
Gør feltet til adgangskode mindst 10 tegn bredt at se på. Et lille felt føles trangt. Brugerne tvivler på, om deres lange adgangskode kan være der. Et bredere felt giver tillid og færre fejl ved indsendelsen.
Knap til at vise adgangskoden
Tag en knap med, der viser eller afslører adgangskoden (som regel et øjeikon eller et afkrydsningsfelt). Når den er slået til, skifter feltet til adgangskode til `type="text"`, så brugerne kan se, hvad de har skrevet. Det er ikke en risiko for sikkerheden. Det er en funktion for brugervenlighed, der giver færre fejl og mindre frustration. Brugerne skriver adgangskoder omhyggeligt og vil gerne tjekke dem, før de trykker på send.
Afkrydsningsfelt til "Husk mig" (valgfrit, men anbefalet)
Et afkrydsningsfelt med "Husk mig på denne enhed" eller "Hold mig logget ind" er valgfrit, men det giver en bedre oplevelse. Når det er sat, varer sessionen længere, eller browseren gemmer en vedvarende token til login (sikkert). Det betyder, at brugerne ikke skal logge ind hver gang, de kommer. Til konti med lav risiko er det sikkert. Til konti med høj sikkerhed (økonomi, sundhed, adminpaneler) skal du springe det over eller kræve ny godkendelse ved følsomme handlinger.
Hvis du tager et afkrydsningsfelt med "Husk mig" med, så vær tydelig om, hvad det gør. "Husk mig i 30 dage" er klarere end bare "Husk mig."
Link til glemt adgangskode
Sæt et link med "Glemt adgangskode?" lige under feltet til adgangskode eller til højre for det. Det er ikke valgfrit. Brugerne glemmer adgangskoder. Giv dem en tydelig vej til at nulstille den. Hvis de ikke kan finde linket, forlader de hjemmesiden og kommer måske aldrig tilbage.
Hvordan skal en formular til nulstilling af adgangskode virke?
Et flow til nulstilling af adgangskode har flere trin. Hvert trin betyder noget. Hvert trin er et sted, hvor brugerne kan blive forvirrede og give op.
Trin ét: Bed om bekræftelse af e-mail
Flowet starter, når en bruger klikker på "Glemt adgangskode" i loginformularen. De lander på en side, der siger noget i retning af "Skriv din e-mailadresse for at nulstille din adgangskode." Et enkelt felt til e-mail vises. Det er det hele. Ingen ekstra felter. Ingen spørgsmål om brugernavn eller sikkerhedsspørgsmål. Bare e-mailen.
Knappen skal sige noget klart og handlingsorienteret. "Send link til nulstilling" eller "Få vejledning til nulstilling" fortæller dem, hvad der sker bagefter. "Send" er utydeligt.
Trin to: Send et link til nulstilling på e-mail
Når de sender deres e-mail, sender dit system straks en e-mail om nulstilling af adgangskoden. E-mailen skal komme frem i løbet af sekunder og ikke minutter. Hastighed betyder noget. Hvis e-mailen tager 10 minutter, tror brugerne, at det ikke virkede, og prøver igen, eller værre, de går.
E-mailen til nulstilling indeholder et unikt link (eller en kode, de skriver på næste side). Linket skal udløbe efter en fast tid, som regel 24 timer. Et link, der aldrig udløber, er en sikkerhedsrisiko, hvis nogen får adgang til deres e-mail.
Trin tre: Bekræft linket, og vis formularen til nulstilling af adgangskode
Når de klikker på linket til nulstilling i e-mailen, kommer de til formularen til nulstilling af adgangskode. Siden skal tydeligt bekræfte, hvad der sker: "Nulstil din adgangskode" eller "Lav en ny adgangskode." Ingen tvivl om, om de er det rigtige sted.
Vis den e-mailadresse, de nulstiller adgangskoden til. "Du nulstiller adgangskoden til eksempel@mail.dk." Det beroliger dem om, at de nulstiller den rigtige konto.
Trin fire: Sæt kravene til adgangskoden tydeligt, før de sender
Vis kravene til adgangskoden i formularen til nulstilling, FØR de prøver at sende. Lad dem ikke gætte. "Din adgangskode skal være på mindst 12 tegn og have ét stort bogstav, ét tal og ét specialtegn." Vær konkret. Vis eksempler på, hvad der opfylder kravene.
En indikator for styrken af adgangskoden (en linje, der viser svag, middel, stærk) hjælper brugerne med at forstå, om deres adgangskode opfylder kravene, uden at de skal sende og få en fejl. Nogle brugere synes, det hjælper. Nogle synes, det er frustrerende, hvis kravene er uklare. Hvis du bruger en styrkemåler, så kombinér den med krav i tekst.
Trin fem: Felt til adgangskode og bekræftelse
Bed om en ny adgangskode. Bed dem derefter bekræfte den ved at skrive den igen. Bekræftelsen opfanger tastefejl. Ulempen er, at et felt til bekræftelse giver mere besvær. Undersøgelser viser, at flere gennemfører, når feltet til bekræftelse af adgangskode fjernes. Hvis du beholder det, så lad begge felter have en knap til at vise adgangskoden, så de kan tjekke, at begge felter er ens, før de sender.
Trin seks: Bekræftelse med det samme og næste trin
Når de har nulstillet adgangskoden, viser du en besked om, at det lykkedes. "Din adgangskode er nulstillet. Du kan nu logge ind med din nye adgangskode." Giv derefter et link tilbage til loginformularen eller en knap, der siger "Gå til login", så de ikke skal navigere eller lede.
Send dem også en e-mail til bekræftelse. "Din adgangskode er netop blevet nulstillet. Hvis det ikke var dig, så klik her for at sikre din konto." Det advarer dem, hvis en anden har nulstillet deres adgangskode, og giver dem en måde at fortryde det på.
Hvor skal loginformularer ligge på din hjemmeside?
Loginformularer er ikke pynt. De skal kunne findes uden at lede.
Header eller menu
Det mest synlige sted er headeren. Et link (eller en knap) med "Log ind" øverst til højre på din hjemmeside er, hvor brugerne forventer det. Når de klikker på det, så send dem enten til en egen loginside eller åbn et vindue med loginformularen. Brugere på mobil forventer at finde login i burgermenuen. Gem det aldrig bag flere lag af menuer.
Egen loginside
Lav en egen side på `/login` eller `/sign-in`. Siden indeholder loginformularen og intet andet. Ingen blogindlæg. Ingen tekst til markedsføring. Bare formularen og den hjælpetekst, der er nødvendig. En ren og fokuseret side giver bedre resultater end at lægge loginformularen ind på en almindelig side.
Side til nulstilling af adgangskode
Formularen til nulstilling af adgangskode bør ligge på en egen URL som `/reset-password` eller `/forgot-password`. Siden kan kun nås fra loginformularen eller fra et link i e-mailen til nulstilling. Den bør ikke indekseres af søgemaskiner. Tilføj `noindex` til siden i din HTML eller robots.txt, så Google ikke prøver at rangere den.
Typiske fejl i designet af loginformularer
Selv velmenende loginformularer har ofte problemer, der skader brugeroplevelsen.
For mange felter før login
Nogle hjemmesider spørger om brugernavn, e-mail, telefon og svar på et sikkerhedsspørgsmål i selve loginformularen. Gør det ikke. Login er ikke registrering. Spørg kun om e-mail og adgangskode. Alt andet er ekstra besvær.
Skjulte eller uklare krav til adgangskoden
Hvis kravene til adgangskoden er skjult, indtil de sender, bliver brugerne frustrerede. De skriver en adgangskode. De trykker på send. En fejl dukker op: "Adgangskoden skal være på 12 tegn og have et tal." Nu skal de prøve igen. Vis kravene på forhånd.
Ingen mulighed for at vise adgangskoden
Brugerne kan ikke se, hvad de har skrevet. De sender. De får det forkert. De prøver igen. De får det forkert igen. En enkel knap sparer dem for den frustration.
Forvirrende fejlbeskeder
Sig aldrig "Ugyldigt login" til brugerne. Det hjælper ikke. Bruger de den forkerte e-mail? Den forkerte adgangskode? Er kontoen ikke aktiveret? Vær konkret. "Der er ingen konto med denne e-mailadresse" eller "Adgangskoden er forkert" fortæller dem, hvad der skal rettes. Eller hvis du af hensyn til sikkerheden vil være utydelig, så giv dem en vej til at komme videre. "E-mail og adgangskode passer ikke sammen. Prøv igen, eller nulstil din adgangskode."
Linket til nulstilling udløber for hurtigt
Et link til nulstilling, der udløber efter 15 minutter, frustrerer brugerne. De tjekker deres e-mail efter arbejde. Linket er dødt. De må begynde forfra. Giv dem mindst 24 timer.
Flowet til nulstilling sender til en forvirrende side
Nogle flows til nulstilling sender brugerne til en side, der ikke klart siger, hvad de skal gøre. De klikker på linket til nulstilling. De lander på en side med uklar tekst og ingen formular. De tror, at noget gik galt. Gør det tydeligt. "Nulstil din adgangskode til eksempel@mail.dk" med et felt til adgangskode og en knap til at sende.
Sikkerhed ved login og nulstilling af adgangskode
En loginformular er en del af din hjemmeside, hvor sikkerheden er afgørende. Beskyt den ordentligt.
Brug HTTPS til al trafik ved login
Din loginside skal leveres over HTTPS og ikke HTTP. HTTPS krypterer data undervejs, så hackere ikke kan læse e-mail og adgangskode, mens de rejser til din server. Det kan ikke forhandles. Hvis din hjemmeside ikke har et SSL-certifikat, så skaf et. De fleste hostingudbydere giver nu gratis SSL-certifikater.
Valider styrken af adgangskoden på serveren
Validering i browseren hjælper brugerne, men stol ikke kun på den. Validering med JavaScript kan omgås. Valider adgangskoden på din server. Tjek, at den opfylder dine krav. Accepter kun adgangskoder, der opfylder dine standarder for styrke.
Hash og salt adgangskoder i din database
Gem aldrig adgangskoder som almindelig tekst. Brug en sikker algoritme til hashing (som bcrypt eller Argon2) med salt. Selv hvis nogen bryder ind i din database, kan de ikke læse adgangskoderne. En adgangskode, der er hashet rigtigt, kan ikke gøres om til den oprindelige adgangskode.
Begræns antallet af loginforsøg
Hvis nogen prøver at logge ind 10 gange på et minut, så bloker dem. En begrænsning af antallet af forsøg forhindrer brute force-angreb, hvor hackere prøver tusindvis af kombinationer af adgangskoder. Efter nogle få mislykkede forsøg skal du holde pause i 15 minutter, før du tillader flere forsøg.
Lad tokens til nulstilling af adgangskode udløbe hurtigt
En token til nulstilling af adgangskode, der virker i 24 timer, er standard. Tokens, der virker i 7 dage eller længere, øger risikoen for, at en kompromitteret e-mailkonto fører til en kompromitteret konto på din hjemmeside. Hold tokens kortlivede.
Log aktivitet ved login for at opdage svindel
Før en oversigt over vellykkede og mislykkede loginforsøg. Hvis nogen logger ind fra et nyt land eller på et usædvanligt tidspunkt, så marker det. Nogle systemer sender en e-mail, når en konto logger ind fra en ny enhed. Det advarer kontoens ejer, hvis en anden har fået adgang.
Loginformularer på mobil: hvad er anderledes?
Mobil ændrer, hvordan loginformularer skal virke.
Områder at trykke på og størrelsen på knapper
På mobil er fingre ikke så præcise som en markør. Knapper og felter skal være større. Knappen til at sende skal være mindst 44 pixel høj. Felter skal være høje nok til, at det er behageligt at skrive i dem. Sigt efter en højde på 44 til 48 pixel.
Tastaturer på mobil og typer af input
Brug `type="email"` til feltet til e-mail. Det fortæller mobile enheder, at de skal vise tastaturet til e-mail med @ og . som tegn. Uden det skal brugerne skifte tastatur. Brug `type="password"` til feltet til adgangskode, så tastaturet passer. Den lille detalje sparer tryk og frustration.
Autofyld og administratorer af adgangskoder
Browsere på mobil og apps til at administrere adgangskoder kan udfylde loginoplysninger automatisk. Sørg for, at dine HTML-attributter understøtter det. Tag `autocomplete="username"` med på feltet til e-mail og `autocomplete="current-password"` på feltet til adgangskode. Det er en stor lettelse på mobil, hvor det går langsommere at skrive.
Layout af formularen på små skærme
Stabl felterne lodret. Sæt ikke e-mail og adgangskode side om side på en mobilskærm. Ét felt pr. række. Formularen skal bruge hele bredden med passende marginer. En formular, der føles trang på mobil, bliver ikke udfyldt.
Undgå, at tastaturet på mobil dækker for meget
Når tastaturet på mobilen dukker op, dækker det halvdelen af skærmen. Sørg for, at knappen til login kan ses over tastaturet, eller giv en let måde at lukke tastaturet på. Nogle hjemmesider viser først knappen, når tastaturet er lukket. Det frustrerer brugerne. Hold knappen synlig.
Ofte stillede spørgsmål
Hvor mange krav skal jeg stille til adgangskoden?
Skal jeg vise en indikator for styrken af adgangskoden?
Hvad hvis nogen glemmer både adgangskoden OG e-mailadressen?
Har jeg brug for tofaktorgodkendelse i min loginformular?
Hvor ofte skal nogen nulstille deres adgangskode?
Er det bedst at spørge efter brugernavn eller e-mailadresse?
Sådan hjælper WEMASY med formularer til login og nulstilling af adgangskode
WEMASY's formularbygger understøtter sikre flows til login og nulstilling af adgangskode. Lav en loginformular med felter til e-mail og adgangskode. Tilføj en knap til at vise adgangskoden med ét klik. Sæt krav til adgangskoden (længde, store bogstaver, tal, specialtegn). Brug betinget logik til at vise et afkrydsningsfelt med "Husk mig" eller springe det over ud fra dit behov for sikkerhed. Forbind til WEMASY's system til godkendelse, eller integrér med eksterne udbydere af login via API. WEMASY tager sig automatisk af hashing af adgangskoder, begrænsning af antal forsøg og styring af sessioner. E-mails til nulstilling af adgangskode sendes sikkert fra dit domæne. Tokens til nulstilling udløber efter 24 timer. Se, hvad der er med i WEMASY-planerne.