MARK3030 Navigational Testing Navigation Design Basics all of the ways that users can move around a site and understand where to go revealed in the appearance and functionality of menus links buttons toolbars

MARK3030 Navigational Testing Navigation Design Basics difficult for site users to perceive the structure because only one page is seen at a time difficult to place a single page in the context of the remaining site content likely for users to get lost unless obvious and understandable landmarks are provided

MARK3030 Navigational Testing Navigation Design Basics navigational elements on every web page should answer these basic questions: Where am I now? Where did I come from? Where can I go from here?

MARK3030 Navigational Testing Navigation Design Basics a few methods: simple hierarchical tree structure. easy movement to important site components recurring navigation tools page numbers for sequential pages feedback that shows where the user is in a site (e.g., a breadcrumb trail). aids that illustrate the user's location within a site (e.g., site map, table of contents)

MARK3030 Navigational Testing Navigation Design Basics two techniques can quickly illustrate whether there are navigational issues with a site: Krug’s Trunk Test Keith Instone’s Navigation Stress Test

MARK3030 Navigational Testing Trunk Test imagine being blindfolded and stuffed into the trunk of a car you take a quick peak around the blindfold and through a crack in the trunk and see a web page did you locate all of the required navigation components? This is the trunk test!

MARK3030 Navigational Testing Trunk Test - Instructions choose one of your pages at random and print it place the page arms length away and locate the following items as quickly as possible

MARK3030 Navigational Testing Trunk Test - Instructions Circle each Site ID (What site is this?) Page Name (Where am I?) Sections (Are the sites major sections outlined?) Local Navigation Where am I (is there a "You are here?) How can I search

MARK3030 Navigational Testing Trunk Test - Instructions Site ID every page should have either a graphic or a text identifier that tells users to what site the page belongs usually a small graphic that also acts as a link, taking users back to the homepage often shrunken versions of opening page graphics or at least some component that makes them create site identity

MARK3030 Navigational Testing Trunk Test - Instructions Page Name Every page should contain a brief header that accurately describes the content of the page helps users identify what the page is all about Sections and Subsections links that point to other sections and subsections within the site helps users find all the information within a site, especially in the case they get lost

MARK3030 Navigational Testing Trunk Test - Instructions Local Navigation Within sections, there are usually subsections, or a list of other pages that are related to the section navigation should be provided to those pages on main section pages to enable users to easily find those pages similar to Sections and Subsections above

MARK3030 Navigational Testing Trunk Test - Instructions “You Are Here” Indicators many types of indicators reverse text when menu bars are present tabs combination of those features Section and Subsection navigation that contains arrows that point to the section being viewed

MARK3030 Navigational Testing Trunk Test - Instructions Search every page should contain the ability to search the site

MARK3030 Navigational Testing Trunk Test Once you are satisfied that all of the items included in this test are clearly and quickly identifiable at a glance, you can be fairly sure that your site has a workable navigation system.

MARK3030 Navigational Testing Navigation Stress Test ask some really hard questions about your web site navigation to see if it can "pass“ called a "stress test" because most pages will not pass failures may be serious, or may not matter at all at least by performing the test you will have discussed the navigation issues and made conscious design decisions

MARK3030 Navigational Testing Navigation Stress Test three basic concerns users often have upon arriving at a page: Where am I? What's here? Where can I go?

MARK3030 Navigational Testing Navigation QuestionMark Up on the Paper What is this page about?Draw a rectangle around the title of the page or write it on the paper yourself What site is this?Circle the site name, or write it on the paper yourself What are the major sections of this site? Label with X What major section is this page in? Draw a triangle around the X What is “up” 1 level from here?Label with U How do I get to the home page of this site? Label with H How do I get to the top of this section of the site? Label with T What does each group of links represent? Circle the major groups of links and label:  D: More details, sub-pages of this one  N: Nearby pages, within same section as this page  S: Pages on same site, but not as near  O: Off-site pages How might you get to this page from the site home page? Write the set of selections as: Choice 1 > Choice 2 > …

MARK3030 Navigational Testing Navigation Stress Test - Process What is this page about? Draw a rectangle around the title of the page or write it on the paper yourself What site is this? Circle the site name, or write it on the paper yourself What are the major sections of this site? Label with X

MARK3030 Navigational Testing Navigation Stress Test - Process What major section is this page in? Draw a triangle around the X What is "up" 1 level from here? Label with U How do I get to the home page of this site? Label with H How do I get to the top of this section of the site? Label with T

MARK3030 Navigational Testing Navigation Stress Test - Process What does each group of links represent? Circle the major groups of links and label. D: More details, sub-pages of this one N: Nearby pages, within same section as this page S: Pages on same site, but not as near O: Off-site pages

MARK3030 Navigational Testing Navigation Stress Test - Process How might you get to this page from the site home page? Write the set of selections as: Choice 1 > Choice 2 >.... Connect the visual elements on the page that tell you this. Open the example powerpoint on the class web site