Web Content Development

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

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

3. 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

4. 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 Congress • Relative to the site • Show the structure of the site in global and local navigation • Highlight the section the user is in, BBC • Breadcrumbs, Yahoo

5. Breadcrumbs

6. Pointers and tabs

7. Changed button color

8. Breadcrumbs • 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 !!

9. 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

10. 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

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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. ELEMENTS

19. 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.

20. 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.

21. 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

22. 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:

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

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

25. Utilities 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 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.

26. 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

27. 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.

28. 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

29. 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.

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

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

32. What you need to know • 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

33. What you need to know If I click:Water buffalo I should get: Not: Water Buffalo Seaworthy Mammals • 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

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

35. 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 • http://www.nytco.com/sitemap.html

36. Site Indexes • Fewer levels • Very exact organization needed to make it useful • Can use a controlled vocabulary for large sites • Find a good example: • http://www.nytco.com/sitemap-abc.html

37. Guides • Especially for introducing new users to the site • Guided tours of the site • Find a good example: http://www.buildblock.com/specialty/healthcare_construction.htm

38. The Trunk Test

39. Overview • 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?

40. How to Perform the Trunk Test 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.

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

42. Example of the Trunk Test (UMBC’s Bursar’s Office) – Bad Site

43. Example of Trunk Test (UMBC’s Bursar’s Office) – Bad Site

44. Example of the Trunk Test (Border’s Website) – Good Site

45. Example of the Trunk Test (Border’s Website) – Good Site

46. 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

47. Navigation Conventions Utilities Site ID Sections Page Name Local Navigation

48. 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, www.web-bloopers.com

49. Keith Inkstone: Navigation Stress Test http://user-experience.org/uefiles/navstress/

50. Navigation Question Mark 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 > …