Ericsson R380 Bedienungsanleitung

LZT 108 3339

Mobile Phone

R380

Design Guidelines

for WAP Services

WAPTM and WAP ForumTM are registered trademarks of the WAP Forum, LTD., a registered

company in the United Kingdom.

First edition (November 1999)

This document is published by Ericsson Mobile Communications AB, without any warranty.

Improvements and changes to this text necessitated by typographical errors, inaccuracies of

current information or improvements to programs and/or equipment, may be made by Ericsson

Mobile Communications AB at any time and without notice. Such changes will, however, be

incorporated into new editions of this document.

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.

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 7

Line Spacing and Line Breaks 8

Paragraphs 9

Indented Paragraphs 10

The Card Title Bar 11

Using Select Lists 11

Single Choice Lists 11

Multiple Choice Lists 12

Using Buttons 13

Using Input Fields 14

Using Images 15

Using Hyperlinks 17

Using Images as Hyperlinks 18

Using Tables 18

THE PIZZA PENGUIN EXAMPLE ___________________________ 21

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 into account when developing

WAP services for Ericsson R380.

User Interface Issues

This chapter gives a description of the physical and logical input/output devices of the

R380 and the way these are used together with WAP services.

Design Components

This chapter contains information about graphical user interface components. The

chapter also contains several examples of WML code as well as figures showing how

these are presented in the browser.

The Pizza Penguin Example

This chapter contains a complete WAP application in WML code.

Related Publications

Ericsson Publications

[1] WAP White Paper

February 1999

AU-System AB

http://www.ericsson.com/WAP/what/wapwp2.pdf

Other Publications

[2] Wireless Application Protocol Architecture Specification

Version 30-Apr-1998

Wireless Application Protocol Forum, Ltd.

http://www.wapforum.org/what/technical.htm

[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

WAPTM 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 and then return to them, easily, later on.

Card A single WML unit of navigation and user interface. May contain

information to present to the user, instructions for gathering user

input, etc.

Card Contents Subject data stored or generated at an origin server. The card

contents display text, images, buttons and other controls supported

by WML as a response to a user request. When a user performs an

action in the card contents, the WAP Browser responds according to

the WML specification.

Card Title An attribute in the WML Card element specifying advisory

information about the card.

Card Title Sequence A generic concept for visualizing the progress and history of a WML

application. The number of titles in the sequence is dependent on the

number of cards that have been browsed.

Current Card The card whose contents is currently displayed in the browser.

Deck A collection of WML cards.

Image WBMP or GIF image contained in a Card.

newcontext An attribute in the Card element indicating that the current browser

context should be re-initialized upon entry to this card.

WAP Application A collection of WML cards, with the newcontext attribute set in the

entry card.

WAP service A WML application residing on a web site.

WAP Services The R380 WAP browser.

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). Try to avoid long words and abbreviations because the screen real estate is

limited. Hard to understand abbreviations might be misinterpreted. Try to use short and

meaningful words instead.

Remember that there is a size limit to what can, in practice; be sent to the terminal in one deck.

Keep the size of the decks at less than 3.800 bytes (images not included). Images should not be

more than 3.800 bytes per image. Use images to supplement text rather than replace it.

Depending on service, it could be wise to stay well below the above-mentioned limits from a

usability perspective. We recommend user testing on all services being done in a live

environment.

Use few levels in menu hierarchies since:

1. The user can easily get lost in complex and deep menu systems.

2. Depending on the bearer and the structure of the WML code, it could be slow to move

down through a multi-level menu system.

Use header texts since headers are used as card titles, which describe the contents of a card.

Card titles should say something about the context the user is currently in. Card titles are also a

navigational aid for users, helping them to remember where they are in an application.

Use links to access more information. Links are a powerful tool for linking different

information items and preventing long pages of text.

Tip: A R380 browser can be identified at the server side by the contents of the HTTP/1.1

header User-Agent request field. At the server side knowledge of the identity of the requesting

browser then can be used in order to start WAP services tailor-made for this particular

browser.

The above-mentioned identity of the R380 browser is:

“R380 2.0 WAP1.1”

Unfortunately no standardized method exist in order to pull out this information. The methods

are different depending brand and version of the Internet server used. Please consult your

Internet server documentation for details on how to make use of the information contained in

the HTTP header fields.

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 and a left and right margin of 3 pixels

each, which reduces the size of the usable area.

If a card content is too extensive to be visible in full, only the beginning of the card will be

visible when first displayed. In this case a vertical scroll bar appears to the right in the browser

area. The scroll bar reduces the browser area width by 16 pixels.

Since the browser does not have a horizontal scroll bar, all text is wrapped.

Graphical components, text and images are displayed in the browser area starting in the upper

left-hand corner and shown in the same order as they appear in the WML code.

Card Title Bar

The Title bar shows which card is presently being displayed and also the cards that have been

browsed through previously. If there are more cards being browsed through than can fit into the

Title bar, only the most recent titles are displayed.

This is a good reason to keep card titles short and meaningful.

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 locations can be bookmarked once and then reached easily using the

Bookmark. When bookmarking, the title of the application entry card is the default name of

the bookmark. The number of bookmarks that can be saved is in practice almost unlimited.

•Newly visited locations can be reached by using the History list.

•New locations can be reached by entering the URL in the Open Location dialog using the

on-screen keyboard.

Browsing through information in an application is done by activating hyperlinks and touching

buttons in the browser area.

In order to provide an easy way of navigating backwards, the Toolbar contains a Back button.

Touching the Back button navigates the user back in the WAP services. Next after the first card

in the current service has been reached, the first card in the previous service is displayed.

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 in the browser area of the R380.

Note! The description below does not include all possible WML elements and attributes, but all

elements affecting the graphical user interface.

Using Text

Font Size and Font Style

The font used in R380 is a proportional font. A proportional font gives a dynamic and

minimized width for each character, which improves readability of the displayed texts. This

generally allows more characters to be displayed per line.

The used typeface name is “Swiss A” and three different font sizes are used: small, normal and

big.

Font size Height Number of lines

Small 9 pixels 7.5

Normal 10 pixels 7

Big 14 pixels 5

The normal and big fonts can be shown in either regular or bold style, the small font only in

regular.

WML

The R380 browser supports all emphasis elements. The big and small elements change the

font size. The em, strong, i, band uelements are all handled in the same manner (all

fonts, except small, are shown in bold).

A text formatting example

<wml>

<big><a href="#second">Welcome</a></big>

to

The Mobile Way of Ordering Pizza.

<a href="#fifth">[Contact Us]</a>

</wml>

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 onto multiple lines. Any suitable inter-word space is used as line break point.

Text can co-exist with images, select lists, buttons, input fields and hyperlinks all on the same

line.

WML

The beginning of a new line is defined by a br element.

The br element affects all contents in the browser view. Text, images, select lists, buttons,

input fields, hyperlinks and tables are positioned on a new line according to the current

alignment.

The br element can also be used inside a table cell (see Using Tables below).

A line break example

The example below shows how the br element will affect the card content appearance.

<wml>

This text will continue until the end of the line and

then wrap to a new line. This is the normal way of

displaying text. This sentence is followed by a br

element.

So, this sentence will start on a new line.

This sentence is preceded by two br elements.

Here is some more text, blah, blah, ...

</card>

</wml>

Andere Handbücher für R380

Inhaltsverzeichnis

Andere Ericsson Handy Handbücher

Ericsson

Ericsson GF788 Bedienungsanleitung

Ericsson

Ericsson T20S Bedienungsanleitung

Ericsson

Ericsson R380 Bedienungsanleitung

Ericsson

Ericsson CF768 Bedienungsanleitung

Ericsson

Ericsson A1018 Bedienungsanleitung

Ericsson

Ericsson A2628S Bedienungsanleitung

Ericsson

Ericsson CF888 Bedienungsanleitung

Ericsson

Ericsson T20E Kurzanleitung

Ericsson

Ericsson R380S Bedienungsanleitung

Ericsson

Ericsson GH688 - OTHER Bedienungsanleitung

Ericsson

Ericsson T18d Bedienungsanleitung

Ericsson

Ericsson R280d Bedienungsanleitung

Ericsson

Ericsson R250s Pro Bedienungsanleitung

Ericsson

Ericsson T28s Bedienungsanleitung

Ericsson

Ericsson T68m Bedienungsanleitung

Ericsson

Ericsson R190 Satellite Bedienungsanleitung

Ericsson

Ericsson CF388 Bedienungsanleitung

Ericsson

Ericsson A1228c Bedienungsanleitung

Ericsson

Ericsson T68m Bedienungsanleitung

Ericsson

Ericsson T65 Bedienungsanleitung

Ericsson

Ericsson T20 Bedienungsanleitung

Ericsson

Ericsson EH 237 Bedienungsanleitung

Ericsson

Ericsson R520S Bedienungsanleitung

Ericsson

Ericsson SATELLITE R290 Bedienungsanleitung

Beliebte Handy Handbücher anderer Marken

Zte

Zte BLADE A520 Bedienungsanleitung

Nokia

Nokia Lumia 620 Bedienungsanleitung

Blackbe;rry

Blackbe;rry KEYone Bedienungsanleitung

Bea-fon

Bea-fon X5 Premium Bedienungsanleitung

Blackbe;rry

Blackbe;rry 8707 Series Bedienungsanleitung

Blackbe;rry

Blackbe;rry Storm Betriebsanleitung

LG LM-X420QN Bedienungsanleitung

LifeWatch

LifeWatch V Bedienungsanleitung

Bea-fon

Bea-fon SILVER LINE SL860 Bedienungsanleitung

IKI Mobile

IKI Mobile KF4.5i Bedienungsanleitung

Hitech

Hitech HT-850 Bedienungsanleitung

Yezz

Yezz Fashion F10 Bedienungsanleitung

Point Mobile

Point Mobile PM60 Bedienungsanleitung

Blackbe;rry

Blackbe;rry Q10 Bedienungsanleitung

Blackbe;rry

Blackbe;rry Bold 9900 Bedienungsanleitung

Blackbe;rry

Blackbe;rry STORM 9500 - VERSION 5.0 Bedienungsanleitung

LG LM-K420EMW Bedienungsanleitung

ISAFE MOBILE

ISAFE MOBILE IS655.2 Bedienungsanleitung