EnggTree.com EnggTree.

com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
Levels of user experience:
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

INTRODUCTION TO USER EXPERIENCE:

What is user experience?

The user experience (UX) is what a user of a particular product experiences when using that The 7 factors that influence user experience
product. User experience encompasses all aspects of the end-user's interaction with the User Experience (UX) is critical to the success or failure of a product in the market. There
company, its services, and its products. are 7 factors that describe user experience, according to Peter Morville a pioneer in the UX
field
Requirements of user experience:
 The first requirement for an user experience is to meet the exact needs of the customer,
without fuss or bother.
 Simplicity and elegance that produce products that are a joy to own, a joy to use.
 In order to achieve high-quality user experience in a company's offerings there must be
a seamless merging of the services of multiple disciplines, including engineering,
marketing, graphical and industrial design, and interface design.

Difference between user experience and customer experience:

User experience encompasses all aspects of the end-user's interaction with the company, its
services, and its products.
The term customer experience (CX) has been used to describe the totality of the interactions
that a user has with an organization over time.
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.
Usable
Usability is concerned with enabling users to effectively and efficiently achieve their end
objective with a product
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.
2 3

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
Ask yourself:
Credible
Credibility relates to the ability of the user to trust in the product that you’ve provided. Not  Could you get the job done with less input from the user?
just that it does the job that it is supposed to do but that it will last for a reasonable amount of  Are there any user mistakes you could prevent? (Hint: Yes, there are.)
time and that the information provided with it is accurate and fit-for-purpose.  Are you being clear and direct, or is this a little too clever?
Desirable  Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
Desirability is conveyed in design through branding, image, identity, aesthetics and  Are you working with the user’s assumptions or against them?
emotional design. The more desirable a product is – the more likely it is that the user who has 3. Design
it will brag about it and create desire in other users. As the UX designer, your definition of ―design‖ will be much less artistic than a lot of
Accessible designers. Whether you ―like it‖ is irrelevant. In UX, design is how it works, and it’s
Accessibility is about providing an experience which can be accessed by users of a full range something you can prove; it’s not a matter of style.
of abilities – this includes those who are disabled in some respect such as hearing loss,
impaired vision, motion impaired or learning impaired. Ask yourself:
Valuable  Do users think it looks good? Do they trust it immediately?
the product must deliver value. It must deliver value to the business which creates it and to
 Does it communicate the purpose and function without words?
the user who buys or uses it. Without value it is likely that any initial success of a product
 Does it represent the brand? Does it all feel like the same site?
will eventually be undermined.
 Does the design lead the user’s eyes to the right places? How do you know?
The Five Main Ingredients of UX 4. Copywriting
There is a huge difference between writing brand copy (text) and writing UX copy. Brand
copy supports the image and values of the company. UX copy gets shit done as directly and
 Psychology
simply as possible.
 Usability
 Design Ask yourself:
 Copywriting
 Analysis  Does it sound confident and tell the user what to do?
1. Psychology  Does it motivate the user to complete their goal? Is that what we want?
A user’s mind is complex. You should know; you have one, (I assume). UXers work with
 Is the biggest text the most important text? Why not?
subjective thoughts and feelings a lot; they can make or break your results. And the designer
 Does it inform the user or does it assume that they already understand?
must ignore their own psychology sometimes, too, and that’s hard!
5. Analysis
Ask yourself:
In my opinion, most designers’ weak spot is analysis. But we can fix that! Analysis is the
 What is the user’s motivation to be here in the first place?
main thing that separates UX from other types of design, and it makes you extremely
 How does this make them feel? valuable. It literally pays to be good at it.
 How much work does the user have to do to get what they want? So, ask yourself:
 What habits are created if they do this over and over?
 What do they expect when they click this?  Are you using data to prove that you are right, or to learn the truth?
2. Usability  Are you looking for subjective opinions or objective facts?
If user psychology is mostly subconscious, usability is mostly conscious. You know when  Have you collected information that can give you those types of answers?
something is confusing. There are cases where it is more fun if something is hard—like a
 Do you know why users do that, or are you interpreting their behavior?
game—but for everything else, we want it to be so easy.
4 5

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
 Are you looking at absolute numbers, or relative improvements? UX Design is User-Centered
What Is User Experience (UX) Design? User-centered design is an iterative process where you take an understanding of the users and
User experience (UX) design is the process design teams use to create products that provide their context as a starting point for all design and development.
meaningful and relevant experiences to users. UX design involves the design of the entire
process of acquiring and integrating the product, including aspects of branding, design,
usability and function.

UX Design—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:
 A person’s perceptions and responses. Why is UX design important?
 The use of a product, system or service. UX design is important because it focuses on fulfilling user needs. This ultimately benefits
businesses as it improves brand reputation and loyalty. A good user experience provides a
In user experience, designers do not have much control over a person’s perceptions and competitive edge and reduces the risk of product failure
responses—the first part of the definition. For example, they cannot control how someone What does a UX designer do?
feels, moves their fingers or controls their eyes as they use a product. However, designers can  A UX designer’s role in a project depends on the team size and project type. In small
control how the product, system or service behaves and looks—the second part of the projects and teams, you can expect to conduct several tasks, including user research,
definition. creating user flows, wireframes, and prototypes, conducting usability tests, producing
visual elements such as icons, and even defining the brand identity.
The simplest way to think about user experience design is as a verb and a noun. A UX  In larger organizations and complex products, you may have more specialist roles such
designer designs (verb)—ideates, plans, changes—the things that affect the user experience as researcher, interface designer and UX writer.
(noun)—perceptions and responses to a system or service.
UX designers tend to be concerned with, as you can see from the image below, 3 primary
factors: the look of a product, the feel of that product and the usability of that product.

UX Designers Consider the Who, 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
 The look of a product is all about creating a product that has visual appeal and which,
in particular, harmonizes with a user’s values and captures the spirit of what they
expect in that product
6 7

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
 The feel, which is really about developing products that are ―a joy to use‖. That is, develop and maintain the product.
whether you’re interacting with them or reacting to them
 Usability is the cornerstone of user experience. If a product isn’t usable, the experience UNDERSTANDING USER EXPERIENCE:
of using it can never be good
•The user experience is product (or service) specific. It is the experience that a user (or
Skills for UX designer customer) has when they interact with that product.
•We can measure the results of the user experience to some extent too.
•We can look at satisfaction reports, the level of customer care enquiries following an
interaction, the time it takes to get something done with our product, etc.

 Leadership
 communication
 project management
 presenting

What Do Graphic Design and UX Design Have in Common?

DEFINING THE UX DESIGN PROCESS AND ITS METHODOLOGY:

There isn’t any standard UX design process. However, most teams tend to follow a variation
of the 5-step design thinking process. UX design is a highly collaborative and iterative
process. Designers plug back their findings from research and testing to improve the end
user's experience.
What is a UX Design Process?
A UX design process is an iterative step-by-step methodology UX design teams use to
complete projects. It is derivative from a design thinking process. As in design thinking
process, UX designers spend time empathizing with the user, learning about the business,
context, defining problem scope.

8 14

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
UX Design Process vs. Design Thinking Process user behavior.
The design thinking process is a five-step process for developing user-centered solutions to Step 3: Create rough draft of a solution
human problems. A UX design process is a multi-stage, end-to-end methodology that
incorporates design thinking for delivering UX projects. With a clear understanding of their users, market, and competitive landscape, designers can
Importance of a UX Design Process create a rough draft of what a solution would look like, which is often referred to as
Here are some reasons why companies standardize a UX design process: the ideation phase. Designers use paper and pen during early ideation to iterate on many
Ensures projects meet quality and consistency standards ideas fast.
 Ensures designers design solutions without bias and assumptions Some of these low-fidelity techniques include:
 Enables designers to test and iterate on many ideas to find the best solution
 Sketching: Hand-drawn sketches of user interfaces
 Promotes collaboration between teams and departments  Paper prototyping: Paper versions of a prototype
 Reduces the risk of rework by following set protocols  Wireframing: Digital versions of paper prototypes featuring basic lines and shapes
 Allows stakeholders to track a project’s progress  Low-fidelity prototypes: Digital prototypes using wireframes to test user
 Identifies hidden risks and opportunities flows and information architecture
Steps of UX Design Process The team might also use a design sprint to solve a specific problem fast.
Step 4: Design high-fidelity mockups and prototypes
A typical UX design process has 8 UX design process steps, from defining the product’s goal Next, the UI design team converts wireframes into mockups to build high-fidelity
to design handoff and making sure everything works as intended prototypes that look and function like the final product. If the company has a design system,
designers will use the UI component library to build interactive prototypes.
Step 1: Define project & scope Step 5: Conduct usability testing
The first step of a UX design process defines the project’s goal and scope with team The primary purpose of high-fidelity prototypes is usability testing. UX designers test these
members and stakeholders from multiple departments–usually consisting of representatives prototypes with real users to:
from:
 Validate ideas
Business – explains business requirements and goals for the project.  Identify usability issues
Design – communicate what they need to do prior to design and manage expectations.  Test accessibility
Product – shares context, help plan the timeline and resources needed for design. Steps 2 to 5 are iterable. Using test results, designers return to stage two or three to iterate on
Technical – define feasibility and technical constraints of a UX design. ideas until they find a solution that meets desirability, viability, and feasibility criteria.
Step 6: Perform design Handoff
Step 2: Run research The second to last stage of the UX design process is the design handoff, where the design
Next, designers research the problem to find possible solutions. During the research phase, team hands over prototypes and documentation to the development team to start the
UX designers conduct several types of research, including: engineering process.
User research: Studies the target user to understand who they are, what they need, and what Step 7: Launch your product
context they operate; the outcome of this research are user personas, journey maps, and so The final stage of the UX design process is a launch and a clear inspection of the new
on. release. It’s time to ensure that the new release meets the project’s business goals, user
Market research: Analyzes the market to determine market segmentation and product experience, and accessibility requirements.
differentiation.
Competitive research: A competitive analysis to understand how competitors solve similar User Experience (UX) Process and Methodology
problems and identify opportunities.  User Research
Product research: Analyzing insights and analytics from an existing product to understand  Design
15 16

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
 Wireframing and elaborated in details.
 Prototype
 Testing Example Persona: Alex, a 24 yo backpacker
 Implementation and Launch During a meeting, you can say ―Alex would not like this feature‖ and everyone will
immediately know that you are referring to a young backpacker instead of a elderly.
User Journey Map
A user journey map is an illustration of the interaction between a user with a company,
product or service at every stage of engagement from researching, making the decision,
purchasing to post-purchase. It includes the personas, time frame, and actions for each stage,
touch points and sales channels, emotions, and experience.

Storyboards
A storyboard is a comic strip used to capture a user’s interaction with a product or service. It
allows researchers and stakeholders alike to visualize and brainstorm.

3. Wireframing
If you haven’t employed wireframing as part of your process, you should probably start
doing so. A wireframe is a visual guide with the framework of your product. It allows you to
define the information architecture, navigation design, and interface design.

4. Prototype
A prototype is the version 1.0 of your website or product. It resembles the closet version of
your final outcome.
A prototype allows the UX researchers to examine and identify any flaws, errors or
inconsistencies in overall design and experience before it is converted to the actual version
by the development team.
5. Testing
With prototypes, user testing can be conducted with users to validate the design flow and
1. Always start with User Research user experience. In some e-commerce companies, testing usually makes up a big bulk of
If you ask an experienced UX researcher what is the best UX for your website, product or daily routine of UX researchers. It allows them to continuously improve the product.
service, most likely you will not get an answer. A UX researcher should always be mindful 6. Implementation and Launch
of the differences in opinions and perceptions toward a good user experience. After user testing, the validated prototype can finally be converted into actual product for
2. Start Designing with User Inputs UAT Testing before an official launch.
Users may think of the appearance of a website or product when we talk about design. They
will describe it as pretty or not pretty. RESEARCH IN USER EXPERIENCE DESIGN:
Personas
Persona is a fictional character created to describe a specific end user. Example persona is a What is UX Research?
frequent backpacker with name, age, job details, education, location, income level, family  UX (user experience) research is the systematic study of target users and their
members and friends, familiarity with technology, hobbies, goals, characters etc explained requirements, to add realistic contexts and insights to design processes.
17 18

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
15 Guiding Principles for UX Researchers
We can additionally divide UX research into two approaches: 1. Mix It Up
Attitudinal – you listen to what users say—e.g., in interviews. 2. It’s Easier To Find ―You Got it Wrong‖
Behavioral – you see what users do through observational studies. 3. You Can’t Standardize Sample Sizes For All Your Research
4. Testing With Just One User is Not Pointless
5. Increase Sample Sizes for Better Accuracy
6. Randomizing Can Overcome Research Design Flaws
7. Research Results Belong to No-One
8. Scale Ratings In Questions Aren’t That Important
9. Participants Need to Reflect Personas
10.What They Say vs. What They Do
11.Keep Growing Your Toolkit
12.Usability – A Polite Fiction?
13.Keep Reports Short
14.Be Aware that Observers Observe Differently
15.Cults of Personality Suck

Tools and Method used for Research

Tools used for Research

 The Choice of tools depends on your research question, how you're researching, the
size of your organization, and your project. For instance:

 Survey tools such as Typeform and Google Forms.

 Card sorting tools such as Maze and UXtweak.

 Heatmap tools such as HotJar and CrazyEgg

 Usability testing (through first-click testing and tree-testing) tools such as Optimal
Workshop and Loop 11

 Diagramming applications such as Miro and Whimsical to analyze qualitative data

through affinity diagramming.
Use UX Research Methods throughout Development
 Spreadsheet tools such as Google Sheets and Microsoft Excel for quantitative data
20 21

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
analysis  Monitor analytics and metrics to discover trends and anomalies and to gauge your
progress.
 Interface design and prototyping tools like Figma, Adobe XD, Sketch and Marvel to  Analyze search queries: What do people look for and what do they call it? Search logs
conduct usability testing. are often overlooked, but they contain important information.

 Presentation tools such as Keynote, Google Slides and Microsoft PowerPoint.

Method used for Research

Use UX Research Methods throughout Development

Discover
 The discovery stage is when you try to illuminate what you don’t know and better
understand what people need.
 Good things to do during discovery:
 Conduct field studies and interview users: Go where the users are, watch, ask, and
listen. Observe people in context interacting with the system or solving the problems
you’re trying to provide solutions for.
 Run diary studies to understand your users’ information needs and behaviors.
 Interview stakeholders to gather and understand business requirements and constraints.
Explore
 Exploration methods are for understanding the problem space and design scope and
addressing user needs appropriately.
 Compare features against competitors.
 Do design reviews.
 Use research to build user personas and write user stories.
20 UX Methods in Brief
Test
 Testing and validation methods are for checking designs during development and 1. Usability testing (aka usability-lab studies): Participants are brought into a lab, one-
beyond, to make sure systems work well for the people who use them. on-one with a researcher, and given a set of scenarios that lead to tasks and usage of
 Do qualitative usability testing. Test early and often with a diverse range of people, specific interest within a product or service.
alone and in groups. Conduct an accessibility evaluation to ensure universal access. 2. Field studies: Researchers study participants in their own environment (work or
 Ask people to self-report their interactions and any interesting incidents while using home), where they would most likely encounter the product or service being used in
the system over time, for example with diary studies. the most realistic or natural environment.
Listen 3. Contextual inquiry: Researchers and participants collaborate together in the
 Listen throughout the research and design cycle to help understand existing problems participants own environment to inquire about and observe the nature of the tasks and
and to look for new issues. Analyze gathered data and monitor incoming information work at hand. This method is very similar to a field study and was developed to
for patterns and trends. study complex systems and in-depth processes.
 Survey customers and prospective users. 4. Participatory design: Participants are given design elements or creative materials in
22 23

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
order to construct their ideal experience in a concrete way that expresses what matters on an existing information architecture to benchmark it and then again, after
to them most and why. the information architecture is improved with card sorting, to demonstrate
5. Focus groups: Groups of 3–12 participants are led through a discussion about a set of improvement.
topics, giving verbal and written feedback through discussion and exercises. 17.Analytics: Analyzing data collected from user behavior like clicks, form filling, and
6. Interviews: a researcher meets with participants one-on-one to discuss in depth what other recorded interactions. It requires the site or application to be instrumented
the participant thinks about the topic in question. properly in advance.
7. Eyetracking: an eyetracking device is configured to precisely measure where 18.Clickstream analytics: A particular type of analytics that involves analyzing the
participants look as they perform tasks or interact naturally with websites, applications, sequence of pages that users visit as they use a site or software application.
physical products, or environments. 19.A/B testing (aka multivariate testing, live testing, or bucket testing): A method of
8. Usability benchmarking: tightly scripted usability studies are performed with larger scientifically testing different designs on a site by randomly assigning groups of users
numbers of participants, using precise and predetermined measures of performance, to interact with each of the different designs and measuring the effect of these
usually with the goal of tracking usability improvements of a product over time or assignments on user behavior.
comparing with competitors. 20.Surveys: A quantitative measure of attitudes through a series of questions, typically
9. Remote moderated testing: Usability studies are conducted remotely, with the use of more closed-ended than open-ended. A survey that is triggered during the use of a site
tools such as video conferencing, screen-sharing software, and remote-control or application is an intercept survey, often triggered by user behavior. More typically,
capabilities. participants are recruited from an email message or reached through some other
10.Unmoderated testing: An automated method that can be used in both quantitative and channel such as social media.
qualitative studies and that uses a specialized research tool to capture participant
behaviors and attitudes, usually by giving participants goals or scenarios to accomplish 7 Great, Tried and Tested UX Research Techniques
with a site, app, or prototype. The tool can record a video stream of each user session,
and can gather usability metrics such as success rate, task time, and perceived ease of Technique Number 1 – Card Sorting
use.
11.Concept testing: A researcher shares an approximation of a product or service that Card sorting was originally a technique used in psychological research long before UX
captures the key essence (the value proposition) of a new concept or product in order research was a ―thing‖. It’s a simple concept, you write words or phrases on cards, then you
to determine if it meets the needs of the target audience. It can be done one-on-one or ask the user to categorize them. You might also ask them to label the categories. It’s a great
with larger numbers of participants, and either in person or online. way to determine whether your Information Architecture (IA) is heading in the right
12.Diary studies: Participants are using a mechanism (e.g., paper or digital diary, camera, direction or to examine IA for new products.
smartphone app) to record and describe aspects of their lives that are relevant to a
product or service or simply core to the target audience. Diary studies are typically
longitudinal and can be done only for data that is easily recorded by participants.
13.Customer feedback: Open-ended and/or close-ended information is provided by a
self-selected sample of users, often through a feedback link, button, form, or email.
14.Desirability studies: Participants are offered different visual-design alternatives and
are expected to associate each alternative with a set of attributes selected from a closed
list. These studies can be both qualitative and quantitative.
15.Card sorting: A quantitative or qualitative method that asks users to organize items
into groups and assign categories to each group. This method helps create or refine the
information architecture of a site by exposing users’ mental models.
16.Tree testing: A quantitative method of testing an information architecture to
determine how easy it is to find items in the hierarchy. This method can be conducted
24 25

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
Why is card sorting a good technique? they use your product. Researchers love these techniques and are often passionate
 It’s a very cheap form of research – particularly face-to-face, online tools may be about persuading their clients to take them on board.
more expensive.  When conducted well, the outputs of field studies provide the deepest insights into
 It’s a very easy technique for users to understand and for clients to understand too. user issues and how they might be solved.
 It’s a very easy method to get user input (or even to get user validation) for ideas Technique Number 5 – Usability Testing
early on in a UX project. A firm favourite that has a long and prestigious history in UX research. Usability testing is
Technique Number 2 – The Expert Review the observation of users trying to carry out tasks with a product. They can focus on a single
Expert reviews involve a single ―expert‖ walking through a product via the User Interface process or be much more wide ranging.
(UI) and looking for issues with the design, accessibility, and usability of the product.
There’s no fixed process to follow and the expert review can vary from professional-to- Why is Usability Testing a Good Technique?
professional as well from product-to-product. The more expertise the reviewer has in  Usability tests produce specific results that lead to specific action. Better still, it’s very
usability and UX design – the more valuable their input (in most cases). hard for people to contradict decisions based on these tests; it’s nearly impossible to
Why is an Expert Review a Good Technique? refute evidence of user behaviour.
 It’s quick, easy and cheap. This is doubly so when you compare it to more formal  You can bring clients into usability testing easily as observers. This increases their
usability testing methods. enthusiasm for such testing and shows clearly why such testing adds value.
 It only takes a single professional to conduct an expert review.
 It is a great way to inform further UX research and caution should be used in taking Technique Number 6 – Remote Usability Testing
an expert review at face value without further user testing. This is usability testing but without the need to drag users into your laboratory environment.
It was once complex and expensive but technology has moved on and now it’s fairly simple
Technique Number 3 – Eye Movement Tracking to set up and reasonable value for money too.
It can be really useful to know where your users are looking when they’re using your Why is Remote Usability Testing a Good Technique?
system. It helps with UI design and it helps with knowing how to prioritize certain kinds of  It often saves time and money when compared to lab testing and it allows for a wider
content. This technique was developed for academic research and has been used extensively range of participants when you don’t have to get them in the lab.
in medical research and has now become popular and cost-effective enough to be deployed  It is closer to field testing in some respects in that the tests are conducted in the user’s
by the UX team too. environment and not an artificial lab environment. This delivers better results in many
cases than a lab environment.
Why is Eye Movement Tracking a Good Technique? Technique Number 7 – User Personas
 Now that technology is advanced enough, eye movement tracking systems are no User personas are a fictional representation of the ideal user. They focus on the goals of the
longer bulky and invasive and they do not interfere with the results of usability tests. user, the characteristics that they have and the attitudes that they display. They also examine
 The technology is reasonably affordable now. It won’t suit every project budget but it what the user expects from the product.
often won’t break the bank either. User personas are created from other forms of user research and thus offer an in-depth real-
Technique Number 4 – Field Studies life vivid portrait that is easy for the whole team to keep in mind when designing products.
This is actually a number of techniques under a broad heading. It’s all about going out and User personas have a name and a backstory. They inspire the imagination and keep focus on
observing users ―in the wild‖ so that behaviour can be measured in the context where a the user.
product will actually be used. It includes; ethnographic research, interviews and observations, Why are User Personas a Good Technique?
plus contextual enquiry.  They are a step above the old user profile and give a more in depth and specific look at
a user.
Why are Field Studies a Good Technique?  They are easy for people to relate to and become part of the team as they are constantly
 There’s no stronger form of research than observing users behaving as they will when spoken about during a project.
26 27

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
individuals and as a species. They include food, drink, shelter, breathing, and sleep.
USER NEEDS AND ITS GOALS
Safety Needs – The next level of needs to be met are those that offer us some guarantee of
 Designers must consider the types of needs they are targeting with their products so as being able to satisfy our physiological needs in the long-term. These include fiscal and
to grab the customer's/user's attention and accentuate the positive aspects of both personal security, health, protection from the elements, etc.
owning and using them.
Social Needs – The human animal is a social one and there is a deep-seated requirement for
 An understanding of how users think and how they behave in response to sensory company in life. Social needs include friends, lovers, intimacy, families, communities,
information is essential to design relationships and a sense of belonging.

Maslow's Hierarchy of Needs Esteem Needs – Basic social needs become more complex for people and there is a need for
our efforts to be recognized by others. Esteem needs may be fulfilled by social status,
Abraham Maslow has provided one of the most prominent accounts of human motivation achievements, mastery, prestige, etc.
with the 'Hierarchy of Needs', representing his most well-known contribution to psychology.
Self-Actualized Needs – The final, top layer of the hierarchy is associated with our ability to
The Levels of Maslow's Hierarchy of Needs grow as an individual. These needs include peace, contentment, self-growth, maximum
experiences, etc.
 The most basic human needs are shown at the bottom of the hierarchy, and these are
the physiological drives that ensure survival, including the need for air, food, water,
and sleep

Physiological Needs – The most basic needs of all are those that are needed to sustain us as
28 29

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
The Hierarchy of Needs in Design Terms

User Goals and How They Influence Information Design Decisions

 Understanding user goals and using this understanding to influence design decisions is
essential
 It involves understanding the information users need for performing their tasks and
how they want to feel as they undertake them.
User Goals in Each Step of the Design Process
Taking user goals into account will impact decisions along all steps of designing an
information visualisation.

 Define the problem.

 Define the data to be represented.
 Define the dimensions required to represent the data.
The Design Hierarchy from Bottom to Top  Define the structures of the data.
 Define the interaction required from the visualisation.
 As with Maslow’s hierarchy it is essential for a design to meet the lowest need on the Step 1 – The Main Step of Defining the Problem
pyramid before progressing to meet further needs. When designing information visualisations, understanding the information people need to
perform their tasks is the starting point. It requires some user research
 Functionality – for a design to meet any need it must work and it must meet the basic
needs of the user. However, if this is all it does; it may well be seen as having little Steps 2 to 5 – The Remaining Steps of Designing the Information
value if any to the user in the short to long-term. Once you understand the user needs and the context in which they will be using the
information design, you can proceed to step 2 and start selecting the data necessary for
 Reliability – the next step is for your design to function in a reliable manner and providing them with the insights they need.
present a consistent experience. This may increase the user’s perception of the value of
30 32

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
UNIT COMPUTATION
IV WIREFRAMING, PROTOTYPING AND TESTING SEM COMPUTATION SEM
Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing - Creating Disposable: Rely on their usefulness to explore a concept and not on their production costs.
Wireflows - Building a Prototype - Building High-Fidelity Mockups - Designing Efficiently Plentiful: Produce sketches as a collection that explores different aspects of interaction over
with Tools - Interaction Patterns - Conducting Usability Tests - Other Evaluative User Research time.
Methods - Synthesizing Test Findings - Prototype Iteration Minimalist: Use sketches to clarify one concept at a time.
Enhancing Sketches — Annotations, Arrows and Notes

SKETCHING PRINCIPLES
Sketching:
 Sketching is a distinctive form of drawing which designers use to propose, explore,
refine and communicate ideas.
 Sketches are easy, fast, and cheap to create, iterate, and if needed, even discard without
much effort. Unlike written or verbal communication, sketches sidestep rules of
grammar and help clearly communicate ideas, all but eliminating misunderstandings.

Annotations, arrows and notes increase the communicative power of your sketches.

Annotations – These are names, labels and explanations located next to different parts of a
sketch to expand and clarify the meaning of any element depicted. Tie annotations to
different elements in your sketch using arrows, braces, numbering and spatial proximity.
Write your annotations using a different color that contrasts with the sketch proper.

Arrows – Apart from pointing to specific elements in a sketch, use arrows to illustrate
interaction flow, a sequence of events, movement and direction.

The Five Elements of Drawing: Notes – Any text, long or short, that provides additional insight into your sketch is a note.
Use notes to do the following:

 Provide detailed explanation of the action or sequence illustrated.

 Describe an idea derived from an illustration.
 List unresolved issues.
 Explore design elements not depicted in the sketch.
 Clarify the purpose of each element you present, especially non-static ones.
 Keep a record of your thought process when you first draw a sketch.
Features of Sketch: Types of Sketching:
Sketches are: 1. Scribble Sketching
Quick: Don’t invest a long period producing them. The idea behind this technique is to capture, as fast as possible and with the broadest of
Timely: Produce them when and as the need arises. strokes, the essence of the object, design or action you are trying to preserve. Leave out non-
2 3

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
important details, decorations, text and other non-essential elements. Sketching Principles:
Best Practices and Tips for Sketching
 Always sketch out your ideas, rather than store them in your head! Design thinking
emphasizes a bias towards action. Whenever you have an idea, sketch it out, no matter
how silly it seems—you will be able to evaluate it much better when it’s on paper
rather than in your head.
 Use the right amount of detail: remember that a sketch should be rough and quick.
Don’t spend extra time adding details which are not required for your quick sketch.
2. Sampling with Cameras  Draw diagrams to map out complex ideas or use cases, where many factors and players
The goal of this technique is to use still photos and video to capture some features of the affect one another. Journey maps, behavior maps, system flow diagrams and a range of
world. Capture objects, designs and actions that delight, inspire and irritate you. other mapping methods are at your service to help you scope out complex situations.
Pros and Cons of Sketches  Invite other team-mates to join in your sketching sessions, when appropriate. Because
Pros of sketches sketches are so easy to create, they are great opportunities for you to involve other
 They are extremely cheap and fast to create. As such, you can sketch out a large stakeholders in the design process.
number of ideas in a short amount of time.
 You can do it anywhere: with pen and paper or digitally on your smartphone, tablet or
desktop computer. The best way to gain confidence in sketching is to practice.
 They are disposable, so you won’t get attached to sketches that turn out to be bad Create a Record of Failed Design Efforts
ideas. Keep a record of failed design efforts. Gather objects and situations that annoy you. Write
down the reasons behind this negative effect.
Cons of sketches Create a Record of Successful Design
keep a record of successful design. This will help you draw inspiration from multiple
 Sketches lack detail and are ambiguous by design. As such, you cannot use sketches to domains to ground your design work on features other than those of the digital realm.
convey complex interactions of an app, for example.
 Sketches are almost never of high enough fidelity to be useful with people outside of How to Perform a Sketch Test
the team, since they rarely have the context to understand what the sketch is meant to
convey. The procedure is simple:
 Sketches are not very helpful in convergent processes where you want to select a few 1. Print a copy of the deliverable
best ideas—other forms of prototypes, such as paper prototypes or wireframes, are 2. Recruit a sketch-test participant from your target audience. For example, if you're
more helpful. preparing a wireframe for developers, recruit a front-end developer.
3. Give the sketch-test participant the printed copy of the deliverable. Place a blank pad of
When to Use Sketches paper and a pen or pencil right next to the person.
Use sketches in early, divergent stages of your design process. 4. Invite the participant to write directly on the deliverable, but also make scratch paper
Sketch out your rough ideas so you can discuss them with team-mates. available. Explain that the printed version of the deliverable is just a scratch copy, and that
you welcome any comments.
5. Ask the participant to explain the concepts in the deliverable.
 Explain that the current version of the deliverable is a work in progress, and that you
are still developing the format of the document. While content suggestions can be
welcome, at this point do not ask for them explicitly — keep the focus on making the
4 5

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
SKETCHING RED ROUTES RESPONSIVE DESIGN
Responsive web design (RWD) is a web development approach that creates dynamic changes
Dr. David Travis of User focus identified that the analogy of the red route. By identifying the to the appearance of a website, depending on the screen size and orientation of the device
core paths users will take on a website should be identified as the red routes. being used to view it. RWD is one approach to the problem of designing for the multitude of
•Red Routes are majorly derived from ―Important roads in London‖. devices available to customers, ranging from tiny phones to huge desktop monitors.
•Transport for London do everything in their power to make sure passenger journeys on these RWD uses so-called breakpoints to determine how the layout of a site will appear: one
routes are completed as smoothly and quickly as possible design is used above a breakpoint and another design is applied below that breakpoint. The
•London’s Red Routes as a metaphor for frictionless user journeys. breakpoints are commonly based on the width of the browser.
Definition:
How does Red route help in Designs ? Responsive design is an approach to web design in which the interface adapts to the device's
―When applied to design, these red routes are the critical and frequent paths that users take to layout, facilitating usability, navigation and information seeking.
complete their tasks‖ Benefits of Responsive design:
 Reach a larger audience: nowadays, more users access the web through mobile
Red Route principle devices.
Define red routes for your product and you’ll be able to identify, prioritise and eliminate any  Save time and development efforts since designers and developers only focus on one
usability obstacles on key user journeys. design version.
 Improve SEO, as search engines reward mobile-friendly websites with better search
Identifying Red Routes positions.
Critical  Ensure brand and design consistency across devices, as there is no chance to modify
End-to-end tasks with multiple steps or actions guidelines to fit different design boxes.
Frequently utilised Why Responsive Design is so Popular?
Built for scale More users were starting to access web material on handheld devices than on desktops. There
Key value drivers were two main design approaches to deal with designing across devices:
Objectively successful  Designers could craft several versions of a design optimized for different devices and
Tied to critical product metrics make each have fixed dimensions (adaptive design approach).
Red route usability  They could work on a single, flexible design that would stretch or shrink to fit the
―Focusing on your product’s red routes provides the key constraint you need to ship a high screen (responsive design approach).
value product from version 1‖ Understanding the Language of Responsive Design
Responsive design has three core principles:
Red routes improve speed and effectiveness: Fluid Grid System
We can ruthlessly eradicate any usability obstacles on the key user journeys. Grid systems are aids designers use to build, design, arrange information and make consistent
Red routes describe frequent and critical activities : user experiences. In interaction design, multi-column, hierarchical and modular are the most
We need to map out the red routes for our site it’s important to consider both the frequency widely-used types of grids.
and critical nature of the activity The principle of a grid is simple: every element occupies the same percentage of space,
however large or small the screen becomes, which means that the components can be scaled
Red routes should reflect key business objectives : up and down as the user switches devices.
These red routes are clearly important from the perspective of the organisation: you need to
make sure these routes are trouble-free to make money

7 10

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
breakpoints: these are the values where the content of your website will be rearranged
to provide the user with the best possible experience.
 Media queries and breakpoints go hand in hand, and both can be defined in your CSS
style sheets. For designers, a breakpoint is a boundary where the design will change to
accommodate the features to the new size.
Best Practices & Considerations for Responsive Design
With responsive design, you design for flexibility in every aspect—images, text and
layouts. So, you should:

1.Assume a "mobile-first" mentality: Whether you start designing from the smallest
screen or the desktop version, assuming a mobile-first mentality helps you practice the
mobile-first approach, a design principle with simplicity at its core. A mobile-first
mentality means prioritizing content, leaving complex graphs and images for the desktop
version
2.Use Scalable Vector Graphics (SVGs). These are an XML-based file format for 2D
In this image, you can see that the fixed version of the content has the same width regardless graphics, which supports interactivity and animations.
of the device whereas in the fluid version the content fills the available space depending on 3.Include three or more breakpoints (i.e., design for 3+ devices).
the device size. 4.Prioritize and hide content to suit users' contexts. Check your visual hierarchy and use
Fluid Images progressive disclosure and navigation drawers to give users needed items first. Keep
nonessential items (nice-to-haves) secondary.
5.Aim for minimalism.
6.Apply design patterns to maximize ease of use for users in their contexts and quicken
their familiarity: e.g., the column drop pattern fits content to many screen types.
7.Aim for accessibility with font sizes/styles. Use contrast and background effectively.

Demerits of Responsive design:

Responsive design can still run into difficulties if you use it without caution. For example,
it can restrict your control over the design's screen sizes

WIREFRAMING
 In responsive design, fluid images are images that scale to fit their container, meaning Definition:
that when the browser reaches a breakpoint, the image will scale up or down to the Wireframing is a visual representation of the workflow of a website or mobile application.
current window size. This preliminary design step illustrates the page's structure, layout, and functionality. It helps
 For non-photographic images, such as icons, you can use SVG files—these file in planning the user experience without distractions from color, graphics, or content.
formats are lightweight, and you can scale them to any resolution without losing
quality.
Media Queries and Breakpoints
 Media queries are filters that detect the browsing device's dimensions and make your
design appear appropriate regardless of the screen size. To aid media queries, you have
11 12

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
The Elements of a Wireframe Different Types of Wireframes
1. Low-fidelity Wireframes
Low-fidelity wireframes are the first you create. They provide the basic visuals of the design,
but lack scale, grid, or pixel accuracy. The main aim is to strip away distractions.
These wireframes ease discussions, help in setting navigation, and outline user paths.
2. Mid-fidelity Wireframes
Mid-fidelity wireframes are the most prevalent. They offer a clearer layout view, though they
still omit visuals like images or specific typography.
3. High-fidelity Wireframes
High-fidelity wireframes are detailed. They provide pixel-specific layout views. Unlike the
low-fidelity version, which might use placeholder text and symbols, these wireframes
present actual images and relevant content.

When to Use Wireframes?

Wireframes play a role throughout a project. They're essential for clarity, feedback, planning,
and testing. But they serve a specific purpose. Here are the scenarios where creating
wireframes can help.

1. The logo signifies brand identity. It usually sits at the top corner of a page and anchors  Explore the initial idea: At the start of a project, wireframes help visualize rough ideas.
the brand's presence. They bring abstract concepts to life.

2. Navigation helps users explore different parts of the site or app. Commonly seen as a  Collect meaningful feedback: Before you get into the details of a design, wireframes
menu bar or sidebar, it directs users to primary sections or features. help you gather initial feedback. Stakeholders, members of the design team, and
potential users can provide valuable insights before you move on to the next step.
3. Search fields allow users to find specific content or features. It's especially useful for
content-heavy sites.  Plan functionality: Wireframes map out where you will place functional elements like
buttons or interactive features. It helps you understand how to create an interaction
4. Text blocks on a wireframe represent the content placement. It can be headlines, design for usability.
paragraphs, or bullet points.
 Structure content: Wireframes help plan where content will appear. For instance,
5. Buttons prompt users to take actions like "Submit," "Read More," or "Buy Now." positioning text, images, or multimedia is easier.
6. Image placeholders show where you will place your visuals. They help in  Customer journey mapping: Wireframes are tools to plot user journeys. They enable
understanding the content-to-visual balance on a page. designers to envision how users will navigate a site or app.
7. Videos mark the areas on the wireframe where multimedia content, such as videos or  Usability testing: Before final designs, wireframes can undergo usability tests. It helps
animations, will appear. identify and rectify usability issues early.

13 14

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
4. Miro For example, if your e-commerce site aims to improve user engagement, it may require a
How to Create Wireframes: A Step-by-Step Guide 'Recommended Products' section. Stakeholders can provide insights on what features align
with both user needs and business goals.

Step 3: Map the User Flow

User flow is the blueprint of a user's journey on your platform. Taking an e-commerce site as
an example, a user's path might start from the homepage, leading to a product search, then
product selection, payment, and finally, order confirmation.

Recognizing these steps will highlight the necessary features and inform your design
decisions.

Step 4: Sketch the Layout and Features

With the user research and project requirements in hand, sketch your wireframe. Select an
appropriate canvas size and start positioning elements.

 Information architecture: Focus on how you organize the content and prioritize
information based on its significance.

 Interactive elements: Highlight buttons, links, and other clickable items.

Step 1: Do Your UX Research
Before sketching, you need to have a good understanding of your audience and business.  Static elements: Remember foundational parts like headers, footers, or menus.
Start your UX research from the perspective of your target audience.
 Fidelity choice: Decide on the detail level. Early stages might use low-fidelity
What motivates them? sketches, while detailed projects lean towards high-fidelity designs. In between, you
find medium-fidelity designs.
What holds them back?
Step 5: Review and Iterate
Which products resonate with them?  Share your wireframes. Gather input from stakeholders, including business
professionals and developers. Consider guerrilla usability tests, which involve testing
Utilizing tools like user personas or the jobs-to-be-done (JTBD) framework can be invaluable the wireframe with users to gather insights.
here.  When you collect feedback, frame your questions to include broad insights and
specific details.
Step 2: Define Requirements and Prioritize Features Step 6: Build on It
After you complete your UX research, the next step is narrowing down what to build. At this Upon reaching a mutual agreement on the wireframe design, progress to the next stages.
stage, involve stakeholders or the product owner. They will help translate broad user needs Create detailed mockups and interactive prototypes and transform them into minimum viable
into specific features. products

16 17

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
What is Wireframing in UX? Wireframe Page Layout: Structuring Content
Wireframing in UX refers to creating a skeletal layout for a digital product. It's the blueprint  Header: The topmost section, usually containing the logo, navigation links, or contact
or foundation upon which you create the design details.
 Main content area: The primary section where the core content resides. It's the focal
Different platforms have specific wireframe sizes. These are: point of the user's attention.
 Smartphone screen: 1080 px x 1920 px  Sidebars: Secondary content areas, often containing links, ads, or additional
 8‖ Tablet screen: 800 px x 1280 px information.
 10‖ Tablet screen: 1200 px x 1920 px  Footer: The bottom section displays copyright information, additional links, or contact
 Desktop screen: 768 px x 1366 px details.

The Necessity of Wireframing UX and UI Wireframe Examples

 Clarity: Wireframing interprets abstract ideas to convert them into a visual format. 1. Website Wireframe Sketch
 Feedback: Early-stage wireframes gather valuable feedback from stakeholders and
users.
 Cost-efficient: It's easier and cheaper to make changes to a wireframe than to a fully
designed product.
 Focus on Functionality: Without distractions like color or graphics, the core user
journey and functionality remain at the forefront.
Approaches to Wireframing
 Hand-drawn: Quick sketches on paper or a whiteboard. Ideal for brainstorming.
 Low fidelity: Basic visual design that focuses on structure and layout.
 High fidelity: Detailed, closer to the final design. They showcase interactions and
more precise placements.

Wireframing Principles
 Simplicity: Keep it straightforward. Focus on structure and functionality.
 User-centered: Prioritize user needs and the intended user journeys.
 Clarity: Every element should have a clear purpose.
 Feedback loop: Constantly gather feedback and iterate.
 Consistency: Maintain a uniform structure and design language.

Wireframing for User Testing

Testing with wireframes is invaluable. Before getting deep into design or development,
wireframes provide a tangible product for users to interact with. This early-stage testing A basic homepage wireframe sketch. It outlines sections and highlights essential
identifies potential usability issues, layout problems, or unclear navigation paths. details.

18 19

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
Strengths Wireflows for Collaborative Ideation
In addition to being a useful form of communication with project stakeholders and
 Allows for quick ideation without tool constraints. developers, wireflows also work well as a tool for collaboration between team members.
 Encourages collaboration; anyone with a pen can contribute. Especially in Agile environments, being able to collaborate and communicate well among a
 Sparks creativity and is less restrictive than digital tools. crossfunctional team is critical.

Weaknesses
BUILDING A PROTOTYPE
 Not as precise or scalable as digital versions.
 Difficult to share and edit in remote settings. What is Prototyping?
 Lacks interactivity features present in digital tools. Prototyping is an experimental process where design teams implement ideas into tangible
forms from paper to digital. Teams build prototypes of varying degrees of fidelity to capture
eCommerce Mobile Wireframe Sketch design concepts and test on users.
What is a Prototype?
A prototype is a simple experimental model of a proposed solution used to test or validate
ideas, design assumptions and other aspects of its conceptualisation quickly and cheaply, so
that the designer/s involved can make appropriate refinements or possible changes in
direction.
Remarkable Reasons for Prototyping

The advantages of prototyping are that you:

 Have a solid foundation from which to ideate towards improvements—giving all

stakeholders a clear picture of the potential benefits, risks and costs associated with
where a prototype might lead.
 Can adapt changes early—thereby avoiding commitment to a single, falsely-ideal
version, getting stuck on local maxima of UX and later incurring heavy costs due to
oversights.
 Show the prototype to your users so they can give you their feedback to help pinpoint
which elements/variants work best and whether an overhaul is required.
 Have a tool to experiment with associated parts of the users’ needs and problems—
therefore, you can get insights into less-obvious areas of the users’ world (e.g., you
notice them using it for additional purposes or spot unforeseen accessibility issues
such as challenges to mobile use).
 Provide a sense of ownership to all concerned stakeholders—therefore fostering
emotional investment in the product’s ultimate success.
The digital sketch shows the main parts of a mobile eCommerce site
 Improve time-to-market by minimizing the number of errors to correct before product
release.

20 23

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
The three primary types of prototypes based on fidelity are: Prototyping to Test

1. Low-Fidelity Prototypes: Simple and often hand-drawn representations, such as sketches This will be the most common prototype you will create in a design project. Create iteratively
or paper interfaces. They're quick to produce and useful for initial concept validations. improved prototypes in order to test out solutions quickly, and then use the test results to
improve your ideas.
2. Mid-Fidelity Prototypes: More detailed than low-fidelity, these often use digital tools and Prototyping to Decide
give a clearer understanding of the product's aesthetics and functionality. Sometimes in your design project, you may face conflicting ideas from different team-mates
or stakeholders. Prototyping can be an effective tool for enabling your team to compare the
3. High-Fidelity Prototypes: Highly detailed and interactive, resembling the final product ideas and prevent any disagreements from developing.
closely. They're used for advanced user testing and to get a realistic feel of the final design.
When building a prototype to decide, you can see how each of the solutions will work better.
Low-fidelity You will be able to see whether the prototypes lack in some areas; for example, you may
realise that the prototype would not work in the natural environment of users. Your team will
Example: Paper prototypes also be able to see the different ideas tangibly, and hence discuss the ideas and build on them,
or suggest ways to merge the best aspects of each prototype.
Pros: Fast and cheap; disposable; easy to make changes and test new iterations; allow a quick
overall view of the product; anyone can produce them; encourage design thinking since
prototypes are visibly not finalized. BUILDING HIGH-FIDELITY MOCKUPS

Cons: Lack of realism, so users might have a hard time giving feedback; hard to apply results Mock-ups are used by designers mainly to acquire feedback from users about designs and
from crude early versions; may be too basic to reflect the user experience of the finished design ideas early in the design process. Mock-ups are 'very early prototypes' made of
product; can oversimplify complex issues; lack of interactivity deprives users of direct cardboard or otherwise low-fidelity materials. The user, aided by the designer, may test the
control; users must imagine how they would use the product. mock-up (imagining that it works) and thus provide valuable feedback about
functionality/usability/understanding of the basic design idea/etc.
High-fidelity

Example: Digital prototypes created on software such as Sketch or Adobe XD

Pros: Engaging—all stakeholders have the vision realized in their hands and can judge how
well it matches users’ needs and solves their problems; testing will yield more accurate, more
applicable results; versions closest to the final product enable you to predict how users will
take to it in the marketplace.

Cons: Longer/costlier to create; users are more likely to comment on superficial details than
on content; after hours of work, you the designer are likely to dislike the idea of making
changes, which can take considerable time; users may mistake the prototype for the finished Mockups look like screenshots from a completed, real app, they are little more than images
product and form biases. Mockups are fully polished visual designs sometimes rendered in realistic devices that
include branding, colors, images and typography.

24 26

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
Advantages: Organizations use different tools –Company practices—including choice of UX tools—
 Mock-ups incite criticism from users because they are low-cost (can be made of vary. Moreover, with time, they’ll switch to the next best thing for them.
cardboard) and low-fidelity. If a user is presented with an early version of a system
that has required substantial work, he/she is likely to be more reluctant (as well as
able) to critise it.
 When using mock-ups of cardboard or similar materials, the user and designer can
collectively change the design using familiar tools such as pens, scissors etc. As such,
mock-ups are a discussion medium and a discussion facilitator between designer and
user.
 Not only can the mock-up function as a discussion medium between designer and user
but also between the members of the design team. Thus, mock-ups may help facilitate
work across disciplinary borders, bringing together a disparate team.
 Mock-ups make it possible to do usability testing early in the development process.
 Mock-ups incite and legalise experimentation as they are inexpensive to alter.
 Mockups focus on content and functionality and turn attention away from details of
graphic design.

Examples of mockups

Adobe XD: This all-in-one UX/UI design software allows for wireframing, prototyping, and
collaboration in the same platform.
Figure 1: Cardboard Mockup of a calendar application for school kids
27 31

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
Figma: Known for its cloud-based interface, Figma enables real-time collaboration, making it Best Practice: Construct Your User Story Madlib
a favorite among design teams. As a [who are they], he/she wants to [what do they want to do], so that [their end goal].

Sketch: Although the Sketch app is only available for macOS, Sketch has a robust set of Example: As a freelance consultant, Peter wants to easily schedule meetings, so that he can
features and an extensive plugin ecosystem, making it a powerful tool for user experience ensure his schedule is always organised and effective.
design.
Example: As a corporate web designer, Lisa wants to improve the company’s website, so that
InVision: InVision offers a suite of tools for prototyping, collaboration, and workflow users can easily find and get access to what they need.
management, making it a comprehensive solution for design teams.
Make sense in your Research by Creating Maps
Axure RP: This tool stands out for its advanced prototyping capabilities, allowing designers Mapping helps plot experiences, customer journeys, thought processes, a series of activities
to create highly interactive and dynamic prototypes. or actions and other related behaviour, as well as feelings, in one place. It would be useless
having reams of data and not be able to understand the essence of it by extracting significant
Wireframing Tools meaning from the data.
Affinity Diagrams and Space Saturate and Group – Clustering and Bundling Ideas and
Wireframing tools are the blueprint machines of the design process. They allow designers to Facts
create a skeletal layout of a web page or app, laying the groundwork for more detailed design The ―space saturate and group‖ method’s goal is to get all of your observations and findings
work. The primary function of a wireframe is to illustrate the page structure, content into one place: Immerse yourself in the chaos of information you’ve gathered during your
arrangement, and intended functionalities. research Empathise phase.
Benefits: Wireframing software expedites the initial design phase by providing simple drag- Write on post-its, draw your insights, tell stories, and share artifacts.
and-drop elements, making it easy to visualize the layout. They facilitate rapid iterations and The term ―saturate‖ relates to the way everyone covers or saturates the ―space‖ with their
allow you to explore different layout options. Also, they establish the basic structure before images and notes in order to create a wall of information to inform and start ―grouping‖ the
you get to the detailed design. Wireframes also have the advantage of looking malleable. following problem-defining process.
Colleagues and users are less reluctant to suggest changes compared to high-fidelity
prototypes. Empathy Map
An Empathy map will help you understand your user’s needs whilst developing a deeper
Limitations: Wireframes lack the visual design appeal of a fully designed interface. This may understanding of the person you are designing for. There are many techniques available for
make it challenging for stakeholders unfamiliar with the design process to envision the final you to develop this type of empathy. An Empathy Map is one method that will help you
product. define and synthesise your observations from your fieldwork and research phase, and draw
out insights about your users’ needs
Examples: Balsamiq, Sketch, and Adobe XD are popular choices for wireframing due to their
simplicity and efficiency. Personas

Prototyping Tools Personas are fictional characters, which, based on your research, you create to represent the
different user types that might use your service, product, site, or brand in a similar way.
Once the basic structure of the design is in place, prototyping tools come into play. These When you create personas you will understand your users’ needs, behaviours, and goals – it
tools allow designers to create interactive mockups and showcase how the final product will will help you step out of yourself. It helps you recognise that different people have different
work. This includes everything from button interactions and animations to transitions and needs and expectations, and it helps you to identify with the user you’re designing for.
user flow.
32 47

Downloaded from EnggTree.com Downloaded from EnggTree.com

 EnggTree.com EnggTree.com
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM COMPUTATION SEM
Stories
User stories are short stories that aim to insert the Persona into a situation in which he or she
is using your product or aiming to fulfill the goal you seek to match. At this point, you should
ignore minor details and get to the root of the who, what and why of the situation
Scenarios
Scenarios expand on user stories and fill in many valuable human and environmental factors,
which flesh out the story providing much more meaning for exploring various aspects of the
solution. Scenarios provide us with the context within which our personas function, and how
their experiences and needs play out.

Define Your Point Of View (POV)

By the end of your Define mode, you should end up creating an actionable problem
statement, also known as your Point of View (POV). You form your Point of View by
extracting the most important insights about your users’ core human needs that you should
fulfill within the problem area you’re investigating and designing for
Frame Your POV with How Might We Questions
When you’ve defined your design challenge in a POV, you can start opening up for ideas to
solve your design challenge by asking ―How Might We‖. You’re now moving on to the next
phase of the Design Thinking process, the third phase: Ideation. You start by rephrasing and
framing your POV as several questions by adding ―How might we‖ at the beginning of the
POV.
Why-How Laddering
Designers will use why to progress to the top of the so-called Why-How Ladder where the
ultimate aim is to find out how you can solve one or more problems. In other words, you
could say that the Why-How Laddering starts with asking Why to work out How they can
solve the specific problem or design challenge.

PROTOTYPE ITERATION
The iterative design process is a simple concept. Once, through user research, you have When Do I Use Iterative Design?
identified a user need and have generated ideas to meet that need, you develop a prototype. Iterative design can be used at any phase of the design process, including when the product
Then you test the prototype to see whether it meets the need in the best possible way. Then has already been launched in the market and you are looking to create improvements in that
you take what you learned from testing and amend the design. Following that, you create a product.
new prototype and begin the process all over again until you are satisfied that you’ve reached
the best possible product for release to the market. Why Does Iterative Design Exist?
This iterative process is often called ―rapid prototyping‖ or ―spiral prototyping.‖  User research prior to product development has to deal with what people say they will
do in most cases. There’s no product available to examine what they actually do. So
the first model of any given product is likely to reflect the ―theoretical use‖ of a
product rather than its actual use.

48 49

Downloaded from EnggTree.com Downloaded from EnggTree.com