Course Code/Title:IT3V13 UI & UX DESIGN Unit I

NAME OF THE PROGRAMME B.Tech IT ,B.E CSE,AIML,CZ,CSBS,AIDS

YEAR III

SEMESTER V

REGULATIONS R2022

COURSE CODE IT3V13/AM3V13 / CZ3V13 / CSBS3V13/AD3V13/CS3V13

COURSE NAME UI & UX DESIGN

FACULTY NAME (Prepared Mrs. V.Gomathi Contact 9442551195

by)
NAME OF SUBJECT Dr.E.Kothai
EXPERT(Verified by)

Page 1
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Unit - 1 Foundations of Design

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

Convergent Thinking – Brainstorming and Game Storming –
Observational Empathy

1.1 What is user interface (UI)?

The user interface (UI) is the point of human-computer interaction and

communication in a device. This can include display screens, keyboards, a
mouse and the appearance of a desktop. It is also the way through which a
user interacts with an application or a website.

The growing dependence of many businesses on web applications and

mobile applications has led many companies to place increased priority on
UI in an effort to improve the user's overall experience.

Types of user interfaces

The various types of user interfaces include:

● graphical user interface (GUI)

● command line interface (CLI)

● menu-driven user interface

● touch user interface

● voice user interface (VUI)

● form-based user interface

● natural language user interface

Page 2
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Examples of user interfaces

Some examples of user interfaces include:

● computer mouse

● remote control

● virtual reality

● ATMs

● speedometer

● the old iPod click wheel

Websites such as Airbnb, Dropbox and Virgin America display strong

user interface design. Sites like these have created pleasant, easily
operable, user- centered designs (UCD) that focus on the user and their
needs.

History of UI

o In early computers, there was very little user interface except

for a few buttons at an operator's console.

o Many of these early computers used punched cards, prepared

using keypunch machines, as the primary method of input for
computer programs and data.

o While punched cards have been essentially obsolete in

computing since 2012, some voting machines still use a
punched card system.

● The user interface evolved with the introduction of the

command line interface, which first appeared as a nearly blank
display screen with a line for user input.

● Users relied on a keyboard and a set of commands to navigate

exchanges of information with the computer.

Page 3
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

● This command line interface led to one in which menus (lists of

choices written in text) predominated.

Finally, the GUI arrived, originating mainly in Xerox's Palo Alto

Research Center (PARC), adopted and enhanced by Apple and
effectively standardized by Microsoft in its Windows operating systems.

Graphical UIs

Elements of a GUI include such things as windows, pull-down menus,

buttons, scroll bars and icons.

With the increasing use of multimedia as part of the GUI, sound, voice,
motion video and virtual reality are increasingly becoming the GUI for many
applications.

Mobile UIs

The emerging popularity of mobile applications has also affected UI,

leading to something called mobile UI.

Mobile UI is specifically concerned with creating usable, interactive

interfaces on the smaller screens of smartphones and tablets and improving
special features, like touch controls.

What is 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.
Designing an experience includes not only making the software easy
to use but also designing the other experiences related to the product, for
example, the marketing campaign, the packaging and after-sales support.

Page 4
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Most importantly, UX design is concerned with delivering solutions that

address pain points and needs.
After all, no one will use a product that serves no purpose.

What UX Designers Do Goes Beyond UI Design:

“User Experience Design” is often used interchangeably with terms
such as “User Interface Design” and “Usability.”
However, while usability and user interface (UI) design are important
aspects of UX design, they are subsets of it.
A UX designer is concerned with the entire process of acquiring and
integrating a product, including aspects of branding, design, usability and
function.
It’s a story that begins before the device is even in the user’s hands.
“No product is an island. A product is more than the product. It is a
cohesive, integrated set of experiences.
Think through all of the stages of a product or service – from initial
intentions through final reflections, from the first usage to help, service, and
maintenance. Make them all work together seamlessly.”

— Don Norman, inventor of the term “User Experience.”

Products that provide a great user experience (e.g., the iPhone) are thus
designed with the product’s consumption or use in mind and the entire
process of acquiring, owning and even troubleshooting it.
Similarly, UX designers don’t just focus on creating usable products;
they concentrate on other aspects of the user experience, such as pleasure,
efficiency and fun.
Consequently, there is no single definition of a good user experience.
Instead, a good user experience meets a particular user’s needs in the specific
context where they use the product.

A UX designer attempts to answer the question: "How can we make the

experience of interacting with a computer, a smartphone, a product, or a
service as intuitive, smooth and pleasant as possible?"
Page 5
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Page 6
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

UX Design—A Formal Definition

The International Organization for Standardization (ISO) defines user

experience as:
“A person's perceptions and responses that result from the use or anticipated
use of a product, system or service.”

We can break this definition into two parts:

1. A person’s perceptions and responses.
2. The use of a product, system or service.
In user experience, designers do not have much control over a person’s
perceptions and responses—the first part of the definition.
For example, they cannot control how someone feels, moves their fingers or
controls their eyes as they use a product.
However, designers can control how the product, system or service
behaves and looks—the second part of the definition.

“One cannot design a user experience, only design for a user experience. In
particular, one cannot design a sensual experience, but only create the design
features that can evoke it.”

The simplest way to think about user experience design is as a verb and
a noun. A UX designer designs (verb)—ideates, plans, changes—the things
that affect the user experience (noun)—perceptions and responses to a system
or service.

Page 7
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

The simplest way to think about user experience design is as a verb and a noun.
For example, when using a physical device, such as a computer mouse, we
can control some aspects of the product that influence whether the user enjoys
looking at, feeling and holding it:

● The way it fits in their hand. Is it snug? Is it too big and cumbersome?

● The weight. Does it affect their ability to move it as they wish?

● Its ease of use. Can they use it automatically, or do they have to

think hard about it to achieve a goal?

When a person uses a digital product, such as a computer application, a

few aspects that we can influence include:

● How intuitively they can navigate through the system.

● The cues that help guide them to their goal.

● The visibility of the essential aspects of a task at the appropriate time.

Page 8
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Page 9
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

UX Designers Consider the Why, what, and How of Product Use

As a UX designer, you should consider the Why, What and How of

product use.
The Why involves the users’ motivations for adopting a product,
whether they relate to a task they wish to perform with it or to values and
views that users associate with the ownership and use of the product.
The What addresses the things people can do with a product—its
functionality. Finally, the How relates to the design of functionality in an
accessible and aesthetically pleasant way.

UX designers start with the Why before determining the What and
then, finally, the How to create products that users can form meaningful
experiences with.

In software designs, you must ensure the product’s “substance”

comes through an existing device and offers a seamless, fluid experience.

UX Design is User-Centered
Since UX design encompasses the entire user journey, it’s a
multidisciplinary field–UX designers come from various backgrounds such
as visual design, programming, psychology and interaction design.
To design for human users also means working with a heightened
scope regarding accessibility and accommodating many potential users’
physical limitations, such as reading small text.

Page 10
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

A UX designer’s typical tasks vary but often include user research,

Creating personas, designing wireframes and interactive prototypes,

and testing designs.

These tasks can vary significantly from one organization to the next.
Still, they always demand designers to be the users’ advocates and keep their
needs at the center of all design and development efforts.

That’s also why most UX designers work in some form of user-

centered work process and keep channeling their best-informed efforts until
they address all of the relevant issues and user needs optimally.

Interaction Design Foundation

User-centered design is an iterative process where you take an

understanding of the users and their context as a starting point for all design
and development.

Page 11
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

UI and UX

The UI is often talked about in conjunction with user experience (UX),

which may include the aesthetic appearance of the device, response time and
the content that is presented to the user within the context of the user interface.

Both terms fall under the concept of human-computer interaction

(HCI), which is the field of study focusing on the creation of computer
technology and the interaction between humans and all forms of IT design.

Specifically, HCI studies areas such as UCD, UI design and UX design.

An increasing focus on creating an optimized user experience has led some to
carve out careers as UI and UX experts.

Certain languages, such as HTML and CSS, have been geared toward
making it easier to create a strong user interface and experience.

Difference between UI and UX

Developing a product that people love often requires both good UI and
good UX. For example, you could have a messaging app (such as WhatsApp)
that looks great and has intuitive navigation (UI).

But if the app loads slowly or makes you click through numerous
screens to message someone (UX), it doesn’t matter how good it looks.
You’re probably not going to want to use it.

On the other hand, a website could be loaded with unique, helpful content
organised in a logical and intuitive way.

But if it looks dated or you can’t easily figure out how to move between
screens or scroll through options, you’re likely to click away from the site.

Page 12
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Aspect User Interface (UI) User Experience (UX)

Definition UI focuses on the visual elements UX focuses on the overall experience

users interact with. users have.

Scope Deals with the layout, design, and Encompasses the entire journey of
presentation. the user.

Purpose Aims to provide an attractive and Aims to ensure the user's needs are
usable interface. met effectively.

Elements Involves buttons, icons, menus, and Involves emotions, perceptions, and
other components. interactions.

Goal Enhances the aesthetic appeal and Enhances user satisfaction and
usability of a product. fulfillment.

Interaction Deals with how users interact with Deals with how users feel during their
the interface. interactions.

Page 13
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Measurability Can be measured by visual appeal, Measured by user feedback, metrics,

consistency, etc. and satisfaction.

Medium Primarily concerned with the visual Involves both visual and
aspects. psychological aspects.

Output The end result is a visually The end result is a satisfying user
appealing design. experience.

Collaboration Collaborates with UX to implement Collaborates with UI to deliver a

design elements. cohesive experience.

**********

1.2 CORE STAGES OF DESIGN THINKING

Design thinking’s value as a world-improving, driving force in

business (global heavyweights such as Google, Apple and Airbnb have
wielded it to notable effect) matches its status as a popular subject at leading
international universities.
With design thinking, teams have the freedom to generate ground-
breaking solutions. Using it, your team can get behind hard-to-access
insights and apply a collection of hands-on methods to help find innovative
answers.

Page 14
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Design thinking is an iterative and non-linear process that contains five

phases:
1. Empathize, 2. Define, 3. Ideate, 4. Prototype and 5. Test.

Stage 1: Empathize—Research Your Users' Needs

● Here, you should gain an empathetic understanding of the problem

you’re trying to solve, typically through user research.

● Empathy is crucial to a human-centered design process such as

design thinking because it allows you to set aside your own
assumptions about the world and gain real insight into users and
their needs.

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

● It’s time to accumulate the information gathered during the

Empathize stage.

● You then analyze your observations and synthesize them to define

the core problems you and your team have identified.
Page 15
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

● These definitions are called problem statements. You can create

personas to help keep your efforts human-centered before
proceeding to ideation.

Stage 3: Ideate—Challenge Assumptions and Create Ideas

● Now, you’re ready to generate ideas.

● The solid background of knowledge from the first two phases

means you can start to “think outside the box”, look for alternative
ways to view the problem and identify innovative solutions to the
problem statement you’ve created.

● Brainstorming is particularly useful here.

Page 16
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Stage 4: Prototype—Start to Create Solutions

● This is an experimental phase.

● The aim is to identify the best possible solution for each problem
found. Your team should produce some inexpensive, scaled-down
versions of the product (or specific features found within the
product) to investigate the ideas you’ve generated.

● This could involve simply paper prototyping.

Stage 5: Test—Try Your Solutions Out

● Evaluators rigorously test the prototypes. Although this is the final

phase, design thinking is iterative:

● Teams often use the results to redefine one or more further

problems.

● So, you can return to previous stages to make further iterations,

alterations and refinements – to find or rule out alternative
solutions.

Overall, you should understand that these stages are different modes
which contribute to the entire design project, rather than sequential
steps.

Your goal throughout is to gain the deepest understanding of the users

and what their ideal solution/product would be.

Page 17
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Why Is Design Thinking So Important?

● Design thinking is essential in UX design to adapt to rapid changes in

users' behaviors and environments. Since its inception by Herbert A.
Simon in 1969, it has evolved and been embraced across various fields.

● Today, organizations use it to solve complex problems and cater to

human needs.

● Design teams leverage design thinking to tackle challenging issues and

prioritize user-centric solutions.

● It encourages "thinking outside the box," leading to improved UX

research, prototyping, and usability testing to meet users' evolving
needs effectively.

***************

Page 18
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

1.3 DIVERGENT VS CONVERGENT THINKING:

What's the Difference?

● Divergence and convergence are 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.

● This problem-solving process cycles between expansive and focused

thinking to better understand problems people face and develop a
solution. Coined by psychologist J.P.

● Guilford in the 1950s, these cycles of thinking provide the structure

for this iterative design thinking process.

In this article we’ll define divergence and convergence, provide

examples, walk through each stage, suggest free templates you can use to try it
out, and provide tips to help you get the most out of the creative process.

Divergence vs convergence

● Divergence and convergence are like the inhale and exhale of the design
thinking process.

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

Note: Divergent and convergent phases are non-linear, meaning that

Page 19
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

when facilitating this process, you may move back and forth as you discover
new insights during convergence.

What is divergence?

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

What is convergence?

● 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

*********

Page 20
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Page 21
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

1.4 WHAT IS BRAINSTORMING?

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

● Resume

● Watch how to get serious, and fun, results with Brainstorming.

How to Use Brainstorming Best?

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

● By brainstorming, they can take a vast number of approaches—the

more, the better—instead of just exploring conventional means and
running into the associated obstacles.

● When teams work in a judgment-free atmosphere to find the real

dimensions of a problem, they’re more likely to produce rough
answers which they’ll refine into possible solutions later.

Page 22
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

● Marketing CEO Alex Osborn, brainstorming’s “inventor”, captured

the refined elements of creative problem-solving in his 1953 book,
Applied Imagination.

● In brainstorming, we aim squarely at a design problem and produce

an arsenal of potential solutions. By not only harvesting our own ideas
but also considering and building on colleagues’, we cover the
problem from every angle imaginable.

● “It is easier to tone down a wild idea than to think up a new one.”

— Alex Osborn

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

Page 23
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

● Set a time limit – Depending on the problem’s complexity, 15–60 minutes is

normal.

● Begin with a target problem/brief – Members should

approach this sharply defined question, plan or goal and stay
on topic.

● Refrain from judgment/criticism – No-one should be

negative (including via body language) about any idea.

● 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).

● Aim for quantity – Remember, “quantity breeds quality”. The

sifting-and-sorting process comes later.

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

● Stay visual – Diagrams and Post-Its help bring ideas to life and help
others see things in different ways.

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

Page 24
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

● To capture everyone’s ideas in a brainstorming session, someone must

play “scribe” and mark every idea on the board.

● Alternatively, write down your own ideas as they come, and share these
with the group.

● Often, design problems demand mixed tactics: brainstorming and its

sibling approaches – brain dumping (for individuals), and
brainwriting and brain walking (for group-and-individual mixes).

Page 25
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Take Care with Brainstorming

● Brainstorming involves harnessing synergy – we leverage our

collective thinking towards a variety of potential solutions.

● However, it’s challenging to have boundless freedom. In groups,

introverts may stay quiet while extroverts dominate.

● Whoever’s leading the session must “police” the team to ensure a

healthy, solution-focused atmosphere where even the shiest
participants will speak up.

● A warm-up activity can cure brainstorming “constipation” – e.g., ask

participants to list ways the world would be different if metal were like
rubber.

**************

1.5 WHAT IS GAME STORMING?

● Game storming is a form of brainstorming that leverages the use

of games.

● As we all know, playing games enforces rules, effectively helping to

overcome the usual brainstorming limitations.

● The way brainstorming avoids conflicts is by shifting group and

thought dynamics.

● To give you a real-life example, at Collaboard we need to coordinate

employees across multiple locations, and found that game storming
(especially when facilitated through our app Collaboard) makes it
easier to handle collaborative and creative processes.

Page 26
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Page 27
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

We started to test it, mainly out of our love for innovation, and played
the 3- 12-3 Brainstorm game, ideated by James Macanufo, involving
employees in three different locations: Zurich, Munich and Milano. Keep
reading to discover this amazing technique.

Brainstorming: a new approach to creative collaboration

So, how does this game work? There can be up to 10 players, who must
follow these rules:

● First of all, they must choose a two-word topic to focus on.

● After the choice, phase one of the game begins: for 3 minutes, each
team member brainstorms on his own and writes down their ideas
on sticky notes.

● When everyone’s done brainstorming, the team is divided into

sub- teams of 2 people each. This is the beginning of phase 2.

● For 12 minutes, teams pick three random cards and develop a

full- fledged concept.

● In phase 3, teams have 3 minutes each to present their ideas

to everyone else.

All you need is Collaboard!

So, back to our experiment: we decided to brainstorm some ideas for

Christmas Cards. For the sake of simplicity, we split our team into 3 sub-
teams according to their physical location: Berlin, Zurich, Munich.

Page 28
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Phase One

This first phase is all about generating ideas. Each team member is on
his own and must write on sticky notes whatever idea comes to mind.

This part felt very similar to classic brainstorming, but we quickly noticed
two differences:

● Each person was using their own device, so they didn’t fear judgment
from their peers, and didn’t forget what they wanted to say/write
while waiting for their turn.

● The limited time of 3 minutes meant that there was no space for
self- doubt. As sticky notes were being written, they were quickly
moved into a grid library.

Page 29
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Phase Two

Once solo brainstorming was completed, each team member selected three
random stick notes from the library to start developing concepts around them.

We found this phase a bit more challenging than the first one, as the
cards could involve clashing ideas. But this is exactly where collaboration
steps in: the team has to work together in order to consolidate the ideas into
a final, collaborative project.

With Collaboard by our side, visualizing and working through

sketches, images, prototypes and concepts made the process way easier

Phase Three

Finally, we approached the final phase. Using sketches created in

phase two, we proceeded to present our final ideas to the team.
The integration with Skype for Business made the remote presentation
extremely easy - we ended up with three different proposals (ready to be approved
by the marketing manager) in less than 30 minutes, which is hard to imagine with
a traditional brainstorming session!

Page 30
Course Code/Title:IT3V13 UI & UX DESIGN Unit I

Also, we all could leverage other teams’ ideas, nurturing collaboration

and strengthening our connection.
*********
Observational empathy is a crucial aspect of the design thinking
process that involves closely observing and understanding the experiences,
behaviors, and needs of users by immersing oneself in their environment. It is
a method of gaining deep insights into users' lives, thoughts, and emotions,
which helps designers create more meaningful and user-centered solutions.

In observational empathy, designers go beyond simply asking users

about their preferences or needs. Instead, they spend time directly observing
users in their natural context, without interrupting or interfering with their
actions. This approach allows designers to understand how users interact with
products, services, or environments and how they overcome challenges or
frustrations.

1.6 OBSERVATIONAL EMPATHY

Key aspects of observational empathy include:

1. Active Observation: Designers keenly observe users' behaviors,

gestures, facial expressions, and body language to understand their emotions
and reactions.

2. Listening and Note-taking: They listen attentively to users'

conversations and take notes on their experiences, pain points, and unmet
needs.

Page 31
 Course Code/Title:IT3V13 UI & UX DESIGN Unit I

3. Contextual Understanding: Observational empathy takes place in the real

environment where users use the product or service, providing context- rich
information for design decisions.
4. Identifying Unspoken Needs: Through observation, designers can
identify needs that users may not explicitly communicate or may not be
aware of themselves.
5. Avoiding Assumptions: Observational empathy helps designers avoid making
assumptions
about users' preferences or behaviors, as it relies on direct evidence.
By practicing observational empathy, designers can gain a deeper and
more holistic understanding of their target audience. This empathetic
understanding forms the foundation for creating solutions that truly resonate
with users and provide a positive impact on their lives. It is an essential step
in the design thinking process, enabling designers to design with empathy
and solve real problems effectively.

********

Page 32
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

Unit-2 Foundations of UI Design

Visual and UI Principles- UI Elements and Patterns – Interaction Behaviors and

Principles –Branding- Style Guides

2.1 VISUAL DESIGN PRINCIPLES

When we look at something, we often instinctively know if it looks good or not,

thanks to the emotional response it elicits. Though we may struggle to put it into
words, certain design elements can make visuals more appealing and effective in user
experience.
Here are 5 key visual design principles that impact UX:
1. Scale: The relative size of elements in a design. It helps create emphasis,
guide attention, and add visual interest.
2. Visual Hierarchy: The arrangement of elements to establish a clear order of
importance. It guides users through content and makes information easier to
understand.
3. Balance: Distributing visual weight evenly in a design to achieve stability. It
ensures that no single element overpowers others, leading to a harmonious
composition.
4. Contrast: Differences in color, size, or other attributes that create distinction
between elements. Contrast enhances readability and draws attention to essential
information.
5. Gestalt: The idea that our brains perceive elements as a whole rather than
individual parts. It emphasizes how elements are organized to form a unified
and coherent design.
By adhering to these principles, designers can create engaging and user-friendly
visuals that enhance the overall experience.

1. Scale
Scale in visual design involves using relative size to communicate importance and
rank within a composition. Important elements are made larger than less significant
ones, making them more noticeable. A visually appealing design typically uses up to
three different sizes to create variety and establish a visual hierarchy.

Page 33
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

By emphasizing essential elements through size, users can easily understand and
interact with the design

Medium for iPhone: Popular articles are visually larger than other articles. The
scale directs users to potentially more-interesting article.

2. Visual Hierarchy
Visual hierarchy is about guiding the user's eye to focus on important elements first.
It's achieved by using various design cues like size, color, spacing, and placement. A
good layout with clear visual hierarchy makes it easy for users to understand the content
and its importance. You can use different font sizes, bright colors for important items,
and muted colors for less important ones to create a clear hierarchy.
Including small, medium, and large elements in the design helps establish a balanced
scale and reinforce the visual hierarchy.

Page 34
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

Medium mobile app: There is a clear visual hierarchy of title, subtitle, and body
text. Each component of the article is in a type size equal to its importance.

Uber mobile app: The visual hierarchy is clear in Uber’s mobile app. The screen is
split in half between the map and input form (bottom half of screen), which enforces the
thought that these components are equally important to the user. The eye is immediately
drawn to the Where to? field because of its gray background, then to the recent locations
below it, which are slightly smaller in font size

Page 35
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

3. Balance
Balance in visual design is like a seesaw, where you arrange elements to create a
pleasing proportion. It means having an equal distribution of visual elements on both
sides of an imaginary line running through the middle of the screen. This line can be
vertical or horizontal.

To achieve balance, you need to consider the size and space taken by elements, not
just their number. If one side has a large element and the other side has a small one, the
design feels unbalanced.

There are three types of balance:

1. Symmetrical - elements are evenly distributed on both sides of the central axis.

2. Asymmetrical - elements are unevenly distributed, creating a sense of movement and

energy.

3. Radial - elements radiate out from a central point, guiding the eye to the center of the
composition.

The choice of balance depends on the message you want to convey. Asymmetry is
dynamic and engaging, while symmetry is calm and static. Radial balance always
draws attention to the center. Achieving balance ensures that no area overwhelms
others, creating a harmonious and pleasing design.

Page 36
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

The Hub Style Exploration: The composition feels stable, which is especially
appropriate when you’re looking for a job you love. The balance here is symmetrical. If
you were to draw an imaginary vertical axis down the center of the website, elements
are distributed equally on both sides of the axis. (Image source: dribbble.com)

4. Contrast
Contrast is a powerful principle in design that highlights differences between
elements. It involves placing visually dissimilar things together to show that they
belong in different categories or serve distinct purposes. For example, using bright
colors like red to signify deletion in a UI design makes the element stand out from the
rest, emphasizing its unique function. Contrast helps users quickly identify and
understand important information, making the design more effective and user- friendly

Page 37
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

.
Reminders app on iOS: The color red, which has high contrast to its surrounding
context, is reserved for deleting.

Often, in UX the word “contrast” brings to mind the contrast between text and its
background. Sometimes designers deliberately decrease the text contrast in order to
deemphasize less important text. But this approach is dangerous — reducing text contrast
also reduces legibility and may make your content inaccessible. Use a color-contrast
checker to ensure that your content can still be read by all your target users.

Greenhouse Juice Co: The legibility of the text on the bottle relies on the color of
juice. Although the contrast works beautifully for some juices, labels for bottles
with light colored juices are nearly impossible to read. (Image source:

Page 38
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

www.instagram.com)

5. Gestalt Principles
Gestalt principles are a set of ideas from psychology that explain how humans make
sense of complex images. Instead of seeing individual parts, our minds automatically
organize them into a whole. This means we tend to perceive the complete picture rather
than separate elements.

These principles include similarity, continuation, closure, proximity, common region,

figure/ground, and symmetry and order. One important principle for UX is proximity,
which means that items visually close together are seen as belonging to the same group.
These principles help designers create visuals that are easy for users to understand and
navigate.

It is the Gestalt closure principle that allows us to see two figures kissing instead of
random shapes in Picasso’s painting. Our brains fill in the missing pieces to create two
figures.

Page 39
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

We also often see applications of the Gestalt theory in logos. In the NBC logo, there
is no peacock in the white space, but our brain understands there to be one.

UI Design Principle:
The seven principles of universal design are: Equitable use, flexibility in use, simple
and intuitive use, perceptible information, tolerance for error, low physical effort, and
size and space for approach and use.

1. The seven principles of universal design are: Equitable use, flexibility in use,
simple and intuitive use, perceptible information, tolerance for error, low
physical effort, and size and space for approach and use.

Equitable Use: The design should be usable by all individuals, regardless of

their age, abilities, or background. It ensures that everyone can access and
interact with the product or environment in a fair and inclusive manner.
2. Flexibility in Use: The design should accommodate a wide range of individual
preferences and abilities. It offers multiple ways to interact with the product or
environment, allowing users to choose the approach that suits them best.
3. Simple and Intuitive Use: The design should be easy to understand and use,
requiring minimal effort to figure out its operation. Clear instructions and logical
layouts make it intuitive for users to navigate and perform tasks.
4. Perceptible Information: The design should present information effectively to
all users, regardless of their sensory abilities. It ensures that important
information is available through multiple senses (e.g., visual, auditory, tactile)
so that users can perceive and comprehend it easily.
5. Tolerance for Error: The design should minimize the risk of errors and provide
ways to recover from mistakes. It avoids critical consequences for unintended
actions and offers clear feedback to guide users in correcting errors.
6. Low Physical Effort: The design should require minimal physical effort to
use. It considers the needs of users with varying physical abilities, making
interactions comfortable and not overly demanding on strength or dexterity.
7. Size and Space for Approach and Use: The design should provide adequate
space and reach ranges to accommodate users of different sizes and mobility. It
ensures that individuals using mobility aids or who have limited reach can
comfortably access and use the design.

******
Page 40
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

2.2 UI ELEMENTS
UI elements are the building blocks of a user interface, the individual parts that users
see and interact with on websites, apps, and other digital product

1. Buttons: Buttons are like interactive squares or circles that you can click or tap
on. They perform actions like "Submit," "Next," or "Cancel."

2. Text Fields: Text fields are areas where you can type in text, like when you
search for something or enter your name.

3. Checkboxes: Checkboxes are like little boxes that you can tick or un-tick to
make a choice from a list of options.

4. Radio Buttons: Radio buttons are like small circles or dots that you can select,
but you can only choose one option from a group of choices.

Page 41
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

5. Icons: Icons are small pictures or symbols that represent actions or ideas, like a
magnifying glass for search or a home symbol for the homepage.

6. Dropdown Menus: Dropdown menus are like hidden lists that appear when you
click on a button or a label. They show you more options to choose from.

Combo boxes

● Combo boxes allow users to either type a custom value directly or select a value from the
list. It is a combination of a drop-down list or list box and a single-line input field.

7. Sliders: Sliders are like bars or scales that you can slide left or right to adjust
settings or choose a value.

8. Tabs: Tabs are like labeled sections that you can click on to switch between
different parts of a website or app.

Page 42
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

9.Tooltips: Tooltips are like small pop-up boxes that show extra information when
you hover your mouse over something.

10. Cards: Cards are like little containers that hold information, like a picture, a
title, and a short description, neatly displayed together.

11. Confirmation dialogues

Confirmation dialogues are responsible for collecting user consent for a particular action. For
example, collecting user consent for a delete action.

12. Date pickers

● A date picker allows users to pick a date and/or time. By using a native date picker from
the platform, a consistent date value is submitted to the system.

These UI elements help users interact with websites and apps by clicking, typing, or
selecting options, making the overall experience more intuitive and enjoyable.

Page 43
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

2. Output elements

Output elements are responsible for showing results against various user inputs. They also
show alerts, warnings, success, and error messages to the users. Output elements aren’t neutral by
nature. They rely on inputs and various operations.

3. Helper elements
All other elements fall into this category. The most widely-used helper elements include:

● Notifications
● Breadcrumbs
● Icons
● Sliders
● Notifications
● Progress bars
● Tooltips

4. Navigational UI elements:

Navigational components simplify moving through the site, desktop or mobile app or any other
digital product. Navigational helper UI elements include things like navigation menus, list of links,
breadcrumbs, to name but a few.

5. Informational UI elements
Responsible for representing information. These include, for example, tooltips, icons, and
progress bars.

Page 44
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

2.3 UI PATTERNS

User interface (UI) design patterns are reusable/recurring components which

designers use to solve common problems in user interface design. For example, the
breadcrumbs design pattern lets users retrace their steps. Designers can apply them
to a broad range of cases, but must adapt each to the specific context of use.

UI design patterns serve as design blueprints that allow designers to choose the best and
commonly used interfaces for the specific context the user faces. Each pattern typically contains:

● A user’s usability-related problem.

● The context/situation where that problem happens.

● The principle involved—e.g., error management.

● The proven solution for the designer to implement to address the core of the problem.

● Why—the reason for the pattern’s existence and how it can affect usability.

● Examples—which show the pattern’s successful real-life application (e.g., screenshots and
descriptions).

● Implementation—some patterns include detailed instructions.

Common UI Design Patterns

Some of the most common UI design patterns are:

• Breadcrumbs – Use linked labels to provide secondary navigation that shows the
path from the front to the current site page in the hierarchy.
• Lazy Registration – Forms can put users off registration. So, use this sign-up
pattern to let users’ sample what your site/app offers for free or familiarize
themselves with it. Then, you show them a sign-up form. For example, Amazon
allows unrestricted navigation and cart-loading before it prompts users to register
for an account.

Note:
• When content is accessible only to registered users or users must keep
entering details, offer them simplified/low-effort sign-up forms.

● Minimize/Avoid optional information fields. Use the Required Field Markers

pattern to guide users to enter needed data.
• Forgiving Format – Let users enter data in various formats (e.g.,

Page 45
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

city/town/village or zip code).

Page 46
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

• Clear Primary Actions – Make buttons stand out with color so users know
what to do (e.g., “Submit”). You may have to decide which actions take
priority.

• Progressive Disclosure – Show users only features relevant for the task at hand,
one per screen. If you break input demands into sections, you’ll reduce cognitive
load (e.g., “Show More”).

• Hover Controls – Hide nonessential information on detailed pages to let

users find relevant information more easily.

• Steps Left – Designers typically combine this with a wizard pattern. It shows
how many steps a user has to take to complete a task. You can
use gamification (an incentivizing design pattern) here to enhance engagement.

• Subscription Plans – Offer users an options menu (including “Sign-up”

buttons) for joining at certain rates.

• Leaderboard – You can boost engagement if you use this social media
pattern.

• Dark Patterns – Some designers use these to lead or trick users into performing
certain actions, typically in e-commerce so they spend more or surrender
personal information. Dark patterns range in harmfulness. Some designers leave
an unchecked opt-out box as a default to secure customer information. Others
slip items into shopping carts. To use dark patterns responsibly, you must be
ethical and have empathy with your users. Dark patterns are risky because user
mistrust and feedback can destroy a brand’s reputation overnight.

*******

Page 47
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

Taking Care with Design Patterns

Freely available, UI design patterns let you save time and money since you can copy and
adapt them into your design instead of reinventing the wheel for every new interface. They also
facilitate faster prototyping and user familiarity. However, you should use them carefully. The
wrong choices can prove costly for example, if you:

● Approach problems incorrectly because you’re over-relying on patterns.

● Don’t fine-tune patterns to specific contexts.

● Don’t customize a distinct brand image (e.g., your website ultimately resembles Facebook).

● Overlook management requirements. If you create your own patterns, you must clearly define
how to use them and with what types of problems, version-control them, and store them for team
access.

Overall, give users familiar frameworks that maximize convenience and prevent confusion while
they interact with your unique-looking brand.

2.4 INTERACTION BEHAVIORS AND PRINCIPLES:

The process of interaction design involves studying the behavior and structure of interactive
systems and implementing them for developing useful digital products. In other words, interaction
design is the relationship between user and product and the services they use.

The purpose of interaction design is to create a great user experience. That’s why most of the
UI disciplines require understanding and hands-on experience of interaction design principles. After
all, it’s about designing for the entire interconnected system: the device, interface, context,
environment, and people. Interaction designers strive to create meaningful relationships between
people and the products and services they use. It may include computers, mobile devices, gadgets,
appliances, and more.

It is important to understand UX design best practices while developing complex web and
mobile applications. These are the key elements that product designers should not neglect while
creating an interface for the user.

Page 48
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

The 10 most important interaction design principles are-

● UX: Match user experience and expectations

● Consistent design: Maintain consistency throughout the application

● Functionality: Follow functional minimalism

● Cognition: Reduce cognitive loads/mental pressure to understand the application

● Engagement: Design interactively such that it keeps the user engaged.

● User control: Allow the user to control, trust, and explore

● Perceivability: Invite interactions through intuitions and interactive media

● Learnability: Make user interactions easy to learn and remember

● Error handling: Take care to prevent errors, if they occur make sure to detect and recover
them.

● Affordability: Simulate actions by taking inspiration from usual and physical world
interactions.

2.3 What is Interaction Design?

• Interaction design (IxD) is about designing how users interact with products,
especially software products like apps and websites. The main goal is to create
products that help users achieve what they want in the easiest and most effective
way possible.

• Interaction designers work on various elements like how things look, move,
sound, and the space they take up. For example, they might create sounds for user
actions. They think about whether the product behaves in a way that users expect
and if users can achieve their goals without much effort.

• In some cases, UX designers are also responsible for interaction design along with
other aspects of product design. Overall, interaction design is about making
products user-friendly and intuitive for people to use.

Page 49
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

Page 50
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

How Does Interaction Design Differ from UX Design?

• Interaction design and UX design have similarities, but they are not the same
thing. Interaction design focuses on how users interact with a product, making
sure the interactions are smooth and easy. It deals with elements like how things
move, look, and sound to create a good user experience.

• On the other hand, UX design is broader. It involves understanding the users

through research, creating user personas to know their needs, and testing the
product with real users. UX designers ensure the entire experience of using the
product is great, not just the interactions.

• In simple terms, interaction design is a part of UX design, but UX design

covers more aspects beyond just the interactions.

Page 51
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

• Interaction design is a part of UX design, which is about creating a great

experience for users when they use a product. Interaction designers focus on
improving the way users interact with the product. For example, making sure the
TV remote or doorknob is easy to use.
• UX designers look at the whole user journey, not just the moment of interaction.
They consider all aspects of the product that users interact with. Interaction
design is like a small part of the bigger picture of user experience design. It's
impossible to have good interaction design without considering the overall user
experience.

Why is Interaction Design Important?

In today's digital world, creating a great interaction experience is crucial. It can be as

simple as using a TV remote or as complex as using software. Smart tech companies
understand that a pleasant interaction leaves users satisfied or delighted. Remember
the first time you used an iPhone?

Steve Jobs, the founder of Apple, emphasized that design is not just about looks
but also about how things work and how users feel about them.

Here are some important interaction design principles:

1. Match user experience and expectations.

2. Maintain consistency in design throughout the application.

3. Follow functional minimalism by keeping things simple and useful.

4. Reduce mental pressure and make the application easy to understand.

5. Design interactively to keep users engaged.

6. Allow users to have control, trust, and explore the product.

7. Use intuitive and interactive media to invite interactions.

8. Make user interactions easy to learn and remember.

9. Take care to prevent errors and handle them effectively if they occur.

Page 52
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

10. Use familiar and physical-world interactions to make actions feel natural.

The interaction design process involves five stages:

1. Discover users' real needs by observing, interviewing, and analyzing existing

solutions.

2. Design a potential solution based on design guidelines and principles, using

techniques that match users' interaction preferences.
3. Start prototyping to give users a glimpse of the product and gather feedback
for improvement.

4. Implement and deploy the final version of the product.

5. The process is iterative, meaning it may take multiple rounds of testing and
refinement to reach the best solution.

Understanding your users' needs and continuously adapting to their feedback is

vital in the interaction design process. Design thinking is a helpful approach to gain
insights and create features that truly serve users' needs and desires. By
empathizing with users, designers can identify their real-world needs and provide
better solutions.
*********

2.5 BRANDING

Branding in UI design is the process of incorporating a company's visual identity

and personality into the user interface of a product or website. It involves using
consistent colors, typography, logos, and other design elements to create a
recognizable and cohesive brand image. Branding is essential in UI design as it helps
users associate the product with the company and builds trust and familiarity.

The Need for Branding in UI Design:

1. Recognition: Consistent branding elements help users identify the product with
the company, even across different platforms and touchpoints.
2. Trust and Credibility: A strong brand presence instills confidence in users,
making them more likely to engage with the product.
3. Consistency: Branding ensures a unified and cohesive experience, making
the product feel more reliable and professional.

Page 53
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

4. Differentiation: In a competitive market, branding sets the product apart from

competitors, making it stand out in users' minds.

UI Designers work with branding elements like logos, color palettes, typography, and imagery
when designing. For any design to be effective, all of these elements need to be locked down.
If the UI designer is provided with all of these, the final result will be an interface that runs
smoothly alongside the brand.

Here’s how those elements are used within UI design:

1. Logo

It’s been claimed that 75% of people recognize a brand by its logo first. Logos are the
backbone of a brand’s visual identity, everything else stems off from that. Therefore, when
designing a user interface, the logo should be one of the first things considered. It’s standard
for a logo to be placed somewhere in the header, as well as in the footer. As a result, the logo
is one of the first things a user sees when they load the webpage and can instantly make the
connection between the brand and interface.

Examples of how Boots and the National Trust position their logos within their websites. By
placing their logos at the top of the page, it ensures that their logos are one of the first things a
user sees when visiting their websites.

2. Color

UI Designers will use a brand’s color palette to pick out which colors to use for backgrounds,
text, buttons, and other UI elements. Color plays a huge visual role in both branding and UI
design, so it’s important for colors to be consistently used across print and digital interfaces.

Page 54
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

An example of how the Natwest color palette (left) has been injected into their UI
design. They’ve used purple as one of the most prominent colors, then brighter colors
are used to add bursts of color. NatWest’s website is a prime example of brands sticking
to their colors to keep branding consistent across print and digital.

3. Typography

UI designers will use any typefaces specified in the branding guidelines when they
come to inserting titles, subtitles, copy blocks and any other element of texts. Branding
guidelines specify which typefaces should be used for different textual elements. Therefore,
this can be easily carried across by UI designers when designing.

An example of how TripAdvisor has followed its brand guidelines when it comes
to typography. The guidelines advise that their font ‘Trip Sans’ should be used for titles
and ‘Trip Sans Mono’ for body copy. The guidelines also make recommendations for ‘web
safe’ fonts that can be used when Trip Sans isn’t available for use. By covering all possible
bases when it comes to typography, TripAdvisor ensures that its brand will stay consistent
across all platforms.

Page 55
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

4. Imagery

Brand guidelines tend to include specifics as to what style of imagery should be used within
branding. UI designers will use the imagery guidelines when looking for stock imagery to
place within their designs.

Alternatively, UI designers can be provided with standard imagery and illustrations that fit
within the brand guidelines – which they will then take and insert into the UI designs.

The Stages of Branding in UI Design:

1. Brand Strategy: Define the brand's core values, target audience, and unique
selling proposition (USP). This stage sets the foundation for the visual elements
that will be used in the UI design.

2. Visual Identity Design: Create the visual elements that represent the brand, such
as the logo, color palette, typography, and iconography. These elements should
align with the brand strategy.

3. UI Design Integration: Incorporate the brand's visual identity into the UI design.
Use the chosen colors, typography, and other elements to create a consistent and
on-brand interface.

4. Brand Guidelines: Document the brand guidelines that outline how the visual
elements should be used in the UI design. These guidelines ensure consistency
across different designers and projects.

5. User Testing: Test the UI design with real users to ensure that the branding
elements resonate with the target audience and provide a positive user experience.

Page 56
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

By integrating branding into the UI design process, companies can create a

memorable and cohesive user experience that reflects their identity and values,
ultimately leading to increased user engagement and loyalty.

Difference between UI Style Guides and Design systems

UI style guides are set rules with a complete list of user interface design’s do’s and
don’ts. Unfortunately, it is often easily confused with the term “design system,”
different design guidelines designers use. If you don’t know what design system
means, here’s a definition.

A design system is a complete list of design principles, standards, and documentation

that guides designers and developers to design consistent products and increase sales.
It is an all-encompassing design document that contains design style guides, design
patterns, technical specifications, and component libraries to improve product and
brand consistency.

A style guide is an element of a design system that lists out rules regarding the brand
and visual style of products. The critical difference between a UI style guide and a
design system is that the former focuses on the product’s overall aesthetics. At the
same time, the latter specifies how different design components within the design
aesthetics look and function.

Benefits of UI style guides for Users

Adopting a UI-style design for your digital products can help your web users feel more
confident and comfortable interacting with your products. Better user engagement increases
brand loyalty, which could increase your success rate for the product. Here are some of the
benefits of UI style guides:

1. First, it makes it easier for users to understand the digital product.

2. Second, it builds coherent experiences that help users feel comfortable using
your product.

Page 57
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

3. Third, adding intuitive features can help users interact with your digital products
without reading instructions.
4. Consistent branding increases brand recognition and helps users recognize
another website or application developed by your company.
5. It enhances brand loyalty.

Benefits of UI style guides for Design Teams

UI style guides guide designers to streamline the development process and create
consistent and well-designed digital products that increase your brand’s success. Here are
some of the benefits of UI style guides:

1. Creating your own UI style guide provides clear instructions or guidelines for
designers to follow when designing the product’s UI features.
2. It helps to save the time designers will spend seeking guidance from product
supervisors or leaders.
3. It offers developers and designers easy access to a library of approved assets and
elements that should be included in the products.
4. It encourages and improves collaboration between designers and developers since
they are all on the space page regarding design requirements.
5. It reduces the stress and burnout that comes with creating suitable designs.

Tips for Creating UI Style Guides

Here are the tips for creating a UI style guide:

1. It should be easy to use by people from different disciplines, professional

experiences, and cultural backgrounds.

2. It should have clean, uncluttered screen layouts that are well-organized, legible,
and clearly labelled. To make it easy to use, keep the visual information minimal
and use spacious arrangements.

Page 58
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

3. Keep the design instructions short and straight to the point. For example, use bullet
points in place of lengthy paragraphs. Also, prioritize visuals over words.

4. Since digital products are updated frequently, you must keep all relevant version
histories to help product teams.

Best UI Style Guide Generators

The following are the best tools/software that you can use to generate UI style guides.

1. Mockplus

Mockplus is an online design platform that allows users and designers to gather and
manage UI style guides, components, and design systems. It integrates your design
workflow and offers a complete set of features that allows users to design, prototype,
collaborate, comment, and discuss.

2. Fabricator

Fabricatoris an online tool for building UI style guides and design systems from their
UI toolkit code. It also allows you to organize your design system, such as the
components, structures, elements, and more, the way you want.

3. Aigis

Aigis is a Node.js package, a casual-to-use style guide generator that lets you auto-
generate a UI style guide from any text file. It is compatible with many text file formats such
as .css, .scss, .md,. styl, etc.

UI Style Guide Examples

1. Pockie eCommerce Design System

2. Smart Home System

3. Mobile look design

4. Dihome Figma design

5. Figma Design Style

6. Dashboard UI style guide Template

7. Sketch Style guide

Page 59
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

8. Dark Dashboard UI style Guide

● Enso Brand Style Guide

● Bond Sales Management dashboard style

● UI style kits

● Ramni UI shopping kit

● Zen Motors design system

● Brand Style Guide Illustrator

● Brand style guide template

******

2.6 STYLE GUIDE

Style guides in UI design are like detailed manuals that explain how a product or
website should look and feel. They help designers, developers, and others follow
consistent design rules for colors, fonts, icons, and more.

The need for style guides includes:

1. Making sure everything in the design looks the same and works well.
2. Saving time and effort by giving a reference for designers and
developers to follow.
3. Keeping a consistent brand image by defining how logos and colors should be
used.

Page 60
Course Code/Title: IT3V13 UI & UX DESIGN Unit II

The stages of creating style guides are:

1. Doing research about the brand and target audience.
2. Creating the visual elements like colors and icons for the design.
3. Making a library of reusable components like buttons and cards.
4. Writing down all the design rules and guidelines in a document.
5. Testing the design with real users and making improvements.
6. Integrating the style guide into the design and development process.

By using style guides, UI designers can create a user-friendly and cohesive

interface that represents the brand well and gives a positive user experience.

**********

Page 61
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

UNIT-III FOUNDATIONS OF UX DESIGN

Introduction to User Experience - Why You Should Care about User Experience -
Understanding User Experience - Defining the UX Design Process and its Methodology -
Research in User Experience Design - Tools and Method used for Research - User Needs
and its Goals - Know about Business Goals

3.1 INTRODUCTION TO USER EXPERIENCE

UX is a human-first approach to the design of a product, which has physical and digital
applications to the product.

User experience is how a person feels when interacting with a system.

This includes a website, mobile application, desktop software and basically any form of
human/device interaction.

A UX designer focuses on structural design solutions for any issues that the user encounters.

UX is frequently the first step in the process of creating a product, establishing the bare
bones of a project which UI then fills with interactive and visual elements.

Page 62
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Page 63
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Setting UX Goal as a Pyramid Structure:

This is an important step because a user’s first impression is critical. UXD can help with the
following:

1. What should the visual tone of the product be?

2. How do users feel when they see your product? Do they trust it?

3. It the product visually appealing and does it spark joy?

4. Is the visual design usable and accessible?

UX Pyramid:

The UX Pyramid is an excellent framework for categorizing UX effort and tracking progress. Based
on Maslow’s hierarchy of needs, the base of the UX Pyramid lays the foundation with fundamentals
(breathing, in Maslow’s case), before advancing to higher, more enriching user experiences.

Levels 1 to 3 of the Pyramid concentrate on a user’s ability to achieve a desired task. Levels 4

to 6 go on to focus on the user’s experiences while using the product or service.

Page 64
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Page 65
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Many budget-focused businesses only see value in achieving up to level 3, thereby missing out on
improved customer loyalty, customer advocacy, customer spend and many other incredibly beneficial
outcomes that stem from an engaged customer.

Level 1: Functional

● No bugs, errors and outages

● Uses current technologies (doesn’t rely on old technologies like Flash that don’t work on
phones or tablets)

● It has some purpose; someone has a need for it

● Includes all key features

● Works in all modern browsers

● Passes basic accessibility

Level 2: Reliable

● Loads in reasonable time, even in peak periods

● Content is current and accurate

● Data is clean and reliable

● Password resets are sent/received promptly

● It can be used effectively on mobile devices and standard device types

Level 3: Usable

Page 66
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

● Users don’t get lost or confused

● Users can easily find the content or products they are interested in

● The site doesn’t rely on constant help messages or long instruction manuals

● It has a short learning curve

● Users don’t rely on ‘hackings’ or workarounds to use it

● Call centres aren’t swamped with basic enquiries

● Meets basic UX heuristics and best practice

Level 4: Convenient

● Users want to use it

● Users actively find situations and reasons to use it more

● Users recommended, up-vote and rate it

Level 5: Pleasurable

● Users invest themselves into it

● Users promote, share and evangelise it

● It becomes part of the user’s regular routine

Level 6: Meaningful

● User love it; it brings meaning to their life

********

Page 67
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

3.2 WHY YOU SHOULD CARE ABOUT USER EXPERIENCE

The following are the several important reasons, why we should care about User
Experience every time

1) A poorly designed product won’t keep its users

2) You’ll get excellent ratings
3) Your developers will be happier
4) You’ll raise money faster
5) UX has always been part of our lives
6) UX teaches you about empathy
7) UX isn’t just about design, it is also about crafting experiences
8) UX brings a lot of career opportunities
9) UX will put you on a lifelong learning
A poorly designed product won’t keep its users:

If your application is hard to use, over time, people will walk away.

There is always a new alternative hitting your market, and they will compete with your
design.

If your design is timeless and intuitive your users won’t leave your app too quickly, even if
the competition has more features.

You’ll get excellent ratings:

In 2020, users don’t stay quiet. If they’re happy, they’ll say it, and if not, they’ll say it too.

User Experience Design and ease of use, the number one-point users talk about in their
product reviews.

Let them have what to compliment you on!

Page 68
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Page 69
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Your developers will be happier:

Software products that put a significant focus on UX Design tend to attract better
developers.

If developers see you don’t care about UX design, this will hint to them — that the burden
of design will fall on them.

Developers love to build.

Designers are trained to play around with your plans.

You’ll raise money faster:

Investors check for good UX before anything.

If you want a foot in the capital door, put in a great effort in designing your software
product properly.

You’ll pay now, but it will accompany your product forever.

UX has always been part of our lives:

As simple as it may sound, UX is everywhere.

It is seen in your everyday tasks.

Whether it be riding the MRT, ordering pizza online, or even just browsing through the net,
UX is there. It is just unnoticed by most people.

UX teaches you about empathy:

UX is about people building things and designing experiences for people. With UX, you will be
more concerned about “how can I help people live better?”, “how can I improve products or
services for people?” rather than “what is the most innovative product I can think of?”, “what will
bring more money in?”.

Page 70
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

UX isn’t just about design, it is also about crafting experiences

UI deals with the interface or the look while UX covers a bigger scope.

UX is not just about the aesthetics, it’s about how people use a product, what they feel when
they’re using it, the experiences.

Experiences are valuable because we see how people perceive, feel, react and behave towards
something.

In UX, we analyze these experiences and use them to further improve how we implement
design and tasks flows into our products.

When you start learning about UX, you will learn to ask the right questions.

“What problems am I solving?”

“Who am I doing this for?”
“How do people feel about the product?”
“Is the product design aligned with its purpose?”

UX brings a lot of career opportunities:

People are beginning to understand the importance of UX.

That’s why UX is becoming more and more popular in different industries all over the world.
UX is growing. This is reflected in the many career opportunities that a UX designer can go
into.

Jobs can range from the general UX designer to a UX specialist like user researcher, product
designer, or interaction designer.

Also note that careers in UX are part of the high-paying jobs spectrum.

The only downside (for some people) of pursuing a UX career is that most of these jobs are
located mostly in the States and UK.

Page 71
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

UX will put you on a lifelong learning:

Everything is dynamic, especially in UX. Since UX deals with people, it demands for constant

change.

The needs of people today may not be the same needs we see tomorrow. It is inevitable that
people will change, so as their needs.

Most people in their career are constantly faced with the problem that they have routine jobs.

In UX, you will get to learn about various aspects because user experience cuts across many

different fields.

Some of which are computer science, psychology, graphic design, marketing, and many more.

Because of this, you will be pushed to learn and acquire as many knowledge and skills as you

can, in just about everything. And I think that’s the greatest takeaways in life: continuous

growth and learning.

*************

3.3 UNDERSTANDING USER EXPERIENCE

UX is critical to the success or failure of a product in the market. UX is confused with usability. There
are 7 factors that describe user experience, according to Peter Morville a pioneer in the UX field.

● Useful

● Usable

● Findable

● Credible

● Desirable

● Accessible

● Valuable

Page 72
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Useful:

If a product isn’t useful to someone, why would you want to bring it to market. If it has no purpose,
it is unlikely to be able to compete for attention alongside a market full of purposeful and useful
products. It’s worth noting that “useful” is in the eye of the beholder and things can be deemed
“useful” if they deliver non-practical benefits such as fun or aesthetic appeal.

Usable:

Usability is concerned with enabling users to effectively and efficiently achieve their end objective
with a product. A computer game which requires 3 sets of control pads is unlikely to be usable as
people, for the time being at least, only tend to have 2 hands.

Products can succeed if they are not usable but they are less likely to do so. Poor usability is often
associated with the very first generation of a product think the first generation of MP3 players; which
lost their market share to the more usable iPod when it was launched. The iPod wasn’t the first MP3
player but it was the first truly usable MP3 player.

Findable:

Findable refers to the idea that the product must be easy to find and in the instance of digital and
information products; the content within them must be easy to find too. If you cannot find a product,

Page 73
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

you’re not going to buy it and that is true for all potential users of that product.

If you picked up a newspaper and all the stories within it were allocated page space at random, rather
than being organized into sections such as Sport, Entertainment, Business, etc. you would probably
find reading the newspaper a very frustrating experience. Findability is vital to the user experience
of many products.

Credible:

Credibility relates to the ability of the user to trust in the product that you’ve provided. Not just that
it does the job that it is supposed to do but that it will last for a reasonable amount of time and that
the information provided with it is accurate and fit-for-purpose.

It is nearly impossible to deliver a user experience if the user thinks the product creator is a lying,
clown with bad intentions they’ll take their business elsewhere instead.

Desirable:

Skoda and Porsche both make cars. They are to some extent both useful, usable, findable, accessible,
credible and valuable but Porsche is much more desirable than Skoda. This is not to say that Skoda
is undesirable they have sold a lot of cars under that brand but given a choice of a new Porsche or
Skoda for free most people will opt for the Porsche.
Desirability is conveyed in design through branding, image, identity, aesthetics and emotional design.
The more desirable a product is the more likely it is that the user who has it will brag about it and
create desire in other users.

Accessible:
Accessibility often gets lost in the mix when creating user experiences. Accessibility is about
providing an experience which can be accessed by users of a full range of abilities – this includes
those who are disabled in some respect such as hearing loss, impaired vision, motion impaired or

Page 74
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

learning impaired.

Design for accessibility is often seen by companies as a waste of money because the impression is
that people with disabilities make up a small segment of the population. In fact, in the United States
at least 19% of people have a disability according to the census data and it is likely that this number
is higher in less developed nations.

That’s 1 in 5 people in the audience for your product that may not be able to use it if it’s not
accessible or 20% of your total market.

It’s also worth remembering that when you design for accessibility, you will often find that you create
products that are easier for everyone to use not just those with disabilities. Don’t neglect accessibility
in the user experience.

Finally, accessible design is now a legal obligation in many jurisdictions including the EU and failure
to deliver it may result in fines.

Valuable:
Finally, the product must deliver value. It must deliver value to the business which creates it and to
the user who buys or uses it. Without value it is likely that any initial success of a product will
eventually be undermined.

Designers should bear in mind that value is one of the key influences on purchasing decisions. A
$100 product that solves a $10,000 problem is one that is likely to succeed; a $10,000 product that
solves a $100 problem is much less likely to do so.

DEFINING THE UX DESIGN PROCESS AND ITS METHODOLOGY

Design Thinking is an iterative process involving redefining problems, empathizing users, ideating

solutions. Design thinking process involves 5 phases (Refer Unit-1)

Page 75
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

1. Empathise,

2. Define,

3. Ideate,

4. Prototype,

5. Test

Page 76
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Methods of the UX Design process:

Here are some basic steps to start the user experience project.

1. User Personas

The first step in the process is getting to know your audience.

This allows you to develop experiences that relate to the voice and emotions of your users.

To begin this, you will want to create a user persona, which is a representation of a

particular audience segment for a product or a service that you are designing.

It allows you to create an example of the kind of person that might be using your product or

your service.

2. User interviews

Interview existing and potential users of the product or service to gain insight into what

would be the most effective design.

Because the user’s experience is subjective, the best way to directly obtain information is by

studying and interacting with users.

3. Job Stories

A short, simple description of a product feature told from the perspective of the person who wants

that feature.

4. Functionality map

Once you’ve studied the job stories, start by building a functionality map for the pages you

would like to create.

Page 77
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

A functionality map is a clearly organized hierarchy of all the pages and subpages within your

product.

Creating a functionality map makes it easier to imagine how a user will get from point A to
point B on your product, It is an effective tool for adding efficiency to the product building

process.

5. Wireframes

The visuals on each page matter just as much as the site structure, so invest time into
creating wireframes.

Visual guides that represent the skeletal framework of a product and provide a preview of
your product’s look and feel.

With a wireframe in place, you can eliminate usability issues before it gets developed. This
can save your development time for necessary adjustments down the line.

6. Prototyping

A prototype is a “mock up” version of your final product, which is then used for user testing
before a product launch.

Its goal is to reduce the level of wasted time and money that can often occur when proper
testing has not been carried out on a product prior to launch.

7. Usability testing

Usability testing is a way of testing how easy it is to use a product by testing it with real users
in order to identify any roadblocks or friction they might face when interacting with it.

By providing a great user experience for your users, not only can you increase the probability

Page 78
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

of them completing conversion tasks across your product, but you can change lives.

By making your interactions as simple and intuitive as possible you are making your end
users’ lives easier.

And if your product or service is able to help your users complete their tasks or solve their
problems as quickly as possible.
This will leave a lasting impression one of which they will happily talk about to their friends
and family.

● There are 3 types of usability testing,

1.Moderated vs. Unmoderated

2.Remote vs in person

3. Explorative vs Comparative

3.4 RESEARCH IN USER EXPERIENCE DESIGN

User experience (UX) research is the study of learning what end users of a system or product need
and want, then employing those insights to enhance the design process for products, services or
software.

UX research can take different forms depending on the area of focus. For example, for product teams,
UX research could mean validating concepts and prototypes. For marketing teams, it might mean
testing brand designs and messaging before launching products.

Benefits of UX research

UX research helps organizations in many ways, but the following are some of the oft-cited benefits
of performing UX research on a regular basis:

3.3.1 Understand how users experience websites, mobile applications, products

and prototypes.

Page 79
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

3.3.2 Evaluate and improve ideas and prototypes based on the findings of the UX
research, enabling organizations to make the right design decisions early in
the development process.

3.3.3 Discover new customer needs and business opportunities.

3.3.4 Find and fix flaws in products and services.

3.3.5 Provide better user experiences than competitors.

3.3.6 Understand every user interaction across the entire customer journey.

3.3.7 Develop a more useful picture of the target audience for better advertising
and marketing.

UX researcher role and responsibilities

The role of a UX researcher is to uncover user behaviors, needs and motivations to make products,
services and websites more intuitive and enjoyable for users. Using qualitative and quantitative
methods, they conduct comprehensive research and share the insights from research with the UX
designers. The goal of the UX researcher is to make the overall design process smoother and more
productive.

Some typical responsibilities of the UX researcher include:

3.3.8 Create a well-crafted research plan with clear objectives.

3.3.9 Build a picture of the target users based on their needs, wants, motivations
and challenges.

3.3.10 Write usability research screener questionnaires and discussion guides.

3.3.11 Recruit targeted users for specific research studies.

3.3.12 Moderate one-on-one usability sessions.

3.3.13 Develop and implement quantitative surveys.

Page 80
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

3.3.14 Conduct client and stakeholder interviews.

3.3.15 Provide actionable and meaningful recommendations for the product team.

3.3.16 Present findings of the design research to a larger team clearly and in an
organized manner.

3.3.17 Work closely with the product team to identify research goals.

3.3.18 Establish and implement an overall research strategy.

Page 81
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

3.5 TOOLS AND METHODS USED FOR RESEARCH

Like many types of research, studies on UX behaviors embody a number of different approaches to
testing, data aggregation and garnering information. This involves both quantitative and qualitative
methods.

Using quantitative research methods, UX researchers test proposed hypotheses about users' behaviors
and attitudes based on a system of numerical and statistical evidence. Quantitative methods uncover,
for instance, what percentage of people can successfully find a button on a page or how many users
clicked on a particular link.

Here are some of the most prominent forms of UX research in use today:

1.Card sorting. A technique that assesses and designs the navigation and structure of an application
or website by giving individuals a list of related items (for example, a sample inventory listing for an
online supermarket) and asking them to group the items in a way that makes the most logical sense to
them.

2.Contextual interviews. Monitored sessions where UX researchers observe users in their natural
environments and ask questions to gain firsthand accounts of their experiences.

3. Focus groups. A moderated feedback approach where a panel of users are asked to discuss their
experiences among themselves, either in moderated or open formats, to help researchers learn more
about the group's attitudes, ideas and wants.

4. Expert reviews. Accredited and verified evaluations of a website against a list of established
industry standards or other governing guidelines.
5.Surveys. A selected series of questions posed to a number of users that help researchers learn about
the individuals who use the end product.

6.Usability testing. An evaluation technique that attempts to uncover the problems and frustrations
users have with a site through one-on-one sessions where users perform tasks using a particular
software application or other product.

7.A/B testing. An assessment technique where users take part in blind studies that randomly assigns
those users to different versions of a website, application or other software product.

Page 82
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Page 83
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

USER NEEDS AND ITS GOALS

✔ User experience (UX) design is often seen as a balancing act between satisfying user needs
and meeting business objectives

✔ Designers must navigate the tension between these two priorities to create successful digital
products.

✔ Designing for user needs is critical to creating products that are user-friendly and meet the
expectations of the intended audience.

✔ UX designers must understand the users they are designing for, including their needs, goals,
and pain points

✔ This understanding enables designers to create products that are intuitive and easy to use,
resulting in a positive user experience.

✔ Businesses have goals they must meet, and the products they create must serve those goals.

✔ UX designers must ensure that their designs align with the business’s objectives and
contribute to the company’s bottom line.

✔ This means that designers must consider business metrics such as conversion rates, revenue,
and customer acquisition when designing digital products.

✔ The tension between designing for user needs and business goals can be challenging to
navigate.

✔ But it is essential for designers to find a balance that satisfies both priorities.

✔ One way to do this is to involve stakeholders from both sides early in the design process.
✔ So, designers can ensure that the business goals are aligned with user needs and that the
product they create is valuable to the company and the user.

✔ Another way to balance user needs and business goals is to prioritize the most critical user
needs and business objectives

✔ Designers should identify the core needs of their target audience and focus on designing a
product that meets those needs while contributing to the business’s objectives

Page 84
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

✔ This approach can help designers avoid feature bloat and ensure that their product provides
a clear value proposition to the user.

✔ UX designers must navigate the tension between designing for user needs and meeting
business objectives

✔ The key to finding a balance is to involve stakeholders from both sides early in the design
process and to prioritize the most critical user needs and business objectives.

✔ By doing so, designers can create successful digital products that satisfy both user needs and
business goals.

3.6 KNOW ABOUT BUSINESS GOALS

Taking Inspiration from Innovation: Key Insights from Eight Entrepreneurs Making an Impact in
Emerging Markets

It’s easy to feel overwhelmed by all the critical challenges we face globally.

For me, one source of hope and inspiration are the entrepreneurs we support at Miller Center for
Social Entrepreneurship, whose innovative solutions to these challenges demonstrate that business
really can be a force for social good.

But for social entrepreneurs to flourish, they must learn from each other. To that end, we asked
entrepreneurs from Miller Center’s Clean Water and Climate-Smart Agriculture in-residence
program to share some thoughts on their innovations, t

he challenges they’ve overcome and the lessons they’ve learned. The insights these eight leaders
shared can aid fellow social entrepreneurs in their journeys toward building sustainable businesses
that help end global poverty. (You may have seen them at last fall’s SOCAP conference, where they
took the stage to present their social enterprises during a standing- room-only pitch session.)
Whether working to increase smallholder farmers’ yields or profits, improve farmers’ distribution
and market access, or promote solutions to drinking water or sanitation, these entrepreneurs expressed
a few common themes, which I’ll share below.

PAY CLOSE ATTENTION TO CUSTOMERS’ NEEDS

Page 85
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Rather than relying on generic, theoretical or top-down solutions — or assuming that a workable
solution in one situation can be generalized to another set of circumstances — successful
entrepreneurs begin by thoroughly understanding the needs, obstacles, environment, influences and
dynamics of the people or communities they intend to serve.

For example, Cycle Connect focuses on helping isolated farmers acquire the assets they need to
increase yields and reach buyers for their products. “We meet our clients where they are: in deep rural
areas disconnected from roads, markets and connectivity,” said CEO Emmy Okkema. “By being
close to our clients in the last mile, we are able to understand their farming cycles, social structures
and financial capacity.” Based on this familiarity with its customers’ needs, Cycle Connect has
provided more than 12,000 farmers with productive assets they need
— including oxen, plows and transport such as bicycles and motorcycles — which the enterprise also
plays a key role in distributing to the farmers. As Okkema describes it, her company is the only
successful provider of these essential assets, “due to our farmer-centric loan terms, community-based
oxen sourcing and tailor-made business training that includes renting out oxen in the farmers’
villages.”

ADAPT TO NEW CHALLENGES

Entrepreneurs must often deal with unexpected challenges — particularly when working in emerging
markets. Sometimes, they need to move away from what originally seemed like a viable path, in
response to changing conditions or new pressures.

That’s what The Harvest Fund — which leverages technology, finance and training to support
marginalized women farmers in Africa — did when it faced a sudden obstacle with one particular
crop. “After we pivoted toward tomato production, the markets experienced an extreme drop in fresh
tomato prices,” said Michelle Kurian, the enterprise’s executive director. “We then brainstormed
ways to easily process fresh tomatoes to tomato paste at farm level.” Zambia has only two tomato
products companies, and they generally import their tomato paste, so The Harvest Fund realized it
could fill a supply chain gap with its farmers’ locally produced paste.
Gravity Water, which turns rain into safe drinking water for schools in developing countries around
the world, encountered a challenge of a different nature. “When Gravity Water first launched in
Nepal, the country was still rebuilding after two devastating earthquakes in 2015,” said Danny
Wright, the company’s founder and executive director. The earthquakes’ destruction complicated

Page 86
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Gravity Water’s mission due to post-quake water pollution, limited electricity to run water filtration
systems, and lack of money and knowledge to fix the ones already installed. The enterprise responded
by developing an innovative, 100% electricity-free solution combining rainwater harvesting, elevated
storage and gravity-fed filtration to meet the needs of its customers.

Natural disasters have also presented challenges to Miyonga Fresh Greens, which works with growers
across East Africa to export fresh vegetables and fruits to markets in Europe. The effects of climate
change have led to more severe weather, and in some Kenyan counties where Miyonga works, heavy
rains were destroying crops, causing a reduction in yield, diminishing the product quality of harvested
produce and creating unpredictable supply for the company to distribute. To address this challenge,
“in 2020 Miyonga introduced innovative agro-processing technology, creating dried and powdered
fruit products to expand growers’ value beyond fresh horticultural products for export and local
consumption,” said Grace Njoroge, operations manager.

In other cases, a lack of local resources can complicate a company’s original business plan. For Sauti
East Africa, their initial concept of creating a platform to connect low-technology farmers with
market information faltered when they discovered that data sources profiling buyers and sellers in
East Africa’s marketplaces simply weren’t available. “We were falling short of addressing one of the
greatest needs for farmers in East Africa: finding buyers for their products,” said Lance Hadley, the
company’s CEO and co-founder. Sauti responded by establishing its own directory of buyers and
sellers, enabling them to connect farmers to this information directly.
Solving funding challenges is another area that requires creative solutions. For example, getting
funding to help vulnerable communities gain access to clean water is easier than finding funders
willing to pay for the ongoing maintenance of the handpumps, taps and other systems necessary to
sustain that water access. SaniTap is addressing this gap through an innovative financing mechanism
to rehabilitate — and maintain for 15 years — water sources serving hundreds of thousands of people
in Madagascar. “SaniTap will use the fast-emerging carbon offset market to finance the work,” said
Andrew Tanswell, managing director. “Carbon credits will be generated from the restored provision
of safe drinking water, and will then create revenue through their sale to large corporations that seek
to go carbon-neutral and net-zero.”

But perhaps the most counterintuitive example of a business challenges these entrepreneurs shared
was from AMAATI, which had to think creatively when its efforts were actually too successful. The

Page 87
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

Ghanaian social enterprise, which is working in Northern Ghana to revive the use of fonio, an ancient,
nutrition-dense cereal grain, initially targeted only women smallholder farmers. “Women’s land
access was the key problem we wanted to solve,” said CEO Salma Abdulai. “However, when men
realized that women using marginal lands for fonio started growing other crops after the land was
regenerated, they insisted on getting the land back.” AMAATI responded by involving the men in
the cultivation of fonio, too. “Once they started benefiting from their relationship with AMAATI,
they realized how important it was for their wives to continue using the land,” Abdulai said.

Page 88
Course Code/Title: IT3V13 UI & UX DESIGN Unit III

FORGE DEEPER CONNECTIONS WITH CUSTOMERS, FUNDERS AND PARTNERS

Many of these social entrepreneurs acknowledged how critical it is to establish and extend
connections with customers, partners, funders and other parties.

For example, Warc Africa, which designs and sells regenerative farming inputs as a service, found
success when they “pivoted to a partnership approach with suppliers and downstream buyers to shift
to fairer pricing and cash-and-carry — resulting in more inputs delivered to more farmers at prices
that helped farmers save $100 per acre on maize input bundles, and [allowed] Warc to operate with
no credit risk,” said CEO Christopher Zaw.

In Uganda, Cycle Connect leveraged its relationship with customers to help farming families
overcome their physical distance to markets for their products. “The past year we set up six smaller
branches in last-mile trading centers that are 50 miles from nearby towns,” said CEO Emmy Okkema.
“This allowed us to build strong relationships with farming communities and see more clients faster.
With this strategy we saw a 70% increase in loans, and we now have a 95% repayment rate.”
Grace Njoroge at Miyonga also believes in the power of strong business relationships. “One aspect
that has greatly contributed to Miyonga’s growth is forming strategic partnerships,” she said. “Over
the years we have partnered not only with the farmers we work with, but also with institutions and
development agencies. The partnerships have enabled Miyonga to not only gain funding for our
projects, but also increase our resources, access a wealth of knowledge, increase revenue and reach a
wider market — thus enabling us to bridge the gap between opportunity and expertise while
improving the livelihoods of smallholder farmers.”

Page 89
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

UNIT IV WIREFRAMING, PROTOTYPING AND TESTING

Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing
- Creating Wireflows - Building a Prototype - Building High-Fidelity Mockups - Designing
Efficiently with Tools - Interaction Patterns - Conducting Usability Tests
- Other Evaluative User Research Methods - Synthesizing Test Findings - Prototype Iteration

4.1 SKETCHING PRINCIPLES

Sketching is a fundamental skill in various fields, including art, design, architecture, engineering,
and more. Here are some essential principles to keep in mind when sketching:

Observation:

Carefully observe the subject you're sketching, whether it's an object, a person, or a scene. Pay
attention to details, proportions, and relationships between elements.

Simplify Complexity:

Begin by simplifying complex subjects into basic shapes and forms. This simplification makes it
easier to capture the essence of the subject.

Line Quality:

Vary your line weight and style to convey depth, texture, and dimension. Light lines can represent
highlights, while heavier lines can indicate shadows or bold outlines.

Proportion and Scale:

Ensure that the proportions and scale of your sketch accurately represent the subject. Use basic
measuring techniques like comparative measurement to maintain accuracy.

Negative Space:

Pay attention to the spaces between objects or within the subject. Sketching the negative space can
help define the positive shapes more accurately.

Composition:

Consider the arrangement of elements within your sketch. Use principles like the rule of thirds or
golden ratio to create balanced and visually pleasing compositions.

Perspective:

Understand perspective principles to give your sketches depth and three-dimensionality. Use
techniques like one-point, two-point, or three-point perspective to create realistic spatial

Page 90
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

relationships.

Contrast and Values:

Use contrast in line weight, shading, and values to create depth and emphasize focal points. Darker
areas can recede, while lighter areas can come forward.

Texture:

Depict texture through variations in line quality and shading. Different textures, such as rough,
smooth, or reflective, can add realism to your sketches.

Consistency:

Maintain a consistent style and approach throughout your sketch. This helps create a cohesive and
unified visual language.

Experimentation:

Don't be afraid to experiment with different sketching techniques, materials, and styles. Exploring
new approaches can lead to creative breakthroughs.

Practice:

Regular practice is essential to improve your sketching skills. Set aside time to sketch regularly,
even if it's just for a few minutes each day.

Gesture and Flow:

Capture the essence and movement of your subject with gestural lines. Allow your hand to flow
naturally as you sketch, emphasizing motion and energy.

Erase Strategically:

Don't hesitate to erase and refine your sketch as needed. Erasing can help correct mistakes and
refine details.

Feedback and Learning:

Seek feedback from peers, mentors, or teachers to gain insights and improve your sketching skills.
Take advantage of tutorials, books, and online resources to continue learning.

Creativity and Expression:

Sketching is not just about technical accuracy; it's also a means of expressing your creativity and
personal style. Don't be afraid to infuse your sketches with your unique artistic voice.

Page 91
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Remember that sketching is a skill that improves with practice and patience. Whether you're
sketching for art, design, or any other purpose, these principles will help you develop your abilities
and create compelling sketches.

**********

4.2 SKETCH RED ROUTES

"Sketching red routes" typically refers to the process of visually identifying and mapping out the
most critical or high-priority user journeys or tasks within a user interface or user experience
design. Red routes are essential because they represent the core functionalities or interactions that
users need to accomplish their goals.

Here's how you can sketch red routes:

Identify Key User Tasks:

Begin by identifying the key tasks or user journeys that are central to your design or application.
These tasks should align with your project's objectives and user needs.

Prioritize Red Routes:

Page 92
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Determine which of these tasks are the most critical or "red routes." These are the actions that, if
poorly designed or implemented, can have a significant negative impact on the user experience or
the success of the project.

Sketching Workflows:

For each red route, start by sketching the user's workflow or journey. This involves visually
mapping out the series of steps and interactions that the user will follow to complete the task.

Storyboarding:

Create a series of simple sketches or storyboards that illustrate each step in the workflow. Use
arrows or lines to indicate the flow of the user's actions.

Annotations:

Add annotations or notes to your sketches to describe what's happening at each step. Explain the
user's actions, system responses, and any decision points or interactions.

User Interface Elements:

Include basic user interface elements in your sketches, such as buttons, forms, menus, and screens.
Focus on the essential elements necessary to complete the task.

Visual Hierarchy:

Consider the visual hierarchy and layout of your sketches. Use visual cues like size, position, and
emphasis to highlight critical elements or actions.

Feedback and Error Handling:

Depict how the system provides feedback to the user at different stages of the red route. Show how
errors or issues are handled and communicated.

Usability Testing:

If possible, use your sketches to conduct usability testing with real users. This can help identify
potential usability issues and refine the red routes.

Iterate and Refine:

Based on feedback and insights from sketching the red routes, iterate and refine your designs.
Make adjustments to improve the clarity and efficiency of the user journeys.

Documentation:

Document the red routes, including sketches, annotations, and any usability findings. This

Page 93
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

documentation can be valuable for the design and development teams.

Communication:

Share your red route sketches and findings with project stakeholders, including designers,
developers, and product managers. This helps ensure that everyone understands the critical user
journeys and their importance.

Page 94
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Sketching red routes is a valuable design practice for ensuring that the most vital user interactions
in your project receive the attention and design focus they deserve. It helps prioritize user
experience efforts and contributes to the overall success of the design.

Benefits of Identifying Red Routes

Identifying red routes helps your team prioritize user needs and facilitate alignment amongst your stakeholders.
It also helps avoid scope creep and the introduction of extraneous/ancillary features.
Most importantly, it helps your team build and optimize product features that deliver the most value to your
customers and drive your key metrics.
"Red Routes" typically refer to major roads in urban areas where stopping, parking, and loading
restrictions are strictly enforced to maintain traffic flow.
Here are some key points you might want to consider when sketching notes about Red Routes:
Definition: Red Routes are major roads designated by a red line along the edge of the pavement. They are meant
to ensure constant traffic flow by prohibiting activities that could hinder it, such as parking, stopping, or loading.
Traffic Flow: The primary goal of Red Routes is to keep traffic moving smoothly and efficiently, especially
during peak hours. This helps reduce congestion and travel times.
Restrictions: Note the types of activities that are restricted on Red Routes:
No parking: Vehicles cannot be parked on the road, even temporarily.
No stopping: Vehicles cannot come to a halt, except in emergencies or at designated areas like bus stops.
No loading/unloading: Commercial activities like deliveries are restricted to specific times and areas.
Clear Signage: Red Routes are often marked with clear signage indicating the restrictions. Look for signs with

Page 95
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

the red route symbol and associated regulations.

Enforcement: Red Routes are typically rigorously enforced to maintain their effectiveness. Local authorities use
CCTV cameras, traffic wardens, and automated systems to monitor and issue fines for violations.
Exceptions: Some Red Routes might have specific exceptions, such as allowing loading/unloading during certain
hours or granting permits to certain vehicles (e.g., emergency services).
Benefits:
Reduced congestion: By preventing activities that disrupt traffic flow, Red Routes help keep the roads clear.
Improved air quality: Reduced idling and smoother traffic flow can lead to lower emissions.
Faster travel times: Vehicles can move more quickly along these routes without frequent stops.
Impact on Businesses: While Red Routes prioritize traffic flow, they can pose challenges to businesses that rely
on deliveries or curb-side services. Finding a balance between traffic management and supporting local commerce
is important.
Public Transport: Red Routes often include dedicated lanes for buses or trams, which further enhances public
transport reliability.
Urban Planning: Red Routes are part of broader urban planning strategies to create more efficient transportation
networks. They might complement initiatives like pedestrian zones, cycling lanes, and public spaces.
Community Awareness: Local authorities often engage in public awareness campaigns to educate drivers about
Red Routes, their benefits, and the consequences of violations.
Technology and Future Developments: As technology advances, automated systems for monitoring and
enforcement might become more sophisticated, helping ensure compliance and safety.
Remember to organize your notes in a clear and concise manner, using bullet points, headings, or diagrams to
visually represent the information. These points should give you a good foundation for understanding and
explaining the concept of Red Routes.

*********
4.3 RESPONSIVE DESIGN

Definition:

Responsive Design is an approach to web design that makes web pages render well on various
devices and window or screen sizes. It ensures that websites adapt and respond fluidly to different
user contexts, such as desktops, laptops, tablets, and smartphones, providing an optimal viewing
and interaction experience.

Page 96
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Key Principles of Responsive Design:

1. Fluid Grid Layout:

Percentage-Based Widths: Instead of fixed pixel widths, elements are defined in percentages,
allowing them to scale based on the screen size.

Flexible Grids: Grid layouts are designed to be fluid, adjusting seamlessly to different screen
dimensions.

2. Flexible Images:

CSS Media Queries: Images can be made responsive using CSS media queries, ensuring they
resize and adapt based on the screen width.

Max-Width Property: Images are set to have a maximum width of 100% of their parent element,
preventing them from overflowing their containers.

3. Media Queries:

Breakpoints: Media queries are used to apply specific CSS styles based on the device's
characteristics, such as width, height, or orientation.

Adaptive Styling: Different CSS rules are applied for different screen sizes, ensuring optimal
layout and readability.

4. Mobile-First Approach:

Start Small: Design and develop for mobile devices first, then progressively enhance the design
for larger screens.

Enhancement Principle: Advanced features and styles are added as the screen size increases,
ensuring a baseline experience for all devices.

5. Viewport Meta Tag:

Initial-Scale: The viewport meta tag controls the initial zoom level when the page is first loaded,
ensuring proper scaling on different devices.

Width: Setting the viewport width to device width allows the website to adapt to the specific
device's screen width.

Benefits of Responsive Design:

1. Enhanced User Experience:

Consistency: Users have a consistent experience across various devices, fostering familiarity and

Page 97
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

ease of use.

Page 98
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Improved Accessibility: Responsive design ensures accessibility for users with disabilities on
different devices.

2. SEO Benefits:

Improved Ranking: Search engines favor mobile-friendly websites, leading to improved search
engine rankings for responsive sites.

Single URL: Responsive design uses a single URL, avoiding duplicate content issues common with
separate mobile sites.

3. Cost-Effectiveness:

Maintenance Efficiency: Managing a single responsive site is more efficient than maintaining
multiple versions for different devices.

Future-Proofing: Responsive sites are adaptable to new devices and screen sizes, reducing the
need for frequent redesigns.

4. Higher Conversion Rates:

Optimal User Experience: Users are more likely to engage, interact, and convert on websites
that offer a seamless experience on their preferred devices.

Challenges and Considerations:

1. Performance Optimization:

Image Compression: Heavy images can impact loading times, requiring careful optimization for
various screen resolutions.

Code Efficiency: Efficient coding practices are crucial to maintain fast load times, especially on
mobile networks.

2. Testing Across Devices:

Device Diversity: The wide array of devices and screen sizes requires extensive testing to ensure
consistent functionality and appearance.

Emulators and Testing Tools: Various emulators and online testing tools aid in evaluating
responsive designs across multiple devices.

Conclusion: Responsive design has become essential in the modern web development landscape.
By embracing fluid grids, flexible images, media queries, and a mobile-first approach, websites
can deliver optimal user experiences across diverse devices, leading to higher user engagement,
improved SEO rankings, and ultimately, business success in the digital realm.

Page 99
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

*************

4.4 WIREFRAMING

Definition:

Wireframing is a visual representation of a website or application's user interface. It outlines the

basic structure and layout of the interface without design elements like colors and images, focusing
on functionality, user interactions, and content hierarchy.

Purpose:

Conceptual Visualization: Provides a conceptual overview of the interface, allowing stakeholders

to understand the structure and layout of the application.

Functional Blueprint: Serves as a functional blueprint for developers and designers, guiding the
development process.

User-Centric Design: Helps in understanding user interactions and user experience (UX) by
emphasizing navigation, information architecture, and content placement.

Cost-Efficient Prototyping: Enables quick and cost-effective changes during the early stages of
design, saving time and resources in later development phases.

Key Elements of Wireframes:

Layout: Defines the arrangement of elements, such as headers, footers, navigation bars, and
content areas.

Content: Represents textual and visual content placement, including images, videos, and text.

Functionality: Illustrates interactive elements like buttons, forms, and links, showcasing how
users will interact with the interface.

Hierarchy: Establishes the visual hierarchy of information, indicating which elements are more
important through size, placement, or formatting.

Navigation: Demonstrates the flow between different pages or sections, including menus, sub-
menus, and links.

Types of Wireframes:

Low-Fidelity Wireframes: Simple, basic representations focusing on structure and placement,

often created using pen and paper or wireframing tools. They lack details and are quick to produce.

High-Fidelity Wireframes: More detailed and polished versions, including specific colors, fonts,

Page 100
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

and some visual elements. They provide a closer approximation of the final product.

Best Practices for Wireframing:

Understand User Needs: Research user requirements and preferences to inform the wireframe
design.

Keep It Simple: Focus on essential elements and functionality; avoid unnecessary details.

Iterative Design: Embrace feedback and iterate on wireframes based on user and stakeholder input.

Consistency: Maintain consistency in layout, navigation, and design elements across the wireframes.

Collaboration: Involve key stakeholders, including designers, developers, and users, in the
wireframing process to gather diverse perspectives.
Tools for Wireframing:
Pen and Paper: Quick and easy for brainstorming and initial concepts.
Digital Tools: Software like Adobe XD, Sketch, Figma, Balsamiq, and Axure RP offer specialized tools for
creating digital wireframes.
Prototyping Tools: Some wireframing tools also provide prototyping features, allowing you to create
interactive mockups.
Remember that wireframing is a crucial step in the design process that helps clarify the project's scope,
functionality, and user experience. It's an essential tool for effective communication between design teams,
stakeholders, and developers.
What are wireframes all about? The designs you received are called wireframes (sometimes called wires,
mockups, or mocks). A wireframe is a schematic, a blueprint, useful to help you and your programmers and
designers think and communicate about the structure of the software or website you're building.
Not dissimilar to an architectural blueprint, a wireframe is a two-dimensional skeletal outline of a
webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture,
user flow, functionality, and intended behaviors. As a wireframe usually represents the initial product concept,
styling, color, and graphics are kept to a minimum.
Wireframes can be drawn by hand or created digitally, depending on how much detail is required.
Wireframing is a practice most commonly used by UX designers. This process allows all stakeholders to agree
on where the information will be placed before the developers build the interface out with code.

Page 101
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

***********

4.5 CREATING WIREFLOWS

Definition:

Wireflows combine the concepts of wireframing and user flow diagrams, offering a holistic view
of both the structure and user interactions within a digital interface. It integrates the functional
aspects of wireframes with the sequential user interactions represented in flowcharts.

Purpose:

Integration of Structure and Flow: Unlike standalone wireframes or flowcharts, wireflows

seamlessly blend the structural layout of a user interface with the sequential flow of user interactions.

Enhanced Communication: Wireflows facilitate effective communication between designers,

developers, and stakeholders, ensuring a shared understanding of both the layout and the user
journey.

Improved User Experience: By visually representing both structure and flow, designers can
ensure that the user interface is not only logically organized but also optimized for a smooth user
experience.

Key Elements of Wireflows:

Wireframe Components: Include wireframe elements such as headers, footers, menus, buttons,
forms, and content areas, defining the layout and structure of the interface.

User Flows: Represent the sequential steps a user takes to achieve specific tasks, including
navigation paths, interactions, and decision points.

Annotations: Provide explanations and additional details about specific elements, interactions, or
functionalities within the wireflow.

Steps to Create Effective Wireflows:

Define User Personas: Understand the target audience, their needs, preferences, and behaviors to
design user-centered wireflows.

Identify User Scenarios: Define common user scenarios or tasks that the interface should support.

Create Wireframes: Develop wireframes for key screens, ensuring clarity in layout, content
placement, and interactive elements.

Page 102
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Map User Flows: Establish the sequential steps users will follow to accomplish tasks, connecting
wireframes in a logical order.

Annotate Elements: Add relevant annotations to explain specific functionalities, interactions, or

user decisions.

Review and Iterate: Collaborate with stakeholders to review the wireflows, gather feedback, and
make necessary revisions to enhance clarity and functionality.

Best Practices for Creating Wireflows:

Consistency: Maintain consistent design elements, terminology, and interactions across all
wireframes and flowcharts.

Clarity: Ensure that wireflows are clear and easy to understand, even for someone unfamiliar with
the project.

Collaboration: Foster collaboration between design, development, and stakeholder teams to

ensure a comprehensive and accurate representation of the interface.

Versioning: Keep track of versions and changes made during the iterative design process to
maintain a clear development path.

User Testing: Consider user testing to validate the wireflows, ensuring that they align with user
expectations and behaviors.

However, product designers have been using hybrid methods for wireframing for a long time. We're talking
about wireflows — a series of wireframes connected to document a user flow. The type of diagram you want to
use for a specific user flow depends on the type of app you are designing — specifically, how many unique
pages it has or if the page's content dynamically changes based on user interaction.

Conclusion: Wireflows provide a powerful method to visualize both the structure and user
interactions of a digital interface, enabling teams to create user-friendly designs that meet both
functional and experiential requirements. Through a meticulous combination of wireframing and
flowcharting, wireflows serve as a bridge between design and functionality, ensuring a seamless
and intuitive user journey.

*************

Page 103
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Page 104
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

4.6 BUILDING A PROTOTYPE

Definition:

Prototyping is the process of creating a preliminary version of a product or system to visualize,

test, and validate its design, functionality, and user experience before the final product is
developed. Prototypes can vary in fidelity, from low-fidelity paper sketches to high-fidelity
interactive digital models.

Purposes of Prototyping:

Visualization: Prototypes provide a tangible representation of the product, allowing stakeholders

to visualize the design and layout.

User Feedback: Prototypes facilitate user testing and feedback, enabling designers to understand
user interactions and preferences early in the design process.

Clarification: Prototypes help in clarifying requirements, functionalities, and design elements

among team members and stakeholders.

Risk Reduction: By identifying potential issues and challenges early, prototypes assist in reducing
risks associated with the final product development.

Steps in Building a Prototype:

1. Define Objectives:

Clearly outline what you want to achieve with the prototype. Identify specific features,
interactions, and design elements to focus on.

2. Choose the Prototype Type:

Decide whether you need a low-fidelity prototype (for quick ideas and concepts) or a high-fidelity
prototype (for detailed design and functionality testing).

3. Sketch or Wireframe:

Start with rough sketches or wireframes to map out the basic layout and elements of your prototype.
This helps in visualizing the initial concept.

4. Develop Interactive Prototypes:

Utilize prototyping tools and software to create interactive prototypes with clickable buttons,
menus, and basic functionalities. This step is crucial for user testing.

Page 105
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

5. Test and Gather Feedback:

Conduct usability testing with real users. Gather feedback on the prototype's usability, user
experience, and any issues encountered.

6. Revise and Refine:

Based on user feedback, make necessary revisions to the prototype. Address usability issues, refine
design elements, and improve user interactions.

7. Repeat the Process:

Depending on the complexity of the project, iterate through the prototyping process multiple times.
Each iteration helps in refining the design and enhancing user satisfaction.

Best Practices for Prototyping:

Involve Stakeholders: Include stakeholders in the prototyping process to ensure alignment with
project objectives and expectations.

Iterative Approach: Prototyping is an iterative process. Be prepared to refine the prototype based
on user feedback and team evaluations.

Realism vs. Speed: Balance between creating a realistic representation of the final product and
the speed of prototyping. High-fidelity prototypes might take longer to develop but provide a more
accurate user experience.

User-Centric Design: Prioritize user feedback and preferences. The prototype should align with
user needs and expectations.

Absolutely, building a prototype for user interface (UI) and user experience (UX) is a crucial step in designing
digital products, such as websites or mobile apps. It allows you to visualize and test the interaction and flow of
the user interface before committing to full development.

Here are some notes to consider when building a UI/UX prototype:

1. Define Goals and User Needs:

Clearly understand the goals of your digital product and the needs of your target users. What problems
are you solving, and how will your product address them?
2. Choose the Right Tools:

Page 106
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Select prototyping tools that match your project's complexity and your team's skills. There are various
tools available, from low-fidelity wireframing tools to high-fidelity interactive prototyping tools.

Page 107
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

3. Low-Fidelity Wireframes:
Start with low-fidelity wireframes to outline the basic layout, structure, and content placement. Focus on
the overall information hierarchy and user flow.
4. Information Architecture:
Organize the content in a logical and intuitive manner. Consider how users will navigate through the
interface and find the information they need.
5. Visual Design:
Once your wireframes are in place, work on the visual design. Define color schemes, typography, icons,
and other visual elements that align with your brand and appeal to your target audience.
6. Interactive Elements:
Build interactions into your prototype to demonstrate how users will interact with various elements. This
can include buttons, menus, forms, and more.
7. High-Fidelity Prototyping:
As your design becomes more refined, create high-fidelity prototypes that closely resemble the final
product's look and feel.
8. User Flow and Navigation:
Test different user flows to ensure that the navigation is intuitive and users can easily achieve their goals.
9. Gestures and Animations:
If your digital product involves touch interactions (e.g., mobile apps), incorporate gestures and animations
to mimic the real user experience.
10. Test on Real Devices:
Test your prototype on actual devices to ensure that it functions properly across various screen sizes and
orientations.
11. User Testing:
Conduct usability testing with real users. Observe how they interact with your prototype and gather
feedback to identify pain points and areas for improvement.
12. Iterate and Refine:
Use the feedback from user testing to iterate and refine your prototype. Don't hesitate to make changes
based on user insights.
13. Responsive Design:
Ensure your prototype is responsive, meaning it adapts gracefully to different screen sizes and devices.
14. Accessibility Considerations:
Design your prototype with accessibility in mind, ensuring that all users, including those with disabilities,
can interact with it effectively.

Page 108
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Page 109
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

15. Collaboration:
Collaborate with team members, including designers, developers, and stakeholders, throughout the
prototyping process to gather diverse perspectives and insights.
16. Presenting to Stakeholders:
When presenting your UI/UX prototype to stakeholders or clients, clearly explain the design choices and
user flows to convey the intended user experience.
Remember that a UI/UX prototype is a dynamic tool to iterate and refine your design, allowing you to
identify and address potential issues before moving into development. It's an essential step to create a user-
centered and effective digital product.

Conclusion: Prototyping is an invaluable step in the product development lifecycle, offering a

practical way to visualize ideas, gather feedback, and mitigate risks. By following a systematic
approach, involving stakeholders, and focusing on user experience, prototypes become powerful
tools for creating successful and user-friendly products and applications.

***********

4.7 BUILDING HIGH-FIDELITY MOCKUPS

Definition:

High-fidelity mockups are detailed, visually polished representations of a digital interface,

showcasing the final look and feel of a product. These mockups incorporate precise colors,
typography, images, and interactive elements, providing a realistic preview of the user interface.

Purposes of High-Fidelity Mockups:

Visual Representation: High-fidelity mockups present a visually accurate representation of the

final product, incorporating brand guidelines and design aesthetics.

User Experience Evaluation: Designers and stakeholders can evaluate the user experience (UX)
and user interface (UI) elements in a realistic context, identifying potential issues before
development.

Client Communication: High-fidelity mockups facilitate clear communication with clients and
stakeholders, allowing them to visualize the project's direction and make informed decisions.

Developer Reference: Detailed mockups serve as precise references for developers, ensuring that
the implemented interface aligns with the intended design.

Page 110
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Key Steps in Building High-Fidelity Mockups:

1. Gather Requirements:

Client Inputs: Understand client preferences, brand guidelines, and specific design requirements
to incorporate them into the mockups.

User Research: If applicable, analyze user feedback and behavior data to inform design decisions.

2. Create Wireframes:

Basic Structure: Develop wireframes outlining the fundamental layout and structure of the
interface, focusing on content placement and functionality.

3. Design Detailed Mockups:

Color Scheme: Apply the project's color palette consistently, ensuring harmony and contrast for
readability and visual appeal.

Typography: Choose appropriate fonts and styles for headings, body text, and interactive
elements, maintaining readability across different devices.

Images and Icons: Integrate high-resolution images, icons, and graphics relevant to the content,
ensuring they are clear and visually appealing.

Interactive Elements: Design buttons, forms, navigation menus, and other interactive elements with
attention to size, spacing, and feedback animations.

4. Use Design Tools:

Graphic Design Software: Utilize tools like Adobe XD, Sketch, or Figma, which offer extensive
features for creating high-fidelity mockups.

Prototyping: Some tools allow for basic interactive prototyping, enabling the visualization of
transitions and user flows.

5. Iterate and Gather Feedback:

Internal Review: Conduct internal reviews with the design team to identify improvements and
refinements.

Stakeholder Feedback: Share the mockups with stakeholders and clients, gathering feedback to
make necessary adjustments.

6. Handoff to Developers:

Page 111
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Annotations: Provide detailed annotations, specifying colors, fonts, dimensions, and interactive
behaviors.

Assets: Prepare and organize all assets (images, icons, etc.) required for development, ensuring they
are easily accessible.

Best Practices for High-Fidelity Mockups:

Consistency: Maintain consistent design elements, such as buttons, fonts, and colors, across all
screens for a cohesive user experience.

Realism vs. Simplicity: Achieve a balance between realism and simplicity. Focus on clarity and
user understanding while ensuring a visually appealing design.

Accessibility: Ensure that color choices and contrast ratios meet accessibility standards, making the
interface usable for all users.

Responsive Design: Design mockups with responsiveness in mind, showcasing how the interface
adapts to various screen sizes and orientations.

Version Control: Use version control systems or naming conventions to keep track of different
iterations and changes made during the design process.

***********

4.8DESIGNING EFFICIENTLY WITH TOOLS

Introduction: Efficient designing processes are crucial in various fields, including project
management, software development, and problem-solving. Utilizing appropriate tools enhances
clarity, collaboration, and precision in defining tasks, requirements, and objectives. Here's a guide
on defining efficiently with tools.

1. Mind Mapping Tools:

Purpose: Mind mapping tools like MindMeister and XMind help visualize complex concepts,
breaking them down into manageable, interconnected ideas.

Benefits: Improve brainstorming, identify relationships, and organize thoughts hierarchically for
clearer definitions.

2. Flowchart Tools:

Purpose: Tools like Lucidchart and draw.io allow the creation of flowcharts, illustrating
processes, workflows, and decision trees.

Benefits: Clarify procedures, identify bottlenecks, and define step-by-step sequences for efficient

Page 112
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

task execution.

3. Wireframing and Prototyping Tools:

Purpose: Tools like Adobe XD and InVision aid in creating wireframes and prototypes, defining
user interfaces and interactions.

Benefits: Visualize designs, simulate user experiences, and gather feedback early in the
development process, leading to precise definitions.

4. Project Management Tools:

Purpose: Tools like Trello, Asana, and Jira assist in defining tasks, assigning responsibilities,
setting deadlines, and tracking progress.

Benefits: Clearly define project scopes, tasks, and goals, fostering efficient team collaboration,
communication, and task management.

5. Version Control Systems:

Purpose: Git and SVN are version control tools ensuring efficient tracking of changes,
collaboration, and definition of codebases.

Benefits: Define software versions, track modifications, and manage collaborative coding projects
efficiently, reducing conflicts and errors.

6. Collaborative Document Editing Tools:

Purpose: Google Docs, Microsoft Teams, and Dropbox Paper enable real-time collaborative
editing and commenting on documents.

Benefits: Define project requirements, reports, and documentation efficiently with simultaneous
input from team members, ensuring accuracy and clarity.

7. Data Modeling Tools:

Purpose: Tools like ERDPlus and Microsoft Visio assist in defining database structures,
relationships, and data entities.

Benefits: Precisely define database schemas, improving data integrity, querying efficiency, and
application performance.

8. Requirements Management Tools:

Purpose: Tools like IBM DOORS and Jama Connect aid in defining, tracking, and managing project
requirements throughout the development lifecycle.

Page 113
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Benefits: Define detailed and traceable project requirements, ensuring alignment with
stakeholder expectations and regulatory standards.

9. Collaborative Whiteboard Tools:

Purpose: Tools like Miro and Microsoft Whiteboard facilitate collaborative brainstorming,
diagramming, and defining ideas visually.

Benefits: Enhance remote team collaboration, allowing teams to define concepts, processes, and
designs collectively in real-time.

***********

4.9 INTERACTION PATTERNS

Definition:

Interaction Patterns refer to recurring, predictable ways in which users interact with digital
interfaces. These patterns are established based on user behaviors, cognitive processes, and design
conventions, aiming to create intuitive, user-friendly experiences across various applications and
platforms.

Key Aspects of Interaction Patterns:

1. Consistency:

Visual Consistency: Common visual elements (buttons, icons) across interfaces enhance
familiarity and ease of use.

Behavioral Consistency: Predictable behaviors (e.g., clicking a button to submit a form) create
intuitive interactions.

2. Predictability:

User Expectations: Interaction patterns align with users' mental models, meeting their expectations
and reducing cognitive load.

Feedback Loops: Immediate feedback (e.g., button color change on hover) reinforces users'
understanding of the system's response.

3. Efficiency:

Minimized Steps: Streamlined patterns reduce the number of steps users need to perform tasks,
enhancing efficiency.

Page 114
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Progressive Disclosure: Complex interactions are revealed progressively, preventing overwhelming

users with information.

4. Learnability:

Intuitive Design: Patterns are based on familiar real-world analogies, making it easier for users to
understand and remember how to interact.

Onboarding: Guided interactions during onboarding introduce users to interaction patterns,

aiding in quick learning.

5. Accessibility:

Inclusive Design: Patterns are designed to accommodate users with diverse abilities and disabilities,
ensuring equal access to functionality.
Keyboard and Screen Reader Support: Patterns are implemented to support keyboard
navigation and screen reader technologies for accessibility.

Common Interaction Patterns:

1. Click/Tap:

Purpose: Activating buttons, links, or interactive elements by clicking (desktop) or tapping

(mobile) with a finger.

Example: Clicking a 'Submit' button to send a form.

2. Scroll:

Purpose: Navigating through content vertically, especially in long documents or web pages.

Example: Scrolling down to read an article.

3. Swipe:

Purpose: Moving content horizontally, often used in carousels or galleries on touch-enabled devices.

Example: Swiping left or right to view different images.

4. Drag and Drop:

Purpose: Allowing users to drag objects and drop them onto designated areas, enabling tasks like
file uploads or reordering items.

Example: Dragging a file from the desktop and dropping it into an email attachment area.

Page 115
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

5. Hover:

Purpose: Displaying additional information or interactive options when the mouse pointer hovers
over an element (desktop only).

Example: Hovering over a product image to view a brief description.

6. Form Input:

Purpose: Allowing users to input data through text fields, checkboxes, radio buttons, and dropdown
menus.

Example: Filling out a registration form with name, email, and password.

Page 116
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Here are some key interaction patterns and notes about each:
Face-to-Face Interaction:
In-person conversations.
Non-verbal cues like body language, facial expressions, and tone play a significant role.
Immediate feedback and real-time communication.
Written Communication:
Includes emails, letters, memos, and text messages.
Allows for more thoughtful and deliberate communication.
Can be asynchronous (not real-time), providing time for reflection.
Phone and Voice Communication:
Real-time audio conversations.
Tone of voice and intonation convey emotions and meaning.
Often used for quick information exchange.
Video Calls:
Combines elements of both face-to-face and voice communication.
Enables visual cues and body language.
Widely used for remote work and virtual meetings.
Social Media Interactions:
Includes platforms like Facebook, Twitter, Instagram, and LinkedIn.
Allows for public or private communication.
Supports sharing text, images, videos, and links.
Engages a wide audience and can go viral.
Messaging Apps:
Platforms like WhatsApp, Messenger, and Slack.
Supports one-on-one and group chats.
Often used for quick, informal communication.
Online Forums and Communities:
Platforms like Reddit, Quora, and specialized forums.
Users discuss topics of interest in threads.
Valuable for seeking and sharing information and opinions.
Email Etiquette:
Use a clear subject line.
Maintain a professional tone.
Be concise and to the point.

Page 117
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Use proper salutations and signatures.

Page 118
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Active Listening:
Paying full attention to the speaker.
Asking clarifying questions.
Providing feedback to demonstrate understanding.
Avoiding interrupting.
Conflict Resolution:
Addressing disagreements and disputes.
Using effective communication to find common ground.
Active listening, empathy, and compromise are key skills.
Networking:
Building professional relationships.
Exchanging information and contacts.
Requires effective communication and interpersonal skills.
Group Dynamics:
How individuals interact within a group.
Roles, leadership, and communication patterns play a role.
Group decision-making and consensus-building.
Online Dating:
A specific interaction pattern for seeking romantic or personal connections.
Profiles, messaging, and arranging meetups are common steps.
Customer Service Interactions:
Companies interacting with customers.
Handling inquiries, complaints, and feedback effectively.
Non-Verbal Communication:
Includes gestures, posture, eye contact, and facial expressions.
Often conveys emotions, intentions, and attitudes.
Cultural Sensitivity:
Recognizing and respecting cultural differences in communication.
Avoiding stereotypes and bias.
Digital Etiquette:
Following online etiquette, such as avoiding trolling and cyberbullying.
Respecting privacy and consent in digital interactions.
Understanding these interaction patterns and practicing effective communication skills is essential for building
positive relationships, resolving conflicts, and succeeding in various personal and professional contexts. Different

Page 119
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

situations may require different communication strategies, so being adaptable and empathetic in your interactions
is also crucial.

4.10 CONDUCTING USABILITY TESTS

Definition: Usability testing is a user-centered evaluation method where real users interact with a
product's representative tasks, identifying usability issues and providing valuable feedback. It
involves observing users as they perform tasks to understand how intuitive, efficient, and satisfying
the product is.

Key Steps in Conducting Usability Tests:

1. Define Objectives:

Clearly outline the goals of the usability test. Determine what aspects of the product's usability
you want to evaluate and improve.

2. Recruit Participants:

Select participants who represent the product's target audience. Aim for diversity to capture a
broader range of perspectives.

3. Create Scenarios and Tasks:

Develop realistic scenarios and tasks that participants can perform using the product. Tasks should
align with common user goals.

4. Prepare the Testing Environment:

Set up a quiet, distraction-free room with necessary equipment. Ensure that the product, prototypes,
or wireframes are ready for testing.

5. Conduct the Test Sessions:

Instruct participants clearly about the tasks without biasing their responses. Encourage them to
think aloud, explaining their thought processes.

6. Observe and Take Notes:

Watch participants interact with the product, noting their actions, comments, and struggles. Record
both qualitative and quantitative data.

Page 120
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

7. Collect Feedback:

After each session, ask participants open-ended questions about their experience. Encourage
them to share their opinions and suggestions.

8. Iterate and Redesign:

Analyze the data collected, identify patterns, and prioritize usability issues. Use this feedback to
make design improvements.

Best Practices for Usability Testing:

Moderator Neutrality: The moderator should remain neutral, refraining from influencing
participants' actions or responses.

Realistic Scenarios: Use scenarios that mirror real-life situations to elicit genuine user behaviors
and reactions.

Pilot Testing: Conduct a pilot test with a small group to identify any issues with the test setup or
tasks before the actual sessions.

Remote Testing: Consider remote usability testing, especially for online products, using screen-
sharing tools to observe users in their natural environment.

Iterative Testing: Conduct multiple rounds of usability testing throughout the design process to
ensure continuous improvements.

Clear Reporting: Present the findings in a clear, actionable manner, including both issues and
positive feedback, to aid the design team.

Benefits of Usability Testing:

User-Centric Design: Ensures the product meets users' needs, preferences, and expectations,
leading to higher satisfaction.

Issue Identification: Uncovers usability issues, allowing for targeted improvements and a more
intuitive user interface.

Data-Driven Decisions: Provides concrete data for design decisions, reducing reliance on
assumptions or subjective opinions.

Improved Conversion: Enhances the user experience, leading to increased user engagement,
retention, and conversion rates for products.

Competitive Advantage: Products with superior usability stand out, fostering customer loyalty and
positive word-of-mouth.

Page 121
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

*************

4.11 OTHER EVALUATIVE USER RESEARCH METHODS

Introduction: Evaluative user research methods are essential for assessing existing designs,
prototypes, or products. These methods provide valuable insights into user experiences, allowing
designers to identify issues, validate design decisions, and iterate effectively. Apart from usability
testing, several other evaluative research methods offer unique perspectives on user interactions
and preferences.

1. Heuristic Evaluation:

Definition: Heuristic evaluation involves experts evaluating a user interface against a set of
established usability principles (heuristics).

Purpose: Identifies usability problems quickly and cost-effectively by leveraging expert opinions.

Benefits: Provides valuable insights before user testing, highlighting potential issues for further
investigation.

2. Cognitive Walkthrough:

Definition: Cognitive walkthroughs involve evaluators simulating users' mental processes, step-
by-step, to assess how well a system's design supports task completion.

Purpose: Focuses on identifying potential obstacles or confusing points in the user's thought
process.

Benefits: Provides a detailed understanding of user decision-making during task execution.

3. Card Sorting:

Definition: Card sorting involves users organizing topics into categories, providing insights into
their mental models and how they expect information to be structured.

Purpose: Helps in information architecture, ensuring intuitive navigation and content organization.

Benefits: Reveals user preferences and mental models, aiding in effective content grouping and
labeling.

4. Tree Testing:

Definition: Tree testing involves users navigating a simplified site structure (without visual design)
to find specific information or complete tasks.

Page 122
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Purpose: Assesses the findability and navigational efficiency of content and menu structures.

Benefits: Highlights areas where users struggle to locate information, guiding improvements in
site structure.

5. A/B Testing:

Definition: A/B testing compares two versions of a webpage or product to determine which
performs better based on user engagement metrics.

Purpose: Evaluates design changes, feature implementations, or content variations to optimize user
interactions.

Benefits: Provides quantitative data on user preferences, informing data-driven design decisions.

6. Surveys and Questionnaires:

Definition: Surveys collect quantitative data through structured questions, gauging user opinions,
preferences, or demographics.

Purpose: Provides insights into user satisfaction, preferences, or general attitudes toward a product.

Benefits: Allows for large-scale data collection, offering a broader perspective on user opinions.

7. Eyetracking Studies:

Definition: Eyetracking studies use specialized equipment to monitor and record users' eye
movements while interacting with a design.

Purpose: Identifies where users focus their attention, helping designers understand visual
hierarchy and information prioritization.

Benefits: Offers precise insights into visual attention patterns, guiding the placement of important
elements.

*************

4.12 SYNTHESIZING TEST FINDINGS

Introduction: Synthesizing test findings is a critical step in the user experience (UX) design
process. It involves analyzing and integrating the data collected from various evaluative methods
like usability tests, interviews, surveys, and heuristic evaluations. The goal is to distill this diverse
information into meaningful insights that guide design decisions and improvements.

Key Steps in Synthesizing Test Findings:

1. Data Collection Review:

Page 123
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Thoroughly review all raw data collected during usability tests, interviews, surveys, and other
evaluative research methods. This includes user behaviors, comments, and quantitative metrics.

2. Identify Patterns and Themes:

Look for recurring patterns, common issues, and themes across different participants and methods.
Categorize findings to simplify the analysis process.

3. Prioritize Findings:

Rank the identified issues based on severity, frequency, and impact on the user experience. Focus
on critical problems that significantly affect usability and user satisfaction.

4. Create Personas and User Journeys:

Develop user personas based on the collected data. Understand different user segments, their goals,
pain points, and behaviors. Map out user journeys to visualize their interactions with the product.

5. Use Affinity Diagrams:

Affinity diagrams help in organizing findings into related groups. Post-it notes or digital tools can
be used to group similar issues together, providing a visual representation of the data's structure.

6. Create Empathy Maps:

Empathy maps help in understanding users' emotions, thoughts, and pain points. Use the data to
fill out empathy maps, gaining a deeper understanding of users' perspectives.

7. Visualize Data:

Use charts, graphs, and infographics to visualize quantitative data. Visual representations make
complex data more accessible and aid in identifying trends at a glance.

8. Generate Insights:

Translate the identified patterns and themes into actionable insights. Clearly articulate the
implications of the findings on the design and user experience.

9. Share Findings Effectively:

Prepare a concise, visually appealing report or presentation to communicate the synthesized

findings. Use visuals, quotes, and real user stories to make the insights relatable.

10. Collaborate with Stakeholders: - Engage stakeholders, including designers, developers, and
product managers, in discussions about the findings. Encourage collaborative brainstorming
sessions to generate ideas for solutions.

Page 124
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Benefits of Synthesizing Test Findings:

Informed Decision-Making: Synthesized findings provide a clear understanding of user needs

and pain points, guiding informed design decisions.

Focus on Priorities: Prioritized findings help teams focus on addressing critical issues first,
ensuring optimal use of resources and efforts.

Enhanced Collaboration: Sharing synthesized insights fosters collaboration and alignment

among cross-functional teams, leading to cohesive problem-solving approaches.

User-Centered Solutions: By understanding user perspectives deeply, synthesized findings pave

the way for designing solutions that resonate with users' expectations and preferences.

Continuous Improvement: Synthesizing findings is an iterative process, fostering continuous

improvement in product design and user experience through multiple testing cycles.

***************

4.13 PROTOTYPE ITERATION

Enhancing Design through Iterative Development

Introduction: Prototype iteration is a fundamental aspect of the design process, particularly in

user-centered design methodologies like iterative prototyping and agile development. It involves
the continuous refinement and enhancement of design prototypes based on user feedback, usability
testing, and evolving project requirements. This iterative approach ensures that the final product
aligns closely with user needs and expectations.

Key Aspects of Prototype Iteration:

1. Gathering User Feedback:

Purpose: Collect feedback from real users through usability testing, surveys, and interviews to
understand their interactions, preferences, and pain points.

Benefits: Provides actionable insights into user experience, highlighting areas for improvement
and innovation.

2. Identifying Design Issues:

Purpose: Analyze user feedback and identify design flaws, inconsistencies, or features that don’t
meet user expectations.

Benefits: Pinpoints specific problems, allowing for targeted solutions in subsequent iterations.

Page 125
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

3. Prioritizing Enhancements:

Purpose: Prioritize identified issues based on their impact on user experience, focusing on critical
elements that significantly affect usability.

Benefits: Guides the design team on where to concentrate their efforts for the most substantial
improvements.

4. Implementing Design Changes:

Purpose: Introduce design modifications, feature enhancements, and usability improvements based
on feedback and identified issues.

Benefits: Ensures that the prototype evolves, addressing user concerns and aligning with project
objectives.

5. Usability Testing:

Purpose: Conduct usability tests on the updated prototype to validate design changes and assess
their impact on user experience.

Benefits: Provides concrete data on the effectiveness of design modifications, helping in further
refinements.

6. Continuous Refinement:

Purpose: Continuously refine the prototype, integrating user feedback and making incremental
improvements in subsequent iterations.

Benefits: Results in a highly polished and user-friendly final product, shaped by continuous user
input and testing.

Benefits of Prototype Iteration:

User-Centered Design: Ensures that the final product aligns with user needs and preferences,
leading to higher user satisfaction.

Early Issue Identification: Identifies design problems and usability issues in the early stages,
reducing the likelihood of costly fixes later in the development process.

Enhanced Usability: Through iterative refinement, the prototype becomes increasingly intuitive and
user-friendly, enhancing the overall usability.

Flexible Adaptation: Allows for flexibility in adapting to changing project requirements and
evolving user expectations, ensuring the product remains relevant.

Page 126
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

Data-Driven Decision Making: Relies on concrete data from usability tests and user feedback,
guiding design decisions based on real user experiences.

Here's a template and some guidance on how to structure and document your prototype iteration notes
effectively:
Prototype Iteration Notes
Project Name:
[Enter the name or description of your project.]
Date:
[Enter the date of the iteration.]
Iteration Number:
[Specify the iteration number, e.g., 1st, 2nd, 3rd, etc.]
Prototype Version:
[Specify the version of the prototype you are working on.]
Design Goals:
[Outline the primary objectives for this iteration. What do you aim to achieve with this round of design
changes?]
Changes Made:
[Document all the changes and updates made to the prototype. Include details such as page/screen names,
components modified, added, or removed, and any design elements that were altered.]
Page/Screen Name 1:
[List the changes made, e.g., "Increased button size to improve clickability."]
Page/Screen Name 2:
[List the changes made, e.g., "Revised color scheme to enhance visual hierarchy."]
User Feedback:
[Include any user feedback collected during usability testing or user interviews. Summarize key insights, pain
points, and suggestions.]
User 1 Feedback:
[Summarize the feedback and note any action items, e.g., "User found it confusing to navigate to the settings
page; consider adding a direct link on the home screen."]
User 2 Feedback:
[Summarize the feedback and note any action items, e.g., "User suggested including tooltips for icons to clarify
their meaning."]
Observations:

Page 127
Course Code/Title: IT3V13 UI & UX DESIGN Unit IV

[Document any additional observations or insights gained during the design iteration. These could be based on
your own evaluation or discussions within the design team.]
[Note any usability issues or positive aspects that were identified during the iteration.]
Next Steps:
[Outline the plan for the next design iteration. What changes or improvements will you focus on in the upcoming
iteration?]
[List specific tasks or design elements that need further refinement, e.g., "Refine the onboarding flow to make
it more intuitive."]
[Mention any additional research or testing that should be conducted before the next iteration.]
Action Items:
[Create a list of actionable tasks that need to be completed before the next iteration. Assign responsibilities and
due dates where applicable.]
[Task 1: Assign [Designer Name] to update the login screen with new graphics by [Due Date].]
[Task 2: Conduct a usability test with [Number] participants to gather feedback on the new navigation menu by
[Due Date].]
Attachments:
[Include links or references to relevant design files, screenshots, or user testing videos that support the
documentation.]
By maintaining thorough prototype iteration, you can effectively track the evolution of your design, address user
feedback, and ensure a user-friendly and visually appealing final product. Regularly revisiting these notes and
iterating on your designs based on feedback and observations is crucial for creating a successful UI and UX.

**********

Page 128
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

UNIT V: RESEARCH, DESIGNING, IDEATING & INFORMATION ARCHITECTURE

Identifying and Writing Problem Statements - Identifying Appropriate Research Methods
- Creating Personas - Solution Ideation - Creating User Stories - Creating Scenarios - Flow
Diagrams - Flow Mapping - Information Architecture

5.1 IDENTIFYING AND WRITING PROBLEM STATEMENTS

1. Identifying the Problem:

- Observation: Start by observing your surroundings, workplace, or community. Look
for patterns, inefficiencies, or areas where improvements are needed.

- Listening: Pay attention to the concerns of people around you, colleagues, students, or
community members. Their challenges can often be a source of meaningful problems.

- Research: Stay updated with current literature, research, and news in your field. Identify
gaps or unresolved issues that can be explored further.

2. Defining the Problem Clearly:

- Clarity: Ensure the problem statement is clear, concise, and easy to understand for a
broad audience. Avoid technical jargon or overly complex language.

- Specificity: Be specific about the problem. Avoid vague statements and provide details
about the who, what, when, where, and why of the problem.

- Scope: Define the boundaries of the problem. What is included in the problem, and what
is not? Clearly outline the scope to avoid ambiguity.

3. Explaining the Impact:

- Significance: Explain why the problem is significant. Describe the potential impact on
individuals, organizations, or the community if the problem is not addressed.
- Consequences: Detail the negative consequences of the problem. This can include
financial losses, decreased efficiency, environmental impact, or any other relevant factors.

Page No 129
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

4. Providing Relevant Data:

- Statistics: If applicable, include relevant statistics or data that highlight the extent of the
problem. Statistical information adds credibility to the statement.

- Research Findings: Refer to existing research findings or studies that support the
existence and importance of the problem you are addressing.

5. Proposing a Solution (Optional):

- Tentative Solution: While not necessary, you can briefly mention a potential solution.
However, emphasize that further research or investigation is needed to validate and
implement the solution.

- Innovation: If your problem statement is for a research project, consider how your
approach could be innovative and contribute to the existing body of knowledge.

6. Keeping it Concise and Focused:

- Brevity: Problem statements should be concise, usually a few sentences to a short
paragraph. Avoid unnecessary details or background information that does not directly
contribute to understanding the problem.

- Focus: Stay focused on the main issue. Do not try to address multiple problems within
a single statement. Each problem should have its own clearly defined statement.

****************

5.2 IDENTIFYING APPROPRIATE RESEARCH METHODS

Research methods in UI/UX design are crucial for understanding user behavior, preferences,
and needs. Choosing the right methods ensures that designers make informed decisions
leading to user-friendly interfaces. Here are key points on identifying appropriate research
methods in UI/UX:

User Interviews:

• Conduct one-on-one interviews with users to gain in-depth insights into their
experiences, expectations, and pain points.
• Use open-ended questions to encourage participants to share their thoughts freely.
Page No 130
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Surveys and Questionnaires:

• Deploy surveys to collect quantitative data from a large user base.

• Craft questions carefully to gather specific feedback on UI/UX elements and overall
user satisfaction.

Observational Studies:

• Observe users interacting with the interface in real-time.

• Note their behaviors, gestures, and facial expressions to understand their natural
interactions.

Usability Testing:

• Create tasks for users to perform using the interface.

• Observe their actions, errors, and time taken to complete tasks to evaluate usability.
Card Sorting:

• Ask users to categorize information into groups, revealing their mental models.
• Helps in organizing content and navigation based on user expectations.
Prototyping and Wireframing:

• Develop low-fidelity prototypes or wireframes to visualize interface concepts.

• Gather user feedback early in the design process, allowing for iterative
improvements.
• Eye Tracking:

• Use eye-tracking technology to monitor where users focus their attention on the
screen.
• Helps in understanding visual hierarchy and optimizing important
elements' placement.

A/B Testing:

• Compare two versions of a design to determine which performs better.

• Useful for testing specific elements like buttons, colors, or layout variations.
Heatmaps and Click Tracking:

• Generate heatmaps to visualize where users click, scroll, or spend the most time.
Page No 131
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

• Identify popular areas and optimize them for better user engagement.

Page No 132
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Contextual Inquiry:

• Observe users in their natural environment, understanding how the interface fits into
their daily tasks.
• Provides insights into real-world usage patterns and challenges faced by users.
Expert Reviews:

• Have UX experts evaluate the interface against established usability principles.

• Offers insights from professionals, highlighting potential issues and improvements.
Remote Testing:

• Conduct usability tests remotely, allowing participants to engage from their own
locations.
• Enables testing with a diverse user group regardless of geographical constraints.
Choosing the right combination of these methods depends on the project goals, budget, and
timeline. A mix of qualitative and quantitative methods often provides a comprehensive
understanding of user behavior and preferences, leading to successful UI/UX design.

5.3 CREATING PERSONAS

Definition: Personas are detailed, fictional characters representing different user types
within a target audience. They help designers and developers understand users' needs,
behaviors, and expectations, guiding UI/UX decisions to create user-centered designs.

Steps to Create Personas:

User Research:

• Gather data through interviews, surveys, and observations.

• Identify common patterns, behaviors, and demographics among users.
Identify User Groups:

• Categorize users into distinct groups based on similarities.

• Consider factors like age, profession, goals, and technology proficiency.
Create Detailed Profiles:

• Develop comprehensive personas for each user group.

• Include personal details, goals, challenges, preferences, and motivations.
Page No 133
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Name and Visual Representation:

• Assign a name and, if possible, a photo to each persona.

• Humanizes the persona, making it easier for the team to relate to them.
Goals and Scenarios:

• Define the primary goals each persona aims to achieve using the product.
• Create scenarios outlining how personas interact with the interface to achieve their
goals.

Attitudes and Behaviors:

• Describe attitudes, behaviors, and pain points of each persona.

• Understand how personas might respond to different design elements.
Needs and Pain Points:

• Identify what each persona needs from the product.

• Pinpoint their challenges and frustrations while using similar products or services.

Incorporate Empathy:

• Encourage the team to empathize with personas.

• Understand their feelings, needs, and aspirations, ensuring a user-centric approach.
Validation:

• Validate personas through user testing and feedback.

• Refine personas based on real user interactions and experiences.

Benefits of Creating Personas:

Focuses Design Decisions:

• Guides design choices based on user needs and preferences.

• Helps prioritize features that matter most to the target audience.
Enhances Empathy:

• Encourages empathy within the team, leading to designs that resonate with users
emotionally.
Page No 134
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Page No 135
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Facilitates Communication:

• Provides a common understanding of the target audience.

• Improves communication among team members, ensuring a shared vision.
Reduces Subjectivity:

• Reduces reliance on personal opinions and biases.

• Grounds design decisions in user data and research.
Improves Usability:

• Designs tailored to specific personas enhance overall usability.

• Increases the likelihood of user satisfaction and positive experiences.
By understanding users deeply, designers can craft interfaces that meet user needs effectively,
leading to more successful and user-friendly products.

**************
5.4 SOLUTION IDEATION

Definition: Solution ideation is a structured brainstorming process aimed at generating

innovative and practical ideas to address specific problems or challenges. It involves
collaborative and creative thinking to explore diverse solutions that can lead to breakthrough
innovations.

Key Steps in Solution Ideation:

Define the Problem:

• Clearly articulate the problem or challenge that needs to be addressed.

• Understand its context, impact, and relevance to the users or stakeholders.
Diverse Team Collaboration:

• Form a diverse team with members from different backgrounds and expertise.
• Encourage open communication and mutual respect among team members.
Research and Insights:

• Gather relevant data, user feedback, and market research findings.

• Understand user behaviors, preferences, and pain points to inform ideation.

Page No 136
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Creative Techniques:

• Use creative techniques such as brainstorming, mind mapping, or reverse thinking.

• Encourage wild ideas without immediate judgment to foster creativity.
Inspiration from Outside Fields:

• Draw inspiration from unrelated fields or industries.

• Explore how solutions in other domains can be adapted to the current problem.
Prototyping and Visualization:

• Create rough prototypes or visual representations of ideas.

• Use sketches, diagrams, or digital tools to illustrate concepts visually.
Iterative Process:
• Embrace an iterative approach, refining and combining ideas.
• Solicit feedback from team members and stakeholders to enhance concepts.
Constraints as Catalysts:

• Consider constraints like budget, time, or technology as catalysts for creativity.

• Constraints can inspire innovative solutions within limitations.
User-Centric Focus:

• Keep the end-users at the center of ideation.

• Evaluate ideas based on how well they meet user needs and enhance user experience.
Evaluation and Selection:

• Evaluate generated ideas based on feasibility, desirability, viability, and alignment

with project goals.
• Prioritize ideas that offer the best balance of innovation and practicality.
Documentation and Communication:

• Document the selected ideas comprehensively.

• Clearly communicate the rationale behind chosen solutions
to stakeholders.

Page No 137
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Benefits of Solution Ideation:

Innovation and Creativity:

• Promotes innovative thinking by exploring a wide range of ideas.

• Encourages creative solutions that might not have been considered initially.
Collaboration and Team Building:

• Fosters collaboration and teamwork among diverse team members.

• Enhances communication and mutual understanding within the team.
User-Centric Designs:

• Ensures that solutions are tailored to meet the needs of the users.
• Enhances user satisfaction by addressing specific pain points effectively.

Adaptability and Problem-Solving:

• Equips teams with the ability to adapt to changing circumstances.

• Enhances problem-solving skills, enabling teams to tackle future challenges
effectively.

Market Competitiveness:

• Drives the development of unique and competitive products or services.

• Enables organizations to stand out in the market with innovative offerings.
Solution ideation is a dynamic and essential phase in the design thinking process. By
fostering a creative environment and leveraging diverse perspectives, teams can generate
solutions that have the potential to transform ideas into impactful realities.

**************

5.5 CREATING USER STORIES

Definition: User stories are concise, informal descriptions used in Agile software
development to capture the functionality and requirements from an end-user perspective.
They focus on the who, what, and why of a feature, providing a clear understanding of user
needs and expectations.

Page No 138
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Key Components of User Stories:

Role (Who):

• Identify the user or stakeholder involved.

• Define their role or persona within the context of the story.
Action (What):

• Specify the action or task the user needs to perform.

• Describe the desired outcome or goal of the action.
Benefit (Why):

• Explain the benefit or value the user gains from completing the action.
• Clarify the purpose and significance of the user story.
Format of a User Story: "As a [type of user/persona], I want to [perform an action/task] so
that [achieve a specific benefit/value]."

Key Considerations in Creating User Stories:

User-Centric Perspective:

• Emphasize the user's needs and experiences.

• Focus on how the feature enhances user satisfaction and addresses user pain points.
Independence and Modularity:

• Keep user stories independent and modular.

• Each story should deliver a specific, valuable functionality on its own.
Negotiable and Flexible:

• User stories are negotiable; details can be refined during discussions.

• Flexibility allows for adaptability based on changing priorities and feedback.
Acceptance Criteria:

• Define clear and concise acceptance criteria.

• Criteria outline conditions for the story to be considered complete and functional.
Conversation and Collaboration:

• Encourage continuous conversation between developers, stakeholders, and users.

Page No 139
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

• Collaborative discussions ensure shared understanding and refine user stories over
time.

Estimation and Prioritization:

• Estimate the effort required for each user story.

• Prioritize stories based on business value, urgency, and dependencies.
User Feedback and Iteration:

• Regularly gather user feedback on implemented stories.

• Iterate based on feedback, enhancing subsequent stories for continuous improvement.
Benefits of Creating User Stories:

Clarity and Focus:

• Provides a clear, understandable description of user needs

and expectations.
• Keeps the development team focused on delivering specific user value.
Improved Communication:

• Enhances communication between development teams, stakeholders, and users.

• Bridges the gap between technical and non-technical stakeholders.
Flexibility and Adaptability:

• Allows for changes and adaptations as project requirements evolve.

• Facilitates agile development by accommodating shifting priorities.
User Engagement:
• Engages users in the development process, ensuring their perspectives are considered.
• Enhances user satisfaction by delivering features aligned with their requirements.
Efficient Development:

• Guides developers by providing a roadmap for feature development.

• Reduces ambiguity, enabling efficient implementation and testing.

Page No 140
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Creating user stories is a foundational practice in Agile development, ensuring that software
solutions are developed with a deep understanding of user needs. By capturing user
requirements in a user-centric, concise format, development teams can create products that
genuinely resonate with users and deliver exceptional user experiences.

*****************

5.6 CREATING SCENARIOS: CRAFTING REALISTIC USER STORIES

Scenarios are detailed narratives that describe specific situations or contexts in which users
interact with a product or service. They provide a rich, contextual description of user actions,
motivations, and emotions, helping designers understand how users engage with the system
in real-world situations.

Key Elements of Scenarios:

Context Setting:

• Establish the setting, including the user, their goals, environment, and any relevant
background information.
• Describe the scenario's context to provide a clear understanding of the user's situation.
User Actions:

• Outline the actions the user takes within the scenario.

• Describe their interactions with the system, detailing each step they perform.
User Motivations:

• Explore the user's motivations, needs, and goals.

• Understand what drives the user to engage with the product or service in the given
context.
Challenges and Obstacles:

• Highlight potential challenges or obstacles the user might face.

• Identify pain points and difficulties users encounter during
their interactions.

Emotions and Feedback:

Page No 141
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

• Express the user's emotions, feelings, and feedback.

• Capture both positive and negative emotions, indicating user satisfaction or
frustration.
•
Resolution or Outcome:

• Describe how the scenario concludes.

• Highlight the resolution of the user's task or any changes in their situation.

Benefits of Creating Scenarios:

User-Centric Design:

• Scenarios provide deep insights into user behavior, enabling user- centered design
decisions.
• Designers can empathize with users' experiences, leading to more intuitive interfaces.

Contextual Understanding:

• Scenarios offer a holistic view of user interactions within specific contexts.

• Understand the nuances of user behavior influenced by their environment and
motivations.
•
Identifying Design Opportunities:

• Uncover design opportunities and pain points through detailed scenario analysis.
• Focus on resolving specific issues encountered by users in real-life situations.

Effective Communication:

• Scenarios facilitate effective communication among team members, stakeholders,

and clients.
• Storytelling engages stakeholders, conveying user needs in a compelling manner.

Iterative Improvement:
Page No 142
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

• Iterate scenarios based on user feedback and usability testing results.

• Refine scenarios to reflect evolving user needs and design iterations.

Enhanced User Empathy:

• Scenarios foster empathy by immersing designers in users' everyday experiences.

• Enhance understanding of users' challenges, leading to more thoughtful design
solutions.

Mitigating Assumptions:

• Scenarios help clarify assumptions about user behavior.

• Test assumptions against real-world scenarios, ensuring design decisions are
grounded in reality.

In summary, creating scenarios is a foundational practice in user experience design. By

delving into the details of user interactions, emotions, and motivations, designers can develop
solutions that truly resonate with users. Scenarios empower designers to step into users'
shoes, resulting in interfaces and experiences that are intuitive, empathetic, and tailored to
real-world user needs.

***************
5.7 FLOW DIAGRAM AND FLOW MAPPING IN USER EXPERIENCE DESIGN

FLOW DIAGRAM

Definition: A flow diagram, also known as a flowchart, is a visual representation of a

process, system, or user journey. In the context of user experience design, flow diagrams are
used to illustrate the sequential steps that a user follows to accomplish a task or achieve a
goal within a digital interface.

Key Elements of a Flow Diagram:

Nodes:

• Represent specific actions or states within the process.

Page No 143
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

• Nodes can indicate tasks, decisions, start/end points, or user interactions.

Arrows/Connections:

• Show the sequence and direction of the flow.

• Arrows indicate the progression from one node to another, depicting the user's
journey.

Page No 144
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Decision Points:

• Represent points in the process where the flow can diverge based on user choices or
system responses.
• Decision diamonds show different paths based on conditions.
Annotations:

• Provide additional information about specific nodes or connections.

• Annotations clarify the purpose of nodes or explain decision logic.
Purposes of Flow Diagrams:

Task Analysis:

• Analyze user tasks and interactions systematically.

• Understand the logical flow of actions, helping in the design of intuitive interfaces.
Communication:

• Communicate complex processes clearly to stakeholders, developers, and team

members.
• Enhance collaboration and shared understanding among project
participants.

Identifying Issues:

• Identify bottlenecks, redundancies, or potential usability issues in the user journey.

• Pinpoint areas for improvement and optimization in the interface.
Planning and Documentation:

• Plan the structure and navigation of digital interfaces.

• Serve as documentation for development, guiding programmers in implementing the
desired user interactions.

***************

5.8 FLOW MAPPING

Definition: Flow mapping in user experience design refers to the process of visually mapping
out user interactions and experiences within a digital product or service. It provides a detailed
Page No 145
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

view of how users navigate through screens, features, and tasks, highlighting their
interactions and decision points.

Key Aspects of Flow Mapping:

Screen Sequencing:

• Illustrate the sequence of screens or pages that users encounter.

• Show the logical order of information and actions, indicating the natural progression.
User Interactions:

• Detail user interactions with each screen, including clicks, inputs, or gestures.
• Highlight how users engage with elements such as buttons, forms, or menus.
Navigation Paths:

• Visualize the paths users take to move from one screen to another.
• Identify primary navigation routes and potential alternative paths.
User Choices:

• Illustrate decision points where users make choices leading to different outcomes.
• Show how these choices influence subsequent interactions and screens.
Annotations and Notes:

• Include annotations to explain specific user actions, system responses, or design

intentions.
• Notes provide context for stakeholders and developers, ensuring a shared
understanding.

Purposes of Flow Mapping:

User Journey Analysis:

• Understand the complete user journey from entry to task completion.

• Analyze user interactions, helping in optimizing the user experience.
Usability Testing Preparation:

• Prepare scenarios and tasks for usability testing.

• Ensure that test cases cover the entire user flow, allowing comprehensive evaluations.
Page No 146
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Feature Integration:

• Plan the integration of new features or updates into existing user flows.
• Assess how new functionalities fit seamlessly into the existing user experience.
Collaboration and Alignment:

• Facilitate collaboration among design, development, and business teams.

• Ensure alignment on user interactions, reducing misunderstandings and
misinterpretations.

*************
5.9 INFORMATION ARCHITECTURE:
(Structuring Digital Content for Optimal User Experience)

Definition: Information architecture (IA) refers to the structural design of shared information
environments, such as websites and software applications. It involves organizing, structuring,
and labeling content to support usability and findability, ensuring users can navigate and interact
with efficiently. digital products

• Context relates to business goals, funding, culture, technology, politics, resources and
Page No 147
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

constraints.
• Content consists of the document or data types, content objects, volume and existing
structures.
• Users comprise the audience, tasks, needs, experiences and how they seek
information.

Key Components of Information Architecture:

Organization Schemes:

• Hierarchical: Content is structured in a top-down manner, resembling a tree-like

structure with parent and child categories.
• Sequential: Content is organized in a linear sequence, suitable for guiding users
through a process or a story.
• Matrix: Information is organized using multiple dimensions, allowing users to view
content based on various categories simultaneously.

Navigation Systems:

• Global Navigation: Primary menus or navigation bars that provide access to main
sections of the website.
• Local Navigation: Sub-menus or links specific to sections, guiding users within a
particular category.
• Faceted Navigation: Allows users to filter content based on multiple attributes,
refining search results.

Labeling Systems:

• Descriptive Labels: Clear and meaningful names for categories and links, aiding
users' understanding of content.
• Consistent Terminology: Ensures uniformity in naming conventions, preventing
confusion among users.
• Informational Labels: Provide additional context or explanations,
especially for complex terminology or industry-specific terms.

Search Functionality:

• Search Bar: Allows users to directly search for specific content or products,
providing an alternative navigation method.
• Search Results Page: Displays search results clearly, allowing users to refine queries
Page No 148
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

or explore related topics.

Site Maps and Wireframes:

• Site Maps: Visual representations of the website's structure, showing the hierarchy
and relationships between pages or sections.
• Wireframes: Low-fidelity representations of web pages, outlining the layout and
placement of elements without detailed design.

Page No 149
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Importance of Information Architecture:

Enhanced User Experience:

• Well-organized IA ensures users can quickly find relevant information, leading to a

seamless and satisfying user experience.
• Intuitive navigation reduces frustration, encouraging users to explore the website
further.

Improved Accessibility:

• Clear organization benefits users with disabilities, as screen readers and assistive
technologies rely on logical structure and labeling.

Supports Content Strategy:

• IA aligns with content strategy by structuring information in a way that supports the
communication of key messages and objectives.

Boosts SEO:

• Logical and organized content enhances search engine optimization (SEO), making
it easier for search engines to index and rank pages.

Facilitates Scalability:

• Well-planned IA allows for easy expansion and addition of content over time,
maintaining coherence as the website grows.

Facilitates Collaboration:

• IA serves as a common language between stakeholders, designers, developers, and

content creators, ensuring everyone understands the structure and purpose of the
digital platform.

In summary, information architecture is a foundational element in web and application

design. It focuses on creating a user-friendly, organized, and accessible structure, laying the
groundwork for a positive user experience and effective communication of information.

*********************

Page No 150
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Information Architecture Design: A Step-By-Step Guide

Information architecture is a discipline that focuses on organizing information within digital

products clearly and logically. It helps users answer the question, “Where can I find the
information I’m looking for?”

This guide will discuss 10 steps you need to go through to design information architecture
for your product.

Step 1: Understand user goals

In product design, it is essential to understand who you are designing for. People look for
information in different ways, and different people look for different kinds of information.
You need to understand what users are trying to achieve using your product.

You need to find the answer to the questions:

• Who will be using a product?

• What are they going to do?

• What do they want to achieve?

Its vital to invest in user research. Through research, information architects can learn how
the target audience thinks when they interact with a product, and this will help them organize
the information in a way that meets the user’s needs.

You should create user personas (archetypes of ideal users).

and define the mental models of your users. You need to structure the information based on
the mental models. Show exactly what users expect to see at places where they expect to see
it.

Step 2: Define business objectives

After identifying user goals, you need to understand how information architecture should
help the company achieve business goals. It is better to conduct a brainstorming session with
stakeholders to set clear business objectives. You need to identify primary and secondary
business goals.
Page No 151
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

List of the business objectives for eCommerce website.

Step 3: Conduct competitor analysis

After you define user and business goals, it’s time to conduct competitor analysis. The
information architecture design should be based on your users’ expectations about your product,
and an analysis of similar products available on the market will give you an idea of what your
customers expect.

Take a look at what your competitors are doing and conduct a SWOT analysis: your goal is to
identify the strengths and weaknesses of the content organization that your competitors have. It
will help you to identify opportunities that you can explore.

SWOT analysis.

Step 4: Define content

Next, you need to define your content. Information architects should have a good
understanding of the content that the product offers. If you are redesigning an existing
product, you should conduct content inventory first. B low you can see a template for a
Page No 152
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

content inventory spreadsheet for websites. It typically includes page ID, page level in
description. The hierarchy, URL, content type, keywords, and

Content inventory spreadsheet for a website

Collect all content that our product has and then conduct a content audit —decide what you
want to deep and remove (based on user and business needs).

Step 5: Categorize & prioritize content

Then you need to categorize and prioritize content. You need to decide what content should go
on the website. Categorize content and group similar content together to create logical chunks.
Web analytics tools like Goo le Analytics and techniques like card sorting and contextual
inquiries will help you learn how to structure content. Here is how a card-sorting exercise works.
Suppose you design an e-commerce website that sells electronics. You write items on cards,
define certain categories, and ask test participants to sort cards into categories.

Card sorting: cards (white blocks) and categories (yellow text).

And test participants will group the items according to the categories. It is also possible to leave
categories open-ended so participants can categories create their own that make sense to them.

Results of card sorting.

Page No 153
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Step 6: Create a sitemap

Based on the content groups you’ve established in the previous step, you can create a sitemap, a
visual representation of the content available on your website or in your app. The site map contains
parent and child pages. It helps us see the hierarchy of content and structure of the overall website
or app — what leads to what.

A sitemap for an eCommerce website that sells electronics.

A sitemap should not be fancy; you can create it using tabs like in the example below. This
format works well when you need to communicate other people the structure to

Sitemap in a format of tabs.

Page No 154
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Labels will help people orient themselves on your website. A label can be a page name, the
name of a category in the menu, or a section name. Labels tell users what they can expect
when they choose a particular option. For example, when users see a category with the label
‘Macbooks’, they think that when they click this category, they will navigate to a page with
MacBooks.

You want to ensure that labels are clear and concise so that users can understand their
meaning at a glance.

Finding a proper label for the contact info page.

Step 8: Design navigation system & user flows

Next, you need to outline the navigation system and user flow systems. will help you understand
how users will navigate from m to B. m’s. A navigation A to B. It will make it evident how
content on your product is interlinked and how users will navigate from one page to another. A
navigation system will include menus, breadcrumbs, and internal links.
Your goal in this step is to establish all possible pathways users can take to navigate a particular
page.

Page No 155
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

User flow example for eCommerce website.

Step 9: Prototype user flow

The goal of creating a prototype is to define a visual hierarchy of content onindividual pages and
seehow different pages work together.Visual hierarchydefines the order in which users will
explore the content on individual pages.
You need to ensure that the visual hierarchy you have helps users achieve their goals and, at the
same time, increase your conversion rate.

Usually, IA architects create clickable wireframes that have a limited number ofgraphic elements
because it is enough to demonstrate the hierarchy of information and navigation.

Clickable wireframes.
Page No 156
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Step 10: Validate your design

You need to conduct usability testing to ensure your users can go through your system to
complete their tasks. Prepare a set of tasks, in its people who represent your target audience, and
let them complete the tasks using your design. For example, if you design an eCommerce
website, the task can be “Find a laptop that you like and buy it.

You also need to define metrics for each task you want to perf rm. Testing will also help you
identify where users need more information to make an informed decision.

Page No 157
Course Code/Title: IT3V13 UI & UX DESIGN Unit V

Results of usability testing

Page No 158