The Road to Good Intentions

It is rare that I find a site these days that is visually appealing, fits my green leanings and yet annoys me so much! I thought web designers and coders knew better by now.

I'm talking about the clean and simple toy site, Plan Toys, Christina Wodtke referenced in a recent post to the IAI List, praising it for its clear and open information about their manufacturing methods, use of materials and social stance.

I praise it in equal measure on that level - a brilliant execution in message.

Where it annoyed the crap out of me was in its very finicky navigation and false visual signals to the user!

You enter the site to a clean - almost stark - home page with a cute image of one of their cute wooden toys. Plan Toys sell mainly pre-school toys, so the site is aimed at parents, not children. The top navigation area is clean and stark with a lot of space around the five listed primary navigation options, and the first item - the link to the catalogue- is also coloured green - the remainder are a mid grey.

Lets start with basic navigation. On mousing over the Catalogue link a set of second-level choices appear listed vertically below, also all in ALL CAPITALS (1), and all rather tightly packed up against each other (2).

As you mouse over each of these items a sub-menu appears to the right with a leading line (3) to the sub-menu if the title is short. If a second-level choice has a sub-menu then the second-level choice is NOT clickable (4). You must go to the submenu to decide which page you want to visit.

Ok, we've finally got to a sub-page. Dexterity Toys was your selection, but on first grasp of the content there is no indication of successful selection as there is just a group of six wooden toy photos and a small part number (5) and name tag underneath each. Where is the heading "Dexterity Toys" on the page. Am I on the right page? As you try and work out what to do your eye is drawn to the bottom right of the page and you notice in very pale grey the breadcrumb line and the page name at the end of that in black. OK, it is there but you have to look for it. (6)

Now where do I go? Well, it looks like you just click on a toy to view its details? No, that doesn't work. There is no indication on first glance that the link is actually the much smaller number and name of the toy. (7)

OK, I click on the link I've finally found and look at the selected toy's page. Looks good. It has a slide-show of images on the left with the intended age range of the child. It has physical dimensions to give you an idea of the size. It has a description of the toy and even how to play with it (8).

Then we have these two funny green icons under the picture. What do they do? It is hard to know as there are no roll-over tool tips. Lets see. Clicking on a kind of gingerbread man icon a window pops up with a heading 'Child Development Skills' and then some subheadings with content on Physical Development, Creative Development, Language & Communication and Social Development. Why are these not with 'Description' and 'How to Play' sections; they seem equally - if not more - important. This is a pop-up for the sake of a pop-up and adds no value - it just annoys people who hate pop-ups. (9)

The other icon is a white arrow on a green button the same size as the gingerbread man and it doesn't work - not sure what it does. I thought it was a 'play' button for the slide show above it but if so nothing changed by clicking it.

Is there any other way of navigating the site? Yes, there is a search section kind of floating near the bottom right hand side of each page of the catalogue, but I couldn't get it to work. It was just plain confusing. Its selection item options were listed as a possible selection for both the 'By Age' and the 'By Childhood Development' lists (10). Also there was no way of knowing whether the selection lists were independent search tools as there were no action buttons, or if both needed to be selected to return a result. Having the search button (an arrow in a circle, not really a recognised up next to the data entry field didn't help in this.

Anyway, search on the site didn't work, so it just had the effect of wasting my time and annoying me enough to write this post!

And it looked so nice! (sigh) I'm just going to have a good nap and try and forget the experience.

Notes:
(1) Many studies on legibility and recognition have shown that it is quicker and easier to read a mix of upper and lower case than ALL CAPS. Yes, it is less of an issue if it is just short phrases, such as these simple labels, rather than great gobs of text, however it is still an impediment to quick and clean understanding, and since navigation is all about making a decision to click one item in a multiple selection list, then please help the User by making it as clear and clean as possible!

(2) OK all you designers out there, when creating hover space around a menu item, lay out your menus so that they look just right, then add 5 pixels to the top and bottom of that area so that they actually work without giving the user RSI from having to constantly focus too tightly on a small target area.

(3) I I actually liked this as it draws the eye to the sub-menu. See they can get some things right!

(4) It is an old argument that has no winners really as often if page was to be used here it would only be an introduction to the sub-menu selections, however in this case I think you need it. As any person who is looking for information for a FIRST child knows it is a mine-field out there. If you take the number 2.2 as the average number of children per family in the western world, almost half the visitors to this site will be first child parents. You cannot assume that they know what a Dexterity Toy (to give an example of a choice on the site), actually is and why they should even consider looking at the page.

(5) The part number is bold and the name is in medium weight font. I still don't know why the designers thought that the part number is more important to a User than the name of the thing - the only time I use numbers on a menu is at a chinese restaurant as it is embarrassing for me to try and pronounce the names!

(6) These designers have not read Steve Krug's "Don't make me think"!

(7) Come on! The site is built in PHP - is it too hard for these people to link an associated image with a URL that is already there in the name/number below it. It's not rocket science!

(8) This is for the parent - the child will have no trouble at all knowing ;-)

(9) I don't hate pop-ups if it adds value and clarity - but most web 2.0 in-line expansion solutions are much better for this kind of 'extra information' task.

(10) There is a simple convention here that most people recognise, and that is if you put an em dash on either side of a selection list name they know that it is a label and that they must make a selection to activate the list. E.g --By Age-- and --By Childhood Development-- would have told me to make a selection. Better still - label the selection list on the page and shoot the graphic designer who argued for style over function. They are doing you no favours Plan Toys.

OZ-IA 2007

The OZ-IA 07 confernece in Sydney, Australia kicked off at the early hour of 8:15am today with an interesting talk by the IA, Elizabeth Pek, and Designer Andrew Coffee about the recent re-design of Faifax Media's marquee publications smh.com.au and the age.com.au.

They looked at the business and user-centric drivers for the re-design and outlined the challenges and conflicting requirements for different reader personas. An excellent and refressing talk.

IA Inside Out Blog is now LIVE!

Just click the above heading link to go straight to the new IA Inside Out Blog, or click this link here

Information Architecture Inside Out

I've just come back from presenting a workshop at the Information Architect in the Public Sector Conference in Canberra.

This post is to announce that the new Blog will go live tomorrow night (Thursday 28th June).

The Blog is being created to provide feedback on the workshop, and to feed forward your own ideas, interesting related web links that you think are relevant to the processes we discussed and stories about outcome of programs you develop.

The workshop looked at planning and managing the development of on-line collaborative social structures and spaces and how these could be used in developing and promoting the use of a knowledge sharing program within your organisation.

If you attended the workshop today, I'd love to hear from you, so post a comment on the new Blog when it launches and tell me what you got out of the workshop, what you didn't get and perhaps what you would do to improve the presentation.

By the way, here is the link to the PBwiki I showed you that gives an outline of what an Information Architect does, and here it is in its original HTML form.

Thanks

Stephen

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!