Login designs: the 9 worst ones and where to find good examples
Here's a round up of bad or hard to use login designs and functions - things to avoid if you ever sort your login out. There's a collection of links to good-login resources at the end.
1 Asda: warnings of doom then page not found
Get your email address or password wrong at Asda Pharmacy and you get some doom-laden warnings: "You have 2 attempts left to enter a valid email address".
This counts down to 'your last chance'. My god, what will they do if I get it wrong again? Ah, they'll show me a page not found page. Brilliant!
2 Bank of Scotland - four different URLs to visit
To log in to wealth management at Bank of Scotland, you need to press 4 login buttons and go to 4 different pages, each with another login button or link. You visit all these on your journey until you get to the final page where you can enter some details:
- You press LOG IN in here: Bankofscotland.co.uk
- Which takes you to here where you press LOGIN Bankofscotlandprivateclients.co.uk
- Which takes you here where you press 'Sign in': Bankofscotlandhalifax.co.uk
- And finally here, where you can enter a user name: Bankofscotlandhalifax-online.co.uk
I'm not kidding - you have to press login 3 times - and only on the 4th page can you enter your name and password.
3 Nationwide - weird label
A good idea is to put login or your account.
That's what most sites do, and it helps people find what they're looking for.
For some reason, Nationwide instruct you to 'Sign on' - which is what I thought you did when applying for unemployment benefit.
4 Trinny & Susannah and Findaproperty - use HTTPS
If you're asking people to enter their email address and a password, use a secure connection. These two sites don't.
5 Abbey - don't use odd words for passwords
I'm not sure what is going on with the Abbey.
Your passcode is your password.
Your Registration number is a numerical password or PIN (not some sort of account number as it sounds).
Just call things what everyone else calls them ...
6 Early Learning Centre - don't make other boxes obscure things
If you click login at the Early Learning Centre, then a login panel opens up.
If you then move the mouse towards the panel, it goes over the top navigation.
A dropdown menu then appears, obscuring the login box.
I mean, don't they test these things or use them themselves?
7 T-mobile - I said I wanted to log in didn't I?
T-mobile has a separate login and registration link.
So if I've clicked login, I want to login.
I don't need you to sell the benefits of logging in and hide the box on the right hand side.
I just want to login, please.
8 Many Eyes - huh?
This one speaks for itself ...
I do love Many Eyes' data visualisation tools though! And at least the two messages explaining the insanity have a sense of homour.
9 Post Office - don't have a non-clickable link
I can sort of see why the Post Office has a 'My account' label.
However, it looks like the usual 'My account' clickable link.
You have to click next to it to get it to work ...
Examples of good login design
That's what not to do. Here's what to do:
- 65+ Examples of Login Form Design - this is the intro page. To see them all, click the second link in the first para.
- 36 beautiful login page / form designs - a great collection from Dzine this March.
- 21 beautiful login page/form designs - another collection from Dream CSS
- Attractive Login / Signup Interface Designs - more ideas from Greepit.com
- Designing Login Boxes: 6 examples of Good and Bad Design - thoughts from Design vs Art.
- Interface Design: Login/SignUp - collection from Web Design Ledger
- Login form designs and inspiration - some thoughts on options from OpenCrypt.
- Login Forms - a collection on Flickr (the same user, Factory Joe, has some other collections of interface designs and an interesting blog.)
- Inspriational Login in web design - another collection from Pattern Tap, a pattern library.
- Login - Interaction Design pattern Library - thoughts on good design and a collection from the Welie.com pattern library.
- Using address finders in web forms - this is about address fields in registration processes rather than login. But it was interesting, so I included it here!
If you enjoyed all this, you might enjoy my recent posts on the usability of bing and on the usabilty of taps (yes, taps) and the lessons for web design.
You might also like
- Facebook login: the best comments on the readwriteweb fiasco
- Why would you re-design a form to make it harder to use?
- Information Commissioner: please redesign your stupid form
- Flat-rate VAT scheme form: filling in the online return
- BTconnect email: pop3 and smtp settings and setup for Mail on an Apple Mac