UX/UI

Design
Jake Muga
 Aims today:
GENERAL:
● This is an extended listening
lecture
● I will ask questions as well 😄

THIS LECTURE:
● Understand the basics of UX
and UI
 Vocabulary
1. Cognitive load
2. Components
3. User
4. Usability
5. User satisfaction
6. User retention
7. Scannability (UX/UI
term)
8. Overwhelm
9. SEO (Search Engine
Optimisation)
 So, what exactly is it?
What do you think UX
means?

What do you think UI

means?
 So, what exactly is it?
User EXperience

User Interface
We’ll focus on the different components!
To put it simply, what
you see (typically on a
screen) as a user is
what the User
Interface is.
 What is UI?
Let’s start with the basics. UI stands for User Interface, and a UI
component is any element that users can interact with in a digital
product.
They can be simple – like a button – or complex – like an accordion or
a modal window.
Think of them as the Lego blocks of a digital interface. You use them
to build layouts, forms, navigation systems, and more.
Let’s learn a little
more about the
different
UI components!
UI components!
Please take
notes.
 Buttons
Visual cues for action: Well-designed
buttons clearly indicate what the user
can or should do next, reducing
confusion.

Primary interaction tool: Buttons

allow users to perform actions (e.g.,
submit forms, navigate, buy products),
making them central to user flow.
 Buttons (2)
Consistency and familiarity:
Standardised button styles and
behaviours create a sense of reliability
and ease of use across different
platforms and devices.
Accessibility: Properly implemented
buttons improve accessibility for
screen readers and keyboard
navigation, ensuring usability for all
users.
 Text Fields
User input collection: Text fields
are the primary way to collect user
data—names, emails, search
terms, feedback, etc.
Task completion: Many core tasks
(signing up, logging in, searching,
commenting) require text fields, so
their usability directly impacts user
success.
 Text Fields (2)
Accessibility and responsiveness:
Well-designed fields should be
compatible with all technologies
and work well across devices,
improving the overall user
experience.
 Checkboxes
Multiple selection: Checkboxes allow
users to select more than one option
from a list, unlike radio buttons which
limit users to a single choice.

Clarity and control: Users can

quickly toggle options on or off,
giving them a clear sense of what is
active or selected.
 Checkboxes (2)
State visibility: The
selected/unselected state is
visually obvious, helping users
immediately understand the
current settings.
 Radio buttons
Single selection from a group: Radio
buttons are ideal when users must choose
only one option from a predefined set
(e.g., payment method).

Mutual exclusivity: They clearly

communicate that only one choice is
allowed, reducing user error and
decision ambiguity.
 Radio buttons (2)
Always-visible options: Unlike dropdowns,
all options are immediately visible, making
the decision quicker and more user-friendly
for short lists.

Straightforward interaction: Radio

buttons offer a simple and familiar way to
make a choice with just one click or tap.
 Dropdowns
Space efficiency: Dropdowns are ideal
for conserving screen space,
especially when offering many options
without cluttering the interface.

Organised selection: They allow users

to select one option from a long list,
keeping the UI clean and focused (e.g.,
country selectors, titles).
 Dropdowns (2)
Progressive disclosure: Dropdowns keep
secondary or optional content hidden
until needed, reducing cognitive load.

Input control: They limit users to

predefined choices, which helps prevent
errors and ensures consistent data entry.
 Sliders
Intuitive input for ranges: Sliders are ideal
for selecting a value within a continuous
or large range, such as volume, brightness,
or price filters.

Quick adjustments: They allow users to

quickly change values without having to
type or click incrementally, improving
speed and ease of use.
 Sliders (2)
Visual feedback: Sliders provide
immediate visual feedback as users drag
the handle, making it easy to see how the
value is changing in real time.

Engaging interaction: The drag-and-slide

motion is often more engaging and tactile
than typing, especially on touch interfaces.
 Menu
Navigation and organisation: Menus
help to organise content and facilitate
easy navigation within an app or
website, allowing users to access
various features or sections.
Space-efficient: Menus, particularly
hamburger menus, can store many
options without overwhelming the
screen, making them perfect for mobile
and responsive designs**.
(** I will explain later! 😄📱)
 Menu (2)
Categorisation: Menus help group
related items together, allowing users
to quickly scan and find the option
they need, especially in complex
interfaces.

Clear hierarchy: Menus establish a

clear visual hierarchy, with options
and sub-menus clearly showing
relationships (e.g., a dropdown menu
showing subcategories).
 Menu (3)
Actionable choices: Menus provide
clear calls to action and can lead
users to important interactions (e.g.,
"Settings", "Log Out", or "Contact Us").

Consistency and familiarity: Since

users are familiar with menu
structures, they provide a predictable
and intuitive way to access different
parts of the system.
 Menu Types
Looks like: ☰ (three horizontal lines)

Purpose: Opens a hidden menu (usually

with navigation links)

Common in: Mobile apps and websites,

to save space

Why it's useful: Keeps the screen clean

and uncluttered until the user needs to
explore more options
 Menu Types (2)
Looks like: ⋮ (three vertical dots)

Purpose: Shows more options or actions

(usually for a specific item or section)

Common in: Mobile apps, file lists,

messages, etc.

Why it's useful: Hides secondary actions

(like "Edit", "Delete", "Share") until the
user needs them
 Menu Types (3)
Looks like: A grid icon (usually 3×3 or 2×2
squares)

Purpose: Opens a dashboard or app

launcher (with many icons or sections)

Common in: Google products, software

suites, admin dashboards

Why it's useful: Shows multiple tools or

features at once, clearly grouped
 Sidebars
Persistent navigation: Sidebars offer
a constant navigation anchor,
allowing users to move between
sections without losing their place.

Ideal for complex apps: Especially

useful in dashboards, admin panels,
or multi-layered websites where quick
access to many areas is needed.
 Sidebars (2)
Space for secondary content:
Sidebars provide a place for filters,
settings, shortcuts, or contextual tools
without cluttering the main content
area.

Enhanced scannability: Users can

quickly scan vertical lists of
navigation links or tools, which is
especially efficient on larger screens.
 Sidebars (3)
Expandable/collapsible options:
Many sidebars support
expand/collapse behaviour, helping
users customise their workspace and
minimise distractions.

Improves layout balance: Visually

balances content-heavy layouts and
can act as a visual anchor, guiding
user focus through consistent
placement.
 Sidebars (4)
Supports multi-tasking: By housing
tools (e.g., chat, file explorer, notes),
sidebars make it easier to switch
between tasks without leaving the
main screen.
 Breadcrumbs
Reduce cognitive load: They offer a
visual trail, helping users understand
the site's structure and where their
current page fits within it.

Encourage exploration: Breadcrumbs

make it easy to navigate laterally or
upward, encouraging users to explore
related sections without friction.
 Breadcrumbs (2)
Show user location: Breadcrumbs
provide a clear path of where the
user is within the site or app hierarchy,
improving orientation and reducing
confusion.

Enhance navigation: Users can

quickly backtrack to higher-level
pages without using the back button or
restarting from the homepage.
 Breadcrumbs (3)
SEO benefits: Search engines like
Google use breadcrumb markup to
better understand site structure,
which can enhance search listings and
visibility.

Minimal UI footprint: Breadcrumbs

are compact and unobtrusive, making
them a highly efficient navigation aid
without taking up much space.
 Pagination Controls
Improve content load time: By
dividing content into pages, pagination
reduces the amount of data loaded
at once, speeding up performance.

Easier content scanning: It allows

users to digest content in
manageable chunks, rather than
scrolling endlessly, which improves
readability and focus.
 Pagination Controls (2)
User control: Pagination gives users a
sense of progress and control, letting
them navigate directly to a specific
page or section of content.

Better for SEO: Unlike infinite scroll,

pagination provides distinct URLs for
each page, making content easier for
search engines to index.
 Pagination Controls (3)
Reduces overwhelm: By showing only
a portion of results at a time, it helps
users feel less overwhelmed,
particularly on content-heavy
platforms.

Supports analytics: Pagination makes

it easier to track user engagement
per page or set of items, helping teams
optimise layout or product listings.
 Modal window
Focused user attention: Modals appear
on top of the current screen, helping to
capture the user's full attention for
critical tasks or messages (e.g.,
confirmations, forms, warnings).

Context preservation: They allow users

to complete an action without leaving
the current page, which helps maintain
context and improves the flow.
 Modal window (2)
Encourage quick decisions: By limiting
background interaction, modals guide
users to take a specific action—like
confirming deletion or submitting data.

Compact and efficient: Modals are ideal

for short tasks or messages that don't
require a full page (e.g., login forms,
tooltips, alerts).
 Modal window (3)
Customisable and versatile: They can
display everything from text and images
to forms and widgets, making them
highly flexible in functionality.

Improve UX for urgent tasks: Modals

are useful for errors, timeouts, or
permission prompts, delivering urgent
info in a way users can’t overlook.
 Notifications
Deliver timely information: Notifications
provide real-time updates on important
events, changes, or system
status—keeping users informed without
disrupting their workflow.

Guide user behaviour: They help prompt

actions, such as confirming a change,
completing a task, or checking a
message, improving task completion
rates.
 Notifications (2)
Increase engagement: Notifications can
draw users back to the app or feature (e.g.
“You have a new message,” or “Your order
has been shipped”), enhancing retention and
activity.

Support system feedback: They

communicate outcomes of user actions (e.g.,
success, failure, or errors), creating a clear
feedback loop and building trust.
 Notifications (3)
Encourage real-time interaction: In
collaborative or social tools, notifications
help maintain live awareness (e.g., “John
commented on your doc”).

Highly customisable: Notifications can

be tailored in tone, frequency, and
style—making them context-aware and
user-friendly when designed well.
 Progress bars
Set clear expectations: Progress bars
show how far along a process is (e.g.,
uploading a file, completing a form),
helping users understand what to expect
and how long it might take.

Reduce uncertainty: They reassure users

that a task is in progress, which is
especially important for longer operations
where the screen might otherwise seem
static.
 Progress bars (2)
Boost perceived speed: Even if a task
takes time, a well-designed progress bar
can make it feel faster and smoother,
improving the overall user experience.

Encourage task completion: When users

see their progress visually, they’re more
likely to follow through to the end,
thanks to the psychological principle of
goal completion.
 Accordions
Save screen space: Accordions allow
large amounts of content to be collapsed
into sections, making the layout cleaner
and more compact—especially useful on
mobile or dense pages.

Improve scannability: By hiding

non-essential content until needed,
accordions let users focus on one section
at a time, reducing information overload.
 Accordions (2)
Encourage exploration: Users can
expand content on demand, promoting
interactivity and helping them find what
they’re interested in without scrolling
endlessly.

Enhance user control: Accordions give

users direct control over the interface,
letting them choose what to view and
when, which supports a more
personalised experience.
 Accordions (3)
Organise related content: They help
group related items (e.g., FAQs, filters,
settings) into logical categories, making
complex content more digestible.

Improve loading times: Accordions can

improve performance by loading content
only when it's expanded.
 Cards
Encourage visual hierarchy: By clearly
separating information into blocks, cards
make content easier to scan and digest,
especially in visually dense interfaces.

Great for grouping: Cards are perfect for

grouping related content, such as
product listings, articles, user profiles, or
dashboards—each one functioning as a
distinct "unit."
 Cards (2)
Interactive and actionable: Cards often
include interactive elements like buttons,
links, or hover effects, encouraging user
engagement directly within each
component.

Scannable and repeatable: Their

consistent structure helps users recognise
patterns (e.g., all product cards look and
behave similarly), improving usability
across a site or app.
 Grids
Provide structure and alignment: Grids
create a consistent framework that
aligns elements, ensuring a clean,
balanced, and professional look across
the interface.

Enhance readability: By organising

content into columns and rows, grids
improve visual hierarchy and
scannability, helping users process
information more efficiently.
 Grids (2)
Support responsive design: Grids scale
beautifully across different devices and
screen sizes, making layouts adaptive
and flexible.

Improve consistency: Grids enforce

spatial relationships and spacing across
UI components, resulting in a more
coherent and harmonious user
experience.
 Grids (3)
Balance complexity: Grids can handle
large amounts of varied content (e.g.,
image galleries, product listings,
dashboards) while keeping everything
orderly and digestible.
 Success/Error Message
Provide immediate feedback: These
messages confirm the result of user
actions—whether successful or
unsuccessful—helping users understand
what just happened.

Build user trust: Clear, timely feedback

reassures users that the system is
responsive and reliable, which builds
confidence in using the interface.
 Success/Error Message (2)
Guide next steps: Good messages don’t
just state success or failure—they guide
the user on what to do next, whether it’s
continuing, retrying, or correcting input.

Prevent frustration: Thoughtful error

messages help reduce user anxiety by
explaining what went wrong and how to
fix it—rather than just saying “something
went wrong.”
 Success/Error Message (3)
Support localisation and tone:
Well-crafted messages can reflect your
product’s brand voice and tone, adding
friendliness, professionalism, or urgency
as needed.

Encourage completion: Success

messages act as positive reinforcement,
motivating users to continue or repeat
actions (e.g., “Your form was submitted!”).
 Loading spinners
Provide visual feedback: Spinners signal
that the system is working, preventing
users from thinking the interface is frozen
or broken.

Reduce perceived wait time: Even if

nothing is loading faster, a spinner helps
occupy the user’s attention, making the
wait feel shorter and more tolerable.
 Loading spinners (2)
Prevent repeated actions: Spinners show
that a task is in progress, which
discourages users from clicking
multiple times or refreshing
unnecessarily.

Maintain user trust: A responsive spinner

reassures users that their input has been
received and is being processed, building
confidence in the system.
 So, UX/UI design is used for good!
● Making digital products easy for the
users to use

● Making digital products visually

appealing and beautiful

● Making sure the user is comfortable

● Good for marketing as well

JOIN US

But, UX/UI has

a dark side
 Just to recap…
Dark patterns are deceptive or manipulative
design choices in user interfaces that trick users
into doing something they might not have
intended—such as signing up, sharing data, or
making a purchase. These patterns prioritise
business goals at the expense of user trust and
transparency.

They look like helpful or neutral features, but they

are actually designed to benefit the company,
often by exploiting user psychology.
 Confirmshaming
This happens when a website tries to make you feel
bad or guilty for saying “no” to something.

The message is written in a way that shames you

into clicking “yes.”

Example: the crying Duolingo owl

 Misdirection
This is when the design points your attention to
the option the company wants, and hides or
makes the other options confusing.

Examples:

● Hidden costs (or making it difficult to

understand)
● The “Accept all cookies” button is big and
bright, but the “Reject” or “Manage
preferences” link is small and grey.
 Trick Questions
This dark pattern uses confusing or
tricky language so people click the
wrong option by mistake.

Examples:

● A checkbox that says “Tick this

box if you don’t want to stop
receiving emails.”
 Privacy Zuckering
This is when a company makes it too easy
to share personal data—often without
the user realising how much they are
sharing.

Examples:

● When you install a new app, it asks you

to “Allow access to your camera,
microphone, location, contacts, and
files” all at once—without explaining
why it needs each of those things.
Question Time!
Thank you for
listening!

If you’re doing the

project, please come
back at 3:50PM
 Task 1:

Project Time! ● Choose a website/app/digital product that you

usually use and analyse the different
components used.
● Scan the QR code to access my presentation 😄
● Please take screenshots or draw sketches of the
product on paper.

Task 2:

● Try to detect any dark patterns used in the

website/app/digital product you chose
● If you can’t, please choose another digital
product

Task 3:

● Share your research on Padlet!

(https://padlet.com/jakemuga/uxui_jakem)