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, w hich means skipping many details that ca n be found in other documen ts. There's no general discussi on about good usa[...]

Contents ABOUT TH IS DOC UMENT ............................................................................................................ .................................... 7 PURPOSE ...................................................................................................................................................................[...]

NAVIGATION USIN G LINKS......................................................................................................... ............................ 25 5. UI COMPON ENTS .................................................................................................................. .................................... 25 LISTS AND GRIDS.[...]

CONFIRMATIO N QUERY ............................................................................................................. .............................. 60 LIST QUER Y ..................................................................................................................... ............................................ 61 MULTISEL[...]

SELECT ING TEXT ................................................................................................................. ....................................... 80 DOCUMENT HANDLIN G .............................................................................................................. .................................. 80 CREATING [...]

About this docu ment Purpose The Nokia Series 60 UI Style Guide gives an overview of the Series 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 ate[...]

1. WHERE N OKIA SERI ES 60 UI BELONGS Nokia Series 60 UI is intend ed for use in high er end mo bile phones featuring person al information management (PIM) and mul timedia applications such as: Calendars · · · · · Text and multimedia messaging E-mail WAP or other browsers Imaging The screen is suitable for vie wing short messages and can also[...]

2. HARDW ARE REQUIREME NTS Nokia Series 60 UI has cer tain requirements concerning the hardware. This section lists the assumed hardware for the first implementation; it is possible to extend and modify the hardw are to some ex tent for s ubsequent product gene rations. Display Figure 2-1. Series 60 display. The Series 60 UI display spe cifications[...]

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 imple[...]

3. GRAPHICAL COMPONENTS Wind ows 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[...]

- 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[...]

Applications can also use the main pane ar ea to freely draw w hatever is needed. 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 i[...]

Context pane Context pane displays the current application's icon. Figure 3-4. Context pane. The user can r ecognize the a pplication by the con text p ane whe never th e title pane contains a context - s pecific text. · · The context p ane graphic may contain some dynamic element (for example animation) to inform the user about the applicat[...]

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 effec t on 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[...]

Battery pane Battery indicator is only visible in the idle state. It displays the remaining energy level of the battery, using a g raphic al in dicator . It als o act s as a charging indicator. Figure 3-1 1. Battery pa ne (right). Universal ind icator pane Used for displaying univers al status indicat ors: the status indicators that need to be visi[...]

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 options tha t are avail able in the current context can be accessed via the options menu . It is displayed as a lis t in a pop-up window[...]

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 tha t when the displa y text languag e is Arabic or some o ther language following right to left writing dire ctio[...]

Edit key - the interaction is different, causing the action on th e key release event. Certain keys, possibly in cert ain contexts only, m ay perform key repeat . Ke y 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 exampl[...]

there is no item to open and no option to selec t (see section Sele ction list ). The Select key must not directly ac tivate any such function the user wo uld not expec t in the give n situation. Therefore, the con text specific options menu is offered in states wh ere no selectable i tems exist. The open/select function sh ould not be mixed with t[...]

During calls: - Puts an active call on hold; makes a held c all active; swap s 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 for more detailed descriptions.) In idle: - Brings up Last dialed calls list for redialing. End - Rejects the arriving call. - When an active [...]

navigation keys t o select (hig hlight) text, which then enables the copy and cut 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 ([...]

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 basic st ate hierarchy in an application . Solid lin es indicate moving forward from a state into a s ub-state . Dotted lin es are ba ckward moves to the previous level. Navigation using Tabs Nokia Series 60 UI uses the tab metaphor that allows combining sever al pages of[...]

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 back functi on lead s 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. · · · ?[...]

This additional navigation feature can be in terpreted 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 hier[...]

a. b. Figure 5-1 List highlightin g (a) and grid hi ghlighting (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 th e user to create the first item for an empty list. List [...]

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 only moved the mi[...]

The indicator is situated in the control p ane, and it consists of two arrow images, on e pointing up and the other one down. The colours of the arrows dep end 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 fir st item) disappears, and vice versa[...]

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 t[...]

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 a[...]

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 key, Edit key ignored numeric keypad ignored other keys dismiss the menu and do th e default action of the key Examples of components usi ng menu lists are options m enu and list query. Fig[...]

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 m enu should contain only high-priority options associated with the item in focus , not general items like Se ttings or Help. · The two types of Select key actions s hould not be mixed within one li[...]

Select 4 Figure 5-9. Context-specific Options menu opened from Select key. Keypad functions for sel ectio n lists: Scroll up / down move focus in the list Scroll le ft / right may be ignored, or may have navig ation functions associated with t hem (see s ection Navigation ) Select k ey select the item; see discussion above Left softkey (Opt ions) o[...]

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 mark[...]

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 usi ng 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-Sele[...]

For other keypad actions th an 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 tim e. Typically, there is an operation going on that expects one or more i tems as input. An e xample of this[...]

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 it[...]

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 display[...]

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 [...]

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, th en 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[...]

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 acce pts the contents and returns, wher ea the C ancel func tion discards all changes in the form and returns. Form i[...]

Left softkey (Opt ions) Options menu. (In a form without options menu, left softkey is Done .) Right softkey (Do ne) Accept the conten ts and ret urn to previous sta te. (In a form without 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 t[...]

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 num eric value (although it is not necessary to pres ent th e actu al value to th e user [...]

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 em pty, displaying the background of the particular pane. · Column structure of lists For visual consistency, the stand ard list layouts are built around a structure[...]

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 ty[...]

single-lin e item with gr aphic and heading Figure 5-26. small g raphic (A), h eadi ng 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 list[...]

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 [...]

setting item Figure 5-34. attribute te xt (ABC ), valu e text (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 regular selection item within a s etting list. Numbered items Instead of small graphic, the A column (where us[...]

Figure 5-36. A setting list conta ining a non-setting item (Ca ll waiting) to acce ss 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 possi[...]

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 th e 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 [...]

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 ectio n Menu list .) The pop-up window is located above the control p[...]

The number of items should be low, so th at the user does 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. Item s that ar e in a submenu should always b e found in the same submenu. Only one submenu level is allowed, that is, a submenu ca n't co[...]

Delete operation should not be listed in the OK options menu. (The Clear ke y is a shortcut to th at function.) In case there are marked items in a list, the OK options menu should include th e 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 appr[...]

Write 4 Submenu for message writing SMS Start writing a new short mess age. MMS Start writing a n ew multimedia message. email Start writing a new email. Create new Initiate creation of a new item . When more tha n 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[...]

Mark / Unmark Mark or unmark the curr ent it em, depending on the current state. Mark all Unmark all Rename Rename the item in focus. + + + Add to contacts 4 Submenu fo r functions used to ad d contact informati on 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[...]

Notes A note is a feedb ack component that in forms the user about th e current situation. A note contains a text and possibly a graphic al 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 pressin[...]

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 rele[...]

Soft notification s Soft Notifications ar e reminders th at inform the user of events that hav e occurred in the user’s absence, 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 the soft not[...]

Figure 5-43: A grouped soft notification. Th e heig ht of the window is dynamic and depends on the number of lines in th e 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 h[...]

Figure 5-44. Several stacked soft not ificatio ns. 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 when it is nec essary to make sur e the user k nows what is [...]

proceed is possible, and the response text (for example ‘OK’) is placed on th e left 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 te[...]

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 u[...]

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 hav e any type of editor, depending on contex t, so that the input may be r estricted to for example num[...]

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 th e Selection key moves the inse rtion point from the fir[...]

The signal indicator is part of the status pa ne, and it is displayed in all states where the status p ane exi sts. The in dicator cons ists o f an an tenna i con and a b ar graph 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[...]

Arrow icons on the left and right ends of navi pane indicate the possibility to move in the corresponding directions. (With tabs, the arrows are only displayed when all tabs are not visible.) Figure 5-54. Arrows in navi pane. Editing indicators When an editor is in use in the main pane, the indicators related to editing parameters are displayed in [...]

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 the softkey pane. Refer to section Li[...]

The softkeys can be configured by th e user to access vari ous applications. · · · · · · · Scroll up, scroll down: open the Phon ebook. Scroll left, scroll right: unassigned by def ault, may be assigned by th e 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[...]

Shortcuts When the Application shell has been open ed and no navigation has taken place, the numeric keys 1-9 ca n be used as shor tcuts to selecting an application. The keys are mapped directly to the 9 ico ns in the shell’s initi al 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[...]

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 ,[...]

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 s tate.) Du[...]

saves it automatically into a default plac e, 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 t a te are d one automati cally. After switching applications in this way, the Back function does not lead to the previous state. Ins tead, it fu n[...]

In simple one-call cases, the Phone application looks like this: a. b. Figure 6-6. Phone application examples: a. Creating an outgoing c all; b. A ctiv e 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[...]

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 ac tive. - Puts active call on hold; unhol[...]

Figure 6-9. Volume indicator in 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 view ers. To edit or create new data , the user sta rts an editor ; the viewer may offer a n option for starting an editor. When a piec e of read-only d ata is presented, no focus is n[...]

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 example, the viewed data may contain graphical still images that are displayed among text. The following additions to the earlier rules are applied: When necess ary an em[...]

Forward / Rewind Fast playing of the piece, using short audio clips, forwar d or reverse. · · Faster / Slower Changes the speed of playin g 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. However, the numeric keypad may also be used to c[...]

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 i n text editor . The Edi t menu looks and works j ust like the Options menu, but it con tains only text-editing func tions whe[...]

Figure 6-10. Special charact er win dow. Editing indicators The status of the editor is di splayed using graphic indicators. They inform the 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 a[...]

Selecting text A chunk of text c an be selected in an editor by keeping the Edi t key pressed and using the navigation keys (s croll left/right/up/down). The selected text is shown 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 w[...]

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 t he editor accep ting the new data. But some times ther e may be a need to do some thing else, like ca ncel th e edit, or save[...]

Folders When there are a lot 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 et 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 c reate folders and delete the m, move items into [...]

Fetching data Often it is necessary to be able to pick up a piece 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[...]

84[...]