Introduction
With the explosion in the number of mobile devices, and the continuous advances in mobile network capabilities, it has become imperative for businesses to support the mobile channel for the services they offer. One of the avenues to offer services to the mobile audience is through web sites tailored for the mobile phones.
This however comes with its own set of challenges. The mobile devices present in the market vary widely in form, features and capabilities. Examples of this variation include:
- Screen Widths (narrow phones with screens less than a 100 pixels wide, and wide screen phones more than 400 pixels wide forming the two ends of this spectrum)
- Orientation landscape versus portrait (or both like Apple iPhone which has an accelerometer to detect the change in orientation)
- Protocol/language support XHTML, WML ..
- Color support (monochrome, 4096 colors, right up to millions of colors)
- Javascript support (or lack of it), animation support, and many more.
The challenge is to design the site keeping in mind the unique capabilities of the various devices, and yet maintaining a consistent look and feel, and navigation across all of them. The essence of good UI design for mobile devices is usability. If the site is not easily usable, the site will not be used from a mobile device. This article establishes UI Design guidelines for achieving such consistency, while at the same time, keeping the “mobile device” and “mobile network” parameters in mind.
IBM Mobile Portal Accelerator is a product which is intended for developing such portals. IBM Mobile Portal Accelerator extends WebSphere Portal to deliver optimized web content to a wide range of mobile handsets. IBM Mobile Portal Accelerator follows a “write once, render many” approach. A portlet is coded only once and it renders on a variety of mobile handsets. The same portlet can provide HTML content to traditional browsers, reducing development and maintenance costs.
IBM Mobile Portal Accelerator greatly reduces the development effort required to get a mobile portal up and running to support thousands of devices. However, there are certain UI design guidelines which, if followed, result in a cleaner design, easier development, and optimized UI. Here are some of points that should be considered while designing Mobile Portals.
Best Practice 1: No Horizontal Scrolling
Mobile Pages should be designed such that the entire page content is visible to the users without scrolling horizontally. It is extremely cumbersome for users to horizontally scroll in order to read content on mobile devices. A starting point in achieving this best practice is to avoid hard-coding absolute widths or heights of UI elements in mobile pages as mobile devices have diverse screen widths and heights. Instead, relative values should be used.
Vertical scrolling is acceptable and is the norm. However, it is a good practice to limit the total page “length” to no more than 4-5 times the screen height. Excessive vertical scrolling increases the probability of the user losing interest and the content near the bottom of the page being ignored.
Best Practice 2: Effective Utilization of Space
Page Design should be done such that the entire space on the page gets properly utilized. Unnecessary filler spaces or blank spaces are a huge waste of precious real-estate on a mobile screen. Desktop browsers have the luxury of adding filler content but a mobile device has no such trait. The mobile site UI designer must focus on essential content only.
This point about effective space utilization is better demonstrated by way of the following screenshots. Fig. 1 shows what looks like a “neatly designed” page, with only one entry per line.
Fig. 1.
However, notice the unused space on the right of the screen. This is acceptable in case of conventional web design, but not in the mobile world, where every pixel carries a cost.
Fig. 2 shows how this page could be refactored to make optimum use of the screen space.
Fig. 2
Best Practice 3: Minimize externally linked resources
Externally linked resources include resources like images, markup, CSS, flash videos etc. Each such resource has to be fetched by the browser via a separate request to the server, thus putting extra load on WAP gateway. As a rule-of-thumb, externally linked resources on a page should be limited to eight in number. Design your site for optimal performance and be mindful of mobile network latency.
Best Practice 4: Avoid Repeating Links
UI guidelines for a traditional PC web site (particularly those related to usability) dictate that navigation links should be repeated on a page (especially at the top and bottom) so that the user does not have to search for the navigation links.
This is however not desirable in the mobile web. For one, the repeated links take up valuable screen space, which could otherwise be used for revenue-generating content like advertisements. Secondly, if such navigation links are placed at the top of the page, it could be tedious for a user as the user has to traverse through these links in order to reach the section of the page which is relevant.
In case of mobile web pages, it is a best practice to provide only minimal navigation at the top of the page and order it keeping in mind what links visitors are most likely to want to click first. Mobile sites require essential content without redundancy. Good user interface design may require some redundant content and links but these must support making the use case efficient.
Fig. 3 shows how a page would be designed with the PC guidelines would be disadvantageous.
Fig. 3
Fig. 4 shows the same page which has been re-designed for the mobile web.
Fig. 4
Best Practice 5: Consistent Look and feel across the site
For mobile applications to be universal, patterns and designs should be maintained across all screens. The design should be consistent and all the pages should have same font styles, font color code, and top and bottom banners.
It is a good idea to define a set of coloring schemes, rather than one single color scheme, in the look and feel policies/corporate branding policies for a mobile site. This is in order to take into account the difference in color support among various devices. For example, one scheme can be defined for monochrome devices, one for devices which support up to 4k colors, and a third one for all other devices.
Best Practice 6: Designing for various screen sizes
Layouts should be designed keeping different screen sizes in mind. The number of columns in which to display grid data should be optimized with respect to the screen width.
Screen orientation of the target devices should always be taken into account while designing layouts. In a wide screen (landscape) device, more content can be accommodated horizontally without inducing scrolling. This is in contrast to longitudinal (portrait) devices.
The best practice is to split up the target devices into a handful of groups (no more than 6 groups) based on screen width and orientation, for purpose of designing the page layouts.
Do not present grid data in more than 3-4 columns (this guideline can be relaxed in case of devices with very large screens like Nokia N90 or Apple iPhone).
Best Practice 7: Do not use large size images
Each image in a page results in a separate request to the server. Many mobile device browsers do not have the capability to multi-thread. As a consequence, a large image will not only take a long time to load, it will also prevent other images from being loaded until it is fully loaded itself. And of course, large images put extra load on the WAP Gateway thus degrading performance.
Image sizes should be restricted to 3 Kilobytes as far as possible.
Best Practice 8: Show less and relevant text
Showing long, descriptive text paragraphs on mobile web pages is discouraged. Instead, the descriptive text can be split up into sub-paragraphs. The most relevant sub-paragraph could be displayed on all devices; with more detailed information being displayed only if the device screen is large enough.
Fig. 5 shows a mobile web page displaying a large descriptive paragraph. Observe how this page looks cluttered and unwieldy for a mobile device.
Fig. 5
Fig. 6 shows a similar page but which displays only the information relevant to the context.
Fig. 6
Best Practice 9: Pre-populate Forms with default values
It is generally difficult to key in data in forms using a mobile device, more so if the device has only a conventional numeric (non-qwerty) keypad. Thus, form fields should always be pre-populated with default values. If possible, the “default” values should be derived from user preferences, rather than using site-wide default values.
Fig. 7 shows an example of a form with pre-filled values.
Fig. 7
Best Practice 10: Divide pages into usable but limited size portions
Ensure that the overall size of page is appropriate to the memory limitations of the device. Recommended page size is less than 20 kb. If, for some reason larger pages are required, then some form of pagination should be employed to split up such pages into manageable chunks.
Best Practice 11: Do not use Pop-Up windows
Not all devices support pop-up windows. Further, even for devices which do support them, it might be cumbersome to dismiss pop-ups (for example, in case of devices which do not have a pointing device). As such, it is a best practice to avoid using pop-up windows altogether in mobile web pages.
Best Practice 12: Always use CSS for Page styling
It is a best practice to avoid using inline markup (
Text) for styling. Further, it is not a good idea to use graphics for spacing (for example, using an image the same color as the background to insert space between page elements).
Such tactics as inline markup and spacer images might not work as predicted on all devices. Thus, CSS should always be used for styling a page.
Best Practice 13: Avoid using heavy and non-standard resources
Do not use JavaScript, frames, flash video, dropdown navigation boxes, and heavy files. This is to pre-empt the possibility of unpredictable behavior arising out of non-standard support for these entities by different device browsers. It might be possible that a version of JavaScript works fine one a certain device; but behaves differently on some other device.
Conclusion
In this article, we examined the factors to be considered while designing applications for the mobile web. These factors revolve around making the most of the device screens and capabilities; maintaining consistency and being aware of the fact that the term "usability" in the mobile world has very different connotations to that in the world of PC web.
The design of mobile applications should be done taking into consideration, variations in device capabilities. The look & feel should be consistent for all the target devices and should be kept as simple as possible. In the interest of usability and performance, background images should be used sparingly; and it is best to avoid heavy logos, flash files etc. It is a good idea to assess the network capacity of the target market and arrive at an optimum page size.
Mobile Portals must be designed so as to dissipate maximum information in the limited screen real estate. Consequently, only limited and precise information should be selected for display on mobile devices. Form fields must be pre-filled with data relevant to the current user and context. Navigating within a page and between pages should be simple and consistent.
Authors: