A couple of people have asked me what consitutes a well designed login page. I’m really not an expert in this area, all I can tell you is what we have learnt from the UK federation WAYF redesign, the work Rod Widdowson has done for the Shibboleth Embedded Discovery Service and general good advice on usability of interfaces. You might also be interested in looking at the Kantara ULX work and the Google work on usability for login screens.
My first piece of advice is, well, make it someone else’s problem! If you are the hardworking developer who has spent a lot of time and effort getting the system to work securely, I think it is only fair that someone else takes on the design work….and it is probably not your forte anyway. All institutions have departments responsible for visual identity guidelines and they really should be taking on the problem of getting the user experience right.
Secondly, there are probably already a whole range of login screens being used within your institution and they should all have the same look and feel wherever possible. Many of them have probably already gone through some user testing as well, so that’s an easy win in terms of getting the design right.
I hate to pick on KCL as my own organisation, but the difference between the design for the student record portal and the experience of a shibbolised login really is quite extreme! It’s fairly easy to copy a bit of html to make the experience better – the phishers do it all the time!
I’m going to use a non-british example of what I think a good login should look like so it is less personal for those interested in the UK. Below is an example from Penn State University, who put a lot of time and money in to identity management so they will have thought about this!
Here are a few things I’ve picked out based on conversations with usability people:
1. Keep it as clean and simple as you possibly can. The framed box in the centre of the screen is favoured by most designers at the moment, as seen on sites like WordPress.
2. Obviously brand with the institutional brand following standard institutional visual identity guidelines.
3. Have a help button, and make sure it goes through to something that is helpful!
4. Include wording that clearly and precisely explains what login you want the user to enter. Provide an example, but not one that works (I’ve seen this many many times, you’d be surprised). Make sure the wording you choose here matches the wording generally used across the institution to describe these credentials – for example KCL refers to our institutional credentials as ‘OneSpace username and password’. Place this above the login box.
5. Provide helpful links for people who may have forgotten their username or password, typically placed immediately below the login boxes. I’d probably change the wording in this example to something more direct like ‘Forgotten Password?’, linked to the process for changing.
6. Think about whether you want to provide links to data protection policies or any other information relating directly to the way your institution handles identity and privacy…but avoid putting on the screen itself as it clutters the login experience.
Other things to think about – please avoid all technical language like ‘LDAP’ or ‘directory’ – users won’t know what you are talking about.
Do think about accessibility, TechDis can help you out with advice if you need it but hopefully your institutional design people are already on top of this very important factor.
Finally, think about the language used when the login fails, and be as helpful as you can with the wording for errors. REFEDS is looking in to crafting some standard language for login failures, which may be worth keeping an eye out for.