Good web design is not about pretty pictures. Neither is it about using web standards. It’s about having a user-centric, task-focused philosophy.
What does that mean?
It means instead of starting your design with a mental picture of what everyone else does, or what people say you ‘should’ be doing, or what you’ve done in the past, or what you can make money from, you instead start from what the user wants to achieve. You focus your entire site on connecting users with solutions to their problems.
A great example of task-focused design is Google’s homepage. The user’s task is “I want to find information”, so the dominant feature on the page is the search query box. That makes sense. It’s not a particularly pretty page, it’s not even a web-standards compliant page, Google don’t make any money directly from the homepage, and it’s certainly not there via an examination of what their competition are doing.
It’s there because Google know that great web design is centered solidly around building sites which enable their users to complete the tasks they want to. Solving a user’s problem is delivering a great experience. Sites which deliver great experiences tend to do well. It’s that simple. Google’s homepage funnels users into a highly optimised revenue-generating page by presenting users with a UI which allows them to solve their pain very quickly. Google instant and auto-suggest all feed into this philosophy of reducing the amount of time the user’s problem is unsolved for.
Back to the humble contact form. What is the user’s pain that you’re solving, the task that your task-centric UI is solving? For contact forms, it’s easy – the user wants to send you a message, that’s why they came to your contact form.
So why is it that the first thing your contact form asks the user to do is to type their name? Ok says the user, I’ll type my name. Now can I give you my message? No, we need your email address too. Ok fine, here you go, can I type a message now? No, we need you to fill in this dropdown so we can route your enquiry to the right department. And so on and on and on, putting ever-more barriers between the user and the task they’re trying to accomplish.
The contact form for the White House has thirteen fields to fill out before the user gets to start the task they came there to do! Thirteen!
So here’s the ridiculously simple solution I advocate: Put the message field first.
This way the user completes their task as early in the process as possible. Once they’ve entered their message, there’s a mental tickbox in their head saying “task complete”, and that makes your users happy. It makes your site pleasurable to use. It’s user-centric design.
In the case of our contact form, it also means that when you ask them for the other information, they’ve already invested their time and mental effort writing you a message, so they’re now much less likely to abandon the form when you ask them for those thirteen other pieces of information.
You can apply this philosophy in other areas of your user experience – Amazon use a similar strategy; they allow you to add things to your shopping basket without being logged in. It’s only when you get to the checkout page that you’re asked to log in. Because you’ve invested the time and effort selecting products, you’re less likely to abandon your cart than if they required you to log in before filling your cart. Likewise with ebay, you can actually watch items without being logged in. It’s only when you’ve already begun solving your task that you’re asked to register or log in.
So this post has been a little bit about contact forms, but also I’ve been setting forth a general UX philosophy to use across your whole site. Examine each part of your site and ask “How can I reduce the amount of time between the user expressing a problem and me solving it”. If you have a quantity box on your product widgets, make sure it’s prepopulated to ’1′ not ’0′, likewise make sure that any option dropdowns have an option preselected instead of saying “Choose Colour” as the default. Make the experience as smooth as possible. See every click and keystroke as an obstacle that should be removed if possible.
It’s not just about choosing defaults, it’s about your site navigation and look-and-feel as well. Do users need to be logged in to comment or can you remove that barrier? When browsing dresses, do you also feature prominent links to hats, or would the user have to go right back up the product hierarchy to find a hat that goes with their dress? Can you add an item to your cart in one click? One click from the homepage? When users are registering, do they have to fill out a huge form, or do you just ask for their name and email address and then ask for one extra detail when they next log in, with a “profile 25% complete” display? Do you have to click exactly on the text on your navigation links, or is the background clickable too, increasing the click target area? Do you use ajax loaded content to speed your site up where possible? When you add a product to your cart, does the entire page reload, or does the product widget change into a “product added to cart” notification via ajax? Do your dialogs auto-dismiss after 5 seconds (or better: on mouse enter of the dialog) or do you require the user to click the poky little OK button?
Examine every little part of your site and use the technologies we have available to speed up the flow, both in terms of literal milliseconds, and in conceptual units of clicks and other user actions. Break away from the idea of a website as a sequence of single pages, and move towards the idea of a website as a single application which responds to the actions that the particular user is performing. That’s responsive UI, and it’s the future of the web.
Update: yes yes, my own comment form doesn’t follow the advice, I am working on it, but try not to let that distract you from the over-all message :)