Well this is just a little post to stand up for thinking small! Attention to detail is a crucial part of defining an experience. Get the visuals pixel perfect, craft concise and useful micro-copy, structure your crumb trails perfectly and ensure javascript interactions are optimised and efficient and so on etc.

And the inspiration for writing this post? Mission critical stuff: I added a new favicon to this site : )

The idea is that everyone takes a bit of time to think about how the product of service you are about to design digitally would look if it were to be a physical product on the shelves of a supermarket.

To make this work, it’s best to take along pre-prepared blank boxes to the session – just turn some cereal packets inside out – a great excuse to buy copious amounts of Crunchy Nut Cornflakes!

If some of the participants find this exercise a bit fluffy, don’t sweat it. It’s just a quick way of seeing how they’re thinking about the product at that moment in time. It will generate conversation and drawing out issues that need to be resolved.

I’m fortunate enough to have a ticket and I’m looking forward to talking shop with as many people as possible.

Edenbee.com needed to engage an environmentally conscious community inside Facebook. They wanted to build an application that would allow users to create and share green goals.

Teaming up with top-notch clientside developer Robeam, we popped over to Dublin to run a workshop with the Edenbee team, where we tried to nail down who would use the app and get an idea of how it might be structured. Brainstorming was facilitated by the best fish stew in Dublin, lots of coffee and scribbling on walls…

After the workshop we went away and designed some draft personas and user journeys. A few rounds of amends later we were ready to create a full prototype of the application, on which we then ran a round of usability testing / user research.

Sample User Journey

Sample Wireframe of Goal page

Thanks for the link Fergus

I’ve been spending lots of time recently designing web forms for a number different sites. All the sites have a huge number of potential users – one of them already has over a million members. So it’s critical that these forms are designed as efficiently as possible, both from a business perspective and from a user’s perspective.

Initially I was agonising over positioning of labels, positioning of input fields, positioning of buttons, error handling and much more… Until I came across Luke Wroblewski’s excellent book: Web Form Design: Filling in the Blanks. For anyone working with web forms, there’s a wealth of useful advice, based on extensive user research.

Some of the useful tips include:

1. use labels above fields for fastest completion rates
2. only use a button on the form for the primary action
3. make all other actions links, to avoid user errors
4. align the primary action button with the left edge of the input fields above – eye tracking research has shown users follow the line of the left edge of input fields down the page

Personally I’d like to have seen some research into the predict address functionality that’s used across the UK i.e. user enters a post code and house number and the form completes the address. I’m not convinced it’s best practice, but it’s used everywhere here, partly to ensure valid addresses are captured.

Web forms might be an uninspiring subject to read about, but if designing them is part of your craft and you want to be a master craftsman or woman, you need to understand and justify exactly why you are designing them in a particular way. This book will enable you to do just that.

Web Form Design: Filling in the Blanks is published by the excellent Rosenfeld Media and is available as a physical book or as a PDF download.

P.S. Here’s a really good example of how not to design a web form (thanks Stuart).

Given the now ubiquitous use of javascript libraries such as jquery, mootools and YUI for rich interactions across the web, design patterns are more important than ever. With numerous options of implementing functionality such as drag and drop, select a date or expanding and contracting a div, using documented design patterns make sure you don’t re-invent the wheel.

Useful design pattern references include:

• Yahoo Design Pattern Library
• Design Patterns on Flickr
• UI Pattern Library
• Pattern Tap
• UI-patterns
• Konigi
• Search design patterns
• Welie – patterns in interaction design

And for prototype tool of the moment – Axure (thanks for the recommendation Nic) – there’s a library of design and interaction patterns here and another one on Google Code here.

Tim Brown uses some fun exercises to illustrate the fact that play’s important: draw the person next to you in 30 seconds, fill in these circles, fire the foam missiles at me…

I thought this at school and I still think it now: we need more playtime!

Alan Cooper, About Face 3

In the early stages of a project, it can be productive to imagine that the interface you’re going to build can do whatever you want it to do. I try not to think too much about ‘how are we going to achieve this’ because it limits the ideas we come up with.

A great idea might be achieved despite the limitations of the technology.

If you aim for 150%, but end up only reaching 125% because you have to rein in your ideas later in the project, that’s fine. But if you start with the technical constraints, you’ll be aiming for 100%, and the end result might come in at 90%.

BTW Not really relevant but writing this reminded me that the iPlayer volume control goes up to 11 : )