Pixel Thread

For better or worse I’ve been spending lots of time recently designing web forms for a few 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:

• use labels above fields for fastest completion rates
• only use a button on the form for the primary action
• make all other actions links, to avoid user errors
• 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

Patterns are optimal solutions to common problems. As common problems are tossed around a community and are resolved, common solutions often spontaneously emerge. Eventually, the best of these rise above the din and self-identify and become refined until they reach the status of a Design Pattern.

~ IAwiki.net

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 compiled by Peter Morville
• 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.

Recently I’ve been thinking about ways of engaging people in workshops. Delegates might have volunteered to attend, but from my experience, it’s more likely they’ve been coerced into it.

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!

A powerful tool in the early stages of developing scenarios is to pretend the interface is magic. If your persona has goals and the product has magical powers to meet them, how simple could the interaction be?

- 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 : )

We’ve been working with Think Again and London International Music Show to produce an interactive element to the event. The big and bold site is designed to be projected onto a screen during the show, and continuously updated with new video and audio content captured by a team of reporters.

www.showblog.co.uk

Firefox Mobile Concept Video from Aza Raskin on Vimeo.

“User experience is the most important aspect of having a compelling mobile product.”

Full details on Aza Raskin’s blog here

An article I’ve written on designing websites to work effectively at 1024×768 screen resolution is published in this month’s .Net magazine and on bbctraining.com (which also includes sample template files to download): Designing sites for 1024×768

Ben Newman’s a talented illustrator with a unique and distinct style. I came across his work in a small gallery in Clifton, then got in touch. I suggested he design a header for Ian Parkinson - parkinsonmedia and he’s going to design a logo for this blog soon : )

Illustration can be a really valuable element of web design. More organic, less digital.

I’ve just signed up for FOWD in London April 17-18. I’m sure I’m not quite cool enough for it, but the speaker list reads like a who’s who of high profile webbers, so it should be an interesting couple of days. I’d love to go out to South by Southwest in Texas next year, so far I haven’t been able to justify the cost (and probably won’t be able to next year either!).

I don’t think we’ll actually be discussing the future of web design, probably more about current web design. Nic says the web’s going to be your desktop within a few years - he’s probably right, it’s already happening. Google Docs has become my most used software after Photoshop and Firefox, and despite a few flaws, Basecamp’s become essential for bigger projects.

Anyway I’m looking forward to “interacting with innovators and thought leaders from across the design community” as FOWD put it on their pitch! See you there?

The importance of images in product description pages has been well documented.

A high quality pic can turn a browser into a customer. As broadband’s become the norm in the western world, online shops have been getting more adventurous with their use of images.

Combined some well written code, product pages are now giving the user the facility to closely inspect an item before buying. Great from the customer and the shop perspective.

Magneto product page has a nice image zoomer and Habitat’s product page has a very tidy mouseover inspection. Probably soon to become the norm across the web. In contrast, the mouseover action on the category home pages of Habitat leave me reeling! (Fail harder?)

The bigger online stores are lagging a bit behind in this respect. The ebay interface is still pretty clunky, Amazon’s product page is hugely cluttered.