CCS370 UI AND UX DESIGN

UNIT 1 - 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
UI is short for ―User Interface. UI focuses on the screens, icons, buttons, visual
elements, and interfaces in a user experience.
User interface (UI) design is the process designers use to build interfaces in
software or computerized devices, focusing on looks or style. Designers aim to
create interfaces that users find easy to use and pleasurable. UI design refers
to graphical user interfaces and other forms—e.g., voice-controlled interfaces.

How to Design User Interfaces for Users

User interfaces are the access points where users interact with designs. They
come in three formats:

Graphical user interfaces (GUIs): Users interact with visual representations

on digital control panels. A computer’s desktop is a GUI.
Voice-controlled interfaces (VUIs): Users interact with these through their
voices. Most smart assistants, E.g., Siri on iPhone and Alexa on Amazon devices
—are VUIs.
Gesture-based interfaces: Users engage with 3D design spaces through
bodily motions—e.g., in virtual reality (VR) games.
To design UIs best, you should consider
User’s judgment and care about usability and likeability.
 They don’t care about your design, but about getting their tasks
done easily and with minimum effort.
 Your design should therefore be “invisible”: Users shouldn’t focus on it
but on completing tasks: e.g., ordering pizza on Domino’s Zero Click app.
 So, understand your users’ contexts and task flows (which you can find
from, e.g., customer journey maps), to fine-tune the best, most intuitive
UIs that deliver seamless experiences.
UIs should also be enjoyable (or at least satisfying and frustration-free).
 When your design predicts users’ needs, they can enjoy more
personalized and immersive experiences. Delight them, and they’ll keep
returning.
 Where appropriate, elements of gamification can make your design more
fun.
UIs should communicate brand values and reinforce users’ trust.
 Good design is emotional design. Users associate good feelings with
brands that speak to them at all levels and keep the magic of pleasurable,
seamless experiences alive.
Learn the basic principles of UI Design.
To deliver impressive GUIs, remember—users are humans, with needs such
as comfort and a limit on their mental capacities. You should follow these
guidelines:
 Make buttons and other common elements perform
predictably (including responses such as pinch-to-zoom) so users can
unconsciously use them everywhere. Form should follow function.
 Maintain high discoverability. Clearly label icons and include well-
indicated affordances: e.g., shadows for buttons.
 Keep interfaces simple (with only elements that help serve users’
purposes) and create an “invisible” feel.
 Respect the user’s eye and attention regarding layout. Focus on
hierarchy and readability:
  Use proper alignment. Typically choose edge (over center)
alignment.
 Draw attention to key features with:
 Color, brightness and contrast. Avoid including colors
or buttons excessively.
 Text via font sizes, bold type/weighting, italics, capitals
and distance between letters. Users should pick up
meanings just by scanning.
 Minimize the number of actions required to perform tasks but focus
on one chief function per page. Guide users by indicating preferred
actions. Ease complex tasks by using progressive disclosure.
 Put controls near objects that users want to control. For example, a
button to submit a form should be near the form.
 Keep users informed regarding system responses/actions with
feedback.
 Use appropriate UI design patterns to help guide users and reduce
burdens (e.g., pre-fill forms). Beware of using dark patterns, which
include hard-to-see prefilled opt-in/opt-out checkboxes and sneaking
items into users’ carts.
 Maintain brand consistency.
 Always provide the next steps that users can deduce naturally,
whatever their context.
 Tailor your UI design to the platform or device on which it’s used.
E.g., the UI of mobile UX will be different from that of the desktop
experience.
 Investigate UI design trends
 Like neumorphism, skeuomorphism and glassmorphism to see
whether they will work in your design, and potentially enhance
it.
User Experience (UX) Design
User experience (UX) design is the process design teams use to create
products that provide meaningful and relevant experiences to users.
 UX design involves the design of the entire process of acquiring and
integrating the product, including aspects of branding, design, usability and
function.
UX design considers the elements that shape a user’s experience with a
product or service, how these elements make the user feel, and how easy it is
to accomplish their desired tasks.
This could mean anything from how a physical product feels in your
hand to how straightforward the checkout process is when buying something
online. The goal of UX design is to create easy, efficient, relevant, and all-
around pleasant experiences for the user.
“User experience encompasses all aspects of the end-user’s
interaction with the company, its services, and its products.”
— Don Norman, Cognitive Scientist & User Experience
Architect
UX designers combine market research, product development, strategy,
and design to create seamless user experiences for products, services, and
processes.
They build a bridge to the customer, helping the company to better
understand—and fulfill—their needs and expectations.
Difference between UI and UX
Summarization
https://www.interaction-design.org/literature/topics/ux-design
The 7 principles of design
The principles of design are the rules you must follow to create an effective and
attractive design composition. The fundamental principles of design are: Emphasis,
Balance and Alignment, Contrast, Repetition, Proportion, Movement and White
Space.
Design differs from art in that it has to have a purpose. Visually, this
functionality is interpreted by making sure an image has a center of attention, a point
of focus.
Shneiderman’s Eight Golden Rules Will Help You Design
Better Interfaces
Ben Shneiderman (born August 21, 1947) is an American computer scientist
and professor at the University of Maryland Human-Computer Interaction Lab. His
work is comparable to other contemporary design thinkers like Don Norman and
Jakob Nielsen. In his popular book "Designing the User Interface: Strategies for
Effective Human-Computer Interaction", Shneiderman reveals his eight golden rules
of interface design:
 Strive for consistency by utilizing familiar icons, colors, menu hierarchy, call-
to-actions, and user flows when designing similar situations and sequence of
 actions. Standardizing the way information is conveyed ensures users are able
to apply knowledge from one click to another; without the need to learn new
representations for the same actions. Consistency plays an important role by
helping users become familiar with the digital landscape of your product so they
can achieve their goals more easily.
 Enable frequent users to use shortcuts. With increased use comes the
demand for quicker methods of completing tasks. For example, both Windows
and Mac provide users with keyboard shortcuts for copying and pasting, so as
the user becomes more experienced, they can navigate and operate the user
interface more quickly and effortlessly.
 Offer informative feedback. The user should know where they are at and what
is going on at all times. For every action there should be appropriate, human-
readable feedback within a reasonable amount of time. A good example of
applying this would be to indicate to the user where they are at in the process
when working through a multi-page questionnaire. A bad example we often see
is when an error message shows an error-code instead of a human-readable and
meaningful message.
 Design dialogue to yield closure. Don’t keep your users guessing. Tell them
what their action has led them to. For example, users would appreciate a “Thank
You” message and a proof of purchase receipt when they’ve completed an online
purchase.
 Offer simple error handling. No one likes to be told they’re wrong, especially
your users. Systems should be designed to be as fool-proof as possible, but
when unavoidable errors occur, ensure users are provided with simple,
intuitive step-by-step instructions to solve the problem as quickly and
painlessly as possible. For example, flag the text fields where the users forgot to
provide input in an online form.
 Permit easy reversal of actions. Designers should aim to offer users obvious
ways to reverse their actions. These reversals should be permitted at various
points whether it occurs after a single action, a data entry or a whole sequence
of actions. As Shneiderman states in his book:
“This feature relieves anxiety, since the user knows that errors can be
undone; it thus encourages exploration of unfamiliar options”
  Support internal locus of control. Allow your users to be the initiators of
actions. Give users the sense that they are in full control of events occurring in
the digital space. Earn their trust as you design the system to behave as they
expect.
 Reduce short-term memory load. Human attention is limited and we are only
capable of maintaining around five items in our short-term memory at one time.
Therefore, interfaces should be as simple as possible with proper information
hierarchy, and choosing recognition over recall. Recognizing something is
always easier than recall because recognition involves perceiving cues that help
us reach into our vast memory and allowing relevant information to surface.
 For example, we often find the format of multiple choice questions easier
than short answer questions on a test because it only requires us to
recognize the answer rather than recall it from our memory. Jakob
Nielsen, a user advocate who’s been called one of the “world’s most
influential designers” by Bloomberg Businessweek has invented
several usability methods including heuristic evaluation. Recognition
over recall is one of Nielsen’s ten usability heuristics for interface design.
Learn How Apple Integrates Shneiderman’s 8 Golden Rules
Apple Inc., a large North American technology company is a great example of
how designs reflecting Shneiderman’s eight golden rules can lead to successful
products. The company has achieved great success in everything from their
Macintosh to their mobile devices. They pride themselves in their consistent, intuitive
and beautiful designs. Apple’s iOS Human Interface Guidelines, shared publicly in
mid-2014, offers a glimpse into how their design team has been applying design
principles like Shneiderman’s.
1. Consistency
“Consistency” and “Perceived Stability” are woven into the design of Apple’s
Mac OS. The Mac OS Menu Bar is designed to contain consistent graphic elements
regardless of whether it’s a version from the 1980’s or the 2010’s.
 The look ofMac OS over time. Mac OS Menu Bar stays consistent.

2. Shortcuts
As mentioned previously, Mac allows users to use a variety of keyboard
shortcuts, commonly used examples include copy and paste (Command-C and
Command-V), and taking screenshots (Command-Shift-3).

Mac allow users to forgo mouse-clicks by providing them with

keyboard shortcuts.

3. Informative Feedback
A great example of visual feedback can be seen when a file becomes
“highlighted” as the user clicks on a file on a Mac desktop. Another example is when the
user drags a folder across the desktop, they can see the folder represented as
physically being moved as they hold down their mouse.

The ‘Learning’ folder becomes highlighted as the user clicks on a

folder on a Mac desktop.

The folder is represented as physically being moved as the user

holds down the mouse and drags a folder across the desktop.

4. Dialogue
As the user installs software to the Mac OS, an informative screen shows what
step the user is currently at in their installation.
As the user installs the program “Parallels Desktop 9”, it shows
that it is currently “copying files”.

5. Error handling
During software installation, users are gently alerted with an informative
message if an error was made. It is important to recognize when to use smaller, less
intrusive alerts and when to use greater alerts to warn a user depending on the
severity of the error at hand. However, it is almost never acceptable to punish the user
when errors are made, so be cautious and select the right tone and the right language
when drafting an error message that will ultimately be read by your human-users. So
don’t simply leave an error-code to “handle” it!
A gentle error message is shown explaining to the user what was
happening and why it was happening. It even goes further to reassure
the user, telling them that they are in control (see ‘Support Internal
Locus of Control’ below) by explaining that this is due to their own
security preference choices.
A bad example by Windows displays an error message that uses
the words “fatal” and “terminated”. Such negative, unfriendly
words are sure to scare away most users!

6. Permit reversal of actions

When users make an error in providing information during the installation
process, they are allowed to go back to the previous step instead of being “punished”
by having to start over.

The user can undo a previous action quickly and easily.

7. Support internal locus of control

Give users the power to choose whether to continue running the program or
exit from it. Mac’s Activity Monitor allows the user to ‘Force Quit’ when a program has
unexpectedly crashed.

The user is able to Quit or Force Quit a program if it crashes.

8. Reduce short-term memory load

As humans are only capable of retaining 5 items in our short term memory at
one time, the Apple iPhone has stuck with allowing only 4 app icons to sit in the main
menu area at the bottom of the screen. This decision does not only involve
consideration of memory load but also considers consistency as well.

Great examples of how Apple implements the rules of consistency (1st

rule) by displaying the same bottom menu across different versions of
the iOS. This is also a great example of how Apple reduces short-term
memory load (8th rule). As humans are only capable of retaining 5 items
in our short term memory at one time, the Apple iPhone has stuck with
allowing only 4 app icons to sit in the main menu area at the bottom of
the screen, regardless of whether it’s the iOS 4 or the iOS 7.

Core Stages of Design Thinking

Design thinking is a user-centric approach to problem-solving and is often
employed by companies to overcome complex challenges in innovative ways. It’s
especially effective when applied to problems that are ill-defined or unknown.
There are five key steps in the design thinking process: empathize, define, ideate,
prototype, and test. One thing to keep in mind is that the process isn’t always linear:
any one of the five stages of the design thinking process could spark an idea or
outcome that leads to repeating an earlier stage. For this reason, the design thinking
approach is often referred to as a non-linear, iterative process.
Stage 1: Empathy

During this stage, design teams set aside their own biases and work to
gain a deeper understanding of real users and their needs—often through
direct observation and engagement.

Empathy is one of the most crucial phases of design thinking. After all,
how can you hope to solve a user’s problem if you don’t understand who the
user is and what they want? Empathy creates an emotional bridge between
designers and target users, one that facilitates the kind of deep user insights at
the heart of human-based design thinking.
Some tools and methods commonly used to conduct this user research are:
 User Interviews: Talk to users directly to gain insight into their
challenges and understand their points of view.
 Surveys and Questionnaires: Help identify who your users are, what
they currently think about your product, what problems they face, and
 what their needs are.
 Observation: View how users interact with the product and their
environment. Observe their behaviors to gain insight into their thoughts
and feelings.
 Empathy Map: A visualization tool that summarizes a user’s thoughts,
actions, and feelings.
 Color Psychology: Different color palettes and uses of brand colors
unlock different psychological effects that can influence how consumers
use and interact with your designs.
Stage 2: Define

The second step is to define the problem. In this phase, designers

analyze the data gathered during the previous stage to identify and define the
issue with a clear and concise problem statement.
Problem statements are particularly important because they outline the
challenges the target audience faces and how those challenges can be
resolved. Doing so ensures the user’s perspective remains in focus (as
opposed to the company’s) and that a human-centered approach is used
throughout the design process.
Tools commonly used to achieve in the define phase are:
 Data Analysis: Using the data gathered during the empathy stage to
identify and define the user’s problem.
 The “5 Whys” Method: An iterative, interrogative technique used to
discover the root cause of a specific problem.
  Build User Personas: Using data gathered about users during the
empathy stage to build an archetype that represents the needs of your
target audience.

Stage 3: Ideate

The ideation stage is where designers start to explore solutions. Ideas in

this stage will ultimately become prototypes that can be tested with your
target audience.
One thing to remember about the ideation phase: leave judgments
behind. Design teams shouldn’t concern themselves with technical details like
budgetary constraints or feasibility. Use creative, outside-the-box thinking to
develop as many creative solutions as possible. There are no wrong ideas.
Commonly used ideation techniques include:
 Brainwriting: Write down all your ideas on a sheet of paper, then pass
the paper on. Whomever you pass it to develops your ideas further, then
passes the paper on. This continues until a certain time limit is reached,
then the entire team gathers.
 Sketches: This is a quick way to visualize ideas without expending much
time. If your sketch can communicate your ideas to other team members,
it can be an effective ideation tool.
 Round-Robin Brainstorming: A collective, two-step approach to
brainstorming that begins by soliciting a solution using the “How Might
We” prompt, then developing that idea further using an iterative circular
 process similar to brainwriting.
 Mind Maps and Flow Charts: A diagram and visualization tool that
shows how ideas are linked, making it easier to classify them and detects
patterns.
 SWOT Analysis: Used to identify the strengths, weaknesses, external
opportunities, and threats (SWOT) of an idea.

Stage 4: Prototype

During this phase of design thinking, teams will create prototypes of the
ideas they generated in the previous stage. Prototypes don’t need to be
finished products. They are meant to convey a possible solution, not deliver it.
Sketches, models, and digital renders are all examples of prototypes: scaled-
down versions of the product created during the ideation stage.
With minimal effort, prototyping can reveal whether the proposed
product will work, whether it’s technically feasible, and what challenges you
will face bringing it to life.
Common tools and ideation techniques include:
 Wireframes: Low-fidelity prototype that represents the basic visual
layout of an interface or product.
 Low-Fidelity Prototypes: These are cheap, quick, relatively simple, and
can be used to express broad concepts or ideas. Low-fidelity prototypes
require little design skills to produce.
 High-Fidelity Prototypes: Realistic designs that look and operate close
 to the final product.
 Walk-Through: A task-specific approach to determine the usability of a
prototype.
Stage 5: Test

The testing phase of the design thinking process involves real users and
real user feedback. During this phase, prototypes are given to participants to
try out. Design teams observe how participants interact with the prototype
and gather feedback about the experience.
Testing reveals what is or isn’t working. Don’t forget: design thinking is
an iterative and non-linear process—that goes for testing, too. Depending on
user feedback, changes to the product might be required. These changes might
require you to restart the testing phase or revisit past stages. Feedback from
user testing might also inspire new potential solutions or actionable insights.
Commonly used testing tools include:
 Usability Testing: A testing tool that gauges the usability of a design
with a group of target users.
 Beta Launch: Releasing your prototype to a limited pool of users to
determine usability, detect bugs, and test whether your product
addresses users’ needs.
Design Thinking is a Non-Linear Process

We’ve outlined a direct and linear design thinking process here, in which
one stage seemingly leads to the next with a logical conclusion at user testing.
However, in practice, the process is carried out in a more flexible and
 non-linear fashion.

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 stages should be understood as
different modes which contribute to the entire design project, rather than
sequential steps.
Divergent and Convergent Thinking
Divergent Thinking ( When you’re being creative, nothing is wrong)

Divergent thinking is an ideation mode which designers use to widen

their design space as they begin to search for potential solutions. They
generate as many new ideas as they can using various methods (e.g.,
oxymorons) to explore possibilities, and then use convergent thinking to
analyze these to isolate useful ideas.
Divergent Thinking Can Open up Endless Possibilities
 The formula for creativity is structure plus diversity, and divergent
thinking is how you stretch to explore a diverse range of possibilities for
ideas that might lead to the best solution to your design problem. As a
crucial component of the design thinking process, divergent thinking is
valuable when there’s no tried-and-tested solution readily available or
adaptable. To find all the angles to a problem, gain the best insights and be
truly innovative, you’ll need to explore your design space exhaustively.
Divergent thinking is horizontal thinking, and you typically do it early in the
ideation stage of a project. A “less than” sign (<) is a handy way to symbolize
divergent thinking – how vast arrays of ideas fan out laterally from one focal
point: Design team members freely exercise their imaginations for the widest
possible view of the problem and its relevant factors, and build on each other’s
ideas. Divergent thinking is characterized by:
 Quantity over quality – Generate ideas without fear of judgement
(critically evaluating them comes later).
 Novel ideas – Use disruptive and lateral thinking to break away
from linear thinking and strive for original, unique ideas.
 Creating choices – The freedom to explore the design space helps you
maximize your options, not only regarding potential solutions but also
about how you understand the problem itself.
Divergent thinking is the first half of your ideation journey. It’s vital to
complement it with convergent thinking, which is when you think vertically
and analyze your findings, get a far better understanding of the problem and
filter your ideas as you work your way towards the best solution.
Use Divergent Thinking with a Structure

Here are some great ways to help navigate the uncharted oceans of idea
possibilities:
 Bad Ideas – You deliberately think up ideas that seem ridiculous, but
which can show you why they’re bad and what might be good in them.
 Oxymorons – You explore what happens when you negate or remove
the most vital part of a product or concept to generate new ideas for that
product/concept: e.g., a word processor without a cursor.
  Random Metaphors – You pick something (an item, word, etc.)
randomly and associate it with your project to find qualities they share,
which you might then build into your design.
 Brilliant Designer of Awful Things – When working to improve a
problematic design, you look for the positive side effects of the problem
and understand them fully. You can then ideate beyond merely fixing the
design’s apparent faults.
 Arbitrary Constraints – The search for design ideas can sometimes
mean you get lost in the sea of what-ifs. By putting restrictions on your
idea—e.g., “users must be able to use the interface while bicycling”—you
push yourself to find ideas that conform to that constraint.
Convergent Thinking (The best way to have good ideas is to have lots of
ideas and throw away the bad ones.)
Convergent thinking is an ideation mode which designers use to analyze,
filter, evaluate, clarify and modify ideas they have generated in divergent
thinking. They use analytical, vertical and linear thinking to find novel and
useful ideas, understand the design space possibilities and get closer to
potential solutions.
Convergent Thinking – the Other Side of the Ideation “Coin”

After design teams generate as many ideas as possible in the divergent

thinking part of ideation sessions, convergent thinking helps them
systematically see whether their ideas might work as real-world solutions.
The structure is to:
 Sift through ideas.
 Group them into themes.
 Find common threads.
 Decide on winners and losers.
Convergent thinking helps tighten your focus when evaluating each
idea. For example, if your design problem concerns users with errands, one
idea might be an app for users to control their cars remotely to send/collect
goods. You’d then examine it through three lenses:
 Desirability – “Would users want this?” (Or would they fear accidents,
 hacking, theft, etc.?)
 Viability – “Could a brand mass-produce and support it?” (Or would it
be unsustainable/too expensive?)
 Feasibility – “Is it doable?” (Or would security, sensory and emergency-
backup features take years/decades to perfect?)
Then, considering state-of-the-art technology and other factors, you
might abandon this idea as impracticable or shelve it for future consideration.
See Ideas in a New Light with Convergent Thinking

Convergent thinking isn’t a clinical process that automatically results in

optimal solutions. Rather, you need a careful, creative mindset to:
 Look past logical norms (which we use in everyday critical thinking);
 See how an idea stands in relation to the problem; and
 Understand the reality/dimensions of that problem.

Brainstorming and Game storming

Brainstorming (It is easier to tone down a wild idea than to think up a new one)

Brainstorming is a method design teams use to generate ideas to solve

clearly defined design problems. In controlled conditions and a free-thinking
environment, teams approach a problem by such means as “How Might We”
questions. They produce a vast array of ideas and draw links between them to
find potential solutions.
The Best Ways To Use Brainstorming
 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. 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
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.

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”, keep the floodgates open so everyone
feels free to blurt out ideas (provided they’re on topic).
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 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.
Benefits of Brainstorming

 Different Perspectives: Different members in a team can provide

different perspectives to look at a problem. Using different
Brainstorming methods can help bring in new innovative ideas that can
help the team to look at the problem with different angles.
 Increases Creativity: Looking at a problem from different perspective
and coming up with new innovative ideas with complete freedom helps
bring out creativity from team members. Since there is no
predetermined process that everyone has to follow everyone creates
their own unique ideas to approach the problem which promotes
creativity.
 Team Collaboration: When a team works on a problem the members
collaborate with each other which brings out every member’s strengths
and weaknesses and help in improving teamwork. It helps in figuring out
every member’s thinking process and approach which can help in future
Brainstorming sessions.
Disadvantages of Brainstorming

Though Brainstorming is helpful, it can also have some disadvantages if

not done properly. The Disadvantages of Brainstorming are:
 Social Loafing: Reduced individual effort as participants rely on others
to contribute.
 Inefficient Use of Time: Sessions without clear direction can waste
valuable time.
 Evaluation Apprehension: Fear of judgment inhibits sharing of
 unconventional ideas.
 Conformity and Groupthink: Pressure to align with perceived group
consensus stifles creativity.
 Overemphasis on Quantity: Focus on idea quantity may neglect depth
and practicality.
 Production Blocking: Only one person can speak at a time, limiting idea
flow.
Game storming

Gamestorming is a set of practices where designers use games to

stimulate creative thinking and innovation. In an atmosphere of collaboration
and free exchange of ideas, designers think out of the box, explore novel ideas
and produce creative solutions to complex problems.
The Mechanics of Gamestorming

A typical gamestorming session in UX design involves several stages. In

each, the idea is to stimulate creative thinking and facilitate problem-solving
among participants. These stages include:

 Opening (Divergent Thinking): In this stage, the facilitator initiates the

process. It’s important here to set the context and define the problem.
It's about opening up the minds of the participants and encouraging
them to explore diverse ideas and perspectives in the problem space.
 Exploring (Emergent Thinking): Now, the participants delve deeper
into the problem space. They explore various facets of the problem, and
generate a multitude of potential solutions. This stage consists of free-
flowing ideas, vigorous discussions and creative experimentation.
  Closing (Convergent Thinking): This is the final stage. The participants
evaluate the generated ideas, refine them and converge on the most
promising solutions. It involves critical analysis, decision-making and
consensus-building.
Tips for Effective Gamestorming

To extract the maximum benefit from gamestorming, here are

some tips:
 Define clear objectives: Before participants start a gamestorming
session, it’s important to clearly define the objectives. What problem is
the group trying to solve? What is the end goal? When the group has
clear objectives, it provides direction and focus to the session.
 Foster a safe and open environment: The facilitator should encourage
participants to express their ideas freely without fear of judgment or
criticism. It’s vital to foster an atmosphere of openness, respect and
mutual support.
 Encourage participation: Ensure active participation from all
members. Encourage quiet members to speak up and contribute their
ideas. It’s how UX designers work, and it’s what innovations require. So,
it’s vital for everyone involved to appreciate contributions and respect
differing viewpoints. The facilitator therefore needs to guide the process,
stimulate discussion and ensure that everyone hears everyone else's
voice. Nobody should dominate the discussion or impose their ideas.
 Be flexible: Be open to changes and adaptations. If a game is not
working as expected, be ready to tweak it or switch to a different game.
Among other traits, the nature of designers’ jobs means they need to stay
fluid, overcome bias and observe pain points mindfully.
 Keep it fun and engaging: Keep the energy levels high and maintain a
playful atmosphere. Remember, the essence of gamestorming is to make
problem-solving fun and engaging. This is part of its magic. It’s a unique
form of brainstorming session. So, use interesting games, incorporate
humor, and ensure a lively and energetic atmosphere.
 Iterate and reflect: After each gamestorming session, reflect on what
 worked and what didn't. Iterate on your gamestorming process based on
these reflections. The iterative process is a vital ingredient, since it helps
design teams work their way towards truly human-centered design. That
will translate to more positive results when designers engage in user
testing.
Observational Empathy
Empathy is a word that’s creating quite the buzz in the industry, for
many reasons. In UX design, where enhancing the user satisfaction is important,
empathy is a critical skill.
To state things simply: empathizing allows designers to understand
users better. Empathizing helps designers to look deeper into situations in a
way that helps them to think and create solutions for problems.
How To Be More Empathic Designer
1. Learn to be a Good Listener

Everyone knows how to listen, but not everyone knows how to be a good
listener. When applying this idea to empathy in UX design, consider adding a
website mechanism that randomly polls users about their browsing experience,
with the opportunity to add feedback. A tool like Typeform can help you do this.
Typeform is a tool used to create visually pleasing and easy to complete
surveys. This survey form can be customized to fit in with the branding and UI
of your website and is easily embedded without much technical skill required.
2. Improve Your Observation Skills

When it comes to observing users that you can’t talk to, consider tools
like Inspectlet and Google Analytics. Inspectlet allows you to record actual
(anonymous) user sessions to see exactly how people are experiencing your
design.
Google Analytics can give you additional data regarding how people are
using your website and can help with uncovering potential problem
areas. Creative Blog provides guidance for a few ways to use Google Analytics
insights to improve UX:
 Use the Behavior Flow report to see how users move from one page to another
on your website.
  Analyze event tracking on your website to see which specific actions users take
while navigating around.
 Use the Navigation Flow report to see where users initially came from in order
to get into your website and where they go after accessing your that first
landing page.

3. Don’t be Afraid to Ask Other People for Input

To get the best feedback, consider the following tips:

 Make the person as comfortable as possible before asking for

feedback. Be mindful to carefully and politely ask for their input, to avoid

sending wrong signals and getting misunderstood for being too direct.

 Do not surprise, or abruptly ask them out of nowhere. Give people time to

review your work to make a careful analysis.

 Be direct in terms of what feedback you’re looking for (a specific design

feature, for example) so that they know where to focus when responding to

you.

 Ask what they do NOT like. It’s better to focus on finding issues in need of

improvement than seeking out a pat on the back for something done well.

 Be sure to ask the right people for feedback. Direct users are the best

source of actionable insights.

4. Be Mindful of Your Own Attitude
When interacting with the people you seek to empathize with,
remember that you’re doing it to understand, find solutions, and build
relationships with other people.

Empathy in Design Thinking

Empathy is the first phase of the Design Thinking Process. It is the ability
to understand people and see the world through people's eyes, and it is to step
in people's shoes to feel what they feel. It is an intentional attempt to keep aside
preconceived notions and uncover the real unspoken needs to truly resonate
with the users.
 This encourages creating solutions that are sustainable and focused on
all areas that affect in a long term. According to the design researcher Froukje
Sleeswijk Visser, there are four phases of research within empathy and in each
phase, the relation of the practitioner with the user changes.

The 4 Phases of Research in Empathy

1. Discovery — The process of discovery begins with identifying and

approaching the users. The aim of the phase is to identify the behavior of users and
discover the unspoken reasons that affect their behavior and choices.

2. Immersion — Literally stepping into the user's shoes is an immersion to the

phase of empathy. It is to relive user's experiences of life, perform the same
activities, and fully immerse in the life of the users to understand the ones we are
solving the problem for.

3. Connection — This phase is about resonating with the observation,

engagement, and experience of the user's life to create a connection, a deeper
personal understanding of the needs, problems, and challenges of the users. This is
where you resonate with the users and create empathetic insights.

4. Detachment — Detach and implement the learning from empathizing to

define and ideate with a clearer understanding of the user's life.

There is always something new to learn about users. Conducting detailed and well-
planned research following the four steps mentioned above can help create valuable user
insights that assist in creating an empathy map to further Define, Ideate, Prototype, and
Test in the process of Design Thinking.
Gaining Insights from an Empathy Map
Empathy maps help to externalize user research and create a shared
understanding to make decisions and uncover unspoken needs and insights. It is a tool
that helps to connect with the ideal user and relate with them in the right way.
As explained by the Neilsen Norman Group to create a solution that really works in
the long term it's ideal to create an empathy map. An empathy map is a simplified
visualization of the information in hand about particular users.
There is a thin line between empathy and sympathy. When you empathize it is to
feel and share someone's experiences, feelings, and attitudes. Sympathy is feeling
sorrowful, pity, and sorry for their troubles.
Empathy map has taken the enterprises by storm. It has been featured in the
Stanford D School curriculum of Design Thinking and also as “Three Creativity Challenges
from IDEO’s Leaders.” by David Kelley, founder of IDEO, and his business partner Tom
Kelly at Harvard Bussiness Review.
The format of the empathy map varies, but all of them have common core elements
and purposes. The revised empathy map is a large sheet of paper or a whiteboard sketch
divided into different sections with the user at the center. Xplaner founder and the
Empathy Map creator. Dave Gray originally called it the big head exercise.

The Empathy Map is divided into 7 parts and each one is

correlated to another.
1. Who are we empathizing with?
2. What decisions do they make?
3. What do these users see?
4. What do they talk about?
5. What do they do and what are their lifestyles?
6. What do the defined users hear about?
7. What do they think or feel?
Successfully gain insights from the 7 sections of the Empathy Map
(Instructions)

1. The empathy map can be created individually or can be done as a group exercise.

2. Start by defining the goal and mentioning the identified users, to define who will be the
subject of the empathy map and the final product.

3. On a whiteboard or a big chart paper, sketch the "Empathy Map Canvas" with all 7
sections.

4. Write down key observations on Post-it notes and color code them for further
understanding a negative observation from a positive or neutral one and for
segregating pain points and gain points.

5. Fill in the sections one by one.

6. Once the empathy map is completed, make an observation, list down insights based
on what seems important and interesting? New or surprising? What are the
 common connections between different sections? and separate unexpected needs
from expected needs.

An empathy map is an essential method for simplifying and humanizing

products, services. A collaborative focus on this process offers unique
emotionally resonant user experiences.
Nielsen and Molich's 10 User Interface Design Guidelines
Jakob Nielsen, a renowned web usability consultant and partner in the Nielsen
Norman Group, and Rolf Molich, another prominent usability expert, established a list of
ten user interface design guidelines in the 1990s. Note that there is considerable overlap
between Nielsen and Molich's heuristics and Ben Shneiderman’s 'eight golden rules'.
These 10 rules of thumb further iterate upon Shneiderman’s eight golden rules 4 years
after Shneiderman’s initial publication.

1. Visibility of system status. Users should always be informed of system operations

with easy to understand and highly visible status displayed on the screen within a
reasonable amount of time.
2. Match between system and the real world. Designers should endeavor to mirror
the language and concepts users would find in the real world based on who their
target users are. Presenting information in logical order and piggybacking on user’s
expectations derived from their real-world experiences will reduce cognitive strain
and make systems easier to use.
3. User control and freedom. Offer users a digital space where backward steps are
possible, including undoing and redoing previous actions.
4. Consistency and standards. Interface designers should ensure that both the
graphic elements and terminology are maintained across similar platforms. For
example, an icon that represents one category or concept should not represent a
different concept when used on a different screen.
5. Error prevention. Whenever possible, design systems so that potential errors are
kept to a minimum. Users do not like being called upon to detect and remedy
problems, which may on occasion be beyond their level of expertise. Eliminating or
flagging actions that may result in errors are two possible means of achieving error
prevention.
6. Recognition rather than recall. Minimize cognitive load by maintaining task-
relevant information within the display while users explore the interface. Human
 attention is limited and we are only capable of maintaining around five items in
our short-term memory at one time. Due to the limitations of short-term memory,
designers should ensure users can simply employ recognition instead of recalling
information across parts of the dialogue. Recognizing something is always easier
than recall because recognition involves perceiving cues that help us reach into our
vast memory and allowing relevant information to surface. For example, we often
find the format of multiple choice questions easier than short answer questions on
a test because it only requires us to recognize the answer rather than recall it from
our memory.
7. Flexibility and efficiency of use. With increased use comes the demand for less
interactions that allow faster navigation. This can be achieved by using
abbreviations, function keys, hidden commands and macro facilities. Users should
be able to customize or tailor the interface to suit their needs so that frequent
actions can be achieved through more convenient means.
8. Aesthetic and minimalist design. Keep clutter to a minimum. All unnecessary
information competes for the user's limited attentional resources, which could
inhibit user’s memory retrieval of relevant information. Therefore, the display must
be reduced to only the necessary components for the current tasks, whilst
providing clearly visible and unambiguous means of navigating to other content.
9. Help users recognize, diagnose and recover from errors. Designers should
assume users are unable to understand technical terminology, therefore, error
messages should almost always be expressed in plain language to ensure nothing
gets lost in translation.
10. Help and documentation. Ideally, we want users to navigate the system without
having to resort to documentation. However, depending on the type of solution,
documentation may be necessary. When users require help, ensure it is easily
located, specific to the task at hand and worded in a way that will guide them
through the necessary steps towards a solution to the issue they are facing.