The Archives

Browse the content below to find what you're looking for.

AtomicLabz Sidebar Components

Tuesday, April 6th, 2010

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.

Posted in Web Architecture | No Comments »

AtomicLabz Homepage and Internal Page Components

Tuesday, April 6th, 2010

I previously discussed global components. In this post I’ll converse about some of the other elements that make AtomicLabz.com homepage. Also, we’ll look at the internal page structure.

Carousel

A carousel is like a rotating billboard that consists of a background image, and text that will lead the visitor into an internal page. This I a great sport for product promotion, upcoming events, hot deals, new arrivals or a featured product/service. The user can navigate back and next using the navigation located in the bottom right. As each picture fades in, a circle in the bottom right changes color showing the user which they are viewing. They can also click the circle to navigate to that specific billboard.

Site Introduction

An introduction sits below the carousel and quickly introduces the customer to you and what your site offers. You need to quickly let the user know what you do. Website users are thinking, “is this where I want to be? Do they have the solution, Can I trust them?” This can be a great spot to introduce credibility factors (sample client list, testimonials, service and product offerings,). It really depends on what your objective is.

You can see the layout nicely flow from a one column carousel to a three column introduction that is pleasing to the eye. In this case we used two of the columns to introduce the client to service offering, client case studies. The third column was a call to action, inviting the user to download a white paper, Driving Sales in a Down Economy.

Subpage / Internal Web Page

Next, it was onto the internal page. The internal page has a consistent structure through the entire website. Of course, the body contents changes relative to the page you are viewing and the right sidebar changes for each section.

The first component in the right sidebar is the secondary navigation, or sub-navigation for all page related to the primary navigation selected. In this scenario, the user clicked on Solutions in the primary navigation, which leads the user to the first page in the solution section, named Lead Generation. In my prototype, I didn’t set the Solution button in the primary navigation to red, although that is how it would look when programmed to let the user know that is the section they are viewing. You also see in the right sidebar that Lead Generation is red (different then the other sub navigation pages) letting the user know which page they are viewing. Throughout every section, the secondary navigation will also remain in the top right corner. Although, if we get to a section that requires searching (i.e. a blog), then I would sacrifice a bit and put a small search box just above the sub navigation.

Calls to Action

The other two components of the sidebar are calls to action. The goal of this website is to collect information from potential clients. To do this we’ve include a white paper download and a sale training newsletter sign-up that lead to landing page stating the value of signing-up.

Today we covered a lot, so I’ll save the Style Guide for the next post as that is a significant component of every design.

Posted in Web Architecture | No Comments »

AtomicLabz Components and Homepage Wireframe

Tuesday, April 6th, 2010

I already discussed the site map with the project stakeholders in my previous meetings and they approved. Next, it was onto wireframeing some of the atomic elements and global components.

Atomic elements cannot be broken down any further. An example might be, H1 Text, paragraph text or a logo.

Components are made up of atomic elements, but their relationship with each other groups them together into single components. Some of these components I knew would be global (show up consistently on each page) and some would be page specific. I like to start with the global components first.

Global Components

Header

The header consists of three elements, Logo, Value Proposition and Call to Action. These three elements make up the header component and will show up consistently on every page. The logo is a clickable link that leads the website user back to the homepage. Value Proposition is a clear statement that tells website visitors what this site is about and how they unique. The call to action is a phone number. The goal of this site is to generate leads, so why make it difficult for users to find the phone number when they are ready to act?

Primary Navigation

The primary navigation is the menu users will interact with to find information they are interested in. As mentioned, I had developed a site map, so I had a good idea of how I wanted the navigation to flow. This site is not going to be hundreds of pages, so I decided to eliminate the use of drop-down navigation. I personally don’t like to use. If there are sub pages, I like to include them within their specific section, so they are always displaying to users. I don’t like to keep making users hunt for things. I also don’t like creating more than seven menu items in the primary navigation and is this illustration; I was able to make six menu items work.

You’ll notice that the homepage show a different color that the other buttons because the homepage is active, or currently being viewed. The other five buttons are inactive, but change color on hover.

Footer

I won’t spend a lot of time on this, but the footer section contains some of the standard utility page (site map, privacy policy, terms of use) that can are important for legal purposes and also valuable for search engine positioning. I know some sites, or directories won’t even link to your site if you don’t have these elements in place. I also included links to the main service page that are keyword rich text links (leader generation, sales consulting and sales training). In the copyright, I always like to use a dash followed by keywords that are linked to the homepage as well.

Today I covered global components and next will discuss other components including: sub-navigation on internal pages, style guide, and all of the other components that make up the homepage wireframe.

Posted in Web Architecture | No Comments »