Jessica Enders has suffered from a life long condition known as a love of designing forms and other transactional interfaces. She is attempting to minimise the adverse symptoms by running her own form design business, Formulate Information Design.
In the first part of this article, we outlined how following three little rules can make account management less painful.
To quickly recap those rules:
- 1. Don’t make the user guess
- Almost every service on the web handles account management slightly differently. As a result, you have to be explicit about the requirements for your service. Otherwise, you’re just being cruel.
- 2. Balance security with usability
- Often, security folk will insist on an approach that compromises the user experience. This is foolish, because poor usability will lead to workarounds, and workarounds in turn lead to weakened security. Instead, aim for a design that is both secure and usable.
- 3. Keep it simple
- Account management is one of your biggest potential barriers to usage. Make the barrier practically invisible through a simple, seamless, pain-free design.
In that first part, we showed how to apply these rules to improve the process of creating new accounts. Now let's take a look at using those same rules to improve the experience of logging in.
The Login Process
Rule #1: Don’t make the user guess
Log in screens are usually relatively minimal, with a field for a username and another for password. Minimal doesn’t always equal simple, though, especially if you hide information that helps explain things to users.
- If the username is an identifier that the user didn’t create — e.g. an electricity account number — tell users what the username is and where they can get it (e.g. “at the top right corner of your bill”).
- If the username is an email address, tell users.
- If the password is a numeric pin, tell users.
- If space allows, instead of “Remember me” use “Remember username on this computer”. (“Remember me” doesn’t really tell the user what will happen.)
Example: What not to do
Roam Express, a provider of electronic tags for paying road tolls, doesn’t tell you where you could find your tag number.
Online accounts give users privacy, control and a personalised experience (imagine Facebook without accounts!). Account management — registration and log in — is, therefore, a necessary evil. Except when it goes wrong, no user likes or cares about account management, they just want to access the service. You can make account management less evil by […]
When it comes to the design and development of forms, one of the most popular topics is the positioning of labels. There are a range of different options, but many articles on the subject touch on only some of the advantages and disadvantages of some of these options.
How do you put all that disparate information together to make a good decision, especially if you’re in a hurry?
It was clearly time to bring everything together in one place. Read on for the different options for form label positioning, and the complete list of advantages and disadvantages for each.
If you haven’t got time for that, the main thing you need to know is: the most usable and accessible option is to have labels always visible, and located above or beside the field. There’s also a handy guide to choosing between these three options.
Options for positioning form labels
For English-based forms, the main options1 are:
- label on top of the field:
- label to the left of the field, and flush left:
- label to the left of the field, and flush right:
- label inside the field:
- label as a tool tip:
Some of these choices are much better than others. Here’s the complete list of advantages and disadvantages for each approach.
Label on top of the field