Standard Navigation Elements - for CIBC Sites

1. Standard Navigation Elements - for CIBC Sites Michele Poole – michele.poole@cibc.com June Hill – june.hill@cibc.com Dianne Howie – dianne.howie@cibc.com Clifford Hui – clifford.hui@cibc.com User Experience & Creative Design Team Internet Channel, Retail Markets CIBC

2. Table of Contents Introduction to Navigation • What is Navigation? • Why is Navigation Important? • Benefits of Standard Navigation CIBC.com Navigation • Navigation Definitions • Samples • Components • Overall Considerations • Summary

3. Introduction to Navigation

4. What is Navigation? • “Navigation isn’t just a feature of a Web site, it is the Web site in the same way that the building, the shelves and the cash registers are Sears. Without it, there’s no there there.” • Navigation Components: • (i) menus / navigation bars • (ii) breadcrumb navigation • (iii) search • (iv) site map “Don’t Make Me Think” , Steve Krug p. 59

5. Why is Navigation Important? You cannot sell a product if your customers cannot find it. • People often become lost within large web sites • In fact, 58% of users will make two or more navigational errors while searching for information (Forsythe, et al., 1996) and 66.8% of users have stated that one of the greatest problems about the Web is "not being able to find the information that I am looking for" GUV (1998) http://psychology.wichita.edu/optimalweb/structure.htm

6. Why is Navigation Important? • There is no sense of direction, there is no left or right and no up or down on the web • If we talk about moving down on the web, we are referring to up and down a hierarchical information structure • “… on a Web site, instead of relying on a physical sense of where [content] is we have to remember where it is in the conceptual hierarchy and retrace our steps. • This is one of the reason why bookmarks..are so important and why the Back button accounts for somewhere between 30-40% of all Web clicks.” • “Don’t Make Me Think” Steve Krug p. 58

7. Why is Navigation Important? • “The purposes of navigation: • It orients you….indicates where you are in the site • It tells us what’s here … Navigation reveals content! • It tells us how to use the site.. . It tells you implicitly where to begin and what your options are • It gives us confidence in the people who built it…Every moment we are in a Web site, we’re keeping a mental running tally: “Do these guys know what they’re doing?”

8. Why is Navigation Important? • It orients you….indicates where you are in the site • There is no physical sense of where we are on web sites, except for navigation which provides a conceptual anchor in the web of information • Navigation indicates where you are in the site using a variety of devices such as a change in the colour the navigation link, off setting a link in a list to indicate indentation through to the use of breadcrumb navigation

9. Why is Navigation Important? • It tells us what’s here … Navigation reveals content! • Navigation is the means of accessing web site content • The goal should always be to reduce the complexity of the site as much as possible • When creating a Web site that lends itself to a hierarchical style of organization (i.e., pyramid structure with most important information on the top), it is beneficial to "flatten" the hierarchy…. The more clicks users must take to find information, increases the likelihood of error • Optimal navigation balances the breadth or number of categories on the top level with the depth or the number of pages the user must drill down to access content • “Research-based Web Guidelines” http://usability.gov/guidelines/content.html#five

10. Why is Navigation Important? • It tells us how to use the site.. . It tells you implicitly where to begin and what your options are • Navigation systems are one element of web site usability • Placement or position of elements communicate their relative importance or the sequence in which we are meant to digest them • In English, we're accustomed to reading and writing from left to right and from top to bottom. The way we approach the screen is the same • Items to the left and top of centre tend to be noticed first, and are usually considered more important than other items • The famous left-hand navigation panel is popular because of its natural, comfortable location

11. Why is Navigation Important? • It gives us confidence in the people who built it…Every moment we are in a Web site, we’re keeping a mental running tally: “Do these guys know what they’re doing?” • Designing for usability means understanding users and how they approach tasks. Good navigation reflects this consideration when designing

12. Benefits of Standard Navigation • Providing Standard navigation across all CIBC sites means that all sites will have the navigation in the same place and the navigation will behave in a consistent manner • The result is that CIBC sites will be easy to learn for users as users will understand the familiar navigation pattern • If the user makes a mistake on familiar navigation system, the effort needed for problem solving to get back on track is much shorter • Standard navigation creates a sense of comfort and control which translates into a positive user experience

13. CIBC.com Navigation

14. Navigation Definitions • Homepage – Homepage is the first page of a web site • Micro site – A micro site a self contained mini site that links from the main site. An example is Business Services. There is enough content to warrant its own mini web site. • Information Architecture/Site Map- The information architecture of site map is the underlying content organization or structure that the navigation system is based on. • Global navigation- Global navigation is navigation that is found on all pages of a web site and in the case of CIBC these elements are also present of the micro site like Business Services • Local navigation- Local navigation is navigation that is specific to a part of a site, but does not appear on all pages like the global navigation. • Sub level page- Pages that are linked to from the homepage as the homepage represents the top of a hierarchical structure

15. Homepage Sample

16. Micro site sample

17. Site Map

18. Micro Site Home Page 2 1 3 4 8 5 6 7

19. Sub Level Page 10

20. 1. CIBC Logo • A web convention has evolved whereby the logo links the user to the homepage from other pages in the site • “The upper-left corner is usually the best placement for languages that read from left to right” • “Don’t include an active link to the homepage on the homepage” • “Homepage Usability” Jakob Nielsen p. 10, 19

21. 2. Title and Global Header • The Title identifies the page and confirms the selection from the navigation • From “CIBC HOME”, the user can view the other navigation menus • With the “FRANCAIS” link, Francophone users can use CIBC in their native tongue • “SITE INDEX” provides an overview and provides users with access to all the site information at a glance

22. 3. Search • Search provides a shortcut to content • By providing a link to Advanced search options we cater to a more experienced Internet user without confusing the novice • ABM and Branch locator links give shortcuts to frequent customer queries • “Give users an input box … wide enough for user to see and edit standard queries” • “Provide simple search on the homepage, with a link to advanced search or search tips” • “Search on the homepage should search the entire site by default” “Homepage Usability” Jakob Nielsen p. 10, 19

23. 4. Micro site Specific • The unity of the interface is important because it has the potential to link concepts and objects together that belong together • For instance, care should be made to group links that belong together, as well as separate those that do not belong • Micro site specific navigation can also be referred to as local navigation

24. Location of Internal Links(navigation within the application or site) • The shade of each section represents the number of times each section was selected • The darker sections indicate where users expected the internal site links Examining User Expectations of the Location of Web Objects (http://www.internettg.org/newsletter/dec00/article_bernard.html)

25. 5, 6. Left Navigation • Online Banking Sign In is a specialized global navigation element • Users generally look to the top and left of the page for navigation • Placing objects in locations where users expect to find them enhances the effectiveness of the site http://webreview.com/2001/09_28/strategists/index01.shtml

26. Location of External Links(navigation to external sites, resources, related info, tools) • The shade of each section represents the number of times each section was selected • The darker sections indicate where users expected the external site links

27. 7. Footer • This bottom navigation enables rapid navigation for experienced Internet users • The footer enables users to navigate without scrolling back up the page • “People learn very fast to use navigation if they can find it. Quality is easy to spot; people gravitate to it.” http://www.webword.com/reports/sitemap.html

28. 8. Breadcrumb Trail • Breadcrumbs show you a path from the homepage to where you are • “Put them at the top” • “Use > between levels … it visually suggests forward motion down through the levels” “Don’t Make Me Think” Steve Krug p. 78

29. 9. Local Navigation • Local navigation is navigation specific to a subsection of a site or to a microsite • For instance, care should be made to group links that belong together, as well as separate those that do not belong

30. 10. Right Navigation • Users expect links to other sites to be on the right • In favour of right-side menus is the fact that the vertical scroll-bar is usually on the right, so it's more convenient for the user - less mouse-travel - if the navigation menu is nearby. • Objects on the right serve the same purpose as banner advertisements to outside content • Research shows a greater click-through for ads placed to the right side of the page. http://www.webreference.com/dev/banners/

31. Overall Considerations Browser characteristics • If a user uses a low resolution or a narrow browser window, the first thing to disappear is the content on the right side of the screen. If the navigation is on the right side of the screen the user will have to scroll horizontally to navigate the site. • Placing internal links in the navigation panel on the left ensures it will always be visible and accessible to the user.

32. Conclusions “As life becomes more complicated, the time has come for a bank that is making things simpler and smarter – a bank that realizes there’s more to life than banking “We will be accountable, reliable and straightforward, and continually look at every facet of our business with a critical eye “We will make things clearer, simpler and smarter for our customers. They deserve a better bank. We owe them no less” Smart.Simple.Solutions.

33. Appendix - Resources • CIBC Online Style Guide • CIBC HTML / CSS Guide • CIBC Brand Book • User Experience and Creative Design Team