Nokia COMMUNICATOR 9210 Interface 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.................................................................................................... ............................................... 5 1.2 Interactiv e Elemen ts ........................................................................................................ .................................................... 5 1.3 Glossary .................................................................................................................... ............................................................... 5 2. General UI princip les ........................................................................................................ ............................................................ 6 3. Layout ....................................................................................................................... ........................................................................ 8 3.1 Indicator Are as: Wide and Narrow Indicato r Areas ............................................................................ ......................... 8 3.2 Application Are a ............................................................................................................ ..................................................... 10 3.2.1 Title .................................................................................................................................................................................... 10 3.3 Full Screen Mod e ............................................................................................................ .................................................... 10 Button pr essed ................................................................................................................. ............................................................ 11 Visible on t he screen.......................................................................................................... ......................................................... 11 3.4 Command B utton Are a ......................................................................................................... ............................................. 12 4. Interaction ..................................................................................................................................................................................... 13 Views.......................................................................................................................... ..................................................................... 13 Dialogs ............................................................................................................................................................................................ 13 4.1 Enter key ................................................................................................................... ............................................................ 13 4.2 Menu butto n ................................................................................................................. ....................................................... 13 4.3 Esc Key ..................................................................................................................... .............................................................. 13 4.4 Tab key ..................................................................................................................... .............................................................. 13 4.5 Arrow Manipul ated Po inter................................................................................................... ........................................... 14 5. Command B uttons .............................................................................................................. ........................................................ 15 6. Menu and Shortc uts ........................................................................................................... ........................................................ 16 6.1 Guidelines for d esigning the Menu ........................................................................................... ..................................... 17 6.2 Standard menu it ems ......................................................................................................... ............................................... 17 7. Common layouts ............................................................................................................... ........................................................... 20 7.1 List view ................................................................................................................... ............................................................. 20 7.2 Snaking list vi ew (Application Groups ) ...................................................................................... ................................... 20 7.3 Editor vie w ................................................................................................................. ........................................................... 21 7.4 Window view ................................................................................................................. ...................................................... 21 8. Guidelines fo r Dialogs ....................................................................................................... ......................................................... 23 8.1 Guidelines for d ialogs ...................................................................................................... .................................................. 23 8.1.1 Number of i tems in se tting di alogs ........................................................................................ ................................... 23 8.1.2 Avoid addi tional comm ands ................................................................................................. ....................................... 23 8.1.3 Make the title inform ative ................................................................................................ .......................................... 23 8.1.4 Informative strings (an notation tex t) ..................................................................................... .................................. 23 8.1.5 Do not sho w the effec ts of ch anges until the dialog is complete ........................................................... ......... 24 8.1.6 Validation in di alogs â take th e user to the line he o r she n eeds to se t .................................................. ...... 24 8.2 Guidelines for Mul tipage Dialogs ............................................................................................ ....................................... 24 8.2.1 Grouping setting s and choosing th e title o f the p age ...................................................................... ................... 25 8.2.2 Display the mo st import ant page first ..................................................................................... ................................ 25 8.2.3 Multipage Dialo gs can m ake your app lication muc h easier to use ............................................................ ...... 25 9. Common Dialog s ............................................................................................................... ........................................................... 26 9.1 Save Dialo g ................................................................................................................. .......................................................... 26 9.2 Open Dialog ................................................................................................................. ......................................................... 26 9.3 Insert Objec t Dialog ........................................................................................................ ................................................... 27 9.4 Format Objec t Dialog ........................................................................................................ ................................................. 27 9.5 Folder B rowse Di alog ........................................................................................................ ................................................. 28 9.6 Calendar B rowse Dialo g ...................................................................................................... .............................................. 28 9.7 Time Dialog................................................................................................................. .......................................................... 29 9.8 Spell Checking Dialo g ....................................................................................................... ................................................. 29
3 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. 9.9 Find Dialog................................................................................................................. ........................................................... 30 9.10 Find and Repl ace Di alog .................................................................................................... ............................................... 30 9.11 Font Dialo g ................................................................................................................ ........................................................... 31 9.12 Charac ter Map .............................................................................................................. ....................................................... 31 9.13 Insert Field Di alog ........................................................................................................ ....................................................... 32 9.14 Bullets Di alog ............................................................................................................. .......................................................... 32 9.15 Alignment Dialo g ........................................................................................................... ..................................................... 33 9.16 Indents Dialo g............................................................................................................. ......................................................... 33 9.17 Borders Dialog ............................................................................................................. ........................................................ 33 9.18 Tabulator Dialog ........................................................................................................... ....................................................... 34 9.19 Print Dialo g............................................................................................................... ............................................................ 34 Attributes....................................................................................................................................................................................... 35 9.20 Print Previe w .............................................................................................................. .......................................................... 35 9.21 Print Optio ns Dialog ....................................................................................................... .................................................... 35 9.22 Page Se tup Dialo g .......................................................................................................... .................................................... 36 9.23 Set Passwo rd Dialo g........................................................................................................ ................................................... 36 9.24 Get Pass word Di alog ........................................................................................................ .................................................. 37 9.25 Set Zoom Dialog............................................................................................................ ...................................................... 37 10. Notes....................................................................................................................... ........................................................................ 38 10.1 Information No te ........................................................................................................... ..................................................... 38 10.2 Confirmation No te.......................................................................................................... .................................................... 38 10.3 Flashing not e .............................................................................................................. ......................................................... 39 10.4 Cancel Note ................................................................................................................ .......................................................... 40 10.5 Progress B ar ............................................................................................................... .......................................................... 40 10.6 Progress B all .............................................................................................................. ........................................................... 41 10.7 Information B anner ......................................................................................................... ................................................... 42 11. Graphical gu ides and rules.................................................................................................. ...................................................... 43 11.1 Frames ................................................................................................................................................................................... 43 11.1.1 Application fr ame ........................................................................................................ ............................................. 43 11.1.2 Dialog fr ame ............................................................................................................. .................................................. 43 11.1.3 Window fr ames............................................................................................................ .............................................. 44 11.1.4 Grouping in l ayout ....................................................................................................... ............................................. 45 11.2 Margins ................................................................................................................................................................................. 45 11.3 Fonts...................................................................................................................... ................................................................. 46 11.4 Control s ................................................................................................................... .............................................................. 47 11.4.1 Title bar ................................................................................................................ ........................................................ 47 11.4.2 Scroll bars .............................................................................................................. ..................................................... 49 11.4.3 Search/inpu t box ......................................................................................................... .............................................. 51 11.4.4 Selection b ar and selec tion frame ........................................................................................ ................................ 52 11.4.5 Java and Web Cont rols .................................................................................................... ........................................ 52 11.5 Colou rs ................................................................................................................................................................................... 52 11.6 Icons ....................................................................................................................................................................................... 53 11.6.1 Icon palett e............................................................................................................. .................................................... 53 11.6.2 Application ico ns ........................................................................................................ ............................................... 54 11.6.3 List icons............................................................................................................... ....................................................... 54 11.6.4 Note icons ............................................................................................................... .................................................... 54 11.6.5 Animations ............................................................................................................... ................................................... 55 12. Audio UI .................................................................................................................... ..................................................................... 56 13. Writing style ............................................................................................................... .................................................................. 57 13.1 General guidelin es ......................................................................................................... ..................................................... 57 13.2 The communicato r ........................................................................................................... ................................................... 57 13.3 Application n ames .......................................................................................................... .................................................... 57
4 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. 13.4 Punctuation ................................................................................................................ .......................................................... 57 14. Localisation ................................................................................................................ ................................................................... 59 14.1 Do not hard -code........................................................................................................... ..................................................... 59 14.2 Graphics and audio ......................................................................................................... ...................................................59 14.3 Provide roo m for tex t expansion ............................................................................................ ........................................ 59 14.3.1 Do not d eclare buffer s of an e xact s tring................................................................................ ........................... 60 14.4 Avoid clever use of strings ................................................................................................ ............................................... 60 14.4.1 Do not r euse strings ..................................................................................................... ............................................ 60 14.4.2 Watch out fo r composi te messages ......................................................................................... ............................ 60 14.4.3 Watch out fo r dynamic text insertio n ..................................................................................... ............................ 60 14.4.4 Do not use clev er plur als ................................................................................................ ......................................... 60 14.5 Do not assum e the co de set................................................................................................. ............................................ 60 14.6 Use internatio nal sys tem functions ......................................................................................... ...................................... 61 14.7 Use unique log ical nam es ................................................................................................... .............................................. 61 14.8 Provide instruc tions for loc alisation ...................................................................................... ........................................ 61 14.9 Check English .............................................................................................................. ......................................................... 61 15. Responsiveness.............................................................................................................. ............................................................... 62 15.1 General guidelin es for resp onsiveness ...................................................................................... .................................... 62 15.2 Response time .............................................................................................................. ....................................................... 62 16. File handling ............................................................................................................... .................................................................. 63 16.1 Saving .................................................................................................................................................................................... 63 16.2 File naming ................................................................................................................ ........................................................... 63 16.3 Using file nam e extensions ................................................................................................. ............................................. 63 16.4 Folders ................................................................................................................................................................................... 63 16.5 Protect user data .......................................................................................................... ...................................................... 63 17. LegalIssues (produc t liability) ............................................................................................. ...................................................... 64 18. Appendices .................................................................................................................. .................................................................. 65 18.1 Differences in f unctionality: CBA vs. Pen device ........................................................................... ............................. 65 Views.......................................................................................................................... ..................................................................... 65 Dialogs ............................................................................................................................................................................................ 65 18.2 Recommended t erms .......................................................................................................... ............................................... 65 18.3 Shortcut Lis t .............................................................................................................. ........................................................... 67 19. legal notice ................................................................................................................ .................................................................... 71
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, EPOC platform developers and dev elopers of any other small device en vironments (handheld devices , palmtops, PDAs, smart phones). 1.2 Interact ive El em ents The interactiv e elements in the commu nicator are - 4 command buttons on the right-hand side of the display (CBA) - a men u - a PDA keyboard which resides below the display In other words, there is no pen or other direct m anipulating device except for a pointer which can be manipulated via the Arrows key in th e keyboard. The UI of the cellular telephone cannot b e programmed. 1.3 Glossary Term Definit ion AMP Arrow Manipulated Pointer = A pointer that can be m anipulated via keyboard. CBA Command Button Area = The area on the PDA display reserved for the commands corresponding to the soft keys. The commands are context-sensitive. Command button Buttons on the right-hand side of the PDA display that correspond to commands presented in the Command Button Area. Menu button A button which activates the Menu. PDA Personal Digital Assistant. SDK Software Development Kit. Shortcut A single key press or a combin ation of key presses that performs an action. Also called Hot Keys and Accelerators. UI User Interfac e.
6 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. 2. GENERAL UI PRINCIPLES - Applications should interact with the user - User key presses should b e acknowledged in some way. The applic ation should always react to th e key presses. - The UI should be as flexible as possible: if there are two w ays to perform an action, you sho uld allow the user to choose his or her own favouri te way. - All of the application functionality should be visible at all times - Indicate commands and controls that are available - If a command canno t be execu ted at one point for some reason, th en the comm and should be dimmed . Sometimes, when the use r selects a dimmed comm and, an Information Banner indicating âÂÂâÂÂCommand no t availableâÂÂâ can be displayed . - If a command canno t be execu ted at any time, it should no t be visible in the UI at all. - The UI should be consistent across diff erent applications and across other d evices which operate on the s ame platform. This means for example: - Common dialogs (see chapter 9) - Common menu structures (see chapter 6.2) - Common shortcuts (see ch apter 18.3) - Common CBA functionality (see ch apter 5) - Common terminology (see chapter 13, ch apter 14) - Common graphics (see c hapter 10) - Common task flow, i.e. carrying ou t the same type of task should be similar across applications within the UI - Minimise the UI - Less work for the implemen ter and less work for th e user. âÂÂMake it simple!â - Hide the complexity, if complexi ty is needed at all - Common actions should be available with as few key presses and hand movements as possible - Do not frustr ate the pow er users - Provide shortcuts - Let the user have control: do no t over-automate - Provide feedback (see ch apter 15) - Use Notes (see chapte r 9) and/or audio feedback (s ee chapter 12) when i t is not obvious what has happ ened - Avoid âÂÂâÂÂflickerâÂÂâ when an application is redrawn; no part of the UI should flicker when the display is updated - Speak the user's language - Provide an undo functionality, that is, make things reversible (see chapter 16 .5) - Allow swapping from one application to another. A given application must not block other activity - Allow cancellation of the operation at every stage - If you develop an application that is not going to be localised, m ake sure that you create all strings yours elf. Do not take them from the sy stem. This is because th e operating system that your application runs on may well be in
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 left, ther e is an Indicator area, and on the f ar right is a Command Button Area (CBA). The width of both areas varies depending on th e situation, and the space between these areas is dedicated to the application use. 1) Indicator Area on the left: th e Indicator Area is r eserved for providing information about the active application, the time and the status of the communication. The Indicator Are a is either 92 or 32 pixels wide, depending on which application is active. 2) Application Area in the middle: the Application Area is res erved for application use. When th e application requires all the space available, some ex tra space can be provided by using a n arrower 32-pixel Indicator Area. 3) Command Button Area on the right: the Command Button Area consists of 4 commands, e ach command corresponding to a dedicated button. Commands within a view/dialog may change, depending on the func tional context. It is also possible to res erve the entire screen sp ace for th e application (see chapte r 3.3). Figure 1: An example of a Communicator View 3.1 Indicator Areas: Wide and Narrow Indicator Areas The Indicator Area is dedicated to different kinds of importan t information, e.g. connections, battery and fi eld strength indicators. There are two siz es for the Indica tor Area; th e wider Indicator Ar ea is 92 x 200 pixels and the narrow one is 32 x 200 pixels. The wider Indicator Are a has also a place for tim e, the application icon and name (see Figure 2). Application Ar ea Command Button Area Indicator Area
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 the âÂÂâÂÂnovice userâÂÂâ to navig ate. The Narrow Indic ator Area can be used if extra sp ace is need ed (see Figure 3). If the firs t view has a Narrow I ndicator Area, the ti tle and layo ut should mak e it obvious wher e the us er is. Figure 3: An example of a Narrow Indicat or Area (32 pixels) Information presented in the Indicator Area: The origin of the information Note Application icon Application in Wide Ind. Area only Application name (two lines maximum ) Application in Wide Ind. Ar ea only Inbox, Outbox, profiles and Connections (IR, printing, calls, modem ) System in Wide Ind. Area only Clock System in Wide Ind. Area only Field strength and phone state (set off) System Battery System Table 1: The infor mation in the I ndicator A rea
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 consists of a title, margins and list area. The controls reside on the application area alongside the given instructions described in the graphic controls. See also chapter 11.1. 3.2.1 Title The title provides basic information on an open item on th e screen. The information sho wn in the title can be: - The name of the application - The name or other identific ation of the open item (for example, the name of the contact card holder) - The name of the open documen t - Miscellaneous information or indication, e.g.: - status of the connec tion or other in formation that cannot b e shown in the I ndicator Area - application dependent information that is not displayed elsewh ere in the Application Area See also chap ter 11.4. 1. Figure 4: Title in Contact card with the card holder name and card spec ific icons 3.3 Full Screen Mode Full Screen Mode means that the Application Area uses all the space on th e communicator screen (Figure 8). Full Screen Mode enables us ers to have more space for editing or viewing. Figure 5: Fu ll Screen Mode When Full Screen Mode is active, n either the I ndicator Area nor the Command Bu tton Are a are seen on the screen. Showing the title in Full Screen Mode is optional. Full Screen Mode c an be set on and off in th e Menu (by check mark).
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 pressed bu tton and the visible componen ts on the screen. The Application Area is seen in every case. After the activation, the Indicator Area and the Command Button Area simply slide over the contents of the Application Area, while some of the contents in the far lef t and far right-hand sides of the screen are left in the background (Figure 6). Figure 6: T he activa tion is ma d e: th e In dicator A rea and t he Comma nd Butto n Area ar e visibl e on the Sc r een After acti vating a comm and in the Ful l Screen M ode, th e Appl ication A rea ag ain occup ies all the sp ace on the sc reen, i.e. if the C BA or Menu or an Indicator Are a are active , they disapp ear from t he screen. Figure 7: Fu ll Screen Mode.
12 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. The screen re turns to the Full Scr een Mode if ⢠a command (Menu or Command Bu tton based ) is executed ⢠the Menu is closed, 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 only when exiting the dialog/note. 3.4 Command Button Area The Command Button Area is separated from the Application Area by a 5-pixel frame. Note that graphic al components of the U I shall NOT exc eed the f rame and overlap th e Command Button Area. The Command Button Area consists of four commands. The b asic functionality of the device should be man aged by the comm and bu ttons. Command texts are operated by the comm and buttons on the right-hand side of the display. The size of the Command But ton Area varies from 80 x 200 pixels to 130 x 200 pixels, depending on the length of the text strings. The width of the command button area is dynamic bu t view dependent; it is as wide as the longest command text string that could appear on the applic ation screen in question. The width does not change in any one view. The width must b e adjusted according to each language version. The first word of a command text starts with a capital letter. Use of abbreviations is not recomm ended. Command texts are aligned to the right. The right margin is always 4 pixels wide and the lef t margin is a minimum of 4 pixels wide. The left margin is wider if the Command Button Are a is at the minimum and the texts are very sho rt. It is recommended to us e one-line commands if the tex t consists of one or two short words. If the words are long or if there are more than two words, the command text wraps to the second line. The command text, which is defined to have/use the E nter key as a shortcut , is underlined by a 1-pixel line. The command text colour is black. The command text might be dimmed if it is temporarily unavailable. Other colours should not be used in command te xts. Roughly estimated, te xt string widths in the Command Button Are a can extend from 7 to 12 ch aracters per line, depending on the width of the ar ea.
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 he or s he so wishes. Button Functionality Tab Changes the focus between windows Tab -> focus to right Shift Tab -> focus to left Enter Default command (Button1 underlined) in CBA or Carriage Ret urn (CR) in editors Esc Application specific Up/Down Arrows key Application specific Right/Left Arrows key Application specific Views Tab Opens a control (e.g. choice list -> text list box) Enter (when control no t opened, e.g. choice list) Opens a control (e.g. choice list -> text list box) Enter (when control ope ned, e.g. text list box) Optional default comm and = Button1 underlined (e.g. OK in text list box) Esc Cancels (clears a dialog box and any changes made) Up/Down Arrows key Changes the focus from the one control to ano ther Right/Left Arrows key Focuses on the active control Dialogs Table 3: Recommendations for in teraction. 4.1 Enter k ey In editors, the Enter key inser ts a new line. Elsewher e, Enter per forms the action d escribed by the underlined defaul t command (Butto n1). 4.2 Menu button The Menu bu tton activa tes and de activ ates the M enu (see chap ter 7). 4.3 Esc Key The Esc key alw ays allows the user to cancel the curren t action. This is important, because the Cancel command is often unavailable in the CBA. When in a dialog, the dialog and any changes made can b e cleared using the Esc key. 4.4 Tab key The Tab key should move the focus be tween the windows, but there should always be some other w ay of moving between views, ideally using the Arrows key, e.g . the left and right keys may c hange the window. If the Arrows key c annot be used for navigating between windows , a command should be available in th e CBA.
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 replace the convention al usage of the CBA device, but the Arrow M anipulated Pointer is a user interface extension to use the device. The primary intention is not to provide an alternative way to us e the applications, but to provide a pointing functionality for applications that need it. Ex amples of such applications are web browsers (image maps) and Java applications explicitly requesting pointing ev ents. With some exceptions, the basic keyboard usage is still av ailable even when th e Arrow Manipulated Pointer is selected. Every applic ation has the option to use the Arrow Manipulated Pointer, but the Arrow Manipulated Pointer is meant primarily for bro wser applications. When using the Arrow Manipulated Pointer, no t all standard EPOC controls are suitable becaus e the look-and-feel of these controls is not designed for dir ect manipulation. Arrow Manipulated Pointer mode can be activated/deact ivate d in the Me nu or via Shortcut.
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 frequently used command is placed on the uppermost button. For better us ability, the Shortcut 'Enter' can b e assigned to this command . This feature is indicated by underlining the command. In dialogs, this command is control-sensitive, i.e. the command may change according to the position of the focus. Open / OK / Select / Call / Connec t / Send / Start / Change / Set / Yes Button2 This button may includ e the following kinds of command: - one of the most fr equently used commands (the most important command should reside in Button1) - commands which help navigation inside a view (e.g. change from one window to another) - commands which enable switching be tween different views inside an application - commands which open an options dialog Edit / New / Add / Change window / Options Button3 This button can include the same types of command as Button2. Also, when the CBA includes a command that dele tes or perform s anot her 'des tructive' command, this type of command mus t reside in Button3. New / Delete / Remov e / Deselect / Options Button4 - closes applications and dialogs - cancels confirmation not es - generally, Button4 provides the means to 'go back safely' Close / Cancel / Hang up / Disconn ect / No Table 4: Rules f or the pos itionin g of commands. - Multi-level CBA commands should be avoided: a command in the Command Button Area should not open ano ther set of commands. For example, avoid commands like âÂÂâ Write messageâÂÂâ in a CBA button which will ch ange the CBA command set to âÂÂâÂÂWrit e mail,âÂÂâ âÂÂâ Write faxâÂÂâ and âÂÂâÂÂWrit e SMS.âÂÂâÂÂ
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 ar e more th an six ite ms in a menu pa ne, little arrows appear to indic ate co ntinuity on the right-han d side of the menu pane. An a rrow indicates th e location of the c ascade menu con taining the unsee n commands. Figure 9: Menu items with arrows The contents of the Menu, including Shor tcuts, should be identical in all devic es on the same platform. - Include Shortcuts (ctrl k ey, shift ctrl key ) in the Menu ; otherwise, the user will no t be able to find them (see chapter 18.3). Shortcuts with Chr key combinations cannot be included in the Menu but some applications might use them. In other words, separate commands reside in the Me nu and a Shortcut is activated via the keyboard. - Menus should be static - Unavailable menu items should be dimmed. If the user tries to select a comm and which is unavailable, the error case must be indicated to th e user via an Inform ation Banner, e.g. âÂÂâÂÂComm and is not available.âÂÂâ The very same indication should be used wh en the user tries to access a comm and which is unavailable by using a Shortcut key combination. - All views of an application should have the same Menu unless the views are radic ally different
17 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. - When desig ning the layout o f the M enu, r emember th at th e Menu is not jus t a tool to pro vide access to functionali ty, bu t that it also tells the user what fu nctional ity is avail able. - Menu cascades hav e two uses - To hide advanced func tionality in order to avoid frightening novice users - To group together connected functionality - Avoid having cascades as the first item in a menu pane. Otherwise, n avigation gets complicated. - The Menu is not av ailable in dialogs. However, the Menu button migh t have other functionality in dialogs. 6.1 Guidelines for de signing t he M enu Step 1: Menu struc ture Use the parts of the st andard m enu struc ture that are ade quate. If the standard File-Edit-View-Tools division is not applicable, do not stick to it. For ins tance, a File menu has no meaning in the calculator application. Thus, it could be named P rinting etc. Also, an application could hav e more than one category of object which i t could create, edit, list, short or view. In such c ases, Alarm-City-Country or Card-Group-List, for example, or a similar structure should be used instead of File-Edit-View. To make the selection quicker, the most frequently used commands could be loc ated as the first (or last) itemsin a menu pane. Step 2: Group menu items Use standard menu struc tures, including separators, when appropriate. Group menu items so that ones wi th similar functionality, nature or having the same object are grouped close to each other. After this, emphasise the grouping by using sep arators. The 'Life cycle' method can be us ed when appropriate, e.g., by first creating an object, then adding something to it, and finally giving it a finishing touch. Avoid having many 1-item groups or gro ups of 5 or more items in one menu. 1-item and 5-item groups are a good solution if their functionality is clearly differen t from other items in the Menu. Step 3: Use sep arators When there are only 1 or 2 menu it ems, do not use sep arators. When there are 3 men u items, use no mor e than 1 separator o r do not use sepa rators at all. Max. 3 separators per men u pane (it is recommend ed that a menu pane be r estricted to a maximum of 6 items). Separate mutually exclusive menu items in to a single group. Also separate commands from settings, option buttons from tick boxes, and so on. Step 4: Use ellipses When a menu i tem requires additional defini tions or where it opens a separate dialog, the m enu item in ques tion is marked with a character ellipses (â¦). Below is an example with the command 'Ne w' : New CTRL N (wi thout ellipses if the new documen t is created right away) New... CTRL N (wi th ellipses when additional inform ation has to be inserted b efore the new document is created, for example, template selec tion, size, color palette, etc.) 6.2 Standard m enu items The standard menu structure illustr ated below can be applied to most of the applications. Using a standard menu structure h elps the user to learn t he application menu faster and to increase the speed of his of her use of th e Menu.
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 setup⦠Sh Ctrl U ---------- ------ Rename Delete Ctrl D More > Properties⦠---------- ------ Add to Desk Edit Undo Ctrl Z ---------- ----- Cut Ctrl X Copy Ctrl C Paste Ctrl V ---------- ----- Delete/Clear Select all Ctrl A Find⦠Ctrl F ---------- ------ Objec t > Edit... Sh C trl Z Format... Sh Ctrl J View <Arrow Manipulated Pointer> Ctrl Q ---------- ------ ----- View 1 View 2 ---------- ------ ----- Show > Grid
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> ---------- ------ --------- - <alignment specific> <alignment specific> Tools <application settings...> <application preferences ...> ---------- ------ --------- ------------ <appl. specific tools> <about_this_3 rd _party_produc t> ---------- ------ --------- ------------- Log Sh Ctrl L Receive via infr ared Table 5: Sta nda r d Menu Ite ms
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 which require special l ayouts needs to be dealt wi th case by case. 7.1 List view Figure 10: List view layo uts A normal list view has a title with a 3-pixel margin and an application area with 20-pix el margins. A list view usually has a selection list component and, optionally, a search box. 7.2 Snaking list view (Application Groups ) A snaking list view is a list view with two columns, and is used mainly in Applic ation Group views e.g. in Control panel which has lots of smaller âÂÂâÂÂsub -applications.âÂÂâÂÂ
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 views from each other. Figure 13: Window layo uts
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 be d esigned so th at the hier archy of dialogs does not exceed thr ee steps, i.e. there are, at mos t, three overlapping dialogs at a time. Otherwise, navigation might become impossible to deal with. Graphically, a dialog consists of the dialog frame, a shadow behind the frame, a title, a list or a table, and other generic controls. Dialogs are centred in rel ation to the application area beneath, and the subsequent dialogs are cen tred in relation to the dialogs beneath them again. All dialogs beneath the uppermost dialog are dimm ed. The pixel dimensions of the dialog are specified in chapter 0. Figure 14: A dialog on top of a noth er dialog 8.1 Guidelines for dial ogs 8.1.1 Number of items in se tting dialogs A dialog fits five lines of t ext or else a control height of a maximum of 134 pix els. Do not overcrowd the dialogs; avoid dialogs that require scrolling. 8.1.2 Avoid additional commands Try to avoid commands in the CBA more complicated than OK, Close, Cancel, etc. In cases when a command in the CBA opens a separate dialog, the use e.g. of a Multipage Dialog, for ex ample, can often yield a better res ult. 8.1.3 Make the title inform ative The title of a dialog should provide the name o f the command that activated that specific dialog. However, sometimes it is better to have longer dialog titles as they give more information to the user. The maximum text string width for a dialog title is approximately 36 characters. 8.1.4 Informative strings (annotati o n tex t) When text s trings are for informativ e purposes only, i.e. they canno t be edited, th e text strings are shown in italics. Additio nal text may help the user to underst and techni cal t erms bett er. There i s a s eparator b etween the an notation text and editable (selectabl e) list.
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 dialog: ⢠It would be unclear whether the changes would r emain if the dialog were cle ared or âÂÂâÂÂcleared from the screenâÂÂâ instead of confirming the di alog. ⢠It does not pass the âÂÂâÂÂcup-of-teaâÂÂâ test, i.e. you mak e some changes, leave th e dialog up, come back (after making some tea) and clear th e dialog, and you may be surprised that the scr een reverts to a differen t setup (the original). In this case, you can only see those changes which af fect the part of the scre en that is visible. Therefore, it is not really useful. ⢠It is inconsistent with the behaviour of any other dialogs i n the system. 8.1.6 Validation in dialogs â take th e user to the line h e or she needs to set If the user closes the dialog and some settings are not validated, inform the us er about the error (e.g . via Inform ation Banner) an d move the cursor to th e line th at the user must reset. 8.2 Guidelines for M ultipage Dial ogs A Multipage Dialog consists of a Dialog frame, title, page frame, âÂÂâÂÂTabs,âÂÂâ page labels and page content (= list of controls). The frame of the whole dialog is a normal Dialog fr ame. There can be five tabs at most. The tab size depends on the length of the label text strings. If there ar e five tabs and th e text strings are long to the exte nt that they exceed the width of th e possible page label area, the tabs shrink. The ellipses appear when the word is cut. With five tabs, the maximum tab label text string width is 104 pixels, i.e . ca. 11 characters. With two tabs , the m aximum tab label text s tring width is 248 pix els, i.e. ca. 2 7 charac ters.
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 cannot be includ ed in any other p age, use the ter m âÂÂâÂÂOthe râÂÂâ as th e title of the pag e. 8.2.2 Display the most important page first With Multipage Dialogs, display the most important p age first. This page is opened first when a dialog is opened. 8.2.3 Multipage Dialogs can make your application much e asier to use Crowding one screen/dialog is usually counter-productive â the more items there are, the more the user gets confused. Even just one se tting that they do not understand may discourage them from using the dialog. If a dialog contains a lot of information, try to use a Multipage Dialog, and move less important, less commonly used settings off the first p age. As with everything else, a dialog should focus on the everyday things the user wants to do, and should express things in terms the user unders tands.
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 naming 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 - 'Browse' opens a Folder Browse Di alog for changing a folder - 'Change Format' provides a list of different formats - Cancel dismisses the dialog and no saving is done 9.2 Open Dialog Figure 18: Open Dialog Usage Attributes - opening a document - usually activated by making a selection in the CBA or Menu - only files that are supported are shown by default - 'OK' sel ects the d ocument to b e opened - 'Browse' opens a Folder Browse Di alog for changing a folder - 'Show all files' also shows the files in the folder that are no t supported
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 bje ct D ialo 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 Figure 20: Format Object Dialog Usage Attributes - used for changing the attribut es of an embedded object - the appearance, scaling, cropping and size can be changed
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' makes a sel ection - 'New folder' crea tes a n ew folder (optional) - 'Collapse'/'Expand' modifies the folder tree shown in the dialog - 'Cancel' dismisses the dialog and no folder is selected. 9.6 Calendar Browse Dialog Figure 22: Calendar Browse Dialog Usage Attributes - used for browsing and selecting a date - The title shows the current month - 'Select' acc epts the dat e - 'Next mon th' and 'Previo us Month' change the month - 'Cancel' dismisses the dialog and no selection is made
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 standard controls bitmaps 9.8 Spell Ch ecking Dia log Figure 24: Spell Checki ng Dialog Usage Attributes - used for checking the spelling in the editors - the misunderstood word in sho wn in the dial og titl e and th e word is editable at once - 'Replace' changes the misunderstood word with the one s elected - 'Skip' jumps over the misunders tood word - 'Add' includes the misunderstood word in the dictionary - 'Stop' in terrupts the sp ellcheck ing procedure
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' activates the Replacing function - 'Options' includes the attributes 'Case sensitive' and 'M atch whole word' 9.10 Find and Replace Dialog Figure 26: Replace Dialog Usage Attributes - used for se arching and repl acing a s tring in the document - 'Find' starts the finding procedure, 'Find next' continues the searching procedure - 'Replace' replac es one word wi th another - 'Options' includes the attributes 'Case sensitive', 'M atch whole word' and 'Replace all' - 'Close' closes the dialog and the changes are acc ep ted
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 , italics and underlining - text colo ur - strikethrough - normal, superscript or subscript 9.12 Character Map Figure 28: Character Map Usage Attributes - used for inserting special characters th at are not included in the keybo ard - provides 3 pages of special characters, a page of mathematical symbols and a page of miscellaneous symbols
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 number - number of pages - current time - current date 9.14 Bullets Dialog Figure 30: Bullets Dialog Usage Attributes - used for inserting and defining bullets
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 the lef t indent, right indent an d the first line 9.17 Borders Dialog
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 tex t 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 Figure 35: Print Dialog
35 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. Usage Attributes - used for printing documents - also prov ides means for ch anging t he printing se ttings - 'Print' will start the printing procedure - 'Preview' opens the docum ent in a preview mode - 'Options' opens a dialog where the options can be changed - 'Close' goes back to the previous application and saves the changes 9.20 Print Preview Figure 36: Print Previ ew Usage Attributes - used for previewing the document b efore printing - 'Print' start the printing proc edure - 'Page setup' opens a Page Se tup Dialog - âÂÂCloseâ re turns the user to the previous view/dialog 9.21 Print Options Dialo g Figure 37: Print Options Dialog Usage Attributes - used for defining th e printing options - number of copies, connection (serial or infrared) and printer type c an be
36 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. selected - 'Page setup' opens a Page Se tup Dialog - 'Settings' 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 foote rs - page numbering 9.23 Set Password Dialog Figure 39: Set Password Dialog Usage Attributes - used for defining a password - 2 editors for entering the passwo rd - asterisks used as feedback
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 are located in the cen tre of the screen, if not specified otherwise. - Notes have a drop shadow, and in mos t cases the background dims when the note appears. - Frame and size dim ensions are the same for Notes as for Di alogs. - Notes only fit five lines of text, and do not scroll in mos t cases. Keep messages shor t and to the point: - The messages are only on the scr een for a short time, so the user will not be able to read and unders tand a message that is very long . - Remove the predicate (verb âÂÂto beâ ) unless it helps to remove ambiguity: âÂÂâÂÂEntry copied.âÂÂâ Do not use 'Busy ' when you could be more specific. For example, while connecting to the server , use 'Connecting to the server <server_n ame> â¦' . 10.1 Information Note Figure 42: An Information Note Usage Attributes - informs the user of e rrors, for example - Also gives positive feedback - the user c an only accept th e note by pressing OK (Butto n1) - located in th e centre of th e screen - title and 5 lines of text - note icon in the top left-hand corner - background dims when note appe ars 10.2 Confirmation Note
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 - requests c onfirmatio n from th e user - usually contains 2 comma nds (e.g. OK / Cancel) - more than o ne alternati ve can be presented in a single note: Button1 always contains the command for acceptance and Button4 contains the cancelling option. Optional commands reside in Button2 and Button3 - located in th e centre of th e screen - note icon, title and 5 lines of text - note icon in the top left-hand corner - background dims when note appe ars 10.3 Flashing not e Figure 44: A Flashing Note Usage Attributes - shows less important information on the screen - requires no feedb ack from the user - located in th e centre of th e screen - title and 5 lines of text - note icon in the top left-hand corner
40 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. - appears on the screen and disappears automati cally after time-o ut - allows for other action s to tak e place - background and command buttons dims when note appears 10.4 Cancel Note Figure 45: A Cancel Note Usage Attributes - shows long-lasting opera tions that the user can cancel whil e the operation is in action (for example, file oper ations, data transfer) - the animation ( either default or dedicated ) tel ls the us er that the system is not halted. The animation might also entertain the user - located in th e centre of th e screen - 4 lines of text - animation locate d in the bottom right- hand corner - background dims when note appe ars 10.5 Progress Bar Progress bar can be used eith er in a dialog as a cancel note or in a narrow bar in the bottom righ t-handcorner of the Application Area. When it appears in a dialog, the backgrou nd dims. When the narrow progr ess bar is used, the b ackground remains âÂÂâÂÂactiveâÂÂâ and can be view ed and scrolled.
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 that time has elapsed wh en the total ti me of an oper ation c an be estimated - the progression is indicated by numbers or percentage, and a dynamic bar - located in th e centre of th e screen and dims the b ackground OR in the bo ttom right-hand corner of the screen - the text resides in f ront of the progress bar - drop shadow - background not dimmed 10.6 Progress Ball
42 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. Figure 48: A Progress Ball Usage Attributes - used when th e total time of 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: An Information Banner Usage Attributes - informs the user of ev ents of minor importance or of frequent occurr ence (for example, clipboard operations or saving) - this control can also be used to show supplementary information on the active object - this cont rol appe ars and autom atically disappears from the t op right-hand corner of the displ ay - located in the top right-hand corner - background does not dim
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 can be achieved wi th good contrast, adequate empty space (loose layout) and finished gr aphical elements. Consist ency is achieved by using common controls, common dialogs, syst em palettes and sys tem fonts. In the interest of consistency, use re ady-made components where possible. 11.1 Frames 11.1.1 Application frame Between th e Application Area and the Comm and Button Area , there is a vertical fr ame that s eparates the command button texts from the application texts. This frame is automatically created in the application. Note that NO component or control is allowed to ov erlap the Application frame. Figure 50: An application frame 11.1.2 Dialog fr ame A dialog frame is used in differen t kinds of note and dialog. The dialog frame size is dynamic, i.e. only occupies the space the components need . However, maximum sizes are defined for dialogs to p revent their overlapping with the Indicator Area and Command Button Area. The component size inside dialogs must be restricted to prevent th e dialog frame from becoming too wide. The size is not limited automatically - it must be res tricted manually. In views with a Narrow Indicator Are a, the maximum di alog width is 402 pi xels and the m aximum height 175 pi xels. In vie ws with a Wide Indicator Area, the maximum width is 338 pixels and the maximum heigh t is 175 pixels.
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 active window can be emphasised by the title b ar, which only resides in the active frame (Figur e 56). The title of the inactive window is black and has a title lin e underneath. The selection bar is only visible in the active window. In some c ases, the selection of the inactive window ne eds to be indicated; then the selection bar is a simple frame with a whi te background. This is e.g . when one list item is selected on the left window and its content is presented in righ t window and the right window is activated and the selection bar resides on the right windo w. The width of the left window d epends on the view which is currently ac tive. It occupies a maximum of half of the Application Area, but, preferably, it should b e narrower (a minimum of 1/3 of the Application Area). The wid th of the details window (i.e. the right-handwindow) depends on the CBA. The margins are 4 pixels to the Application Area borders. The space betw een the windows is 7 pixels .
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. 11.2 Margins The most important rule in reg ard to spacing and margins is to keep every element in the layou t separate, i.e. icons, texts and components should not overlap unless otherwis e defined. The margin in the Application Area must be defined so that the ti tle text and list area start, visually sp eaking, at the same vertical line on th e left-hand side. The size of the margins depends on the view and on the layou t. The margins are measured from the Application Area frame or Indicator Area fram e (or dialog frame) to the text, bitmap or another control in the Application Area. In the normal list views and dialogs, the margin is 20 pixels wide (see chapter 7. 1) . The top margin is measured f rom the first text line or topmost control to the titl e bar. It is at least 2 pixels wide. Also, the bottom margin is a minimum of 2 pixels. Text or a bitmap should n ever touch the display edges. Also top and bottom margins should be somehow equal. In editors, the m argin is 10 pixels wide (see chap ter 7.3). In windows and tables, the m argin between the table border frame and the tex t or bitmap is at least 4 pixels wide at the sides (see chapter 7. 4). The space betwe en icon and text should be 4 pi xels.
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 e this system fon t in the UI because it forms a very strong element of the visu al style. The system font has sever al sizes and styles to distinguish be tween different kinds of information, e .g. labels and titles. Text is usu ally black in order to make it legible. Dimming is used in cas es where a text item cannot be selected. There are three diffe rent font sizes for zooming . Zooming is not autom atic; an application needs to define the zoom ratio and fonts individually. Logical nam e Height Style Purpose an d ex a mples o f use SystemfontTerm8norm al 8 pix Normal Special font for Terminal and Telnet views SystemfontTerm15zoomed 15 pix Zoomed Special font for Terminal and Telnet views, zoomed Systemfont10bold 10 pix Normal Small font for tables or small textu al indications Systemfont16bold 16 pix Bold Texts in Indicator Area mode slots ; labels in tight tables Systemfont 18normal 18 pix Normal Bodytext in tables Systemfont 18bold 18 pix Bold Text/titles in ta bles, application name in indicator field Systemfont 20light 20 pix Light Company na me, Date and time (size, type etc.) in document lists (zoom step 1) Systemfont20normal 20 pix N ormal Text body (in zoom step 1), Menu texts, Dialogs Systemfont20italic 20 pix Italic Text body in notes, Informative text in t itle lines Systemfont20bold 20 pix Bold Labels, New (unread) messages in messaging (in zoom step 1)
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 na me, Date and time, size, type, etc. in lists Menu shortcuts (in z oom step 2) Systemfont 24normal 24 pix Normal Text body (in zoom step 2) Systemfont24bold 24 pix Bold Labels, New (unre ad) contacts i n messages (in zoom step 2), Titles Systemfont29light 29 pix Light Company na me, Date and time, size, type, etc. in lists (in zoom step 3) Systemfont29normal 29 pix Normal Text body (in zoom step 3) Systemfont29bold 29 pix Bold Labels, New (unre ad) contacts i n messages (in zoom step 3) Systemfont16digital 16 pix normal Digital font type for clock application (small clock) Systemfont24digital 24 pix N ormal Digital font type for clock application (large clock) Table 6: System font siz es and styles Leading is important as it keeps text loose, thu s improving readability. In Latin fonts th ere needs to be at least 1 pixel between lines (pre ferably two) so that the l etters do not t ouch each o ther. Lines in which the bottom half of the characters is missing should not appear in a view, except in editors that cannot be controlled. Alignment in the lists is to the l eft. Date and time and size in the colum ns are aligned to the right. 11.4 Controls 11.4.1 Title bar Every view should have a title bar . The title bar is the s ame colour in every application in the UI and withi n any one system palette. There ar e three differen t kinds of ti tle bar according to the view l ayout type (se e chapter 6) . The title font is Systemfont24pixbold, and the colour is white with a black shadow. The title text should start on the same vertical line as the application texts (the margins are the same). In list views, the height of th e title bar is 30 pix els and the top margin is always 3 pixels. The length of the ti tle bar depends on the Application Area width and there is always a 3-pixel m argin on the left and right-hand sides. The title bar âÂÂâÂÂfill colourâÂÂâ is a gradient and has no frame. The titl e text margin is 20 pixels. Figure 54: Normal list view title bar
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: Editor title bar In the windows, the title bar only appears in the active window. The height is 30 pi xels, and the margins to the window frame on the top, l eft and right are 1 pixel each. In the in active window the title bar âÂÂâÂÂturnsâÂÂâ to the ti tle line. Its stroke wid th is 2 pixels. T he length o f th e title lin e is th e same leng th as the ti tle bar would be in the same window. The font in the inactive windo w is Systemfont24bold and the colour is pl ain black. The title text m argin is 8 pixels. Figure 56: Title bars in window layout in an active frame Figure 57: Title bar in window layout in an inactive frame In the dialogs, the title b ar height is 30 pixels and the top-, left- and right-hand margins are 1 pixel each to th e frame, as in window layout only the title text margin is 20 pix els. Figure 58: Title bar in dialog
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 and the info te xt. The text is aligned to the right along the right-hand margin. Figure 60: An example of informative text on the title 11.4.2 Scroll bars Scroll bars are visible only when there are items to b e scrolled, i.e. when th ere are more i tems than c an fit on the screen at any one time. Th e height of the scroll bar depends o n the view . The scroll bar doe s not exceed the margins in the list views, but in the editors and in windows the scroll b ar resides close to the frame without any margins.
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 between the scroll b ar and the application frame or the edge of the view beneath it.
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 search field depends on the view. The func tionality may differ a little according to the application, but the visual outlook is the s ame in all applications. The icon on the right-hand side changes, depending on th e context and function. Note that the width of the search box in dialogs has to be re stricted according to dialog size! Figure 66: A Search Box
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 middle. Ensure that the selected item does not hit the selection frame borders . Figure 67: Selection bar and grid c ursor 11.4.5 Java an d Web Controls As the UI is manipulated by the keyboard, the con trols should not look âÂÂâÂÂclickable.âÂÂâ Buttons, check marks and option balls should only be used in Java and Web applications where it is possible to use a pointing device (Arrow Manipulated Pointer). Figure 68: A Web page 11.5 Colours The display colour is 12 bits and the to tal colour capability is 4096 tones. The communicator UI uses a syst em palette tha t defines the colour for every control a nd component in the UI. In th e UI, there are four optional system palettes. If new components are created, the colours should conform to the system pal ette. Keep it simple. In addition to black, grey and white, one main colour in the system is enough . Usually, the dominant colour is presented in th e Title b ar.
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 information. 11.6 Icons Most common icons can be divided into Application icons, List icons and Note icons. There are also several indications of different sizes and small icons in the UI, which are defined by th e application. Small list icons should be kept very simple and two dimensional. Application icons and note icons can be three dimensional and more detailed. The metaphors are usually taken from everyd ay situations, mostly from the office environment. The me taphors should be globally relevant, not offensive or ambiguous (see also chap ter 13). In all icons, the light comes from the upper left-hand corner. The shadows are on the bottom right and behind the object. The viewing angle of the objects in icons is from the fron t top left or right (and in small list icons, directly from the front ). 11.6.1 Icon palette Icons have their own 35-colour palet te, which should be us ed when a new icon is created. The colours are pure and bright to bring âÂÂâÂÂspice âÂÂâ and fun to the UI. Colour RGB 1 White 240,240,240 2 Grey1 48,48,48 3 Grey2 80,80,80 4 Grey3 96,96,96 5 Grey4 128,128,128 6 Grey5 160,160,160 7 Grey6 176,176,176 8 Grey7 192,192,192 9 Grey8 208,208,208 10 Grey9 224,224,224 11 Black 0,0,0 12 Light yellow 240,240,96 13 Yellow 240,240,0 14 Light orange 240,224,144 15 Orange 240,160 ,0 16 Beige 224,176,112 17 Brown 192,112,32 18 Reddish brown 160,48,0 19 Dark brown 112,48,16 20 Red 240,0,0 21 Pink 240,48,112 22 Light pink 240,176,192 23 Smoke (greyish blue) 96,128,176 24 Light blue 192,224 ,240
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 large 64 x 50 pix el icon that resides in the Wide Indicator Area (or in the Application Group view). Also, every application needs a small list icon, which is used in Application Group view and also as a file form at icon. 11.6.3 List icons List icons are 25 x 20 pixels and they are usually prese nted in the application lists beside the text. 11.6.4 Note icons Note icons are 50 x 50 pixels. The note icons have a background which con sists of a 30 x 30 pix el gradient colour block. This colour highlights which note type is in question. Roughly speaking, notes can be divided into serious error notes, information and confirmation notes, and progress notes. The colour coding is used to diff erentiate be tween notes: a red gradient is used for error no tes when d ata are about to be lost or corrupted; a yellow gradient is us ed when user attention is need ed, and a blue g radient is used when the system provides the user with information on an ongoing process, that is, information of a useful or positive n ature.
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 fo r various UI events, if the developer does not want to create UI sounds on his/her own. - Audio feedback is a useful aid w hen the user is busy or vis ually restricted. Sometimes th e use of sounds is also an effective way to point out an important or hazardous even t. - Allow the user to modify the sound se ttings; some users h ave different needs for loud, discrete and silent sound options. Some users might prefer a subset of sounds or might want to turn some sounds off. - The user must b e abl e interrupt al ert tones. - Do not exaggerate the use of sounds; Designing a high-quality sound set is an art form but i t is rather easy to create 'audio pollution.'
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 British English: ⢠âÂÂCENTREâ not âÂÂcent erâ â¢ âÂÂCANCELLINGâ not âÂÂca ncelingâ â¢ âÂÂCOLOURâ no t âÂÂcolorâ â¢ âÂÂSYNCHRONISEâ not âÂÂsynchronizeâ â¦but remember that some technical terms are based on Americ an English spelling: ⢠âÂÂPROGRAMâ not âÂÂprogramm eâ â¢ âÂÂDIALOGâ not âÂÂdialogueâ Keep your writing simple: ⢠Do not use jargon ⢠Avoid difficult t erms or explanations that the user would no t understand ⢠Keep your sentences short ⢠Use simple sentence structure Keep your writing explicit: ⢠Do not keep important things from the user ⢠Try to figure out what the user needs to know to be able to perform the r equired task Be consisten t in the terms th at you us e. Avoid noun-disease: ⢠Say âÂÂâÂÂLock the keypadâÂÂâ instead of âÂÂâÂÂActivate the keypad lockâÂÂâ 13.2 The commu nicator Officially the communica tor is The Nokia 9210 Communicator (N .B. capital letters). When ref erring to the communicator in gen eral, you c an use either âÂÂâÂÂcommunicatorâ â or âÂÂâÂÂdevice ,âÂÂâ but n ever âÂÂâÂÂtelephone âÂÂâÂÂ. 13.3 Application na mes Writing style: if an application name consists of more than two words, only the first is written with a c apital letter. Exceptions: Backup/Restore, Install/Remove software (applications with two distinctive functions) and World Wide Web. Note, also, that Internet is AL WAYS written with a capital letter in English. 13.4 Punctuatio n Do not use exclamation marks at the end of error messages and avoid using them in general. They can s eem rude and can cause unneces sary ala rm.
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 S IM contacts cop iedâÂÂâ Use double quotes whe re the text is user-gen erated, e.g. for the name of a user's file : ⢠âÂÂâÂÂAbout to dele te Contac t card fo r âÂÂâÂÂN.N.â â Are you sur e?âÂÂâ Use three dots in mess ages to denote an ongoing process: ⢠âÂÂCallingâ¦,â âÂÂReceiving...,â âÂÂPlaying...,â âÂÂRe ady to receiveâ¦, â âÂÂScanning for printer⦠,â âÂÂConversion in progressâ¦âÂÂ. Avoid using other than standard abbreviations. Note, also, that even if in English you have a standard abbreviation for a word, in some other languages you may have to use the whole word (âÂÂBccâ = âÂÂPiilokopioâ in Finnish). Some standard abbreviations used in English: ⢠hour h ⢠minute min ⢠second s ⢠binary digit bit ⢠bits per second bit/s ⢠kilobit per second kbit/s ⢠byte B ⢠kilobyte kB ⢠megabyt e MB ⢠kilohertz kHz ⢠megahertz MHz ⢠minimum min. ⢠maximum max. ⢠number no. Do not contract negations: ⢠âÂÂIS NOTâ not âÂÂisnâÂÂtâ â¢ âÂÂCANNOTâ not âÂÂcan'tâ â¢ âÂÂDO NOTâ not âÂÂdon'tâ Pay attention to hyph ens: ⢠âÂÂBuilt-inâ ( dictionary) ⢠âÂÂRead-onlyâ â¢ âÂÂLi-ion bat teryâ â¢ âÂÂE-ma ilâ preferred, âÂÂem ailâÂÂ/âÂÂmailâ acceptable within text ⢠âÂÂ3-second dela yâ â¢ âÂÂ14400 bit/sâ (not âÂÂ1440 0-bit/sâÂÂ) ⢠âÂÂSIM cardâ â¢ âÂÂPIN codeâ See suggested terms in chapter 18.2.
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, or path names that presum e a particular language. Code should also con tain support for locale-specific hardware. Pay careful at tention to the differences betwe en various languag es and cultures: ⢠Calendar differences ⢠Not everybody uses the Gregorian calendar ⢠There are variations wi thin the same calendar sys tems (e.g. the day the week b egins) ⢠Date formats ⢠Time formats ⢠Address formats ⢠Phone number formats ⢠Numbers ⢠Thousands separator ⢠Decimal separator ⢠Currency ⢠Weight s and measures ⢠Conventions in use of uppercase and lowercase letters ⢠Compar ing a nd sorting ⢠Keyboa rds and other hardware ⢠Double- and multi-byt e enabling ⢠List separators 14.2 Graphics and audio Do not hard-code graphics or audio, but aim for a global or, at least, an international design. Check that your metaphors work in all the required languages. Check that your icons and sounds are cultur ally acceptable. Note that different cul tures have different taboos; for ex ample human body parts m ay have unwelcome connotations in many cultures. Avoid including text in graphics (it might have to be localised). Notice differences bet ween tones: ⢠The concept of scale differs across cultur es. ⢠Some tones can give offence to the us er. ⢠Not a ll tones are suitable for ev ery environment. A loud volume lev el in Tuupovaara may not seem so loud in New York City. 14.3 Provide room for text expansio n Do not optimise any user in terface elemen ts for the English text lengths. English is a âÂÂshortâ language.
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öpostiviestinäâÂÂâ in Finnish. Thus, allow at least 30 %for the horizo ntal expansion of texts . If your softwar e is going to be localised in to languages that use ideogram s or glyphs (Chinese, Jap anese, Arabic) , allow 10-20% for the vertical expansion of texts. 14.3.1 Do not d eclare b uffers of an e xact s tring Do not declare buffers of the exact size o f a word or sentence, as th ey will overflow when th e text is localised. 14.4 Avoid clever use of strings Avoid concatenating text strings. You might save space and it might work in English, but that does not mean that it will work in other languages. English grammar and syntax are uniqueas are the gr ammar and syntax of every other language. If you can, tes t your English cons truction with oth er languages. T his is usually enough to show th e faults in th e clever code. 14.4.1 Do not reuse strings Every single display text should have a string of its o wn in the resourc e files. For example, in many l anguages adjectives and nouns are declined according to gender and number. A single string displayed in different contexts will be correct i n gender and number in some cas es but incorrect in others . 14.4.2 Watch ou t for com posi te mes sages The word order may have to b e different for some languages, so use order-independent formatting functions to code your composite messages. Also, the gende r and number of the variable af fect the gender and number of the other words in the same con text. 14.4.3 Watch ou t for dyn amic tex t inse rtion A program that ins erts user-enter ed text into a predefined s tring may produce syntactic al errors in any languag e, including English. If you use dyn amic text insertion, test your end result carefully. 14.4.4 Do not use clev er plurals The rules for constr ucting plural nouns vary from languag e to langua ge, and can vary even within a single lang uage. For example, adding an âÂÂâÂÂsâÂÂâ at run time is not a universal solu tion for English. Another b ad option is to use âÂÂâÂÂ(s)âÂÂâ as a fixed suffix, as in âÂÂâÂÂYou have 1 n ew message(s),âÂÂâ and to assume that something similar can be constructed in every language. Your best strategy is to spell out e ach possible pluralisation in your resources, rather than use a fixed suffix or constructing plur als at runtime. Giving all the options for si ngular and plur al may no t be enough, since som e languages (Arabic, Slovene, Saami) have a dual case. 14.5 Do not assume the code set A code s et is an encod ed set o f char acters in whi ch each c harac ter is a ssociat ed wit h a nume ric valu e. Note that the same character set can be encoded in different code sets. In other words, two code sets c an define the same characters using different codes for each charac ter. Do not limit character parsing to Latin script. In particular, watch out for cas e mapping and string comparison. Operations that check wheth er a character is between A and Z might work for English, but they exclud e important characters in just about ev ery other language in the world. Use generic system functions for cases like this.
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 charac ter, some characters ar e decomposed into differen t parts, and sometimes a character can have different representations depending on th e context. 14.6 Use international syst em functions Get to know the operating system and programming langu age used. Take advantage of the generic sys tem support for international conventions (culturally correc t sorting, searching, character typing, string mapping, currency and number formats, date and time s trings, and calendar formats) when ever possible and save yourself a lot of trouble. Writing efficient code yourself is no use if you h ave to change it for each and every localised version. 14.7 Use unique log ical names Use unique logical nam es, also ref erred to as string identifiers, to identify your stri ngs, even if the system does not force you to do that. Also, unique logical nam es must be used with translation data bases and other sophisticated localisation t ools. Use a clear naming convention to identify the v arious string types that is, in order to be able to distinguish b etween texts that correspond to dialog, menus, buttons and mess ages. Agree with localisation about localisation file formats beforehand. 14.8 Provide instructions for locali sation Clarify the context of strings to be localised by providing commen ts in the resource files or separate text fil es. For example: ⢠Does the string appear in a dialog, menu, button or a message? ⢠When does this note appear? ⢠Does the string âÂÂâÂÂMailâÂÂâ mean the v erb âÂÂâÂÂto mailâÂÂâ or th e noun âÂÂâÂÂa m ailâÂÂâÂÂ? ⢠What are the parameters o f this message and where c an they be found? ⢠What other texts and graphics are s hown simultan eously with this stri ng? ⢠Are there space limitations on this string? Hide or identify strings that should no t be localised. Put these strings in a separate resource or use a standard way to name identifiers. 14.9 Check English Use correct language and consis tent terminology when composing messages and o ther translatable s trings. Have a linguist or a professional writer edit you r texts before translation.
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 action ⢠there is a process going on ⢠the process has ended It is very important that feedback be provided for process es that last for a period that the user m ay find annoyingly long. The feedback mus t not block other us er activity . 15.2 Response time - For the user to f eel as if the program's response is instantaneous, th e UI ought to react wi thin 0.1s. In thes e cases, a simple graphical feedback, wi th or without sound, is often adequ ate. - The maximum length of an interruption, on averag e, that the user c an tolerate is approximat ely 1 second. If you exceed this, you may break the us erâÂÂs concentr ation and poten tially frustr ate him or her . Therefore, things like redraws, or drawing of dialogs that a user will encounter mid-flow, ought to happen well within this limit. - For these cas es, an Inform ation Banner or Flashing Note c an be used. - 10 seconds is the utmost limit that the user's attention can focus on a dialog. Any longer than this and users will want to perform other ta sks while the process is going on. The refore: - make sure the progress indicator gives the user an indication of how long the task will take - wherever possible, and definitely above this limit, try to make the progress indicator non-modal. Use progress messages in the background like in th e Web browser. Note that the feedback on time-to-completion becomes even more important if the response time is highly variable, since users will not know what to expect. Users should be allowed to cancel processes that take long periods of time. - Suitable notes for these purposes are: - a Cancel Note with animation or Progress Bar - Progress Ball There are two kinds of response time: - System response: command activation can be emph asised by graphical and/or audio feedb ack. Use Information Banners when the use of notes would b e too exces sive and annoying (s ee chapt er 9). - Delay caused by transmission: when the delay is c aused by the transmission, the UI must - provide a note about the delay - inform the user of t he reason for the delay - allow th e user to cancel th e oper ation - provide audio feedback on the progression - Display an animation (optional)
63 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. 16. FILE HANDLING 16.1 Saving - There is a global default folder th at can be changed in the Control P anel. Applications will refer to this global default folder. - Note the following : - When performing âÂÂsave as â for an unnamed docume nt, the global default folder is always used - When performing âÂÂsave as â for an already named docum ent, a current folder is proposed - If a file with the same name exists, the new file is ren amed with a sequ ential number in p arenthesis, e.g. <newfilename (n )>, whe re n={2,3,4,. ..} - Applications that save files should remember the folder that files are saved to, and suggest this folder as the default for the next saving ac tion. - Support flexibility: different people organise things in diff erent ways (sort by date, file type, project, customer, etc.). - Ask the user for the n ame once and only once. 16.2 File namin g EPOC file names are c ase-sensitive at a UI level, and retain the capital letters they were giv en when crea ted, but the filing system does not distinguish between upper and lower case. It is therefore not possible to have two files of the same name in t he same folder, even if th ey are in a diff erent ca se: for example, âÂÂDocumentâ and âÂÂDOC UMENT.â 16.3 Using file name extensio ns File extensions are not used e xcept where req uired to differentiate files of the same name. Do no t show file n ame extensions to the user whe n it is not necess ary! 16.4 Folders The user should be able to use the device without using the file m anager. File/folder creation and deletion across applications is possible within application menus or common dialogs. 16.5 Protect user data The users' data is important â they have invested significant time and effort to input the d ata, and trust you to respect thi s. Be very careful not to i nadver tently d elete any user d ata. The two approaches are outlined b elow. Only one of the two approaches should be used: - Undo: an âÂÂUndoâ option should be provided w herever deletions are routine, and providing a dialog would prove excessively irritating to the us er. For example, âÂÂundoâ is provided in text editors â w e would not wan t to ask for confirmation on deleting individual characters. - Confirmation: confirmation should be requested whe never the deletion is extreme and irreversible . The confirmation dialog should contain as much relevant infor mation as possible (and no unnecessary inform ation). Examples of confirmations: - Calendar delete entry - File deleting
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 expense to the user. - Make sure that the co nnectio n, etc. d oes not s tay ac tive aft er the us er has end ed 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 specific Enter Default command (Button1 underlined) Application specific Esc Application specific Application specific Up/Down Arrows key Applicat ion specific Application specific Views Right/Left Arrows key Applica tion specific Application specific Tab Opens a control (e.g. Choice list -> text lis t box) Open control (e.g. Choice list -> text list box) Enter (when control not opened, e.g . choice list) Opens a control (e.g. Choice list -> text lis t box) Closes the dialog (if possible, e.g. no editors) Enter (when control opened, e.g. text list box) Optional default command = Button1 underlined (e.g. OK) OK (makes selection) Esc Cancel (d ismis ses d ialog ) Cancel Up/Down Arrows key Changes the focus from o ne control to another Changes the focus from o ne control to another Dialogs Right/Left Arrows key Focused on the active control (control dependent) Focused on the active control (control dependent) 18.2 Recommended term s TERMS COMMENTS (unnamed) Name of a file, access p oint, etc . with no n ame, âÂÂUNNAMED â not âÂÂâÂÂno nameâÂÂâ <unnamed en try> Name of a cont act card with no thing writt en in the âÂÂN ameâ or âÂÂCompanyâ fields Activate You ca n activate a held voice call, synchronisation, infrared receiving and so on, contr. Hold, Disable Add âÂÂAddâ vs. âÂÂNewâÂÂ: âÂÂADDâ adds an already existing item (program) which you can select from a list; âÂÂNEWâ creates an item from sc ratch Alarm interval âÂÂSnoozeâ preferred B B = byte(s), kB = kilobytes, MB = megabytes Backup (noun) âÂÂâÂÂThe backup se t is not reli ableâÂÂâ Back up (verb) âÂÂâÂÂAbout to back up âÂÂâÂÂxxxâÂÂâÂÂâÂÂâ Battery Use: âÂÂâÂÂBattery is lowâÂÂâ / âÂÂâÂÂBattery is almost emptyâÂÂâ / âÂÂâÂÂBattery is fullâÂÂâÂÂ
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â totall y cancels the op eration that you have started and r eturns to the stat e that existed b efore you start ed; âÂÂInterrupt â interrupts, for example, a b ackup that you have started, but it will save the backup made so far Change âÂÂCHANGEâ no t âÂÂAl terâ Clear âÂÂCLEARâ not âÂÂEr aseâÂÂ; âÂÂClearâ vs. âÂÂDele teâ vs. âÂÂRemo veâÂÂ: âÂÂCL EARâ deletes, fo r examp le, one letter at a time or items from a list; âÂÂDEL ETEâ deletes a whole file/folder or an action for good; âÂÂREMOVEDâ items can be replaced somehow , for example, by reinstallation Contact card A file, a âÂÂcardâ in the Contacts application: contains name, addresses, phone numbers, etc. Contact group A group of contact cards which functions as a dis tribution list for sending SMS and Mai l Contacts datab ase A database containing con tact c ards in a Memory ca rd Continue âÂÂCONTINUEâ not âÂÂâÂÂGo on âÂÂâ Copy âÂÂCopyâ vs. âÂÂDuplicateâÂÂ: âÂÂDuplicat eâ makes a copy of an item, as is, to the s ame place as the original; âÂÂCopyâ copies an item in the same place (folder) but with a different name Default âÂÂDEFAULTâ not âÂÂPreferredâ or âÂÂStand ardâ Delete See âÂÂâÂÂClearâÂÂâ Details âÂÂDetailsâ vs. âÂÂOptionsâ vs. âÂÂSe ttingsâÂÂ: âÂÂDetailsâ (calendar en try details) are the settings of a fairly small feature; â Optionsâ (send options of an SMS) are the temporary options of one feature that chang e the settings for only one operation; âÂÂSettingsâ are the p ermanent options of a larger func tionality, for example SMS, Fax or Telephone Disconnect In data calls âÂÂHANG UPâÂÂ; in voice calls âÂÂEND CALLâÂÂ; in PC connectivity âÂÂDIS CONNECTâ Display (noun) âÂÂDisplayâ and âÂÂScreenâ b oth usab le; âÂÂScreen â preferred Display (verb) âÂÂDISPLAYâ not âÂÂS howâÂÂ; âÂÂDisplayâ vs. âÂÂViewâÂÂ: the device âÂÂdispl ays,â th e user âÂÂviews âÂÂ; use âÂÂViewâ as a bu tton text, but âÂÂâÂÂNot enough memory to display the selected imageâÂÂâ Duration âÂÂDurationâ vs. âÂÂL engthâÂÂ: â Durationâ in seconds/minu tes; âÂÂLengthâ in metres Edit âÂÂEDITâ not âÂÂModifyâ End call In data calls use âÂÂHANG UPâ ; in voice calls âÂÂEND CALLâÂÂ; in PC connectivity âÂÂDIS CONNECTâ Enter âÂÂENTERâ no t âÂÂWri teâÂÂ: âÂÂâÂÂEn ter fol der nameâ â Failed âÂÂFAILEDâ not âÂÂâÂÂNot succeededâÂÂâ Fetch WWW: te xt of th e butto n for fe tching a URL Find/Search âÂÂFIND,â not âÂÂSe archâ Forward/B ack WWW b rowser: âÂÂFOR WARDâ no t âÂÂNext,â âÂÂBAC Kâ not âÂÂPreviousâ Go WWW Hang up In data calls use âÂÂHANG UPâ ; in voice calls âÂÂEND CALLâÂÂ; in PC connectivity âÂÂDIS CONNECTâ Image âÂÂIMAGEâ not âÂÂPictureâ o r âÂÂPhoto,â of JPE G or UPF im ages
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 âÂÂCancelâ vs . âÂÂInterrupt âÂÂ: âÂÂCancel â total ly cancel s the op eration that you have started and r eturns to the stat e that existed b efore you start ed; âÂÂInterrupt â interrupts, for example, a b ackup that you have started, but it will save the backup made so far Length âÂÂDurationâ vs. âÂÂLengthâ : âÂÂDurationâ in seconds/minutes; âÂÂLengt hâ in metres Memory Use: âÂÂRunning out of memoryâ / âÂÂNo t enough memoryâ (no t âÂÂInsufficient memoryâÂÂ) / âÂÂOut of memoryâ (not âÂÂMemory fullâ ) Memory card âÂÂMEM ORY CARD,â not âÂÂMMC â or âÂÂDiskâ Next/Previous in WWW âÂÂForw ardâÂÂ/âÂÂBackâÂÂ; elsewhe re (documen ts, calendar ev ents) âÂÂNextâÂÂ/âÂÂPreviousâ On/Off âÂÂOnâÂÂ/âÂÂOffâ vs. âÂÂYesâÂÂ/âÂÂNoâ : use the v alues âÂÂOn âÂÂ/âÂÂOffâ when the setting is a noun phrase: âÂÂPhone key clickâ - âÂÂOnâÂÂ/âÂÂOffâÂÂ; use âÂÂYesâÂÂ/âÂÂNoâ when th e setting is a proper sentence: âÂÂSend long m essagesâ âÂÂYesâÂÂ/âÂÂNoâ Options See âÂÂDetailsâ Remove See âÂÂClearâ Rename âÂÂRENAMEâ not â Give a new nameâ Save âÂÂSAVEâ not âÂÂStoreâ Save as Send via IR âÂÂSEND VIA IRâ no t âÂÂSend by â or âÂÂTran sfer ov erâ Settings See âÂÂDetailsâ Start âÂÂST ARTâ not âÂÂBegin, â âÂÂInitiate, â âÂÂCommenceâ Time limit âÂÂTIME LIMITâ not âÂÂMaximum timeâ Try again âÂÂTRY AGAINâ not âÂÂRetryâ Undo âÂÂU NDOâ not âÂÂDiscardâ or âÂÂIgnoreâÂÂ; for example âÂÂUndo changesâ View âÂÂVIEWâ not âÂÂShowâÂÂ; â Displayâ vs. âÂÂViewâÂÂ: the device displays, the user views; âÂÂViewâ preferred 18.3 Shortcut List General Keys pressed Key Ctrl Chr Shift Function Description <x D e c r e a s e Contrast Decreases Contrast (setting in Control Panel) >x I n c r e a s e Contrast Increases Cont rast (set ting in Control Panel) A x X About Open About Dialog of 3 rd par ty applications E SC Cancel and dismiss Cancel and dismiss a Dialog, and dismiss an Information No te Green IR activ ation icon x IR act ivation Green IR activation icon resides i n button ':' (colon) in UK keybo ard Green magnifier glass (minus) icon x Zoom out Green magnifier glass (minus) icon resides in button '< ' (less than ) in UK
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 Opens an application specific help. The key combination may vary according to language versions File Dialogs and hierarchical trees Keys pressed Folder Details Function Left arrow No subfolders, has a p arent folder Jumps to the parent folder, no collapsing Left arrow No subfolders, no parent folder Not hing happens Right arrow No subfolders, no parent folder Not hing happens Right arrow Contains subfolders, collapsed Expands current folder Left arrow Contains subfolders, collapsed, has a parent folder Jumps to the parent folder, no collapsing Left arrow Contains sub folders, expa nded Collapses current folde r Contains subfolders, collapsed Expands current folder - Contains subfolders, expanded C ollapses current folder Tab C ontains subfolders, collapsed Expands current folder Tab C ontains subfolders, expanded Collapses current folder Applications views: Lists, Ed itors and V iewers Keys pressed Key Ctrl Chr Shift Function Description - x Decrease font Decreases Font size in Edi tor x Increase fon t Increases Fon t size in Editor A x Selects all Selects all items in a List/Editor/Viewer A x x Change alignment Changes paragraph alignmen t in this order: (1) Left (2) C entred (3) Ri ght(4) J ustifi ed (1) Left (2) Ce ntred Arrow D x Mark/Select Marks line in Editor (down) Arrow D X Page down Page Down in Editor/Viewer/ List Arrow D X x Mark a pag e down Mark a p age Down in Ed itor Arrow D x Mark/Select Marks item in Li st Arrow D x Move Moves cursor a p aragraph down Arrow D x x Mark paragraph down Marks a paragraph down Arrow D x X End of document Goes to the e nd in Editor/Viewer/ List Arrow D x X x Mark to end of document Marks to the end in Edi tor/Viewer/ List Arrow L x Mark Marks char in Editor (left) Arrow L X x Mark to the beginning of the line Marks to the beginning o f the line in Editor Arrow L x Move word left Moves a word left Arrow L x x Mark word l eft Marks a word to the left Arrow R x Mark Marks char in Editor (right)
69 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. Arrow R X E nd = 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 Mark/Select Ma rks item in List/Marks line in Editor (up) Arrow U X Pa ge ip Page Up in Editor/ Viewer/List Arrow U X x Mark page up Marks a Page Up in Ed itor List Arrow U x Move Moves a paragraph up Arrow U x x Mark paragraph up Marks a paragraph up Arrow U x X Top of document Goes to the beginning in Editor/Viewer/List Arrow U x X x Mark to top of document Mark to the beginning in Edi tor/Viewer/List Bx Bold Bold text (in Editor) B x x Insert bullet Backspace Delete Deletes items if command âÂÂDele teâ is available in Menu or CBA Backspace Delete Deletes the marked area/char in editors Backspace x Delete Deletes the ch ar to t he right of the cursor or marked ar ea/char in editors C x Copy Copies data to the Clipboard D x Indents dialog Opens Indents Di alog (in Editor) D x Delete Deletes item in Editor/Viewer/List E x Close Closes (no Close in Menu) E x x Zoom ra t io Enter X Page break I n edit ors Enter X Line break In editors Esc Go upper folder In some views, Esc goes one level up in the hierarchic al tree Esc Canc el a d ialog F x Find Find (menu) in editors/view ers F x x Font dialog In editors F x x Forward Forwards a mess ag e G x Go to Goto Dialog G x x Style gallery H x Repla ce O pens Replace Dialog H x x Bullets dialog Opens Bullets Dialog Ix Italics Italics text (in Editor) I x Sort by Changes the âÂÂsort byâ factor IX X M e r g e i n I x x Sort order Changes the sort order J x Find next Find Next (when needed ) J X X Format object Format Object Dialog K x Preferences View Pre ferences K X x General prefer ences View General Pr eferences L X Spell Check Spell Check Lx x L o g Mx M o v e M x x Move to group
70 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. N x New file Creates a new file N x x New folder Creates a new folder O x Open Open dialo g O X X Insert 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 opt ions dialog Q x Swit ch view Q X Arrow Manipulated Pointer Toggles Arrow Manipulated Pointer On/Off Q X X Password Set password R X Revert to saved R X Reply Replies to a message sender R X X Reply all Replies to all S x Save Saves the file S x x Save as Opens s ave di alog Space Bar x Mark word Marks a word in Editor (Selection B ar on a word) T X Full Screen Mode T X x Show t op toolbar Tab Jump right Jumps to window on the right (in a View) Tab x Jump left Jumps to window on th e left (in a View) U x Underline Underline text (in Editor) UX X P a g e s e t u p V x Past e Pastes data from the Clipboard V x x Print preview Print preview W X Wrap to screen W X X Word coun t X x Cut Cuts data to the Clipboard Y X Redo When possible Y x x Tab positions Tab dialog Z x U ndo Reverses last operation Z X X Edit object E dit object dialog
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 product and company names mention ed herein may be trademarks or tradenam es of their respec tive owners. Nokia operates a policy of continuous development. Nokia reserv es the right to mak e changes and improvements to any of the products described in this document without prior notice. Under no circumstances shall Nokia be responsible for any loss of data or income or any special, incidental, consequential or indirect d amages howso ever caused. The contents of this document are provided "as is". Except as required by applic able law, no warranties of any kind, either express or implied, including, bu t not limited to, the implied w arranties of merchantability and fitness for a particular purpose, are made in rel ation to the accuracy, reli ability or contents of this document. Nokia rese rves the right to revise this document or withdraw it at any time without prior notice.
2 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. TABLE OF CONT ENTS 1. Introduction ................................................................................................................. ................................................................... 5 1.1 Purpose of this documen t.................................................................................................... ............................................... 5 1.2 Interactiv e Elemen ts ........................................................................................................ .................................................... 5 1.3 Glossary .................................................................................................................... ............................................................... 5 2. General UI princip les ........................................................................................................ ............................................................ 6 3. Layout ....................................................................................................................... ........................................................................ 8 3.1 Indicator Are as: Wide and Narrow Indicato r Areas ............................................................................ ......................... 8 3.2 Application Are a ............................................................................................................ ..................................................... 10 3.2.1 Title .................................................................................................................................................................................... 10 3.3 Full Screen Mod e ............................................................................................................ .................................................... 10 Button pr essed ................................................................................................................. ............................................................ 11 Visible on t he screen.......................................................................................................... ......................................................... 11 3.4 Command B utton Are a ......................................................................................................... ............................................. 12 4. Interaction ..................................................................................................................................................................................... 13 Views.......................................................................................................................... ..................................................................... 13 Dialogs ............................................................................................................................................................................................ 13 4.1 Enter key ................................................................................................................... ............................................................ 13 4.2 Menu butto n ................................................................................................................. ....................................................... 13 4.3 Esc Key ..................................................................................................................... .............................................................. 13 4.4 Tab key ..................................................................................................................... .............................................................. 13 4.5 Arrow Manipul ated Po inter................................................................................................... ........................................... 14 5. Command B uttons .............................................................................................................. ........................................................ 15 6. Menu and Shortc uts ........................................................................................................... ........................................................ 16 6.1 Guidelines for d esigning the Menu ........................................................................................... ..................................... 17 6.2 Standard menu it ems ......................................................................................................... ............................................... 17 7. Common layouts ............................................................................................................... ........................................................... 20 7.1 List view ................................................................................................................... ............................................................. 20 7.2 Snaking list vi ew (Application Groups ) ...................................................................................... ................................... 20 7.3 Editor vie w ................................................................................................................. ........................................................... 21 7.4 Window view ................................................................................................................. ...................................................... 21 8. Guidelines fo r Dialogs ....................................................................................................... ......................................................... 23 8.1 Guidelines for d ialogs ...................................................................................................... .................................................. 23 8.1.1 Number of i tems in se tting di alogs ........................................................................................ ................................... 23 8.1.2 Avoid addi tional comm ands ................................................................................................. ....................................... 23 8.1.3 Make the title inform ative ................................................................................................ .......................................... 23 8.1.4 Informative strings (an notation tex t) ..................................................................................... .................................. 23 8.1.5 Do not sho w the effec ts of ch anges until the dialog is complete ........................................................... ......... 24 8.1.6 Validation in di alogs â take th e user to the line he o r she n eeds to se t .................................................. ...... 24 8.2 Guidelines for Mul tipage Dialogs ............................................................................................ ....................................... 24 8.2.1 Grouping setting s and choosing th e title o f the p age ...................................................................... ................... 25 8.2.2 Display the mo st import ant page first ..................................................................................... ................................ 25 8.2.3 Multipage Dialo gs can m ake your app lication muc h easier to use ............................................................ ...... 25 9. Common Dialog s ............................................................................................................... ........................................................... 26 9.1 Save Dialo g ................................................................................................................. .......................................................... 26 9.2 Open Dialog ................................................................................................................. ......................................................... 26 9.3 Insert Objec t Dialog ........................................................................................................ ................................................... 27 9.4 Format Objec t Dialog ........................................................................................................ ................................................. 27 9.5 Folder B rowse Di alog ........................................................................................................ ................................................. 28 9.6 Calendar B rowse Dialo g ...................................................................................................... .............................................. 28 9.7 Time Dialog................................................................................................................. .......................................................... 29 9.8 Spell Checking Dialo g ....................................................................................................... ................................................. 29
3 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. 9.9 Find Dialog................................................................................................................. ........................................................... 30 9.10 Find and Repl ace Di alog .................................................................................................... ............................................... 30 9.11 Font Dialo g ................................................................................................................ ........................................................... 31 9.12 Charac ter Map .............................................................................................................. ....................................................... 31 9.13 Insert Field Di alog ........................................................................................................ ....................................................... 32 9.14 Bullets Di alog ............................................................................................................. .......................................................... 32 9.15 Alignment Dialo g ........................................................................................................... ..................................................... 33 9.16 Indents Dialo g............................................................................................................. ......................................................... 33 9.17 Borders Dialog ............................................................................................................. ........................................................ 33 9.18 Tabulator Dialog ........................................................................................................... ....................................................... 34 9.19 Print Dialo g............................................................................................................... ............................................................ 34 Attributes....................................................................................................................................................................................... 35 9.20 Print Previe w .............................................................................................................. .......................................................... 35 9.21 Print Optio ns Dialog ....................................................................................................... .................................................... 35 9.22 Page Se tup Dialo g .......................................................................................................... .................................................... 36 9.23 Set Passwo rd Dialo g........................................................................................................ ................................................... 36 9.24 Get Pass word Di alog ........................................................................................................ .................................................. 37 9.25 Set Zoom Dialog............................................................................................................ ...................................................... 37 10. Notes....................................................................................................................... ........................................................................ 38 10.1 Information No te ........................................................................................................... ..................................................... 38 10.2 Confirmation No te.......................................................................................................... .................................................... 38 10.3 Flashing not e .............................................................................................................. ......................................................... 39 10.4 Cancel Note ................................................................................................................ .......................................................... 40 10.5 Progress B ar ............................................................................................................... .......................................................... 40 10.6 Progress B all .............................................................................................................. ........................................................... 41 10.7 Information B anner ......................................................................................................... ................................................... 42 11. Graphical gu ides and rules.................................................................................................. ...................................................... 43 11.1 Frames ................................................................................................................................................................................... 43 11.1.1 Application fr ame ........................................................................................................ ............................................. 43 11.1.2 Dialog fr ame ............................................................................................................. .................................................. 43 11.1.3 Window fr ames............................................................................................................ .............................................. 44 11.1.4 Grouping in l ayout ....................................................................................................... ............................................. 45 11.2 Margins ................................................................................................................................................................................. 45 11.3 Fonts...................................................................................................................... ................................................................. 46 11.4 Control s ................................................................................................................... .............................................................. 47 11.4.1 Title bar ................................................................................................................ ........................................................ 47 11.4.2 Scroll bars .............................................................................................................. ..................................................... 49 11.4.3 Search/inpu t box ......................................................................................................... .............................................. 51 11.4.4 Selection b ar and selec tion frame ........................................................................................ ................................ 52 11.4.5 Java and Web Cont rols .................................................................................................... ........................................ 52 11.5 Colou rs ................................................................................................................................................................................... 52 11.6 Icons ....................................................................................................................................................................................... 53 11.6.1 Icon palett e............................................................................................................. .................................................... 53 11.6.2 Application ico ns ........................................................................................................ ............................................... 54 11.6.3 List icons............................................................................................................... ....................................................... 54 11.6.4 Note icons ............................................................................................................... .................................................... 54 11.6.5 Animations ............................................................................................................... ................................................... 55 12. Audio UI .................................................................................................................... ..................................................................... 56 13. Writing style ............................................................................................................... .................................................................. 57 13.1 General guidelin es ......................................................................................................... ..................................................... 57 13.2 The communicato r ........................................................................................................... ................................................... 57 13.3 Application n ames .......................................................................................................... .................................................... 57
4 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. 13.4 Punctuation ................................................................................................................ .......................................................... 57 14. Localisation ................................................................................................................ ................................................................... 59 14.1 Do not hard -code........................................................................................................... ..................................................... 59 14.2 Graphics and audio ......................................................................................................... ...................................................59 14.3 Provide roo m for tex t expansion ............................................................................................ ........................................ 59 14.3.1 Do not d eclare buffer s of an e xact s tring................................................................................ ........................... 60 14.4 Avoid clever use of strings ................................................................................................ ............................................... 60 14.4.1 Do not r euse strings ..................................................................................................... ............................................ 60 14.4.2 Watch out fo r composi te messages ......................................................................................... ............................ 60 14.4.3 Watch out fo r dynamic text insertio n ..................................................................................... ............................ 60 14.4.4 Do not use clev er plur als ................................................................................................ ......................................... 60 14.5 Do not assum e the co de set................................................................................................. ............................................ 60 14.6 Use internatio nal sys tem functions ......................................................................................... ...................................... 61 14.7 Use unique log ical nam es ................................................................................................... .............................................. 61 14.8 Provide instruc tions for loc alisation ...................................................................................... ........................................ 61 14.9 Check English .............................................................................................................. ......................................................... 61 15. Responsiveness.............................................................................................................. ............................................................... 62 15.1 General guidelin es for resp onsiveness ...................................................................................... .................................... 62 15.2 Response time .............................................................................................................. ....................................................... 62 16. File handling ............................................................................................................... .................................................................. 63 16.1 Saving .................................................................................................................................................................................... 63 16.2 File naming ................................................................................................................ ........................................................... 63 16.3 Using file nam e extensions ................................................................................................. ............................................. 63 16.4 Folders ................................................................................................................................................................................... 63 16.5 Protect user data .......................................................................................................... ...................................................... 63 17. LegalIssues (produc t liability) ............................................................................................. ...................................................... 64 18. Appendices .................................................................................................................. .................................................................. 65 18.1 Differences in f unctionality: CBA vs. Pen device ........................................................................... ............................. 65 Views.......................................................................................................................... ..................................................................... 65 Dialogs ............................................................................................................................................................................................ 65 18.2 Recommended t erms .......................................................................................................... ............................................... 65 18.3 Shortcut Lis t .............................................................................................................. ........................................................... 67 19. legal notice ................................................................................................................ .................................................................... 71
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, EPOC platform developers and dev elopers of any other small device en vironments (handheld devices , palmtops, PDAs, smart phones). 1.2 Interact ive El em ents The interactiv e elements in the commu nicator are - 4 command buttons on the right-hand side of the display (CBA) - a men u - a PDA keyboard which resides below the display In other words, there is no pen or other direct m anipulating device except for a pointer which can be manipulated via the Arrows key in th e keyboard. The UI of the cellular telephone cannot b e programmed. 1.3 Glossary Term Definit ion AMP Arrow Manipulated Pointer = A pointer that can be m anipulated via keyboard. CBA Command Button Area = The area on the PDA display reserved for the commands corresponding to the soft keys. The commands are context-sensitive. Command button Buttons on the right-hand side of the PDA display that correspond to commands presented in the Command Button Area. Menu button A button which activates the Menu. PDA Personal Digital Assistant. SDK Software Development Kit. Shortcut A single key press or a combin ation of key presses that performs an action. Also called Hot Keys and Accelerators. UI User Interfac e.
6 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. 2. GENERAL UI PRINCIPLES - Applications should interact with the user - User key presses should b e acknowledged in some way. The applic ation should always react to th e key presses. - The UI should be as flexible as possible: if there are two w ays to perform an action, you sho uld allow the user to choose his or her own favouri te way. - All of the application functionality should be visible at all times - Indicate commands and controls that are available - If a command canno t be execu ted at one point for some reason, th en the comm and should be dimmed . Sometimes, when the use r selects a dimmed comm and, an Information Banner indicating âÂÂâÂÂCommand no t availableâÂÂâ can be displayed . - If a command canno t be execu ted at any time, it should no t be visible in the UI at all. - The UI should be consistent across diff erent applications and across other d evices which operate on the s ame platform. This means for example: - Common dialogs (see chapter 9) - Common menu structures (see chapter 6.2) - Common shortcuts (see ch apter 18.3) - Common CBA functionality (see ch apter 5) - Common terminology (see chapter 13, ch apter 14) - Common graphics (see c hapter 10) - Common task flow, i.e. carrying ou t the same type of task should be similar across applications within the UI - Minimise the UI - Less work for the implemen ter and less work for th e user. âÂÂMake it simple!â - Hide the complexity, if complexi ty is needed at all - Common actions should be available with as few key presses and hand movements as possible - Do not frustr ate the pow er users - Provide shortcuts - Let the user have control: do no t over-automate - Provide feedback (see ch apter 15) - Use Notes (see chapte r 9) and/or audio feedback (s ee chapter 12) when i t is not obvious what has happ ened - Avoid âÂÂâÂÂflickerâÂÂâ when an application is redrawn; no part of the UI should flicker when the display is updated - Speak the user's language - Provide an undo functionality, that is, make things reversible (see chapter 16 .5) - Allow swapping from one application to another. A given application must not block other activity - Allow cancellation of the operation at every stage - If you develop an application that is not going to be localised, m ake sure that you create all strings yours elf. Do not take them from the sy stem. This is because th e operating system that your application runs on may well be in
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 left, ther e is an Indicator area, and on the f ar right is a Command Button Area (CBA). The width of both areas varies depending on th e situation, and the space between these areas is dedicated to the application use. 1) Indicator Area on the left: th e Indicator Area is r eserved for providing information about the active application, the time and the status of the communication. The Indicator Are a is either 92 or 32 pixels wide, depending on which application is active. 2) Application Area in the middle: the Application Area is res erved for application use. When th e application requires all the space available, some ex tra space can be provided by using a n arrower 32-pixel Indicator Area. 3) Command Button Area on the right: the Command Button Area consists of 4 commands, e ach command corresponding to a dedicated button. Commands within a view/dialog may change, depending on the func tional context. It is also possible to res erve the entire screen sp ace for th e application (see chapte r 3.3). Figure 1: An example of a Communicator View 3.1 Indicator Areas: Wide and Narrow Indicator Areas The Indicator Area is dedicated to different kinds of importan t information, e.g. connections, battery and fi eld strength indicators. There are two siz es for the Indica tor Area; th e wider Indicator Ar ea is 92 x 200 pixels and the narrow one is 32 x 200 pixels. The wider Indicator Are a has also a place for tim e, the application icon and name (see Figure 2). Application Ar ea Command Button Area Indicator Area
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 the âÂÂâÂÂnovice userâÂÂâ to navig ate. The Narrow Indic ator Area can be used if extra sp ace is need ed (see Figure 3). If the firs t view has a Narrow I ndicator Area, the ti tle and layo ut should mak e it obvious wher e the us er is. Figure 3: An example of a Narrow Indicat or Area (32 pixels) Information presented in the Indicator Area: The origin of the information Note Application icon Application in Wide Ind. Area only Application name (two lines maximum ) Application in Wide Ind. Ar ea only Inbox, Outbox, profiles and Connections (IR, printing, calls, modem ) System in Wide Ind. Area only Clock System in Wide Ind. Area only Field strength and phone state (set off) System Battery System Table 1: The infor mation in the I ndicator A rea
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 consists of a title, margins and list area. The controls reside on the application area alongside the given instructions described in the graphic controls. See also chapter 11.1. 3.2.1 Title The title provides basic information on an open item on th e screen. The information sho wn in the title can be: - The name of the application - The name or other identific ation of the open item (for example, the name of the contact card holder) - The name of the open documen t - Miscellaneous information or indication, e.g.: - status of the connec tion or other in formation that cannot b e shown in the I ndicator Area - application dependent information that is not displayed elsewh ere in the Application Area See also chap ter 11.4. 1. Figure 4: Title in Contact card with the card holder name and card spec ific icons 3.3 Full Screen Mode Full Screen Mode means that the Application Area uses all the space on th e communicator screen (Figure 8). Full Screen Mode enables us ers to have more space for editing or viewing. Figure 5: Fu ll Screen Mode When Full Screen Mode is active, n either the I ndicator Area nor the Command Bu tton Are a are seen on the screen. Showing the title in Full Screen Mode is optional. Full Screen Mode c an be set on and off in th e Menu (by check mark).
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 pressed bu tton and the visible componen ts on the screen. The Application Area is seen in every case. After the activation, the Indicator Area and the Command Button Area simply slide over the contents of the Application Area, while some of the contents in the far lef t and far right-hand sides of the screen are left in the background (Figure 6). Figure 6: T he activa tion is ma d e: th e In dicator A rea and t he Comma nd Butto n Area ar e visibl e on the Sc r een After acti vating a comm and in the Ful l Screen M ode, th e Appl ication A rea ag ain occup ies all the sp ace on the sc reen, i.e. if the C BA or Menu or an Indicator Are a are active , they disapp ear from t he screen. Figure 7: Fu ll Screen Mode.
12 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. The screen re turns to the Full Scr een Mode if ⢠a command (Menu or Command Bu tton based ) is executed ⢠the Menu is closed, 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 only when exiting the dialog/note. 3.4 Command Button Area The Command Button Area is separated from the Application Area by a 5-pixel frame. Note that graphic al components of the U I shall NOT exc eed the f rame and overlap th e Command Button Area. The Command Button Area consists of four commands. The b asic functionality of the device should be man aged by the comm and bu ttons. Command texts are operated by the comm and buttons on the right-hand side of the display. The size of the Command But ton Area varies from 80 x 200 pixels to 130 x 200 pixels, depending on the length of the text strings. The width of the command button area is dynamic bu t view dependent; it is as wide as the longest command text string that could appear on the applic ation screen in question. The width does not change in any one view. The width must b e adjusted according to each language version. The first word of a command text starts with a capital letter. Use of abbreviations is not recomm ended. Command texts are aligned to the right. The right margin is always 4 pixels wide and the lef t margin is a minimum of 4 pixels wide. The left margin is wider if the Command Button Are a is at the minimum and the texts are very sho rt. It is recommended to us e one-line commands if the tex t consists of one or two short words. If the words are long or if there are more than two words, the command text wraps to the second line. The command text, which is defined to have/use the E nter key as a shortcut , is underlined by a 1-pixel line. The command text colour is black. The command text might be dimmed if it is temporarily unavailable. Other colours should not be used in command te xts. Roughly estimated, te xt string widths in the Command Button Are a can extend from 7 to 12 ch aracters per line, depending on the width of the ar ea.
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 he or s he so wishes. Button Functionality Tab Changes the focus between windows Tab -> focus to right Shift Tab -> focus to left Enter Default command (Button1 underlined) in CBA or Carriage Ret urn (CR) in editors Esc Application specific Up/Down Arrows key Application specific Right/Left Arrows key Application specific Views Tab Opens a control (e.g. choice list -> text list box) Enter (when control no t opened, e.g. choice list) Opens a control (e.g. choice list -> text list box) Enter (when control ope ned, e.g. text list box) Optional default comm and = Button1 underlined (e.g. OK in text list box) Esc Cancels (clears a dialog box and any changes made) Up/Down Arrows key Changes the focus from the one control to ano ther Right/Left Arrows key Focuses on the active control Dialogs Table 3: Recommendations for in teraction. 4.1 Enter k ey In editors, the Enter key inser ts a new line. Elsewher e, Enter per forms the action d escribed by the underlined defaul t command (Butto n1). 4.2 Menu button The Menu bu tton activa tes and de activ ates the M enu (see chap ter 7). 4.3 Esc Key The Esc key alw ays allows the user to cancel the curren t action. This is important, because the Cancel command is often unavailable in the CBA. When in a dialog, the dialog and any changes made can b e cleared using the Esc key. 4.4 Tab key The Tab key should move the focus be tween the windows, but there should always be some other w ay of moving between views, ideally using the Arrows key, e.g . the left and right keys may c hange the window. If the Arrows key c annot be used for navigating between windows , a command should be available in th e CBA.
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 replace the convention al usage of the CBA device, but the Arrow M anipulated Pointer is a user interface extension to use the device. The primary intention is not to provide an alternative way to us e the applications, but to provide a pointing functionality for applications that need it. Ex amples of such applications are web browsers (image maps) and Java applications explicitly requesting pointing ev ents. With some exceptions, the basic keyboard usage is still av ailable even when th e Arrow Manipulated Pointer is selected. Every applic ation has the option to use the Arrow Manipulated Pointer, but the Arrow Manipulated Pointer is meant primarily for bro wser applications. When using the Arrow Manipulated Pointer, no t all standard EPOC controls are suitable becaus e the look-and-feel of these controls is not designed for dir ect manipulation. Arrow Manipulated Pointer mode can be activated/deact ivate d in the Me nu or via Shortcut.
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 frequently used command is placed on the uppermost button. For better us ability, the Shortcut 'Enter' can b e assigned to this command . This feature is indicated by underlining the command. In dialogs, this command is control-sensitive, i.e. the command may change according to the position of the focus. Open / OK / Select / Call / Connec t / Send / Start / Change / Set / Yes Button2 This button may includ e the following kinds of command: - one of the most fr equently used commands (the most important command should reside in Button1) - commands which help navigation inside a view (e.g. change from one window to another) - commands which enable switching be tween different views inside an application - commands which open an options dialog Edit / New / Add / Change window / Options Button3 This button can include the same types of command as Button2. Also, when the CBA includes a command that dele tes or perform s anot her 'des tructive' command, this type of command mus t reside in Button3. New / Delete / Remov e / Deselect / Options Button4 - closes applications and dialogs - cancels confirmation not es - generally, Button4 provides the means to 'go back safely' Close / Cancel / Hang up / Disconn ect / No Table 4: Rules f or the pos itionin g of commands. - Multi-level CBA commands should be avoided: a command in the Command Button Area should not open ano ther set of commands. For example, avoid commands like âÂÂâ Write messageâÂÂâ in a CBA button which will ch ange the CBA command set to âÂÂâÂÂWrit e mail,âÂÂâ âÂÂâ Write faxâÂÂâ and âÂÂâÂÂWrit e SMS.âÂÂâÂÂ
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 ar e more th an six ite ms in a menu pa ne, little arrows appear to indic ate co ntinuity on the right-han d side of the menu pane. An a rrow indicates th e location of the c ascade menu con taining the unsee n commands. Figure 9: Menu items with arrows The contents of the Menu, including Shor tcuts, should be identical in all devic es on the same platform. - Include Shortcuts (ctrl k ey, shift ctrl key ) in the Menu ; otherwise, the user will no t be able to find them (see chapter 18.3). Shortcuts with Chr key combinations cannot be included in the Menu but some applications might use them. In other words, separate commands reside in the Me nu and a Shortcut is activated via the keyboard. - Menus should be static - Unavailable menu items should be dimmed. If the user tries to select a comm and which is unavailable, the error case must be indicated to th e user via an Inform ation Banner, e.g. âÂÂâÂÂComm and is not available.âÂÂâ The very same indication should be used wh en the user tries to access a comm and which is unavailable by using a Shortcut key combination. - All views of an application should have the same Menu unless the views are radic ally different
17 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. - When desig ning the layout o f the M enu, r emember th at th e Menu is not jus t a tool to pro vide access to functionali ty, bu t that it also tells the user what fu nctional ity is avail able. - Menu cascades hav e two uses - To hide advanced func tionality in order to avoid frightening novice users - To group together connected functionality - Avoid having cascades as the first item in a menu pane. Otherwise, n avigation gets complicated. - The Menu is not av ailable in dialogs. However, the Menu button migh t have other functionality in dialogs. 6.1 Guidelines for de signing t he M enu Step 1: Menu struc ture Use the parts of the st andard m enu struc ture that are ade quate. If the standard File-Edit-View-Tools division is not applicable, do not stick to it. For ins tance, a File menu has no meaning in the calculator application. Thus, it could be named P rinting etc. Also, an application could hav e more than one category of object which i t could create, edit, list, short or view. In such c ases, Alarm-City-Country or Card-Group-List, for example, or a similar structure should be used instead of File-Edit-View. To make the selection quicker, the most frequently used commands could be loc ated as the first (or last) itemsin a menu pane. Step 2: Group menu items Use standard menu struc tures, including separators, when appropriate. Group menu items so that ones wi th similar functionality, nature or having the same object are grouped close to each other. After this, emphasise the grouping by using sep arators. The 'Life cycle' method can be us ed when appropriate, e.g., by first creating an object, then adding something to it, and finally giving it a finishing touch. Avoid having many 1-item groups or gro ups of 5 or more items in one menu. 1-item and 5-item groups are a good solution if their functionality is clearly differen t from other items in the Menu. Step 3: Use sep arators When there are only 1 or 2 menu it ems, do not use sep arators. When there are 3 men u items, use no mor e than 1 separator o r do not use sepa rators at all. Max. 3 separators per men u pane (it is recommend ed that a menu pane be r estricted to a maximum of 6 items). Separate mutually exclusive menu items in to a single group. Also separate commands from settings, option buttons from tick boxes, and so on. Step 4: Use ellipses When a menu i tem requires additional defini tions or where it opens a separate dialog, the m enu item in ques tion is marked with a character ellipses (â¦). Below is an example with the command 'Ne w' : New CTRL N (wi thout ellipses if the new documen t is created right away) New... CTRL N (wi th ellipses when additional inform ation has to be inserted b efore the new document is created, for example, template selec tion, size, color palette, etc.) 6.2 Standard m enu items The standard menu structure illustr ated below can be applied to most of the applications. Using a standard menu structure h elps the user to learn t he application menu faster and to increase the speed of his of her use of th e Menu.
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 setup⦠Sh Ctrl U ---------- ------ Rename Delete Ctrl D More > Properties⦠---------- ------ Add to Desk Edit Undo Ctrl Z ---------- ----- Cut Ctrl X Copy Ctrl C Paste Ctrl V ---------- ----- Delete/Clear Select all Ctrl A Find⦠Ctrl F ---------- ------ Objec t > Edit... Sh C trl Z Format... Sh Ctrl J View <Arrow Manipulated Pointer> Ctrl Q ---------- ------ ----- View 1 View 2 ---------- ------ ----- Show > Grid
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> ---------- ------ --------- - <alignment specific> <alignment specific> Tools <application settings...> <application preferences ...> ---------- ------ --------- ------------ <appl. specific tools> <about_this_3 rd _party_produc t> ---------- ------ --------- ------------- Log Sh Ctrl L Receive via infr ared Table 5: Sta nda r d Menu Ite ms
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 which require special l ayouts needs to be dealt wi th case by case. 7.1 List view Figure 10: List view layo uts A normal list view has a title with a 3-pixel margin and an application area with 20-pix el margins. A list view usually has a selection list component and, optionally, a search box. 7.2 Snaking list view (Application Groups ) A snaking list view is a list view with two columns, and is used mainly in Applic ation Group views e.g. in Control panel which has lots of smaller âÂÂâÂÂsub -applications.âÂÂâÂÂ
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 views from each other. Figure 13: Window layo uts
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 be d esigned so th at the hier archy of dialogs does not exceed thr ee steps, i.e. there are, at mos t, three overlapping dialogs at a time. Otherwise, navigation might become impossible to deal with. Graphically, a dialog consists of the dialog frame, a shadow behind the frame, a title, a list or a table, and other generic controls. Dialogs are centred in rel ation to the application area beneath, and the subsequent dialogs are cen tred in relation to the dialogs beneath them again. All dialogs beneath the uppermost dialog are dimm ed. The pixel dimensions of the dialog are specified in chapter 0. Figure 14: A dialog on top of a noth er dialog 8.1 Guidelines for dial ogs 8.1.1 Number of items in se tting dialogs A dialog fits five lines of t ext or else a control height of a maximum of 134 pix els. Do not overcrowd the dialogs; avoid dialogs that require scrolling. 8.1.2 Avoid additional commands Try to avoid commands in the CBA more complicated than OK, Close, Cancel, etc. In cases when a command in the CBA opens a separate dialog, the use e.g. of a Multipage Dialog, for ex ample, can often yield a better res ult. 8.1.3 Make the title inform ative The title of a dialog should provide the name o f the command that activated that specific dialog. However, sometimes it is better to have longer dialog titles as they give more information to the user. The maximum text string width for a dialog title is approximately 36 characters. 8.1.4 Informative strings (annotati o n tex t) When text s trings are for informativ e purposes only, i.e. they canno t be edited, th e text strings are shown in italics. Additio nal text may help the user to underst and techni cal t erms bett er. There i s a s eparator b etween the an notation text and editable (selectabl e) list.
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 dialog: ⢠It would be unclear whether the changes would r emain if the dialog were cle ared or âÂÂâÂÂcleared from the screenâÂÂâ instead of confirming the di alog. ⢠It does not pass the âÂÂâÂÂcup-of-teaâÂÂâ test, i.e. you mak e some changes, leave th e dialog up, come back (after making some tea) and clear th e dialog, and you may be surprised that the scr een reverts to a differen t setup (the original). In this case, you can only see those changes which af fect the part of the scre en that is visible. Therefore, it is not really useful. ⢠It is inconsistent with the behaviour of any other dialogs i n the system. 8.1.6 Validation in dialogs â take th e user to the line h e or she needs to set If the user closes the dialog and some settings are not validated, inform the us er about the error (e.g . via Inform ation Banner) an d move the cursor to th e line th at the user must reset. 8.2 Guidelines for M ultipage Dial ogs A Multipage Dialog consists of a Dialog frame, title, page frame, âÂÂâÂÂTabs,âÂÂâ page labels and page content (= list of controls). The frame of the whole dialog is a normal Dialog fr ame. There can be five tabs at most. The tab size depends on the length of the label text strings. If there ar e five tabs and th e text strings are long to the exte nt that they exceed the width of th e possible page label area, the tabs shrink. The ellipses appear when the word is cut. With five tabs, the maximum tab label text string width is 104 pixels, i.e . ca. 11 characters. With two tabs , the m aximum tab label text s tring width is 248 pix els, i.e. ca. 2 7 charac ters.
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 cannot be includ ed in any other p age, use the ter m âÂÂâÂÂOthe râÂÂâ as th e title of the pag e. 8.2.2 Display the most important page first With Multipage Dialogs, display the most important p age first. This page is opened first when a dialog is opened. 8.2.3 Multipage Dialogs can make your application much e asier to use Crowding one screen/dialog is usually counter-productive â the more items there are, the more the user gets confused. Even just one se tting that they do not understand may discourage them from using the dialog. If a dialog contains a lot of information, try to use a Multipage Dialog, and move less important, less commonly used settings off the first p age. As with everything else, a dialog should focus on the everyday things the user wants to do, and should express things in terms the user unders tands.
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 naming 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 - 'Browse' opens a Folder Browse Di alog for changing a folder - 'Change Format' provides a list of different formats - Cancel dismisses the dialog and no saving is done 9.2 Open Dialog Figure 18: Open Dialog Usage Attributes - opening a document - usually activated by making a selection in the CBA or Menu - only files that are supported are shown by default - 'OK' sel ects the d ocument to b e opened - 'Browse' opens a Folder Browse Di alog for changing a folder - 'Show all files' also shows the files in the folder that are no t supported
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 bje ct D ialo 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 Figure 20: Format Object Dialog Usage Attributes - used for changing the attribut es of an embedded object - the appearance, scaling, cropping and size can be changed
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' makes a sel ection - 'New folder' crea tes a n ew folder (optional) - 'Collapse'/'Expand' modifies the folder tree shown in the dialog - 'Cancel' dismisses the dialog and no folder is selected. 9.6 Calendar Browse Dialog Figure 22: Calendar Browse Dialog Usage Attributes - used for browsing and selecting a date - The title shows the current month - 'Select' acc epts the dat e - 'Next mon th' and 'Previo us Month' change the month - 'Cancel' dismisses the dialog and no selection is made
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 standard controls bitmaps 9.8 Spell Ch ecking Dia log Figure 24: Spell Checki ng Dialog Usage Attributes - used for checking the spelling in the editors - the misunderstood word in sho wn in the dial og titl e and th e word is editable at once - 'Replace' changes the misunderstood word with the one s elected - 'Skip' jumps over the misunders tood word - 'Add' includes the misunderstood word in the dictionary - 'Stop' in terrupts the sp ellcheck ing procedure
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' activates the Replacing function - 'Options' includes the attributes 'Case sensitive' and 'M atch whole word' 9.10 Find and Replace Dialog Figure 26: Replace Dialog Usage Attributes - used for se arching and repl acing a s tring in the document - 'Find' starts the finding procedure, 'Find next' continues the searching procedure - 'Replace' replac es one word wi th another - 'Options' includes the attributes 'Case sensitive', 'M atch whole word' and 'Replace all' - 'Close' closes the dialog and the changes are acc ep ted
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 , italics and underlining - text colo ur - strikethrough - normal, superscript or subscript 9.12 Character Map Figure 28: Character Map Usage Attributes - used for inserting special characters th at are not included in the keybo ard - provides 3 pages of special characters, a page of mathematical symbols and a page of miscellaneous symbols
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 number - number of pages - current time - current date 9.14 Bullets Dialog Figure 30: Bullets Dialog Usage Attributes - used for inserting and defining bullets
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 the lef t indent, right indent an d the first line 9.17 Borders Dialog
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 tex t 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 Figure 35: Print Dialog
35 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. Usage Attributes - used for printing documents - also prov ides means for ch anging t he printing se ttings - 'Print' will start the printing procedure - 'Preview' opens the docum ent in a preview mode - 'Options' opens a dialog where the options can be changed - 'Close' goes back to the previous application and saves the changes 9.20 Print Preview Figure 36: Print Previ ew Usage Attributes - used for previewing the document b efore printing - 'Print' start the printing proc edure - 'Page setup' opens a Page Se tup Dialog - âÂÂCloseâ re turns the user to the previous view/dialog 9.21 Print Options Dialo g Figure 37: Print Options Dialog Usage Attributes - used for defining th e printing options - number of copies, connection (serial or infrared) and printer type c an be
36 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. selected - 'Page setup' opens a Page Se tup Dialog - 'Settings' 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 foote rs - page numbering 9.23 Set Password Dialog Figure 39: Set Password Dialog Usage Attributes - used for defining a password - 2 editors for entering the passwo rd - asterisks used as feedback
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 are located in the cen tre of the screen, if not specified otherwise. - Notes have a drop shadow, and in mos t cases the background dims when the note appears. - Frame and size dim ensions are the same for Notes as for Di alogs. - Notes only fit five lines of text, and do not scroll in mos t cases. Keep messages shor t and to the point: - The messages are only on the scr een for a short time, so the user will not be able to read and unders tand a message that is very long . - Remove the predicate (verb âÂÂto beâ ) unless it helps to remove ambiguity: âÂÂâÂÂEntry copied.âÂÂâ Do not use 'Busy ' when you could be more specific. For example, while connecting to the server , use 'Connecting to the server <server_n ame> â¦' . 10.1 Information Note Figure 42: An Information Note Usage Attributes - informs the user of e rrors, for example - Also gives positive feedback - the user c an only accept th e note by pressing OK (Butto n1) - located in th e centre of th e screen - title and 5 lines of text - note icon in the top left-hand corner - background dims when note appe ars 10.2 Confirmation Note
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 - requests c onfirmatio n from th e user - usually contains 2 comma nds (e.g. OK / Cancel) - more than o ne alternati ve can be presented in a single note: Button1 always contains the command for acceptance and Button4 contains the cancelling option. Optional commands reside in Button2 and Button3 - located in th e centre of th e screen - note icon, title and 5 lines of text - note icon in the top left-hand corner - background dims when note appe ars 10.3 Flashing not e Figure 44: A Flashing Note Usage Attributes - shows less important information on the screen - requires no feedb ack from the user - located in th e centre of th e screen - title and 5 lines of text - note icon in the top left-hand corner
40 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. - appears on the screen and disappears automati cally after time-o ut - allows for other action s to tak e place - background and command buttons dims when note appears 10.4 Cancel Note Figure 45: A Cancel Note Usage Attributes - shows long-lasting opera tions that the user can cancel whil e the operation is in action (for example, file oper ations, data transfer) - the animation ( either default or dedicated ) tel ls the us er that the system is not halted. The animation might also entertain the user - located in th e centre of th e screen - 4 lines of text - animation locate d in the bottom right- hand corner - background dims when note appe ars 10.5 Progress Bar Progress bar can be used eith er in a dialog as a cancel note or in a narrow bar in the bottom righ t-handcorner of the Application Area. When it appears in a dialog, the backgrou nd dims. When the narrow progr ess bar is used, the b ackground remains âÂÂâÂÂactiveâÂÂâ and can be view ed and scrolled.
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 that time has elapsed wh en the total ti me of an oper ation c an be estimated - the progression is indicated by numbers or percentage, and a dynamic bar - located in th e centre of th e screen and dims the b ackground OR in the bo ttom right-hand corner of the screen - the text resides in f ront of the progress bar - drop shadow - background not dimmed 10.6 Progress Ball
42 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. Figure 48: A Progress Ball Usage Attributes - used when th e total time of 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: An Information Banner Usage Attributes - informs the user of ev ents of minor importance or of frequent occurr ence (for example, clipboard operations or saving) - this control can also be used to show supplementary information on the active object - this cont rol appe ars and autom atically disappears from the t op right-hand corner of the displ ay - located in the top right-hand corner - background does not dim
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 can be achieved wi th good contrast, adequate empty space (loose layout) and finished gr aphical elements. Consist ency is achieved by using common controls, common dialogs, syst em palettes and sys tem fonts. In the interest of consistency, use re ady-made components where possible. 11.1 Frames 11.1.1 Application frame Between th e Application Area and the Comm and Button Area , there is a vertical fr ame that s eparates the command button texts from the application texts. This frame is automatically created in the application. Note that NO component or control is allowed to ov erlap the Application frame. Figure 50: An application frame 11.1.2 Dialog fr ame A dialog frame is used in differen t kinds of note and dialog. The dialog frame size is dynamic, i.e. only occupies the space the components need . However, maximum sizes are defined for dialogs to p revent their overlapping with the Indicator Area and Command Button Area. The component size inside dialogs must be restricted to prevent th e dialog frame from becoming too wide. The size is not limited automatically - it must be res tricted manually. In views with a Narrow Indicator Are a, the maximum di alog width is 402 pi xels and the m aximum height 175 pi xels. In vie ws with a Wide Indicator Area, the maximum width is 338 pixels and the maximum heigh t is 175 pixels.
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 active window can be emphasised by the title b ar, which only resides in the active frame (Figur e 56). The title of the inactive window is black and has a title lin e underneath. The selection bar is only visible in the active window. In some c ases, the selection of the inactive window ne eds to be indicated; then the selection bar is a simple frame with a whi te background. This is e.g . when one list item is selected on the left window and its content is presented in righ t window and the right window is activated and the selection bar resides on the right windo w. The width of the left window d epends on the view which is currently ac tive. It occupies a maximum of half of the Application Area, but, preferably, it should b e narrower (a minimum of 1/3 of the Application Area). The wid th of the details window (i.e. the right-handwindow) depends on the CBA. The margins are 4 pixels to the Application Area borders. The space betw een the windows is 7 pixels .
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. 11.2 Margins The most important rule in reg ard to spacing and margins is to keep every element in the layou t separate, i.e. icons, texts and components should not overlap unless otherwis e defined. The margin in the Application Area must be defined so that the ti tle text and list area start, visually sp eaking, at the same vertical line on th e left-hand side. The size of the margins depends on the view and on the layou t. The margins are measured from the Application Area frame or Indicator Area fram e (or dialog frame) to the text, bitmap or another control in the Application Area. In the normal list views and dialogs, the margin is 20 pixels wide (see chapter 7. 1) . The top margin is measured f rom the first text line or topmost control to the titl e bar. It is at least 2 pixels wide. Also, the bottom margin is a minimum of 2 pixels. Text or a bitmap should n ever touch the display edges. Also top and bottom margins should be somehow equal. In editors, the m argin is 10 pixels wide (see chap ter 7.3). In windows and tables, the m argin between the table border frame and the tex t or bitmap is at least 4 pixels wide at the sides (see chapter 7. 4). The space betwe en icon and text should be 4 pi xels.
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 e this system fon t in the UI because it forms a very strong element of the visu al style. The system font has sever al sizes and styles to distinguish be tween different kinds of information, e .g. labels and titles. Text is usu ally black in order to make it legible. Dimming is used in cas es where a text item cannot be selected. There are three diffe rent font sizes for zooming . Zooming is not autom atic; an application needs to define the zoom ratio and fonts individually. Logical nam e Height Style Purpose an d ex a mples o f use SystemfontTerm8norm al 8 pix Normal Special font for Terminal and Telnet views SystemfontTerm15zoomed 15 pix Zoomed Special font for Terminal and Telnet views, zoomed Systemfont10bold 10 pix Normal Small font for tables or small textu al indications Systemfont16bold 16 pix Bold Texts in Indicator Area mode slots ; labels in tight tables Systemfont 18normal 18 pix Normal Bodytext in tables Systemfont 18bold 18 pix Bold Text/titles in ta bles, application name in indicator field Systemfont 20light 20 pix Light Company na me, Date and time (size, type etc.) in document lists (zoom step 1) Systemfont20normal 20 pix N ormal Text body (in zoom step 1), Menu texts, Dialogs Systemfont20italic 20 pix Italic Text body in notes, Informative text in t itle lines Systemfont20bold 20 pix Bold Labels, New (unread) messages in messaging (in zoom step 1)
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 na me, Date and time, size, type, etc. in lists Menu shortcuts (in z oom step 2) Systemfont 24normal 24 pix Normal Text body (in zoom step 2) Systemfont24bold 24 pix Bold Labels, New (unre ad) contacts i n messages (in zoom step 2), Titles Systemfont29light 29 pix Light Company na me, Date and time, size, type, etc. in lists (in zoom step 3) Systemfont29normal 29 pix Normal Text body (in zoom step 3) Systemfont29bold 29 pix Bold Labels, New (unre ad) contacts i n messages (in zoom step 3) Systemfont16digital 16 pix normal Digital font type for clock application (small clock) Systemfont24digital 24 pix N ormal Digital font type for clock application (large clock) Table 6: System font siz es and styles Leading is important as it keeps text loose, thu s improving readability. In Latin fonts th ere needs to be at least 1 pixel between lines (pre ferably two) so that the l etters do not t ouch each o ther. Lines in which the bottom half of the characters is missing should not appear in a view, except in editors that cannot be controlled. Alignment in the lists is to the l eft. Date and time and size in the colum ns are aligned to the right. 11.4 Controls 11.4.1 Title bar Every view should have a title bar . The title bar is the s ame colour in every application in the UI and withi n any one system palette. There ar e three differen t kinds of ti tle bar according to the view l ayout type (se e chapter 6) . The title font is Systemfont24pixbold, and the colour is white with a black shadow. The title text should start on the same vertical line as the application texts (the margins are the same). In list views, the height of th e title bar is 30 pix els and the top margin is always 3 pixels. The length of the ti tle bar depends on the Application Area width and there is always a 3-pixel m argin on the left and right-hand sides. The title bar âÂÂâÂÂfill colourâÂÂâ is a gradient and has no frame. The titl e text margin is 20 pixels. Figure 54: Normal list view title bar
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: Editor title bar In the windows, the title bar only appears in the active window. The height is 30 pi xels, and the margins to the window frame on the top, l eft and right are 1 pixel each. In the in active window the title bar âÂÂâÂÂturnsâÂÂâ to the ti tle line. Its stroke wid th is 2 pixels. T he length o f th e title lin e is th e same leng th as the ti tle bar would be in the same window. The font in the inactive windo w is Systemfont24bold and the colour is pl ain black. The title text m argin is 8 pixels. Figure 56: Title bars in window layout in an active frame Figure 57: Title bar in window layout in an inactive frame In the dialogs, the title b ar height is 30 pixels and the top-, left- and right-hand margins are 1 pixel each to th e frame, as in window layout only the title text margin is 20 pix els. Figure 58: Title bar in dialog
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 and the info te xt. The text is aligned to the right along the right-hand margin. Figure 60: An example of informative text on the title 11.4.2 Scroll bars Scroll bars are visible only when there are items to b e scrolled, i.e. when th ere are more i tems than c an fit on the screen at any one time. Th e height of the scroll bar depends o n the view . The scroll bar doe s not exceed the margins in the list views, but in the editors and in windows the scroll b ar resides close to the frame without any margins.
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 between the scroll b ar and the application frame or the edge of the view beneath it.
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 search field depends on the view. The func tionality may differ a little according to the application, but the visual outlook is the s ame in all applications. The icon on the right-hand side changes, depending on th e context and function. Note that the width of the search box in dialogs has to be re stricted according to dialog size! Figure 66: A Search Box
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 middle. Ensure that the selected item does not hit the selection frame borders . Figure 67: Selection bar and grid c ursor 11.4.5 Java an d Web Controls As the UI is manipulated by the keyboard, the con trols should not look âÂÂâÂÂclickable.âÂÂâ Buttons, check marks and option balls should only be used in Java and Web applications where it is possible to use a pointing device (Arrow Manipulated Pointer). Figure 68: A Web page 11.5 Colours The display colour is 12 bits and the to tal colour capability is 4096 tones. The communicator UI uses a syst em palette tha t defines the colour for every control a nd component in the UI. In th e UI, there are four optional system palettes. If new components are created, the colours should conform to the system pal ette. Keep it simple. In addition to black, grey and white, one main colour in the system is enough . Usually, the dominant colour is presented in th e Title b ar.
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 information. 11.6 Icons Most common icons can be divided into Application icons, List icons and Note icons. There are also several indications of different sizes and small icons in the UI, which are defined by th e application. Small list icons should be kept very simple and two dimensional. Application icons and note icons can be three dimensional and more detailed. The metaphors are usually taken from everyd ay situations, mostly from the office environment. The me taphors should be globally relevant, not offensive or ambiguous (see also chap ter 13). In all icons, the light comes from the upper left-hand corner. The shadows are on the bottom right and behind the object. The viewing angle of the objects in icons is from the fron t top left or right (and in small list icons, directly from the front ). 11.6.1 Icon palette Icons have their own 35-colour palet te, which should be us ed when a new icon is created. The colours are pure and bright to bring âÂÂâÂÂspice âÂÂâ and fun to the UI. Colour RGB 1 White 240,240,240 2 Grey1 48,48,48 3 Grey2 80,80,80 4 Grey3 96,96,96 5 Grey4 128,128,128 6 Grey5 160,160,160 7 Grey6 176,176,176 8 Grey7 192,192,192 9 Grey8 208,208,208 10 Grey9 224,224,224 11 Black 0,0,0 12 Light yellow 240,240,96 13 Yellow 240,240,0 14 Light orange 240,224,144 15 Orange 240,160 ,0 16 Beige 224,176,112 17 Brown 192,112,32 18 Reddish brown 160,48,0 19 Dark brown 112,48,16 20 Red 240,0,0 21 Pink 240,48,112 22 Light pink 240,176,192 23 Smoke (greyish blue) 96,128,176 24 Light blue 192,224 ,240
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 large 64 x 50 pix el icon that resides in the Wide Indicator Area (or in the Application Group view). Also, every application needs a small list icon, which is used in Application Group view and also as a file form at icon. 11.6.3 List icons List icons are 25 x 20 pixels and they are usually prese nted in the application lists beside the text. 11.6.4 Note icons Note icons are 50 x 50 pixels. The note icons have a background which con sists of a 30 x 30 pix el gradient colour block. This colour highlights which note type is in question. Roughly speaking, notes can be divided into serious error notes, information and confirmation notes, and progress notes. The colour coding is used to diff erentiate be tween notes: a red gradient is used for error no tes when d ata are about to be lost or corrupted; a yellow gradient is us ed when user attention is need ed, and a blue g radient is used when the system provides the user with information on an ongoing process, that is, information of a useful or positive n ature.
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 fo r various UI events, if the developer does not want to create UI sounds on his/her own. - Audio feedback is a useful aid w hen the user is busy or vis ually restricted. Sometimes th e use of sounds is also an effective way to point out an important or hazardous even t. - Allow the user to modify the sound se ttings; some users h ave different needs for loud, discrete and silent sound options. Some users might prefer a subset of sounds or might want to turn some sounds off. - The user must b e abl e interrupt al ert tones. - Do not exaggerate the use of sounds; Designing a high-quality sound set is an art form but i t is rather easy to create 'audio pollution.'
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 British English: ⢠âÂÂCENTREâ not âÂÂcent erâ â¢ âÂÂCANCELLINGâ not âÂÂca ncelingâ â¢ âÂÂCOLOURâ no t âÂÂcolorâ â¢ âÂÂSYNCHRONISEâ not âÂÂsynchronizeâ â¦but remember that some technical terms are based on Americ an English spelling: ⢠âÂÂPROGRAMâ not âÂÂprogramm eâ â¢ âÂÂDIALOGâ not âÂÂdialogueâ Keep your writing simple: ⢠Do not use jargon ⢠Avoid difficult t erms or explanations that the user would no t understand ⢠Keep your sentences short ⢠Use simple sentence structure Keep your writing explicit: ⢠Do not keep important things from the user ⢠Try to figure out what the user needs to know to be able to perform the r equired task Be consisten t in the terms th at you us e. Avoid noun-disease: ⢠Say âÂÂâÂÂLock the keypadâÂÂâ instead of âÂÂâÂÂActivate the keypad lockâÂÂâ 13.2 The commu nicator Officially the communica tor is The Nokia 9210 Communicator (N .B. capital letters). When ref erring to the communicator in gen eral, you c an use either âÂÂâÂÂcommunicatorâ â or âÂÂâÂÂdevice ,âÂÂâ but n ever âÂÂâÂÂtelephone âÂÂâÂÂ. 13.3 Application na mes Writing style: if an application name consists of more than two words, only the first is written with a c apital letter. Exceptions: Backup/Restore, Install/Remove software (applications with two distinctive functions) and World Wide Web. Note, also, that Internet is AL WAYS written with a capital letter in English. 13.4 Punctuatio n Do not use exclamation marks at the end of error messages and avoid using them in general. They can s eem rude and can cause unneces sary ala rm.
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 S IM contacts cop iedâÂÂâ Use double quotes whe re the text is user-gen erated, e.g. for the name of a user's file : ⢠âÂÂâÂÂAbout to dele te Contac t card fo r âÂÂâÂÂN.N.â â Are you sur e?âÂÂâ Use three dots in mess ages to denote an ongoing process: ⢠âÂÂCallingâ¦,â âÂÂReceiving...,â âÂÂPlaying...,â âÂÂRe ady to receiveâ¦, â âÂÂScanning for printer⦠,â âÂÂConversion in progressâ¦âÂÂ. Avoid using other than standard abbreviations. Note, also, that even if in English you have a standard abbreviation for a word, in some other languages you may have to use the whole word (âÂÂBccâ = âÂÂPiilokopioâ in Finnish). Some standard abbreviations used in English: ⢠hour h ⢠minute min ⢠second s ⢠binary digit bit ⢠bits per second bit/s ⢠kilobit per second kbit/s ⢠byte B ⢠kilobyte kB ⢠megabyt e MB ⢠kilohertz kHz ⢠megahertz MHz ⢠minimum min. ⢠maximum max. ⢠number no. Do not contract negations: ⢠âÂÂIS NOTâ not âÂÂisnâÂÂtâ â¢ âÂÂCANNOTâ not âÂÂcan'tâ â¢ âÂÂDO NOTâ not âÂÂdon'tâ Pay attention to hyph ens: ⢠âÂÂBuilt-inâ ( dictionary) ⢠âÂÂRead-onlyâ â¢ âÂÂLi-ion bat teryâ â¢ âÂÂE-ma ilâ preferred, âÂÂem ailâÂÂ/âÂÂmailâ acceptable within text ⢠âÂÂ3-second dela yâ â¢ âÂÂ14400 bit/sâ (not âÂÂ1440 0-bit/sâÂÂ) ⢠âÂÂSIM cardâ â¢ âÂÂPIN codeâ See suggested terms in chapter 18.2.
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, or path names that presum e a particular language. Code should also con tain support for locale-specific hardware. Pay careful at tention to the differences betwe en various languag es and cultures: ⢠Calendar differences ⢠Not everybody uses the Gregorian calendar ⢠There are variations wi thin the same calendar sys tems (e.g. the day the week b egins) ⢠Date formats ⢠Time formats ⢠Address formats ⢠Phone number formats ⢠Numbers ⢠Thousands separator ⢠Decimal separator ⢠Currency ⢠Weight s and measures ⢠Conventions in use of uppercase and lowercase letters ⢠Compar ing a nd sorting ⢠Keyboa rds and other hardware ⢠Double- and multi-byt e enabling ⢠List separators 14.2 Graphics and audio Do not hard-code graphics or audio, but aim for a global or, at least, an international design. Check that your metaphors work in all the required languages. Check that your icons and sounds are cultur ally acceptable. Note that different cul tures have different taboos; for ex ample human body parts m ay have unwelcome connotations in many cultures. Avoid including text in graphics (it might have to be localised). Notice differences bet ween tones: ⢠The concept of scale differs across cultur es. ⢠Some tones can give offence to the us er. ⢠Not a ll tones are suitable for ev ery environment. A loud volume lev el in Tuupovaara may not seem so loud in New York City. 14.3 Provide room for text expansio n Do not optimise any user in terface elemen ts for the English text lengths. English is a âÂÂshortâ language.
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öpostiviestinäâÂÂâ in Finnish. Thus, allow at least 30 %for the horizo ntal expansion of texts . If your softwar e is going to be localised in to languages that use ideogram s or glyphs (Chinese, Jap anese, Arabic) , allow 10-20% for the vertical expansion of texts. 14.3.1 Do not d eclare b uffers of an e xact s tring Do not declare buffers of the exact size o f a word or sentence, as th ey will overflow when th e text is localised. 14.4 Avoid clever use of strings Avoid concatenating text strings. You might save space and it might work in English, but that does not mean that it will work in other languages. English grammar and syntax are uniqueas are the gr ammar and syntax of every other language. If you can, tes t your English cons truction with oth er languages. T his is usually enough to show th e faults in th e clever code. 14.4.1 Do not reuse strings Every single display text should have a string of its o wn in the resourc e files. For example, in many l anguages adjectives and nouns are declined according to gender and number. A single string displayed in different contexts will be correct i n gender and number in some cas es but incorrect in others . 14.4.2 Watch ou t for com posi te mes sages The word order may have to b e different for some languages, so use order-independent formatting functions to code your composite messages. Also, the gende r and number of the variable af fect the gender and number of the other words in the same con text. 14.4.3 Watch ou t for dyn amic tex t inse rtion A program that ins erts user-enter ed text into a predefined s tring may produce syntactic al errors in any languag e, including English. If you use dyn amic text insertion, test your end result carefully. 14.4.4 Do not use clev er plurals The rules for constr ucting plural nouns vary from languag e to langua ge, and can vary even within a single lang uage. For example, adding an âÂÂâÂÂsâÂÂâ at run time is not a universal solu tion for English. Another b ad option is to use âÂÂâÂÂ(s)âÂÂâ as a fixed suffix, as in âÂÂâÂÂYou have 1 n ew message(s),âÂÂâ and to assume that something similar can be constructed in every language. Your best strategy is to spell out e ach possible pluralisation in your resources, rather than use a fixed suffix or constructing plur als at runtime. Giving all the options for si ngular and plur al may no t be enough, since som e languages (Arabic, Slovene, Saami) have a dual case. 14.5 Do not assume the code set A code s et is an encod ed set o f char acters in whi ch each c harac ter is a ssociat ed wit h a nume ric valu e. Note that the same character set can be encoded in different code sets. In other words, two code sets c an define the same characters using different codes for each charac ter. Do not limit character parsing to Latin script. In particular, watch out for cas e mapping and string comparison. Operations that check wheth er a character is between A and Z might work for English, but they exclud e important characters in just about ev ery other language in the world. Use generic system functions for cases like this.
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 charac ter, some characters ar e decomposed into differen t parts, and sometimes a character can have different representations depending on th e context. 14.6 Use international syst em functions Get to know the operating system and programming langu age used. Take advantage of the generic sys tem support for international conventions (culturally correc t sorting, searching, character typing, string mapping, currency and number formats, date and time s trings, and calendar formats) when ever possible and save yourself a lot of trouble. Writing efficient code yourself is no use if you h ave to change it for each and every localised version. 14.7 Use unique log ical names Use unique logical nam es, also ref erred to as string identifiers, to identify your stri ngs, even if the system does not force you to do that. Also, unique logical nam es must be used with translation data bases and other sophisticated localisation t ools. Use a clear naming convention to identify the v arious string types that is, in order to be able to distinguish b etween texts that correspond to dialog, menus, buttons and mess ages. Agree with localisation about localisation file formats beforehand. 14.8 Provide instructions for locali sation Clarify the context of strings to be localised by providing commen ts in the resource files or separate text fil es. For example: ⢠Does the string appear in a dialog, menu, button or a message? ⢠When does this note appear? ⢠Does the string âÂÂâÂÂMailâÂÂâ mean the v erb âÂÂâÂÂto mailâÂÂâ or th e noun âÂÂâÂÂa m ailâÂÂâÂÂ? ⢠What are the parameters o f this message and where c an they be found? ⢠What other texts and graphics are s hown simultan eously with this stri ng? ⢠Are there space limitations on this string? Hide or identify strings that should no t be localised. Put these strings in a separate resource or use a standard way to name identifiers. 14.9 Check English Use correct language and consis tent terminology when composing messages and o ther translatable s trings. Have a linguist or a professional writer edit you r texts before translation.
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 action ⢠there is a process going on ⢠the process has ended It is very important that feedback be provided for process es that last for a period that the user m ay find annoyingly long. The feedback mus t not block other us er activity . 15.2 Response time - For the user to f eel as if the program's response is instantaneous, th e UI ought to react wi thin 0.1s. In thes e cases, a simple graphical feedback, wi th or without sound, is often adequ ate. - The maximum length of an interruption, on averag e, that the user c an tolerate is approximat ely 1 second. If you exceed this, you may break the us erâÂÂs concentr ation and poten tially frustr ate him or her . Therefore, things like redraws, or drawing of dialogs that a user will encounter mid-flow, ought to happen well within this limit. - For these cas es, an Inform ation Banner or Flashing Note c an be used. - 10 seconds is the utmost limit that the user's attention can focus on a dialog. Any longer than this and users will want to perform other ta sks while the process is going on. The refore: - make sure the progress indicator gives the user an indication of how long the task will take - wherever possible, and definitely above this limit, try to make the progress indicator non-modal. Use progress messages in the background like in th e Web browser. Note that the feedback on time-to-completion becomes even more important if the response time is highly variable, since users will not know what to expect. Users should be allowed to cancel processes that take long periods of time. - Suitable notes for these purposes are: - a Cancel Note with animation or Progress Bar - Progress Ball There are two kinds of response time: - System response: command activation can be emph asised by graphical and/or audio feedb ack. Use Information Banners when the use of notes would b e too exces sive and annoying (s ee chapt er 9). - Delay caused by transmission: when the delay is c aused by the transmission, the UI must - provide a note about the delay - inform the user of t he reason for the delay - allow th e user to cancel th e oper ation - provide audio feedback on the progression - Display an animation (optional)
63 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. 16. FILE HANDLING 16.1 Saving - There is a global default folder th at can be changed in the Control P anel. Applications will refer to this global default folder. - Note the following : - When performing âÂÂsave as â for an unnamed docume nt, the global default folder is always used - When performing âÂÂsave as â for an already named docum ent, a current folder is proposed - If a file with the same name exists, the new file is ren amed with a sequ ential number in p arenthesis, e.g. <newfilename (n )>, whe re n={2,3,4,. ..} - Applications that save files should remember the folder that files are saved to, and suggest this folder as the default for the next saving ac tion. - Support flexibility: different people organise things in diff erent ways (sort by date, file type, project, customer, etc.). - Ask the user for the n ame once and only once. 16.2 File namin g EPOC file names are c ase-sensitive at a UI level, and retain the capital letters they were giv en when crea ted, but the filing system does not distinguish between upper and lower case. It is therefore not possible to have two files of the same name in t he same folder, even if th ey are in a diff erent ca se: for example, âÂÂDocumentâ and âÂÂDOC UMENT.â 16.3 Using file name extensio ns File extensions are not used e xcept where req uired to differentiate files of the same name. Do no t show file n ame extensions to the user whe n it is not necess ary! 16.4 Folders The user should be able to use the device without using the file m anager. File/folder creation and deletion across applications is possible within application menus or common dialogs. 16.5 Protect user data The users' data is important â they have invested significant time and effort to input the d ata, and trust you to respect thi s. Be very careful not to i nadver tently d elete any user d ata. The two approaches are outlined b elow. Only one of the two approaches should be used: - Undo: an âÂÂUndoâ option should be provided w herever deletions are routine, and providing a dialog would prove excessively irritating to the us er. For example, âÂÂundoâ is provided in text editors â w e would not wan t to ask for confirmation on deleting individual characters. - Confirmation: confirmation should be requested whe never the deletion is extreme and irreversible . The confirmation dialog should contain as much relevant infor mation as possible (and no unnecessary inform ation). Examples of confirmations: - Calendar delete entry - File deleting
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 expense to the user. - Make sure that the co nnectio n, etc. d oes not s tay ac tive aft er the us er has end ed 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 specific Enter Default command (Button1 underlined) Application specific Esc Application specific Application specific Up/Down Arrows key Applicat ion specific Application specific Views Right/Left Arrows key Applica tion specific Application specific Tab Opens a control (e.g. Choice list -> text lis t box) Open control (e.g. Choice list -> text list box) Enter (when control not opened, e.g . choice list) Opens a control (e.g. Choice list -> text lis t box) Closes the dialog (if possible, e.g. no editors) Enter (when control opened, e.g. text list box) Optional default command = Button1 underlined (e.g. OK) OK (makes selection) Esc Cancel (d ismis ses d ialog ) Cancel Up/Down Arrows key Changes the focus from o ne control to another Changes the focus from o ne control to another Dialogs Right/Left Arrows key Focused on the active control (control dependent) Focused on the active control (control dependent) 18.2 Recommended term s TERMS COMMENTS (unnamed) Name of a file, access p oint, etc . with no n ame, âÂÂUNNAMED â not âÂÂâÂÂno nameâÂÂâ <unnamed en try> Name of a cont act card with no thing writt en in the âÂÂN ameâ or âÂÂCompanyâ fields Activate You ca n activate a held voice call, synchronisation, infrared receiving and so on, contr. Hold, Disable Add âÂÂAddâ vs. âÂÂNewâÂÂ: âÂÂADDâ adds an already existing item (program) which you can select from a list; âÂÂNEWâ creates an item from sc ratch Alarm interval âÂÂSnoozeâ preferred B B = byte(s), kB = kilobytes, MB = megabytes Backup (noun) âÂÂâÂÂThe backup se t is not reli ableâÂÂâ Back up (verb) âÂÂâÂÂAbout to back up âÂÂâÂÂxxxâÂÂâÂÂâÂÂâ Battery Use: âÂÂâÂÂBattery is lowâÂÂâ / âÂÂâÂÂBattery is almost emptyâÂÂâ / âÂÂâÂÂBattery is fullâÂÂâÂÂ
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â totall y cancels the op eration that you have started and r eturns to the stat e that existed b efore you start ed; âÂÂInterrupt â interrupts, for example, a b ackup that you have started, but it will save the backup made so far Change âÂÂCHANGEâ no t âÂÂAl terâ Clear âÂÂCLEARâ not âÂÂEr aseâÂÂ; âÂÂClearâ vs. âÂÂDele teâ vs. âÂÂRemo veâÂÂ: âÂÂCL EARâ deletes, fo r examp le, one letter at a time or items from a list; âÂÂDEL ETEâ deletes a whole file/folder or an action for good; âÂÂREMOVEDâ items can be replaced somehow , for example, by reinstallation Contact card A file, a âÂÂcardâ in the Contacts application: contains name, addresses, phone numbers, etc. Contact group A group of contact cards which functions as a dis tribution list for sending SMS and Mai l Contacts datab ase A database containing con tact c ards in a Memory ca rd Continue âÂÂCONTINUEâ not âÂÂâÂÂGo on âÂÂâ Copy âÂÂCopyâ vs. âÂÂDuplicateâÂÂ: âÂÂDuplicat eâ makes a copy of an item, as is, to the s ame place as the original; âÂÂCopyâ copies an item in the same place (folder) but with a different name Default âÂÂDEFAULTâ not âÂÂPreferredâ or âÂÂStand ardâ Delete See âÂÂâÂÂClearâÂÂâ Details âÂÂDetailsâ vs. âÂÂOptionsâ vs. âÂÂSe ttingsâÂÂ: âÂÂDetailsâ (calendar en try details) are the settings of a fairly small feature; â Optionsâ (send options of an SMS) are the temporary options of one feature that chang e the settings for only one operation; âÂÂSettingsâ are the p ermanent options of a larger func tionality, for example SMS, Fax or Telephone Disconnect In data calls âÂÂHANG UPâÂÂ; in voice calls âÂÂEND CALLâÂÂ; in PC connectivity âÂÂDIS CONNECTâ Display (noun) âÂÂDisplayâ and âÂÂScreenâ b oth usab le; âÂÂScreen â preferred Display (verb) âÂÂDISPLAYâ not âÂÂS howâÂÂ; âÂÂDisplayâ vs. âÂÂViewâÂÂ: the device âÂÂdispl ays,â th e user âÂÂviews âÂÂ; use âÂÂViewâ as a bu tton text, but âÂÂâÂÂNot enough memory to display the selected imageâÂÂâ Duration âÂÂDurationâ vs. âÂÂL engthâÂÂ: â Durationâ in seconds/minu tes; âÂÂLengthâ in metres Edit âÂÂEDITâ not âÂÂModifyâ End call In data calls use âÂÂHANG UPâ ; in voice calls âÂÂEND CALLâÂÂ; in PC connectivity âÂÂDIS CONNECTâ Enter âÂÂENTERâ no t âÂÂWri teâÂÂ: âÂÂâÂÂEn ter fol der nameâ â Failed âÂÂFAILEDâ not âÂÂâÂÂNot succeededâÂÂâ Fetch WWW: te xt of th e butto n for fe tching a URL Find/Search âÂÂFIND,â not âÂÂSe archâ Forward/B ack WWW b rowser: âÂÂFOR WARDâ no t âÂÂNext,â âÂÂBAC Kâ not âÂÂPreviousâ Go WWW Hang up In data calls use âÂÂHANG UPâ ; in voice calls âÂÂEND CALLâÂÂ; in PC connectivity âÂÂDIS CONNECTâ Image âÂÂIMAGEâ not âÂÂPictureâ o r âÂÂPhoto,â of JPE G or UPF im ages
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 âÂÂCancelâ vs . âÂÂInterrupt âÂÂ: âÂÂCancel â total ly cancel s the op eration that you have started and r eturns to the stat e that existed b efore you start ed; âÂÂInterrupt â interrupts, for example, a b ackup that you have started, but it will save the backup made so far Length âÂÂDurationâ vs. âÂÂLengthâ : âÂÂDurationâ in seconds/minutes; âÂÂLengt hâ in metres Memory Use: âÂÂRunning out of memoryâ / âÂÂNo t enough memoryâ (no t âÂÂInsufficient memoryâÂÂ) / âÂÂOut of memoryâ (not âÂÂMemory fullâ ) Memory card âÂÂMEM ORY CARD,â not âÂÂMMC â or âÂÂDiskâ Next/Previous in WWW âÂÂForw ardâÂÂ/âÂÂBackâÂÂ; elsewhe re (documen ts, calendar ev ents) âÂÂNextâÂÂ/âÂÂPreviousâ On/Off âÂÂOnâÂÂ/âÂÂOffâ vs. âÂÂYesâÂÂ/âÂÂNoâ : use the v alues âÂÂOn âÂÂ/âÂÂOffâ when the setting is a noun phrase: âÂÂPhone key clickâ - âÂÂOnâÂÂ/âÂÂOffâÂÂ; use âÂÂYesâÂÂ/âÂÂNoâ when th e setting is a proper sentence: âÂÂSend long m essagesâ âÂÂYesâÂÂ/âÂÂNoâ Options See âÂÂDetailsâ Remove See âÂÂClearâ Rename âÂÂRENAMEâ not â Give a new nameâ Save âÂÂSAVEâ not âÂÂStoreâ Save as Send via IR âÂÂSEND VIA IRâ no t âÂÂSend by â or âÂÂTran sfer ov erâ Settings See âÂÂDetailsâ Start âÂÂST ARTâ not âÂÂBegin, â âÂÂInitiate, â âÂÂCommenceâ Time limit âÂÂTIME LIMITâ not âÂÂMaximum timeâ Try again âÂÂTRY AGAINâ not âÂÂRetryâ Undo âÂÂU NDOâ not âÂÂDiscardâ or âÂÂIgnoreâÂÂ; for example âÂÂUndo changesâ View âÂÂVIEWâ not âÂÂShowâÂÂ; â Displayâ vs. âÂÂViewâÂÂ: the device displays, the user views; âÂÂViewâ preferred 18.3 Shortcut List General Keys pressed Key Ctrl Chr Shift Function Description <x D e c r e a s e Contrast Decreases Contrast (setting in Control Panel) >x I n c r e a s e Contrast Increases Cont rast (set ting in Control Panel) A x X About Open About Dialog of 3 rd par ty applications E SC Cancel and dismiss Cancel and dismiss a Dialog, and dismiss an Information No te Green IR activ ation icon x IR act ivation Green IR activation icon resides i n button ':' (colon) in UK keybo ard Green magnifier glass (minus) icon x Zoom out Green magnifier glass (minus) icon resides in button '< ' (less than ) in UK
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 Opens an application specific help. The key combination may vary according to language versions File Dialogs and hierarchical trees Keys pressed Folder Details Function Left arrow No subfolders, has a p arent folder Jumps to the parent folder, no collapsing Left arrow No subfolders, no parent folder Not hing happens Right arrow No subfolders, no parent folder Not hing happens Right arrow Contains subfolders, collapsed Expands current folder Left arrow Contains subfolders, collapsed, has a parent folder Jumps to the parent folder, no collapsing Left arrow Contains sub folders, expa nded Collapses current folde r Contains subfolders, collapsed Expands current folder - Contains subfolders, expanded C ollapses current folder Tab C ontains subfolders, collapsed Expands current folder Tab C ontains subfolders, expanded Collapses current folder Applications views: Lists, Ed itors and V iewers Keys pressed Key Ctrl Chr Shift Function Description - x Decrease font Decreases Font size in Edi tor x Increase fon t Increases Fon t size in Editor A x Selects all Selects all items in a List/Editor/Viewer A x x Change alignment Changes paragraph alignmen t in this order: (1) Left (2) C entred (3) Ri ght(4) J ustifi ed (1) Left (2) Ce ntred Arrow D x Mark/Select Marks line in Editor (down) Arrow D X Page down Page Down in Editor/Viewer/ List Arrow D X x Mark a pag e down Mark a p age Down in Ed itor Arrow D x Mark/Select Marks item in Li st Arrow D x Move Moves cursor a p aragraph down Arrow D x x Mark paragraph down Marks a paragraph down Arrow D x X End of document Goes to the e nd in Editor/Viewer/ List Arrow D x X x Mark to end of document Marks to the end in Edi tor/Viewer/ List Arrow L x Mark Marks char in Editor (left) Arrow L X x Mark to the beginning of the line Marks to the beginning o f the line in Editor Arrow L x Move word left Moves a word left Arrow L x x Mark word l eft Marks a word to the left Arrow R x Mark Marks char in Editor (right)
69 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. Arrow R X E nd = 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 Mark/Select Ma rks item in List/Marks line in Editor (up) Arrow U X Pa ge ip Page Up in Editor/ Viewer/List Arrow U X x Mark page up Marks a Page Up in Ed itor List Arrow U x Move Moves a paragraph up Arrow U x x Mark paragraph up Marks a paragraph up Arrow U x X Top of document Goes to the beginning in Editor/Viewer/List Arrow U x X x Mark to top of document Mark to the beginning in Edi tor/Viewer/List Bx Bold Bold text (in Editor) B x x Insert bullet Backspace Delete Deletes items if command âÂÂDele teâ is available in Menu or CBA Backspace Delete Deletes the marked area/char in editors Backspace x Delete Deletes the ch ar to t he right of the cursor or marked ar ea/char in editors C x Copy Copies data to the Clipboard D x Indents dialog Opens Indents Di alog (in Editor) D x Delete Deletes item in Editor/Viewer/List E x Close Closes (no Close in Menu) E x x Zoom ra t io Enter X Page break I n edit ors Enter X Line break In editors Esc Go upper folder In some views, Esc goes one level up in the hierarchic al tree Esc Canc el a d ialog F x Find Find (menu) in editors/view ers F x x Font dialog In editors F x x Forward Forwards a mess ag e G x Go to Goto Dialog G x x Style gallery H x Repla ce O pens Replace Dialog H x x Bullets dialog Opens Bullets Dialog Ix Italics Italics text (in Editor) I x Sort by Changes the âÂÂsort byâ factor IX X M e r g e i n I x x Sort order Changes the sort order J x Find next Find Next (when needed ) J X X Format object Format Object Dialog K x Preferences View Pre ferences K X x General prefer ences View General Pr eferences L X Spell Check Spell Check Lx x L o g Mx M o v e M x x Move to group
70 (71) Copyright é Nokia Mobile Phones 2000 . All rights reserved. N x New file Creates a new file N x x New folder Creates a new folder O x Open Open dialo g O X X Insert 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 opt ions dialog Q x Swit ch view Q X Arrow Manipulated Pointer Toggles Arrow Manipulated Pointer On/Off Q X X Password Set password R X Revert to saved R X Reply Replies to a message sender R X X Reply all Replies to all S x Save Saves the file S x x Save as Opens s ave di alog Space Bar x Mark word Marks a word in Editor (Selection B ar on a word) T X Full Screen Mode T X x Show t op toolbar Tab Jump right Jumps to window on the right (in a View) Tab x Jump left Jumps to window on th e left (in a View) U x Underline Underline text (in Editor) UX X P a g e s e t u p V x Past e Pastes data from the Clipboard V x x Print preview Print preview W X Wrap to screen W X X Word coun t X x Cut Cuts data to the Clipboard Y X Redo When possible Y x x Tab positions Tab dialog Z x U ndo Reverses last operation Z X X Edit object E dit object dialog
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 product and company names mention ed herein may be trademarks or tradenam es of their respec tive owners. Nokia operates a policy of continuous development. Nokia reserv es the right to mak e changes and improvements to any of the products described in this document without prior notice. Under no circumstances shall Nokia be responsible for any loss of data or income or any special, incidental, consequential or indirect d amages howso ever caused. The contents of this document are provided "as is". Except as required by applic able law, no warranties of any kind, either express or implied, including, bu t not limited to, the implied w arranties of merchantability and fitness for a particular purpose, are made in rel ation to the accuracy, reli ability or contents of this document. Nokia rese rves the right to revise this document or withdraw it at any time without prior notice.