1. Don’t Make Me Think!
If you don’t already know Steve Krug’s book Don’t Make Me Think then please beg, steal or borrow a copy. It’s an entertaining read and it doesn’t take long to get through. The 3-second take-away; people are unwilling to think more than they have to. Here are a few considerations stemming from that principle:

• People will do the least amount of work possible to get a task done.
• Progressive disclosure: it’s better to show people a little information and let them choose if they want more details. Fortunately this can be helpful for SEO too.
• Instead of just describing things, show people an example.
• Affordance: pay attention to the affordance of objects on the screen you are designing. I.e. if something is clickable make sure it looks like it’s clickable.
• Only provide the features that people really need. Don’t rely on your opinion of what you think they need; do user research to actually find out. Giving people more than they need just clutters up the experience.
• Provide sensible defaults. Defaults let people do less work to get the job done.

2. People Have Limitations

• Information overload: people can only look at so much information on a screen without their eyes and brains starting to hurt. Only provide the information that’s needed at the moment (see progressive disclosure above?).
• Make the information easy to access/read/understand (read more).
• Use headers, short blocks of text and bulleted lists.
• People can’t multi-task. It’s not just men and the research is very clear!
• People prefer short line lengths, but they read better with longer ones! It’s a conundrum, so decide whether preference or performance is more important in your case. Just bear in mind that people are going to ask for things that aren’t best for them.

3. People are Social

• People will always try to use technology to be social. This has been true for thousands of years.
• Social validation: people look to others for guidance on what they should do, especially if they are uncertain. E.g. ratings and reviews.
• Reciprocity: If you do me a favour then I will feel indebted to give you a favour back. Research shows that if you want people to fill out a form, give them something they want first and then ask for them to fill out the form, not vice versa.
• Imitation: when you watch someone do something, the same parts in your brain light up as though you were doing it yourself (called mirror neurones). We are programmed with our biology to imitate. If you want people to do something then show someone else doing it.
• Dunbar’s number: Research suggests you are only likely to have strong ties to 150 people. Strong ties are defined as ties with people you are in close physical proximity to. But weak ties can be in the thousands and are very influential (e.g. Facebook).

Read the full list of Susan’s ideas.

UX Mag have gone a step further and translated Susan’s principles into a heuristic checklist that can be used to evaluate interfaces. They’ve even created it in Google docs to make sharing that much easier.

That’s it for now. Feel free to add any comments you might have.

Negative Aging and Weibull distributions

Stick with me, this won’t be as mathematical as it sounds! The Weibull distribution comes from the world of engineering. Simply speaking, it measures the probability that a component will fail at any particular time, given that it has worked up until now. We can apply this to the design of websites if we consider ‘the user leaving the page’ as our ‘component failure’.

There are two different types of Weibull distribution:

1. positive aging (where the older a component is, the more likely it is to break – or the longer a visitor stays on a site, the more likely they are to leave)
2. negative aging (where the older a component is, the more likely it is to keep working – or the longer a visitor stays on a site, the more likely they are to stay).

In the physical world, positive aging is more intuitive; the older the fan belt is in your car, the more likely it is to break. On the other hand, negative aging is more understandable when you consider the quality of the product – cheap shoes fall apart and leak in the rain, those patent-leather brogues will last and last.

New research from Microsoft has found that the time users spend on a web page closely follows one of these Weibull distributions. Can you guess which one?

Interestingly, the research discovered that 99% of web pages (a massively convincing result) have a negative aging effect. I.e. the longer a user stays on a page, the more likely they are to stay.

It’s rare for people to linger on web pages because they are so used to finding poor quality content (poor quality components fail quickly), but when users do decide a page has value they hang around.

We all know web page quality is highly variable. The first few seconds on a page is spent assessing this quality. Consider the following graph showing the Weibull distribution:

It’s clear that the first 10 seconds of the visit are critical to a user’s decision to stay or leave. The probability of leaving is very high during these first few seconds because users are extremely skeptical about the quality of the site. The design implications are clear: to gain several minutes of user attention, you must clearly communicate your value proposition within seconds.

So the eternal question is: how? There are thousands of articles, theories, books and conferences dedicated to answering this question. It’s the Holy Grail of all sales and marketing activity; from shop-window displays and billboards to direct mail and banner ads – how do you gain attention and convert that attention to sales? In order to add to the thousands of articles, the next post investigates some principles from psychology and their impact on user experience. Stay tuned!

(For a great overview of the day, take a quick look at the write-up at Cogapp and Thebestisyettocome.)

For my first public talk I felt surprisingly calm. I think it’s because there were a lot of other people in the same boat and a lot of friendly and supportive faces in the crowd. I chose to do a quick introduction to A/B testing and then run an exciting (I hope) quiz, much in the style of Anne Holland’s Whichtestwon.

The intro went well and we had some good discussions about certain points but the highlight (for me anyway) was the quiz. My main concern was that a bunch of UX pro’s would get all five questions right and that I’d be left trying divide the trophy up into little bits. Fortunately, and I think this is testament to the usefulness of A/B tests, the answers aren’t always obvious. Take a moment to view my slides below if you’d like to take the quiz yourself.

How did you do?

(For a complete list of references, see the last slide)

But sometimes, you see some code that defies any sense.

The following snippet is from a content managed page I came across recently (I’ve anonymised it to avoid any potential blushes). I’m sure there are technical reasons for the code that’s been generated – but really – eighteen unique classes, six divs, two spans – and all for just one image with a link on it…

<div class="a b c">
 <div class="d">
  <span class="e">
   <a href="#">
    <div class="f g h i j">
     <div class="k">
      <div class="a l m n o">
       <div class="p">
        <span class="e">
         <img src="#" alt="" class="p q">
        </span>
       </div>
      </div>
     </div>
    </div>
   </a>
  </span>
 </div>
</div>

The sites I’ve been reviewing sell holidays on the water; sailing, river boats, power boats, etc. in some amazing locations. A few users had a bit of trouble with the language used on the sites, namely the words “berth” and “flotilla”. Not a huge amount of trouble but enough to worry them sufficiently for doubt to enter their minds. And doubt is not something you want to engender in customers who are preparing to spend upwards of a couple of thousand pounds.

I suspect that their typical customer understands words like “berth” and “flotilla”. However, these companies are keen to sell to all visitors, irrespective of their boating experience and “berth” is an unusual word to a lot of people. It throws people when they are asked “How many berths are required”, I know – it threw me too. Mostly we guessed correctly, but for a second there is a hesitation. “Does berth mean bed? Or room?”

Our recommendation has been to change “berths” to “beds” and “flotilla” to “fleet”. However, “berth” and “flotilla” are quite legitimate words. Words with meanings specific to boating and sailing. In my opinion they add a certain feel to the site. But if they confuse and prevent a booking, then it’s clear they should be changed.

My problem is that this feels like “dumbing down”. I.e., a part of the “perceived trend to lower the intellectual content of literature, education, news, and other aspects of culture” [Wikipedia]. And it feels like a shame.

The simple solution is to change the words. But I feel there’s a better one – to provide some help text that’s close to hand, therefore contextual to their current task, which explains exactly what a berth is. In the case of “berth”, this would be quite easily achieved. However the term “flotilla” was often used in navigation items. Should we change these links to something more familiar to non-boaty people? But flotilla means something specific – “A fleet of ships or boats”. How do you simplify or explain this?

Any ideas?

“If you do good work for good clients, it will lead to other good work for other good clients. If you do bad work for bad clients, it will lead to other bad work for other bad clients.” Michael Beirut via johnnyholland.tv

Not only does bad work lead to more bad work, it makes it increasingly difficult to argue that what you’ve been asked to do is bad.

And then from Jeffrey Zeldman (see blog post for full unedited version):

“I’ve trained my cats to think they’re in charge… Initially I feed them each half a small can of salmon… [then] I feed them each a half can of whitefish, exactly as I always intended to. They finish with gusto, convinced that they’ve won. I am so in client services.”Jeffrey Zeldman via Zeldman.com

And that’s what makes it so much fun!

I access the internet all the time on my phone and my computer, and I never feel like a user. I feel like a person Julie Dodd, Head of UX & Design @publiczone [via currybetdotnet]

I heartily agree!

Have you ever been at a meeting where a particular solution is proposed and although many people openly admit “that really annoys me” or “I hate it when they do that”, that feature, or trick, still gets implemented? This is often excused by  ‘business requirements’, or the difficulty of doing it another way. However I think the problem really lies in not having enough respect for one’s customers and for not accepting that they are real people (people who find your solution annoying).

I recently had the pleasure of seeing Dr Harry Brignull present his Dark Patterns. These dark patterns, he argues, are more than just the product of lazy designers or misguided business requirements. Dark Patterns are carefully crafted with a solid understanding of human psychology, and they do not have the user’s interests in mind. (The Dark Patterns library is a great resource and if you haven’t been through it, you really should). Nov ’11 update: Harry’s recently been featured on A List Apart.

This started me thinking that actually, a lot of these poor experiences (whether they are deliberate or the result of laziness) are actually the result of having very little respect for your users/customers/audience. And that by having better online manners and treating people with more courtesy, we can help focus the work required to fix them.

Of course the worrying thing about dark patterns is that they have been deliberately designed to fool people (often out of their money). So heartfelt pleas aren’t likely to dissuade their creators from such practices. However, Dark Patterns is starting to have some success by publicly naming and shaming errant companies into action. See, for example, the heartening response from Audible following their listing. But maybe what we need is a more defined ‘Code of conduct’ or maybe a badge to wear with pride in our footers?

I read with interest that super model Erin O’Connor has recently been speaking out against the fashion world lying to women. Having put up with airbrushing and trickery in fashion advertising for many years, several key players have called for industry regulation against these practices.  Their suggestions include kite-marking to show digital tampering or a “golden star” system rewarding the use unaltered photographs.

Whilst I don’t want to draw a comparison between poor web usability and fashion’s obsession with youth and perfection (and the harm this can do to young women), perhaps we should be looking at similar schemes that reward respectful, person-centered, website owners?

This had me thinking; knowing the difficulty some users have in differentiating the Internet from their browser (or from their broadband provider or email for that matter), I started wondering how soon it would be before Facebook’s support department started getting calls that the Internet was broken. When an inexperienced user is clicking on Facebook buttons to log into a ‘Connect’-ed website, it’s understandable that they might start thinking that other website is Facebook.

In one of those wonderful moments of serendipity the internet offers, I then came across Ryan Carson’s post on Facebook being the Internet. How long before a major corporation does away with their .com presence and moves wholesale onto Facebook? What impact will that have on our jobs?

Similar to the story of the user who thought his PC CD tray was a cup holder, these misunderstandings betray a unique way of seeing computers that are amusing because they are jarring. What these misunderstandings help to reveal is a user’s “mental model” of how a computer or website works. Take these recent examples from clientsfromhell:

Client: “Can you please confirm that you are Web 2.0 compliant so that we cannot be sued for discrimination by law?”

-

Designer: “The password is ‘123456’.”
Client: “Upper or lower case?”

-

[Client sent Designer some complex logos (as JPEGs) in order to vectorize them.]

Client: “What exactly is taking so long? If I knew it would take so long, I’d have done it myself.”
Designer: “Vectorizing the logos takes some time because—”
Client: “Time? Renaming files from *.jpg to *.eps takes time?!”

-

These stories could just be dismissed as simple ignorance of course but I think they show a way of thinking that has gone slightly astray – the client has a different mental model of how websites or computers work and this leads to some amusing results.

So what do we mean by “mental model” exactly? This from Wikipedia:

“A mental model is an explanation of someone’s thought process about how something works in the real world. It is a representation of the surrounding world, the relationships between its various parts and a person’s intuitive perception about their own acts and their consequences.” http://en.wikipedia.org/wiki/Mental_model

We use mental models to help understand the world around us. They allow us to operate with objects in space so that our actions can bring about predictable results – it’s when our actions cause unexpected results that frustration occurs. However, with luck, we can learn from the unexpected result and use that new information to refine our mental model. When you’re learning to open a door, the feedback you receive is immediate, physical and obvious. When you’re dealing with computers however, the objects you interact with can’t be known in the same way.

Key characteristics

Mental models have a few key characteristics.

• Mental models include what a person thinks is true, not necessarily what is actually true.
• Mental models are similar in structure to the thing or concept they represent.
• Mental models allow a person to predict the results of his actions.
• Mental models are simpler than the thing or concept they represent. They include only enough information to allow accurate predictions.

http://www.boxesandarrows.com/

A quick example

At home, we have a great power shower. The water is hot within seconds and the stream of water is powerful enough to wake you up no matter how tired. The only problem had been trying to set the temperature.

Looking at the graphics printed on the shower unit, it seems fairly self-explanatory that to get hot water you aim the marker at the red ovals. To reach this conclusion you take information from a number of internal models; ‘taps rotate to turn on water flow’ and ‘red is hot, blue is cold’. And from there it only takes a quick leap of imagination to assume that turning the dial to point at the red dots will result in hot water.

And if you do aim for the red dots, you do indeed get hot water. So far, so good: your mental model is in place, you’ve tested it (turned the dial), and the feedback (hot water) apparently confirms your model. You guessed correctly and you’re now standing underneath a stream of hot water. However, coming back to the shower on a hotter day, you decide you want cooler water. Based on your ‘experiments’ so far, you might reasonably turn the dial to the blue dots in order to cool down. Unfortunately, on this occasion, you actually get much hotter water; your mental model breaks and washes away with the soap.

So what went wrong? Your mental model predicted an outcome and after one test result the model stood up well. Unfortunately, the model was actually technically inaccurate so that when you tried again, your predictions failed.

The shower unit actually regulates temperature by changing the flow rate of the water. The faster the water passes through the unit the colder it is because it’s had less time to warm up. The slower the speed at which the water passes through, the hotter the water.

This very simple piece of information turns your model on its head. Now, instead of aiming at dots, you control the speed of the water and you’re able to control the temperature much more accurately. With this knowledge, you then start to see the graphics more as arrows – the thickest red dot is the head of the arrow pointing to the left, and is saying “turn this way for hot water”. Possibly if these designs were more ‘arrow-like’ their information would have been conveyed more quickly?

Relevance to web design

Mental models can be used by thoughtful designers to make a visit to a website more comfortable and less frustrating. Clicking on similarly styled links should have the same result as learnt at other sites with similar looking links. Clicking on form buttons should result in similar outcomes as has been learnt at other websites that have form buttons. Design standards and patterns are useful because they allow users to build up a mental model of how a website works. Breaking these conventions frustrates the user because it weakens their mental model. Do it at your own risk!

Early on in the conversation Jeff and Dorian discuss some of the drawbacks inherent in following UI metaphors too closely. Making an operating system resemble a home office certainly allows an inexperienced user to start working more quickly, but there are times that the computing power available in modern personal computers can be leveraged to process and display information in far more interesting ways.

Later they discuss the implementation of the page turn in Apple’s new iBooks application. The speakers question whether the animated representation of the page turning is a useful device. The point is made that the design of books was initially a compromise in technology at the time; a trade-off between portability and accessibility. In terms of readability, it is asked, surely the scroll scores more highly? So why do Apple try and recreate the physical book in the iBooks application on the iPhone and iPad? Is it really necessary to force the user to swipe their hand across the screen simply to turn the page? Wouldn’t it be easier to have the content scroll vertically, allowing the user to read a constant stream of text rather than ‘turning’ the pages manually.

So this got me thinking, and whilst I agree that the hand swipe and animation is superfluous, I would argue that the concept of the page itself provides the user with more utility than the boundless vertical scroll.

Personally I haven’t taken to reading books that scroll vertically. I like the feeling of progress achieved by turning the pages, by moving my eyes from the top to the bottom of the page. Also, as the page is static, I feel sure my reading speed is quicker. Textbooks benefit from having their figures and diagrams in a set ‘position’ on the page because you remember the layout of a page and that aids recollection. True, electronic pages are more easily searched so page-layout memory is less important, but I think the page format is a positive aspect of a book.

I’m surprised I like the fixed-page layout in some respects. In the past I’ve recommended clients don’t use page turning effects implemented in Flash or PDF. However, my dislike is more to do with the implementation itself which used to be slow to load, buggy and time-consuming to update.

I do find the animation itself to be unnecessary. Yes it looks nice and responds well (the page follows the finger closely and does feel like it’s being pulled by the user) but I have the feeling this novelty would wear off. Speaking with iPad owners who read books, I discover most of them have turned the animation off and simply tap on the right-hand side of the page to advance. I think this offers the best of both worlds – discrete pages combined with a simple page turner. The Kindle does this by default of course, with the page sliding in right-left as the reader presses the advance button.

I’d be interested to hear how you turn the pages of your electronic books, why not let me know, below.