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.
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.
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:
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:
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
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:
- 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
- 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