Subject:UI/UX

Subject code:BCS456C
CIE Marks :50
SEE Marks :50
Total Marks :100
Credits:01
 Chapter 1-Introduction
• Interface refers to the medium through which a user interacts with
a machine, software, or device.

• In digital design, user interface (UI) refers to the interactivity, look,

and feel of a product screen or web page, while user experience
(UX) covers a user’s overall experience with the product or website.

• A user interface (UI) refers to the space where interactions

between humans and machines occur.

• The goal of an effective UI is to make the machine's operation

understandable and accessible to the user.

• UI/UX design is a combination of two design disciplines that work

together to create a great user experience.
 What is UI Design?
• User Interface (UI) design is the process of designing the interface of a digital
product.

• The goal of UI design is to create a visually appealing and user-friendly (easy to

use, understand, and navigate) interface that allows users to interact with the
product easily.

• UI designers work on designing the layout, color scheme, and visual elements of
the product such as from simple graphic images to complex industrial products.

• UI design also involves creating wireframes and prototypes of the product to help
visualize the final product.

• Wireframes are basic sketches of the layout of the product, while prototypes are
working models that allow designers to test the product and get feedback from
users.
 What is UX Design?
• User Experience (UX) design is the process of creating a
product that meets the needs of the user.

• The goal of UX design is to create a product that is easy

to use and provides a seamless experience for the user.

• UX designers work on understanding the needs of the

user and creating a product that meets those needs.
 Why UI /UX Design?
• UI /UX design is important because it helps to create
products and services that are easy to use, intuitive, and
enjoyable for users.

• A well-designed user interface (UI) and user experience

(UX) can help to increase user engagement and
satisfaction, which can ultimately lead to higher
conversions and revenue for businesses.
• Here are some reasons why UI UX design is important:

• User satisfaction: UI UX design helps to create products that meet the needs and
expectations of users.

• Brand loyalty: A well-designed UI and UX can help to build brand loyalty and
increase customer retention(ability of a company to retain its customers over a
period of time. Users consistently choose a particular brand over others in the
same product or service category.

• Increased engagement: A user-friendly interface and a satisfying experience can

help to increase user engagement with a product. Users are more likely to spend
more time on a product that is easy to use and enjoyable.

• Competitive advantage: In a crowded marketplace, a well-designed UI and UX can

give a product a competitive advantage.

• Increased revenue: A positive user experience can lead to increased revenue for
businesses.
 UI UX Examples
• Apple’s iPhone: The user interface is intuitive and easy to
navigate, with simple and attractive design elements that
make it a pleasure to use. The user experience is also
carefully crafted to be seamless and enjoyable, with features
such as Face ID and intuitive gestures that make using the
iPhone a pleasure.

• Airbnb: Airbnb’s user interface is clean and simple, with

easy-to-use search filters that help users find the perfect
accommodation.

• Google Maps: Google Maps is an example of excellent UI UX

design. The user interface is clean and easy to use, with
intuitive features such as voice navigation and real-time
traffic updates that make it a pleasure to use.
• Slack: Slack is an example of UI UX design that helps to
improve productivity. The user interface is simple and
intuitive, with easy-to-use messaging and collaboration
tools that help teams stay connected and get work done.

• Spotify: Spotify’s user interface is carefully designed to

be easy to use and visually attractive. The user
experience is also carefully crafted, with personalized
recommendations and playlists that help users discover
new music and keep them engaged with the platform.
UI UX Projects
• E-commerce Websites
• Mobile App
• Healthcare Platform
• Financial Dashboard
• Gaming App
 From Usability To User Experience
• Human–computer interaction is what happens when a human
user and a computer system, get together to accomplish some
work.

• Usability is that aspect of HCI devoted to ensure that human–

computer interaction is effective, efficient, and satisfying for the
user.

• So usability includes characteristics such as ease of use,

productivity, efficiency(capable of producing desired results with little or no waste),
effectiveness(ability to be successful and produce the intended results),
learnability, retainability, and user satisfaction.
 Basic 3 Step UX/UI Process

1 Who, What, Where,When,

Why
2 The Art Design - 3 Data /
Define Goals
Visual Magic Observations
Requirements
Business Principles Make it Scientific
Research & User User Flow User Testing
Stories/Scenarios Research Wireframes / Prototypes Iterations
others
Designs
Misconceptions about Usability
• Usability is not what some people used to call “dummy
proofing.”(process of designing product or system in
such a way that it is easy to understand and use, even
for someone who is unfamiliar with it or who may not
have a lot of experience).

• Usability is not equivalent to being “user-friendly.”

• While visual design is an integral and important part of

usability, it is not the only part of interaction design.
Functionality Is Important, but a Quality User Experience Can Be Even More
So
• A product that affords a better user experience often outsells ones with
even more functionality.

• For example, take the Blackberry; once a market leader in smartphones but
now outclassed by the iPhone, a later entrant into the market with less
functional capabilities.

• The iPod, iPhone, and iPad are products that represent cool high technology
with excellent functionality but are also examples that show the market is
now not just about the features—it is about careful design for a quality user
experience
Designing for the “Visitor Experience”
• Five different qualities of Websites that will impact the experience of the site’s visitors:

• Utility: The utility of a Website refers to the usefulness, importance, or interest of the site
content to the visitor.

• Functional Integrity: A Website’s functional integrity is the extent to which it works as

intended. Websites may have “dead” links that go nowhere, they may freeze or crash when
certain operations are invoked, they may display incorrectly on some browsers or browser
versions, they may download unintended files, etc.

• Usability: Usability refers to how easy it is to learn (for first time and infrequent visitors)
and use (for frequent visitors) a Website.
• Persuasiveness: refers to the ability to convince others to agree with an
idea, take a certain action, or adopt a belief through reasoning, appeal, or
influence.

• Graphic Design: Finally, the “look and feel,” that is, the graphic design, of a
Website can have a significant impact on the visitor experience. The graphic
design of a Website—primarily the ways colors, images, and other media
are used.
User Experience Cannot Be Designed
• A user experience cannot be designed, only experienced.
• You are not designing or engineering or developing good
usability or a good user experience.
Emotional impact as part of the user experience
• The emotional aspects of user experience- pleasure, fun,
aesthetics, novelty, originality, sensations, and
experiential features—the affective parts of interaction.
USER EXPERIENCE NEEDS A BUSINESS CASE
• One of the frequent challenges we face is getting acceptance towards user experience
processes from upper management and business stakeholders. So what is the business
case for UX?

• Computer software of all kinds is in need of better design, including better user interaction
design.

• Mitch Kapor, the founder of Lotus, has said publicly and repeatedly that “The lack of
usability of software and the poor design of programs are the secret shame of the
industry”

• A posting by Computer World declared: “Badly designed software is costing businesses

millions of dollars annually because it’s difficult to use, requires extensive training and
support, and is so frustrating.
 Chapter 2- Extracting Interaction Design Requirements
• Extracting Interaction Design requirements involves understanding the needs and expectations
of users, stakeholders, and the context of use to inform the design of a digital product or
service.
• Steps to help you extract these requirements:
– Identify Stakeholders: These can involve users, clients, developers, and any other
individuals or groups affected by the design.
– Understand User Needs: Conduct user research to understand the goals, tasks, preferences,
and challenges of the users.
– Define Use Cases: Create scenarios that describe how users will interact with the product in
different situations.
– Define Functional Requirements: Specify the features and functionality that the product
must have to meet the user needs
– Define Non-Functional Requirements: Consider the performance, security, and usability
aspects of the design
– Prototyping: Develop prototypes to visualize and test the design concepts.
– Document Requirements: Document the design requirements, including user needs, use
cases, functional and non-functional requirements and design principles. This
documentation serves as a reference for the design process.
UI/UX - BCS456 21
• Work activity affinity diagram (WAAD) - A visual tool used in business analysis
to organize and prioritize a large number of tasks or activities related to a
specific work area or project.

• Contextual inquiry and analysis is a user-centered research method used to

understand how people interact with a product, service, or system in their
natural environment. It involves observing and interviewing users as they go
about their tasks, in order to gather insights into their needs, behaviors, and
challenges.

• Depending on how well contextual inquiry and analysis is done so far, an

accurate and complete picture of the users’ work domain is given.

• We are now going to identify the needs and design requirements for a proposed
new system to optimize, support, and facilitate work in that domain.

UI/UX - BCS456 22
 Gap between Analysis and Design
• The gap between analysis and design refers to the difference that can occur
between the findings and insights gathered during the analysis phase of a
project and the actual design and implementation of a solution.

• Information coming from contextual studies describes the work domain but
does not directly meet the information needs in design.

• Bridging the gap between analysis and design requires close collaboration
between the analysis and design teams, clear communication, and a thorough
understanding of user needs and requirements throughout the design
process.

UI/UX - BCS456 24
 Needs and requirements
• What Are “Requirements”? The term refers to a statement of what is
needed to design a system that will fulfill user and customer goals.

• In the UX domain, interaction design requirements describe what is

required to support user or customer work activity needs.

• Functional requirements describe the specific behaviors and functions that

a system, product, or service must perform.

• These requirements define the fundamental capabilities of the system and

specify what it should do.

• Non functional requirements define how the system should behave in

terms of performance, security, reliability, usability, and other quality
aspects.
 Formal requirements extraction
• Formal requirements extraction refers to the process of systematically
analyzing and extracting requirements from various sources using
structured methods and techniques.

• This process aims to ensure that all relevant requirements are

identified, documented, and understood.

• Walking the WAAD for Needs and Requirements- The general idea is to
traverse the hierarchical WAAD structure and focus on extracting requirement
statements from work activity notes.

UI/UX - BCS456 26
Switching from Inductive to Deductive Reasoning
• This involves a shift in the way you approach a problem or draw
conclusions based on evidence.

• Inductive Reasoning: It involves making generalizations based on

specific observations or evidence. For example, if you observe that
all the swans you have seen are white, you might inductively
conclude that all swans are white.

• Deductive Reasoning: Deductive reasoning starts with a general

principle and moves to a specific conclusion that must be true if the
general principle is true. For example, if you know that all mammals
have lungs, and you also know that a whale is a mammal, you can
deduce that a whale has lungs.

UI/UX - BCS456 27
 Preparation
• Select a requirements team, including people you think will be best at
deductive reasoning and creativity.

• Need both UX and software people, plus possibly system architects and
maybe managers.

• Choose a requirements team leader and a recorder, a person experienced in

writing requirements.

• You may need a requirements “record” template in a word processing

document, a spreadsheet to capture the requirement statements in design
requirements document.

• If there is a need for all to see each requirement statement, you can connect
the recorder’s computer to a screen projector and show the requirements
document on an open part of the wall.
UI/UX - BCS456 28
 Requirement Statements
• Requirement statements are descriptions of what a system, product,
or service must do or the qualities it must have to satisfy
stakeholders' needs.

• The team translates each user need into one or more interaction
design requirement statements.

• Now the recorder writes the requirement statement in the

requirements document by first finding the appropriate headings and
subheadings.

• If the necessary headings are not already in the requirements

document, now is the time to add them and grow the document
structure as the process continues.
 Requirement Statement Structure
• A requirement document is essentially a set of requirement statements
organized on headings at two or more levels.

UI/UX - BCS456

30
 Abridged methods for requirements extraction
1. Use the WAAD Directly as a Requirements Representation
• To save time and cost, the WAAD itself can be taken as a set of
implicit requirements, without formally extracting them.

• On the WAAD you created in contextual analysis, highlight (e.g.,

using a marker pen) all groups or individual work activity notes
that imply requirements and design ideas directly or indirectly.

• Clear and crisply written work activity notes will help make this
step of interpretation easier.

UI/UX - BCS456 31
2. Anticipating Needs and Requirements in Contextual Analysis
• It involves using observations and insights gathered from
studying users in their natural environment to predict future
needs and requirements.

• This proactive approach is based on understanding users'

behaviors, challenges, and goals, and can help in designing
solutions that anticipate and address these needs.

UI/UX - BCS456 32
3. Use Work Activity Notes as Requirements (Eliminate the WAAD Completely)

• Using work activity notes as requirements involves directly translating the

observations and insights from studying users' work activities into
actionable requirements, eliminating the need for a separate Work Activity
Affinity Diagram (WAAD).

• Actionable requirements are specific, clear, and detailed statements that

define what a system, product, or service must do or the qualities it must
have in order to meet stakeholders' needs.

UI/UX - BCS456 33