Fresh UI Design Patterns Gaining Traction

by in Design on 5th Jun 2014 · 0 Comment

In this article, Chris Bank of UXPin – The UX Design App details many of the best UI design patterns that have cropped up in modern web sites and mobile apps recently, and examples of how they’re used in popular web and mobile products.

Picasso once said (and Steve Jobs echoed), "Good artists borrow, great artists steal." This may be one of the most misunderstood and misused creative phrases of all time, but also the most important in a time when product design and development trends have exploded.

The controversy of this quote comes from its simplicity and, therefore, openness to interpretation. Out of context, it fails to clarify the difference between copying and internalizing; originality and innovativeness; aping and assimilating. It’s not an excuse to be lazy. Rather, encouragement to learn from the work of others, build upon it, and own the products you’ve designed and built to solve real, focused problems of people - those for whom you ultimately design.

Fresh UI Design Patterns Gaining Traction

The team at UXPin recently dug through their favorite UI design pattern sources to identify the recurring solutions that companies were coming up with to address common design problems as web and mobile applications continue to evolve at a rapid pace. We’ve seen a beautiful assortment of ways that products use swipe, click, hover, and hold triggers in web and mobile apps to bring users to the most relevant secondary and tertiary information or next step in a major user flow without cluttering the interface, or even cleaning it up.

Below, we’ve shared a few of these standard reference points with you to help you as you brainstorm, sketch, wireframe, and prototype. We’ve even included wireframe examples to help you visualize these patterns at different stages in the design process. While most of these UI design patterns specifically address mobile problems, many apply to web as well.

If you’re starting to read my series now, take a quick look at A Practical Look At Using Wireframes, explore 50 Shades of Wireframes, take a few lessons away from 4 Non-Digital Wireframing Weapons and 4 Digital Wireframing Weapons, and peruse some examples from The Design Pattern & Wireframe Libraries Guide before reading further.

Some of the UI design patterns are also covered in UXPin’s free Web Design Trends and Mobile Design Trends e-books - bookmark them for another time since there’s a lot to catch up on.

Ready For Design Patterns - And Wireframe Examples?

Dropbox and Carousel and almost every other application have “sticky” fixed navigation, a universal mobile UI design pattern. As a user, you don't have to scroll all the way back up to find your footing. Many applications also have allow you to scroll all the way up to the top by tapping the top of your screen on mobile - there’s usually no visual indicator that this functionality exists though (unlike Pinterest’s “scroll to top” tab). And as a website developer, you don't have to throw in links all over the place to make sure people have all the relevant links they need. Likewise, now many of the traditionally fixed links can now be added directly to the content and sections of any page or view, not at the top-level navigation. We’ve included a wireframe example of this design pattern using UXPin.

Dropbox and Carousel

Dropbox and Carousel 2

Facebook and Mailbox and many more apps have vertical (non-standard) navigation on both web and mobile. This will help you find sections with an application in addition to finding all the content and data you're looking for about the product, company, etc. on a single page through a fluid navigation that jumps you to different parts of the site. This is also a great example of a drawer, which is a very popular UI design pattern on mobile.

Similar to toggling, drawers are life-saving UI design pattern trends in light of mobile screen constraints and user’s need for speed. Since each drawer and slide-out is a separate “layer” in an application, it’s not as constrained and, therefore, we’ve seen even greater variety in implementations, including many terrible ones - but we won’t show you those ones.
Yelp

Yelp is a phenomenal example of providing links to everything in their application. While they provide a more explicit UI design pattern, more content-heavy applications like Flipboard can actually get confusing with the endless ways you can swipe, tap, x-out, undo, and go-back as you navigate through it’s digital magazine. We’ve included a wireframe example of this design pattern below using UXPin.

Yelp 2

Yelp 3
Click here to use the Yelp wireframe in UXPin

Carousel not only has a visible scrollbar, but a power scrollbar at the bottom so you can blaze through your 1 million hosted photos with ease. As user-generated content, feeds, groups, lists, etc. keep growing, we’ll see even more innovative UI design patterns that allow users to find what they’re looking for beyond search and scroll bars.

Carousel

Tinder has made it’s content seamlessly responsive. This UI design pattern lets you toggle between 2 states of a user’s profile simply by clicking on the main picture in each view. But they go one step further. If you swipe through pictures in the detailed view of a user profile then click on the picture to go back to to the basic view, it stays on the picture you clicked on. This creates an extremely fluid and intuitive user experience and flow. In all fairness, OKCupid lets you do this too.

Tinder

Tinder 2
Click here to use the Tinder wireframe in UXPin

Uber lets you toggle between four types of ride services seamlessly by dragging a slider side-to-side. In this UI design pattern, they even zoom in and out to give you a similar level of density of cars nearby so you can see an acceptable number of options automatically.

Uber

Uber also let’s you toggle between booking a ride and seeing the fare estimation by tapping the slider button once you’ve chosen which ride type you want. This is a simple yet important UI design pattern that makes me smile every time I’m doing five things while trying to get a ride somewhere, but want to make sure Uber isn’t ripping me off with surge pricing.

Uber 2

RelateIQ let’s you hold down main menu items to see submenus for faster navigation to views. It’s one of the most complex enterprise mobile apps on the market today so they’re going to be pulling out a lot of new and existing mobile UI design patterns to keep it a quick and clean experience without sacrificing the power of their web product.

RelateIQ

Snapchat let’s you see hidden information - the number of messages received and unread - by clicking on the snapchat header. Simple UI design pattern, right?

Snapchat

Yelp let’s you go between listing details and the photo gallery when you drag downward to further expose the photo hidden behind a semi-transparent listing header. The use of semi-transparency and responsive content creates a wonderful experience here. It’s probably one of the more advanced but least known UI design patterns out there. Hope everyone uses it more now!

Yelp 4

Secret only lets you take certain actions once you discover how to access the menu. Swipe right and you’ll expose an action menu. This UI design pattern takes minimalism using drawers and slideouts to a new level. We’ve included a wireframe example of this design pattern below using UXPin.

Secret

Secret 2

Click here to use the Secret wireframe in UXPin

LinkedIn let’s you get to reach the main menu from anywhere by tapping the logo (commonly a 3-line “hamburger” menu icon) in the top left corner to access this drawer. This UI design pattern was first introduced to the masses by Facebook in their mobile app, and then adopted by many companies like Path, Fancy, and so many others. It's an easy way to hide all the less important things in a “side drawer” and not worry about how a mobile application should distill the most important information. Instead, you only have to focus on how to distill the most important information in each view that’s accessible from the side drawer. We’ve included a wireframe example of this design pattern below using UXPin.

LinkedIn

LinkedIn 2
Click here to use the LinkedIn wireframe in UXPin

Snapchat is an exemplar of minimal navigation for an immersive experience. Instead of showing users 4 menu buttons, they show you the 1 or 2 more important buttons and change these primary buttons depending on what view you’re in. To get between views, you can either click one of these primary buttons or swipe left-or-right. This is a unique implementation of such a UI design pattern - I haven’t seen such pure execution anywhere else.

Snapchat 2

Snapchat 3

Pinterest popularized “cards”, a way to allow users to browse and discover all kinds of content in a more engaging way while accommodating responsive design trends as well as social feed patterns extremely gracefully given it’s staggered and randomly sized tiles. It feels like puzzle pieces that could fit anywhere. Sadly, however, there are many terrible implementations of this, especially if you look at Pinterest’s competitors who have broadly done anything but truly understand why Pinterest’s UI design pattern is better - out of curiosity, I actually compared them in-depth in my spare time in late 2013. We’ve included a wireframe example of this design pattern below using UXPin.

Pinterest

Pinterest 2
Click here to use the Pinterest wireframe in UXPin

Lyft and Yelp provides maps as backgrounds, which makes sense given their local nature. This will become an increasing trend as local applications become more prominent and more information can be layered onto the map view, making maps a full experience not just for one-off directions on web or mobile. You’ll also see a lot more UI design patterns that blossom from videos, pictures, and other media as backgrounds. We’ve included a wireframe example of this design pattern below using UXPin.

Lyft and Yelp

Lyft and Yelp 2
Click here to use the Lyft wireframe in UXPin

Facebook Messenger and Instagram shows all user thumbnails in circles. Popularized by Google+ and improved by Path in some respects, this UI design pattern is gaining popularity although it’s benefit over the traditional square thumbnail is not clear other than adding variety, the unequivocal “spice of life.” We’ve included wireframe examples of this design pattern below using UXPin.

Facebook Messenger and Instagram

Facebook Messenger and Instagram 2

Facebook Messenger and Instagram 3
Click here to use the Messenger wireframes and here to use Instagram wireframes in UXPin

Secret takes no whitespace for granted by stacking full-bleed images on top and next to each other while layering some important information on top of them. In a way, these images act as images as backgrounds. In another, this UI design pattern kwwpa the user extremely engaged with even less white space and distracting design details than Pinterest.

Secret 3

Pinterest and Spotify let you know you can cancel adding a pin or following an album, respectively, by transforming the “+” into an “x” button. This UI design pattern saves real estate, makes undoing any action quick and clean, and is an overall playful solution.

Transformations and animations are particularly important in mobile applications. You could 1) entirely replace an element with another that has slightly different functionality, e.g. “do” and “undo”, 2) visually connect elements, e.g. zooming in on a photo and dissolving surrounding elements when you click on it, 3) or give visual feedback about what is happening, e.g. a transparent shadow under a draggable object on the phone.

Pinterest and Spotify

Pinterest and Spotify 2

Asana let’s you manipulate content directly, such as moving tasks around by clicking-and-holding or keyboard shortcutting (on web) or pressing-and-holding (on mobile) then dragging-and-dropping them wherever you want - you obviously don’t need to do this for keyboard shortcuts. If you have a lot of tasks, another UI design pattern may be more useful but, for most use cases, this is a great solution if you need to re-arrange list items. We’ve included a wireframe example of this design pattern below using UXPin.

Asana

Asana 2
Click here to use the Asana wireframe in UXPin

Tinder and Carousel let you vote on people or share / hide photos, respectively, with draggable images. Tinder also gives you huge buttons so you know exactly what to do and can do it quickly wherever you are and whatever you’re doing. For Tinder, swipe or click right if you like someone, swipe or click left if you don’t. For Carousel, swipe up to share your photos and swipe down if you want to hide them. Tinder is one of the most well known examples of this UI design pattern because it’s the core of this mobile application - it’s “Hot or Not” on-the-go. We’ve included a wireframe example of this design pattern below using UXPin.

Tinder and Carousel

Tinder and Carousel 2
Click here to use the Tinder wireframe in UXPin

Mailbox popularized the side-to-side swiping actions for email clients, allowing you to mark emails as read and schedule them for follow-up by swiping right or left, respectively. This UI design pattern is such an enjoyable and efficient experience that it’s no wonder the company was acquired for $100M after being live for 1 month - their viral marketing launch campaign didn’t hurt either.

Mailbox

Mailbox 2

Instagram let’s you discover faster actions such as liking a photo by double-tapping the photo instead of scrolling down to click the “like” button. I’m personally not a huge fan of UI design patterns that don’t let you undo an action, but it’s the only example I’ve seen where you can tap content to categorize it - I’m sure many people have accidentally liked ugly Instagram photos due to this pattern. We’ve included a wireframe example of this design pattern below using UXPin.

Instagram

Instagram 2
Click here to use the Instagram wireframe in UXPin

Snapchat and Facebook Messenger let you access features when you need them by swiping any friend left. For Snapchat, now you can delete as many friends as you want all at once -- I call it the “disappearing friend” act, but you can call it whatever you want. For Facebook Messenger, you access even more discoverable actions, including a sub-menu called “more”. Interestingly enough the “delete” button actually gives you options to archive or delete the conversation. In most UI design patterns, you aren’t given that option since there’s an “archive” button in the “more” sub-menu. We’ve included a wireframe example of this design pattern below using UXPin.

Snapchat and Facebook Messenger

Snapchat and Facebook Messenger 2
Click here to use the Messenger wireframe in UXPin

Secret let’s you discover new actions the way it let’s you discover new menus. Swipe left on a secret and you like it. Unlike Tinder, swiping right doesn’t let you unlike it, though -- that gives you the hidden menu we mentioned above. I’m a huge fan of how they’ve implemented this UI design pattern although it requires some brain power to remember to remember that swiping right brings up menus instead of “disliking” or “hiding” a secret the way that many similar design patterns have been implemented.

Secret 4

Secret also has “discoverable” tools on the content creation side. If you don’t upload a picture, swiping left-or-right changes the color of the background while swiping up-or-down changes the pattern. If you do upload a picture, the actions are even more impressive. Swiping up-or-down on the right side changes dimming while doing so on the left side changes saturation. Swiping left-or-right changes blur of the picture. There are no other controls that let you do this - nor should there be. This UI design pattern is so intuitive and clean that you’re bound to see a lot more of this.

Secret 5

Secret 6

Snapchat and Yelp are part of the growing number of apps that give you friend lists. Whether it’s one-on-one communication or keeping track of someone’s tastes and preferences, the way users explore their blossoming friend groups will become increasingly contextual, requiring friends to become a more integral part of the web and mobile experience. I firmly believe social UI design patterns will follow a similar trajectory that content UI design patterns have taken as the average web and mobile user goes from hundreds of friends and followers to thousands if not millions.

Snapchat and Yelp

Songkick and Flipboard are great examples of products that let you follow something, anything! Whether you have friends or not, there’s endless user-generated content to keep you busy. For the same reason friend lists will become an increasingly important UI design pattern, so will following.

Songkick and Flipboard

Quora and Venmo are two of my favorite activity feeds because “learning” and “earning” are two of the primary things people do in life. It’s fascinating to passively see people I know provide meaningful answers about self-improvement while others are spending their hard-earned money on pixels and lip rings. Thanks to this UI design pattern, I have as much variety on most of my web and mobile applications as I do on cable TV!

Quora and Venmo

Carousel and Instagram and many other apps offer chat or direct messaging as an integral part of their experience. Private chat UI design patterns will continue to blossom across many apps, not just traditional “social networks” now that users are finally comfortable sharing more private things online and they have substantial breadth in the content they’re generating online, even their financial transactions on apps like Venmo.

Carousel and Instagram

Carousel and Instagram 2

Medium, like many other apps, has consolidated the ugly “share” widgets with a single share button to give you a beautiful experience as well as a clear action to share the content, regardless of where you want to share it. Sounds like a win-win UI design pattern to me.
Medium

YouTube and almost every application lets you like (or dislike) everything in a binary way instead of using stars or other ratings. Although ride sharing apps like Uber and Lyft currently use rating systems, it will eventually make sense for them to have a more binary rating system - the driving was either acceptable or it wasn’t. Since this UI design pattern is one of the most elegant ways of organizing content on web and mobile applications, you will see this for a long time - I’m personally hoping that the combination of content tags will allow users to see their favorite comedy shows and music videos separately without any additional work. We’ve included a wireframe example of this design pattern below using UXPin.

YouTube

YouTube 2
Click here to use the YouTube wireframe in UXPin

Youtube and Facebook Messenger allows you to group your friends and content alike. As content of all forms - including friend profiles - continues to proliferate, the ability for users to curate and organize everything. I’m very curious how these separate applications will eventually more deeply integrate with one another as new UI design patterns emerge.

Youtube and Facebook Messenger

Venmo makes it really easy to invite others through social, mobile contacts, and email integrations. Since word-of-mouth and referrals are a huge driver of growth especially in consumer applications, you’ll see this UI design pattern proliferate and evolve even more.

Venmo

Venmo 2

Beg, Borrow & Steal… When Appropriate

Don’t be afraid to beg, borrow and steal these designs - but make them your own, and solve real problems for your users so they like the product designs you produce.

Because product design trends are moving faster than ever before, and the variety of devices from which your web and mobile applications can be accessed is splintering, you’ll have to think about your product more comprehensively than ever before. Luckily, many people are in the same boat so there are many examples out there - including what we’ve laid out above.

For a full list of UI design patterns, you’ll have to wait for our next web design trends e-book. In the meantime, UXPin’s current free e-books - Web Design Trends and Mobile Design Trends - and, of course, The Design Pattern & Wireframe Libraries Guide have a bunch of examples as well.

To round off this topic, I saved the best for last - design principles. In Design Principles for Wireframing, I detail some of the principles that will help you design better wireframes and, ultimately, better products.

Chris Bank leads growth at UXPin and is a product and startup enthusiast. Prior to UXPin, he led growth at Lettuce (funded by 500 Startups) and MyFit (NEA), and launched Kaggle (Khosla & Index Ventures) in the tech vertical. He grew his roots in the tech world by starting his own company, Epostmarks (a strategic partner of the USPS), after studying business at the University of Michigan.