COMM1PCOMM1P This presentation © Gilbert Cockton For University of Sunderland students only. Permission is required for any other use of this material Have you looked at the resource page ? Link below module handbook Navigation 5

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 The Rule of HCI: Reminder 1005 Good Design … … demonstrably fits … … its context of use This lecture describes design options for navigation with indications of contexts where they (don’t) work

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Fundamentals: Reminder 1007 Context  Design Evaluation

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Why, what, why? 1008 Users must navigate in multi-screen systems Getting from A to B involves moving through structure Users need to get from A to B because of context of use (info. needs, for fun) system makes them (instrumental, exploration)

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 The Role of Structure 1010 To distribute across a web-site To relate on a web-page C O N T E N T Information Digital Resources Activities

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Content Structures for Information & Digital Resources 1011 Structures are formed from conceptual relations between content items: hierarchy of (sub)categories and members network of related concepts and resources discourse of outlines, elaboration, detail, further information

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Site/Page Structure and Navigation Design 1013 Navigation Design uses concrete design features... Page layout, link labels/graphics and positions, site maps, contents, indices, search, breadcrumbs …. to render modified conceptual structures Navigation is concrete, but also may need changes to underlying structure

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Why Structures Get Modified 1015 When Shells are used (fixed links, don’t!) For future extensibility/modifiability When items map to page 1:n or n:1 avoid long scrolling on pages To get the right breadth/depth trade-off Business goals must guide trade-offs On balance, breadth preferable to depth Business model may require access denial

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Depth versus Breadth 1017 Deep Many levels, few links per page Long path lengths Fewer distractions Support for progressive disclosure Broad Few levels, several+ links per page Short path lengths Long lists to read/here Obstructs link elimination

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 From Structure to Navigation Decide on a compromise conceptual structure information structures activity structures - optimise task paths Refine to a feasible/acceptable structure screen estate limitations may require changes so may accessibility –short menus for screen readers

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 From Structure to Navigation Design the navigation paths through the information structure which paths to support (extra cross-links?) information and task needs decide Decide on navigation aids contents, indices, site maps, FAQs history and search mechanisms passive/interactive guided tours (demos/agents)

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Navigation Topics 1023 Links Location Structure Visualisation Search Agents

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Links 1024 Wording Expected user knowledge and links Link symmetry provide route back, especially from sub-sites to site home page Link order Link groups Off-site links

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Get me a return to Boston? 1026 Flight Paging 3 Best Itineraries Flights and Prices Timetables Fares

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Guideline 1 Do not assume users’ have the domain Avoid Domain specific terms in links Use the Users’ language Remember Heuristic “Speak the users’ language –Stakeholder attribute

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Where is the Local Chamber of Commerce? 1028 Beyond the Magazine –Inc Real Time, Zinc, Online Entrepreneur, Between the Pages Virtual Consultant –worksheets, databases, reference desk, software, bulletin boards, links, your web-site Inc. Magazine –archives, Inc. Online, subscriptions, Inc. 500 Inc. Business Resources –products, conferences, consulting services, awards, expos

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Link Wording 1031 Crucial - “Be Our Guest”, Travelocity Suggestiveness and discriminability –C|Net: Product Finder, BUYDIRECT.COM, SOFTWARE.COM Provide labels for graphics (or pop-ups) Supports prediction Fidelity Questions (Evaluation) Supports elimination: Global vs. International Select the WebSaver Annuity that’s right for you Is the WebSaver Annuity right for me?

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Guideline 2 Links should adequately describe content Avoid ambiguous terms in links Maximise Information Scent

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Users and Categories 1034 Football, Rugby Ball, Orange, Lemon Two ways to split into pairs?

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Links: Expected user knowledge Users don’t build models of sites confusion with off-site links and within page-links considerable use of home page as safe point Anticipate category misunderstandings Edmunds Auto site, cross-link from cars to SUV and pick up area Amplifier text below (Disneyland, Disneyworld) Don’t expect users to use back button 1-2 hits at most

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Guideline 3 Links should be “self describing” Within Page Within Site Off site links should be clear

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Anticipate Category Misunderstandings Effective use of cross-links Guideline 4

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 I want to buy some headphones….. Options –Home Audio –Home Video –Portable Audio Search Engine Because the cost of choosing one over the other was too much 1036 Links: Users Perceptions 1036

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Link Orderings 1039 alphabetical, frequency, importance, safety context of use decides Grouping and spacing basis for (local) table of contents

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Link Groups 1042 Links best kept separate Embedded links get missed Separate lines OK Avoid wrapping links over lines –or use bullets Navigation bars & common shopping buttons standard links, especially home better at top and bottom

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Avoid Embedded Links ‘Avoid’ does not mean Never Avoid Wrapping Links Create and follow site navigation standards Guideline 5

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Break 1045 Back by 0955 Monday Tutorials Print Slides for Tutorial Group alarms by 19/10/01

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Location 1100 You are Here (Breadcrumbs) Users often don’t understand or see them Unless they are interactive Visual coding for level/area of site Destination must confirm/exclude Bookmarks Problems with frames Some users bookmark within site

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Guidelines?

COMM1P5COMM1P Structure Visualisation 1103 Table of Contents Hierarchy of Links Side panel or separate page Site Map Graphic of nodes and links, best labelled and explained (integrating metaphors possible) –Doubled success of Fidelity test users (UIE) When used as header, must show where users are

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Guidelines?

COMM1P5COMM1P Search Mechanisms 1106 Are contents/site maps enough Will Indices be enough? Can FAQs do better than search? Search Engines users may expect them essential on large sites

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton FAQs 1108 Frequently asked questions Can be more effective than search engines Avoid adaptive FAQs Disney

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton The Search Activity 1112 Three Phases Specify search terms Interpret results Select a result Need to support all phases

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton 2001 Guideline 6 If a search facility is provided Does it provide adequate support?

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Search Issues Need to provide index terms value of prior content analysis Users must use search terms boolean logic rarely suitable Show scope of within site searches make restricted scopes clear from the outset guide users to alternative searches use sensible parameters (Fidelity)

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Search Issues Need to support use of results discard, browse, refine Relevance order is often not clear Repeated results confuse Garbage hits frustrate exclude some pages from search e.g., adverts

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Agents 1120 Travel Metaphor (Allison & Hammond) key sites and highlights, fixed routes Agents (Brenda Laurel) lead and interact (salience?) personas/stereotypes (humans?) Intelligent agents monitor, model, infer (ethics?) How do you know they’ll work?

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Evaluating Navigation 1123 Test before full page design! Scenarios Draw up a user task Add contextual details Describe the experience with the site Walkthroughs Step by step analysis of task description Can pick up need for cross-links

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Cognitive Walkthrough 1126 Inspection Method (Analytical, Formative) 4 questions for each task step (Greg Abowd’s GIT) Will the users be trying to produce whatever effect the action has? [Right Goal?] Will users be able to notice that the correct action is available? Once users find the correct action, will they know that it is the right one for their goal? After the action is taken, will users understand feedback? Success/failure case according to answers

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Content 1: Reminder 1129 Human-Computer Interaction for the Web Context Research Usability Evaluation Information Activity Architecture èNavigation Options, Page Layout, Interaction & Media

COMM1P5COMM1P5 SCET MSc EC/ECA © Gilbert Cockton Summary 1130 Navigation Amends conceptual structures Renders structures Augments structures Visualises structures Hides structures Learn options, understand what works when