porting android ui design to series 40 touch

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

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

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

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

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.

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

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 ext-jan.krebber@nokia.com

porting android ui design to series 40 touch

developer nokia

touch1 nokia

nokia c2

touch22 nokia

touch18 nokia

touch19 nokia

touch20 nokia

touch23 nokia

Technology

porting your favourite cmdline tool to android

android ui design -...

q4.11: porting android to new platforms

porting android application from arm to x86

porting android onto risc-v

moforte android porting experience · 2014. 10. 12. ·...

android os porting: introduction

an11690 - nxpnci android porting guidelines · an11690 nxp...

android porting to beagleboard

pulse news: porting android app to tablet

porting ios and android applications to tizen

android ui techniques

android os porting r3 090624233419 phpapp01

android ui dialog

android device porting walkthrough · - ... android device...

android ui patterns

an11690 - nxpnci android porting guidelinesnxp nci android...

android ui layout

android ui optimisation

android android-ui-design-patterns