Virtual University - Human Computer Interaction 1 © Imran Hussain | UMT Imran Hussain University of Management and Technology (UMT) Lecture 28 Behavior & Form – Part III Virtual University Human-Computer Interaction

Virtual University - Human Computer Interaction 2 © Imran Hussain | UMT In Last Lecture … Software Postures –Handheld devices –The Web –Other Orchestration Flow

Virtual University - Human Computer Interaction 3 © Imran Hussain | UMT In Today’s Lecture … Excise Significance of Navigation Types of Navigation Improving Navigation

Virtual University - Human Computer Interaction 4 © Imran Hussain | UMT Significance of Navigation

Virtual University - Human Computer Interaction 5 © Imran Hussain | UMT Have you ever been in new city trying to reach your destination? Have you ever tried driving through rush hour traffic to reach your destination? … enter NAVIGATION

Virtual University - Human Computer Interaction 6 © Imran Hussain | UMT Significance of Navigation Navigation is common to all types of interactive products Users need to navigate to find tools and info Navigation is EXCISE –A necessary evil –Does not meet user goals (except in some video games) Good navigation critical to usability #1 problem in interactive product design

Virtual University - Human Computer Interaction 7 © Imran Hussain | UMT Definition of Navigation “Any action that takes the user to a new part of the interface or which requires him to otherwise locate –Objects –Tools, –or data.”

Virtual University - Human Computer Interaction 8 © Imran Hussain | UMT Types of Navigation

Virtual University - Human Computer Interaction 9 © Imran Hussain | UMT Types of Navigation Navigation Between Multiple Windows or Pages Navigation Between Panes Navigation Between Tools and Menus Navigation of Information

Virtual University - Human Computer Interaction 10 © Imran Hussain | UMT You may question the inclusion of some of the above- stated types of navigation … not according to our definition though …

Virtual University - Human Computer Interaction 11 © Imran Hussain | UMT Definition of Navigation “Any action that takes the user to a new part of the interface or which requires him to otherwise locate –Objects –Tools, –or data.”

Virtual University - Human Computer Interaction 12 © Imran Hussain | UMT Navigation Between Multiple Windows or Pages Navigating between windows interrupts user’s flow Original window is obscured –Loss of productivity if user needs to shuffle between windows Sovereign posture applications avoid this problem by placing all main interactions in a single primary window

Virtual University - Human Computer Interaction 13 © Imran Hussain | UMT Navigation Between Panes Windows can contain multiple panes –Adjacently –Separated by splitters –On top of one another (denoted by tabs)

Virtual University - Human Computer Interaction 14 © Imran Hussain | UMT Adjacent Panes Display interface elements adjacent to primary work element  reduces navigation Elements that can be displayed are –Supporting functions –Links –Data

Virtual University - Human Computer Interaction 15 © Imran Hussain | UMT Adjacent panes for supporting functions and data …

Virtual University - Human Computer Interaction 16 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 17 © Imran Hussain | UMT Panes PRIMARY WORK AREA

Virtual University - Human Computer Interaction 18 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 19 © Imran Hussain | UMT Adjacent panes for dragging objects …

Virtual University - Human Computer Interaction 20 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 21 © Imran Hussain | UMT Adjacent panes in web environment …

Virtual University - Human Computer Interaction 22 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 23 © Imran Hussain | UMT Panes

Virtual University - Human Computer Interaction 24 © Imran Hussain | UMT Panes separated by splitters …

Virtual University - Human Computer Interaction 25 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 26 © Imran Hussain | UMT Splitters

Virtual University - Human Computer Interaction 27 © Imran Hussain | UMT Problems with adjacent panes …

Virtual University - Human Computer Interaction 28 © Imran Hussain | UMT Problems with Adjacent Panes Too many adjacent supporting panes cause clutter Placement of panes does not match user workflow Crowding causes scrolling

Virtual University - Human Computer Interaction 29 © Imran Hussain | UMT … this is illustrated by an example …

Virtual University - Human Computer Interaction 30 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 31 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 32 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 33 © Imran Hussain | UMT Panes can be stacked on top of each other and denoted by tabs. Tabbed panes …

Virtual University - Human Computer Interaction 34 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 35 © Imran Hussain | UMT Tabbed panes

Virtual University - Human Computer Interaction 36 © Imran Hussain | UMT Problems with tabbed panes …

Virtual University - Human Computer Interaction 37 © Imran Hussain | UMT Problems with Tabbed Panes Obscure what was on screen before the user navigated to them Not good idea to place complex features into smaller parts and place them individually on separate tabbed panes –This causes navigational excise

Virtual University - Human Computer Interaction 38 © Imran Hussain | UMT Navigation Between Tools and Menus Users need to use tools, palettes, functions –Organize these spatially within a pane to minimize extraneous movements Menu options are not visible prior to clicking –Require more navigational effort Provide frequently-used functions in toolbars and palettes Menu use should be reserved for infrequently-used functions Avoid forcing the user to navigate between palette controls …

Virtual University - Human Computer Interaction 39 © Imran Hussain | UMT Problem of navigating between palette controls …

Virtual University - Human Computer Interaction 40 © Imran Hussain | UMT Navigation of Information Methods of navigating info within panes or windows –Scrolling (panning) Ubiquitous in software Minimize scrolling Strike balance between paging and scrolling –Linking (jumping) Ubiquitous on the Web Visually dislocating activity –Zooming Visualization of 3D or detailed 2D data Uses vertical and horizontal scrolling Uses thumbnail map

Virtual University - Human Computer Interaction 41 © Imran Hussain | UMT Scrolling in a window …

Virtual University - Human Computer Interaction 42 © Imran Hussain | UMT Scrolling

Virtual University - Human Computer Interaction 43 © Imran Hussain | UMT Scrolling in a pane …

Virtual University - Human Computer Interaction 44 © Imran Hussain | UMT Scrolling

Virtual University - Human Computer Interaction 45 © Imran Hussain | UMT Linking in a web page …

Virtual University - Human Computer Interaction 46 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 47 © Imran Hussain | UMT.. link takes user to another page …

Virtual University - Human Computer Interaction 48 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 49 © Imran Hussain | UMT Improving Navigation

Virtual University - Human Computer Interaction 50 © Imran Hussain | UMT Ways to Improve Navigation Reduce the number of places to go Provide signposts Provide overviews Provide appropriate mapping of controls to functions Inflect your interface to match user needs Avoid hierarchies

Virtual University - Human Computer Interaction 51 © Imran Hussain | UMT Reduce the number of places to go This means less places (modes, forms, dialogs, windows, screens) Keep number of pages and windows to minimum Minimize number of adjacent panes in window or web page Reduce number of controls and functions –Avoid controls and functions that users don’t really need Minimize scrolling –Provide supporting panes with adequate space to avoid scrolling

Virtual University - Human Computer Interaction 52 © Imran Hussain | UMT Provide signposts Provide points of reference (signposts) by providing persistent objects –Just like sailors navigating through seas Persistent objects in desktop environment –Main program window Menu bars Toolbars Palettes Status bars

Virtual University - Human Computer Interaction 53 © Imran Hussain | UMT Persistent objects in desktop environment …

Virtual University - Human Computer Interaction 54 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 55 © Imran Hussain | UMT Persistent objects in web environment …

Virtual University - Human Computer Interaction 56 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 57 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 58 © Imran Hussain | UMT Avoid making all pages exactly similar …

Virtual University - Human Computer Interaction 59 © Imran Hussain | UMT

Virtual University - Human Computer Interaction 60 © Imran Hussain | UMT Provide overviews Use breadcrumbs in web pages Annotated scrollbars

Virtual University - Human Computer Interaction 61 © Imran Hussain | UMT Provide appropriate mapping of controls to functions Physical mapping Logical mapping

Virtual University - Human Computer Interaction 62 © Imran Hussain | UMT Inflect your interface to match user needs Inflect the interface for typical navigation Users make commensurate effort if the rewards justify it –Commonly-used functions: place nearby –Advanced features: tucked away Organize controls and displays according to following attributes: –Frequency of use –Degree of dislocation –Degree of exposure

Virtual University - Human Computer Interaction 63 © Imran Hussain | UMT Avoid hierarchies Programmers are comfortable with hierarchies Common people do not go beyond one level of hierarchy