I have to say I'm a bit peeved by Apple's latest Software Update effort - all 420 Mb of it. If it wasn't for the fact that Leopard is sooooo slow to start up on my old Dual G5 Powermac I wouldn't be bothered - but I'm told startup performance has been improved along with the other niggly things that make the Leopard experience a bit of a nuisance. So I thought I'd upgrade
420 Mb takes a big chunk of my monthly download allotment and by the way the old mac is slowly chugging down the hugh download, I think I've reached it and am now being choked back by my ISP.
What was Apple thinking? I thought Microsoft was the only perpetrator of that kind of gigantic patch; the last Vista Service Pack was a whopping 599Mb but I used my office network connection for that.
My Mac is on the end of a very erratic home ASDL connection and so is a little slower. The download of such a huge file slows the whole computer down making fill-in tasks such as web surfing - and posting to blogs for that matter - pretty harrowing!
It is not one of my favourite on-line user experiences and I wish they would find a way of doing it without the huge file sizes and long waits.
Thursday, May 29, 2008
Your Experience Is Not Mine
Designers love new stuff on web sites that is often the internet equivalent of "a machine that goes ping".
I could put a job position in the web industry to each of the characters in the famous Monty Python Hospital Sketch.
Gone are the days of one person hand-crafting a web site and doing only what is really needed to get the job done.
Now we have Web 2.0 feature bloat in the hands of people on fast networks who don't test on all platforms and network shapes, who have never written small and concise code that runs well and fast on any device, and who use coding automators but don't know how to debug the often huge and ugly generated code.
A word to all you who recognise your own organisation in these words: Your Experience Is Not Mine.
Fix it please. And quick before your customers give up!
I could put a job position in the web industry to each of the characters in the famous Monty Python Hospital Sketch.
Gone are the days of one person hand-crafting a web site and doing only what is really needed to get the job done.
Now we have Web 2.0 feature bloat in the hands of people on fast networks who don't test on all platforms and network shapes, who have never written small and concise code that runs well and fast on any device, and who use coding automators but don't know how to debug the often huge and ugly generated code.
A word to all you who recognise your own organisation in these words: Your Experience Is Not Mine.
Fix it please. And quick before your customers give up!
Saturday, April 19, 2008
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.
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.
Subscribe to:
Posts (Atom)