Website navigation and usability – creative solutions

• qnt gallery
• On June 30, 2012
• http://www.quandtnet.de

The navigation is, as everybody knows, one of the most important elements of a website. It should lead the user fast and specifically to the contents which are of interest to him. A website navigation serves the orientation and guidance of the visitor. Visitors must be able to recognise as quickly as possible which information a site offers in which areas the contents are divided and which subareas offer more detailed contents.

From the beginning of the web comes the typical navigation concepts. These consisted of mostly easy menus in upper or lateral (mostly left) margin of a website. According to user’s orientation it is also advisable today, to keep sometimes closely to these proven concepts. Today with more available advanced technologies for website programmers many other possibilities come up to lead the user through the contents of a website. Keywords for this would be for example JavaScript, jQuery and CSS3.

The classification of the target group as well as kind and extent of the contents to be displayed decide on how far the web designer may go away from current concepts and realise his creativity.

Even if I love to experience nice and innovative pages, I feel it sometimes quite laboriously on some sites to reach the one or other interesting area with suitable informations.

Further below are different good website design samples listed which trace quite different concepts of website usability. Have a look at them and decide yourself how you find your way through and as you feel the respective site. With pleasure I read your experiences and opinions in your comments!

Some basic points
which you should consider while compiling your navigation concept:

• Consider which visitors should use the page. Are these the masses “normal” or are these web-experienced users?
• Hold the structure of the contents simple and use unequivocal, self-explanatory keywords.
• Are the used technologies supported by the browsers of the target user group? Perhaps there are for existing web pages already analysis data available.
• The visitor should always have the possibility to orientate himself new. This succeeds for example if key elements, like a link to the homepage, are always available.
• Offer by the use of graphics as a menu also a alternative text navigation because simple images are not always enough to guide the visitors.

Samples


wearepollen.eu
This site uses a very minimalist main navigation with only three points. An other explanation of the available sub sections, mostly project samples, occurs through black-and-white key-pictures which are replaced by coloured images by move over. The project section contains a sub menu with all projects as text links.


mattdelbridge.com
Another example of a minimal navigation – according to the selected look of this portfolio website. The sub sections are also accessible per key-pictures. There you reach the previous or next project by using an arrow navigation.


collisionlabs.com
Site of a creative agency from Chicago. Here the single project sections, like web and print, were integrated directly into the main navigation. The sub pages are accessible via key-pictures.


mini.jp – big point
A very successful example of a promotional site (in this case a MINI car model) which uses the at the moment often to be seen Parallax effect for representing the specific facts of the product. You can find out the whole presentation by scrolling. In the low end of the page are some pictures which provide further information after a click on it. An alternative static navigation to be reache the single points of the page is available.


withart.visitphilly.com
The nearly whole contents of this web site you reach through the horizontally arranged pictures which display a short tip to the respective entry by moving over. With a small menu on top the shown choice can be limited.
Furthermore the page offers an interactive map. With this map you can find out more about the “Benjamin Franklin Parkway” in Philadelphia. Offered news the user can reach only in the lower page area and a footer navigation.


theexpressiveweb.com
A vertical navigation brings the visitor on this site to some wonderful CSS3 and HTM5 examples. Additional informations about the used functions are in the bottom of every page. They are to be reached by a submenu or by scrolling down.


glamour.biz
Main navigations based on icons use this web site. It is available if you move with the mouse over the prominent placed arrow on top (it would be interesting to know, how it works on a tablet). Submenus are directly below the main navigation.


leading-art.com
Three menu points centrally on the beginning of the page placed form here the starting point for a visit. Similar to the before described mini-page is this a one-page website which can completely explore by scrolling down. Every subarea contains again the main navigation so that the user can jump any time from the one to the other.


olivierstaub.com
An interesting kind of user’s guidance has been selected for this site. To the single sections you can navigate with centrally arranged big transparent frames. An alternative text menu is available on the left side. In the photo gallery you can navigate by using the arrow keys of the keyboard or click on small rectangles which are arranged on the right in a grid.


domanistudios.com
To see this site completely you must use a main navigation on top, scroll and click through a Slider. One subpage is created by using the parallax effect. A great site, however the orientation is a little more difficultly.
…it is the site of a creative agency. From such like this however I expect some experimental joy ;).