Tag Archive for 'Interactive'

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)

Sonia Falcone light art installation @ The Biennale, Santa Cruz Bolivia

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

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

Mozilla Drumbeat festival: ‘Learning is learning, and learning is good.’

Drumbeat – Mozilla’s flagship festival focusing on net-neutrality, openness, and freedom of learning and expression – begins today in Barcelona, Spain. After spending an evening scoping out the scheduled events, workshops, and folks involved, here are some of my MASSIVELY cool highlights and things to watch out for in 2011:

Universal Subtitles

I was impressed to hear Robin Christopherson, Head of Accessibility Services at AbilityNet, sing the praises of YouTube’s auto-captioning tool at FOWD 2010 earlier this year. Mozilla‘s new open source tool – Universal Subtitles – aims to help translate even more videos into a format capable of being easily consumed by deaf and hard of hearing users, as well as ensuring that popular search engines – like Google – can access and archive important video content for years to come. View a video introduction to the new Universal Subtitles tool in all its HTML5 glory.