When to stick with conventions and when to innovate

When it comes to interface design, knowing whether to stick to tried and true UX patterns or break the mold can make a big difference in your product’s reception.

Also read What is UX Design or User Experience Design?

The comfort of familiarity

There’s a reason why familiar UX patterns are so widespread: they work.

They allow users to navigate new apps with ease, bringing a sense of immediate comfort and accessibility.

Take the swipe-to-delete gesture used in many mobile applications. This intuitive action allows users to efficiently manage lists—like emails or messages—with a simple, horizontal swipe.

This gesture has become second nature for smartphone users, facilitating ease of use without the need for detailed instructions.

Common UX patterns in mobile apps

Navigation bar: Easily accessible at the top or bottom of the screen.
Hamburger menu: A space saver that keeps your app looking neat.
Infinite scroll: Keeps users engaged by continuously loading content as they scroll, perfect for social media.
Pull-to-Refresh: A gesture-based feature that allows users to update content by simply pulling down on the screen, widely used in social media feeds and news apps.
Tabs: Allow for easy toggling between views without losing context.
Modal Windows: This pattern is often used for user confirmations, settings adjustments, or to display supplementary content.
Onboarding Tutorials: They aim to introduce the core functionalities in an easy-to-digest format to help users get started with the app quickly.
Search and Filter: This pattern is crucial in apps with large amounts of data, such as e-commerce platforms or content libraries.
FAB (Floating Action Button): Commonly found in material design interfaces, this UI element is a circular button that floats above the UI and promotes a primary action.
Skeleton Screens: This pattern can enhance the perception of speed as it suggests that content is loading progressively.

Common UX patterns for web design

Carousel: Used to showcase multiple items horizontally, allowing users to click through or auto-rotate between elements, commonly used for images, products, or blog posts.
Breadcrumb Navigation: Provides links back to each previous page the user has navigated through to get to the current page, typically seen in e-commerce sites or websites with complex hierarchical structures.
Card Layout: Displays information in rectangular containers or “cards.” This pattern is particularly effective for organizing multiple pieces of content in a grid format, making it easy to scan and select.
Mega Menu: An expanded menu that appears when a user hovers or clicks on a dropdown menu, often used by websites with extensive navigation options. It allows users to see all their choices at once without deep navigation.
Sticky Navigation: Keeps the navigation menu in a fixed place on the screen as the user scrolls down the page, ensuring that navigation options are always accessible.
Parallax Scrolling: A visual effect where background images move by the camera slower than foreground images, creating an illusion of depth on the page, used for engaging storytelling or to draw attention to certain elements.
Progress Bar: Indicates how far along a user is in a multi-step process, such as completing a purchase or filling out a survey. This helps increase user engagement by showing progress and how much is left to complete.
Lazy Loading: Loads web content progressively as the user scrolls down the page, rather than loading the entire page immediately. This can improve page load times and reduce bandwidth usage.
Hero Image: Features a large banner image prominently placed on a web page, usually at the top, often accompanied by text and a call-to-action. It’s designed to grab the user’s attention or highlight important content.
Modal Window: Similar to mobile, this pattern involves a window that pops up over the main content to focus the user’s attention on a specific task or message. This can be used for logins, promotions, or crucial alerts.

The case for innovation

Sometimes, sticking to the norm just doesn’t cut it.

That’s when innovation becomes key.

Do you remember the iPod’s Click Wheel? It was a game-changer for navigating through thousands of songs with a simple, fluid motion, offering a perfect solution to a specific user need that traditional buttons couldn’t meet.

Here are some other examples of innovative UX patterns that have had significant impacts:

Tinder’s Swipe: Revolutionized the dating app interface by introducing a simple swipe right for interest and swipe left for disinterest, which has since been adopted by numerous other applications in various industries.
iPhone’s Multi-Touch Screen: Introduced the concept of multi-touch gestures to smartphones, allowing users to interact with their devices using multiple fingers for actions like pinching to zoom and swiping to scroll.
Snapchat’s Disappearing Messages: Changed the way users think about privacy and ephemerality in digital communications by allowing messages, pictures, and videos to disappear after being viewed.
Amazon’s One-Click Ordering: Simplified the online shopping experience by allowing users to make purchases with a single click, streamlining the checkout process significantly.
Facebook’s Infinite Scroll: Altered how content is consumed by allowing users to continuously scroll through a seemingly endless feed of information without ever reaching a “bottom,” keeping users engaged for longer periods.

When thinking about innovating, consider these:

Clear improvement: The new design should clearly enhance the user experience.
Intuitive use: It should be easy to grasp, or at least come with quick, painless onboarding.
Scalability: Make sure the new design works across different platforms and devices.

Finding the right balance

Deciding between familiar UX patterns and innovative design often hinges on your specific situation:

Who are your users? Are they tech-savvy early adopters or a more general audience?
What are your goals? Are you aiming for fast adoption or trying to shake up the market?
What does your research say? Understanding user interactions and pain points can highlight opportunities for innovation.

Every design decision should be a balance.

Familiarity breeds comfort and ease of use, but innovation can set you apart and delight your users in unexpected ways.

Are you ready to take your product to the next level with thoughtful design decisions?

Let’s chat and see how we can blend familiarity with innovation to create something truly unique for your users.

Also read Innovation, design, and concepts: a guide to best practices