10 Key Design Tips for Great Mobile Apps

Writing a mobile app for Android or iOS is easy but designing a great mobile app can be a challenge. Learn how to write better mobile apps with these ten quick tips!

Tip 1: Keep it Focused

The best mobile apps focus on doing one thing very well. You should be able to describe what your app does in one sentence without any "ands". The user should be able to launch it, use it and put it away in seconds having used its primary purpose. If a user has to navigate through four levels of menus to be productive, your app will be quickly uninstalled.

Tip 2: Use the Back Button Appropriately

On Android, the native OS supplied back button should navigate the user back consistently. On iOS where the back button is software controlled, you should always supply a back button and it should always be in the top-left hand corner where the user expects it. Following the conventions of back-button behavior and location specific to your operating system is critical to making your app meet your user's expectations.

Tip 3: Think of the Keyboard

Most mobile apps have one or more screens that use keyboard input. Unfortunately many designers don't think about how the screen will look once the on-screen keyboard is activated. When you do your testing, make sure the user always has enough on-screen context to know what they are doing even when the on-screen keyboard is activated.

Tip 4: Consider Placeholders Thoughtfully

If your application only has a few data input fields, placeholders inside of the field are fine and can make your app look cleaner. If your application has more than a few data entry fields, placeholders instead of field labels can become very confusing. Once the user has entered some information in the field, unless that information is self-evident as to what it is, they won't know what that information is supposed to be.

Tip 5: Challenge New Features

In the old days of application design, software developers focused on adding as many features as possible to their applications. They measured success on being able to tick more feature boxes than the competition. The mobile revolution has really changed this.

In desktop applications, a marginally useful feature added in a sub-menu that a few users found useful was probably a good idea because it could be the key differentiator of your application versus the competition. In mobile applications, a marginally useful feature makes your user interface cluttered and difficult to navigate.

Tip 6: Put Tabs in the Right Place

On iOS, the primary tab navigation doesn't look like tabs. They are icons at the bottom of the window that a user uses to switch between major topic areas of the application. iOS users don't expect this function at the top of the window where an Android user expects it. On Android, tabs are typically placed at the top of the application and can scroll left-right.

The key observation here is if your app needs to rely upon a "tab" concept as the primary navigation to the main topic areas of your app, you will need to place them differently on iOS versus Android.

Tip 7: Watch Your Button Sizes

There is a tendency in simplistic design that says in order to add one more thing we can fit it all in if we just shrink the buttons or font sizes a little. This is a dangerous and slippery slope. If you've ever tried to use a web page on your smartphone that wasn't designed for mobile, you know the experience can be a frustrating exercise in pinch-zooming enough to be able to click the correct hyperlink. In an app, it's even more problematic as the user doesn't have the option to zoom in.

Keep your button sizes big enough to use easily and test your app on a small phone like an iPhone 4 to make sure it's still comfortably usable.

Tip 8: Consider Button Placement

When a user is holding a smartphone in their hand, the bottom half of the screen is easily reached by the thumb. Right handed users can access the bottom-right side of the phone the easiest and lefties the opposite.

If you want to be able to use your app one-handed, keep this in mind.

Tip 9: Provide the Information Your Users Need

Any time you present your user with a request for input, think about what information the user will need to make a decision as to what action to take. If your UI doesn't make that information available in the same location you're prompting them for input, they might need to cancel out and navigate back to where the information is to come back and make the decision.

Save your users the pain and make the information necessary to make the decision at the location where a decision is to be made.

Tip 10: Watch Your Image Resolution

Modern smartphones have staggeringly high resolutions that can look absolutely beautiful. Unfortunately if you are still using low resolution images more appropriate to a web site as your icons, your app will look grainy and fuzzy especially next to all of those native operating system rendered fonts and gradients. Make sure you're using 264ppi or higher images and they should look crisp and clean. There are higher resolution tablets out there than the iPad with Retina (like the Nexus 10 at 300ppi) but 264ppi images will still look crisp and clean even on these devices.

An even better approach is to use vector based images that can scale to any resolution.

Conclusion

The user interface is critical to a mobile app's success. Mobile apps with a great UI consistently beat even faster and more functional apps with middling user interfaces. If your app is easy for a user to learn and quick to use it will succeed in the bustling marketplace.

About the Author:

David Talbot currently works as a Principal Architect at EverBank. He has over 15 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at david@legendarycode.com