Clearleft have pulled out all the stops for UX London this year and wheeled in the UE heavyweights: Don Norman, Jared Spool, Peter Merholz… Their conference formula seems to work well – big names + practical workshops = sold out event.
I’m fortunate enough to have a ticket and I’m looking forward to talking shop with as many people as possible.
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).
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:
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.
As part of World Usability Day on Thurs 13 Nov, Bristol Usability Group are running a free usability surgery at Pervasive Media Studio offering advice, help and support for any projects that you think could be more user-focused…
Firefox Mobile Concept Video from Aza Raskin on Vimeo.
“User experience is the most important aspect of having a compelling mobile product.”
…just like town planning and architecture isn’t just for architects and art lovers, the internet isn’t just for computer users and developers
In this article on Boxes and Arrows – UX Design-Planning Not One-man Show – there’s an interesting diagram showing how user experience design fits into the overall design process.
Sometimes it’s hard to draw lines between the different elements of design, particularly if you are used to working in small teams.
Johnny Lee demos his amazing Wii Remote hacks, which hack the $40 game piece into a digital whiteboard, a touchscreen, and a head-mounted 3-D viewer.
The importance of images in product description pages has been well documented.
A high quality pic can convert someone browsing a site 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 commerce 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.
