When developing mobile apps, two very important factors that you have to take into consideration are user interface (UI) and user experience (UX). A well-done user interface can help you overcome other design flaws that your app might be suffering from. Meanwhile, even the most brilliant and innovative app idea can fail if it cannot be manifested in a user interface that meets the preferences and needs of its target audience.
The following tips will help you avoid the common pitfalls that are associated with mobile app UI.
Start with the basics
Before getting into specific tips, there are basic patterns and guidelines that you must follow in order to make good UIs for your apps. The following principles will help you assess your work at the design and implementation stage:
- Clarity: The user interface must leave no doubt as to what each element is intended for. Users should never have to guess their way through your app.
- Consistency: There must be a uniformity to the layout, shapes, colors and sizes of widgets across your app’s views. This will make sure the user has a seamless experience while using your app.
- Feedback: Whether it’s a view change, a dialog or something as simple as changing the color of an element on the screen, every button or UI element must provide some sort of feedback to the user. Not doing so will leave users confused. They'll end up repeatedly tapping buttons or even abandoning your app altogether.
Design for different levels of expertise
When designing the UI of your app, always take into consideration that your users have different intentions and expertise in using your app.
Novice users tend to be slower in learning the flow of the app and will quickly get confused if the UI is cluttered with too many, badly placed elements. They will expect your app to have an intuitive and simple interface. They are prone to making touch errors and can have difficulty in memorizing the steps to complete processes within the app.
Veterans, however, will quickly learn every nook and cranny of your app and will move quickly through the app. They might be more inclined to complete more on each view and be less confused by screens that contain more elements and features.
You have to find the right balance between the two. Better yet, offer simple and advanced views or multistep wizards in order to allow members of each audience to customize the interface based on their needs.
Learn about UI design from the top dogs: The UI Trends Of Successful Casual Games
Choose convenient button sizes
This might sound trivial, but you’d be surprised to find out how many developers get it wrong. Button sizes are limited by the size of the user’s finger. If they’re too small, users can’t tap them correctly, and they’ll have to struggle to use your app correctly.
As a general rule, never use buttons that are less than 1 cm in width - they’re very hard to tap. Keep in mind that some of your users might have fatter fingers. It would be a shame if they couldn’t benefit from your app simply because they’re frustrated by tapping two buttons at the same time.
You can also use non-uniform button sizes to give an indication of the importance of buttons on your screen. For instance, in an mCommerce app, a “Purchase” button should be larger than other buttons on a screen, because it - obviously - contains the most important functionality of the page.
Also - and this is something I always remind developers - never forget that while you might be developing your app from the comfort of your desk, the end user will want to be able to use it in different settings. This includes while walking, while sitting on the train, or while holding a mug of coffee in their left hand. If users can’t tap the buttons of your app with ease while being in a relatively uncomfortable situation, they’ll be limited to using your app in solely stable settings. That's way too limited for a mobile app.
Choose convenient locations for your buttons
Aside from the size, the location of your buttons is important as well, because it will determine how easy it will be for the user to reach and touch it. Users usually hold their phones with one hand, using their thumb as the primary finger for touching buttons. For right handed users, this means that the lower right section of the display is the area that can be reached most easily, as is shown in the following figure (for left-handed users, you’ll have to flip the image horizontally).
Important buttons which need to be easily reached must be placed in the lower part of your screen. Alternatively, settings buttons and buttons that are seldom used can be placed at the top.
Stick to OS guidelines
Whether you’re developing native or are using cross platform tools, there are certain principles and guidelines that apply to each of the platforms for which you’ll be deploying your app. For instance, Apple’s UI guidelines for the iOS platform states that font size should be at least 11 points and the layout must fit on the screen without the need to zoom or scroll.
Make sure your app conforms to these guidelines and takes advantage of the navigation and gesture goodies that each mobile OS has to offer. This is easier to implement when you’re using native coding IDEs, but it isn’t totally impossible with cross-platform tools and can be achieved with plugins.
Adhering to OS guidelines will make sure your user interface design is implemented in an improved format. Moreover, it will save you a lot of headaches when you send your app to major app stores, because submitted apps go through thorough scrutiny before they’re approved.
Much more can be said about how to improve user interface design while developing an app. Have something to add? Please share with us in the comments section below.