Over the past few posts I’ve discussed global components, components, homepage design, internal page design and style guides. Today I’ll end by discussing the sidebar and give you some ideas on how to use them effectively.
The majority of websites have sidebars on their internal pages. Sometimes there on the left, other times they are on the right. Sometimes there are two sidebars, with the content in the middle. I’ve even seen layouts with two sidebars on the right with the content on the far left. My personal favorite is to use a two column layout on internal pages with the sidebar on the left or right. In the following example you’ll see a right sidebar.
The sidebar is going to consistent, yet different for every page. This consistency will be in the sub-navigation that is directly related to the primary navigation. The sub-navigation will remain in the same location (top of sidebar) on every page, but the links will be different on each secondary navigation component.
Sidebar Components
| Solutions – This secondary navigation will show when user click on solutions in the primary navigation and this navigation will show for each page within this section. | |
Company – Similarly when users click on company in the primary navigation and this navigation will show for each page within this section. |
|
Company – What’s nice about this is website owner can easily add pages to these section in the future without causing technical problems. |
|
| News and Events – shows news articles, upcoming events and past events. I’ll show you how there are other components below each of these subnavigations. | |
| Blog – is different. I’ve made a slight compromise by including a search field just above the secondary navigation. Knowing that this could be a large section, I wanted to make sure website user had a way to find the information they are looking for quickly. Categories are a way for the user to help organize their subject matter and archive is a dynamic component that will archive blog post by month. There are additional components we could have added to the sidebar for blog, but decide to keep it simple for now. |
Additional Components
After the obvious basics, you may want to include other components below the primary components of the sidebar. For example:
| Upcoming Events Calendar – Can be a nice touch if you have a lot of events and you want to give users a way to navigate to events at specific times. This would of course link them to the events happening on the day they select. This would be a nice component to sit below the New and Events secondary navigation. | |
| White Paper Download – meets an objective for our client. His objective is to collect information from potential prospects. This white paper download links to a landing page describing the value of downloading the white paper. This might be a nice component to sit below the sub-navigation on the solution page. | |
| Sales Training Newsletter – is yet another way to collect information from interested parties. Only this will be a retention tool to keep user coming back to the website. This links to a landing page that describes the benefits of signing up. This component can will be a nice touch to add in the sidebar of any page below the other components. | |
| Contact Information – works best as a sidebar component on the Contact page sitting just below the secondary navigation. |
Conslusion
The sidebar components mentioned help users effectively navigate your website content and lead them to taking action. Other sidebar components that are very good are credibility factors. If you want to lower the website user’s anxiety and demonstrate value you may want to create components for that. Examples might be (testimonials, organizations you are associated with, certifications you have, etc…)
It’s important to know what you want before the programmers start coding. Some of these components will be dynamically driven and some will be wigitized for used individually within certain pages or page template. Thinking ahead will make the website management process much more satisfying to the website owners. They will be able to easily rearrange component order and target components to specific sections if programmed right.
