Client throws navigation structure to the wind . . .

[Nicole]

News at 11!

I'm doing this site right, for a US swimming club that has a current site in which, despite currently having 16 items in their navigation, has 90% of pages listed under one menu item. I've been asked to redesign the site by the current web designer and site maintainer with an emphasis on restructuring it in a logical way, and adding a CMS so those updating the site, the club officials themselves, can add content so the current designer/maintainer doesn't have to worry about it. He wants to wipe his hands of it. I'm reluctant to post any link to the existing site, but my current work in progress is very much that, located here. (no it isn't because I couldn't work out how to add the link using this screen).

The thing is, as it's a club that provides detailed information to current members AND is attempting to attract new members, I went ahead and structured a new navigation in the most logical way I could, as somebody who isn't a swimmer but also as someone who has been a sports club admistrator in the past, and as a web designer who reads as much as I can about information architecture and usability.

I presented it to the guy paying the bills, he practically pulled it to pieces and told me that certain pages had to be under certain menu options simply because the Board of Directors at the Club wanted it that way. He is paying for the site so I went ahead and adopted all of his suggestions, but it leaves my navigation very short of content in some areas and very large in others, some content really hasn't any relevance that I can see to the menu items I've been told to put them under and now I have to try and make an illogical structure seem logical. 

It's not a huge site, maybe 50 pages max, so it's on the fringe of needing a drop-down or fly-out menu, but in this case I haven't used one, relying on a left side menu with a hover effect, each menu item takes you to the index page under that menu title.

I've really exhausted my brain trying to think of ways I can logically link pages together, it's not as if the reader really wants information in a chronological order so I can't realistically use a 1 | 2 | 3 | 4 | . . . at the top of each page and a previous/next link at the bottom of each page, I now have pages like why-swim, what-to-watch-in-a-swim-meet, FAQ etc listed under the heading "Programs" and not under "Resources" where I had them.

So I'm really struggling with how to, without a drop-down menu, list the pages in each section, without putting the other pages in that section at the top of each index page and thus tempting a user to click another link before even reading the information on that index page. I realise this has probably been difficult to understand without a link to my work in progress, but Fallen Angel, I really don't understand how to add a link in this forum. Usability? I will add one if you can tell me how.

Does anyone have any suggestions how I can overcome this dilemma reasonably?

The other thing is, why do people hire designers and then tell them what to do?

[PrawnDog]

My first two suggestions are those that are normally suggested, but are probably most unhelpful:

• tie the client into a chair by a computer, tape up his mouth, then bring in someone with some surfing experience to explore the site for the first time. Maybe get them to explore the new site too, and give them specific tasks to find info on both. Then see which one they prefer and why.
• Explain to the Board of Directors that if they want to pay for your expertise then they have to use your expertise responsibly. If they want it their way, maybe they should do it themselves

OK, not too helpful, but my other suggestion is to use a sub-index page to verbally explain what this section contains, grouping together anything that is relevant. This could also be explained on the front page.

If the info in that section clumps together nicely you could always use page tabs to make it look like a single collection of pages. The Lloyds TSB Bank website uses both a top level nav menu and a tabbed sub-menu.

Any help?

ps. Why do people hire designers and then tell them what to do? Because they know better, and want to make sure you know it!

[Fallen Angel]

I agree with PrawnDog entirely - tying dimwit client to a chair sounds like an excellent idea! 

I don't always agree with all of his stuff, but Jakob Nielsen often has some useful stuff on his site. A really good beginners guide to usability, written in language that even dimwit clients can understand is Don't Make Me Think!: A Common Sense Approach to Web Usability, by Steve Krug. Watching how people actually use site's is always useful. Maybe not practical in this situation though given that you're in Australia and they're in the US.   

btw, the code for links is:

Code:

[url=http://www.mysite.com]My site[/url]

...or click the little world button just above the smileys on the posting page and it inserts the [url] tags for you.

[Nicole]

Thanks for the responses guys, and apologies for the delay in responding but I needed to get my work in progress up to date and online so I could post it here. Fallen Angel. sorry for my abruptness the other night regarding not being able to post a link here, I was a bit frazzled then, in fact I had only left the = out of the link.

Work-in-Progress

I know that opening page looks crappy but they are insisting on having the opening page for their "latest anouncements" alone. If you click on "About WSC" the problem of how to link pages together begins. In the "About" folder I have 2 other pages besides the index, one is a profile of their half dozen coaches, and the other is information about their governing bodies and how they are ties together, i.e. the heirarchy.

I could obviously just add links within the content of that index page where visitors could clck to reach these other two pages, but I feel with that alone, those pages will be missed by the majority of users. I've toyed with the idea of a section at the top saying "Other pages in this section", and repeating that at the bottom, I can be convinced that's the way to go if you all think so, but I don't particularly want anything above the heading on each page unless it's maybe done subtly but still noticeable. Contradiction there I think!

The "About" section is fairly simple though, only two other pages in that section and as you can see they're not natural continuations from the content of the index page that would lend them to a "page 1 of 3" link.

Other menu items on this site have (in order) 9, 9, 8, 7, 1 and 4 pages within those sections, most of which also aren't logical continuations of the page they may have just been reading. So, if I'm going to put a "other pages in this section" link at the top and bottom of each section's index page, I have to be aware that up to 9 links have to be accommodated there.

PrawnDog, I'd love to sit this client down and strangle them until they realise that my proposed navigation structure was both logical and usable, but I'm afraid they're in America and I'm in Australia. I'm also at the end of the line, I'm contracting to the current site maintainer who's kids are members of the Club. i.e. They pay him to update the site, he's paying me to redesign it. I don't really have any authority to go over his head and strangle each Club Director without his approval.

Fallen Angel, I forgot to look at the link you provided and will do that in a sec. Thanks.

p.s. I know the text resizing images don't work on the opening page. This is because of the ../ I've added in the location and as it's only a folder within my site, it's not finding those images in my root directory, it's working on other pages. Also, I know that those of you will be thinking "oh another design of Nicole's that looks the same as the one before  , I just haven't had a lot of time lately to experiment much with different layouts. This client seems happy with it though.

[Nicole]

Well I spent some time working on this today and was pretty happy with what' I'd done. But I needed a small background image for the new div that I'd created to put the "Other Pages In This Section" in. I'd tried a few different images and decided it needed something plain, so I created an image in PSP that was simply a diagonal red and white band with a dark grey layer over the top, I made it transparent and then uploaded it to look.

To my surprise I'd forgotten to merge the layers in the background, but the result looks pretty okay to me. What do you guys think?

Work in Progress

p.s. I've also just realised that besides the banner, the page actually resizes down to 640 x 480 without any scrollbars. WOW! 

[Fallen Angel]

Looks good - v Web 2.0! 

[Nicole]

Looks good - v Web 2.0! 

Thanks Falllen Angel, but what does v Web 2.0 mean? I'm not a geek, but you knew that anyway didn't you?

[PrawnDog]

I must say that personally I prefer your w logo. Using a slice of that as the left side background would IMHO maintain the corporate identity.

As for Web 2.0, there is a pretty comprehensive explanation by Tim O'Reilly. Whether it really means anything to the end user/client is debatable.

[Fallen Angel]

Oh dear...maybe it's not. You got a 5 out of 51 on the Web 2.0 validator. 

Nice glassy/reflective look on the graphics though....now if you referred to the swimmers as swimmr throughout the site, you'd probably get a few extra points on the validator. 

[Nicole]

Thanks for the link PrawnDog, began reading it but then noticed it's 5 pages long which is a bit much for this time of day for me. I'll take another look at it later.

I had thought about using a faded W logo in that link div but felt it might be too close to the other one in the banner. The link div is also repeated at the bottom of each page though. There's a good chance that the client won't like it too!

Fallen Angel, I'm glad you like the glossy effect in the banner. I'm usually one for disliking glossy finishes but I think this one is okay. It was created by someone in Finland that you may know.

[Fallen Angel]

Ah, say no more....

[Caz]

I really like that Nicole and can see the Web 2 influence at work  I also like the zigzag image, it gives some movement to the page - like swimming?
The Web Dev Tidy only gives 5 warnings now and most of them are typos I think. Just give it a rest for a while and then you'll hit yourself when you see them again.