Tag Archive for 'User Experience (UX)'

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)

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://www.pictorymag.com/ @Pictory #InterfaceDesign

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

Taming Adobe colour settings for your web browser

*Some artwork I'm working on*

*Some artwork I'm working on*

Disclaimer

If you – like me – are having problems reproducing identical colours between Photoshop and your web browser this post provides a solution.

This post does not concern itself with best practices for printing techniques and managing CMYK colour palettes. I’m primarily a web designer, so settings for print don’t concern me. That said, if you are a print designer you’d still benefit from reading this article, especially if you haven’t come across the term sRGB before.

Reading and scanning on the web are not the same thing

Users read left-to-right. Users scan top-to-bottom. This is why it makes sense to left-justify menu labels (list items) and headings.

Jakob Nielsen

Web app personality is essential

Software is media today, particularly consumer software. When people use it [your software] they approach it in the same way they would approach media. When I say media I’m talking about a magazine, or a newspaper, or a TV show.

When you think about The New York Times vs. The Wall Street Journal, Vanity Fair vs. Vogue, or Fox News vs. CNN: each of these media properties have a voice; they have an attitude; they have a style, and it’s unique, and it’s different.

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.