Human Factors and User Interface Design Overview

1
Human Factors and User Interface Design Overview

• Rob Oshana

2
Agenda

• Golden Rules
• Design Models
• Cognitive friction and the Iceberg Secret
• Computers versus Humans
• Know your user
• Low fidelity prototyping
• User interaction design

3
(No Transcript)
4
Some notable user interfaces
5
Interface Design
Easy to learn?
Easy to use?
Easy to understand?
Pressman, Software Engineering, version 6
6
Interface Design
Typical Design Errors
lack of consistency too much memorization no
guidance / help no context sensitivity poor
response Arcane/unfriendly
Pressman, Software Engineering, version 6
7
Golden Rules

• Place the user in control
• Reduce the users memory load
• Make the interface consistent

Pressman, Software Engineering, version 6
8
Place the User in Control
Define interaction modes in a way that does not
force a user into unnecessary or undesired
actions. Provide for flexible interaction.
Allow user interaction to be interruptible and
undoable. Streamline interaction as skill levels
advance and allow the interaction to be
customized. Hide technical internals from the
casual user. Design for direct interaction with
objects that appear on the screen.
9
Reduce the Users Memory Load
Reduce demand on short-term memory. Establish
meaningful defaults. Define shortcuts that are
intuitive. The visual layout of the interface
should be based on a real world metaphor.
Disclose information in a progressive fashion.
10
Make the Interface Consistent
Allow the user to put the current task into a
meaningful context. Maintain consistency across
a family of applications. If past interactive
models have created user expectations, do not
make changes unless there is a compelling reason
to do so.
11
User Interface Design Models

• User model a profile of all end users of the
  system
• Design model a design realization of the user
  model
• Mental model (system perception) the users
  mental image of what the interface is
• Implementation model the interface look and
  feel coupled with supporting information that
  describe interface syntax and semantics

12
Mental models

• Knowledge is often described as a mental model
• How to use the system (what to do next)
• What to do with unfamiliar systems or unexpected
  situations (how the system works)
• People make inferences using mental models of how
  to carry out tasks
• We sometimes get these wrong
• Heating up a room

13
The Iceberg Secret

• An iceberg is 90 underwater
• Software is the same way
• Corollary 1 If you show a non-programmmer a
  screen that is 90 worse, they will think the
  program is 90 worse
• Corollary 2 If you show a non-programmmer a
  screen that is 100 beautiful, they will think
  the program is almost done

14
Cognitive friction

• The relative difficulty of a task and the mental
  effort required to complete it
• Tasks that present choices and actions in a way
  the human brain will expect are measured as
  having a low level of friction
• Those that require thought, translation and
  calculation are said to be high in cognitive
  friction.
• SW is high in cognitive friction

High cognitive friction
Low cognitive friction
15
Computers versus Humans (cooper)

• Computers must
• understand human
• capabilities and
• limitations to know
• when to lead
• when to follow
• when to support

16
Significant change must be significantly better
17
A Programs Self-presentation

• Posture
• Sovereign (users and screens primary interest)
• Transient (single function application)
• Daemonic (invisible to users)
• Orchestration and flow
• Follow mental models
• Finesse (less is more)
• Invisibility (even less)
• Possibility vs probability
• Eliminate Excise
• Dont weld on training wheels!

18
An example of UI noise
19
Know your user
20
We design for the wrong people
Cooper The Inmates are Running the Asylum
21
Perpetual intermediates
Nobody wants to remain a beginner optimize for
the intermediate !!
Cooper The Inmates are Running the Asylum
22
Lets solve the right problem
Cooper The Inmates are Running the Asylum
23
Imagine users as very intelligent but very busy!
24
Design for the probable case, provide for the
possible case
25
Low fidelity prototyping keep it simple
26
Tools of the trade !!
Snyder Paper Prototyping
27
Low Fidelity Prototyping
Cooper The Inmates are Running the Asylum
28
Cooper The Inmates are Running the Asylum
29
A low fidelity prototype
30
Be the computer !
Cooper The Inmates are Running the Asylum
31
Its easy to get yourself out of trouble with a
paper prototype!
Cooper The Inmates are Running the Asylum
32
You Dont need too many evaluators
Cooper The Inmates are Running the Asylum
33
User interaction design
34
Think irrationally
Cooper The Inmates are Running the Asylum
35
Storyboards have been proven useful
Cooper The Inmates are Running the Asylum
36
A simple interaction design model

• User analysis
• Task analysis
• Workflow analysis
• Function partitioning

Identify needs/ establish requirements
(Re)Design
Evaluate
Build an interactive version
Final product
Exemplifies a user-centered design approach
37
User Interface Evaluation
38
The computer does the work, the user does the
thinking
39
Questions ?
40
HumanComputerInteraction and User Interface
Design

• Southern Methodist University
• Rob Oshana

41
Designing a graphical user interface
42
Designing a GUI

• Most GUIs have a familiar mixture of windows,
  dialog boxes, tabs to help structure the
  interaction
• Menus, tool bars, command buttons, enable user to
  control interaction
• Option buttons, check boxes, list boxes, enable
  user to enter info
• All these are referred to as widgets

43
Designing a GUI

• How do you choose the correct widget?
• How do you use the widget effectively?
• How do you combine widgets?

44
Style guides for GUIs

• http//msdn.microsoft.com/library/default.asp?url
  /library/en-us/dnwue/html/welcome.asp
• http//developer.gnome.org/projects/gup/hig/1.0
• http//developer.apple.com/documentation/UserExper
  ience/Conceptual/OSXHIGuidelines/index.html

45
Exercise 10 minutes

• See the dialog boxes on the next two pages.
  Consider the differences between the command
  buttons in the two figures with respect to the
  following
• Affordance of the buttons
• Use of color
• Shape of the buttons
• Positioning of the buttons
• Wording of the text inside the buttons

46
Typical dialog box in Windows XP
47
A Mac OS dialog box
48
Energetic Sports Center

• Domain the wider domain is sport, and the
  particular application domain is the activities
  available at Energetic and how the sports center
  handles these. The center offers these
  activities toddlers gym (for very young children
  accompanied by a parent or caregiver), football,
  a fitness room, womens aerobics, and squash. It
  has these facilities the main hall, fitness
  room, playing field, two squash courts, a bar,
  and social area

49
Layout of Energetic Sports
50
Energetic Sports Center

• When adults use the facility, they pay the
  appropriate charge for the facility plus a day
  membership fee. Alternatively, they can become a
  member of the center. It is usually worth
  becoming a member if you use the sports center
  more than once each week. The center currently
  has around 500 members.
• The center would like a computer system to record
  membership details and to book squash matches.
  If it is successful, the center plans to use it
  for other bookings in the future such as matches
  and events in the main hall or social area, but
  these are excluded at the moment

51
Users

• In the new system, administrative members of
  staff will record membership details. Most staff
  members work part time and rarely stay for more
  than a few months. There are five part-time
  staff members and a full-time manager
• The administrative members of staff are mainly
  mature and have limited knowledge and experience
  of computing systems. Half a days training will
  be available to each one when the computer system
  is installed. Energetic requires them to speak
  English fluently. One member of the staff is a
  wheelchair user and another has arthritis in her
  hands, which restricts her speed of typing and
  rules out use of a mouse
• Squash players vary in age from 18 to 70. The
  level of computer literacy among players varies
  greatly. At the moment the center does not have
  any wheelchair users as squash-playing members,
  but Energetic hopes to encourage the wheel-chair
  basketball players to try the game. Some of the
  older players are losing some hearing, and many
  of them have some vision problems such as wearing
  glasses for reading.

52
Main tasks

• Task 1 Adding and modifying Membership details
• Energetic is a popular sports center, so staff
  members add or modify membership details at least
  once a day it is thus a familiar task. It
  usually takes about five minutes. Telephone
  calls often interrupt them. Membership details
  are currently recorded using paper forms such as
  the one on the next page. These are stored in a
  filing cabinet in the office behind the reception
  desk. Members pay a yearly subscription. This
  is due on the anniversary of first joining.
  There are different rates for adults (age 18 and
  above) and seniors (over 60). Separate
  arrangements are made for those under 18,
  depending on the activity.

53
Recording details at Energetic
54
Main tasks

• Task 2 Booking squash matches
• Squash matches are recorded in a diary (previous
  page, part b). This is stored at the reception
  desk. Bookings are often made over the telephone
  or after a match has just been played. There are
  20 booking slots each day (two courts, each with
  10 slots). Members are entitled to book the
  squash courts seven days ahead. Nonmembers can
  only book them five days ahead.
• In the new system, members can book in person or
  telephone the center. Players are often in a
  hurry, as they tend to book their next match on
  their way out after playing a match. They are
  well motivated, because if they do not book a
  court, then the courts may all be fully booked
  when they want to play their match. In this
  example, we are not considering how the other
  activities are booked

55
Environment

• The environment is busy and noisy. The bookings
  diary is kept on a notice board in the reception.
  The lighting is good. The environment is quite
  dusty and dirty due to the constant traffic of
  people through the foyer. There is sufficient
  room in the social areas for a computer to enable
  players to book their own squash matches.

56
Technology

• The center has already made the following
  decisions about the technology
• There will be a small network of computers. This
  will enable the data to be shared
• Initially there will be two computers. One
  computer will be at the reception desk. This
  will be used for both membership details and for
  booking squash matches. The other will be in the
  social area and will be only used for booking
  squash matches
• The computer at the reception desk will use a
  conventional screen, mouse, and keyboard. There
  are well suited to the task. Also, they are
  cheap and the staff members are likely to be
  familiar with them.
• The computer in the social area will use a touch
  screen mounted in the wall. This was chosen
  because it is robust and easy to use. There are
  some practical considerations, such as keeping it
  clean. The receptionist will be responsible for
  cleaning it twice each day. Sound output will
  not be used, as the environment is too noisy
• The center wants to screens to look like the
  forms that the office staff are used to completing

57
Conceptual design

• Primary task objects member, booking
• Attributes
• Member name, address, other contact details,
  date of first registration, length of membership,
  age, sex, medical condition, drug allergies,
  activities interested in
• Booking date, court , name and membership of
  person making the booking
• Actions
• Members adding and removing members, changing
  the details of a member, checking a members
  record, creating a master list of all the current
  members, searching through forms to find a
  particular member, inserting the form into the
  correct place, giving a member a copy of his or
  her record, membership renewal
• Booking adding a new booking, canceling a booking

58
(No Transcript)
59
Metaphors

• A form on the screen will represent the
  membership form, and the bookings diary will be
  represented by a diary metaphor

60
Choosing widgets to structure the interaction
61
Using primary windows

• Primary windows often correspond to the main task
  objects in the conceptual design
• In an office style app, we may have one primary
  window for the word processor and another for the
  spreadsheet program. Main task objects are
• Document being written
• Spreadsheet being created
• Only a small number of primary windows in a UI
• Act like bases for users to keep returning to
• Sometimes used as a launch pad (allows you to
  jump into other primary windows)

62
Exercise 5 minutes

• List the two primary windows needed for the
  Energetic Sports Center. Sketch an additional
  launch pad window to choose between these

63
Using secondary windows

• Typically complement primary windows, providing
  additional functionality and support for the user
• Message boxes
• Pass messages to the user
• These messages often relate to problems that have
  arisen or situations that the user needs to deal
  with urgently

64
Some unhelpfulerrormessages
65
More on message boxes

• Often modal (must click on them if you want to
  continue), modeless do not impose this
• Used to alert user to immediate attention, and
  not to enter any more data
• Must contain a good diagnosis
• Can be irritating because you do not invoke, the
  system does, but you have to respond to them!
• Could confuse novices
• Modal vs modeless depends on needs of users and
  task

66
Dialog boxes

• Invoked by the user
• Used where additional information is needed to
  carry out a task
• Can be complex screen entities, containing text
  fields, command buttons, and so on
• Mostly modeless (can swap to other windows)
• User may need to work through a sequence of
  dialog boxes in a strict sequence to complete a
  task (in this case modal dialog boxes make sense)
  this is also called a wizard

67
Example dialog box
68
Using tabs

• Tabs are used for classifying the properties of a
  task object represented by a window
• Index card metaphor
• Issues when using tabs
• Is the information on the different tabs
  independent?
• How many tabs do you need?
• Do the tabs need to be completed in a specific
  order?

69
Unwise use of tabs
Row different lengths Tabs organization
confusing (modem 1, modem2 placement)
70
Exercise 10 minutes

• In the Energetic Sports Center, the membership
  primary window will display the details of one
  center member. How could this information be
  divided into more than one tab? You should
  consider the original membership form when you
  make this decision.
• Also, the managers have decided to ask each
  member which activities particularly interest
  them. This is mainly for statistical and
  planning purposes, but also so that members can
  be advised to be cautious is they are considering
  a very active sport when they are unwell. Think
  about how you would represent the information on
  the form. For example, will you use only text
  boxes, or a mixture of text boxes and other
  widgets? This is significant because a block of
  option buttons takes up more space than a single
  text box

71
Choosing widgets to control the interaction
72
Using menus

• Drop down menus
• Most common form
• Cascading menus
• User must have good mouse control
• Roll-up menus
• Used to save screen space
• Pop up menus
• Most common tasks for current position

73
(No Transcript)
74
Issues with using menus

• How do you name menu items?
• If you do not understand the purpose of a menu
  item, you do not know when to use it
• Do the menus allow the user to do what they want
  to do and no more?
• Must reflect what the user wants to do and not
  just access to functions in the program
• How do you order the menu bar an menu items?
• Use card sort technique

75
Exercise 10 minutes

• Draw a menu bar and associated drop-down menus
  for the membership window of the ESC. They
  should allow the user to perform the following
  tasks
• Search for a particular member
• Print the details of the displayed member
• Add a new member
• Sort the members into a particular order
• List, in tabular form, the members in a secondary
  window
• Delete an existing member from the membership
  list
• Justify your decisions

76
Using toolbars

• Toolbars complement the menu hierarchy
• Range of frequently used commands
• Enable the experienced user to operate the SW
  quickly
• Different toolbars specializing in a different
  area of the programs functionality
• Appear below the menu bar in primary windows
• Can also appear in secondary windows (palette
  windows)
• Be careful choosing the icons!

77
Exercise 10 minutes

• Draw a tool bar for the previous menu hierarchy,
  choosing two of the menu items to be represented
  in the toolbar. How did you choose the items to
  go on the toolbar? How did you design the icons?

78
Using command buttons

• Typically these are used for controlling the
  operation of dialog boxes
• Like toolbars, always visible
• Issues to consider
• How will you label them?
• How will you position them on the screen?
• Typically at the bottom of dialog boxes
• In our culture, most important on the left end of
  horizontal lines of buttons and at the top of
  vertical columns of buttons
• What size should the buttons be?
• Different lengths are ok if they are in a row

79
Poor use of command buttons
Not clear what will happen when buttons
selected When undo is selected, is user
resubscribed to the mailing list? It may mean
that the confirmation message will not be sent It
might cause the dialog box to disappear
80
Exercise 10 minutes

• The membership window of ESC needs to invoke a
  search for member dialog box from the relevant
  menu and tool bar
• We need three command buttons, which should
  perform the following operations
• Carry out the search
• Cancel the search and clear the dialog box from
  the screen
• Provide help
• Draw the section of the dialog box that contains
  the buttons that carry out these operations.
  Draw the buttons positioned horizontally. Repeat
  the task, drawing an alternative dialog box with
  the buttons positioned vertically.

81
Choosing widgets to enter information
82
Option buttons and check boxes

• These are a quick and accurate way of entering
  information into the computer system.
• Option buttons (radio buttons) are used when the
  user needs to choose one option out of a
  selection
• Check boxes are used when the user needs to
  choose more than one option out of a selection

83
Inappropriate use of check boxes
Should be an option button!
84
Questions when using check boxes

• How many options can you reasonably represent in
  this way?
• 1 out of 3? 1 out of 30?
• How should the options be grouped and laid out on
  the screen?
• Vertical listing reduces ambiguity but takes more
  screen space
• How should they be ordered on the screen?
• Alphabetic, in order of most likely answer, other
  predictable way
• How should the options be labeled?
• Something the user will understand!

85
Exercise 10 minutes

• We now move on to the detailed design of the
  membership window for ESC. We now know that the
  representation is a form and the tabs contain
  general details, membership details, medical
  conditions, and activities. If we look at the
  list of attributes, this will include age, sex,
  and the activities that interest the user. Draw
  the relevant parts of the general details and
  activities tabs, showing how options boxes and
  check boxes can be used to enter this information

86
Using list boxes

• If you want to allow the user to choose from a
  large number of options, then list boxes can be
  the answer
• Some list boxes restrict the user to selecting
  one option, multiple-selection list boxes allow
  more than one option
• Some drop down, others are permanently displayed

87
Types of list boxes
88
Questions when using list boxes

• How many options should be displayed?
• Guideline is 3 to 8
• How much space is available?
• For permanent of should a drop-down be used?
• Are the options likely to change?
• If so, list boxes are more flexible than option
  buttons or check boxes
• Are multiple selections needed?
• If so, list box should allow for this
• What default values should be used?
• This can speed up the use of the program

89
Exercise 10 minutes

• The bookings primary window for the ESC will
  appear on both the PC in reception and the touch
  screen in the social area. This will take the
  form of a diary metaphor.
• In this exercise we concentrate on the touch
  screen in the social area
• Illustrate how the bookings window may look. The
  should be able to make their booking by entering
  their membership number using a drop down list
  box
• Include buttons to allow the users to turn the
  pages in the booking diary.

90
Text boxes

• Most flexible widget for entering information
• Not possible to anticipate input
• Do not want to constrain the choice
• Can be a disadvantage as well
• GUI front end to a DB (Male, male, M)
• Used in conjunction with list boxes
• Result is a combo box
• Matches characters being entered into the textbox
  against the list

91
Where a text box is needed
92
Questions when using text boxes

• What size and shape should the text box be?
• Should indicate how much information is required
  ( lines and line length)
• Do you know how much information the user wants
  to enter?
• If not, then the text box should be scrollable
• Will you want to gray out the text box?
• May want to show that the text box cannot be
  changed

93
Exercise 10 minutes

• Returning to the membership window for the ESC,
  which of the following will require a text box
  and why? If a text box is not appropriate, which
  widget would be? If a text box is needed, should
  it be scrollable?
• Street in the members address
• Whether or not the member want to go on the
  mailing list
• Additional information about the members medical
  history

94
Combining GUI widgets
95
Combining widgets

• UI is more than an isolated selection of widgets
• How do you put together a sequence of screens to
  complete a task for the user?
• How do you extend you design to incorporate new
  features?

96
Exercise 10 minutes

• See the two different design for a tab box on the
  next page. Design a) uses a sequence of traffic
  lights in the bottom right corner of the dialog
  box. They are numbered from one to six, each
  corresponding to one of the tabs. According to
  the UI user guide, yellow means some of the
  information has been entered on the tab, red
  means that not all the information has been
  entered, and green indicates that all the
  information has been entered. Design b) has an
  indicator attached to each tab. This indicator
  can be on or off.

97
Exercise