CHAPTER TWO

Interaction Design
 Interactive System Design
The objective of this chapter is :-
• To learn all the aspects of design
• Development of interactive systems, which are now an important part of our lives.
• The design and usability of these systems leaves an effect on the quality of people’s relationship
to technology.
• Web applications, games, embedded devices, etc., are all a part of this system, which has become
an integral part of our lives.
What is Interactive Design?
Interactive design can be interpreted into two ways.
• First, the design of the item was performed in an interactive fashion.
• This means that an initial design was created, and then evaluated. The
evaluation results in the discovery of issues.
• These issues are analyzed, and a set of changes are made.
• This new design is evaluated, and so on. Each step moves you closer to a final
result in an iterative fashion.
• Second, the design of the item is meant to facilitate interactive use of the item.
The 5 dimensions of interaction design
• The 5 dimensions of interaction design(1) is a useful model to understand what interaction
design.
1D: Words
• Words—especially those used in interactions, like button labels—should be meaningful and
simple to understand.
• They should communicate information to users, but not too much information to overwhelm
the user.
2D: Visual representations
• This concerns graphical elements like images, typography and icons that users interact with.
• These usually supplement the words used to communicate information to users
Cont…
3D: Physical objects or space
• Through what physical objects do users interact with the product?
• A laptop, with a mouse or touchpad? Or a smartphone, with the user’s fingers? And within what
kind of physical space does the user do so?
• For instance, is the user standing in a crowded train while using the app on a smartphone, or sitting
on a desk in the office surfing the website?
• These all affect the interaction between the user and the product.
Cont…

4D: Time
• It mostly refers to media that changes with time (animation, videos, sounds).
• Motion and sounds play a crucial role in giving visual and audio feedback to
users’ interactions.
• Also of concern is the amount of time a user spends interacting with the product:
can users track their progress, or resume their interaction some time later?
5D: Behavior
• How do users perform actions on the website? How do users operate the product?
In other words, it’s how the previous dimensions define the interactions of a
product.
• It also includes the reactions—for instance emotional responses or feedback—of
users and the product.
Ten principles for evaluating interacting system designing .

• Visibility of system status.

• Match between system and real world.
• User control and freedom.
• Consistency and standards.
• Error prevention.
• Recognition rather than Recall.
• Flexibility and efficiency of use.
• Aesthetic and minimalist design.
• Help, diagnosis and recovery from errors.
• Documentation and Help
Interface Design Guidelines

General Interaction
• Be consistent.
• Offer significant feedback.
• Ask for authentication of any non-trivial critical action.
• Authorize easy reversal of most actions.
• Lessen the amount of information that must be remembered in between actions.
• Seek competence in dialogue, motion and thought.
• Excuse mistakes.
• Classify activities by function and establish screen geography accordingly.
• Deliver help services that are context sensitive.
• Use simple action verbs or short verb phrases to name commands
Information Display

• Exhibit only that information that is applicable to the present context.

• Don't burden the user with data, use a presentation layout that allows rapid integration of
information.
• Use standard labels, standard abbreviations and probable colors.
• Permit the user to maintain visual context.
• Generate meaningful error messages.
• Use upper and lower case, indentation and text grouping to aid in understanding.
• Use windows (if available) to classify different types of information.
• Use analog displays to characterize information that is more easily integrated with this
form of representation.
• Consider the available geography of the display screen and use it efficiently.
Data Entry
The following guidelines focus on data entry that is another important aspect of HCI −
• Reduce the number of input actions required of the user.
• Uphold steadiness between information display and data input.
• Let the user customize the input.
• Interaction should be flexible but also tuned to the user's favored mode of input.
• Disable commands that are unsuitable in the context of current actions.
• Allow the user to control the interactive flow.
• Offer help to assist with all input actions.
• Remove "mickey mouse" input.
 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.
• 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.
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
Usability

Usability has three 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.
Usability Study

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.
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.
 Software Tools use for interaction

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 −
• 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 in evaluating usability, visibility, modularity and synchronization.
• State charts − Chart methods developed for simultaneous user activities and external actions.
They provide link-specification with interface building tools.
 Cont…

• 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 user interface
management system.
• Evaluation Tools − Tools to evaluate the correctness and completeness 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.
 The Waterfall Method
Let us see the following model in software engineering for interactive designing.
Interactive System Design
Cont…

• The uni-directional movement of the waterfall model of Software Engineering shows that every
phase depends on the preceding phase and not vice-versa.
• 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.
 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.
Cont…

• The above 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.
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)
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.
HCI Analogy

• 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 have substantial understanding of all areas of designing. T
• He following diagram depicts the analogy −
Cont…
 Interactive devices
Several interactive devices are used for the human computer interaction. Some of them are known
tools.
Touch Screen
• The touch screen concept was prophesized decades ago, however the platform was
acquired recently.
• Today there are many devices that use touch screen. After vigilant selection of these
devices, developers customize their touch screen experiences.
• The cheapest and relatively easy way of manufacturing touch screens are the ones using
electrodes and a voltage association.
• Other than the hardware differences, software alone can bring major differences from one
touch device to another, even when the same hardware is used.
Gesture Recognition
• Gesture recognition is a subject in language technology that has the objective of
understanding human movement via mathematical procedures.
• Hand gesture recognition is currently the field of focus. This technology is future based.
• This new technology magnitudes an advanced association between human and computer
where no mechanical devices are used.
• This new interactive device might terminate the old devices like keyboards and is also heavy
on new devices like touch screens.
Speech Recognition
• The technology of transcribing spoken phrases into written text is Speech Recognition.
• Such technologies can be used in advanced control of many devices such as switching on and
off the electrical appliances.
• Only certain commands are required to be recognized for a complete transcription. However,
this cannot be beneficial for big vocabularies.
• This HCI device help the user in hands free movement and keep the instruction based
technology up to date with the users.
Keyboard

• A keyboard can be considered as a primitive device known to all of us today.

• Keyboard uses an organization of keys/buttons that serves as a mechanical device for a computer.
• Each key in a keyboard corresponds to a single written symbol or character.
• This is the most effective and ancient interactive device between man and machine that has given
ideas to develop many more interactive devices as well as has made advancements in itself such
as soft screen keyboards for computers and mobile phones.
 Response Time
• Response time is the time taken by a device to respond to a request. The request can be
anything from a database query to loading a web page.
• The response time is the sum of the service time and wait time.
• Transmission time becomes a part of the response time when the response has to travel
over a network.
• In modern HCI devices, there are several applications installed and most of them
function simultaneously or as per the user’s usage.
• This makes a busier response time. All of that increase in the response time is caused by
increase in the wait time.
• The wait time is due to the running of the requests and the queue of requests following
it.
• So, it is significant that the response time of a device is faster for which advanced
processors are used in modern devices.