Understanding Cognition, User Experience Winners & Losers, and a Design Failure.

Understanding Cognition

In order to design a positive user experience, it is important to understand how humans work from a cognitive perspective. There are three aspects of this attention, perception and memory. By understanding what humans can and can’t do, we can create models of behaviour and guidelines that will aid the user experience design, and avoid asking tasks of users that they will find difficult or impossible (like remembering a long, arbitrary sequence of numbers).

are you sure this is how i save a file?

Attention:

Primarily, we need to understand how users are directed through a task, and the tools we can use to focus or divert attention. This is commonly seen on websites as a ‘call to action’. For example, Google’s sparse design draws immediate attention to its ‘search’ functionality, as this is what Google want user’s to do.

Colour, ordering, spacing and animation can all be used to help attract or divert attention, as well as avoiding over cluttering. Humans are particularly drawn to moving items (like the T-Rex in Jurassic Park), and so this is a tool we can use to attract attention

click where to claim my free prize?

Eye scans showing that people read websites in an ‘F pattern’. Like the shape of a capital F, people will scan along the first line, and then down the page, highlighting mainly on the first word of each sentence, and only occasionally reading a sentence all the way across. This means that people will skim past alot of important sentences, like this one where reading to the end could win you money. It won’t. But you should have read it anyway.

Perception:

Perception seems a bit obvious – it can be visual, auditory or tactile (i.e. force feedback), and changes based on context. There are a few things we need to take into account based on the limits of our perception – text should be legible, icons should be easy to interpret, that sort of thing. Studies done into advertising and copywriting show us simple rules we can follow to make websites and programs more readable – for example it’s easier to read high contrast items, and black on white is read quicker than white on black. Furthermore white space is important in readability.

Memory:

People find recognition easier than recall. To aid this, we want to make things visually consistent, so that people will recognise features they’ve used before, rather than having to remember them. In the before-times, we use to have to remember commands for a terminal (i.e. erase all) and type them in to execute the command. Now GUI’s allow us to present these options on a screen, and have a user select them. Images will aid this, as people remember images easier than they remember words. The user will recognise an icon they’ve used before, and select it to perform the same task.

GIS tells us this is a memorable icon

So, who’s done this right? We’ve been asked to identify 3 products we like using, and 3 we don’t. I’ll also be seeing how they fit in with the cognitive processes talked about above

3 User Experience Winners

• Tweetie.app – Twitter client Tweetie is a success because of it use of context dependant features, and its seamless integration of key features. For example, the ‘new tweet’ button will either start a completely new tweet, or an ‘@’ reply, or a Direct Message, based on where I am when I select it. By assuming the feature the user is most likely to need, it prevents the need for users to remember how to access these features individually.
• Trainline.app – From the first screen of the trainline app for the iPhone you can see the clear ‘call to actions’ that the app has been built around. The app remembers my home station, and can work out which station I’m nearest, and hence can provide me with a single ‘next journey home’ button, which will instantly show me the train to get home. Not only this, but it remembers my frequent journeys, and presents these as buttons as well, making it clear how to get to the options I’m after. By remembering what I use it for, and treating my data as important, the trainline app is a success.   
• The vending machine at Sussex Innovations Center – Wow, this thing is amazing – I’ll make a video for one week! When making your selection, a robot arm comes and picks up your selection, and carries it to the drop bin area. (no just throwing your drink/snack to the floor like other vending machines!). Then, the drop bin opens up automatically and a little light comes on (a good way of attracting attention!). Overall, a positive user experience, it makes me feel like it cares about my selection, and highlights where my attention needs to be at any time.

3 User Experience Losers.

• Texting with the iPhone – Only minor gripes here, both of which my girlfriend (a new iPhone user) has fallen foul of in the last week. First the placement of the send button – right above the keyboard, and less than a centimetre above ‘o’ and ‘p’ – hence very easy to press halfway through writing a text. Second, the placement of the ‘cancel’ button, right above where recipients are added. Sending a group text (for example saying ‘I have a new iPhone, heres my number) to multiple recipients requires clicking multiple times in the top right, again less than a centimetre from the cancel button. And the cancel button doesn’t ask for confirmation (from a blank text), just loses your list of recipients. Denied.
• Ticketmaster – I’ve mentioned in brief my grief with Ticketmaster before, and will briefly touch on it again here (I still intend to go into depth on this topic soon!) The problem with Ticketmaster is it hides its information. If I want to go to a gig, I have to select which date, where I’d like to sit, how much I’d like to pay, before it tells me that they have nothing that matches my selection. So I have to start again from the beginning of the process. Repeatedly. And then eventually find that all the dates, and all the seats, have sold out. Ticketmaster’s system surely knows that the event is sold out, and yet the website keeps this secret, instead you have to try every possible option and deduce for yourself that tickets are sold out. And if the option you pick is sold out, it forgets everything about what date or what price I want to see, and makes you start the process from the beginning. Surely it could give you alternatives based on what is available? From a cognitive perspective, the system expects me to remember what information I’ve entered before, and avoid entering the same details again. 
• My pen – My pen is magic, and has a rubber on the end hat can erase ink. But is also very cheap. And so the rubber is barely held on simply resting in a gap on the top of the pen. When used to rub things out, the rubber breaks. Without the rubber attached, it’s impossible to extend/retract the pen, without poking it with something else (like another pen). This isn’t really a cognitive failure – just bad design (the device cant be used for the function its been designed for)

Similarities & Differences

So what did the ones that were good do?

• Assumed the tasks the user wanted to do, and made it easy to do them
• Stopped the user from making mistakes, either by hiding dangerous options or through making options undoable.
• Remembered me, and my preferences.

 
In contrast, the items that I considered had a negative user experience

• Allowed me to lose my data, and make permanent mistakes
• Doesn’t give you all the information to reach your goal, and hides information that is in the system, which would be useful to me.
• Requires repetition of tasks, and forgets things you’ve already told it, asking me to put in information again.

Design failure – Water Machine

Just a small design failure this week, but a mystery to me (would welcome comments with solutions). This is the water machine at work:

water machine

We can see there are 5 buttons, all with icons. It’s these icons I’m having trouble with.

The big button has a picture of some drops of water. I’m assuming, due to its prominence, and the fact that I tried it, that this button makes water come out. Great

Now for the four smaller buttons.

Two, very confusingly, have the same picture on (a glass with some ice cubes in). I can’t tell whether these buttons do the same thing, or different things. The same icon would suggest the same function, but maybe not.

The icons on the other side – a steaming mug, and a steaming mug with a plus on, I assume do hot water. And… hotter water? Does that mean that the two ice cube buttons do cold water, and colder water? But then why no plus on one of those buttons? And which one would be colder?

It’s a mystery to me!