3 Things to Remember when Designing Mobile Apps

By

image

At the risk of stating of the obvious, a mobile phone is not a laptop computer.

So when you are designing a mobile app, keep in mind that your users may not be sitting at a desk, but rather, they might be wedged between two people on a train, balancing themselves with one hand and using their phones with the other.

Coming up with an idea for you mobile app is just the first step; creating a user experience that brings your idea to life in the hands of your users is a much more difficult challenge.

In this post, I’ll outline three important constraints that come with creating mobile apps, and provide a few easy ways you can address each of them.

Batteries don’t last forever

The more that a mobile app does — be it crunching numbers, animating screens, or pinpointing a geographic location — the greater the strain it will place on the phone’s battery. A typical smartphone user will go through their entire day on a single battery charge, and their margin of error for battery life can be very small. Speaking from experience, if your app eats battery life, your users will notice and they will complain about it!

Luckily, understanding how your app consumes battery life is straightforward, and here are a few rules-of-thumb you can use to help you create a more battery-sipping app:

  • Minimize your usage of location services.
    When your app uses the phone’s GPS to obtain a fix, it requires the phone’s GPS to be powered on and running. The longer you keep it on, the heavier the drain of the battery. To minimize battery drain, avoid keeping the phone’s GPS running, and instead use other techniques like interval based polling and geofencing to keep the user’s position up-to-date.
  • Avoid long-running background tasks.
    Android allows for apps to run in the background as services. If you are building your app to run in the background, make sure to limit the amount of work being done in the background, as runaway services are major source of battery drain.
  • Simplify UI design by limiting animations and transitions.
    Animations require the phone to redraw portions of the screen over and over again. This redrawing requires work by the CPU to perform the necessary calculations, as well as the display to physically change the screen. Animations and fancy transitions aren’t free, so use them wisely.

Bandwidth isn’t free

Batteries don’t last forever, and neither do cellular data plans. If you are building something like a photo or video-sharing app, or any other Internet connected experience, then you need to be mindful of the bandwidth consumed by your app when it downloads/uploads pieces of media over a 3G connection.

Mobile Device Design Media Types

Every time you display a photo, or allow a user to play a video from the web, the user could incur a hefty download cost. If your app displays 10 pictures at a time in a Pinterest-like table layout, then in the worst case your app could end up downloading 20MB of data!

You need to be mindful of the bandwidth your app consumes, and here are 3 simple ways to do that:

  • Cache cache cache!
    Your app should not download the same photo or video more than once. Store it locally on the phone so that next time you need it you app can pull it from the phone instead of the web. This technique is known as ‘caching’, and is used extensively by web browsers.
  • Use the right resolution of photo.
    Store photos in multiple resolutions so that your app can choose which size to download based on where it’s being displayed. If you are displaying images in a table, then you can use a much smaller size of photo than if showing a full-screen view of it.
  • Use paging to display lists.
    When displaying a list of photos or other media, your app should only download the results as they are needed by the user. For instance, in a table view of photos, as the usual scrolls down the list, your app should intelligently poll for the next set of results to show the user without downloading the entire set.

Small screens, busy hands, and fat fingers

Unlike laptop computers, people generally use their smartphones with one hand, at a distance that of 2-3 feet from their eyes while moving, distracted, or just plain clumsy with their hands. Make your user’s lives easier by leveraging already accepted mobile UI metaphors that people are comfortable with and know how to use.

Here are 3 well-known mobile UI patterns your app should look to leverage when needed:

  • Navigation Flow
    The navigation flow pattern allows a user to move through your app while providing a breadcrumb to indicate where they are in the app. As a user taps and moves into a different screen, the breadcrumb (usually in the upper left corner) updates to indicate the previous screen. This design pattern is particularly helpful for moving a user through a wizard-like experience.
  • List & Detail Views
    Lists are a standard display metaphor in mobile apps. The commonly accepted way to display lists is to provide a picture and summary of the content within the list cells, and allow the user to drill into a ‘detail’ view by tapping a cell. Using the Navigation Flow concept, a user can easily move in and out cells in the table. In iOS, the standard mechanism to allow users to remove items from a list is a left-swipe across each cell.
  • Tabs
    Use tabs when you have multiple, independent experiences to provide to a user within your app. The tab bar exists along the bottom of the screen, and usually has 2-3 cells within it. Tab items are easily pressed with any finger, and are a simple, well-know metaphor for moving between different contexts within an app.

While at first glance a mobile app might resemble web or desktop app, I assure you they represent an entirely new breed of software. Creating a great mobile app has as much to do with executing on a great idea as it does designing a user experience that is designed for mobile contexts.

As you move through your app development process keep the lessons I have shared in mind. Take it from me, its much easier and less costly to design with these constraints in mind then it is to fix them once you’ve released your app to the marketplace.

Bobby is the founder of Blue Label Labs, a mobile development lab based in General Assembly. He is a recent graduate of the Columbia Business School, and before that spent 4 years at Microsoft as a Program Manager. Follow more of his writing on mobile technology at ideatoappster.com. Feel free to email him about your mobile app questions at bobby@bluelabellabs.com

Photo of people walking around with their phones from Shutterstock