User interface design is one of the most important aspects of web application design, and alot of the time is revisted only when the app is finished, rather than setting out on the right path at the get go.
Making your application easy to use, can make or break the success of the app. It can lower barrier to entry on signup, lower the bounce rate on your site, and increase conversions – all with the smallest of tweaks. Here are a collection of common UI pet hates of mine – and potential things to check with an application on launch.
1) Persisting Data on entry.
Got a login form? Course you do. When you login, and don’t get your password right, the username input should persist its value, as should as many other fields that are (potentially) correct. Great example of how not to do it? Yahoo‘s Login Form. -Let’s see what happens when the password is incorrect:
A complete failure to retain the information I’ve entered previously is just lazy on the part of the programmers. They’ll probably tell you its for security reasons, but regardless of whether the username is a correct one or not (in the database) – it should still persist in the UI. A token can be used to determine if the post request is coming from the correct domain to prevent a dictionary attack against the login form.
The main reason for retaining this information is that I know when my username is correct, and it saves me from having to type both the username and password again when I get my password wrong. If you are as forgetful as me, that happens quite a bit, and becomes quite annoying.
2) Forgetting tab index
The faithful tab index attribute is used within web forms to denote which control the tab key on the keyboard should move to next. If you are developing accessible apps, you simple can’t ignore it. However many developers still fail to put measures in place both disabled users, and for those of us who hate the mousepad on their laptop. (Myself included). The inclusion of
to your input field would denote that it is the first one to get the focus when tabbing through controls. tabindex=2 would be the second one, and so on. I’ve lost count of the e-commerce websites that miss this, often taking the user to a complete different location when they try to hit that make payment button via the keyboard.
Here’s a tip. Browse your site using nothing more than the keyboard. No mouse. You’ll also notice the visual indicator of a small dotted line around highlighted elements. It’s difficult to see where you are visually where you remove this, so keep it in place. Good article over here on how to handle this in your CSS.
3) Poor use of colour
Colour used correctly in a web app can increase usage, breaking conventions on the other hand does the opposite. Here are the colours you need to remember. Red means stop, you’ve done something wrong. Green means ok, go right ahead. Blue and underlined means click me. Deviate from these already preconceived design patterns at your peril.
Dopplr get this wrong – as it feels like I’ve made a mistake when I successfully add a new trip. A subtle change from Red to Green would make all the difference to the interface.
Its well worth reading up on some information on colour theory, and how it impacts the user from a pschological perspective.
4) Postcode validation
Stop trying, at least not with a regular expression. Inevitably you’ll fail. I’ll give you an example.
BT79 DU is a valid Belfast postcode. BT79 0NR is a valid Omagh postcode. And that’s just for two places in Northern Ireland. In the south of Ireland, they don’t have postcodes at all. Period. Nill. Nada. Nothing. Take that alongside the format in the UK – SW1 GHJ – which is different again, and you have a bit of a problem on your hands.
Best plan is to ask for a postcode in plain text and hope the user gets it right, or use a postcode lookup service to validate the postcode for you. Postcode Anywhere offer an API for this sort of thing. Even this will only be available for certain countries.
5) Text input length
Text input’s in my own opinion should illustrate the length of the data that they are expected to hold. For example, if you are providing a postcode control, and your database can only hold 6-7 characters for that field – don’t make it visually bigger than that. You should also be using maxlength checks. A clever JQuery plugin exists to handle this in the user interface client side.
6) Form styling
Reiss.co.uk chose to complete redesign their customer login forms, making it custom from the browsers default.
Whilst this is obviously nice to look at, it risks leaving customers confused, and more likely to drop out before checkout. Whereas a traditional web form is well known, and recognised – custom forms can do the opposite.
The text is also very subtle, and not a stark contrast against the background of the site. Users with poor eyesight – are probably gone already.
This is a classic case of additional aesthetics sacrificing the functionality of a site, and potentially punishing sales.
Maintaining consistency in your UI is extremely important. Changing what something does between screens only serves to piss your users off. For example, if you have say an account button – which takes you to a certain webpage – make sure it does the same thing between screens.
My Google account for example has multiple Google services listed within it. The interface doesn’t change when moving say between Feedburner, or Google Analytics or Google Docs.
Perfect. This is what I’d expect. Consistency in the display. However – Google fail to keep the links functionally the same. If I click on “My Account” when I’m logged into Feedburner, it brings me to a different screen than say, when I’m using Google docs.
Up until a couple of months ago, it was worse again – with ANOTHER alternate screen being shown when you click on “My Account” – when logged into Google Analytics. This pretty much forced the user into using the back button.
Bottom line – if you have a distinctive navigational element that performs a particular function, its a good idea to keep it both visually and functionally the same throughout the lifetime of the application.
8) Page Title
Page Titles, are not only a must for SEO ranking- they are also crucial from a usability perspective. Your page title should always start with the main section of your website – that way when users are hunting for it in their bookmarks, it will be alphabetical.
The Beeb get it wrong. It’s already obvious from the URL that this is a subsite on the BBC’s website, and as such neither needs the “BBC” in the title. Better to name this “Doctor Who – Official Site”.
9) Ignoring conventions
Convention exists to protect us from ourselves. Logo’s top left,search top right – clickable links in blue or buttons with a subtle bevel to look more ‘pushable’. All of these conventions become pre-conceptions when your users are on your site.
Everyone of us comes across theseas we use our computers daily. Whether it be the trash can (for deleted files) or a filing cabinet icon (containing files), they provide new users with a good idea what they can expect when they click on something. Following common patterns found, whilst not terribly exciting, can improve the experience for visitors.