Series 40 Full TouchUI Style GuidePart 21              © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2...
OverviewPart 1 (28.06.2012, 04.07.2012)• Essentials• UI Components• ExercisesPart 2 (10.07.2012, 13.07.2012)• Chrome and M...
Chrome and Menus3   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Ensure there is a Back button in allviews.4   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13...
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 Ja...
Instead of scrolling horizontally, usethe Category bar extension.6   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_par...
Category bar disappears with drilldown.7   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Ja...
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 ...
The former MSK is now the primaryfunction in Action button 1.9   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.p...
If there is no MSK metaphore, place allscreen commands to Options.10   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_p...
If there are no options at all, the menuicon is dimmed automatically.11   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guid...
Options menu contains only globalview functions.12   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 201...
Context menu is only a collection ofshortcuts of single item actions.13   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guid...
There are different ’Options’ and’Selection’ lists.                      LCDUI                                            ...
Options lists in LCDUI do not allownested lists.                      LCDUI                 Options list                  ...
Popup lists with options list layout aredefined by positioning the tail.                                                  ...
Popup lists with selection list layoutare defined by specifying a title.                                                  ...
Use nested lists for more items toavoid scrolling or for settings.                                                        ...
UI Patterns19   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
End key ends calls and dataconnections or exits applications.20   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2....
Notify or confirm at least in case ofpossible loss.21   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 ...
Instead of dimming, use dynamic viewcontent.22   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07...
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_p...
If you need and alternative to aDateField, use a TextField instead.24   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_...
Use a form as wait notification, sincealerts cannot listen to app events.              custom25   © Nokia 2012 Series_40_F...
Participate to theAsha Touch Competition 2012Q326   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012...
Customization27   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Use the entire screen.28   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Place your chrome elements wherethe platform chrome would be.29   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2....
Fonts are between 14 pt light and20 pt regular.30   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012...
Minimum touch area is43 x 43 pixels and 6 pixels margin.Pixel size: 0,163 mm x 0,163 mm for 3’’, 240 x 400 pixels31   © No...
Show the status bar to allow access tothe notification bar.32   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pp...
Define the expected keyboard layout.33   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan ...
Porting34   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
We will look briefly into 2 portingcases:1. Series 40 non-touch to Series 40 touch and type (NT )2. Series 40 touch and t...
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 Ja...
NT T&T splits Options to screen and item.                                                                                ...
NT Context menu items must be repeated.              Names                                                               ...
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...
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 J...
UI porting between T&T and FT iseasier than between NT and T&T.                     T&T  FT                              ...
UX offering for Series 4042   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
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
The UX checklist collects the mostimportant UI style issues.44   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.p...
The Nokia Icon Toolkit supportsInkscape.45   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 ...
Stencils help to create high fidelitywireframes or help to check sizes.46   © Nokia 2012 Series_40_Full_Touch _UI_Style_Gu...
Series 40 UI component demos appshowcases UI and code.47   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v....
Take home messages48   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
To maintain look and feel, chrome andcomponents are a good start.49   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_pa...
UI porting between T&T and FT iseasier than between NT and T&T.50   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part...
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 Ja...
Series 40 Full Touch UI DesignLibrary: http://www.developer.nokia.com/Resources/Library/Full_Touch/Checklist: http://www.d...
Exercises53   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
Exercise: How could these screenslook in full touch?54   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01...
Exercise: If Action Button 1 should beused for confirmation, how would youbuild a multi selction view?55   © Nokia 2012 Se...
Exercise: Sketch a download dialogwhich shows the remaining amount ofdata.56   © Nokia 2012 Series_40_Full_Touch _UI_Style...
Exercise: Sketch a view- 2 categories- 3 primary actions             - call             - add             - edit- 3 second...
Exercise: How many touch elements fitthe content area?58   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v....
Exercise: How many touch elements fitthe entire canvas?59   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v...
Thanks ext-jan.krebber@nokia.com60   © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Kre...
Upcoming SlideShare
Loading in...5
×

Nokia Asha Touch UI Style Guide Part 2

1,866

Published on

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 afterwards

Published in: Technology, Design
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,866
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
176
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Nokia Asha Touch UI Style Guide Part 2

  1. 1. Series 40 Full TouchUI Style GuidePart 21 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  2. 2. OverviewPart 1 (28.06.2012, 04.07.2012)• Essentials• UI Components• ExercisesPart 2 (10.07.2012, 13.07.2012)• Chrome and Menus• UI Patterns• Customisation• Porting• UX offering for Series 40• Take Home Messages• Exercises2 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  3. 3. Chrome and Menus3 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  4. 4. Ensure there is a Back button in allviews.4 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  5. 5. 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
  6. 6. Instead of scrolling horizontally, usethe Category bar extension.6 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  7. 7. Category bar disappears with drilldown.7 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  8. 8. 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
  9. 9. The former MSK is now the primaryfunction in Action button 1.9 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  10. 10. If there is no MSK metaphore, place allscreen commands to Options.10 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  11. 11. If there are no options at all, the menuicon is dimmed automatically.11 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  12. 12. Options menu contains only globalview functions.12 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  13. 13. Context menu is only a collection ofshortcuts of single item actions.13 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  14. 14. There are different ’Options’ and’Selection’ lists. LCDUI Nokia UI Options list Popup list (all) (Form, Canvas) Options Long press Options Selection list (screen (item list layout layout commands) commands) + tail position Nested Nested list list14 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  15. 15. Options lists in LCDUI do not allownested lists. LCDUI Options list (all) Options Long press (screen (item commands) commands)15 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  16. 16. Popup lists with options list layout aredefined by positioning the tail. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list16 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  17. 17. Popup lists with selection list layoutare defined by specifying a title. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list17 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  18. 18. Use nested lists for more items toavoid scrolling or for settings. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list18 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  19. 19. UI Patterns19 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  20. 20. End key ends calls and dataconnections or exits applications.20 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  21. 21. Notify or confirm at least in case ofpossible loss.21 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  22. 22. Instead of dimming, use dynamic viewcontent.22 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  23. 23. 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
  24. 24. If you need and alternative to aDateField, use a TextField instead.24 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  25. 25. Use a form as wait notification, sincealerts cannot listen to app events. custom25 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  26. 26. Participate to theAsha Touch Competition 2012Q326 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  27. 27. Customization27 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  28. 28. Use the entire screen.28 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  29. 29. Place your chrome elements wherethe platform chrome would be.29 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  30. 30. Fonts are between 14 pt light and20 pt regular.30 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  31. 31. Minimum touch area is43 x 43 pixels and 6 pixels margin.Pixel size: 0,163 mm x 0,163 mm for 3’’, 240 x 400 pixels31 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  32. 32. Show the status bar to allow access tothe notification bar.32 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  33. 33. Define the expected keyboard layout.33 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  34. 34. Porting34 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  35. 35. We will look briefly into 2 portingcases: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)35 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  36. 36. 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
  37. 37. NT T&T splits Options to screen and item. Context Options37 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  38. 38. NT Context menu items must be repeated. Names Contact (drill down) Context Options38 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  39. 39. 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
  40. 40. 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
  41. 41. UI porting between T&T and FT iseasier than between NT and T&T. T&T  FT NT  T&T41 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  42. 42. UX offering for Series 4042 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  43. 43. 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
  44. 44. The UX checklist collects the mostimportant UI style issues.44 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  45. 45. The Nokia Icon Toolkit supportsInkscape.45 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  46. 46. Stencils help to create high fidelitywireframes or help to check sizes.46 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  47. 47. Series 40 UI component demos appshowcases UI and code.47 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  48. 48. Take home messages48 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  49. 49. To maintain look and feel, chrome andcomponents are a good start.49 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  50. 50. UI porting between T&T and FT iseasier 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
  51. 51. 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
  52. 52. 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/Asha Touch Competition 2012Q3:http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3Wiki article to this webinar:http://www.developer.nokia.com/Community/Wiki/index.php?title=Webinar_Series_40_UI_Design52 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  53. 53. Exercises53 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  54. 54. Exercise: How could these screenslook in full touch?54 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  55. 55. Exercise: If Action Button 1 should beused for confirmation, how would youbuild a multi selction view?55 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  56. 56. Exercise: Sketch a download dialogwhich shows the remaining amount ofdata.56 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  57. 57. 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 area57 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  58. 58. Exercise: How many touch elements fitthe content area?58 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  59. 59. Exercise: How many touch elements fitthe entire canvas?59 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  60. 60. Thanks ext-jan.krebber@nokia.com60 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

×