UX/UI

DESIGN
CREATING INTUITIVE AND ENGAGING
DIGITAL EXPERIENCES
What is it?

What is UI (User Interface)?

UI (User Interface) refers to the visual elements and

interactive components that enable users to interact
with a website, application, or digital product.

The primary focus of UI is presentation and usability

—ensuring that all buttons, menus, forms, icons, and
other visual components are designed in a way that
makes them easy to use and visually appealing.
KEY COMPONENTS OF UI
Layout and Structure Typography and Colours
Organises content on the screen (e.g., header, Ensures that text is readable, aligned with the
footer, sidebar, navigation menus). brand, and visually pleasing. Colour schemes and
Example: A simple grid layout on an e-commerce font choices contribute to usability and user
homepage displays products in neat rows, making it engagement.
easy for users to browse. Example: A news website may use large, bold
headlines with a professional serif font to ensure
Buttons, Menus, and Forms readability and convey trustworthiness.
Provide ways for users to input commands and
perform actions (e.g., “Buy Now” buttons, drop-down Icons and Visual Elements
menus). Provide quick, intuitive visual cues about the
Example: A button to submit a contact form or a purpose of a feature.
search bar that helps users find products. Example: A shopping cart icon typically indicates
access to the user’s purchase summary.
Visual Feedback
Notifies users that an action has been registered
(e.g., a button changes colour when clicked).
Example: A loading spinner shows the user that the
system is processing their request.
The Role of UI in User
Interaction
UI plays a crucial role in shaping user interactions by ensuring that everything is
accessible and easy to understand. Without effective UI design, users may
struggle to find features or feel frustrated when interacting with the website.

We know that UI must follow consistent design patterns to reduce cognitive load—
helping users intuitively know where to find things.

The way menus and drop-downs are structured on a website is an example of UI. A
well-designed primary navigation bar at the top of the page allows users to quickly
find key information, while secondary menus in sidebars or footers provide access to
less critical but still relevant content.

UI design can vary depending on the audience. For instance, younger users might
prefer vibrant, animated interfaces, whereas older users may benefit from simpler
layouts with fewer distractions.

UI ensures that users have the tools they need to interact with the product in a clear,
visually engaging way. It is essential for making the product both usable and
appealing, directly impacting the user's first impression and experience with the
website or application.
What is it?

What is UX (User Experience)?

UX (User Experience) refers to the overall experience

and emotions a user has while interacting with a
website, application, or digital product.

UX goes beyond visual elements and focuses on how

easy, intuitive, and satisfying the interaction is. The
goal of UX design is to meet the user’s needs
efficiently and create a positive impression, ensuring
they can achieve their goals with minimal frustration.
KEY COMPONENTS OF Ux
Usability Interaction Design
Ensures the product is easy to navigate and perform Focuses on how users interact with the system,
essential tasks. including how elements respond to inputs (clicks,
Example: Users need clear feedback when they taps, swipes).
interact with the system, such as error messages or Example: A well-designed video player allows users
confirmation pop-ups, ensuring they always know to play, pause, and skip with minimal effort,
what’s happening. enhancing their overall experience.

User Flow Emotional Design

Refers to the path users take to complete a task (e.g., The experience should not only be functional but
purchasing a product or signing up). also enjoyable. Positive emotional experiences
Example: A good UX ensures that the checkout create lasting impressions and encourage users to
process on an e-commerce site is straightforward, with return. Example: Fitness apps often use
minimal steps to reduce friction. motivational messages to emotionally engage users
and encourage habit formation
Accessibility
UX includes designing for all users, including those with
disabilities. Meeting accessibility standards like WCAG
2.1 ensures that everyone, regardless of ability, can use
the product.
The Role of UX in User
Interaction
UX design follows a user-centred approach, focusing on users' goals and challenges.
Using personas (fictional profiles of target users) ensures that the design aligns with user
needs. Personas help designers anticipate frustrations and preferences—for example,
simplifying navigation for busy professionals who need quick access to features.

Example of UX Design Flow:

1.User Research: Gather insights into the target audience.
2.Wireframing: Create simple layouts to outline content and navigation.
3.Prototyping: Develop interactive mockups to test user interactions.
4.Testing and Feedback: Conduct usability tests with real users to identify issues.
5.Iteration: Improve the design based on feedback and launch the final product.

Good UX aligns with business goals, such as increasing conversions, by ensuring users can
achieve their objectives efficiently.

UX design focuses on creating smooth, meaningful, and enjoyable interactions that

meet both user needs and business objectives. It ensures that users feel satisfied
throughout their journey by minimising frustration and enhancing usability. A great
user experience doesn’t just meet expectations; it delights users and fosters brand
loyalty.
UI vs UX: Core Differences
UI (User Interface) refers to visual elements and interactive components such as buttons,
forms, and menus that users directly engage with on a website.

• Example: The placement and design of a button for purchasing a product.

• Role in Navigation: UI involves ensuring the layout is aesthetically pleasing and easy to use,
such as having primary menus easily accessible on the homepage.
• UI design ensures consistency across elements like navigation bars and icons, reducing
cognitive load.

• UX (User Experience) focuses on how users feel when interacting with the website, ensuring
their journey is seamless and satisfying.
• Example: Even if a button is visually appealing (UI), the UX will fail if the checkout process is
complicated or doesn’t offer feedback when a purchase is completed.
• UX incorporates personas by addressing user goals and frustrations—for example, designing
a quick checkout process for users who value efficiency.
• Interconnection: Good UI enhances UX by providing intuitive tools (e.g., a search bar), while
UX ensures that the entire process—like finding and buying a product—feels smooth.
Knowing Your Audience
Designing effective websites begins with understanding
the audience’s preferences, behaviours, and challenges:

YOUNGER AUDIENCES
Engage with interactive, dynamic elements like animations and social
media integrations.

Example: If the persona is a teenager, using vibrant colours and interactive

features like parallax scrolling could increase engagement.

OLDER AUDIENCES
Prefer simpler layouts with easy-to-read fonts and clear calls to action. Use
large text and minimal options for ease of use, focusing on usability principles
to meet accessibility needs.

Example: A website aimed at retirees could feature a larger font size and
simple navigation without distracting elements.
Effective Navigation
PRIMARY AND SECONDARY NAVIGATION
• Primary Navigation:
⚬ Contains the core content or features that users need most
frequently.
⚬ Example: On an e-commerce site, the primary menu might
include categories like “Products,” “Offers,” and
“Account.”
⚬ Align primary navigation with business goals and brand
identity for a cohesive experience.
• Secondary Navigation:
⚬ Offers access to secondary information, such as FAQs or
support pages.
⚬ Example: A link to "Terms and Conditions" might be in the
secondary navigation within a footer menu.
⚬ This helps users avoid overloading the main interface
with unnecessary options, contributing to better usability.
Organising Navigation
ORGANISING NAVIGATION WITH CARD SORTING

Card Sorting is a technique for grouping and labelling content logically,

referenced in both usability design and web strategy.

⚬ Open Card Sorting: Users create their own categories for content.
⚬ Closed Card Sorting: Users sort content into predefined
categories.
⚬ Example: For an educational website, card sorting could reveal
that users expect "Student Resources" and "Events" to be
grouped together, informing the layout.

CLASSIFICATION SCHEMES FOR CONTENT

• Group content based on context:

⚬ Alphabetically: Useful for indexes and glossaries.
⚬ By Popularity: Prioritises frequently accessed content.
⚬ By Process Steps: Organises content sequentially (e.g., checkout
steps).
⚬ Example: If users prefer a process-based structure, show progress
indicators during multi-step forms (e.g., booking systems).
Responsive Navigation
IMPORTANCE OF RESPONSIVE DESIGN:

• It’s essential to optimise the site for all screen sizes, especially mobile devices.
• Mobile-First Approach: Design for mobile users first, ensuring menus adapt to
smaller screens without clutter.
• Example: A sticky menu can improve usability by ensuring users always have
access to primary navigation, even as they scroll down long pages.

SCENARIOS TO CONSIDER:

• Touch-Friendly Design: Ensure links and buttons are spaced far enough apart for
touch inputs.
• Adaptive Menus: Use hamburger menus on smaller screens to save space, while
expanding the same optIONS INTO HORIZONTAL MENUS ON DESKTOPS.

UI/UX RELATIONSHIP IN NAVIGATION:

• Navigation is not just about aesthetics (UI) but about ensuring users reach their
goals smoothly (UX).
• Build navigation that anticipates the behaviours and motivations of different
user segments, such as tech-savvy users needing quick access to tools.
• Navigation structure must reflect the brand’s personality and business
objectives.
Best Practices for UI Design
MINIMISE COGNITIVE LOAD
• Limit choices: Too many options can lead to analysis paralysis—a situation
where users feel overwhelmed and avoid making any decision.
• Example: Instead of displaying every product category upfront, Amazon uses a
hamburger menu to reveal additional categories, keeping the homepage
clean.
USE FAMILIAR DESIGN PATTERNS
• Consistency is key: Use standard UI patterns (like the logo in the top-left
corner) to help users navigate effortlessly.
• Example: Placing navigation links across the top of the page follows the familiar
"F-pattern" that matches how users scan websites.
• Familiar patterns reduce confusion and improve usability by setting expectations.

ENSURE CLEAR VISUAL

CUES
• Clickable elements must look interactive: Buttons should stand out with
contrasting colours and hover effects.
• Example: A button with high contrast (e.g., white text on a blue background)
draws the user’s attention and ensures accessibility for users with visual
impairments.
Design for Accessibility
USE LARGE FONTS AND HIGH
CONTRAST
• Fonts should be easy to read, especially for older users or those with
vision impairments. High contrast improves readability on all devices.
• Example: A news website like BBC offers font size controls and dark mode
options to enhance accessibility.
• High-contrast text ensures users with disabilities or situational
impairments (e.g., bright sunlight) can engage with the content.

AVOID OVERLY COMPLEX

DESIGNS
• Simplify navigation and reduce hidden elements for users unfamiliar
with advanced web interfaces.
• Example: Older users may struggle with hamburger menus, so providing
a visible navigation bar on larger screens enhances their experience.
• For audiences less familiar with technology, clarity and simplicity are
essential.
 Enhancing User Experience
FOCUS ON FOCUS ON
EMOTION
USE VISUALS AND STORYTELLING
EMOTION
SIMPLIFY HOMEPAGE CONTENT

Visual elements evoke emotions and • The homepage should only contain key
connect users to the brand. Storytelling elements—users can explore deeper
draws users into the experience and keeps through well-organised pages.
them engaged. • Example: Bullet points, large
Example: Airbnb’s homepage uses large, headlines, and short paragraphs
emotional images and stories from hosts to improve scannability, ensuring users find
create a personal connection with users. what they need quickly.
OpTIMISE FOR SKIMMING
STREAMLINE ACTIONS
• Users rarely read everything—structure
Users should be able to complete tasks content with a hierarchy of headings,
with minimal friction—each extra step bullet points, and key takeaways.
increases the chance they abandon the • Example: An "About Us" page might use
process. bold headings for each section,
Example: A good UX design ensures that a allowing users to jump directly to the
guest checkout option is available to part they are interested in.
avoid forcing users to register.
 Enhancing User Experience
INTERACTIVE
ELEMENTS
DESIGN FOR MOBILE AND DESKTOP USE FEEDBACK MECHANISMS
CONSISTENCY
• Interactive elements should provide
• Ensure buttons, forms, and menus are usable feedback (e.g., colour change, loading
across all devices. Mobile designs must indicators) so users know their action has
account for touch interactions and smaller been registered.
screens. • Example: Google Forms shows a
• Example: Buttons need to be large enough progress bar, helping users understand
to tap easily, avoiding frustration for mobile how far they are from completing the
users. form.
 Improving Usability Through Navigation
HORIZONTAL VS. VERTICAL
MENUS
Horizontal Menus
• Best suited for simple websites with a limited number of sections (e.g., portfolio or blog sites).
• Example: A photographer’s site might use a horizontal menu with just a few options—"Home,"
"Portfolio," "Contact."
Vertical Menus
• More effective for content-heavy sites, such as e-commerce platforms with multiple categories.
• Example: Amazon uses a vertical menu for departments, making it easier to browse large
volumes of products.

DROP-DOWN MENUS AND MEGA DROP-DOWNS

Drop-Down Menus
⚬ Save space by keeping additional content hidden until needed.
• Example: A university website might have a drop-down menu for "Departments" that
expands to show all academic divisions.
Mega Drop-Downs
• Provide more space for complex navigation, with multiple categories or visual elements.
• Example: Best Buy uses a mega menu with product categories, promotions, and featured
products to improve navigation for shoppers.
 Improving Usability Through Navigation
STICKY MENUS
What are Sticky Menus?
• Sticky menus remain visible at the top of the page
as users scroll, improving usability on long pages.

Why Use Sticky Menus?

• They reduce user effort by ensuring the most
important navigation options are always available.
• Example: News websites like CNN use sticky
headers so users can quickly return to the top-level
navigation or search bar while reading articles.

Sticky menus improve the user experience by

minimising scrolling friction, especially for mobile
users.
Testing and Iteration
Testing and iteration are critical stages in the
design process, ensuring that a website or
application meets user needs and performs
consistently across all platforms.
In web development, usability testing, mobile
testing, and responsive design are essential for
delivering a polished, user-friendly product.
Usability testing ensures that users can navigate
the interface easily and complete desired
tasks without frustration. It allows designers to
uncover usability issues and make informed
improvements.
Testing and Iteration
A/B TESTING FOR LAYOUT AND
NAVIGATION
What is A/B Testing?

• A/B testing involves creating two versions of a webpage or

feature (version A and version B) and measuring which
performs better based on user interactions.
• Example: Version A might feature a horizontal navigation bar,
while Version B uses a vertical one. By tracking metrics like
bounce rate or click-through rate, the design team can
determine which layout is more effective.

How It Improves Usability

• A/B testing removes assumptions from the design process by

gathering quantifiable user data.
• Feedback-driven improvements ensure that the final product
is aligned with user expectations and business goals.

Iterative Design: Based on the test results, the better-performing

version is refined, and subsequent tests may be conducted to
achieve further optimisation.
 Different Platforms
Users access websites from a variety of devices, including desktop
computers, tablets, smartphones, and even smart TVs. A design that
works perfectly on one platform may not perform well on another,
which makes cross-platform testing essential.

Why Test on Multiple Platforms?

• Diverse User Devices: Your audience may use a mix of

desktops, iPhones, Android phones, and tablets. The user
experience must be consistent across all these devices.
• Platform-Specific Differences: Platforms may handle fonts,
graphics, and navigation differently. A button that appears aligned
on a desktop could look misaligned on mobile.
• Performance and Load Times: Some devices have slower
processors or internet connections. Testing ensures your
website performs efficiently even under constrained
conditions.
Using Emulators
WHAT ARE EMULATORS?

• Emulators are software tools that mimic the behaviour of real

devices, such as smartphones and tablets, on your computer.
• They allow designers and developers to test websites and apps for
different screen sizes, resolutions, and operating systems without needing
physical devices.

COMMON MOBILE EMULATORS

Chrome DevTools
• How It Works: The Chrome browser includes a built-in emulator that
allows developers to switch between different device views, such as
iPhones, Android phones, and tablets.
• What to Test:
⚬ Touch Interactions: Ensure buttons are easy to tap.
⚬ Font Legibility: Check if text remains readable on smaller screens.
⚬ Responsive Navigation: Confirm that menus adapt to the mobile
layout.
Using Emulators
COMMON MOBILE EMULATORS

BrowserStack or Sauce Labs

⚬ Cloud-based testing platforms that simulate multiple devices and
browsers, providing more extensive testing environments.
⚬ Benefit: Allows testing across rare or legacy devices without needing
access to physical hardware.

Xcode and Android Studio

⚬ These development environments come with emulators for testing iOS
and Android apps, respectively. They simulate different screen sizes and
OS versions to ensure compatibility.

WHY USE EMULATORS?

• Cost-Effective: Purchasing a range of devices for testing can be

expensive. Emulators provide a budget-friendly alternative.
• Quick Iterations: Changes can be tested immediately, speeding up the
iteration process.
Responsive Design
WHAT IS RESPONSIVE DESIGN? SEO Benefits

Responsive design ensures that webpages adapt • Google gives higher search rankings to mobile-
seamlessly to different screen sizes and friendly websites. Responsive design ensures the
orientations (e.g., portrait or landscape). A site passes Google’s mobile-friendliness tests,
responsive website provides consistent functionality improving search visibility.
and appearance, regardless of the user’s device.

WHY IS RESPONSIVE DESIGN Integral? BEST PRACTICES FOR RESPONSIVE DESIGN

USER EXPERIENCE ACROSS DEVICES • Use Fluid Grids: Grid layouts that adjust
automatically based on the screen size.
• USERS EXPECT WEBSITES TO PERFORM
• Flexible Images: Use CSS to ensure images scale
EQUALLY WELL ON MOBILE PHONES, TABLETS,
properly without distortion.
AND DESKTOPS. A POOR EXPERIENCE ON
• Media Queries: Apply CSS rules based on
ONE DEVICE CAN DRIVE USERS AWAY.
screen width and device type, ensuring elements
• EXAMPLE: IF A SHOPPING CART IS HARD TO
behave differently on small vs large screens.
ACCESS ON MOBILE, USERS MAY ABANDON
• Example: On small screens, menus collapse into
THEIR PURCHASE.
hamburger icons to save space.
Future-Proofing the Design

• With the growing variety of screen sizes (e.g.,

foldable phones), responsive design ensures
that the website remains usable even on new
 Testing and Iteration

Testing and iteration are essential to deliver a polished

product that meets both user and business needs.

Usability testing ensures that the interface is easy to

navigate, while cross-platform testing guarantees
consistent performance across all devices.

Emulators offer a convenient way to test mobile

experiences, and responsive design ensures the
product stays relevant as technology evolves.

Frequent testing, combined with continuous updates,

ensures that the final product provides a seamless,
enjoyable experience for all users.