Nokia Asha Touch UI Style Guide Part 1
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Nokia Asha Touch UI Style Guide Part 1

on

  • 3,576 views

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

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.

Statistics

Views

Total Views
3,576
Views on SlideShare
3,575
Embed Views
1

Actions

Likes
1
Downloads
223
Comments
2

1 Embed 1

http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Recording of session two is now available: http://forumnokia.adobeconnect.com/p4qjd5uxg7q/
    Are you sure you want to
    Your message goes here
    Processing…
  • Recording of session one is now available: http://forumnokia.adobeconnect.com/p6mlgo0b6t3/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Nokia Asha Touch UI Style Guide Part 1 Presentation Transcript

  • 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. 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. Essentials3 © 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 – theAPIs 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 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. 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. 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 quickly8 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  • 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. 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. 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. UI Components12 © 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 Item13 © 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 Item14 © 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 Item16 © 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 toadd 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 Item18 © 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 touse 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 anapplication.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 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. 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. 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. 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. 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. 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. 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. 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 JavaForm. custom30 © 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 settingtime 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 suchas 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 progressindicator.33 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  • 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. 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. 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. 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. Exercises38 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
  • 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. 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. 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. 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. 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. 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. 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. Thanks ext-jan.krebber@nokia.com46 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber