Download pdf - Introduction to the new Nokia Asha UI

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


The visualization changed, but the APIs remain compatible.

The screen is optimized for mobility, convenience and effectiveness.


Consider thumb usage. Make touch areas large enough.


Back-stepping is done via a dedicated hardware Back/Exit key.


The Swipe is reserved.


Use 25 px margin for gestures to be Swipe-safe.


Push notification lets people listen to your service if there is something new.


Your service

Nokia server

Category bar can have tabs or actions. Do not mix them.


Indicating selected items has been simplified.


The popup list has been simplified as well. Replace it with a list if necessary.


Square Fastlane icon is cut for you into Home’s icon.


Make sure custom components work with the light background.


Textual guidelines are simplified.


From Series 40 non-touch to Nokia Asha UI

Remove focus when porting from Series 40 non-touch.


No focus in a list (1). Highlight only in a picker (2).


Example: List no focus – Picker highlight.


Split non-touch Options menu into Options menu and Long-press menu.


Long-press menu items must be repeated in later views.


UX offering

There are LCDUI and LWUIT UI style guides.


There are UI stencils for Inkscape in addition to Adobe Illustrator.


Asha UI component demo application is a Java midlet suite for LCDUI.


Literature and links


• 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

http://www.developer.nokia.com/Resources/Library/Asha_UI/

http://www.developer.nokia.com/Resources/Library/Asha_UI/

http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/

http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/

https://projects.developer.nokia.com/asha_ui_component_demos

https://projects.developer.nokia.com/asha_ui_component_demos

Take home messages


The visualization changed, but the APIs remain compatible.

Back-stepping is done via a dedicated hardware Back/Exit key.


Category bar can have tabs or actions. Do not mix them.


Thanks to Sanna Hiukka and Stratos Kalogirou.

Thanks .

Jan Krebber [email protected] @krebbixux