the curious case of the graphical interface

Until recently I had a rather nescient attitude to the needs of users who have barely seen a computer never mind used one. It’s easy for developers to forget about these people. However they exist, and with the rise of the internet as the dominant carrier of information, I would presume that now more than ever the new computer user is finding their way online.

Most developers have had the “keep it simple” mantra for UI development drilled into them over the years, both in an academic and commercial setting. However, having spent some time educating a few older family members (who fall into the computer newbie category described above) on the ways of the internet, I’m of the impression that it’s not just simplicity that is required but moreover consistency.

For example. A simple hyperlink like this one which seems innocuous to the average user, can cause trouble. Why? Well, when “teaching” people to use the internet it’s helpful if you can define some simple rules. One of these rules might be “Things you can click on will be underlined”. Rules like this give a surprising amount of comfort to an inexperienced computer user. However, until actually watching a family member struggle when links are not underlined I would not have known/believed the problem existed. To them the link above just looks like a piece of coloured text, which they don’t associate with the simple rule. A similar situation occurs when links are in the form of an image, where unless it looks like a button then they are unlikely to click it.

However, many sites don’t underline hyperlinks, so an alternative rule may be “When you move your mouse over a piece of text and it turns into a little hand, then you can click it”. That is as long as someone has not change the default cursor – thank you for this feature Internet Explorer! This rule is not ideal though as means you have to trawl the entire page to find links.

If you plan to really confuse a new user then you can always do the following: fail to underline the text, have it the same colour as the rest of the text, and instead of using an anchor tag, use any tag you like and just assign an onclick handler to the element in javascript. That way you get no cursor that changes to the familar hand as well. Awesome.

The above problem really does exist and I have seen it on many websites even those undertaken by well known web agencies.

This is not the only area of inconsistency, there are many others. In fact, another problem that seemed to cause increased stress levels is time/date input – for example a flight search engine. Most sites that require this functionality tend to provide some sort of calendar widget. Therefore, you can show someone how to input a date by asking them to first click on the calendar image, now click the appropriate button to navigate to the required month, then click on the required day to select. However, every calendar widget is slightly different which is just the start of the confusion. The real problem is reserved for those sites that do not have a calendar widget to select the date. The user then looks everywhere trying to find this calendar button to click, and finally is left pondering the date format to enter manually – if they even get this far. Surely it must be to the benefit of everyone if we agree on a standard calendar widget that can be skinned in some way? Just a thought.

I’m sure there are many other areas where this sort of confusion can occur – I can only begin to imagine the problems with Flash sites! Hence the next time you are designing a webpage that is intended for public consumption it’s probably worth bearing this in mind.

the importance of thoughtful design in web applications

When I think back to around 5 years ago, it was commonplace to use web apps that looked awful, but provided content and services that we couldn’t find elsewhere. In those days it was seen as less desirable to create a website that relied heavily on graphics, and as a result, a “dressed down” website was almost still cool. However, with the rapid increase in bandwidth available to the average user, and the rise in competition between online services and retailers, there is far more to loose having a website whose design sucks.

Now fast-forward to the present day, and we are using the internet more and more as part of our everyday lives. The reality of this is that we programmers can no longer get away with designs that make you cry! This is especially important when a website sells a product or commodities of some form. There is literally nothing that will send me running away from a site faster than poor design. I would rather pay more from a site that has:

  1.  A sensible domain name – this can be hard to find; just how annoying on a scale of 1-10 are those who squat on domain names?
  2. (Up-to-date) contact information, namely: an address; history of the company; a phone number; names and possibly a short biography of the key people running the website – even if you are working in your own in a garage, put your name and tell me who you are.
  3. A well thought out design – it doesn’t have to be fancy, just look as if it was not designed in a day. Basically I just want to know you ain’t going to steal my money.
  4. Copyright dates that are current – this is a small thing, but attention to detail!
  5. Fresh content – a company blog can help here; ideally you want to avoid the web equivalent of the sun bleached items in a corner shop window.
  6. Good spelling and grammar – I’m no expert on this (as you may have noticed) but getting this correct is very important. Spelling in particular.
  7. Secure account login – you may look cheap if you have not coughed out for an SSL certificate; they ain’t that expensive (although being an SSL certificate distributor seems like a licence to print money if you ask me).
  8. The ability to NOT send me a password reminder – I almost cry when I see a site that offers to send me my password via email, as I then know they are storing my password as text in their database somewhere. I can then only imagine what they will do with my credit card details.
  9. A payment system that I don’t have to navigate away from the site to hand over my money, if I don’t want to – some folk are happy with PayPal, I’m still suspicious!
  10. Easy to access help, specifically on: delivery, customer service, and returns.
  11. No links into your site from pop-up ads on external websites.

Focusing on point 3 above in more detail. I understand an innovative website design can cost you a fair bit of money, as graphic designers are not cheap.  As an alternative to expensive design, at least avoid the following:

  1. Pop-ups – a no brainer.
  2. Free hosting – especially hosting supported by ads of any kind.
  3. Poor font choice.
  4. A template based design that several of your competitors are also using – you need to stand out, not blend in.
  5. Writing company biographies in the third-person narrative – LAME.
  6. An entry page with no purpose – it’s rare these days but you still see it.
  7. Using Flash, but not fixing the back button to work as expected.
  8. Input fields that are not long enough to take a typical string, i.e. a credit card box that you can’t fit all the numbers of your card in without scrolling, WTF, how can you double check your number?
  9. Items that are not aligned on the page, but should be – c’mon this doesn’t take long to fix.

The days of amateur design are numbered for those wishing to make a living online.  As more companies make online services available, and give the consumer a choice, then the less likely anyone is going to trust a site that lacks attention to detail.  In my eyes the design does not have to be innovative, it just has to appear safe and trustworthy – obviously eye catching design brings with it attention, that I’m not denying, but it does wear off.  So what key factors do you look for in the design of a website and what is likely to send you running in the opposite direction?

(Update: I was just listening to the boagworld podcast and it happens to mention something that ties in with this quite nicely. So check out the link to find out ways to make your site feel safe).