Web design question
A question for all you smart web-design types out there.
With the wonderful artwork from unluckymonkey, I’ve redesigned my webpage quite a bit.
There is a main directory page with broad categories, and inside the broad categories such as “Wild silkmoths” and “Projects” there are sub-directories to lead to specific pages for different species of caterpillars, or different ways of working with the silk, etc. I’m pretty happy with the way the tree is set up; it seems to make good sense.
Each page has a banner at the top that links back to the main directory page, and a link at the bottom that says “HOME” which also goes back to the main directory.
I’m contemplating whether there should also be a second link, to go back to the sub-directory page. Or do most users just understand to use their “back” button to go back to that page? I’ve seen from my traffic logs that some people run around in spirals – index.htm to wild.htm to luna.htm, then (I’m assuming clicking the HOME link) back to index.htm, then wild.htm, then poly.htm… but I’m not sure whether another button would be helpful, or just tedious. If I do put in another link, should I call it “UP” or what? Is there a resource for standard practice on this kind of stuff? I don’t really anticipate the website becoming any more complicated in terms of levels, although there will continue to be new pages added to the sub-menus.
Thanks for any input you can give!
Also, if there are any “you really need to change THIS” type suggestions about the website, please let me know. I’ve tried to stay pretty simple, but I don’t know a lot about website standards.
I think it would be helpful to have that extra link, particularly if it were well labeled to remind them of the content they would be returning to.
In addition, I think that the substantial header graphic on every page chews up more screen real-estate than is necessary. If you could cut its height by half, it would be much less intrusive.
Thanks!
Just my $.02
I like the logo! Very nice.
I would suggest using a back and up icon in the navigation bar. Think of it as a book. One arrow to go back one page. Up arrow to go back to the beginning of the chapter/section. Home to get to the start of the book.
Here is an example of the arrows I am referencing. http://www.milonic.com/imagepack/simpleindicators.php
Maybe you can come up with some other icons instead of arrows. Like a larva or worm for back one page, a moth for up to the section, and your logo for the home page.
I would recommend putting the navigation bar at the top and bottom of the page. The reasoning is that if a person gets to the page and that is not the page they wanted, the bar is there to take them back rather than moving the mouse up to the back button on the browser menu.
If you want to read the World Wide Web Consortium (W3C.org) accessibility guidelines, it is located at http://www.w3.org/TR/WAI-WEBCONTENT/. It mostly gives guidelines for developing your site navigation for people with disabilities. They recommend Forward, Backward and Up icons for navigation.
OK. I’ll stop my propeller now. Hope this helps.
I agree with, the banner graphic takes up a lot of screen real-estate, moving the important part of your 2nd- and 3rd- level pages (the links and articles) away from the reader’s focus. On the 3rd-level pages, I’d consider using a logo-sized graphic instead of a banner-sized one for the sake of people who like to print your articles.
If it doesn’t send your artist into fits of apoplexy, moving the moth from the second loop of ribbon to the first loop of ribbon would reduce the height of your graphic and help with the real-estate problem a little.
I recommend putting a page title on each of the second-level and third-level pages, probably the same text as the link that’s on the home page. You’re already doing this on the Bombyx mori 3rd-level page.
I agree that it would be helpful to have links to the second level from the third level.
Some sites use “breadcrumbs” which show the location of the current page in the hierarchy (Home – Domesticated silkworms – Bombyx mori) and place it just under the banner graphic or at the bottom of the page. It would be very easy to add this kind of navigation to the HOME link at the bottom of your pages.
Some sites use a navigation bar that would include links to all of your second-level pages and appear on all pages or all pages except the home page and help people move around between sections of the site. These navigation bars can be very plain or very fancy and can appear as part of the banner portion of the page, below the banner portion of the page, at the bottom of the page, or in a column to the right or left.
Since your site has only three levels to its hierarchy, I think either technique for navigation will work for you and the “breadcrumb” style will be easier to incorporate into the current graphic design/layout.
If anything I’ve said is unclear, I’ll be happy to do HTML mockups to show what I mean.
I recommend making a text link that says, “Back to Domestic Silkmoths” for the top and bottom of all pages linked from that text ont he homepage. I’d put one at the top and bottom of each page that’s linked off that particular homepage button. then do the same for anything that has subcategories past the initial homepage link and you’re home free! If you want to get really fancy you can also make a page that’s a sitemap. Just a text outline of all the content with all the outline text as links for people who are looking for one specific thing. Then you can link that from the bottom of each page next to your home button as well as your homepage . 🙂 I hope that made sense. If not DO ask me about anything I made unclear if you like the idea and I’ll do my very best to make more sense. I’m not always clear.
PS I dunno if you saw it in my journal but I made a shoult out about getting your package and how lovely all the colors etc are! 🙂 thanks SO MUCH!
I like the logo and the content is excellent. The pages are visually simple and easy on the eyes, which is good, but the navigation is a little confusing.
I usually put a top or side text menu that links back to every main page or every main category including the main index page. I always keep it in the same place on every page and in the top frame. That makes it easy for people to hit every page without constantly going back or having to search for the menu. I like pages with an easily accessible predictable menu like that and I am more likely to stay longer and hit the entire site.
First rule of web design: Don’t make me think about the navigation. It distracts me from thinking about the content. Eliminating steps and reducing time spent on navigation is never tedious. No worries.
Centered text is hard to read. I would put wider margins on the page and have the text left aligned but centered in the page.
After reading the above comments, I’ll add that I don’t think the banner is so much of a problem. It works as a unifying element and adds visual interest to a very simple design. It could be slightly smaller but not much. It would work fine as is with a little reorganization and perhaps a horizontal text menu under it.
I’m also not crazy about splash pages but I like that animated thingie on yours so I’d have difficulty parting with it. Another option would be to reduce that or the simple logo in size, move it to the side with a vertical side menu under it that would appear on every page, and then keep all each page’s content to the right but with left aligned text.
I hope my comments are not too confusing. I just see exactly what I would do with the site in my head so I’m trying to describe it. These are all quite small changes that have to do with organization but they tend to make a big difference. My focus is always ease of navigation because that is essentially what keeps people on a website.
I found the silkworm food page quite amusing.
Thanks for all your observations!
I’m working on making the whole site easier to navigate and manage – it gets hits regularly from around the globe, and it’s becoming a resource for a lot of classrooms and such, so I feel responsible to make it as smooth as possible. You’ve given me lots to think on.
Simple is best
If you use the additional links, make sure they are descriptive words–graphics or “cute” phrases tend to reduce the usability, especially if you are getting hits from outside the US or from non-native English readers.
A great book on usability is one called something like, “Don’t Make Me Think”–title says it all.
I think the site is pretty clean and clear “as is.”
Ames
Happy Birthday. 🙂
Thanks!
Happy Birfday!!!
Thanks!
Happy Birthday
I should have guessed you were a meticulous Virgo! Enjoy!
Ames
Re: Happy Birthday
LOL. It’s ironic and amusing, how spotty my perfectionism is. But thanks.
I hope you have a wonderful flourless birthday cake and gluten-free ice cream! Happy Birthday!
Hee – thanks!
I’m hoping Chris makes the flourless chocoloate cake – it’s dense like a heavy fudgey brownie, and really, really tasty.