menu navigation - what works, doesn't work

[completerookie]

Our website is aimed at the elderly (silver surfer?) market

we created a new menu (expanded nested etc) and then asked an inexperienced web surfer friend to pass comments - her immediate reaction was

• Why can't you have photos showing your products in the menu - self explanatory when you have 500+ products
• whats the PLUS-SIGN for in the menu?
• why so much blank space under the menu when the page is so long.

I realise that anyone experienced enough would know the answers BUT - how do you produce a nice navigation menu for people who may be using your site as one of their first experiences of the web
do you

• just let them fumble?
• do you say "click on the plus-sign to expand the menu and teach the more experienced users how to suck eggs
• have an option at the top of the menu saying "navigation tips"
• or what??

no doubt a can of worms has just been opened.

[jont]

How about a big "HELP" button on the page (probably in several locations) with advice (even screen grabs) on how to operate the site, what they do, the checkout procedure etc and any other areas where you know users could stumble. Since I added to mine I have cut the hand-holding emails and phone calls to a fraction of prior to the help link

[completerookie]

hmmm. Thanks
back to the drawing board with some of the ideas then.

[jont]

May be worth also breaking it down to cater for the complete numpties (who can't use a mouse) but also for those stuck with a specific problem..... the checkout and delivery address being the favourite Actinic related queries

[completerookie]

one thing I have added is a simple "You can always telphone us and order anything that you find on our website" - hoping that may help with some of the novices and allow a bit of up-selling

thanks Jont

[leehack]

For the "Blue Rinse Broadbanders", i think that all navigation links should be on show. Interaction and dynamic menus and little plus signs next to them will just blow their mind. They are old and not computer literate, not unable to read. Nice clear LARGE text and clearly defined areas on where they should go for each particular thing.

Although i firmly believe if you ever have to explain how to use your navigation on a website, that you have failed miserably, for the blue rinse brigade i think it is warranted somewhat. "Click below to view items" etc.

Pictures help tenfold also. Nice clean layouts, very good text size, images to help navigate and totally clutter free is the recipe for success IMO.

They're not as bad as you think, if they were they wouldn't be on your site in the first place. The first link in my signature is used by many older people as the airplanes side especially tends to lean towards the older generation.

[completerookie]

I've worked on the site with the silver surfers in mind, created dynamic text size, lots of css to aid the focusing of the mind - css boxes to slowly draw their thoughts to the important bits - consistant titles, pics, etc - but when you have lots of products, the fully expanded menu option becomes . . . O.T.T ? - the page ends up being 16ft long. with the products being just 3in of page space.

I've got the normal buttons across the top AND the products on the left (normal layout)

I've hidden the menu's etc on print, so the page concentrates totally on company name, contact details and the product(s) in question - again user friendly and focused

the user group ranged from 50+ to over 85 so it wasn't as though I picked on the wrong group. I also made absolutely certain that I didn't butt in and make suggestions, I just sat quietly and watched what they did (or didn't do)

some of them clearly had browser knowledge but again, they ALL missed the expanding menu, prefering to slowly click the page, and click the page and cli....

the menu structure was similarish to Normans Collapso system (nested list version) with bigger symbols and text. and it wasn't until I said "what about the plus-sign that they then said oh isn't that simple - its just a pity they were'nt adventurous enough to click the plus-sign when using the menus, One of them even said "get rid of the plus-sign, its distracting andit doesn't do anything - not that they clicked it !

I didn't think I'd failed on the menu front, but clearly the user(group) missed the slowly expanding menu and continually clicked on the sub-pages to eventually get to where they wanted to go. At least I had the opportunity for the users to see other things on offer when they were slowly drilling down through the pages.

we spent quite a few hours on tea and biscuits discussing the issues but no-one could actually put their finger on what would make the navigation more intuitive.

[jont]

Could you replace the + symbol with a GIF image saying "more" or similar?

Do you have a live URL for us to take a look and offer opinion?

[completerookie]

problem here is "screen real estate" - because the audience requires the larger text, there's only so much space available to the menu before you actually start losing valuable "product space"

I considered "flyout menus" but again, does the prospective audience want / tolerate these sort of menus with "things poping out all over the place" or do they just want a clean, clear layout?. Perhaps they just have to tolerate thos flyouts but then, being a competitive market, they may choose to vote with their fingers and click on someone elses site.

another issue here is that "the older surfer" probably has the smaller screen resolutions 800x600 etc. no doubt some will be higher res but I'm guessing (no hard facts here) that of the diminishing 800x600 users (w3schools) , a larger than average percentage of those diminishing resolutions will be the very audience I seek.

it also bugs me to see those helpful comments on sites "best viewed with IE6 at a minimum resolution..." but if you aint got, who cares what the web designer is aiming at.

I keep making alternative mockups, and they tend to change every other day at the moment, frequently based upon the user group findings - "try this version - see what you think" type mock-ups

the system is still very much in-house at the moment so, can't give a URL.

my guess is there isn't a quick answer and with the benifits of auto-generate actinic and CSS, I could change my web site quite easily.

I still appreciate the comments though.

[leehack]

I guess that confirms what i wrote, whilst i built that shop some regulars used to come in and take a look and provide feedback (i based myself at the shop itself for the build). Some of the old fellas used to come in and stand around for hours and the general feedback was that pictures were a great way to help them.

An older surfer would look at this page and see airplanes (their main interest) immediately visible. On this screen there is 4 ways for them to get where they wanted to. Most of them understood that text with an underline meant it was a link and that the cursor turns into a hand when they are over it. So they clicked on accessories mostly, which took them to here. The amount of times you then heard oooh i like that was a sure thing that i had got it right.

From this point forward i thought that top level sections, with pictorial sub sections was a great formula and even much younger people like it. I love it when i visit a site that navigates that way also. Important thing is to minimise the top level sections into clear concise ones, once they click on these, the sub-sections does the work for you. I would put my house on that kind of navigation working for you.

After seeing the reactions, the approach was adopted through the site as much as possible. An 18 year old or a 90 year old would find it very hard to get confused on which section was for their car on this page.

I guess the marketplace dictates somewhat, however, many younger surfers tend to like the simple clear approach and i would include myself in that too.

[completerookie]

many thanks Lee.
looks like I'll have to compromise and loose the plus-signs - another email this morning says "I thought the plus-signs were bullit points so I ignored them"

I guess its not a bad thing to let them drill down, just frustrating to watch

Its been quite enlightening to see how various people use the web and its been vary hard to step in and say "have you tried that" - I will continue to resist, I think/know I'm getting a lot out of the experiment

Anyone got any thoughts on "auto-popout on hover" - is that good, bad, annoying, distracting?? - my guess is its just another distraction.

I'll adapt the menu to auto-show subsequent sub-sections when ever the page is loaded, perhaps they may get an idea then.

[RuralWeb]

auto-popout on hover"

I never use it as it is difficult for people to use, especially the older generation as they may not have the mouse control needed to make it work.

Keep it simple and remember that if your SEO/adwords is good then most people will not need to use the navigation as they will arrive on the product page that they want.

[gabrielcrowe]

depending on the nature of your demographic, you'll find that designing for children is the same as designing for the elderly.

physical problems to be addressed are thus:

- the uninitiated have no comprehension of dynamic content.

you'll need to drop all clever notions of popouts and such. You'd be wise to adopt some literal theme, such as obvious images of buttons, and arrows after words, to let them know that 'this button goes somewhere or does something

- layout and prett columns have no place in the mind of someone who is interested only in content.

this in mind, don't completely discard design. colour and shape are a very effective tool to describe the nature of a product or service, but older people and children, are in no way interested, or have notions of why your site validates to the w3c, or why your gifs are optimised and the correct size. this said however, you'll need very large and sharp images. Thinkn of the simplest layout that you can. remove all the complicated distracting fluff associated with someone who can dissect the fluff from a design. less initialted people cant find your content for your fluff, and it does not take a great deal of fluff to make it a mess.

- you'll need to explain yourself as if you were explaining the entire internet to somebody.

every button and link need to have its function clearly defined, and they need to be normalised. for example, your add to cart button may say something along the lines of 'click here to add this to your basket'. old people dont understand internet slang. so even going to the extremes as to say things like 'click your mouse here to see the cardigans we sell' will help you a long way.

- realise how difficult it is to do SEO with extreme user needs at hand.

its difficult to optimise a site that derives much of its sales from a niche demographic. using useless human phrases in links and buttons makes real optimisation a sod.


thats all i can think of right now.

[jont]

wise to adopt some literal theme, such as obvious images of buttons

If they are really confused take the non-standardised standard buttons and place the text equivalent beneath. Eg the checkout button is best shown as a shopping basket or trolley (a non-standard standard) but also use the words beneath "view basket". Annoys me when you see a something like an image of a goat being used for the checkout link just because it looks funky.

[completerookie]

one comment I overheard once was "why do they use modern words, what's wrong with good fashioned words and phrases that I understand"

Its stuck with me for a long time now.

things like - I've already changed the "add to cart" to "Buy This"
I've changed the "shopping cart" to use buttons like "buy something else" and "complete the purchase" - it may be a subtle changes, but it don't half mean something to granny.

many thanks for your help, I now need to go and think or "real words" not that slang we see everywhere,