aimeemwade.files.wordpress.com  · web viewfinal project 1: final draft. 8 website navigation best...

17
8 Website Navigation Best Practices March 21, 2012 by David Hartstein April 12, 2017 Revised by Aimee M. Wade

Upload: others

Post on 14-Oct-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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:

Page 2: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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.

Page 3: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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.

Page 4: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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.

Page 5: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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.

Page 6: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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.

Page 7: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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.

Page 8: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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:

Page 9: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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.

Page 10: aimeemwade.files.wordpress.com  · Web viewFinal Project 1: Final draft. 8 Website Navigation Best Practices. March 21, 2012 by David Hartstein. April 12, 2017 Revised by Aimee M

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