INTERACTIVE

SYSTEM DESIGN
INTERACTIVE SYSTEM
DESIGN
Objectives
Learn all the aspects of The design and usability of
design and development of these systems leaves an
interactive systems, which effect on the quality of
are now an important part people’s relationship to
of our lives. technology.

Know about different web

applications, games, embedded
devices, etc., are all a part of this
system, which has become an
integral part of our lives.
INTERACTIVE SYSTEM
DESIGN

Until the 1980s almost all commercial computer

systems were non-interactive. Computer operators
would set-up the machines to read in large volumes
of data – say customers bank details and transactions
– and the computer would then process each input
and generate appropriate output.
THE PAST
INTERACTIVE SYSTEM
DESIGN
There are still lots of these systems in place but the
world is also now full of interactive computer
systems. These are systems that involve users in a
direct way. In interactive systems the user and
computer exchange information frequently and
dynamically. Norman’s evaluation/execution model
is a useful way of understanding the nature of
interaction:
THE PRESENT
INTERACTIVE SYSTEM
DESIGN

THE PRESENT

1. User has a goal (something to achieve)

2. User looks at system and attempts to work out how he would execute a
series of tasks to achieve the goal
3. User carries out some actions (providing input to the system by pressing
buttons, touching a screen, speaking words etc.)
4. System responds to the actions and presents results to the user. System can
use text, graphics, sounds, speech etc.
INTERACTIVE SYSTEM
DESIGN

THE PRESENT

5. User looks at the results of his action and attempts to evaluate whether or
not the goals have been achieved

A good interactive system is one where:

• User can easily work out how to operate the system in an attempt to achieve
his goals
• User can easily evaluate the results of his action on the system
INTERACTIVE SYSTEM
DESIGN
In his book, ‘The Invisible Computer’ Don Norman argues
the case for ‘information appliances’.
He suggests that the PC is too cumbersome and unwieldy a
tool. It has too many applications and
features to be useful. He sees the future as being one where
we use specific ‘appliances’ for specific
jobs. Norman envisions a world full of information
appliances, a world populated by interactive
computer systems:
THE FUTURE
INTERACTIVE SYSTEM
DESIGN

The Invisible Computer by Don Norman

THE HOME MEDICAL ADVISOR: DIGITAL PICTURE FRAMES:

sensors in the home will enable blood give this frame to a friend or relative.
pressure, temperature, weight, body fluids When you have taken a new picture you
and so on to be automatically monitored. A want them to share, simply ‘email’ the
computer could use these readings to assist picture direct to the frame. The frame will
with medical advice or to contact a human be connected to the net wirelessly
doctor.
INTERACTIVE SYSTEM
DESIGN

The Invisible Computer by Don Norman

THE WEATHER AND TRAFFIC EMBEDDED SYSTEMS WITHIN OUR

CLOTHES:
DISPLAY:
‘consider the value of eyeglass appliances. Many
at the moment, when we want the time we of us already wear eye glasses … why not
simply look at a clock. Soon, perhaps, supplant them with more power? Add a small
when we want to know the weather or electronic display to the glasses … and we could
have all sorts of valuable information with us at
traffic conditions we will look at a similar
all times’ [Norman 99, pg 271-272]
device.
INTERACTIVE SYSTEM
DESIGN

Many people believe we will soon enter an age of

ubiquitous computing – we will be as used
to interacting with computing systems as we are with other
people. This dream will only be fulfilled if
the businesses that produce these systems and services
clearly understand the needs of users so that
the systems can be useful and usable.
THE FUTURE
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.
INTERACTIVE SYSTEM
DESIGN
Goals of Usability Engineering

EFFICIENT FRIENDLY
Efficient to use Easy to use

1 2 3 4 5

FUNCTIONAL SAFE DELIGHTFUL

Error free in use EXPERIENCE
Effective to use
Enjoyable in use
INTERACTIVE SYSTEM
DESIGN
DotDash Bank PLC has launched a new telephone-based
banking service. Customers will be able to check balances,
order chequebooks and statements and transfer money all at
the press of a button. Users are presented with lists of choices
and they select an option by pressing the appropriate
touchtone key on their handset. The system development team
is certain that the system is technically very good – the speech
synthesis used to speak out instructions/ options is the state-
of-the-art and the database access times are very fast.
Back Story
INTERACTIVE SYSTEM
DESIGN

The new banking system described is clearly a success

from a system point of view: the designers have
thought about the technical demands of the system to
achieve, for example, high through-put of database
queries. How, though, do users feel about the system?

Back Story
INTERACTIVE SYSTEM
DESIGN
The bank’s customers have responded badly to the new
system. Firstly, users want to know why
the system does not let them allow them to hear details of
their most recent transactions, pay bills and
do other common functions. Worse still, they find the large
number of key-presses needed to find out
a piece of information tedious and irritating. Often, users
get lost in the list of choices, not sure of where
they are in the system and what to do next
Back Story
INTERACTIVE SYSTEM
DESIGN

From a human perspective the system is a real failure. It

fails because it is not as useful as it might
be and has very serious HCI problems – it fails because the
designers have not fully considered what
would be useful and usable from the customers’ point of
view.

Back Story
Usability

For an interactive system to be useful it should be goal

centered. When a person uses a computer they will have one
or more goals in mind – e.g., ‘work out my expenses for this
month’; ‘buy a book on motor mechanics’. A useful
interactive system is one that empowers users to achieve their
goals. When you build an interactive system you should make
sure you use a range of design and evaluation
methods to discover the goals and associated system
functionality that will make your system useful.
INTERACTIVE SYSTEM
DESIGN
USABILITY COMPONENTS

EFFECTIVEN EFFICIENC SATISFACTI

ESS Y ON
The completeness with The competence used The ease of the work
which users achieve in using the resources system to its users.
their goals to effectively achieve
the goals
Usability Study

The methodical study on the interaction between people, products, and

environment based on experimental assessment. Example: Psychology,
Behavioral Science, etc. A cork-screw is a tool for opening bottles
sealed with a cork. They are useful tools. However, if you are a left-
handed person most cork-screws are difficult to use. This is because
they are designed for right-handed people. So, for a left-handed person
the cork-screw has low usability (despite being useful). Usability is
about building a system that takes account of the users' capabilities and
limitations. A system that has good usability is likely to have the
following qualities:
INTERACTIVE SYSTEM
DESIGN

Usability Study

FLEXIBLE ROBUST

Users should be able to interact with a A system is robust if a user is given the
system in ways that best suit their needs. means to achieve their goals, to assess
The system should be flexible enough to their progress and to recover from any
permit a range of preferences. errors made.
Usability Study

‘Interfaces are something we do at the end of software development.

We want to make the system look nice for the end user’.
Unfortunately, many analysts and programmers might agree with the
above statement. They cannot see the point in spending time and
money on seriously considering and involving the users in design.
Instead they consider they know what is best for the user and can build
effective interfaces without using extensive user-centered methods.
However, experience has shown that badly designed interfaces can
lead to serious implications. If you build poor interfaces you might
find:
INTERACTIVE SYSTEM
DESIGN
USABILITY STUDY

Your company loses The quality of life Disastrous and

money as its of the users who possibly fatal errors
workforce is less use your system is happen in systems
productive than it reduced that are safety-
could be critical
Usability Testing

The scientific evaluation of the stated usability parameters as per the

user’s requirements, competences, prospects, safety and satisfaction is
known as usability testing. According to Interaction Design
Foundation, the main benefit and purpose of usability testing is
to identify usability problems with a design as early as possible, so
they can be fixed before the design is implemented or mass produced.
As such, usability testing is often conducted on prototypes rather than
finished products, with different levels of fidelity (i.e., detail and
finish) depending on the development phase.
Usability Testing

Prototypes tend to be more primitive, low-fidelity versions (e.g., paper

sketches) during early development, and then take the form of more
detailed, high-fidelity versions (e.g., interactive digital mock-ups)
closer to release. To run an effective usability test, you need to develop
a solid test plan, recruit participants, and then analyze and report your
findings.
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. Let us assume that a supermarket has
bought barcode scanners from a vendor. The supermarket gathers a
team of counter employees and make them test the device in a mock
store setting. By this procedure, the users would determine if the
product is acceptable for their needs. It is required that the user
acceptance testing "pass" before they receive the final product from
the vendor.
INTERACTIVE SYSTEM
DESIGN

Software Tools
A software tool is a 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 −
INTERACTIVE SYSTEM
DESIGN
SOFTWARE TOOLS

Specification Transition
Grammars
Methods Diagram
The methods used to specify the Written Instructions or Set of nodes and links that can
GUI. Even though these are Expressions that a program be displayed in text, link
lengthy and ambiguous would understand. They frequency, state diagram, etc.
methods, they are easy to provide confirmations for They are difficult in evaluating
understand completeness and correctness usability, visibility, modularity
and synchronization
INTERACTIVE SYSTEM
DESIGN
SOFTWARE TOOLS
Interface
Interface
Statecharts Building
Mockup Tools
Tools
Chart methods developed for Design methods that help in Tools to develop a quick sketch
simultaneous user activities and designing command languages, of GUI. E.g., Microsoft Visio,
external actions. They provide data entry structures, and Visual Studio, .Net, etc.
link-specification with interface widgets
building tools
INTERACTIVE SYSTEM
DESIGN
SOFTWARE TOOLS
Software
Evaluation
Engineering
Tools
Tools
Extensive programming tools to Tools to evaluate the
provide user interface correctness and completeness
management system. of programs
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.
Let us see the following model in software engineering for
interactive designing.
The Waterfall Method

The Waterfall model is the earliest SDLC approach that was used for
software development. The waterfall Model illustrates the software
development process in a linear sequential flow. This means that
any phase in the development process begins only if the previous
phase is complete. In this waterfall model, the phases do not overlap.
Waterfall approach was first SDLC Model to be used widely in
Software Engineering to ensure success of the project. In "The
Waterfall" approach, the whole process of software development is
divided into separate phases. In this Waterfall model, typically, the
outcome of one phase acts as the input for the next phase sequentially.
The Waterfall Method
INTERACTIVE SYSTEM
DESIGN
The Waterfall Method Sequential Phases
Requirement
System Implementatio
Gathering and
analysis Design n
The requirement specifications With inputs from the system
All possible requirements of the from first phase are studied in this design, the system is first
system to be developed are phase and the system design is developed in small programs called
captured in this phase and prepared. This system design helps units, which are integrated in the
documented in a requirement in specifying hardware and system next phase. Each unit is developed
specification document. requirements and helps in defining and tested for its functionality,
the overall system architecture. which is referred to as Unit
Testing.
INTERACTIVE SYSTEM
DESIGN
The Waterfall Method Sequential Phases

Integration Deployment
and Testing of system Maintenance
There are some issues which come
All the units developed in the Once the functional and non-
up in the client environment. To fix
implementation phase are functional testing is done; the
those issues, patches are released.
integrated into a system after product is deployed in the Also to enhance the product some
testing of each unit. Post customer environment or better versions are released.
integration the entire system is released into the market. Maintenance is done to deliver
tested for any faults and these changes in the customer
failures. environment.
INTERACTIVE SYSTEM
DESIGN

The uni-directional movement of the waterfall model of Software

Engineering shows that every phase depends on the preceding phase
and not vice-versa. However, this model is not suitable for
the interactive system design. The interactive system design shows that
every phase depends on each other to serve the
purpose of designing and product creation. It is a continuous process
as there is so much to know and users keep changing all the time. An
interactive system designer should recognize this diversity.
INTERACTIVE SYSTEM
DESIGN
Prototyping

Prototyping is another type of software engineering models that can have a

complete range of functionalities of the projected system. In HCI,
prototyping is a trial and partial design that helps users in testing design
ideas without executing a complete system. Example of a prototype can be
Sketches. Sketches of interactive design can later be produced into
graphical interface. See the following diagram. The following diagram can
be considered as a Low Fidelity Prototype as it uses manual procedures
like sketching in a paper. A Medium Fidelity Prototype involves some but
not all procedures of the system. E.g., first screen of a GUI. Finally, a Hi
Fidelity Prototype simulates all the functionalities of the system in a
design. This prototype requires, time, money and work force.
Prototyping
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 about the new interface may be
inappropriate
• Designers may ask incorrect questions to users
Interactive System Design Life Cycle
(ISLC)

The stages in the following diagram are repeated until the solution is reached
GUI Design & 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, labels exist for the users to access.
It is significant that 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 provides a character and identity
to any product.