Chapter Five

Interaction Design and HCI in the

Software Process

1 04/30/24
 Contents
 design:
 interaction design
 Constraints of software design process
users
o who they are, what they are like …
scenarios
o rich stories of design
navigation
o finding your way around a system
Screen design and layout
HCI in Software Design Process
 iteration and prototypes
never get it right first time!

2 04/30/24
 what is design & interaction design?
 Design: means plan, structure or model of the product or how
your model looks in the future
achieving goals within constraints
 Interaction design: means to design interactive system and its
services
 Focuses on meaningful communication of media b/n people
and technology.
 Designer must focus on how users interact with systems?, what
services are required?, & supported environments for system
design.

3 04/30/24
 Needs of interaction design
1. Goal: before start the design ask yourself
What is the purpose of the design?

Who is going to use this design?

What is expected from design?

Why design is required?

2. Constraints: What material going to be used?

What standards going to implemented?

What can be the cost?

How much time required for develop?

4 Is there any safety and health issue ? 04/30/24

 Needs of interaction design…
3.Trade off:
balance between goals and constraints

Depends on choice of users

5 04/30/24
 Golden rule of design
understand materials
 we must understand the fundamental materials of
human–computer interaction in order to design.
1. understand computers – limitations, capacities, tools,
platforms
2. understand people – psychological, social aspects,
human error and emotions, work area
3. and their interaction…

6 04/30/24
 Goals of interaction design

Develop usable products

oUsability means easy to learn, effective to use and provide

an enjoyable experience.

7 04/30/24
 Interaction design process

scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
8 04/30/24
 Steps …
 requirements
 what is there and what is wanted …
 analysis
 ordering and understanding
 design
 what to do and how to decide
 iteration and prototyping
 getting it right … and finding what is really needed!
 implementation and deployment
 making it and getting it out there

9 04/30/24
 Constraints of software design process

1. User Focus: know your user, personae, cultural

probes
2. Scenarios: stories for design, use and reuse
3. Navigation Design: local structure – single
screen
global structure – whole site
4.
10
Screen Design & Layout: 04/30/24
 Constraints of software design process…
1. User Focus:
The start of any interaction design exercise must be the intended user

or users.
Participation of real users it design process improve quality of

product and produce better design.

11 04/30/24
 Users Focus: know your user
 who are they?: qualification, experience, age,
computer user or not and work area.
 probably not like you!: develop Software as per user
requirement not as per your need.
 talk to them: structured interviews about their job or
life, technical and social discussion etc.
 watch them: watch what people do? There
difficulties, spend working hours.
 use your imagination: every time it’s not possible to
involve real users in design process then try to
imagine their experiences.

12 04/30/24
 Some terms of users focus
 Persona:
 is user focusing design process.
 it is the example of imaging a user not a real user
 it use surrogate users and make them real
 Cultural probes:
 gathering inspirational data about people, life, values
and thoughts.
 Direct observation
 the probes are small packages that include maps,
camera, photos, diaries, stories etc.
 It stores meaningful and ethical information

13 04/30/24
 ….
2. Scenarios
Scenarios are stories for design: rich stories of interaction/
description of the system design.
Simplest design representation.
User scenarios are described in details user action and goals of
product design.

14 04/30/24
 ….
why Scenarios?
1. communicate with others: other designers, clients or
users.
2. validate other models: ‘play’ it against other models.
such as Task Models, Dialog Models, and Navigation
Models.
3. understand dynamics: individual screen shots and
pictures give you a sense of what a system would look like
4. Reusability: Scenarios are reused for designing other
interactive system.
5. Implementation phase: Scenarios check implementation
work and generate test case for final evaluation of design.
15 04/30/24
 ….
3. Navigation Design
Navigation is the process of navigating a system, applications or
websites using dialog box, widgets, hypertexts or hypermedia's etc.
Constraints of Navigation design
Widgets: The appropriate choice of widgets and wording in menus
and buttons will help you know how to use them for a particular
selection or action.
Screens or windows: You need to find things on the screen,
understand the logical grouping of buttons
Navigation within the application: You need to be able to
understand what will happen when a button is pressed, to understand
where you are in the interaction.
Environment: The word processor has to read documents from
disk, perhaps some are on remote networks. You swap between
applications,
16 perhaps cut and paste. Using other apps. 04/30/24
 ….
4. Screen design and layout
Play important role in HCI field
Screen design develop using different techniques such as CRT, LED
and Touch screen etc.
Basic principles
Ask: what is the user doing?
Think: what information, comparisons, order
Design: form follows function

17 04/30/24
 ….
4. Screen design and layout…
Screen Design Layout:
1.Grouping and structure
2.Order of groups and items
3.Decoration fonts, boxes, colors etc.
4.Alignment of items
5.White Space b/n items

18 04/30/24
 grouping and structure
logically together  physically together

Billing details: Delivery details:

Name Name
Address: … Address: …
Credit card no Delivery time

Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …

19 04/30/24
 order of groups and items
should match screen order!

Billing details: Delivery details:

Name Name
Address: … Address: …
Credit card no Delivery time

Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …

20 04/30/24
 decoration
use boxes to group logical items
font style, and text or background colors

ABCDEFHIJKLM
NOPQRSTUVWXYZ

21 04/30/24
 Alignments
Read text from left to right
Texts normally aligned to the left
Numbers normally aligned to the right(for integer)
or decimal points

22 04/30/24
 White spaces
Helps to separate paragraphs of texts, graphics and
other portions of a document

23 04/30/24
 HCI in Software Design Process
 the software lifecycle
 Software engineering is a process/discipline that address the
management and technical issues of the development of software
systems
 Software life cycle describes the activities that takes place from
initial concept formation for a software system up until its final
phasing out and replacement.
 Software engineering is the discipline for understanding the software
design process, or life cycle

HCI is use in software process to interact product with user and

give them a simple and comfortable interface.

24 04/30/24
 The waterfall model

25 04/30/24
 Activities in the life cycle
Requirements specification
designer and customer try capture what the system is expected to provide can be
expressed in natural language or more precise languages, such as a task analysis
would provide
Architectural design
high-level description of how the system will provide the services
how they are interrelated needs to satisfy both functional/customer requirement
and non-functional requirements/efficiency, reliability, timing and safety...

Detailed Design
helps to defining the overall system architecture
ER Models, DFD, Activity Diagram, Use Case Diagram and Flowchart
Diagram.

Coding and Unit Testing

coding implemented in different computer programing language
each unit is developed and tested for its functionality, which is referred to as
Unit
26 Testing. 04/30/24
 Activities in the life cycle
Integration and Testing
All the units developed in the implementation phase are integrated into a system after testing
of each units.
Operation and Maintenance

lots of feedback!

Representing iteration in the waterfall model

27 04/30/24
 Prototyping
It is a draft version of a product that allows you to explore
your ideas and show the intention behind a feature or the
overall design concept to users before investing time and
money into development.
Is the concrete representation of all interactive system
Is tangible artifact or model, not a detail description of
project
you never get it right first time
OK?
if at first you don’t succeed …
design prototype evaluate done!

re-design
28 04/30/24
 End of the chapter

29 04/30/24