How to Avoid 9 Common Mobile UX Mistakes


Published on

Kinvey’s eBook titled, “How to Avoid 9 Common Mobile UX Mistakes” explores nine of the most common UX pitfalls in mobile app design. It highlights the traps so that mobile app developers know how to avoid them.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to Avoid 9 Common Mobile UX Mistakes

  1. 1. How to Avoid 9 CommonMobile UX Mistakes
  2. 2. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 1No one sets out to create a poorly designed app. Every project beginswith high hopes and great expectations, but it’s amazing how quicklyapp design can start to unravel. Typically the problems with the userexperience (UX) result from the accumulation of seemingly minorissues -- compounding imperfections that ultimately cause users toquit the app and never come back. Many of these small mistakes emerge early on in the process, long before the visual design is even considered. Early decisions, like the initial feature set and how your backend system will work, can have a dramatic impact on the UX of the entire project. This eBook explores nine of the mostcommon UX pitfalls in mobile app design. It highlights the traps sothat app developers know how to avoid them. But if you’ve made anyof these mistakes, no need to worry. The eBook also explains how toovercome the setback.The 9 Most Common UX Mistakes in Mobile App Design 1. Not simplifying the feature set 2. Forgetting state 4. Overcrowding views 5. Keeping the user waiting without feedback 6. Displaying the wrong keyboards 7. Failing to do usability testing (or ignoring the results) 8. I gnoring speed and caching
  3. 3. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 2Mistake 1: Not Simplifying The Feature SetIf you want to build a product that issimple to use, then creating a simpleproduct is a good place to start. Wetend to think of all the wonderful thingsour app could do, but then things getmessy when we try to implement theentire list of possible features. So thetrick is to plan everything you mightwant in the application, then pare downthe list to only the most importantitems. This is sometimes referred to as arriving at your MVP, orMinimum Viable Product, but I prefer the following characterizationby Dan Cederholm of SimpleBits: “Dream big, implement small.”Analog as it is, for me it works best if I write everything down onpaper and then circle the absolutely critical features. I do this rather -ence, but if you pick out the mandatory features you will end up witha much shorter list.When working from the short list of mandatory features you can setthe bar for user experience very high. Then later as you add morefeatures you can work hard to maintain your high standards.The designers at 37signals say, “It’s better to build half a product thana half-assed product.” Cutting features at the beginning is the bestway to start building a great product.Mistake 2: Forgetting StateA few weeks ago I was trying to get some work done on my iPhone.Hunting for a particular piece of data required me to drill a few layersdeep into the app’s navigation. Then, realizing I needed somethingfrom the web as well, I quickly switched over to Safari.
  4. 4. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 3When I returned to this app moments later, I was shown the top-leveldashboard. Wait, what?no data had been lost, because the app hadn’t remembered mynavigation state, I felt as if the app had wasted my time. It created afrustrated user.Your app should always try to act on behalf of the user. It shouldremember the last screen the user was visiting so they can immedi-Remembering state can also work across devices. Since a singleperson may use multiple devices in which the apps sync betweenthem automatically, then the user will expect the data to sync as well. For example, if an Angry Birds player clears multiple levels on his iPhone, then he shouldn’t be set to the beginning on his iPad. State is a prime example of a UX issue being heavily impacted by backend functionality. If you (or a collaborator) don’t have backend development skills, you might want to try a back- end-as-a-service provider that haspre-built this capability for you.Mistake 3: Not Using Finger-Sized Tap TargetsLiterally the biggest thing you can do to improve the usability of yourapp is to increase the tappable area for every button. You’re design-pointing accuracy).Apple recommends a minimum of 44px by 44px for any element withwhich the user is expected to interact. The same recommendationapplies to other smartphone platforms.
  5. 5. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 4 Of course, this guidance doesn’t mean that the button needs to appear that large. The tappable area can extend beyond the visible borders of the button. This will help users avoid the frustration of trying multiple times to tap an element. Just be careful if you position several buttons close to each other. Make sure that your extra tappable area doesn’t overlap with other buttons.Mistake 4: Overcrowding ViewsIf you are used to designing for desktop computers, you’ll beBecause the screens are so much smaller, and tap targets need to belarger, views quickly become overcrowded. The solution is not tomake elements smaller. That will just frustrate your users. Insteadyou need to add more views.Whenever I start designing a newmobile app, I underestimate thenumber of required views. I startout thinking it will be a relativelyviews, but then the views startas many as 20 views to handle allthe necessary tasks (registration, -tion times, etc).But that’s okay. It’s better to add more views than it is to overcrowdbuttons are clear, and that it’s easy to get back to the previous view.
  6. 6. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 5Mistake 5: Keeping The User Waiting Without FeedbackUsers have very little patience with mobile applications. As a mobileapp developer, you might be frustrated with a user’s impatiencebecause you understand that some tasks are always going to beslow, especially when the user has aweak networkconnection or an older device. “Typically the problems with theIf your app is too slow or feels unre-sponsive, it only takes a single tap of user experiencethe “home” button before your user is result from thegone and never revisits your app. accumulation ofLuckily there is an easy way to help seemingly minoryour users become more patient: issues. ”Simply keep them informed.Typically the problems with the user Click to tweetexperience (UX) result from the accu-mulation of seemingly minor issuesnewly installed app. By default, iOS shows a splash screen while theapp is installing. Instead of the generic splash screen, you coulddisplay a simple message with a loading animation that reads,"Installing ..."That step alone will grant you several seconds of patience. If it takeslonger you can buy more time by changing the message. Next set itto "Loading database ..." If you need even more time wait severalseconds and update the message again. "Loading interface ..." willgive you still more time. Change the messages to what makes sensefor your application, but keep the user informed.You see, the user is just worried that your app has locked up. No onewants to keep staring at a screen that isnt going to do anything else.By changing the messages it shows that your application is stillworking on their behalf.
  7. 7. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 6Mistake 6: Displaying The Wrong KeyboardsHave you ever typed in a URL and been happy to see a button on thekeyboard that has “.com” on a single button? That single button savedyou three additional keystrokes.That little shortcut is possible because we know what type of data iseasier. This means that you can add an “@” button on the mainkeyboard for entering emails or showing that “.com” button for URLs.There are actually available to you onshould be used to input the content. These range from the defaultsubtle variations in between. Look through the options and choose the You can also choose the keyboards on mobile web apps by changing the we use <input type=”text” /> and <input type=”password” />, but in HTML5 even more options are avail- able. The one you should use most often is <input type=”email” />. a standard text input, but iOS and Android will automatically display akeyboard with a period and an @ symbol to make it quicker to enteremail addresses.Mistake 7: Failing To Do Usability Testing (Or Ignoring The Results)Typically when you develop an app you know the product so well thatyou can’t accurately judge how easy it is to use for someone experi-are intuitive to you, since you designed them, may need more expla-nation for a new user. The solution is to conduct usability testing.
  8. 8. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 7That may sound like a fancy term, but it really can be quite simple.Find a friend or unsuspecting stranger who can give unbiased feed-back. Hand them a phone running your app and ask them to com-Resist the urge to coach them. Just watch what they do,the necessary buttons.It’s best if you can get them to verbalize their thoughts in thisprocess.Take notes as you watch them. Once they complete a task give themanother one and keep watching. This process can be invaluable,provided the participant feels free to share his or her unvarnishedopinion.before testing with others. Generally there’s little need to conductuser testing with lots of people. You’ll reach the point of diminishingreturns quickly. I’ve consistentlyfound that users encounter 90% ofthe same issues.Using potential customers or at leastpeople in your target market is best,but almost anyone will do. Just weighthe value of their feedback based onhow close they are to your targetcustomer.Pitfall 8: Ignoring Speed & CachingWhen implementing features and designing a great user experience,it can be easy to forget that . In fact, if your app isslow, your users may become frustrated and never even try the
  9. 9. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 8Facebook recently released an update to their iOS app. This updatedramatically improved the user experience, but visually very little wasTheir entire update focused on making the app fast. Facebook, likemany apps, needs to get almost all of their data from a server that was slowing down the entire experi- ence. By decreasing requests and implementing caching, the speed of the app improved so much you could see user reviews on the App Store pointing it out. Caching your data to improve load speed is another area that a thoughtfully architected backend can provide -- and, in doing so, radically improve the user experi-ence of your application.Many apps need to be used actively in order for the developer togenerate revenue (e.g., increasing views for advertisements orenticing users to make in-app purchases). So how do developers getusers to come back?poorly. Do you really want to be reminded to use that app you neverthe app.should. Just be smart about it.location it can help make your app more sticky and keep themcoming back. This is just another reason to have a server-side com-ponent to your application. The better your information about your
  10. 10. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 9customers, the more targeted you can be in your interactions withthem.desperate attempt to get some of your users back.Wrapping UpMany of these mistakes are easy to make, but luckily most are easy tonormal design process and try to see the application as a user. Start at the beginning and go through the users will. Take notes at every juncture, paying special attention to complete sense or could cause confusion. Write down a to-do item for each spacing issue, every sentence of copy that isn’t clear, and each bug you encounter -- especially thethings you didn’t have time to deal with when you were building thefeature.important to be aware of everything your users may encounter. Thenwhen you are back in your design or development mindset you canpower through many of those tasks quite quickly.Though if you take nothing else away from this, I want you to startdoing usability testing. It really does not have to be complicated. Justwatch your users as they use your product. You will learn so much invery little time.
  11. 11. HOW TO MAKE AN APP: iOS EDITIONWritten by Designed byNathan Barry Jake McKibben and Lauren PedigoBarry is a software designer and authorof two books: The App Design Hand- Project Managerbook and Designing Web Applications.He enjoys teaching design, creating new Joe Chernovproducts, and writing about the entireprocess on his blog, lives in Boise, Idaho with his wifeand one year old son. A favorite pastimeis traveling and showing the world tolittle Oliver, though he wont rememberany of it. What is Kinvey? Kinvey makes a fully-featured Backend as a - platform where its free to get started and you only pay when your app is successful. Build your backend today