10 Tips for Mobile App User Interface Design

Tip 1: Stay focused

The best mobile apps focus on doing one thing very well. You should be able to describe what your application does in one sentence without mentioning any "details". Users should be able to launch it, use it, and then use it to accomplish their goals in seconds. If users have to go through more than four levels of menus to use an app, it will be uninstalled quickly.

Tip 2: Use the back button appropriately

On Android, the system-provided back button should enable users to return within the app. While the back button is controlled by software in iOS, you should always provide a back button, and in principle users are accustomed to the back button in the upper left corner. Following the back-button's conventional behavior and OS-specific placement is crucial if your app is to meet user expectations.

Tip 3: Consider soft keyboard behavior

Most mobile applications require keyboard input on one or more screens. Unfortunately many designers don’t consider how the interface will appear when the on-screen keyboard is activated. When you test, make sure there is enough space on the screen for users to know what they are doing, even when the on-screen keyboard is activated.

Tip 4: Thoughtful Blank Prompt Placeholders

If your application has only a few data entry fields, displaying a blank prompt is user-friendly and can make the application look cleaner. If your application has many data input fields, using placeholders instead of labels can become very cluttered. Once the user enters some information in the input field, unless the information is self-explanatory, the user needs to guess the information.

Tip 5: Challenge new features

In previous application design, software developers focused on adding as many features as possible into their programs. Their measure of success is the ability to have more features and functions than their competitors. The mobile revolution has changed that.
In a desktop application, a less frequently used feature would be added to a submenu, but power users would find that this feature might be a good idea because it differentiates your application from competitors. In a mobile app, a feature that is not very useful can make the user interface cluttered and difficult to use.

Tip 6: Put the tabs in the right place

In iOS, the primary tab navigation does not look like tabs. They are icons at the bottom of the screen that users use to switch between the main functions of the app. Most iOS users are not used to this feature appearing at the top of the window, but Android users are used to it. On Android, tabs are usually placed at the top of the app and can be switched by swiping left or right.
The key point here is that if your app relies on a single "tab" for navigation to the main functionality of your app, you need to put them in different locations on iOS and Android.

Tip 7: Pay attention to button size

There’s a tendency in simple design to say that in order to add something we can make it fit if we just slightly reduce the size of the button or font. This is dangerous and disastrous!!! If you have ever opened a web page on your smartphone that was not optimized for mobile devices, you know how frustrating it is to not be able to click on a hyperlink. In an app, it’s a bigger problem if the user doesn’t have the option to zoom in.
Keep buttons large enough to be easily usable, and test your app on small screen devices such as the iPhone 4 to ensure it is comfortable to use.

Tip 8: Consider button placement

When a user holds the smartphone in their hand, the lower half of the screen can be easily reached with the thumb. Right-handed users can reach the lower right corner, while left-handed users can reach the lower right corner.
Keep this in mind if you want to be able to operate it one-handed.

Tip 9: Provide necessary prompt information

Any time you request input from your users, consider what information the user needs to make a decision about what action to take. If your UI doesn’t provide these input boxes in the same place, the user may need to cancel and return to the previous page to make a decision.
Reduce user pain and provide necessary information in the right place when users need to make decisions.

Tip 10: Pay attention to your image resolution

Modern smartphones have amazingly high resolutions and look absolutely beautiful. Unfortunately, if you’re still using low-resolution images for icons, your app will look jagged and blurry, especially when the operating system renders fonts and gradients. Make sure you use a resolution of 264 ppi or higher, and it should look sharp and clean. On tablets with higher resolutions than the Retina iPad (like the Nexus 10 with 300 ppi), 264 ppi images still look crisp and clean.
A better approach is to use vector graphics, which can be scaled to any resolution.

in conclusion

User interface can make or break a mobile app. There are many examples of mobile apps with good UI design beating out apps that are faster, have more features, but have average UI design. If your app is easy for users to learn and use quickly, it will be more likely to succeed in the crowded app market.

About the Author:
David Talbot is currently the Chief Architect of EverBank. With over 15 years of experience in the software industry and professional experience in building rich UI web applications. He is also the author of Applied ADO.NET and a large number of technical articles. The email address is [email protected]