Summary of the content on the page No. 1
NOKIA
SERIES 60 UI STYLE GUIDE
1
Copyright © Nokia Corporation | ver. 1.4
Summary of the content on the page No. 2
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 means skipping many details that can be found in other documents. 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. The conte
Summary of the content on the page No. 3
Contents ABOUT THIS DOCUMENT................................................................................................................................................ 7 PURPOSE ....................................................................................................................................................................... 7 AUDIENCE........................................................................................................................................
Summary of the content on the page No. 4
NAVIGATION USING LINKS.....................................................................................................................................25 5. UI COMPONENTS ......................................................................................................................................................25 LISTS AND GRIDS...........................................................................................................................................................
Summary of the content on the page No. 5
CONFIRMATION QUERY...........................................................................................................................................60 LIST QUERY.................................................................................................................................................................61 MULTISELECTION LIST QUERY ...............................................................................................................................62 DATA QU
Summary of the content on the page No. 6
SELECTING TEXT ........................................................................................................................................................80 DOCUMENT HANDLING ................................................................................................................................................80 CREATING NEW DOCUMENTS ...............................................................................................................................80 SAVING ED
Summary of the content on the page No. 7
About this document Purpose The Nokia Series 60 UI Style Guide gives an overview of the Series 60 user interface and describes the essential parts of it, giving examples of how to use the interface elements. 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. Audience This document is intended, in the first place, for people who work with appli
Summary of the content on the page No. 8
1. WHERE NOKIA SERIES 60 UI BELONGS Nokia Series 60 UI is intended for use in higher end mobile phones featuring personal information management (PIM) and multimedia applications such as: Calendars Text and multimedia messaging E-mail WAP or other browsers Imaging The screen is suitable for viewing short messages and can also display colour or grayscale images. The data entry interface is optimised for a numeric ITU-T type keypad. Other input devices are not considered
Summary of the content on the page No. 9
2. 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. Series 60 display. The Series 60 UI display specifications are as follows: Resolution: 176 pixels (width) by 208 pixels (height). It should be possible to modify the vertical resolution for future genera
Summary of the content on the page No. 10
Keys The following keys are required for Series 60 UI: Scroll up navigation keys Scroll down Scroll left Scroll right Select key Left softkey softkeys Right softkey Send key call handling End key Applications key other ITU-T numeric keypad (0-9, *, #) Clear key Edit key Power key The navigation keys can be ordinary buttons, or they can be implemented using different control devices, for example a roller which can be rotated and pressed so that up, dow
Summary of the content on the page No. 11
3. GRAPHICAL COMPONENTS Windows and panes The display layouts are hierarchically organised. The layouts are built using components called windows and panes. 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 entire screen, but there are also smaller (temporary) windows that take up only a part of the screen, leaving other part
Summary of the content on the page No. 12
- status pane - main pane - softkey pane See the dedicated sections for more detailed descriptions on each of these panes. pop-up window A pop-up window does not fill the entire 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
Summary of the content on the page No. 13
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 – for example the signal strength and battery char
Summary of the content on the page No. 14
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. Some applications (e.g. Contacts) may even use the pane in a fully dynamic way to display some data relevant to the application. Navi pane
Summary of the content on the page No. 15
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. dates in a calendar. Arrow indicators in both ends of the pane indicate the possibility to scr
Summary of the content on the page No. 16
Battery pane Battery indicator is only visible in the idle state. It displays the remaining energy level of the battery, using a graphical indicator. It also acts as a charging indicator. Figure 3-11. Battery pane (right). Universal indicator pane Used for displaying universal status indicators: the status indicators that need to be visible regardless of the current application. The maximum number of items at a time is 3; items are prioritized according to their importance. Figure
Summary of the content on the page No. 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. It is displayed as a list in a pop-up window. Query A query is a component where the software waits for user input. All query components are displayed in pop-up windows. They consist of a prompt
Summary of the content on the page No. 18
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. (See [some specific document] for more information on layout changes for right-to- left languages.) Truncation When a
Summary of the content on the page No. 19
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. (The repeat frequency may be user adjustable.) Moving the cursor in an editor is a typical case where key repeat can be used.
Summary of the content on the page No. 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. The open/select function should not be mixed with the options menu function within the same state; only one or the other should be used. Left softkey - Typically labeled Options. Opens the options me
