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
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 input
controls.
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 sections.
Example: accordion menu

UI design UX design

Focuses on interaction design, the

visual elements of a website or
Focuses on satisfying user intent and providing a
application, and ensuring a
clear navigation path to access information on a
navigation path is visually
site or app.
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's
appearance, 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 and
well-known.

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

with a device through graphical icons.

Example: laptop’s desktop or home screen

 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 options

via 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 rather
than a mouse or stylus.

 Form-based user interfaces use text boxes, checkboxes, and other informational
components. 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 and
Google.
 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 to
increase 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, even
for 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.
UI Design Tools:

 Figma

 Adobe XD

 Sketch

 InDesign
Guidelines:

1. Make buttons and other common elements perform predictably (including responses
such 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 create
an “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 between
letters. Users should pick up meanings just by scanning.
5. Minimize the number of actions for performing tasks but focus on one chief function
per page. Guide users by indicating preferred actions.
6. Put controls near objects that users want to control. For example, a button to submit a
form 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-fill
forms). Maintain brand consistency.
9. Always provide next steps which users can deduce naturally, whatever their context.
CORE STAGES OF DESIGN THINKING PROCESS:
 Design thinking is a methodology which provides a solution-based approach to solving
problems.
 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.

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 the
problem 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-centered

manner.
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 your
problem statement.

 There are hundreds of ideation techniques such as Brainstorm, Brainwrite, Worst Possible
Idea and SCAMPER.

 Brainstorm and Worst Possible Idea techniques are typically used at the start of the ideation
stage 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 on
a small group of people outside the design team.

 This is an experimental phase, and the aim is to identify the best possible solution for each
of the problems identified during the first three stages.

 The solutions are implemented within the prototypes and, one by one, they are investigated
and 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.

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 and
improve the solution.
 Divergent and convergent phases are non-linear.

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

 Divergent thinking allows designers to expand the possibilities and consider different
perspectives, angles, and dimensions of the problem

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

 Increased creativity and innovation

 Better decision-making
 Human-centered design
 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 or
other quick ideation exercise.
 Use this discovery period to identify the problem and encourage team members to come up
with many possible solutions.

Conducting a Brainstorm template

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

 The group can vote to select which captures the problem at hand, or the facilitator can
assign a question to each participant.
 Set aside some time for the group to brainstorm on their own, and then bring everyone
together 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 within
the same workspace

3. Diverge again to develop and prototype

 Based on the requirements, begin finding solutions that meet requirements and
address end-user pain points and concerns.
 Improve upon the selected ideas using prototyping and user testing, gathering feedback
from 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 the
buy-in and resources to implement it..
5. Implement

 Implement the selected ideas and monitor their effectiveness, iterating the process as needed
to 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

BRAINSTORMING

Definition of brainstorming

 Brainstorming is a creative thinking technique for coming up with new ideas and solving
problems.
 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 creative
solutions.
 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 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 defined
problem.
 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 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 brainstorming
method 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 be
a 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.

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.

 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.

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 one
of 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 say
they 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
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 mainstream
users.

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:

 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 a
button, 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.