{"id":7830,"date":"2014-04-15T10:30:16","date_gmt":"2014-04-15T15:30:16","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/blog\/?p=7830"},"modified":"2022-11-22T13:32:32","modified_gmt":"2022-11-22T19:32:32","slug":"10-keys-to-a-great-mobile-user-experience","status":"publish","type":"post","link":"https:\/\/www.mrc-productivity.com\/blog\/2014\/04\/10-keys-to-a-great-mobile-user-experience\/","title":{"rendered":"10 keys to a great mobile user experience"},"content":{"rendered":"

\"Education\"Summary: Building a mobile app is an expensive and time-consuming task. The problem is, if you can’t give your users a great user experience, no one will use it…and all of that time and money will be wasted. This article will help you avoid that fate. <\/em><\/span>
\n<\/a>
\nThe user interface is one of the most important aspects of a successful mobile app or mobile web app, but it\u2019s just a small part of a much larger picture: The user experience. The user experience encompasses the user\u2019s perceptions and feelings during their interaction with your app.<\/p>\n

In other words, how does your app make the user feel? When you boil it down, that\u2019s the only thing that matters.<\/p>\n

\"photo<\/a>
photo credit: William Hook<\/a> via photopin cc<\/a><\/figcaption><\/figure>For instance, have you ever used a mobile app or a mobile web app that frustrated you? Maybe it was slow or confusing. Maybe it frequently crashed. Whatever the reason, you probably don\u2019t use that app anymore. <\/span><\/p>\n

The question is, how can you avoid this fate with your own apps? If your business is creating (or has created) mobile apps, how can you avoid frustrating your users? How can you give them a great mobile user experience?<\/p>\n

To help you answer that question, we\u2019ve gathered input from a variety of experts in the area and have listed their advice (along with some of my own) below. Here are 10 keys to a great mobile user experience.<\/p>\n

1. Provide a true mobile experience<\/h3>\n

It\u2019s a problem I still see all too often: Companies try to take existing web applications and cram everything into a mobile web application. This is a mistake. Don’t try to give your users a desktop experience on a mobile device. The result is a cluttered mess that nobody wants to use. As explained below, focus on your app’s main purpose, and leave everything else out.<\/p>\n

\n\u201cDesigning and building a native mobile experience is not like building for only the web,\u201d says Matthew Ausonio, a Mobile Developer at High Gear Media<\/span><\/a>. \u201cYou can\u2019t simply shrink down a website and hope for the best. In my experience, it is best to take some time and boil down your app to its main purposes. Then craft the whole experience to enable quick access to the main tasks you want it to perform. This aligns your experience with how most mobile users use their devices; seeking to complete a specific task as quickly as possible.\u201d\n<\/p><\/blockquote>\n

\"On<\/a>
On the left: A web app shrunk down to fit on a mobile device. On the right: a mobile web app designed for a mobile device.<\/figcaption><\/figure>\n

2. Understand your user\u2019s context<\/h3>\n

Understanding your user is arguably the most important key to good web application development. In mobile app (or mobile web app) development, it goes a step further: Understand your user\u2019s context. <\/p>\n

Where is the user accessing your app? What are they trying to accomplish? Are they in a hurry? All of these questions help you understand the user\u2019s context. Once you understand how, why, and where they\u2019re using your app, you must design everything around that information.<\/p>\n

3. Speed is king<\/h3>\n

Have you ever used a slow app? Here\u2019s a better question: Have you ever used a slow app more than once? Probably not (unless you had to). Mobile users don\u2019t have much time (or patience), and have no tolerance for slow apps. How much does a slow app hurt user adoption? Google once found that just a half-second delay in load time resulted in a 20% drop in traffic.<\/p>\n

\n

\"photo<\/a>
photo credit: Nathan E Photography via photopin cc<\/a><\/figcaption><\/figure>\u201cThe biggest inhibiting factor to a good mobile experience is speed,\u201d says Sam Jackson, Marketing coordinator at Mojo Motors<\/span><\/a>. \u201cWhen a smartphone user clicks through to your website from an email, the website better load instantly with a 4G connection. Lots of sites look good on mobile, but the whole point of mobile optimization is to be able to access and use a site when you are on the go. If pages take too long to load, it doesn’t matter how good they look.\u201d\n<\/p><\/blockquote>\n

The question is: How can you improve your app\u2019s performance? If you\u2019re building native mobile apps, here\u2019s a good list of performance-improving tips<\/span><\/a>. If you\u2019re building mobile web apps, here\u2019s a great article for improving both performance, and perceived performance<\/span><\/a>.<\/p>\n

4. Open up communication with your users<\/h3>\n

Some developers waste their energy trying to come up with new app features, or understand why users abandon their app. The only problem: They don\u2019t ask the users. Opening up lines of communication with your users is one of the most important steps to a great user experience.<\/p>\n

\n\u201cFor me, the key to achieving [a great user experience] was to enable a Q&A feature on the apps so that I could answer questions that my users had,\u201d says Alex Genadinik, an app developer and the creator of the GlowingStart.com<\/span><\/a> business apps. \u201cAnd I got to discuss with them how the app could be better. And over time, I was able to add just the features my app needed.\u201d\n<\/p><\/blockquote>\n

5. Make buttons reachable<\/h3>\n

As phones get larger, designing great mobile user experiences becomes more complex.We\u2019re now dealing with mobile devices with screen sizes that range from 3.5 inches to 5.5 inches. The larger the phone, the more difficult it is to operate with one hand.<\/p>\n

\n\u201cRemember, users tend to use their phones primarily with one hand, so design the user interface to allow for that,\u201d says Dilip Dand, Co-Founder and Mobile Product Management Expert at Lighthouse3.com<\/span><\/a>. \u201cFor example, common tasks and activities should be in the bottom half of the screen for easy access. Less frequently or tasks that require deliberation on users’ part should be near the top.\u201d\n<\/p><\/blockquote>\n

Here\u2019s a great article<\/span><\/a> that goes into more detail on this issue, and even outlines \u201creach zones\u201d across different device sizes. As mentioned in the article, keep your important buttons within the \u201ceasy\u201d reach zone. <\/p>\n

<\/a> <\/p>\n

Keep important buttons in the “reach zone”<\/div>\n

6. Keep buttons around 72px wide<\/h3>\n

One big difference between mouse-based and touch-based interfaces: Touch-based interfaces are less precise. If you\u2019ve ever tried to press a small button or a text link on a mobile device, you know what I mean. Small buttons lead to mistakes. Mistakes lead to user frustration.<\/p>\n

So, how big should you make a button on a mobile app? <\/p>\n

Fortunately, MIT conducted a study on the matter<\/span><\/a>. They found that the width of an average adult index finger converts to roughly 45 – 57 pixels, while the average thumb width converts to a width of 72px. <\/p>\n

Considering most people use their smartphones with one hand, it\u2019s good practice to create buttons for easy thumb-pressing–at least 72px wide.<\/p>\n

7. Be careful with \u201cdestructive\u201d buttons<\/h3>\n

Even if you include large buttons in your mobile app, a touch-based interface is much less precise than its mouse-based counterpart. Users are bound to accidentally press a button, or hit the wrong button by mistake. Unless properly accounted for, this could cause major problems for the user. <\/p>\n

\"photo
photo credit: OpenClips<\/a> via pixabay<\/a> cc<\/a><\/figcaption><\/figure>\n

\u201cWhen you’re dealing with a set of buttons that could cause a destructive and\/or permanent consequence for the user, (such as cancel and delete), make sure that you allow enough space between the buttons so that the user doesn’t accidentally hit the wrong one,\u201d says Kishore Khandavalli, CEO of SevenTablets<\/span><\/a>. \u201cIt’s a good practice to include a confirmation popup or message before any destructive action takes place. Similarly, don’t make the user deal with a popup if you’re just confirming something. (i.e. “Your work has been saved.”) You may want to notify the user of a successful action, but don’t throw a popup message that the user has to click through.\u201d<\/p>\n<\/blockquote>\n

8. Simple animations go a long way<\/h3>\n

\n\u201cWhile designing for function is of the utmost importance, small design choices can have a large impact in creating a memorable user experience,\u201d says Tray Ailshie, senior consultant at Twentyseven Global<\/span><\/a>. \u201cAnimated transitions between elements and other animated UI behaviors such as parallax scrolling can increase user engagement in your app or website. When used sparingly and seamlessly in your app or on your site, these small touches can convey a greater sense of polish while providing some “eye candy” for the user. When paired with a minimalist or flat interface, these animation can provide some visual interest that may be absent in the layout.\u201d\n<\/p><\/blockquote>\n

While simple animations and transitions provide a more polished look and feel (as evidenced in the iOS interface), simple animations can provide another valuable benefit: They improve perceived performance. For instance, displaying a simple animation while an app loads will distract the user from the load time, making the app appear faster than it actually is.<\/p>\n

9. Follow platform-specific design patterns<\/h3>\n

\n\u201cThe companies behind the mobile platforms (Apple, Google, etc) spend a lot of time crafting the general experience of mobile devices,\u201d explains Ausonio. \u201cBy understanding how a user interacts with their mobile device on a daily basis, you can ensure your app isn\u2019t a \u2018shock to the system\u2019 by breaking common conventions. Or even worse, you may have some functionality designed for one platform, that simply won\u2019t work as intended on another. And as a result will need to be tailored for each platform.\u201d\n<\/p><\/blockquote>\n

While that\u2019s sound advice for building native apps, what about mobile web apps? Here’s my advice: Use standard design conventions, rather than trying to create something new and revolutionary. Chances are, your “new and revolutionary” interface will only confuse your users. <\/p>\n

10. Reduce input form pain <\/h3>\n

While forms in mobile apps should be avoided as much as possible, sometimes they\u2019re necessary. In these cases, reduce the pain of completing the form as much as possible. How? Here are a few tips:<\/p>\n

1. Only require the bare essentials<\/strong>
\nAs Luke Wroblewski says in his book Mobile First<\/span><\/a>, \u201cWhen it comes to mobile forms, be brutally efficient and trim, trim, trim.\u201d Limit registration forms to the absolute minimum fields required.<\/p>\n

2. Switch the keyboard<\/strong>
\nFor numeric fields, automatically give users a numeric keyboard. This is as simple as adding \u2018type=\u201dnumber\u201d\u2019 to your input field. <\/p>\n

3. Auto-format the fields for the user<\/strong><\/p>\n

\n\u201cDon\u2019t force the user to input data in a specific format,\u201d says Khandavalli. \u201cIf, for example, you have a SSN or phone number field, allow the user to input the information any way they want to, instead of throwing an error if they put in hyphens when you didn’t want them. Put the responsibility on the computer to figure out that xxxxxxxxx and xxx xxx xxx and xxx-xx-xxxx are all valid ways of entering a phone number.\u201d\n<\/p><\/blockquote>\n

4. Design input fields for mobile devices<\/strong><\/p>\n

\n\u201cLet the form span 100% of the width when you’re dealing with mobile phones,\u201d says Khandavalli. \u201cYou also want to make sure the input fields are tall enough for larger fingers to tap. Finally, make sure that the label for each input field is appropriately spaced so that they look “grouped” together, and not haphazardly placed. The user will get frustrated quickly if they can’t manage to tap the right field or button and then can’t easily visually decipher which label goes with which input field.\u201d\n<\/p><\/blockquote>\n

So, what do you think? Would you add anything else to that list? If so, I\u2019d love to hear your thoughts in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"

Summary: Building a mobile app is an expensive and time-consuming task. The problem is, if you can’t give your users a great user experience, no one will use it…and all of that time and money will be wasted. This article will help you avoid that fate.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","slim_seo":{"title":"10 keys to a great mobile user experience - mrc's Cup of Joe Blog","description":"Summary: Building a mobile app is an expensive and time-consuming task. The problem is, if you can't give your users a great user experience, no one will use it"},"footnotes":""},"categories":[8],"tags":[34,35],"class_list":["post-7830","post","type-post","status-publish","format-standard","hentry","category-education","tag-mobile","tag-mobile-apps"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/comments?post=7830"}],"version-history":[{"count":18,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7830\/revisions"}],"predecessor-version":[{"id":14082,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7830\/revisions\/14082"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/media?parent=7830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/categories?post=7830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/tags?post=7830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}