View
2.151
Download
6
Category
Tags:
Preview:
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/webinars
Citation preview
Introduction to the new Nokia Asha UI Jan Krebber Senior User Experience Consultant
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
UI design changes
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.
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
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
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
The Swipe is reserved.
8 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
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
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
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
Indicating selected items has been simplified.
12 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
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
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
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
Textual guidelines are simplified.
16 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
From Series 40 non-touch to Nokia Asha UI
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
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
Example: List no focus – Picker highlight.
20 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
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
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
UX offering
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
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
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
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
Take home messages
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.
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
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
Thanks to Sanna Hiukka and Stratos Kalogirou.
Thanks .
Jan Krebber ext-jan.krebber@nokia.com @krebbixux
Recommended