Introduction to the new Nokia Asha UI
-
Upload
microsoft-mobile-developer -
Category
Technology
-
view
2.151 -
download
6
description
Transcript of 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
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 [email protected] @krebbixux