Ericsson R380 user manual

Summary of the content on the page No. 1

LZT 108 3339
Mobile Phone
R380
Design Guidelines
for WAP Services
e

Summary of the content on the page No. 2

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. TM TM WAP and WAP Forum are registered trademarks of the WAP Forum, LTD., a registered company in the United Kingdom. First edition (Nove

Summary of the content on the page No. 3

Contents PREFACE _______________________________________________ 2 Who Should Read this Guide? 2 Overview of Contents 2 Related Publications 2 Ericsson Publications 2 Other Publications 2 Terminology 3 Abbreviations 3 Definitions 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 7 Font Size and Font Style

Summary of the content on the page No. 4

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. Overview of Contents The chapters in this document are organized as follows: General Usability Aspects This chapter gives an overview of issues to be taken int

Summary of the content on the page No. 5

[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 Uniform Resource Locator TM WAP Wireless Application Protocol WBMP WAP Bitmap WML Wireless Markup Language Definitions Bookmark A named reference to a URL. Enables the user to keep track of favorite pages an

Summary of the content on the page No. 6

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-

Summary of the content on the page No. 7

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. This includes a top margin of 2 pixels

Summary of the content on the page No. 8

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. • Frequently visited loca

Summary of the content on the page No. 9

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. The WML element descriptions are, supplemented with WML code as well as figures showing the way this is displayed

Summary of the content on the page No. 10

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. If a line is too long to fit horizontally in the browser area, the line will be word- wrapped o

Summary of the content on the page No. 11

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. p element also establishes the alignment attribute for a paragraph. The Attribute Description align The align attribute can take the following values: left, righ

Summary of the content on the page No. 12

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. Attribute Description title The value of the title attribute, if present, will be used as a leading t

Summary of the content on the page No. 13

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. In its closed state the listbox display

Summary of the content on the page No. 14

The option element Text in the option element content is used in the drop-down list. The title attribute is not supported. An example of a single choice list

Select Pizza Cappriciosa Quatro Staggioni Margherita Campagnola Siciliana What's On

Select Size Large Medium Small <

Summary of the content on the page No. 15

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. Attribute Description tit

Summary of the content on the page No. 16

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. Note: If two do element

Summary of the content on the page No. 17

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. value If no pre-load value is defined for the

Summary of the content on the page No. 18

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. The R380 supports the following attributes: Attribute Description alt An alternative textual representation fo

Summary of the content on the page No. 19

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. Text in hyperlinks is displayed in the same font a

Summary of the content on the page No. 20

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