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.
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
tabindex="1"
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.
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.
Its well worth reading up on some information on colour theory, and how it impacts the user from a pschological perspective.
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.
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.
Inconsistency
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 Google Analytics or Google Docs.
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.
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.
Last modified: July 12, 2025