Software Engineering Approaches To: Human Computer Interaction

Software Engineering Approaches
to
Human Computer Interaction
Chapter 3
Jan 2021 By Yididya Kedir 1

Outline
• Chapter Three: Human Centered Software Development

• Comparison of HCSD with Traditional Software Development
• Life-Cycle Process Models
• Why Learn about Process Now?
• Prototyping Tools and Techniques
• Paper Prototyping
• Class Activity
Comparison of HCSD with Traditional
Software Development
Traditional Software Development Human Centered Development
Technology/developer driven User-driven
Component focus Solution focus
Individual contribution Multidisciplinary team work including users,
customers, human factor experts
Focus on internal architecture Focus on external attributes (look and feel, interaction)
Quality measured by product defects and performance Quality defined by user satisfaction and performance
(system quality) (quality in use)
Implementation prior to human validation Implementation of user-validated solution only
Solutions are directed by functional requirements Understanding the context of use (user, task, work
environment)

Life-Cycle Process Models
• Software Development Life Cycle (SDLC) in software engineering, is

the process of creating or altering systems, and the models and
methodologies that people use to develop these systems.
• Process means the events or tasks a development organization does,

and their sequence. Organizations want a well-defined, well-
understood, repeatable software development process.

• So, find and repeat good practices since:

• Management: know what to do next; know when we’re done with
current task; know if we’re late; estimate time to completion,
costs; Etc.
• New team-members know what to do.

• You can think of SDLC models as tools that you can use to better
deliver your software project.
• Therefore, knowing and understanding each model and when to use

it, the advantages and disadvantages of each one is important to
know which one is suitable for the project context.

• There are various models for software development life cycle:

• Waterfall Model
• V-Shaped Model
• Evolutionary Prototyping Model
• Spiral Method (SDM)
• Iterative and Incremental Method
• Agile development
Reading Assignment
• Read the above SDLC models, their advantages and disadvantages.
For further reading:
•
https://melsatar.blog/2012/03/15/software-development-life-cycle-models-a
nd-methodologies/

Human Centered Software Development Life
Cycle
• The collaboration between SDLC and HCI perspective is needed to
ensure the system development is a success.
• However, current SDLC concerns too much on organizational needs
(functionalist) rather than human needs (physical and cognitive
capabilities, emotional needs, personality traits and situational
factors).
• The human need has been much less considered in SDLC.
• Thus, often transpired a gap between satisfying organizational needs
and achieving human needs.
Human Centered Software Development Life
Cycle
• To accommodate the human-centered approach, a new SDLC called
Human-Centered Software Development Life Cycle (HCSDLC) is
proposed.
• The next figure illustrates the prominent framework of HCSDLC.
• There are four phases to be considered, namely project selection and

planning, analysis, design, and implementation.
Why Learn about Process Now?
• In many human-computer interaction (HCI) literatures, it has been
recommended that user’s involvement and HCI consideration in the software
development life cycle (SDLC) as an important mechanism for a successful
system implementation.
• The importance of HCI in the system development methodology cannot be
denied and the ignorance on users’ involvement issue in system development
methodology will later cause problems to the users in using the system.
• Negative emotional state, particularly frustration of the software will affect
workplace productivity, social relationship and overall well-being.

Prototyping Tools and Techniques
• Prototyping is an important technique to reduce the cost and risk involved

in developing complex software systems.
• It essentially involves building a small-scale version of a complex system in

order to acquire critical knowledge required to build the system.
• Even though prototyping involves building only a small-scale version of a

system, significant costs and risks are still involved.

“If a picture is worth a thousand words, then
a prototype is worth a thousand meetings.”
– Saying at IDEO

• The prototyping process takes time, involves many people, and if

incorrect or incomplete knowledge is gathered it can lead project
managers, system builders and end-users to make false assumptions
about important characteristics of a system, setting up the stage for a
project failure

• We view prototyping as an information gathering process, so we will
compare the tools and techniques according to two criteria.
1. A measure of the completeness and variety of the information
that a tool or technique can help acquire, given that several
different kinds of information are needed to design and build a
good user interface.
2. The ability of the tools to expedite the information gathering
process in order to minimize the cost of the prototyping process
and to maximize its effectiveness

Advantages of Prototyping
• Users are actively involved in development. Therefore, errors can be
detected in the initial stage of the software development process.
• Missing functionality can be identified, which helps to reduce the risk
of failure as Prototyping is also considered as a risk reduction activity.
• Helps team member to communicate effectively
• Customer satisfaction exists because the customer can feel the
product at a very early stage.
• There will be hardly any chance of software rejection.

• Quicker user feedback helps you to achieve better software
development solutions.
• Allows the client to compare if the software code matches the
software specification.
• It helps you to find out the missing functionality in the system.
• It also identifies the complex or difficult functions.
• Encourages innovation and flexible designing.
• It is a straightforward model, so it is easy to understand.

• No need for specialized experts to build the model
• The prototype serves as a basis for deriving a system specification.
• The prototype helps to gain a better understanding of the customer's
needs.
• Prototypes can be changed and even discarded.
• A prototype also serves as the basis for operational specifications.
• Prototypes may offer early training for future users of the software
system.

Disadvantages of Prototyping
• Prototyping is a slow and time taking process.
• The cost of developing a prototype is a total waste as the prototype is
ultimately thrown away.
• Prototyping may encourage excessive change requests.
• Sometimes customers may not be willing to participate in the
iteration cycle for the longer time duration.
• There may be far too many variations in software requirements when
each time the prototype is evaluated by the customer.

Disadvantages of Prototyping
• Poor documentation because the requirements of the customers are changing.
• It is very difficult for software developers to accommodate all the changes
demanded by the clients.
• After seeing an early prototype model, the customers may think that the actual
product will be delivered to him soon.
• The client may lose interest in the final product when he or she is not happy
with the initial prototype.
• Developers who want to build prototypes quickly may end up building sub-
standard development solutions.
Products of the Prototyping Process
• The main purpose of a prototype is to allow developers to acquire the
information needed to successfully build a system.
• We first review the kinds of information needed to develop a successful
interface, and then we will compare prototyping tools and techniques in
terms of their ability to maximize the effective.
• To build a successful interface, developers need to acquire several kinds of
information about the system to be built.
• The information ranges from an analysis of the tasks that users are expected
to perform with the system, to detailed descriptions of the look and feel of
the system.
Products of the Prototyping Process
• The required information falls into the following:
• Task specification
• System functionality
• Interface functionality
• Screen layouts and behavior
• Design rationale
• User feedback
• Response times
• Reusable code
Requirements for Prototyping Tools
• Set of requirements for prototyping tools in order to make the process of
gathering such information effective and cheap.
• Ease of use
• Fast turn-around
• Extensive control over prototype features
• Data collection capabilities
• Executable prototypes
• Lifecycle support
• Team design
• Version control
Types of Prototyping
• Four types of Prototyping are:
1. Rapid Throwaway prototypes

2. Evolutionary prototype
3. Incremental prototype
4. Extreme prototype

Rapid Throwaway prototypes
• Rapid throwaway is based on the preliminary requirement. It is
quickly developed to show how the requirement will look visually. The
customer's feedback helps drives changes to the requirement, and
the prototype is again created until the requirement is baselined.
• In this method, a developed prototype will be discarded and will not
be a part of the ultimately accepted prototype. This technique is
useful for exploring ideas and getting instant feedback for customer
requirements.

Evolutionary prototype
• Here, the prototype developed is incrementally refined based on
customer's feedback until it is finally accepted.
• It helps you to save time as well as effort. That's because developing a
prototype from scratch for every interaction of the process can
sometimes be very frustrating.
• This model is helpful for a project which uses a new technology that is
not well understood. It is also used for a complex project where every
functionality must be checked once. It is helpful when the
requirement is not stable or not understood clearly at the initial stage.

Incremental prototype
• In incremental Prototyping, the final product is decimated into

different small prototypes and developed individually.
• Eventually, the different prototypes are merged into a single product.
• This method is helpful to reduce the feedback time between the user
and the application development team.

Extreme prototype
• Extreme prototyping method is mostly used for web development. It
consists of three sequential phases.
1. Basic prototype with all the existing page is present in the HTML
format.
2. You can simulate data process using a prototype services layer.
3. The services are implemented and integrated into the final
prototype

Prototyping tools and techniques
• The essence of user interface prototyping is to construct a small-scale

version of an interactive system to collect information to guide its
construction.
• Interface prototypes can be built with a large variety of tools, ranging

from paper and pencil to draw mockups (models) of displays to
sophisticated interface construction toolkits.

Prototyping tools and techniques
• In this section we describe different categories of tools that can be used to prototype
interfaces, highlighting their special strengths and weaknesses. These are:
• Paper and Pencil
• Facade Tools
• Interface Builders
• Model-Based Tools
• Domain-Specific Tools

Paper and Pencil
• Paper and pencil are perhaps the most popular tools one uses to
describe interface designs to others.
• Paper and pencil are prototyping tools with many strengths.
• They are easy to use.
• Paper and pencil allow extensive control over details of the design.

Paper and Pencil
• Paper and pencil also encourage team design because many people
can draw at the same time, especially when drawing on blackboards
and large sheets of paper.
• Paper and pencil are also very useful for capturing different kinds of
information, because whatever is not captured in the drawings can
easily be expressed with textual annotations.
• The main weaknesses of the paper and pencil technique is that it is
very awkward to capture behavior and that the interface prototypes
are not executable.

Facade Tools
• Facade tools are essentially drawing editors with an ability to specify input
behavior.
• We call them facade tools because they allow developers to construct
screens that look and behave like the screens of the real application, except
that there is no "application" behind them.
• The screens display canned data, and the behaviors either switch to
another canned screen, or update the screen with a new set of canned
data.
• Tools in this category differ mostly in the quality of the drawings (e.g. 3D
shapes), and the sophistication of the input behaviors that can be specified.

Interface Builders
• Interface builders, unlike facade tools, are interface construction tools
rather than interface prototyping tools.
• Their main strength is that, like facade tools, they give interface
developers a drawing-like interface to specify the interface, but,
unlike facade tools, generate executable code that can be linked in
into an application to produce an industrial strength implementation.
• While facade tools provide a special scripting language to specify
behavior, interface builders use a general-purpose programming
language such as C or C++ to specify behavior, the same language that
is often used to implement the application functionality.

Model-Based Tools
• Model-based interface development is a new paradigm for developing
interfaces.
• The model-based paradigm uses a central database to store a
description of all aspects of an interface design.
• This central description is called a model, and typically contains
information about the tasks that users are expected to perform using
the application, the data of the application, the commands that users
can perform, the presentation and behavior of the interface, and the
characteristics of users.
Domain-Specific Tools
• Domain-specific tools are tools for building special kinds of

applications (e.g., database applications) or applications with specific
styles of interfaces (e.g., HyperCard).
• By focusing on a narrower domain, these tools can provide powerful

facilities for constructing applications very quickly.

Paper Prototyping

Paper Prototyping
• In HCI, paper prototyping is a widely used method in the user-centered

design process, a process that helps developers to create software that
meets the user's expectations and needs—in this case, especially for
designing and testing user interfaces.
• It is throwaway prototyping and involves creating rough, even hand-

sketched, drawings of an interface to use as prototypes, or models, of a
design.
Paper Prototyping
• While paper prototyping seems simple, this method of usability

testing can provide a great deal of useful feedback which will result in
the design of better products.
• This is supported by many usability professionals.

Paper Prototyping
• Paper prototypes are used:

• To communicate ideas: between designers, developers, users and other
stakeholders in the first stages of the user-centered design process.
• As a usability testing technique: to observe the human interaction with
user interfaces even before these interfaces are designed and
developed.

Advantages of Paper Prototyping
• User involvement at an early stage
• Cost-effective
• Encourages creativity
• No design or coding skills needed
• Less resource consuming
• Rapid evaluation and testing
• Assists in documentation
• Endorsed by several usability professionals

«nothing brings you closer to the functionality of
the final product than prototyping»

Building your paper prototypes
• Creating paper prototypes is fun, it is a great way to collaborate in a

team and anyone can participate.
• Paper prototyping is an early but NOT THE FIRST method in a user

centered design process.
• Prior to prototyping, you should have a goal in mind and you should
have gained knowledge through other research methodologies.
Example
• You want to build an application for a pizza delivery service.

Example
• The ultimate goal for this service is, that your average customer John,
28, may painlessly and easily place an order with his phone, based on
the following criteria:
• John wants to order two pizzas.
• One is spicy salami; the other one he is not sure about yet.
• John wants to deliver to his work address.
• And he wants to be able to pay with his credit card.

Example
• A main goal, personas, scenarios, user journeys or even storyboards

should have been set up before you start prototyping.
• Based on this knowledge you start drawing interfaces that allow your
user to perform this particular task.

Example
• As you work through your user journeys, you draw up all single steps,
screens and screen elements. They will later end up being laid out in a
flow scenario, in which your potential user is going to navigate.
• Always apply the KISS principle to this process — Keep it simple

stupid.

Where to Start
• Start with a piece of paper that resembles the shape and dimension
of the screen you are designing for. For smaller devices such as
phones or watches, you might use an oversized piece of paper as it
simplifies drawing.
• For the main interface of a screen you might be using an entire sheet
of paper. When it comes to drawing single UI elements and controls
such as dropdowns, overlays, expandable etc. take some scissors and
cut these elements out of another piece of paper or use sticky notes.

• Keep working through your scenarios and storyboards and draw up all
relevant screens and elements of your prototype in order to show all
screens and states of a potential user journey.
• Nevertheless, and as paper prototyping should be a quick and easy

method, you don’t need draw up every single potential screen of the
final product.

Jakob Nielsen suggests that
you should always have two
backup screens ready instead:
• Loading screen
• Under construction
screen

Materials for your prototype
• There are a lot of tools and materials that can come in handy when
paper prototyping. Here is a list of materials that might help your
process:
- paper - notebook - overhead sheet - plastic pieces
- whiteboard - napkin - cardboard - scissors
- poster - squared paper - carton - markers
- sticky notes - print template - plastic - foam pieces
- sketchbook - cards - wood pieces - UI stencil
- paper correction fluid - transparency sheet
and tape

Remember
• Prototyping ought to be fast, easy and fun. You don’t aim for polished
and fancy product. Therefore: Stick to the KISS-metrics and keep it
simple stupid.
• There are only two things that you really need: A pen and paper. If
you want to use more, you certainly can.

• Jakob Nielsen has a couple of specific recommendations when it
comes to material:
• If an interface features forms, use a transparency sheet or
correction tape, so you do not need multiple copies of the form.
• Use well visible and mid-tip pens. Draw up your prototype in black
and white. Colors can come in at a later stage of your process.

Testing a paper prototype
• The main reason for building prototypes, is that we can test them on
real users, get feedback and learn early whether our ideas and
concepts work.
• It is all about answering the question whether we are doing THE
RIGHT THING.
• Eliminating occurring issues may save you time in the development of
higher fidelity prototypes, the design and of course the development.
This is when you are trying TO DO THINGS RIGHT!

Testing a paper prototype
• Correctly conducting user testing is a topic by itself that could be

covered more extensively.
• Ideally designers involved in the project attend or even carry out the
testing themselves.
• If this is not possible you might think of recording the session in order
to be able to show the outcome.

Recruiting users
• Paper prototype testing, are much like regular testing and obviously
require real users.
• According to Jakob Nielsen, 5 users are enough to find about 80% of

potential issues.
• He also suggests that the majority of issues can be eliminated within 3

testing iterations, attended by 5 users per session.

Recruiting users
• Ideally you test with your potential or real users.
• Finding and recruiting them may be too time consuming and

expensive, though. Therefore, you might consider hallway tests. As
the name suggests, you are utilizing people in the hallway or a public
area to test your prototype on.

Setup
• Find a neutral and quiet testing environment with a table and chairs, so
that you can fit it all your participants.
• Apart from the tester, a session requires at least two more people:
• Person number one is the facilitator, that instructs users and interacts
with them.
• Person number two is «the computer». This person doesn’t talk during
the session and is in charge of changing screens or screen states,
whenever the user interacts with your prototype.
• There might be a third person scribing, and other people observing.
Setup

Setup
• Apart from the human resources, you obviously need your prototype
screens. Rather than just placing them on a table, have a mockup of
your device ready.
• This may just be a piece of paper, larger than your drawings, and
showing a frame printed or drawn onto it. This will be the device
where you place your interfaces on.

Setup
• When testing a touch device, users touch elements on your prototype

in order to interact with them. When testing a desktop website, give
your users a pen, which they can use to point at elements. A pen is
also useful if the user needs to fill out forms.

Conducting a testing session
• Testing sessions need to be well planned and well conducted.
• Start off with greeting your users and introduce them to yourself, the
computer and other people in the room. Clearly explain the testing
scenario and how the paper prototype works. Tell users that you are
testing a potential system and not them. Let them know, that they
can’t do anything wrong.
• Furthermore, instruct them to verbally state their thoughts and
thinking process, whilst interacting with the prototype. Once the
general introduction is done, introduce them to the task.
• In order to get them chatty, show hand them the testing script and
make them read it out loud. The script consists of the persona the
user is playing, the scenario and the task.
• Make sure that users understand what you expect from them and
start the test.
• Now that’s the exciting bit! Your user is testing your prototype!

• Observe closely, how the they perform, and what kind of reactions and
feedbacks you get.
• Do not interrupt or question. Talk as little as possible.
• If the users get stuck, let them find a way out and wait until they question
you. Respond as little as possible — or at least wait until the end of the
session — ask open questions instead, such as: «How did you feel», «What
did you expect».
• As mentioned earlier your prototype might not be intended to cover every
single aspect of a final product. Therefore, I mentioned two backups:
• The «loading screen» and the «under construction screen».
• As a computer, always have the «loading screen» ready in case you cannot
find the appropriate screen or if you need to make adjustments to a screen.
• The «under construction» screen comes in handy, when users leave the
desired path and end up somewhere, they shouldn’t have ended up in the
first place.

• This does not only provide an indication that there might be

something wrong with your process, but it also gives you the chance
to ask the users, why they ended up getting lost.
• At the end of the testing session talk to your users and give them the
opportunity to state further questions and comments about the
process, expectations and feelings during the session.

Conclusion
• Paper prototyping or rapid prototyping is an easy and fun way to

research and validate the value of your ideas and concepts in an early
stage of a project.
• This is not only going to save you time and money. It will also save you
nerves when dealing with your client later!

“We spend a lot of time designing the bridge, but
not enough time thinking about the people who
are crossing it.”
– Dr. Prabhjot Singh

Class Activity
• Design alternative control interfaces for an elevator.
• A really long elevator.
• An elevator that can service all of the floors of a 10,000 floor building.
• Nevermind that such a building, at 30,000 meters (100,000 feet, or

roughly 3-4 times higher than Mt. Everest) could probably not be built
given current technology.
Class Activity
• Do consider, though, that at 20.5 m/s (the current top speed for an
elevator, a record held by Shanghai Tower), it would take nearly 30
minutes to reach the top floor if there were no stops in between.
• Also consider that an elevator servicing so many floors would need to

move a lot of people, suggesting a capacity of dozens, if not
hundreds, of passengers.

Components of the Class Activity
• Sketch 10 different designs for a control interface for such an elevator.

Keep in mind that such an interface would make riders aware of the
elevator status (current floor, time to desired floor) as well as
providing control. Keep in mind, also, that you can take advantage of
multiple points of interaction, including panels in the elevator or
lobbies, personal devices, wearables, etc.

• Reflect on your initial sketches, and determine which design ideas are the most
promising and worthy of further development. From these ideas, determine a
set of criteria (characteristics that a successful design solution for this problem
should have) and a set of constraints (factors that limit what design solutions
would work--these could be technical, social, ergonomic, etc.) Write down 3-5
criteria and/or constraints, with a brief (2-5 sentence) explanation of how you
derived these criteria/constraints from your initial assignment.

• Keeping in mind your criteria and constraints, generate 10 new sketch

ideas, attempting to diversify your ideas as much as possible within
the established constraints.

Software Engineering Approaches To: Human Computer Interaction

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Software Engineering Approaches To: Human Computer Interaction

Uploaded by

Copyright:

Available Formats

Software Engineering Approaches

Jan 2021 By Yididya Kedir 1

• Chapter Three: Human Centered Software Development

Jan 2021 By Yididya Kedir 3

• Software Development Life Cycle (SDLC) in software engineering, is

• Process means the events or tasks a development organization does,

Jan 2021 By Yididya Kedir 4

• So, find and repeat good practices since:

Jan 2021 By Yididya Kedir 5

• Therefore, knowing and understanding each model and when to use

Jan 2021 By Yididya Kedir 7

• There are various models for software development life cycle:

• Evolutionary Prototyping Model

• Spiral Method (SDM)

• Iterative and Incremental Method

Jan 2021 By Yididya Kedir 9

• The next figure illustrates the prominent framework of HCSDLC.

• There are four phases to be considered, namely project selection and

Jan 2021 By Yididya Kedir 13

• Prototyping is an important technique to reduce the cost and risk involved

• It essentially involves building a small-scale version of a complex system in

• Even though prototyping involves building only a small-scale version of a

Jan 2021 By Yididya Kedir 14

Jan 2021 By Yididya Kedir 15

• The prototyping process takes time, involves many people, and if

Jan 2021 By Yididya Kedir 16

Jan 2021 By Yididya Kedir 17

Jan 2021 By Yididya Kedir 18

Jan 2021 By Yididya Kedir 19

Jan 2021 By Yididya Kedir 20

Jan 2021 By Yididya Kedir 21

• Four types of Prototyping are:

1. Rapid Throwaway prototypes

Jan 2021 By Yididya Kedir 26

Jan 2021 By Yididya Kedir 27

Jan 2021 By Yididya Kedir 28

• In incremental Prototyping, the final product is decimated into

• Eventually, the different prototypes are merged into a single product.

Jan 2021 By Yididya Kedir 29

Jan 2021 By Yididya Kedir 30

• The essence of user interface prototyping is to construct a small-scale

• Interface prototypes can be built with a large variety of tools, ranging

Jan 2021 By Yididya Kedir 31

Jan 2021 By Yididya Kedir 32

• Paper and pencil are prototyping tools with many strengths.

• They are easy to use.

Jan 2021 By Yididya Kedir 33

Jan 2021 By Yididya Kedir 34

Jan 2021 By Yididya Kedir 35

Jan 2021 By Yididya Kedir 36

• Domain-specific tools are tools for building special kinds of

• By focusing on a narrower domain, these tools can provide powerful

Jan 2021 By Yididya Kedir 38

Jan 2021 By Yididya Kedir 39

• In HCI, paper prototyping is a widely used method in the user-centered

• It is throwaway prototyping and involves creating rough, even hand-

• While paper prototyping seems simple, this method of usability

• This is supported by many usability professionals.

Jan 2021 By Yididya Kedir 41

• Paper prototypes are used:

Jan 2021 By Yididya Kedir 42

Jan 2021 By Yididya Kedir 43