HC

IInteractive
Design System
HUMAN COMPUTER INTERACTION

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Objectives
The objective of this part of the subject is to learn all the aspects of the design and
development of interactive systems, which are now an important part of our lives.
The design and usability of these systems have an effect on the quality of people’s
relationship with technology. Web applications, games, embedded devices, etc., are
all a part of this system, which has become an integral part of our lives. Let us now
discuss some major components of this system.

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Concept of Usability Engineering
Usability Engineering is a method in the progress of software and systems, which
includes user contribution from the inception of the process and assures the
effectiveness of the product through the use of a usability requirement and metrics.

It thus refers to the Usability Function features of the entire process of abstracting,
implementing & testing hardware and software products. Requirements gathering
stage to installation, marketing, and testing of products, all fall in this process.

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Goals of Usability Engineering
.
 Effective to use − Functional
 Efficient to use − Efficient
 Error-free in use − Safe
 Easy to use − Friendly
 Enjoyable in use − Delightful Experience

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Usability
Usability has three components − effectiveness, efficiency and satisfaction, using
which, users accomplish their goals in particular environments. Let us look in brief
about these components.
 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 users.

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Usability Study
The methodical study on the interaction between people, products, and environment
is based on experimental assessment. Examples: Psychology, Behavioral Science,
etc..
Usability Testing
The scientific evaluation of the stated usability parameters as per the user’s
requirements, competencies, prospects, safety, and satisfaction is known as usability
testing.
Acceptance Testing
Acceptance testing also known as User Acceptance Testing (UAT), is a testing
procedure that is performed by the users as a final checkpoint before signing off from
a vendor. Let us take an example of the handheld barcode scanner.
MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Software Tools
A software tool is programmatic software used to create, maintain, or otherwise
support other programs and applications. Some of the commonly used software tools
in HCI are as follows −
 Specification Methods − The methods used to specify the GUI. Even though these
are lengthy and ambiguous methods, they are easy to understand.
 Grammars − Written Instructions or Expressions that a program would understand.
They provide confirmations for completeness and correctness.
 Transition Diagram − Set of nodes and links that can be displayed in text, link
frequency, state diagram, etc. They are difficult to evaluate usability, visibility,
modularity, and synchronization.

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Software Tools
 Statecharts − Chart methods developed for simultaneous user activities and
external actions. They provide link specifications with interface-building tools.
 Interface Building Tools − Design methods that help in designing command
languages, data-entry structures, and widgets.
 Interface Mockup Tools − Tools to develop a quick sketch of GUI. E.g., Microsoft
Visio, Visual Studio .Net, etc.
 Software Engineering Tools − Extensive programming tools to provide a user
interface management system.
 Evaluation Tools − Tools to evaluate the correctness and completeness of
programs.
MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
HCI and Software Engineering
Software engineering is the study of designing, development and preservation of
software. It comes in contact with HCI to make the man and machine interaction
more vibrant and interactive.

Model in software Interactive

Waterfall System Design
Model engineering for
interactive designing

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Prototyping
Prototyping is another type of software engineering model that can have a
complete range of functionalities of the projected system.
In HCI, prototyping is a trial and partial design that helps users test design ideas
without executing a complete system.

An example of a prototype can be Sketches. Sketches of interactive design can later

be produced into a graphical interface.

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
This diagram can be considered
as a Low Fidelity Prototype as it
uses manual procedures like
sketching on paper.

A Medium Fidelity Prototype

involves some but not all
procedures of the system. E.g.,
the first screen of a GUI.

Finally, a Hi Fidelity Prototype

simulates all the functionalities
MR

of the system in a design. This

Laguna College MC Delos Reyes
prototype requires time, money
HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
User Centered Design (UCD)
The process of collecting feedback from users to improve the design is known as
user-centered design or UCD.

UCD Drawbacks
 Passive user involvement.
 User’s perception of the new interface may be inappropriate.
 Designers may ask incorrect questions to users.

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Interactive System Design Life Cycle (ISLC)
The stages in the following diagram are repeated until the
solution is reached.

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
Graphic Design and Aesthetics
Graphic User Interface (GUI) is the interface from where a user
can operate programs, applications, or devices in a computer
system. This is where the icons, menus, widgets, and labels
exist for the users to access.

Significantly, everything in the GUI is arranged in a way that is

recognizable and pleasing to the eye, which shows the
aesthetic sense of the GUI designer. GUI aesthetics provide a
character and identity to any product.

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
HCI in Indian Industries
For the past couple of years, the majority IT companies in India have been hiring
designers for HCI-related activities. Even multi-national companies started hiring for
HCI from India as Indian designers have proven their capabilities in architectural,
visual, and interaction designs. Thus, Indian HCI designers are not only making a
mark in the country but also abroad.

The profession has boomed in the last decade even when the usability has been
there forever. And since new products are developed frequently, the durability
prognosis also looks great.

As per an estimation made by usability specialists, there are a mere 1,000 experts in
MR

India. The overall requirement is around 60,000. Out of all the designers
Laguna College
working in
MC Delos Reyes
the country, HCI designers count for approximately 2.77%.
HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
HCI in Indian Industries
Analogy Illustration:

A film director is a person who with his/her experience can work on script writing,
acting, editing, and cinematography. He/She can be considered as the only person
accountable for all the creative phases of the film.

Similarly, HCI can be considered as the film director whose job is part creative and
part technical. An HCI designer has a substantial understanding of all areas of design.
The following diagram depicts the analogy −

MR

Laguna College MC Delos Reyes

HUMAN COMPUTER
INTERACTION
INTERACTIVE SYSTEM DESIGN
HCI in Indian Industries

MR

Laguna College MC Delos Reyes