Table of Contents
And here we are, this time the last article of the series that started with UX Patterns: Learn how to take advantage of them , then a second part with a library with definitions and examples for UX patterns (do never confuse them with UI patterns!) and finally this last article which is devoted to UI patterns at last.
Similar to the preceding installment, I’ve compiled an extensive UI pattern library in this article. Each entry encompasses the pattern type, definition, and, more importantly, UI pattern examples to understand when and how to apply them. It’s worth noting that, while this article is quite long (particularly when considering the previous installments in this series), it remains a work in progress. It will continue to evolve with additional materials, patterns, examples, and more. In essence, it condenses what you might learn in months at a UI academy into a single, ever-expanding article.
It’s very important to understand that UI patterns, although they may bear a resemblance to UI elements, are fundamentally distinct. Patterns are recurring processes that users readily recognize, and as a result, they interact with the elements that constitute such patterns. For instance, the choice of font in a design can be considered an element or even a token, but it does not constitute a pattern.
Lastly, I’ve exclusively incorporated UI patterns relevant to mobile apps and web design in this article. This represents only the tip of the iceberg, as there are patterns for physical user interfaces and other realms. However, the vast majority of readers of these articles seek insights into mobile and desktop design, along with some aspects of development or implementation. Additionally, considering the length of this article and its predecessors, delving into areas like haptic controls, aural conventions, or non-digital visual patterns would require an extensive amount of time to cover comprehensively. Since there are experts who have already write about these areas extensively, I’ve chosen not to duplicate their efforts for the time being.
Nevertheless, I commit to write about UI for domains beyond mobile apps and web design in the future. I’ve already touched upon certain aspects in articles related to Quantum UX, and there’s a video in Spanish that expands on this subject. Rest assured, I will address that uncharted territory, often overlooked by most UI designers.
List of UI patterns
As mentioned in the previous post, I drew inspiration from the excellent content on the UI Patterns website. I removed patterns that were actually UX patterns or fell into a gray area. I also refined the categorization for greater accuracy and did not introduce any new patterns, allowing for easy comparison with the complete list on their site. Kudos to UI Patterns for their big efforts!
UI Pattern Library: Communication UI patterns
Chat
Type: Communication
Definition: Real-time messaging between users or with automated chatbots. Chat facilitates interactive and responsive communication.
Usage: Chat functionality enables real-time communication between users or with automated chatbots within digital platforms. It serves as a dynamic and interactive medium for fostering communication and engagement.
Notifications
Type: Communication
Definition: Alerts or messages that inform users of important updates, events, or actions. Notifications keep users informed and engaged.
Usage: Notifications are alerts or messages delivered to users to inform them of important updates, events, or actions within an application or platform. They play a crucial role in keeping users informed and engaged with relevant information.
UI Patterns Library: Content Management patterns
Content-related UI patterns are established methods in user interface design for displaying, structuring, and manipulating content. These patterns provide a guide for arranging information in a way that is straightforward and consistent, thus simplifying the interface for the user.
Content Presentation patterns dictate the arrangement of information on the screen. The focus here is on clarity and the immediate legibility of the content. Various layouts such as cards, lists, grids, and tables fall under this category, each serving a specific purpose in the way content is visually communicated to the user.
Content Organization patterns structure information to facilitate easy navigation. They are the frameworks that underpin how content is categorized and accessed within an application or website. Techniques like hierarchical organization, tagging, and categorized navigation are part of this group, all contributing to a logical flow of information that guides the user from general to specific.
Content Refinement patterns enable users to personalize their content interaction. Through search bars, filter options, and sorting tools, users can engage with a user interface to pinpoint the information relevant to their needs or interests. These patterns offer a dynamic element to the interface, allowing for an adaptable presentation of content based on user-driven criteria.
Each category of content UI patterns serves to enhance the user’s interaction with information, aiming for an experience that is intuitive and efficient without unnecessary complexity.
Archive
Type: Content Organization
Definition: A collection of past content or records, often categorized by date or topic. Archives assist users in accessing historical information.
Usage: Archives are repositories of historical content or records, organized typically by date or topic. They play a crucial role in assisting users in accessing and retrieving past information, contributing to efficient content management and retrieval.
Categorization
Type: Content Organization
Definition: Grouping content or items into categories based on shared characteristics. Categorization simplifies content discovery.
Usage: Categorization involves the practice of organizing content or items into distinct categories based on common attributes or characteristics. This approach simplifies content discovery for users, enabling them to quickly locate and access relevant information.
Sort By Column
Type: Content Organization
Definition: Allowing users to arrange content by specific criteria or columns. Sorting options improve content accessibility.
Usage: Sorting options, such as “Sort By Column,” enable users to arrange content based on specific criteria or columns. This functionality enhances content accessibility, allowing users to organize and view information in a way that suits their preferences.
Tag Cloud
Type: Content Organization
Definition: A visual representation of tags or keywords, often used for content categorization. Tag clouds aid in content discovery.
Usage: Tag clouds provide a visual representation of tags or keywords associated with content. They are commonly used for content categorization and organization. Tag clouds facilitate content discovery by visually emphasizing frequently used tags or keywords.
Tagging
Type: Content Organization
Definition: Assigning keywords or tags to content for categorization and easy retrieval. Tagging improves content organization.
Usage: Tagging involves the practice of assigning keywords or tags to content items, making it easier to categorize and retrieve them later. This approach significantly improves content organization and searchability.
Article List
Type: Content Presentation
Definition: A structured list of articles or posts, typically displayed in chronological or thematic order. Article lists offer easy access to content.
Usage: Article lists are structured collections of articles or posts, often presented in either chronological or thematic order. They provide users with a straightforward and convenient means of accessing and navigating through content.
Cards
Type: Content Presentation
Definition: Individual content containers with a title, image, and brief description. Cards organize and display content in a visually appealing manner.
Usage: Cards are visual containers that typically include a title, image, and concise description of individual pieces of content. They are used to organize and present content in an aesthetically pleasing and structured manner, facilitating user engagement and exploration.
Carousel
Type: Content Presentation
Definition: A dynamic element that displays a series of images or content items in a rotating manner. Carousels provide a space-efficient way to showcase content.
Usage: Carousels are dynamic interface elements that showcase a series of images or content items in a rotating or cycling manner. They are employed to efficiently utilize screen space while engaging users with a variety of visual content.
Event Calendar
Type: Content Presentation
Definition: A calendar displaying scheduled events or activities. Event calendars provide a visual overview of upcoming engagements.
Usage: Event calendars are user interface components that display scheduled events or activities in a structured calendar format. They offer users a visual overview of upcoming engagements, making it easier to plan and manage their schedules.
Gallery
Type: Content Presentation
Definition: A display of images or media items, often with thumbnail previews. Galleries showcase visual content attractively.
Usage: Galleries are user interface elements that showcase collections of images or media items, often with thumbnail previews. They are designed to visually present visual content in an attractive and organized manner, enhancing the user experience.
Pagination
Type: Content Presentation
Definition: Dividing content into separate pages or sections, often with numbered links for navigation. Pagination improves content accessibility.
Usage: Pagination involves the division of content into separate pages or sections, often accompanied by numbered links or controls for navigation. It enhances content accessibility and allows users to navigate through lengthy content more efficiently.
Slideshow
Type: Content Presentation
Definition: A dynamic display of images or content items that automatically cycle. Slideshows showcase content in an engaging manner.
Usage: Slideshows are dynamic displays of images or content items that automatically cycle through a series of visuals. They are used to showcase content in an engaging and visually appealing manner, often capturing the user’s attention.
Structured Format
Type: Content Presentation
Definition: Presenting content in a well-organized, structured manner. Structured formats enhance readability and comprehension.
Usage: Structured formats involve presenting content in a well-organized and coherent manner, ensuring readability and comprehension. This approach is particularly effective for conveying information clearly and logically.
Thumbnail
Type: Content Presentation
Definition: A small, scaled-down image representing larger content. Thumbnails provide visual previews of content.
Usage: Thumbnails are small, scaled-down images that serve as visual previews for larger content items. They are commonly used to provide users with a quick glimpse or overview of content, facilitating their decision-making process.
Search Filters
Type: Content Refinement
Definition: Criteria or options that users can apply to refine search results. Search filters assist users in finding specific content.
Usage: Search filters are criteria or options that users can apply to refine and narrow down search results. They assist users in finding specific content or information within a larger dataset, improving the search experience.
Table Filter
Type: Content Refinement
Definition: Allowing users to filter and refine data within tables. Table filters facilitate data exploration and analysis.
Usage: Table filters enable users to refine and narrow down data displayed within tables. They offer an efficient way to explore and analyze data, making it easier to find specific information or patterns.
E-commerce UI pattern examples
Cart (or Shopping Cart)
Type: E-commerce
Definition: A virtual cart displaying selected items for purchase in online shopping. Shopping carts streamline the checkout process.
Usage: Shopping carts are virtual containers that display the items selected by users for purchase during online shopping. They streamline the checkout process by allowing users to review and manage their selections before completing their purchase.
Coupon
Type: Promotion
Definition: A discount or promotional code that users can apply during checkout. Coupons incentivize purchases and offer savings.
Usage: Coupons are promotional codes or discounts that users can apply during the checkout process in online shopping or e-commerce platforms. They serve as incentives to encourage purchases and provide cost savings to customers.
Checkout Process
Type: E-commerce
Definition: The checkout process is a UI pattern where customers finalize their e-commerce transactions, entering shipping, billing, and payment information.
Usage: It is used to collect necessary details from customers to complete their purchase, typically featuring form fields, order summaries, and confirmation steps.
Order Confirmation
Type: E-commerce
Definition: Order confirmation is the final step in the checkout process, providing customers with a summary of their purchase, order number, and details about order processing.
Usage: This reassures customers that their transaction has been successfully completed and provides them with tracking information for their order.
Payment Options
Type: E-commerce
Definition: Payment options are the various methods by which customers can complete a purchase, including credit cards, digital wallets, bank transfers, or cash on delivery.
Usage: By providing multiple payment methods, e-commerce platforms accommodate customer preferences and streamline the checkout process for higher conversion rates. Payment options is both a UI as well as a UX pattern.
Paywall
Type: Monetization / E-commerce
Definition: Restricting access to premium content or features behind a payment barrier. Paywalls generate revenue and incentivize subscriptions.
Usage: Paywalls are mechanisms used to restrict access to premium content or features within an application or website, requiring users to make a payment or subscribe to gain access. They serve as revenue-generating tools and incentivize subscriptions.
Pricing Table
Type: Pricing Presentation
Definition: A visual comparison of different pricing options for products or services. Pricing tables assist users in selecting the most suitable plan.
Usage: Pricing tables provide users with a visual comparison of different pricing options for products or services. They assist users in making informed decisions by presenting the features and costs of various plans or offerings.
Product Page
Type: E-commerce
Definition: A dedicated page providing detailed information about a specific product. Product pages aid in product exploration and purchasing decisions.
Usage: Product pages are dedicated sections or pages within e-commerce platforms that provide comprehensive and detailed information about a specific product. They help users in product exploration and making informed purchasing decisions.
Product Recommendations
Type: E-commerce
Definition: Product recommendations are automated suggestions presented to users, typically based on their browsing history, purchase history, or user profile data.
Usage: This pattern serves to personalize the user’s shopping experience and potentially increase order value by suggesting relevant additional products.
Quick View
Type: E-commerce
Definition: Quick view is a pattern that allows users to preview product details in a modal or popup without leaving their current browsing context.
Usage: Employed to streamline shopping by minimizing the number of page loads and allowing users to quickly add items to their cart or wishlist.
Wishlist
Type: E-commerce
Definition: A wishlist is a feature that allows users to save items they are interested in for future reference without adding them to the shopping cart.
Usage: Users utilize the wishlist to compile a selection of items for future review or purchase, which enhances the shopping experience by enabling comparison and the preservation of potential choices. While similar to favorites—and occasionally using the same terminology—the distinction lies in the application of wishlists primarily in e-commerce. A wishlist indicates a desire to own something and may become obsolete, for example, if the product is no longer available, whereas a favorite typically refers to something the user already possesses.
Forms UI patterns library
Calendar Picker
Type: Input Control
Definition: A UI element for selecting dates from a calendar view. Calendar pickers simplify date-related input.
Usage: Calendar pickers are user interface elements that allow users to select dates conveniently from a visual calendar view. They simplify the process of entering date-related information, ensuring accuracy and ease of use.
Copy Box
Type: Input Control
Definition: A container for copying text or code snippets with a single click. Copy boxes simplify the sharing of information.
Usage: Copy boxes are user interface elements designed to simplify the process of copying text or code snippets. They offer a convenient one-click solution for users to quickly share information from one location to another.
Expandable Input
Type: Input Control
Definition: An input field that expands in size as users enter content. Expandable inputs accommodate varying input lengths.
Usage: Expandable inputs are user interface elements that dynamically adjust in size as users enter content. They are particularly useful for accommodating varying input lengths, ensuring a seamless user experience.
Autocomplete
Type: Input Enhancement
Definition: A feature that suggests and completes user input as they type. Autocomplete streamlines data entry and search processes.
Usage: Autocomplete is a user interface feature that offers real-time suggestions and completion options to users as they type. This functionality significantly streamlines data entry tasks and search processes, enhancing overall user efficiency.
Input Feedback
Type: Input Enhancement
Definition: Visual or auditory cues indicating the status or correctness of user input. Input feedback assists users in form validation and interaction.
Usage: Input feedback involves the use of visual or auditory cues to inform users about the status or correctness of their input within an application. It plays a crucial role in form validation and interaction, helping users understand the outcomes of their actions.
Input Prompt
Type: Input Enhancement
Definition: A descriptive label or placeholder text within an input field. Input prompts guide users on what to enter.
Usage: Input prompts are descriptive labels or placeholder text displayed within input fields. They guide users by providing instructions or hints on what information to enter in a particular field, improving user input accuracy.
Interaction UI pattern examples
Completeness Meter
Type: Interaction / Progress Tracking
Definition: A visual indicator showing the progress or completeness of a task or profile. Completeness meters motivate users to fill out profiles or complete actions.
Usage: Completeness meters are graphical elements that visually represent the progress or completeness of a specific task, profile, or action within an application or platform. They serve as motivational tools, encouraging users to complete tasks and profiles by providing a sense of accomplishment.
Drag and Drop
Type: Interaction
Definition: The ability to click and move objects or elements using a pointing device. Drag and drop enhances user control and interaction.
Usage: Drag and drop is a user interaction feature that enables users to click and move objects or elements within an interface using a pointing device, such as a mouse. This functionality enhances user control and interaction, allowing for intuitive rearrangement of elements.
Image Zoom
Type: Interaction
Definition: The ability to enlarge or zoom in on images for a closer view. Image zoom enhances visual detail examination.
Usage: Image zoom functionality allows users to interactively enlarge or zoom in on images, providing a closer and more detailed view of visual content. It enhances the user’s ability to examine visual details within images or graphics.
Modal
Type: Interaction
Definition: A temporary overlay or dialog box that requires user interaction before returning to the main interface. Modals capture user attention for specific actions.
Usage: Modals are temporary overlay elements or dialog boxes that appear within an application’s interface. They require user interaction before returning to the main interface, capturing user attention for specific actions or tasks.
Morphing Controls
Type: Interaction
Definition: User interface elements that transform or change appearance during interaction. Morphing controls provide visual feedback and engagement.
Usage: Morphing controls are user interface elements that undergo visual transformations or changes in appearance during user interaction. They provide visual feedback and engage users by responding dynamically to their actions.
Progressive Disclosure
Type: Interaction
Definition: Revealing additional information or options progressively to avoid overwhelming users. Progressive disclosure simplifies complex interfaces.
Usage: Progressive disclosure is a design approach that involves revealing additional information or options to users gradually, avoiding overwhelming them with excessive choices or complexity. It simplifies complex interfaces by presenting information in a structured and manageable manner.
Navigation UI Patterns
Breadcrumbs
Type: Navigation
Definition: A navigation aid that displays the user’s path through a website or app hierarchy. Breadcrumbs enhance user orientation.
Usage: Breadcrumbs are navigational elements that display the user’s path or route within a website or app’s hierarchical structure. They enhance user orientation and provide context for users as they navigate through different sections or levels of content.
Fat Footer
Type: Navigation
Definition: A footer section with extended navigation options and content links. Fat footers enhance website navigation and accessibility.
Usage: Fat footers are expanded footer sections within websites that provide additional navigation options and content links. They serve to enhance website navigation, making it easier for users to access important information and explore various sections of the site.
Home Link
Type: Navigation
Definition: A direct link to the homepage or main landing page of a website or app. Home links offer quick navigation to the starting point.
Usage: Home links provide users with direct access to the homepage or main landing page of a website or application. They offer a convenient means of quickly navigating to the starting point of the platform.
Horizontal Dropdown Menu
Type: Navigation
Definition: A menu that expands horizontally to reveal additional navigation options. Horizontal dropdown menus conserve vertical space.
Usage: Horizontal dropdown menus are navigation menus that expand horizontally to reveal additional navigation options or submenus. They are used to conserve vertical screen space while providing users with access to a broader set of navigation choices.
Module Tabs
Type: Navigation
Definition: Tabbed navigation that organizes content into distinct modules or sections. Module tabs aid in content organization and access.
Usage: Module tabs are tabbed navigation elements that categorize and organize content into distinct modules or sections within an application or website. They enhance content organization and facilitate user access to specific areas of interest.
Navigation Tabs
Type: Navigation
Definition: Tabs or links for navigating between different sections or pages of a website or app. Navigation tabs facilitate easy content access.
Usage: Navigation tabs are tabs or links placed within a website or app’s interface to enable users to navigate easily between different sections or pages. They streamline content access and help users move between relevant areas.
Vertical Dropdown Menu
Type: Navigation
Definition: A menu that expands vertically to display navigation options. Vertical dropdown menus optimize screen space.
Usage: Vertical dropdown menus are navigation menus that expand vertically to reveal additional navigation options or submenus. They are employed to optimize screen space while offering users access to a broader set of navigation choices.
Accordion
Type: Navigation / Content
Definition: A collapsible element that conserves screen space by hiding content until selected. Accordion patterns facilitate organized content display.
Usage: Accordions serve as a user interface element that conserves valuable screen space by initially hiding content until a user selects a specific section. This feature aids in maintaining organized and clutter-free content presentation. They can be used both in content as in navigation items.
Security UI Patterns Library
Captcha
Type: Security
Definition: A challenge-response test to determine if a user is human and not a bot. Captchas enhance security by preventing automated actions.
Usage: Captchas are security mechanisms designed to distinguish between human users and automated bots. They do so by presenting a challenge-response test that typically involves identifying and interacting with specific elements, such as distorted characters or objects. Captchas play a crucial role in safeguarding websites and applications from automated and potentially malicious activities.
Password Strength Meter
Type: Security
Definition: An indicator showing the strength or complexity of a user’s password. Password strength meters promote secure password creation.
Usage: Password strength meters are visual indicators that assess and display the strength or complexity of a user’s chosen password. They encourage users to create secure passwords by providing feedback on their password’s strength.
Social Interaction UI Patterns
Follow
Type: Social Interaction
Definition: The action of subscribing to or following another user’s updates or content. Follow features foster social connections and content updates.
Usage: The “Follow” feature enables users to subscribe to or follow other users’ updates, posts, or content within social platforms or online communities. It fosters social connections and keeps users updated on the activities of the users they follow.
Friend
Type: Social Interaction
Definition: The action of adding another user as a friend or connection within a social platform. Friend connections enable private interactions and sharing.
Usage: “Friend” interactions involve the action of adding another user as a friend or connection within a social platform or online community. These connections typically enable private interactions, sharing of content, and maintaining social relationships within the platform.
Reaction
Type: Social Interaction
Definition: Expressing emotions or responses to content using emojis, reactions, or similar features. Reactions enhance user engagement and interaction.
Usage: Reactions involve users expressing their emotions or responses to content, often through the use of emojis, reactions, or similar features. These features enhance user engagement and interaction by providing a quick and expressive way to respond to content.
User related UI patterns library
User related patterns are categorized to align with various user interactions and interface requirements. User Configuration patterns comprise elements such as settings that users interact with to alter and save their preferences within an application or website. These patterns allow users to adjust their experience based on individual requirements.
User Feedback patterns provide a system for users to express their opinions on the content, products, or services they encounter. Ratings and reviews are typical examples, serving as a direct channel for users to communicate their evaluations.
For new users interacting with a product, User Onboarding patterns offer guidance. These patterns range from account creation to instructional overlays and are designed to facilitate users’ understanding of the product’s functions.
User Preference patterns recognize and store user selections to enhance the efficiency of future interactions. Such patterns often include mechanisms for users to mark items as ‘favorites,’ enabling quicker access to preferred content in subsequent sessions.
Each category of UI patterns addresses a specific aspect of the user experience, aiming to streamline interaction by providing familiar and tested interface elements.
Settings
Type: User Configuration
Definition: A section where users can customize app or website preferences and options. Settings enable personalization and control.
Usage: Settings sections within applications or websites provide users with the ability to customize preferences and configure various options to tailor their experience. This personalization and control enhance the user’s overall satisfaction with the platform.
Rate Content
Type: User Feedback
Definition: Allowing users to provide ratings or feedback on content, products, or services. Content rating systems gather user opinions and improve quality.
Usage: Content rating systems allow users to provide ratings or feedback on content, products, or services they have encountered. This user feedback helps gather opinions and insights, contributing to the improvement of content quality.
Account Registration
Type: User Onboarding
Definition: The process of creating an account or profile on a website or app. Account registration enables personalized experiences and data storage.
Usage: Account registration encompasses the steps and procedures involved in creating a user account or profile within a website or application. This essential process facilitates personalized user experiences and allows for the storage of user-specific data.
Blank Slate
Type: User Onboarding
Definition: A clean, empty state within an app or website, guiding users on how to begin. Blank slates provide a starting point for interaction.
Usage: Blank slates refer to clean and empty states within an application or website interface. They are designed to guide users on how to initiate interactions or actions, offering a clear starting point for user engagement.
Coachmarks
Type: User Onboarding
Definition: Highlighted visual cues or tips that guide users through app features or actions. Coachmarks offer on-screen guidance for newcomers.
Usage: Coachmarks are graphical cues or visual tips strategically placed within an application’s interface to provide guidance to new users. They serve as on-screen prompts, helping newcomers become familiar with app features and functionalities, but they’re also useful for many purposes (see image above)
Inline Hints
Type: User Onboarding
Definition: Small, contextual tips or hints integrated directly within the interface. Inline hints offer guidance during user interaction.
Usage: Inline hints are subtle and contextual tips or hints that are seamlessly integrated within the user interface. They provide guidance to users during their interaction with an application, helping them understand and navigate features or actions more effectively.
Playthrough
Type: User Onboarding
Definition: Guiding users through a step-by-step interactive experience to learn or understand an app or game. Playthroughs facilitate user onboarding.
Usage: Playthroughs involve guiding users through a step-by-step interactive experience, often used to help them learn and understand the functionalities of an app or game. They play a significant role in facilitating user onboarding.
Walkthrough
Type: User Onboarding
Definition: A guided tour or tutorial that introduces users to app features and functionality. Walkthroughs ease users into an app.
Usage: Walkthroughs are guided tours or tutorials designed to introduce users to the features and functionality of an application. They serve as effective tools for easing users into the app and helping them become familiar with its key aspects.
Favorites
Type: User Preference
Definition: A feature allowing users to mark and save content or items for easy access. Favorites help users track and revisit preferred items.
Usage: The “Favorites” feature allows users to mark and save specific content or items, making it easy for them to access and revisit their preferred selections. This feature enhances user convenience and personalization.
Wrapping it up
Phew! That was quite a ride!
Well, I hope you enjoyed and learned something new. I’m sorry about the length (even though I made it extremely short, as you probably noticed), but this is as short as I could make it, and I left a lot aside, focusing only on the most used UI patterns.
On the bright side, if you made it to this point, including the previous articles, you probably have learned more than what you would in any online course. These three articles are basically the gist of a whole year of the HCI career at any university!
Fabio is Bachelor in Marketing, Master in Human Computer Interaction and a UX Evangelist.
He worked for some of the biggest companies in the world. As such, he has developed entire systems and businesses for clients of all sizes.
We can improve your business!
Let us help you with the best solutions for your business.
It only takes one step, you're one click away from getting guaranteed results!
I want to improve my business NOW!