In the past I’ve always put it down to hardware performance, multiple Apps being open, my internet connection or just the age of the phone.

However, after listening to the always fascinating Peter-Paul Koch talk with Jen Simmons on The Web Ahead, I’m now much better informed. 

My daily commute is pretty quick now but it does mean these extra long podcasts take a lot longer to get through than when I was commuting to London. However, it’s really worth listening to this one all the way through. As you would imagine from PPK, there’s plenty of information to take in but it’s always relevant and insightful.

So rather than try and summarise the whole interview, I thought I’d highlight one section that I found particularly interesting – where PPK explains why you experience a delay in clicking links in smartphones. (This isn’t going to be a word-for-word transcript but it captures the parts that interested me. For the whole interview head over to The Web Ahead on 5×5).

“In principle, a touch event is very simple. If the user touches the screen… a touchstart event fires, if a user moves his finger a touchmove event fires, if he releases the screen a touchend event fires. And that’s basically it.”

“The complicated part of this is, what do we do with the mouse events, like mouseover, mouseout, etc? In theory we should say these events don’t make any sense on a touchscreen device because it doesn’t have a mouse. The problem is there are far too many websites out there that depend on the mouse events, so mobile browser vendors are required to support them too.”

“So what they do now, is that when you touch the screen, a touchstart event fires first and then all the rest fire; mouseover, mousemove, mousedown, mouseup, mouseclick, they all fire once at the start of your touch on a touchscreen device. Which basically means that the mouse events are hopeless on mobile…but the click events are fairly safe. So if you have a website that depends on click events, don’t worry, that will work fine on a mobile device.”

“However, if you’ve done some testing with the click event on mobile devices, you may have noticed that it usually takes a little while, around 300 milliseconds, for the click events to actually filter through. So basically you touch a link and you expect to be taken to the next age immediately, that does not happen, the browser waits for a little while.”

Research into response times tells us that at 300ms is at the “level of responsiveness [that] is essential to support the feeling of direct manipulation. In other words, “the outcome feels like it was caused by the user, not the computer.” So this is an acceptable delay and I am left feeling that yes, I did cause the link to open, but the delay is definitely noticeable. It’s fortunate that this delay is acceptable because there’s nothing we can do about it:

“That is the main problem we’re seeing right not with touch events…that touch action is overloaded. Because at the moment you do that, the OS has no clue as to what you might do next. You might release the screen immediately again which means you clicked on this and I should follow the link, or submit the form or whatever; you can start to move your finger which means you’re going to scroll now; or you can add a second finger to pinch/zoom.”

“The point is that the OS has to wait for a little while to figure out what you’re actually trying to do and that is something that cannot be avoided. That’s why it’s always the case that when you click on a link it takes a little while for the browser to figure out that you have actually clicked on a link and that’s absolutely insolveable.”

You can find out more by downloading Peter-Paul’s presentation on touch events, given back in April 2011.

Have you ever walked into a room and completely forgotten what you came in for? Judging by the various websites and Facebook pages dedicated to the phenomenon, “Roomnesia” is a familiar occurrence.

Recent research by Gabriel Radvansky et al [1] goes some way to explain this phenomenon and in doing so, suggests methods to overcome the temporary amnesia we suffer. In this post I’ll outline his research, his team’s findings and discuss the application to the field of user experience design.

Psychologists believe that memories are laid down in the brain in a way analogous to the chapters of a book. Information stored in the current chapter is much easier to recall than information stored in a previous one. Psychologists call these discrete sections memory episodes. Radvansky’s findings suggest that the simple act of walking through a doorway creates a new memory episode, thereby making it harder for us to recall the previous episode – i.e. what it was we came into the room for.

In their experiments, Radvansky and his team had participants walk from room to room, through doorways, picking up objects from a table and depositing them on a subsequent table in another room. Once picked up, the object was hidden from their view in a bag or box that accompanied them. Participants were then questioned about the objects they had with them at regular stages: on entering a new room through an open doorway, or after crossing halfway through a room. Radvansky then showed the participants an object and asked them to recall if it was either the object they were currently carrying or the one they’d just set down.

The outcome of their research showed that: “…walking through doorways serves as an event boundary, thereby initiating the updating of one’s event model – i.e. the creation of a new episode in memory”.

To counter alternative explanations provided by contextual memory theorists, Radvansky ran the experiment several times and with a number of variations. (Contextual memory theory suggests that it is easier to recall information in an environment similar to that which we first stored the memory than in an environment that’s very different – remember your teacher’s advice not to listen to music when revising!). Interestingly; in two of the three variations, Radvansky tested subjects in virtual environments – three-dimensional recreations displayed on a computer monitor. In other words, you don’t need to be physically active to create new memory episodes.

If memory is affected in this way, what impact does that have on the journey our visitors take through our websites? Should we avoid making visitors walk through form split across multiple pages? Should we cram everything that’s important on the homepage? Be constantly reminding them why they’re here and where they are?

The booking summary

A lot of my work focusses on keeping the user engaged throughout a booking path. There are many reasons why customers will drop-off during the course of a booking:

• they might find the final price too expensive
• account creation is too taxing
• the number of fields is daunting
• shipping costs are excessive
• they’re distracted by the possibility of a voucher discount and never return
• And possibly: they forget how great the product they are about to buy is!

And so one of the key elements we always display in the booking path is a summary of where the user is now. Going back to Radvansky’s experiment above – I like to think we’re reminding customers what’s in their bag.

Other techniques

So with the research fresh in our minds, what other techniques can we employ to improve the user’s experience?

Don’t expect the user to remember codes (voucher codes, trip codes, product IDs)

Product SKU‘s and trip codes might mean something to you but your user doesn’t care. Never make them remember information from one screen to another, there’s simply no need.

Ensure page titles match links leading to them

A lot of things can happen between clicking on a link and landing on a page – make sure it’s obvious why the visitor is at the resulting page. This could be a “design thing” (the branding matches) or a “copywriting thing” (the page titles are meaningful), just make sure it’s a “done thing”.

Use natural language that your customers understand

Forcing users to learn and remember new terms isn’t a great strategy. As well as creating doubt in their mind and making them feel stupid, having to remember a new definition will add more friction to the experience.

Make your site memorable as the repository of information

Recent research [PDF, 200Kb] suggests the Internet is becoming an external part of our memory and that we are experiencing “reduced memory for the actual information, but enhanced memory for where to find the information.” Simply put: we can’t remember the name of the director of Memento but we can remember where to find the information (e.g. IMDb). By making your website memorable as the store of relevant information, you might gain return visitors. Read more at UX Mag.

In summary

It’s easy to forget what you went into a room for. Make your visitors journey through your website less painful by offering memory prompts and reducing the cognitive load.

This post was considerably re-worked for publication at UX Booth - read the updated version there.

[1] Radvansky, G., Krawietz, S., and Tamplin, A. (2011). Walking through doorways causes forgetting: Further explorations. The Quarterly Journal of Experimental Psychology, 64 (8), 1632-1645 DOI: 10.1080/17470218.2011.571267

Adobe’s recent headline-grabbing decisions to drop development of the mobile Flash player obviously hasn’t passed the developers of this great game by. One of the best things about Glitch is the sense of humour and clearly the good folks at Tiny Speck have this in spades.

Recently I came across this new item, which I think goes to show their feelings for the platform:

Although it is interesting to note that Vendors will not buy this item…

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! Turns out people can train themselves to multitask.
• 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)

Mac OS X Finder certainly has its detractors but I find it useful enough to not bother installing alternatives.

One shortcut that I really think it missing though is moving keyboard focus to Finder’s Sidebar (the left-hand column that holds Devices, Shared, Places etc.). I always drag current project folders into the Sidebar to create shortcuts that reduce folder navigation pains and not having keyboard access to the Sidebar always means grabbing the mouse to choose my Shortcut before returning to the comfort of the keyboard.

A number of people have found this is a nuisance and many bug reports have been filed.

Until it’s addressed (maybe Lion fixes it?), here’s what I do:

* Create a “Shortcuts” folder anywhere
* Drag that into the Sidebar to create a shortcut
* Create Aliases for all the folders you want quick access to and move them into your Shortcuts folder
* Open Sidebar Preferences (right-click anywhere in the Sidebar)
* Go to the ‘General’ tab
* Change ‘New Finder windows open:’ to your Shortcuts folder.

This way, every time you launch a Finder window, you’ll automatically be inside Shortcuts and have access to your favourite folders with the keyboard.

The benefit of using aliases is that you can rename them to something much more meaningful to you. Often we repeat folder structures for different clients, so having five ‘html’ shortcuts in your Sidebar gets quite confusing. Now you can rename the aliases to ‘Foo html’, ‘Bar html’ etc.

Obviously this requires you to manage a different set of shortcuts so YMMV… but possibly it’ll help you until Apple address this problem.

Anyone know if it has been addressed in Lion?

Cheers,
Tim

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!