Pixel Thread

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.

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.

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…

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!

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

…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.

So I finally succumbed and bought a Wii. You have to understand it’s not for me, it’s for the family! Well that’s how I justified it anyway.

My five year old boy is a big fan of miniclip (a big flash games site) and rather than him spending time there on his own, mouse clicking away, I thought it would be good to have a more social way of playing games.

I love the fact that playing a game on the Wii tends to mean you’re moving about, stretching, reaching and swinging arms. This is good for a boy I think.

The Wii fit closed the deal. Now the Wii wouldn’t just be for the kids, myself and Mrs could hop on board! And then I discovered that there’s a Wii specific version of iPlayer, so we could have iPlayer in our living room. Want became need.

Ease of use

So far so good. We’re still discovering it really, but one thing that’s particularly struck me is the ease of use and the overall experience of using the console. I’ve never owned a games console before, so it was great using an operating system that wasn’t designed by Microsoft!

Screens are simple and intuitive. Buttons are big and there are few of them. Choices are usually kept down to two or three. This simplicity is the key to the Wii’s success. My boy has quickly got to grips with it.

Hand Controller

The hand controller which works as a pointer on the screen give a satisfying judder when you ‘mouseover’ a button or clickable item. It even has a small speaker which contributes to making the experience as immersive as possible.

Sounds

Much thought has gone into the sounds which are a key component of the Wii experience. For example the Wii fit board gives a little mouse-type squeak when you step on it - cue much five year old hilarity! When browsing the web, zooming in on a page gives a satisfying swoosh, zooming out reverses the sound. Cue much zooming!

iPlayer

Using the Wii for iPlayer is easy once you know how. You have to install a version of Opera browser and navigate to the iPlayer site on the BBC. You can then zoom in to view full screen and hide the browser furniture. Quality isn’t fantastic as it’s using version 7 of Flash for various reasons, but it’s perfectly watchable.

Usability

Despite the amount of thought that’s clearly gone into the Wii, there are a couple of very obvious usability issues which I’d have though user testing would have caught immediately:

• When you’re playing a game and you want to return to the game homepage, the options presented are ‘Continue Playing’ or ‘Reset’. To me, reset means clear all data and start again rather than return to game home.

• In the web browser there’s no obvious way of saving to favourites. We discovered that you have to press the favourites button twice. And there are a few other small issues.

Just like coca-cola

But overall after a weekend of testing with our inlaws and their boy, Wii’re loving it!

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