Interface Design: Why Does it Matter?
If you have an all singing, all dancing app, with amazing features, does it really matter what it looks like?

By Heather Nagey and Steve Thomas

I think I should open this article with two statements: 1) I'm not a graphic designer and 2) interface design isn't just about eye candy.

I've seen some beautiful looking apps that after 5 minutes of test driving have forced me to abandon them. An app that for example led me neatly into the help screen and then provided no means at all to exit it, short of closing the app, springs to mind. I've used some very ugly looking apps very efficiently for years. The important thing was that they did what they were intended to, without any unnecessary fluff. The buttons may have been left in their default state, but as we weren't trying to sell the app, it really didn't matter. That said, I currently work with a rather beautifully skinned and designed internal CMS. Do I work better because the buttons I'm clicking are turquoise and pulse prettily? Possibly.

Form should follow function. If your app exists to perform a task, then every part of the interface should facilitate that task, rather than wandering off into side alleys and distractions. If your app is a game, the graphics should not only be professional looking and attractive, but they should convey the atmosphere of your game to the user. Is it a horror and suspense type game? Fluffy kittens and roses will be inappropriate (in most situations at any rate).

Navigation is vital. Are the buttons where the user expects them? Do they look like their function? If they are not actually labeled, its even more important that they conform to user expections of what certain types of button should do. If I used a button that looks like this:

and linked it to the zoom function in my app... people might become confused. This type of icon has become firmly associated with RSS feeds, so even though I could imagine it representing something getting bigger, it would not be a good idea to use it in this way.

I asked our resident graphic designer, Steve Thomas, for some tips I could share with you. He came up with some top tips to bear in mind when designing your mobile app, and this beautiful screenshot of an app to consider.

Tips on good UI Design from the Master

Don’t reinvent the wheel
When considering your the layout of your UI, take a look at how other Apps work and try and use a layout that people will be familiar with.

We often take if for granted that App users learn from their experience and are familiar with how how Apps behave. So take advantage of that familiarity and use it within your App.

Everything in it’s right place
Make sure your buttons are clearly labeled and that they behave as they should. So in our example we have, back button in the top left corner, action button in the top right (this can also be a menu or home button) with navigation along the bottom.

Warning: Add an action item within the navigation and the App may not behave as the user would expect it to behave. So make sure your navigation items and action items are clearly separated.

Hit and Active states
We have used on (or active) states within the navigation so the user knows where they are within the App at all times. You can also add ‘hit’ states where the button highlights on order to enhance the user experience and further engage the user.

Button sizes
When designing the buttons for your mobile App, remember that a finger is a lot less precise compared to a mouse cursor or stylus. So make your buttons large enough so the user has control, but not so large that they dominate the screen.

Do you have an app you are proud of? Would you like to share any design tips you've used on it? We'd love to hear from you!

About the Authors Heather Laine is Customer Services Manager for RunRev Ltd Steve Thomas is Web Developer and Designer for RunRev Ltd. His main passion is listening to music and watching rock bands at music festivals and gigs.