Virtual University HumanComputer Interaction Lecture 28 Behavior Form
Virtual University Human-Computer Interaction Lecture 28 Behavior & Form – Part III Imran Hussain University of Management and Technology (UMT) 1 Virtual University - Human Computer Interaction © Imran Hussain | UMT
In Last Lecture … • Software Postures – Handheld devices – The Web – Other • Orchestration • Flow 2 Virtual University - Human Computer Interaction © Imran Hussain | UMT
In Today’s Lecture … • Excise • Significance of Navigation • Types of Navigation • Improving Navigation 3 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Significance of Navigation 4 Virtual University - Human Computer Interaction © 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 5 Virtual University - Human Computer Interaction © 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 6 Virtual University - Human Computer Interaction © 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. ” 7 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Types of Navigation 8 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Types of Navigation • Navigation Between Multiple Windows or Pages • Navigation Between Panes • Navigation Between Tools and Menus • Navigation of Information 9 Virtual University - Human Computer Interaction © Imran Hussain | UMT
You may question the inclusion of some of the abovestated types of navigation … not according to our definition though … 10 Virtual University - Human Computer Interaction © 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. ” 11 Virtual University - Human Computer Interaction © 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 12 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Navigation Between Panes • Windows can contain multiple panes – Adjacently – Separated by splitters – On top of one another (denoted by tabs) 13 Virtual University - Human Computer Interaction © 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 14 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Adjacent panes for supporting functions and data … 15 Virtual University - Human Computer Interaction © Imran Hussain | UMT
16 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Panes PRIMARY WORK AREA 17 Virtual University - Human Computer Interaction © Imran Hussain | UMT
18 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Adjacent panes for dragging objects … 19 Virtual University - Human Computer Interaction © Imran Hussain | UMT
20 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Adjacent panes in web environment … 21 Virtual University - Human Computer Interaction © Imran Hussain | UMT
22 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Panes 23 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Panes separated by splitters … 24 Virtual University - Human Computer Interaction © Imran Hussain | UMT
25 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Splitters 26 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Problems with adjacent panes … 27 Virtual University - Human Computer Interaction © 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 28 Virtual University - Human Computer Interaction © Imran Hussain | UMT
… this is illustrated by an example … 29 Virtual University - Human Computer Interaction © Imran Hussain | UMT
30 Virtual University - Human Computer Interaction © Imran Hussain | UMT
31 Virtual University - Human Computer Interaction © Imran Hussain | UMT
32 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Panes can be stacked on top of each other and denoted by tabs. Tabbed panes … 33 Virtual University - Human Computer Interaction © Imran Hussain | UMT
34 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Tabbed panes 35 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Problems with tabbed panes … 36 Virtual University - Human Computer Interaction © 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 37 Virtual University - Human Computer Interaction © 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 … 38 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Problem of navigating between palette controls … 39 Virtual University - Human Computer Interaction © 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 3 D or detailed 2 D data • Uses vertical and horizontal scrolling • Uses thumbnail map 40 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Scrolling in a window … 41 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Scrolling 42 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Scrolling in a pane … 43 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Scrolling 44 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Linking in a web page … 45 Virtual University - Human Computer Interaction © Imran Hussain | UMT
46 Virtual University - Human Computer Interaction © Imran Hussain | UMT
. . link takes user to another page … 47 Virtual University - Human Computer Interaction © Imran Hussain | UMT
48 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Improving Navigation 49 Virtual University - Human Computer Interaction © 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 50 Virtual University - Human Computer Interaction © 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 51 Virtual University - Human Computer Interaction © 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 • • 52 Menu bars Toolbars Palettes Status bars Virtual University - Human Computer Interaction © Imran Hussain | UMT
Persistent objects in desktop environment … 53 Virtual University - Human Computer Interaction © Imran Hussain | UMT
54 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Persistent objects in web environment … 55 Virtual University - Human Computer Interaction © Imran Hussain | UMT
56 Virtual University - Human Computer Interaction © Imran Hussain | UMT
57 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Avoid making all pages exactly similar … 58 Virtual University - Human Computer Interaction © Imran Hussain | UMT
59 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Provide overviews • Use breadcrumbs in web pages • Annotated scrollbars 60 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Provide appropriate mapping of controls to functions • Physical mapping • Logical mapping 61 Virtual University - Human Computer Interaction © 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 62 Virtual University - Human Computer Interaction © Imran Hussain | UMT
Avoid hierarchies • Programmers are comfortable with hierarchies • Common people do not go beyond one level of hierarchy 63 Virtual University - Human Computer Interaction © Imran Hussain | UMT
- Slides: 63