UI/UX Tool Kit

Course Code: 22CSE461

Need for Design and UX Design
What is UI (User Interface)
● UI (User Interface)
○ User Interface (UI): The visual and interactive elements that
users interact with in a software application.
●
UI Snapshot for NHCE
User Experience
● UX (User Experience).
○ User Experience (UX): The overall experience a user has while
interacting with a product or system.
○ overall experience that a user has when interacting with a product
or service Involves user’s perceptions, emotions, and attitudes
toward the product or service
User Experience
Why does UI/UX Matters?
● Impact on usability, effectiveness, and user satisfaction.
● Role in creating successful software products.
● Attract more customers
● Increase sale/business
● Give good experience to users
● User Satisfaction
What is the difference between UI and UX?

UI UX

UI is more design oriented and UX is the experience a user has

inclines towards the look and feel of with a product or service or during
the product. the journey of landing in a website
The aim is to create an intuitive to the end action taken by the user.
platform with interactive elements like It is a more holistic term, which
icons, buttons, typography, color includes how a person feels about a
scheme, imagery, etc… product and the actions that are
triggered due to the experience. It is
all about the emotions that are
provoked when interacting with a
digital product.
What is UI/UX Design
● Design Involves visually appealing products
● Important in product development process
● Significant impact on how users perceive and interact with a product or
service
● Works well in agile design process

● It is the process of designing and optimizing the interaction between

users and a product or service
Well Designed UX Benefits
For users:
● A good UX will provide a seamless experience that creates both
physical and psychological satisfaction for end users
For businesses:
● Create a positive experience for users.
● reduce churn rate(number of users stops using product or service)
● A well-designed UX can also help businesses save costs in the
long run by reducing the need for product redesign (UI/UX Audit)
costs or customer support costs due to poor UX
What is UI Design
● UI (User Interface) involves the visual and interactive elements, example
buttons, menus, icons, typography, and color schemes

● UI design is the process of designing the visual and interactive elements on the
interface of a product or service that users interact with when using a digital
product or service. The goal of UI design is to create an interface that is visually
appealing, intuitive, and easy to use.
Benefits of Well Designed UI

For Users:
● Helps experience with the product or service more enjoyable

For businesses
● With well designed UI, businesses can strengthen their brand and build
a loyal customer base, which can ultimately support long-term growth
and success.
User-centered Design

● Understanding Users
○ Conducting user research (interviews, surveys, etc.).
○ Defining user personas(types).
● Usability Testing
○ Importance of testing with real users.
○ Iterative design based on feedback.
UI Design Guidelines

● Navigating the interface

● Organizing Display
● Getting user attention
● Facilitating Data Entry
UI Progression
UI Design Principles
1. Determine user skill levels:Understand intended users (profiles with age,
gender,education etc)
a. Novice users(first time users) e.g. users sending email first time
b. Intermittent users: e.g. corporate managers using word processor to
create template for travel reimbursement
c. Expert Frequent users:Familiar with task and interface concepts and
wants to rapidly finish their work
2. Identify the task
a. Frequent action
b. Less frequent action
c. Complex actions
The Four Pillars of interface Design
The Four Pillars of interface Design Cont…
User Interface Requirement
● Performance Requirements
○ Update user profiles on website
○ System should permit ATM customer to make selection in 1 secs
○ Save draft messages , emails
● Functional Requirements
○ Debit card PIN should match
○ Some data should be shown on web page based on role
○ Data should auto populate based on user choices
● Interface Requirements
○ Whatapp should have messages editable
○ Whatapp messages can be forwarded
○ Mobiles should permit downloading ringtones
The Four Pillars of interface Design Cont…

Guidelines , Documents and Process

● Set of working guidelines (graphics, screen layout,training, tutorials etc)
User Interface Software tools
● Tools to understand or and create draft version to show how system will look
like

Expert Reviews and Usability Testing

● Pilot test for software components(User Acceptance Testing where a small
group of users or stakeholders are selected to test the application in a real-
world setting.)
Key Concepts in UI/UX Design

● Visual Design Principles

○ Typography, color theory, and readability.
○ Creating visually appealing interfaces.
● Responsive Web Design (RWD)
○ Adapting layouts for different devices (desktop, tablet, mobile).
○ Fluid grids and flexible images.
● Progressive Web Development (PWD)
○ Enhancing web experiences progressively.
○ Offline capabilities, push notifications, and performance
optimization
 Examples Of well Designed UI
● Google Search Landing Page
○ Neat, clean, minimal contents as per user needs
○ Search bar prominently placed
○ Page adapt seamlessly to different screen size and
devices
○ Straightforward interface for quick search
Well Designed UI: Google Search Landing Page
Examples Of Poor UI(lack of user-centered design)
Examples Of Poor UI(lack of user-centered design)
Examples Of Poor UI(lack of user-centered design)