Series 40 Full TouchUI Style GuidePart 11               © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012...
OverviewPart 1 (28.06.2012, 04.07.2012)• Essentials• UI Components• Exercises (solutions 04.07.2012)Part 2 (10.07.2012, 13...
Essentials3   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Series 40 full touch UI is different – theAPIs are not.4   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2...
Home screen allows direct access toapps, contacts, and my app.                                                            ...
Notification bar contains pre-definedshortcuts and global notifications.                                           timeout...
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
Use standard gestures as intended.       Press, release                                                  Drag        Selec...
Touch UI elements must show afeedback and evoke on finger lift.9   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.ppt...
Main orientation is portrait, most JavaUI elements support landscape.10   © Nokia 2012 Series 40 Full Touch UI Style Guide...
Support for right-to-left languagesaffects chrome and content.11   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.ppt...
UI Components12   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
LCDUI is based on few view types.                                                                    Displayable          ...
2 types of displayable (views)                                                                    Displayable             ...
Screens allow pre-defined elements,but in a canvas you can draw freely.15   © Nokia 2012 Series 40 Full Touch UI Style Gui...
2 canvases                                                                    Displayable                              Scr...
A full screen canvas requires you toadd navigation elements.17   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx ...
4 screens                                                                    Displayable                              Scre...
A form is the most versatile screen touse with LCDUI components.19   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.p...
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 Kreb...
Alerts can only be shown inside anapplication.21   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-2...
A text box can show editable text ornon-editable text. Nothing else.22   © Nokia 2012 Series 40 Full Touch UI Style Guide ...
3 different types of lists                                                                    Displayable                 ...
Implicit choices are made for drill downand single selection.24   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx...
Exclusive choice list does not closeautomatically after selection.25   © Nokia 2012 Series 40 Full Touch UI Style Guide p1...
Also screens with multiple choices mayrequire some additional work.26   © Nokia 2012 Series 40 Full Touch UI Style Guide p...
8 form items                                                                    Displayable                              S...
Changes in forms are confirmed; orcancelled with a confirmation query.28   © Nokia 2012 Series 40 Full Touch UI Style Guid...
Due to their nature, only exclusive pop-up choice groups can collapse.29   © Nokia 2012 Series 40 Full Touch UI Style Guid...
There is no ”single choice item” in JavaForm.                        custom30   © Nokia 2012 Series 40 Full Touch UI Style...
DateField is a tumbler, only for settingtime and date.31   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2...
TextField is for inline text editing suchas names or passwords.32   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pp...
Gauge can be a slider or a progressindicator.33   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28...
StringItem displays text and allowshyperlinks and button creation.34   © Nokia 2012 Series 40 Full Touch UI Style Guide p1...
ImageItem crops the image to thescreen if necessary.35   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 201...
CustomItem allows drawing newelements as needed.36   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06...
Spacer adds space between two formitems.37   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan ...
Exercises38   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Exercise: How would this screen lookin Series 40 Full touch?39   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx ...
Exercise: Create a sign in view    - Username    - Password    - Setting for auto-fill password    - Forgot password & hel...
Exercise: Which component would youuse to pick one of the following?    - Monday    - Tuesday    - Wednesday    - Thursday...
Exercise: How would you replace asingle choice item (aka switch)?42   © Nokia 2012 Series 40 Full Touch UI Style Guide p1....
Exercise: Which views can have abutton? Are there any limitations?43   © Nokia 2012 Series 40 Full Touch UI Style Guide p1...
Links Series 40 Full Touch UI DesignLibrary: http://www.developer.nokia.com/Resources/Library/Full_Touch/Checklist:http://...
Answers and propsals fromhere:http://www.developer.nokia.com/Community/Wiki/Wiki_Home45   © Nokia 2012 Series 40 Full Touc...
Thanks ext-jan.krebber@nokia.com46   © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Upcoming SlideShare
Loading in...5
×

Nokia Asha Touch UI Style Guide Part 1

3,370
-1

Published on

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.

Published in: Technology, Business
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
3,370
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
233
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Nokia Asha Touch UI Style Guide Part 1

  1. 1. Series 40 Full TouchUI Style GuidePart 11 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  2. 2. OverviewPart 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. 3. Essentials3 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  4. 4. Series 40 full touch UI is different – theAPIs are not.4 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  5. 5. Home screen allows direct access toapps, contacts, and my app. App My Page My App Launcher5 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  6. 6. Notification bar contains pre-definedshortcuts and global notifications. timeout6 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  7. 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. 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 quickly8 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  9. 9. Touch UI elements must show afeedback 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. 10. Main orientation is portrait, most JavaUI elements support landscape.10 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  11. 11. Support for right-to-left languagesaffects chrome and content.11 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  12. 12. UI Components12 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  13. 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 Item13 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  14. 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 Item14 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  15. 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. 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 Item16 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  17. 17. A full screen canvas requires you toadd navigation elements.17 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  18. 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 Item18 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  19. 19. A form is the most versatile screen touse with LCDUI components.19 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  20. 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. 21. Alerts can only be shown inside anapplication.21 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  22. 22. A text box can show editable text ornon-editable text. Nothing else.22 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  23. 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 Item23 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  24. 24. Implicit choices are made for drill downand single selection.24 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  25. 25. Exclusive choice list does not closeautomatically after selection.25 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  26. 26. Also screens with multiple choices mayrequire some additional work.26 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  27. 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 Item27 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  28. 28. Changes in forms are confirmed; orcancelled with a confirmation query.28 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  29. 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. 30. There is no ”single choice item” in JavaForm. custom30 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  31. 31. DateField is a tumbler, only for settingtime and date.31 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  32. 32. TextField is for inline text editing suchas names or passwords.32 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  33. 33. Gauge can be a slider or a progressindicator.33 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  34. 34. StringItem displays text and allowshyperlinks and button creation.34 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  35. 35. ImageItem crops the image to thescreen if necessary.35 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  36. 36. CustomItem allows drawing newelements as needed.36 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  37. 37. Spacer adds space between two formitems.37 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  38. 38. Exercises38 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  39. 39. Exercise: How would this screen lookin Series 40 Full touch?39 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  40. 40. Exercise: Create a sign in view - Username - Password - Setting for auto-fill password - Forgot password & help40 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  41. 41. Exercise: Which component would youuse to pick one of the following? - Monday - Tuesday - Wednesday - Thursday - Friday41 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  42. 42. Exercise: How would you replace asingle choice item (aka switch)?42 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  43. 43. Exercise: Which views can have abutton? Are there any limitations?43 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  44. 44. Links Series 40 Full Touch UI DesignLibrary: http://www.developer.nokia.com/Resources/Library/Full_Touch/Checklist:http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ux-checklist.htmlIcon Creation:http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation.htmlUI Components:http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components.htmlUI Components Demos App:https://projects.developer.nokia.com/s40uivisualisationBasics: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. 45. Answers and propsals fromhere:http://www.developer.nokia.com/Community/Wiki/Wiki_Home45 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  46. 46. Thanks ext-jan.krebber@nokia.com46 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

×