Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to the new Nokia Asha UI

This webinar gets you started with the new Nokia Asha UI, whether you’re a seasoned pro or new to Nokia app development. UX expert Jan Krebber of OCT03 demonstrates the cornerstone concepts of the new Nokia Asha UI and shows you how to apply them to your app designs. He also contrasts the most important aspects of the new Nokia Asha UI design with concepts of the earlier Series 40 Developer Platform and gives you the latest information on new UI tools to help you optimise your designs.

Find out more about:
* developing for Nokia Asha: http://www.developer.nokia.com/Develop/asha
* UX guidelines for Java apps: http://www.developer.nokia.com/Resources/Library/Asha_UI/
* UX guidelines for web apps: http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/
* component demos: https://projects.developer.nokia.com/asha_ui_component_demos

Check out the current webinar schedule here: http://www.developer.nokia.com/webinars

  • Be the first to comment

Introduction to the new Nokia Asha UI

  1. 1. Introduction to the new Nokia Asha UI Jan Krebber Senior User Experience Consultant
  2. 2. Overview 2 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux • UI design changes • From Series 40 non-touch to Nokia Asha UI • UX offering • Take home messages
  3. 3. UI design changes
  4. 4. 4 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux The visualization changed, but the APIs remain compatible.
  5. 5. The screen is optimized for mobility, convenience and effectiveness. 5 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  6. 6. Consider thumb usage. Make touch areas large enough. 6 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  7. 7. Back-stepping is done via a dedicated hardware Back/Exit key. 7 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  8. 8. The Swipe is reserved. 8 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  9. 9. Use 25 px margin for gestures to be Swipe- safe. 9 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  10. 10. Push notification lets people listen to your service if there is something new. 10 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux Your service Nokia server
  11. 11. Category bar can have tabs or actions. Do not mix them. 11 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  12. 12. Indicating selected items has been simplified. 12 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  13. 13. The popup list has been simplified as well. Replace it with a list if necessary. 13 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  14. 14. Square Fastlane icon is cut for you into Home’s icon. 14 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  15. 15. Make sure custom components work with the light background. 15 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  16. 16. Textual guidelines are simplified. 16 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  17. 17. From Series 40 non-touch to Nokia Asha UI
  18. 18. Remove focus when porting from Series 40 non-touch. 18 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  19. 19. No focus in a list (1). Highlight only in a picker (2). 19 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  20. 20. Example: List no focus – Picker highlight. 20 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  21. 21. Split non-touch Options menu into Options menu and Long-press menu. 21 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  22. 22. Long-press menu items must be repeated in later views. 22 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  23. 23. UX offering
  24. 24. There are LCDUI and LWUIT UI style guides. 24 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  25. 25. There are UI stencils for Inkscape in addition to Adobe Illustrator. 25 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  26. 26. Asha UI component demo application is a Java midlet suite for LCDUI. 26 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  27. 27. Literature and links 27 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux • UX Library for Nokia Asha: • http://www.developer.nokia.com/Resources/Library/Asha_UI/ #!index.html • Nokia Asha Web app UX guidelines: • http://www.developer.nokia.com/Resources/Library/Nokia_As ha_web_apps_library/#!design-library.html • Nokia Asha UI component demos: • https://projects.developer.nokia.com/asha_ui_component_de mos
  28. 28. Take home messages
  29. 29. 29 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux The visualization changed, but the APIs remain compatible.
  30. 30. Back-stepping is done via a dedicated hardware Back/Exit key. 30 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  31. 31. Category bar can have tabs or actions. Do not mix them. 31 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  32. 32. Thanks to Sanna Hiukka and Stratos Kalogirou.
  33. 33. Thanks . Jan Krebber ext-jan.krebber@nokia.com @krebbixux

×