1. Manuals
  2. Brands
  3. Nokia Manuals
  4. Cell Phone
  5. Series 60
  6. Manual

Nokia Series 60 Manual

Ui style guide
Hide thumbs Also See for Series 60:
Table of Contents

Advertisement

Quick Links

Download this manual See also: User Manual
NOKIA
SERIES 60 UI STYLE GUIDE
1

Advertisement

Table of Contents
loading

Related Manuals for Nokia Series 60

Summary of Contents for Nokia Series 60

  • Page 1 NOKIA SERIES 60 UI STYLE GUIDE...
  • Page 2 There's no general discussion about good usability; instead this document tries to clarify how the style elements of the Nokia Series 60 user interface are meant to be used in practice.

  • Page 3: Table Of Contents

    Contents ABOUT THIS DOCUMENT ... 7 PURPOSE ... 7 AUDIENCE ... 7 WHERE NOKIA SERIES 60 UI BELONGS ... 8 HARDWARE REQUIREMENTS... 9 DISPLAY ... 9 KEYS ...10 EXTRA KEYS ...10 GRAPHICAL COMPONENTS...11 WINDOWS AND PANES ...11 STANDARD PANES IN APPLICATION WINDOWS ...12 MAIN PANE...12...
  • Page 4 NAVIGATION USING LINKS...25 UI COMPONENTS ...25 LISTS AND GRIDS...25 HIGHLIGHTING...25 EMPTY LISTS AND GRIDS ...26 LIST BROWSING...26 SCROLLING INDICATOR FOR LISTS ...27 ORDER OF ITEMS AND BROWSING IN GRIDS...28 SCROLLING INDICATOR FOR GRIDS ...30 LIST TYPES ...30 MENU LIST ...30 SELECTION LIST...31 MARKABLE LIST...34 MULTISELECTION LIST...36...
  • Page 5 CONFIRMATION QUERY...60 LIST QUERY...61 MULTISELECTION LIST QUERY ...62 DATA QUERY ...63 INDICATORS...64 SIGNAL AND BATTERY INDICATORS...64 STATUS INDICATORS ...65 INDICATORS IN NAVI PANE...65 EDITING INDICATORS IN POP-UP WINDOWS...66 SOFT INDICATORS ...66 OPERATOR INDICATOR ...67 SCROLLING INDICATORS...67 APPLICATION-SPECIFIC INDICATORS...67 APPLICATIONS AND DESIGN EXAMPLES...67 IDLE ...67 APPLICATION SHELL...68...
  • Page 6 SELECTING TEXT ...80 DOCUMENT HANDLING ...80 CREATING NEW DOCUMENTS ...80 SAVING EDITED DATA ...81 FOLDERS...82 GROUPS...82 FETCHING DATA...83 SETTINGS ...83...

  • Page 7: About This Document

    The Nokia Series 60 UI Style Guide can be used as an introduction to the style or as reference material. It can provide background material to help UI designers make decisions about their product.

  • Page 8: Where Nokia Series 60 Ui Belongs

    Nokia Series 60 UI is not an optimal user interface for very basic phones. All basic phone functions can be done with it, but the capabilities of Series 60 UI would not be fully utilised.

  • Page 9: Hardware Requirements

    HARDWARE REQUIREMENTS Nokia Series 60 UI has certain requirements concerning the hardware. This section lists the assumed hardware for the first implementation; it is possible to extend and modify the hardware to some extent for subsequent product generations. Display Figure 2-1.

  • Page 10: Keys

    Keys The following keys are required for Series 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, *, #)

  • Page 11: Graphical Components

    GRAPHICAL COMPONENTS Windows and panes The display layouts are hierarchically organised. The layouts are built using components called windows and panes. screen window pane application window Screen is the topmost display component, corresponding to the entire pixel area of the physical screen.

  • Page 12: Standard Panes In Application Windows

    pop-up window Standard panes in application windows Main pane Main pane is the principal area of the screen where an application can display its data. There are a number of standard components for applications to use in the main pane: a list a grid find pane...

  • Page 13: Status Pane

    Applications can also use the main pane area to freely draw whatever is needed. In that case, however, the responsibility of the look and feel is entirely on the application's designer. General guidelines for designing application specific main pane layouts can be found elsewhere in this document. Status pane Status pane displays status information of the current application and state as well as general information about the device status –...

  • Page 14: Context Pane

    Context pane Context pane displays the current application's icon. Figure 3-4. Context pane. · The user can recognize the application by the context pane whenever the title pane contains a context - specific text. · The context pane graphic may contain some dynamic element (for example animation) to inform the user about the application's state.

  • Page 15: Signal Pane

    design guideline, the number of tabs should be kept low (max 6 recommended), and the number should not be dynamic. (See Tabs in section Interaction style for a description of their effect on navigation within an application.) Navigation text Figure 3-7. Navigation text. Navigation text is displayed in the navi pane when there are similar items to be browsed by scrolling horizontally, e.g.

  • Page 16: Control Pane

    Battery pane Figure 3-11. Battery pane (right). Universal indicator pane Figure 3-12. Universal indicator pane replaces the battery pane (right). Control pane Control pane occupies the bottom part of the screen and displays the labels associated with the two softkeys. Figure 3-13.
  • Page 17 backstepping from one state to the previous state never leads into a temporary state; they are skipped. More information on these components can be found in section UI components. Options menu The commands and options that are available in the current context can be accessed via the options menu.

  • Page 18: Presentation Of Text

    Presentation of text Justification Default text justification is left. There are only a few exceptions to this, in specific cases, for example: · Soft indicators in idle state. These are right justified. It must also be noted that when the display text language is Arabic or some other language following right to left writing direction, many elements are right justified.

  • Page 19: Keypad Tone

    Edit key - the interaction is different, causing the action on the key release event. · Certain keys, possibly in certain contexts only, may perform key repeat. Key repeat starts after long key press timeout when the key is continuously being held down, and the associated function is performed according to the key repeat frequency, for example 3 times/second.
  • Page 20 there is no item to open and no option to select (see section Selection list). The Select key must not directly activate any such function the user would not expect in the given situation. Therefore, the context specific options menu is offered in states where no selectable items exist.
  • Page 21 During calls: - Puts an active call on hold; makes a held call active; swaps active and held calls if both exist. - Answer a waiting call (if only one call exists already). (See section Call handling for more detailed descriptions.) In idle: - Brings up Last dialed calls list for redialing.

  • Page 22: Navigation

    Power Navigation The model of navigation is based on states arranged as hierarchical 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 ·...

  • Page 23: Navigation Using Tabs

    Navigation using Tabs Nokia Series 60 UI uses the tab metaphor that allows combining several pages of related information into a single state when all of it would not fit onto a single screen or list. The user can switch the tabs using the left and right scroll keys, as indicated in Navi pane.

  • Page 24: Folder Hierarchies

    Folder hierarchies When browsing within a folder hierarchy, Series 60 UI offers a direct access from one folder to another (“sibling”) folder in the same level. The left and right scroll keys are used to accomplish this. The Navi pane displays the folder number versus the total number of folders in the parent list.

  • Page 25: Navigation Using Links

    This additional navigation feature can be interpreted as a shortcut between sibling folders. For folder navigation, the basic navigation rules are applied, noticing the following: · Moving from one folder to another has no effect on the function of the Back softkey in these views: from all of them the back function leads to the previous hierarchy level.

  • Page 26: Empty Lists And Grids

    Figure 5-1 List highlighting (a) and grid highlighting (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.

  • Page 27: Scrolling Indicator For Lists

    (This is due to EPOC implementation and is different from traditional Nokia style where the loops appear continuous, with no jump in the looping point.) The scrolling as specified here is ‘traditional style’...

  • Page 28: Order Of Items And Browsing In Grids

    The indicator is situated in the control pane, 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 the list’s beginning, the upward arrow image becomes less noticeable and eventually (when on the first item) disappears, and vice versa.
  • Page 29 The browsing in grids that scroll vertically resembles traditional scrolling in text editors, based on the idea that the user can always move to the correct row first and then move within the row to the correct item. The following rules are applied: ·...

  • Page 30: Scrolling Indicator For Grids

    Horizontally scrolling grids may be used when the application design requires it. For them, the browsing rules are applied by exchanging the horizontal and vertical browsing rules. The example figures presented above are correct if turned 90 degrees counter-clockwise. Scrolling indicator for grids The same scrolling indicator as with lists is applied to vertically scrolling grids.

  • Page 31: Selection List

    Left softkey (Select) select the item, do associated function Right softkey (Cancel) dismiss the menu; return to the state preceding the opening of menu Send key, Edit key ignored numeric keypad ignored other keys dismiss the menu and do the default action of the Examples of components using menu lists are options menu and list query.
  • Page 32 · Open a context-specific options menu. This should only happen when 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 or Help.
  • Page 33 Select Figure 5-9. Context-specific Options menu opened from Select key. Keypad functions for selection lists: Scroll up / down move focus in the list Scroll left / right may be ignored, or may have navigation functions associated with them (see section Navigation) Select key select the item;...

  • Page 34: Markable List

    Figure 5-10. Selection lists. Markable list A markable list is a selection list with the added marking feature. The user can mark any number of items on the list while browsing it, and then execute a single command, which is applied to all the marked items. This is analogous to the multiple-item highlight feature used in computer GUIs.
  • Page 35 The mark and unmark functions are available in the Options menu of the markable list. Alternatively, or as a shortcut, the user can keep the Edit key pressed while using the navigation and Select keys in the following way: · Pressing the Select key while holding Edit marks the current item.

  • Page 36: Multiselection List

    For other keypad actions than the ones described above, refer to the Selection list section. Multiselection list Multiselection list is used when we want to emphasize that it is possible to select several items from a list at the same time. Typically, there is an operation going on that expects one or more items as input.

  • Page 37: Setting Lists

    other keys cancel the list, and then do the default action of the Setting lists Setting list is a specific kind of selection list containing setting items which the user can adjust. Setting lists are displayed in the main pane. Figure 5-13.
  • Page 38 values. Then the last option is named Other, and selecting it opens a data query for entering the new value. multiselection list 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.
  • Page 39 During a setting editor state, the keypad functions are: Scroll up / down pop-up, multiselection: browse the list text: move cursor slider: ignored Scroll left / right pop-up: ignored multiselection: ignored text: move cursor slider: adjust (key repeat event may move the slider by several steps) Select key all except multiselection: accept the value, return to...

  • Page 40: Forms

    · If pop-up setting has only two available values (like On and Off) and no special procedure is needed when switching from one value to the other, then the setting editor (list) need not be displayed when the user presses the Select key; the item's value is changed immediately.
  • Page 41 Forms without the Options softkey In case the form does not need any context-specific functions in the Options menu, the softkey interface can be the same as in queries: left softkey is Done and the right softkey is Cancel. Done accepts the contents and returns, wherea the Cancel function discards all changes in the form and returns.
  • Page 42 Left softkey (Options) Options menu. (In a form without options menu, left softkey is Done.) Right softkey (Done) Accept the contents and return to previous state. (In a form without options menu, right softkey is Cancel.) Clear pop-up: ignored text: delete characters slider: ignored Edit pop-up: ignored...

  • Page 43: List Layouts

    slider 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 equal height on screen. (Forms do not follow this rule in edit state;...

  • Page 44: Column Structure Of Lists

    · Partial items are not visible: when the list/grid pane area does not exactly correspond to an integer number of items, the remaining area outside the last fully visible item appears empty, displaying the background of the particular pane. Column structure of lists For visual consistency, the standard list layouts are built around a structure of three virtual columns.

  • Page 45: List Item Types

    Standard elements in list items, associated with columns, are: column A - small graphic (icon) - item number (see section Numbered items) column B - heading (title or attribute of the item) column AB - heading (title or attribute of the item) - large graphic (e.g.
  • Page 46 single-line item with graphic and heading Figure 5-26. small graphic (A), heading text (B), main text (C) usage: - menu lists - selection lists, markable lists - multiselection lists There is a corresponding component for pop-up windows. single-line item with large graphic Figure 5-27.
  • Page 47 primary text, secondary text (ABC) usage: - menu lists - selection lists double item with large graphic Figure 5-31. large graphic (AB), primary text, secondary text (C) usage: - menu lists - selection lists Like a double item, but with the graphic added on the left side.

  • Page 48: Numbered Items

    setting item Figure 5-34. attribute text (ABC), value 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 value box may be omitted in order to create a regular selection item within a setting list.

  • Page 49: Grid Types

    Figure 5-36. A setting list containing a non-setting item (Call waiting) to access another view. Grid types Grids are in many ways analogous to lists. However, there are some things worth noticing: · In grids, the Scroll left and Scroll right keys are always used for moving the focus;...

  • Page 50: Options Menu

    Figure 5-37. A find pane within a selection list of names in Phonebook. The standard functionality is as follows: · Characters typed from the numeric keypad appear in the end of the string in the find pane. · There is no cursor, so the user can only add and remove characters in the end. ·...

  • Page 51: Submenus

    The options menu is a menu list displayed in a pop-up window. Selecting an item is done pressing either the left softkey (OK) or the Select key. The user must either select an item from the list or cancel the menu; it can't be left pending during another action.

  • Page 52: Unavailable Items

    Series 60 UI does not use dimming of menu items. This is a trade-off issue: removing unnecessary options makes the option lists shorter –...

  • Page 53: Options Template

    Delete operation should not be listed in the OK options menu. (The Clear key 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 Create new type of option in the OK options –...
  • Page 54 Submenu for message writing Write 4 Start writing a new short message. Start writing a new multimedia message. Start writing a new email. email Initiate creation of a new item. When more than one type of Create new item can be created, a submenu may be used to select the type. Submenu for initiating the sending of items using one of the available connections.
  • Page 55 Mark or unmark the current item, depending on the current Mark / Unmark state. Mark all Unmark all Rename the item in focus. Rename Submenu for functions used to add contact information into Add to contacts 4 the Phonebook. Creates a new contact item. Create new Adds new field(s) in an existing contact item.

  • Page 56: Notes

    Notes · A note is a feedback component that informs the user about the current situation. A note contains a text and possibly a graphical element. The softkey labels are typically empty (a wait note is an exception to this.) Figure 5-40.
  • Page 57 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 can't be seen directly by some other means. Example: Message sent.

  • Page 58: Soft Notifications

    Soft notifications Soft Notifications are reminders that inform the user of events that have occurred in the user’s absence, or while the user was busy with some application. Text, and also graphics, can be used to communicate the message to the user. Soft notifications are displayed in pop-up windows.

  • Page 59: Discarding Soft Notifications

    Figure 5-43: A grouped soft notification. The height of the window is dynamic and depends on the number of lines in the list. Discarding soft notifications The application that launched a soft notification can discard it without user intervention when the notification becomes obsolete. A soft notification should remain pending until the user has responded to it, or started using the corresponding application so that in effect the notification becomes obsolete.

  • Page 60: Queries

    Figure 5-44. Several stacked soft notifications. Note the graphic indicating multiple windows. Queries A query is a state where the software waits for user input. Queries are used in situations with more than one way to proceed, when the application needs data from the user, or when it is necessary to make sure the user knows what is happening.

  • Page 61: List Query

    proceed is possible, and the response text (for example ‘OK’) is placed on the left softkey. The Selection key always causes the same action as the left softkey. Figure 5-45. A confirmation query. Guidelines for designing confirmation queries: · When designing the prompt text, make sure the ‘positive’ answer is also the safe one.

  • Page 62: Multiselection List Query

    Figure 5-46. A list query. The number of items in the list should be kept low, so that all items can be seen without scrolling. Instead of a list, a grid can be used in a query. The grid query function is otherwise identical to a list query.

  • Page 63: Data Query

    Figure 5-48. Multiselection list query. Data query A data query requests the user to type in some alphanumeric or numeric information, like a name or a phone number. 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 restricted to for example numeric data, date or time only.

  • Page 64: Indicators

    Figure 5-50. A password query window. Data queries with multiple fields It is possible to have two input fields in a data query. An example of this is a user name and password query: one field is then a normal alphanumeric editor and the other a password editor.

  • Page 65: Status Indicators

    The signal indicator is part of the status pane, and it is displayed in all states where the status pane exists. The indicator consists of an antenna icon and a bar graph that indicates the current signal level. The antenna icon may be replaced by another icon indicating the GPRS connection status.

  • Page 66: Editing Indicators In Pop-Up Windows

    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 the navi pane.

  • Page 67: Operator Indicator

    Operator indicator In idle, the title pane contains the operator indicator. It is either a text or a graphical image. Figure 5-58. Scrolling indicators Arrowhead-shaped icons that indicate the scrolling status in lists are situated between softkey labels in the softkey pane. Refer to section Lists and grids for detailed description of the indicator functionality.

  • Page 68: Application Shell

    · The softkeys can be configured by the user to access various applications. · Scroll up, scroll down: open the Phonebook. · Scroll left, scroll right: unassigned by default, may be assigned by the user. · Select key: ignored. · Numeric keys can be used to dial a phone number manually;...

  • Page 69: Shortcuts

    Fast application swapping window. Application handling This section describes the handling of applications, and interactions between applications, in the Series 60 UI environment. Some basic assumptions: · There can be only one instance of each application at a time. This means that...

  • Page 70: Opening And Closing Applications

    Multitasking The Series 60 UI style allows multitasking, that is, working with more than one application simultaneously. To accomplish this, an application can be left running when switching to another application, and it is possible to swap between running applications and interact with them.

  • Page 71: Application Interactions

    It is also possible to go to Idle state of the phone and leave an application running. This can be done by pressing the End key, or by selecting the Phone application from the Application shell. (The Phone application and Idle state are mutually exclusive states in the phone: when there is a voice call going on, there is no Idle state.) During a phone calls, however, the End key is used for terminating the call and cannot be used as a shortcut to Idle.

  • Page 72: Phone

    saves it automatically into a default place, and if there’s a pending dialog it will be canceled. The user is not asked questions; all the operations needed to bring the application to the target state are done automatically. After switching applications in this way, the Back function does not lead to the previous state.
  • Page 73 In simple one-call cases, the Phone application looks like this: Figure 6-6. Phone application examples: a. Creating an outgoing call; b. Active call going on. More complex cases, where more than one call is involved, may also happen. The locations and sizes of individual call windows change according to the situation: Figure 6-7.

  • Page 74: Call Handling

    Figure 6-8. Call status window, used when Phone application does not reside on screen. Call handling Calls are handled using the Send and End keys as follows: Send - Answers the incoming call when the phone rings or there is a waiting call. - Creates an outgoing call when there is a number entry window active.

  • Page 75: Viewers And Players

    Figure 6-9. Volume indicator in the Navi pane. Viewers and players Viewers are used for displaying read-only data. Examples of viewers are SMS, e-mail, and image viewers. To edit or create new data, the user starts an editor; the viewer may offer an option for starting an editor.

  • Page 76: Multimedia Viewers

    Multimedia viewers For viewers that support several forms of data, the capabilities should be extended, while still keeping the core functions consistent 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: ·...

  • Page 77: Text Editing

    · Forward / Rewind Fast playing of the piece, using short audio clips, forward or reverse. · Faster / Slower Changes the speed of playing the audio, without changing the pitch. Can be useful with voice memos, for example. Playing functions shall be available in the player’s menu of options. However, the numeric keypad may also be used to control some of the functions.

  • Page 78: Edit Menu

    Selects characters when pressed simultaneously with navigation keys (see section Selecting text below). Edit menu Editing-specific functions can be accessed using the Edit menu. It is opened by pressing the Edit key when in text editor. The Edit menu looks and works just like the Options menu, but it contains only text-editing functions whereas other available options remain accessible in the Options menu.

  • Page 79: Editing Indicators

    Figure 6-10. Special character window. Editing indicators The status of the editor is displayed using graphic indicators. They inform the user about things such as: · Editing mode (numeric/alphanumeric, language-specific modes) · Character case · Predictive text status · Available space When the editor is in the main pane, the indicators are located in the navi pane.

  • Page 80: Selecting Text

    Selecting text A chunk of text can be selected in an editor by keeping the Edit key pressed and using the navigation keys (scroll left/right/up/down). The selected text is shown using a highlight. The Cut and Copy functions are available when text is selected. Figure 6-12.

  • Page 81: Saving Edited Data

    Saving edited data Various kinds of documents may have different requirements concerning the behavior of keeping or discarding the edited data. Typically one enters data, or modifies it, in an editor, and then closes the editor accepting the new data. But sometimes there may be a need to do something else, like cancel the edit, or save an intermediate version of the data.

  • Page 82: Folders

    (depending on application). In Series 60 UI, hierarchical folder structures are not allowed. In other words, a folder cannot reside inside another folder. The normal methods for managing folder are as follows: ·...

  • Page 83: Fetching Data

    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 address from the Phonebook. This is called fetching. It is a read-only operation: the user cannot edit the data, only browsing and selecting are possible.

Table of Contents