Web Design and Development
theLonelyWolf
08-Navigation.pptxNavigation
Some content from:
Deliver First-Class Websites 101 Essential Checklists
(Shirley Kaiser)
Principles of Web Design (Joel Sklar)
CP1406/CP5638
Learning Outcomes
understand user-centred issues regarding website navigation
be able to follow common guidelines to create meaningful and effective navigation
2
Creating Usable Navigation
provide enough location information to let the user answer the following navigation questions:
where am I?
where can I go?
how do I get there?
how do I get back to where I started?
3
https://onextrapixel.com/12-navigation-options-that-help-users-navigate-through-your-website-effectively/
Creating Usable Navigation
to answer these questions, provide the following information:
let users know what page they are on and what type of content they are viewing
let users know where they are in relation to the rest of the site
4
Creating Usable Navigation
provide consistent, easy-to-understand links
provide an alternative to the browser's Back button to let users return to their starting point
if links don't go to pages in the same browser window, provide visual cues as to what and where they go - e.g. for PDF links and links that open in new windows
5
Internal
External
CSS for Hyperlink Cues – PDF
<a href="files/holidays.pdf">View Holidays</a>
a[href $= '.pdf'] { // attribute selector
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right; }
http://askthecssguy.com/articles/showing-hyperlink-cues-with-css/
6
$= means “ends with”
6
CSS for Hyperlink Cues – External Link
<a class="popup" href="help.html">View Help</a>
a[class = "popup"] {
padding-right: 18px;
background: transparent url(popup.gif) no-repeat center right; }
http://askthecssguy.com/articles/showing-hyperlink-cues-with-css/
7
8
Building Text-Based Navigation
text-based linking is often the most effective way to provide navigation on your site
always provide a text-based set of links as an alternate means of navigation
use accessible (text) links as alternatives to graphics/Flash/JavaScript, so any user can navigate
9
Adding Contextual Linking
use hypertext to connect facts, relationships, and concepts
contextual links allow users to jump to related ideas or cross-references by clicking the word or item that interests them
these are links that you can embed directly in the flow of your content by choosing the key terms and concepts you anticipate your users will want to follow
10
What Are The Main Advantages of Contextual Links?
Increase awareness of your website
other companies may include your article on their web page earning you a backlink and a higher SEO score
increase SEO and recognition can lead to an increased social media presence through reposting and sharing
help decrease your bounce rate while making the site easier to navigate
you will earn a higher ranking in search engine results because of increased credibility, relevance, SEO scores, and user experience
contextual link building also increases trustworthiness; shows the user that if you don’t have the right answer, you aren’t afraid to send them to the right place
higher site ranking will generate more traffic leading to greater chance of conversions
11
Using Graphics for Navigation Links
if you use graphics for navigation, use the same graphics consistently throughout your site
these provide predictable navigation cues for the user
reusing graphics minimizes download time
12
Using the alt Attribute
include alt attributes in ALL of your <img> tags
the alt attribute is important to accessibility (e.g. voice-assisted navigation) and search engines
13
14
Using Icons for Navigation
be careful with navigation icons
not everyone agrees on their meaning
many Web sites include
descriptive text with navigation icons
15
no descriptive text
Guidelines for Effective Navigation
create the navigation system with users in mind
place the navigation system where users expect to find it
16
Predictable locations for navigation systems
Guidelines for Effective Navigation
ensure that the navigation system accommodates the various ways in which visitors want to access content and functionality on your site
based on user analysis (planning)
some users will have different needs and goals than others, so
provide multiple ways for users to access information
17
Multiple ways…!
Guidelines for Effective Navigation
use the flowchart/sitemap you planned (information architecture) to inform the development of your site’s navigation
create and implement a consistent navigation system throughout your website.
templates or file includes can help with this
use navigation labels that are concise, conventional, and easily understood
think carefully about what to call links/pages
18
Creating User-centered Global Navigation
include a link to your home page in your global navigation
users expect to find links to the home page in the top-left corner, and in the footer at the bottom of every page
include links to all of your website’s top-level sections in your global navigation
19
Our typical response is that users are conditioned to return to the homepage by clicking the site logo; adding a link to home is optional and may be extraneous. We refer to sites like Google and Amazon as examples of websites that have opted to leave it out of their top navigation bar.
Creating User-centered Global Navigation
provide contextual clues that identify the user’s current location
keep in mind users may come to any page from anywhere (not necessarily via your home page)
e.g. using breadcrumbs
use minimal global navigation (or distractions) on form pages
eliminate navigation elements that aren’t required to fill out online forms, but do provide a link out of the form process
20
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application.
Breadcrumbs
21
The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original
You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner.
In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.
breadcrumbs
Avoid Creating Unnecessary Pages
creating more pages than is necessary can impact badly on usability.
it can be harder for users to find what they’re looking for and understand the site’s navigation.
consolidate pages as appropriate (logical) to improve the user experience.
consider providing internal navigation to give an at-a-glance view of the page content and to allow convenient navigation within the page.
22
First: Good Information Architecture
ultimately, it's most important to plan your information architecture well and then design navigation that matches this, giving users options to get to where they want to go.
23
Summary
navigation is a fundamentally important area of Web design
navigation should be user-centred
follow common guidelines to create meaningful and effective navigation
24
