It sounds pretty basic, but navigation areas on a website tend to be anything but basic in today's design-centric world. In fact, many designers take a number of creative liberties with navigation that can certainly be considered edgy, but might not be considered very useful or highly recommended. When creating a new website navigation system, there are a few guiding principals and considerations that will maintain usability, keep visitors in the fold, and encourage them to explore rather than to leave. Following these basic guideposts will help websites enhance their SEO, conversions, and sales, and those are all very good sources of motivation during the design process.
1. Start with the Basics: Make Navigation Labels Easy to Understand
There is a tendency among today's website designers to get a bit crafty when it comes to creating the language of a navigation. While this might not deal specifically with design itself, language is considered a design element and one that can have a substantial effect on perception and usability. For this reason, it's important to keep navigation designs basic not only aesthetically, but also linguistically. For example, it might be a bad idea to replace the word "portfolio" with "highlights" or the word "archives" with "old stuff."
Be descriptive, but use common language and descriptors that resonate with users. After more than two decades of building websites and learning from past mistakes, many navigation names are standardized. Words like home, about, archives, store, portfolio, products, blog, and others, have a clear purpose. They also are just one word, making them brief and easy to design around with XHTML and CSS.
2. Don't Be Afraid of the Two-Tier Navigation Design
Internet users don't like to be overwhelmed, and they particularly loathe making complicated choices that might take them somewhere they simply don't want to go. These preferences can make or break a website based on how it styles its navigation. The vast majority of pages today have had years to grow and expand, creating new pages, subpages, and sub-subpages all with unique content. The temptation is usually to place all of these pages and subpages in a single navigational element, all alongside each other as equals. This is a mistake.
Users need to be presented worth limited choices when it comes to navigating a website. Instead of being presented with links to blog archives, product archives, and design archives, they should be greeted simply with a navigational link to "archives." Once they click through, the navigation area may well expand to a second tier, with each of the three earlier options listed below the general "archives" label. Again, this gives the user a select few choices, but only after they've made the big decision that leads them to the archive area in the first place.
Remember that all pages can usually be grouped under three, four, or even five basic categories. Everything else should be kept to a second tier, where users can again choose form a smaller list of choices that will be more welcoming than intimidating.
3. Try Not to Turn Navigation into a Nonstandard Work of Abstract Art
The great benefit of new technologies like HTML5 and CSS 3.0 is that they allow designers to do roughly anything they can dream up, all without very many image files or extra page heft. The main downside of this is, of course, that designers can now do virtually anything they dream up. The wide world of HTML5 possibilities has seen many websites go well into the realm of the abstract when creating a navigation area. That's a really poor choice.
Why? First and foremost, a navigation area is a functional element and not a presentational tool. A web design always places function first and form second, even if that might sound counter to the word "design" itself. That's why all websites are urged to adhere to what are generally known as web design conventions or base levels of aesthetic guidance. These conventions state that websites require a masthead, typically at the top of the page and before any navigational elements. They also guide designers toward placing the navigation next, the content column after that, and one or more sidebars as accessory items before the footer. Stick to these conventions.
There are thousands, or maybe even millions of ways to design a cutting-edge navigation that won't involve running afoul of accepted web design conventions. For this reason, even trendy designs should focus on textual navigation elements that require no hover to be seen. All words should generally be displayed using actual text rather than images, and text should use high amounts of contrast so that people of all ages can easily read it and take action.
Don't give into the temptation of HTML5 and CSS 3.0 when creating navigation areas. Drop-shadows, translucency, rounded corners, movement and other things are appreciated. At the end of the day, though, those things shouldn't come at the expense of reaching any destination.
4. Embrace Descriptors and Contextual Navigation Labels
Okay, so maybe the site itself embraces cutting edge design and wants to make the navigation a bit more quirky and hard to figure out than the competition. That's fine, or at least it can be fine if designers add context to their innovative take on traveling through a website's pages. In recent years, one of the biggest trends in web design has been to usher in a new era of trendy design while providing context that links established user patterns to new design conventions. This is often done with navigation labels or descriptors.
For example, a website may decide that its portfolio should stop being labeled as such. They might prefer to call it a "showcase" instead. The average user has no idea what a showcase is in the context of the Internet. In fact, most people will probably be reminded more of "The Price is Right" than they will be a portfolio. That's okay, though, because the designer was thoughtful enough to add context. A smaller font, located just underneath "showcase" explains: Work for past clients.
Users are immediately clued in: This is a showcase of the designer's work for other people! They understand, just by reading that simple contextual clue, that the showcase is a portfolio and that's what they're interested in seeing. Instead of hitting their browser's back button or leaving the Internet behind entirely for a few moments, they click through and the portfolio does its job regardless of its official name.
Designers who can't resist the temptation to play around with web conventions, or throw them out entirely, need to add context. It's the saving grace and the redeeming compromise that makes tomorrow's designs possible in a world still focused on yesterday's standards.
5. Always Indicate the User's Present Location Using the Navigation Area
When people use GPS in their cars, the system always informs them that they made the right move. It updates the screen to show that miles have been passed, the destination is getting closer, and that the driver is on the right track. While people don't need GPS for websites, or at least they shouldn't, it's still important to reassure visitors that they made the right click and that they've ended up where they wanted to go in the first place.
This is principally the job of the navigation area. In addition to showing users where they can go, navigation must indicate where users are. This is actually pretty easy to do, and it doesn't really require a big change to an existing design. It can often be as easy as changing the color of the text that labels a visitor’s current page. Some websites choose to darken the background or change its color entirely, while others opt for more visual representations of place and location.
No matter how it's done, indicating where a user currently is within the website is essential. They need to know that they landed where they wanted to be, and they need to know how far away they are from where they started. These things will keep users aware and engaged with the site for a longer period of time.
Why the Big Focus on Website Navigation and Location Concerns?
The guideline for website navigation are pretty broad, but also pretty strict. That's for a good reason. Though virtually everything else on a website is open to interpretation and personal taste, navigation is required and regulated by forces that don't just include the average user looking to read a blog post or buy a company's product. There are very real ramifications that come from having a great navigation.
1. Search Engine Optimization Depends on Great Nav Designs
To get off of Google's eighth page of search results and finally make it to the front page, site designers need to focus centrally on navigation design and usability. Only those websites with very apparent, intuitive navigation areas can earn the crown and place first in Google's search engine results. In fact, the service has a specific algorithm for determining where the navigation is and how easy it is to use on a regular basis. If those algorithms find the site hard to navigate, they'll punish it by pushing it further down the list no matter how great its content and keywords are.
2. Users Associate Navigation with Reputation
In study after study, users associate design with reputation. Furthermore, they associate a great navigation with a site that's ready to work with them and guide them toward its products. Along with studies that equate design sense with site reputation, users are also inclined to make the navigation area a central "hot spot" for clicking and glancing. Most people look at the navigation first, the logo second, and the content third. If the navigation can't make an impression all on its own, the site will suffer over the long-term.
3. Revenue Goes Up When Usability Goes Up
If a visitor can find their way to the site's products, they're more likely to buy them. That should go without saying. Even so, it's something that many designers tend to forget when the creative itch strikes and a good idea turns into reality in Adobe Illustrator or other prominent tools. Focus on guiding users toward the goal with an intuitive navigation, and the site design will do much of the heavy lifting when generating sales and scoring meaningful user conversions.
As with All Design Elements, Be Sure to Test, Reconsider, and Test Again
When the time has come to get serious about attracting users, moving up in search engine rankings, and producing a positive effect on company earnings, navigation design is one of the first things that should come to mind. Designers need to make sure that their navigation is contextual, with sensible labels and conventional web design cues that users have long become accustomed to over the last few decades.
Any change to navigation design or placement should always be extensively tested before deployment, and those tests should be completed by average, non-advanced Internet users who represent the typical company visitor. With extensive testing, and the creation of several different navigation concepts or iterations, websites will find it far easier to attract seasoned Internet veterans, those visitors new to the Internet, and a wide array of people who will simply be more likely to sign up, engage, buy, and come back for another visit in the future.
MaryellC94, 24 December, 2014
My programmer is trying to convince me to move to .net from PHP. I have always disliked the idea because of the expenses. But he's tryiong none the less. I've been using WordPress on numerous websites for about a year and am worried about switching to another platform. I have heard good things about blogengine.net. Is there a way I can import all my wordpress posts into it? Any kind of help would be greatly appreciated!