UI and UX

Day - 1

Geoffrey George Varghese

AP-I CSE
 UI and UX

Understanding UI and UX – Pain Points Designing UI

- Design Thinking Frame Work - Empathy Mapping
What is UI
• UI stands for User Interface. It is the bridge between humans and
computers. Anything interact with as a user is part of the user
interface. For example, screens, sounds, overall style, and
responsiveness are all elements that need to be considered in UI.

• User Interface is the means or medium of the user's

interaction with a software application , website or any
device such as smartphone , laptops etc…
 Components of UI
• Input controls: On-page elements that enable users to input information are input
controls. Buttons, checkboxes, and text fields are all examples of input controls.

• Navigational elements: Navigational elements help users navigate an interface. Examples

of navigational elements in UI include slide bars, search fields, and back arrows

• Informational components: Informational components are used to communicate

information to the user. A progress bar beneath a video or tutorial is an example of an
informational component.

• Containers: Containers organise content into easily digestible sections. Rather than listing
every subheading underneath a tab, a container element like an accordion menu may be
used to hide or show content.
 Types of UI

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

representations on digital control panels. A computer’s desktop is a GUI.

• Voice-controlled interfaces (VUIs): Users interact with these through

their voices. Most smart assistants, E.g., Siri on iPhone and Alexa on
Amazon devices—are VUIs.

• Gesture-based interfaces: Users engage with 3D design spaces

through bodily motions—e.g., in virtual reality (VR) games.
 Types of UI
• Touch user interface: Touch input is used by most
smartphones, tablets, and other devices with touch screens.

• Form Based Interface: Form-based user interfaces provide a

small number of options for users to choose from when entering
data into a program or application. For instance, a device’s
settings menu is form-based.
History of UI
• Punch cards and keypunch machines were used as
primary method for inputting computer. User Interfaces
involves button and operator console.

• Then command lines were used for user interface

through keyboard and mouse.

• Then GUI were introduced by Microsoft and apple .

Graphical User Interface
Voice Control Interface
Gesture Control
Form Based Interface
Touch User Interface
What is UX
• UX (User Experience) is how a person feels while
interacting with a product, like a website, app, or
software. It focuses on creating a smooth, easy, and
enjoyable experience by understanding what users
need, want, and expect.
• UX is about more than just how something looks—it's
about how it works:
• Is the app easy to navigate?
• Can users find what they’re looking for quickly?
• Does the product solve their problems effectively?
For Designing the UI
• Designing must be attractive
• Satisfaction to users
• Design should be simple
• Design should match target of the audience
• Provide responsive design for various devices.
• Make it accessible for all users.
 Difference between UI and UX
UI UX
UI stands for User Interface . It refers to UX stands for User experience . It relates to
touchpoints (screens, buttons, toggles, how a user feels whenever they interact
icons and other visual elements ) a person with a product or service
uses to interact with a digital product,
website, app or electronic device
UI refers to creation and design of the UX design is the product design teams
elements that a user will interact with when uses to create products that provide
using a website or service meaningful and relevant experiences to the
users
UI is about the visual part like colour , UX is more about structural like how things
schemes , navigational , elements , button work
styles
UI goal is to make products more usable , UX goal is to delight the users with a
aesthetically appealing and optimized for product that is efficient and easy to use
different screen sizes
UI Design is like designing a room — UX Design is about how you move
picking the wall color, furniture, and through the room — making sure
What is Design Thinking
• Design thinking is a methodology that provides a
solution-based approach to solving problems. It is an
iterative process used to understand users, challenge
assumptions, redefine problems, and create innovative
solutions through prototyping and testing.

• In UX design, design thinking helps generate design

ideas and address changes in users' environments and
behaviors effectively. It offers a structured way to fix
problems while focusing on user-centric solutions.
5 - Stages of Design Thinking
• Empathize:
• Understand the users, their needs, and the challenges they face through research, observations, and
interviews.
• Focus on gathering insights about the user's experiences, emotions, and motivations.

• Define:
• Clearly articulate the problem to be solved by synthesizing the findings from the empathize phase.
• Create a problem statement that reflects the users' needs and the challenges to address.

• Ideate
• Generate a wide range of ideas and solutions without limitations, encouraging creativity and brainstorming
• Use techniques like mind mapping, sketching, and brainstorming to explore possible solutions.

• Prototype
• Develop low-cost, tangible representations of the ideas to test and explore how they might work.
• Prototypes can range from sketches to working models and help visualize the solutions.

• Test
• Evaluate prototypes by gathering feedback from users and stakeholders.
• Refine and improve the solutions based on testing, and repeat earlier phases as needed to iterate and perfect
the design.
( Why Design Thinking ) or
( Important of Design Thinking )
• User-Centric Approach: Design Thinking prioritizes understanding user needs, motivations, and pain
points to create solutions that effectively address their problems, resulting in more engaging user
experiences.

• Design Innovation: Encouraging creative problem-solving and unconventional ideas, Design Thinking
helps UX designers develop innovative solutions that stand out in a competitive market.

• Iterative Experimentation: The iterative process enables rapid prototyping and user testing,
allowing early identification of issues and refinement of solutions, saving time and resources.

• Collaboration: By fostering cross-disciplinary collaboration, Design Thinking integrates diverse

perspectives to address multiple aspects of the user experience effectively

• Solving Complex Problems: Design Thinking equips UX designers with tools to tackle complex,
interconnected challenges, leading to innovative solutions that meet user needs and address design
complexities
UX Designer Points to Remember
• 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,
• The What addresses the things people can do with a
product—its functionality.
• the How relates to the design of functionality in an
accessible and aesthetically pleasant way.
 UX Designer is a User-Centred
Designer

• User-centered design is an iterative

process where you take an
understanding of the users and 2
their context as a starting point for
all design and development.
4

• A UX designer’s typical tasks vary

but often include user research,
creating personas, designing
wireframes and interactive 3
prototypes, and testing designs.
Empathy Mapping
• As UX professionals, it is our job to advocate on behalf
of the user. However, to do it, not only must we
deeply understand our users, but we must also help
our colleagues understand them and prioritize their
needs.
• An empathy map is a collaborative visualization used
to articulate what we know about a particular type of
user.
• It externalizes knowledge about users in order to
1) create a shared understanding of user needs,
2) aid in decision making.
What is Empathy mapping
• Empathy Mapping is a tool used in the design process to
understand and visualize a user’s thoughts, emotions,
and behaviors. It helps designers develop a deeper
connection with users and create user-centered
solutions.

• Why Use Empathy Mapping?

• To better understand the user’s experiences and needs.
• To uncover insights that guide the design process.
• To identify pain points and opportunities for improvement.
• To align the team with a shared understanding of the user.
Structure of an Empathy Map
1.Says:
What the user says during interviews or feedback sessions.
Example: "This app is confusing to navigate.“

2.Thinks:
What the user might be thinking but not necessarily saying out
loud.
Example: "I’m not sure if I trust this website with my payment
details.“

3.Does:
The actions the user takes when interacting with a product or
service.
Example: Searching for help online or asking a friend for
advice.

4.Feels:
The emotions the user experiences during their interaction.
Example: Frustration due to slow loading times or happiness
when completing a task easily.
Steps for creating empathy map
1.Gather Data:
Conduct user interviews, surveys, or observations.

2.Define the User:

Focus on one type of user (persona) to keep the map specific.

3.Fill Out the Map:

Use insights from your research to complete the four quadrants (Says, Thinks, Does, Feels).

4.Identify Patterns:
Look for common themes, frustrations, or unmet needs.

5.Use the Map for Design Decisions:

Refer to the empathy map throughout the design process to ensure user needs are at the
center.
Example of Empathy Mapping
(Buying a TV)
Pain Points
• In the context of UI (User Interface) design, pain
points refer to the specific problems or frustrations
users encounter while interacting with a product's
interface.

• These pain points are barriers that hinder a seamless

and enjoyable user experience, often leading to
dissatisfaction or abandonment of the product.
Common Pain Points in UI Design
• Complex Navigation:

• Users struggle to find what they need due to unclear or overly complicated menus and navigation paths.
• Example: A website with nested menus and no clear breadcrumbs, making it hard to return to a previous page.

• Poor Responsiveness:

• The interface doesn't adapt well to different screen sizes, such as mobile phones or tablets.
• Example: Buttons and text that are too small to interact with on a mobile device

• Cluttered Layout:

• An interface with too much information, too many elements, or poorly organized content overwhelms users.
• Example: A homepage overloaded with text, images, and buttons without a clear focal point.

• Slow Load Times:

• Users lose patience with slow-loading pages, especially on mobile devices.

• Example: An app that takes too long to load images or process actions.

• Inconsistent Design:

• A lack of uniformity in colors, typography, or button styles confuses users and makes the product look unprofessional.
• Example: Using different fonts and button styles on every page of a website.
Common Pain Points in UI Design
• Unclear Call-to-Actions (CTAs):
• Buttons or links that don't communicate their purpose or are hard to find.
• Example: A "Submit" button that is hidden or labeled ambiguously, like "Finish.“

• Lack of Feedback:
• Users are unsure if their actions have been registered because the interface provides no confirmation or feedback.
• Example: Clicking a button and not seeing a loading spinner or confirmation message.

• Accessibility Barriers:
• The interface is not designed for users with disabilities, such as those requiring screen readers or alternative input
methods.
• Example: Text with insufficient color contrast or no keyboard navigation options.

• Too Many Steps:

• Completing a task requires unnecessary clicks or inputs.
• Example: A checkout process that asks for irrelevant details, increasing cart abandonment rates.

• Poor Error Handling:

• When errors occur, the interface doesn’t guide the user on how to fix the issue.
• Example: A form that shows "Error" without explaining which field needs correction.
 How to Identify Pain Points in
UI:
1.User Testing:
Observe users interacting with the interface to pinpoint areas of confusion or frustration.

2.Feedback Collection:
Use surveys, interviews, or reviews to gather direct insights from users about their
struggles.

3.Analytics Data:
Analyze user behavior metrics, like high bounce rates, low engagement, or frequent
drop-offs.

4.Session Recordings:
Record and replay user sessions to see where they hesitate, backtrack, or abandon
tasks.

5.Customer Support Logs:

Review user complaints or issues reported to identify recurring problems.
 How to Address Pain Points in
UI:
1. Simplify Navigation:
Use intuitive menus, clear labels, and logical hierarchy to make navigation seamless.

2. Design for Responsiveness:

Ensure the UI adapts to various screen sizes with touch-friendly elements.

3. Declutter the Interface:

Remove unnecessary elements and prioritize the most important features or content.

4. Optimize Performance:
Reduce load times by optimizing images, using faster servers, and implementing efficient code.

5. Ensure Consistency:
Use a design system to standardize elements like buttons, fonts, and colors.

6. Improve Accessibility:
Follow accessibility guidelines (e.g., WCAG) to make the UI inclusive for all users.

7. Provide Clear CTAs:

Use actionable and descriptive labels for buttons and links (e.g., "Buy Now" instead of "Submit").

8. Offer Feedback and Error Messages:

Provide visual or auditory cues for actions and clear error messages with solutions.
Pain Points Example
• Example: Addressing Pain Points in UI Design
• Pain Point: A user struggles to complete an online form because
it’s too long and confusing.
• Solution: Break the form into smaller steps, highlight required
fields, and provide inline error messages like "Please enter a valid
email address."