Download - 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
3 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
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.
4 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Abbreviations
5 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Series 40 full touch S40FT Android Jelly Bean or Android OS4.1 AJB Information Architecture IA
Series 40 full touch and LCDUI framework basics
6 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Series 40 are cost-optimized phones, yet with smartphone-like experience.
7 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
The compact phone is equipped with a 3’’ screen and acceleration sensors.
8 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
S40FT apps require only few changes to run on most Series 40 phones.
9 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Nokia X3 Nokia Asha 311 Nokia C2-00
LCDUI is based on few view types.
10 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
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.
11 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Lists were designed for basic selection.
12 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Alerts display certain types of dialogs. Use also form and popup list as a dialog.
13 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Canvas allows to draw a full custom UI, but offers also basic platform chrome.
14 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
UI conversion from Android to Series 40 full touch
15 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Restyle your application according to the target platform style.
16 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
S40FT requires a design for only one screen size.
17 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Basic chrome UI elements are very similar between AJB and S40FT
18 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
1 1
2
2
5 5
4
4
3 3
Android OS 4.1 Series 40 full touch
The 48 dp rhyme is fine.
19 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
S40FT does not have home screen widgets or system-wide notifications.
20 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
Long press opens the context menu in S40FT and old Android OSs.
21 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
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.
22 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
IA (Information Architecture)
Android OS 4.1 Series 40 full touch
All tabs in AJB should be replaced by a category bar in S40FT.
23 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
Replace drawer and action bar spinner with a category bar – or with a new IA.
24 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
S40FT category bar is not inherited to the next lower level – affecting the IA.
25 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
IA (Information Architecture)
Do not add any new bars – neither in S40FT nor in AJB.
26 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
AJB action buttons can be moved to S40FT options menu or content area.
27 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
S40FT uses lists to present content, but no horizontal swipe gesture.
28 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
AJB’s form spinner can be replaced with S40FT’s popup choice group.
29 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
In S40FT buttons are only available in form or as custom component.
30 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
In S40FT the ”confirm” action is at the left or at the top.
31 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
AJB switches require a choice group in a form or list layout in S40FT.
32 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
Only AJB’s global progress indicators can be replaced with gauge in form.
33 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
S40FT dialogs are based on alert, form or popup list and match AJB use cases.
34 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Android OS 4.1 Series 40 full touch
Custom designs for small screens are also easy to transfer to S40FT.
35 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Andr
oid
OS
Serie
s 40
full
touc
h
Take home messages
36 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Many AJB UI components will find a match in S40FT.
37 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Excessive use of bars and the backstep navigation might require a new IA.
38 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
IA (Information Architecture)
S40FT does not allow multi tasking.
39 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
More on the topic:
40 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
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
41 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Exercise: How would you change the following structure for S40FT?
42 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Exercise: How do AJB and S40FT flows differ from selecting multiple items?
43 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Exercise: Which device has more pixels, the Galaxy Mini or Asha 311?
44 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Samsung Galaxy Mini S5570 Nokia Asha 311 or 3110
Exercise: Are there any limitations in using buttons in S40FT?
45 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Exercise: What are the benefits of S40FT backstep paradigm?
46 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Thanks to: - Anne Kivimaa - Sanna Hiukka
47 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Thanks [email protected]
48 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber