PART-B

DESIGN THINKING (2025-26)

UNIT 5 : FUNDAMENTALS OF INTERFACE DESIGN

TOPICS TO COVER
1. Defining Interface Design
2. Understanding User Interface and Its Different Types
3. Understanding Ergonomics
4. Understanding User Center Design
5. Product Interface Design
6. Developing Visual Icons for Graphical User Interface
7. Developing An Interface in the Digital Space
8. Real Life applications & Activity

OBJECTIVE: Learning to create interface design more effectively, to make

students realize how a conscious design can help ease decision making
process for the users. to learn to explore ideas of user experience relating to
digital products and user centered design.

OUTCOME: Students understand while doing the activity about interface

design process, importance of creating interface design more user centered.

NOTES
Definition of interface design: A user interface (UI) is the point of interaction
between a user and a computer system, such as a website, application, or
device. It includes everything that users interact with on a digital platform,
such as buttons, icons, menus, text, and images. The goal of UI design is to
create an intuitive, easy-to-navigate system that enhances user experience
(UX) and drives engagement. A good user interface ensures that
interactions are simple and efficient, significantly improving user
experience.

Page 1 of 8
Types Of User Interfaces
1)Product User Interfaces: A product interface is the point of interaction
between a user and a product, whether physical or digital, allowing the user
to control and operate it. This includes visual elements like buttons and
menus, as well as voice commands. For example, the buttons on a microwave
or the screen on a mobile app are both product interfaces.
2)Command Line Interfaces (CLI): The CLI is a text-based interface where
users enter commands via a terminal or console to interact with the system.
CLIs are typically used by developers or IT professionals because they
provide more control over system operations.
3)Graphic User Interface (GUI): A Graphical User Interface (GUI) is a visual
interface that uses icons, buttons, and other graphical elements to allow users
to interact with the system. The GUI is the most common form of UI design
today, found in desktop applications, mobile apps, and websites.
4)Voice Controlled User Interface (VUI): VUI allows users to interact with
a system using voice commands, making it a hands-free and often more
accessible way to control devices for example Amazon’s Alexa, Google
Assistant, and Apple’s Siri. Advantage of having Hands-Free Interactions as
Users can issue commands or ask questions verbally such as in cars or
kitchens.
5)Gesture Based User Interface: A gesture-based UI allows users to interact
with devices using physical movements like swipes, pinches, or hand
gestures, which are interpreted as commands. This type of interface can be
touchless, using sensors and cameras to track movements in mid-air, or it can
be touch-based, with multi-touch gestures on a screen. Popular examples
include swiping scrolling on a smartphone or using hand motions to control
a video player, training simulations, medical industries etc.

PRINCIPLES OF QUALITY UI DESIGN

Creating a quality UI design is all about putting the user first. This user-
centered design approach prioritizes the needs and goals of the user.
Here are some principles which can be followed for quality UI design:
1)Consistency: Consistency is a cornerstone of effective UI design. This
means maintaining a uniform layout, typography, and color scheme
throughout the interface. Such consistency not only enhances the visual
appeal but also helps users feel more comfortable and familiar with the
system.

Page 2 of 8
2)Simplicity: ensuring that the interface is intuitive and easy to use. A
seamless user experience is the ultimate goal, making it essential to design
interfaces that users can navigate effortlessly.
3)Visual hierarchy: Visual hierarchy is another critical aspect. A well-
designed UI should have a clear hierarchy of information, guiding the user’s
eye to the most important elements first. Effective use of white space can
make the interface look clean and uncluttered, further enhancing usability.
4)Flexibility and adaptability: Flexibility and adaptability are also crucial.
A good UI design should accommodate different user needs and goals,
providing a personalized experience. This includes designing various devices
and screen sizes, ensuring that the interface works seamlessly across all
platforms.
5)Accessibility: Accessibility is a non-negotiable aspect of UI design. The
interface should be usable by people with disabilities, incorporating features
like screen reader compatibility, high contrast modes, and keyboard
navigation.
6)Feedback: feedback on their interactions, whether it’s a confirmation
message, an error alert, or a loading indicator helps users understand the
system’s responses to their actions, reducing confusion and frustration.

Phases of Interaction Design

Interaction Design passes through following phases:

Set design goals : The first step in the UI design process is to define the
goals your team aims to achieve. Design solves problems, so understanding
the problem is crucial before providing a solution. Design teams rely on
design briefs—a document outlining all essential components of the design
project. The design brief serves as the project's backbone and a
communication tool between the customer and designer, offering insights
into user needs and the type of design that will fulfill those needs.
Conduct market research: Understanding the market and your competitors
is key to designing a standout UI. By analyzing competitors' UI designs, you
can see what works well, identify gaps, and find ways to make your

Page 3 of 8
interface unique. This helps you create designs that not only look good but
also meet user needs effectively.
Prototype the design: With screen layouts defined, the team begins design
work through sketches. Paper sketches, whiteboard flows, and wireframes
help share design ideas with stakeholders early in the process, facilitating
feedback and multiple iterations. The objective is to create a usable design
that achieves user satisfaction.
Wireframes: Wireframing involves creating a skeleton of the digital
product, outlining which interface elements will appear on crucial pages.
This essential UI design process can be performed using tools like Figma,
Sketch, Axure, and Balsamiq. After wireframing, designers can create high-
fidelity mockups with detailed color themes and link screens in prototyping
tools like Figma, Sketch, and Adobe XD to visualize the product design like
the working product
Test and iterate: Once the prototype is ready, the team can conduct
usability testing to gather feedback from actual users. Unlike QA testing
and A/B testing, usability testing focuses on user-friendliness and whether
users can accomplish their objectives using the product.
Refine and update: After product release, when users begin using it and
achieving their goals, UI/UX designers continue their work to keep the
product updated with new UI and UX design trends.

Some additional good practices:

Mockup: A mock-up, is a scale or full-size model of a design or device, used
for teaching, demonstration, design evaluation, promotion, and other
purposes. A mockup may be a prototype if it provides at least part of the
functionality of a system and enables testing of a design
Interactive prototype: Interactive prototypes are working models of a
product or app that let users interact with its features as if they were using
the final version. These prototypes go beyond static wireframes or mockups
and simulate user interactions. Designers use them to test and improve user
flows, interface behavior, and overall user experience.

INTRODUCTION TO ERGONOMICS
Definition: Ergonomics is defined by a combination of factors including
physical stressors like repetition, force, and awkward postures; cognitive
factors such as mental workload and decision-making; and organizational
factors like work schedules, policies, and team structure. These aspects
work together to determine how well a job, product, or environment is

Page 4 of 8
"fitted" to a person, aiming to optimize their well-being and system
performance.

Physical factors: This involves the product's size, shape, weight, and
materials. For example, an ergonomic keyboard is shaped to reduce wrist
strain, and ergonomic furniture is designed for comfort and proper posture.

Cognitive factor: This aspect considers the user's mental effort and how to
streamline the experience. It involves designing interfaces and controls that
are easy to understand and use, minimizing cognitive load and confusion.
Safety and health: A primary goal is to prevent injuries, fatigue, and long-
term health problems like carpal tunnel syndrome or back pain.
Efficiency and performance: Ergonomically designed products allow users
to perform tasks more efficiently, with greater speed and fewer errors,
leading to increased productivity.
User experience: Ultimately, ergonomics improves the overall user
experience, leading to greater satisfaction. This can be achieved through
better fit, comfort, and intuitive operation.
UI “A USER CENTERED APPROACH”
A user-centered interface is an interface designed with the end user's needs,
goals, and behavior at the forefront of the entire process. This is achieved
through a user-centered design (UCD) process, which involves users at
every stage to ensure the final product is intuitive, efficient, and satisfying
to use. Key principles include understanding the user's context, iterative
design based on user feedback, and addressing the whole user experience.

Page 5 of 8
 Key principles and practices
 Focus on the user: The primary goal is to design for the user, not based on
assumptions or the latest technological trends. This involves understanding
user needs, behaviors, and motivation.
 Involve users throughout: Users are not just a starting point; they are
involved in all phases, from initial research and design to evaluation and
refinement.
 Iterative process: Design is not a one-off event. It is a cycle of
understanding, designing, testing, and refining based on user feedback to
continuously improve the interface.
 Usability and accessibility: A user-centered interface is easy to use, find
information quickly, and is accessible to a wide range of users. This includes
clear language and easy navigation.
 Contextual understanding: The design considers the specific tasks and
environments in which users will operate.
 Holistic experience: The design considers the entire user experience,
or UX, ensuring every interaction is smooth and pleasant.
Benefits and Challenges of UCD
Benefits:

 Enhanced User Engagement: A clean, intuitive UI invites users to spend

more time with the product. Easy-to-use systems lower the learning curve
and encourage users to return, improving user retention. Good UI design
principles enable users to navigate through interfaces easily and effectively.
 Reduced costs: There is less need for extensive technical support and
training because the interface is intuitive. This reduces the burden on
customer support teams and lowers operational costs

Page 6 of 8
 Improved productivity: Users can complete tasks more efficiently.
 Higher market share: Products that are useful and usable are more likely to
gain a larger customer base and return customers.

 Better Accessibility: A thoughtfully designed UI can make products more

accessible to a broader audience, including people with disabilities. Features
like voice commands, high contrast modes, and text resizing can greatly
enhance accessibility.
 Improved Productivity By reducing friction and confusion, a good UI helps
user complete tasks faster and with fewer errors. This is particularly
important in business tools or enterprise software, where efficiency is
crucial.

 Increased user satisfaction and Fewer Support Calls: When the UI is easy
to navigate and intuitive, users need less assistance. Products are more
enjoyable and easier to use, leading to greater user happiness.

Positive Emotional Impact: A visually appealing UI can evoke positive

emotions, helping users feel comfortable and satisfied. This emotional
connection can drive long-term user loyalty.
Challenges:

 Balancing Simplicity with Functionality: While a simple design is often

more user-friendly, it can sometimes compromise the ability to perform
complex tasks. UI designers must find a balance between simplicity and the
product’s full range of functionalities.

 Responsive Design: Ensuring that the UI adapts well to different devices

and screen sizes is critical. Responsive design allows the interface to adjust
automatically, ensuring the product works seamlessly on desktops, tablets,
and smartphones.

 User-Centered Design: Designing with the user in mind is essential, but

this can be difficult to execute without user research. Misunderstanding the
target audience’s needs can lead to a poor UI design that fails to meet
expectations.

 User Feedback and Iteration: UI design is not a one-time task. Continuous

testing, feedback, and iteration are necessary to ensure the design stays
relevant and efficient as the product evolves.

Page 7 of 8
 “Relation Between UI and UX”
Interdependence: UI and UX are interconnected and rely on each other.
You need UX to define what the product should do and how it should
function, and you need UI to make that function visually appealing and
easy for users to interact with.
Analogy: A well-designed house (UX) needs a beautiful and functional
exterior (UI) to make it appealing and easy to live in.
Collaboration: UX designers focus on the overall structure and user
journey, conducting research and creating prototypes, while UI designers
focus on the specific screens, visual systems, and mockups to bring the
design to life
Presentation: Utilizing formatting and visual cues to enhance clarity and
readability.

Q1 What is the significance of Visual hierarchy in UCD?

Answer: Designers use visual hierarchy to highlight the most important
information and ensure users focus on what matters the most ,it is significant
in user centered design because it guides users’ attention, improves
navigation and reduces cognitive load by arranging interface elements in
order of importance by using techniques like size color and contrast. It helps
users quickly understand useful content focus on crucial actions and
complete tasks more efficiently Resulting in a user-friendly design that builds
trust in brand or product for increased customer satisfaction and loyalty.

Q2 What is the role of User feedback in creating an interface “A User

Centered Design”?
Answer: Designers empathize with users revealing their needs, wants, pain
points and motivations. Users’ feedback drives the iterative cycle of user
centered design allowing for ongoing refinement and adaptation of product
to meet changing user preferences and behaviors by observing how users
interact with the product. Feedback is essential in user-centered design as it
provides data to understand user needs and ensures product is visible,
intuitive and satisfying by allowing designers to identify pain points, fix
errors and creates a product that genuinely needs user’s expectations and
goals. Incorporating feedback shows users they are valued which builds trust
and can lead to a stronger emotional connection with the product and
increased loyalty feedback confirms whether the design truly is centered on
the user's needs and goals.
Page 8 of 8