WAP - Designing for Small User Interfaces

Albrecht Schmidt, Henning SchröderTecO, University of Karlsruhe

76131 Karlsruhe, Germany{Albrecht, schroder}@teco.edu

Oliver FrickSAP Corporate Research, CEC Karlsruhe,

76131 Karlsruhe, Germanyo.frick@sap.com

KeywordsWAP, WML, mobile personal devices, small UI design

INTRODUCTIONCurrent and upcoming WAP-capable mobile phonesintroduce new user interfaces where standard methods forapplication design often fail. Automated translation ofHTML to WML produces screen layouts and inputmechanisms that are often not useable on a mobile phone.

In this paper we suggest a structured approach for buildingWAP application and in particular the development of theuser interface. First we give a brief summary on thediscriminating feature of a phone interface and onmechanisms to build applications on WAP devices. Thenwe provide guidelines on how to port from Web to WAPand how to develop WAP-Applications. We finallyintroduce the WAP application that led to our findings.

WAP-DEVICESAn increasing a number of WAP devices become availabletoday. In contrast to desktop machines these devices do notform a homogeneous platform in terms of UI and usage.This paragraph gives a brief overview on our findingsconcerning different UIs and the support for WAP/WML.

User InterfacesWAP devices have a variety of interfaces; output can bedisplayed as text, formatted text, or graphics. Input isprovided by touch screens and/or buttons.

Displays are in general much smaller than that on PCs,however the size varies very much. The Ericsson MC218for example has a 640 x 240 pixel display whereas theNokia 7110 has only 96 x 65 pixel. This is a ratio of about24:1 whereas workstation screens differ only by a ratio of6:1 (1600x1200 compared to 640x480). This largedifferences in screen space makes it almost impossible todesign an application so that it fits all WAP-devices [1].

The input mechanisms provided by WAP-devices are notcoherent either. PDA like devices offer point and click on atouch screen whereas most phones rely on a set of buttons.Link navigation with a button interface however is moredifficult than point and click. Scrolling up and down issupported very well on most devices (e.g. scroll wheel onNokia 7110) whereas often the display width is fixed andno left right scrolling is provided. Text input is difficult andtime consuming on most phone-sized devices, whereasinputting numbers is supported very well and users areaccustomed to that. PDA like devices on the other handtypically come with alpha-numeric keyboards.

Applications, WAP, WML and WMLSPDA like devices as well as phones offer a number ofapplications beyond phoning, such as messaging, calculator,address book, and games. For these applications, and tosome extent even for phoning, the usage of devices fromdifferent manufactures (or even for different models of onemanufacturer) does not follow the same rules. With theintroduction of the WAP standard a manufacturerindependent platform for the development and distributionof applications for WAP-phones and other WAP-devices isgiven. Applications are written in WML and or in WMLSand constitute of one or more decks consisting of on ormore cards. The resource is provided on a server and can bedownloaded by the user.

In our experiments we observed that most devices supportonly a subset of the specified markup tags and that the waysin which these tags are interpreted are also different. Thismakes it impossible to foresee the appearance of anapplication on the users screen; the difference observed issignificantly larger than the differences observed withapplications in different standard Web browsers on desktopmachines.

DESIGNING AND DEVELOPING WAP-APPLICATIONSFrom our experience in developing WAP-applications (aselected application is described in the next section) wederived a set of guidelines for the development of WAP-applications. In the next paragraphs these guidelines arestated as an informal procedure.

General IssuesThe first and most important matter is to identify thebenefits for bringing an application to the WAP platform.Supporting these benefits must be the prime goal of theapplication development. A potential benefit is, e.g.,universal access to information that is vital while on theway (e.g. contact address, travel management).

The navigation space and implied interaction with theapplication should be reflected in the structure of decks andcards in the implementation. Wherever possible (if cards donot rely on user input) provide a maximal navigation spacewithin one deck to avoid reloading during navigation.

If information is already provided on a Web site and shouldalso be available on WAP the following approach can beused for porting: define a typical path or more general agraph and build a navigational structure for this path, whichis then represented by a deck consisting of multiple cards.Used the titles and headlines of Web pages along the path

to have the content framework. Reduce text to a minimumand design information chunks that fit on the smallestdevices you are designing for.

Input DesignMost current phones are optimized inputting numbers ratherthan text. Also direct point and click, as known from PDAsand PCs, is typically not given. Based on this the followingrecommendations for input design should be considered:

§ use numbers for input when ever possible

§ use common abbreviations like country codes

§ if letters are used keep the input mechanisms in mind,e.g. prefer first letter on key

§ offer choices (e.g. numbers, listboxes, radio-buttons,link-lists) or default values when applicable; evenlonger link list prove useable because of scrolling

§ provide labels to hardware buttons were possible

§ use standard conventions on buttons (e.g. back)

One basic issue is to reduce the need for user input as muchas possible. Here customization of applications for the userprovides one way. Also the cooperation between desktopinterfaces and WAP-devices can be beneficial (cf. our casestudy described in the next section).

Output DesignDisplays on mobile phones are in general rather small andprovide only a low resolution and color depth. Thus,reading of larger texts is rather difficult whereas the displayof small information chunks is much better. The usage ofgraphics does often not provide additional value because ofthe low resolution and poor rendering. The following putsattention to the most important issues:

• assess the screen size and quality of the target deviceswith text and graphics

• reduce the output by customizing to the users need [2]

• design information chunks that are seen at once on thescreen, larger text blocks (more than 20 words!) withinon card should be structured

• horizontal scrolling is easy on most devices, vertical isnot!

• use multiple cards in one deck instead of very largecards or multiple decks

Considering the range of devices and their capabilities, it isadvisable to design input and output for certain devicesclasses individually.

PERSONAL WAP - A CASE STUDYWithin the project Personal WAP we investigate thereduction of user interaction in WAP applications byproviding users with a personalized WAP portal.

During our WAP usability studies we found inputting text,e.g. setting bookmarks on a phone, very inconvenient – butnevertheless we found it important to have a hotlist of linkseasy accessible and maintainable. In addition, we wanted to

have mechanism to filter information both, personal andsituation specific. Finally, we wanted to have access toshort personal notes (e.g. an address, a shopping list, etc.)when leaving the office or home (a “WAP PostIt”).

The solution consists of two interfaces - one for a standardWeb browser and one for a WAP phone. The Web browserinterface is used to define the personal WAP portal withlinks and notes. The WAP interface is a customized, userspecific set of WML cards carrying the informationpreviously selected or edited within the Web interface.

The Web InterfaceA Web service where the user is identified by his phonenumber, access is granted by using a password. On thispage the user can input links, news items, and notes thatshould be available on his personal WAP portal (Figure 1).

The WAP InterfaceThe WML deck which represents the personal WAP portalis generated from the information edited on the Webinterface. The WAP URL to the personal WAP portal isfixed, whereas the content of the WML deck is dynamicallygenerated. As the management of the WAP portal takesplace on the Web interface, no tedious bookmarkmanagement on the phone is needed (Figure 1).

Figure 1 Figure 2

CONCLUSIONWAP applications require a new technique for userinterface design. Prime design guideline is minimal userinteraction during input and output. Suggested techniquesfor output reduction are WAP specific presentation as wellas user driven customization. Suggested techniques forinput reduction is service preselection, provision of choices,input by navigation, and focus on numeric input.

REFERENCES1. Brewster, S., Cryer, P. Maximising Screen-Space on

Mobile Computing Devices, in Proc. CHI’99, 1999.

2. Barret, R., Maglio, P., Kellem, C. How To Personalizethe Web, in Proc. CHI’97, 1997.