UI design techniques forporting Android apps toSeries 40 full touch1               © Nokia 2012 Porting_Android_UI_design_...
OverviewOverview• Series 40 full touch and LCDUI framework basics• UI conversion from Android to Series 40 full touch• Tak...
DisclaimerPortions of this talk contains modifications or arereproduced based on work created and shared by theAndroid Ope...
This talk is referring to Android Jelly Beanstandard UI components.4   © Nokia 2012 Porting_Android_UI_design_to_Series_40...
AbbreviationsSeries 40 full touch  S40FTAndroid Jelly Bean or Android OS4.1  AJBInformation Architecture  IA5   © Nokia...
Series 40 full touch and             LCDUI framework basics6   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_to...
Series 40 are cost-optimized phones, yetwith smartphone-like experience.7   © Nokia 2012 Porting_Android_UI_design_to_Seri...
The compact phone is equipped with a 3’’screen and acceleration sensors.8   © Nokia 2012 Porting_Android_UI_design_to_Seri...
S40FT apps require only few changes to runon most Series 40 phones.       Nokia X3                                        ...
LCDUI is based on few view types.                                                                   Displayable           ...
Form is the most versatile view whenworking with readymade components.11   © Nokia 2012 Porting_Android_UI_design_to_Serie...
Lists were designed for basic selection.12   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-0...
Alerts display certain types of dialogs. Usealso form and popup list as a dialog.13   © Nokia 2012 Porting_Android_UI_desi...
Canvas allows to draw a full custom UI, butoffers also basic platform chrome.14   © Nokia 2012 Porting_Android_UI_design_t...
UI conversion from Android to           Series 40 full touch15    © Nokia 2012 Porting_Android_UI_design_to_Series_40_full...
Restyle your application according to thetarget platform style.16   © Nokia 2012 Porting_Android_UI_design_to_Series_40_fu...
S40FT requires a design for only one screensize.17   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2...
Basic chrome UI elements are very similarbetween AJB and S40FT                 3                           2              ...
The 48 dp rhyme is fine.                Android OS 4.1                                                                    ...
S40FT does not have home screen widgetsor system-wide notifications.                Android OS 4.1                        ...
Long press opens the context menu inS40FT and old Android OSs.     Android OS 4.1 (long press)                            ...
S40FT backstep is strictly hierarchical – thismight require a change in the IA.IA (Information Architecture)              ...
All tabs in AJB should be replaced by acategory bar in S40FT.                Android OS 4.1                               ...
Replace drawer and action bar spinner witha category bar – or with a new IA.                Android OS 4.1                ...
S40FT category bar is not inherited to thenext lower level – affecting the IA.IA (Information Architecture)25   © Nokia 20...
Do not add any new bars – neither inS40FT nor in AJB.                Android OS 4.1                                       ...
AJB action buttons can be moved to S40FToptions menu or content area.                Android OS 4.1                       ...
S40FT uses lists to present content, but nohorizontal swipe gesture.                                 Android OS 4.1       ...
AJB’s form spinner can be replaced withS40FT’s popup choice group.                Android OS 4.1                          ...
In S40FT buttons are only available in formor as custom component.     Android OS 4.1                                     ...
In S40FT the ”confirm” action is at the leftor at the top.               Android OS 4.1                                   ...
AJB switches require a choice group in aform or list layout in S40FT.               Android OS 4.1                        ...
Only AJB’s global progress indicators canbe replaced with gauge in form.               Android OS 4.1                     ...
S40FT dialogs are based on alert, form orpopup list and match AJB use cases.               Android OS 4.1                 ...
Custom designs for small screens are alsoeasy to transfer to S40FT.                                                       ...
Take home messages36   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Many AJB UI components will find a matchin S40FT.37   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx ...
Excessive use of bars and the backstepnavigation might require a new IA.IA (Information Architecture)38   © Nokia 2012 Por...
S40FT does not allow multi tasking.39   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan...
More on the topic:UX Library about Series 40 full touch:http://www.developer.nokia.com/Resources/Library/Full_Touch/UI Com...
Exercises41   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Exercise: How would you change thefollowing structure for S40FT?42   © Nokia 2012 Porting_Android_UI_design_to_Series_40_f...
Exercise: How do AJB and S40FT flowsdiffer from selecting multiple items?43   © Nokia 2012 Porting_Android_UI_design_to_Se...
Exercise: Which device has more pixels, theGalaxy Mini or Asha 311?Samsung Galaxy Mini S5570Nokia Asha 311 or 311044   © N...
Exercise: Are there any limitations in usingbuttons in S40FT?45   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full...
Exercise: What are the benefits of S40FTbackstep paradigm?46   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_to...
Thanks to:- Anne Kivimaa- Sanna Hiukka47   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 ...
Thanks ext-jan.krebber@nokia.com48   © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan K...
Upcoming SlideShare
Loading in...5
×

Porting Android UI design to Series 40 touch

3,325

Published on

Users of a mobile platform expect consistent behaviour from the various apps on their phones. When porting an application to a new platform, you need to know what the user expectations are and adapt your UI accordingly. You may also need to adapt the UI components you use or the ways in which you use them. UI components present on both platforms may behave differently on the two platforms, or some components on one platform may not be present on the other. This webinar will present techniques for adapting and optimising your Android application for Series 40 full touch. Like other Nokia Developer UX-related webinars, it will feature exercises and will receive follow-up treatment in a Nokia Developer Wiki article.

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
3,325
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
125
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide
  • Read the text: Portions of this talk contains modifications or is 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 point to Android developer library and android design library
  • Is referring to standard android components. Only to 4.1, since there were so many changes introduced in 3.0, 4.0 and 4.1 I am not going to cover those all.
  • Many people can afford – large market But people will only buy small items Long battery duration before charge Small in size, lightweight, easy to carry, always with you Could be kids first phone, so your first time impression of your company to new customers So you better make things right here – otherwise you might loose cusotmers for good But also limited resources available
  • So rather small screen, your thumb and fingers are still large But this nothing platform specific, these small screen sizes can also be found from other manufactures’ phones, (like android phones) No keypad, no softkeys, only screenlock, volume up/down, send/end key Acceleration sensors bring a new interaction style to Series 40 phones Not all dataplans support ”cheap” 2G and some users simply have no chance, or do not want to, connect via mobile network connection to your server Some screens are still resistive screens only – this means Not so good resolution Limited multi-touch capabillities
  • Once you have implemented for S40 full touch, only very limited work required to expand to S40 Touch & Type, and even to non-touch. However, there are significant changes, but most of them are taken care of by the components At least for T&T and Full touch there is always only one screen (240x320 T&T, and 240x400 FT), non touch has some more screens, also changes to lndscape. Only custom iplementations require some more attebtion, especially if you move from touch to non-touch
  • LCDUI is the standard for development applications for Nokia Series 40 phones Stability of APIs, only few changes over the years or very few addons for new platforms like full touch  there we got the category bar Wide range of phones included LCDUI is based on predefined screens or free-to-edit canvasses Screens can show - Forms - List - Alert - Text box Canvas can have chrome or you can paint the entire view if you want - LCDUI ensures Scalability - LCDUI has build in support for touch and Hardware keyboard devices – or hybrids like touch and type devices
  • Anyways flexible Canvas with custom item A form can contain all the different types of predefined items like shown here Gauge Date field Text field String item as button, hyperlik or just as text Popup choice group Exclusive choice group Multiple choice group You can add custom items, here in our example different types of buttons  please note, these buttons you have to create by yourself, but still, if you just miss a certain type of element in an otherwise ready form, it is possible to save time and just create this missing element instead of re-doing the entire form What you see here are are the visual representations of a full touch form. In touch and Type or non-touch there look different. They are optimized for the certain platform, so it is highly recommended to use the UI components wherever you can, since it saves you a lot of headache
  • Lists are quite simplebut they are just made for simple choices. - You can add a an icon or deine the list as radio button group or as a multiple choice list - Lists are a Core element in LCDUI However, if more functionality i needed, we have reference implementations available E.g. Lists do not support any additional function in AB#1
  • - The basic form of a dialog is an Alert. However, also alserts have predefined layouts and redefined functions which have to be maintained across the entire Series 40 range There are some limitations, e.g. The gauge is one or the problem that the Alert might not be able to listen to application events, like ”download finished”  in that case, you may want to use a Form instead In case you have different options than YES/CANCEL, i.e. Not truly oposite ones, e.g. Choose from a list of languages, there is a popup list available. It looks very similar to an alert, but it has onlylist elements and no buttons. Popup list can also have icons if wanted
  • Left image is full custom, so everything is drawn in the canvas The checkmark and the Back button are at their usual places where you would expect them from chrome On the right, the calendar is custom, but the navigation elements like the bars at the top and bottom are standard chrome elements which can be used in the canvas This is now just a very brief overview about series 40 Full touch UI, if you want to learn more, there are many many resources available. There are some links at the end of this webinar and you can download the slideset which also will contain the links
  • I will only talk about the conversion from Android OS 4.1 to Series 40 full touch
  • The first major problem we find from all our application reviews is If people do not restyle their app, they will run into trouble , no matter from whcih platform they are coming, and it basically doesn’t matter if they are converting to Series 40 or any other platform. But as soon as you are commited to use the certain platform style and as soon as you are aware of the platform special cases which makes it look and feel different from other platforms, you have made the first and most important step.  most things work out afterwards very easy and nicely But the biggest obstacle to overcome for many developers is to change the style according to a new platform, again, this is a universal problem and not tied to Series 40 Considering a user of a Series 40 full touch phone: they might not have a clue about how an Android app looks and how it’s used. They only know how their own phone works; and as it’s different from Android an Android app in their Series 40 full touch phone will feel very uncomfortable and strange. For example, if you port your app directly, without ANY changes to the UI: how does the user backstep? There is a physical Back key on Android phones but such is not part of Series 40 full touch phones.
  • The good news is that there are by far less screens for Series 40 than what you will find for Android If I would be a developer comeing from android, I would see this as a great benefit Besides - no Software fragmentation - only minor Hardware fragmentation - no Lack of software/hardware integration - No carriers making changes to the core OS - No security issues - No patent issues Add also other screens for other parts of series 40 - So, it is kind of more save and more covering to develop for Series 40 However, you should think of comparing the right thing, e.g. Small android devices with S40FT Samsung Galaxy Mini S5570 240 x 320 pixels, 3.14 inches popular among the android users Screens in Series 40 128 x 160 240 x 320 320 x 240 320 x 480
  • AJB – Action overflow --- S40FT options menu AJB – Action buttons --- S40FT action button #1  now if we copare the correct sizes, AJB phones with les than 320 dp width, have only 2 buttons in the action bar – one is usully used for action overflow so there is not too much of a difference App title for both, however, androud allows also an icon, FT does not AJB – (fixed) Tabs,  only three recommended usually only text --- S40FT category bar with up to 15 entries, uses icons only in the bar and icons + text in the category bar extension Back button is available for both platforms; AJB is now on the screen, whereas previous versions used HW back  Please note: the back button is on the left in AJB (was on the right in previous versions), whereas it is on the right in Series 40
  • The 48 dp (density independent pixels) rhyme is fine That one pixel of difference will not have any impact on the overall quality of your app  so if everything is custom designed in the 48 dp scheme, you can transfer it directly to S40FT
  • No notification drawer Not possible to put tasks to the backgtround No badge There is no chance to listen to anything in the background, like mails or so Design your app accordingly Your app will close as soon as the user is leaving it This is also the reason why nobody could biuld a screen grabber for Series 40 so far, since it would require multitasking
  • This pattern changed with Android 3.0. The long press gesture is now used to select data, combining contextual actions and selection management functions for selected data into a new element called the contextual action bar (CAB). What the later Android versions do (since 4.0) is to put the appliction into (multi) selection mode by long press Select all the items Confirm by selecting the action – in worst case the action is hidden in the menu What S40FT does and older Android OS (older than 4.0) did is to Long press and open item related menu (long press menu, context menu) Select the action Or multiselection in S40FT via view command Select command Select items Confirm selection Expected drawback of the android version: - Mixture of single selection and multiselection of items – the menus change dynamically according to the amount - Not sure if everybody is using this correctly. At least I see quite some postential to mess around with this
  • Clear structure in S40 easier to handle, makes it also easier to develop for Android allows 2 backstep paths – in worst Case you navigate to unexpected pages, e.g. I would expect that a good bunch of user will be surprised to see the video overview instead of the book overview – point is they do not have the UX map you have, they really have to learn this I S40FT User never comes to views which she has never seen before Simplify the architecture You cannot messup with flows
  • Android Jelly Bean uses Fixed tab Scrollable tab Series 40 full touch uses Category bar abd category bar extension easier to use especially than the srllable tab less interaction necessary no swipe, only button press to see more categories Allows text and icon in the category bar extension
  • Drawer is used to jump to views in your application. Category bar basically could do the same However, category bar is restricted to 15 items and the drawer can act as a list (without end) And you always should have an icon for the category bar – recommended at least otherwise it looks not so nice Category bar is only for views not for actions Action bar spinner many times used for filtering  so in this case it would be possible to use the category bar showing the same content but with different filters, like All Favourites New
  • No clear reference about this in Android documentation – at least I did not find any native app which would inherite the tab bar iOS apps like to use tabs where ever they can and without thinking – for them it is a quick link and featuring certain parts of the app  Android does this now with the drawer, so I guess the ”featuring of certain functions or pages” is not that much of an issue anymore for those who created an android app following the Jelly bean style But if an iOS app is ported to Android the tabs are ususally kept and shown everywhere However, not in S40FT – as soon as you drill down the category bar must disappear. You can use a new one if you like, but it should not be similar to the previous one, but relate only to the current view.
  • You should use just one bar in full touch. The category bar and that’s it A bit unfair this visualisation, because you see a rather large android phone (360x640 dp) vs a Series FT phone with only 240 x 240 (here in landscape orientation) - However, these apps exist But also in Android it seems that the amount of bars should be reduced, i.e. If possible AJB use only the action bar, maybe add a bottom bar, use a drawer and action overflow instead The same holds in S40FT, also here, you should try to use only the header bar and category bar only if it helps with the navigation, but not for the sake of having a category bar there
  • AB1 is also available AJB offers the action bar and the bottom bar to host e.g. 5 actions + the overflow icon If you just have few functions, you can use the action bar only However, if you have a small screen device, the action offers space only for one action and the overflow icon The same would be in S40FT, Options menu and the Action button one All the other actions go to the options menu Or you create a custom view where you place the icons by yourself in the content area. However, you should be prepared to reduce the functionality to the core features of your application when porting to smaller screen devices, no matter if Android or Series 40 or any other manufacturer  prepared means, check it and do it if necessary, not that you must do it
  • This is a nice example of Android using two navigation orientations. You can swipe left/right to move to the next/previous mail or up/down to read the content of the mail. However, so far the the swipe ”snaps” to each mail, no cinetict ”horizontal scrolling” so it could become laborious to read or browse a conversation Besides, if this navigation is used for more complex apps it easily becomes difficult to navigate – difficult also in terms of back Series 40 FT navigation is still based on lists Horizontal scrolling/swiping should not be used Only vertical scrolling is preferred It also reduces ”white space” areas
  • This is a typical example of a radio button group use, in this case dressed as ”Spinner” in AJB or as popup choicegroup in S40FT The function is exactly the same There are differences in the layout, but this ensures it works also with phones which have only a small display If there is the possiblity to have nothing selected, add an item ”no selection” – this holds for both platforms anyways 
  • Please note that Buttons are only available as Form item They are a StringItem, dressed up as a button This also means there is just one item in a row possible with standard UI components If you want something different, you have to create these yourslef Either as custom item in a Form Or custom item in a canvas Besides, alerts have buttons, but you cannot place them, they come automatically as soon as you define a button
  • In AJB the ”positive” continuation button is always located on the right In S40FT the ”positive” continuation is located either Bottom left (2 buttons) Or top center (3 buttons) - The 3 buttons are available due to legacy reasons, but proven very usefull in certain conditions, e.g. In case you want to offer more information befor the user draws a decision – one button could be ”help” (bottom left, in case of 3 buttons)
  • The switches always require a certain environment Either a list (the entire view than has the same item type) Or a form (there only a certain set of elements is grouped for switches) It is not possible to add radio buttons just like this somewhere – well except in a canvas No on/off switch in S40FT
  • Global pregress indicators are available Item specific indicators like you find them from AJB are not available in S40FT and would require a custom component S40FT has both progress indicators available indeterminate determinate
  • Most of the dialog types found from AJB can be replaced in Series 40 Full touch However, it is not always a ”real” overlay, but sometimes you have to use a form instead But form is versatile enough to be used as a dialog as well
  • Game: Frozen Bubble: UI look and feel remains the same Picassa
  • Touch area size/screen sizes are the same for small Android devices With Small screen android devices the form factor is similar to Series 40 FT High end android is not so likely to port directly to Series 40
  • Remember, there is no chance to listen to anything in the background, like mails or so Design your app accordingly Your app will close as soon as the user is leaving it This is also the reason why nobody could biuld a screen grabber for Series 40 so far, since it would require multitasking
  • Full touch contains Style guides, UI components and patterns Icon creation guidelines UX checklist Be UX examples about good and bad design Soon a section about game creation
  • Show two categories with 2 categories
  • AJB go to multiselection mode – define action S40FT define action – go to multiselection mode and confirm
  • Samsung Galaxy Mini S5570 240 x 320 pixels Nokia Asha 311 240 x 400 pixels
  • Only in Forms as text string Or custom item In Canvas as custom item
  • User will not see any surprises User will always know where she is in the application Backstepping is a ”no brainer” Remains a fast navigation anyways
  • Porting Android UI design to Series 40 touch

    1. 1. UI design techniques forporting Android apps toSeries 40 full touch1 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    2. 2. OverviewOverview• Series 40 full touch and LCDUI framework basics• UI conversion from Android to Series 40 full touch• Take home messages• Exercises2 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    3. 3. DisclaimerPortions of this talk contains modifications or arereproduced based on work created and shared by theAndroid Open Source Project and used according to termsdescribed in the Creative Commons 2.5 Attribution License.Links:http://developer.android.com/index.htmlhttp://developer.android.com/design/index.html3 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    4. 4. This talk is referring to Android Jelly Beanstandard UI components.4 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    5. 5. AbbreviationsSeries 40 full touch  S40FTAndroid Jelly Bean or Android OS4.1  AJBInformation Architecture  IA5 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    6. 6. Series 40 full touch and LCDUI framework basics6 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    7. 7. Series 40 are cost-optimized phones, yetwith smartphone-like experience.7 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    8. 8. 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
    9. 9. S40FT apps require only few changes to runon most Series 40 phones. Nokia X3 Nokia Asha 311 Nokia C2-009 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    10. 10. LCDUI is based on few view types. Displayable Screen Canvas Form List Alert Text box With chrome Full screen Implicit choice Exclusive choice Multiple choice Choice Date Text Gauge String Image Custom Spacer Group Field Field Item Item Item10 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    11. 11. Form is the most versatile view whenworking with readymade components.11 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    12. 12. Lists were designed for basic selection.12 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    13. 13. Alerts display certain types of dialogs. Usealso 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
    14. 14. Canvas allows to draw a full custom UI, butoffers also basic platform chrome.14 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    15. 15. UI conversion from Android to Series 40 full touch15 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    16. 16. Restyle your application according to thetarget platform style.16 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    17. 17. S40FT requires a design for only one screensize.17 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    18. 18. Basic chrome UI elements are very similarbetween AJB and S40FT 3 2 3 1 1 2 4 4 5 5 Android OS 4.1 Series 40 full touch18 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    19. 19. The 48 dp rhyme is fine. Android OS 4.1 Series 40 full touch19 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    20. 20. S40FT does not have home screen widgetsor system-wide notifications. Android OS 4.1 Series 40 full touch20 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    21. 21. Long press opens the context menu inS40FT and old Android OSs. Android OS 4.1 (long press) Series 40 full touch (long press)21 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    22. 22. S40FT backstep is strictly hierarchical – thismight require a change in the IA.IA (Information Architecture) Android OS 4.1 Series 40 full touch22 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    23. 23. All tabs in AJB should be replaced by acategory bar in S40FT. Android OS 4.1 Series 40 full touch23 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    24. 24. Replace drawer and action bar spinner witha category bar – or with a new IA. Android OS 4.1 Series 40 full touch24 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    25. 25. S40FT category bar is not inherited to thenext lower level – affecting the IA.IA (Information Architecture)25 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    26. 26. Do not add any new bars – neither inS40FT nor in AJB. Android OS 4.1 Series 40 full touch26 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    27. 27. AJB action buttons can be moved to S40FToptions menu or content area. Android OS 4.1 Series 40 full touch27 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    28. 28. S40FT uses lists to present content, but nohorizontal swipe gesture. Android OS 4.1 Series 40 full touch28 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    29. 29. AJB’s form spinner can be replaced withS40FT’s popup choice group. Android OS 4.1 Series 40 full touch29 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    30. 30. In S40FT buttons are only available in formor as custom component. Android OS 4.1 Series 40 full touch30 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    31. 31. In S40FT the ”confirm” action is at the leftor at the top. Android OS 4.1 Series 40 full touch31 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    32. 32. AJB switches require a choice group in aform or list layout in S40FT. Android OS 4.1 Series 40 full touch32 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    33. 33. Only AJB’s global progress indicators canbe replaced with gauge in form. Android OS 4.1 Series 40 full touch33 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    34. 34. S40FT dialogs are based on alert, form orpopup list and match AJB use cases. Android OS 4.1 Series 40 full touch34 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    35. 35. Custom designs for small screens are alsoeasy to transfer to S40FT. Android OS Series 40 full touch35 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    36. 36. Take home messages36 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    37. 37. Many AJB UI components will find a matchin S40FT.37 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    38. 38. Excessive use of bars and the backstepnavigation might require a new IA.IA (Information Architecture)38 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    39. 39. S40FT does not allow multi tasking.39 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    40. 40. 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/s40uivisualisationWiki article to this webinar:http://www.developer.nokia.com/Community/Wiki/Series_40_UI_design_port_from_Android_webinar_-_companion_articlePorting documentation:http://www.developer.nokia.com/Resources/Library/Porting_to_Series_40/#!porting-from-android-to-series-40/android-ui-to-s40.htmlPorting example ”Picasa viewer”:http://projects.developer.nokia.com/picasa_viewerPorting example “Frozen Bubble”:http://www.developer.nokia.com/Resources/Library/Porting_to_Series_40/#!porting-cases/porting-case-frozen-bubble.html40 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    41. 41. Exercises41 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    42. 42. Exercise: How would you change thefollowing structure for S40FT?42 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    43. 43. Exercise: How do AJB and S40FT flowsdiffer from selecting multiple items?43 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    44. 44. Exercise: Which device has more pixels, theGalaxy Mini or Asha 311?Samsung Galaxy Mini S5570Nokia Asha 311 or 311044 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    45. 45. Exercise: Are there any limitations in usingbuttons in S40FT?45 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    46. 46. Exercise: What are the benefits of S40FTbackstep paradigm?46 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    47. 47. Thanks to:- Anne Kivimaa- Sanna Hiukka47 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    48. 48. Thanks ext-jan.krebber@nokia.com48 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×