The navigation menu on a website is like a road sign on a street or a level directory in a shopping mall. You cannot reach your destination without first knowing where you are. Like in real life, navigation in web design is very important and plays a major role in a website’s usability as well as in user experience.

Nowadays you can see plenty of different types of navigation menus with interesting, creative and unusual designs. But how about effective navigation in a website, what would it look like; how should it look like?

Today I would like to share my observations and knowledge about the importance of navigation in web design. I will reveal a few simple tips that you can use to improve your website navigation and usability. There will also be some examples of effective navigation menus to give you some idea of how to plan your next design.

Recommended Reading: Breadcrumb Navigation Examined: Best Practices & Examples

Information Architecture

Navigation planning should start with information architecture. It is vital to sit down and brainstorm about a website’s information architecture. You have to figure out what kind of features the website offers, what is most important and what could be placed in lower levels in the information hierarchy.

Information architecture includes features, user needs, sitemap, testing and wireframes. You can read more about information architecture in article by Cameron Chapman in Information Architecture 101: Techniques and Best Practices.

Using user-enabled technologies

Avoid using Flash, JavaScript, jQuery or anything else that risk inhibiting access to your website navigation in building your navigation bar, or at least make sure they are able to degrade gracefully.

For more references on graceful degradation of javascript, check out this post on 10 Useful Fallback Methods for CSS and Javascript.

Use simple, User-friendly terms

It is better to use simple, obvious and terms that are easy to figure out than to keep to industry-only terms for your navigation menu. Any link that takes users more than a second or two to figure out is probably unsuitable for use.

If a user needs to click on a link to figure out what the link leads to then this will contribute to a bad user experience for your visitors.

Examples

Terms in the navigation menu of Larissa Ness’ website are easy to understand and common enough. Users won’t find it confusing because they already have experience with menus like this.

Here’s another good example of a clean and clear website navigation menu with common terms used, at csupport.

Creative agency Eighty8Four uses the term "showroom" which can be confusing for visitors. This term might mean portfolio or work but it is not clear and visitors have no choice but to click in to check it out.

Standardize the Navigation design

Use the same navigation model in all your pages. It is very important because without a consistent design, a user may actually think he is in another website. Make sure that you use the same navigation model so that users can easily go about your website without being lost.

Bluegg, shown below, uses a simple and clean navigation design which remains the same in all subpages. The only difference is the color indicator, which shows the page the visitor is currently at.

Indicate where you are

It is crucial to let the user know where he is at all times. You can do this by changing the link’s background, color of the page name or turn the text bold in the navigation menu to make it different from others.

Austin Eastciders uses a different color and background to indicate the page the user is on. This indicator can also work as a subtle design change, for example by using a different navigation background which creates the feeling that other menu items are in depth.

Media Surgery uses a darker color as an indicator for an opened subpage. Simple but effective.

Use web conventions

It is all about easy-to-use and intuitive website navigation. Web conventions make it a lot easier for designers to work around their designs. Most users would click on the website logo to get back to the homepage, so design your logo to do that.

If you don’t, you are making them spend time to learn something new or in some cases inconvenience them by not providing what they expect to be commonly accepted navigational norms.

You can learn more about web conventions here:

• 10 Web Design Conventions
• Don’t Reinvent the Web Design Wheel
• Design With Web Conventions

Inject Design places the logo at the top left corner which fits one of the most used web conventions today.

Adams Creation uses one of the most common web conventions – logo is placed on the left top corner of the website and links to the homepage.

Test it: Involve a 3rd party

Always test your navigation design with any person who has used Internet before. You might want to bring in people who were not related to the design process to test it. Observe their preferences when they navigate through your site and analyze the time it took for them to find the pages that they were lookign for.

For better accuracy, involve more people, collect the data, analyze and summarize it for a better fit. Do an after-test survey if it is necessary. You may get some unexpected ideas and input that would otherwise go undetected without this test run.

Read more on how to get better user feedback for your website

Provide context

To be consistent with your content and navigation provide some context for website users to find things they need quickly. You can place small icons related to the content you link to or short descriptions to give an overview of what the page is about.

My Own Bike uses simple icons to give users more information about what they can find in certain subpage.

Sarah Parmenter uses short and nice captions under main navigation to provide some information about the subpages the main navigation is linking to.

SEO purposes

Google likes consistent navigation. It is good to have consistent navigation not only for users to understand and get the idea of how to navigate through your website but also for search engines to index your website.

Search engine robots will crawl through your website in order to index your website and put the links in the search engine results page. If you want to be visible, pay attention to good navigation design and get more traffic.

Free navigation scripts (CSS, and jQuery)

Here is a short list of the latest navigation menus you might find useful for your projects. These scripts will make your product’s user expererience even better by adding some nice features and making it pleasure to use.

XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller

Flexible Nav jQuery library

Filtrify

Page Scroller

Timeline Portfolio

HorizontalNav

CSS3 Minimalistic Navigation Menu

Circle Navigation Effect with CSS3

Grid Navigation Effects with jQuery

Ascensor

HTML5/CSS3 Gray Navigation Menu

Create An Elegant CSS3 Navigation Menu

Showcase of beautiful horizontal navigation

And last but not least some inspiring horizontal navigation menus. Check these amazing websites and their navigation menu solutions to find new ideas for your projects.

Ch3mical

Bloom Search Marketing Inc.

Alex Perez

Libor Zezulka

Hauska!

Golden Isles

Neil Carpenter

Marc Thomas

3D Polystyren

Liechtenecker

Adventure World

Arbutus Photography

OMDRL

4 Pines Beer

Hunters Wines

Hopefully you will find this article useful and informative. If you have any thoughts or if you disagree, please share your opinion in the comments section.

We have been fascinated with doomsday prophecies since history allowed us to remember, but nothing takes the cream like 2012, the mother of all prophecies. Dec 21, 2012 seems to be a culmination of all our fears, so much so that even our culture is affected by it. We read about it in blogs, watch it in disaster movies and hear about it in songs.

There are also amazingly talented individuals, who put these visions of armageddon onto paper and artwork (so to speak) and we get beautiful creations like this Apocalypse wallpaper by Richard Roberts. Here we see the Angel of Death walking through streets of desctruction brought upon by man himself.

On a lighter note, the end usually marks the beginning of something new. And if there is one thing humankind does best, it is the ability to celebrate the good in everything they come across.

In the meantime, if you just have to have this wallpaper, you can get them in these sizes.

Download Wallpaper

Desktop

• 1024×768
• 1280×800
• 1280×1024
• 1440×900
• 1680×1050
• 1920×1200
• 2560×1440

Mobile

• iPad portrait
• iPad landscape
• iPad retina portrait
• iPad retina landscape
• iPhone 3G/4/4S
• iPhone 5

About the Author:

This wallpaper is courtesy of Richard Roberts. Roberts is a freelance designer and digital artist. Check out more of his work at richardroberts.com.

Want to Release a Wallpaper With Us?

If you would like to see your own beautiful artwork or photographs turned into wallpapers and shared amongst our readers like what we are doing here, drop us a line and we’ll see what we can do.

In many places where you need to input your password to gain access, authorize or confirm a transaction, whenever you type passwords into the input text box, the characters automatically turns into asterisks or bullets. This is to protect your password from straying eyes.

However, in situations that require you to know what lies behind those asterisks, we’ve got a simple trick to reveal the passwords on your web browsers.

These hidden passwords are disguised with the help of simple HTML and CSS. So just changing the value of something specific will easily reveal what’s behind those bullets or astericks. We’ll show you how this is done in Google Chrome and Firefox.

Recommended Reading: Golden Rule To Internet Security: Change Your Passwords

Google Chrome

In any website which contains your saved password, right click on the password box and click on Inspect element.

You’ll now notice the bottom quarter of your screen filled with codes. You only need to focus on the highlighted (in blue) part to reveal the password.

Look for type="password" and double click on it. Replace the word ‘password’ with ‘text‘.

It should now look like type="text". Hit Enter.

After you’ve changed that, the text behind the asterisks or bullets will be revealed.

Mozilla Firefox

To reveal the password in Firefox, first, right click the password box and select Inspect Element.

A dark grey bar will appear at the bottom of the browser; click on the Markup Panel or hit Alt + M.

It will reveal a few lines of codes; the line you want to focus at is the highlighted line.

Again, look for type="password" and double click on it. Replace the word ‘password’ with ‘text‘ so it looks like type="text". Then hit Enter.

The password masked behind the asterisks or bullets will now be revealed.

Wrap Up

We have the tendency to hit the "Remember Me" option save our login passwords for easy access. After a while, it’s possible that we’d forget what the password was. This quicktip will be useful to help you retrieve your passwords from behind the cover of asterisks.