Nokia TS447 User Manual
NOKIA
SERIES 60 UI STYLE GUIDE
1
Copyright © Nokia Corporation | ver. 1.4
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 content is also intended to be independent of product-specific hardware, so that
the guidelines would apply to any product that implements the UI style. Sometimes
this means dropping out things that would be appropriate for one product but maybe
not for another one.
A few example images in this version are not final.
Seppo Helle, 31.10.2001
2
Contents
ABOUT THIS DOCUMENT................................................................................................................................................ 7
PURPOSE .......................................................................................................................................................................7
AUDIENCE..................................................................................................................................................................... 7
1. WHERE NOKIA SERIES 60 UI BELONGS................................................................................................................ 8
2. HARDWARE REQUIREMENTS...................................................................................................................................9
DISPLAY .............................................................................................................................................................................. 9
KEYS ..............................................................................................................................................................................10
EXTRA KEYS................................................................................................................................................................10
3. GRAPHICAL COMPONENTS.....................................................................................................................................11
WINDOWS AND PANES................................................................................................................................................11
STANDARD PANES IN APPLICATION WINDOWS....................................................................................................12
MAIN PANE.................................................................................................................................................................12
STATUS PANE.............................................................................................................................................................13
TITLE PANE..................................................................................................................................................................13
CONTEXT PANE..........................................................................................................................................................14
NAVI PANE..................................................................................................................................................................14
SIGNAL PANE.............................................................................................................................................................15
BATTERY PANE / UNIVERSAL INDICATOR PANE................................................................................................15
CONTROL PANE .........................................................................................................................................................16
POP-UP WINDOWS........................................................................................................................................................16
PRESENTATION OF TEXT................................................................................................................................................18
JUSTIFICATION...........................................................................................................................................................18
TRUNCATION..............................................................................................................................................................18
4. INTERACTION STYLE.................................................................................................................................................18
KEYPAD FUNCTIONS......................................................................................................................................................18
KEY PRESSES..............................................................................................................................................................18
KEYPAD TONE.............................................................................................................................................................19
TYPICAL FUNCTIONS OF THE STANDARD KEYS.................................................................................................19
NAVIGATION....................................................................................................................................................................22
NAVIGATING IN APPLICATIONS.............................................................................................................................22
NAVIGATION USING TABS ......................................................................................................................................23
FOLDER HIERARCHIES.............................................................................................................................................24
3
NAVIGATION USING LINKS.....................................................................................................................................25
5. 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
SETTING LISTS............................................................................................................................................................37
FORMS.........................................................................................................................................................................40
LIST LAYOUTS..................................................................................................................................................................43
COLUMN STRUCTURE OF LISTS.............................................................................................................................44
LIST ITEM TYPES........................................................................................................................................................45
NUMBERED ITEMS....................................................................................................................................................48
ITEM TYPE COMBINATIONS....................................................................................................................................48
GRID TYPES......................................................................................................................................................................49
FIND PANE........................................................................................................................................................................49
OPTIONS MENU..............................................................................................................................................................50
SUBMENUS.................................................................................................................................................................51
UNAVAILABLE ITEMS................................................................................................................................................52
OTHER OPTION MENUS...........................................................................................................................................52
OPTIONS TEMPLATE..................................................................................................................................................53
NOTES ..............................................................................................................................................................................56
SOFT NOTIFICATIONS.....................................................................................................................................................58
DISCARDING SOFT NOTIFICATIONS......................................................................................................................59
MANY SIMULTANEOUS SOFT NOTIFICATIONS...................................................................................................59
QUERIES............................................................................................................................................................................60
4
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
6. APPLICATIONS AND DESIGN EXAMPLES.............................................................................................................67
IDLE ..............................................................................................................................................................................67
APPLICATION SHELL.......................................................................................................................................................68
SHORTCUTS ................................................................................................................................................................69
CUSTOMIZING THE APPLICATION SHELL............................................................................................................69
FAST APPLICATION SWAPPING..............................................................................................................................69
APPLICATION HANDLING .............................................................................................................................................69
OPENING AND CLOSING APPLICATIONS.............................................................................................................70
MULTITASKING..........................................................................................................................................................70
APPLICATION INTERACTIONS.................................................................................................................................71
PHONE ..............................................................................................................................................................................72
CALL HANDLING........................................................................................................................................................74
VIEWERS AND PLAYERS................................................................................................................................................75
TEXT VIEWERS............................................................................................................................................................75
IMAGE VIEWERS........................................................................................................................................................75
MULTIMEDIA VIEWERS............................................................................................................................................76
AUDIO AND VIDEO PLAYERS..................................................................................................................................76
TEXT EDITING...................................................................................................................................................................77
EDIT MENU .................................................................................................................................................................78
EDITING INDICATORS...............................................................................................................................................79
5
SELECTING TEXT ........................................................................................................................................................80
DOCUMENT HANDLING................................................................................................................................................80
CREATING NEW DOCUMENTS ...............................................................................................................................80
SAVING EDITED DATA..............................................................................................................................................81
FOLDERS......................................................................................................................................................................82
GROUPS.......................................................................................................................................................................82
FETCHING DATA.........................................................................................................................................................83
SETTINGS..........................................................................................................................................................................83
6
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 application
design for devices using the Series 60 UI.
It will also help persons like product managers to get a general view of the Series 60
UI, what it is and how it is intended to be used.
7
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 in this document although it would be possible to support,
for example, an external keyboard.
One hand operation is a key rule: the user is able to do almost all tasks with just one
hand, pressing the keys with the thumb. A few exceptions 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 very 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 interface styles that are better than Series 60 UI for
the very basic phones.
Series 60 UI is also not designed for car based or wearable products, or for other
product categories significantly different from advanced hand-held mobile phones.
8
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 generations.
The first implementation, however, assumes these 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 risks making some fonts too small to be
readable. Larger pitch is possible, considering usability issues.
·
Colour capability (4096 or more colours preferred).
9
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, *, #)
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, down and select functions would be mapped to it.
·
Hardware solution may have some effect on the navigation functionality: for
example a long key press event can't be accomplished with a rotating device.
·
Each softkey has a corresponding textual label on the bottom of the screen.
·
The Edit key is the only key that can be used simultaneously with another key
press, for example, the combinations where any of the navigation keys are
pressed while the Edit key is held down.
See section Keypad functions in chapter Interaction style 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 could be used to control applications or hardware such as
spoken commands, sound recording, and audio volume control.
10
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,
window Window is a component that has no parent except
Each application runs in a window of it's own.
pane Pane means a sub-component of a window (sub-
corresponding to the entire pixel area of the
physical screen.
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 parts of the screen visible around
themselves.
Applications can also use other temporary windows.
window).
A window may contain many panes, and each pane
may contain further sub-panes and so on. A bottom
level component that cannot have a subcomponent, can be called an element.
Figure 3-1. Panes
application window An application window is a principal window filling
up the entire screen. It is usually not used directly
for display, but just as a parent for the various
panes.
A typical application window is divided into the
following panes:
Status pane
Main pane
Control pane
11
- 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 Pop-up windows.
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 There are several standard list types to choose from.
(See section Lists and grids for a detailed
description of list types.)
a grid There are also several different grid types to choose
from.
find pane Find pane is used together with a list, and it allows
the user to search list items alphabetically. (See
section Lists and grids for more information about
the find pane.)
status indicators The status indicator pane only exists in idle state,
immediately below navi pane, and displays status
indicators. A few of the indicators appear also in the
universal indicator pane (at other times than 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 status indicators
and soft indicators.
12
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 charging. It occupies the top part of the screen.
Status pane may be non-existent in a few applications or situations.
Status pane contains the following sub-panes:
Title pane ·
·
Context pane
·
Navi pane
·
Signal pane
·
Battery pane / Universal indicator pane
Title pane
Signal
pane
Context
pane
Figure 3-2. Status pane areas.
Navi pane
Batteery pane
(Universal
indicator pane)
See the following sections for detailed descriptions about each of these.
Title pane
Title pane displays a context - dependent application title or state name.
Figure 3-3. Title pane
Typically, the title text is the descriptive name of the current 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 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
The principal use of the navi pane is to display information about the current state
and view, and to help the user navigate in the application.
Figure 3-5. Navi pane.
Depending on the context, the navi pane can alternatively contain:
Tabs
Figure 3-6. Tabs.
Used when there are a few different data views that
can be viewed alternatively. There are arrow
indicators in both ends of the widget (shown only
when there are further tabs hidden in the
corresponding direction). Each tab has either a
graphic or a text (or both) as a label.
The following tab layouts can be used:
- two tabs
- three tabs
- four tabs
- three long tabs (stacked, so that only one is fully
visible at a time)
The currently active tab is highlighted.
More than four tabs can exist simultaneously; the
tabs can be scrolled horizontally. However, as a
14
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 scroll.
Indicators
Figure 3-8. Indicators in the navi pane.
In editors the navi pane contains editing indicators.
(See the section Indicators for a more detailed
description of navi pane indicators.)
Application-specific content When none of the above content types is suitable,
the navi pane content can be designed specifically
for an application.
Empty pane
Figure 3-9. Empty navi pane.
The navi pane can 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 information about GPRS connection status.
Battery pane / Universal indicator pane
This area of the status pane is used in two different ways.
15
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 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. Control pane.
When there is a list that can be scrolled, the scrolling indicator arrows appear
between the softkey labels. See section Lists and Grids for a detailed description of
the indicators.
Control pane is also active during options menus, queries and other states using popup windows, although it does not reside itself in the pop-up window.
The actual softkeys should be positioned directly beneath the screen so that the
association between the keys and their respective labels is evident.
Pop-up windows
Certain UI components are displayed within pop-up windows. A common
characteristic for all these components 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 other 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 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
(possibly containing a graphical element) and some
kind of input component. Various types of queries
exist:
- confirmation query: has either one or two possible
input values, given using the softkeys.
- list query: has a limited number of possible input
values, the user selects one from a list.
- multiselection list query: has a limited number of
possible input values, the 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 user can edit.
Note A note is a feedback component that informs the
user about the current 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-existent.
Soft notification Soft notifications are reminders which inform the
user of events that have typically occurred during
the user's absence. Soft notifications can only be
seen in the idle state, and the user can acknowledge
them. There are two types of soft notifications; the
layouts resemble those of confirmation queries and
list queries:
- single soft notification: contains one notification.
- 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
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-toleft languages.)
Truncation
When a text does not fit into the view where it is displayed, it must be truncated. By
default, texts are truncated from the end, and three periods (…) are displayed in the
end of the truncated text as an indication. Exceptions to the main rule:
·
Phone numbers are truncated from the beginning, because the first digits of a
phone number are usually considered less important than the rest.
4. INTERACTION STYLE
Keypad functions
This section describes the typical functions for each key. Some application-specific
functions may exist in addition to the ones mentioned here.
Key presses
A key press is a press and release of a key (down and up).
Typically, the primary action of the key is performed when the key is pressed down,
already before the key is released. (There may be exceptions to this rule; see 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 for less than 0.8 seconds. ·
·
If the key is held down for 0.8 seconds or more, the result 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 short key press action is performed first at the moment
when the key is pressed down, and if the key press turns out to be long, then the
long key press action is performed. In a few cases - the Applications key and the
18
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.
·
Long key press action and key repeat actions are not defined at the same time;
only one of those can occur in the given context.
·
The primary key press action should not be conflicting with the long key press
action or key repeat action.
With some input hardware, long key presses and key repeat may not be possible.
The roller is an example of such an input device. The long key press actions and
key repeat actions should be designed so that this does not cause harm: the
long key press must never be the only way to do a function.
Keypad tone
A tone can be generated whenever a key event occurs. The tones for short key press
(actually a key down event) and long key press are different; a key repeat event uses
the long key press tone.
Keypad tone can be adjusted or turned off by the user.
Typical functions of the standard keys
Scroll up / Scroll down - Move focus one item up/down in lists and grids.
- Move cursor one line up/down in editors.
- Scroll view one page up/down in viewers.
Scroll left / Scroll right - Move focus one item left/right in grids.
- Move cursor one character left/right in editors.
- Move to previous/next view in tabbed views.
- Move to previous/next folder view in hierarchical
folder structures.
- Move to previous/next document or view in
certain document viewers.
- 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 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
menu.
Other labels and functions:
- Select. Used in menu lists and grids where further
options are not available. Selects the focused item;
same as Select key function.
- OK, Yes 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 previous
state. (See section Application handling for a more
detailed description.)
Other labels and functions:
- Exit in application main states. Exits the
application and returns to idle.
- Cancel, interrupts a procedure and returns to the
preceding state; used in queries and other
temporary states.
- No and other negative replies; 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 where the focus is in a field containing
a phone number or name associated with a phone
number.
- Sends a message; used when in a message editor
and To-field contains a valid address.
20
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.
End - Rejects the arriving call.
- When an active call exists: ends the active call.
- When only a held call exists: ends the held call.
- When both active and held calls exist: 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 all connections (for
example GPRS, data call); however this has no effect
on IR and Bluetooth.
(See sections Call handling and Application
handling for more detailed descriptions.)
Applications key - Brings up the Application shell, allowing
application launching and swapping.
- When within the Application shell, returns to idle.
- Long press of Applications key brings up the quick
application swapping window, allowing switching
between running applications.
(See section Application handling for a more
detailed description.)
Numeric keypad (0-9, *, #) - Numeric and alphanumeric character entry.
- Application-specific shortcuts and other functions.
Clear - Clears characters when editing text or numbers.
- Clears documents or other entities in lists. (These
functions always require a confirmation from the
user.)
Clear is not used for back stepping or exiting; it is
only used for deletion.
Edit - Opens an editing-specific Options menu in editors;
the menu contains functions for input mode
changing and other editing functions. Refer to Text
editing section for contents of the menu.
- In editors, can be used together with the
21
The Edit key is handled in a special way: the primary
Power - Turns power on and off. This requires a long key
Navigation
navigation keys to select (highlight) text, which
then enables the copy and cut functions.
- In markable lists, using Edit key together with
navigation keys allows the user to mark several
items of the list, then a function can be executed on
all the marked items as one operation.
action (editing options menu) is opened from the
key release event, not the key down event as it
would usually be. This is to enable the mark/select
function where the key is being held down as a
modifier key.
(See sections Editing and Lists and Grids for more
detailed descriptions on the select and mark
functions.)
press.
- Opens the Profiles menu for switching active
profile.
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
·
Links to applications and documents; Pinboard
These features are described in the following sections.
Navigating in applications
The traditional hierarchical tree structure forms the basis for navigation. The user can
move forward from one node (state) by opening an available item or selecting an
option from a menu. Back function (available in the right softkey Back) returns to
the previous level in the hierarchy. In the initial state of an application (number 1 in
the figure below) the Exit function replaces Back in the right softkey; it closes the
application.
22
1
1-1
1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3
1-2 1-3
Figure 4-1. An example of a basic state hierarchy in an application. Solid lines indicate
moving forward from a state into a sub-state. Dotted lines are backward
moves to the previous level.
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.
1
1-21-1
1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3
1-3b1-3a
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 keys.
Note that there’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 effect on the function of the Back
·
softkey in these views: from all of them the back function leads to the same
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 them is the default view that is opened
when the user enters the state from the previous level.
·
When the user has proceeded from a tabbed view into a deeper hierarchy level,
the Back function returns to the same tabbed view where 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 available to the user than another tab view in the same
state.
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.
1
1-1
1-1-1 1-1-2 1-2-1
1-2 1-3
Figure 4-3. In this example, each displayed state is a folder containing a list of items.
State one contains three folders (1-1, 1-2, 1-3). When the user has opened
one of these, there is a possibility to move directly into the other two
folders without first going back to state 1. Folder 1-1 contains two subfolders and folder 1-2 contains one. There can be individual items in each
folder in addition to the folders; those are not visible in the state diagram.
24
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.
· The navigation shortcuts can only be applied when there 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 shortcuts: there is no direct path back to the state where the link was
started; instead, the navigation inside the linked application functions as if the user
had manually activated the other application and navigated to the target state.
For more information on links, see the Application handling section.
5. UI COMPONENTS
Lists and grids
Vertical lists are used extensively in most applications. Two dimensional grids are less
frequently used, but have obvious advantages in some situations. In lists and grids,
the user can move the focus from one item to another using the navigation keys. This
is called browsing or scrolling.
Vertical browsing is preferred over horizontal browsing in general; the keypad
·
solutions should take this into account.
Highlighting
When a list or grid is in use, one item on it is always in focus. The item in focus is
indicated by a graphical means called highlighting; the item is said to be highlighted.
The appearance of highlighting on a list item is a coloured (or gray) bar which
completely occupies the item in focus. The item text and graphics are displayed on
the bar.
Grid item highlighting is a frame over the item in focus.
25
a. b.
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.
Depending on the case, it may be justified to prompt the user to create the first item
for an empty list.
List browsing
In a list, browsing is possible in two directions: pressing scroll up key moves the
focus one step up (backward), and pressing scroll down moves the 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 that is becoming focused is already fully visible, all the items
·
stay in their current positions, and highlight is moved from the old item to the
new item.
26
Loading...