Human Computer Interaction

Dr. Mohammed Zidan

 Module 1: Introduction to HCI
 Topic 1: HCI definition and fields
 Topic 2: History of HCI
 Topic 3: HCI for software design
 Module 2: Human perception
 Topic 1: physiology of eye
 Topic 2: physiology of auditory
 Topic 3: Kinesthetic perception
 Module 3: Graphical User Interface
 Topic 1: Interface design
 Topic 2: Usability design
 Topic 3: Input devices and functions
 Module 4: Human health and HCI

 Topic 1: Radiation and technology effects

 Topic 2: Light and sound hazards

 Topic 3: Precautions and safe use procedures

Motivation
• How many interactive products are there in everyday use?
– Computers
– Cell phones
– ATMs
– Coffee machines
– Photocopier
– …

4
Motivation
• Many products that require users to interact with them to carry
out their tasks (e.g., buying a ticket online from the web,
photocopying an article, pre-recording a TV program) have not
necessarily been designed with the users in mind.
• Typically, they have been engineered as systems to perform
set functions.
• While they may work effectively from an engineering
perspective, it is often at the expense of how the system will be
used by real people.
HCI History
• Human-computer interaction (HCI) is an area of research and practice that
emerged in the early 1980s, initially as a specialty area in computer
science embracing cognitive science and human factors engineering.

• until the late 1970s, the only humans who interacted with computers were
information technology professionals and dedicated hobbyists. This
changed disruptively with the emergence of personal computing in the
later 1970s. Personal computing, including both personal software
(productivity applications, such as text editors and spreadsheets, and
interactive computer games) and personal computer platforms (operating
systems, programming languages, and hardware), made everyone in the
world a potential computer user, and vividly highlighted the deficiencies of
computers with respect to usability for those who wanted to use computers
as tools.
 HCI History
• Other historically fortuitous developments contributed to the establishment of
HCI. Software engineering, mired in unmanageable software complexity in
the 1970s (the “software crisis”), was starting to focus on nonfunctional
requirements, including usability and maintainability, and on empirical
software development processes that relied heavily on iterative prototyping
and empirical testing. Computer graphics and information retrieval had
emerged in the 1970s, and rapidly came to recognize that interactive systems
were the key to progressing beyond early achievements.
• All these threads of development in computer science pointed to the same
conclusion: The way forward for computing entailed understanding and better
empowering users. These diverse forces of need and opportunity converged
around 1980, focusing a huge burst of human energy, and creating a highly
visible interdisciplinary project.
Good and poor design
• Imagine the following scenario.
• You're staying at a hotel for a week while on a business trip. You
discover you have left your cell (mobile) phone at home so you have
to rely on the hotel's facilities.
• The hotel has a voice-mail system for each room.
• To find out if you have a message, you pick up the handset and listen
to the tone.
• If it goes "beep beep beep" there is a message.
• To find out how to access the message you have to read a set of
instructions next to the phone.
Good and poor design
• You read and follow the first step:
1. Touch 491". The system responds, "You have reached the Sunny Hotel voice message
center.
Please enter the room number for which you would like to leave a message.
 You wait to hear how to listen to a recorded message. But there are no further instructions from the
phone. You look down at the instruction sheet again and read:
2. Touch*, your room number, and #".
 You do so and the system replies, "You have reached the mailbox for room 106.
 To leave a message type in your password.
 " You type in the room number again and the system replies,
 "Please enter room number again and then your password.―
 You don't know what your password is.
 You thought it was the same as your room number.
 But clearly not. At this point you give up and call reception for help.
 The person at the desk explains the correct procedure for recording and listening to messages.
– This involves typing in, at the appropriate times, the room number and the extension number of the
phone (the latter is your password, which is different from the room number).
– Moreover, it takes six steps to access a message and five steps to leave a message. You go out and
buy a new cell phone.
Good and poor design
• What is problematic with this voice-mail system?
• It is infuriating.
• It is confusing.
• It is inefficient, requiring you to carry out a number of steps for basic
tasks.
• It is difficult to use.
• It has no means of letting you know at a glance whether any
messages have been left or how many there are.
• You have to pick up the handset to find out and then go through a
series of steps to listen to them.
• It is not obvious what to do: the instructions are provided partially by
the system and partially by a card beside the phone.
 Good and poor design
• Consider the design of an answering machine system.
What about this one?

– The marble answering machine was designed by Durrell Bishop while a student at the
Royal College of Art in London (described by Crampton-Smith, 1995).

– Why it might be better than other designs?

• It uses familiar physical objects that indicate visually at a glance how many messages have been left.
• It is aesthetically pleasing and enjoyable to use.
• It only requires one-step actions to perform core tasks.
• It is a simple but elegant design.
• It offers less functionality and allows anyone to listen to any of the messages.

11
Good and poor design
• This is an example of an interactive product designed with the users in mind.
• The focus is on providing them with an enjoyable experience but one that also
makes efficient the activity of receiving messages.
• However, it is important to note that although the marble answering machine is a
very elegant and usable design, it would not be practical in a hotel setting.
• One of the main reasons is that it is not robust enough to be used in public
places, for example, the marbles could easily get lost or taken as souvenirs.
• Also, the need to identify the user before allowing the messages to be played is
essential in a hotel setting.
• When considering the usability of a design, therefore, it is important to take into
account where it is going to be used and who is going to use it.
• The marble answering machine would be more suited in a home setting-provided
there were no children who might be tempted to play with the marbles!
Motivation (2)
• The goal of this course is to teach you how to design computer systems that are:
– Easy
– Effective
– Enjoyable to use
• The focus here is to design the system with the user in mind.
– Not only from an engineering perspective

13
HCI
• HCI is the field concerned with the design, development, and evaluation of
interactive computing systems for human use.

• HCI is the study of how humans interact with computers and their applications.

• HCI looks at the design of computer systems in which humans and computers
need to work together and tells us how to build user interfaces that are safe,
efficient, easy and enjoyable to use (as well as functional).

14
HCI
• Human–computer interaction is situated at the intersection
of computer science, behavioral sciences, design, media studies,
and several other fields.
• Humans interact with computers in many ways; the interface between
humans and computers is crucial to facilitate this interaction.

15
Why HCI?
• The command line interface versus the graphical user
interface

16
HCI
• HCI is the field concerned with the design, development, and evaluation of
interactive computing systems for human use.

• HCI is the study of how humans interact with computers and their applications.

• HCI looks at the design of computer systems in which humans and computers
need to work together and tells us how to build user interfaces that are safe,
efficient, easy and enjoyable to use (as well as functional).

17
HCI is Interdisciplinary
• HCI draws on ideas from many subjects:
– Computer Science
– Engineering and Industrial Design
– Psychology and cognitive science
– Graphic Design
Interaction Design (ID)
• ID is defined as designing interactive products to support the way people
communicate and interact in their everyday and working lives.
• The main difference between ID and HCI.
– HCI is narrower in scope as it is only concerned with the design of computing
systems.
– HCI concerned with the design, evaluation and implementation of interactive
computing systems for human use and with the study of major phenomena
surrounding them‖
– ID is broader as it is concerned with research, and practice of designing user
experiences for any interactive system or product.

19
Goals of interaction design
• Develop usable products
– Usability means easy to learn, effective to use and provide an
enjoyable experience

• Involve users in the design process

Copyright © 2014 Pearson Education, Inc.

Example of bad design
– Elevator controls and labels on the bottom row all look the same, so it
is easy to push a label by mistake instead of a control button
User Experience (UX)
• User experience (UX) design is the process design teams use to create products that provide
meaningful and relevant experiences to users.
• This involves the design of the entire process of acquiring and integrating the product, including
aspects of branding, design, usability and function.
What UX Designers do goes Beyond UI Design
• ―User Experience Design‖ is often used interchangeably with terms such as ―User Interface Design‖
and ―Usability‖.
• However, while usability and user interface (UI) design are important aspects of UX design, they
are subsets of it – UX design covers a vast array of other areas, too.
• A UX designer is concerned with the entire process of acquiring and integrating a product, including
aspects of branding, design, usability and function.
• It is a story that begins before the device is even in the user’s hands.

22
User Experience (UX)
• ―No product is an island. A product is more than the product. It is a cohesive,
integrated set of experiences.
• Think through all of the stages of a product or service – from initial intentions
through final reflections, from first usage to help, service, and maintenance. Make
them all work together seamlessly.‖
• Products that provide great user experience (e.g., the iPhone) are thus designed
with not only the product’s consumption or use in mind but also the entire process
of acquiring, owning and even troubleshooting it.
• Similarly, UX designers don’t just focus on creating products that are usable; we
concentrate on other aspects of the user experience, such as pleasure, efficiency
and fun, too.
• Consequently, there is no single definition of a good user experience. Instead, a
good user experience is one that meets a particular user’s needs in the specific
context where he or she uses the product.
23
User Experience (UX)
• Every product that is used by someone
has a UX.
– How people feel about a product and
their pleasure and satisfaction when
using it.
• Interaction design is concerned with
designing for a better user experience.
– Unlike systems analysis or software
engineering.

24
User Experience (UX)

UX Designers consider the Why, What and How of Product Use

• a UX designer, you should consider the Why, What and How of product use.
• The Why involves the users’ motivations for adopting a product, whether they
relate to a task they wish to perform with it or to values and views which users
associate with the ownership and use of the product.
• The What addresses the things people can do with a product—its functionality.
• Finally, the How relates to the design of functionality in an accessible and
aesthetically pleasant way.
• UX designers start with the Why before determining the What and then, finally, the
How in order to create products that users can form meaningful experiences with.

25
User Experience (UX)

26
User experience goals
– Satisfying - rewarding
– Fun - support creativity
– Enjoyable - emotionally fulfilling
– Entertaining …and more
– Helpful
– Motivating
– Aesthetically pleasing
The User Interface (UI)
• A user interacts with a computer
system via the user interface (UI).
• The user interface constitutes that
part of the computer system
through which the user
communicates commands, and
receives data for interaction with
a computer system.
• The UI of different types of
computer systems are different
because the ways in which we
interact with them are different
and the tasks we wish to achieve
using them vary.
28