A few years ago, I was at a presentation by Don Norman at the NNGroup Usability week. During his presentation, Don said that “the product is more than the product”. It didn’t really hit home at the time quite how much extra product a product can really have until recently.

We use Ocado for our weekly shop and the user experience is fantastic, more than just online shopping or food delivery, everything is set up to make it as simple as possible for you.

Your shop is delivered in a specific, short time window. Contrast that to other delivery companies who give you a half day or worse still a day window.

The printed bill that the people doing the delivery give to you is organised into what you will do with your shipping next – cupboard, fridge, freezer. Better still the food is organised into bags in the same way and they are colour coded.

The bill also summarises where you have saved money all into one section. You could say this is good marketing for them but it’s also good in financially tight times to see how much you’ve saved.

Finally, they’ll pick up your bags from last week for recycling and give you a free paper. Genius!

All of those things are separate from the online shopping experience which is equally as pleasing and now available on the iPhone

Well done Ocado. Showing everyone how it should be done!

We recently added a twitter feed to our homepage. It was a good little user experience lesson and took a few iterations to get to something useful.

Here is a quick summary of the decisions we made:

• We wanted to show something current to attract interest back to the site, so we chose to just show the last 5 tweets only
• As we already have a blog and showing all tweets at once meant they were pushed below the fold, so we chose to use a carousel
• We chose to show each tweet in the carousel for 10 seconds. We had initially used 5 seconds but that didn’t give the user enough time to read and to follow a link in the tweet vanished
• As some users may have already read earlier tweets or just want to scan them, we gave them the ability to skip forward and back
• To get the maximum possible value we made all elements of the tweet clickable – links, users and soon we’ll add hash tags. We also made them open a new window rather than leave the site, so the user can open each link to read and stay on the site to open the next

They were our thoughts – what are yours?

Last night, with some time to kill in New Malden, the kids and I decided to pop in to a Korean supermarket. There’s a big Korean community in that part of London, and as well as delicious-smelling restaurants there are lots of minimarts that remind me of the Indian and Caribbean stores in South London I used to go to with my grandparents.

The staff were very friendly and regarded us with curiousity and amusement as did the exclusively Korean clientele, and it was only when browsing that I realised that all of the packaging and labels were in Korean (I know,I know). For a while it was really disorienting and we all ended up gravitating to things that we recognised – Korean pot noodle equivalents for my teenaged son, biscuits for my daughter, and packets of seaweed for me.

It made me realise how the visual components and behaviours that we take for granted when developing our applications could seem just as bewildering to users not familiar with them. It made me glad in turn that we have Mark and Lilamani’s usability expertise to hopefully reduce the sense of vertigo for our end users, and I made myself a promise that we would keep factoring in usability testing for all of our products before they see the light of day.

Anyway, I don’t want to labour the point. The kids and I ended up buying a couple of items, all of which were what we thought except my “savoury snack” Jolly Pong which ended up being a very tasty Korean version of Sugar Puffs. Looking at the picture on the packet (Korean writing over what look like Sugar Puffs) I don’t really have an excuse for my assumption other than it came in a savoury snack looking package What’s Korean for caveat emptor?

Finally, a plug for the shop itself. It was called kmart and they were very friendly and very reasonable, even before the 10% discount we got! We’ll definitely be back to stock up on the Jolly Pong and maybe some more exotic/healthy options.

The song needs no plug as far as I’m concerned, but for readers born this side of the 80s here is a live version on YouTube (sadly I couldn’t find a live performance).

I was looking through our blog the other day looking for an old post which had something in I wanted. I thought I would speed up finding the post by using the tag cloud and it struck me what a poor interface control they really are. I think that it comes down to a number of issues:

• context
• volume
• order
• underlying issues with tagging in general

Context

I don’t remember the last time I saw context information for a tag cloud beyond the page it was associated with. Typically you might find them on a blog or a page of case studies so you can guess that maybe these are all possible tags but it’s rare to see any kind of time information as a label e.g. Tags for last month’s articles

Relevance

To support the context point above, I also don’t always want all tags, I want ones that will help me find what I’m looking for and show me trends. I may have written a lot about West Ham at the start of the year but be too embarassed to talk about them now but my shame will be revealed by a cloud showing tags for the whole year. Perhaps it would be better to show two breakdowns, the last month or three months (obviously depending on what you’re tagging) and everything.

Order

There doesn’t seem to be an emerging convention across sites what order show tags in. Some show in the order you first used the tag, some show in alphabetical order, some show most used first. I think alphabetical order is probably the least useful as different people will use a different tag for the same thing – you say macbeth, I say the scottish play. Then first used and most used well again I think this depends on when/why you are displaying the tags.

Tags

Yep – I do think some problems just come with tagging’s baggage. It’s so easy for you to end up with a number of tags which are really should be the same e.g. socialmedia, socialnetworking (social media eskimos can argue amongst themselves that these are really different). It’s easy to end up with huge numbers of tags even with a small number of things to tag. I recently looked at a competitors case studies and there was a full web page of them – horrible

So, clearly if I’m writing this post, we couldn’t leave out pages using tag clouds. We’ve now switched to summary tables in usage order (clearly labelled of course) with a full list of tags should you need them. I’d be interested in whether anyone has ever done any usability testing with tag clouds and what they found.

In an earlier post, I talked about the importance of wireframes as a communication tool. As we’re working with Android, being able to quickly create wireframes for Android phones is a must. I’ve looked around for a good set of Android shapes for Visio and couldn’t find anything suitable, so I have created some that you can download.

The library includes:

• project layout, chrome and notes
• navigation controls
• feedback controls
• lists
• form elements
• gestures

I think this is a pretty complete set but please let me know if you feel it is missing anything that I should add.

To make it easier to see how to use them, I’ve also included an example set of wireframes (visio and pdf) that you can download. It shows an android version of our time recording application.