This article shows you several design patterns that are commonly used for the purpose of getting input from the user on a mobile application (photo credits: Flickr.com)<\/p>\n
1. Action Bars<\/strong><\/h3>\n![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.43.15-PM.png\")
<\/p>\n
Action bars give users quick access to frequently used actions, such as search, share, and creating new content within the app. While navigation bars have been popular on the web and on earlier mobile applications, today\u2019s newest design patterns have allowed for greater focus on simple app views and more primary vs. secondary actions, paving the way for use of the action bar pattern. Action bars draw the user\u2019s attention to the most important and relevant actions on the app, clearing away clutter and immediately helping users to become more familiar with the mobile UI.<\/p>\n
2. Social Login<\/strong><\/h3>\n![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.47.54-PM.png\")
<\/p>\n
![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.48.13-PM.png\")
<\/p>\n
This UI design pattern provides users with a very quick and easy way of logging in. It is now almost an expected design pattern to incorporate into a mobile application – several reasons for this include:<\/p>\n
\n- Signing up through an existing social network account means the user has one less username\/password combination to worry about, not to mention concerns about password security decline dramatically.<\/li>\n
- Users don\u2019t have to set up another account that they may or may not end up using the future. Instead they can sign up through their existing Facebook, Twitter, and\/or google accounts.<\/li>\n
- Users aren\u2019t forced to type their details into an unfamiliar new app they just downloaded, making the signing up process much easier on them.<\/li>\n
- By allowing users to sign up through an existing social network account like Facebook Login, you automatically get some basic data about your users, which you can use to more effectively tailor your mobile application to your users\u2019 needs.<\/li>\n<\/ul>\n
3. Huge Buttons<\/strong><\/h3>\n![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.48.33-PM.png\")
<\/p>\n
![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.49.05-PM.png\")
<\/p>\n
Nothing says simplicity as much as a single giant button on the user interface. The ideal touch screen tap target size is 72 pixels, but certain apps like Tinder utilize the huge button pattern to emphasize one specific action. This pattern allows users to know exactly what to do and to be able to do it quickly, no matter where you are or what you are doing. Huge buttons are ideal for applications that serve a limited number of purposes. For example, Shazam really only does one thing: recognize the music and media playing around you at any time. Thus the app consists of a screen with a single gigantic button. Easy, simple, effective.<\/p>\n
4. Notifications<\/strong><\/h3>\n![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.49.21-PM.png\")
<\/p>\n
![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.49.34-PM.png\")
<\/p>\n
People consume lots of information every day, as evidenced by the use of Facebook, Reddit, Gmail, etc. At the same time however, people are busy – they can\u2019t be on their mobile phones all the time. People want to be able to take things in and know about new activity or actions they should take at a glance – which is why good understanding and implementation of the design patterns for notifications is so important. Notifications highlight recent activity by visually marking new content. Several implementations of this pattern include:<\/p>\n
\n- LinkedIn and Quora place a numbered badge on labels with new content<\/li>\n
- Twitter indicates new activity in a more subtle way by placing a small dot at the top of the timeline icon.<\/li>\n
- Facebook displays notifications about new items in the newsfeed with a popup banner that drops down within the app.<\/li>\n<\/ul>\n
5. Discoverable Controls<\/strong><\/h3>\n![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.50.02-PM.png\")
<\/p>\n
![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.50.14-PM.png\")
<\/p>\n
![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-23-at-12.50.28-PM.png\")
<\/p>\n
Sometimes mobile applications have controls that are relevant to only a specific part of the app. In order to minimize clutter yet allow quick access to these secondary controls, these mobile applications utilize a \u201cdiscoverable controls\u201d design pattern that lets users \u201cdiscover\u201d actions via gestures such as swipe, tap, double-tap, long-press, etc.<\/p>\n
For example, when creating content in Secret, users can slide their finger vertically across the background to change color, pattern, brightness, saturation, and blur. Long-pressing on an image in Pinterest reveals buttons that allow you to pin or comment by dragging the pop-up control to the button. Uber incorporates a slider button so that you can easily toggle between booking a ride and seeing the fare estimation, and Snapchat and Facebook Messenger allow for easy access to additional features by swiping left.<\/p>\n
This information is borrowed from one section of a longer, free ebook by UXPin – Mobile UI Design Patterns 2014: A Deeper Look at the Hottest Apps Today<\/a>. Be sure to grab your own copy to learn about all the other major design patterns permeating the most successful mobile applications of today.<\/p>\n
<\/p>\n<\/p>\n
<\/p>\n
This UI design pattern provides users with a very quick and easy way of logging in. It is now almost an expected design pattern to incorporate into a mobile application – several reasons for this include:<\/p>\n
- \n
- Signing up through an existing social network account means the user has one less username\/password combination to worry about, not to mention concerns about password security decline dramatically.<\/li>\n
- Users don\u2019t have to set up another account that they may or may not end up using the future. Instead they can sign up through their existing Facebook, Twitter, and\/or google accounts.<\/li>\n
- Users aren\u2019t forced to type their details into an unfamiliar new app they just downloaded, making the signing up process much easier on them.<\/li>\n
- By allowing users to sign up through an existing social network account like Facebook Login, you automatically get some basic data about your users, which you can use to more effectively tailor your mobile application to your users\u2019 needs.<\/li>\n<\/ul>\n
3. Huge Buttons<\/strong><\/h3>\n
<\/p>\n<\/p>\nNothing says simplicity as much as a single giant button on the user interface. The ideal touch screen tap target size is 72 pixels, but certain apps like Tinder utilize the huge button pattern to emphasize one specific action. This pattern allows users to know exactly what to do and to be able to do it quickly, no matter where you are or what you are doing. Huge buttons are ideal for applications that serve a limited number of purposes. For example, Shazam really only does one thing: recognize the music and media playing around you at any time. Thus the app consists of a screen with a single gigantic button. Easy, simple, effective.<\/p>\n
4. Notifications<\/strong><\/h3>\n
<\/p>\n<\/p>\nPeople consume lots of information every day, as evidenced by the use of Facebook, Reddit, Gmail, etc. At the same time however, people are busy – they can\u2019t be on their mobile phones all the time. People want to be able to take things in and know about new activity or actions they should take at a glance – which is why good understanding and implementation of the design patterns for notifications is so important. Notifications highlight recent activity by visually marking new content. Several implementations of this pattern include:<\/p>\n
- \n
- LinkedIn and Quora place a numbered badge on labels with new content<\/li>\n
- Twitter indicates new activity in a more subtle way by placing a small dot at the top of the timeline icon.<\/li>\n
- Facebook displays notifications about new items in the newsfeed with a popup banner that drops down within the app.<\/li>\n<\/ul>\n
5. Discoverable Controls<\/strong><\/h3>\n
<\/p>\n<\/p>\n<\/p>\nSometimes mobile applications have controls that are relevant to only a specific part of the app. In order to minimize clutter yet allow quick access to these secondary controls, these mobile applications utilize a \u201cdiscoverable controls\u201d design pattern that lets users \u201cdiscover\u201d actions via gestures such as swipe, tap, double-tap, long-press, etc.<\/p>\n
For example, when creating content in Secret, users can slide their finger vertically across the background to change color, pattern, brightness, saturation, and blur. Long-pressing on an image in Pinterest reveals buttons that allow you to pin or comment by dragging the pop-up control to the button. Uber incorporates a slider button so that you can easily toggle between booking a ride and seeing the fare estimation, and Snapchat and Facebook Messenger allow for easy access to additional features by swiping left.<\/p>\n
This information is borrowed from one section of a longer, free ebook by UXPin – Mobile UI Design Patterns 2014: A Deeper Look at the Hottest Apps Today<\/a>. Be sure to grab your own copy to learn about all the other major design patterns permeating the most successful mobile applications of today.<\/p>\n
![\"Download](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/07\/mobile-ui-patterns-donwload.jpg\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"