Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Microsoft Mobile Developer
Mehr von Microsoft Mobile Developer (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Porting Android UI design to Series 40 touch
- 1. UI design techniques for porting Android apps to Series 40 full touch 1 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 2. Overview Overview • Series 40 full touch and LCDUI framework basics • UI conversion from Android to Series 40 full touch • Take home messages • Exercises 2 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 3. 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 3 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 4. 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
- 5. Abbreviations Series 40 full touch S40FT Android Jelly Bean or Android OS4.1 AJB Information Architecture IA 5 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 6. 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
- 7. 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
- 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. S40FT apps require only few changes to run on most Series 40 phones. Nokia X3 Nokia Asha 311 Nokia C2-00 9 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 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 Item 10 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 11. 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
- 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. 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
- 14. 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
- 15. 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
- 16. 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
- 17. 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
- 18. Basic chrome UI elements are very similar between AJB and S40FT 3 2 3 1 1 2 4 4 5 5 Android OS 4.1 Series 40 full touch 18 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 19. The 48 dp rhyme is fine. Android OS 4.1 Series 40 full touch 19 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 20. S40FT does not have home screen widgets or system-wide notifications. Android OS 4.1 Series 40 full touch 20 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 21. Long press opens the context menu in S40FT 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. S40FT backstep is strictly hierarchical – this might require a change in the IA. IA (Information Architecture) Android OS 4.1 Series 40 full touch 22 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 23. All tabs in AJB should be replaced by a category bar in S40FT. Android OS 4.1 Series 40 full touch 23 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 24. Replace drawer and action bar spinner with a category bar – or with a new IA. Android OS 4.1 Series 40 full touch 24 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 25. S40FT category bar is not inherited to the next 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. Do not add any new bars – neither in S40FT nor in AJB. Android OS 4.1 Series 40 full touch 26 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 27. AJB action buttons can be moved to S40FT options menu or content area. Android OS 4.1 Series 40 full touch 27 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 28. S40FT uses lists to present content, but no horizontal swipe gesture. Android OS 4.1 Series 40 full touch 28 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 29. AJB’s form spinner can be replaced with S40FT’s popup choice group. Android OS 4.1 Series 40 full touch 29 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 30. In S40FT buttons are only available in form or as custom component. Android OS 4.1 Series 40 full touch 30 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 31. In S40FT the ”confirm” action is at the left or at the top. Android OS 4.1 Series 40 full touch 31 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 32. AJB switches require a choice group in a form or list layout in S40FT. Android OS 4.1 Series 40 full touch 32 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 33. Only AJB’s global progress indicators can be replaced with gauge in form. Android OS 4.1 Series 40 full touch 33 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 34. S40FT dialogs are based on alert, form or popup list and match AJB use cases. Android OS 4.1 Series 40 full touch 34 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 35. Custom designs for small screens are also easy to transfer to S40FT. Android OS Series 40 full touch 35 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 36. Take home messages 36 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 37. 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
- 38. Excessive use of bars and the backstep navigation 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. 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. 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_fro m_Android_webinar_-_companion_article Porting documentation: http://www.developer.nokia.com/Resources/Library/Porting_to_Series_40/#!port ing-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/#!port ing-cases/porting-case-frozen-bubble.html 40 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 41. Exercises 41 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 42. 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
- 43. 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
- 44. Exercise: Which device has more pixels, the Galaxy Mini or Asha 311? Samsung Galaxy Mini S5570 Nokia Asha 311 or 3110 44 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 45. 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
- 46. 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
- 47. Thanks to: - Anne Kivimaa - Sanna Hiukka 47 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
- 48. Thanks ext-jan.krebber@nokia.com 48 © Nokia 2012 Porting_Android_UI_design_to_Series_40_full_touch.pptx 2012-10-04 Jan Krebber
Hinweis der Redaktion
- 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