Nokia Series 60 Manual

NOKIA SERIES 60 UI STYLE GUIDE Copyright ÃÂ© Nokia Corp oration | ver. 1. 4 1
Editorial notes A style guide should give an overview and provide enough guidelines for designing good applications, but not all the information to write the software. This is intended to be a compact and easy to read guide, which me ans skipping many details that ca n be found in other documen ts. There's no general discussi on about good usability; instead this docum ent tries to clarify how the s tyle elements of the Nokia Series 60 user interface are meant to be used in practice. The content is also intended to be ind ependent of produ ct-specific hardware, so that the guidelines would apply to any product that implements the UI style. Sometim es this means dropping out things that would be appropriate for one product but maybe not for another on e. A few example imag es in this version are not final. Seppo Helle, 31.10.2001 2
Contents ABOUT TH IS DOC UMENT ............................................................................................................ .................................... 7 PURPOSE ....................................................................................................................................................................... 7 AUDIENCE ..................................................................................................................................................................... 7 1. WHERE N OKIA SER IES 60 UI BEL ONGS ............................................................................................... ................. 8 2. HARDWARE R EQUIREM ENTS .......................................................................................................... ......................... 9 DISPLAY ........................................................................................................................ ...................................................... 9 KEYS .......................................................................................................................... .................................................... 10 EXTRA K EYS ..................................................................................................................... ........................................... 10 3. GRAPHICAL COMPONENT S........................................................................................................... .......................... 11 WINDOWS AND PAN ES .............................................................................................................. .................................. 11 STANDARD PANES IN A PPL ICAT ION WINDOWS .......................................................................................... .......... 12 MAIN PANE ...................................................................................................................... ........................................... 12 STATUS PANE .................................................................................................................... ......................................... 13 TITLE P ANE ..................................................................................................................... ............................................. 13 CONTEXT P ANE ................................................................................................................... ....................................... 14 NAVI PANE ...................................................................................................................... ............................................ 14 SIGNAL PAN E .................................................................................................................... ......................................... 15 BATT ERY PANE / UNIVERSA L INDIC ATOR PANE ........................................................................................ ........ 15 CONTROL P ANE ................................................................................................................... ...................................... 16 POP-UP WIN DOWS ................................................................................................................. ....................................... 16 PRESENT ATION OF TEXT........................................................................................................... ..................................... 18 JUSTIFICAT ION .................................................................................................................. ......................................... 18 TRUNCA TION ..................................................................................................................... ......................................... 18 4. INTERACT ION STYLE .............................................................................................................. ................................... 18 KEYPAD FU NCT IONS ............................................................................................................... ....................................... 18 KEY PRES SES .................................................................................................................... .......................................... 18 KEYPAD TON E.................................................................................................................... ......................................... 19 TYPICA L FUNCTIONS OF TH E ST ANDARD KEYS ......................................................................................... ........ 19 NAVIGATION ..................................................................................................................... ............................................... 22 NAVIGATING IN APPLIC AT IONS..................................................................................................... ........................ 22 NAVIGATION USIN G TAB S .......................................................................................................... ............................ 23 FOLDER H IERARC HIES ............................................................................................................. ................................ 24 3
NAVIGATION USIN G LINKS......................................................................................................... ............................ 25 5. UI COMPON ENTS .................................................................................................................. .................................... 25 LISTS AND GRIDS................................................................................................................ ............................................ 25 HIGHLIGHT ING ........................................................................................................................................................... 25 EMPTY LIS TS AND GR IDS .......................................................................................................... .............................. 26 LIST B ROWSING.................................................................................................................. ....................................... 26 SCROLL ING INDIC ATOR F OR L ISTS .................................................................................................. ..................... 27 ORDER OF ITEMS AN D BRO WSING I N GR IDS........................................................................................... ......... 28 SCROLL ING INDIC ATOR F OR GR IDS .................................................................................................. ................... 30 LIST T YPES ..................................................................................................................... ................................................... 30 MENU LIST ...................................................................................................................... ............................................ 30 SELECTION LIST................................................................................................................. ......................................... 31 MARKABLE L IST .................................................................................................................. ....................................... 34 MULTISEL ECTION L IST ............................................................................................................ .................................. 36 SETTING L ISTS .................................................................................................................. .......................................... 37 FORMS .......................................................................................................................... ............................................... 40 LIST L AYOUTS ................................................................................................................... ............................................... 43 COLUMN STR UCTUR E OF LIS TS ...................................................................................................... ....................... 44 LIST IT EM TYPES ................................................................................................................ ........................................ 45 NUMBER ED ITEMS ................................................................................................................. ................................... 48 ITEM TYPE C O MBINAT IONS ......................................................................................................... ........................... 48 GRID TYP ES ..................................................................................................................... ................................................. 49 FIND PANE...................................................................................................................... .................................................. 49 OPTIONS MENU ................................................................................................................... ........................................... 50 SUBMEN US ....................................................................................................................... .......................................... 51 UNAVAILA BLE ITEMS .............................................................................................................. .................................. 52 OTHER OPT ION MENUS ............................................................................................................. .............................. 52 OPTIONS TEMPLA TE ............................................................................................................... ................................... 53 NOTES ......................................................................................................................... ..................................................... 56 SOFT NOTIF ICATI ONS............................................................................................................. ........................................ 58 DISCARDIN G SOFT NOT IFICAT IONS .................................................................................................. .................... 59 MANY SIMUL TANEOUS S OFT NOTIFICATI ONS........................................................................................... ........ 59 QUERIES........................................................................................................................ .................................................... 60 4
CONFIRMATIO N QUERY ............................................................................................................. .............................. 60 LIST QUER Y ..................................................................................................................... ............................................ 61 MULTISEL ECTION L IST QUER Y ...................................................................................................... ......................... 62 DATA QUER Y ..................................................................................................................... ......................................... 63 INDICATORS ..................................................................................................................... ................................................ 64 SIGNAL AN D BATTER Y INDIC ATORS.................................................................................................. ................... 64 STATUS INDICATORS .............................................................................................................. .................................. 65 INDICATORS IN NA VI PANE........................................................................................................ ............................ 65 EDITING INDICA TORS IN P OP- UP WIND OWS ........................................................................................... ......... 66 SOFT INDIC ATORS ................................................................................................................ ..................................... 66 OPERATOR INDICAT OR ............................................................................................................. ............................... 67 SCROLL ING INDIC ATORS ........................................................................................................... .............................. 67 APPLICAT ION-SPEC IFIC INDI CATOR S ................................................................................................ ................... 67 6. APPLICAT IONS AND DES IGN EXAMPLES............................................................................................... .............. 67 IDLE .......................................................................................................................... .................................................... 67 APPLIC ATION SHELL.............................................................................................................. ......................................... 68 SHORT CUTS ...................................................................................................................... .......................................... 69 CUSTOMIZIN G TH E APPLIC ATION SH ELL .............................................................................................. .............. 69 FAST APPLICAT ION SWAPPI NG...................................................................................................... ........................ 69 APPLICAT ION HANDLING ............................................................................................................................................. 69 OPENIN G AND CL OSING AP PLIC ATIONS ............................................................................................... .............. 70 MULTITA SKING ................................................................................................................... ....................................... 70 APPLIC ATION INTERAC TION S ....................................................................................................... .......................... 71 PHONE ......................................................................................................................... ..................................................... 72 CALL HANDLING .................................................................................................................. ...................................... 74 VIEWERS A ND PLAY ERS............................................................................................................ .................................... 75 TEXT VI EWERS................................................................................................................... ......................................... 75 IMAGE VIE WERS.................................................................................................................. ...................................... 75 MULTIMED IA VIEWER S ............................................................................................................. ............................... 76 AUDIO A ND VIDEO PLAYERS ........................................................................................................ .......................... 76 TEXT EDIT ING ................................................................................................................... ................................................ 77 EDIT MEN U ...................................................................................................................... ........................................... 78 EDITING IND ICATOR S ............................................................................................................. .................................. 79 5
SELECTING TEXT ................................................................................................................. ....................................... 80 DOCUMENT HANDLIN G .............................................................................................................. .................................. 80 CREATING N EW D OCUMENT S ......................................................................................................... ...................... 80 SAVING E DITED DAT A ............................................................................................................. ................................. 81 FOLDERS ........................................................................................................................ .............................................. 82 GROUPS ......................................................................................................................... .............................................. 82 FETCHING DATA .................................................................................................................. ....................................... 83 SETTINGS ....................................................................................................................... ................................................... 83 6
About this docume nt Purpose The Nokia Series 60 UI Style Guide gives an overview of the Se ries 60 user interfac e and describes the essenti al parts of it, giving examples of how to use the inte rface elements. The Nokia Series 60 UI Style Guide can be used as an introduction to the style or as reference m aterial. It c an provide background m ateria l to help UI desi gners make decisions about their product. Audience This document is intended, in the first place, for peopl e who work wi th application design for devices using the Series 60 UI. It will also help persons like product managers to get a general view of th e Series 60 UI, what i t is and how it is i ntended to be used. 7
1. WHERE N OKIA SERI ES 60 UI BELONGS Nokia Series 60 UI is intend ed for use in high er end mobile phones f eaturing personal information management (PIM) and multimedia applications such a s: Calendars ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· Text and multimedia messaging E-mail WAP or other browsers Imaging The screen is suitable for vie wing short messages and c an also display colour or graysc ale i mages . The data entry interface is o ptimised for a numeric IT U-T type keypad. Other input devices are not considered in this document although it would be possible to suppor t, for example, an external keyboard. One hand operation is a key rule: the us er is able to do almost all tasks with just one hand, pressing the k eys with the thumb. A few exception s exist in functions that are targeted to power users and require pressing two keys simultaneously. Nokia Series 60 UI is not an optimal user interface for ve ry basic phones. All basic phone functions can be done with it, but the capabilities of Series 60 UI would not be fully utilised. There are other interf ace styles that are better than Series 60 UI for the very basic phones. Series 60 UI is also not designed for c ar based or wearable products, or for o ther product categories significantly different from advance d hand-held mobile phones. 8
2. HARDWA RE REQUIREME NTS Nokia Series 60 UI has cer tain requirements concerning the hardware. T his section lists the assumed hardware for the first implementation; it is possible to extend and modify the hardware to some ex tent for s ubsequent product gene rations. Display Figure 2-1. Series 60 display. The Series 60 UI display spe cifications are as follows: Resolution: 176 pixels (width) by 208 pixels (h eight). ÃÂ· ÃÂ· ÃÂ· ÃÂ· It should be possible to m odify the ver tical resolution for future genera tions. The fir st implementation , however, ass umes thes e resolutions. Square pixels. Physical size: about 35 mm (width) by 41 mm (height). Corresponds to approximately 0.2 mm pixel pitch. Significantly smaller pixel pitch r isks making some fonts too sm all to be readable. Larger pitch is possible, consider ing usability issues. Colour capability (4096 or more colours preferred ). 9
Keys The following keys are required for Seri es 60 UI: navigation keys Scroll up Scroll down Scroll left Scroll right Select key softkeys Left softkey Right softkey call handling Send key End key other Applications key ITU- T numeric keypad (0-9, *, #) Clear key Edit key Power key The navigation keys can be ordinary butt ons, or they c an be implemented using different control devices, for example a roller which can be rotated and pressed so that up, down and select functions would be mapped to it. ÃÂ· ÃÂ· ÃÂ· ÃÂ· Hardware solution may have some effect on the n avigation functionality: for example a long key press ev ent can't be accomplished with a rotating device. Each softkey has a correspo nding textual label on the bottom of the scree n. The Edit key is the only key that can b e used simultaneously with another key press, for example, the combinations where any of the navigation keys are pressed while the Edi t key is held down. See section Keypad funct ions in chapte r Inte ractio n styl e for more information about the usage of keys . Extra keys Other specific keys can be added to a product to emphasize or facilitate some functions. These extra keys c ould be used to control applications or hardw are such as spoken commands, sound recording, and audio volume c ontrol. 10
3. GRAPHICAL COMPONENTS Window s an d pa nes The display layouts are hierarchically organised. The layo uts are built using components called windows and pane s . screen Screen is the topmost display component, corresponding to the entire pixel area of the physical screen. window Window is a component that has no parent except the screen. Typically a window fills up the e ntire screen, but there are also smaller (tempor ary) windows that take up only a part of the screen, leaving other parts of the screen visible around themselves. Each application runs in a window of it's own. Applications can also use o ther temporary windows. pane Pane means a sub-component of a window ( sub- window ). A window may contain m any panes, a nd each pane may contain further sub-panes and so on. A bottom level component that cannot have a sub- component, can be called an element . Status pa ne Main pane Control pan e Figure 3-1. Panes application window An application window is a principal window filling up the entire scr een. It is usually not used dir ectly for display, but just a s a parent for the various panes. A typical application window is divided into the following panes: 11
- status pane - main pane - softkey pane See the dedicated sections for more detailed descriptions on each of these pan es. pop-up window A pop-up window does not fill the e ntire screen; the pop-up window has a frame, and typically the underlying application is partly visible around the pop-up window. Pop-up windows are typically used in temporary states. Back stepping does not usually lead to a pop-up window. Detailed information on various pop-up windows can be found in section Pop-up windows . Standa rd panes i n a ppli cati on wi ndows Main pane Main pane is the principal ar ea of the scre en where an application can display its data. There are a numb er of sta ndard components fo r applications to use in the main pane: a list There are several standard list type s to choose from . (See section Lists a nd grids for a d etailed description of list types.) a grid There are also sev eral differ ent grid types to choose from. find pane Find pane is used together with a list, and it allows the user to search lis t items alphabetically. (See section Lists and grids for more information about the find pan e.) status indicators The status indicator pane only exists in idle s tate, immediately below navi pane, and displays status indicators. A few of the indi cators appear also in the universal indicator pane (at other times th an in idle), others exist only in the status indicator pane. soft indicators Soft indicators only exist in idle state. See section Indicators for more information on s tatus indicators and soft indicators. 12
Applications can also use the main pane ar ea to f reely draw w hatever is ne eded. In that case, however, the resp onsibility of the look and feel is entirely on the application's designer. General guidelines for designing application specific main pane layouts can be found e lsewhere in this documen t. Status pane Status pane displays status information of the current application and state as well as general information about the device status Ã¢ÂÂ for example the signal stre ngth and battery charging. It occupies the top part of the scre en. Status pane m ay be non-exi stent in a fe w applications o r situations. Status pane contains the fol lowing sub-panes: Title pane ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· Context pan e Navi pane Signal pane Battery pane / Universal indicator pane Signal pane Batteery pane (Universal indicator pane) Context pane Title pane Navi pane Figure 3-2. Status pane areas. See the following sections for detailed descriptions abo ut each of these. Title pane Title pane displays a context - dependent application title or state name. Figure 3-3. Title pane Typically, the titl e text is t he descriptiv e name of the cur rent main pane view. ÃÂ· ÃÂ· In application idle, the title text is typically the application's name. 13
Context pane Context pane displays the current application's icon. Figure 3-4. Context pane. The user can recogniz e the a pplication by the con text p ane when ever the ti tle pane contains a context - s pecific text. ÃÂ· ÃÂ· The context p ane graphic may contain some dynamic el ement (for example animation) to inform the user about the application's state. Some applications (e.g. Contacts) may even use the pane in a fully dyn amic way to display some data relevant to the application. Navi pane The principal use of the navi pane is to display informati on about the current state and view, and to help the user navig ate in the application. Figure 3-5. Navi pan e. Depending on the cont ext, the navi pane can al ternativ ely contain : Tabs Figure 3-6. Tabs. Used when there are a few different data views tha t can be viewed alt ernatively. There a re arrow indicators in both ends of the widget (show n only when there ar e further t abs hidden in the corresponding direction). Each tab has either a graphic or a text (or both) as a label. The following tab layouts c an be used: - two tabs - thre e tabs - four tabs - three long tabs (stacked, so that only one is fully visibl e at a ti me) The currently active tab is highlighted. More than four tabs can exi st simultaneously; the tabs can be scrolled horizontally. However, as a 14
design guideline, the number of tabs should b e kept low (max 6 recommended), and the number should not be dynamic. (See Tabs in section Int eraction sty le for a description of their effect o n navigation within an application.) Navigation text Figure 3-7. Navigation text. Navigation text is displaye d in the navi pane when there are similar items to b e browsed by scrolling horizontally, e.g. dates in a calendar. Arrow indicators in both ends of the pan e indicate the possibility to scroll. Indicators Figure 3-8. Indicato rs in the navi pane . In editors the navi pane con tains editing indicators. (See the section Indicators for a mor e detailed description of navi pane indicators.) Application-specifi c content When none of th e above co ntent typ es is suitable , the navi pane con tent can b e designed specifically for an application. Empty pane Figure 3-9. Empty na vi pane. The navi pane c an be empty. A graphic is provided for this. Signal pane Displays the cellular signal strength indicator. Figure 3-10. Signal pane (left). The indicator may also contain inform ation about GPRS connection st atus. Battery pane / Universal indicator pane This area of the status pane is used in two differen t ways. 15
Battery pane Battery indicator is only visible in the idle state. It displays the remaining energy level of the battery, using a gr aphic al ind icator . It als o act s as a charging indicator. Figure 3-1 1. Bat tery pane (r ight). Universal ind icator pane Used for displaying univers al status indicato rs: the status indicators that need to be visible reg ardless of the current application. The maximum number of items at a t ime is 3; items are prioritized according to their importance. Figure 3-12. Univer sal indi cator pane replaces the battery pan e (ri ght). Control pane Control pane occupies the bottom p art of the screen and displays the labels associated with the two softkeys. Figure 3-13. Control pane. When there is a list that can be scrolled, the scrolling indicator arrows appear between the softkey labels. See sec tion Lists and Grids for a detailed description of the indic ators. Control pane is also ac tive during options menus, q ueries and other states using pop - up windows, although it does not r eside itself in the pop-up window. The actual softkeys should be positioned directly beneath the scree n so that the association between th e keys and thei r respec tive labels is evident. Pop-u p wi ndow s Certain UI components are displayed within pop-up win dows. A common characteris tic for all these c o mponents is that they are temporary states , which means that they do not remain open if the application for some reason is left in background processing when some othe r application takes control. Also, 16
backstepping from one state to the previous state never leads into a temporary state; they are skipped. More information on these components c an be found in section U I compon ents . Options menu The commands and op tions tha t are avail able in the current context can be acce ssed via the options menu . It is displayed as a lis t in a pop-up window. Query A query is a componen t where th e softwar e waits for user input. All query com ponents are displayed in pop-up windows. They consist of a prompt (possibly containing a graphical element) and some kind of input component. Various types of querie s exist: - confirmation query : has either on e or two possible input values, given using th e softkeys. - list query : has a limited number of possible input values, the user selec ts one from a list. - multiselection list query : has a limited number of possible input values, th e user can select zero, one or more of them in one pass. - data query : contains an input field for a numeric or alphanumeric value that the us er can edi t. Note A note is a feedback component that in forms the user about the curren t situation. Notes do not require user input. They contain a text and possibly a graphical element, the layout is similar to a confirmation query, however the softkey labels are typically non-existen t. Soft notification Soft notifications are reminders which in form the user of events that have typically occurred during the user's abse nce. Soft no tifications c an only be seen in the idle st ate, and the user can acknowledge them. There are two types of soft no tifications; the layouts resemble those of confirmation queries and list queries: - single soft notification : co ntains one no tification. - grouped soft notification : contains a number of information items presented as a list, and a title text common to all of the items. Call window Incoming calls and outgoing calls are presented in pop-up windows. See the section Call handling for more detailed information on call windows. 17
Prese ntat ion of t ext Justification Default text justification is left. There are only a few exc eptions to this, in specific cases, for example: Soft indicators in idle state. These are right jus tified. ÃÂ· ÃÂ· It must also be no ted that w hen the displa y text languag e is Arabic or some o ther language following right to left writing dire ction, m any elements a re right justified. (See [some specific docume nt] for more info rmation o n layout changes for right-to- left languag es.) Truncation When a tex t does not fit in to the vi ew where it is displ ayed, it must b e truncated. B y default, texts are truncated from the end, and three pe riods (Ã¢ÂÂ¦) are displayed in the end of the truncated te xt as an indication. Exceptions to the main rule: Phone numbers are truncated from the beginning, because the firs t digits of a phone number are usu ally considered less important than the rest. 4. INTERA CTION STYLE Keypad functions This section describes the typical functions for each key. Some application-specific functions may exist in addition to the ones men tioned here. Key presses A key press is a press and rel ease of a key (down and up). Typically, the primary action of the key is performed when th e key is pressed down, already before th e key is rel eased. (The re ma y be except ions to this rule; se e the Edit key section for an example.) Some functions depend on the length of the key press: In a short key press the key is held down fo r less th an 0.8 seconds. ÃÂ· ÃÂ· ÃÂ· If the key is held down for 0.8 seconds or more, the resu lt is a long key press . Normally, if the pressed key (in the given context) has functions for both a short and long key press, the shor t key press action is performed first at th e moment when the key is pre ssed down, and if the key press turns out to be long, then th e long key press action is perf ormed. In a few cases - the Appl ications key and the 18
Edit key - the interaction is different, c ausing the action on the key r elease event. Certain keys, possibly in cert ain contexts only, m ay perform key repeat . Key repeat starts after long key press time out when the key is continuously being held down, and the associated function is performed according to th e key repe at frequency, for example 3 times/second. (T he repeat fr equency may be user adjustable.) Moving the cursor in an editor is a typical case where key r epeat can be used. ÃÂ· ÃÂ· ÃÂ· Long key press action and key repeat ac tions are not defined at the s ame time; only one of those can occur in the given contex t. The primary k ey press actio n should not be co nflicting with th e long key press action or key repeat action. With some input hardware, lon g key pre sses and key repeat may not be possible. The roller is an example of such an inpu t device. The long key press actions and key repeat actions should be desig ned so that this does n ot cause harm: th e long key press must n ever be the on ly way to do a fu nction. Keypad tone A tone can be gen erated wh enever a k ey event occur s. The ton es for short k ey press (actually a key down event ) and long key press are differ ent; a key rep eat event u ses the long key press ton e. Keypad to ne can b e adju sted or turn ed off by the user . Typical functions of the standard keys Scroll up / Scro ll down - Move focus one item up/down in lists and grids. - Move cursor one line up/down in editor s. - Scroll view one page up/down in view ers. Scroll left / Scr oll right - Move focus one item left/right in grids. - Move cursor one character left/right in edi tors. - Move to previous/next view in tabbed views. - Move to previous/next fold er view in hier archical folder structures. - Move to previous/nex t document or view in certain document view ers. - Adjust sound volume during calls and sound playback. - Changes the value in pop-up field immediately. Select - Open the focused item (e. g. document or folder) in selection lists and grids. - Select an option in menus and lists. - Open a context - specific options menu when 19
there is no item to open and no option to selec t (see section Sele ctio n lis t ). The Select key must not directly activate any such function the user wo uld not expec t in the given situation. Therefore, the contex t specific options menu is offered in states wh ere no selectable items exist. The open/select function sh ould not be mixed with the options menu func tion within the same state; only one or the other should be used . Left softkey - Typically labeled Options . Opens the options menu. Other labels and functions: - Select . Used in m enu lists and grids wh ere further options are not available. Selects the focused item; same as Select key func tion. - OK , Ye s and other positive replies; used in confirmation queries. - In idle, a shortcut to a specific application. Configurable by the user, labeled according to the application. Right softkey - Typically labeled Back . Returns to the previ ous state. (See section Applicati on handling fo r a more detailed description.) Other labels and functions: - Exit in application main states. Exits th e application and returns to idle. - Cancel , interrupts a procedure and re turns to the preceding state; us ed in queries and other temporary stat es. - No and other negative r eplies; used in confirmation queries. - In idle, a shortcut to a specific application. Configurable by the user, labeled according to the application. Send - Answers the incoming call when the phone rings. - Creates an outgoing call when in Contacts and other states wher e the focus is in a field containing a phone number or name associated with a phone number. - Sends a messag e; used wh en in a mess age editor and To-field contains a valid address. 20
During calls: - Puts an active call on hold; makes a held c all active; swaps activ e and h eld calls if both exi st. - Answer a waiting call (if o nly one call exists already ). (See section Ca ll handling f or more detailed descriptions.) In idle: - Brings up Last dialed calls list for redialing. End - Rejects the arriving call. - When an active call exists: ends t he active call. - When only a held call exists: e nds the held call. - When both active and held calls exis t: ends the active call, makes the held call active. - When no calls exist and an application is active: returns to idle (application is not terminated). - Long press: closes down al l connections (for example GPRS, data call); ho wever this has no effec t on IR and Bluetooth. (See sections Ca ll handli ng and Application handling for more detailed descriptions.) Applications key - Brings up the Application shell, allowing application launching and swapping. - When within the Application shell, r eturns to idle. - Long press of Applications key brings up the quick application swapping window, allowing switching between running applications. (See section A pplication ha ndling for a more detailed description.) Numeric keypad (0-9, *, #) - Numeric and alph anumeri c char acter en try. - Application-specific shortcuts and other functions. Clear - Clears ch aracters when editing te xt or numbers. - Clears documen ts or other entities in lis ts. (These functions always require a c onfirmation from the user.) Clear is not us ed for back stepping or exi ting; it is only used for deletion. Edit - Opens an editing-specific Options menu in editors; the menu contains function s for input mode changing and other editing functions. R efer to Text editing section for contents of the menu. - In editors, can be used together with th e 21
navigation keys to select (highlight) text, which then enables the copy and c ut functions. - In markable lists, using Edi t key together with navigation keys allows the u ser to mark several items of the list, then a func tion can be executed on all the marked items as one operation . The Edit key is handled in a special w ay: the primary action (editing options menu) is opened from the key release even t, not t he key down event as it would usually be. This is to enable the mark/select function where the key is b eing held down as a modifier key. (See sections Edit ing and Lists and Grids for mor e detailed descriptions on the select and mark functions.) Power - Turns power on and off. This requires a long key press. - Opens the Profiles menu f or switching active profile. Navigati on The model of navigation is based on states ar ranged as h ierarchical trees, familiar from existing UI concepts. A few added features bring in new flexibility: Tabs ÃÂ· ÃÂ· ÃÂ· ÃÂ· Applications key and the Application shell Direct navigation between sibling folders Links to applications and documents; Pinboard These featu res are described in the following sec tions. Navigating in applications The traditional hierarchical tree structu re fo rms the basis for n avigation. The us er can move forward from one node (s tate) by opening an available item or selecting an option from a menu. Back f unction (available in the right softkey Back ) re turns to the previous level in the hie rarchy. In the initial state of an application (number 1 in the figure below) the Exit function replaces Back in the r ight softkey; it closes the application. 22
1 1-1 1-2 1-3 1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3 Figure 4-1. An example of a basi c state hie rarchy in an application. Solid l ines indicate moving fo rward from a stat e int o a su b-stat e. Dott ed lines are backw ard moves to the previous le vel. Navigation using Tabs Nokia Series 60 UI uses the tab metaphor that allows combining sever al pages of related information into a single state whe n all of it would not fit onto a single screen or list. The user can s witch the tabs using the lef t and right scroll keys, as indicated in Navi pane. 1-3b 1-3a 1 1-2 1-1 1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3 Figure 4-2. In this example, state 1-3 uses two tabs to present its information. The user moves between views 1-3a and 1-3b using the left and right scroll key s. Note that ther eÃ¢ÂÂs no Back function moving between the tab views; Back from both of them leads to state 1. 23
Tab-controlled views apply the following rules: Moving from one tab view to another has no effec t on the function of the Ba ck softkey in these views : from all of them the b ack functi on leads to the s ame place Ã¢ÂÂ the previous level in the application. The tabbed views are in this respect interpreted as one state in the application. ÃÂ· ÃÂ· ÃÂ· ÃÂ· When a state has tabbed views, one of th em is the defau lt view that is op ened when the user enters the s tate from the previous level . When the user has proceed ed from a t abbed view into a deeper hierarchy level, the Back func tion returns to the same tabbed view whe re the user came from (which is not necessarily the default view described in the previous bullet). The possibilities to go forward from tab views may differ from one view to another (although typically they are similar). This means that one tab view may have other functions availab le to the user tha n another t ab view in the s ame state. Folder hierarchies When browsing wi thin a fold er hierarchy, S eries 60 UI offers a direct acc ess from one folder to another (Ã¢ÂÂsiblingÃ¢ÂÂ) folder in the s ame level. The left and right scroll keys are used to accomplish this. The Navi p ane di splays the fold er number versus the to tal number of folders in the p arent list. 1 1-1 1-2 1-3 1-1-1 1-1-2 1-2-1 Figure 4-3. In this example, each displayed state is a folder containing a list of i tems. State one contains three f olders (1-1, 1-2, 1-3). When the user ha s opened one of these, there is a possibil ity to move directly into the other two folders without f irst going back to state 1. Folder 1-1 conta ins two sub- folders and folder 1-2 contai ns one. Th ere can be indi vidual items in each folder in addition to the folders; thos e are not visible in the state diagram. 24
This additional navigation feature can be interpr eted as a shortcut b etween sibling folders. For folder navig ati on, the basic navigation rules are applied, noticing the following: Moving from one folder to a nother has no eff ect on th e functio n of the Back softkey in these views : from all of them the back function leads to the previous hierarchy level. ÃÂ· ÃÂ· The navigation shortcuts can only be applied when ther e is no other use for the left and right scroll keys in the state. Navigation using Links Links leading from one application (or idle) to another application may exist. Links are one-way s hortcuts: ther e is no direct p ath back to t he state wh ere the link was started; instead, the navigation inside the linked application functions as if the user had manuall y acti vated the o ther appl ication and nav igated to the target state . For more information on lin ks, see the Application handling section. 5. UI COMPONENTS Lists and grids Vertical lists are used extensively in most applications. T wo dimensional grids ar e less frequently used, but have ob vious advantages in some si tuations. In lists and grids, the user c an move the focus from one item to another u sing the navigation keys. This is called browsing or scrolling . Vertical browsing is preferre d over hori zont al browsing in general; the keypad solutions should take this into account. ÃÂ· Highlighting When a list or grid is in us e, one item on i t is always in focus. The item in focus is indicated by a graphical means called highlighting ; the item is said to be highligh ted . The appearance of highlighting on a list item is a coloured (or gr ay) bar which completely occupies the item in focus. Th e item text an d graphi cs are displayed on the bar. Grid item highlighting is a fr ame ove r the item in foc us. 25
a. b. Figure 5-1 List highlightin g (a) and g rid highlight ing (b). Empty lists and grids If there are no items to be displayed in a list or grid, the pane contains a text informing the user about the empty list. Figure 5-2. Empty list. Depending on the case, i t may be justified to prompt the user to create the first i tem for an empty list. List browsing In a list, browsing is possible in two directions: pr essing scroll up key moves the focus one step up (b ackward), and pressing scroll down moves th e focus one step down (forward). When browsing, the item in focus must always be visible. The detailed rules of moving the focus are as follows: If the choice item th at is becoming focused is alre ady fully visible, all the items stay in their current positions, and highlight is moved from the old item to the new item. ÃÂ· 26
If the new choice i tem is no t visible, all items are moved in the view to the appropriate direction so that the new item becomes full y visible. For example, if focus is moving down and the new item is currently b elow the bottom edge of the view, the i tems are moved up. ÃÂ· ÃÂ· When moving the choice i tems in the view, they are onl y moved the minimum amount necessary. For example, whe n movi ng items up to get the next one under the bottom edge visible, the item mov es to the lowest allowed position in the view. By default, a list is a queue . This means that it is no t allowed to browse forward from the last item o r browse back ward from th e fi rst item . If the user attempts this the lis t does not r eact; there is no feedb a ck except th e normal keypad tone. It is also possible to specify the list to be a loop , which means that it is possible to browse forward from the las t choice item Ã¢ÂÂ this step leads to the first item in the list Ã¢ÂÂ and vice versa. The display of a looping list ju mps from th e last item to the firs t item in a non- contin uous way, so that th e first it em is sh own on top of t he view, just a s it would appear if scrollin g backward through the whole list. (Th is is due to EPOC implementation an d is different from tradition al Nokia style where t he loops appear continu ous, with no jum p in the looping poin t.) The scrollin g as specified here is Ã¢ÂÂtradition al styleÃ¢ÂÂ where the h ighlight moves until the lower or upper edge of the list requir es the content to scr oll. Other, potentially better methods cou ld replace this without con sequences to other features. Scrolling indicator for lists Lists have no scroll bar. Ther e is, however, a scrolling ind icator component which indicates the relative position of the item in focu s within the list. The scrolling indicator is only displayed when all items in the list canÃ¢ÂÂt fit on the display simultaneously. Figure 5-3. Scrolling indic ator in the cont rol pane. The downward arrow is dimmed because the focus is near the end of the list. 27
The indicator is situated in the control p ane, and it consists of two arrow images, one pointing up and the other one down. The colours of the arrows depend on the position of the focus, so that towards th e lis tÃ¢ÂÂs beginnin g, the upw ard arrow image becomes less noticeable and eventually ( whe n on the first item) disappears, and vice versa. So clearly visible arrows alw ays poi nt in t he direction which has the larger number of items in th e list. The scrolling indicator is displayed with all list types, with m ain pane lists as well as pop-up window lists. The scrolling indicator functions as specified abov e also when the list is a loop Ã¢ÂÂ there is a distinctive change in the indicator at the moment the list loops. Order of items and browsing in grids In a grid the available items are in a rectangular arrangement of cells and browsing is possible in four directions. In addition to up and down functions, the us er can press scroll right to move the focus one step right, or pr ess scroll left to move the focus one step left. The number of items can be larger than what fits in the view so the grid i tems may scroll in the view when bro wsing. The preferred scrolling dimension is ver tical; this means that when more items are added, the number of ite ms in a grid grows downward line by line, but not outside the window to the l eft or right. ÃÂ· ÃÂ· ÃÂ· A grid should not be scrollable in both dimensions; i t is acceptable only in cases where the grid has a natural geometry that canÃ¢ÂÂt be changed. A c alendarÃ¢ÂÂs month view is an example of this kind of geometry (but even in that case it is better to fit the whole month on scr een rather than make it scrollable in both dimensions). The default filling order of choice items in a grid is first leftÃ¢ÂÂtoÃ¢ÂÂright, th en top- to-bo ttom. 1 2 3 4 5 6 7 8 9 Figure 5-4. Default grid filling order. It may happen that a grid is not filled comple tely. Depending on the application, the grid can be auto-filling (cells moved within the grid so that empty cells in the middle get filled), in which c ase there can only be empty c ells on the rightmos t part of the last line. Other applications may allow empty cells anywhere, so that the grid c an be sparse. 28
The browsing in grids that scroll vertically resembles tr aditional scrolling in text editors, based on the ide a that the user ca n always move to t he correct ro w first and then move within the row to the correct item . The following rules are applied: Empty cells are skipped: the focus is never on an empty cell. ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· An exception to th is occurs wh en the u ser is movin g items ar ound in a gr id; in that situation all cells are accessible. When browsing down or up, the focus is moved to the adjacent cell direc tly below or above the current cell, if that ce ll is filled. In c ase it is emp ty, the nearest cell on the same row gets the focus. If all cells on the row are empty, th e search continues on the next row in the sam e direction, and so on until a filled cell is found. When browsing right, the fo cus moves to the following filled cell on th e same row. If there are no filled cells in th at direction on the ro w, the search co ntinues from the beginning of the n ext row, and so on until a filled cell is found . Browsing left moves the focus to the previous filled cell on the same row, or continues searching from the end of the previous row. Using only the right or left scroll key, the user c an thus go through ev ery i tem in the grid, reg ardless of th e distribution of items in it. The grid is scrolled (moved within the vie w) only when the item that is becoming focused is not fully visible already. By default, grids do not loop vertically from the end to the beginning or vice versa. a. b. Figure 5-5. Examples of moving the focus in a grid, starting from top righ t: a. Only S croll down commands u sed. b. Only Scroll right c ommands used. 29
Horizontally scrolling grids may be used when the application design requir es it. For them, the browsing rules are applied by exchanging the horizontal and vertic al browsing rules. The example figures pre sented above are correct if turned 90 degre es counter-clockwise. Scrolling indicator for grids The same scrolling indicator as with lists is applied to ve rtically scrolling grids. The indicator refers to the row where the focus is located; left-right movemen t within the row has no e ffect on the indicator. For horizontally scrolling grids, the indicator appears as rotated 90 degrees, and refers to the cur rent column . List types Based on the functionality, the following list categories can be identified: Menu list ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· Selection list Markable list Multi-selection list Setting list Form Lists belonging to one category may have diff erent graphical appearances. See section List lay outs for information about diffe rent-looking list items. Menu list Menu lists ar e used to s elect one item from a list and do nothing els e; the Options command is not available when a menu list is being browsed. (Options menu itself is a menu list.) If a high-priority event like an incoming ca ll happens w hen a menu list is open, the list is cancelled and the n ew event t akes control. These li sts are often displ ayed inside a pop-up window. Default keypad fu nctions during a m enu list: Scroll up / down move focus the lis t Scroll le ft / right ignored (unless there is a submenu; s ee section Options menu ) Select k ey select the item, do associated function 30
Left softkey (Select) select the item, do associated function Right softkey (Ca ncel) dismiss the menu; re turn to the state preceding the opening of menu Se nd ke y, Edi t key ignored numeric keypad ignored other keys dismiss the menu and do th e default action of the key Examples of components using menu lis ts are options m enu and list query. Figure 5-6. Menu lists: Options menu (left) and list query. Selection list A selection list is a common means of displaying and accessing data in applications. When there is a selection list displayed the application is typically in a permanent state, which means the user can le ave the application, open another application and later return to the same s tate. Selec tion lists are displayed in the m ain pane. Typically, the user can open items on a selection list, leading into another, mor e detailed view of the item within the application. In addi tion to browsing and selecting items, other func tions are available in the opti ons menu (see sec tion Options menu ). Usage of the Se lect key i n selection lists deserves speci al attention. Depending on the case, it can do the following actions : Select the item in focus. Thi s should happ en whenever i t is assumed that the user is clear about what happens. Selecting can mean: - opening an item like a folder, or a d ate in a calendar, leading to a detailed view - executing a command when th e focused item is a command ÃÂ· 31
Open a context-specific opti ons menu. This should only happen w hen the user cannot be assumed to know what happens if the Select key is pressed. The menu should contain only high-priority options associated with the item in focus , not general items like Settings o r Help. ÃÂ· The two types of Select key actions s hould not be mixed within one list; one or the other should happen for eve ry item in the list. Select 4 Figure 5-7. Select action opens a view. Select 4 Figure 5-8. Select action does a command. 32
Select 4 Figure 5-9. Context-specific Options menu opened from Select key. Keypad functions for sel ection lists: Scroll up / down move focus in the list Scroll le ft / right may be ignored, or may have navig ation functions associated with th em (see s ection Navigation ) Select k ey select the item; see discussion above Left softkey (Opt ions) open the options m enu (see section Optio ns menu ) Right softkey (Back; Exit) back stepping (see section N avigation ) Clear deletes the item if it can be deleted (confirmation from the user required ); oth erwise ignored Edit ignored, or marking functio n if the list is markable (see section Markable list ) numeric keypad may be ignored, or may hav e specific functions within the state other keys do the default action of the key 33
Figure 5-10. Selection lists. Markable list A markable list is a selection list with the added marking feature . The user c an mark any number of i tems on the list while browsing it, and then e xecute a single command, which is applied to all the marked items. This is analogous to the multiple-item highlight feature used in computer GUIs. The marking feature will typically be applied to lis ts the user manages, con taining a large number of items th at may be for example s ent, moved or deleted. By marking items first and then selecting a comm and the user can do some oper ations more quickly and with less key presses than doing the command separ ately for each of the items. Marked items are indicated graphically. The exact style of ma rk indication is a gr aphical design issue. This version of the Style guide uses ch eck marks. Figure 5-11. A markable l ist. Marked items are indicated graphically on the list. 34
The mark and unmark func tions are available in the Opti ons menu of the m arkable list. Alternatively, o r as a sh ortcut, th e user can keep the Edit key pr essed while using the navigation and Select keys in the following w ay: Pressing the Select key while holding Edit marks the cur rent item. This is a toggling function, so pressing Edit-Selec t on a m arked item unm arks the i tem. ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· Pressing a scroll key (up or down) while holding Edi t marks both the cu rrent item and the one onto which the focus moves. If the u ser kee ps holding the Edit and scrolls further in the sam e direction, all the scrolled ite ms become marked; to unmark the items in rev erse order the us er can scroll into the opposite direction while keeping Edit down. Items can be unm arked by Edit-scrolling: if the user starts holding Edi t when on a marked item, and then scr olls, a ll scrolled items b ecome unmarked. Several marking actions can be done s ubsequently. The user can m ark an item, then release Edit, browse and move the focus o nto some other item on the list, and then mark that item. T he first item rem ains marked, and the ones be tween the two do not become marked. All items become unmarked when the u ser exits the list, for example by b ack stepping. Items rem ain marked if th e user opens and can cels the options m enu, or swaps applications. Pressing and releasing the Edit key alone does not cause any action. If the user press es the Sel ect key (wit ho ut Edit ) when there are m arked items on the list, then the context- specific options menu is ope ned, containing only the functions that apply to multiple items. A markable list functions exactly like a no rmal selection list, except for the m arking feature. The user may access the opt ions menu to do functions o n all marked i tems at once. Only the functions that are applicable to multiple items simultaneously app ear in the options. Appropriate error handling must be designed fo r functions that don't apply to some or all of the marked items. When exec uting a function, if any of the items a re mark ed, all the mark ed items are affec ted by the func tion. If the focus is on an item that is not m arked, th e function does not affect that item. After the selected fu nction is successfully done, all items are unm arked. In an error case, when the function cannot be applied, the marks should remain in place. The options menu includes marking and unm arking fun ctions in a submenu so that any user can find the featur e. The submenu has also Ma rk all and Unm ar k al l options. 35
For other keypad actions than the ones described above, refer to the Select ion list section. Multiselection list Multiselection list is used when we want to emph asize t hat it is possible to s elect several items from a list at the same time. Typically, th ere is an operation going on that expects one or more i tems as input. An example of this is when the user is creating a group, and a list of names is offe red as a mul tiselection list. In a multiselection lis t, the user can browse th e items and check and uncheck any number of them . The state o f each item is indicated in a checkbox adjacen t to the item. When th e user accepts the lis t, info rmation about the marked items is passed to the application. Items are checked and unchecked using the S ele ct key, and the list is accepted with the left softkey Do ne . Note that unlike in a markable list, the Options sof tkey is not available Ã¢ÂÂ one can only check and unc heck items, and then accept or canc el the list. Figure 5-12. Multiselection lists: in main p ane (left) and in a setting editor. Keypad functions for mul tiselection lists: Scroll up / down move focus in the list Scroll le ft / right ignored (can be used to con trol tabs) Select k ey check / uncheck the current item; toggle Left softkey (Done) accept the list, pass the selections to the application Right softkey (Ca ncel) cancel the li st, r eturn to previ ous state Cle ar, Ed it, Se nd ignored numeric keypad ignored 36
other keys cancel the list, and then do the default action of the key Setting lists Setting li st is a specific ki nd of selection list con taining setting items which the user can adjust. Setting lists are displayed in the m ain pane. Figure 5-13. A setting list. A setting item can be adjusted by selecting it in the s ame way as selec tion list items are selected in general, by p ressing the Select key, or ch oosing the Change command in the options menu. The main pane the n displays the setting item edi tor where the value can be changed. There are s everal setting i tem types available. They look the same in th e setting list: each item displays a n attribute text (titl e of the setting) on one line a nd the curr ent value on another line wi thin the item . The adjusting and editing functions differ between se tting item types . pop-up setting PopÃ¢ÂÂup setting allows the user to c hoose one value from a preÃ¢ÂÂdefined list. The setting editor displays the available values in a menu list. Figure 5-14. Pop-up setting. When opening a pop-up setting, the curren tly selected option is highlighted, and i t must be visible. A pop-up setting may also allow the user to enter a new textual value in addition to the pr e-defined 37
values. Then the last option is named Ot her , and selecting it opens a data query for e ntering the new value. multiselection l ist setting Multiselection list setting allows the user to choose several simultaneous values from a preÃ¢ÂÂdefined list. The setting editor displays the available values as a multi-selection list. The setting item displays the number of selected items versus all i tems in the value field; for exa mple: 3/8. Figure 5-15. Multiselection setting. text setting The value of a t ext setting i tem is an alphanum eric or numeric string. The editor can be of some specific type, like date/time editor. Figure 5-16. Text setting. slider setting With slider the us er can 'adj ust the value of ' by sliding a marker. The value of a slider is adjusted using the Scroll left and Scroll right keys. Figure 5-17. Slider setting. 38
During a setting editor state, th e keypad func tions are: Scroll up / down pop-up, multiselection: bro wse the list text: move cursor slider: ignored Scroll le ft / right pop-up: ignored multiselection: ignored text: move cursor slider: adjust (key repeat ev ent may move the slider by several steps) Select k ey all except mul tiselection: ac cept the v alue, return to setting list multiselection: toggle check/uncheck Left softkey (OK) accept the curre nt item or value, ret urn Right softkey (Ca ncel) cancel the set ting editor, ret urn Clear pop-up, multiselec tion: ignored text: del ete c haract ers slider: ignored Edit pop-up, multiselection: ignored text: editing mode menu slider: ignored numeric keypad pop-up, multiselection : ignored text: inpu t functio ns slider: ignored; if the v alue is numeric it m ay be adjustable using the numeric keys. other keys cancel the set ting editor, then do the def ault action of the key During the setting editor sta te, the navi p ane is emp ty, or in cas e of the text editor, contains editing indicators. Further guidelines: Typically, the access to a setting list is via the Options menu. (See section Options menu.) ÃÂ· ÃÂ· ÃÂ· Setting lists can only contain setting item s, no t other ty pes of it ems mixed with them. (In cas e the s ettings are arranged in a hier archical struc ture, both set ting items and 'set ting folders' m ay exist in one list. Se e sectio n Settings in the Guidelines chapter.) All the setting item types can co- exist in the same setti ng list. 39
If pop-up setting has only two available values (like On and Off) and no special procedure is needed when switching fro m one v alue to the o ther, then the setting editor (list) need not be displaye d when the user presses the Select k ey; the item's value is ch anged immediately. Howev er, if the user ope ns the setting item via the options menu, or if an additional procedure is required (for example a password) before the item Ã¢ÂÂs value can be changed, the menu list is opened normally. Note that scroll le ft and scroll right can also be used to ch ange the value without opening the list. ÃÂ· ÃÂ· ÃÂ· Forms Form is a specific kind of selection list, wh ere all items ( fiel ds ) have some editable content. A form can be in view state or edit state . The i tem layou ts and functionality are different in these states: In view state, th e items are not editable . The form functions and looks just like a similar selection list. Items can be selec t ed to perform an application-specific function. In edit state , the user c an edit all th e fields. Forms can contain text fields (alphanumeric or numeric c ontent), pop-up fields and sliders. The user can s witch from vi ew state to ed it states using the Edit command i n the Options menu. In edit state , the conten ts of the form can be accep ted using the right softkey, labeled as Done. T he form re turns then into view s tate. Always-editable forms In case a view s tate is not u seful, the fo rm can be sp ecified as edit-state only. Then the user c an edit the fi elds right aw ay w hen entering the form, and accepting the form returns into a state ou tside the form inst ead of the view s tate. Figure 5-18. A form in edit stat e. 40
Forms without the Options softkey In case the form does no t need any context-specific fun ctions in the Options menu , the softkey interface can b e the same as in queries: left softkey is Done and the right softkey is Cancel. Done accepts the contents and returns, wher ea the C ancel function discards all changes in the form and returns. Form items Empty items (that contain no data) can be hidden in the formÃ¢ÂÂs view state. However, this is not a requirement; fo rms can be de signed eit her way, w hichever is bette r for the given application. Unlike ordinary list items, the form items m ay have different sizes in the l ayout but in edit state only. A long data field may occupy mor e than one line in edit state, but in view state it is t runcated to th e first line. The user may be able to add and remove form items. This is done wi th commands in options menu. Form items alw ays have a label . The l abel has a tex t par t, or a text and a grap hical part; however all items in o ne form must h ave the same column layou t. (See section List layouts for detailed information about layouts.) The following item types can be used in a form: Text field (alphanum eric or numeric content ) ÃÂ· ÃÂ· ÃÂ· Pop-up field Slider Any combination of these types is possible wi thin one form. When the form is i n edit sta te, the user can move the fo cus up and down like in a list. The highlight in edit state is differen t from the highlight in view state, acting as a visual cue. A cursor blinks in a text field that is in focus. There is no need to save each field separately; the us er can browse and modify the fields in any order and then accept all modifications. During browsing a form in edit state, the keyp ad functions are as fol lows: Scroll up / down Move focus be tween form it ems (when in a text field move the cursor withi n an i tem line by line). Scroll le ft / right on a pop-up field: change value without opening lis t on a text field: move cursor character by character on a slider: adjust slider val ue Select k ey on a pop-up field: open list on a text field: move to next field on a slider: move to n ext field 41
Left softkey (Opt ions) Options menu. (In a form without options menu, left softkey is Done .) Right softkey (Done ) Accept the conten ts and ret urn to previous sta te. (In a form withou t options menu, right sof tkey is Cancel .) Clear pop-up: ignored text: del ete c haract ers slider: ignored Edit pop-up: ignored text: editing mode menu; select text slider: ignored numeric keypad pop-up: ignored text: inp ut slider: ignored other keys default action of the key The field types are described in the following paragraphs: text field Text field contains some type of num eric or alphanumeric data. It can b e edited directly, using the usual editing functions, when the for m is in editing state. The text field can expand to more than one line if n ecessary. In view state a text fi eld looks identical to a corresponding list item. Figure 5-19. Text field. pop-up field PopÃ¢ÂÂup field offers a possibility to choose one v alue from a preÃ¢ÂÂdefined list. In view state a popÃ¢ÂÂup field looks identical to a list item; the te xt is th e current value of the field. In edit state it has a distin ct look tha t identifies the field as a popÃ¢ÂÂup list. To edit the it em in edit s tate, the user can press the Select key; it opens into a menu list that cont ains the available v alues. The hig hlight is on the current value. When t he list is open , the softkeys are OK and Cancel, as usual with a me nu list. Both softkeys return to the edit state in the form. 42
Figure 5-20. Pop-up field. A pop-up field may also allow the user to enter a textual value in addition to the pre-defined values. Then the last option is name d for example Other , and selecting it opens a d ata query. slider With slider the us er can adjust a numeric valu e (although it is not nece ssary to pres ent th e actual value to the us er as a number). In view state, th e item is pr esented as a tex tual item. In edit state, the value of a slider is immediately adjustable using the Scroll left and right keys . Figure 5-21. Slider field. List layouts List items can in general be more complex (contain more elements ) than grid items. Certain layout rules apply to all lists: All items in a list have eq ual height on scre en. (Forms do not follow this rule in edit state; s ee section For ms .) ÃÂ· ÃÂ· The column structure of all items in a lis t must be similar. It is not possible to combine e.g. single-column items to a thr ee-column item list. (But it is possible to use some differen t item types having the same gen eral appearance.) See the following section about columns. 43
Partial items are not visible: when the list/grid pane area does no t exactly correspond to an integer number of items, the remaining area ou tside the last fully visible item appears empty, displaying the background of th e particular pane. ÃÂ· Column structure of lists For visual consistency, the standard list layouts are built around a s tructure of three virtual columns. The column borders are a ligned with the sides of the context pane. The width of list items can be divided in three sections (columns A, B and C), starting from left. All three columns need no t be used sep arately in a list layout: combinations AB, BC or ABC are possible. However, all items within a list must use the same column layout. Additional indicator icons can be displayed in the right edg e of column C, as seen in the example b) b elow. The area for these indicators is not really a column in the same sense as the o ther three, as it can be used dynamically, item by item. a) b) c) d) Figure 5-22. Different colum n arr angement s: a) All colu mns used for text item. b) Column A contains icon, columns B&C combined for text. c) Columns A&B combined f or large icon , column C cont ains text. d) Col umn A: i con; colum n B: lab el; co lum n C: t ext. 44
Standard elements in list items, associ ated with columns, ar e: column A - small graphic (icon) - item number ( see section Numbered it ems ) column B - heading (title or attribute of the item) column AB - heading (title or attribute of the item) - large graphic (e.g. icon or image thumbn ail) column C/BC/ABC - main text of the item List item types The appearance of list items can be chosen from the following types. The e xamples are from lists displayed in main pane; fo r most item type s a similar component for use in pop-up windows do exist. single-lin e item Figure 5-23. main text only (columns ABC) usage: - menu lists - selection lists, markable lists There is a corresponding component for pop-up windows, without the line on the left side. single-line it em with h eading Figure 5-24. heading tex t (AB), mai n text (C) usage: - menu lists - selection lists, markable lists There is a corresponding component for pop-up windows. single-line it em with gr aphic Figure 5-25. small graphic (A), main text (BC) usage: - menu lists - selection lists, markable lists - multiselection lists There is a corresponding component for pop-up windows. 45
single-line it em with gr aphic and heading Figure 5-26. small g raphic (A), h eadin g t ext (B), main text (C) usage: - menu lists - selection lists, markable lists - multiselection lists There is a corresponding component for pop-up windows. single-lin e item with large graphic Figure 5-27. large gr aphic (AB ), m ain tex t (C) usage: - menu lists - selection lists, markable lists two-line item Figure 5-28. main text (ABC) usage: - menu lists - selection lists This layout has on e text it em th at can ext end to two lines. double it em Figure 5-29. primary text, secondary text (ABC) usage: - menu lists - selection lists This layout has two text lines (primary text on top, secondary text below). The s econd line may be empty. There is a corresponding component for pop-up windows. double item wit h graphic Figure 5-30. 46
primary text, secondary text (ABC) usage: - menu lists - selection lists double it em with large graphic Figure 5-31. large graphic (AB), primary text, secondary t ext (C ) usage: - menu lists - selection lists Like a double item, but with the g raphic added on the left side. Second line m ay be empty. There is a corresponding component for pop-up windows. double item sty le 2 Figure 5-32. heading text (ABC) , main text (BC) usage: - forms - menu lists - selection lists This layout has emphasis on the low er line, as opposed to the other double item style w here the upper line is emphasized. double item sty le 2 with graphic Figure 5-33. graphic (A) heading text, main te xt (BC) usage: - menu lists - selection lists Similar to the previous layout, graphic added. 47
setting item Figure 5-34. attribute te xt (ABC ), value t ext (C) usage: - setting lists A two-line layout: attribute text is on top line, value text (or graphic) on bottom line in a box. The valu e box may be omitted in order to create a regul ar selection item within a s etting list. Numbered items Instead of small graphic, the A column (where used separately) m ay contain a number. This can be used to indicate item numbers in lists whe re necessary. Figure 5-35. A numbered list. Numbered items should be used only in lists wh ere num bers are meaningful and give some added value. Ther e is no specific functionality (such as shortcuts) that all numbered lists would have. ÃÂ· Item type combinations A list can only be composed of items of th e same type. Ho wever, it is possible to use some item types for diffe rent purposes. An example is a setting list that contains an item for accessing a sub-list of settings. In this item, the value box is omitted so that the item looks like a regular selection item , and selecting it will open another list. Similar techniques are possible with other double item types, too. 48
Figure 5-36. A setting list conta ining a non-setting item (Ca ll waiting) to access another view. Grid types Grids are in many ways anal ogous to lists. However, ther e are some things worth noticing: In grids, the Scroll left and S croll righ t keys are always u sed for moving the focus; they can't be used in any other way that may be possible with lists. ÃÂ· ÃÂ· Grid layouts are not standardized as much as lists are, the layouts must be designed case by case for the applications. Typically, grid items occupy l ess screen space th an list items. This results in grid i tems having fewer eleme nts than list items. A grid item may in gener al have one text, or on e graphic, or a text and a graphi c. The following grid types can be used , and they are analogous to corresponding list types: menu grid for selecting one item; no options menu selection gr id permanent state; can be left pending, options menu is avail able markable grid a selection grid with the marking function There are no grid types corre sponding to a multiselection list, a setting list or a for m. Find pane Find pane is a component intended to help find items in a list. The find pane is situated in the bottom part of the main pane. 49
Figure 5-37. A find pane within a selection list of names in Phonebook. The standard functionality is as follows: Characters typed from the n umeric keypad appear in the end of the string in the find pane. ÃÂ· ÃÂ· ÃÂ· ÃÂ· There is no cursor, so the us er can only add and remove characters in the end. The find pane m ay be hidden until the user types i n a c haracter . Whenever the find string ch anges, the list in the m ain pane is filter ed, and only the items m atching the s tring are disp layed. The use r can browse the list normally using Scroll up and Scroll down keys. Options menu The Options menu is a tool that offers the user a set of p ossible functions in the current context. T he options menu is op ened by pr essing the l eft softkey labeled Options . Figure 5-38. Options menu. 50
The options menu is a menu list displayed in a pop-up window. Selecting an item is done pressing either th e left softkey (OK) or the Select k ey. The user mus t either select an i tem from the list or cancel th e menu ; it can't be left pending during another action. (See s ection Menu list .) The pop-up window is located above the control pane, and its height is dynamic; maximum size is approximately the size of the s tandard main pane. The cont ent on screen outside the m enu pop-up is dimmed. Items in th e options menu u se the single i tem l ayout, t hat is , they are text-o nly. The number of items in a menu is not limited; the list scrolls as nec essary. Options menu does not loop. Only the functions that are available in the curren t context are listed in the me nu; unavailable ones are remove d. (See section Hi dden item s in the Gu idelines ch apter.) Submenus An item in the options men u can be a submenu ti tle, leading to additional choices that are displayed in another pop-up window (on top of the options menu pop-up window) as a submenu. Figure 5-39. Submenu in the options menu. The submenu is opened by pressing either the Le ft sof tke y ( Sele ct ), S el ect key o r Scroll right. The user can close th e submenu window by pressing eit her the Right softkey (Cance l) or Scroll left. The main men u window stays open, wi th the focus on the submen u title. When an item in a submen u is selec ted, both the subme nu and main menu windows are closed. The following rules apply to submenus: 51
The number of items should be low, so th at the user do es not n eed to scroll in order to see all of them. ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· Functions should not sometimes occur in m ain level and at other times in a submenu. Items th at ar e in a submenu should always b e found in the same submenu. Only one submenu level is allowed, that is, a subm enu can't con tain another submenu. Unavailable items Situations often occur where a c ertain func tion c annot b e used. In these cas es, the corresponding items in the options menu must eith er be hidden, o r there must be an error message giv en when t he user tries to access a function th at canÃ¢ÂÂt b e accomplished. Series 60 UI d oes not use dimming of men u items. This is a trad e-off issue: rem oving unnecessary op tions makes the option lists shorter Ã¢ÂÂ an often desired resul t Ã¢ÂÂ but at the same time it changes the menu from situation to situation, preventing user s from learning the f unction locations. It may even cause frustration if the users e xpect some function to be found in the menu , but it is sometimes not there. In case the us er has no reason to se ar ch for a certain fu nction in the given situation, it should be hidden. As an extreme example, the Del ete option is not needed when ther e are no items to b e deleted. If the user se arches for a function, ev en though i t cannot be us ed in the curren t situation, it is often better to display the option and give an appropriate mess age if the user tries to access that f unction. Other option menus Some option menus are acc essed in other ways th an by using the Options softkey. The usage of these menus is similar to the usu al options menu. Examples o f other such menus are: OK options men u The Select key opens this option menu whe n thereÃ¢ÂÂs no single intuitive function (like opening the item in focus) for it. The OK options menu only lists functions that: - affect the item in focus on ly - could be regarded as potentially intuitive - are competing for the topmost place of the menu. Other functions c an be accessed throug h the Options softkey. The nu mber of items in the OK options list is usually two or three, i t should never be more than four. As an example, in a mess age editor the functions in OK options could be Send and Add recipient . 52
Delete operation should not be listed in the OK options menu. (The Clear ke y is a shortcut to that function.) In case there are marked items in a list, the OK options menu should include the mark/unmark functions. When a list is empty, it may make sense to offer a Cr eate new type of option in the OK options Ã¢ÂÂ but only when it would be an appropriate function in the conte xt. Edit options men u Opened by pressing the Edit key in a text editor. Contains only editing commands. See section Text editing . Options template The order of items in an opti ons menu should follow the template presen ted below. (In specific cas es, when ther e are st rong argumen ts agai nst the order in the template, the order can be changed.) The optio n names lis ted h ere are g eneric n ames, no t the actu al texts used in the products. The texts may even vary b etween applications even though the logical item is the same. Items that should appear in every full options menu ope ned from the Left softkey are labeled mandatory . Ho wever, thes e items are not required in OK Op tions menus. ÃÂ· ÃÂ· ÃÂ· ÃÂ· For other than the mand atory items, only the items n eeded in each con text shall appear in the options menu. Items specific to the contex t can be added among the common items, in the places where they best fit, considering the importance and probable usage frequency. The plac es where contex t-specific items m ay appear ar e represen ted as in the list. Submenu titles are indicated with 4 and are followed by submenu items. Open / Select /Change mandatory when the Select key does an open/select function. Ã¢ÂÂChangeÃ¢ÂÂ is used in setting li sts. Same as the S elect key functio n. Call now For immediate calling wh en a phone num ber is available (typically highlighted). For ex a mple in Phone book, the phone number is in fo cus. Send now - Immediate sending in message editor, when an address exists. - Open a message editor when there is an address available. 53
Write 4 Submenu for message writing SMS Start writing a n ew short message. MMS Start writing a n ew multimedia message. email Start writing a n ew email. Create new Initiate creation of a new item . When more than one type of item can be created, a submenu may be used to select the type. Send via (1) 4 Submenu for initiatin g the send ing of items using one of the available connectio ns. (Not the same as Ã¢ÂÂSend nowÃ¢ÂÂ.) In this location in applications where sending data is a prim ary function. SMS MMS Email Bluetooth IR Save Save the current document. ( In most applications this is not a necessar y function as saving i s automatic.) Edit item Enables edit ing of th e current i tem, for ex ample a form, or an individual item on a list. Delete item - Deletes the item(s) in focus (or marked) on a list. - Deletes the current item being viewed. View info (1) View detailed info about the cu rrent item. In this location in applications where this is a h igh-priority function. Move Move an item to a different lo cation within the list or grid. Move to folder Move item(s) into a folder New folder Create a new folder Edit list 4 Submenu for func tions used in markable lists. 54
Mark / Unmark Mark or unmark the curre nt it em, depending on the current state. Mark all Unmark all Rename Rename the item in focus. Add to contacts 4 Submenu for func tions used to add contact inf ormation into the Phonebook. Create new Creates a new contac t item. Update existing Adds new field(s) in an existing contact item. Find in text 4 Submenu for func tions used to extract contac t information from text in viewers and brows ers. Phone number email address URL Send via (2) 4 Submenu for initiatin g the send ing of items using one of the available connections. In this l ocation in application s where sending data is a secondary function. SMS MMS email Bluetooth IR View info (2) View detailed info about the cu rrent item. In this location in applications where this is a lo w-priority function. Print Print the current item. Add to Pinboard Add a link to the current application or document into the Pinboard. Settings Access to application settings or co ntext-dependent settings. Exit mandatory Exit the application . 55
Notes A note is a feedb ack component that in forms the user about the curr ent situation. A note contains a text and possibly a graphica l element. The softkey labels are typically empty (a wait no te is an exception to this.) ÃÂ· Figure 5-40. An informat ion note . Notes do not require user in put, although a user can dis miss most notes by pressing any key. ÃÂ· The following note types are in use: confirmation note Informs the user about a successfully completed operation. Short duration, subtle tone. (This should not be used after every kind of successful action; see the guidelines below. ) information not e Gives information about an unexpec ted situation during usage of the device. Longer duration and more noticeable tone th an in a confirmation note. Errors that are not too serious should cause an information note. warning note Used when the user must be notified about something that may require action. Fairly long duration, and a sound that can be heard (and distinguished) even when no t concentrating on the phone. An example: b attery low warning . error note This is a red light. It should only be used when the user has tried to do somethi ng that may cause a considerable problem. See the guidelines below. permanent note A note that m ust remai n on screen for an indefinit e time. The user can't dismiss it. Example: insert S IM card. wait note A note containing a progress or wait graphic. (Wait graphic is an animation of indefinite duration, whereas progress graphic is a growing bar that can be used when it is possible to estimate the dur ation of the operation.) Used during operations that take a long time. The user should be able to stop the 56
operation. For this a softkey labeled, for example, Ã¢ÂÂCancelÃ¢ÂÂ is provided. Figure 5-41. A wait note with a Cancel function in the right softkey. Some guidelines concerning note usage: Use a confirmation note when: The effect of the operation c an't be seen directly by some other me ans. Example: Message sen t. ÃÂ· ÃÂ· ÃÂ· ÃÂ· There is some relevan t information to be communicated by it. Example: Last call duration. Confirmation notes should not be used after every completed operation, this would easily start to annoy users . Confirma tion no tes should no t be used when: - There is already another dialo gue in the procedure , for example "Do you wan t to remove this message? Y/N" - A progress indication is visible during the procedure. - The user can see the result of the operation when i t is done. Example: adding or removing objects in a list. - A setting has been changed. The new value of the setting is visible in the setting item. - The operation can be considered minor or so frequent that a note would be annoying. Ex ample: cop y-pa ste actions. Use an error note when: The user does something th at may cause considerable h arm immediately or later. Example: the user g ave a wr ong PIN c ode. Repeating thi s a couple of times would block the SIM card. To keep the error notes effe ctive, they s h ould be us ed very sparingly. In mos t "ordinary" error cases, an infor mation note should be u sed instead of an error note. It has less aggressive sound and gr aphics. It should also be noted that if the information to be give n is such that the user must see and acknowledge i t, a confir mation q uery is a better c ompo nent to use than a note. Then the user must press a key to dismiss the information, and there is tim e to read and thin k about the notifi cation . 57
Soft notification s Soft Notifications ar e reminders th at inform the user of events that hav e occurred in the userÃ¢ÂÂs abse nce, or while the user w as bu sy with som e application. Text, and also graphics, can be used to communicate t he message to the user. Soft notifications are displayed in pop-up windows. The user can respond to th e soft notification by using the softkeys. The l eft softkey is used for activating a functio n, for exampl e opening a m essage tha t has arrived. T he right softk ey is us ed to di scard the notific ation witho ut taki ng any fur ther ac tion. Figure 5-42. A soft notification indicating t he arrival of voice messages. Soft notifications are displayed only in idle state. If an event that causes a soft notification (for example a missed call) occurs w hen an application is active, it m ay cause other kinds of UI events to notify the user, but if the user does no t react to these, the soft notification appears only af ter the phone is put in idle state Ã¢ÂÂ if the event still requires i t. The application that launched a soft notifica tion can control it and also discard it. It is possible to use the Applications key during a soft notification; in that case the soft notification disappears, but reappe ars when the user returns to idle state, unless the application responsible for it has discarded it. Soft notifications can be dis played for the user in two different appear ances: Ungrouped soft notificat ion These notifications contain one piece of informa tion ea ch. The appearanc e of the notification window is the same as a noteÃ¢ÂÂs. The example in the previous figure is an ungrouped soft notific ation. ÃÂ· ÃÂ· Grouped soft notificatio n Many different item s of information c an be combined in to one soft notification where the items are display ed as a lis t. The user c an pick up one of the ite ms at a time and react to it. T he app earanc e of this soft no tifica tion type is the sam e as a list query (see sec tion Queries). 58
Figure 5-43: A grouped soft notification. The heig ht of the window is dynamic and depends on the number of lines in the list. Discarding soft notifications The application that launched a soft no tification can discard it without user intervention when the notification becomes obsolete. A soft notification should remain pending until the us er has responded to it, or started using the corresponding application so that in effect the no tifica tion becomes obsolete. In that case the application can discard the notification even though the user may not h ave actually seen it. When the user re acts to a soft notific ation by pressing the right softkey (for example Read), or selects one item of a groupe d soft notifica tion, the i tem becomes interpreted as obsolete, and will not reappear . If a soft notification contained more than one item, th e other ones rem ain pending and reappear w hen the user returns to idle. The user can dismiss the notification by pressing the rig ht softkey, labeled Exi t. After this, the notification does no t reappear unt il new events cause a new notifica tion to be created. In case of a grouped soft notifi cation, all items it contains are discarded. Many simultaneous soft notifications Soft notifications are stacked in case there is more than one pending at a time: after the topmost one is discarded, the one following it will be displayed. Each notification has a prio rity valu e that determi nes the ord er of the noti fications. 59
Figure 5-44. Several stacke d so ft not ificati ons . No te the graphic indicating multiple windows. Queries A query is a sta te where th e software waits for user inp ut. Queries are used in situations with more th an one w ay to pr oceed, when th e application needs dat a from the user, or whe n it is nec essary to make sur e the user k nows what is happening. A query must exit before the application can proceed. Queries are displayed in pop-up windows. The following query types can be us ed: Confirmation query A question or notice with on e or two possible responses. ÃÂ· ÃÂ· ÃÂ· ÃÂ· List query A question with a selection of more th an two possible (predefined) responses. Multiselection list query Presents a list of i tems; th e user can selec t any number of them. Data query Used for numeric or t extual input. Confirmation query A confirmation query reques ts the us er to confirm an operation , or asks a yes-no- type of question. It can be u sed for instance to make sure the user does not accidentally delete important information or start an operation which cannot be taken back. The layout for a confirmation query is the same as note layout, with an optional graphic item. One or two softkey labels can be used. In cas e the query can cause two differen t consequences, the positiv e choice (Ã¢ÂÂY esÃ¢ÂÂ) is pl aced on the left sof tkey, and the negative one (Ã¢ÂÂNoÃ¢ÂÂ) on the ri ght softkey. In pure confirm ations, only one way to 60
proceed is possible, and the response text (for example Ã¢ÂÂOKÃ¢ÂÂ) is placed on the lef t softkey. The Selection key always causes the s ame action as the left softkey. Figure 5-45. A confirmation query. Guidelines for designing confirmation queries : When designing the promp t text, make sure the Ã¢ÂÂpositiveÃ¢ÂÂ answer is also the safe one. Users tend to proce ed pressing the left sof tkey or Selection key withou t thinking too much. ÃÂ· ÃÂ· ÃÂ· Use descriptive so ftkey label s whenever possible. For a query abou t deleting something, it is better to lab el the softkeys as Ã¢ÂÂD eleteÃ¢ÂÂ and Ã¢ÂÂKe epÃ¢ÂÂ than use generic terms like Ã¢ÂÂOKÃ¢ÂÂ and Ã¢ÂÂ CancelÃ¢ÂÂ that are mo re complex to inte rpret. Redundant confirmation queries should be avoided. Do not add a confi rmation query if there already are other forms of feedback, unles s it is crucial that the user gets a cer tain piece of information . List query A list query offers a list of p redefined choice s for the us er. It can be used when more than two options must be of fered to the user. Ther e is a prompt text (optional) on top of the window, and a list of options to choose from. The list in a list query is a menu list: th e user can selec t an item or dismiss the query ; the Options menu is not av ailable. The defa ult softkey l abels are OK on the left and Cancel on the righ t - actu al tex ts can be sp ecifi c to the contex t. The Selection key causes the same ac tion as t he lef t softkey . Any list item layout suitable for menu lists can b e used; see sec tion List layouts. 61
Figure 5-46. A list query. The number of items in the list should be kept low, so that all items c an be seen without scrolling. Instead of a list, a grid c an be used in a q uery. The grid query func tion is otherwise identical to a list query. Figure 5-47. A grid in a query. Multiselection list query A multiselection list query is used when the user needs to be able to select sever al items from a list at the sam e time. See section Multiselection list for a descrip tion of multiselection list. The left softkey (Ã¢ÂÂOKÃ¢ÂÂ) is used for accep ting the query, and the right softkey is Cancel. 62
Figure 5-48. Multiselection list query. Data query A data query requests the us er to type in some alphanumeric or num eric information, like a name or a phone num ber. The query contains a prompt text and a user input field. The input field can have any type of editor, depending on context, so that the input may be r estricted to for example numeric data, date or time only . Both the prom pt and input fields can be longer than one line when n ecessary. The softkeys of the data query are OK on the left, for accepting the input, and Cancel on the right softkey, for disc arding the query. The Selection key acc epts the input jus t as th e le ft s oftk ey. Clear key is used for dele ting char acters, and for that p urpose only. Figure 5-49. Data query. The input field may extend automa tically to more than one lineÃ¢ÂÂs height, and also prompt t ext may take two lines. Password query A specific case of data query is password query , used fo r confidential inform ation like passwords or PINs. It uses th e password editor, which fu nctions very much like any other editor, excep t tha t instead of th e ac tual data , a du mmy c haracte r (as terisk) represents each input ch aracter. In case of a numeric-only password, th e asterisks appear as soon as characters are en tered. In case of alphanumeric input, to support typing characters by repeated presses of th e same numeri c key, the character is displayed normall y for a sho rt tim e, and then chang ed to an aste risk. 63
Figure 5-50. A password query window. Data queries with multi ple fields It is possible to have two in put fields in a data query. An ex ample of this is a user name and password query: one field is then a normal al phanumeric editor and the other a password editor. In this case, a press of the Selec tion key moves the inse rtion point from the first fi eld to t he next; in t he second field i t accepts the query. The left softkey always accepts the query. The user c an also move from one field to the other using scroll up and scroll down. Figure 5-51. A data query window wi th two input fields. Indicators Indicators are graphical or textual objects on scr een that provide information about the status of the system. Th ey cannot be used for input, and there is no focus on an indicator: the user cannot p oint a t an ind icator to do actions. The various indicator types in use are described in the fo llowing subsections. Signal and battery indicators The top-left are a of th e screen is used fo r the cellular signal strength indicator, and the corresponding top-right area for the battery level in dicator. Figure 5-52. Signal and battery indicators on the si des of the status pane. Other status indicators are visible below the navi p ane. 64
The signal indicator is part of the status pa ne, and it is displayed in all states where the status p ane exis ts. The ind icator cons ists of an an tenna ic on and a bar g raph t hat indicates the current signal level. The antenna icon may be replac ed by another icon indicating the GPRS connection status. The battery indicator is displayed only in idle state and in Phone application. In other applications, the area is use d for universal s tatus indicators . The indicator consists of a battery icon and a bar graph. Status indicators Status indicators are small graphical icons. They info rm the user about such issues as unread messages, waiting voice mail, selected phone line, IR and Bluetooth connection status, set alarm clock, home zone, and locked keypad. Each status indicator has a priority number, which dete rmines which icons ar e displayed in case there are more of them than fit on the screen simultaneo usly. In idle state, and in Phone application, the status indicators are displayed in the status indicator are a below the s tatus p ane. (See figur e 5-50.) Within applications other than Phone, status indicators appear in the Universal status indicator pane , which is the same area as th e battery pan e. Due to the sm all size of this area, and also to avoid displaying unimportant things in general, only the most important stat us indicators are displaye d there. Th is is true eve n in cases wher e an indicator could fit into the pane: only the most impor tant ones do appear at all as universal status indicators , others are only se en in idle. Figure 5-53. Universal status indica tors are di splayed in the top-right corn er. Indicators in Navi pane The navi pane c an contain s everal kinds of indicators, depending on which way the pane is used in the particular conte xt: Left-right arrows When sideways navigation between diffe rent main pane views is used, the navi pane displays th e navigation information (tab s or text may b e used). 65
Arrow icons on the left and right ends of navi pane indicate the possibility to move in the corresponding directions. (With tabs, the ar rows are only displayed when all tabs are not visible.) Figure 5-54. Arrows in navi pane. Editing indicators When an editor is in us e in the main pan e, the indicators related to editing parameters are displayed in the navi pane. They indicate things such as the editing mode (numeri c/alphanumeric), character case , predic tive text s tatus, and avail able space. Figure 5-55. Editin g indicators in n avi pane. Audio volume indicator Used in applications where audio volume adjustment is necessary, as in Phone. Figure 5-56. Volume indicato r in navi pane. Editing indicators in pop-up windows When a pop-up window contains an editor that needs editing indicators, it is not feasible to use the n avi pane for the indicators. For this purpose, a specific area in the pop-up window, above the editing field, c an be used for displaying the editing indicato rs. (Se e the Tex t edi t ing section for an example.) Soft indicators Soft indicators are textual indicators displa yed in the main pane of the idle state. Examples of cases wher e a soft indicator can be used are call charges indication and MCN (Micro-Cellular Network) area indication. Figure 5-57. Soft indicators in the main pane. 66
Operator indicator In idle, the title pane con tains the operator indicator. I t is either a text or a graphic al image. Figure 5-58. A graphical operator indicator in the title pane. Scrolling indicators Arrowhead-shaped icons that indicate th e scrolling status in lists ar e situated between softkey labels in th e softkey pane. Refer to section Lists and grids for detailed description of the indicator function ality. Application-specific indicators Applications may need indicators specific to their own purposes. Such indicators can be placed into the navi pane , if it is available, or into so me part of the main p ane. However, using the m ain pane this way may require the use of a specific main pane layout. Notice also that the icons presen t in many list item layouts can be utilised as indicators. 6. APPLICA TIONS AND DESIGN EXA MPLES Idle The Idle state is the basic state of the devic e. It displays information about the current state of the device, i ncluding conne ction status, battery lev el, and network operator. Refer to the UI Co mponents se ction for detail ed information about the indicators. Figure 6-1. Idle s creen . Functions of the keys in idle are as follows: 67
The softkeys can be configured by th e user to access vari ous applications. ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· Scroll up, scroll down: open the Phonebook. Scroll left, scroll right: unassigned by def ault, may be assigned by the user . Select key: ignored. Numeric keys can be us ed to dial a phone number manually; a press of a numeric key opens a number en try window. A long key press in idle is used for one-key calling to the number a ssigned to the key. A short key press of the Power key ope ns a list of Profiles for switc hing the active profile. Applications key enters the Application shell, as usu al. The user m ay have a possibili ty to s et any im age as back ground Ã¢ÂÂwallp aperÃ¢ÂÂ in i dle. It is also possible to h a ve a Ã¢ÂÂscreen s averÃ¢ÂÂ application that may use the whole sc reen while the device is not used. It should be noticed, however, t hat soft notifications and other indications on screen would not be visible during this kind of application. Applicatio n shell The Application shell is the menu us ed for accessing all applications. Pressing the Application key opens the Application shell, where the user may browse and select an application. Applications are presented as a grid of items by default; the user can also choose to use a list pre sentation. Pre ssing the Select key ope ns an application and closes the Application shell. Refer to the Application handling section for detailed information about opening and closing applications. Figure 6-2. Application shell. 68
Shortcuts When the Application shell has been open ed and no navigation has taken place, the numeric keys 1-9 can be u sed as shortcuts to selecti ng an application. The keys are mapped directly to the 9 ico ns in the shellÃ¢ÂÂs initial view , so that key 1 corr esponds to the top-left application and key 9 to th e bottom-right one. When the user st arts scro lling , the sho rtcuts are not avail able. Noti ce also that numeric shortcuts do not exist inside applications in general. Customizing the Application shell The user can adjust the orde r of applications, as well as create folders and move applications into folders within the Application shell. These m anaging functions are available th rough the Optio ns softkey on t he left. Fast application swapping There is a shor tcut to swapp ing between applic ations th at are currently ru nning. A long press of the Applications key opens the fast swapp ing pop-up window that contains the icons of the cu rrently running applications. T he user can browse and select one of these in t he same way as in the full Application shell. Figure 6-3. Fast application swapping window. Applicatio n handling This section describes the handling of applications, and i nteractions between applications, in the Seri es 60 UI environment. Some basic assumptions: There can be only one instance of e ach application at a time. This means that when the user s elects an application in the Application shell, there is never a confusion about which process it r efers to: either ther e is one run ning instance of the application, in which case it will be displ a yed, or there is none, in which case a new process will be c reated. ÃÂ· 69
However, software modules that several applications can use (such as editors) may run simultaneously in more th an one application. The user m ay thus see the same feature being run in s everal different applic ations at the same time. ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· Opening and closing applications Applications are typically opened using the Application shell , the menu con taining al l installed applications. There may be other ways to open an application, such as : Assigning a shortcut to an application into a softkey, to be used in Idle state. Using a link in Pinboard (see section Pinboard). Using a specific shortcut built in to ano ther application. When there is no instance o f the opened application already running, a new process for the application is crea ted. If the a pplica tion is already running, opening th e application means bringing the existing application process on top. In case of a link that points to a specific state in an application, the exist ing application is interrupted and forced into the target st ate. See section Multitasking for more information on this. The user can close applications in th e following ways: Using the right softkey, which goes backw ards in the application hierarchy ( Back ) and finally exits the application ( Exit ). Using the Exit function in th e Options menu. Closin g an applic ation means th at the processes associ ated with i t in the working memory are terminated. Application processes can also be terminat ed by the syst em, for ex ample when the user powers down the d evice. Multitasking The Series 60 UI style allows multitaski ng, that is, wo rking with mo re than one application simultaneously. To accomplish th is, an appli cation can be left running when switching to ano t her application, an d it is possible to swap be tween running applications and interact with them. To open another application without terminating the current o ne, the user can press the Applications key to go directly into th e Application shell, and selec t the other application from there. The first application process the n remains running in the background while the user i s interacting with the secon d application. It is possible to swap be tween two or more running applications by usi ng the Application shell. 70
It is also possible to go to Idle state of t he phone and le ave an application running. This can be done by pressing the End key, or by selec ting the Phone application from the Application shell. (The Phone application and Idl e state are mutually exclusive states in th e phone: when t here is a voice ca ll going on, ther e is no Idle state.) During a phone calls, however, the End key is us ed for terminati ng the call and cannot be used as a shortcu t to Idle. The number of simultaneously running ( different) applications is limited only by the available memory in the dev ice. When a n ew application process canÃ¢ÂÂt be created because of limited memory, the system can automatically shut dow n applications to gain more memory space. Application interactions There are two differ e nt models of interaction between applications: 1) Use of modules (services) that can be called and run within several different applications. In this model, a service or library function is running within the application the user w as originally working with. The applications do not conflict with each other when this model is used. It should be noted t hat from the userÃ¢ÂÂs point of view, each item in the Application shell is seen as an application. A specific service can be run in any number of these applic ations at the same time, so the user may see a similar screen in many applications running simul taneously. But the user cannot launch a new instance of any of the applications in the Application shell before termina ting the existing one first: selecting a running application will simply revert to the existing one. The Back function works norm ally in this model: the user can step b ack from an embedded module to the calling application; the modules m ay even be nested. Application process Service A sub-process Service B sub-process return return call call Figure 6-4: Nested services running within an application process. The Back func tion leads to the parent process. 2) Actually switching from one application to another to accomplish a task. In this model, the o ther application may need to be interrupted if it is already running. T his model is needed when links from o ne application to another are used. Whenever an application needs to be interrupted, the system takes care of all pending data. If thereÃ¢ÂÂs information th at needs to b e saved, the system 71
saves it automatically into a default place, and if thereÃ¢ÂÂs a pending dialog it will be canceled. The u ser is not asked questions; all the operations needed to bring the application to th e target s tate are do ne autom aticall y. After switching applications in this way, the Back function does not lead to the previous st ate. Ins tead, it fu nctions as if the user had manually entered the second application and navigated to the target state: i t leads to the previous st ate in the second applicationÃ¢ÂÂs internal structure even though the user did not actually navigate through it. State 1 Application A State 2 State 3 back back State 1 Application B State 2 State 3 back back switch Figure 6-5: Switching between app lications, inte rrupting application B. The Back function works inside applicati on B, it does not lead b ack to application A. Phone Phone is the application for handling voice calls. It is a central application in the device. The idle state, described, earlier, can b e thought of as a part of th e Phone application: calls can be created by dialing from th e idle state, and whenever t here are one or more voice calls going on, the Phone application takes the place of idle; both canÃ¢ÂÂt exist simultaneously. In Application shell, the first application is Phone. If there are no c a lls when the user selects it, the device will go to idle state. 72
In simple one-call cases, the Phone application looks like this: a. b. Figure 6-6. Phone application examples: a. Creating an outgoing call; b. Active call going on. More complex cases, whe re more than one c all is involved, may also happen. The locations and sizes of individual call win dows change according to the situation: a. b. c. Figure 6-7. Phone application, m ulti-call c ases: a. One call active, another on hold; b. One active, one h eld, one waiti ng call; c. User is enterin g a nu mber while another call is active. When there are o ngoing calls, but some other application than Phon e is on top, the call windows are reduced into a small pop-up window in the top-right corner. 73
Figure 6-8. Call status window, used when Phone a pplication does not reside on sc reen. Call handling Calls are handled using the Send and End k eys as follows: Send - Answers the incoming call when the phone rings or there is a waiting c all. - Creates an outgoing call when there is a number entry window acti ve. - Puts active call on hold; unholds a held call; swaps held and active calls. End - Rejects the incoming call. - When an active call exists: ends t he active call. - When only a held call exists: e nds the held call. - When both active and held calls exis t: ends the active call, makes the held call active. A basic rule is that Call handling keys accomplish the same func tions whether the Phone application is on screen or not, so the user need not swap applications for these operations when usin g another application. (However, some applications may override the Send key and use it on a local func tion: for example , in Messaging, Send can be used to send a message.) Volume contr ol In case the hardware has no dedicated vo lume keys, the sound volume is adjusted using the scroll left and scroll right keys. The volume indicator is in the N avi pane. It is worth noticing that the user mu st be in the Phone application (or another audio application) to be able to adjust sound vo lume if dedicated volume keys do not exist. The same volume adjustmen t method is used in other audio applications. 74
Figure 6-9. Volume indicator i n the Na vi pane. Viewers and players Viewers are used for displaying read-only da t a. Examples of viewers ar e SMS, e-mail, and image viewers. To edit or create ne w data, the user sta rts an editor ; the viewer may offe r an option for starting an editor. When a piec e of read-only d ata is presented, no focus is needed, as the user does not need to access any individual object within the data Ã¢ÂÂ it is only necess ary to be able to go through the data. We can imagine the data projected onto a virtual strip of paper that the user c an move wi thin th e vi ewing windo w. There is no need to point at a specific part within the data, but a viewer may be able to zoom in and out. Text viewers Text viewers should in gen eral follow these guidelines: Text is wrapped according to the width of the viewing pane. There should be no need to scroll sideways whil e reading the text. ÃÂ· ÃÂ· Up and down scrolling should proceed page by page. A press of scroll down key displays the next screenful o f text. (Note that in editors , text is scrolled line by line.) Image viewers A still image viewer is a tool optimized for viewing photographs or other images. A dedicated image viewer may offer f eatures like zooming and scrolling, full screen viewing, and adjustments of image param eters like brightness and contrast. By default, the image should initially be scaled so that it fills the available screen area. Viewing functions are av ailable in the viewerÃ¢ÂÂs m enu of options. However, the numeric keypad may also be used to cont rol some of the functions Ã¢ÂÂ this allows quick access to frequently u sed functions, such as zooming. 75
Multimedia viewers For viewers that support sev eral forms of data, the c apabilities should be extended, while still keeping the core functions consis tent with text viewers. For ex ample, the viewed data may contain graphical still images that are displayed among text. The following additions to the earlier rules are applied: When necessary an embedded image shall b e scaled do wn so that it c an fit the display as a whole. If the sc aling capabilities are limited, a moderate amount of oversize can be allowed. ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· When scrolling the data, the user sho uld be able to see each image completely. This means that at least one scrolling step should let the user vie w the full image. (If scrolling would occur stric tly one screenful at a time, an image could be split into two parts, each one in a separate screen.) The user should able to vi ew an embedded im age better by opening it in to an image viewer. (No te that a focus may exist in order to s elect the d esired image, although application designs without focus are also possible.) After viewing an image in a separ ate image viewer, the user sh a ll be able to come directly back to the m ultimedia viewer, in the posi tion the user started from. Audio and video players Audio and video are time-based data. The players for such data need at least the following functions: Play Pause Stops the player, but leaves the pointer in the current location so th at playing can be continu ed later. These commands can be m apped to the same key, as onl y one of them is needed at all times. These functions shall be accessible by a single key press. The positive action softkey is preferred for this purpose. Additional functions may include: Stop Ends playing the clip and positions the pointer in the beginning of the current piece or section (audio or video clip). Next piece Moves to the b eginning of the next piec e. Previous piece Moves to the b eginning of the previous piec e. 76
Forward / Rewind Fast playing of the piece, using short audio clips, forwar d or reverse. ÃÂ· ÃÂ· Faster / Slower Changes the speed of playing the audio, without changing the pitch. Can b e useful with voice m emos, for example. Playing functions shall be av ailable in the playerÃ¢ÂÂs menu of options. How ever, the numeric keypad may also be used to control som e of the functions. Text editing This section describes the common principles of text editing, focusing on L atin based scripts. Requirements of other writing systems and input methods, such as those used for Chinese or Arabic, are not covered in detail . Character input is accomplished using th e numeric k eys. The IT U-T standa rd for numeric keypads specifies the mapping of Latin (English) characters to the k eys, assigning three or four letters to each number key from 2 to 9 . The input of a specific character can happen either by repe ated key presses wi thin a time-out, or using some language-specific algorithm (such as T9 by Tegic) that tries to find correct characters according to the produced key sequ ence. Other keys have specific f unctions assi gn ed to th em during text edi ting: 1 key Punctuation. Most used p unctuation c haracter s are avail able using repeated key presses within a time-out. * key In alpha mode, offers the next m atch in T9 input. In alpha mode, a long press opens a special character grid, where the complete set of punctuation and other characters are displayed. One character can be picked at a time. In number mode, produces the * character, repeated presses produce other characters allowed within phone numbers: , p, w # key In alpha m ode, c hanges the charac ter case (uppercase, lower c a se, text case). In number mode, produces the # character. C key Clears the pr evious charac ter from cursor. In case more characters are selec ted, clears all s elected characters . Edit key Press and release : opens an edit men u (see description below). 77
Selects characters when pressed simultaneously with navigation keys (see section Selecting text below). Edit menu Editing-specific functions can be acc essed using the Edit menu . It is opened by pressing the Edit key when in text editor . The Edi t menu looks and works j ust like the Options menu, but it con tains only text-editing func tions whereas other available options remain accessible in the Options menu. The content of the Edit menu is as follows (note that items that do not a pply to the edi tor in use do not appear in the menu): Predictive text options 4 Submenu for predictive text options T9 on/off Temporary setting of predictive input. Matches Insert word Edit word Alpha mode Switch to alpha input mode. Numeric mode Switch to number input mode. (other input modes) Other available input modes are lis ted as individual items in the menu. The other modes may be language-specific. Cut Copy Paste The clipboard functions a llow importing and exporting chunks of text. Undo Undoes the latest editing a ctions. Insert n umber Opens a data query where the user can enter a number, and inserts the number into text. Insert symbol Opens the special character window. The same action as a long press of the * key. 78
Figure 6-10. Special char acter win dow. Editing indicators The status of the editor is di splayed using graphic indicators. They inform t he user about things such as: Editing mode (numeric/alphanumeric, language-specific modes) ÃÂ· ÃÂ· ÃÂ· ÃÂ· Charac ter case Predictive text stat us Available space When the editor is in the main pane, the indicators are located in the navi pane. A data query that resides in a pop-up window has its indicators within the window. a. b. Figure 6-11. Editing indicators in navi pane (a) and above the editor fiel d in a pop-up (b ). 79
Selecting text A chunk of text c an be selected in an editor by keeping the Edit key pressed and using the navigation keys (s croll left/right/up/down). The selected text is sho wn using a highlight. The Cut and Copy functions are available wh en text is selected. Figure 6-12. Text selection in an editor. If the user press es any scroll key alone when t here is a t ext selection, t he selection disappears and the cursor re appears in the respective po sition. Document handling Creating new documents The user must b e able to start typing (or o therwise creating) a new document without first being asked for a file name. In m a ny cases, documents don Ã¢ÂÂt even have a name tha t would be seen by the user: sh ort mes sages and notes, for example, ar e listed and managed by the beginning of the conten t. Some document types have a file n ame the use r can choo se. Even then , the system may give a default name for the document, and t he user is not forced to name it. When it is important that th e user knows the document name, th e following methods can be used: The system asks the user to confirm the na me, using a q uery with the default name in place. T his can hap pen at the mom ent the user is about to exit the editor, or when th e user has selected th e Save option . ÃÂ· ÃÂ· In some applications it mak es sense that the us er can give a d efault name in adv an ce, an d the syst em c reat es un iqu e names from i t by adding for exa mple a number after the common n ame. This way it is possible to have meaningful document n ames withou t typing them for each fi le. 80
Saving edited data Various kinds of documents may have diff er ent requir ements conc erning the b ehavior of keeping or discarding the edited data. Typically one enters data, or modifies i t, in an editor, and then closes th e editor accepting the new data. But some times there may be a need to do some thing else, like ca ncel th e edit, or save an int ermediate version of th e data. Simple queries and setting items offer the user one input elem ent (an editor or a list), presented in a temporary window. The softkeys ar e OK and Cancel. Select key is assigned the same action as the l eft softkey: they Select both accept the input and close the query. Cancel softkey discards all ch anges and returns. The re is no need to ask for a c onfirm ation from the us er. The ac tions are cle ar, and the accep ting option can always be seen in the softkey. A form is a view with more than one inpu t elemen t. Form element types are text (and numeric) fields, pop-up lists and sliders. A form may have separate view and edit states; to go from view to edit one has to select Edi t in the Options . Most forms do not app ear in the vi ew st ate at all; th e items are then always editable. In the edit state, the user can move from one element to another and do changes. Forms are somewhat different from queries a nd setting items, as individual fields do not require an explicit accept ac tion Ã¢ÂÂ one can move fre ely between fields and edit at free will. The user c a n accept the w hole form in one c ommand. In case there are no contex t-specific functions (other th an accept ance and canellation of the form), the interaction can b e made similar to that of queries : the left softkey is Done a nd the right one Cancel . This ar rangement is easy to unders t and. However, of ten th ere are fu nctions that mu s t be accessible while edi ting the form, for example adding new ite ms to the form . In th at cas e, an Option s softk ey is neede d, and the form canÃ¢ÂÂt be accep t ed simply by using the lef t softkey. The solution to this problem is to assign the Don e function to the right so ftkey. Pressing it accepts the data in the form and returns to the appropriate place. In case we ne ed to offer the cancel function too, it can be added i nto the Options, using a descrip tive name like Discard ch anges. Document editors (such as a messag e editor) usually need the Options softkey. There may be message sending commands, pr eference s, help and other functions that ne ed to be placed in the options menu. In this case, too, the ri ght softkey will save the data and return to the appropriate place; it is labeled as Close. A note telling where th e da ta was sav ed sh ould be g iv en in ca s e it is not obvi ous within the cont ext. In some applications there may be a need for discarding all changes, or saving intermediate versions of the document. These functions can be pl aced in the options menu as required. I t is worth noticing thou gh that sometimes technical re strictions Ã¢ÂÂ memory limitations etc. - may prevent for ex ample discarding all changes to the document. 81
Folders When there are a lo t of data items to be man aged, it makes sens e to divide them into smaller sets. A folder is a place where a s e t of ite ms can be collected. A folder can be present among single items in a direc tory, but it can be opened in order to view its contents. Users are able to create folders and delete them , move items into folders and out of folders, and rename folders and change other properties of folders (depending on application). In Series 60 UI, hierarchical folder struc tures are no t allowed. In other words, a folder cannot reside inside another folder. The normal methods for managi ng folder a re as follows: To create a new folder, the user selects the New fo lder option while in a data items list. ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· ÃÂ· To add items into an existin g folder, the user s elects th e Move to folder option while the focus is on the item to be moved. A list of exis ting folders is offered, and the user c a n select the target folder. (To add more than one ite m at a ti me, i t is possible to mark items using the marking feature.) The functions for folder mana ging (Move to folder, New fo lder) are avail a ble in a submenu called Orga nize . Groups Groups are ano ther mean s of man aging da ta in a container. But unlike folders, groups do not contain actual data Ã¢ÂÂ there are only links to data that exist elsewhere . This makes it possible to access the s ame data from many places. A typic al application for groups is a distribution lis t: one can colle ct a set of addresses into one group, to send mess ages to all the addresses by just referring to the group, and the same addresses c an be present in any number of diff erent groups. Groups can be managed in much the same way as folders. There are some differences, howev er: Groups are presented in a s eparate group view, not withi n the actual data items list. The group view can be a tab view wi thin the application. To create a new group, one goes to the group view and selects the option Ne w group . To add items to a group, one must be within th e target group view, and select the Add items to group opt ion there. A list of i t ems is then pres ented, typically as a multiselection list, for the user to choos e from. 82
Fetching data Often it is necessary to be able to pick up a piec e of data from an application, such as a phone number or addre ss from the Phonebook. This is called fe tching . It is a read-only operation: the user cannot edit the data, only browsing and s electing are possible. Browsing data during a fetch operation should resemble the applicationÃ¢ÂÂs normal use: the d ata should be arra nged the sam e w ay so th at it is e a sy to fi nd. Only the available func tions are diffe rent: the data can Ã¢ÂÂt be edite d. The left softkey during a fe tch operation is labeled Select , and it activat es the same function as the Select k ey: it selects the data currently in focus. The right softkey is Cancel , and returns to the previous state without bri nging back any data. Sometimes it is feasible to u se a multiselection list for f etching data. This should be done when it is probable th at the user wan ts to select more th an one item for fetching. An example of this is creating a group in the P honebook to be used as a distribution list: a list of names is offered to the use r, and since the probable intention is to have more than one nam e in the group, a multiselection list is a good tool to use. (See section Mul tiselecti on list in the UI components chapter.) Settings Global settings Ã¢ÂÂ the ones that affect several applications or gen eral issues within the device, are collec t ed into the Genera l Set ting s applicat ion. Application-specific settings are handled within the application UI. They should b e collected into a settings vie w that c an be acc essed via t he Opti ons me nu. The Settings option exists at least in the applicationÃ¢ÂÂs initial or basic state, and possibly also in other states where it would be ben eficial to h ave easy access to s ettings Ã¢ÂÂ especially to some context- dependent settin gs. The settings view is a list of setting items (see the list item type description in the List types section). Sometimes a general setting may be duplicated as an ap plication-specific setting. The order of priorities for du plicate settings must be specified case by case. For example, a general predictive text setting could be overr idden by an application- specific setting, but a general Ã¢ÂÂsilen t modeÃ¢ÂÂ setting within a profile should be effective regardless of any o ther tone set tings. If the number of setting items (within an application) is large, it may be necessary to divide them into groups. The grouping can be done in the following ways: Use tabs to access different setting groups ÃÂ· ÃÂ· Design a hierarchic al setting tree, us e 'setting folders' in t he top level (there may be individual settings and fo lders in one list; this is an e xception to the rul e that only setting items should exist in one list). 83
84