Porting Android UI design to Series 40 touch

1

UI design techniques for porting Android apps to Series 40 full touch

© Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber

Overview

2 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber

Overview • Series 40 full touch and LCDUI framework basics • UI conversion from Android to Series 40 full touch • Take home messages • Exercises

Disclaimer


Portions of this talk contains modifications or are reproduced based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. Links: http://developer.android.com/index.html http://developer.android.com/design/index.html

http://code.google.com/policies.html

http://code.google.com/policies.html

http://creativecommons.org/licenses/by/2.5/

http://developer.android.com/index.html

http://developer.android.com/design/index.html



This talk is referring to Android Jelly Bean standard UI components.


Abbreviations


Series 40 full touch S40FT Android Jelly Bean or Android OS4.1 AJB Information Architecture IA

Series 40 full touch and LCDUI framework basics


Series 40 are cost-optimized phones, yet with smartphone-like experience.


The compact phone is equipped with a 3’’ screen and acceleration sensors.


S40FT apps require only few changes to run on most Series 40 phones.


Nokia X3 Nokia Asha 311 Nokia C2-00

LCDUI is based on few view types.


Displayable

Screen Canvas

With chrome Full screen Form List Alert Text box

Choice Group

Date Field

Text Field

Gauge

String Item

Image Item

Custom Item

Spacer

Implicit choice Exclusive choice Multiple choice

Form is the most versatile view when working with readymade components.


Lists were designed for basic selection.


Alerts display certain types of dialogs. Use also form and popup list as a dialog.


Canvas allows to draw a full custom UI, but offers also basic platform chrome.


UI conversion from Android to Series 40 full touch


Restyle your application according to the target platform style.


S40FT requires a design for only one screen size.


Basic chrome UI elements are very similar between AJB and S40FT


1 1

2

2

5 5

4

4

3 3

Android OS 4.1 Series 40 full touch

The 48 dp rhyme is fine.



S40FT does not have home screen widgets or system-wide notifications.



Long press opens the context menu in S40FT and old Android OSs.


Android OS 4.1 (long press) Series 40 full touch (long press)

S40FT backstep is strictly hierarchical – this might require a change in the IA.


IA (Information Architecture)


All tabs in AJB should be replaced by a category bar in S40FT.



Replace drawer and action bar spinner with a category bar – or with a new IA.



S40FT category bar is not inherited to the next lower level – affecting the IA.



Do not add any new bars – neither in S40FT nor in AJB.



AJB action buttons can be moved to S40FT options menu or content area.



S40FT uses lists to present content, but no horizontal swipe gesture.



AJB’s form spinner can be replaced with S40FT’s popup choice group.



In S40FT buttons are only available in form or as custom component.



In S40FT the ”confirm” action is at the left or at the top.



AJB switches require a choice group in a form or list layout in S40FT.



Only AJB’s global progress indicators can be replaced with gauge in form.



S40FT dialogs are based on alert, form or popup list and match AJB use cases.



Custom designs for small screens are also easy to transfer to S40FT.


Andr

oid

OS

Serie

s 40

full

touc

h

Take home messages


Many AJB UI components will find a match in S40FT.


Excessive use of bars and the backstep navigation might require a new IA.



S40FT does not allow multi tasking.


More on the topic:


UX Library about Series 40 full touch: http://www.developer.nokia.com/Resources/Library/Full_Touch/ UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation Wiki article to this webinar: http://www.developer.nokia.com/Community/Wiki/Series_40_UI_design_port_from_Android_webinar_-_companion_article Porting documentation: http://www.developer.nokia.com/Resources/Library/Porting_to_Series_40/#!porting-from-android-to-series-40/android-ui-to-s40.html Porting example ”Picasa viewer”: http://projects.developer.nokia.com/picasa_viewer Porting example “Frozen Bubble”: http://www.developer.nokia.com/Resources/Library/Porting_to_Series_40/#!porting-cases/porting-case-frozen-bubble.html

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

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

http://www.developer.nokia.com/Community/Wiki/Series_40_UI_design_port_from_Android_webinar_-_companion_article

http://www.developer.nokia.com/Community/Wiki/Series_40_UI_design_port_from_Android_webinar_-_companion_article

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


http://projects.developer.nokia.com/picasa_viewer

http://projects.developer.nokia.com/picasa_viewer












Exercises


Exercise: How would you change the following structure for S40FT?


Exercise: How do AJB and S40FT flows differ from selecting multiple items?


Exercise: Which device has more pixels, the Galaxy Mini or Asha 311?


Samsung Galaxy Mini S5570 Nokia Asha 311 or 3110

Exercise: Are there any limitations in using buttons in S40FT?


Exercise: What are the benefits of S40FT backstep paradigm?


Thanks to: - Anne Kivimaa - Sanna Hiukka


Thanks [email protected]


Porting Android UI design to Series 40 touch

Technology

Transcript of Porting Android UI design to Series 40 touch