Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
12 views

Exploring UI Interaction Patterns

uiux

Uploaded by

sureshsuresh95176
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Exploring UI Interaction Patterns

uiux

Uploaded by

sureshsuresh95176
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Exploring UI

Interaction
Patterns
Interaction patterns are the building blocks of a user interface, defining how
users interact with digital products.

by Rakesh SP
Navigation Patterns

1 Top Navigation
The most common type, found across most websites, allowing users
to move between sections.

2 Side Navigation
Used in applications, dashboards, and websites, providing a vertical
menu along the side.

3 Breadcrumbs
Displays a trail of links, showing the user's path through the website,
improving usability.

4 Footer Navigation
Often used for legal information, copyright, and links to relevant
pages.
Form Patterns
Basic Forms Advanced Forms Wizard Forms

Essential forms, such as login forms, Forms with complex features, Break down complex forms into
signup forms, and contact forms. including multiple steps, conditional smaller steps, simplifying the
logic, and validation rules. process and guiding users.
Card Patterns
Content Cards
Display information in a visually appealing and organized way, often
used for articles, products, and events.

Action Cards
Promote a specific action, such as signing up for a newsletter,
downloading a report, or buying a product.

Profile Cards
Provide a concise overview of a user's profile, including their name,
picture, and contact information.
Carousel Patterns
Single Item Carousel

1 Displays a single item at a time, allowing users to navigate


through a set of items.

Multi-Item Carousel

2 Displays multiple items simultaneously, allowing users to


scroll through a set of items.

Infinite Carousel

3 Continues to cycle through items endlessly, providing a


continuous visual experience.
Input and Feedback
Patterns
Input Feedback

Text Input Placeholder text, real-time


validation, error messages

Checkbox Toggle state, visual feedback on


selection

Dropdown Highlight selected option, display


list of options
Content Display
Patterns

Grid Layout
Organizes content into a structured grid, providing visual hierarchy and
improving readability.

List Layout
Displays content in a vertical list, ideal for presenting items sequentially, such
as blog posts or product listings.

Table Layout
Presents data in a structured format, suitable for displaying large amounts of
information.

Gallery Layout
Displays images or videos in a visually appealing way, often used for photo
galleries or product showcases.
Interaction Patterns

1 Hover
Provides visual feedback when the user hovers over an
element, commonly used for menus and buttons.

2 Click
Triggers an action when the user clicks on an element,
commonly used for buttons, links, and forms.

3 Drag & Drop


Allows users to move elements by dragging them with their
mouse or touch, commonly used for arranging items or
uploading files.

4 Swipe
A touch gesture used to navigate through content,
commonly used in mobile apps and carousels.
Responsive Design Patterns

Desktop Layout Tablet Layout Mobile Layout


Optimized for larger screens, Adapts to smaller screens, maintaining Prioritizes usability on small screens,
providing a spacious and detailed essential content and reducing clutter. using touch-friendly interactions and
layout. simplified navigation.

You might also like