nokia asha touch ui style guide part 2
DESCRIPTION
Series 40 full touch: UI style guide part 2 covers UI chrome, menus, UI patterns, customization, and porting within Series 40. It will show how to utilize the essentials and how to assemble the components (which were discussed in part 1) into an application. The webinar closes with some exercises as “homework” to let participants try out the new knowledge by themselves. The proposals to these homework problems will be published afterwardsTRANSCRIPT
![Page 1: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/1.jpg)
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
![Page 2: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/2.jpg)
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
![Page 3: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/3.jpg)
Chrome and Menus
3 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 4: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/4.jpg)
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
![Page 5: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/5.jpg)
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
![Page 6: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/6.jpg)
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
![Page 7: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/7.jpg)
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
![Page 8: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/8.jpg)
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
![Page 9: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/9.jpg)
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
![Page 10: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/10.jpg)
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
![Page 11: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/11.jpg)
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
![Page 12: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/12.jpg)
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
![Page 13: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/13.jpg)
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
![Page 14: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/14.jpg)
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
![Page 15: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/15.jpg)
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
![Page 16: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/16.jpg)
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
![Page 17: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/17.jpg)
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
![Page 18: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/18.jpg)
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
![Page 19: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/19.jpg)
UI Patterns
19 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 20: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/20.jpg)
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
![Page 21: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/21.jpg)
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
![Page 22: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/22.jpg)
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
![Page 23: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/23.jpg)
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
![Page 24: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/24.jpg)
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
![Page 25: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/25.jpg)
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
![Page 26: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/26.jpg)
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
![Page 27: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/27.jpg)
Customization
27 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 28: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/28.jpg)
Use the entire screen.
28 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 29: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/29.jpg)
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
![Page 30: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/30.jpg)
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
![Page 31: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/31.jpg)
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
![Page 32: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/32.jpg)
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
![Page 33: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/33.jpg)
Define the expected keyboard layout.
33 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 34: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/34.jpg)
Porting
34 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 35: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/35.jpg)
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)
![Page 36: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/36.jpg)
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
![Page 37: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/37.jpg)
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
![Page 38: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/38.jpg)
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
![Page 39: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/39.jpg)
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
![Page 40: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/40.jpg)
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
![Page 41: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/41.jpg)
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
![Page 42: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/42.jpg)
UX offering for Series 40
42 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 43: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/43.jpg)
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
![Page 44: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/44.jpg)
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
![Page 45: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/45.jpg)
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
![Page 46: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/46.jpg)
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
![Page 47: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/47.jpg)
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
![Page 48: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/48.jpg)
Take home messages
48 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 49: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/49.jpg)
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
![Page 50: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/50.jpg)
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
![Page 51: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/51.jpg)
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
![Page 52: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/52.jpg)
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
![Page 53: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/53.jpg)
Exercises
53 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
![Page 54: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/54.jpg)
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
![Page 55: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/55.jpg)
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
![Page 56: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/56.jpg)
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
![Page 57: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/57.jpg)
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
![Page 58: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/58.jpg)
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
![Page 59: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/59.jpg)
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
![Page 60: Nokia Asha Touch UI Style Guide Part 2](https://reader034.vdocument.in/reader034/viewer/2022042614/55532a40b4c90575768b55ee/html5/thumbnails/60.jpg)
Thanks [email protected]
60 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber