Tag Archive for 'Usability'

Head & Shoulders fly-out horizontal nav menu

One usability faux pas I often discover with websites (I’ll add the example website in question [here] when I remember the URL) is clickable areas moving when I try to target them. Here’s a good example of a fly-out menu that’s actually quite effective, unfortunately just not that well executed graphically:


FLOWing introduction animation for a better user experience

Most product websites will layout a bunch of images and text content on the page (maybe even a slick video if you’re lucky) and expect users to make sense of it all. Flow (by MetaLab) on the other hand uses some simple, fun, animation effects to facilitate a visual point of reference, narrating (or aptly: ‘flowing’) the user through the rest of their product experience; discovering more about this task management app – great stuff!

Combining image zoom with effective use of screen real estate

BHS.co.uk (URL valid 28/12/2011) are utilising a great product image zoom feature, making superb use of screen real estate. The logic is if you’re viewing a photo in detail you can’t read at the same time, so why show text? – a progressive disclosure feature of interface design I’m a fan of since it compliments simplicity well.

http://www.bhs.co.uk/mall/productpage.cfm/bhsstore/3770523 (URL valid 28/12/2011)

http://soundcloud.com/ @SoundCloud contextual tooltip #InterfaceDesign

I’ve only just noticed it – perhaps it’s existed for a while? – but I’m favouring the contextual tooltip execution in SoundCloud.com‘s app.

It appeals to my love of large clickable areas and a functional form. It’s almost possible to action most tasks (e.g. ‘Go to track’, ‘Save to favourites’, ‘Download’ etc.) by using a scroll wheel movement or vertical trackpad gesture by itself, leaving my cursor hand free to scratch things with – great stuff!

http://www.foofighters.com/ @foofighters #InterfaceDesign

Great fullscreen use of carousel.

http://ex.fm/ @exfm #InterfaceDesign


Some might argue that passive whitespace is the unconsidered space present within a composition. I disagree: if you don’t consider all your whitespace, that’s just bad design. Passive whitespace creates breathing room and balance. It’s important.

Mark Boulton

http://nclud.com/ @nclud #InterfaceDesign

Wonderfully rich nav/image/description UI widget on http://nclud.com/ @nclud #InterfaceDesign

http://www.pictorymag.com/ @Pictory #InterfaceDesign

Neat image navigation interaction feature on http://www.pictorymag.com/ @Pictory #InterfaceDesign

HTML5 Priority of Constituencies

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In other words costs or difficulties to the user should be given more weight than costs to authors; which in turn should be given more weight than costs to implementors; which should be given more weight than costs to authors of the spec itself, which should be given more weight than those proposing changes for theoretical reasons alone. Of course, it is preferred to make things better for multiple constituencies at once.


(Translated: “It’s all about the user baby!”)