The Guide to Wireframing / Основи вайрфреймування: 7. FRESH UI DESIGN PATTERNS

Оригінал англійською Переклад українською

FRESH UI DESIGN PATTERNS
Web and Mobile Product Design Trends I’ve Noticed In 2013 and 2014

#1

СВІЖІ ПАТТЕРНИ ДИЗАЙНУ ІНТЕРФЕЙСІВ

TSpell 29.04.18 в 18:22

(image) Photo credit: uxpin.com

#2

(зображення) Фото: uxpin.com

TSpell 29.04.18 в 18:22

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.

#3

Пікассо одного разу сказав (а Стів Джобс повторив), "Хороший художник запозичує, великий - краде". Це, можливо, одна з найбільш не правильно зрозумілих та невірно використаних креативних фраз усіх часів, а також найважливіша в той час коли тренди продуктового дизайну та розробка вичерпали себе.

TSpell 29.04.18 в 18:28

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.

#4

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. I’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 ow without cluttering the interface, or even cleaning it up.

#5

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

#6

Design Patterns & Wireframe Examples

#7

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. I’ve included a wireframe example of this design pattern using UXPin.

#8

(image) Photo credit: carousel.com

#9

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.

#10

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, I’ve seen even greater variety in implementations, including many terrible ones – but I won’t show you those ones.

#11

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.

#12

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.

#13

(image) Photo credit: carousel.com

#14

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 ow. In all fairness, OKCupid lets you do this too.

#15

(image) Photo credit: http://www.gotinder.com/

#16

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.

#17

(image) Photo credit: uber.com

#18

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 o with surge pricing.

#19

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.

#20

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?

#21

(image) Photo credit: snapchat.com

#22

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 pat- terns out there. Hope everyone uses it more now!

#23

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.

#24

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.

#25

(image) Photo credit: linkedin.com

#26

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.

#27

(image) Photo credit: snapchat.com

#28

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 t 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. I’ve included a wireframe example of this design pattern below using UXPin.

#29

(image) Photo credit: pinterest.com

#30

Lyft and Yelp provide 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-o 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. I’ve included a wireframe example of this design pattern below using UXPin.

#31

(image) Photo credit: lyft.com

#32

(image) Photo credit: yelp.com

#33

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 bene t over the traditional square thumbnail is not clear other than adding variety, the unequivocal “spice of life.” We’ve included similar example of this design pattern below using UXPin.

#34

(image) Photo credit: https://play.google.com/store/apps/details?id=com.facebook.orca&hl=en

#35

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 keeps the user extremely engaged with even less white space and distracting design details than Pinterest.

#36

(image) Photo credit: secret.ly

#37

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.

#38

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.

#39

(image)
Photo credit: pinterest.com
Photo credit: spotify.com

#40

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.

#41

(image) Photo credit: asana.com

#42

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.

#43

(image) Photo credit: carousel.com

#44

(зображення) Фото: carousel.com

TSpell 29.04.18 в 18:21

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.

#45

(image) Photo credit: http://www.mailboxapp.com/

#46

(зображення) Фото: http://www.mailboxapp.com/

TSpell 29.04.18 в 18:21

Instagram let’s you discover faster actions such as liking a photo by double-tap- ping 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 similar example of this design pattern below using UXPin.

#47

(image) Photo credit: instagram.com

#48

(зображення) Фото: instagram.com

TSpell 29.04.18 в 18:20

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-me- nu. I’ve included a similar example of this design pattern below using UXPin.

#49

(images)
Photo credit: snapchat.com
Photo credit: https://play.google.com/store/apps/details?id=com.facebook.orca&hl=en

#50

(зображення)
Фото: snapchat.com
Фото: https://play.google.com/store/apps/details?id=com.facebook.orca&hl=en

TSpell 29.04.18 в 18:20

Наступна сторінка →

Хвилинку...