If you have an all singing, all dancing app, with amazing features, does it really matter what it looks like?
By Heather Laine & 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. Or an app that greeted me with a loud, prolonged horn blast which refused to stop – that got quit within minutes and never re-opened.
I’ve used some very ugly looking apps very efficiently for years. The important thing was that they did what they were intended for, 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, 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). Is it a utility, to assist with a business process? It should be professional looking and sleek, without unnecessary window dressing.
Navigation is vital. Are the buttons where the user expects them? Do they look like their function? If they are not actually labeled, it’s even more important that they conform to user expectations 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 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 the 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.
All useful considerations, thank you Steve.
If you are making an application that needs to work across several different platforms and devices, e.g. on Mac and Windows desktop, as well as on iOS and Android phones, you have some very particular challenges.
Firstly, there is the size and shape issue – an Android phone can be tiny, a Mac desktop can be huge. Designing something that will work in both places means either some serious scaling up and down, or completely separate sets of interface elements. You might want to look at a lesson on our website that discusses different ways of approaching this issue.
But it’s not just about size. A Windows user expects buttons and menus to look different from those on a Mac, and be in different places. Android and iOS devices have a distinctly different look and feel. You have two choices here. You can either re-skin your app to conform to the user interface expectations on each platform, or you can choose to ignore the conventions and create a “universal” interface for your app, that will function everywhere and be distinctively different. The latter option is dangerous – if you’re going to do this, you had better be a really excellent designer – but it can be done successfully, if you are really sure its the best route for your particular app.
What do you think? Do you have an app you are proud of? Something distinctly different to share? What are your top design tips? We’d love to hear from you, do enter a comment below!
Recent Comments