Tag Archive for 'Interface Design'

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:

http://www.headandshoulders.co.uk/

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

Whitespace

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

Design flourishes under constraints

[On the concept of design in general, regardless of what medium it’s in] Design really flourishes under constraints. The more known quantities that we have to deal with, the more creative solutions we can often apply. After all, design is all about creating order out of chaos.

Ethan Marcotte

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