How to Avoid 9 Common Mobile UX Mistakes By Kinvey

  • 636 views
Uploaded on

No one sets out to create a poorly designed app. Every project begins with high hopes and great expectations, but it’s amazing how quickly app design can start to unravel. Typically the problems with …

No one sets out to create a poorly designed app. Every project begins with high hopes and great expectations, but it’s amazing how quickly app design can start to unravel. Typically the problems with the user experience (UX) result from the accumulation of seemingly minor issues -- compounding imperfections that ultimately cause users to quit the app and never come back.

Credits to Nathan Barry, Jack McKibben, Lauren Pedigo, and Joe Chernov of Kinevy.com

More in: Self Improvement
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
636
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. How to Avoid 9 CommonMobile UX Mistakes
  • 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 3. Not using finger-sized tap targets 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. Ignoring speed and caching 9. Overusing push notifications
  • 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 ratherthan crossing out the optional features. It seems like a minor differ-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. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 3When I returned to this app moments later, I was shown the top-leveldashboard. Wait, what?What happened to the page I had worked so hard to find? Althoughno 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-ately pick up where they left off when they return.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 has pre-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-ing for fingers and thumbs, not mouse cursors (which have a higherpointing 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. 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 besurprised at just how little content you can fit on a mobile phone.Because 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 relativelysimple app with fewer than fiveviews, but then the views startadding up. Before long I find I needas many as 20 views to handle allthe necessary tasks (registration,forgot password, setting notifica-tion times, etc).But that’s okay. It’s better to add more views than it is to overcrowdjust a few views. Dedicating an entire view to setting a notificationtime is just fine. Just make sure that your transitions are quick,buttons are clear, and that it’s easy to get back to the previous view.
  • 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 issuesLets say you are trying to populate the database on the first run of anewly 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. 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 isexpected in a text field, so we can change the keyboard to make thateasier. This means that you can add an “@” button on the mainkeyboard for entering emails or showing that “.com” button for URLs.There are actually eight different keyboard variations available to you oniOS. Whenever you put in a text field you can select which keyboardshould be used to input the content. These range from the defaultkeyboard to number keyboards that are entirely different, with lots ofsubtle variations in between. Look through the options and choose theone that makes the most sense for each field. You can also choose the keyboards on mobile web apps by changing the input type. Normally for form fields 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” />. Visually it doesn’t look different from 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-encing it for the first time. You are simply too close to it. Concepts thatare intuitive to you, since you designed them, may need more expla-nation for a new user. The solution is to conduct usability testing.
  • 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-plete a specific task, such as “Create a new to-do item.”Resist the urge to coach them. Just watch what they do,catalogue where they get confused, and gauge how quickly they findthe 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.After you’ve captured feedback from a few people, make the fixesbefore 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 speed is a feature. In fact, if your app isslow, your users may become frustrated and never even try theapp-differentiating features you spent so much time building.
  • 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 wasdifferent. So what made the difference?Their 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.Pitfall 9: Overusing Push NotificationsMany 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?Push notifications are one option, but many developers use thempoorly. Do you really want to be reminded to use that app you nevercared about in the first place? In that case a poorly targeted pushnotification may be the final straw needed for the user to uninstallthe app.That’s not to say you shouldn’t use push notifications, because youshould. Just be smart about it.If you send targeted notifications based on a user’s preferences orlocation 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. HOW TO AVOID 9 COMMON MOBILE UX MISTAKES 9customers, the more targeted you can be in your interactions withthem.All this will save you from sending a mass push notification in adesperate attempt to get some of your users back.Wrapping UpMany of these mistakes are easy to make, but luckily most are easy tofix as well. It takes an attention to detail throughout every step of theapp creation process to finish with a great user experience.Near the launch of a new app I find it helpful to get away from mynormal design process and try to see the application as a user. Start at the beginning and go through the setup steps exactly as your first users will. Take notes at every juncture, paying special attention to places in the flow that don’t make 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.You don’t necessarily have to fix everything on that list, but it isimportant 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. 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, NathanBarry.com.Nathan 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 Service solution, offering 3rd party data integrations, multi-plat- form support, push notifications, and custom business logic on a platform where its free to get started and you only pay when your app is successful. Build your backend today