Instruction/ maintenance manual of the product 7110 Genie
Go to page of 84
Genie Application Style Guide (For Openwave™, Nokia™ Model 7110™, Model 6210/6250™, and Mitsubishi™ T rium™ W AP™ browsers) Openwa ve Sy stems I nc.
LEGAL NOTICE Copyrig ht © 2000 –200 1 Openwave Systems Inc. an d Genie. Al l rights reser ved. Use o ther t han for intern al purp oses , reprod uction , modi fi cation or di strib ution w itho ut pri or writte n au thorisatio n by Genie i s strict ly proh ibit e d.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide iii Contents 1 : Styl e Guid e Overvie w 1 Organisation of this Guide 1 Why Specialise? 2 T esting on SDKs 2 2 : Usability Design Philosophie s 5 Crea.
Conten ts iv Genie Appl ication Style Gu ide Februar y 2001 15 : Labels and Links 71 A : Identifying the Brows er 73 B : Dif fer ences betwee n Br o wser T ypes in Same Class 77.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 1 1 Chapter 1 Style Guide Over vie w This docum ent gi ves de veloper s comprehens i ve gui delin es for de veloping highl y usable applications that .
Styl e Gui de Ove rvie w Why Specialise? 1 2 Genie Appl ication Style Gu ide Februar y 2001 • Mitsubi shi T rium Usability . These guidelines explain ho w to create the most usable application for the Mitsubishi Trium bro w ser . Again, use the Mitsubishi guidelines in conjunction with the shared feature set guidelines .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 3 Style Gui de Over view Te s t i n g o n S D K s 1 • Mitsubi shi T rium. There is little dev eloper documentation o n the Mitsu bishi Triu m W AP browser , and no kno wn full simulato r or SDK product av ailable at this time.
Styl e Gui de Ove rvie w T esting on SDKs 1 4 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 5 2 Chapter 2 Usability Design Philosophies Keep in mind a few design philosophies when building an application for a W AP browser phone. The user’ s experience with an application may determine wh ether or ho w o ften the user re vis its the application.
Usabi lity De sign Phil osophi es Creating Usable Appli cations 2 6 Genie Appl ication Style Gu ide Februar y 2001 Creating Usable Applications When de veloping applications, these are the most impor tant factor s to consider: who the user is, what pro blems the user is tryi ng to solve, and ho w to solve th em most ef ficiently .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 7 Usabili ty Desi gn Ph ilosop hies T esting the Design 2 ■ P erson alise th e service acco rdin g to the u ser .
Usabi lity De sign Phil osophi es T esting the Design 2 8 Genie Appl ication Style Gu ide Februar y 2001 Nokia 7110 B r owser T emplate The Nokia 7110 br ows er has two s oftke ys with f ixed labels : Options and Back. Th e application <do> labels are listed under and acces sed from the Options s oftkey .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 9 Usabili ty Desi gn Ph ilosop hies T esting the Design 2 The T riu m handset has two softke ys and a four- way scroll key (s upporting the up and do wn functionality , as well as moving forward and backwards).
Usabi lity De sign Phil osophi es T esting the Design 2 10 Genie Appl ication Style Gu ide Februar y 2001 NO TE There is some variability among Openwave bro wser phones; howe ver , this should not af fect the user e xperience.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 11 Usabili ty Desi gn Ph ilosop hies T esting the Design 2 Openwave Br owser Pr operties The follo w ing properties are uniq ue to the Openwa ve bro wser . Capitalise on these to enhance usability . Use the Openwav e UP .
Usabi lity De sign Phil osophi es T esting the Design 2 12 Genie Appl ication Style Gu ide Februar y 2001 Nokia Br owser Properties ■ Nokia 7 110 onl y: The r oller key ca n be pres sed to activ ate the selec ted item.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 13 Usabili ty Desi gn Ph ilosop hies T esting the Design 2 ■ The right so ftkey label supp orts the <prev> eleme nt and f or some phones ma y be conte xt se nsitive.
Usabi lity De sign Phil osophi es T esting the Design 2 14 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 15 3 Chapter 3 Na vigation Guidelines T o naviga te W irele ss Mark-up Lang uage (WML) content , the user must mo ve through and between cards in one or more d ecks.
Nav igat ion Gu idelin es 3 16 Genie Appl ication Style Gu ide Februar y 2001 ■ Ne ver define a p rev as ha ving no action. Do n ot bi nd a n act ion of t ype <noop/> to a task o f < do type="prev"> .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 17 Naviga ti on Gu i deli nes 3 ■ All car ds should have a title attrib ute of 18 c haracter s or f ewer . Longer titles may be truncated, obscu ring meanin g. T est the title to make sure it f its. Not all phones display the title.
Nav igat ion Gu idelin es 3 18 Genie Appl ication Style Gu ide Februar y 2001 Openwave Na vigation Guidelines ■ Alwa ys define an action for <do type="acce pt"> .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 19 Naviga ti on Gu i deli nes 3 Example 3 -7 Openwave Br owser <do type="options" label="Buy"> <go href="buy.wml"/> </do> <do type="options" label="Alert"> <go href="alert.
Nav igat ion Gu idelin es 3 20 Genie Appl ication Style Gu ide Februar y 2001 ■ Use ac tivi tie s or car efu lly de sign ed navig atio n to di rect the B ack key to th e most intuitive pa g e. Acti vities best create a start poi nt that allows the application to retur n to a sp ecified card when user p resses the Back k ey .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 21 Naviga ti on Gu i deli nes 3 <input name="street" title="Addres s:"/> </p> </card> <card id="add2&quo.
Nav igat ion Gu idelin es 3 22 Genie Appl ication Style Gu ide Februar y 2001 In Example 3-9 the goal is to allow the user to na vigate backward through the data input wizard without losin g data that was dif ficult to enter (since many de vices m ap the clear and back f unctions to the same k ey) an d without corrupting the history stack.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 23 Naviga ti on Gu i deli nes 3 ■ Use up to 18 char acter s on option la bels. Since <do> labels are items under the Options so f tkey , labels can be approximately 18 characters long. Limit labels to one or two words.
Nav igat ion Gu idelin es 3 24 Genie Appl ication Style Gu ide Februar y 2001 Mitsubishi T rium Navigation Guidelines ■ Pr ovide bac kwar d navi gation f or each car d. Provide an intuitive label, for example Done or Back, to allow the user to use th e right softkey for backw ard navigation.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 25 4 Chapter 4 Menu Na vigation Navigating though menus primarily consists of selecting items or links th at, when selected, display a ne w card or deck or perform some action .
Men u Navi gation 4 26 Genie Appl ication Style Gu ide Februar y 2001 Openwave Men u Guidelines ■ Use t he <select> element to get number s, ic ons, and item s f or a me nu. These prov ide quick access to an item by including nu mbers in a list.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 27 Menu Naviga tion 4 <card id="story1"> <do type="accept" label="Skip"> <go href="#story2"> </do> <do type="options" label="View"> <go href="story1full.
Men u Navi gation 4 28 Genie Appl ication Style Gu ide Februar y 2001 ■ An anc hor sho uld have a descr iptive label of five c haracter s or fewer . The label for links leading to the def i ned URL should be f i ve characters or fe wer . It is rendered as the softk ey label.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 29 Menu Naviga tion 4 <catch/> </spawn> </do> <do type="vnd.up.send"> <spawn href="#str$$(U:noesc)">.
Men u Navi gation 4 30 Genie Appl ication Style Gu ide Februar y 2001 In Example 4-3, the user can delete a message directly by highlighting the mess age header and ch oosing Delete from the Menu softke y . The co de in the menu card is v astly simplif ied to sho w ho w the menu items would be rendered on th e dev ice.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 31 Menu Naviga tion 4 Mitsubishi T rium Menu Guidelines ■ Each m enu shoul d be a li st of anch ors. ■ Define l abels of six characte rs or fe wer for eac h anc hor . Longer l abels may be t runcated.
Men u Navi gation 4 32 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 33 5 Chapter 5 Making Phone Calls fr om the Br o wser Some applications requir e the user to make a call or create opportunities for the user to do so, for instance, f rom a list of contacts, a p hone number q uery , or an or der form.
Maki ng Phone C alls fr om the Brow ser 5 34 Genie Appl ication Style Gu ide Februar y 2001 Openwave Calling Gui delines ■ Embed code to make the phone call .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 35 Making Phone C alls from the B r owser 5 Nokia Calling Guidelines ■ Incl ude both the name an d number on the scre en. ■ Pr ovide a link to a card with the n umber if only the name is di splay ed.
Maki ng Phone C alls fr om the Brow ser 5 36 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 37 6 Chapter 6 Usin g Mu ltip le Selection Lists Use multiple selection lists when the user can select more than one item on a list.
Using Multi ple Se lection L ists 6 38 Genie Appl ication Style Gu ide Februar y 2001 Nokia Multiple Selection List Guideline ■ Pr ovide navigat ion links to the ne xt URL. In ad dit i on to the <do> element or <do type="options"> label, create a link leading to the next card.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 39 7 Chapter 7 Bac kward Na vigation Pay special attention to backw ard na vigation becaus e users tend to u se the Back ke y or softkey to back out of an appli cation. Users are more l ikely to trust applications with good backward nav igation functions.
Bac kwar d Naviga tion 7 40 Genie Appl ication Style Gu ide Februar y 2001 Shared Feature Set: Bac kwar d Navigation ■ Alwa ys pro vide som e kind of back ward navi gation. ■ Map bac kwar d navigation t o the ne xt high est or m ost intuiti ve men u when dire ct bac kward na vigation is n ot suitab le.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 41 Bac kward Na vigation 7 Example 7 -1 <template> <do type="prev" label="Back"> <prev/> </do> </template> <card id="start" onenterforward="#sta rt2" onenterbackward="backtome.
Bac kwar d Naviga tion 7 42 Genie Appl ication Style Gu ide Februar y 2001 Example 7 -2 Openwave Br owser Nokia 7110 Br owser Mitsubishi T rium Browser <do type="options" label="Done"> <go href="home.wml"/> </do> Example 7-2 sho ws ho w a URL helps the user n avigate mo re easily .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 43 Bac kward Na vigation 7 ■ Save the v alues of v ariables w hen needed . If the user exits an entry field, it may be help ful to temporarily sav e the values of all or some of the v ariables. This can reduce the amount of information the us er must enter in the future.
Bac kwar d Naviga tion 7 44 Genie Appl ication Style Gu ide Februar y 2001 Openwave Bac kward Na vigation ■ Use ac tivities when need ed. This way , the user does not ha v e to repeatedly pres s the Back or Clear ke y , clearing already entered d ata.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 45 8 Chapter 8 Displa ying T ext Some cards con tain mostly te xt. For instance, ap plications that display email mes sages, ne ws items, stock quotes, and confirm ation or informati ve n otices are text intensi ve.
Disp lay ing T ext 8 46 Genie Appl ication Style Gu ide Februar y 2001 ■ Define a Ski p link to go to nex t related item. When displaying a series of related data, such as ne ws stories or email messages, use a Skip link t o allow the user to skip th e current item an d retriev e the next one.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 47 Disp laying T ext 8 Openwave T ext-Disp lay Guidelines ■ Use mo bile originated pref etch to access the nex t car d. This shortens the time needed to ret rie ve the ne xt set of information. While the user i s reading one ca rd, the ne xt card can be retriev ed and put into the cache.
Disp lay ing T ext 8 48 Genie Appl ication Style Gu ide Februar y 2001 Nokia T ext-Displa y Guidelines ■ Includ e extr a navig ati o n lin ks, and al low use rs to us e the Opti ons soft key for addition al na vigation, w hen neede d.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 49 Disp laying T ext 8 Mitsubishi T rium T e xt-Displa y Guidelines ■ Create links to navig ate off th e car d. ■ Define appr opriate softke y labels f or confirmation car ds. Provide intuiti ve labels, such as Y es and No, for card s that req uire the us er to con f ir m an action.
Disp lay ing T ext 8 50 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 51 9 Chapter 9 Data Entry Queries If the user mus t enter numer ic or alphanumeric in formation, the application can u se data entry queries to elicit it . Shared Feature Set: Data Entries Guidelines ■ Minimise the numb er of input fields requiring alphanum eric entry .
Data E ntry Querie s 9 52 Genie Appl ication Style Gu ide Februar y 2001 Example 9 -1 Openwave Br owser Nokia 7110 Br owser <card id="ninput" title="Order Info"> <do type="accept" label="Send"> <go href="send.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 53 Data E n tr y Q u erie s 9 ■ Limit te xt bef ore a <select> or <input> element. The bro wser will autom atically ensure that the init ial selected item or the input field is visible.
Data E ntry Querie s 9 54 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 55 10 Chapter 10 Formatted Entry Fields In some applications , the data entry qu eries can prov ide specialised format f ields.
Format ted Ent ry Fi elds 10 56 Genie Appl ication Style Gu ide Februar y 2001 ■ For ce the entry typ e to n umeric or alpha, if app ropr iate. For e xample, in some en vironments, postal codes are numeric only . For those countries, force the entry type to nu meric so that the user can not enter alphabetic characters.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 57 Form atted E ntry Fields 10 ■ Incl ude symbols in the forma t to simplify te x t entry . Use symbols (suc h as / : ; - or e ven s paces ) in the form atting string to indicate the expected in pu t.
Format ted Ent ry Fi elds 10 58 Genie Appl ication Style Gu ide Februar y 2001 ■ Use t he maxlength attrib ute to pre vent user s from losi ng entered dat a. When the user e xits a data query f ormatted with 3N (NNN) or 3M (MMM) , the data is lost when the user does not enter e xactly 3 numbers or characters.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 59 11 Chapter 11 Forms Forms can encompass one or more display or action types on a card or s et of cards.
Forms 11 60 Genie Appl ication Style Gu ide Februar y 2001 Openwave Wizar d Forms ■ Separate ca rds are not n eeded f or each of the <input> elements .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 61 Forms 11 Mitsubishi T rium Wizard Forms The guidelines for the Mitsubishi Trium are similar to the Nokia, with the follo wing exception : ■ Provide a link foll owin g th e <input> or <select> elemen t to the n ext ca rd in the sequence.
Forms 11 62 Genie Appl ication Style Gu ide Februar y 2001 Shared Feature Set: Elective Data Forms ■ Alwa ys try to find alter natives to u sing electiv e data f orms. Use a wizard to link sequences of inpu t queries and selections within an application.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 63 Forms 11 Nokia and Mitsubishi T rium Elective Data Forms ■ After the f inal field, ad d a li nk perfo rming the final function. For e xample, if the card is a contact search for m, add a Search link that allows the user to search o n the entered and/or selected f ields.
Forms 11 64 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 65 12 Chapter 12 Icons and Images Images can enhanc e or support the displayed information s o that the user can quick ly re vie w a list of items or see a trend. For example, a weather report can display a d ate along with an icon of the pre dicted weather .
Icons an d Images 12 66 Genie Appl ication Style Gu ide Februar y 2001 ■ Imag es ca n be i nclud e d in an <option> elem ent, if the e xtension DTD is being us ed.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 67 13 Chapter 13 Cache Cache managem ent is imp ortan t fo r allo wing quick access to pre viously viewed card s and controlling the display of time-sensitiv e co ntent. Shared Feature Set: Caching ■ Do no t leave t ime - sen siti ve da ta, su ch as st ock q uo tes, in th e ca che .
Cache 13 68 Genie Appl ication Style Gu ide Februar y 2001 Example 1 3-2 <head> <link href="page2.wml" rel="next"/> </head> <card id="page1"> <do type="accept" label="More"> <go href="page2.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 69 14 Chapter 14 Cookies and Subscriber ID Use cookies to store data, thereby redu cing the amount of info rmation the user must enter . The subscriber ID may also be used to p ersonalise a service. Shared Feature Set: Cookies ■ Cookies are not stored in th e phone.
Cooki es and Subscri b er ID 14 70 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 71 15 Chapter 15 Labels and Links Depending on the type of applicatio n and type of in for m ation d isplayed, consistent labels should be used within the application and across other applicatio ns.
Label s and Li nks 15 72 Genie Appl ication Style Gu ide Februar y 2001 ■ Back : Not used for entry query car ds. Back returns the user to the pre v ious card in the histor y list.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 73 A Appe ndix A Identifying the Bro wser Sev eral classes of web clients could potent ially access your site, b ut for the s ake of simplicity , this appe ndix addresses four po ssib le situations: 1 A client that exp ects HTML 2 A No kia 711 0 browser 3 A de vice with the UP .
Ident ifying th e Bro wser A 74 Genie Appl ication Style Gu ide Februar y 2001 ■ Java public void doGet (HttpServletRequ est req, HttpServletResponse res) throws ServletException, IOException{ String acc = req.getHeader("Accept"); String ua = req.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 75 Ident ifying the B ro wser A ■ Java if ((ua.indexOf("UP.B") != -1)) || (ua .indexOf("UP/") != -1)){ res.setHeader(res.SC_MOVED_TEMPORA RILY); res.setHeader("Location", "/opwv/i ndex.
Ident ifying th e Bro wser A 76 Genie Appl ication Style Gu ide Februar y 2001.
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 77 B Appe ndix B Difference s between Br owser T ypes in Same Class Genie strongly recommends that d ev elopers pr ovide con tent that is tailored for the Openwa ve , Nokia and Mitsub ishi brow sers as detailed in the information abo v e.
Differen ces be tween Browser T ypes i n Same Cl ass B 78 Genie Appl ication Style Gu ide Februar y 2001 <input format="…"/> The bro wser does not ent er f ix ed characters (thos e preceeded by a backslash) automatically , and may not handle the chang e b etween ch aracter type A and character type N sensibly .
Febru ary 20 01 Genie A ppl icat ion Sty le Guide 79 Differen ces bet ween Browser T yp es in Same Cl ass B Default action labelling Unlabelled <do> is labelled with the type (trunc ated to fit,.
Differen ces be tween Browser T ypes i n Same Cl ass B 80 Genie Appl ication Style Gu ide Februar y 2001.
An important point after buying a device Genie 7110 (or even before the purchase) is to read its user manual. We should do this for several simple reasons:
If you have not bought Genie 7110 yet, this is a good time to familiarize yourself with the basic data on the product. First of all view first pages of the manual, you can find above. You should find there the most important technical data Genie 7110 - thus you can check whether the hardware meets your expectations. When delving into next pages of the user manual, Genie 7110 you will learn all the available features of the product, as well as information on its operation. The information that you get Genie 7110 will certainly help you make a decision on the purchase.
If you already are a holder of Genie 7110, but have not read the manual yet, you should do it for the reasons described above. You will learn then if you properly used the available features, and whether you have not made any mistakes, which can shorten the lifetime Genie 7110.
However, one of the most important roles played by the user manual is to help in solving problems with Genie 7110. Almost always you will find there Troubleshooting, which are the most frequently occurring failures and malfunctions of the device Genie 7110 along with tips on how to solve them. Even if you fail to solve the problem, the manual will show you a further procedure – contact to the customer service center or the nearest service center
