Menu Search
Jump to the content X X

Low-Hanging Fruits For Enhancing Mobile UX

Good UX is what separates successful apps from unsuccessful ones. Customers are won and lost every day because of good or bad user experience design. The most important thing to keep in mind when designing a mobile app is to make sure it is both useful and intuitive.

Obviously, if an app is not useful, it will have no practical value for the user, and no one will have any reason to use it. And even if the app is useful but requires a lot of effort, people won’t bother learning how to use it.

Good design addresses both problems: It has a clear focus on key user goals, and it removes all obstacles from the user’s way by bringing clarity to the interface. In today’s article, I’ll share seven UX design tips that I think are key for creating really great mobile user experiences. Also, there’s a way you can create and design your own prototypes (for free!): All you need to do is to download Adobe XD1 and get started right away.

Further Reading on SmashingMag: Link

1. Clear And Seamless User Flow Link

Reduce the effort users have to put in to get what they want.

Users often have to quickly accomplish one core function in a mobile app: make a payment, check for new messages, etc. Focus on users’ key goals, and remove all obstacles from their way:

  • Break large tasks into smaller, meaningful chunks.
    Prioritize the actions on screen. Highlight the core action (that is directly related to the user’s goal), and hide all secondary actions.
  • Offload tasks.
    Look for anything in the design that requires user effort (for example, reading text, entering data, making a decision), and look for alternatives. Can you show a picture instead of text, or reuse previously entered data instead of asking the user to type more, or use already available information to set a smart default?
  • Design for interruption.
    Whatever you’re designing, mobile devices are used on the go. Allow users to save state and re-engage with the app later.
  • Don’t interrupt.
    Avoid interrupting users by asking them to rate your app if they’ve only recently downloaded it. Instead, wait until they prove to be repeat users and they’ll be more likely to rate your app and provide more informed feedback.

Focus on User Goals Link

Divide complex tasks into smaller activities. These smaller tasks may better meet user goals. Take Lyft. It knows that the goal of its user is to get a ride somewhere. The app does not overwhelm the user with much of information: It automatically detects the user’s location based on geolocation data, and the only thing the user has to do is select a pickup location.

6
(View large version7)

Avoid Login Walls Link

Login walls are pages that ask the user to log in or register in order to proceed. A login wall is commonly shown when an app launches for the first time or when a web page is first accessed. Keep in mind that forcing registration too early can cause more than 85%8 of users to abandon the product.

In the example below, Soundcloud requires its users to log in to access the app’s content.

9
The SoundCloud app for Android asks users to create or log in with an account on first launch. There is no other path for someone to take. (View large version10)

Login walls are encountered quite often in store checkouts. Designers of e-commerce websites and apps think that, by logging in, users will be able to take advantage of previously saved account information and thus won’t need to type in information such as their shipping address and credit card number. Even Amazon has this problem — the service doesn’t provide a guest checkout option.

11
Amazon forces users to sign up or log in before checking out. (View large version12)

The registration option could probably be safely replaced by a guest checkout option. Gather data slowly as the user moves through the checkout, asking for a password with the incentive of a coupon code after purchase.

Avoiding Information Overload Link

The term “information overload” was coined by Bertram Gross, professor of political science at Hunter College, in his 1964 work The Managing of Organizations. Gross defined information overload as follows:

Information overload occurs when the amount of input to a system exceeds its processing capacity. Decision makers have fairly limited cognitive processing capacity. Consequently, when information overload occurs, it is likely that a reduction in decision quality will occur.

Information overload is a serious problem, preventing users from making decisions or taking action because they feel they have too much information to consume. There are some simple ways to minimize information overload. One common technique is chunking. A checkout form is a perfect example. A rule of thumb is to display at most five to seven input fields at a time and break down the checkout into pages, progressively disclosing fields as necessary.

13
Chunking makes a form look less loaded, especially when you’re requesting a lot of information from users. (Image: Murat Mutlu14) (View large version15)

2. Invisible User Interface Link

Make the content the interface.

Content is what provides value in most apps. Whether it’s a social feed, news updates, a to-do list or something more technical, like a system dashboard, content is why people are there! This is why it’s critical to focus on the content and remove unnecessary elements that do not support user tasks. Given their reduced attention span, users should be guided to the content they’re looking for, quickly. Content should be the interface.

Maps Link

Google Maps is a great example. For its redesign, Google removed all unnecessary panels and buttons, saying that the map is the interface.

16
(View large version17)

Cards Link

Another pattern that can be used as an interface is card-style design18. Cards are great way to display actionable content, because they allow content to naturally reveal itself.

19
Cards encourage exploration. (Image: Ramotion4320)

An example of a common approach would be Swiss Air21’s app. In the fare tables, every row becomes a collapsed accordion, which can be opened if needed.

22

Flipboard is another good example of cards in an interface. Flipboard is a personalized magazine that aggregates content from news feeds and social media networks, enabling you to discover and share stories.

23
Each card represents a digestible piece of related information. (View large version24)

3. Breathing Room Link

Use white space to draw attention to important content.

White space (or negative space) is the empty area between and around elements of a design, and it is often neglected. Though some designers consider it a waste of valuable space, it is an essential element of mobile design. Jan Tschichold says:

White space is to be regarded as an active element, not a passive background.

Cut Out the Clutter Link

Clutter overloads an interface with too much information. Every added button, image and line of text makes the screen more complicated.

25
Clutter is bad on a desktop, but on mobile it’s a hundred times worse. (Image: ftrain26) (View large version27)

As Antoine de Saint-Exupéry famously said:

Perfection is achieved when there is nothing left to take away.

Get rid of anything in a mobile design that isn’t absolutely necessary, because reducing clutter will improve comprehension. A simple rule of thumb is one primary action per screen. Every screen you design for the app should support a single action of real value to the person using it. This makes it easier to learn, easier to use and easier to add to or build on when necessary.

Prioritize Content Link

White space largely contributes not only to readability and content prioritization, but also to visual layout. Thus, it can simplify the UI and improve the UX.

28
Follow the “less is more” principle in your designs. (Image: Material Design) (View large version29)

4. Navigation Made Simple Link

Navigation should inspire users to engage and interact with the content you are delivering.

Helping users navigate should be a high priority for every app. Mobile navigation must be discoverable and accessible and must occupy little screen space. However, making navigation accessible on mobile is a challenge due to the limitations of the small screen and the need to prioritize content over chrome.

Take a few general rules of thumb into account when designing a navigation system for a mobile app:

  • Know your users.
    Navigation should accommodate the needs of the majority of your app’s users. Each target group expects a certain type of interaction with your app, so make these expectations work in your favor.
  • Prioritize navigation options.
    Assign different priority levels (high, medium, low) to common user tasks. Give prominence in the UI to paths and destinations with high priority levels and frequent use. Use those paths to define your navigation.
  • Make it visible.
    As Jakob Nielsen says30, recognizing something is easier than remembering it. Minimize the user’s memory load by making actions and options visible. Navigation should be available at all times, not just when we anticipate that the user needs it.
  • Leverage visual communication.
    Icons31 and other graphic elements should help users to understand the menu options. Think of the shopping-cart icon; it serves as an identifier to check out or view items. Users don’t have to think about how to navigate to make a purchase; this element directs them to the appropriate action.
  • Communicate the current location.
    “Where am I?” is a fundamental question that users need an answer to in order to effectively navigate. Failing to indicate the current location is a common problem in many apps. Think about location indicators.
  • Make it easy to interact.
    Make menu options big enough to be easily tapped.32 Items that are too small or too close together are a huge source of frustration for mobile users.
  • Measure user engagement and retention.
    Engagement is the first thing you will need for your product, because it is where most companies actually make money. Make sure to measure the app’s success with retention of users over time.33

Even designers who are familiar with all of these rules still end up creating menus that are confusing, difficult to manipulate or simply hard to find.

Navigation UI patterns are a shortcut to good usability. Let’s see some examples.

Toggle Menu Link

It’s tempting to rely on menu controls in order to simplify a mobile interface — especially on a small screen. But hiding critical parts of an application behind these kinds of menus could impair usage. Hidden navigation drives down engagement34, slows down exploration and confuses people.

35
While the interface with the toggle menu (right) looks cleaner than the one with segmented control (left), the latter has gotten more engagement. (Image: Luke Wroblewski36) (View large version37)

Exposing menu options in a more visible way increases engagement and satisfaction.

Tab Bar Link

Tab bars and navigation bars38 are well suited to apps with relatively few navigation options. The pattern is adopted on both iOS39 and Android40. Tabs are great because they display all major navigation options up front, and with one simple tap, the user can instantly go from one view to another. For this type of navigation, I strongly recommend using labels for navigation41 options. Don’t make navigation a guessing game.

42
The tab bar makes the main navigation options available with one tap. (Image: Ramotion4320)

Segmented Control Link

If there are only a couple of destinations, you can use segmented control.44 As with a tab bar, all options are visible at once and can be accessed with a single tap.

45
(View large version46)

Full-Screen Navigation Link

It might sound contradictory to what I said about saving screen space, but full-screen navigation might be a good choice. Basically, it’s a page (usually the home page) that lists all navigation options. Though you won’t be able to display any content, the full-screen navigation pattern is good for simplicity and coherence. Once the user decides where to go, then you can dedicate the entire screen space to the content. This type of navigation works well in task-based websites and apps, where users are squarely focused on accomplishing a very specific task (for example, checking in for a flight or changing the settings on their phone) or where they limit themselves to one branch of the navigation hierarchy during a single session (for example, if they’re intrested in a particular service or product).

47
Cookly uses a full-screen menu with pictures that set the right mood and stimulate the user to engage with the app. (Image: Patrick Wong48) (View large version49)

This type of navigation is good when you have hierarchical tree navigation — for example, when you have a menu with seven primary options and each option contains layers of subcategories.

50
(Image: Dennis Kardys51) (View large version52)

If search is a key function of your app, it needs to be in front of people. Don’t hide it. Either display it at the top of the screen, or have a visible reference (a magnifying glass icon) that activates search mode.

53
If search is a primary function of your app, display it prominently, because it is probably the fastest route to discovery for users. (Image: Think With Google54) (View large version55)

5. One-Handed Operation Link

Adapt your design to big screens.

With the release of the iPhone 6 and 6 Plus, it’s become clear that screen sizes are going to keep expanding.

56
(View large version57)

Here are three basic ways of how people hold their phone:

58
Basic ways of how people hold their phone. (Research: Steven Hoober59) (View large version60)

According to research by Steven Hoober, 85% of users61 use their phone with one hand. The following heat map shows the thumb zones for every iPhone display size since 2007. You can see that the bigger the display is, the more of the screen is less easily accessible.

62
Thumb zones for a right-handed person, according to research by Scott Hurff63 (View large version64)

Adapt your design to improve the user experience. Make sure that your app can be easily (and fully) used on a large screen (such as an iPhone 6 or 7) with one hand.

Green Zone for Common Actions and Navigation Link

Place the top-level menu, frequently used controls and common action items in the green zone of the screen, which is comfortably reached with one thumb.

65
In the Pocket app for iOS, all of the navigation controls are in the footer. They can be easily reached when the phone is held normally. (Image: Dmitry Kovalenko66) (View large version67)

Red Zone for Destructive Actions Link

Place destructive actions (such as delete and erase) in the hard-to-reach red zone, because you don’t want users to accidentally tap them.

68
The “Edit” button in Apple’s Mail app is in the hard-to-reach zone. (View large version69)

6. Appearance Of Speed Link

Don’t make users wait for content.

While an instant response is best, there are times when your app won’t be able to meet the standard guidelines for speed. A slow response could be caused by a bad Internet connection, or an operation could be taking a long time (for example, installation of an update for the operating system). As much as possible, make the app fast and responsive.

Skeleton Screens Link

Let people know that things are going to take a while by using a progress indicator. That being said, while the intention behind a progress indicator is good, the result can be bad. As Luke Wroblewski mentions70, “Progress indicators by definition call attention to the fact that someone needs to wait. It’s like watching the clock tick down — when you do, time seems to go slower.” There is a good alternative to progress indicators: skeleton screens. These containers are essentially a temporarily blank version of the page, into which information is gradually loaded. Rather than show a loading indicator, use a skeleton screen to focus on actual progress and create anticipation for what is to come. This creates a sense that things are happening immediately, as information is incrementally displayed on the screen and people see that the application is acting while they wait.

71
A skeleton screen fills out the UI as the content is loaded incrementally. (Image: Tandem Seven72)

Visual Distraction Link

Keep in mind that perception can be just as important as raw speed. If an app gives users something interesting to look at while waiting, they will pay less attention to the wait itself. Thus, to ensure that people don’t get bored while waiting for something to happen, offer a distraction.

73
Creative progress indicators can reduce a user’s perception of time. (Image: Creative Dash74)

Operations in the Background Link

Do things in the background to make imminent actions appear fast. Actions that are packed into background operations have two benefits: They are invisible to the user, and they happen before the user asks for them.

A good example of this technique is the process of uploading pictures in Instagram. The app uploads photos early. As soon as the user chooses a picture to share, the app starts uploading; and by the time the user is ready to press the “Share” button, uploading is complete, and the user can share their picture instantly.

75
Instagram invites users to add tags as a picture uploads in the background. (View large version76)

7. Well-Timed Push Notifications Link

Think twice before sending a message.

Every day, users are bombarded with useless notifications that distract them from their day-to-day activities, and it gets downright annoying. Annoying notifications are the number one reason people uninstall mobile apps (according to 71% of survey respondents).

77
(View large version78)

Below are four principles to remember when crafting user-centric notifications.

Mobile Is All About Making Every Message Count Link

The most common mistake you can make when sending push notifications, and the most damaging in the long term, is to send users more notifications than they can handle. Don’t overwhelm users with push messages, or they might end up deleting your app altogether.

79
Don’t push all notifications at the same time. (View large version80)

Push Value Link

When a user starts using your app, they won’t mind getting notifications, as long as the value they get is sufficiently greater than the interruption. Don’t send push notifications just for the sake of “engaging users.” For example, Facebook routinely sends notifications inviting users to connect to randomly suggested people or to “Find more of your friends on Facebook.” This is a poor attempt to direct users back to the app. Also, it interrupts users with irrelevant alerts.

81
Don’t thoughtlessly direct users back to the app. (View large version82)

Personalizing content to inspire and delight is critical. Netflix carefully uses viewing data to present recommendations that feel tailor-made.

83
Netflix does a great job of personalizing its push notifications, letting users know when their favorite shows are available. (View large version84)

Time Your Notifications Link

Tailoring your notifications to users isn’t just about what you say, but about when you say it. Don’t send push notifications at odd hours. An ill-timed notification sent between 12:00 am and 6:00 am risks waking up or disrupting users:

85
(View large version86)

Of course, users could always disable notifications while they’re sleeping, but that’s not a good solution. A real solution would be to send notifications at times that would be most convenient for users, unless it’s critical to inform them of something right away. According to comScore87, a good time for push notifications is between 6:00 pm and 10:00 pm. Always push notifications according to the user’s time zone.

88
So many push notifications are sent at the wrong time, in the wrong place. (Image: Pomegranate89) (View large version90)

Diversify Your Messaging Link

The most effective mobile messaging strategy is to use different message types: push notifications, email, in-app notifications and news feed updates. Diversify your messaging — your messages should work together in perfect harmony to create a great user experience.

91
Select the proper notification type based on the urgency and content. (Source: Appboy92) (View large version93)

Conclusion Link

As with any other design element, the tips shared here are just a start. Make sure to mix and match these ideas with your own for best results. Remember that design isn’t just for designers — it’s for users. Treat your app as a continually evolving project, and use data from analytics and user feedback to constantly improve the experience.

This article is part of the UX design series sponsored by Adobe. The newly introduced Adobe Experience Design CC (Beta) tool is made for a fast and fluid UX design process94, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.
You can check out more inspiring projects created with Adobe XD on Behance95, and also visit the Adobe XD blog96 to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free97.

(ms, vf, al, il)

Footnotes Link

  1. 1 https://adobe.ly/2qtEglq
  2. 2 https://www.smashingmagazine.com/2012/10/motion-and-animation-a-new-mobile-ux-design-material/
  3. 3 https://www.smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/
  4. 4 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
  5. 5 https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/05/1-Mobile-Design-Best-Practices-large-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/05/1-Mobile-Design-Best-Practices-large-opt.jpg
  8. 8 http://janrain.com/blog/infographic-how-to-solve-the-online-registration-challenge/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/05/2-Mobile-Design-Best-Practices-large-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/05/2-Mobile-Design-Best-Practices-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/3-Mobile-Design-Best-Practices-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/3-Mobile-Design-Best-Practices-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/5-Mobile-Design-Best-Practices-large-opt.png
  14. 14 https://dribbble.com/mutlu82
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/05/5-Mobile-Design-Best-Practices-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/6-Mobile-Design-Best-Practices-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/6-Mobile-Design-Best-Practices-large-opt.png
  18. 18 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/05/7-Mobile-Design-Best-Practices.gif
  20. 20 https://www.ramotion.com/
  21. 21 https://www.swiss.com
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/8-Mobile-Design-Best-Practices.gif
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/05/9-Mobile-Design-Best-Practices-large-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/05/9-Mobile-Design-Best-Practices-large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-Mobile-Design-Best-Practices-large-opt.png
  26. 26 https://twitter.com/ftrain
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-Mobile-Design-Best-Practices-large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-Mobile-Design-Best-Practices-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-Mobile-Design-Best-Practices-large-opt.png
  30. 30 https://www.nngroup.com/articles/ten-usability-heuristics/
  31. 31 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
  32. 32 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
  33. 33 http://www.applift.com/blog/user-retention
  34. 34 http://www.lukew.com/ff/entry.asp?1945
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-Mobile-Design-Best-Practices-large-opt.png
  36. 36 http://www.lukew.com/ff/entry.asp?1945
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-Mobile-Design-Best-Practices-large-opt.png
  38. 38 https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
  39. 39 https://developer.apple.com/ios/human-interface-guidelines/ui-bars/tab-bars/
  40. 40 https://material.io/guidelines/components/bottom-navigation.html
  41. 41 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-Mobile-Design-Best-Practices.gif
  43. 43 https://www.ramotion.com/
  44. 44 https://developer.apple.com/ios/human-interface-guidelines/ui-controls/segmented-controls/
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-Mobile-Design-Best-Practices-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-Mobile-Design-Best-Practices-large-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-Mobile-Design-Best-Practices-large-opt.png
  48. 48 https://dribbble.com/patrickwong
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-Mobile-Design-Best-Practices-large-opt.png
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/15-Mobile-Design-Best-Practices-large-opt.png
  51. 51 https://www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/15-Mobile-Design-Best-Practices-large-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-Mobile-Design-Best-Practices-large-opt.png
  54. 54 https://www.thinkwithgoogle.com
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-Mobile-Design-Best-Practices-large-opt.png
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-Mobile-Design-Best-Practices-large-opt.png
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-Mobile-Design-Best-Practices-large-opt.png
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18a-Mobile-Design-Best-Practices-large-opt.png
  59. 59 http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18a-Mobile-Design-Best-Practices-large-opt.png
  61. 61 http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-Mobile-Design-Best-Practices-large-opt.png
  63. 63 http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-Mobile-Design-Best-Practices-large-opt.png
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-Mobile-Design-Best-Practices-large-opt.png
  66. 66 https://twitter.com/JustDimon
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-Mobile-Design-Best-Practices-large-opt.png
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/05/20-Mobile-Design-Best-Practices-large-opt.png
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2017/05/20-Mobile-Design-Best-Practices-large-opt.png
  70. 70 http://www.lukew.com/ff/entry.asp?1797
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2017/05/21-Mobile-Design-Best-Practices.gif
  72. 72 http://www.tandemseven.com/blog/how-to-use-disneys-principles-of-animation-to-improve-ux/
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/05/22-Mobile-Design-Best-Practices.gif
  74. 74 https://dribbble.com/Creativedash
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2017/05/23-Mobile-Design-Best-Practices-large-opt.png
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2017/05/23-Mobile-Design-Best-Practices-large-opt.png
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2017/05/24-Mobile-Design-Best-Practices-large-opt.png
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2017/05/24-Mobile-Design-Best-Practices-large-opt.png
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2017/05/25-Mobile-Design-Best-Practices-large-opt.png
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2017/05/25-Mobile-Design-Best-Practices-large-opt.png
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2017/05/26-Mobile-Design-Best-Practices-large-opt.png
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2017/05/26-Mobile-Design-Best-Practices-large-opt.png
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2017/05/27-Mobile-Design-Best-Practices-large-opt.png
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2017/05/27-Mobile-Design-Best-Practices-large-opt.png
  85. 85 https://www.smashingmagazine.com/wp-content/uploads/2017/05/28-Mobile-Design-Best-Practices-large-opt.png
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2017/05/28-Mobile-Design-Best-Practices-large-opt.png
  87. 87 http://www.comscore.com/Insights/Data-Mine/An-Average-Monday-in-the-UK-PCs-for-Lunch-Tablets-for-Dinner
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2017/05/29-Mobile-Design-Best-Practices-large-opt.png
  89. 89 http://www.pomegranate.co.uk/mobile-push-notifications/
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2017/05/29-Mobile-Design-Best-Practices-large-opt.png
  91. 91 https://www.smashingmagazine.com/wp-content/uploads/2017/05/30-Mobile-Design-Best-Practices-large-opt.png
  92. 92 https://www.appboy.com/
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2017/05/30-Mobile-Design-Best-Practices-large-opt.png
  94. 94 https://adobe.ly/2qtEglq
  95. 95 https://www.behance.net/galleries/adobe/5/Experience-Design
  96. 96 https://blogs.adobe.com/creativecloud/design/
  97. 97 https://adobe.ly/2qtEglq

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Lembit Kivisik

    May 18, 2017 8:31 pm

    Thanks, Nick, for another insightful article. A small note on research you’ve been using: since writing “How Do Users Really Hold Mobile Devices?” in 2013, Steven Hoober has updated his design guidelines for mobile phones (“Design for Fingers, Touch, and People”, part 1, part 2, and part 3 is upcoming).

    So, the 2013 claim that “85% of users use their phone with one hand” is overridden with “fewer than 50% of users hold their phone with one hand” today.

    5
  2. 2

    Suresh Kandeeban

    May 19, 2017 8:01 pm

    Nice Article Babich. Great animation samples.

    1
  3. 3

    Great tips and suggestions in almost every area of real concern.

    3
  4. 4

    People just keep forgetting these valuable lessons. Thanks for the sharing.

    1
  5. 5

    David Bajracharya

    May 24, 2017 11:49 am

    Great tips and suggestions, Helped me a lot.

    0
  6. 6

    “asking for a password with the incentive of a coupon code after purchase”

    If the customer uses a mobile phone why do you ask for a password? Logging in via mail every time is much more convenient. All it needs is a checkbox. S/he can set a password later if really really wanted.

    0
  7. 7

    Great article, Nick.

    About login walls: Sometimes UX needs to follow business objectives and not the other way around. Amazon does not want one-off customers. They want to get to know you and offer what you need.

    Their solution was to never really log you out unless you press the logout button. They only ask for a password for sensitive actions such as checking out but they get to know you better by observing what your are browsing in their site, what you are adding to your cart, etc.

    2
  8. 8

    Masum Parvej

    May 28, 2017 8:37 pm

    Thanks a lot! really a good read.

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top