Nokia COMMUNICATOR 9210 manual

1 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Nokia 9210 Communica tor Style Guide Version: 1.0 Date: 29 August, 2000[...]

2 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. TABLE OF CONT ENTS 1. Introduction ................................................................................................................. ................................................................... 5 1.1 Purpose of this documen t..................................[...]

3 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9.9 Find Dialog................................................................................................................. ........................................................... 30 9.10 Find and Repl ace Di alog ...........................................................[...]

4 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 13.4 Punctuation ................................................................................................................ .......................................................... 57 14. Localisation .........................................................................[...]

5 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 1. INTRO DUCTION 1.1 Purpose of this docum ent The purpose of this document is to conv ert the UI principles and to unify the UI of all applications within a single Nokia 9210 Communicator. The target readership of this documen t includes developers of the previous communicators, E[...]

6 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 2. GENERAL UI PRINCIPLES - Applications should interact with the user - User k ey presses should be acknowledged in some way. The application should alw ays react to the key pr esses. - The UI should be as flexible as possible: if there are two ways to perform an action, you should[...]

7 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. another language. The communicator is localised. Mixed language versions are not good from the point of view of style, nor are t hey user fri endly.[...]

8 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 3. LAYOUT The display resolution is 6 40 x 200 pixels. T here are four command bu ttons on the righ t-hand side of the display; the button labels are presented on the left-hand side of the command buttons. The display is divided into three different areas (see Figure 1). On the lef[...]

9 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 2: An example of a W ide Indicator Area (92 pix els) It is recommended that a Wide Indicator Area should be us ed in the first view of the application (when the application button is pressed). The Wid e Indicator Area with th e application name and th e application icon help[...]

10 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 3.2 Application Area The size of the Application Area varies, depending on the width of the Indicator Area and the CBA (Command Button Area). The application layout must also fit into the smallest possible area if the CBA is at its maximum width. Basically, the Application Area co[...]

11 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. When Full Screen Mode is activ e, before launching any commands the CBA or Menu must first be activated by pressing the related button (Table 2). Button pressed Visible on the screen CBA CBA Menu Menu + CBA Accelerator - Other QWERTY keys - Table 2: The relationship between the pr[...]

12 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. The screen re turns to the Full Scr een Mode if • a command (M enu or Command Bu tton based ) is executed • the Menu is clos ed, or • time-out has expired Note: Command Button Area is not cleared if a di alog or note is open on the Screen. The Full Screen Mode is r esumed on[...]

13 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 4. INTERACTI ON The communicator UI is based on CBA, Menu and keyboard usage. Keep in mind that there is no generic pointing device in the UI, so the controls should no t be ’clickable.‘ The user should be able to use the device by keyboard and the Menu wi thout the C BA, if h[...]

14 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 4.5 Arrow Manipulated Pointer Some applications may use an Arrow Manipulated Pointer which is simil ar to a mouse pointer, exc ept that it is manipulated via keyboard (Arrows key and Enter key) instead of a s eparate mouse device (hardware). The Arrow Manipulated Pointer does not [...]

15 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 5. COMMAND BUTTO NS In CBA devices, there are some common rules for the positioning of the commands. The consistency between CBA texts across differ ent applications makes the UI easy to lear n and it also pr events errors. Buttons Command types Example commands Button1 The most f[...]

16 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 6. MENU AND SHORT CUTS Figure 8: The Menu is opened The width of the Menu bar is dynamic; it depends on the numb er of menu i tems and the length of the words . The maximum number of menu items is six. The pr eferred maximum number of menu pane items is also six. However, if there[...]

17 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. - When designi ng the l ayout o f the Me nu, rememb er th at the M enu is no t jus t a tool to provi de access to functionali ty, bu t that it also tells the user what fu nctional ity is avail able. - Menu ca scades have t wo uses - T o hide advanced functionali ty in order to avo[...]

18 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. File New Ctrl+N Open… Ctrl+O ---------- --- Saving > Save document Ctrl+S Save as… Sh+Ctrl+S ---------- ------ ---- Revert to saved Ctrl+R Send > as fax as SMS as mai l via infr ared Printing > Print… Ctrl+P Print preview Sh+Ctrl+V ---------- ------ ------- Page set[...]

19 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Borders Title Sort by > Ctrl+I Name Date Sorting order > Sh+Ctrl+I Ascending Descending ---------- ------ - Full screen mode Ctrl+T Zooming > Zoom in Zoom out ---------- ------ - Zoom ratio… Sh+Ctrl+E Format <font specific> <font specific> ---------- ------ [...]

20 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 7. COMMON L AYOUTS Unified UI style is achieved by a similar layout, as well as by the same m ethod of interaction in the differen t applications. Certain graphical issues, e.g. title and margins, are e asy to define for most common layouts. The visu al design of applications whic[...]

21 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 11: Snaking lists 7.3 Editor view Browsers, editors and viewers always have a N arrow Indicator Area,a title bar wi th no margins and an Application Area with (optional) 10-pixel margins. Figure 12: Editor layouts 7.4 Window view[...]

22 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Window layout usually has two windows, the left-hand window con taining a list and the right-hand window functioning as a ‘‘details’’ or content window. The window h as a window frame and a title with a 1-pixel margin. Window frames can also be used to sep arate certain vi[...]

23 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 8. GUIDE LINES F OR DIA LOGS A dialog is a ‘‘pop-up’’ window that is launched from an application and refers to the view in the backgrou nd. When a dialog is opened, the focus is on the di alog and the background is dimmed (Figure 1 8). A dialog has no menu. The UI should [...]

24 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 15: Informative annotation text in the dialog 8.1.5 Do not show the effec ts of changes until the dialog is complete Do not show the effec ts of any changes the user makes in a di alog until the dialog has been confirmed , i.e. do not have the screen redrawn b ehind the dia[...]

25 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 16: An example of a Multipage Dialog 8.2.1 Grouping settings and choosi ng the title of the pag e Group settings so that related settings appear on the sam e page, and give that page a title th at sums up the settings of that p age. F or settings that are not rel ated and c[...]

26 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9. COMMON DIALO GS 9.1 Save Dialo g Figure 17: Save Dialo g Usage Attributes - saving a document and n aming a document - usually activated by closing a document for the fi rst tim e or by selecting 'Send as' in the Menu - 'OK' accepts the saving procedure - &a[...]

27 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. - 'Cancel' dismisses the dialog and no file is selected 9.3 Insert Object Dialog Figure 19: Ins ert O bjec t Di alo g Usage Attributes - used for inserting objec ts into a document - either exis ting ones or new documen ts are inserted as objects 9.4 Format Object Dialog[...]

28 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9.5 Folder Browse Dialog Figure 21: Folder Browse Dialog Usage Attributes - used for selecting a folder - 'OK' m akes a selection - 'New folde r' creates a new folder (optional) - 'Collapse'/'Expand' modifies the folder tree shown in the dia[...]

29 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9.7 Time Dialog Figure 23: Time Dialog Usage Attributes - used for setting time and date - consists of s tandard controls + bitmaps 9.8 Spell Ch ecking Dia log Figure 24: Spell Checki ng Dialog Usage Attributes - used for ch ecking the spelling in the editors - the misunderstood w[...]

30 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9.9 Find Dialog Figure 25: Find Dialog Usage Attributes - used for searching for a stri ng in the document - 'Find' starts the finding procedure - 'Replace' ac tivates the Replacing function - 'Options' includes the attributes 'Case sensitive&apo[...]

31 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9.11 Font Dialog Figure 27: Font Dialog Usage Attributes - used for defining th e font in the editors - preview - font name and the size - bold , i talics and underlining - tex t colour - striketh rough - normal, superscript or subscript 9.12 Character Map Figure 28: Character Map[...]

32 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9.13 Insert Field Dialog Figure 29: Insert Field Dialog Usage Attributes - used for inserting in formation into documents - document name - page numb er - number of p ages - current time - current date 9.14 Bullets Dialog Figure 30: Bullets Dialog Usage Attributes - used for inser[...]

33 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9.15 Alignment Dia log Figure 31: Alignment Dialog Usage Attributes - used for setting the alignm ent - 4 attributes: l eft, right, cen tred and justified 9.16 Indents Dialog Figure 32: Indents Dialog Usage Attributes - used for defining inden ts - 3 attributes: d efinitions for t[...]

34 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 33: Borders Dialog Usage Attributes - used for defining borders - line style and colour for borders - distance from text 9.18 Tabulator Dialo g Figure 34: T abulator Dialog Usage Attributes - used for defining th e tabulator step - standard and custom tabs 9.19 Print Dialog[...]

35 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Usage Attributes - used for prin ting documents - als o provid es means for chang ing the printing se ttings - 'Print' will start the printing procedure - 'Preview' opens the document in a preview mode - 'Options' opens a di alog where the options can[...]

36 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. selected - 'Page s etup' opens a Page Setup Dialog - 'Setti ngs' include definitions for Serial Printing 9.22 Page Setup Dialog Figure 38 : Page Setup Dialog Usage Attributes - setting up document properties - paper size and orientation - margins - headers and [...]

37 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 9.24 Get Password Dialog Figure 40: Get Password dialog Usage Attributes - used to reques t a pass word - asterisks as feedback by the editor 9.25 Set Zoom Dialog Figure 41: Set zoom dialog Usage Attributes - used for user-d efined zoom level - an editor for zoom lev el[...]

38 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 10. NOTES There are s everal types of note that inform the user or that req uest user actions. H ere is a list of no tes and som e guidelines on how to use them: - The notes ar e located in the centre of th e screen, if not specified o therwise. - Notes have a drop shadow, and in [...]

39 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 43: A Confirmation Note (* Either the title should b e Fetch or the C BA1 should be Fe tch *) Usage Attributes - requ ests confir mation from the use r - usually cont ains 2 commands (e.g. OK / Cancel) - mo re than on e altern ative c an be presented in a single note: Butto[...]

40 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. - appears on the screen and disappears automati cally after time-o ut - allows for o ther action s to take plac e - background and command buttons dims when note appears 10.4 Cancel Note Figure 45: A Cancel Note Usage Attributes - shows long-l asting operations that the user can c[...]

41 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 46: A Progress Bar in a dialog Figure 47: A Progress Bar in the bottom rig ht-hand cor ner Usage Attributes - shows th at time has elaps ed when the total ti me of an oper ation c an be estimated - the progression is indic ated by numbers or percentage, and a dynamic bar - [...]

42 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 48: A Progress Ball Usage Attributes - used when the total time o f an operation is not known; an animation indicates that the system is busy - located in the bottom right-hand corner of the sc reen - drop shadow - background not dimmed 10.7 Information Ban ner Figure 49: A[...]

43 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 11. GRAPHICAL GUIDES AND RULES These chapters describe the graphic al layout and style of the communicator. To achieve an aesthetic and high quality appearance, the graphical guides should be closely conform ed to. The two most important criteria are consistency and clarity. These[...]

44 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 51: A dialog frame 11.1.3 Window frames In some views, ther e is a need to divide the Application Area into several p arts. In these cases , the following instructions are recommended: o nly the active, selec ted window has a fram e and drop shadow. If n ecessary, the activ[...]

45 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 52: Examples of window frames 11.1.4 Grouping in layout Multiplex framing should be avoided to keep the layout clear and simple. Grouping of similar items can be emphasised with light 1- or 2-pixel lines (see Menu, ????), or simply by leaving more empty space between groups[...]

46 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. The space between text column s should be at least 10 pixels. Figure 53: Margin s 11.3 Fonts All system fonts are bitmap fonts and ar e specified in the table below. Sys tem font is u sed in the U I, except in edit ors, viewers and Web browser. It is extrem ely impor t a nt to us [...]

47 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Systemfont20bolditalic 20 pix Bold- Italic Titles in No tes Systemfont 22bold 22 pix Bold Command button texts Systemfont24light 24 pix Light Company name, Date and time, size, type, etc. in lists Menu shortcuts (in z oom step 2) Systemfont 24normal 24 pix Normal Text body (in zoo[...]

48 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. In editors (e.g. text and WWW), the title bar is slightly differen t. There are no margins at the top or at the sides. The height of the ti tle bar is 30 pixel s but there is a black line at the b ottom o f the b ar (Fig ure 59). The title text margin is 10 pixels wide. Figure 55:[...]

49 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. In some special layouts , the title requires two lines: Figure 59 Two-lin e titl e bar There can also be some informative text or icons in the title bar on the righ t-hand side. Text should be as short as possible. There should be a space of at least 20 pixels betw een the ti tle [...]

50 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 61: Scroll bar in a nor mal list view Figure 62: Scroll bar in a dialog Figure 63: Scroll bar in a snaki ng list view The location of the scroll bars in the editors is always vertically on the right-hand side and/or horizontally at the bottom of the view. There is no margin[...]

51 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Figure 64: Scroll bar in an editor The scroll bar in the windows, as in the editors, is located as just beside th e right-hand edge without any margins. Only the top margin exists with the scroll bar. Figure 65: Sc roll Bar in a window 11.4.3 Search/input box The size of the searc[...]

52 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 11.4.4 Selection bar and selection fr ame There is a standard selection b ar for all list components, but the grid c ursor and selection frame need to be implemented individually if needed. The grid cur sor is a 3-pixel frame with black borders and a 1-pixel white fill in th e mid[...]

53 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. The background of the Application Area and dialogs is white. Tex ts are mainly black. Coloured compon ents are mainly light grey. The contrast ratio of the background and text should be at leas t 3:1. Strong colours should be used economically, i.e. only to highlight important inf[...]

54 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 25 Sky blue 128,192,240 26 Blue 0,0,240 27 Dark blue 0,0,192 28 Lila 128,64,192 29 Purple 112,0,128 30 Light green 176,240,128 31 Green 0,240,0 32 Dark green 0,144,16 33 Aquamarine 0,224,144 34 Cyan 0,240,240 35 Turquoise 0,144,240 11.6.2 Application icons Every application has a [...]

55 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 11.6.5 Animations Animations are mainly used in canc el notes to illustrate the progress and to entertain the us er. Animations are very simple and are dynamic. The size of th e area for a cancel note animation is 110 x 60 pixels.[...]

56 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 12. AUDIO UI - The Communicator SDK provides a ready-made sound set and tones that can be used for various UI ev ents, if the developer does not want to create UI sounds on his/her own. - Audio feedback is a useful aid when the user is busy or visually r estricted. Sometimes the u[...]

57 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 13. WRITING S TY LE 13.1 General guid elines Note that these guidel ines apply to Englis h only. Address the user in a ne utral tone. Do not use slang, avoid pleas antries but also avoid using language which could be interpreted as rude or aggressive in tone. The writing style is [...]

58 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Do not use a full s top at the end of a s tring if it is not a full sentence: • ‘‘Done,’’ ‘‘3 SIM cont acts copied ’’ Use double quotes whe re the text is user-gen erated, e.g. for the name of a user's file : • ‘‘About to delete Co ntact c ard for ‘?[...]

59 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 14. LOCALISA TI ON Place all the material to be localis ed in a separate resource file. Identify clearly the strings to be localised. 14.1 Do not hard-co de Make sure tha t code does not cont ain hard-coded charac ter const ants, numeric constants, scr een positions, file names, o[...]

60 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Translation often incre ases the leng th of a text by 30 %or more. In som e cases, the character coun t can increase by more than 1 00 %. For example, the command ‘‘Reply’’ is ‘‘Bean tworten’’ in German and the v erb ‘‘to m ail’’ is ‘‘l ähettää sähk[...]

61 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. When deal ing wi th char acters, alway s rememb er that a byt e is not eq ual to a cha racter (the sm allest compo nent of a written language) and that a character is not equal to a glyph (the shape representation of a character). Some code sets use several bytes to encode one cha[...]

62 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 15. RESPONSI VENESS 15.1 General guidelines for re sponsiveness Provide feedback on user actions. Proper f eedback gives confirmation to the us er that • the system has detected the user ac tion • there is a process going on • the process h as ended It is very important that[...]

63 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 16. FILE HANDLING 16.1 Saving - There is a global default folder that can b e changed in the Control Panel. Applications will ref er to this global default folder. - Note the fo llo wing : - When performing ‘save as’ for an unnamed document, the global default folder is always[...]

64 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 17. LEGALIS SU ES (PR ODUC T LIA BIL ITY ) - Indicate and confirm operations that cause e xpense to the user . - Mak e sure tha t the conn ection, etc. does not stay acti ve after the user h as ended the task ( time-out ).[...]

65 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 18. APPENDICES 18.1 Differences in functio nality: CBA vs. Pen devic e Here is a list of the difference s in basic functionality between CBA EPOC and Pen EPOC devices. Button CBA Pen Tab Changes window (focu s) Tab -> focus to right Shift+Tab -> focus to left Application spe[...]

66 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Business card A contact c ard in the SMS applica tion in a business c ard format th at you can send as an SMS to o ther communicators Call (verb) to ‘CALL,’ no t to ‘T elephone,’ ‘P hone’ o r ‘Ring’ Cancel ‘Cancel’ vs. ‘ Interrupt ’: ‘Cancel’ total ly c[...]

67 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Immedia tel y ‘IMMEDIA T EL Y’ not ‘S tr ai g ht aw ay’ or ‘At onc e’ in use ‘Profile/Backup set/Remote mailbox in use’ Interrupt ‘Canc el’ vs. ‘ Interrupt’: ‘Cancel’ totally c ancels the opera tion tha t you have started and r eturns to the stat e that[...]

68 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. keyboard Green magnifier glass (plus) icon X Zoom in Green magnifier glass (plus) icon resides in button '>' (greater than) in UK keyboard Help icon (x) Help application O pens an application specific help. The key combination may vary according to language versions F[...]

69 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. Arrow R X End = End of the line Goes to the end of the lin e in Editor Arrow R X x Mark to the end of the line Mark to the end of the l ine in Ed itor Arrow R x Move word right Moves a word right Arrow R x x Mark word right Marks a word to the righ t Arrow U x Ma rk/Select Marks i[...]

70 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. N x New file Creates a new file N x x New folder C reates a new folder O x Open Open dialo g O X X I nsert object Insert object dialog P x Print Print dialog P x Properties Properties dialog (when no printing availabl e) P x x Print setup Print options dialog Q x Swit ch view Q X [...]

71 (71) Copyright © Nokia Mobile Phones 2000 . All rights reserved. 19. LEGA L N OTICE Reproduction, transfer, distribution or storage of part or all of the contents in this document in any for m without the prior written permission of Nokia is prohibited. Nokia and Nokia Connecting People are registered trademarks of Nokia Corporation. Other prod[...]