The old site navigation was basically in several parts:
- The main tree menu along the left
- Breadcrumbs and landing pages
- Blog archives, categories and search in the blog sidebar
Not too much has changed fundamentally in the new design, however the small changes are rather significant.
First off, we have the larger “buckets” on the top of the page instead of the tree menu on the left. Moving the navigation up here did two very good things:
- It simplified it.
- It provided more room for content on the page.
With fewer navigation choices, folks are less likely to click on the wrong thing. The companion change to this, of course, is designing landing pages that allow them to get where they are going from these pages.
The projects and articles pages in particular are examples of lots of content visible on a page without them being too overwhelming. The sports and photo pages are similar to the old landing pages, as they can afford to be since they do not have the same volume of content.
I already have plans for future versions of these pages as well, as growth dictates. For example: when it grows a bit more, the articles page will likely be dropped down to 5 articles per section with AJAX to load the rest of each list. The sports and photo pages can similarly adopt a 2 column layout when they need to.
The on-page navigation is now more structured as well. For example, each project page now has a standard sidebar with appropriate information for the project. These can include:
- Download link
- Purchase link
- Documentation link
- License link
- etc.
This information is stored in custom fields for each page, then conditionally added to the sidebar via calls in the template. The nice thing about having this information set up in custom fields is that I can update it using outside scripts. For example, I have an API on kingdesign.net that returns the latest version number for Tasks Pro™ and Tasks1. I’ve set up a little script that updates the latest version information for these projects on alexking.org with the information from kingdesign.net.
Search is a new global navigation element on the site (now that all of the content is searchable). Placing it directly under the site navigation might help folks trip on it if the need it. 🙂
Having all friendly URLs should help with navigation for the keyboard jockeys that are frequent visitors as well. I might be the only one of these, but it’s handy for me to be able to type alexking.org/projects/wordpress to get to my plugins page to update it.
Some of the other changes are designed to help provide context for folks who end up here via a search engine, blog link or some other way besides them looking me up directly and landing on the home page. This is pretty common, and has been discussed – I remember a meme on it a while back, but I can’t find it. I guess I should have del.icio.us-ed it. 🙂 If you have the link, post it in the comments. Ok, back to providing context.
The navigation menu now has a “highlighted” state when you are in a given section. If someone comes in looking for a WordPress plugin, they can see they are in my “Projects” section.
I’ve also added an “about” blurb on every page, just under the search box2. This is very brief, lets folks know this is a personal web site for me, and links to my about page.
The breadcrumbs have changed a little from the old site. There is a little less depth than there used to be on the old site as I’ve moved some things up closer to the root as much as possible. I only show the breadcrumbs once you get down a few levels (like an individual blog post, or project page). And I’ve minimized them as much as possible. Besides the obvious navigation functionality, they also provide context of depth.
Inside the blog area there are other elements that serve as contextual guides. The list of topics in the sidebar, for example, shows the kind of stuff that is discussed here, and how often. One thing that I changed was the list of monthly archives. I liked the contextual information given by the long list3, but my archives go back to 2002, using the drop down is a lot better than a big long list on each page. I made the visible option in the drop down the date range so that it still hints that there is years of content here.
Getting back to the topics list, I’m keeping all of the topics in the list for now. As the site evolves, I imagine I will eventually have to change that as well. However I’m not likely to solve that in the same manner. Instead I’ll likely show the 10-20 most recently “posted in” topics visible, and hide the rest behind a “more…” link.
I still need to create a better interface for the archives and search results. They aren’t horrible now, but I think they can be improved. For the archives, I think titles with categories and dates is a good amount of information to show. The search results probably need to keep the summaries. In both cases, AJAX to load the entire post/page content seems like a good idea.
I’ve probably forgotten to mention a few things – feel free to ask questions in the comments.