LZT 108 3339 Mobile Phone R 380 Design Guidelines for WAP Services e
Ericsson is the leading provider in the new telecoms world, with communications solutions that combine telecom and datacom technologies with freedom of mobility for the user. With more than 100,000 employees in 140 countries, Ericsson simplifies communications for its customers - network operators, service providers, enterprises and consumers - the world over. WAPTM and WAP ForumTM are registered trademarks of the WAP Forum, LTD., a registered company in the United Kingdom.
Contents PREFACE _______________________________________________ 2 Who Should Read this Guide? 2 Overview of Contents 2 Related Publications 2 Ericsson Publications Other Publications Terminology Abbreviations Definitions 2 2 3 3 3 GENERAL USABILITY ASPECTS ____________________________ 4 USER INTERFACE ISSUES _________________________________ 5 The Browser Display 5 The On-screen Keyboard 6 Navigating 6 DESIGN COMPONENTS ___________________________________ 7 Using Text Font Size and Font Sty
PREFACE This document describes how to design WAP services for the Ericsson Mobile Phone R380. Who Should Read this Guide? This document is intended for developers of WAP services who want a deeper insight into designing applications for the Ericsson R380 WAP browser. It is assumed that the reader is familiar with the WAP concept and WML.
[3] WAP Wireless Markup Language Specification, Version 1.1 Version 16-JUN-1999 Wireless Application Protocol Forum, Ltd. http://www.wapforum.org/what/technical.htm Terminology Abbreviations GIF Graphics Interchange Format HTTP Hypertext Transfer Protocol URI Uniform Resource Identifier URL WAP Uniform Resource Locator TM Wireless Application Protocol WBMP WAP Bitmap WML Wireless Markup Language Definitions Bookmark A named reference to a URL.
GENERAL USABILITY ASPECTS When it comes to designing any kind of electronic service, simplicity is the key to gaining acceptance and appreciation from users. Simplicity is even more important in a mobile environment since the user often needs to concentrate on other things as well as using the terminal. Keep information and text short and meaningful. Since overview is crucial, keep lists and menus fairly short. Do not force the user to scroll through more than 4-5 displays (corresponds to 25-35 lines).
USER INTERFACE ISSUES The Browser Display The Ericsson R380 display is a grey scale black and white touchscreen with a resolution of 360x120 pixels with 0.23 pitch. This means an active screen size of almost 83x28mm. The browser display has three sections: the Browser Area, the Card Title bar at the top, and the Toolbar to the right. Browser Area The Browser area is where the card content is presented to the user. The size of the area is 310x100 pixels.
Toolbar The Toolbar is an area containing buttons required by the browser. The On-screen Keyboard Text input is done with on-screen keyboards or a character recognition screen. Three different keyboard layouts are available: an alpha layout, a numeric layout and a layout with national characters. Touching anywhere in an input field makes the keyboard, or character recognition screen, appear. Navigating In order to navigate to a WAP service, three methods are available.
DESIGN COMPONENTS This chapter gives an overview of the graphical user interface components and a description of their corresponding WML elements. These items are then used when designing WAP services. The “Look and Feel” of the components is described and guidelines are made on component usage. The WML elements and their attributes are also listed and a brief description is given.
A text formatting example
Welcome
to
The Mobile Way of Ordering Pizza.
[Contact Us]
Line Spacing and Line Breaks The line spacing in the R380 browser is single line with one additional pixel before the line and one after.
Paragraphs Text on a WML card comprises one or more paragraphs. A paragraph always starts on a new line and is preceded by an extra line space of 3 pixels. Text within a paragraph is by default displayed left aligned. However, it can optionally be displayed right aligned or centered. WML Paragraphs are defined by using the p element. The p element also establishes the alignment attribute for a paragraph.
Indented Paragraphs Related text and other components can be grouped together to increase usability. Such groups can be nested. Each group is indented 20 additional pixels and preceded by an extra line space of 3 pixels. A header in bold font can optionally precede a group. In such a case a so-called hanging indent applies. WML The beginning of a group is defined by using the fieldset element.
The Card Title Bar See Card Title Bar on page 5. WML The title in the Card Title bar is defined by using the title attribute in the card element. Using Select Lists A select list is an input component that specifies a list of options for the user to choose from. Single and multiple choice lists are supported. Single Choice Lists A single choice list is used for the selection of one and only one item in a list. The list is presented as a drop-down listbox.
The option element Text in the option element content is used in the drop-down list. The title attribute is not supported.
The select element Attribute Description multiple The multiple attribute can take the following values: Yes and No. The default value is No. To create a multiple choice list, this attribute is set to Yes. The option element Text in the option element content is displayed to the right of the check box using the Normal regular font. The title attribute is not supported. The optgroup element The optgroup element allows grouping of related option elements into a hierarchy.
WML Buttons are defined by using the do element. Pressing the button invokes the action defined in the do element. The R380 supports the following attributes: Attribute Description label The value of the label attribute is used as text on the button. The text is not truncated. type If no label is specified, then the value of the type attribute is used on the button. The type attribute can take the following values: accept, prev, help, reset, options, delete and unknown.
Touching the screen anywhere in an input field makes the keyboard, or character recognition screen, appear (see The On-screen Keyboard above). WML Input fields are defined by using the input element. The following attributes are supported: Attribute Description type The type attribute can take the following values: text and password. If type is set to password, the characters entered in the On-screen Keyboard are replaced by asterisks when displayed.
However, the R380 user can choose not to load images at all. In this case, the placeholder is permanent. There is no limitation on the height of an image. A user must scroll in order to view a large image. However, if the image is wider than the browser area, only the leftmost part of the image is visible. WML The img element indicates that an image is to be included in the text flow.
An image example
The oven is turned on, and your pizza will be delivered just in time.
Using Hyperlinks Hyperlinks are underlined text or a graphic that can be tapped to navigate within a deck or go to a new deck on a WML site, to initiate a voice call or to start composing an e-mail. A hyperlink may be located anywhere in the text flow.Using Images as Hyperlinks An image can also serve as a link. By default, there are no differences in image layout if the image serves as a link or not. However, the R380 browser can be set to show image links with a frame of 1 black and 1 white pixel. This affects the card layout. WML An image hyperlink example
PAGE 21
In addition to text and images, tables can also contain hyperlinks and images used as hyperlinks. WML The table element is used together with tr and td to create a set of aligned columns of text and images. The tr element is used as a container to hold a single table row. The td element is used as a container to hold a single table cell data. Attribute Description align Alignment of cell content is fully supported. The align attribute can take the following values: L (left), R (right) and C (centre).
| Rain | Overcast | Partly Cloudy | Sunny | Sunny |
| 5-10°C | 6-7°C | 10-11°C | 10-14°C | 14-20°C |
The Pizza Penguin table example
 PAGE 23THE PIZZA PENGUIN EXAMPLE Below is a complete WML code listing from a WAP demonstration application. The examples in the previous chapters were mainly selected from this application. Select Extras
[Contact Us]  PAGE 25
The oven is turned on, and your pizza will be delivered just in time.
[Contact Us]  ManualShelf © 2013-2025 |
