Tips & Tricks to Build an Intuitive User Interface for Mobile Applications

September 23 2011 / 14:00

In this article we will share some quick tips and tricks based on our personal experience in building user interfaces. We are Aaltra (based in Belgium, Europe), and since 2008 we’ve specialized in building user interfaces for a wide range of platforms. Our projects vary from building a physical interactive scale model, to mobile applications, to complex software interface architecture. No matter what the nature of your project is, there are a few basic rules to keep in mind. Use the following guidelines to create a user interface that people will love to use.

To illustrate our tips and tricks we will use our recently launched iPhone app Qbus Home Control. This app enables Qbus (Smart Home system) users to control their home from any place, any time, over Wi-Fi or 3G. The aim of the app is to give people remote control and a quick overview of the status of the devices in their home.

Define Your Target User Group

Defining your target group will help you in many ways. First of all it will help you to choose the right platform you will develop on. Does your target audience own a smartphone, and which platform is most commonly used? If platform independency is crucial, you can consider going web-based. If speed, reliability and functionality are your priority, you might consider developing a native application (one built for a specific operating system, with that operating system’s SDK).

Secondly, defining your audience will help you define the experience level of your average user. The age of your target audience will usually tell a lot about their skill level. The main rule is: aim for the least experienced group. Make your interface as simple as possible by default. For advanced users you might provide some hidden advanced controls or settings, but don’t bother or scare your average user with them.

Qbus Home Control is aimed to an audience age 30 – 50, mainly male with a rather technical background. This target group is generally familiar with smartphones, and since the iPhone has about 70% market share in Belgium, we chose to build for iOS.

The function of the application is to perform a few quick tasks or checks several times a day. Startup and loading speed are very important. That is why we chose to build a native iOS app.

Sketch Wireframes

Sketching wireframes of your interface layout is a very easy and effective way to define the functionality and pages you’ll need in your application. Once you start sketching (on paper or digitally) you will automatically discover which pages, which components and which states (pushed, active, resting) you will need to design.

Be Consistent and Think About Ergonomics

Sketching will also help you to be consistent in the placing of your buttons, the structuring of content, and with functionalities.

When designing a mobile touch interface it is also very important to think about ergonomics. The bottom of the screen generally is the fastest to reach with your finger. So it is a good idea to place your primary navigation on the bottom of the screen.

Also consider that when the user clicks a button, a part of the interface below will be visually blocked by the hand. For example when designing a slider, it might be a good idea to provide a tooltip to show the value of your slider. This helps the user to quickly set a certain value with large precision without having precision tools.

Build on User Expectations

Don’t be shy about using the interface components that are provided by the platform, but use them well. For example, iPhone users or WP7 users are very familiar with the specific native interfaces’ approaches. Use this to your advantage instead of trying to reinvent custom controls, visualization and animations.

Provide Visual Feedback

Visual feedback makes your app feel more responsive. Provide every button with a press-state (a visual or sound acknowledgement that the function has been selected A touch interface doesn’t use rollover states on buttons. But the pressed state is very important. This lets the user know the application understood the command.

Provide loading animations while the users wait for data to load (a countdown or hourglass visual showing the app is working). Loading animations show the users that the application is OK and didn’t stall or crash.

Similarly: avoid empty screens. If there isn’t any data available for a button or search result, please communicate this to a user: “No Search Results,” “Coming Soon” etc. If the user has made an error, or there is another option for the user, give them appropriate instructions on how to proceed. A blank screen is unacceptable.

Keep text to a minimum

Users don’t read but glance instead. Large text blocks won’t be captured during that glance and will be ignored. Self-explaining icons with a keyword (at most) work best in terms of quick navigation and understanding of your application’s functions. If you don’t have the resources to create your own icons, there are many icon libraries available. Be sure to never mix different icon styles in one application as it might confuse the user.

Prototype and Adjust

Upload your design screens to your device, and go though every page once again. Adjust readability, color contrast, button sizes, etc., to your device specific needs. Make well-reasoned choices for your users to keep your user interface as simple as possible.

Ciel Berings & Pieter Paulus-Vertongen

Aaltra Interactive Media
Kortrijksesteenweg 40
9830 Sint-Martens-Latem
Belgium