15 Key Pointers for Designing Today’s Mobile Apps

by Techflier 1,218 views0

Ever wonder how designing for the tiny screen differs from desktop software and web design? When designing web applications for desktop browser use, the developer makes several assumptions that are fundamentally true in most cases: maximum screen real estate is available at their disposal, an underlying Internet connection is fast and reliable, processing power and memory are plentiful resources.

However, in a mobile environment users may be accessing content and applications on a myriad of different devices of varying screen sizes, processing power and memory capacity. If you’re designing for mobile, the following guidelines are critical for building experiences suitable for mobile consumptioneven as standards, usage patterns, and mobile technologies are still evolving.

15. Reduce the size of your assets

Source: Yoel Ben-Avraham / Flickr Creative Commons.
Source: Yoel Ben-Avraham / Flickr Creative Commons.

Users expect an experience of equivalent or greater quality than on their PC/desktop when accessing applications on mobile devices, even if several elements of the mobile experience work against these expectations (e.g., network speed and device processing power/memory). Assets such as documents and other file types should be optimized for faster downloads.

14. Optimize images for web use.

Optimizing for the web in Photoshop.

Graphics programs such as Photoshop allow you to choose to output settings that are optimized for web.

13. Use MP3 sound files when possible.

Source: Acid Pix / Flickr Creative Commons.
Source: Acid Pix / Flickr Creative Commons.

This file format is drastically smaller than WAV or AIFF formats.

12. Build for variable connection speeds

Source: Michael Coghlan / Flickr Creative Commons.
Source: Michael Coghlan / Flickr Creative Commons.

When designing your mobile applications, assume that the Internet connection will be less than optimal. Anticipate network latency when building the functionality of your app.

11. Design your application’s behavior to update on the front-end, as the user’s expectation is that their interactions have immediacy on the server side.

Source: Thomas Angermann / Flickr Creative Commons.
Source: Thomas Angermann / Flickr Creative Commons.

For example, when updating your photo or “liking” an item on Facebook on a poor connection, the mobile application will reflect this change, even if the website does not. The mobile version has effectively cached the change locally, while it has queued the update to the server. It enforces the user’s impression that their interactions have immediacy.

10. Avoid using JavaScript or widgets that may not work properly on low connection speeds.

Source: Dmitry Baranovskiy / Flickr Creative Commons.
Source: Dmitry Baranovskiy / Flickr Creative Commons.

Due to lack of screen real estate, such features are usually nominally effective in mobile environments anyway.

9. Use interactions and inputs native to mobile devices

Source: Pic Basement / Flickr Creative Commons.
Source: Pic Basement / Flickr Creative Commons.

Consider user behavior on the mobile device: taps and swipes versus mouse clicks on your desktop or PC. Your application’s optimal experience should utilize the former and default to mouse clicks as the “degraded” method of interaction.

8. Build for limited screen real estate

Source: Clemens Löcker / Flickr Creative Commons.
Source: Clemens Löcker / Flickr Creative Commons.

As stated previously, mobile applications are most notably limited by screen real estate. If targeting a mobile web application for both PC/desktop and mobile users, design with mobile in mind first.

7. Leave out bells and whistles such as fancy menus and animations.

Source: Intel Free Press / Flickr Creative Commons.
Source: Intel Free Press / Flickr Creative Commons.

The trade-off is better usability and structure.

6. Make sure your application behaves responsively.

Source: Luc Legay / Flickr Creative Commons.
Source: Luc Legay / Flickr Creative Commons.

Responsive web design with HTML5 allows both desktop and mobile users to enjoy a unified user experience. Build around the constraints of mobile viewing first and allow your application to “size-up” under desktop use.

5. Target the appropriate platform.

Source: Maurizio Pesce / Flickr Creative Commons.
Source: Maurizio Pesce / Flickr Creative Commons.

Ideally, you should build a version of your application for each of the 3 leading mobile platforms: iOS, Android, and HTML. This, however, may not always be feasible. In cases where you must choose oneeither to start or to focus solely onkeep in mind the limitations and unique opportunities of each platform.

4. The Android platform is by far the largest audience in terms of user and developer adoption.

Source: Scott Akerman / Flickr Creative Commons.
Source: Scott Akerman / Flickr Creative Commons.

If your goal is market penetration and volume, develop for Android devices.

3. General ROI is greater for applications developed with iOS.

Source: Blake Patterson / Flickr Creative Commons.
Source: Blake Patterson / Flickr Creative Commons.

The iOS platform holds the the greatest user and developer loyalty, as well as an application ecosystem and developer tool set. Furthermore, monetization rates with iOS devices are higher

2. Developing your application in HTML5 will allow you to target both platforms, as HTML5 works the same for both iOS and Android web browsers.

Source: David Martyn Hunt / Flickr Creative Commons.
Source: David Martyn Hunt / Flickr Creative Commons.

Instead of users having to download and install either the iOS or Android version of your software, they would instead access the application on their mobile device browser. You will lose the ability to build in custom behavior native to iOS or Android, but what you gain is cross-platform usability.

1. Use third-party tools to build in HTML5 and output to both iOS and Android.

Source: Kai Hendry / Flickr Creative Commons.
Source: Kai Hendry / Flickr Creative Commons.

In the early days of mobile application development, one had to choose between iOS or Android as a primary target platform– similar to how desktop software developers target either Windows or MacOS to deploy on. These days, HTML5-based tools such as PhoneGap and Appcelerator allow developers build applications for both Android and iOS platforms simultaneously. The following is a typical workflow when using one of these tools:

  1. Designs and wireframes are composed within Adobe PhotoShop or a similar graphics application.
  2. The designs are built into web apps with standard web development languages: HTML, CSS, and JavaScript.
  3. The HTML5-based tool (PhoneGap, Appcelerator, et al) converts the web app into a native iOS or Android application.

By eliminating the need to learn Xcode or Java, PhoneGap and Appcelerator allows web developers to use languages they already know to build mobile apps, namely HTML, CSS, and JavaScript. Since iOS and and Android development both involve a steep learning curve, these HTML5 tools drastically cut down on development efforts and time-to-market.

Remember that devices may be connecting to the Internet at various speeds: 2G, 3G, 4G/LTE, 5G, or Wi-Fi/broadband speed via hotspots. Design considerations should therefore be based on both screen size as well as connection speed.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>