Living UX

We nearly passed out when we saw the original cookie messaging on Nestle’s UK site:

Where to start? Taking over the whole browser and firing this much information at the user completely disorientates them. Those big cross and tick icons? That’s where you click. There’s no other way to proceed. Despite the negative call-to-action, the ‘No’ column actually seems to be the one Nestle want you to go for, with five pros listed underneath, with the random ‘Yes’ what is it that “This website will not…” - we may never know.

Thankfully, someone seems to have had a quiet word, and they’ve now replaced it with a much more friendly banner at the top of the page:

This time the message explains what a cookie is, yet doesn’t interfere with the experience. It’s still not perfect though - the link accessibility is terrible, being dark grey and white on rollover without any underline, and a dismiss button would be nice.

Charbs flagged up this article by UX Movement, discussing mobile touch target sizes.

It’s a great article and a good starting point, but we’re not convinced pixels are the correct measurement to use due to the complexity of pixels per inch (PPI), and the massive variations across devices.

We think it’s better to design for an appropriate size/space on the screen, e.g. a button should be 1cm square. In terms of how we ensure that is achieved, we can help developers by specifying pixels, as the article suggests, but we need to be careful how that information is used when accounting for different devices, and be wary that screen densities vary massively.

The iPad 3 with its retina screen comes in at 264 PPI, as it has a big screen to go with the big resolution, but the iPhone 4S has much bigger PPI figure of 326. At the other end of the scale, the HTC Wildfire S has a decent sized screen but is only 320px wide, meaning 181 PPI. Some more examples can be found in WikiPedia’s List of displays by pixel density.

All this would seem to confirm that target sizes should be measured physically rather than in pixels.

In this article from the Guardian about the new EU cookie regulations, which are about to take force in the UK, the examples leave a lot to be desired in terms of user experience.

Before we start, it’s worth pointing out that according to the UK Information Commissioner’s Office guidelines, if cookies are used as an essential part of the service being provided, no notification or consent is required.

Here’s a link to the guidelines document - Guidance on the rules on use of cookies and similar technologies (opens a PDF).

The first example the Guardian cites is Delia Smith’s recipe and cooking community, Delia Online. Let’s take a more detailed look at the message:

There is no real information here about what a cookie is, or how they use them - whether they are essential or not. Users will be none-the-wiser as to why they are seeing the message, even though it is “the law”. The link provided takes the user to the general privacy policy meaning they have to search for information on cookies. There is also use of the dreaded “click here” link text - so they’re making a nod towards complying with cookie laws, but not accessibility ones.

And, let’s not forget the name cookie itself. No doubt the irony of a cookie policy on a cooking website will be lost on most users, leaving them trying to work out why there are now laws around the small sweet cakes that Delia, and most of the rest of us, are so fond of!

According to the Guardian, the Information Commissioner’s Office suggested Reddbridge Media as a good solution (below). We’d suggest it’s far from perfect, presenting a conflicting mixture of statements and calls-to-action, with the white underlined text looking just like a link for added confusion:

These are just two examples, and we should at least give credit to the sites for being upfront about their use of cookies. Over the coming months we’ll no doubt see many more variations, and with a bit of luck, perhaps a dominant ‘best practice’ message will come forward!

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

Ethan Marcotte, 2010

Responsive design - it’s all the rage, and rightly so. It’s one website for all. A site that intelligently adjusts to provide the optimum viewing experience for every user.

But it’s not for everyone. Rather than get caught up in the party-trick that is a website remoulding intelligently as you resize the browser, you should consider whether using responsive design will provide the best experience, and if so to what extent should you utilise it.

Here’s a quick run-down of the advantages and disadvantages of responsive design:

Pros

• Deliver a tailored experience for the user’s device, scaling the UI to suit the device (i.e. larger buttons for touch-screen users)
• Show and hide content dependent on whether it is relevant to the device (i.e. showing a contact number more prominently on a mobile browser)
• No wasted real-estate - use of a fluid grid means that content can scale to perfectly fit any screen size
• Less maintenance going forward - one source file for multiple devices
• Relatively future-proof – fluid pages automatically scale to accommodate new devices as they are released

Cons

• Longer design and build time due to effectively creating multiple versions of the same site
• Lack of compatibility for media-queries on older browsers means that users of older devices may not see the correct version for their device
• Longer load time for small-screened devices compared to a standalone mobile site (images are resized rather than delivered at a size specific to the device)
• All devices use the same website structure and navigation, hence the experience must be broadly the same across all devices – this is not always the best route
• Some users prefer to browse the full-size version of a website even if they are on a small screen

Finally some nice hand-drawn icons - Steadicons. The vector download costs $29.

(via Konigi)