Five Point Guide to Designing a Mobile App

Shweta Desai, Quinnox Consultancy Services

Today, there is an app for everything, right from games to entertainment to photography to horoscope, almost. You name it and there is probably an app for it! Looking at the market prospects of an app --either free or paid, there is a sense of urgency and excitement to get an app out in the market as soon as possible. Whether you develop it inhouse or get it designed by a third party, the goal is to get the app out as quickly as possible and on as many mobile platforms as possible.

In the rush to 'get the app to market', you might end up doing errors to the user interface guidelines that result in less user friendly and sometime downright annoying mobile applications. The result is that you hear your customers say, 'Hey you know what, I really liked their website, I wish their new mobile app was at least half as good.' You then wonder what is wrong with your app! The answer is invariably that it is hard to use, and one big reason a mobile app can quickly become hard to use for your customer could be that it has been developed without regard to developer and UI guidelines of the manufacturer of the mobile platform and specifically for the devices for which you are developing. Such design and development standards are generally created by a joint effort of the platforms developers, designers, usability experts and hardware specialists. Failure to follow them may be either due to developer arrogance, laziness, ignorance or just plain lack of knowledge about them! In any case, the end result is a bad user experience while using the app.

So you may wonder what are these guidelines!

1. The 'Let's Stuff It In!'

Often, an application or website needs to be replicated on a mobile platform. However it may not be always possible to incorporate all the existing features in the mobile application. If you try to stuff everything on to the app, it will not only suffocate the simplicity of the app but also frustrate the end user. Your instinct as a designer or developer might be to want everything; but then imagine the number of options that can realistically fit in a mobile screen of 3 to 4 inches. Take for example, eBay website. If you were to incorporate all its features and functionality in one single mega mobile application, imagine the number of navigation buttons, text fields, screen layouts, nested menus, images and assorted visual paraphernalia that will need to be cramped into the device's screen. Moreover, greater the number of features, heavier is the app to download over the air and harder it is for the mobile OS to manage efficiently on the mobile hardware platform.

Thus, it is best advised to sort the features that you want to have in your application as 'Must Have', 'Necessary', and 'Good to have' categories. This will help you in deciding on what all features can be incorporated without compromizing on the stability and primary purpose of the app. Another option is to break down the features into multiple mobile applications. For example, eBay has one app for Fashion, another one for Deals and yet another for Motors and so on. This way the user is free from having to struggle to find all the services in a single application. It also gives you an additional view into observing how many people actually use these features based upon the respective application downloads.

Finally, if you are a mobile developer, you are probably closer to understanding the capabilities, capacity and limitations of the mobile devices you develop app for. Accordingly, you can and should advise your customer on such issues.

2. The 'Let's build one UI for all platforms'

Sometimes customers would like their app to look the same on all mobile phones. But they forget that in achieving this they are compromising on critical do's and don'ts of UI design that are advised by the manufacturer of each mobile platform.

For example, take an app which needs to be developed for both iPhone and BB. The iPhone OS provides navigation controllers and view controllers that manage the navigation from one screen to the next. Since iPhone has no hardware keys present, we use a BACK button to navigate between screens.

Now, if you are developing the same application for a BB non-touch screen phone such as a Bold 9780 or a Curve 3G, displaying this BACK button on the application's screen will make no sense. Why? Because a BB user will tend to use the hardware BACK key provided by the device manufacturer on every BB device for exactly this purpose! The same BACK button for a Blackberry UI would mean that the user will need to navigate from wherever he is on that screen to top using the track pad. Won't that be irritating for the BB user? Besides, do you think the users would actually use this button if they have the hardware BACK key to accomplish the same?

Little impositions such as this will add up in the long-term and affect your application's look and feel and make it awkward to use. Another example is to add checkboxes or drop-downs in an iPhone app which doesn't support them natively. Use the switch or the picker control! One must stay away from using non-standard UI components. There are multiple device specific, manufacturer recommended options available instead. To avoid such mistakes, a deeper understanding of the platform's SDK is also required. Mobile UI designers should suggest various UI alternatives to the customer and the look and feel of the app can be maintained consistent in the best possible way.

3. The War of Native App vs HTML5 App

The native OS mobile developers are threatened by the arrival of HTML5 frameworks such as Sencha Touch, Titanium, PhoneGap. These frameworks are promising to provide the same UI as a natively developed app would do. There are many advantages of using these frameworks. Here are a few important ones:

Portability: A framework based application will run on any supported device platform and thus save you a lot of time and money in implementing it on individual platforms.

Consistency: Consistency is maintained between mobile platforms as it is browser-based and the framework abstract out the native functionalities and UI look and feel to a common denominator that the developer can work with.

Developer productivity: Development ease is increased because it is entirely based on Javascript, CSS and HTML 5. These skills are well entrenched in the market and there is no shortage of highly experienced web developers who use these technologies.

Application distribution: Distribution of the app can be made independent from the manufacturer's distribution site such as the Apple App Store if you are not using any native APIs.

But, we should also keep in mind the drawbacks of HTML5 frameworks. Complex UI with grids, split-page layouts, tab-bars, animations, etc would be quite difficult to implement and highly time-consuming. Frameworks easily support simple UIs but there is great developer skill needed to create anything more than straightforward UIs using HTML5 and CSS. Native SDKs however allow the developers to more easily create much richer user experience with support for animations, page effects, motion detection, etc. Another issue would be the performance of the application. It has been observed that as the complexity of the framework-based app increases, the performance decreases and issues such as sluggishness and screen flicker begin to appear due to the heavy use of interpreted Javascript and the often less than optimal implementation of HTML5 and CSS3 features by the browser. Finally, pure web based HTML5 apps applications cannot access all hardware features, such as the camera, accelerometer, and compass unless they are developed as hybrid applications.

Thus you need to weigh your options; inspect the future road map of your application and then decide what kind of application to develop. Hopefully some of these shortcomings will be overcome in coming future.

4. It's a smartphone, silly!

It is sometimes easy to forget that the app is being developed for a smartphone —usually a very powerful device! It's smart enough to handle background processing and provides access to so many features that a user can play around from within your application. Most of the SDKs have support for: contact book, email, camera and video recording, messaging services, calendars and notes, browser, music player, GPS, Wi-Fi, social networking integration, Accelerometer, Gyroscope, etc.

While designing an application, if some of these features are used, it may lead to an exciting application that optimally utilizes the smartphone's capabilities. Also since these APIs are usually available across mobile platforms, consistency can be maintained in your application across platforms even when you use these advanced functionality. You can bank on these features and should definitely consider creating a Super App - one that makes use of some of these value added functionality and integrates them tightly with your application.

5. Hire a 'Mobile' UI Designer

If a customer is looking forward to you to build a mobile app for their product, they know what to expect out of the application, the purpose of the app. They also have some ideas about what kind of a UI look they would want. However they may not always be able to describe it accurately to your mobile architect, or solution provider or your developers. The developers will know how to deliver the product to satisfy its purpose. But they may not have much idea about the UI design that best suits the app. Just like how a website needs to be designed specifically by a website designer and UX expert, a mobile app also needs the same treatment from a mobile UI designer and a mobile UX expert.

A lot goes into designing a mobile app UI. The designers need to work in collaboration with the developers and the customers to get the best UI that is simple, elegant, easy to use, and also not very complex to implement and maintain. The UI also should take into account such things as the marketing theme and product branding considerations. Sometimes doing brainstorming between the developers and the UI team helps to get to a UI that is achievable and satisfies your customer's requirements.

The mobile UI designers have a major role to play in this. They are the ones who should be aware of all the UI components specific to each OS. Thus, the term I used was 'Mobile UI Designers'. They need to know which UI designs are possible for each mobile platform. For example the designer would need to know that iOS has Picker Views, and Table Views and BB OS does not have them. Or that the BB OS supports checkboxes and drop-downs but iOS does not.

This knowledge can come with the study of the mobile SDKs capabilities and also with the study of UI design of some of the best-selling and most-popular applications in the market. It will help the UI designer in creating designs that conform to the device SDK and also bring in the flavor of the native OS app. They can thereby work on creating a standard design that can be implemented on various mobile platforms with least variation in the designs.

Also another major role that a UI designer plays is that of creating images for the applications. There are loads of images being used in any app to bring out the theme of the application. Thus designers need to provide sets of images to the developers who can use them to build custom components and backgrounds, etc.

These images may be generated as per the screen resolution of the device. The latest devices are coming out with very high resolutions; so you may need different sets of images for different devices within the same type of device-family! Take for example BB. There is a touch screen Torch and non-touch screen Bold, Curve and Pearl. You can't have the same images for all the four devices. Also the images can be compact in non-touch screen phones but in iPhone they need to be at least finger-width large for making it easily 'clickable'.

I am sure, after reading these points you would justify hiring a mobile UI designer! Not a task for just any UI Designer or customer or developers to handle by themselves.