Navigation
Key Terms of Traditional Navigation
-
Local, Global and/or Universal- An element of a web design which appears on ALL pages of the site or product.
-
Primary (linking)- A type of navigation which is a consistent navigation from a home page to each inner page.
-
Secondary (linking)- A type of navigation which is found under a specific primary section of the website.
-
Tertiary (linking)- A type of navigation which is a page which “link off of” meaning that it can be found only from a secondary page.
-
Utility- A utility is another type of navigation which can consist links to subjects such as “my basket” My account” etc. Utilities are usually found in the header or footer of the web design layout.
- Footer- A footer is another type of navigation which is always at the bottom of the web design
Open your website with clear navigation.
SiteMap
Above is a screenshot of my “site-map”. I had got a site-map from google images and I had labelled the Utility, Tertiary, Primary and Secondary navigation, using Adobe illustrator. In addition to that I had added a “Tertiary” box as this image did not included that type of navigation.
Footer
Why have they put these elements in the footer?
These elements are combined within this footer is because it contains elements of utilities which provide information for its customers. Theses elements are not as important as the header, usually some sort of social media is combined within the footer or about the companies privacy. The footer screen printed below provides customer service and more information about Apple. Footer is also global. (it is on every page)
Conventional Website Design
Above is a screen print of my own design of a “Conventional Website”. I had created this design using Adobe Illustrator. I have clearly labelled the specific boxes which are included in a typical conventional website layout.
Tasks A.
Nomenclature of navigation
Define ‘local’ and ‘global’ navigation
The term of “Local” and “Global” is something you only see on one page, it could be a particular link to something. Every website has a “Global” navigation. This is a consistent element within a web design.
What is usually included in the footer?
A footer is a type of navigation which is always included ion every page of a website and/or blog. The footer is always appears at the bottom of every page of a wed design. Text is usually included in the footer, this may contain information related to the website such as:
- Copyright information
- Contact information
- Social media links
- Logo
- Badge or widget
- Links to privacy policy, legal disclaimers
- A feature product description with a link to the sales page
- Link to “about page”
Screenshot 2 interactive products and label the primary, secondary and tertiary links (one must be a website, others could include apps, games or digital magazines). Label any visual cues to aid navigation. Also label any error tolerance (back or redo button?)
Do some research. Compile a list, with examples, called ’10 Principles Of Navigational Design’.
What makes navigation good?
Navigation is a key feature within a design. The main navigation is “Primary navigation” which is presented to users/customers when they first arrive on a website. This then means that this type of navigation should be simple. This can included the language, the organisation, the placement, the size of the font… basically everything should be simple. This is the most important and most useful element of a website, therefore it shouldn’t be complex.
Continuing to my first point the main navigation should be consistent in how it groups information, this makes the web design simple and easy to navigate through the site. Placing inappropriate links into a main navigation is a quick way the “put off” the user/customer who is navigating through the website.
The navigation should be short, meaning it shouldn’t give too many options,; shouldn’t be more that tertiary. I f a web design has more than 7 tabs or links it makes it hard for the user to navigate through the website to find what they initially wanted. This is a really big “put off”.
10 Principles Of Navigational Design
- DESIGN FOR THE READER
- PROVIDE A VARIETY OF NAVIGATION OPTIONS
- LET READERS KNOW WHERE THEY ARE
- LET READERS KNOW WHERE THEY’VE BEEN
- LET READERS KNOW WHERE THEY ARE GOING
- PROVIDE CONTEXT
- BE CONSISTENT
- FOLLOW WEB CONVENTION
- DONT SURPRISE OR MISLEAD THE READER
- PROVIDE THE READER WITH SUPPORT AND FEEDBACK
Why is navigational design so important?
Navigation design is a important feature within web design. This is important as it allows people to access the site from pages other than the home page, which provides them with more information. Without good navigation that covers the site, visitors can get stuck on a page which results to them not being able to explore more of the website.
A bad navigation website could include multiple links (giving too much desired information) (unnecessary) This then results to the website forcing the visitor to put in too much effort when it comes to moving through the website and finding what they want, which then means that the visitor will lose interest into what they initially wanted.
The website should be designed well, basically organised. Navigation “organises the website”. Making good use of primary navigation, secondary navigation, menus and internal linking creates a well organised designed website, which makes it easier to navigate through the website.
Awwwards link
Tasks B. The good, the bad and the ugly
Find a website that has broken navigational conventions (different visual cues, alternative global primary and secondary navigation structure). Visit www.awwwards.com for help.
GOOD WEBSITE
Above is a print screen of the link I had clicked onto, which lead me to this website, in which I had clicked on a additional link which brought me to the official website, in which I initially wanted to browse through.
This website http://www.giraffe.net/ is one of the few websites I had came across while browsing through www.awwwards.com. This website is very simple and specific to it audience. The major theme and information provided is about different hotel/restaurants, which is found “nearest to you”.
Clearly this type of Restaurant/hotel is very child friendly. The childish like design throughout the website is to attract its audience which is parents who are looking for a simple nice get away for a typically weekender or short break. Throughout this website appropriate language is used and images which appeal to its target audience.
The information provided is simple, the main foundation has a consistency of providing appropriate information. There are many features of more visual elements within this design layout, the use of pictures and incorporating a video to watch makes it more interesting which interacts with the audience. The toolboxes provided is easy to understand which makes the user feel “confident” exploring/ browsing through the website.
Likewise find a BAD example of navigational design. Why is it bad? How would you improve it?
BAD WEBSITE
Above is a print screen of the link I had clicked onto, which lead me to this website, in which I had clicked on a additional link which brought me to the official website, in which I initially wanted to browse through.
This website http://www.topdesignmag.com/20-examples-of-bad-web-design/ is one of the few websites I had came across while browsing through Google This website isn’t simple and specific to it audience. The main objective f this website is “selling cars”.
Immediately when I had clicked on an additional link which brought me to this specific website, I was introduced with annoying music, then bombarded with different unnecessary images and information about things I did not need to know.
The website has no specific structure and design. It is very hard to know what type of audience they are trying to capture. There is way too much information which is not needed. The different colours do not match, which makes the website look complicated.
This is a typical bad website, which navigation is not clear for the audience.
Ttwarna Malika 