User experience and design articles

  • January 4, 2012

In the absence of any insightful Pixel Thread posts for a while, here are some articles and sites I’ve found interesting or useful over the past year…

Design is becoming a competitive advantage for startups
We’ve worked on two start-up projects this year and on both of these projects it’s fair to say that: “Design is no longer considered tactical; instead, it is recognised as a strategic component of the startup process…”

The Anatomy of an Experience Map
I love using experience maps to help understand and design different components of a project. Adaptive path do this very well, they say: “Experience maps have become more prominent over the past few years, largely because companies are realizing the interconnectedness of the cross-channel experience. It’s becoming increasingly useful to gain insight in order to orchestrate service touchpoints over time and space.”

Interaction models for faceted search
2011 was the year when faceted results became a standard for e-commerce. Faceted search simply means we enable users to refine the results displayed on a page by selecting and de-selecting different facets. Asos do this very well.

12 Museum Apps from around the World
Last year we ran a piece of research for San Jose Museum of Technology to help them design an application where museum exhibit designers can collaborate… For 2012, how-about some open-source museum apps which can be populated with content by exhibition curators?

Usability testing with children
We’ve run various usability tests with children for Aardman and BBC, this article summarises some of the challenges.

Mobile and responsive design
2011 was the year when mobile design seems to have finally taken hold with organisations understanding and investing in mobile… For any projects with a web element in 2012, we’re going to work with responsive designs where the layout and possibly some of the content changes depending on the device you view a site on.

Multi-device web design
Designing for multiple devices not limited to iPhone and iPad…

Showcase of responsive layouts
Re-size your browser to preview how these designs work in different devices.

Ecommerce mobile strategy
There are so many options that it’s important to step back, look the business and marketing strategy, and to determine how mobile fits in at the strategic level.

Mobile app design trends
Mobile design is moving at such a pace it can be hard to keep up…

Improve iPad usability in one simple step
If you can combine this stuff with a responsive layout you’re winning the battle!

P.S. Here’s some nice music from Beck

 

BAFTA win for Aardman project

  • June 13, 2011

Huge congratulations to Dan Efergan and the team at Aardman for the recent BAFTA award for Wallace & Gromit’s World of Invention (WOI).

For the past couple of years there’s been lots of buzz around 360 / multi-platform programming, with programme makers and digital producers thinking about how to create productions that can exist on a variety of platforms and make best use of those platforms.

WOI took that bull by the horns by creating a digital experience that was integral the the production. The site hosts a huge amount of extra content designed to encourage people to get hands-on inventing, plus an addictive physics-based flash game.

Pixel Thread worked closely with the team at Aardman on the project – designing user journeys in relation to the multiplatform experience, prototyping site architecture using the BBC’s global experience language GVL3 and running usability tests on the game – so it’s great to see the project being recognised by the industry!

Here’s Aardman’s press release and here’s the finished World of Invention website.

 

Bad online experiences cost money

  • September 27, 2010

Retailers may have lost as much as $44 billion last year due to bad online customer experiences, according to a study by by Harris Interactive and Tealeaf.

$44 billion?!? The numbers might be questionable, but no doubt the figure would be hugely reduced if user research and usability testing were integrated into design projects as standard. After all, simply testing a site with five users will find 80% of usability issues.

Full article detail and infographic on Fast Company.

 

Pixel Thread Awards

  • September 22, 2010

Some recent accolades for Pixel Thread’s work…

1. This site has been awarded site of the day by the hugely respected and followed CSS Awards – “the most prestigious websites in the world selected by an international jury of the top designers, agencies, and bloggers”. Though Pixel Thread’s already been featured in gallery sites across the web, this award means a lot because it’s voted for by a large jury of established industry figures. Thanks guys!

Credit for the award is equally due to Ben Newman, who created the robot illustration and Robeam who crafted the elegant code.

2. Other respected design sites have also featured this site including:
Web Design Ledger – Inspiring agency websites, The Best Designs, CSS Line, CSS Drive, Make Better Websites, Design Fridge, Specky Boy Design Magazine. If you’re one of the editors who featured Pixel Thread – thank you!

3. A large project by Enable earlier this year was a finalist in ‘Best Customer Experience’ category at the Billing & OSS World Excellence Awards in Washington. Pixel Thread supplied the UX research and interaction design. It’s not quite an Oscar, but it’s great when good work is recognised. Congratulations to the team at Enable.

 

Pervasive Gaming

  • June 22, 2010
 

Social Media Revolution

  • May 8, 2010

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?

 

iPhone Design Concepts

  • March 1, 2010

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

Smart.fm iPhone App from Adaptive Path on Vimeo.

 

Get the prototype right, the rest will follow

  • February 9, 2010

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…

 

Thinking Small

  • January 11, 2010

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

  • September 4, 2009

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.

 

UX London wheel in the big guns

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.

 

Crafting the perfect web form

Web Form Design

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

 

Design Pattern Resources

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.

 

World Usability Day

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…

 

Playtime

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!

 

London International Music Show

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.

 

Nintendo Wii Whiteboard

  • May 9, 2008
  •   

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.

 

Designing for 1024×768

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

 

SXSW UK?

  • April 1, 2008

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.

 

Zoomability

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.