The Ten Commandments of Web Design: Commandment One
View blog reactions Written on April 3, 2007 by Chris Heald
I remember creating my first web page back in the mid-90s. I was just learning how the whole internet thing worked and I eventually got ahold of a copy of Front Page Express and a Geocities account. The web was a different place back then - segmented and new, disjointed an unexplored. This was before the dotcom boom, and for the most part, it was a Great Unknown, a wild west populated by those who were to become the technical elite. We’ve come a long way in the past decade. CSS and standards, Web 2.0, AJAX, mashups and blogs, dotcoms and venture capital. The web is a different place than it was a decade ago, but there are some fundamental truths about the art and science of web design that have remained constant.
The First Commandment: Thou shalt say what thou meanest
Programmers have a horrid tendancy to indulge in “programmerspeak”. We use terms that exist because of the technology, rather than because of the user. We label submit buttons as “Submit” when what we really means is “Go find products cheaper than $10 that are blue”. We use single-word terms and stilted speech. We don’t describe what things do. We put labels on things and expect the user to figure out what pressing that button does so that in the future when they see that button, they’ll know what it does.
The Bad: Mail.com Let’s look at a case study. Mail.com has a login form, as many sites do.
First of all, what does this form do? There isn’t a label, or a heading, or anything that tells us what the form is for. We’re left guessing.
Next, look at the first box. There is an instruction above it - “Full email address”. This doesn’t tell me anything. It doesn’t ask me to enter my email address. It doesn’t ask me to enter my mail.com email address. It doesn’t even have a colon to indicate that we need to fill something in. For all I know, I should wait for an email address to appear in that box. Second, there is a second label to the left of the box titled “Member Login”. Ok, so what’s the point? Again, no call to action. I can contextually guess that I am supposed to put in something into this field to log in, but the labels are potentially contradictory. One says email, the other says login. I have logins on lots of sites. Which is it?
This seems like a silly example, I’m sure. You say “Oh, but people know to put in their mail.com email address to sign in, because that’s how they’ve always done it”. Yes, they can figure it out…but only because that’s how they’ve done it. The site is only functional in the context of experiences on other sites. This is bad!
Third, there is nothing in that form that tells me what to do if I don’t have a log-in name. I have to look elsewhere on the page to find out how to get one. This form is a “widget”, a distinct piece of functionality on the site that should be self-explanatory and capable of standing on its own. The lack of an option to obtain a log-in costs them members and business.
Fourth, there is a pair of options labeled “select site”, with two options. Which do I pick? I want mail.com, don’t I? I’ve always used mail.com, and that’s how I get to the site, so what’s this beta thing? Beta’s greek, isn’t it? What does that mean, anyway? It tells the user nothing. A better approach may be allowing the user to log in, and then to present them with a choice. “We’re working on a new and better version of the mail.com you know and love. If you would like to try it out, then you can click here [big button]. If you want to keep using the same mail.com that you’re used to, please click here. [big button].” Make a call to action and clearly indicate to the user what each option does.
Fifth, what do I do if I forgot my login name? We’ve hit a brick wall, and there is no “out”. You lose customers by not offering them solutions to their problems.
Finally, this form is guilty of a sin that most web developers are guilty of to one degree or another: the use of the “Go” verb. Go? Go where? I thought I was logging in, so why would I want to go somewhere? “Go” is needlessly ambiguous and excessively lazy. Better options would include “Log in”, “Sign in”, or “Take me to my inbox”.
Let’s look at how friendly this form is.
- What is this form?
- It looks like a login form, but I can’t tell for what. It looks like mail.com or mail.com beta, but I can’t tell which
- What information do I need to enter?
- I should enter either a member ID or my email adddress - I’m not sure which - and my password.
- What does that button do?
- It goes somewhere.
- What do I do if I don’t have an account?
- I don’t know.
- What should I do if I have an account, but can’t remember my username or my password?
- I should click the “Forgot your password?” link if I forgot my password. I don’t see any way to solve my problem if I forgot my username.
- What should I do if I have other questions?
- I don’t know.
The Good: Yahoo! Mail
On the other hand, here’s Yahoo!’s mail form. First off, we see a big, bold instruction: “Sign In to Yahoo!”. We have a call to action. We know why this form exists! Hooray!
Second, we get the input boxes. We have two prompts, both unambiguous. “Yahoo ID:” tells me very clearly that I need to enter my Yahoo ID. Not my “member ID” or an email, but a very specific, named ID. Password is similar.
Next, we have a check box. The label next to us tells us very clearly what it does. “Keep me signed in for two weeks unless I sign out”. Great! There is absolutely no ambiguity - we know that this is a sign-in form, and this box lets us stay signed in for 2 weeks unless we choose otherwise. We can obviously uncheck it to waive this feature.
We have a button, which indicates action. The button reads “Sign In”. No ambiguity there. I know that when I press the button, it will attempt to log me into Yahoo! mail with the Yahoo! ID and password I just entered.
There is a link there that offers help if you forget your login credentials, as well as a link for general help. The user will never hit a brick wall here, unless they have no ID to forget. Fortunately that’s addressed next! There are big, bold letters saying “Don’t have a Yahoo! ID?” Fantastic! I know where to look now. Let’s keep reading. “Signing up is easy” with a link that reads “Sign up”. Another call to action. Excellent!
Every question the user can run into on this form is solved.
- What is this form?
- This is a login form that lets you sign into Yahoo!
- What information do I need to enter?
- I should enter a Yahoo! ID: and my password.
- What does that button do?
- It signs me in.
- What do I do if I don’t have an account?
- I should click the “Sign up” link on the form.
- What should I do if I have an account, but can’t remember my username or my password?
- I should click the “Forgot your user ID or password?” link
- What should I do if I have other questions?
- I should click the “Help” link for all other inquiries
As you can see, it is very important to say what you mean, and to say it clearly. Never leave your customers guessing, and never leave their questions unanswered, or you’re going to end up with a product that they have to work to use before they eventually jump ship for something more friendly.
This concludes part one of The Ten Commandments of Web Design.
Posted in Design
