Imran Hussain

1
Virtual University Human-Computer Interaction
Lecture 28Behavior Form Part III

• Imran Hussain
• University of Management and Technology (UMT)

2
In Last Lecture

• Software Postures
• Handheld devices
• The Web
• Other
• Orchestration
• Flow

3
In Todays Lecture

• Excise
• Significance of Navigation
• Types of Navigation
• Improving Navigation

4
Significance of Navigation
5
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
6
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

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

8
Types of Navigation
9
Types of Navigation

• Navigation Between Multiple Windows or Pages
• Navigation Between Panes
• Navigation Between Tools and Menus
• Navigation of Information

10
You may question the inclusion of some of the
above-stated types of navigation not according
to our definition though
11
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.

12
Navigation Between Multiple Windows or Pages

• Navigating between windows interrupts users 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

13
Navigation Between Panes

• Windows can contain multiple panes
• Adjacently
• Separated by splitters
• On top of one another (denoted by tabs)

14
Adjacent Panes

• Display interface elements adjacent to primary
  work element ? reduces navigation
• Elements that can be displayed are
• Supporting functions
• Links
• Data

15
Adjacent panes for supporting functions and data
16
(No Transcript)
17
Panes
PRIMARY WORK AREA
18
(No Transcript)
19
Adjacent panes for dragging objects
20
(No Transcript)
21
Adjacent panes in web environment
22
(No Transcript)
23
Panes
24
Panes separated by splitters
25
(No Transcript)
26
Splitters
27
Problems with adjacent panes
28
Problems with Adjacent Panes

• Too many adjacent supporting panes cause clutter
• Placement of panes does not match user workflow
• Crowding causes scrolling

29
this is illustrated by an example
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
Panes can be stacked on top of each other and
denoted by tabs.Tabbed panes
34
(No Transcript)
35
Tabbed panes
36
Problems with tabbed panes
37
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

38
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

39
Problem of navigating between palette controls
40
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

41
Scrolling in a window
42
Scrolling
43
Scrolling in a pane
44
Scrolling
45
Linking in a web page
46
(No Transcript)
47
.. link takes user to another page
48
(No Transcript)
49
Improving Navigation
50
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

51
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 dont
  really need
• Minimize scrolling
• Provide supporting panes with adequate space to
  avoid scrolling

52
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

53
Persistent objects in desktop environment
54
(No Transcript)
55
Persistent objects in web environment
56
(No Transcript)
57
(No Transcript)
58
Avoid making all pages exactly similar
59
(No Transcript)
60
Provide overviews

• Use breadcrumbs in web pages
• Annotated scrollbars

61
Provide appropriate mapping of controls to
functions

• Physical mapping
• Logical mapping

62
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

63
Avoid hierarchies

• Programmers are comfortable with hierarchies
• Common people do not go beyond one level of
  hierarchy