Social media is pervasive and touching on more and more elements of our lives – education, work and play.

Last night I listened to an old friend’s record collection. I haven’t seen him for over 15 years, but we’re connected on Facebook and we both use Spotify. Spotify has just added the facility to connect with your Facebook connections and share music. My friend publishes his ‘collection’ and anyone connected can peruse the list.

Recently I’ve been interviewing teachers about the way their students (11-16) use technology. Almost all the students have mobile phones and the vast majority use Facebook in some format on those phones. In fact 50% of mobile internet traffic in the UK is on Facebook.

In this video, Erik Qualman – author of Socialnomics – asks: Is social media a fad or the biggest shift since the industrial revolution?

Great example of lo-fi paper prototyping – aka drawing – from Adaptive Path:

Smart.fm iPhone App from Adaptive Path on Vimeo.

Dave Cronin at Cooper writes about the benefits of prototyping:

1. Prototyping improves your designs. Apple are renown for innovative design. They made 100 prototypes of the MacBook prior to production.
2. Prototyping facilitates communication. Project teams have something to focus on and discuss rather than a 200 page document. Designers can explain ideas by doing rather than talking.
3. Prototypes can be tested with users and refined before the project goes into production – saving time and money.
4. Prototypes help assess technical feasibility and reduce development time. Development teams can see what they need to build, enabling more accurate quotes and planning.

Get the prototype right and the rest will follow…

A lot of the time, we – UX practitioners – talk about thinking big: how does your project fit in with the bigger picture, how big could this project be, what if – etc.

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

Design the box is an exercise that can be useful as a way of uncovering ideas that stakeholders might have about a redesign, without explicitly asking them to draw the new 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.

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.

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

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
• 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!

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.

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.

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

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?

I’ve been thinking for a while that it would be great to set up a design / interactive conference in Bristol. It’s a perfect location, with a small centre, lively web community, lots of great venues around the docks.

But to do it well needs some heavyweights behind it… Bristol Media people have been out to SXSW this year and have been talking about some possibilities on their tumblr.

Maybe with the likes of Mike Bennett of Bristol Media, Benjamin Hostler of Beef, Hazel Grian of Licorice Media, Andy Parkhouse of Team Rubber and Clare Reddington of iShed, it could happen. It would be great to tempt people away from London for a few days. And great for Bristol’s profile as digital city.

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.