Landmark Institute of Technology

Department of Engineering

HUMAN COMPUTER INTERFACE (HCI)

By Mr. Meh Armstrong

[email protected]
m
Course Prerequisite
 Object oriented modelling
 Object oriented programming
 Software tools and menus

2
 Course objectives

The main objective of this course is to provide an

ability to analyze, design and build complex software
systems in the context of frequent change and to
produce a high quality software system within time.

3
Course Outline
Chapter 1: HCI definition and main
concepts Chapter 2: The design process
Chapter 3: The design implementation
Chapter 4: The design evaluation
Chapter 5: Projects

4
Course Outline
Chapter 1: HCI definition and main concepts
Chapter 2: The design process
Chapter 3: The design implementation
Chapter 4: The design evaluation
Chapter 5: Projects

5
Course
outline
Chapter 1: HCI definition and main concepts
• HCI other terminologies • Interface design activities
• HCI definition • Design evaluation cycle
• Why is HCI important? • Typical design errors
• Defining the user interface • Usability definition and principles
• Interface design characteristics • Some encoding techniques
• Typical design errors • Evaluating user interfaces
• user interface golden rules • Documentation
• user interface design process
6
HCI other terminologies
 Human machine interface (HMI)
 Man machine interaction (MMI)
 Computer human interaction (CHI)
 Human computer interaction (HCI)
 User system interface (USI)
 User interface (UI)
 Human computer communication (HCC)
 Operator interface (OI)
8
 HCI: The aim
•Human Computer Interaction is the key to successful
interactive systems development.
•It involves the bringing together of understandings
of human abilities, and technical
understanding of hardware and software technologies.
•This module aims to bring these different strands together
to give the student a set of tools for the building of better
interfaces.

9
HCI Basic concepts and principles (HCI Scope)

10
 HCI definition
HCI is the study of interaction between people (users) and computers.
•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
11
 HCI definition

"Human-computer interaction is a discipline concerned with

the design, evaluation and implementation of
interactive computing systems for human use and with the
study of major phenomena surrounding them."

12
 HCI Goal
•Basic goal
improve the interaction between users and computer
Making computers more usable and receptive to the user’s needs

•Long term goal

To design systems that minimize the barrier between the human's
cognitive model of what they want.
To accomplish the computer's understanding of the user's task

13
 Why is HCI important?

•User-centered design is getting a crucial role!

• It is getting more important today to increase competitiveness via HCI
studies (Norman, 1990)
•High-cost e-transformation investments
• Users lose time with badly designed products and services
• Users even give up using bad interface – Ineffective allocation of resources

14
 Defining the user interface
•User interface design is a subset of the human-computer interaction (HCI) field.
•HCI designers must consider a variety of factors:

 what people want and expect, physical limitations and abilities people possess,
how information processing systems work,
what people find enjoyable and attractive.
 Technical characteristics and limitations of the computer hardware and software
must also be
considered.

15
 The user interface
•It is the part of a computer and its software that people can see, hear, touch, talk to,
or otherwise understand or direct.
The user interface has essentially two components: input and output.

 Input is how a person communicates his / her needs to the computer. Some
common input components are the keyboard, mouse, trackball, one's finger,
and one's voice.
 Output is how the computer conveys the results of its computations and
requirements to the user. Today, the most common computer output
mechanism is the display screen, followed by mechanisms that take
advantage of a person's auditory capabilities: voice and sound.

16
Importance of user interfaces
•A well-designed interface is terribly important to users. It is their
window to view the capabilities of the software.
• It is also the vehicle through which many critical tasks are presented.
These tasks often have a direct impact on an organization's relations
with its customers, and its profitability.
•Poor design may even chase some people away from a system
permanently. It can also lead to aggravation, frustration, and
increased stress.

17
 Interface design characteristics
Because “Software quality is slowed down by the frustration and
anxiety caused by poorly- designed interfaces”

Interfaces must be:

 Easy to learn
 Easy to use
 Easy to understand

18
Typical design errors
Too much memorization
Lack of consistency
No guidance:/help
No context sensitivity
Poor response
arcane:/ unfriendly

19
User Interface- Golden rules

 Place the user in control

 Reduce the user’s memory load
 Make the interface consistent

20
Place the user in control
 Define interaction modes in a way that does not force a user into
performing unnecessary or undesired actions
 Provide flexible interaction
 Allow user interaction to be interruptible and undoable
 Hide technical internals from the casual user
 Design direct interaction with objects that appear on the screen
 Allow the interaction to be customized

21
Reduce the User’s Memory Load

o Reduce demand on short-term memory

o Establish meaningful defaults
o Define shortcuts that are intuitive
o Disclose information in a progressive fashion

22
Make the Interface Consistent

o Allow the user to put the current task into a meaningful

context
o Maintain consistency across a family of applications
o Use the past interactive models to create user
expectations, do not make changes unless there is a
compelling reason to do so

23
 User interface design
o UI is the front-end application to which user interact in other to use the
software
o User can manipulate and control the software and hardware by means of
user interface Eg. computers, mobile phone, cars, planes, music players
o UI design provide platform for human computer interaction
o The software becomes most popular if its UI is attractive, simple to use,
responsive in short time and clear to understand
o UI is broadly divided into two categories: command line interface and graphical
user interface
24
 User interface design
oprocess
UI is the front-end application viz to which user interact in other to use the
software
o User can manipulate and control the software and hardware by means of
user interface
o Eg: computers,

25
 The design process
Analyse and understand
Evaluate design with
user activities Executable prototype
end-users

Produce paper-based Produce dynamic design

design prototype prototype Implement final user
interface

Evaluate design with

Design prototype
end-users

26
Task analysis and Modeling

o All human tasks required to do the job(of the interface)

are defined and classified
o Objects (to be manipulated) and actions (functions
applied to objects) are identified for each task
o Tasks are refined iteratively until the job is completely
defined

27
 Interface design activities
o Establish the goals and intentions for each task
o Map each goal/ intention to a sequence of specific actions
o Specify the action sequence of tasks and subtasks, also called a user scenario, as it
will be executed at the interface level
o Indicate the state of the system, i.e. what does the interface look like at the time that
a user scenario is performed?
o Define control mecanisms, i.e. the objects and actions available to the user to alter
the system state
o Show how control mecanisms affect the state of the system
o Indicate how the user interprets the state of the system from information provided
through the interface.
28
Design evaluation cycle
Interface design is
complete
Preliminary design

Build prototype #1 User evaluation’s Build prototype #2

interface interface interface

Evaluation is studied by Design modifications are

designer made

29
 Some basic terminology of user interface
design
 Mode: a situation in which the UI restricts what the user can do
 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
 Encoding techniques: ways of encoding information so as to communicate it to the user
 Dialog: a specific window with which a user can interact, but which is not the main UI window
 Control or widget: specific components of a user interface
 Affordance: the set of operations that the user can do at any given point in time
 State: at any stage in the dialog, the system is displaying certain information in certain widgets,
and has a certain affordance.

30
Usability definition
• Usability is users’ state of effectiveness, efficiency and satisfaction about a developed system to
achieve certain goals in a certain environment
 Effectiveness: The completeness with which users achieve their goals.
 Efficiency: The competence used in using the resources to effectively achieve the goals.
 Satisfaction: The ease of the work system to its user

• Nielsen defines usability as a combination of factors (easy to learn, efficient to use,

rememberability, low error rate and satisfaction of use) which affect user’s interaction with a
product or a system

31
Usability principles 1/5
 Do not rely only on usability guidelines-always test with 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
 ensure the user does not have to navigate anywhere to do subsequent steps of a task

32
Usability principles 2/5

 Ensure that the user always knows what he or she can and should do 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
 when something goes wrong explain the situation in adequate detail and help the user
to resolve the problem

33
Usability principles 3/5

 Ensure that the user can always get out, go back or undo an action
 ensure that all operations can be undone
 ensure it is easy to navigate back to where the user came from
 Ensure the response time adequate
 users are very sensitive to slow response time
 keep response time less than a second for most operations
 warn users of longer delays and inform them of progress

34
Usability principles 4/5
 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

 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 disabilities
 ensure that the system is usable by both beginners and experts.

35
Usability principles 5/5
 Provide all necessary help
 organize help well
 integrate help with the application
 ensure that the help is accurate
 Be consistent.
 use similar layouts and graphics designs throughout your application
 follow look-and-feel standards
 consider mimicking other applications

36
Some encoding techniques 1/2
 Text and fonts
 Icons
 Photographs
 Diagrams and abstract graphics
 Colours
 Grouping and bordering

37
Some encoding techniques 2/2
 Music
 Spoken words
 Other sounds
 Animations and video
 flashing

38
Evaluating user interfaces
 Heuristic evaluation
 pick some use case to evaluate
 For each window, page or dialog that appears during the execution of the use case
study it in detail to look for possible usability defects
 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

39
Documentation
 System documentation
 User documentation

40
User documentation
 A functional description: explain what the system can do
 An installation document: how to install the system and modify it from particular hardware
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: explain 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

41
Graphical User interfaces (GUI)

 GUIs are a long way from completely relacing text/ command based systems, but are the most
common form of interface these days
 Windows, icons, pull-down menus, dialog boxes, use of mouse
 Advantages: easy to learn to use, facilitates switching between tasks (have different things going
to different windows), full screen interaction.

42
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 focus on seamlessly
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, ‘’intelligent’’ clothing,
hands-free/heads-up systems, etc.

43
Thank you for your
attention