Human Factors and User Interface Design Overview - PowerPoint PPT Presentation


PPT – Human Factors and User Interface Design Overview PowerPoint presentation | free to view - id: 70ba68-YmQwY


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Human Factors and User Interface Design Overview


Human Factors and User Interface Design Overview Rob Oshana – PowerPoint PPT presentation

Number of Views:141
Avg rating:3.0/5.0
Slides: 98
Provided by: RobO179


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Human Factors and User Interface Design Overview

Human Factors and User Interface Design Overview
  • Rob Oshana

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

(No Transcript)
Some notable user interfaces
Interface Design
Easy to learn?
Easy to use?
Easy to understand?
Pressman, Software Engineering, version 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
Golden Rules
  • Place the user in control
  • Reduce the users memory load
  • Make the interface consistent

Pressman, Software Engineering, version 6
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.
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.
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.
User Interface Design Models
  • User model a profile of all end users of the
  • Design model a design realization of the user
  • 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

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

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

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
  • SW is high in cognitive friction

High cognitive friction
Low cognitive friction
Computers versus Humans (cooper)
Computers Humans
Incredibly fast Incredibly slow
Error free Error prone
Deterministic Irrational
Apathetic Emotional
Literal Inferential
Sequential Random
Predictable Unpredictable
Amoral Ethical
Stupid Intelligent
  • Computers must
  • understand human
  • capabilities and
  • limitations to know
  • when to lead
  • when to follow
  • when to support

Significant change must be significantly better
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!

An example of UI noise
Know your user
We design for the wrong people
Cooper The Inmates are Running the Asylum
Perpetual intermediates
Nobody wants to remain a beginner optimize for
the intermediate !!
Cooper The Inmates are Running the Asylum
Lets solve the right problem
Cooper The Inmates are Running the Asylum
Imagine users as very intelligent but very busy!
Design for the probable case, provide for the
possible case
Low fidelity prototyping keep it simple
Tools of the trade !!
Snyder Paper Prototyping
Low Fidelity Prototyping
Cooper The Inmates are Running the Asylum
Cooper The Inmates are Running the Asylum
A low fidelity prototype
Be the computer !
Cooper The Inmates are Running the Asylum
Its easy to get yourself out of trouble with a
paper prototype!
Cooper The Inmates are Running the Asylum
You Dont need too many evaluators
Cooper The Inmates are Running the Asylum
User interaction design
Think irrationally
Cooper The Inmates are Running the Asylum
Storyboards have been proven useful
Cooper The Inmates are Running the Asylum
A simple interaction design model
  • User analysis
  • Task analysis
  • Workflow analysis
  • Function partitioning

Identify needs/ establish requirements
Build an interactive version
Final product
Exemplifies a user-centered design approach
User Interface Evaluation
The computer does the work, the user does the
Questions ?
HumanComputerInteraction and User Interface
  • Southern Methodist University
  • Rob Oshana

Designing a graphical user interface
Designing a GUI
  • Most GUIs have a familiar mixture of windows,
    dialog boxes, tabs to help structure the
  • 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

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

Style guides for GUIs
  • http//
  • http//
  • http//

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
  • Affordance of the buttons
  • Use of color
  • Shape of the buttons
  • Positioning of the buttons
  • Wording of the text inside the buttons

Typical dialog box in Windows XP
A Mac OS dialog box
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

Layout of Energetic Sports
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

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

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.

Recording details at Energetic
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

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

  • 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

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

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

Choosing widgets to structure the interaction
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)

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

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

Some unhelpfulerrormessages
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

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

Example dialog box
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
  • How many tabs do you need?
  • Do the tabs need to be completed in a specific

Unwise use of tabs
Row different lengths Tabs organization
confusing (modem 1, modem2 placement)
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

Choosing widgets to control the interaction
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

(No Transcript)
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

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
  • 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
  • Delete an existing member from the membership
  • Justify your decisions

Using toolbars
  • Toolbars complement the menu hierarchy
  • Range of frequently used commands
  • Enable the experienced user to operate the SW
  • 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
  • Be careful choosing the icons!

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?

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

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

Choosing widgets to enter information
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
  • Check boxes are used when the user needs to
    choose more than one option out of a selection

Inappropriate use of check boxes
Should be an option button!
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!

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

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

Types of list boxes
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

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
  • Include buttons to allow the users to turn the
    pages in the booking diary.

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

Where a text box is needed
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

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

Combining GUI widgets
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

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.