Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

4 User Interface Design Tips

DZone's Guide to

4 User Interface Design Tips

It doesn’t matter how good your app is. If people don’t use it you need not have built it. Take the time to really make your app rock with these four tips.

· Mobile Zone ·
Free Resource

There are a lot of apps out there. The worst part? Over 60% of them never get downloaded! Even worse, of that remaining 40%, a quarter never get used. Ouch! It’s obviously a lot harder to make a successful app than most websites make it out to be. I mean, here we’re saying that 70% never get used! How much percent of what remains only gets used once or twice? Not many.

If you’re going to design your app, you’ve got to make sure that you actually end up in that last thin slice of apps that get used repeatedly, as only then is it really worth your time and effort. There are a number of ways to do this. Obviously, you want an app that is actually useful and beats out the competition.

Still, you could have the world’s best idea and still have an app that fails miserably. After all, when you’ve got a great idea and execute it poorly by not making the interface spot-on, somebody else will just copy what you’ve done and do that part of it better, and within no time you’ll be pushed down off the table to places where app downloaders don’t venture.

Create a Visual Hierarchy

The first thing that is frequently overlooked by designers is the visual hierarchy. This is where you place things on your screen in a way that directly impacts the importance of the different components.

The best way to do this is to make a list of the different things that users can do with your app and list them by importance. Only when you’ve done that you do you decide where to put what on your screen and how to display it.

Note that we generally consider things on the top and along the left side as the most important. Similarly, the larger the font, the more important things are generally considered to be. Remember, however, that if something is significantly larger in terms of font-size people might not actually see it! We’re strange that way.

Another way to go is to use color as well as negative space to highlight more important parts of your layout so that people will automatically know where to look.

Clutter Is Bad!

Do not be afraid to banish things that are less important to sub-screens. After all, clutter creates a cognitive load, as people will struggle to find what they are looking for and be daunted by the layout. Really, your first screen should only contain a few items which are really important. More advanced features and choices can then be placed on a sub-screen.

Consider every image that you add very carefully — particularly if it does not directly add anything to your app. Yes, it might be a very nice image, but if it doesn’t add to the overall design and usability of the app, it is a very real possibility that it will harm you more than it will entertain your user.

Retain Your Language

When you’ve committed to a specific layout on your front page, don’t change your mind further down. Instead, keep the same layout and the same functionality throughout. In this way, the user will not have to reinterpret each page as they move along but can instead reapply the rules that they’ve been introduced to on the front page.

This is again a good way to reduce cognitive load and make the experience of your app as seamless and as intuitive as it can possibly be.

So, stick with the same font, image, colors and size for an icon once you’ve introduced it. Also, avoid moving it around the screen and if you do need to move it, make it immediately obvious that you’ve moved it – perhaps by sliding it visually across the screen.

If you’re working with multiple people, then make sure that any decisions you make about how things should be laid out are placed in a style guide that everybody can refer to. This will reduce the risk of jarring changes and stylistic mistakes.

Guide Your Users

And finally, make sure that your app guides the users through the process. You can achieve this by giving them a (short) tutorial (but please make it skippable). Alternatively, mark a button as ‘start here’, so that the user is left in no doubt as to what you’re supposed to do.

Whatever you do, don’t leave it up to your user to just figure it out, as there’s a damned good chance they won’t. And that’s no way to make your app take off.

So, make sure your tutorial communicates your ideas clearly and succinctly. Get a writing service involved if you’re not too sure, writingservices.review is a good place to start looking for help with content.

Also, carefully consider what you’re going to show them. Do you want to cover everything, or would you rather cover the most important features of your app in depth and leave them to figure out the rest once they’ve become convinced that they can’t live without these main features?  

Last Words

Execution is everything. For that matter, once you’ve got your product worked out, make sure that you test it, test it again and then some. You want as much feedback as you can get before you actually launch the thing, as you want to make sure that that initial burst of interest that you generate actually creates long-term interest.

After all, you will never get a second chance at a first impression. So don’t rush the launch. Take your time. Create the perfect layout and make sure that it isn’t just you who thinks it’s great. In that way, you can be a part of that small percentage of apps that actually gets downloaded and used.

The best part? Once you’re part of that group, it’s much easier to stay a part of that group, for people are creatures of habit and once you’ve managed to lodge yourself in there, it will be hard to get rid of you. The trick is to get in there. These steps will help you do just that.

Topics:
mobile apps ,app development ,mobile ,user interface

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}