S60 UI Style Guide
S60
platform
Version 1.2
November 9, 2005
S60 UI Style Guide | 2
Legal Notice
Copyright © 2005 Nokia Corporation. All rights reserved.
Nokia and Nokia Connecting People are registered trademarks of Nokia Corporation.
Java and all Java-based marks are trademarks or registered trademarks of Sun
Microsystems, Inc. Other product and company names mentioned herein may be
trademarks or trade names of their respective owners.
Disclaimer
The information in this document is provided “as is,” with no warranties whatsoever,
including any warranty of merchantability, fitness for any particular purpose, or any
warranty otherwise arising out of any proposal, specification, or sample. Furthermore,
information provided in this document is preliminary, and may be changed substantially
prior to final release. This document is provided for informational purposes only.
Nokia Corporation disclaims all liability, including liability for infringement of any
proprietary rights, relating to implementation of information presented in this document.
Nokia Corporation does not warrant or represent that such use will not infringe such
rights.
Nokia Corporation retains the right to make changes to this specification at any time,
without notice.
License
A license is hereby granted to download and print a copy of this specification for
personal use only. No other license to any other intellectual property rights is granted
herein.
Version 1.2 | November 9, 2005
S60 UI Style Guide | 3
Contents
1. About This Document ......................................................................................... 8
1.1 Purpose...........................................................................................................................8
1.2 Audience .........................................................................................................................8
2. Where the S60 User Interface Belongs ............................................................. 9
3. Hardware Requirements ................................................................................... 10
3.1 Display...........................................................................................................................10
3.2 Keys ..............................................................................................................................10
3.2.1 Extra keys.............................................................................................................12
3.2.2 Full QWERTY keyboard .......................................................................................12
3.3 Memory Card ................................................................................................................13
4. Graphical Components..................................................................................... 14
4.1 Windows and Panes .....................................................................................................14
4.1.1 Standard panes in application windows ...............................................................15
4.1.2 Layout changes in right-to-left languages ............................................................20
4.1.3 Pop-up windows ...................................................................................................20
4.2 Presentation of Text ......................................................................................................21
4.2.1 Alignment..............................................................................................................21
4.2.2 Truncation.............................................................................................................21
4.2.3 Marquee scrolling .................................................................................................22
4.3 UI Themes.....................................................................................................................22
4.3.1 Replacing UI elements .........................................................................................22
4.3.2 Designing UI themes ............................................................................................23
4.3.3 Color scheme in a UI theme.................................................................................23
5. Interaction Style ................................................................................................ 24
5.1 Keypad Functions .........................................................................................................24
5.1.1 Key presses..........................................................................................................24
5.1.2 Keypad tone .........................................................................................................24
5.1.3 Typical functions of the standard keys .................................................................25
5.1.4 Typical full QWERTY keyboard functions ............................................................28
5.2 Navigation .....................................................................................................................29
5.2.1 Navigating in applications.....................................................................................29
5.2.2 Navigation using tabs ...........................................................................................29
5.2.3 Hierarchical application structures .......................................................................30
5.2.4 Navigation using links...........................................................................................31
6. UI Components.................................................................................................. 32
6.1 Lists and Grids ..............................................................................................................32
6.1.1 Highlighting...........................................................................................................32
Version 1.2 | November 9, 2005
S60 UI Style Guide | 4
6.1.2 Empty lists and grids ............................................................................................32
6.1.3 List browsing.........................................................................................................33
6.1.4 Order of items and browsing in grids....................................................................33
6.2 List Types ......................................................................................................................35
6.2.1 Menu list ...............................................................................................................36
6.2.2 Selection list .........................................................................................................37
6.2.3 Markable list .........................................................................................................39
6.2.4 Multi-selection list .................................................................................................41
6.2.5 Setting lists ...........................................................................................................42
6.2.6 Forms....................................................................................................................45
6.3 List Layouts ...................................................................................................................48
6.3.1 Column structure of lists .......................................................................................48
6.3.2 List item types.......................................................................................................50
6.3.3 Numbered items ...................................................................................................53
6.3.4 Item type combinations.........................................................................................54
6.4 Grid Types.....................................................................................................................54
6.5 Find Pane......................................................................................................................55
6.6 Options Menu................................................................................................................55
6.6.1 Submenus ............................................................................................................56
6.6.2 Submenu indicators..............................................................................................57
6.6.3 Unavailable items .................................................................................................57
6.6.4 Other Options menus ...........................................................................................58
6.6.5 Options template ..................................................................................................58
6.7 Notes .............................................................................................................................61
6.8 Soft Notifications ...........................................................................................................62
6.8.1 Discarding soft notifications..................................................................................64
6.8.2 Many simultaneous soft notifications....................................................................64
6.8.3 Information pop-up ...............................................................................................64
6.9 Queries..........................................................................................................................64
6.9.1 Confirmation query ...............................................................................................65
6.9.2 List query ..............................................................................................................65
6.9.3 Multi-selection List query ......................................................................................66
6.9.4 Data query ............................................................................................................67
6.9.5 Message query .....................................................................................................68
6.10 Indicators.......................................................................................................................68
6.10.1 Signal and battery indicators ................................................................................69
6.10.2 Status indicators ...................................................................................................69
6.10.3 Indicators in the navi pane....................................................................................70
6.10.4 Editing indicators in pop-up windows ...................................................................70
Version 1.2 | November 9, 2005
S60 UI Style Guide | 5
6.10.5 Soft indicators.......................................................................................................70
6.10.6 Operator indicator.................................................................................................71
6.10.7 Application-specific indicators ..............................................................................71
7. S60 UI with Side Softkeys................................................................................. 72
7.1 Introduction to the Side Softkey Style ...........................................................................72
7.1.1 What is S60 UI with side softkeys ........................................................................72
7.1.2 Default layout description and the basic principles of rotation .............................73
7.2 Interaction......................................................................................................................74
7.2.1 Rotation ................................................................................................................74
7.2.2 Basic interaction style...........................................................................................76
7.3 Designing Application UI for the Layout........................................................................77
7.3.1 Main pane.............................................................................................................77
7.3.2 Status pane and the context pane........................................................................78
7.3.3 Title pane..............................................................................................................78
7.3.4 Navi pane..............................................................................................................79
7.3.5 Signal pane...........................................................................................................79
7.3.6 Battery pane .........................................................................................................79
7.3.7 Universal indicators ..............................................................................................79
7.3.8 Control pane vs. softkey panes ............................................................................79
8. Applications and Design Examples................................................................. 81
8.1 Idle State .......................................................................................................................81
8.1.1 Active Idle .............................................................................................................81
8.2 Application Shell............................................................................................................82
8.2.1 Shortcuts...............................................................................................................83
8.2.2 Customizing Application Shell ..............................................................................83
8.2.3 Fast Application Swapping ...................................................................................83
8.3 Application Handling .....................................................................................................84
8.3.1 Opening and closing applications.........................................................................84
8.3.2 Multitasking...........................................................................................................84
8.3.3 Application interactions.........................................................................................85
8.4 Phone............................................................................................................................86
8.4.1 Call handling.........................................................................................................88
8.4.2 Volume control......................................................................................................88
8.5 Viewers and Players .....................................................................................................89
8.5.1 Text viewers .........................................................................................................89
8.5.2 Image viewers ......................................................................................................89
8.5.3 Multimedia viewers ...............................................................................................89
8.5.4 Audio and video players .......................................................................................90
8.6 Text Editing ...................................................................................................................90
Version 1.2 | November 9, 2005
