1
Part 2
Series 40 Full Touch UI Style Guide
© Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Overview
2 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Part 1 (28.06.2012, 04.07.2012) • Essentials • UI Components • Exercises Part 2 (10.07.2012, 13.07.2012) • Chrome and Menus • UI Patterns • Customisation • Porting • UX offering for Series 40 • Take Home Messages • Exercises
Chrome and Menus
3 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Ensure there is a Back button in all views.
4 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Do not place actions in a Category bar.
5 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Instead of scrolling horizontally, use the Category bar extension.
6 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Category bar disappears with drill down.
7 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
It is possible to add a Ticker to a view.
8 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
The former MSK is now the primary function in Action button 1.
9 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
If there is no MSK metaphore, place all screen commands to Options.
10 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
If there are no options at all, the menu icon is dimmed automatically.
11 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Options menu contains only global view functions.
12 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Context menu is only a collection of shortcuts of single item actions.
13 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
There are different ’Options’ and ’Selection’ lists.
14 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Options (screen
commands)
Popup list (Form, Canvas)
Options list (all)
Long press (item
commands)
Options list layout
+ tail position
Selection list layout
Nested list
Nested list
LCDUI Nokia UI
Options lists in LCDUI do not allow nested lists.
15 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Options (screen
commands)
Options list (all)
Long press (item
commands)
LCDUI
Popup lists with options list layout are defined by positioning the tail.
16 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Popup list (Form, Canvas)
Options list layout
+ tail position
Selection list layout
Nested list
Nested list
Nokia UI
Popup lists with selection list layout are defined by specifying a title.
17 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Popup list (Form, Canvas)
Options list layout
+ tail position
Selection list layout
Nested list
Nested list
Nokia UI
Use nested lists for more items to avoid scrolling or for settings.
18 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Popup list (Form, Canvas)
Options list layout
+ tail position
Selection list layout
Nested list
Nested list
Nokia UI
UI Patterns
19 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
End key ends calls and data connections or exits applications.
20 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Notify or confirm at least in case of possible loss.
21 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Instead of dimming, use dynamic view content.
22 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
If you need Action Button #1 in a List, you can use a Form instead.
23 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
If you need and alternative to a DateField, use a TextField instead.
24 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Use a form as wait notification, since alerts cannot listen to app events.
25 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
custom
Participate to the Asha Touch Competition 2012Q3
26 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Customization
27 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Use the entire screen.
28 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Place your chrome elements where the platform chrome would be.
29 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Fonts are between 14 pt light and 20 pt regular.
30 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Minimum touch area is 43 x 43 pixels and 6 pixels margin.
31 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Pixel size: 0,163 mm x 0,163 mm for 3’’, 240 x 400 pixels
Show the status bar to allow access to the notification bar.
32 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Define the expected keyboard layout.
33 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Porting
34 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
We will look briefly into 2 porting cases:
35 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
1. Series 40 non-touch to Series 40 touch and type (NT )
2. Series 40 touch and type to Series 40 full touch (T&T)
NT T&T removes focus and changes MSK.
36 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
NT T&T splits Options to screen and item.
37 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Options
Context
NT Context menu items must be repeated.
38 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Options Context
Contact (drill down) Names
T&T FT requires icons for Action button #1.
39 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
T&T FT needs Cancel button instead of .
40 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
UI porting between T&T and FT is easier than between NT and T&T.
41 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
NT T&T T&T FT
UX offering for Series 40
42 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
There is a UI style guide.
43 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber 43
The UX checklist collects the most important UI style issues.
44 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber 44
The Nokia Icon Toolkit supports Inkscape.
45 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber 45
Stencils help to create high fidelity wireframes or help to check sizes.
46 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber 46
Series 40 UI component demos app showcases UI and code.
47 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber 47
Take home messages
48 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
To maintain look and feel, chrome and components are a good start.
49 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
UI porting between T&T and FT is easier than between NT and T&T.
50 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
UX offering is not just a style guide.
51 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Series 40 Full Touch UI Design
52 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Library: http://www.developer.nokia.com/Resources/Library/Full_Touch/ Checklist: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ux-checklist.html Icon Creation: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation.html UI Components: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components.html UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation Basics: http://www.developer.nokia.com/Resources/Library/Design_and_UX/ Asha Touch Competition 2012Q3: http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3 Wiki article to this webinar: http://www.developer.nokia.com/Community/Wiki/index.php?title=Webinar_Series_40_UI_Design
Exercises
53 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Exercise: How could these screens look in full touch?
54 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Exercise: If Action Button 1 should be used for confirmation, how would you build a multi selction view?
55 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Exercise: Sketch a download dialog which shows the remaining amount of data.
56 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Exercise: Sketch a view - 2 categories - 3 primary actions - call - add - edit - 3 secondary actions - Share FB, TW, Reddit
- Options menu - use chrome - maximize the content area
57 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Exercise: How many touch elements fit the content area?
58 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Exercise: How many touch elements fit the entire canvas?
59 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Thanks [email protected]
60 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Recommended