#2 Bad: Lycos Email Progress Indicator

This is something I only spotted recently (I rarely use my Lycos mail account - it gets too much spam for it to be usable!!), but it is a good example of a designer simply not thinking things through.

Design Problem:
Here is a series of 3 screen grabs of what happens after you click send on an email:

Step 1:


Step 2:

Step 3:

Why is this bad?
The first thing you are presented with after you click send is a window showing 2 tasks, both of which are ticked, so your natural assumption is to think that your email has sent. However, it actually takes time for the email to really send so this window sits there giving the impression that something has gone wrong.

The design is violating the standard mental model for a progress indication. A mental model is our representation of the system and encapsulates our expectations that we have built up from experience. Any deviation from our expectations makes the system hard to interact with or simply confusing.

What Should Have Been Done?
Lets have a look at what could have been done. Here's step 1 and 2 re-done:

Step 1:
Step 2:

I was a tempted to carry on the existing theme of green ticks by using a red cross to show that the individual step hadn't completed, but by doing this would give the impression that something may have gone wrong and that the step had failed. Instead, I opted for an infinite progress indicator. This is simply an animated GIF and shows the user that something is happening until the step finishes and it is replaced with the green tick.

I also opted to move the progress indication to the right as this is the convention for ticking off an item in a list. This convention is part of the standard mental model so it improves the interaction by giving people what they expect.

On the internet we have colour, pictures and animations to clearly display states to our users. However, sometimes restrictions or limitations remove some of these possibilities. In these cases it is important to try to make a state as clear as possible: you could use a colour similar to the surrounding surface to create a perception of an "off" state; you could group together indicators where un-related elements can exemplify "on" and then rely on the ability to infer other states; if appropriate a great effect can be achieved by not showing a state at all until it becomes relevant (e.g. the standby light on the iBook is invisible until it shines through the opaque plastic when the laptop goes into standby mode).

#1 Good: iPod automatic pause

I thought I'd kick off the blog with an example of good design. Actually, exceptionally good. The iPod is almost an embodiment of good design principles and shows an obsessive amount of attention to detail.

It is actually hard to pick out one example to focus on but, in keeping with the purpose of this blog, I have selected a small feature that many people may not know exists - and even if they do they may not have noticed it.

Design Feature:
Simply, when listening to a song if you pull your headphones out the iPod recognises this and automatically pauses the track.

Why is this good?
By pausing you get to resume from the exact point you were at before, and don't have to rewind to account for the fumbling around trying to plug it back in. When playing music, the device is more or less useless without any speakers/headphones plugged in, so the only sensible thing to do is to pause when they are not.

What can we learn from this?
This feature is an example of an aspect of Forgiveness. Forgiving designs should try to prevent mistakes, but when they do occur, they should minimise the consequences. Here, when the headphone cord is pulled out the consequences are reduced to a pause in the audio, rather than a break in the audio and then a period of adjustment whilst you re-find your place in the track.

You can improve your product by considering what can go wrong in normal operation and then consider how the impact can be reduced, or the mistake prevented in the first place.

Welcome!

Hello, and welcome to Design Touches. This blog is being started in reaction to the poor design and simple lack of thought evident in every day things; be they websites, software, commercial products, buildings, road layout - anything.

This blog will highlight examples of good and bad design (although bad is often easier to spot!). When the design is bad we will suggest improvements, and when it is good we will see what generalisations we can take and what lessons can be learnt.

Some observations may seem obvious, but perhaps they aren't - otherwise the mistake wouldn't have been made!

I sincerely hope that over time you find will find this blog useful. Please feel free to post your comments or examples of poor design that you have encountered and if you disagree with any post - say so and we can explore other solutions.