Usability of the Snack Food Give-away

It is easy to be very focussed on your own industry and to always think that Usability is a HCI issue alone.

A series of events culminating in my enlightenment last week has made me reappraise the Usability world. I had a bit of fun as well, so please don't take this post too seriously folks ;-)

It started a couple of weeks ago when I was surprised to find a little foil packet with a Tazo branded playing card-like object with a Simpsons theme in the packet of flavoured chips (this is an Australian Blog, so some of you outside Oz might know them as crisps!) I had bought from a vending machine at work.

This little rectangle of cartoon imagery had no indication of what it was other than a picture of our friend Homer on the back and a game that you could play like stone paper scissors, but with some of Homer's favourite foods instead. The packet of chips just had a "the Simpsons" logo brand tie-in on the front and the name of the Tazo as "TV Tazo".

A bit lame I thought, but on looking closer I realised that there where a couple of cuts in the card and a bit of an area that looked like somewhere that you would put your pincered fingers to pull something apart. After a bit of tugging and using my fingernails to break small cardboard joiners that were supposed to give way under that pulling, I finally slid open the flap and saw a picture of Bart underneath with a blank blackboard graphic and a slightly raised area in the middle of the card.

Now being a creature of the internet I went looking for answers to my questions about this card and what it was for - it was a slow day at work, okay?

A quick Google search found the following on the vendor's web site:

"Each TV Tazo pops up for easy display. You can review for your favourite episode and test your memory of the scenes. Firstly, you must push the TV screen up to reveal more fun! Then Rub n’ Reveal one of 50 Classic chalkboard phrases. Over the other side of the TV Tazo, you can play Homer’s Treat game!"

I thought that it would have been nice to have a bit of this info on the package. And it still didn't give me any idea on how to open the card properly without ripping it. It also didn't tell me what the blank blackboard that Bart was in front of was for. It wasn't a scratchy as I originally thought - it was too hard. But I did find the answer after doing the "Rub n' Reveal" as prompted by the web site!

BTW, grammatically, should that be "Rub 'n' Reveal"? But I digress....

Rubbing for a while with a finger, rather than a coin, brings up a heat activated text of one of the "I must not" messages that Bart writes on the board at the start of each TV episode.

Okay, that was as far as I was going to get; so I had my chips and promptly forgot about it all for a couple of weeks.

Until I made another trip to the vending machine at the start of the week. It had been restocked. The package on my favourite chips had been updated with more information on it to promote the wonderful foil covered square inside, but when I opened the TV Tazo this time I had a more pleasant surprise.

It had a little instruction sheet, complete with six illustrations showing you step by step how to open the cards up! Yes. Six illustrations. Anda all were needed to explain the mystery of opening this littel rectangular card.

The question is, why now? After I'd struggled with two cards before that without instructions, why did they now appear with this little slip of paper with intricately detailed instructions.

I think it was a Usability issue - someone didn't test the design on a target market and the vendors must have received a lot of complaints from people trying to work out how to open the bloody things.

I have evidence to back this up.

Just type in "TV Tazo Simpsons" into Ebay.com.au and see how many of these things are being offered "un-popped". Some would say this is a collector thing so that they would be more valuable. Me? I think that they are being sold in disgust because nobody could open the bloody things!

Enjoy!

The Visual Vocabulary in web based applications

Each element on a web-based application is designed to use colour, shape and its position on the page as part of the way it communicates non-textual information to the user. These standarised ways of displaying page elements on a particular web-based application allow us to build a visual vocabulary that the User can recognise and subconsiously assign a level of importance to.

Once learnt and recognised the User experience is improved, making it easier for Users to be introduced to new functions which have the same visual vocabulary. This results in a drop in customer service enquiries and helps with customer socialisation and training as well as making a customer's own internal training that much simpler.

The visual vocabulary is just as important as text content to a user. Don't mess with it!

The importance of good Graphic User Interface design

I know that it is sometimes hard for a programmer to see why design is important; graphic design is seen by many programmers as a natural enemy since, by nature, graphic designers don't code! This has been the case since the early days of the web when there was a battle between programmers who took delight in hand-coding, and designers who used GUI design environments like Dreamweaver or GoLive - the Microsoft product being abhorred by both designers and programmers will NOT be mentioned here .

But the web has now moved from its research distribution roots to become a complex communications and application platform, and so a lot of hard work and good research has gone into creating a good user experience on the web. And it has taken teams of specialists - programmers and designers - to achieve gains in the field of improved User experience through good GUI design. GUI design may be only one tool that we are now using to improve our products, but since I'm totally biased, I'll push my barrow here.

So programmers, be nice to your interface designers, and interface designers, do the same. Neither of you would have a job without the other!

Design for the User - a fable

Once upon a time there was programmer who went into a cafe for lunch, ordered a coffee, a hamburger and some chips. The programmer liked the look of the cafe so decided to eat in.

The programmer saw that the cafe had a selection of excellent complimentary reading materials - newspapers, magazines and even a copy of the latest Wired magazine full of great geek articles! It was a good cafe, it seemed. The programmer's first impression was being confirmed.

The tables were clean, with a nice set of condiment containers in plain designer white. The stark square white salt shaker with one hole in it and the stark square white pepper shaker with five smaller holes in it were complimented by the stark square white sugar caddy on a stark square white plate in the middle of the stark square white table. Very Zen. The programmer's friends (well at least the ones who all wear black t-shirts) should be told about this place.

The coffee was delivered to the programmer's table and it was also good. A mental note to come back was almost in place. Now all that was needed was the hamburger and chips and the programmer would be truly happy. Happy that the right choice for lunch had been made.

The meal arrived promptly, the waiting staff was courteous, the food looked good. The hamburger was big, juicy and mouthwatering. The chips were fresh and just out of the deep fry. The aroma of the chips was fantastic and all they needed was a bit of salt and the meal would be complete and perfect.

The programmer reached for the one-holed salt shaker and proceeded to apply a liberal amount of the contents of the shaker over the chips. But there was something wrong. It was not salt, but pepper in the shaker.

Hold on, thought the programmer? Salt shakers have one big hole, and pepper shakers have a lot of smaller holes don't they? It has always been like that, hasn't it? There has to be a law about it somewhere?

Then the thought came: My chips are ruined!

And: This cafe sucks!!

What happened? All was milk and honey until the salt shaker turned out to not be what the programmer expected. It ruined the moment.

Yet it was such a small thing; after all, all the programmer had to do was take the plate of chips back to the counter and explain the situation, ask for fresh chips and then go looking for a salt shaker that actually had salt in it. It would have been worse if the programmer had tried to put salt on the hamburger. Just a hick-up really, wasn't it. Just a little mistake made by an overworked kitchen hand when re-filling the condiment containers - they look the same when upside-down with their fill caps off. The programmer is over-reacting, surely?

The moral to this fable...

Little things annoy people. A whole stack of positive experiences were ruined by one negative. Good coffee, targeted geek reading materials, great ambience and attentive waiting staff were all cancelled out by one smallish mistake.

It could be argued that the whole experience in a web site or within a web-based application is the same. The convention of a salt shaker with one hole is kind of like a consistent interface that is repeated throughout a web site. The User has always associated a single hole in a plain white shaker as salt, NOT pepper. It was a visual indicator that was wrong. A rule of thumb to use is that you shouldn't go against the existing visual language but if you do, make sure that the User is aware of the change. Don't just expect the User to KNOW that there is pepper inside the shaker, rather than the expected salt.

It only takes one annoying inconsistency to spoil the party and make your users hate you! But then this doesn't happen to you guys, does it?

Think about it.