UNIT 1
FOUNDATIONS OF DESIGNS
UI/UX
USER INTERFACE (UI):
UI is the point of human-computer interaction and communication in a
device. It also the way through which a user interacts with an application or
a website.
Examples: Display screens, Keyboards, mouse and appearance of a desktop.
USER EXPERIENCE (UX):
User experience (UX) design is the process design teams use to create
products that provide meaningful and relevant experiences to users.
UX designers aim to create products with relevant, meaningful, usable and
pleasurable experiences. The practice of UX design ensures that a product is
easy to use and enjoyable.
ESSENTIAL ELEMENTS OF UI
Colors And Typography
Choice of colors , Style and appearance.
Layout And Grid Systems
Arrangement of Elements on a screen.
Buttons And Interactive Elements
Touch points that facilitate user actions, such as clicks taps
and swipes.
Image And Icons
Providing a visual language for users.
TYPES OF UI
Graphical User Interface (GUI):
It allows users to interact with a system through graphical
representations.
Visual elements like icons, buttons and windows
Command – Line Interface (CLI):
Text commands entered by users. Common in
programming environments.
CLI offers efficiency for experienced users.
Voice User Interface (VUI):
Enables users to interact with systems using spoken language like smart
speakers.
Touch User Interface (TUI):
Touch enabled devices like smart phones and tablets.
Gesture – Based User Interface:
Gesture based UI relies on recognizing specific hand or body movements
to control devices.
Biometric User Interface:
Biometric authentication methods such as fingerprint recognition, facial
recognition or iris scanning.
UX DESIGN
UX design prioritizes user satisfaction and delight by creating seamless
digital interactions.
It involves understanding user needs, behaviors and emotions.
Interactions are designed for simplicity, reducing friction in tasks, for
example -- well designed e-commerce website, product selection and
checkout.
Design elements evoke a positive emotional response, enhancing overall
satisfaction.
Designers gather insights through user interviews and usability testing.
UI Vs UX
Aesthetic-beauty or art
CORE STAGES OF DESIGN THINKING
Design thinking is a methodology which provides a solution-based
approach to solving problems.
Design thinking is essentially a process which moves from problem to
solution via some clear intermediate points.
The five stages of design thinking are:
1. Empathize: research your users' needs.
2. Define: state your users' needs and problems.
3. Ideate: challenge assumptions and create ideas.
4. Prototype: start to create solutions.
5. Test: try your solutions out
Stage 1: Empathize - Research Your Users' Needs / Understanding the Human Element
This stage involves understanding end users perspectives.
Here, you should gain an empathetic understanding of the problem you’re
trying to solve, typically through user research.
Empathy is crucial to a human-centered design process such as design
thinking because it allows you to set aside your own assumptions about the
world and gain real insight into users and their needs.
Empathize - having the ability to imagine how someone else feels
Stage 2: Define - State Your Users' Needs and Problems /
Framing the Design Challenge
It’s time to accumulate the information gathered during the Empathize
stage.
You then analyze your observations and synthesize them to define the core
problems you and your team have identified. These definitions are called
problem statements.
Design thinking's power lies in framing problems strategically, ensuring
solutions meet user requirements.
Stage 3: Ideate - Challenge Assumptions and Create
Ideas / Cultivating Creative Solutions
Now, you’re ready to generate ideas. The solid background of knowledge
from the first two phases means you can start to “think outside the box”,
look for alternative ways to view the problem and identify innovative
solutions to the problem statement you’ve created.
Brainstorming is particularly useful here.
Brainstorming is a method , design teams use to generate ideas to solve clearly defined
design problems.. They produce a vast array of ideas and draw links between them to find
potential solutions.
Stage 4: Prototype - Start to Create Solutions /
Bringing Ideas to Life
This is an experimental phase. The aim is to identify the best possible
solution for each problem found.
Your team should produce some inexpensive, scaled-down versions of the
product (or specific features found within the product) to investigate the
ideas you’ve generated. This could involve simply paper prototyping.
Stage 5: Test - Try Your Solutions Out / Iterative
Refinement
Evaluators rigorously test the prototypes. Although this is the final phase,
design thinking is iterative: Teams often use the results to redefine one or
more further problems.
So, you can return to previous stages to make further iterations, alterations
and refinements – to find or rule out alternative solutions.
Rigorously -in a careful way so that every part of something is looked at or
considered to make certain it is correct or safe
DIVERGENT AND CONVERGENT
Divergence and Convergence is a problem-solving method.
DIVERGENT THINKING: NURTURING CREATIVITY AND EXPLORATION
Divergence is the process of exploring and generating a wide range of
ideas.
The focus is on generating many ideas without limitations. It embraces
uncertainty and welcomes new territories.
Quantity of ideas is prioritized over quality.
Example: Composing music and writing creative lyrics. Giving different
caption for the same photo.
CONVERGENT THINKING: CHANNELLING FOCUS AND DECISION-MAKING
Convergent thinking focuses on finding one well- defined solution to a
problem.
Convergent thinking focuses on refining the most promising ideas toward a
specific goal.
It involves sorting through generated ideas, identifying patterns, and selecting
concepts that closely match the defined problem or design challenge.
Example: Solving an algebraic equation that has one correct answer.
Answering for multiple choice questions.
BALANCING IDEAS:
In design thinking, its important to grasp the collaboration between
divergent and convergent thinking.
Divergent thinking ignites creativity by producing fresh ideas. Convergent
thinking refines those ideas into practical solutions.
The interplay between divergent and convergent thinking demonstrates the
cyclical nature of design thinking.
It involves constantly exploring new options and refining specific
solutions.
This balance results in impactful design solutions that meet user needs.
DIVERGENT VERSUS CONVERGENT THINKING
Which is preferable?
Divergent and Convergent thinking are equally valuable.
Convergent thinking enhances speed of performance by breaking down
problems into more manageable segments.
Divergent thinking promotes flexibility in problem-solving approaches.
Examining a problem from various angles engages your mind
comprehensively.
◦ Divergent is crucial for adaptation and new pathways , even though it may slow down
problem-solving.
INTEGRATING DIVERGENT AND CONVERGENT THINKING
Combining divergent thinking for creativity and convergent thinking for
efficiency is most effective when facing a problem.
Various projects require different creative problem-solving abilities making a
combination of thinking process necessary.
To achieve a balanced approach, start with divergent thinking to explore
possibilities before transitioning to convergent thinking for focus and structure.
BRAINSTORMING
Brainstorming is a method design teams use to generate ideas to solve clearly
defined design problems. ALEX OSBORN- Creator of brainstorming
In controlled conditions and a free-thinking environment, teams approach a
problem by such means “How Might We” questions. They produce a vast
array of ideas and draw links between them to find potential solutions.
“How Might We” Question:
◦ Once you‘ve defined your design challenge [problem Statement] you can start to use “How
Might We”(HMW) questions to reframe your Point Of View (POV) and open up the design
challenge to look for solutions.
◦ For example, Instead of saying ―We need to design X or Y, you can add ―How Might We
to the beginning and ask ― How might we design X or Y?
BRAINSTORMING IN DESIGN THINKING
Brainstorming is part of design thinking. You use it in the ideation phase.
It’s extremely popular for design teams because they can expand in all
directions(Breaking conventional boundaries).
Although teams have rules and a facilitator to keep them on track, they are
free to use out-of-the-box and lateral thinking to seek the most effective
solutions to any design problem.
When teams work in a judgment-free atmosphere to find the real
dimensions of a problem, they’re more likely to produce rough answers
which they’ll refine into possible solutions later.
“It is easier to tone down a wild idea than to think up a new one.”- Alex
Osborn [about creator of brainstorming]
BUILDING ON IDEAS
Everyone in a design team should have a clear definition of the target
problem.
They typically gather for a brainstorming session in a room with a large
board/wall for pictures/Post-Its.
A good mix of participants will expand the experience pool and therefore
broaden the idea space.
RULES FOR BRAINSTORMING / PRACTICES
FOR DESIGN TEAMS
Brainstorming may seem to lack constraints, but everyone must observe eight
house rules and have someone acting as facilitator.
1. Set a time limit: Depending on the problem’s complexity, 15–60 minutes is
normal.
2. Begin with a target problem/brief: Members should approach this sharply
defined question, plan or goal and stay on topic.
3. Refrain from judgment/criticism: No-one should be negative (including via
body language) about any idea.
4. Encourage weird and wacky ideas: Further to the ban on killer phrases like
“too expensive”, fostering an environment where everyone feels free to
express on – topic ideas.
5. Aim for quantity: Remember, “quantity breeds quality”. The sifting-
and-sorting process comes later.
6. Build on others’ ideas: It’s a process of association where members
expand on others’ notions(opinion) and reach new insights, allowing
these ideas to trigger their own. Say “and” rather than discourage with
“but” to get ideas closer to the problem.
7. Stay visual: Diagrams and Post-Its help bring ideas to life and help
others see things in different ways.
8. Allow one conversation at a time: To arrive at concrete results, it’s
essential to keep on track this way and show respect for everyone’s
ideas.
To capture everyone’s ideas in a brainstorming session, someone must play
“scribe” and mark every idea on the board.
Alternatively, write down your own ideas as they come, and share these
with the group. Often, design problems demand mixed tactics:
brainstorming and its sibling approaches
◦ braindumping (for individuals)
◦ brainwriting
◦ brainwalking (for group-and-individual mixes).
GAMESTORMING
Gamestorming introduces a dynamic twist to traditional brainstorming
injects playfulness into the ideation process.
Gamestorming transforms seriousness into playfulness. It uses games and
activities to unlock creativity.
By integrating fun and collaboration, Gamestorming stimulates team
energy.
It fosters innovative thinking, Gamestorming breaks down barriers to
ideation.
OBSERVATIONAL EMPATHY
EMPATHY:
Empathy is the ability designers gain from research to understand user’s
problems, needs and desires fully so that they can design the best solutions
for users.
Using empathy in the design process is on the one hand about collecting
subjective information and on the other hand about objectively analyzing it.
There are three different approaches:
◦ Looking at what people do
◦ Asking people to participate
◦ Trying things yourself
Observational empathy is a crucial aspect of the design thinking process
that involves closely observing and understanding the experiences,
behaviors, and needs of users by immersing oneself in their environment.
In observational empathy, they spend time directly observing users in their
natural context, without interrupting or interfering with their actions.
This approach allows designers to understand how users interact with
products, services, or environments and how they overcome challenges or
frustrations.
Key aspects of observational empathy include:
Active Observation:
Designers keenly observe users' behaviors, gestures, facial expressions, and
body language to understand their emotions and reactions.
Listening and Note-taking:
They listen attentively to user’s conversations and take notes on their
experiences, pain points, and unmet needs.
Contextual Understanding:
Observational empathy takes place in the real environment where users use the
product or service, providing context rich information for design decisions.
Identifying Unspoken Needs:
Through observation, designers can identify needs that users may not
explicitly communicate or may not be aware of themselves.
Avoiding Assumptions:
Observational empathy helps designers avoid making assumptions about
user’s preferences or behaviors, as it relies on direct evidence.
