Session 20,21

Understanding UX and UI

11/24/2024 1
 What is UI and UX?
• UI stands for User Interface. It's the visual and interactive elements that a user sees and interacts
with when using a product. The main goal of UI is to catch and grab user attention by making the
user interface look more pleasing and aesthetic.
• UX stands for User Experience. It encompasses the overall experience a person has when
interacting with a product, system, or service. This includes everything from initial impressions to
how easy it is to use, and the overall satisfaction derived from the interaction. In simpler terms,
UX is about how a user feels when interacting with something. It's about making that interaction
as smooth, enjoyable, and fulfilling as possible.

11/24/2024 2
 Key components of UI include:

•Layout: How elements are arranged on the screen

•Colors: The color scheme used
•Typography: Fonts and text styles used for readability
•Images and graphics: Visual elements that convey information
•Icons: Small images representing actions
•Buttons: Interactive elements that trigger actions
•Navigation menus: How users move through the app

11/24/2024 3
 Key elements of UX:

•Usability: How easy and efficient is it for users to achieve their goals?
•Accessibility: Can users with disabilities use the product effectively?
•Utility: Does the product fulfill the user's needs and goals?
•Desirability: Does the product meet users' needs and wants?
•Findability: Can users easily find what they are looking for?
•Credibility: Is the product trustworthy and reliable?
•Value: Does the product provide real value to the user?

11/24/2024 4
 Relationship between UI and UX
• While UI and UX are often used interchangeably, they are distinct concepts.
• UI is a subset of UX. A good UI contributes to a positive UX, but it's not the sole determinant.
• UI focuses on the look and feel, while UX focuses on the overall experience.
• UI is about aesthetics and usability, while UX is about meeting user needs and goals.

11/24/2024 5
 Importance of UI Design
User Interface (UI) design plays an important role in the success of a website or a digital product for
the following reasons:
• User Experience: A well designed UI can make customers to navigate easily and complete their
tasks which leads to positive user experience.
• Engagement: A good UI can make users stay on the platform or make them visit more often.
• Branding: UI communicates the product’s personality and features to the users, so visually
appealing UI can make brands recognizable by the users.
• Efficiency: A well designed UI can reduce time and efforts which increases user efficiency which
leads to user satisfaction.

11/24/2024 6
 Importance of UX Design
• UX is paramount in app development for several reasons:
• User Satisfaction: A great UX leads to happy users who are more likely to recommend the app to
others.
• Increased Engagement: A well-designed app keeps users coming back for more.
• Higher Conversion Rates: A positive UX can lead to increased sales or desired actions within the
app.
• Reduced Costs: By identifying and addressing usability issues early in the development process,
you can save time and money on costly redesigns and bug fixes also the need for customer
support.
• Competitive Advantage: A superior UX can set your app apart from competitors.
• Strong Brand Reputation: A well-crafted UX contributes to a positive brand image and fosters
loyalty among users.

11/24/2024 7
 The Design Thinking Process

• Design Thinking is a human-centered approach to problem-solving that emphasizes

understanding user needs, generating creative solutions, and testing them iteratively. It involves
five distinct phases: Empathize, Define, Ideate, Prototype, and Test.

11/24/2024 8
 Empathize

•Identify a user: Choose a specific user or user group.

•Understand your user: What are their needs, pain points, and desires?
•Gather insights: Conduct interviews, surveys, or observations to understand user behavior and
perspectives.
•Build empathy maps: Visualize user needs, thoughts, feelings, and actions.

11/24/2024 9
 Define

•Identify the problem: Clearly articulate the problem based on the insights gathered during the
empathize phase.
•Create a problem statement: Use a clear and concise problem statement that focuses on the
user and their needs.
•Develop a point of view: Summarize the problem and potential solutions.

11/24/2024 10
 Ideate

•Generate ideas: Brainstorm a wide range of potential solutions to the problem.

•Encourage creativity: Think outside the box and explore unconventional ideas.
•Quantity over quality: Focus on generating as many ideas as possible.
•Build on each other's ideas: Encourage collaboration and combine ideas.

11/24/2024 11
 Prototype

•Choose an idea: Select one or two promising ideas to develop further.

•Create a tangible representation: Build a low-fidelity prototype of your idea.
•Visualize the solution: Use sketches, storyboards, or digital tools to bring your idea to life.
•Keep it simple: Focus on capturing the core concept.
•Iterate quickly: Be prepared to modify and refine your prototype based on feedback.

11/24/2024 12
 Test

•Gather feedback: Test your prototype with users to get their reactions.
•Observe user behavior: Watch how users interact with your prototype.
•Learn and iterate: Use feedback to improve your solution.

11/24/2024 13
What Do UI/UX Designers Do?
Focus UI UX

User Research -- ✅

Wireframe & Prototype -- ✅

Visual Design ✅ --
Layout Design ✅ --
Creative Mindset ✅ ✅

Team Experience ✅ ✅

Collaboration with Developers ✅ ✅

Tools HTML, CSS, JS Sketch, Figma, etc

11/24/2024 14
UX Design Principles

11/24/2024 15
 User-centricity
• User-centric design prioritizes the user's needs and experiences throughout the design process.
This involves understanding users, gathering feedback, and making design decisions based on
their input to create products that are truly useful and enjoyable.

11/24/2024 16
 Consistency
• Consistency in UX design ensures a seamless user experience. By maintaining visual and
functional consistency across different pages and products, designers can reduce user confusion
and learning curves. This principle also involves aligning designs with user expectations based on
similar products in the market.

11/24/2024 17
 Hierarchy
• Hierarchy in UX design is about guiding users through information. It involves organizing content
and visual elements in a way that clearly indicates importance and helps users navigate efficiently.
This includes both the overall structure of a product (information architecture) and the visual
arrangement of elements on a page.

11/24/2024 18
 Context
• Context in UX design means considering the environment in which users will interact with a
product. This includes factors like location, device, time, and emotional state. Understanding the
context helps designers create products that are relevant, usable, and enjoyable in real-world
situations.

11/24/2024 19
 User control
• User control in UX design empowers users to navigate and interact with a product freely. This
includes providing options to undo, redo, or cancel actions, as well as clear navigation paths. By
giving users control, designers can reduce frustration and enhance the overall user experience.

11/24/2024 20
 Accessibility
• Accessibility in UX design means creating products usable by everyone, regardless of abilities.
This involves considering factors like visual impairments, motor skills, and cognitive limitations. By
designing inclusively, you ensure a better user experience for all and comply with accessibility
regulations.

11/24/2024 21
 Usability
• Usability is the cornerstone of good UX design. It ensures a product is easy to learn, efficient to
use, memorable, and error-tolerant. Prioritizing usability over aesthetics is crucial for creating a
positive user experience. Regular usability testing is essential to identify and address potential
issues throughout the design process.

11/24/2024 22
UI Design Principles

11/24/2024 23
 Simplicity
• Simplicity is a key UI design principle that emphasizes clarity and ease of use. By removing
unnecessary elements and focusing on essential features, designers can create interfaces that are
intuitive and efficient. This approach improves user experience and reduces cognitive load.

11/24/2024 24
 Provide informative feedback
• Feedback in UI design is essential for a positive user experience. By providing clear and timely
information about the results of user actions, designers can enhance understanding, build trust,
and encourage continued engagement. Effective feedback can range from subtle visual cues to
detailed progress indicators, depending on the complexity of the action.

11/24/2024 25
 Mistakes tolerance
• Users make mistakes, and it's essential to provide clear and easy ways to recover from them.
Implementing undo/redo functions and allowing users to backtrack steps significantly reduces
frustration and enhances the overall user experience. This approach encourages exploration and
experimentation, as users feel confident in their ability to correct errors without negative
consequences.

11/24/2024 26
 Easy navigation
• Effective navigation involves providing clear and consistent paths for users to explore an interface,
catering to both novice and expert users. By offering shortcuts for experienced users and clear
signposting for everyone, designers can create a seamless and enjoyable user journey.

11/24/2024 27
 Flexibility and efficiency
• Flexibility and efficiency are key principles in UI design, ensuring that products cater to a wide
range of users, from novices to experts. By offering multiple interaction methods and providing
shortcuts for experienced users, designers can create interfaces that are both easy to learn and
highly efficient.

11/24/2024 28
User Research Methodologies

11/24/2024 29
 Interviews
• Interviews are one-on-one conversations with users to gain in-depth insights into their thoughts,
feelings, and behaviors.
• Develop a structured interview guide
• Active listening and probing questions
• Create a comfortable atmosphere
• Analyze and synthesize data

11/24/2024 30
 Surveys
• Surveys are questionnaires used to collect quantitative data from a large number of participants
to identify trends and patterns and measure user satisfaction.
• The questions should be closed-ended (multiple choice, Likert scale) or open-ended (short
answer, essay)

11/24/2024 31
 Usability testing
• Usability testing involves observing users as they interact with a product to identify usability
issues.
• Conducting Usability Tests:
• Recruit representative users
• Create test scenarios and tasks
• Observe user behavior and collect feedback
• Analyze findings and iterate designs

11/24/2024 32
User Interface Design Elements

11/24/2024 33
 Core UI Elements

•Input elements: Allow users to enter data (text fields, buttons, checkboxes, radio buttons, dropdowns, sliders).
•Output elements: Display information to the user (text, images, icons, progress bars, notifications).
•Navigational elements: Guide users through the interface (menus, tabs, breadcrumbs, search bars).
•Interactive elements: Enable user interaction (buttons, links, toggles).
•Informational elements: Provide context and support (tooltips, help text, error messages).

11/24/2024 34
 Visual Design Elements
•Typography: The choice and use of fonts to enhance readability and visual hierarchy.
•Color: The use of color to create mood, hierarchy, and visual interest.
•Imagery: The incorporation of images and graphics to convey information and enhance aesthetics.
•Layout: The arrangement of elements on the screen to create a visually pleasing and functional interface.
•Spacing: The use of white space to improve readability and visual hierarchy.

11/24/2024 35
 Design Tools
• Design Tools are software applications that help you create a design. These tools help you create
wireframes, mockups, prototypes, and other design deliverables. They also help you collaborate
with your team and clients.
Title Description Link Free
Figma Figma is a vector graphics editor and prototyping tool which is primarily web-based. Visit Yes
Adobe XD is a vector-based user experience design tool for web apps and mobile
Adobe XD Visit Yes
apps, developed and published by Adobe Inc.
Sketch Sketch is a vector graphics editor and prototyping tool which is primarily web-based. Visit No
InVision is a digital product design platform used for creating prototypes, managing
InVision Visit Yes
user feedback, and designing and building user interfaces.
ProtoPie ProtoPie is a prototyping tool for mobile apps. Visit Yes
Marvel Marvel is a prototyping tool for mobile apps. Visit Yes
Principle Principle is a prototyping tool for mobile apps. Visit Yes
Framer Framer is a prototyping tool for mobile apps. Visit Yes
Adobe Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc.
Visit No
Photoshop for macOS and Windows.

11/24/2024 36
Hands-on practice

11/24/2024 37