The document discusses various aspects of the design process for interactive systems, including design rules, usability engineering, and iterative design. It provides an overview of different types of design rules such as principles, standards, and guidelines. Specific examples of design rules like learnability, flexibility, and robustness are mentioned. Ben Shneiderman's eight golden rules of interface design are also summarized, which include consistency, informative feedback, error handling, and reducing memory load.
2. LEARNING OUTCOME
CLO 1: Apply the concept of user interface design to
elevate technical complexity for usable product that
accepted by user (C3, PLO2)
CLO 3: Demonstrate professional codes of ethics
and humanistic values in applying the design rules
for interactive system (A3, PLO8)
3. The Design Process
Understand the
software
engineering and
basic design of
interaction
01 Understand
design rules for
interactive
system
02
4.
5.
6.
7. Interaction Design
The design of the
interaction between users
and products.
“Most often when people talk about
interaction design, the products tend to
be software products like apps or
websites”
The goal of interaction design is to create
products that enable the user to achieve
their objective(s) in the best way possible.
8.
9. Bad Design vs. Good
Design: 5 Examples We
can Learn From
CLICK HERE
10. What is Interaction Design
Process?
The interaction design (IxD) process is what
designers use to create solutions centered on
users’ needs, aims and behavior when
interacting with products.
The IxD process involves 5 stages:
Users need/want
Analyzing
Design
Prototyping
Implementing & deploying
11. Software Development Process / SDLC
Software development is the process programmers
use to build computer programs. The process, also
known as the Software Development Life Cycle
(SDLC), includes several phases that provide a
method for building products that meet technical
specifications and user requirements.
---------------------------------------------------------------------------
There are certain advantages and disadvantages
associated with each of them.
---------------------------------------------------------------------------
Provide smooth software development according to the
project requirements.
---------------------------------------------------------------------------
Framework that is used to structure, plan, and control the
process development of an information system.
12. Software Development Process
There are six major steps in the software development
life cycle:
Need
identification
-Market research and
brainstorming stage
-Identify the functions
and services of the
software
Requirement
analysis
-Stakeholders agree
on the technical and
user requirements
and specifications
-Involves developers,
users, testers, project
managers and quality
assurance
Design
-Architects and
developers draw up
advanced technical
specifications they
need to create the
software to
requirements
-Provides a template
for developers and
testers and reduces
the chances of flaws
and delays in the
finished product.
Development
&
implementation
-Developers code
based on the product
specifications and
requirements
-Test a pilot version of
the program to make
performance match
the requirements
Testing
-The testing phase
checks the software
for bugs and verifies
its performance
before delivery to
users
Deployment
&
maintenance
-Deliver it to
customers
-Maintenance can be
a hot-fix if it is a minor
issue but severe
software failures
require an update
13. Agile Software Development Methodology
DevOps Methodology
Scrum Development Methodology
Waterfall Model
Prototype Methodology
Feature Driven Development
Rapid Application Development (RAD)
Spiral Model
Dynamic Systems Development Model Methodology
Extreme Programming Methodology
Joint Application Development Methodology
Lean Development Methodology
Star Lifecycle Model
Need
identification
-Market research and
brainstorming stage
-Identify the functions and
services of the software
Requirement
analysis
-Stakeholders agree on the
technical and user requirements
and specifications
-Involves developers, users,
testers, project managers and
quality assurance
Design
-Architects and developers draw
up advanced technical
specificationsthey need to
create the software to
requirements
-Provides a template for
developers and testers and
reduces the chances of flaws
and delays in the finished
product.
Development
&
implementation
-Developers code based on the
product specifications and
requirements
-Test a pilot version of the
program to make performance
match the requirements
Testing
-The testing phase checks the
software for bugs and verifies its
performance before delivery to
users
Deployment
&
maintenance
-Deliver it to customers
-Maintenance can be a hot-fix if
it is a minor issue but severe
software failures require an
update
Software Development Process
METHODOLOGIES
14. Agile Software Development Methodology
Agile Software Development methodology is one of the best software
development approaches that is used to design a disciplined software
management process which also allows some frequent alteration in the
development project.
This is a type of software development methodology that is one conceptual
framework for undertaking various software engineering projects. Agile
Development is used to minimize risk by developing software in short time boxes
which are called iterations that generally last for one week to one month.
Advantages of Agile Development Methodology
•Customer satisfaction by rapid, continuous delivery of useful software.
•Human interaction is emphasized rather than process and development tools. Customers,
developers and testers constantly interact with each other.
•Has an adaptive approach that is able to respond to the changing requirements of the
clients.
•Direct communication and constant feedback from customer representatives leave no
space for any guesswork in the system.
Disadvantages of Agile Development Methodology
•In the case of some software deliverables, especially the large ones, it is difficult to assess
the effort required at the beginning of the software development life cycle.
•Agile focuses on working software rather than documentation, hence it may result in a lack
of documentation.
•The project can easily get taken off track if the customer representative is not clear what
final outcome that they want.
•Only senior programmers are capable of taking the kind of decisions required during the
development process. Hence it has no place for newbie programmers unless combined with
experienced resources.
15. Scrum Development Methodology
Scrum Development Methodology is for companies where the requirements are highly emerging
and rapid changes are easily adhered to. Begins with brief planning, meeting, and concludes with a
final review. Businesses can accelerate the development of software using this method that allows a
series of iterations in a single go. It is one of the best software development methodologies because it
easily brings slowest progressing projects on track.
Advantages of Scrum Development
•fast-moving, cutting-edge developments, rapid codes, and testing mistakes that can be
easily rectified.
•decision-making is entirely in the hands of the teams.
•enables projects with the business requirements documentation and other signs that
contribute to success.
•Enterprises can control the Project development steps visible in this method with
emphasis on frequent updating of the progress.
•A daily meeting easily helps the developer to make it possible to measure individual
productivity. This leads to the improvement in the productivity of each of the team
members.
•Due to short sprints and constant feedback, it becomes easier to cope with the changes.
•It is easier to deliver a quality product at a scheduled time.
Disadvantages of Scrum Development
•As one of the leading causes of scope creep is Agile Scrum thus there is no definite end
date, the project management stakeholders will be tempted to keep demanding that new
functionality be delivered.
•should keep the estimation of project costs and time accurate if not then this kind of
development model will suffer.
•It is good for small, fast-moving projects but not suitable for large complex projects.
•needs experienced team members only. If the team consists of people who are novices,
the project cannot be completed within an exact time frame.
•Scrum works well for project management when the Scrum Master trusts the team they
are managing. If they practice too strict control over the team members, it can be
extremely frustrating for them, leading to demoralization and the failure of the project.
•Project quality manager is hard to implement and quantify unless the test team is able to
conduct regression testing after each sprint.
16. Waterfall Model
This model clarifies the software development process in a linear
sequential flow. This traditional software development method is a
rigid linear model. This development approach does not define the
process to go back to the previous phase to handle changes in
requirements.
Advantages of the Waterfall Model
•very simple and easy to understand.
•easy to manage the projects because of the rigidity of the model.
Moreover, each phase has specific deliverables and an individual
review process.
•saves a significant amount of time at all the phases processed and
completed at a given time.
•The requirements are very well understood/defined in the waterfall
method. Also, it works effectively for smaller projects.
•easily do the testing that refers to the defined scenarios in the earlier
functional specification.
Disadvantages of Waterfall Model
•If the requirements are precise and are available up-front, then the
waterfall development method can only be used.
•not applicable to projects that demand continuous maintenance.
•once an application is in the testing stage, it is not advisable to go back
and do any amendments changes for completed software, it may cause
a lot of problems.
•There is no possibility that we can to develop any working software
until it reaches the last stage of the cycle
•cannot include the client’s valuable feedback within the ongoing
development phase.
•no option to know the end result of the entire project
•Make your requirements well-defined and clear or else this model is
not suitable. It is effective for long and ongoing projects.
•Documentation occupies a lot of time for developers and testers.
*UAT: User Acceptance Testing
17. Disadvantages RAD model
• This model depends on the strong team and individual performances
for clearly identifying the exact requirement of the business.
• It only works on systems that can be modularized can be built using
this methodology.
• demands highly skilled developers and a designer’s team which may
not be possible for every organization.
• not applicable for the developer to use in small budget projects as the
cost of modeling and automated code generation is very high.
• Progress and problems accustomed are hard to track as such there is
no documentation to demonstrate what has been done.
Advantages of the RAD model
• helps to reduce the risk and required efforts on the part of the software
developer.
• helps the clients to take quick reviews for the project.
• encourages customer feedback which always provides improvement
scope for any software development project.
• Each phase in RAD delivers the highest priority functionality to the
client.
Waterfall Model
Rapid Application Development (RAD)
Rapid Application Development (RAD) is an effective methodology that provides much quicker development and higher-
quality results than those achieved with the other software development methodologies. It is designed in such a way that it
easily takes the maximum advantage of the software development.
The main objective of rapid application development methodology is to accelerate the entire software development process.
The goal is easily achievable because it allows active user participation in the development process.
18. Spiral Model
The Spiral Model is a sophisticated model that focuses on the early
identification and reduction of project risks.
Developers start on a small scale then explores the risks involved in the
project, make a plan to handle the risks, and finally decides whether to
take the next step of the project to do the next iteration of the spiral.
The success of any Spiral Lifecycle Model depends on the reliable,
attentive, and knowledgeable management of the project.
Disadvantages of Spiral Model
• It is certainly a costly model to use in terms of development.
• The success of the entire project is dependent on the risk analysis
phase thus, failure in this phase may damage the entire project.
• It is not appropriate for low-risk projects.
• The big risk of this methodology is that it may continue indefinitely and
never finish.
• Documentation is more as it has intermediate phases.
Advantages of Spiral Model
• The high amount of risk analysis being done hence, avoidance of
possible risk is certainly reduced with this model.
• good for large size and critical projects.
• additional functionality can be added at a later date.
• Development is fast and features are added systematically in this
model.
• It is more suited for high-risk projects, where business needs may differ
from time to time basis.
21. Usability Engineering
• Professional discipline that
focuses on improving the
usability of interactive
systems.
• It draws on theories from
computer science and
psychology to define
problems that occur during
the use of such a system.
• Involves the testing of
designs at various stages of
the development process,
with users or with usability
experts.
22.
23. Iterative Design
• Iterative design is a design
methodology based on a cyclic
process of prototyping, testing,
analyzing, and refining a product
or process.
• Based on the results of testing the
most recent iteration of a design,
changes and refinements are
made.
• This process is intended to
ultimately improve the quality and
functionality of a design.
24.
25. The Design Process
Understand the
software
engineering and
basic design of
interaction
01 Understand
design rules for
interactive
system
02
26. • Design rules are mechanisms for
restricting the space of design options,
preventing a designer form pursuing
design options that would be likely to
lead to an unusable system
• To provide designers with the ability to
determine the usability consequences
of their design decision
• Can be supported by psychological,
cognitive, ergonomic, sociological,
economic or computational theory
Design Rules for
Interactive System
27. Types of Design Rules
• Abstract design rules
• “ an interface should be easy to navigate”
Principles
• Specific design rules and measurable
• “ HEX Code RGB for Lime color is 00FF00”
Standards
• Advice on how to achieve principle
• May conflict so understanding theory helps to resolve
• “ Use color to highlight links”
Guidelines
increasing authority
increasing
generality
Standards
Guidelines
28. Types of Design Rules Principles
Learn ability
Flexibility
Robustness
32. Types of Design Rules Standards
• Set by national or international bodies to ensure
compliance by a large community of designers
standards require sound underlying theory and
slowly changing technology
• Hardware standards more common than software
high authority and low level of detail
• ISO 9241 defines usability as effectiveness,
efficiency and satisfaction with which users
accomplish tasks
33. Types of Design Rules Guidelines
• More suggestive and
general
• many textbooks and
reports full of guidelines
• abstract guidelines
(principles) applicable
during early life cycle
activities
• detailed guidelines (style
guides) applicable during
later life cycle activities
• understanding
justification for guidelines
aids in resolving conflicts
34. Shneiderman’s
'Eight Golden
Rules
Ben Shneiderman (born August 21, 1947) is an American
computer scientist and professor at the University of Maryland
Human-Computer Interaction Lab
In his popular book "Designing the User Interface: Strategies for
Effective Human-Computer Interaction", Shneiderman reveals his
eight golden rules of interface design
35. Shneiderman’s 'Eight Golden Rules
Strive for Consistency
Enable Frequent Users to use shortcuts
Offer Informative Feedback
Design Dialog to Yield Closure
Offer Simple Error Handling
Permit Easy Reversal of Actions
Support Internal Locus of Control
Reduce Short-Term Memory Load
36. Strive for Consistency
1
Designing “consistent interfaces” means
using the same design patterns and the
same sequences of actions for similar
situations.
This includes, but isn’t limited to, the
right use of color, typography and
terminology in prompt screens,
commands, and menus throughout user
journey.
37. Enable Frequent Users to use shortcuts
2
Speaking of using UI rules as shortcuts,
users will benefit from shortcuts as well,
especially if they need to complete the
same tasks often.
38. Offer Informative Feedback
3
keep users informed of what is happening
at every stage of their process. This
feedback needs to be meaningful,
relevant, clear, and fit the context.
39. Design Dialog to Yield Closure
4
Sequences of actions need to have a
beginning, middle and end. Once a task is
completed, give some peace of mind to
the user by providing them informative
feedback and well-defined options for the
next step if that’s the case. Don’t keep
them wondering.
40. Offer Simple Error Handling
5
A good interface should be designed to
avoid errors as much as possible. But
when errors do happen, the system needs
to make it easy for the user to understand
the issue and know how to solve it.
Simple ways to handle errors include
displaying clear error notifications along
with descriptive hints to solve the
problem.
41. Permit Easy Reversal of Actions
6
It’s an instant relief to find that “undo”
option after a mistake is made. Users will
feel less anxious and more likely to
explore options if they know there’s an
easy way to reverse any accidents.
This rule can be applied to any action,
group of actions, or data entry. It can
range from a simple button to a whole
history of actions.
42. Support Internal Locus of Control
7
First, a definition:
“In personality psychology, locus of control is the degree to
which people believe that they have control over the outcome of
events” — Julian Rotter
It’s important to give control and freedom to the
users so they’re able to feel they’re in charge of
the system, not the other way round.
Avoid surprises, interruptions, or anything that
hasn’t be prompted by the users.
Users should be the initiators of the actions
rather than the responders
43. Reduce Short-Term Memory Load
8
It’s simpler to recognize information rather
than recall it. If we keep our interfaces
simple and consistent, obeying to
patterns, standards and conventions, we
are already contributing to better
recognition and ease of use.
There are several features can be add to
aid our users depending on their goals.
For example, in an ecommerce
environment, a list of recently viewed or
purchased items.
44. Design Rationale
Process-Oriented rationale
Design space analysis (Structured)
Psychological design rationale
Information that explains why
a computer system is the
way it is, including :
- its structural or architectural
description
- its functional or behavioral
description
45. Benefit of Design Rationale
Provides a communication mechanism among members
of design team (critical decision, alternative, reason)
Can be reused to transfer what has worked in one
situation to another situation which has similar needs
Designer deliberate more carefully about design decision
46. Process-Oriented rationale
• IBIS : is a hierarchical structure to a design
rationale is created
• Issues : a root issue is identified which
represents the main problem or question that the
argument is addressing
• Position : various positions are put forth as
potential resolutions for the root issue
• Argument : modify the relationship between
positions and issues
• Based on Rittel’s
issue-based
information
system (IBIS)
• A style for
representing
design and
planning dialog
develop in
1970s.
47. A graphical version of IBIS has been define which makes the structure of the design rationale more apparent
visually in the form of a directed graph which can be directly edited by the creator of the design rationale
The Structure of a gIBIS design rationale
(Graphical issue-based information system)
48. Design space analysis (Structured)
• Design space is initially structured by a
set of questions representing the major
issues of the design
• Structured oriented
• QOC (Question Option Criterion)
49. • QOC – hierarchical structure:
• Questions (and sub-questions)
• represent major issues of a design
• Options
• provide alternative solutions to the question
• Criteria
• the means to assess the options in order to make a
choice
• DRL(Decision Representation Language) – similar to QOC
with a larger language and more formal semantics
Design space analysis (Structured)
52. Benefits of Design Rationale
1. Provides a communication mechanism among members of a design team to avoid incorrect
assumptions later
2. Accumulated knowledge can be reused which has similar needs
3. Forces the designer to deliberate more carefully about design decisions
4. The designer will determine which criteria for evaluating the options more important
5. The designer indicates all alternatives that have been investigated
6. Capturing the context in which a design decision is made will help later when new products are
designed
54. Design Process
Emphatize (user research)
Define (user stories, user
journey map, goal statement)
Ideate (brainstorming, user flow,
site map)
Design ( LFW, MFW,
prototype,visual design)
Test (usability testing)
PROBLEM
PROBLEM
SOLUTION
