Join The Dots Archives

Last week I began to wonder how many times I actually wrote about performing basic usability tests in-house. It has been haunting me so much that I actually checked. And it seems that I wrote about it at least 12 times between this newsletter and my blog posts.

But I realized that very rarely I gave you anything more that some hints on how to do this. Now, to be absolutely honest it just happened that way. And since it just did I decided to correct that. From now on I will be posting tips on how you can easily check if your designs work in real life. I won’t be writing about it every week of course but I will try to make a habit of it.

We kick off this week with a 5 seconds usability test. The simplest and easiest of tests you can run. But quite powerful at that.

What’s it all about?
The basic idea behind this test is to find out how well most common elements of the site are designed. And to see what are the first thing the user notices upon landing on a page and thus to discover if they are the ones he should see from usability point of view.

How does it work?
The whole test is split into 3 parts. In every part you show your user an artwork, this can be a flat image or a working, coded prototype. It doesn’t matter. The user won’t be using the site, they will only be looking at it. The thing is though, you show the user the artwork for a maximum of 5 seconds. And in each part you ask him to answer a specific question.

You start with asking what the website/page is all about.
Then in second part you ask the user to list 3-5 elements they noticed within those 5 seconds of looking on the page.
And in the last part ask the user to describe 3-5 elements they saw. He can describe how those elements look like, work. Anything really. The goal is to find out what the user sees and how he interprets it.

Now, such test has to be run on more than one user to be successful. Preferably a minimum of 5 to get some good results. But in general it is the easiest one you can run in-house. And also it is a test you can run very early in the website development process. As mentioned above you can even test your PSD’s that way.

And if done right the 5 seconds test may reveal some really interesting things about them. Things you might not be expecting at all.

Have you ever landed on your competitors website and immediately felt jealous of the content they had on it? A copy so good that you simply wished you had thought of it first?

Well, it certainly happened to me more than once.
But would you like to have your competition wishing they had the copy you have on yours?
Sure you would.

So what makes a good copy?
A short and sweet answer, a good copy is straight to the point.
It’s written in a way that a reader immediately gets the idea of what are you trying to communicate with him. A good copy is also short and very easy to summarize. And you should write it that way.

How do you do that then?
Well, there is no secret formula really.
One of the methods I have been implementing into my writing is trying to summarize the content before I start writing it. If I can do it, I know what I want to write about. If not, then most likely the copy will not be appealing to the reader.

Recently I discovered a new way to test my content to see if I actually can summarize it myself. I started using Twitter for that.

How does this work?
Twitter allows you to post messages of 140 characters or less in length. If you can summarize what you want to write about within those limitations then you definitely know what you want to write about. And as long as you will not introduce new ideas into that content your copy will be straight to the point.

Of course you don’t have to post your post summaries to Twitter. Any text editor with character count option will do the trick. The key here is to be able to write an extremely  concise version of your web copy and then expanding it a little.

Without going crazy of course.

Fifty six years ago tomorrow Dylan Thomas delivered a full draft of his radio play “Under Milk Wood” to the BBC. The play, although never fully completed (he died 2 months later while touring America) became a masterpiece that stood the test of time. Generations of readers and listeners still enjoy it. Many young people write their essays and thesis’ about it. Just like I did in high school and later during my one year of studying English Literature.

And people all around the world still study and analyze it. They spent years going through it to discover the true depth of it.

And obviously it’s not the only piece like that. There are millions of literary masterpieces which stood the test of time.

Great Pawel, but what’s this got to do with usability?

Well, nothing directly except for the fact that those masterpieces can not be truly discovered in an instant. The same goes for usability. If you really want to get to know it, prepare for a lifelong journey of studying and trying out new things.

So my tip for this week is, read as much as you can about usability. Study it and practice what you have learnt. Try out new solutions, test new ideas and always but always think of the user, not yourself or your client.

In order to help you with at least a reading part, here is a list of 5 books I’d recommend to start your journey with.

1. Jakob Nielsen – Designing Web Usability
2. Jakob Nielsen – Prioritizing Web Usability
A Web Usability Bible in two parts. Although some of the topics they cover became outdated in years they still form the basis for any usability research.

3. Steve Krug – Don’t make me think
One of the most popular usability books. Written in an easy to read manner the book is a very good and concise introduction to Web Usability.

4. Don Norman -  The Design of Everyday Things
Recommended to me by my friend Gary (he receives this newsletter as well, so, thanks!) became of one of the most fascinating reads recently. The Design of Everyday Things is a powerful primer on how–and why–some products satisfy customers while others only frustrate them.

5. Bill Buxton – Sketching User Experiences
A read really for later down the road of usability discovery yet still worth recommending here.

Design is hard work.
I had made this statement many times in various editions of this newsletter in the past. And I still stand by it although I probably never mentioned that building a sites structure is even more difficult.

It is a huge task if you think of it. All this planning how the website and each of its elements will work. How information will be split between pages and sections of the site. And the larger the site the more complicated the whole structure gets. Obviously.

During our Web Usability Morning meeting in August we ran some usability tests on a rather big site. One of the things we were looking at was in fact how well structured the site was. We went through the entire site in detail and discovered more flaws that one could wish for on a usability workshop.

One of those errors really stood out. And unfortunately it is the one I have seen many times before as well.

What is it then?
Placing the same page in various places within the sites structure/navigation.
Although it doesn’t sound very serious in fact it may be a killer of the site.

In short, the error occurs when a designer (or client) decides to place the same page in various levels of navigation on the site.

Why is it a problem?
For one it is confusing the user who may not understand why he constantly goes back to the same page. Especially if he was in a different level of the navigation when he accessed it before. It is like entering a room with tens or hundreds of doors but some doors lead constantly to the same other room. After 2-3 attempts you would simply get irritated, wouldn’t you?

So, what to do if you want to have the same content in various places?
Split the content into separate pages. Usually only part of the entire page relates to each section so split the page into smaller ones and place each in a corresponding section. This way you can target the exact content the user might be looking for.

Another option is to create a landing page for the section. Instead of having two “History” pages for instance, have one with all the info and another which presents only one particular aspect of the site relevant to the section it is placed in and contains a hyperlink to the main one.

But above all, avoid placing the same page in various levels of the navigation.

I am always amazed by the parallels between movie cliches and working with usability.

I was recently asked to help with usability on a fairly large website. And while working with the team I discovered that we were doing exactly what most villains do while planning their next bank robbery or whatever they are up to.

They concentrate on individual elements of the action, key places in the bank or it’s security system and work their plan around them. All without thinking of the whole action. They work out scenarios for each key place separately and then join them together.

And just like them we were focusing on working of interactive elements of the site but ignoring how they will actually look.

Why should you do it that way though?
Simply, focusing on them without thinking of their design gives you a much clearer picture. You can see all steps of the process of completing a task and ultimately know what you need to design.

How do you know what a focus area is?
The easiest description I ever came across was that it’s the area the user focuses on.
This can be a login field, email form, search facility on your e-commerce site. The list can be really long here but you can probably imagine what they are.

How does it work then?
Let’s take an email form as an example. You probably designed many of them.
By creating a simple breakdown of all actions required for the task to be completed you can clearly see what elements you need to design. In this case not only the form but also error and success notifications.

And the larger the system or a website the more complicated those areas become.

What’s the best way to work on focus area?
Simply, list all elements of the area and what each one of them does. Or sketch how it is going to work. Keep them in the order of steps involved. Ideally run it by someone else, test if you haven’t missed anything. From that you should clearly find out if anything is missing.

Example. LOGIN FORM
User:
- input log in details
- receives success or error notification
- receives option to reset password
- receives email with details on how to reset password
- follows steps from email -> password reset page
- resets password
- goes back to log in page

But there is a trick to that.
Always look at the list from the user perspective, not your own.