Ericsson R380 manual

e LZT 108 3339 Mobile Phone R3 8 0 Design Guidelines for W A P Services[...]

WAP TM an d WAP Forum TM are regis tered tradem arks of th e WAP Forum , LTD., a regis tered company in the Un ited Kingdom. First edition (Novem ber 1999) This docum ent is publi shed by Ericsso n Mo bile Co mm unica tions AB , without an y w arranty . Improv emen ts and ch anges to this text necessitated by ty pographical errors , inaccuracies of[...]

1 Contents PREFA CE _______________________________________________ 2 Who Should Read this Guide? 2 Overview of Contents 2 Related Publications 2 Ericsson Publica tions 2 Other Publica tions 2 Termin olog y 3 Abbre viations 3 Def initions 3 GENERA L USA BILITY A SPECTS ____________________________ 4 USER INTER FA CE ISSUES _________________________[...]

2 PREFACE This docum ent describes h ow to desig n WA P servi ces for t he Erics son Mobil e Phone R 380. Who Should Read this Guide? This document is inten ded for developers of WAP services who w ant a deeper insigh t into desig nin g applicat ions f or th e Ericsson R380 WA P brow ser. It is assum ed that the reader is fam iliar w ith the WAP co[...]

3 [3] WAP W ireles s Markup Language Specification, Vers ion 1.1 Versi on 16-JU N-1999 Wireless Appl ication Protocol Foru m, Ltd. ht t p : // www. wa p f o r um. o r g / wha t/technical.htm Terminology Abbrev iations GIF Graphics In terchang e Format HTTP Hy pertext Trans fer Protocol URI Uniform Resou rce Identifier URL Uniform Res ource Locator [...]

4 GENERAL USABILITY ASPECTS When it comes to designin g any kind of electronic serv ice, simplicity is the key to gaining acceptance and appreciation f rom users. Sim plicity is even m ore im portant in a mobile environ men t since th e user often needs to concen trate on other th ings as w ell as usin g the termin al. Keep inform ation and tex t s[...]

5 USER INTERFACE ISSUES The Brows er D isplay The Ericsson R 380 display is a g rey s cale black an d w hite t ouchscreen w ith a res olution of 360x120 pixe ls w ith 0.23 pitch . This m eans an activ e screen s ize of alm o st 83x28mm . The browser display has three section s: the Browser A rea, the Card Title bar at the top, and the Toolbar to th[...]

6 Toolbar The Toolbar is an area containi ng bu ttons required by the browser. The On -screen Keybo ard Text input is done w ith on-s creen key boards or a character recognition screen. Three differen t key board layou ts are available: an alph a layou t, a num eric lay out and a lay o ut w ith n ational characters. Touching any w here in an input [...]

7 DESIGN COMPONENTS This chapter giv es an ov erview of th e graphical u ser interf ace com ponents an d a description of their correspondin g WML elem ents . These items are then us ed w hen desi gnin g WAP services . The “Look and Feel ” of th e compon ents is described an d gu idelines are m ade on com ponen t usage. The WML elem ents and th[...]

8 A text formatti ng example <wml> <card id="first" title="Pizza Penguin" newcontext="true"> <p align="center"> <br/> <b><big><a href="#second">Welcome</a></big></b><br/> to<br/> The Mobile Way of Ordering Pizza.<br/><b[...]

9 Paragr aphs Text on a WML card com p rises one or m ore paragraphs. A paragraph alw ays starts on a new line and is preceded by an extra line s pace of 3 pixels. Text within a paragraph is by default display ed left aligned. How ever, it can optionally be display ed rig ht ali gne d or centered. WML Par agra phs ar e de fined b y using the p elem[...]

10 Indented Par agra phs Related text and other componen ts can be grouped together to increase usability . Such g roups can be nes ted. Each group is indented 20 additional pixels and preceded b y an extra line space of 3 pixels. A header in bold font can optionally precede a group. In such a case a so-called h angi ng inden t applies. WML The beg[...]

11 The Car d Title Ba r See Card Title B ar on page 5. WML The title in the Card Title bar is d efined by using the title attribute in the card elem ent. Using Sele ct Lists A select list is an inpu t component that specifies a list of options for the user to choose from . Single an d mu ltiple choice lists are s upported. Single Choice Lists A sin[...]

12 The option element Text in the option elem ent content is us ed in the drop-down list. The title at tribute i s not s upported. A n example of a single ch oice list <p> <b>Select Pizza</b> <select> <option>Cappriciosa</option> <option>Quatro Staggioni</option> <option>Margherita</option>[...]

13 The select element A ttribute Descripti on multiple The multiple attr ibute can take the f ollowing values: Yes and No . The def ault value is No . To c reate a m ultiple choice lis t, this attribute is set to Yes . The option element Text in the option elem ent conten t is display ed to the righ t of the ch eck box u sing th e Nor mal regul ar [...]

14 WML Butto ns are defi ned b y using the do elemen t. Pressing the button invokes the action defined in the do elem ent. The R380 support s the f ollow in g attribu tes: A ttribute Descripti on label The value of the label attribute is used as text on the button. The text is not truncated. type If no label is s pecified, then the value of the typ[...]

15 Touching the screen any wh ere in an in put field m akes the key board, or character recognition screen, appear (see The On -screen Keyboard abov e). WML Input f ields are defin ed by u sin g th e input elemen t. The follow in g attribu tes are su pported: A ttribute Descripti on type The type attr ibute can take the f ollowing values: text and [...]

16 How ever, the R380 u ser can ch oose not to load im ages at all. In this case, th e placeholder is perman ent. There is no limitation on th e height of an im age. A u ser m ust scroll in order to view a large imag e. Howev er, if the im age is w ider than th e browser area, only the lef tmost part of the im age is visible . WML The img elem ent [...]

17 A n image example <p align="center"> <img alt="baker"src="baker.gif" vspace="5" width="40" height="30"/><br/> <b>The oven is turned on, and your pizza will be delivered just in time.</b><br/> </p> Using Hy perlink s Hyperlin ks are un derlined t[...]

18 Using I mages as Hyperl i nks An im age can also serve as a lin k. By def ault, there are n o differences in im age lay out if th e im age serv es as a lin k or not. H owe ver, the R 380 brow ser can be s et to sh ow imag e link s w ith a fram e of 1 black an d 1 w hite pixel. This af fects th e card layou t. WML A n image hyperlink example <[...]

19 In addition to text and imag es, tables can also contain hy perlinks and imag es used as hy perlinks. WML The table elem ent is u sed together w ith tr an d td to create a set of alig ned colum ns of text and im ages. The tr elem ent is used as a con tainer to hold a s ingle table row . The td elem ent is used as a con tainer to hold a sin gle t[...]

20 <tr> <td>Rain</td> <td>Overcast</td> <td>Partly Cloudy</td> <td>Sunny</td> <td>Sunny</td> </tr> <tr> <td>5-10&#176;C</td> <td>6-7&#176;C</td> <td>10-11&#176;C</td> <td>10-14&#176;C</td> <td>14-20&[...]

21 THE PIZZA PENGUIN EXAMPLE Below is a com plete WML code listing from a WAP dem onstration application. The examples in the previous chapters w ere m ainly selected from th is application. <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> [...]

22 <p> <b>Select Extras</b> <select title="Extras" multiple="true"> <option>Mushrooms</option> <option>Mozzarella</option> <option>Garlic</option> </select> </p> <p align="center"> <do type="accept" label="Continue">[...]

23 </p> </card> <card id="sixth" title="Oven On"> <p align="center"> <img alt="baker" src="baker.gif" vspace="5" width="40" height="30"/><br/> <b>The oven is turned on, and your pizza will be delivered just in time.</b><[...]