nokia asha touch ui style guide part 1
DESCRIPTION
This webinar covers UI essentials and UI components for Series 40 full touch phones as found in the LCDUI. Participants will learn when to use a certain UI component and when to prioritise one component to make the application work as expected by people using Series 40 phones.TRANSCRIPT
![Page 1: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/1.jpg)
1
Part 1
Series 40 Full Touch UI Style Guide
© Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 2: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/2.jpg)
Overview
2 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Part 1 (28.06.2012, 04.07.2012) • Essentials • UI Components • Exercises (solutions 04.07.2012) Part 2 (10.07.2012, 13.07.2012) • Chrome and Menus • UI Patterns • Customisation • Porting • UX offering for Series 40 • Take Home Messages • Exercises (solutions 13.07.2012)
![Page 3: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/3.jpg)
Essentials
3 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 4: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/4.jpg)
Series 40 full touch UI is different – the APIs are not.
4 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber 4
![Page 5: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/5.jpg)
Home screen allows direct access to apps, contacts, and my app.
5 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
My Page App Launcher
My App
![Page 6: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/6.jpg)
Notification bar contains pre-defined shortcuts and global notifications.
6 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
timeout
![Page 7: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/7.jpg)
The UI is composed of 5 main layers.
7 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 8: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/8.jpg)
Use standard gestures as intended.
8 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Press, release Select, open
Press and hold Opens context
menu
Double tap Toggles zoom states
Drag Move item
Swipe from the edge
Flick Scroll quickly
Pinch open Zoom in
Pinch close Zoom out
![Page 9: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/9.jpg)
Touch UI elements must show a feedback and evoke on finger lift.
9 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 10: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/10.jpg)
Main orientation is portrait, most Java UI elements support landscape.
10 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 11: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/11.jpg)
Support for right-to-left languages affects chrome and content.
11 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 12: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/12.jpg)
UI Components
12 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 13: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/13.jpg)
LCDUI is based on few view types.
13 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 14: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/14.jpg)
2 types of displayable (views)
14 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 15: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/15.jpg)
Screens allow pre-defined elements, but in a canvas you can draw freely.
15 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 16: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/16.jpg)
2 canvases
16 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 17: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/17.jpg)
17 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
A full screen canvas requires you to add navigation elements.
![Page 18: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/18.jpg)
4 screens
18 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 19: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/19.jpg)
A form is the most versatile screen to use with LCDUI components.
19 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 20: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/20.jpg)
Lists allow only one list item type.
20 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 21: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/21.jpg)
Alerts can only be shown inside an application.
21 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 22: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/22.jpg)
A text box can show editable text or non-editable text. Nothing else.
22 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 23: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/23.jpg)
3 different types of lists
23 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 24: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/24.jpg)
Implicit choices are made for drill down and single selection.
24 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 25: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/25.jpg)
Exclusive choice list does not close automatically after selection.
25 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 26: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/26.jpg)
Also screens with multiple choices may require some additional work.
26 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 27: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/27.jpg)
8 form items
27 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 28: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/28.jpg)
Changes in forms are confirmed; or cancelled with a confirmation query.
28 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 29: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/29.jpg)
Due to their nature, only exclusive pop-up choice groups can collapse.
29 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 30: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/30.jpg)
There is no ”single choice item” in Java Form.
30 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
custom
![Page 31: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/31.jpg)
DateField is a tumbler, only for setting time and date.
31 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 32: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/32.jpg)
TextField is for inline text editing such as names or passwords.
32 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 33: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/33.jpg)
Gauge can be a slider or a progress indicator.
33 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 34: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/34.jpg)
StringItem displays text and allows hyperlinks and button creation.
34 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 35: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/35.jpg)
ImageItem crops the image to the screen if necessary.
35 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 36: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/36.jpg)
CustomItem allows drawing new elements as needed.
36 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 37: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/37.jpg)
Spacer adds space between two form items.
37 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 38: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/38.jpg)
Exercises
38 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 39: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/39.jpg)
Exercise: How would this screen look in Series 40 Full touch?
39 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 40: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/40.jpg)
Exercise: Create a sign in view - Username - Password - Setting for auto-fill password - Forgot password & help
40 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 41: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/41.jpg)
Exercise: Which component would you use to pick one of the following? - Monday - Tuesday - Wednesday - Thursday - Friday
41 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 42: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/42.jpg)
Exercise: How would you replace a single choice item (aka switch)?
42 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 43: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/43.jpg)
Exercise: Which views can have a button? Are there any limitations?
43 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 44: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/44.jpg)
Links Series 40 Full Touch UI Design
44 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 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/
![Page 45: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/45.jpg)
Answers and propsals from here: http://www.developer.nokia.com/Community/Wiki/Wiki_Home
45 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
![Page 46: Nokia Asha Touch UI Style Guide Part 1](https://reader034.vdocument.in/reader034/viewer/2022052410/55532ad2b4c905a7778b54c3/html5/thumbnails/46.jpg)
Thanks [email protected]
46 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber