Designing the Mobile User Experience

As a digital designer today, we not only deal with visual aspects of our projects, but also with things like basic architecture of information, mapping logical user flows, enhancing speed performance, and integrating 3rd-party components. In other words, we’re not just visual designers a là carte—we’re more like three-course problem solvers with an extra order of sauce.

In my opinion, this is a good thing. It means that we not only grow our skills beyond physical shape and form, we’re able to have input and ownership in all aspects of a mobile app from concept to final product.

With that in mind, the following sections outline critical aspects of designing a good user experience on mobile. By no means does it dictate what colors, shapes, layout, or icons to use—I’ll leave that up to you and your brand identity. Instead, I’d rather you elevate your design thinking into more conceptual lenses to inform and improve those forthcoming design decisions.

 

1. Attraction

 

 

The first step in designing a fluid and friendly mobile app is to make it attractive to the user. This typically happens in a very short amount of time, and indeed even before they download anything. They browse through their app store looking for a tool that best suits their style and needs, while also seeming easy enough to learn and use hassle-free. This is where things like branding, badge icon, key screenshot samples, and free demos can make your app really stand out. These help to inform the user of how basic or complex the app functionality is, gives a sneak peek into what it looks like, and whether it will behave as expected. Even subtle visual cues can help sell the product without uttering a single word.

So take the due diligence to really make your app look and feel professional right from the get-go, while also staying true to your inherent brand identity. Pixel perfection from the badge icon to the logout button should be self-evident and will set you apart from the herd. Shopping and previewing an app is the first step in the user experience journey.

DO:

  • Design a badge icon with a color pop, while remaining clean, recognizable, and on-brand
  • Limit featured key screenshots that depict core functions and/or unique differences
  • Consider a free (limited-time) trial demo to get past any possible initial purchase hurdles

DON’T:

  • Use off-brand colors and font choices that may hurt the immediate visual appeal
  • Feel inclined to copy your competitor app designs; it’s good to be different
  • Take prototyping and wireframing for granted; much can be learned in discovery phases

 

2. Impression

 

 

Once the user has downloaded your app, the next step is to make a great first impression. By incorporating things like one-time login, fun loading animations, a helpful step-by-step wizard, and a tasteful color palette, you will have set the bar high in regards to the immediate visual appeal. But beware not to overwhelm users with too much at once—that’s a sure fire way to turn them off before they’ve given you a chance to win them over. Instead, let them click, tap, and swipe around at will, so they can get a good feel for the environment you’ve designed and begin to discover the full potential of what your product has to offer.

Often times, less is more. Take the opportunity to test prototypes with people wholly unfamiliar with your app. This will help gauge the intuitiveness of your design and user flow, allowing you to identify problems early enough to make meaningful adjustments before it’s too late.

DO:

  • Include a guided tour or wizard to help users understand features and functions
  • Consider designing simple loading animations to signify progress and give user feedback
  • Make it easy to return where they left off, by using one-time login capabilities

DON’T:

  • Overdo it with motion and animation; use these enhancements only if done tastefully
  • Make navigation unduly difficult by using vague iconography or multiple sub-menus
  • Jump right to the computer; take the time to sketch, wireframe, and make paper prototypes

 

3. Education

 

 

When it comes to educating users about all your features and functions, it’s best to give information in smaller bite-sized nuggets, rather than everything all at once. Humans naturally learn and retain information much better when they’re able to focus attention on specific pieces rather than the whole. This is one reason why we typically have a navigation menu that conveniently segments different areas of our app with what are essentially shortcuts. From the main menu, users then dive into one section at a time, allowing visual hierarchy to take over and help guide the user through the content. Using clearly defined header styles and typefaces, a sticky navigation bar, and expand/collapse drawers to help divide and contain relevant information blocks will have users singing praise for the thoughtful and organized approach with your clean design aesthetic.

DO:

  • Keep copy blocks clear and concise; be sure to read them aloud and check for typos
  • Use icons in tandem with copy to help reinforce communication for better comprehension
  • Find the most efficient ways of grouping, hiding, and displaying pieces of content

DON’T:

  • Choose vague iconography and generic language that may lead to confusion
  • Make visual elements compete with each other; give hierarchy via size, color, and location
  • Assume that users will pick up everything fast; sometimes it takes some repetition

 

4. Integration

 

 

The great thing about having a little supercomputer in your pocket is that you have instant access to so many different tools and applications, from productivity management to leisure gaming and everything in between. Taking advantage of native hardware (like the camera and gyroscope) and cross-functional software (like plug-ins and partner apps) can extend and enhance the capabilities of your own app without having to reinvent the wheel. If you can build the camera function into your app environment without making users tap out, it gives them a more holistic and streamlined experience. Depending on the function of your app, it may not make sense to include these integrations, but when applied strategically they can open up a whole new world of additional uses and propel your app into territories previously ignored.

DO:

  • Consider using existing hardware capabilities and software solutions to enhance your app
  • Stay aware of iOS / Android software platform evolution and hardware capabilities of the future
  • Start strong with the basics of your MVP (minimum viable product) then add the bells and whistles later, little by little

DON’T:

  • Try to reinvent the wheel; there may already be a solution out there that solves the problem
  • Ignore the trends in both design and technology; keep up with blogs, newsletters, etc.
  • Underestimate your app’s full potential; instead, challenge the status quo early and often

 

5. Retention

 

 

At the end of the day, the most important goal is to keep users coming back for more. Don’t be a one-hit wonder. Things like visual consistency, timely updates and push notifications, regular opportunities for feedback, and offering rewards via gamification are just a few avenues to keep your user base from shrinking or leveling off. Being clear and consistent in your color palette, language, and button placement will avoid lots of confusion and re-education. Using grids and similar shapes throughout the app helps to unify the visuals and provide an experience free of confusion.

DO:

  • Make buttons, CTA’s, and other clickable links pretty obvious and consistently placed
  • Use notifications strategically and sparingly; too many of them can really irritate users
  • Add simple rewards or other forms of gamification to increase repeated user sessions

DON’T:

  • Neglect lapsed users; they may just need a friendly reminder to login or update
  • Offer rewards that may be illegal; check appropriate laws relevant to your industry
  • Over-promise and under-deliver; for better or for worse, your reputation will follow you

Conclusion

Every mobile app takes a tremendous amount of time and effort to develop, and it can be done in many different ways for many different brands. This article isn’t meant to tell you what colors or button shapes to use, which type of menu interface is better, or how to use Parallax effectively. Those things change all the time depending on who’s designing for what brand, and what’s trending this season; subjects for a different article.

Instead, use higher level concepts as filters to view your mobile UX projects through, because they will stand the test of time. Focus on the experience first and the design second. They are closely intertwined, but if one can inform the other, then part of our job is already done and your app will be successful because it keeps the user top of mind.