Mobile Application Design – Zoomable User Interface

Posted by: Amburkar Sankar Rao on: December 17, 2009

• In: Design | Enterprise Software | Mobile Design | Usability
• Comment!

Enterprise Software on Smart phones

Mobile phones and smart phones are driving internet usage and it’s predicted that it will overtake the preferred medium for accessing internet in the future. Most popular internet application (Email, YouTube, Facebook etc.,) has a mobile application and increasing people are using these applications from their mobile phone. The enterprise users expect the enterprise software be available on mobile and executives who are mobile such as (sales representative, field sales technician etc.) it’s a must have and influences their productivity.

Designing and developing application for smart phones has its own issues that include lower bandwidth, different screen size and resolution of the device, device capability etc. The application vendor will typically deliver two different versions of same application, one for smart phones and one for the desktop computers. This approach has its own limitations.

1. Development Overhead: The application vendor will have two dedicated team to develop and maintain such applications. This increases the development and maintenance cost and other overhead associated with having two teams.
2. Non-standard devices: No two handheld devices (from different vendor such as Nokia smart phones and iPhone) have standard capabilities and come with its own limitations. Designing applications for such devices are tedious and time consuming
3. User experience: The user experience between the mobile application and desktop application is almost always very different and user doesn’t relate between these applications.

The limitation mentioned above can be overcome with maturing technologies (i.e. Adobe flex open source framework) and smart design. The solution lies in using Zoomable User Interface.

Zoomable User Interface

The zoomable user interface allows the user to zoom-in and zoom-out of content displayed in the user interface. This is similar to Google Maps where we can zoom-in and zoom-out to view details on the map such as country, state, city and roads. These zoomable user interfaces allows application developers to define the content to be displays depending upon zoom factor i.e. how much the user has zoomed. By defining the content for zoom factor, the same application can be used both in mobile devices and desktop (esp. internet based application that works on a browser). Typically zoom factor takes in account the number of pixels available to render the page and once defined the same application can be accessed over the internet. The mobile phone with smaller screen will have smaller zoom factor and so only those content will be displayed where the same application when accessed from a desktop will display much more content. On the mobile phone, the user can pan (i.e. drag the screen on all directions) to view all the content.

As usual let me take an example and explain. Take an example of simple contact management application. The application will allow the users to add and update a contact. The sample user interface screen for the desktop application looks below.

It displays the complete page with maximum zoom factor. It has all the contents that the page contains. Typically application will define a set resolutions, say 1024  X 768 to be the maximum or 100% zoom factor  and it will confirm to a typical desktop resolution. The application developer will define all the controls that are to be displayed for this zoom factor. And then the developer will define controls to be displayed for different zoom factor such 25%, 50%, 75% etc., The user can view the application with 25% zoom factor initially with limited controls in it and zoom-in to view more control as defined by the application developer.

The zoom factor is basically the different screen resolution available for (i.e. 25% zoom factor is 200 * 150, 50% zoom factor is 450 * 300 etc.) rendering the page. When the application is accessed from smart phones with a certain screen resolution, the application will display content for appropriate zoom factor i.e. the iPhone has a screen resolution of 480 * 350, so 50% zoom factor will be displayed as shown below). The user can zoom out, drag the screen on either direction to access the entire page.

Design Advantages

1. Multiple devices support: One design will support various devices including Smart phones, Netbooks and desktop computers (with different resolutions).
2. One application: The application vendors will have only one application. No integration or repetition of backend transactions involved.
3. Consistency: There is a consistency in UI between the mobile and desktop applications and provides seamless switch between these applications.
4. Intuitive: The application is intuitive since zoom and pan designs are widely used in maps and other picture viewing application and the user knows that zoom always display details of the object being viewed.

Comments welcome..