Web Content Development Dr. Komlodi Classes 14-15: Navigation

Elements of Information Architecture What constitutes the IA of a website? Organizing information Labeling information Navigating the organized information User-centered design of IA

Navigation Finding your way in a hypertext space is difficult and getting lost is a bad thing How do you make sure your users do not get lost? Websites should answer these questions: –Where am I? What is this? –Where have I been? –How do I get back? –Where can I go? Websites answer these questions for users with various navigation systems

Where am I? Some indicator to tell user where he/she is within the web or the site Must stand out Visual distinction such as different color or bold text is effective Relative to the Web as a whole –Always display logo or branding –Use consistent page layout and design –Use consistent interaction methods –Good example: The Library of CongressThe Library of Congress Relative to the site –Show the structure of the site in global and local navigation –Highlight the section the user is in, BBCBBC –Breadcrumbs, YahooYahoo

Breadcrumbs

Pointers and tabs

Changed button color

Show users where they are within a site –Shows only path from homepage to current page Home > Furniture > Chairs > Leather Chairs –Conventions Put them at the top of the page Use a ‘ > ’ between levels of the site Use tiny type – breadcrumbs are just an accessory Use the words “you are here” Boldface the current page Do not use in place of page names !!

Where have I been? Breadcrumbs Browser Back button –Are all of the pages you visited in the Back button? –Very popular browsing tool, but wrong mental model –Browser history better, but less frequently used Use consistent visited link colors

Where can I go? Make the site structure visible through navigation Well-designed information organization and navigation will help: –Users can guess what is under a heading –All pages can only go under one heading Use multiple navigation techniques: –Structural links: global and local site structures –Contextual links: more information about particular chunks of content –Associative links: Links to similar content, suggestions based on interest

Types of Navigation Systems Embedded Navigation –Global (persistent, site-wide) –Local (subsite) –Contextual (in-text) Supplemental Navigation –Sitemaps –Indexes –Guides

Global Navigation Reflects the information organization Three main types: –Linear (each item in one location, sequential access): Best for Web applications –Hierarchical (each item in one location, direct access) If well designed, easy to use, good for novice, infrequent users –Faceted (each item in multiple locations) Very powerful, good for expert users Good for indiscriminate driftnetting and undefined information needs

The Site Structure… Should be developed consciously Should be clearly reflected through the global navigation Should reflect users’ needs Should not reflect the organizational structure

Global Navigation Shows the site structure and main sections of the site for navigation Present on every page Design concerns: –Should tell the user where (s)he is: Highlight or expand (CNN) –If much navigation required: keep on screen –For reading-intensive sites: can scroll out –Keep it consistent

Global Navigation Screen Real Estate Design will depend on the role of the page: content vs. navigational pages For content pages most of your screen real estate should be content (50-80%), NOT navigation Make sure you test on various screen sizes and resolutions Test this out: –Go to cnn.com –Click on one news article, this is a content page –Calculate the proportion of space spent on content, navigation, and advertising –Change your screen resolution and check again

Global Navigation Layout De facto standard L: –Top: global –Left: local –Middle: in-context Top, tab: –Limited number of categories fit here (Food for thought) –Should not take up content space on any resolution –Scrolls out Left vs. right: –More categories fit –Screens are wider than taller –No significant performance differences between left and right, but left is a convention

ELEMENTS There are five elements of global navigation that should be present at all times: –Site ID –A link to the home page –A search box or a link to a search box –Sections –Utilities

ELEMENTS

Exceptions to the Rule Global Navigation should be present on every page except: –The home page because it has a different purpose than the other pages on the site –Forms because the persistent navigation can turn into a distraction.

What is Site ID ? Site ID or logo is the building name of a Web site. The Site ID will tell us what website we are surfing. Site ID or logo is the building name of a Web site. The Site ID will tell us what website we are surfing.

Site ID design The site ID needs to be on every page It should be at the top of the page in (or at least near) the upper left corner. Why? It represents the whole site. Make site ID a visual hierarchy of the page in two ways: _ Make it the most prominent thing on the page or _ Make it frame everything else

Site ID design (cont) The Site ID needs to look like the Site ID. Should have attributes as we see in brand logo or the sign outside the store. Attributes: distinctive typeface, a graphic… Example: Sears: Wal-Mart: Hotwire.com:

The Sections The Sections sometimes called primary navigation, are the top level of the sites hierarchy and are links to the main sections of the site

Subsections These sections will also include space for subsections within the current section, this is known as secondary navigation.

Utilities Utilities are links that are important to the site but are not directly part of the content hierarchy. They are usually things that can help us use the site like Help or a Site Map or something that provides information about the publisher. Utilities will vary for different types of sites and as a rule persistent navigation can only accommodate 4 or 5, any more then this and they tend to get lost in the crowd

Home Navigation One of the more crucial parts of persistent navigation is a button or link to take the user to the site’s home page. This is very reassuring to the user because it allows them to navigate home no matter how lost they may be

Home Navigation There is an emerging trend that uses the Site ID as a button to take you back to the home page. This is a useful idea to implement but a large surprising number of users are not aware of it.

Local Navigation Often applied to subsites When site grows too big or a certain section does not fit into a clear hierarchy Don’t make your site very deep (depends on size) Navigation structure within an area of the site Should be very clearly differentiated from the global navigation Make sure users can navigate to: –Any other top level categories from the global navigation or at least the home page –Sibling categories –Levels below

Tabs - Advantages Self evident Hard to miss –Physical file folders metaphor easy to interpret Aesthetically pleasing They suggest a physical space –The way that the active tab comes to the front of all the others gives the appearance that the user is actually in that page. Making it feel like they are actually rifling through a filing cabinet.

Examples of Tabs Facebook's tabs for navigating your news feed Tiger direct has tabs for its global navigation

Page Names are like street signs people use to navigate through a city They help users navigate through different sections of a website

Every page needs a name –Just as every corner should have a street sign The name needs to be in the right place –It should appear to be framing the content

The name needs to be prominent –Use a combination of position, size, color, and typeface The name needs to match what the user clicks –Do not name a link one thing and the page another If I click: Water buffalo I should get: Water Buffalo Not: Seaworthy Mammals

Contextual Navigation Embedded in content Helps create associations within content Takes advantage of flexibility of hypertext Can cause disorientation for users Avoid “click here”

Sitemaps Detailed representation for the primary navigational structure of a site Best for hierarchical sites Decide on amount of links and level of detail If graphic: make sure it is small Finding it should be easy

Site Indexes Fewer levels Very exact organization needed to make it useful Can use a controlled vocabulary for large sites Find a good example:

Guides Especially for introducing new users to the site Guided tours of the site Find a good example: care_construction.htm care_construction.htm

The Trunk Test

You should be able to answer these questions for every site: –What site is this? (Site ID) –What page am I on? (Page name) –What are the major sections of this site? (Sections) –What are my options on this level? (Local Navigation) –Where am I in the scheme of things? (“You are here” indicators) –How can I search?

Step 1: Choose a page in the site at random, and print it. Step 2: Hold it at arm’s length or squint so you can’t really study it closely. Step 3: As quickly as possible, try to find and circle each item in the list on the following slide.

Step 3 (cont’d) Circle the following: -Site ID -Page name -Sections and subsections -Local navigation -“You are here” indicators -Search

Navigation Conventions -Set of standardized elements that are consistent throughout a website. -Standardization allows users to quickly locate these elements. -Navigation can be very frustrating without these conventions. -Example: Imagine how difficult it would be to navigate through a magazine if the advertisement pages were marked as page numbers in one magazine, but not in other magazines. -Elements include: -Site ID -Sections -Utilities -Page Name -“You are here” indicators -Local Navigation

Navigation Conventions Site ID Page Name Utilities Sections Local Navigation

Navigation Bloopers Site reflects organization chart. Site structure reflects organization’s structure or history. Google: “howard county court”, result 1, 2 Numerous navigation schemes. Many ways to navigate, but no clear guidance. Deceptive duplicate links. Making users think: "Do those go to the same place?". Not linking directly. Specific-looking links that go to generic pages or home pages. Lost in space: Current page not indicated. Page doesn’t clearly show where user is. The circle game: Active link to here. Page has active link to itself. Missing links: It’s BACK or nothing. Source: Jeff Johnson: Web bloopers,

Keith Inkstone: Navigation Stress Test

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 > …

Navigation Stree Test Example

X X U H T N N N N S O S not BGSU Athletics > Men’s Ice Hockey > News > Hockey Advances …