�ݺ�ߣ

Introduction /Overview of UI/UX Design
 UI (User Interface) design and UX (User Experience) design
are two closely related but distinct disciplines that are
crucial for creating successful digital products and
services.
1

Introduction to UI/UX Design
UI DESIGN:
 .UI design primarily focuses on the visual and interactive
elements of a product. It deals with the look, feel, and
presentation of the user interface.
 UI designers are responsible for creating visually appealing
and aesthetically pleasing interfaces that users interact
with.
2

Introduction to UI/UX Design
UX DESIGN:
 UX design, on the other hand, is concerned with the
overall user experience encompassing the entire journey a
user has with a product or service.
 It includes aspects beyond the visual, such as usability,
accessibility, and user satisfaction.
 UX designers work to understand user needs, behaviors,
and motivations, and they strive to create products that
meet those needs and provide a positive experience.
3

What is User Experience Design ?
 User Experience (UX) design is a process of creating
products or systems that provide meaningful and positive
experiences for users.
 It involves considering every aspect of the user's interaction
with a product, including how it looks, how it functions,
and how users feel while using it
 The goal is to design products that are not only usable and
efficient but also enjoyable and satisfying for users.
4

UX Introduction
5
 User Experience design is design that is user centered. The goal is to
design artifacts that allow the users to meet their needs in the most
effective efficient and satisfying manner.
 User experience (UX) focuses on having a deep understanding of users,
what they need, what they value, their abilities, and also their
limitations. It also takes into account the business goals and objectives of
the group managing the project.
 The purpose of UX design is to create products and services that solve
user problems. As such, everything a UX designer does should be steeped
in the principle of user-centricity.
 The goal of UX design in business is to “improve customer satisfaction
and loyalty through the utility, ease of use, and pleasure provided in
the interaction with a product.”

Advantages of UX design
6
 A good UX design helps to improve customer acquisition and also helps
to retain these new customers.
 When your brand has features that are better than the competitor's sites,
you can be sure to attract more customers and satisfy them.
 A good UX improves customer acquisition and retention
 UX design cuts down on developmental costs
 A good UX design allows for better user engagement
 UX design increases sales and profits
 You enjoy increased productivity
 A good UX design sets you apart from your competition

Difference between UX and UI
7

Difference between UX and UI –
IRCTC app
8
1. UI (User Interface) Design
UI design focuses on the visual elements and the interactivity of the website,
which include:
Layout: How different elements like buttons, menus, and forms are arranged
on the screen.
Color Scheme: The choice of colors used throughout the website.
Typography: The fonts and text sizes used.
Icons and Imagery: The use of icons, images, and other visual cues to
enhance the interface.

IRCTC app
9
Example from IRCTC Website:
Color Scheme:
The IRCTC website typically uses a combination of blue and white, with
various shades of blue for different sections. The visual contrast in the
color scheme is part of the UI design.
Buttons and Forms:
The "Login" and "Book Ticket" buttons are prominently displayed in
specific colors to catch the user's attention. The placement, size, and
style of these buttons are part of UI design decisions.
Navigation Bar:
The layout and appearance of the navigation bar, including icons for
features like "Plan My Travel," is part of the UI.

IRCTC app
10
2. UX (User Experience) Design
UX design focuses on the overall experience a user has while interacting
with the website. It encompasses:
Ease of Use: How intuitive and straightforward the website is to use.
Navigation Flow: How users move from one section to another, and
how easily they can complete tasks like booking a ticket.
User Satisfaction: The level of satisfaction users feel after completing
their intended actions on the site.
Error Prevention and Recovery: How well the website prevents users
from making mistakes, and how easy it is to recover if they do.

IRCTC app
11
Example from IRCTC Website:
Booking Flow:
UX design would address how easy or difficult it is for a user to search
for trains, select dates, and book tickets. If the flow is cumbersome, it
impacts the user experience negatively.
Mobile Responsiveness:
Ensuring that the site works seamlessly across devices, including mobile
phones, improves the UX. For example, making sure that users can
book tickets on a smartphone without any hiccups is a key UX
consideration.
Error Handling:
If a user enters incorrect information (e.g., wrong train number), the UX
design ensures that appropriate error messages are shown, guiding the
user to correct their mistake without frustration.

IRCTC app
12
Key Differences:
 UI focuses on the look and feel of the IRCTC website, such as the visual
layout, button design, and typography.
 UX focuses on the user's journey through the website, how easily they can
accomplish their goals (e.g., booking tickets), and their overall satisfaction
with the interaction.
 Both UI and UX are crucial for the IRCTC website. An appealing UI can
attract users, but a smooth and intuitive UX will keep them satisfied and
ensure they return.
 For example, if the site looks visually good but is difficult to navigate, users
will have a poor experience despite the attractive design. Conversely, a well-
structured UX without an aesthetically pleasing UI might feel outdated or
unprofessional, affecting the user's trust in the site.

UI/UX Design - Tools
13
1. Design and Prototyping Tools
These tools help in creating user interfaces, designing layouts, and prototyping
interactions:
Figma: A cloud-based design tool that allows for real-time collaboration. It’s
excellent for creating UI designs, wireframes, and interactive prototypes.
Adobe XD: Adobe's tool for UI/UX design. It offers vector-based design and
prototyping, and integrates well with other Adobe products.
Sketch: A macOS design tool popular for creating UI elements and wireframes.
It’s widely used for designing web and mobile applications.
InVision Studio: A design tool focused on rapid prototyping, animation, and
design collaboration.
Axure RP: A tool for advanced prototyping that allows for detailed interactions
and condition-based logic, ideal for complex web and mobile apps.

14
2. Wireframing Tools
These tools are used to create low-fidelity wireframes that map out the
basic structure and flow of a design:
Balsamiq: A simple and easy-to-use wireframing tool that helps in
creating quick, low-fidelity wireframes.
Moqups: A web-based tool for creating wireframes, mockups, and
prototypes.
Whimsical: A visual workspace for creating wireframes, flowcharts, and
mind maps.

15
3. User Testing and Feedback Tools
These tools are used for gathering feedback and testing the usability of
your designs:
UserTesting: A platform for getting video feedback from real users as they
interact with your prototypes or live products.
Lookback: A tool for conducting live user research sessions, recording
user interactions, and analyzing feedback.
Hotjar: A tool that offers heatmaps, session recordings, and surveys to
understand how users interact with your website or app.
Maze: A rapid testing platform for prototypes that provides actionable
insights from user tests and analytics.

Compare : UI/UX
Parame
ter
User Interface User Experience
Focus Primarily concerned with the
visual and interactive
elements of a product. It deals
with the look, feel, and
presentation of the user
interface.
Concerned with the overall
user experience,
encompassing the entire
journey a user has with a
product or service. It includes
aspects beyond the visual,
such as usability,
accessibility, and user
satisfaction.
Design Involves designing specific
elements like buttons, icons,
color schemes, typography,
and other visual elements that
users interact with directly.
Encompasses the entire user
journey, from the initial
awareness of a product to the
actual use and post-use
experience

Compare : UI/UX
Paramet
er
User Interface User Experience
Goal Aims to create an
aesthetically pleasing and
visually consistent interface.
Focuses on ensuring that the
interface is visually
appealing, easy to understand,
and effectively communicates
information.
Aims to create a seamless,
efficient, and enjoyable
experience for users.
Focuses on understanding
user behaviors, motivations,
and pain points to design
solutions that meet user
needs.
Tools Uses tools like graphic
design software (e.g., Adobe
XD, Sketch) to create visual
assets and design interfaces.
Uses a variety of tools,
including wireframing and
prototyping tools (e.g.,
Axure, Balsamiq), analytics
tools, and user testing
platforms

UI – Real time example
Imagine a social media platform like Instagram undergoing a redesign to
enhance user experience. The design team focuses on improving the visual
appeal and interactivity of the app's interface. They may consider:
They might introduce new color schemes, typography, icons, and graphic
elements to create a more modern and aesthetically pleasing appearance
For instance, they might introduce swipe gestures for easier navigation
between posts or implement interactive stickers and filters for stories.

UX – Real Time Experience
Let's consider the user experience (UX) design for a ride-sharing service
like Uber or Lyft
 For example, the app should have a simple and clear interface that allows
users to quickly request a ride, track their driver, and make payments
without confusion
 Accessibility ensures that the ride-sharing service is usable by individuals
with disabilities or special needs
 The UX design team at Uber might conduct user research to understand
the needs and pain points of both riders and drivers

Designing a Coffee Mug
1. User-Centered Design:
Identify the target users (coffee drinkers).
Consider their needs and preferences regarding a coffee mug.
2. Usability:
 Design a mug that is easy to hold and drink from.
 Ensure the handle is comfortable, and the lip of the mug
allows for easy sipping.
3.Information Architecture:
 Ensure the size and shape of the mug accommodate a
typical serving size of coffee.
 Markings on the inside could indicate different volume
levels.

4. Visual Design:
 Use a visually appealing design with a color and pattern
that resonates with coffee lovers.
 Ensure any text or markings on the mug are clear and
easy to read.
5. Interaction Design:
 Make sure the mug is easy to open and close (if it has a
lid).
 Consider the tactile experience of holding and using the
mug.
6. Accessibility:
 Design the mug so that it can be comfortably used by
people of different ages and abilities.
 Avoid complex features that might be difficult for
certain users.

7. Emotional Design:
 Create a mug that evokes positive emotions related to
the coffee-drinking experience.
 Consider the aesthetics and how it makes users feel
while enjoying their coffee.
8. Prototyping and User Testing:
 Develop prototypes of the mug and gather feedback
from potential users.
 Iterate on the design based on user feedback to improve
the overall experience.

In this example, the UX design process involves thinking
about the coffee mug not just as a functional container but as
a part of the overall experience of enjoying coffee. By
considering the user's needs, preferences, and emotions,
the designer can create a coffee mug that provides a delightful
and satisfying experience for the user.
Weblink:
https://www.youtube.com/watch?v=fBz_DLDPkSw

�ݺ�ߣ

Topic 1 Overview of UI UX Design.ppt this

Recommended

More Related Content

Similar to Topic 1 Overview of UI UX Design.ppt this (20)

Recently uploaded (20)

Topic 1 Overview of UI UX Design.ppt this