introduction to the new nokia asha ui
DESCRIPTION
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/webinarsTRANSCRIPT
![Page 1: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/1.jpg)
Introduction to the new Nokia Asha UI Jan Krebber Senior User Experience Consultant
![Page 2: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/3.jpg)
UI design changes
![Page 4: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/4.jpg)
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.
![Page 5: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/8.jpg)
The Swipe is reserved.
8 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
![Page 9: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/12.jpg)
Indicating selected items has been simplified.
12 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
![Page 13: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/16.jpg)
Textual guidelines are simplified.
16 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
![Page 17: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/17.jpg)
From Series 40 non-touch to Nokia Asha UI
![Page 18: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/20.jpg)
Example: List no focus – Picker highlight.
20 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
![Page 21: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/23.jpg)
UX offering
![Page 24: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/28.jpg)
Take home messages
![Page 29: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/29.jpg)
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.
![Page 30: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/31.jpg)
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
![Page 32: Introduction to the new Nokia Asha UI](https://reader033.vdocuments.site/reader033/viewer/2022052310/55532ac2b4c905a7778b54b8/html5/thumbnails/32.jpg)
Thanks to Sanna Hiukka and Stratos Kalogirou.