Category: usability

Recognising a Bad User Interface at First Glance

This article trended on Y Combinator’s Hacker News where it generated an elaborate discussion.
It was also voted the Best “Everything Else” Article of July 2015 on CodeProject.
And translated to Japanese (with my approval).


When I wrote my previous blog post, it dawned on me that a trained eye can often spot unfriendly software a mile away.

It’s just like forming and making a first impression when you meet someone new. Apparently, this takes about one-tenth of a second.

Unlike judging a person though, judging a user interface isn’t part of our instinct… yet. But within just a couple of minutes, and often much faster, it’s possible to get a pretty good impression of whether the user interface was thought about or rather just an afterthought.

As I wasn’t sure of how this happened, or which warning signs were actually firing, I started to pay attention and take notes.

Here are my findings…

Too generic or inconsistent use of terms/labels

These aren’t the user’s words, but rather ones the programmer comes up with.

I trialled event organizing software the other day. The visitor/attendee was sometimes called ‘user’, which confused the hell out of me (you could also add additional users/logins that weren’t visitors).

At the company I work for, we once prototyped a new wizard-like process. It consisted of several screens that used 3 different words to depict the same person: the trucker, the cardholder, and the starter (needless to say this was corrected before going into production… and why does this reminds me of The good, the Bad and the Ugly?).

When you know how the process works, you won’t really notice this. But when you’re confronted with this software for the first time, you might wonder whether they’re talking about the same person, or different persons in separate roles, or… who knows?

You don’t want to confuse your users. Hallway testing helps here.

An Excel/development IDE – like user interface

If you ask an inexperienced non-tech person to design a user interface, it often looks like it was designed in Excel. Excel is the most unconstrained application most people know, and a lot of software starts out as an Excel sheet before growing up into ‘real’ software.

On the other hand, developers have a knack of seeing everything as the user interface they’re most familiar with: their development IDE.

eclipse-ide_sm

Use of image-only icons/buttons that have no distinctive meaning

Stock icon images seem suited when you already know what they represent, but when you see them for the first time you often don’t have a clue.

Unless it’s absolutely necessary, use words instead of icons… even though icons look better.

undefined icons UI

Unclear/confusing error messages

(written by the programmer).

Pointless error dialog

Test this by entering an incorrect value in a field or leaving a required field empty.

Do you immediately know where the error is (even without having read the error text), or do you get a generic ‘fill in all required fields’ or ‘this is not a correct value’ error?

Even worse is some database error text. Or no error at all, resulting in a record that wasn’t saved without you knowing it.

Too much text/instructions

‘If you are an X, then you have to fill in Y and Z. If you are not an X, please only fill in Z, unless Z=1, then you should fill Y too.’

I don’t know how this is in other countries, but in Belgium it feels like you’re filing your income tax.

This is typical of programmers being ‘smart’ by avoiding some extra steps/code… and shouldn’t get past QA. Things like this will not only cost you customers, but will also cause a lot of unnecessary service-desk requests.

A long time ago (the previous century actually) I developed EDI software, based on ‘Message Implementation Guides’ (MIG) that contained constructions like these. And instead of thinking about making this more transparent, we just gave the user a number of fields and the MIG’s instructions on which fields should be filled in which case. That was the way it was done, and we didn’t give it a second thought at that time. Thank god for the ability to learn from mistakes.

Message Implementation Guide

Excerpt from an EDI Message Implementation Guide

I’ve even seen this taken one step further into absurdistan when someone thought it was clever to ‘implement’ 2 different messages (data structures) that had some similarities in 1 set of forms.

The time this saves the developer never weighs up to the users getting confused and calling support.

Weird, irrelevant and complex date/time formatting

For example: ‘2015-06-29 15:44:21 EST’, which is probably the default, unformatted output of whatever language/framework the software was programmed in.

15:44 might suffice, or Jun-29 15:44 (which makes sense to European AND US users).

In some cases it can be better to have a more human, relative notation, e.g. ‘within the last hour’, ‘yesterday’, ‘next week’…

Being too Mouse-dependent

No logical tab ordering, no keyboard shortcuts: the need to do everything with the mouse.

This has been annoying users since the invention of the mouse.

Too many pointless message boxes

‘Are you sure you want to print the document?’

Then showing the print dialog where you can still cancel the printing process.

And just how bad is it to print something by accident that it needs your permission in the first place?

Inconsistent warning dialogs

A while ago I saw a CRM-ish application.

When exiting an unsaved contact’s form, it said
‘Are you sure you wish to exit without saving?’

When exiting an unsaved company’s form, it said
‘Save changes before exiting?’

Clicking ‘yes’ obviously gives two different results here.

The user interface is totally empty when starting out

When seeing a ‘clean’ installation or account, there are no instructions to get you started.

You should guide your users towards taking their first steps here.

“You don’t have any contacts yet. Click ‘add contact’ to add your first contact.”
“We see that you’re new. If you want a short tutorial click here.”

You get the picture.

Visual clutter

Unneeded use of separating lines, grouping boxes,.. less of these = easier on the eye. It’s much better to group things together by position than by placing them in the same box.

Do you know more immediate clues that you’re dealing with a lousy user interface?
Tell us in the comments!

Being User Friendly Beyond the Software

A company I once worked with had such long emails that users used to phone to ask, “You just sent me an email… could you please explain what’s in it?”

It was also common that when someone called with a question that wasn’t in the email, the email template was changed to include the answer. That seems the right, logical thing to do, no?

Unless the emails become so long that no one bothers reading them anymore.

Also, when customers called, the support team explained things with the terms they were seeing from the internal software – “I’m sorry sir, your validation is still ‘unverified’.” Unfortunately, in most cases, it meant absolutely nothing to the customer, they didn’t know what their ‘validation’ was and why it was ‘unverified’. And you could see the support people get annoyed because they had to explain this same thing over and over to the ‘stupid users’.

Making your user interface more friendly is an iterative process. The support requests should be regularly checked for recurrent issues so they can be fixed/clarified.

Agree or not? Do you know more immediate signs of a bad user interface?
Tell us in the comments!

Sign up here for more enjoyable, insightful and (dis)informative posts!

Header photo by rdolishny, used under CC BY-NC 2.0

What makes them click ?

The other day (well, actually some weeks ago while relaxing at the beach in Kos) I read ‘Neuro Web Design – What makes them click?’ by Susan Weinschenk. (http://neurowebbook.com)

The book is a fast and easy read (no unnecessary filler) and a good introduction on how your site’s visitors can be steered in the direction you want them to go.

The Obvious

The book handles some of the more known/proven techniques, like for example that ratings/testimonials of other people can help sell your product or service. Another well known technique it talks about is inducing a sense of scarcity/urgency in the visitor. Only 2 seats left! Buy now and get 33% off! It’s not because these are known techniques that they stop working.

Luckily 2/3rd of the book handles less obvious techniques, otherwise it wouldn’t be worth buying.

The Not So Obvious

A less known influencing technique is reciprocity. And then I’m not talking about swapping links with another website, but the fact that someone is more likely to do something for you after you did something for them first. The book cites some studies (I always love the facts and figures) and gives some actual examples of how to implement this in your site’s design, which is less obvious when you think about it. Want to know more ? Buy the book!

Other interesting sources

For a more general introduction to the same principles, I’d suggest ‘Yes! 50 Secrets from the Science of Persuasion’. ‘Yes!…’ cites some of the same studies (it seems there’s a rather limited pool of studies covering this subject), but of course doesn’t show how to implement these techniques in your site’s design. I read ‘Yes!…’ last year, making ‘Neuro Web Design’ just a little bit less interesting.

!!!Always make sure you’re able to measure your changes. If you haven’t yet, check out the advanced segmentation in Google Analytics (don’t be afraid because it says ‘beta’, it works just fine) and Google Website Optimizer.

Worth Buying?

Can I recommend it ? Sure, why not. I think it can be useful for anyone who ever had to think about the design or content of a site. You don’t have to be a marketing guy to want a site you’re involved with to be successful. The content/filler ratio is excellent too: you don’t need to wade through dozens of pages to filter out the interesting bits. (unlike ‘The Design of Sites’, which contains too much useless info and because it’s in dead-tree format, you can’t google it)

If you like it, you might also check out ‘Yes! 50 Secrets from the Science of Persuasion’.

Tip for people living in Europe: check Amazon UK for your book buying needs. Because of the low UK Pound exchange rate, it’s usually considerably cheaper and faster to get a book delivered to your doorstep by Amazon UK compared to having to order it at the local book store or web-shop.

2 great GUI prototyping tools

I’ve had a special interest in GUI design, usability, hci, … for quite some time.

The last few years, when I started working on a new feature I tried to forget everything I know about programming and fully concentrate on the user interface first: who will use it, how should it integrate into their workflow, how often will they use it, etc. Just ban any data model or database thoughts, pick up pen and paper and draw the user interface.

As a programmer you tend to focus on the data first. This is the way we fit the problem into our programmer’s mind, this is also the part that might contain pitfalls and when you ‘solved’ it you’re usually pretty sure that it’s solved in a good (enough) manner (development = left side o/t brain?).

The user interface on the other hand is usually an afterthought: you know you can do it, there’s no challenge here and it gets rushed together because there’s a deadline you need to consider. For most developers, there’s also a lack of that reassuring feeling that you’re on the right track or a big sense of accomplishment when it’s finished (UI design = more right side o/t brain?).

This is obviously not the right way to go about this: for the user, the user interface IS the program. It’s all he or she sees, and even if it doesn’t look like a rushed afterthought, it often feels like one. Most UI’s still are just a way to interact with the data instead of being a handy, useful tool. They are an interface between the keyboard, mouse, monitor and data instead of being an interface between the user and the task.

Although I’m a firm believer in ‘paper prototyping’ and designing the UI with a clear mind away from the machine, I also often miss digital tools like copy/paste and being able to email my mock-up to someone right away. (but still tend to stick to pen and paper, and not only because it’s got a better carbon footprint 😉

However… these 2 quite recent tools could fill that gap:

  • Balsamiq Mockups not free but I guess you can’t afford not to buy it when working in a pro team
  • The Pencil Project which comes as a Firefox plugin and is totally free

So far, no-one I mentioned these to had heard about them. Maybe I talk to the wrong people.

Balsamiq Mockups keeps the sketchy feeling by for example not using 100% straight lines. This might seem a bit backwards but it keeps you from trying to make your design pixel-perfect and gives the impression that your design is still very open to change and suggestions from others. Although it doesn’t feel right in a programmer’s mind, it is ideal in this GUI-prototyping context.

Do I hear someone say ‘Visio’ ? It’s probably just me but the few times I tried it took me ages to design a GUI with Visio. I’ve seen my share of Visio UI mockups, and I often got the impression that they were made by people who only use MS Office products and design an interface to the data instead of a User Interface. Doesn’t mean Visio is bad though, I guess I’m just Pavloved not to like it.

Enjoy!