Ten tips for designing a stellar User Interface (UI)
for your mobile application
Published: September 5, 2017
Effective User Interface (UI) design requires strategic design concepts to deliver the most engaging and unique user experience. This is especially applicable for mobile applications. According to TechCrunch, there will be over 5 million mobile applications available by 2020 in the app store, with the largest percentage falling into the gaming category.
Whether you are an experienced UI designer or just starting out, before you start coding, Microexcel’s Interactive Practice recommends considering these top ten design concepts to increase the usability and appeal of your mobile application.
OS Related UI Guideline & Consistency
Android and iPhone operating systems might have varying guidelines when it comes to designing the interface of a mobile application. Whether it’s an icon, widget, or navigation/menu, adhering to the OS guidelines is a must since the app store screens all apps prior to submission. There’s room for innovation and creativity; however, with touch gestures, interactions, and navigation systems for an improved user experience.
Different sections of the app must be clear in the design layout with a consistent flow throughout. Designshack explained that these elements (color scheme, style, border, type and fonts, size, background images, effects, and buttons, etc.) should be consistent with the mobile app even when it’s using a different OS or platform.
Simplicity / Reusable
The principle of keeping it simple is significant when it comes to design, especially in mobile app development. Common tasks should be easy and simple to use. Ensure that a preferred language is also available. In cases where other elements need to be accessed for a specific process, create a quick and easy work around. Design elements that are interactive in nature should be clearly depicted as well.
Designers shouldn’t reinvent the wheel. Reuse internal and external components and behaviors while maintaining consistency with purpose. The less frustration the user experiences when having to rethink and remember, the better. Utilize the true potential of the mobile platform by tapping into certain hardware specifications that can enhance the functionalities of the app. Again, simplicity shouldn’t downplay innovation. Look at how features like a camera, GPS, and a fingerprint scanner can maximize the UI.
Create a layout that fits the screen of a mobile device. With responsive design, the layout should adjust as needed. Users should see primary content without zooming or scrolling horizontally.
Touch Control & Tap Targets
Use UI elements that are designed for finger friendly touch gestures to make interaction with your mobile app feel easy and natural.
Create controls that measure 7–10 mm so they can be accurately tapped with a finger. This allows the user’s finger to fit within target. Ensure that the edges of the target are visible when the user taps it as this provides them with clear visual feedback that they’re hitting the target accurately.
Text Size & Content Should Be Legible
Smartphones have relatively small screens compared to other devices. How do you fit a lot of information on a small UI? You might be tempted to squeeze everything down for a mobile design, but that isn’t a best practice. Text should be at least 11 points so it’s legible at a typical viewing distance without zooming.
Design Interface Elements to Be Clearly Visible & Contrasting
There needs to be enough contrast in font color and the background so text is clearly legible.
Choose primary, secondary, and accent colors for your mobile app that support usability. Ensure sufficient color contrast between elements so that all users, regardless of their vision quality, can see and use your app.
Regardless if you are designing a mobile app for Android or iPhone, white space creates a level of sophistication in design. Don’t let text overlap and use varying line height and letter spacing between headlines, sub headlines and body content to improve legibility. These simple tricks can make an interface more inviting.
High Resolution & Distortion
Using only high resolution images and assets may seem like common sense but sometimes it’s easily overlooked. Don’t try to make a horizontal image fit into a vertical space if you need to distort it. Always display images at their intended aspect ratio.
Don’t clutter pages or forms with unnecessary content or images. Create an easy-to-read layout that puts controls close to the content they modify. Keep forms as short and simple as possible by removing any unnecessary fields.
Just like spacing, aligning text, images, and buttons to show users how information is related can be overlooked. In the example below, the difference is clear. The left example shows the user a simple path to continue on the app without content or images cluttering the UI.
UI designing for mobile apps can be challenging and hopefully these tips will help you consider your layout and functionality before you start programming. These are some basic best practices for mobile app UI design and there are plenty more to consider as your app becomes more complex. If you’d like to find out more about Microexcel’s interactive services, contact us at [email protected].