9 usability mistakes even the big boys make.

October 1, 200928 Comments
Facebook Twitter Pinterest Plusone

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:

auto 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

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.

amazon

Amazon’s left hand side menu has been implemented with some javascript enhancement. It can’t however be accessed with anything other than a mouse.

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.

dopplr-ui-fail

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

Design for design’s sake is stupid. There is such a thing as a website or web application that has been overdesigned. reiss

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.

7) 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.

google-account 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.

untitled

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.

Filed in: Web Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (28)

Trackback URL | Comments RSS Feed

  1. Bret Clement says:

    Good overview. As an aside, I come from PR world. I got a tour of the usability labs of One to One Interactive yesterday in Boston. Was really impressive – they track where eyes go and even vital signs of users. On the lower end of user testing, Website Magazine published a review of some of the lower cost user testing sites that are out there: http://bit.ly/2RATxW. Your tips also a good resource. Thanks.

  2. BWI says:

    Tab order is something that drives me nuts. Your site gets it right when filling this comment form. I’ve seen a few of the “big boys” continue to make this mistake even after I tell them they are.

  3. Enjoyed the article and you brought up some very relevant points. Just don’t agree with the BBC example for page titles. I think page titles should always begin with the name of the website. That way when i bookmark a video site on Doctor Who and the BBC site, i will know what i’m looking at. This also helps when looking at titles in tabs (the favicon helps a lot more).

  4. Allister says:

    I heartily agree with most of what you have written except for two points:

    1) I think your view on Page Titles is too subjective. Whilst I may not care to see “BBC – Doctor Who” in my bookmarks, I would care to see “BBC – World News”, “BBC – UK News” etc. I think it depends a bit on the nature of the content.

    2) You missed (as a point of usability, and in your own execution) “readability”. As I write this, I am correcting mistakes as I go. Once written I will read the whole thing over again to make sure it is coherent and I haven’t missed any typos or worse.

    In “Forgetting tab index” I found three grammar errors before the picture, which makes it difficult to read.
    There are more in following topics. We all make mistakes – I do it far too often for my own liking – but we can all review our own work to ensure the best possible quality. And I KNOW you can do it – I didn’t spot a single misplaced apostrophe!

  5. garydubh says:

    Interesting article…

    just to correct one of your comments about postcodes and Ireland – there is a Geo postcoding system for Ireland – a beta test version is at http://www.irishpostcodes.ie – shortly to move to full release. The full version of this syetms has been tested with Garmin over the last 18 months.

    This system has inherent elements to directly support validation!

  6. Paul Anthony says:

    @Allister

    Many thanks for commenting. You make a very valid point, and I’ll have to make sure I do some more editing / re-reading before pressing the submit button. Sometimes it takes our peers to point things like this out in order to improve!

    @Everyone

    Thanks one and all for commenting – and for the tweets, your opinions all count and add to the article.

  7. Ivo Bosma says:

    I’ve experieced (as a user) a lot of the points you’re mentioning… Maybe big companies make even more mistakes than smaller companies, because often a lot of people are involved. Nice article!

  8. Paul Anthony says:

    @Ivo -

    I agree entirely – I’m pretty sure that plays a big part in things, and theres a lesson for small business owners in there. Attention to detail is what can make your product out perform larger companies, and ultimately help you become chosen as a supplier.

    Paul.

  9. Joe Chidzik says:

    Tabindex is not necessarily a good thing if used incorrectly, particulary for keyboard only users.

    As a general rule, you should apply the tabindex to all tabbable elements on a page, or none of them (this includes form elements and links).

    In some browsers, the tab order will run through all of the items with a tabindex attribute set, and then move onto the non-tabindexed elements. If you have a lengthy form that has all of the fields tabindexed, then a keyboard user arriving at the page will first of all have to tab through the entire form before being able to tab around the rest of the page.

    A better solution is to order the source code appropriately so that a logical tab order is maintained. Of course, this isn’t always possible, so sometimes you will need to use the tabindex attribute, but in this case you should adopt the all or none approach when applying the tabindex attribute.

  10. Matt Hill says:

    I was going to comment on the problems with using tabindex, but Joe Chidzik already did a great job here.

    As he rightly points out, tabindex should be an ALL or NONE approach. Just applying it to forms and forgetting the rest of the links in the page is a usability nightmare.

  11. Web Axe says:

    Nice article except 2 things: 1) you forgot to number the 9 items. 2) “Forgetting tab index” should be changed to “Don’t Use Tab Index”. This is no longer considered a good web accessibility practice.

  12. Rich Wilson says:

    Don’t forget to check your grammar.

    Text input’s in my own opinion…

  13. There’s an official UK postcode regex published here:

    http://www.cabinetoffice.gov.uk/media/291370/bs7666-v2-0-xsd-PostCodeType.htm

    I’d recommend that be used for anything UK-based.

  14. Jeff says:

    Speaking of usability I’d like to be able to bookmark your article directly from your website, please include this ability so I don’t have to log into delicious.com and go through the manual addition process.

  15. Zor says:

    “input should persist its value”

    Well, no, it shouldn’t. It’s a security threat. And copying verbatim your username isn’t a good idea either, it might have a typo and you might not see it. Tha could leave you try again and again, and if it’s your bank, you’re probably limited in your number of try.

  16. I like the tabindex attribute and to be honest I am not using it aether. I will change that.
    Thanks for the useful article.

  17. John says:

    “input should persist its value”

    Just wanted to reiterate what comment #13 said. Security supersedes usability. With large web companies having millions of people log in, this is even more important. Since Yahoo users are less savvy than the cutting edge web users, they are more prone to leaving logins open on public computers. As the previous commenter said, they are also more likely to make errors in their email address.

  18. j says:

    proofread. seriously.

  19. Paul Anthony says:

    Thanks for all the comments folks.

    Anyone who recons this is a security issue – this is what I propose:

    Form post In > Username persisted on the way back out on a failure. No cookies. The only way this is a security issue, is if the browser is left open.

    @Zor – yes you might have a typo – but that’s not that big a deal in my opinion.

    @j – Will do. Its my weakness.

  20. Zecc says:

    Something that bothers me personally: when comments don’t show the date they were posted.

    Also, black text over a darkish grey background.

    And also, please set the text colour in your comment textarea.
    I agree that my default of bright text on a dark background is unusual, but if you’re going set the background, please set the foreground too.

    Other than that, I liked the blog’s design. And the post.

  21. Zecc says:

    Oops, forgot to check “Notify me of followup comments via e-mail”. Sorry.

  22. Paul Anthony says:

    @Zecc – I know; People in glass houses and all that, but I’ve got a new design planned / coming for 2010- so watch this space.

    Thanks for commenting,

    regards,
    Paul.

  23. anon says:

    Regarding your comment about conventions.
    Always know the cultural background of the people that you are developing your applications for as things that are conventions in your cultural background might not hold when going into other cultural circles.

  24. Asa says:

    Nice article, but don’t confuse usability with creativity. Following conventions can lead to usable sites, surely, but so can beauty, interesting and unique interaction, and emotionally driven experiences. Placing a button in the right place with the right colors can lead someone to click it; compelling someone with the desire to look further can also help them find and click.

    Convention leads us to exactly where we are now – no further. With the pace of growth and change in technology and what is possible on the web, can we really afford to stick only to conventions?

  25. yn0t says:

    I agree with most of your points. However, at the risk of sounding like a troll I must disagree with your point number eight. I prefer to see where the page is served off of. To me, a tittle such as “BBC – The Official Site of Doctor Who” would be better and easier to read. Plus, using this convention any other BBC shows I bookmark would be grouped together. Now, if Doctor Who had their own domain name, I would drop the BBC from the title.

Leave a Reply

Back to Top