aimeemwade.files.wordpress.com · web viewfinal project 1: final draft. 8 website navigation best...
TRANSCRIPT
8 Website Navigation Best PracticesMarch 21, 2012 by David Hartstein
April 12, 2017 Revised by Aimee M. Wade
A visitor has navigated to your website in search of specific information, and most of the
time, the information they are looking for has a lot to do with the title of your website or web
page. Navigation is what will captivate the readers and often is what will guide them to what
they are seeking. Something as simple as word choice can be the biggest difference between a
visitor finding what they’re looking for and feeling invited for a return visit, or your visitor
leaving your website all together in frustration and never returning again. Effective navigation
can facilitate a fruitful visit and increase the likelihood of a return visit in the future.
Ineffective navigation can lead to an unproductive visit and feelings of dissatisfaction,
which don’t generally bode well for a return visit.
Here are 8 best practices to bear in mind as you think about the navigation for your
website that will promote a fruitful visit and increase the likelihood of a return visit:
Wade Page 2Final Project 1: Final draft
1. Avoid Jargon in Website Navigation:Remember, your website navigation is not for you – it’s for your visitor. Don’t use
jargon (special words or expressions that only insiders will understand). If you’re unsure
whether or not someone will know what you mean, try rewording it or simply provide a
definition as in the sentence previous to this sentence (see above), which defines the word
“jargon”.
2. Use Common Page Names in Website Navigation:
Navigation is not a time to get overly creative with your word choice (design is another
matter altogether). The goal is to provide users with a structured way to find what it is they’re
looking for on your website.
Use common page links in your navigation. For example:
Home: This link will direct you back to the website’s original beginning screen where the majority of introduction content can be found.
About Us: This link will direct you to a web page that will give your information as to the author’s purpose, mission, and goals.
Products: This link will generally direct you to a site to where you can purchase sponsored materials such as literature, clothing, assistive technology, music, reference materials, writing utensils, and more.
Blog: This link will generally direct you to the author’s blog site where the author hosts communication forums for further discussions in regard to the website’s content and other links.
Portfolio: This link will generally direct you to more detailed information as to what you can expect to find from the author’s other work produced on other sites, literature, and references.
Wade Page 3Final Project 1: Final draft
Contact: This link will direct you to a web page that will give you the author’s physical and mailing addresses, e-mail address(es) for communication, and telephone number(s).
Donate: This link will direct you to a web page where you can donate funds to aid in furthering the author’s purpose, mission, and goals.
If you’re going to deviate from the norm, make sure it’s evident what a user can expect to
find in each portion of your website.
3. Keep It Short:Sum up what information a visitor will find in a word or two. There isn’t much real
estate on the navigation bar, and users don’t have much patience. Be succinct.
4. Use Dropdown Menus in Your Navigation:If the pages in your navigation have sub-pages, you should include dropdown menus.1
Dropdown menus allow users to scan the different items of content references in each section of
your website without scanning through the entirety of the website. By getting a feel for the
content in each section, a user can make a more informed prediction as to where the content they
seek resides within your website. Following is an example of a dropdown menu:
1 Wired Impact’s website for “6 Website Navigation Best Practices” adequately provides a sufficient amount of dropdown menus and ensures that all dropdown menus are clickable; therefore, all dropdown menus provided in this website’s web page is hereby incorporated herein this revised document as if verbatim in both language and in appearance for the purposes of this project.
Wade Page 4Final Project 1: Final draft
5. Make Sure All Menu Items/Links are
Clickable:Make sure all menu items and links are clickable.2 For instance, even if you have an
“Our Mission” page in a dropdown under “About” in your navigation menu, a visitor should be
able to click on the “About” page if they’re so inclined, which will open up a web page that will
provide information as to the author’s purpose, mission, and goals. Going back to expectations,
most users will expect these items to be clickable since they’re in your navigation.
6. Design Principles:Design principles, as stated by Reep (2011), are “…qualities important to any visual
presentation regardless of topic or audience. Experienced designers use the principles of design
to create the “look” they want for a document. The general principles most designers consider in
all documents are balance, proportion, sequence, and consistency” (p. 123). Adding graphic aids
is an additional quality equally as important as this increases the professional appearance of your
website and allows deeper understanding of the content for the reader.
a. Balance and proportion:
With any document or web page created, having balance in your presentation is an
essential element. Balance can bring organization, a sense of professional, yet fun appearance,
and ease of navigation. For example, as you review over this section, you will notice that all
content is centered between the left and right margins of the page (balance), placing an equal
amount of space on both sides of the centered content (proportion).
2 Wired Impact’s website for “6 Website Navigation Best Practices” adequately provides a sufficient amount of links and ensures that all links are clickable; therefore, all links provided in Wired Impact’s web page is hereby incorporated herein this revised document as if verbatim in both language and in appearance for the purposes of this project.
Wade Page 5Final Project 1: Final draft
b. Sequence:
Arrange your most important information at the top of the web page, organizing the
content in a way that leads the reader to the least important information at the bottom. This will
allow the reader to be able to scan quickly for need-to-know information.
c. Consistency:
You will notice throughout this website that all headings are bolded and indented at the
same measurements, giving a uniform, organized appearance. This principle allows for
consistency—that is, presentation that is similar in style and purpose. Having consistency will
allow the reader to flow through the content with a provided outline format so that they do not
have to organize the information in their minds as they read along.
d. Graphic Aids:
Graphic aids are a great way to keep your visitors’ interest! Some visitors may have
trouble with reading the language written or may be illiterate. Having graphic aids such as
pictures, graphs, drawings, maps, and/or other visual aids can assist them to overcome these
communication barriers. For example, in the graphic aids below, notice how you can understand
what the images are communicating to you, even with very few words being used, if any at all.
Wade Page 6Final Project 1: Final draft
7. Format Elements:Using format elements such as written clues, white space, and color further aid your
visitors to navigate through your website with ease and inquisitiveness. There are many
important elements to consider. Following are some of the most important elements to organize
your content that will aid to capture your readers’ attention:
a. Written Clues:
i. Headings (this is a heading):
Reep (2011) states that, “Headings are organizational clues that alert readers to the
sequence of information in a document” (p. 144).
ii. Jumplines:
A jumpline is a notation in the content that tells you where to jump to for further
information. Jumplines allow the reader to quickly scan a web page to obtain the information
they seek. Simply separate the jumpline from the content, highlight in bold, and state where in
the web page to jump to for further information. Following is an example of a jumpline:
See Written Clues (7)(a)(ii) for Jumplines
iii. Logos:
There’s a good chance your website has a logo in the upper left. Make sure your logo is
clickable and takes a user back to your homepage. This is a common convention and many
visitors to your website will expect it to be the case.
Wade Page 7Final Project 1: Final draft
iv. Icons:
Icons are symbols used to represent other websites, web pages, or web forums. These
symbols are universal—that is, they are mostly understood to represent the same source for the
majority of the online population. Following is an example of a few well-known online icons:
b. White Space:
White space is the blank area on a web page that aids readers to separate content and
allows the readers’ eyes to rest, such as in between headings, or it can be used to add balance
and proportion to the web page. For example, look at how the graphic image above is centered
between the content for “icons” and “white space”. This centered illustration provides white
space on both the left side and the right side in order to bring proportion to this area of the web
page.
c. Color:
is one of the most important elements that allow for excitement and
contrast in any document or web page. With the absence of color, websites can feel monotonous
and boring, often redirecting the reader to another website. Try using a variety of color, including
bright colors and light pastels, as well as bolds, italics, and underlines throughout your content
to provide the visitor something unique to experience as they read.
Wade Page 8Final Project 1: Final draft
8.Website Maintenance:Last, but certainly not least, maintaining your website on a periodic basis will invite your
website visitors to return for future information. Being current in both time and knowledge,
providing rhetorical elements such as ethos, pathos, and logos, and establishing authenticity
and authority to the content you present, are also important methods in ensuring ethical, reliable
information.
a. Currency:
i. Time:
Visiting a web page that has information greater than five years old may deter your
reader to visit another website for more current information that is less than two years old.
Periodically checking the content on your website and updating the “last updated” date will
relieve your visitors in knowing that they are obtaining updated information.
ii. Knowledge:
Websites are also more often visited if they provide accurate and current knowledge. If
you were to navigate a web page discussing a surgical procedure, you would want to know the
most recent medical research in regard to procedure, assistive technology, and recovery.
b. Rhetorical Elements:
Wade Page 9Final Project 1: Final draft
Readers want to know that what they are reviewing is authentic, accurate, and provides
the information sought after.
i. Ethos: Ethos can be described as an appeal to ethics and convincing the readers as to the credibility of the information.
ii. Pathos: Pathos is an appeal to emotions and convincing the readers as to the argument, response, or view of the content.
iii. Logos: Logos is an appeal to logic and convincing the readers as to reasoning.
c. Authenticity:
Websites that provide information that can be verified by visiting another website or by
viewing other reference materials ensures readers that what they are reading can be trusted.
Verifying the information yourself before you post your content and providing resources to visit
are two easy methods to earn your visitors’ trust.
d. Authority:
Posting your contact information, including your physical and/or mailing address, e-mail
address(es), telephone number(s), who sponsored your website, as well as links to any related
sources referenced within your content, are also important to earning your visitors’ trust.
In conclusion, adding these eight basic practices to your website’s navigation can have a
positive impact on the overall experience a user has in navigating your website. Websites that are
free of jargon; use common page names; are short, but cover the most important content; use
dropdown menus and links that are clickable; include plenty of design principles and format
elements; and that are maintained periodically receive the most regularly visited traffic.
Wade Page 10Final Project 1: Final draft
Works Cited
Dropdown menu photograph. Designs Crazed. 11 April 2017. Retrieved from
https://dcrazed.com/wp-content/uploads/2014/02/dropdown.jpg
Graphic aid photograph. Atlas Obscura. 13 March 2017. Retrieved from
http://assets.atlasobscura.com/article_images/29039/image.jpg
Graphic aid photograph. Wallmonkeys. 12 March 2017. Retrieved from
http://www.wallmonkeys.com/blog/wp-content/gallery/blog-7/WM_P_signs_mix_topsellers_
002_Preview.jpg
Graphic aid photograph. Wordpress. 13 March 2017. Retrieved from
https://healthmap.files.wordpress.com/2008/10/aids-graphic.jpg
Hartstein, David. 6 Website Best Practices. 2017. Wired Impact. Web. 11 March 2017. Retrieved
from https://wiredimpact.com/blog/6-website-navigation-best-practices/
Icons photograph. PSD site. 12 March 2017. Retrieved from
http://psdsite.ru/wp-content/uploads/2014/11/ploskie-ikonki-dlya-sayta.jpg
Navigation bar photograph. CSS Author. 12 March 2017. Retrieved from
http://www.cssauthor.com/wp-content/uploads/2013/10/Navigation-Bar-PSD2.png
Reep, D.C. (2011). Technical Writing: Principles, strategies, and readings (8th ed). Glenview, IL:
Pearson Education, Inc.
Tools photograph. Thought Space Designs. 12 March 2017. Retrieved from
https://www.thoughtspacedesigns.com/wp-content/uploads/2013/05/tools.jpg