Top 5 Best Practices for Mobile UI Design

Posted by on in Tutorial

In this post I will cover the top 5 best practices to achieve great mobile user interface and user experience application design.  
 
When designing mobile applications you should use standard interface and experience design patterns that users expect. Navigation across the application should be gesture enabled and flow in a clear and effortless fashion. Do not try and replicate the desktop experience on mobile but rather extend it from a top down fashion. Use responsive design concepts to adopt to the evolving ecosystem of screen sizes and form factors.

User interface (UI) is a subset of user experience. If the user experience were a road trip (getting from point A to point B), the UI would be the roads and the scenery. If the roads and the scenery were great, but ultimately didn’t get you where you wanted to go, then the overall experience would be a failure.

 

#5 - Build Apps With Design Patterns Users Expect

To help avoid user abandonment, provide a consistent and well thought out UI experience. Inform your design by understanding the goal of the application and how it will fit the needs of the end user. In order to achieve this, UI prototyping should be done from the earliest stage of application development.

Listen To Your Customers and Get Insights Early

“If I'd have asked my customers what they wanted, they would have told me ‘A faster horse.’” - Henry Ford!

Listen to your customers, but understand that what customers think they want is not always the correct way to go. Their insights are often jaded by their own experiences, or by the options currently available to them.

That being said, they can still offer a wealth of information. Sometimes we are too close to a product to see the “forest for the trees”, so it’s beneficial to get an objective view. Share your wireframes, prototypes, alphas and betas with your customers as often as possible. The earlier you can course correct, the better.

#4 - Define a Target User and Build Toward Them

Before you begin designing your product, you need to know who you are designing for. In user experience design, the “who” is just as important as the “what”. These are generally referred to as “personas”.

Ask yourself the following questions:

Will the user be a novice or experienced?

Novice users tend to move a little more slowly and cautiously through an application, need more handholding and like a reduced set of features. Experienced users will be more confident, expect power features and want to jump in with both feet. Think about the needs unique to each group and decide how they should be addressed in your app.

Will the usage of this app be frequent or infrequent?

Frequent users are more willing to learn how to use software. If you use it enough, it becomes second nature. Infrequent users, however, may need to relearn your app each time they open it. If the app is designed around infrequent use, make sure you embrace existing metaphors and restore state over subsequent sessions to ensure familiarity.

In general, mobile apps should not require extensive tutorials but be intuitive and easy to use. If instruction is needed, consider providing a set of swipe through screens or a quick video to highlight key functionality.

#3 - Focus on the Minimum Viable Product

The minimum viable product is that product which has just those features and no more that allows you to ship a product that early adopters see and, at least some of whom resonate with, pay you money for, and start to gave you feedback on. - Eric Ries!

Too many times we get tied down with trying to run before we’ve learned how to crawl. Focusing on the minimum viable product (MVP) allow you to focus on your core set of features that you believe will solve a key set of problems.  

You don’t want to waste your time building a product that doesn’t resonate with your customers, and ultimately doesn’t sell. The quicker you you get to your MVP, the quicker you can get it into the hands of real-world users and learn if you are on the right track.  

Don’t be afraid to fail. This is the point of the MVP; to test your suppositions. If you’re on the wrong track, ask your customers what they didn’t like. Take these learnings and roll them back into the product, or possibly even use them to create a brand new product serving an entire new problem.

When you get the core right, then you can go back and focus on supporting features. By following this one rule, you’ll save countless hours programming features no one needs or uses.

#2 - Create Intuitive and Flowing Navigation With Design Cues

Context is key when engaging with your users. Use obvious design cues to clue the user in on what is happening with the app. Make sure you focus on the following:

  • Where is the user in relation to the app? Make sure there’s an easy way to get back to the previous screen or even the home screen.
  • What is the current state? If a text element is active, highlight it. If a button is being pressed, make it visibly different from the non-pressed state.
  • What will the result be? Don’t make your user guess what an action will do. Use design cues (colors, icons, etc.) to guide the user.
  • Is there a change I should be aware of? If clicking a button will disconnect a user and end a session, notify the user before performing that action.
  • Highlight important changes. When a user has performed an action that has no obvious manifestation on-screen (i.e. adding a record, saving a file, etc.), give a brief cue to reassure the user. This can be an animation, a flash of color or even a message.

Understanding App Menu Types

The home screen navigation should clearly provide the user with an overview of what the app has to offer. Glyph buttons annotated with text can be arranged in a grid like layout. Enable swipe commands to allow the user to switch between multiple sets of glyph buttons.  

Homescreen

 

Drawer menus are invoked by tapping on a menu button or swiping from the far edge of the screen inward. This is a very efficient way to take advantage of limited screen real estate on smaller form factors like phones. On larger displays, the drawer may be left in an open state.

 

drawer

The application title bar should always be the top most element on the screen with the displayed text center aligned. The title bar informs the user of where they are within your app and provides navigation and button options. Reserve the left half of the title bar to provide navigation cues; either to return to the previous view or to open the drawer menu. The right half of the title bar can be used for contextualized buttons. For example, when viewing the inbox of an email app, a glyph button with a mail icon would transition the view to a new blank email.

It is important to conform to the design standards set forth on the native platform. The tab bar and tab items sit on the top of the screen for Android apps and on the bottom of the screen for iOS apps.

#1 - Plan for New Experiences Within the Internet of Things

Mobile no longer means just smartphones and tablets.

The Multi-Device revolution is now in full swing and so is the Internet of Things. New form factors, new kinds of screens, and new types of interactions are changing the way people use technology.  It is no longer sufficient to just plan for mobile and desktop solutions. Wearable devices are at the forefront of this expansion with products like the Apple Watch, FitBit, Samsung Gear and the Motorola Moto360, and Google Glass. How does UI/UX extend to these devices? How can your application extend its reach onto these platforms?

Ask these questions during every phase of development when planning for the Internet of Things.

Connected Apps are at the center of the IoT experience. UX/UI now spans across many disparate devices and screens. Users expect their data to be accessible everywhere and on every device. Information needs to flow freely, clearly, and in a timely manner to keep the user engaged.

Tags: Appmethod


About
Gold User, Rank: 8, Points: 399
Brian Alexakis is a Product Marketing Manager at Embarcadero Technologies. He is focused on leveraging the connected world of technology to build new experiences for the Internet of Things.

Comments

Check out more tips and tricks in this development video: