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.

1. Series 40 Full Touch
UI Style Guide
Part 1
1 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

2. Overview
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)
2 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

3. Essentials
3 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

4. 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

5. Home screen allows direct access to
apps, contacts, and my app.
App
My Page My App
Launcher
5 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

6. Notification bar contains pre-defined
shortcuts and global notifications.
timeout
6 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

7. 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

8. Use standard gestures as intended.
Press, release Drag
Select, open Move item
Pinch open
Zoom in
Press and hold Swipe from the edge
Opens context
menu
Pinch close
Double tap Flick Zoom out
Toggles zoom states Scroll quickly
8 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

9. 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

10. 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

11. 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

12. UI Components
12 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

13. LCDUI is based on few view types.
Displayable
Screen Canvas
Form List Alert Text box With chrome Full screen
Implicit choice Exclusive choice Multiple choice
Choice Date Text Gauge String Image Custom Spacer
Group Field Field Item Item Item
13 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

14. 2 types of displayable (views)
Displayable
Screen Canvas
Form List Alert Text box With chrome Full screen
Implicit choice Exclusive choice Multiple choice
Choice Date Text Gauge String Image Custom Spacer
Group Field Field Item Item Item
14 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

15. 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

16. 2 canvases
Displayable
Screen Canvas
Form List Alert Text box With chrome Full screen
Implicit choice Exclusive choice Multiple choice
Choice Date Text Gauge String Image Custom Spacer
Group Field Field Item Item Item
16 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

17. A full screen canvas requires you to
add navigation elements.
17 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

18. 4 screens
Displayable
Screen Canvas
Form List Alert Text box With chrome Full screen
Implicit choice Exclusive choice Multiple choice
Choice Date Text Gauge String Image Custom Spacer
Group Field Field Item Item Item
18 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

19. 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

20. 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

21. 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

22. 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

23. 3 different types of lists
Displayable
Screen Canvas
Form List Alert Text box With chrome Full screen
Implicit choice Exclusive choice Multiple choice
Choice Date Text Gauge String Image Custom Spacer
Group Field Field Item Item Item
23 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

24. 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

25. 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

26. 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

27. 8 form items
Displayable
Screen Canvas
Form List Alert Text box With chrome Full screen
Implicit choice Exclusive choice Multiple choice
Choice Date Text Gauge String Image Custom Spacer
Group Field Field Item Item Item
27 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

28. 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

29. 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

30. There is no ”single choice item” in Java
Form.
custom
30 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. Exercises
38 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

39. 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

40. 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

41. 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

42. 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

43. 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

44. Links Series 40 Full Touch UI Design
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/
44 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

45. 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

46. Thanks 
ext-jan.krebber@nokia.com
46 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber