Web Design for ROI - Levels of Navigation

Levels of Website Navigation

If you haven't read my earlier blog postings, you might not have realized just yet how much I enjoy talking about website navigation. And it's not because I've had nothing but pleasant experiences when dealing with this important topic on one end of the other. I have been unfortunate enough to either witness poor (borderline hideous) navigation, or to learn the hard way that the seemingly intuitive navigation I've created isn't always so intuitive to others.

To start off, I would like to briefly touch on the three main levels of navigation, home page, category page, and detail page. After reviewing a general description of each, we will delve further into their dependance on one another.

• Home Page - Over time, the home page has evolved from being the first page any visitor to a website sees, to often times not being seen at all by visitors. This is attributed to the development of search engines that allow users to find a direct link to specific pages within the site. Search productivity has increased for users, but it has been at the detriment of the home page to an extent.
• Category Page - Category pages are generally groupings of detailed pages accessible on the home page. Appropriate and intuitive categorization is integral to allowing visitors to drill down to the information they need. One situation that make categories so critical is the need to avoid sending visitors down a rabbit hole. There are few worse experiences for a first-time visitor of a site than to click a category and find details they didn't expect. Even worse is reaching a dead end
• Detail Page - Detail pages are the deepest and most magnified destination in web navigation. At this point, we are hoping the visitor has found the information they sought out to find. If not, they have reached the "dead end" mentioned above. It's best not to place too much information on a single detail page, ensuring the layout is easy on the eyes and scannable when reading.

Upon understanding the significance of these three navigation levels, one should consider how they can work together for the purpose of guiding visitors to and from the detail pages starting from the home page.

• Home Page > Category Page - You have a few choices when it comes to determining how your categories will sit on your home page. The grouping of categories is what is often referred to as "navigation", and you can have left, right, or top navigation with any variations in between. A typical top navigation might contain the following categories:

"Home"

"Products"

"Services"

"About Us"

"Contact Us"

Be sure your categories are easy to read, and make it obvious that they are "clickable"... in other words, placing your mouse over a category and left clicking will take you to that category page.

• Category Page > Detail Page - Once a category is clicked from the home page, users will be taken to the corresponding category page listing links to detail pages. The layout for this doesn't have to be over the top. Clarity is far more important to users, so a simple column of links that can be clearly read will do.
• Detail Page > Category Page / Home Page - Let's say your visitor has made it to a detail page...only it is the incorrect detail page. In their moment of disappointment, they look eagerly for a way to take a step back (navigationally speaking). However, you've done them a great disservice by leaving them with no choice but to click your large logo in the left side of the header that will take them back to the home page. Oh well, let's hope they remember which category they selected. Better yet, avoid this situation altogether by providing a link back to the category page that houses that details page.

All I Want for Christmas...is a great HTML editor

The MIT program recently hosted guest speaker J Cornelius of Coffee Cup software to discuss the company's web design tools. He serves as VP of Operations and had a wealth of information to share about their products. I have actually used a free download of Coffee Cup HTML editor for a previous JavaScript project and was not incredibly impressed. However, the download I had was not full-featured, so I've yet to see the full potential of the tool first hand.

A good HTML editor can be a beautiful, time-saving tool that can help you to stay organized as you create your web page(s). Even more appealing to me personally is an HTML editor that provides the flexibility of switching between "code" and "design" view. As an Internet Technology student, it is crucial that I can both write and comprehend the code needed to create a website. However, the more complex your web design becomes, the more tedious and time-consuming it is to experiment with changing the shade of green for your background, aligning your right navigation or the text in your footer, changing fonts, and so many other necessary/repetitive actions.

Web design software can greatly assist you with making these tweaks quickly and accurately. The greatest example I have found thus far (and I admit I haven't explored many) is Adobe Dreamweaver CS5. One of the features I love the most about Dreamweaver is its inclusion of the "pick color" tool. As opposed to searching for and guessing what hexadecimal code is the exact match for the color you desire, you can use the "pick color" tool to select that exact shade, hue, etc. Furthermore, you can switch your view between "code", "design" or "split" to view both side by side. There is an additional option to view the "live" code so that you can get a better feel for that your webpage would look like in a browser.

I nearly forgot to explain my odd title for this blog post. As we enter the 2010 holiday season, my goal this year is to be proactive in preparing for the inevitable exchanging of various gifts we've come to know as the commercialized Christmas (My focus is celebrating family and faith, but the gifts are always in the mix). With this in mind, I am already nagging family and friends for their gift lists and have taken the liberty of beginning my own relatively early. After realizing I already have everything I want/need, I finally settled on one thing I would not only love, but would greatly benefit from in my field of study... Adobe Dreamweaver CS5 of course! Anyone familiar with Adobe's products knows all too well that their software is not cheap. Instead of receiving several moderately priced gifts I won't get much use out of, I'd much rather have a single more pricey gift that will assist me in my many web design endeavors! Just a note...from past Christmas gift experience, I am almost positive this plan of mine is out of my realm of control and will fail miserably. But it's certainly worth a try :-)

SpoolCast - Luke Wroblewski

UIE (User Interface Engineering) is a technology consulting firm with a focus on web site and product usability. Their website is home to the UIE blog SpoolCast (name after the company's founder and CEO Jared M. Spool). The blog features numerous posts highlighting user interface experience topics.

As a part of last week's homework, we listened to a podcast within one blog posting by UIE Podcast Producer Brian Christiansen. Christiansen interviewed designer Luke Wroblewksi who started of discussion with the very innovative Google Instant. In my personal experience, I had missed any murmuring of this new Google search engine feature. Instead, I was pleasantly surprised when I stumbled upon it. Like many others I talked to who discovered Google Instant the same day, I was extremely impressed by the real-time search results I received the instance I began typing.

Either way, back to the expert Wroblewksi. I found his mention of Yahoo's LiveSearch interesting as I had no idea that Yahoo had developed its own instant search interface back in 2005. He explains that users involved in the demo described the experience as "magical", very similar to how I and acquaintances perceived Google Instant.

Web Usability - Navigation

An integral part of designing a site with excellent usability is allowing users to find the information they need in as few clicks as possible. This requires an intuitive navigation which involves consideration of layout, labeling, and content.

The navigation of a website can either enhance or destroy its usability depending on how challenging finding information is. Anyone who has ever visited a site and found themselves going in circles (or perhaps reaching a dead end) in search for that one nugget minutes later understands just how critical web navigation is to user experience.

During class last Thursday, we were given an assignment that involved going through a list of items/pages to locate within a designated website. My group was surprised by how many clicks it took to find what we felt was important enough to be on the home page. This class activity provided a perfect example of the divide between what a web designer and user considers to be intuitive navigation.

Here are a few critical items to consider in relation to navigation:

1. Logical grouping of information
2. Appropriate and consistent labeling of pages/hyperlinks
3. A way to navigate backwards without hitting the "Back" button

Web Accessability - "I hear you knocking...but you can't come in"

"I hear you knocking
But you can't come in
I hear you knocking
Go back where you been"

This 1970 Dave Edmunds Billboard hit really sums up accessibility issues as they relate to the web. Website designers who choose to create pages that lack accessibility are sending this very message to individuals with audio, visual & mobile disabilities to name a few. Careful consideration should be taken when designing for those who use tools such as screen readers, braille terminals and speech recognition to utilize the web.

Wikipedia defines web accessibility as "the inclusive practice of making websites usable by people of all abilities and disabilities." Some of the most common accessibility issues include:

• Invisible content - content with a display:none or visibility:hidden in the CSS
  
• Missing alt tags - Images that do not display should still show a descriptive text so that users have an indication of what is missing
  
• Event handlers - events like onclick or onmouseover should not require a mouse or keyboard
  
• Words displayed as images instead of text - once zoomed in, these images will appear pixelated while text will remain crisp.
  

Visual Web Design

The combination of colors you choose to use on your site is essential to its visual appeal. An unpleasing or awkward mix of colors not only looks bad, it can distract users and reflect poorly on the credibility of the site.

A great colour scheme can help you to achieve the the highest quality look and feel when applied to your header, footer, navigation, body, and text.

The following from 1stwebdesigner lists 10 basic visual web design mistakes:

1. Bad Font Usage
2. No Images, Text Only - while having enough white space is important, there needs to be an adequate balance of your use of images and text throughout.
3. No Paragraph On Long Articles
4. Very Tiny Font Size
5. Heavy Flash Usage - too much can slow down your website
6. Body Text Above Colorful Background - It's never a good idea to attempt placing text (any color) over a colorful background.
7. Too Many Advertisements
8. Unwanted Pop Ups - This is a quick and easy way to lose visitors.
9. Too Long Articles
10. Link Colors Aren't Visible - Your link text colors should be a different color from your regular body text. An example would be a bright blue link in contrast to the black text.

http://www.1stwebdesigner.com/design/basic-visual-web-design-mistakes/

Web Standards

Designing using Web standards requires adhering to the predetermined specifications and standards set by organizations such as WaSP & W3C.

Using web standards is beneficial for individuals who strive to give themselves (or clients) a professional appearance and reputation.

Web standards are important to web design for:

1. Maintainability
2. Usability
3. Clients
4. A quality design

From http://dustinbrewer.com/why-web-standards-are-important-in-web-design/