In the last few years, consumers have enjoyed the amazing touch-screen technology on their mobile phones and tablets. The fantastic graphics are one of the biggest attractions to the new technology. Designing those graphics on the mobile canvas is no small feat though. There are many differences when designing for a mobile application versus for a desktop web experience.
One very important difference when designing for a phone versus web - mobile phones are MUCH smaller than a web page. Most are as much as a tenth of the size so there has to be some serious consideration given to the content. Not only should the actual copy be reduced in volume, but the number of basic interactive elements that we take for granted like buttons and tabs have to be minimized. For instance, you want no more than four single word buttons across your screen – large enough so they can be easily tapped by a fingertip without touching any other elements (16x16px is the standard minimum). Another space-saving solution to buttons and tabs is to take advantage of unique mobile features such as swiping back and forward, pinching to zoom, pulling-down to refresh, multi-touch detection, and location-awareness. Basic charts and forms have to be re-engineered to simple lists with multiple pages and drill-downs. Clean, smart graphics and iconography are essential when managing the user interface (UI) in such limited real estate.
Where web design is one standardized interaction set that works the same across multiple browsers, mobile app design is device specific. Each phone has its own unique operating system that requires slightly different UIs. The current top platforms are Android (131.17M) and iOS (36M). There are different screen sizes, ratios, resolutions, and store and icon requirements, so they must be separate. As of August 2012*, the leading manufacturers are Samsung (59.9M), LG (43.9M), Apple (36M) and Motorola (27.37M). Each of these companies makes a myriad of different devices, so although the aspect ratios tend to stay the same within a manufacturer, the sizes and resolutions are all over the place. I learned quickly that an app designer has to always stay on top of the device trends. With mobile devices continuing to improve their resolutions and change their sizes, it is best to design as big as you can and use vector-based graphics so the images can be up-scaled without significant quality-loss for future designs.
The bulk of mobile app design is restricted to standard coded elements. This is not only for performance optimization but also for an optimized user experience. To keep your audience comfortable, you want to give them a familiar experience and keep your custom elements to a minimum. Creating your own or leveraging freely available standardized graphical user interface (GUI) templates, allows you to assemble the stock GUI elements for almost any device size and resolution so you can focus more of your time and creativity on the design and layout and creating awesome icons and visual elements that truly communicate the touchable experience of a mobile device.
Size limitations, device specifications, and GUI standardization are just three of the main design considerations I encountered when I first began my foray into mobile app design. There are many more detailed and interesting design points in this new and fluid world of mobile devices that I have discovered. I will elaborate on these details in future posts – stay tuned!
Check out some of our mobile apps at Mobile@Symantec.