UI Patterns

M A H A O M R A N E L - M H D Y
 UI Design Patterns Introduction
Why use UI patterns?
Common UI Design Patterns

WHAT YOU WILL

1. Implementing page structure patterns
2. Organizing content for or the best results
LEARN 3. Affording Fluid Navigation
4. Simplifying data entry
5. Social aspects of UI design
Dark Patterns
UI DESIGN PATTERNS
INTRODUCTION
UI design patterns are reusable
solutions to common interface
problems that help designers create
consistent, efficient, and user-
friendly experiences without
reinventing the wheel.
 We use UI patterns because they save time,
improve usability, create consistency across
designs, and provide proven solutions to
WHY USE UI common user problems, helping designers

PATTERNS? build better user experiences more

efficiently.
COMMON UI DESIGN PATTERNS
• Navigation bar – Helps users move between main sections of a website or app

• Search bar with autocomplete – Allows users to find content quickly with
suggestions

• Card layout – Organizes content into clear, bite-sized blocks

• Tabs – Lets users switch between views within the same screen

• Infinite scroll – Loads more content as users scroll down

• Breadcrumbs – Shows users their current location in the site hierarchy

• Progress bar or stepper – Indicates how far the user is in a process

1. IMPLEMENTING PAGE STRUCTURE
PATTERNS
Implementing page structure patterns means using proven layouts and design solutions to
arrange content and navigation in a way that is clear, organized, and easy for users to
follow.
these patterns help ensure consistency across pages, guide users through tasks, and
improve the overall user experience.

• Visual framework

• Centre Stage

• Movable pieces

• Titled Sections
VISUAL FRAMEWORK
• Problem:
You’re building a website with several pages, or an app with multiple screens—in other
words, almost any complex software. You want it to feel unified and look like a single,
cohesive product. It should also be easy for users to navigate.

• Solution:
Design each page or screen to use the same basic layout, colors, typography, and
stylistic elements, while allowing flexibility for different content.
When a UI uses consistent color schemes, fonts, and layouts, and when titles and
navigation elements are in the same place every time, users know where they are and
how to find things. They don’t have to learn a new layout each time they move from one
page or screen to another.
VISUAL FRAMEWORK
CENTRE STAGE
• Problem:
On complex pages or screens, users can feel lost because it’s not clear what the most
important element or action is. They may overlook key information or the main purpose
of the page.

• Solution:
Give the main content or primary action “centre stage” by making it visually prominent.
Use larger size, bold typography, contrasting color, or strategic placement to draw
attention.
When users quickly see what’s most important, they can focus their efforts and complete
tasks more efficiently without confusion.
CENTRE STAGE
MOVABLE PIECES
• Problem:
Users sometimes want to customize their workspace or rearrange content in a way
that suits their personal workflow or preferences. A rigid layout makes this
impossible and limits user control.

• Solution:
Design the interface with movable pieces—components that can be dragged,
resized, reordered, or hidden as users wish.
When users have flexibility to arrange their own workspace, they feel more in
control and can optimize their experience for efficiency and comfort.
MOVABLE PIECES
TITLED SECTIONS
• Problem:
Long pages of content can feel overwhelming and are hard for users to scan. People
may struggle to find specific information or understand how the content is organized.

• Solution:
Break content into clear, titled sections. Use headings and subheadings to label different
parts of the page and visually separate them with spacing or background colors.
When sections are clearly titled, users can quickly scan the page, understand its
structure, and jump to the information they need without frustration.
TITLED SECTIONS
2. ORGANIZING CONTENT FOR THE BEST
RESULTS
Organizing content means structuring information in a clear, logical, and user-friendly way
to help users easily find what they need, understand it quickly, and take the desired action.

• Slideshows

• Two panel selector

• Lists

• Dropdown menus

• Tabs 'Card Stack‘

• Pagination
SLIDESHOWS
• Problem:
You have multiple pieces of related visual content (like images or promotions), but
limited space on the screen. Showing everything at once would overwhelm the user
or clutter the layout.

• Solution:
Use a slideshow to display one piece of content at a time, allowing users to
manually navigate through slides or set slides to auto-rotate. This saves space and
keeps the design clean while showcasing several items.
SLIDESHOWS
TWO PANEL SELECTOR
• Problem:
Users need to choose from a list of items and see related details or actions for each
selection, but switching back and forth between separate screens slows them down.

• Solution:
Use a two-panel layout: one panel lists items (like categories or folders), and the
other panel displays the details of the selected item. This keeps navigation fast and
context clear.
TWO PANEL SELECTOR
LISTS
• Problem:
You have many items to display, and users need to scan, compare, or select items
quickly. A disorganized layout would slow users down and frustrate them.

• Solution:
Display items in a clear, vertical or horizontal list with consistent spacing and
alignment. Lists help users easily browse and identify the content they’re looking
for.
LISTS
DROPDOWN MENUS
• Problem:
You have too many navigation options or settings to fit on the screen without cluttering
the interface.

• Solution:
Group related items under a dropdown menu that expands when clicked or hovered.
This keeps the interface clean while still giving users access to multiple options.

• Vertical dropdown menu

• Horizontal dropdown

• Mega dropdown menus (fat menus)

VERTICAL DROPDOWN MENU
HORIZONTAL DROPDOWN
MEGA DROPDOWN MENUS (FAT MENUS)
TABS (CARD STACK)
• Problem:
You have different categories of content that users might want to switch between,
but displaying all the content at once would be overwhelming.

• Solution:
Use tabs to separate content into logical sections. Users can click each tab to reveal
the related content while keeping the interface tidy.
TABS (CARD STACK)
PAGINATION
• Problem:
You have a large dataset or long list of items that would be too heavy to load all at
once, making pages slow and overwhelming for users.

• Solution:
Divide the content into multiple pages and provide navigation controls (like page
numbers or “Next/Previous” buttons) so users can browse data in manageable
chunks.
PAGINATION
3. AFFORDING FLUID NAVIGATION

Affording fluid navigation means designing smooth and seamless ways for users to move around
a website or app without interruptions or confusion.

• Global (Top-Level) Navigation

• Breadcrumbs

• Search box

• Inline Linking

• Sitemap Footer
GLOBAL (TOP-LEVEL) NAVIGATION
• Problem:
Users need a quick way to access the main sections of a website or app, but without
clear global navigation, they can feel lost or unsure where to go next.

• Solution:
Use a top-level navigation bar that remains visible across all pages. It should list the
key sections of the site, helping users jump between areas easily.
GLOBAL (TOP-LEVEL) NAVIGATION
BREADCRUMBS
• Problem:
On multi-level websites, users can lose track of where they are and how they got
there, making it hard to navigate back to previous sections.

• Solution:
Display a breadcrumb trail showing the path from the homepage to the current
page, allowing users to easily backtrack or jump to higher levels.
BREADCRUMBS
SEARCH BOX
• Problem:
Users often come to a site looking for something specific and may not want to
browse through menus or categories to find it.

• Solution:
Include a prominent search box that lets users enter keywords and quickly locate
products, pages, or information.
SEARCH BOX
INLINE LINKING
• Problem:
Users reading content might need related information, but having to leave the page
or hunt for it elsewhere disrupts the reading flow.

• Solution:
Embed links directly within the text to connect users to related pages or resources,
offering deeper context without interrupting the experience.
INLINE LINKING
SITEMAP FOOTER
• Problem:
Users sometimes struggle to find certain pages if they’re buried deep in the website
or not obvious in the main navigation.

• Solution:
Provide a sitemap in the website footer that lists key pages and sections, giving
users an alternative way to explore the site.
SITEMAP FOOTER
4. SIMPLIFYING DATA ENTRY
Making forms and input fields easy and quick to use so users can enter information with
minimal effort and fewer mistakes. This might include clear labels, helpful error
messages, auto-fill options, and logical field layouts.

• Autocomplete Suggestions

• Input fields

• Refined Search

• Forgiving Format

• Event Calendar

• Input Hints
AUTOCOMPLETE SUGGESTIONS
• Problem:
Typing long or complex text into input fields can be slow and error-prone for users.

• Solution:
Provide suggestions as the user types to speed up data entry and reduce typing
effort.
AUTOCOMPLETE SUGGESTIONS
INPUT FIELDS
• Problem:
Users might be confused about what information is required or how to fill in fields
properly.

• Solution:
Design clear, well-labeled input fields that show users exactly what to enter, with
consistent styles and spacing.
INPUT FIELDS
REFINED SEARCH
• Problem:
Users may get overwhelmed with too many search results and can’t easily narrow
down to what they’re looking for.

• Solution:
Offer filters or advanced search options so users can refine their results by specific
criteria.
REFINED SEARCH
FORGIVING FORMAT
• Problem:
Users often enter data in formats that don’t exactly match system requirements,
leading to errors.

• Solution:
Design input fields to accept multiple formats (e.g., phone numbers, dates) and
intelligently reformat or correct entries.
FORGIVING FORMAT
EVENT CALENDAR
• Problem:
Users need an easy way to see scheduled events or choose dates without confusion.

• Solution:
Provide an interactive calendar that visually shows dates and events, making
selection quick and clear.
EVENT CALENDAR
INPUT HINTS
• Problem:
Users might not know what specific information to enter into a field.

• Solution:
Input hints help users establish what information should be entered into an input
field. They are concise descriptions given inside—or just beside—the data entry
fields that guide users to enter the right information.
INPUT HINTS
5. SOCIAL ASPECTS OF UI DESIGN
Designing interfaces that encourage interaction, sharing, and community engagement
among users. It’s about building trust, enabling communication, and creating features like
comments, likes, shares, and user profiles to make digital experiences more social and
connected.

• Achievements

• Leader Board

• Starred Reviews

• Sign-in Reminders

• Update Alerts
ACHIEVEMENTS
• Problem:
Users may lose motivation over time if there’s no recognition for their progress or
contributions.

• Solution:
Provide achievements or badges to reward milestones and encourage ongoing
engagement.
ACHIEVEMENTS
LEADER BOARD
• Problem:
Users might lack a sense of competition or community, reducing engagement.

• Solution:
Show a leaderboard where users can compare their progress or scores against
others, adding a competitive and social element.
LEADER BOARD
STARRED REVIEWS
• Problem:
Users often struggle to decide which product or service to choose when options are
numerous.

• Solution:
Display starred ratings and reviews from other users to guide decisions and build
trust.
STARRED REVIEWS
SIGN-IN REMINDERS
• Problem:
Users might forget to sign in, missing out on personalized features or saved
progress.

• Solution:
Gently remind users to sign in for a better experience, using subtle prompts rather
than aggressive pop-ups.
SIGN-IN REMINDERS
UPDATE ALERTS
• Problem:
Users may miss important updates or new features, leading to outdated
experiences or missing functionality.

• Solution:
Provide clear, concise alerts to inform users about updates and improvements.
UPDATE ALERTS
DARK PATTERNS
Dark Patterns are deceptive design tricks used in websites and apps to make users do
things they might not really want to do. Instead of helping the user, they serve the
business’s interests—like making people sign up for things, spend money, or share
data without realizing it.

Why are Dark Patterns bad?

• They trick users into actions they didn’t intend.

• They create frustration and damage trust.

• They often lead to complaints and even legal issues for companies.
Common Types of Dark Patterns
Hidden Costs

• Problem: Costs suddenly appear at checkout.

• Example: An online store adds extra fees right before you pay.

Bait and Switch

• Problem: Users think one thing will happen, but something else does.

• Example: Clicking a button to close a popup but ending up on a subscription page.

Common Types of Dark Patterns
Forced Continuity

• Problem: Free trials that start charging users without clear warning.

• Example: Streaming services that automatically charge after a free month without reminders.

Trick Questions

• Problem: Forms use confusing language to get users to agree to things.

• Example: “Uncheck this box if you don’t want to receive emails.”

Roach Motel

• Problem: Easy to sign up, but very hard to cancel.

• Example: Subscription services making you call customer service to cancel.

Best Practice: Stay Ethical!

• Always be honest with your users.

• Don’t hide information or make it hard to

leave.

• A good UX puts users first!

LAB TASK
• Open the Udemy home page design that you created in Figma.

• Go through your design carefully and identify all the UI Design Patterns used in the
page.

For each pattern you find:

• Point to it in your Figma file.

• Write down the name of the pattern (e.g. Navigation Menu, Tabs, Cards, Hero Banner,
etc.).

• Briefly explain why this pattern is used and how it helps the user experience.

This exercise will help you recognize patterns in real-life interfaces and understand
how they improve usability and design consistency.