lOMoAR cPSD| 36071472

CCS370 UI AND UX DESIGN

UNIT I FOUNDATIONS OF DESIGN

UI vs. UX Design - Core Stages of Design Thinking - Divergent and Convergent

Thinking -Brainstorming and Game storming - Observational Empathy

OUTCOME

To create seamless, intuitive, and enjoyable digital

experiences for users. This is crucial because well-
designed user interfaces can significantly impact
customer satisfaction, brand loyalty, and overall business
success.

Prepared By Verified By

1
 lOMoAR cPSD| 36071472

UNIT I FOUNDATIONS OF DESIGN

UI vs. UX Design - Core Stages of Design Thinking - Divergent and Convergent

Thinking -Brainstorming and Game storming - Observational Empathy

T / R* Mode of
Teaching
(Google
Sl. Periods Meet/BB / Blooms Level
Topic(s) [Link] Required PPT / (L1-L6)
CO
No. Book
NPTEL /
MOOC / etc
)
UNIT I:FOUNDATIONS OF DESIGN (6)
1 R1 WB CO1
1.1 UI vs. UX Design 3 2 L1
2 R1 WB/ PPT CO1

3 1.2 Core Stages of Design Thinking 5 R1 1 WB L1,L4 CO1

4 1.3 Divergent and Convergent Thinking 7 R1 1 WB L1,L4 CO1

5 R1 WB CO1
1.4 Brainstorming and Game storming 10 2 L1,L4
6 R1 WB/PPT CO1

7 1.5 Observational Empathy 14 R1 1 WB L1 CO1

Text Books

1. Joel Marsh, UX for Beginners, OReilly , 2022

1
[Link] Yablonski, Laws of UX using Psychology to Design Better Product & Services OReilly 2021

REFERENCES

1. Jenifer Tidwell, Charles Brewer, Aynne Valencia, “Designing Interface” 3 rd Edition ,O’Reilly 2020
2. Steve Schoger, Adam Wathan “Refactoring UI”, 2018
3. Steve Krug, “Don't Make Me Think, Revisited: A Commonsense Approach to Web &Mobile”, Third Edition, 2015
4. [Link]
5. [Link]

CO1 Undertand Foundation of Design

Level 1 (L1) : Remembering Level 4 (L4) : Analysing

Level 2 (L2) : Understanding Level 5 (L5) : Evaluating

Level 3 (L3) : Applying Level 6 (L6) : Creating

2
 lOMoAR cPSD| 36071472

1.1 UI vs. UX Design:

What is UI?
UI stands for user interface.
It is the point of contact between humans and computers.
For example, screens, sounds, overall style, and responsiveness are all elements of UI. A
user interface involves the following four components:
1. Navigational elements. Navigational elements help users navigate an interface.
Example: slide bars, search fields, and back arrows.
2. Input controls. On-page elements that enable users to input information are
inputcontrols.
Example: Buttons, checkboxes, and text fields
3. Informational components. Informational components are used to communicate
information to the user.
Example: A progress bar
4. Containers. Containers organize content into easily digestible [Link]:
accordion menu

UI design UX design
Focuses on interaction design, Focuses on satisfying user intent and providing a clear
the visual elements of a website navigation path to access information on a site or app.
or application, and ensuring a
navigation path is visually
attractive and effortless to use.

What is UI design?

User interface (UI) design is the process designers use to build interfaces in software or
computerized devices, focusing on looks or style. User interface design is responsible for a
product'sappearance, interactivity, usability, behavior, and overall feel.

Types of UI design

Many different types of UI design exist. The table below compiles a few of the most popular
andwell-known.

Graphical User Interface(GUI): A graphical user interface allows users to

interactwith a device through graphical icons.

Example: laptop’s desktop or home screen

3
4|Page

Voice user interface (VUI) : VUI uses speech recognition to understand voice
commands.

Example: iPhone’s Siri, Google Home’s “hey google” feature, and

Amazon’s
Alexa.

Menu-driven interface: Menu-driven interfaces provide users with command

optionsvia a list or a menu.

Example: ATMs and digital parking meters.

Additional types of UI design include

 Touch screen user interfaces are GUIs that use touch screen
technology ratherthan a mouse or stylus.

 Form-based user interfaces use text boxes, checkboxes, and other

informationalcomponents. They enable users to fill out electronic
forms.

Tips for excellent UI design

Simplicity, familiarity, and consistency are a few of the most important principles for
a UI designer to keep in mind. Consider the following UI design tips from industry experts
like Apple andGoogle.
Format content to fit the screen of the intended device. Users should not need
to zoom
or scroll horizontally to view the entirety of a page’s content.
Ensure there is adequate contrast between the background and page elements like
text toincrease legibility.
Alignment doesn’t just apply to text. Buttons and images must also be
aligned to
demonstrate relevance and relativity to users.
High image resolution is essential for all image assets.
Make sure your UI design is responsive. Whether users view the UI on a large
screen, small screen, in portrait mode, or landscape mode, they should be able to
read and maneuver it with ease.

Key principles of UI design

An easy way to recall the fundamental principles of UI design is to learn the four c’s:
Control. The users should be in control of the interface.
Consistency. Use common elements to make your UI predictable and easy to
navigate, evenfor novice users.
Comfortability. Interacting with a product should be an effortless, comfortable
experience.
Cognitive load. It’s critical to be mindful of bombarding users with content. Be as
clear and
concise as possible.
5|Page

UI Design Tools:
Figma
Adobe XD
Sketch
InDesign

Guidelines:

1. Make buttons and other common elements perform predictably (including

responsessuch as pinch-to-zoom) so users can unconsciously use them everywhere.
2. Maintain high discoverability. Clearly label icons and include well-indicated
affordances:e.g., shadows for buttons.
3. Keep interfaces simple (with only elements that help serve users’ purposes) and
createan “invisible” feel.
4. Respect the user’s eye and attention regarding layout. Focus on hierarchy and
readability:

a. Use proper alignment. Typically choose edge (over center) alignment.

b. Draw attention to key features using:

i. Color, brightness and contrast. Avoid including colors or buttons

excessively.
ii. Text via font sizes, bold type/weighting, italics, capitals and distance
betweenletters. Users should pick up meanings just by scanning.
5. Minimize the number of actions for performing tasks but focus on one chief
functionper page. Guide users by indicating preferred actions.
6. Put controls near objects that users want to control. For example, a button to
submit aform should be near the form.
7. Keep users informed regarding system responses/actions with feedback.
8. Use appropriate UI design patterns to help guide users and reduce burdens (e.g.,
pre-fillforms). Maintain brand consistency.
9. Always provide next steps which users can deduce naturally, whatever their
context.

1.2 CORE STAGES OF DESIGN THINKING PROCESS:

Design thinking is a methodology which provides a solution-based approach to
solvingproblems.
Design thinking is a non-linear, iterative process

It is important to note the five stages of design thinking are not always sequential.
They do not have to follow a specific order, and they can often occur in parallel or be
repeated iteratively.
6|Page

The five stages of design thinking are:

Empathize: research your users' needs.

Define: state your users' needs and problems.
Ideate: challenge assumptions and create ideas.
Prototype: start to create solutions.
Test: try your solutions out.

Stage 1: Empathize—Research Your Users' Needs

In the first phase of design thinking you gain real insight into users and their needs.
Focuses on user-centric research. You want to gain an empathic understanding
of theproblem you are trying to solve.

Stage 2: Define—State Your Users' Needs and Problems

Define the problem statement in a human-centered manner.

Organize the information you have gathered during the Empathize stage.

Analyze your observations to define the core problems.

Defining the problem and problem statement must be done in a human-

centeredmanner.

Stage 3: Ideate—Challenge Assumptions and Create Ideas

Identify innovative solutions to the problem statement you’ve created.

Look at the problem from different perspectives and ideate innovative solutions
to yourproblem statement.

There are hundreds of ideation techniques such as Brainstorm, Brainwrite, Worst

PossibleIdea and SCAMPER.
7|Page

Brainstorm and Worst Possible Idea techniques are typically used at the start of the
ideationstage to stimulate free thinking and expand the problem space

Stage 4: Prototype—Start to Create Solutions

Identify the best possible solution.

The design team will now produce a number of inexpensive, scaled down versions of
the product (or specific features found within the product) to investigate the key
solutions generated in the ideation phase.

These prototypes can be shared and tested within the team itself, in other
departments or ona small group of people outside the design team.

This is an experimental phase, and the aim is to identify the best possible solution
for eachof the problems identified during the first three stages.
The solutions are implemented within the prototypes and, one by one, they are
investigatedand then accepted, improved or rejected based on the users’ experiences.

Stage 5: Test—Try Your Solutions Out

Test solutions to derive a deep understanding of the product and its users.

Knowledge acquired in the latter stages of the process can inform repeats of earlier
stages.

1.3 CONVERGENT AND DIVERGENT THINKING:

Divergence and convergence is a problem-solving method that emphasizes

empathy,experimentation, and iteration.
It is a human-centered design approach that focuses on understanding people's
needs,behaviors, and motivations to design creative solutions that meet those needs
effectively.
Coined by psychologist J.P. Guilford in the 1950s
These cycles of thinking provide the structure for this iterative design thinking
process.
Divergence and convergence are like the inhale and exhale of the design thinking
process.

Divergence vs convergence

Divergence creates space and possibilities, while convergence brings focus and
direction.
Designers move back and forth between these two processes throughout the design
thinking process, building on the insights and ideas generated during each cycle
to refine andimprove the solution.
Divergent and convergent phases are non-linear.
8|Page

Divergence Thinking:
Divergence is the process of exploring and generating a wide range of ideas and
possibilitieswithout any judgment or criticism.

Divergent thinking allows designers to expand the possibilities and consider

differentperspectives, angles, and dimensions of the problem

Convergent Thinking:
 Convergent thinking refers to the process of selecting, evaluating, and refining
the mostpromising ideas from the divergent phase.
 It involves narrowing down and refining possibilities by selecting the best
ideas andcombining them to create a coherent and effective solution.
Benefits of divergent and convergent thinking

Increased creativity and innovation

Better decision-making
Human-centered design
9|Page

Enhanced problem-solving
Improved collaboration

How to apply divergent and convergent thinking

1. Diverge to ideate
 Generate a wide range of ideas without judgment or criticism in a brainstorming
session orother quick ideation exercise.
 Use this discovery period to identify the problem and encourage team members to
come upwith many possible solutions.

Conducting a Brainstorm template

Use this template to hit the ground running with big ideas that will move your
designprocess forward.

 The group can vote to select which captures the problem at hand, or the
facilitator canassign a question to each participant.
 Set aside some time for the group to brainstorm on their own, and then bring
everyonetogether to build upon and clarify the ideas.

2. Converge to evaluate the ideas

 Evaluate the ideas based on feasibility, viability, and desirability using decision
matrices,prioritization grids, or other evaluation tools.
 The goal in this convergent phase is to clearly define the problem, then understand
and map any assumptions behind the ideas, and clarify the requirements for an
effective solution.
 Evaluate the ideas the team has so far with the Critique template.

How to run a critique

1. Present the ideas and context from the brainstorming session

2. Invite feedback across three categories: what went well, what didn’t go
well, and
what could be improved
3. Gather the feedback, organize it by theme, and create actionable next steps
withinthe same workspace

3. Diverge again to develop and prototype

Based on the requirements, begin finding solutions that meet requirements
andaddress end-user pain points and concerns.
Improve upon the selected ideas using prototyping and user testing, gathering
feedbackfrom stakeholders to ensure that the final solution meets their needs and
preferences.

4. Converge again to further refine

The final divergent step involves refining the solution, testing it for viability, and
getting thebuy-in and resources to implement it..
10 | P a g e

5. Implement

Implement the selected ideas and monitor their effectiveness, iterating the process as
neededto continue improving the customer experience.

Tips to get the most out of divergent & convergent exercises

1. Use a variety of ideation techniques

2. Avoid premature judgment
3. Test early and often
4. Be open and adaptable
5. Use a visual tool to make collaboration easier

1.4 BRAINSTORMING

Definition of brainstorming

Brainstorming is a creative thinking technique for coming up with new ideas and
solvingproblems.
Teams use this ideation method to encourage new ways of thinking and collectively
generate solutions.
Brainstorming encourages free thinking and allows for all ideas to be voiced without
judgment, fostering an open and innovative environment.
This process typically involves a group of people, although it can be done
individually as well.
Brainstorming usually takes place in a group setting where people get together to
creatively solve problems and come up with ideas.
However, it’s also useful for individuals who need to explore novel solutions to a
problem. Sitting down by yourself and writing down solutions to potential problems
is a great way to brainstorm individually.

Purpose of brainstorming:

The primary purpose of a brainstorming session is to generate and document many

ideas, no
matter how “out there” they might seem.
Through this lateral thinking process, inventive ideas are suggested, which sparks
creativesolutions.
By encouraging everyone to think more freely and not be afraid to share their
ideas, teams
can build on each other’s thoughts to find the best possible solution to a problem.
Benefits of brainstorming

Encourages creativity

Brainstorming sessions are meant to be free of judgment. Everyone involved is meant

to feel safe and confident enough to speak their minds. There will be some good and some
11 | P a g e

bad ideas, but this doesn’t matter as long as the final outcome is one that can solve the
problem.

Fosters collaboration and team building

Brainstorming is not only good for problem-solving. It also allows employees and
team members to understand how the people around them think. It helps the team get to
know each other’s strengths and weaknesses..

Generates innovative, revolutionary ideas

Brainstorming is the perfect mix between a free-thinking, creative environment
and one that is governed by rules. No two people think alike. So, combining the good
parts of everyone’s answers will result in holistic and revolutionary solutions.

Establishes different perspectives

One of the major benefits of brainstorming is that it allows and encourages all
members of the session to freely propose ideas. This type of environment fosters courage
in people who may not usually offer their perspective on a problem.

Introduces many ideas quickly

Brainstorming encourages teams to come up with many ideas in a relatively short
period of
time.

Types of brainstorming techniques:

1. Reverse brainstorming
In a typical brainstorming session, the group is asked to consider solutions to a
problem. Reverse brainstorming is simply the opposite: teams are asked to ideate on the
problem instead of the solution. This type of brainstorming is done before the start of an
important project, as it helps teams anticipate any future obstacles that might arise.

2. Random word brainstorming

One of the main goals of a brainstorming session is to come up with new ideas. One of
the best ways to do this is to say the first words that come to mind when a specific topic or
subject is mentioned. Random word brainstorming allows for exactly that. The team is given
a problem, and they need to shout out the first words that they think of, regardless of what
they are. These words are then written down and later put into interesting combinations to
see if they will lead to a usable solution. This brainstorming method is extremely fast and
usually very efficient at solving a definedproblem.

3. The 5 Whys Method

Like the reverse brainstorming method, the 5 Whys method aims to look at the root
causes of a problem to stop that same issue from arising again. This method attempts to curb
the problem before it can reoccur by asking the question “why?” over and over until it can no
longer be answered. Once you reach this stage, you have arrived at the root cause of the
issue.

4. SCAMPER model
Developed by Bob Earle, an author of creativity books for kids, the SCAMPER
12 | P a g e

model was originally a game aimed at imagination development in adolescents. It has,

however, become popular in the corporate world as a means of improving and encouraging
creativity in team members when dealing with complex, defined problems. Using this
model, your team will view a problem through 7 filters: substitute, combine, adapt, modify,
put to another use, eliminate, and reverse.

5. Rapid ideation
Rapid ideation brainstorming is almost the exact same thinking model as random
word brainstorming. In this method, however, everyone writes down the solutions they are
thinking of instead of shouting them out. This gives participants a bit more privacy with their
immediate thoughts — possibly leading to even more creative and revolutionary outcomes.

6. Starbursting
Once again, brainstorming can change based on the team’s perspective and each
session’s expected outcome. Starburst brainstorming focuses on getting the team to ask
questions instead of coming up with answers.

How to hold a brainstorming workshop:

1. Assign a facilitator
When done as a group, a brainstorming session needs to have boundaries. You need
to choose someone who will facilitate the session and provide guidelines for the thinking
exercises. This is so the session doesn’t get too scattered and stays on the right track. The
facilitator should pose questions and guide the group from start to finish.
2. Establish context and ensure group understanding
A brainstorming session cannot be properly carried out without context. The group
must understand why they are meeting and what the end goal of the session is.. The
brainstormingmethod that will be used should also be established and explained at the outset.

3. Define an objective
While brainstorming is often looked at as a form of free-thinking creativity, it is
best to try to stay within certain rules. It’s essential that you define a clear objective and use
the session to reach your predetermined goal.

4. Set a time limit

Setting a defined time limit before the session starts is important to the success of
your brainstorming session. No doubt your team could come up with countless ideas, but
there has to bea limit on how long the session can run.

5. Decide on the brainstorming technique

The brainstorming technique that will be used must be decided on before the session
begins. The best way to do this is to look at the problem at hand. If you’re looking to
prevent obstacles from arising in the future, try the “5 Whys” technique. If you’re looking to
come up with new marketing ideas or get creative with workplace conflicts, try the rapid
ideation technique.
13 | P a g e

6. Set some ground rules

Brainstorming ground rules are essential to to the success of the session, as they keep
everyone focused on the topic at hand and ensure that no one goes off track.

7. Capture all ideas

The entire point of a brainstorming session is to come up with as many ideas as
possible, regardless of whether the standalone suggestion will lead to success. This means
that you need to use the right tools to document the ideas being suggested.

8. Discuss and vote on ideas

After all the ideas have been captured, it’s time to discuss them. The team needs to be
productive in choosing a creative idea that suits the problem, or they can try combining a few
ideas to come up with a holistic solution. To make decisions as a group and come to an
agreement, teams can use the dot voting method. This technique reveals group priorities and
helps everyone reach a consensus on the direction to take.

9. Turn ideas into action

Once the final idea has been chosen, it’s time to create a plan of action and a deadline
for the
idea to be put in place.

Tips for brainstorming activities

Record all ideas

If you want to have a successful and productive brainstorming session, it’s
important that you capture every idea suggested, good and bad. An idea might seem silly
when first brought up, but it might become an invaluable idea as the session moves on.
Capture everything,and right at the end, work out which ideas best suit the problem.
Ensure that everyone’s ideas are heard
When brainstorming is done as a group activity, everyone needs to feel
comfortable and confident to propose ideas. The best way to make sure the
environment fosters these feelings is to make the session feel like a conversation, not
a presentation. Create a safe and open environment that gives everyone equal
opportunity to voice their opinions and ideas.

Focus on quantity
People often like to say, "Focus on quality, not quantity," but it’s the opposite when
brainstorming. In a brainstorming session, you should focus on getting as many ideas
on the board as possible, even if they're only one-word ideas. These can all be used to
come to a holistic solution at the end of the session.

Mix it up
Brainstorming should be a fun and creative endeavor. You shouldn’t be too
rigid — though some ground rules are important. If your team has weekly
brainstorming sessions, try new brainstorming techniques and activities each time
you meet. This will keep your team members on their toes and help make them
excited about the next meeting.
14 | P a g e

Avoid criticism

There are no bad ideas in a brainstorming session. This is the attitude that all
team members must adopt when entering the session. No one should be criticized for
the ideas that they propose.

1.5 OBSERVATIONAL EMPATHY:

Empathy is defined as “the action of understanding, being aware of, being sensitive
to, and vicariously experiencing the feelings, thoughts, and experience of another without
having the feelings, thoughts, and experience fully communicated in an objectively explicit
manner.”

Designers need to build empathy for their users in order to take the right course of
action. It’s important to understand how the user feels when interacting with a certain
product or interface; does the layout of this website evoke feelings of frustration? What
emotions does the user go through when navigating this app?

Where does empathy fit into the Design Thinking process?

Empathy is considered the starting point for any design project, and constitutes
phase oneof the Design Thinking process.
During empathize phase, the designer spends time getting to know the user and
understanding their needs, wants, and objectives.
The empathize phase requires you to set aside your assumptions.
The first step in empathizing with your users is to suspend your own view of the world
around you in order to truly see it through your users’ eyes. When it comes to Design
Thinking and human-centered design, it’s time to stop guessing and start gathering
real insights about the user!
What is empathic design?

One of the main objective of empathize stage is to identify user needs and
behaviors that are latent, or unarticulated. As a designer, it’s important to distinguish
between what people saythey would do in a certain situation, and what they actually do.

Empathic research and design is not concerned with facts about the user, such as their age or
location. Rather, it focuses on their feelings towards a product and their motivations in
certain situations. Why do they behave in a certain way? Why do they prefer to do this
instead of that? Why do they click here rather than there when presented with a particular
screen or page?

How to become a more empathic designer

 Practice empathy in your everyday life
 The power of facial expressions
 Assume a beginner’s mindset (Listen, don’t judge!)
 Pay attention to body language
15 | P a g e

Key empathy-building methods

1. Empathy interviews

One way to build empathy is by conducting empathy interviews. The key to an

effective empathy interview is to structure it as an open conversation; don’t try to steer the
session with a set list of questions. Remember, the goal is to uncover as much insight as
possible—not to confirm or negate a preconceived notion. Excellent tips on interviewing for
empathy: constantly asking “why?”
,asking non-binary questions, encouraging storytelling, and paying attention to nonverbal
cues.

2. Immersion and observation

It is also extremely useful to observe your users in action, be it in their natural

environment or immersed in a certain situation. Observing your users, either by
photographing or videoing them, helps to identify needs, motivations, or challenges that
they’re not aware of—and therefore not able to articulate.

There are several ways of observing your users.

One option is to bring them in and observe them while they interact with the
product, or problem, you are trying to design for. You might video them or
record their screen as they navigate a website.
Another option is to ask your users to keep their own photo or video journal
over a certain time period, or while completing certain tasks in their everyday
lives. The advantage of this is that your users aren’t so aware of being watched
and may therefore act more naturally.

3. Extreme users

In their quest to build empathy and truly understand the problem that their users face,
designers will often turn to extreme users. Extreme users help to reframe the problem and
uncover
new insights: “Extreme users’ needs are somewhat amplified. They need less or more of
something
to solve their problems. They often find workarounds to existing problems, unlike average
users.”

Engaging with extreme users can help you to identify problems and needs that so-called
mainstreamusers.

4. Constant curiosity: Ask what, how, and why?

Throughout the empathise phase, you should constantly be considering the what, how,
and why of your users’ behaviour. The what-how-why framework can help you translate
your (assumption-free) observations into more abstract user motivations. Divide your page
into three sections and break down what you’ve observed as follows:
16 | P a g e

What? Refers to the details of what has happened: for example, the user took the
following actions when entering their payment details on an ecommerce website.
How? Here you will consider how the user has completed these actions. What were
their facial expressions? Were they exerting a lot of effort? Did they seem at ease,
frustrated, or confused?
Why? Now it’s time to make some educated guesses about the user’s
motivations and
emotions as they complete these tasks.

5. Empathy maps

Empathy maps are another great tool not only for getting to know your users, but for
sharing this knowledge across the wider team. An empathy map is “a collaborative
visualization used to articulate what we know about a particular type of user.

Empathy mapping requires you to consider your users in relation to four different quadrants:

1. Says: Contains direct quotes based on what the user has said, for example during an
empathy interview.
2. Thinks: Considers what the user might be thinking, but may not want to explicitly
reveal.
For example: “Am I stupid for not being able to navigate this website?”
3. Does: Looks at concrete actions the user takes, for example: refreshing a page,
clicking abutton, comparing different options before making a purchase.
4. Feels: Considers what emotions the user is experiencing at certain points. For
example:
“Frustrated: Can’t find what they are looking for on the page.”

After the empathise phase, you’ll go on to define your problem statement based
on what
you’ve learned about your users. This will then be followed by ideation, prototyping, and
testing.