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.
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.
Responsivedesign - 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:
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
Treehouse (www.teamtreehouse.com) is Ryan Carson’s latest project, and from what I can work out is the new face of the Think Vitamin members area.
Scroll to the bottom of the page, and you’ll see them using gamification right from the start, with the site slowly revealing itself as users join up - right from the wireframes through to the must-have video tour. This is a really open way of launching a site, but I do feel it might be just a little bit patronising to this technically savvy user group.
Qwiki is a search engine with a twist. Rather than straining your eyes staring at search results, Qwiki dynamically pulls in the data from Wikipedia, Google etc… and reads the information out to you whilst presenting you with a fancy slideshow of images, videos and infographics.
At its core, A/B testing is exactly what it sounds like: you have two versions of an element (A and B) and a metric that defines success. To determine which version is better, you subject both versions to experimentation simultaneously. In the end, you measure which version was more successful and select that version for real-world use.
"When we go out to dinner at a fancy restaurant, we’re hoping for more than just an edible meal. We’re hoping for amazing taste and texture, clever presentation, and memorable ambiance. The pinnacle of a top culinary experience is extreme pleasure. Why don’t we shoot for the same target in web design?"
As mentioned above, it is so important to not only deliver functionality to our users, but to also make their visits to our websites memorable and engaging. Below are two fantastic articles highlighting the importance of Emotional Interface Design.
If you are an Information Architect, User Experience Designer, Interaction Designer or similar and your job is designing digital interactive (web)sites, services or products then join in with the UX Card Sort!