Opera logo


Characteristics of widgets on mobile phones

Introduction

This document describes what considerations you need to take into account when developing for mobiles, due to the characteristics specific to those devices. See the article on techniques for cross-device development for more practical solutions, and some wider-scope discussion on cross-device development. The article structure is as follows:

  1. Introduction
  2. The mobile use context and the need for services
  3. Usability and different input devices
  4. Small screen size, resolution, and varying DPI
  5. Less power: CPU, memory, and battery
  6. Slow and unstable internet connections

The mobile use context and the need for services

Consider for a moment the different devices that people use to access the internet. The desktop computer is usually stationary and has a large screen surface and easily managable input devices. It is great for working on over a prolonged period of time. The laptop gives you more mobility, but it still has many of the characteristics of the desktop computer. The TV is used for entertainment and is often located in the living room of a house.

The mobile phone is designed to be used by people on the move. It has evolved beyond its original intent as a mobile telephone device to include text messaging, cameras, MP3 players, and internet access. This last feature means the phone can be a source of comprehensive information just like a desktop computer, but at the same time, it provides a considerably different user experience. For example, it is not suitable for reading large amounts of text, and its controls are very different.

Services developed for mobile devices (including widgets) need to take into account how the user interacts with the device, the situation he or she is in when using it and what information needs the user has in that situation.

Here are some examples of good mobile services:

Usability and different input devices

Different mobile phones come with different mechanisms for inputting data, for example:

These input mechanisms can be mapped to three primary ways of interacting with a widget or Web page:

These have differing characteristics, making it difficult to make a Web page or widget as usable on all variations of device. Virtual cursors allow hovering effects when the user hits an important object on the page, while this will not work on touch screens. In both cases, large click surfaces make it easier for the user to navigate. This is even more important if the user is using his or her fingers on the touch screen, as this has less precision than a stylus.

The keyboard on a mobile is often small or otherwise cumbersome to use. In some cases you can use the stylus on a virtual keyboard, but this is generally slower than typing on a desktop computer. As a result, you should not require the user to have to input lots of text. Instead, you should turn text input into a list of selectable options or at least prefill the text fields with something sensible.

This leads to the following recommendations:

Small screen size, resolution, and varying DPI

Mobile screens are becoming larger and better but are still behind their desktop counterparts. Resolutions and DPI are typically quite high, which means images and pixel-sized elements that look normal on desktop may look tiny on a mobile. With TVs and set-top boxes, the challenge is to design for a big screen viewed from a distance, whereas with mobile phones it is more a case of designing for a small screen, viewed from half an arm’s length. This, combined with the use context of being on the move and needing information quickly, means mobile applications need to be layed out differently to desktop applications.

This leads to the following recommendations:

Less power: CPU, memory, and battery

Hardware keeps getting smaller and more powerful, but mobiles are still generally weaker than PCs – they usually have weaker CPUs and less memory. This is also connected to the battery, which drains faster if the CPU is used a lot. Efficient code and good architecture becomes more important than on the desktop. Graphical effects create asthetically pleasing widgets, but should be used sparringly on mobiles.

This leads to the following recommendations:

Slow and unstable internet connections

The following are some common properties of network connections on mobiles:

Mobiles use a variety of ways to connect to the internet, ranging from GPRS to WiFi. You can expect a mobile internet connection to be slower than the broadband connections with which computer users are familiar. Additionally, the connection may be unstable as the user moves in and out of cell coverage or chooses to temporarily disable the net connection altogether. The user is often paying for the downloaded data, which means you should strive for concise downloads. Furthermore, network activity is draining on the battery, which means that you should aim for quick and rare connections, pooling together connections from different widgets if possible.

This leads to the following recommendations: