Hvor legger jeg log-in?

Bør innloggingsboksen på en nettside være til høyre eller til venstre. Finnes det noe forskning som viser at en plassering er bedre enn andre?

Jared Spool har studert brukernes forventninger til innloggingsfeltet og oppsummerer disse i en artikkel. Her viser han også flere eksempler på ulik plassering og oppstilling av innloggingsfelter. Dette er min oppsummering av funnene hans.

Plassering er ikke det viktigste
Av sidene Spool studerte var det ikke mye konsistens i hvorvidt de brukte faktiske innloggingsfelt med brukernavn eller epostadresse og passord, eller om de bare brukte en “Log in” eller “Sign in” lenke som tok brukeren til en sekundær login-side. Verken lokasjon eller stil, altså felter versus lenke til felter, gjorde noen merkbar forskjell.

Visuell presentasjon er viktigere
Selv om det virker unødvendig å si, skriver Spool, hadde brukerne problemer når innloggingsfelter eller linker var vanskelig å se på nettsiden. Visuell presentasjon var viktig for å hjelpe brukerne finne login-funksjonaliteten.

To-boks-mønsteret
Brukerne skanner siden etter to tekstfelt-bokser av lik størrelse først. Sider som hadde to slike bokser, ofte innenfor en større boks med distinkt bakgrunn og ramme, trakk raskt brukerns oppmerksomhet. Brukeren skrev brukernavn i første boks og passordet sitt i den andre.

Dette mønsteret er så sterkt at det ble observert selv på sider som ikke fulgte dette mønsteret: Brukerne kunne misforstå to tekstfelt-bokser for å være et innloggingsfelt selv om feltene ble brukt til helt annen informasjon.

Jeg har selv opplevd å begynne registrere meg som ny bruker fordi jeg har misforstått feltene øverst på Vimeo, selv om det her er tre felter og et spørsmål om registrering. Spool anbefaler at designere er forsiktige med å plassere tekstfelter så brukerne ikke forveksler de med innloggingsfelter.

Eksempel på registrering av ny bruker hos vimeo.com

Logg-inn-lenke-mønster
Hvis brukerne ikke ser to bokser, skanner de etter en lenke med tittel Sign-in eller Log-in. Et mønster som fungerte godt i Spool sitt studie var når brukeren var innlogget, så endret login-lenken tittel til brukerens navn, id eller epostadresse etterfulgt av en logg ut-lenke. Brukerne viste at de forstod denne endringen som at systemet hadde godkjent deres kontoinformasjon.

Som med to-boks-mønsteret må login-lenken være visuelt tydelig og adskilt fra andre lenker som vises på siden.

I tillegg til disse erfaringene, skriver Spool litt om når innloggingen bør finne sted.

Visual design shows us how to make elements look distinctive, so users easily locate them when they want to. Interaction design shows us how to integrate the elements into the conversation, so users access them when they need them.

When creating great experiences, it’s not so much about doing what users expect. Instead, it’s about creating a design that clearly meets their needs at the instant they need it. With strong visual and interaction design skills, teams will be in a place to take their designs to the next level.

Nedenfor er eksempler på innloggingsfelter jeg liker utformingen på:

Innloggingssiden til tumblr.com. Brukeren skal ikke misforstå hva oppgaven er her.

Innloggingssiden til tumblr.com. Brukeren skal ikke misforstå hva oppgaven er her.

Innloggingssiden til vimeo.com synes jeg er skikkelig hyggelig. Innloggingsfeltene er tydelige på en visuelt tiltrekkende side.

Innloggingssiden til vimeo.com er skikkelig hyggelig. Feltene er tydelige på en visuelt tiltrekkende side.

Netvibes bruker lightbox til innloggingen.

Netvibes bruker lightbox til innloggingen.

Selv om jeg ikke har kommentert Spool sine interaksjonsdesign-erfaringer rundt innloggingen, ser jeg at flere bruker lightbox-teknikken til å lage et innloggingsvindu. Dermed beholdes konteksten og brukeren blir ikke flyttet til en sekundær innloggingsside som eksemplene fra tumblr.com og vimeo.com.

Hos Netvibes har jeg imidlertid flere ganger trykket på den fine, grønne Sign up-knappen etter å ha fylt inn kontoinformasjonen. Tydelige call-to-action for registrering er viktig i en slik kontekst - det skal være lett å registrere seg - men det er noe med utformingen til Netvibes som i hvertfall får meg til å bomme mer enn en gang.

Wufoo.com har en blanding av lightbox og sekundær innloggingsside, og selv om innloggingssiden har tydelige call-to-action for registrering er selve login-knappen lettere å se enn Netvibes sin.

Har du eksempler på innloggingfelter som du aldri finner eller som er vanskelig å fylle ut?

Eller har du en favoritt, andre erfaringer med innlogging eller tips om artikler som tar for seg innlogging og registrering tar jeg gjerne i mot dem her :)

6 kommentarer så langt

  1. william throndsen sa torsdag, 13. november 2008

    aldri så stor forskjell på sign “up” og sign “in” at det gjør noe, nei!

    jeg syns at hvis siden kun er for registrerte brukere, så bør disse ivaretas, og stort sett hele siden bør dedikeres til noe tydelig og lettfattelig noe. dersom noen trenger mer info før de evt signer “up,” så kan denne gjengen heller lete seg rundt etter en lenke. Kroneksempelet i så måte er jo for eksempel what.cd, som jo ikke har noen som helst funksjon for ikke-registrerte, og således i portalen bare er en innloggingsside.

    Allikevel er det jo mange sider som har et såpass formål for uregistrerte brukere at det ikke er formålstjenelig å fokusere bare på innlogging. Til tross for deres mange forskjellige plasseringer, har jeg egentlig aldri irritert meg voldsomt over de, å lete etter ting på internettsider har man jo bare blitt vant til. dessverre, vil du kanskje si!

    har forøvrig alltid irritert meg over at adressen innsida.ntnu.no ikke går direkte til https-sida, men at man må klikke seg videre inn. hvis noen som skal til innsida og ikke skal logge seg inn, så skjønner iallefall ikke jeg hva de gjør der.

    jeg ser at den siste kommentaren min der _kan_ stå for fall, men jeg lar den stå fordetom :)

  2. Lars K sa torsdag, 13. november 2008

    Allikevel har what.cd en egen lenke på forsiden som sier “login”, hvorfor ikke bare vise innloggingsfeltene på førstesiden? :)

    Jeg tror at du ikke har blitt irritert i letingen etter innloggingsfunksjoner fordi de sidene du bruker følger konvensjonene nevnt ovenfor. Det er ikke noe feil ved å måtte lete i seg selv, et nettsted kan ikke støtte alle brukeres behov til enhver tid. Men for at brukeren skal ha en følelse av måloppnåelse bør veien dit ikke oppleves unødvendig kronglete og lett å misforstå. Artikkelen forteller at brukerne er forberedt på å måtte lete etter innloggingsfunksjonen og at det ikke er sterke preferanser for om det er to felter eller en innloggingslenke som tar brukeren dit - bare en av disse inngangene finnes lett tilgjengelig og synlig.

    Morsomt du nevner Innsida, for den inngangen er tung og omstendelig, særlig når brukerne henvises til Innsida for å komme til it`s learning - jeg er helt enig med deg. Snakker om å be brukerne gidde gjøre en innsats…

  3. andy sa torsdag, 13. november 2008

    Innsida og it’s learning er faktisk så snålt at jeg har giddet å memorisere urlen (https://innsida.ntnu.no/sso/?target=itslearning) som dytter deg direkte til it’s learning :-). Klikkefrustrasjonen tok overhånd og jeg bokmerka den over i stedet.

    Et annet spennende konsept med innsida er at den er på norsk, det er forsåvidt greit nok, men det er heller ingen mulighet til å skifte til engelsk (å søke etter “english” gir ingen treff i alle fall) og når den er som nevnt over eneste mulighet for å komme seg inn på it’s learning så gjør det vel ikke terskelen for internasjonale studenter veldig lav.

  4. Lars K sa søndag, 16. november 2008

    Noen tipset meg om snarveilenken http://il.let.no/. Den syntes jeg var mye lettere å legge som bokmerke

  5. tenketing.net » Innlogging på Netvibes sa søndag, 30. november 2008

    [...] For tre uker siden skrev jeg om innloggingsfelter og nevnte hvordan jeg stadig trykte den store, grønne Sign up-knappen til Netvibes når jeg skulle logge inn. Gammelt innloggingsvindu hos Netvibes [...]

  6. tenketing.net » Om tenketing.net og 2008 sa torsdag, 8. januar 2009

    [...] Hvor legger jeg log-in? [...]

Vil du kommentere?

E-postadressen din vil ikke bli vist til andre