Nokia Asha Touch UI Style Guide Part 2
-
Upload
microsoft-mobile-developer -
Category
Technology
-
view
1.847 -
download
5
description
Transcript of Nokia Asha Touch UI Style Guide Part 2
![Page 1: Nokia Asha Touch UI Style Guide Part 2](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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