The document discusses human-machine interface design. It defines key terms like HMI, MMI, CHI, HCI and describes the multi-disciplinary nature of interface design. It also outlines the user interface design process including task analysis, interface design activities, prototyping and evaluation. Usability principles are presented focusing on tasks, feedback, consistency and more. Encoding techniques and examples of good and bad interfaces are provided.
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
Human machine interface
1. Human Machine Interface
Design
g
R. Akerkar
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 1
2. Terminology
You Can Call It Human Machine Interface
(HMI)
• Or:
- MMI (Man Machine Interface)
- CHI (Computer Human Interaction)
(C t H I t ti )
- HCI (Human Computer Interaction)
- USI (User System Interface)
- UI (User Interface)
- HCC (Human Computer Communication)
- OI (Operator Interface)
(O t I t f )
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 2
3. Human Computer
Human-Computer Interaction (HCI)
Human
the end-user of a software
the others in the organization
Computer
the machine the software runs on
Interaction
the user tells the computer what they want
the computer communicates results
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 3
4. Human Machine Interface
The Development of a Human Being’s Interaction with a Computer System
• Multi-Disciplinary
- Systems Engineering
- System Architecture
- HMI Software Design and Development
- Human Factors Engineering
- Cognitive Science
- Artificial Intelligence
- Others, e.g. Expert HMI
• Multi-Phase (All Phases of the software life-cycle)
( y )
- Proposal
- Requirement
- Design
- Code
- Integrate and Test
- Install and Train
- Operate and Maintain
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 4
5. Why Study User Interfaces?
Major p of work for “real” p g
j part programs
approximately 50%
You will work on “real” software
intended for users other than yourself
User interfaces are hard to get right
people are unpredictable
l di t bl
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 5
6. Types of Interfaces
Between software components
Between software and external (non-human)
entities
Between humans and software
Software quality is slowed down by the
frustration d
f t ti and anxiety caused b poorly-
i t d by l
designed interfaces
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 6
7. Problems with User Interfaces
User Interface accounts for a large portion of life-cycle costs
- application algorithms - 40%
- dialogue management - 40%
- presentation - 20%
• UI development is extremely labor intensive
• UI’s require frequent and extensive modifications due to not
understanding all interactions until the system is completely
p
developed
• Modifications to UI are difficult to make when the UI and the
application are tightly interwoven
• Difficult to take advantage of new I/O technologies if they do
g g y
not match the current model
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 7
8. Interface Design
g
Easy to learn?
Easy to use?
Easy to understand?
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 8
9. Interface Design
g
Typical Design Errors
lack of consistency
too much memorization
no guidance / help
id h l
no context sensitivity
p
poor response
p
Arcane/unfriendly
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 9
10. Golden Rules
Place the user in control
Reduce the user’s memory load
Make the interface consistent
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 10
11. 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.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 11
12. Reduce the User’s Memory Load
y
Reduce demand on short-term memory.
short-
Establish meaningful defaults.
Define shortcuts that are intuitive.
Disclose information in a progressive fashion.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 12
13. Make the Interface Consistent
Allow the user to put the current task into a meaningful
p g
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.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 13
14. User Interface Design Models
g
System perception — the user’s mental image of what
y p p g
the interface is.
User model — a profile of all end users of the system.
System image — the “presentation” of the system
projected by the complete interface.
Design model — data architectural, interface and
data, architectural
procedural representations of the software.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 14
15. User Interface Design Process
g
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 15
16. The design process
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 16
17. Task Analysis and Modeling
y g
All human tasks required to do the job (of the
interface) are defined and classified
Objects (to be manipulated) and actions
(functions applied to objects) are identified for
each task
Tasks are refined iteratively until the job is
completely defined
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 17
18. Interface Design Activities
g
1. Establish the goals and intentions for each task.
2.
2 Map each goal/intention to a sequence of specific actions.
actions
3. Specify the action sequence of tasks and subtasks, also called a
user scenario, as it will be executed at the interface level.
4.
4 Indicate the state of the system i e what does the interface look
system, i.e.,
like at the time that a user scenario is performed?
5. Define control mechanisms, i.e., the objects and actions available
to the user to alter the system state.
6. Show how control mechanisms affect the state of the system.
7. Indicate how the user interprets the state of the system from
information provided through the interface.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 18
19. Design Evaluation Cycle
preliminary
design
build
prototype #1
interface
build
prototype # n
interface
user
evaluate's
interface
design
modifications
are made
evaluation
is studied by
designer
Interface design
is complete
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 19
20. Some basic terminology of user interface
design
Dialog: A specific window with which a user can interact
interact,
but which is not the main UI window.
Control or Widget: Specific components of a user
interface.
i t f
Affordance: The set of operations that the user can do at
any given p
yg point in time.
State: At any stage in the dialog, the system is displaying
certain information in certain widgets, and has a certain
affordance.
affordance
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 20
21. Some basic terminology of user interface
design
Mode: A situation in which the UI restricts
what the user can do.
h t th d
Modal dialog: A dialog in which the system
is in a very restrictive mode.
Feedback: The response from the system
whenever the user does something, is
called feedback. For example, in the task
of changing the user password, when it’s
finished, th f ll i
fi i h d the following message will come
ill
out.
Encoding techniques. Ways of encoding
information so as to communicate it to the
user.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 21
22. Usability Principles
Do not rely only on usability guidelines – always test
with users.
users
Usability guidelines have exceptions; you can only be
confident that a UI is good if you test it successfully with
users.
Base UI designs on users’ tasks.
Perform use case analysis to structure the UI.
Ensure that the sequences of actions to achieve a
task are as simple as possible.
Reduce the amount of reading and manipulation the user
has to do
do.
Ensure the user does not have to navigate anywhere to do
subsequent steps of a task.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 22
23. Usability Principles
Ensure that the user always knows what he or she
can and should do next
next.
Ensure that the user can see what commands are available
and are not available.
Make the most important commands stand out.
Provide good feedback including effective error
messages.
Inform users of the progress of operations and of their
location as they navigate.
y g
When something goes wrong explain the situation in
adequate detail and help the user to resolve the problem.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 23
24. Usability Principles
Ensure that the user can always get out, go back or
undo an action
action.
Ensure that all operations can be undone.
Ensure it is easy to navigate back to where the user came
from.
Ensure that response time is adequate.
Users are very sensitive to slow response time
They compare your system to others.
Keep response time less than a second for most
operations.
Warn users of longer delays and inform them of progress.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 24
25. Usability Principles
Use understandable encoding techniques.
Choose encoding techniques with care.
Use labels to ensure all encoding techniques are fully
understood by users.
Ensure that the UI’s appearance is uncluttered
UI s uncluttered.
Avoid displaying too much information.
Organize the information effectively.
Consider the needs of different groups of users.
Accommodate people from different locales and people
with di biliti
ith disabilities.
Ensure that the system is usable by both beginners and
experts.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 25
26. Usability Principles
Provide all necessary help.
Organize h l well.
O i help ll
Integrate help with the application.
Ensure that the help is accurate
accurate.
Be consistent
consistent.
Use similar layouts and graphic designs
throughout your application.
Follow look-and-feel standards.
Consider mimicking other applications.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 26
27. Some encoding techniques
Text and fonts
Icons
Photographs
Diagrams and abstract graphics
Colours
Grouping and bordering
Music
Spoken words
Other sounds
Animations and video
Flashing
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 27
28. Examples
of Bad UI
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 28
29. Examples of
Good UI
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 29
30. Evaluating User Interfaces
Heuristic evaluation
1. Pick some use cases to evaluate.
2. For each window, page or dialog that appears
during the
d i th execution of th use case
ti f the
Study it in detail to look for possible usability defects.
3.
3 When you discover a usability defect write down
the following information:
A short description of the defect.
Your ideas for how the defect might be fixed.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 30
31. Evaluating User Interfaces
Evaluation by observation of users
Select users corresponding to each of the most important
actors
Select the most important use cases
p
Write sufficient instructions about each of the scenarios
Arrange evaluation sessions with users
Explain the purpose of the evaluation
Preferably videotape each session
Converse with the users as they are performing the tasks
Take note of any difficulties experienced by the users
Formulate recommended changes
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 31
32. Documentation
System Documentation
User Documentation
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 32
33. User Documentation
A functional description:
Explains what the system can do.
p y
A installation document:
How to install the system and modify it from particular hardware
g
configuration.
An introductory manual:
How to get started with the system.
A reference manual:
Describes in detail all of the system facilities available to the user
and how these facilities can be used.
A system administrator’s guide:
t d i i t t ’ id
Explains how to react to situations which arise while the system
is in use and how to do housekeeping tasks such as making a
system backup
backup.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 33
35. Graphical user interfaces (GUIs)
GUIs are a long way from completely
replacing text/command based systems, but
are the most common form of interface these
days.
Windows, icons, pull-down menus, dialog
boxes, use of mouse.
b f
Advantages: easy to learn to use, facilitates
switching between tasks (have different
things going in different windows), full screen
interaction.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 35
36. Future interfaces
In an ideal world one would not need to sit at a monitor and type
on a keyboard (or click mouse buttons) to use a computer. The
future of human-computer interfaces will f
f t fh t i t f ill focus on seamlessly
l l
integrating computers into everyday life.
In addition to the current common GUI and keyboard interfaces,
computerized systems will be able to react to
touch and pressure
movement (e.g. hand waving, a person's position in a room, the
direction a person is facing)
speech
There is already substantial interest and investment in virtual
reality,
reality "intelligent" clothing hands free/heads up systems, etc
clothing, hands-free/heads-up systems etc.
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 36
37. Example 1 (Before)
Poor Button Location
Important Information not
prominently displayed
Less important information
(Acting As GO) takes up
valuable real estate
Confusing navigation to the
left and at the top
Bad Language - Sa e
Lang age Save,
Acting As Go, View, Create
8 of 9 users were unable to
approve using this screen
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 37
38. Example 1 ( After)
Appropriate Button Location
Clear Language
Important Information displayed at the
top
Easy to use left-nav
left nav
9 of 9 users successfully approved
using this screen
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 38
39. Example 2 (Before)
Too many fields (60+ fields)
Important information (fields that 80%
of users search by 80% of the time) is
not prominently displayed
Useful navigational elements missing
g g
from the left nav (Nav is inconsistent
from page to page)
Users repeated being "confused" by
the number of fields
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 39
40. Example 2 (After)
Eliminated uneccessary fields
Ability to search and browse by only
the useful fields
Useful links in the left-nav
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 40
41. Example 3 (before)
Multiple windows open at one time
Some Critical T k i
S C iti l Task icons (
(e.g. quote)
t )
are hidden below the open window
Important information not front and
center
Too
T many steps to complete the
t t l t th
Critical Tasks
Too many tabs and unnecessary fields
0 of 9 sales people successfully
created an account using thi product
t d t i this d t
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 41
42. Example 3 (After)
No more than 2 windows open at one
time. Navigation i easy
ti N i ti is
Information is grouped and easy to
find
9 of 9 sales people successfully
p p y
created an account
CIS 260 Software Engineering - I (R.
10:18 AM Akerkar) 42