Mobile UI Design Patterns a Deeper Look at the Hottest Apps Today Mobile UI Design Patterns a Deeper Look at the Hottest Apps Today
Total Page:16
File Type:pdf, Size:1020Kb
Mobile UI Design Patterns A Deeper Look At The Hottest Apps Today Mobile UI Design Patterns A Deeper Look At The Hottest Apps Today If you like Uber, Pinterest, Tinder, OKCupid, Spotify, Yelp, Facebook, Instagram, Dropbox, Dropbox Carousel, Facebook Messenger, Secret, Quora, LinkedIn, RelateIQ, Flipboard, Snapchat, or Mailbox… You’ll love what you see next. designed by Dominik Pacholczyk 2 INDEX 1....INTRODUCTION What Are UI Design Patterns? How Should I Use UI Design Patterns? 2....THE INTERACTIVE IMPERATIVE Gestures Animations 3....GETTING INPUT Smart Keyboards Default Values & Autocomplete Immediate Immersion (or “Lazy Signups”) Action Bars Social Login Huge Buttons Swiping for Actions Notifications Discoverable Controls Expandable Inputs Undo 4... NAVIGATION Walkthroughs & Coach Marks Overflow Menus Sliders Content-Based Navigation Morphing Controls “Sticky” Fixed Navigation Vertical Navigation 3 Popovers Slideouts, Sidebars & Drawers Links to Everything Advanced Scrollbars Swipe Views 4... SOCIAL Activity Feeds Friend Lists Follow Vote to Promote Direct Messaging Single Share Button Like Find & Invite Friends 5... DATA & CONTENT MANAGEMENT Full-Screen Modes Interactive Content Layers Inline Expanding Areas Circles Transparency Maps As Backgrounds Group Friends & Content Full-Bleed Images Grids Cards Hidden Information Empty States Direct Manipulation of Content & Data Draggable Objects Pull to Refresh 6... LEARN FROM THE BEST 7.. ABOUT UXPIN 4 Share this ebook with friends! 1 Introduction A quick note from the author 5 “Creativity involves breaking out of established patterns in order to look at things in a different way.” Edward de Bono UI design patterns are frequently misinterpreted and misused concepts. I’ve learned a lot about them in writing this e-book and hope you do too. Too often, they’re confused with specific elements (or features) that can simply be developed as-is from one of the popular Design Pattern and Wireframing Libraries. While those examples are a great start, they’re not enough. And although UI design patterns overlap with development patterns - which you can learn more about in A Beginner’s Guide to Design Patterns - they’re focused more on solving common user problems and less on product problems. The UXPin team recently scoured the interwebs for mobile UI design patterns and elements being used by the most forward-thinking mobile application companies and adopted eagerly by many others as the product design and development pro- cess becomes even more lean - and competitive. We’ve seen a beautiful assortment of mobile applications outfitted with touch, press, swipe and drag, and pinch-ena- bled visual and functional solutions to the user’s everyday problems. Below, I’ve shared an abundance of these standard reference points with you to help you as you brainstorm, sketch, wireframe, mockup, and prototype. To name a few, we’ve summarized patterns and elements of Uber, Pinterest, Tinder, OKCupid, Spotify, Yelp, Facebook, Instagram, Dropbox, Dropbox Carousel, Facebook Messenger, Secret, Quora, LinkedIn, RelateIQ, Flipboard, Snapchat, Mailbox and many, many more. We’ve even included matching wireframe examples to help you visualize these patterns and elements at different stages in the design process - you can use them directly in our wireframing and pro- totyping tool, UXPin. Some of the UI design patterns and elements are also covered in UXPin’s free Web Design Trends, Mobile Design Trends, and The Guide to Wireframing e-books - bookmark them for another time since there’s a lot to catch up on. 6 We’d love your thoughts on what I’ve written. And feel free to include anyone else in this discussion by sharing this e-book. For the love of mobile, Chris Bank (co-written by Waleed Zuberi) 7 What Are UI Design Patterns? Generally speaking, a UI design pattern is a reusable solution to a commonly occur- ring problem you might encounter every day. It is not a feature that can be plugged into your product design and it’s not a fi- nished design that can simply be coded. Rather, it is a formalized best practice, a guide or template, that designers, developers, and product managers (and anyone else who touches product) can use to solve common problems when designing a mobile application or system. Although it has to be utilized in the correct situation, it is generally language, device, and platform agnostic - although there may be tech- nological limitations depending on how the designs are ultimately implemented. And, of course, if implemented in the wrong context, they do more harm than good - but we’ll focus on the positives for now. How Should I Use UI Design Patterns? Despite the glut of Design Pattern and Wireframing Libraries out there, few online resources actually break down how to think about these patterns with supporting examples. Below, I’ve broken out the general format and provided a brief example to get you started. Here’s what you need to think about when evaluating a design pattern and adapting it to your own needs: • Problem Summary: What user problem are you solving? Stay focused, and phra- se it like a user story - in one sentence only. • Solution: How have others solved this problem? Among others, few things to detail include user navigation (including shortcuts), getting user inputs, dealing with data and integrations with other services or applications, and displaying 8 information and content (including defaults). • Example: Great, can you show me? Sometimes a screenshot or mockup is suffi- cient; other times, a user flows and/or additional notes are necessary to clearly communicate the pattern. • Usage: When should this pattern (not) be used? Among others, a few things to detail include product architecture, interface layout, device(s), programming lan- guage, absence or existence of other design patterns, type of user, and primary use cases. For the sake of brevity, we’ll highlight the first three details of the design patterns in this e-book below. In our next e-book, however, we intend to dive deeper into the solution details and use cases so you have a deeper understanding of when and how to use some of these design patterns. 9 2 The Interactive Imperative At the heart of many of these new UI design patterns is the evolution of gestures and animations in mobile development. 10 Gestures Remember the days when clicking, hovering, scrolling, and keyboard shortcuts were the only triggers for web interactions? Although they’re not the only triggers today, they certainly dominate the user experience across the web. Mobile application design, on the other hand, has exploded with new design pat- terns and their implementations. Made possible by advancing hardware and softwa- re capabilities, the mobile space is developing with unprecedented levels of human- computer interactions. These solutions are largely empowered by new gestures. And, marked by responsive design advancements, web and mobile design is rapidly converging so applications may be build for all device shapes and sizes - this will have a dramatic and re-invigorating impact on design of the web experience. If we look at Android’s current gestures, you get a sense of how many ways some- one could interact with a pattern as simple as a calendar, message or picture gallery. Photo credit: http://developer.android.com/design/patterns/gestures.html 11 Photo credit: http://developer.android.com/design/patterns/gestures.html If we glimpse into Apple’s treasure trove of multi-touch gesture patents, your mind might explode with the possible solutions you could design. While the gesture examples below are from a 2010 patent filing, many have yet to be implemented and Apple’s archive of gesture patents extends far beyond these examples. Consider it a glimpse into the “Minority Report” future. Android, iOS, and other mobile platforms will continue to provide an increasing 12 Photo credit: „Android UI Design - Touchscreen Gestures”. hsigmond. Creative Commons 3.0. variety of gestures natively that can be implemented for taking particular actions or navigating through the app. Not only does this help preserve screen real-estate by eliminating some of the on-screen buttons, but it also makes the experience intuiti- ve and fun. Combine this with various animations, and you can have a field day with the ways you can implement UI design patterns in your mobile applications. Animations The best thing about using gestures on mobile is that they feel so intuitive and re- sponsive in the same way a real object would. Animations play a very important role in maintaining that illusion for users and keeping them grounded in the UI. Beyond the tangibility of animations, they’re often used to delight users by mani- pulating the laws and lens of nature. Timing, velocity, bounciness, image and color transitions, scrolling, and myriad other settings allow designers to tweak the user experience in seemingly limitless ways that can be both surprising and amazing. The sheer variety of animations coupled with gestures not only adds an element of fun to the experience, but are invaluable in providing visual feedback and affordan- ce to the user. We touch on it briefly here but will go in-depth later on our blog and design library. 13 Photo credit: snapchat.com via http://capptivate.co/ Captivate is a great site to see animations from popular mobile apps. 14 3 Getting Input 15 Smart Keyboards Examples Facebook Paper, Android Contacts Photo credit: https://www.facebook.com/paper Photo credit: uxpin.com Problem The user wants to enter information quickly. 16 Solution Give users the keyboard that’s relevant to the data they are entering when they tap into a section of the app that allows for entering information. This saves them from having to move between the alphanumeric screens to find the right buttons, or taking an extra step to access the keyboard. Not only is this convenient for the user, it also serves as an indication of what kind of input is expected from them.