clickbrand

Tips for Designing Mobile Applications

Designing for mobile applications is quite different from designing for conventional computers, such as laptops or desktops. If you were to port a website, for example, to a mobile device, it would mean more than simply making a miniature version of it. Think of mobile applications more like a child of a main application, rather than a miniature version. The mobile application shares many of the attributes of its parent application, but like any real child, it is not miniature copy of its parent. Here are a few things to consider when designing a mobile application:

Smaller screen sizes

Just like desktops or laptops, mobile devices have a variety of screen sizes. They can range anywhere from 128px by 160px to 320px by 480px. How do you decide which size to design to? It really depends on a couple of factors, namely your target audience and the purpose of the mobile application. You can also look at current trends. For example, before the arrival of the iphone, the average Mobile devices screen dimensions were relatively small. The popularity of the iphone has increased the average screen dimension to 320px by 480px.

If you are unsure about what screensize your audience is using, OR you are trying to design something more universal, then use fluid layouts that can stretch and compress as necessary.

Deep, not wide

The limited screen real estate effects the visual layout of your mobile application, consequently, this also effects how you structure the User Interface. On a desktop/laptop application, you would normally structure the user interface in a wide format. Meaning, you would layout all the options and navigation items in fairly specific groupings easily visible to the user. The goal is to have the user reach their destination in as few clicks as possible For example, the sitemap below illustrates a wide structure.

This is an example of a wide structure. As you can see, all the navigation points are easily accessible from the main page.

For mobile devices, the small screen size makes such structures difficult to use. To see all of these options and navigation items on a single mobile devices screen would require tiresome scrolling, panning, and movement. Your user would quickly become frustrated with the huge amounts of options. Preventing user frustration and making your mobile application more friendly requires a deep user interface structure. A deep structure basically groups your options and navigation points in more general categories. If your navigation is more general, the user is presented with fewer choices, thus making it easier to navigate your application. This unfortunately increases the number of “clicks” your user must perform to reach their intended destination, But, it makes your mobile applications navigable. The goal is to make the navigation choices simple and easy for the user. It is possible to make your mobile application too deep with too much functionality, which brings me to my next tip, core functionality.

This is a deep structure. The biggest difference between this and the wide structure is the generalization of navigation items. Here, the navigation item is broken into two general categories. From there, the user must dive deeper to get the information they need.

Core Functionality

Having too much functionality in your mobile application can lead to a structure that is too deep. Incredibly deep Mobile application structures can be very confusing for the user. By focusing your efforts to only the essential functions of the application, you can prevent application structures that are too deep.

Furthermore, you must consider how exactly users use mobile devices and applications. They are called mobile devices because users are on the move while using it. Users interface with the device for short periods of time then continue along their business. Anything that requires more time than the user has would not be used. By focusing your application to include only its core functionality, you help minimize the time the user needs to spend using your mobile application, thus, increasing the value of the application to the user.

User Interface for human proportions

How the user interacts with the mobile application can make or break your application. If the User Interface (UI) is confusing, few will use it. If it is difficult to use, users will abandon it for other mobile applications with simplier interfaces. The rise in popularity of touch interaction has added another aspect to consider when designing the interface: human proportions .

Consider the size of your user’s interaction tool, their finger. It takes up a certain surface area and cannot be smaller or larger than what is already there. So, your interactive elements, such as buttons or navigation items have to be big enough for a finger to press. A good minimum size is 40px by 40px. Furthermore, the elements must have enough separation from other elements for the user’s finger to cleanly hit their intended destination.

Pre-defined design conventions

Finally, consider using the pre-determined design conventions for the particular mobile device you are designing your mobile application for. Using these standard conventions helps your audience easily use your application. For example, an “x” at the top right corner of an application window is understood to be the close or exit button. Designing a different close button that uses a different symbol in a different location would cause great confusion and frustration for the user. They already understand these conventions, so designing something otherwise would require them to learn a new set of conventions, adding an unnecessary level of frustration.

By keeping these points in mind as you design your mobile application, you can increase the likelihood of its success. There are many other minor points to consider, but these should get you through the bulk of your design.