You are on page 1of 83

Series 40 Web Apps UX Guidelines

Key information on the interaction models and visual styles of Series 40 web app
Document created on 25 October 2011 Version 1.1

Table of contents
1. 2. Introduction
1.1 1.2 2.1 Audience Other documents Displays 2.1.1 Screen size 2.1.2 Selectable object size 2.1.2.1 Discrete touchable areas 2.1.2.2 Collection of touchable areas 2.1.2.3 Buttons 2.1.3 Screen orientation UI patterns 2.2.1 Phone consistency 2.2.2 Soft-key bar 2.2.2.1 Selectable item navigation 2.2.3 Standard Options menu

8

8 8

Common Series 40 Characteristics

2.2

9 9 9 10 11 12 13 14 15 16 16 17 19 19 19 20 20 21 22 23 23 24 25 25 26 26 27 27 28 28 29 29 30 31 32 33 34 35 35 36 36 37 37 38 38

9

3.

Series 40 web app UI patterns
3.1

Launching web apps 3.1.1 Launch locations 3.1.1.1 From the application list view 3.1.1.2 From the Nokia Browser for Series 40 3.1.2 Splash screen 3.1.3 Icons 3.1.4 Web app names 3.2 Navigation 3.2.1 Location of basic navigation controls 3.2.2 Tabs as Menus 3.2.3 Grid or list views as menus 3.3 Content hierarchy 3.3.1 Breadcrumbs 3.3.2 Home page link in header 3.3.3 Closing a web app 3.3.4 Back behaviour 3.4 Content presentation 3.4.1 Page title 3.4.2 Thumbnails 3.5 Getting user input 3.5.1 Text entry 3.5.2 Search field 3.6 Consistent interactions 3.7 Focus on discrete tasks 3.8 Navigating through web links 3.9 Text and graphics 3.9.1 Make consistent use of text 3.9.2 Align elements 3.9.3 Provide a clear visual hierarchy 3.9.4 Use rich visual elements 3.9.5 Use a common set of icons 3.10 Default chrome controls and behaviour 3.10.1 Options menu

17

Series 40 Web Apps UX Guidelines

2

3.10.2 Exit 3.10.3 Accessing location behaviour 3.10.4 Scrolling 3.10.5 Progress indicators 3.10.5.1 Web page load indicator 3.10.5.2 Continuous use loading indicator 3.11 Touch gestures 3.11.1 Tap gesture 3.11.2 Swipe 3.12 Common application flow models 3.12.1 The models 3.12.2 Examples 3.12.2.1 Photos 3.12.2.2 Geolocation based travel guide 3.12.2.3 News 3.12.2.4 Social 3.12.2.5 Stock Tracker 3.12.2.6 Tic Tac Toe 3.12.2.7 Translate

39 39 40 40 41 41 42 43 44 45 45 47 47 49 52 54 57 59 61

4.

UI graphic elements
4.1 4.2 4.3 4.4 5.1 5.2 5.3 Lists Tabs Text fields Buttons

64
64 65 66 67

5.

Styles and specs

Top header bar and navigation icons Buttons 5.2.1 Primary and secondary buttons 5.2.2 Tertiary icons- buttons Form elements 5.3.1 General elements 5.3.2 Input fields Header and sub-header components List items Content Tabs

68
68 71 71 72 74 74 75 77 79 82 82

6.

Specs for standard components
6.1 6.2 6.3 6.4

77

Series 40 Web Apps UX Guidelines

3

Tables
Table 1: Recommended object and gap sizes are listed. .............................................................................................. 10 Table 2: Physical and pixel sizes for standard and rectangular buttons are listed..................................................... 12 Table 3: Recommended font sizes and effects for various uses are listed. ............................................................... 35 Table 4: The touch gestures supported by Series 40 web apps are listed. ................................................................. 42 Table 5: The suggested application flow models are listed. ......................................................................................... 45 Table 6: A description of the Photos example is provided. .......................................................................................... 47 Table 7: A description of the Travel Guide example is provided. ................................................................................. 49 Table 8: A description of the News example is provided. ............................................................................................. 52 Table 9: A description of the Social example is provided. ............................................................................................ 55 Table 10: A description of the Stock Tracker example is provided. ............................................................................. 58 Table 11: A description of the Tic Tac Toe example is provided. ................................................................................. 60 Table 12: A description of the Translate example is provided. .................................................................................... 62 Table 13: The header and navigation buttons are show. .............................................................................................. 68 Table 14: The primary and secondary buttons are show. ............................................................................................. 71 Table 15: The tertiary buttons are listed. ...................................................................................................................... 72 Table 16: The general elements are shown.................................................................................................................... 74 Table 17: The input fields are listed. .............................................................................................................................. 75

Series 40 Web Apps UX Guidelines

4

Figures
Figure 1: This guide’s target audience is shown. ............................................................................................................. 8 Figure 2: Typical physical Series 40 screen size is shown. .............................................................................................. 9 Figure 3: The dimensions of touchable elements within a 6 x 8 grid are shown. ....................................................... 11 Figure 4: A selection of Series 40 phones, with portrait and landscape screens, are shown. ................................... 13 Figure 5: The assignment of positive action to the left button and negative action to the right button in standard Series 40 and Symbian dialogues is shown. ................................................................................................................... 15 Figure 6: Differences between the softkey bar on non-touch and Touch and Type phones is shown. .................... 16 Figure 7: Differences between the active item highlight on Touch and Type and non-touch phones is shown...... 16 Figure 8: Typical examples of the Options key and menu on Touch and Type and non-touch phones are shown. 17 Figure 9: The applications lists view on a Touch and Type and non-touch phone are shown. .................................. 19 Figure 10: The web apps category is shown. ................................................................................................................. 20 Figure 11: A typical splash screen is shown. .................................................................................................................. 20 Figure 12: Examples of the web app icons in the application’s grid and list views as well as in the Nokia Browser for Series 40 are shown. .................................................................................................................................................. 21 Figure 13: Typical Series 40 squircle. ............................................................................................................................. 21 Figure 14: Various layouts for web app navigation are shown. .................................................................................... 23 Figure 15: A typical example of a tab acting as a menu. ............................................................................................... 24 Figure 16: Examples of a grid and list views acting as a menu are shown. .................................................................. 25 Figure 17: A typical example of a breadcrumb trail is shown. ...................................................................................... 26 Figure 18: The home or main page link is shown. .......................................................................................................... 26 Figure 19: The Exit item on the Options menu is shown. .............................................................................................. 27 Figure 20: The back soktkey for Touch and Type and non-touch UIs are shown. ...................................................... 27 Figure 21: Various examples of page titles are shown. ................................................................................................. 28 Figure 22: Thumbnails used as content (left) and to provide links to the content (right) are shown. ...................... 29 Figure 23: The search icon and search field are shown. ............................................................................................... 31 Figure 24: Common styling of buttons, so they are easily recognised, is shown. ...................................................... 32 Figure 25: Dividing a complex task into simple, single task steps is shown. ............................................................... 33 Figure 26: The flow of screens when the user opens a web page from a web app is shown. .................................... 34 Figure 27: A clean look achieved by use of consistent font size and margins is shown. ........................................... 36 Figure 28: A list, list with labels, category list, and category sub-list are shown. ....................................................... 36 Figure 29: An image using the entire screen is shown. ................................................................................................. 37 Figure 30: The use of a common refresh function icon is shown. ............................................................................... 37 Figure 31: The options menu presentation on Touch and Type and non-touch phones is shown. .......................... 38 Figure 32: The access locations settings screen is shown. .......................................................................................... 39 Figure 33: The use of vertical scrolling only is shown. .................................................................................................. 40
Series 40 Web Apps UX Guidelines

5

Figure 34: The web page load indicator is shown. ......................................................................................................... 41 Figure 35: Examples of the web app icon and favicon are shown. ............................................................................... 41 Figure 36: Examples of tap gestures and their outcomes are shown. ......................................................................... 43 Figure 37: Examples of swipe gesture and their outcomes are shown. ...................................................................... 44 Figure 38: The screens of the Photos example are shown. .......................................................................................... 47 Figure 39: The screens of the Travel Guide example are shown. ................................................................................. 49 Figure 40: The screens of the News example are shown. ............................................................................................. 52 Figure 41: The screens of the Social example are shown. ............................................................................................ 54 Figure 42: The screens of the Stock Tracker example are shown. .............................................................................. 57 Figure 43: The modes of the Tic Tac Toe example’s screen are shown. ..................................................................... 59 Figure 44: The screens of the Translate example are shown. ...................................................................................... 61 Figure 45: A plain list is shown......................................................................................................................................... 64 Figure 46: A list with icons is shown ................................................................................................................................ 64 Figure 47: A list with labelled titles is shown. ................................................................................................................. 64 Figure 48: A list with labelled titles and icons is shown. ................................................................................................ 64 Figure 49: A list inside table is shown. ............................................................................................................................ 64 Figure 50: A list inside a table with icons is shown. ....................................................................................................... 64 Figure 51: An expandable list is shown. .......................................................................................................................... 65 Figure 52: Expanded categories with links in a list-view is shown................................................................................ 65 Figure 53: Expanded categories with icons and links in a list-view is shown. ............................................................. 65 Figure 54: A full width tab group is shown. .................................................................................................................... 65 Figure 55: A full width tab set with icon is shown. ......................................................................................................... 65 Figure 56: A full width tab set with text-fields is shown. .............................................................................................. 65 Figure 57: A tab in a table is shown. ................................................................................................................................ 66 Figure 58: A tab in table with icons is shown. ................................................................................................................. 66 Figure 59: A tab in table with text-fields is shown. ........................................................................................................ 66 Figure 60: A text field used with a button is shown. ...................................................................................................... 66 Figure 61: Text fields used with icons and buttons are shown. ................................................................................... 66 Figure 62: Text fields used as part of a form field with labels is shown. ..................................................................... 66 Figure 63: Various buttons are shown. ........................................................................................................................... 67 Figure 64: Individual radio buttons (for exclusive choices) are shown ........................................................................ 67 Figure 65: Individual check boxes (for multiple choice) are shown. ............................................................................. 67 Figure 66: Grouped radio buttons (for exclusive choices) are shown. ......................................................................... 67 Figure 67: Grouped check boxes (for multiple choices) are shown.............................................................................. 67 Figure 68: Examples of the combined use of the navigation items are shown. .......................................................... 70 Figure 69: Example of the combined use of buttons is shown. .................................................................................... 73 Figure 70: The standard header module is shown. ........................................................................................................ 77

Series 40 Web Apps UX Guidelines

6

Figure 71: Header module with input field is shown...................................................................................................... 78 Figure 72: Sub header module for a subtitle is shown. ................................................................................................. 78 Figure 73: Sub header module for a slideshow is shown. ............................................................................................. 78 Figure 74: Sub header module offering previous-next is shown. ................................................................................ 78 Figure 75: A single line list item is shown. ...................................................................................................................... 79 Figure 76: A single line list item with icon is shown. ...................................................................................................... 79 Figure 77: Specification for a list item in a table is shown. ........................................................................................... 80 Figure 78: The specification for a list item in table with icon is shown. ...................................................................... 80 Figure 79: Specification for a double line list item is shown. ....................................................................................... 80 Figure 80: Specification for a double line list item with icon is shown. ....................................................................... 80 Figure 81: Specification for an expandable list item is shown. .................................................................................... 81 Figure 82: A list item with image and text is shown....................................................................................................... 81 Figure 83: A list item without image and text is shown. ................................................................................................ 81 Figure 84: Content with headline, date, and body text is shown. ................................................................................ 82 Figure 85: The specification for tabs is shown. ............................................................................................................. 82

Change history
9 June 2011 25 October 2011 1.0 1.1 Initial document release Updated for Series 40 web apps 1.5

Series 40 Web Apps UX Guidelines

7

1. Introduction
This guide provides developers and designers with the key information required to create Series 40 web apps that are consistent in look and feel as well as functional behaviour. This is achieved by describing the common Series 40 phone characteristics and features of Series 40 web apps.

1.1

Audience

The primary audience for this guide is experienced web developers and designers who are capable of creating good quality applications from scratch, but are not yet doing so commercially, as shown in Figure 1. By following these guidelines, adopting the interaction patterns described in the examples, and using the assets defined in Chapter 4, ‘UI graphic elements’, developers and designers will be able to create commercial quality web apps that offer an outstanding UX on Series 40 phones.

Figure 1: This guide’s target audience is shown.

1.2
‒ ‒ ‒ ‒

Other documents

See these documents for more information on Nokia Browser for Series 40 and Series 40 web apps: Series 40 Web Apps Platform Overview Series 40 Web Apps Developer’s Guide and API Reference Series 40 Web Apps Best Practices Guide. Series 40 Web Apps Publishing Guide

Series 40 Web Apps UX Guidelines

8

2. Common Series 40 Characteristics
This chapter provides information on the UI features and style of the Series 40 phones upon which Series 40 web apps run. By reading this chapter you will understand the context into which your web app’s design should fit.
‒ ‒ Displays — the resolution and physical size of screens on Series 40 phones and their effect on UX. UI patterns — the underlying Series 40 UI style and how it affects Series 40 web apps.

2.1
2.1.1

Displays
Screen size

This section discusses the characteristics of the displays on Series 40 phones and how they affect UX.

Series 40 phones that support web apps, whether they support keyboard only or Touch and Type UIs, offer screens with a resolution of 240 x 320-pixels. Typically the physical size of the screen, as shown in Figure 2, is 39.2 x 52.2 mm. Compared to the size of screen offered by a typical smartphone, this is small. Web app designs need to account for the screen size in two ways, by ensuring that the content is easy to see and read, and that controls are sized so they are easy to select — particularly on Touch and Type phones.

2.1.2

Selectable object size

Figure 2: Typical physical Series 40 screen size is shown.

Care has to be taken in creating selectable objects for Series 40 phones offering the Touch and Type UI. An object’s optimal size is influenced by the nature of the object, specifically whether it’s a: ‒ ‒ ‒ discrete touchable area. part of a collection of touchable areas occupying all or part of the screen. button. Note: These recommendations apply to the current Touch and Type phones, which offer a 240 x 320-pixel screen of 2.4” in size. Series 40 web apps should be developed to allow for the release of phones with alternative screen resolutions and sizes.

Series 40 Web Apps UX Guidelines

9

2.1.2.1

Discrete touchable areas

The recommended object sizes for controls used with finger and thumb interactions are listed in Table 1.

Dimension
Diagonal Height Width Finger activated object size, equivalent to 6.1 mm Vertical finger activated object gap, equivalent to 1mm Horizontal finger activated object gap, equivalent to 1.23 mm Thumb activated object size, equivalent to 8 mm Vertical thumb activated object gap, equivalent to 1.25 mm Horizontal thumb activated object gap, equivalent to 3 mm
Table 1: Recommended object and gap sizes are listed.

2.4” QVGA screen
2.4” 320 pixels 240 pixels 40 pixels 7 pixels 16 pixels 52 pixels 8 pixels 20 pixels

Series 40 Web Apps UX Guidelines

10

2.1.2.2

Collection of touchable areas

When dealing with a collection of touchable areas think of the screen as a 6 x 8 grid of touchable slots, as shown in Figure 3, with each element being 40 x 40-pixels in size.

Figure 3: The dimensions of touchable elements within a 6 x 8 grid are shown.

Series 40 Web Apps UX Guidelines

11

2.1.2.3

Buttons

The recommended dimensions of buttons on a 2.4” QVGA screen are listed in Table 2.

Dimension (pixels) Height
Standard button Minimum size for rectangular button 40 48

Physical dimensions (mm) Width
40 30

Height
6.1 7.0

Width
6.1 5.0

Table 2: Physical and pixel sizes for standard and rectangular buttons are listed.

Series 40 Web Apps UX Guidelines

12

2.1.3

Screen orientation

Screens on Series 40 phones are offered in portrait (240 x 320 pixels) and landscape (320 x 240 pixels) orientations, as shown in Figure 4. The majority of Series 40 phones employ a screen in portrait orientation. Web app designs need to accommodate these two orientations and ensure that full use of the available screen real estate is made. Guidance on how to detect and set CSS files based on screen orientation are provided in the Accommodating screen orientation chapter of the Series 40 Web Apps Best Practices Guide document.

Figure 4: A selection of Series 40 phones, with portrait and landscape screens, are shown.

Series 40 Web Apps UX Guidelines

13

2.2

UI patterns

This section introduces the features of the Series 40 UI style that have a direct impact on the design language you should use in your web apps. For more information on the Series 40 UI style see the Series 40 UI style guides. Note: The colours and graphics of all standard Series 40 platform UI components are affected by a phone’s active theme. The look of the standard component may therefore vary from those shown here. In addition, when designing your web app, you shouldn’t assume that standard Series 40 UI components will have a particular look.

Series 40 Web Apps UX Guidelines

14

2.2.1

Phone consistency

Series 40 web apps should be designed to align closely with the Series 40 platform UI style. A key item to be aware of is the placement of labels on button pairs that offer choices. As shown in Figure 5, in Symbian and Series 40 Nokia phones these buttons offer: ‒ ‒ Positive commands on the left or middle softkeys (commands such as select, yes, save, and alike). Negative commands on the right softkey (commands such as back, no, cancel, and alike).

Figure 5: The assignment of positive action to the left button and negative action to the right button in standard Series 40 and Symbian dialogues is shown.

Series 40 Web Apps UX Guidelines

15

2.2.2

Soft-key bar

The main difference between non-touch and Touch and Type phones is that non-touch phones have three softkeys and a navipad, which together are used to interact with the web app. On non-touch phones, the middle soft key is always assigned the primary action, as shown in Figure 6.

A Touch and Type application view showing the softkey bar. The user can invoke an item on the bar, by tapping it on the phone’s screen

A non-touch application view showing the softkey bar. The user can invoke an item by pressing the corresponding hardware key.

Figure 6: Differences between the softkey bar on non-touch and Touch and Type phones is shown.

2.2.2.1

Selectable item navigation

On non-touch phones, care has to be taken in determining how the focus rectangle, which enables the user to select an item, is moved within a web app page. In the examples shown in Figure 7, the left hand image shows a Touch and Type UI, where selectable items are highlighted when tapped only. The two right hand images show how the currently selectable item is highlighted on non-touch phones. On these phones, the user can move between selectable items using the navipad, and select them from the softkeys or navipad.

Figure 7: Differences between the active item highlight on Touch and Type and non-touch phones is shown.

Series 40 Web Apps UX Guidelines

16

2.2.3

Standard Options menu

The Series 40 style provides for an Options menu to be activated from the left softkey. The options menu can contain global, generic, or contextual actions for the active screen. Typically, the menu will usually include Settings and Exit options. In the examples shown in Figure 8, the right hand image shows the floating options icon used in Touch and Type phones, while the middle image show the permanent softkey bar shown in non-touch phones. The right-hand image shows the activated options menu on a non-touch device.

Figure 8: Typical examples of the Options key and menu on Touch and Type and non-touch phones are shown.

3. Series 40 web app UI patterns
This chapter introduces the key factors that need to be considered when developing Series 40 web apps: ‒ ‒ Accessing web apps — how a user will open a web app from the Series 40 UI or Nokia Browser for Series 40. Navigation — use of clear and consistent navigation to support the user in understanding the features and functions of the web app. Also, considering whether the user has a keyboard or touch screen with which to interact with the application. ‒ ‒ ‒ Web app page and content hierarchy — how list content should be structured. Contents — how images and text content should be displayed. Getting users input — how the user will enter text and numbers when needed by the web app.

Series 40 Web Apps UX Guidelines

17

Consistent interactions — how interactions should be consistent with the Series 40 style and within a web app.

Focus on discrete tasks — how web app pages should be kept simple by focusing on a discrete task or action on each page.

Launching web pages from web apps — how a web app launches a web page from the internet and subsequent browsing behaviour.

Default web apps UI — the Nokia Browser for Series 40 web app runtime provides some standard UI components to all web apps, these and the feature of the Series 40 UI should inform the design of a web app’s UI.

Text and graphics — use of sophisticated graphics to build the users trust and confidence in the web app. Also consistency in the use of text and graphics and the layout of these elements to ensure UI components are easy to identify and thereby easy to use.

‒ ‒

Gestures — how the user can use gestures to navigate a Touch and Type UI web app. Common application models — there are a number of common application models supported by Series 40 web apps. These models provide the basic building blocks for the interaction and flow between screens in all web apps.

Series 40 Web Apps UX Guidelines

18

3.1

Launching web apps

This chapter describes how users launch Series 40 web apps from the UI of a Series 40 phone and describes the icons and text you can use to brand your web app. Tip: Information on how users discover Series 40 web apps is provided in Series 40 Web Apps Publishing Guide.

3.1.1
Series 40.

Launch locations

The user is able to launch a web app from within the main Series 40 UI and from within Nokia Browser for

3.1.1.1

From the application list view

Opened by selecting Menu from the phone’s home page and then selecting Apps, the applications list view folder lists the installed application on a device. The launch item for Series 40 web apps are added to the Games or Collection folders, as shown in Figure 9, which are in turn located in the Extras folder within the view.

Figure 9: The applications lists view on a Touch and Type and non-touch phone are shown.

Series 40 Web Apps UX Guidelines

19

3.1.1.2

From the Nokia Browser for Series 40

The Nokia Browser for Series 40 also adds any opened web apps to the web apps tab of the home screen, as shown in Figure 10 for a non-touch phone.

Figure 10: The web apps category is shown.

3.1.2

Splash screen

When a web app is launched, a splash screen, similar to the one shown in Figure 11 is provided automatically.

Figure 11: A typical splash screen is shown.

Series 40 Web Apps UX Guidelines

20

3.1.3

Icons

Nokia Store provides the mechanism by which users discover your web apps — more details on how to prepare a web app for Nokia Store and how users discover your web apps are described in Series 40 Web Apps Publishing Guide, available from Web Developer Channel in the Web Developer environment of Nokia Web Tools. You must define two icons in your web app: a 46 x 46-pixel icon in a 50 x 50 bounding box icon defined in the web apps config.xml file and a 16 x 16-pixel icon defined in the index.html file. For more information on defining these icons to your web app, see Series 40 Web Apps Publishing Guide These icons are then used, as shown in Figure 12 as follows: 1. the 46 x 46-pixel icon in the phone UI, such as in the application grid view. Note that in some views the icon may be scaled to fit. 2. the 16 x 16-pixel is displayed as a favicon in the history, favorites, and free web apps folder in the views of Nokia Browser for Series 40.

.

Figure 12: Examples of the web app icons in the application’s grid and list views as well as in the Nokia Browser for Series 40 are shown.

Series 40 launcher icons are defined in a squircle, as shown in Figure 13. More information on designing icons using squircles can be found in the Series 40 iconography guidelines section of the Design and User Experience Library. In addition, a number of templates for use in Adobe Illustrator or Photoshop are provided in the library on the Using the templates to create your icon page, which includes instructions on how to use the templates.
Figure 13: Typical Series 40 squircle.

Series 40 Web Apps UX Guidelines

21

If you already have a defined icon or logo for your application or service, it’s recommended that you drop that icon onto Series 40 launcher icon orange squricle. However, you can use your icon or logo alone if you wish. Note: In addition to the icons used in the web app, you will need to develop icons for use in Nokia Store. Details of the size and format requirements for these icons are provided in the Nokia Publisher Guide, which can be downloaded in several languages from here.

3.1.4

Web app names

Your web app has two strings that provide it with a descriptive name. The first is used in association with the icon seen in the Series 40 UI. It can be up to 50 characters in length and may contain Unicode characters. The second name is seen in the Series 40 Browser for Series 40. This name is not limited in length, but will be truncated in the browser UI, and may contain Unicode characters. You should use a name that is short, descriptive, and memorable.

Series 40 Web Apps UX Guidelines

22

3.2 Navigation
This chapter provides information on the navigation features of Series 40 web apps.

3.2.1

Location of basic navigation controls

To provide clear and consistent web app navigation it’s recommended that the primary action should appear at the top right of the application view, followed by all basic navigation functions in hierarchical order as shown in Figure 14.

If search is the primary function of a screen, the search icon should be placed on the top right of the screen. Clicking on the app name or logo should always take the user to the app’s home screen.

Paging controls should be displayed directly below the application header.

If the primary actions are contextual, then a suitable icon should be place in the top right corner of the screen as necessary. In this example a reload icon is shown.

Figure 14: Various layouts for web app navigation are shown.

Note: If the app has no need for basic navigation functions, when the app consists of a single screen for example, the navigation options should be omitted from the header.

Series 40 Web Apps UX Guidelines

23

3.2.2

Tabs as Menus

If a web app requires up to four main categories of data or information to be displayed, a tabbed navigation is recommended as shown in Figure 15. Tabs can be identified by easily recognisable icons, such as the icons used in the Shopping example, or with text-labels as seen in the Locator example.

Figure 15: A typical example of a tab acting as a menu.

Series 40 Web Apps UX Guidelines

24

3.2.3

Grid or list views as menus

If the information to be displayed doesn’t easily divide into up to four main categories or doesn’t require the user to switch or toggle between categories, items should be displayed in a grid or list view, as shown in Figure 16.

Figure 16: Examples of a grid and list views acting as a menu are shown.

3.3

Content hierarchy

If the web app needs to display well-structured hierarchical information, it may be easier for the user to navigate if they know their current position in the hierarchy. In addition, the ability to jump out of the hierarchy to access the key tasks may also be beneficial. This section explains the recommended options for this type of presentation.

Series 40 Web Apps UX Guidelines

25

3.3.1

Breadcrumbs

The use of breadcrumbs in web apps is recommended as they enable the user to gain an understanding of their location with an information hierarchy. As shown in Figure 17, if the content, in this case Dominican Republic Caribbean, is nested below two category levels, it is helpful to show the user that this information is in the category of Beaches located Anywhere.

Figure 17: A typical example of a breadcrumb trail is shown.

3.3.2

Home page link in header

It’s recommend that a link to the web app’s main or home screen be embedded in the header of each web app page, beneath a logo or the name of the web app. This maintains consistency in the visual language of Series 40 web apps as well as enabling access to the primary tasks, which should always be on the first screen of the application. The area for this component is defined at 200 x 40-pixels in a portrait view as, shown in Figure 18.

Figure 18: The home or main page link is shown.

Series 40 Web Apps UX Guidelines

26

3.3.3

Closing a web app

Web apps can be closed by pressing the red End key. However, for those unfamiliar with this behaviour an Exit item is added by default to the Options menu, as shown in Figure 19. Also see Chapter 3.10.2, ‘Exit’.

3.3.4

Back behaviour

Figure 19: The Exit item on the Options menu is shown.

There’s no default, generic, or recommended back-stepping function in web apps. However, there is an exception when accessing the Options menu for items such as Settings. In this case the default behaviour is to enable the user to return to the last screen of the web app by selecting the floating Back button in Touch and Type UIs and the Back softkey in non-touch UIs, as shown in Figure 20.

Figure 20: The back soktkey for Touch and Type and non-touch UIs are shown.

Series 40 Web Apps UX Guidelines

27

3.4
3.4.1

Content presentation
Page title

This section describes the recommendations for content presentation in a Series 40 web app.

The page title provides the user with information that enables them to determine where they are in an application, as shown in Figure 21.

Figure 21: Various examples of page titles are shown.

Series 40 Web Apps UX Guidelines

28

3.4.2

Thumbnails

Thumbnails are used to provide a visual clue about a link that can be followed to open a page or content item, as shown in Figure 22.

Figure 22: Thumbnails used as content (left) and to provide links to the content (right) are shown.

3.5

Getting user input

This section describes the standard Series 40 web app user data input components for form elements such as text fields, search fields, or date fields.

Series 40 Web Apps UX Guidelines

29

3.5.1

Text entry

When a web app presents the user with an editable text field, the web app uses the standard Series 40 editor to enable the user to enter the field content, as shown in Figure 24.

Figure 25: A text field (Status) and the standard text editing screen opened by clicking it are shown.

Series 40 Web Apps UX Guidelines

30

3.5.2

Search field

If the primary action in a screen is to perform a search, an icon for search should be placed at the top right corner of the screen. A single tap on the icon should then replace the home page link in the title bar, as shown in Figure 25.

Figure 23: The search icon and search field are shown.

Series 40 Web Apps UX Guidelines

31

3.6

Consistent interactions

Consistent interaction patterns make it easy for users to understand how to use your web app. For example, style all buttons similarly by using a common button size, text size, and text case, as shown in Figure 24. This will enable users to distinguish buttons from icons or other interactive elements easily. You can use visual highlights, such as colour, to emphasise different outcome types that can result from pressing a button.

Figure 24: Common styling of buttons, so they are easily recognised, is shown.

Series 40 Web Apps UX Guidelines

32

3.7

Focus on discrete tasks

Because of the small screen size on Series 40 phones, web app screens are limited in the content that they can display without requiring scrolling. It’s therefore recommended that each screen should focus on one task at a time. In addition, the minimum number of interface elements required to complete the task should be used to keep interactions simple. Where a task is inherently complex, it should be divided over several screens. The key is to avoid clutter, so consider using tabs and expandable lists to keep the UI clean and simple, as shown in Figure 25.

Screen 1: Start the task

Screen 2: Choose a category

Screen 3: Choose a subcategory

Screen 4: Browse the results

Figure 25: Dividing a complex task into simple, single task steps is shown.

Series 40 Web Apps UX Guidelines

33

3.8

Navigating through web links

Web apps are able to provide users with the ability to open web pages, when this feature is used, the web pages are displayed within the web app UI, so, for example, the user cannot use standard Nokia Browser features such as the ability to enter a new web page address. The behaviour is shown in Figure 26. Touch and Type
Figure 26: The flow of screens when the user opens a web page from a web app is shown. Series 40 Web Apps UX Guidelines

Non-touch The user taps or navigates to and clicks a link. A long press or tap can open a shortcut menu with the option to open in new window. URL bar appears and indicates the page is loading. The user can stop the page loading by tapping the stop icon on the URL bar or by clicking the Stop softkey in Non-touch UI. The web page opens and the user can return to the calling screen (the first screen shown here) by tapping the close icon or pressing the Close softkey. The user can tap or click any links to browse the website. When the user selects a web page link the URL bar appears and indicates the page is loading. The second (or subsequent) page displays. Touch and Type: back-forward icon enables the user to navigate the page history. Non-touch: The Back softkey returns to the previous page. All: Tapping the close icon or pressing the Close (right) softkey takes the user back to the calling screen in the web app. 34

3.9 Text and graphics
This section provides recommendations for the use and layout of text and graphics.

3.9.1

Make consistent use of text

When using text it’s desirable to keep the font size, case, and weight consistent for text with similar purposes, for example, the same font size for all titles or all rows on a list. Recommended text size and effects are listed in Table 3. Note that the Nokia font on Series 40 6th Edition and earlier phones, including Lite variants, provides for sizing the font as small, medium, and large only.

Use

Nokia font (Series 40 6th Edition and earlier)

Nokia font (Series 40 6th Edition, Feature Pack 1 and later)
Large Regular (24px) Medium Regular (20px) Small Bold (16px) Small Regular (16px)

Web app title List item text Label title Other important text elements Instructions or less important text elements

Large Regular (20px) Medium Regular (14px) Small Bold (10px) Small Regular (10px)

Small Regular (10px)

Small Regular (16px)

Table 3: Recommended font sizes and effects for various uses are listed.

Note: In Series 40 web apps version 1 the font available on the phone, the Nokia font, is the only one available for use in web apps: Additional fonts cannot be downloaded. The font does, however, offer several point sizes and text effects such as bold and italic.

Series 40 Web Apps UX Guidelines

35

3.9.2

Align elements

Element margins, sizes, and spacing should be aligned and consistent throughout a web app. For example, margins on the left and right of a content area should be consistent, as shown in Figure 27,. Inconsistent margins and spacing can create visual clutter, while consistent spacing is more visually appealing.

Figure 27: A clean look achieved by use of consistent font size and margins is shown.

3.9.3

Provide a clear visual hierarchy

When presenting lists that incorporate a hierarchy, such as products in a product category, use font sizes, colours and graphic elements to make the information hierarchy clear, as shown in Figure 28. Where expandable lists are used there should be a clear indicator to show how the list is expanded or contracted and the expanded items should be distinguished with colours and indents.

Figure 28: A list, list with labels, category list, and category sub-list are shown.

Series 40 Web Apps UX Guidelines

36

3.9.4

Use rich visual elements

Because the screens on Series 40 phones are relatively small, images should be displayed using all of the available space below the header and navigation bar, as shown in Figure 29.

Figure 29: An image using the entire screen is shown.

3.9.5

Use a common set of icons

Use of consistent icons helps the user to understand the features available or information presented. Therefore, the icons used should be common in design and size. In addition, one icon should be used to convey the same concept, for example, use the same icon to indicate refresh on all screens, as shown in Figure 30.

Figure 30: The use of a common refresh function icon is shown.

It’s recommended that you use the icons defined in Chapter 5, ‘Styles and specs’.

Series 40 Web Apps UX Guidelines

37

3.10 Default chrome controls and behaviour
All Series 40 web apps display a default chrome provided by the Series 40 web apps runtime. This chapter describes the features of the components of this chrome.

3.10.1 Options menu
The options menu, shown in Figure 31, provides access to standard web app options. Touch and Type
Figure 31: The options menu presentation on Touch and Type and non-touch phones is shown. Series 40 Web Apps UX Guidelines

Non-touch The option menu represented by an icon in a Touch and Type UI and Options button on non-touch UIs. As a minimum the opened Options menu contains the Exit command and a back icon or Back button. Additional options may appear on the menu depending on the web app’s features, such as: ‒ ‒ Access location settings. Downloads.. 38

3.10.2 Exit
Selecting the Exit option closes the web app. Note: The red (hang up) key also provides for exiting the web app. For more information, see Chapter 3.3.3, ‘Closing a web app’.

3.10.3 Accessing location behaviour
For all web apps that make use of the Geolocation API, the access location option enables a user to determine how the web app accesses the phone’s locations information. The settings, shown in Figure 32, enable the user to set the web app to: ‒ ‒ always ask if location information can be accessed. always allow access to location information, without asking — this is the default setting for all web apps. ‒ never allow access to location information.

The back icon or softkey returns to the options list. An example of the behaviour of location access in an application is provided in Chapter 3.12.2.2, ‘Geolocation based travel guide’.
Figure 32: The access locations settings screen is shown.

Series 40 Web Apps UX Guidelines

39

3.10.4 Scrolling
When page content exceeds the size of the screen, its content can extend outside the screen, however it should extend below the screen only. This is to ensure the pages in a web app are easy to read; as such scrolling should be limited to vertical scrolling (up and down), as shown in Figure 33. This approach fits well with typical usage, as most users are naturally familiar with reading below the page fold. Horizontal (left and right) scrolling should be avoided, as this could make navigation within the app cumbersome and unfriendly.

Figure 33: The use of vertical scrolling only is shown.

3.10.5 Progress indicators
Web apps provide progress indicators for actions that will take an appreciable period of time to complete, two types of progress indicators are provided automatically: ‒ ‒ web page loading indicator, as a wiping progress-bar. continuous use indicator, as wait note spinner.

Series 40 Web Apps UX Guidelines

40

3.10.5.1

Web page load indicator

The web page load indicator, shown in Figure 34, shows a percentage of page data loaded with a wiping progress-bar. More information on the behaviour of web apps when loading an external web page is provided in Chapter 3.8, ‘Navigating through web links’.

Figure 34: The web page load indicator is shown.

3.10.5.2

Continuous use loading indicator

The continuous use loading indicator, see Figure 35, is used to indicate the progress of a background task that doesn’t prevent the user from continuing to use the web app.

When the page is scrolled, the additional information below the fold needs to load and display. Note the icon in the top-left of the screen is system generated and indicates network connectivity type.

A continuous loading indicator shows that the loading is active and the data is being downloaded. The amount of data downloaded is indicated by the KB information.

The activity indicator disappears shortly after the KB information disappears from the screen, once the task is complete.

Figure 35: Examples of the web app icon and favicon are shown.

Series 40 Web Apps UX Guidelines

41

3.11 Touch gestures
Series 40 web apps support two touch gestures, as listed in Table 4.

Symbol

Stroke

Touch event combination

Description

Non-touch equivalent

Tap

Touch and release

Users touch the screen to trigger actions by ‘tapping’ (clicking) a control or link.

Softkey and navipad select button

Swipe

Touch, move, and release

Users place a finger on the screen and move it in the desired direction. The finger is released once the subsequent piece of content has snapped into position.

Navipad direction controls

Table 4: The touch gestures supported by Series 40 web apps are listed.

Series 40 Web Apps UX Guidelines

42

3.11.1

Tap gesture

The tap gesture enables a user to touch the screen and trigger actions by tapping interactive content — such as buttons, controls, or links — as shown in Figure 36.

Figure 36: Examples of tap gestures and their outcomes are shown.

Series 40 Web Apps UX Guidelines

43

3.11.2

Swipe

The swipe gesture enables a user to touch the screen and trigger a transition to items that are in subsequent screens, as shown in Figure 37.

Figure 37: Examples of swipe gesture and their outcomes are shown.

Series 40 Web Apps UX Guidelines

44

3.12 Common application flow models
This chapter presents details on a number of application flow models that can be employed in your Series 40 web apps. After presenting each of the models, examples of their use are provided also. It’s worth noting that these models can be combined together where appropriate.

3.12.1

The models

The suggested models for application flow are provided in Table 5.
Table 5: The suggested application flow models are listed.

Model

#

Description

Schematic

Tree structure

1

A hierarchical structure is ideal for presenting content that is categorised. Typical examples of this type of content include guidebooks product catalogues, and alike. Examples: Geolocation based travel , News

Expandable list

2

A special version of the tree, where elements in a list can be expanded to show more detailed information. This model can be used for any list information such as news, locations and alike. Note: Any important interaction should not be expandable. Examples: Social, Stock Tracker

Series 40 Web Apps UX Guidelines

45

Model

#

Description
A looping pair of screens that consist of a form for the display of information and a user input screen that enables the entry of parameters that control the content of the form. Examples: Tic Tac Toe, Translate Where two or three categories need to be presented for the user to swap between regularly, a tabbed page should be used.

Schematic

Dynamic looping

3

Tabbed pages

4

This model can be used for social networks (to show messages, contacts, and profile), product information (to show basic information, specifications, and reviews) and alike. Examples: Social Where content consists of items of equal importance or relevance the carousel model can be used. Typical examples of the content that can be presented in a carousel include photo albums, news items, and alike. Examples: Photos, Geolocation based travel

Carousel

5

Series 40 Web Apps UX Guidelines

46

3.12.2

Examples

This chapter describes a number of example web apps that illustrate the practical use of the application flow models.

3.12.2.1

Photos

This example, shown in Figure 38, illustrates a photo gallery for content from an online picture service.

01 Main

01 Main and search

02 Search results list

03 Content (image)

04 Content (image)

Figure 38: The screens of the Photos example are shown.

The example enables a user to view pictures that match an entered search term and is described in detail in Table 6. This example implements the tree structure (#1) and carousel (#5) models.
Table 6: A description of the Photos example is provided.

Screen layout

Model node

Description

The application opens displaying a default photo. The user clicks the search icon to open the search dialogue.

Series 40 Web Apps UX Guidelines

47

Screen layout

Model node

Description

The Search box slides in from the right and the user can enter a search term. Clicking the search icon performs the search.

A list of images matching the search criteria are displayed, the user can now:
‒ ‒ ‒ Scroll through the image grid. Select an image to open in the carousel. Perform a new search.

The image selected from the grid is displayed. The user can now:
‒ ‒ ‒ Navigate the photos. Return to the list by clicking the grid icon. Perform a new search.

By swiping or clicking the navigation controls (or using the navipad on a non-touch phone) the user can move to the next photo.

Series 40 Web Apps UX Guidelines

48

3.12.2.2

Geolocation based travel guide

This example, shown in Figure 39 illustrates a location enabled travel guide web app.

01 Main

01 Main and search

02 Search results list

03 Content, location

04 Content, location

Figure 39: The screens of the Travel Guide example are shown.

This example enables a user to select a type of travel destination and view descriptions and photos of places retrieved from an online travel information service. The example’s behaviour is described in detail in Table 7. This example implements the tree structure (#1) and carousel (#5) models.
Table 7: A description of the Travel Guide example is provided.

Screen layout

Model node

Description

The application opens displaying a What’s around option and list of search categories; the user clicks What’s around .

Series 40 Web Apps UX Guidelines

49

Screen layout

Model node

Description
The first time What’s around is selected the user is asked to grant permission to use the location in the web app. User clicks Yes to ‘use location now and in the future’ in this web app. If the user clicks No, the pop-up is dismissed and they are returned to the screen in the web app where the location feature was selected (in this case screen 1).

A message informs the user that they can change the web app’s permission to access location information using the standard web apps setting.

The user is displayed a list of travel subcategories, based on the nearby locations found using the user’s current location information. The user clicks a sub-category, such as Beaches.

A list displays offering beaches in the area and the user can click a search result.

Series 40 Web Apps UX Guidelines

50

Screen layout

Model node

Description

The first search result displays. The user can now swipe or click the navigation arrows (or use the navipad on a non-touch phone) to select the next or previous destination.

The next destination is displayed.

Series 40 Web Apps UX Guidelines

51

3.12.2.3

News

This example, Figure 40, illustrates a news web app that provides a list of news items.

01 List view

02 Content (story)

03 Content (last story)

Figure 40: The screens of the News example are shown.

In this example, the user selects a news item from a list and can then navigate through the news items without having to return to the list. This example is described in detail in Table 8. It implements the tree structure (#1) and carousel (#5) models.
Table 8: A description of the News example is provided.

Screen layout

Model node

Description

The app opens displaying a list of the latest news. The subheading bar shows the time of the last update. The list can be refreshed by clicking the refresh icon shown in the top right of the screen. Individual news items are opened by clicking them in the list.

Series 40 Web Apps UX Guidelines

52

Screen layout

Model node

Description

In a detailed news item, the subtitle bar is replaced by a navigation bar, with which the next and previous detailed news items can be opened. Clicking the back button returns the user to the news item list. By clicking Read full story, the new services website page for the news item opens in Nokia Browser for Series 40 to display the full news article.

The user can use the navigation bar, swipe on a touch screen phone or use the navipad on a non-touch phone to display earlier or later news items. When the user gets to the beginning or end (as shown here) of the list of items the navigation arrows should be updated to exclude the invalid navigation option.

Series 40 Web Apps UX Guidelines

53

3.12.2.4

Social

This example, shown in Figure 18, illustrates a social networking application.

01 List of feed items

02 Expanded feed item

03 List content in the profile tab

Figure 41: The screens of the Social example are shown.

Series 40 Web Apps UX Guidelines

54

This example provides tabs for access to three key social networking features — message feed, friends list, and the user’s profile. The lists then offer the option to expand items in place to view more details, as described in detail in Table 9. This example illustrates also how web apps behave when the web app needs to make use of a Series 40 platform component, in this case for text entry. This example implements the tabbed pages (#4) and expandable list (#2) models.
Table 9: A description of the Social example is provided.

Screen layout

Model node

Description

User opens the web app and is prompted for their user name and password, then they tap SIGN IN.

The app opens to display a list of the most recent messages for the user’s social network. The user can update the list any time by clicking the refresh icon in the upper right of the screen. A message can be sent by typing in the status text box and clicking UPDATE to send the message. Details of the user’s friends and their personal profile can be opened by clicking FRIENDS and PROFILE.

By clicking in the status field, the user activates the text-field. This opens the standard platform component for text entry.

Series 40 Web Apps UX Guidelines

55

Screen layout

Model node

Description

The user can expand an item in the messages list by clicking it. The expanded item shows more details from the messages, such as the full message text and associated picture.

By clicking the PROFILE tab the user can view their personal profile and a list of their updated posts.

Series 40 Web Apps UX Guidelines

56

3.12.2.5

Stock Tracker

This example, shown in Figure 42, illustrates a web app designed to provide stock price and sales information.

01 List view of stock feeds

02 Expanded list view

Figure 42: The screens of the Stock Tracker example are shown.

Series 40 Web Apps UX Guidelines

57

The application enables a user to select a stock of interest from a list and displays details of the stock’s current price and a graph of historic prices, as described in detail in Table 10. This example implements the expandable list (#2) model.

Screen layout

Model node

Description
The application opens showing a summary of stock prices, and the day’s change for symbols the user has added. The user adds symbols by clicking Add symbols. Price changes are highlighted in green for gains and red for losses. Details for any stock can be viewed by clicking the stock item. The information can be updated at any time by clicking the refresh icon in the top right of the screen.

When a stock item is clicked the list item snaps to the top of the list view, to provide maximum screen space for the expanded list information making it easy for the user to focus on their task. On expanding the list item, the user is displayed more detailed information on the stock’s trading. The individual stock’s information can be updated by clicking Refresh quote or the symbol can be removed from the list by clicking Remove this. The entire list can be updated at any time by clicking the refresh icon in the top right of the screen.

Table 10: A description of the Stock Tracker example is provided.

Series 40 Web Apps UX Guidelines

58

3.12.2.6

Tic Tac Toe

This example, shown in Figure 43, illustrates the implementation of a tic tac toe or noughts and crosses game.

01 Form view

02 User input

Figure 43: The modes of the Tic Tac Toe example’s screen are shown.

Series 40 Web Apps UX Guidelines

59

In this example, the screen loops between no game and game playing states, as described in detail in Table 11. This example implements the dynamic looping (#3) model. Also note that, because the app consists of two looping pages only the standard navigation icons and controls have been omitted from the header.

Screen layout

Model node

Description

The application opens displaying the last score and a blank playing field. Play stats are provided in the sub-header bar, which identifies the user’s character also. A game can be started straight away. A new game is started by clicking PLAY AGAIN while clicking ? opens help information.

When the user clicks on an empty square in the playing grid, the clicked square is filled with the user’s character and the application responds by filling a vacant square with its character. This continues until the game is completed. When the game is complete the user can elect to play another game by clicking PLAY AGAIN.

Table 11: A description of the Tic Tac Toe example is provided.

Series 40 Web Apps UX Guidelines

60

3.12.2.7

Translate

This example, shown in Figure 44, illustrates an application that uses an online service to translate a text string.

01 Form view

02 List view

03 User input

Figure 44: The screens of the Translate example are shown.

Series 40 Web Apps UX Guidelines

61

The application enables the user to select languages by clicking the ‘from’ and ‘to’ buttons and selecting a language from a list and entering text before clicking TRANSLATE to obtain a translation, as shown in detail in Table 12. This example implements the dynamic looping (#3) model.
Table 12: A description of the Translate example is provided.

Screen layout

Model node

Description

The application opens showing two buttons to indicate the language the source text is in and the language it will be translated into. Below is a text field for the text to be translated and two buttons, TRANSLATE to request translation and RESET to clear the source text.

Clicking either of the ‘language’ buttons opens a list of the available languages. Clicking a language on the lists selects it and updates the button name on the main screen. Clicking the ‘back’ icon, in the top right corner of the screen, returns to the main screen without the language being updated.

Series 40 Web Apps UX Guidelines

62

Screen layout

Model node

Description

After entering text and clicking TRANSLATE the sub-heading displays the type of language translation and the translated text displays below the text field. The user can edit the text and perform another translation if they wish. Clicking the ‘back’ icon at the top right of the screen or the RESET button returns to the main screen.

Series 40 Web Apps UX Guidelines

63

4. UI graphic elements
This chapter provides visual examples of the UI graphic elements recommended for use in Series 40 web apps.

4.1 Lists
Figure 45 to Figure 53 show examples of the list formats recommended for use in Series 40 web apps.

Figure 45: A plain list is shown.

Figure 46: A list with icons is shown

Figure 47: A list with labelled titles is shown.

Figure 48: A list with labelled titles and icons is shown.

Figure 49: A list inside table is shown.

Figure 50: A list inside a table with icons is shown.

Series 40 Web Apps UX Guidelines

64

Figure 51: An expandable list is shown.

Figure 52: Expanded categories with links in a list-view is shown.

Figure 53: Expanded categories with icons and links in a list-view is shown.

4.2 Tabs
Figure 54 to Figure 59 show examples of the tab formats recommended for use in Series 40 web apps. Note: It’s recommended that tabbed screen should contain two or three tabs only.

Figure 54: A full width tab group is shown.

Figure 55: A full width tab set with icon is shown.

Figure 56: A full width tab set with textfields is shown.

Series 40 Web Apps UX Guidelines

65

Figure 57: A tab in a table is shown.

Figure 58: A tab in table with icons is shown.

Figure 59: A tab in table with text-fields is shown.

4.3 Text fields
Figure 60 to Figure 62 show examples of the text entry options recommended for use in Series 40 web apps.

Figure 60: A text field used with a button is shown.

Figure 61: Text fields used with icons and buttons are shown.

Figure 62: Text fields used as part of a form field with labels is shown.

Series 40 Web Apps UX Guidelines

66

4.4 Buttons
Figure 63 to Figure 67 show examples of button formats recommended for use in Series 40 web apps.

Figure 63: Various buttons are shown.

Figure 64: Individual radio buttons (for exclusive choices) are shown

Figure 65: Individual check boxes (for multiple choice) are shown.

Figure 66: Grouped radio buttons (for exclusive choices) are shown.

Figure 67: Grouped check boxes (for multiple choices) are shown.

Series 40 Web Apps UX Guidelines

67

5. Styles and specs
This chapter presents a recommended iconography for use in Series 40 web apps.

5.1

Top header bar and navigation icons

This chapter lists, in Table 13, the header and navigation icons recommended for use in Series 40 web apps. Copies of these recommended graphics are provided in the Series 40 Web Apps UI Graphics Toolkit, available from Forum Nokia.
Table 13: The header and navigation buttons are show.

Button

Size

Name

Meaning

40 x 40 pixels

Search

Shows search results

40 x 40 pixels

Refresh

Refreshes contents

40 x 40 pixels

Back

Goes back to the previous screen

40 x 40 pixels

Grid view

Opens images in a grid-view

40 x 40 pixels

Close

Closes the content

79 x 24 pixels

Previous item

Navigates to previous item in a slide show

Series 40 Web Apps UX Guidelines

68

Button

Size

Name

Meaning

79 x 24 pixels

Pause item

Pauses a slide show

79 x 24 pixels

Next item

Navigates to next item in slideshow

79 x 24 pixels

Play item

Plays item in slideshow

120 x 24 pixels

Previous item

Navigates to previous item in content

120 x 24 pixels

Next item

Navigates to next item in content

18 x 113 pixels

Next image-item

Navigates to next image-item

18 x 113

Previous image-item

Navigates to previous image-item

Series 40 Web Apps UX Guidelines

69

Many of the recommended icons can be used in combination, as shown in Figure 68.

Figure 68: Examples of the combined use of the navigation items are shown.

Series 40 Web Apps UX Guidelines

70

5.2 Buttons
5.2.1 Primary and secondary buttons

Table 14 defines the recommended button sizes for use in Series 40 web apps. Remember that the text on a button should accurately describe the function that clicking the button caused to be performed. Copies of these recommended graphics are provided in the Series 40 Web Apps UI Graphics Toolkit, available from Forum Nokia.

Button

Size

Name

125 x 35 pixels

Large single

102 x 35

Mid-size

66 x 35

Small size

81 x 35

Button size 4

140 x 35

Dual buttons SQ

Table 14: The primary and secondary buttons are show.

Series 40 Web Apps UX Guidelines

71

5.2.2

Tertiary icons- buttons

Table 15 defines the recommended tertiary button graphics and sizes for use in Series 40 web apps. Remember that the graphic on a tertiary button should visually describe the function that clicking the button causes to be performed. Copies of these recommended graphics are provided in the Series 40 Web Apps UI Graphics Toolkit, available from Forum Nokia.

Button

Size

Name

Meaning

12 x 12 pixels

ADD - inside content

16 x 16 pixels

Close - inside content

Closes content in context, for example, loading a URL field

16 x 16 pixels

Down arrow

Collapses list items

16 x 16 pixels

Right arrow

Expands list items

32 x 32 pixels

Swap

Replaces one with the other

32 x 32 pixels

Download

Transfers to a custom location

32 x 32 pixels

Tips

Opens a pop-up that provides an explanation

32 x 32 pixels

Favourites

Allows users to add the item as a favourite

32 x 32 pixels

Re-tweet

Re-sends posts

Table 15: The tertiary buttons are listed.

Series 40 Web Apps UX Guidelines

72

When buttons are used in a combination where the label is not a verb (action) but a noun, it is recommended that the button labels are formatted in sentence case, as shown in Figure 69.

Figure 69: Example of the combined use of buttons is shown.

Series 40 Web Apps UX Guidelines

73

5.3 Form elements
5.3.1 General elements

Table 16 defines the general elements and their sizes available to Series 40 web apps. These elements should be presented centre-aligned to row height. Copies of these recommended graphics are provided in the Series 40 Web Apps UI Graphics Toolkit, available from Forum Nokia.

Button

Size
21 x 21

Name
Radio button selected

Meaning
Exclusive selection

21 x 21

Radio button active

Active exclusive selection

21 x 21

Radio button inactive

Inactive exclusive selection

21 x 21

Check-box selected

Multiple choice selection

21 x 21

Check-box active

Multiple choice selected Multiple choice nonselected

21 x 21

Check-box inactive

Table 16: The general elements are shown.

Series 40 Web Apps UX Guidelines

74

5.3.2

Input fields

Table 16 defines the available input fields and their sizes for use in Series 40 web apps. Copies of these recommended graphics are provided in the Series 40 Web Apps UI Graphics Toolkit, available from Forum Nokia.
Table 17: The input fields are listed.

Input field

Size

Name

Usage notes
Used to enter form text.

210 x 40

Form input field

Actual size of input field is 161 x 28-pixels. To be used preferably with a label. Used to enter text upon which an action is to be performed. Actual size of input field is 185 x 28-pixels. To be used preferably with a label. Used to enter form data such as dates.

240 x 40

Full-width input field

210 x 40

Form multiinput 3 part

Actual size of each input field is 60 x 28-pixels. To be used preferably with a label. Used to enter form data, such as short dates (MM/ YYYY). Actual size of each input field is 94 x 28-pixels. To be used preferably with a label.

210 x 40

Form multiinput 2 part

Series 40 Web Apps UX Guidelines

75

Input field

Size

Name

Usage notes
Used to enter multi-line text, such as descriptions.

210 x 86

Description input field

Actual size of each input field is 94 x 28-pixels. To be used preferably with a label.

Series 40 Web Apps UX Guidelines

76

6. Specs for standard components
This section provides detailed size specification for the recommended standard components for use in Series 40 web apps. Note: In all cases the vertical and horizontal space around all elements is 8 pixels.

6.1 Header and sub-header components
This section provides the recommended specifications for the elements displayed in the web app header, these items are: ‒ ‒ ‒ ‒ ‒ Standards header module, shown in Figure 70. Header module with input field, shown in Figure 71. Sub-header with a subtitle, shown in Figure 72. Sub header module for a slideshow, shown in Figure 73. Sub header module for previous-next navigation, shown in Figure 74.

Figure 70: The standard header module is shown.

Series 40 Web Apps UX Guidelines

77

Figure 71: Header module with input field is shown.

Figure 72: Sub header module for a subtitle is shown.

Figure 73: Sub header module for a slideshow is shown.

Figure 74: Sub header module offering previous-next is shown.

Series 40 Web Apps UX Guidelines

78

6.2 List items
This section provides recommended specifications for items displayed in a list, these items are: ‒ ‒ ‒ ‒ ‒ ‒ ‒ ‒ ‒ single line list item, shown in Figure 75. single line list item with icon, shown in Figure 76. list item in a table, shown in Figure 77. list item in a table with icon, shown in Figure 78. double line list item, shown in Figure 79. double line list item with icon, shown in Figure 80. expandable list item, shown in Figure 81. list item with image and text, shown in Figure 82. list item without image and text, shown in Figure 83.

Figure 75: A single line list item is shown.

Figure 76: A single line list item with icon is shown.

Series 40 Web Apps UX Guidelines

79

Figure 77: Specification for a list item in a table is shown.

Figure 78: The specification for a list item in table with icon is shown.

Figure 79: Specification for a double line list item is shown.

Figure 80: Specification for a double line list item with icon is shown.

Series 40 Web Apps UX Guidelines

80

Figure 81: Specification for an expandable list item is shown.

Figure 82: A list item with image and text is shown.

Figure 83: A list item without image and text is shown.

Series 40 Web Apps UX Guidelines

81

6.3 Content
This section provides a recommended specification for content with headline, date, and body text, shown in Figure 84.

Figure 84: Content with headline, date, and body text is shown.

6.4 Tabs
This section provides a recommended specification for content with headline, date, and body text, shown in Figure 85.

Figure 85: The specification for tabs is shown.

Series 40 Web Apps UX Guidelines

82

Copyright © 2011 Nokia Corporation. All rights reserved. Nokia and Forum Nokia are trademarks or registered trademarks of Nokia Corporation. Oracle and Java are registered trademarks of Oracle and/or its affiliates. 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. 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 document at any time, without notice. Licence A licence is hereby granted to download and print a copy of this document for personal use only. No other licence to any other intellectual property rights is granted herein.

Series 40 Web Apps UX Guidelines

83