The Android Experience

6,073 views

Published on

A look at state of the art of Android user experience leveraging 4 key aspects analyzed both for design and technical point of view.

  • Be the first to comment

The Android Experience

  1. The Android Experience24/05/2012 Emanuele Di Saverio Guido Parlato
  2. intro ia signature gestures multitask wrap upAndroid evolved into a first-classdesign platform.Today we really have anAndroid ExperienceWhymca Mobile Developer Conference 2012
  3. intro ia signature gestures multitask wrap upWho?Guido ParlatoInteraction designer @Interaction Designer and Information Architectspecializing in the area of mobile and web interface. @higuiWhymca Mobile Developer Conference 2012 3
  4. intro ia signature gestures multitask wrap upWho?Emanuele Di SaverioSenior Design Technologist @Book Author @ http://www.androidavanzato.it(with Stefano Sanna @gerdavax) @hazamWhymca Mobile Developer Conference 2012 4
  5. frog overviewwhat we do
  6. frog drives innovationfor the connected world. 6
  7. A global team Seattle Amsterdam Kiev & Vinnitsa Boston Milano MunichSan Francisco New York Austin Shanghai Bangalore Johannesburg
  8. Android Journey
  9. Apr 09 Sep 09 Oct 09 May 10 Dec 10 Feb 11 Oct 11Over the hills and Far away
  10. http://d.android.com/designGoogle launched an up-to date, accurate and structured web repositoryfor guidelines about application design
  11. intro ia signature gestures multitask wrap upWith ICS has been developed anew system of design guidelines tocombine beauty, simplicity andpurpose to create an exceptionalexperienceWhymca Mobile Developer Conference 2012
  12. Rule of thumb The thumb has limited range and flexibility, only about a third of the screen is in truly effortless Frequently used buttons should occupy the bottom of the screen for easy tapping, while other controls should be nudged out of harms way Toolbars and navigation typically land at the bottom edge of phone interfacesWhymca Mobile Developer Conference 2012 12
  13. Rule of thumb Stacking controls in a touch interface should always be avoided, especially at screen bottom For Android, app navigation and controls should float to the top Foursquare FoursquareWhymca Mobile Developer Conference 2012 13
  14. Rule of thumb It is not just a matter of thumb comfort, but also that fingers obscure the screen. The bottom is where hovering hands are least likely to cover contentWhymca Mobile Developer Conference 2012 14
  15. Rule of thumb It is not just a matter of thumb comfort, but also that fingers obscure the screen. The bottom is where hovering hands are least likely to cover contentWhymca Mobile Developer Conference 2012 14
  16. Rule of thumb It is not just a matter of thumb comfort, but also that fingers obscure the screen. The bottom is where hovering hands are least likely to cover contentWhymca Mobile Developer Conference 2012 14
  17. intro ia signature gestures multitask wrap upAlmost 6 months ago Action bar Main navigation Filter bar Search bar Filter barWhymca Mobile Developer Conference 2012 15
  18. intro ia signature gestures multitask wrap upFoursquare FoursquareBefore ICS release After ICS release Whymca Mobile Developer Conference 2012 16
  19. intro ia signature gestures multitask wrap upFoursquare FoursquareBefore ICS release After ICS release Whymca Mobile Developer Conference 2012 16
  20. intro ia signature gestures multitask wrap upFoursquare FoursquareBefore ICS release After ICS release Whymca Mobile Developer Conference 2012 16
  21. intro ia signature gestures multitask wrap upActionBar• Navigation (tabs and drop down)• Up button• Action items• Option menu• Split action bar (contextualized action items)Whymca Mobile Developer Conference 2012 17
  22. intro ia signature gestures multitask wrap up“The Action Bar is arguably themost important structural elementof an Android app.” Android Design siteWhymca Mobile Developer Conference 2012
  23. intro ia signature gestures multitask wrap upGood boyyou can build neat UI following the rules TED TED ConferencesWhymca Mobile Developer Conference 2012 19
  24. intro ia signature gestures multitask wrap upGood boy Pocketyou can build neat UI following the rules Read It LaterWhymca Mobile Developer Conference 2012 20
  25. intro ia signature gestures multitask wrap upso effective to be ported into iOS applicationsWhymca Mobile Developer Conference 2012 21
  26. intro ia signature gestures multitask wrap upStyle out Action BarAndroid has powerful stylingDecoupling is good but, every decoupling brings one level on indirectnessStyling is a matter of doc research (sometimes source code)Small projects like Action Bar Style Generator can save days of research!http://jeffgilfelt.com/Whymca Mobile Developer Conference 2012 22
  27. intro ia signature gestures multitask wrap up Style out Action Bar <resources> <style name="Theme.example" parent="android:style/Theme.Holo.Light"> <item name="android:selectableItemBackground">@drawable/selectable_background_example</item> <item name="android:popupMenuStyle">@style/example_PopupMenu</item> <item name="android:dropDownListViewStyle">@style/example_DropDownListView</item> <item name="android:actionBarTabStyle">@style/example_ActionBarTabStyle</item> <item name="android:actionDropDownStyle">@style/example_DropDownNav</item> <item name="android:actionBarStyle">@style/example_ActionBar</item> </style> <style name="example_ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar"> <item name="android:background">@drawable/ab_solid_example</item> <item name="android:backgroundStacked">@drawable/ab_stacked_solid_example</item> <item name="android:backgroundSplit">@drawable/ab_bottom_solid_example</item> </style> <style name="example_PopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow"> <item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item> </style> <style name="example_DropDownListView" parent="android:style/Widget.Holo.ListView.DropDown"> <item name="android:listSelector">@drawable/selectable_background_example</item> </style> <style name="example_ActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabView"> <item name="android:background">@drawable/tab_indicator_ab_example</item> </style> <style name="example_DropDownNav" parent="android:style/Widget.Holo.Light.Spinner"> <item name="android:background">@drawable/spinner_background_ab_example</item> <item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item> <item name="android:dropDownSelector">@drawable/selectable_background_example</item> </style></resources> Whymca Mobile Developer Conference 2012 23
  28. intro ia signature gestures multitask wrap upGet in ControlActionBar standard support does a lot of stuff, more importantlydoes a lot of device-adaptive, platform compliant stuff.It’s possible to take complete control and build a custom title bar,or do whatever.Weigh your options! Build it + Scale it + Update it = $$$Whymca Mobile Developer Conference 2012 24
  29. intro ia signature gestures multitask wrap up Bad Boy Twist the Action Bar to give personalityAstrid Task Flud NewsAstrid Inc. Flud 25 Whymca Mobile Developer Conference 2012
  30. intro ia signature gestures multitask wrap up Bad Boy Twist the Action Bar to give personalityFancy KaleidoscopeThingd Inporia Inc Whymca Mobile Developer Conference 2012 26
  31. intro ia signature gestures multitask wrap upGet in ControlrequestWindowFeature(Window.FEATURE_NO_TITLE);getActionBar().hide();better yet is to set it up on the app theme <style name="Theme.MyApp" parent="android:Theme.Holo.Light"> <item name="android:windowNoTitle">false</item> </style>At the beginning of each layout <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/app_bkg"> <include layout="@layout/header_layout" /> ...Whymca Mobile Developer Conference 2012 27
  32. Signature Element
  33. intro ia signature gestures multitask wrap up“Creating an identity for your appgoes beyond the action bar.Your app communicates its identity throughits data, the way that data is arranged, andhow people interact with it. ” Android Design site Whymca Mobile Developer Conference 2012
  34. intro ia signature gestures multitask wrap upFoodspotting SkitchFoodspotting Evernote Corp. Whymca Mobile Developer Conference 2012 30
  35. intro ia signature gestures multitask wrap up A Custom View public class CustomView extends View { private Paint mPaint; private RectF mRect; public CustomView(Context context, AttributeSet attrs) { super(context, attrs); mPaint = new Paint(); mPaint.setAntiAlias(true); mRect = new RectF(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension( MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); final Paint paint = mPaint; paint.setStyle(Style.FILL); paint.setColor(Color.RED); final RectF oval = mRect; oval.left = 0; oval.right = getWidth(); oval.top = 0; oval.bottom = getHeight(); canvas.drawArc(mRect, 0, 90, true, paint); }} Whymca Mobile Developer Conference 2012 31
  36. intro ia signature gestures multitask wrap up A Custom Animation private float delta = 0; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); final Paint paint = mPaint; paint.setStyle(Style.FILL); paint.setColor(Color.RED); final RectF oval = mRect; oval.left = 0; oval.right = getWidth(); oval.top = 0; oval.bottom = getHeight(); canvas.drawArc(mRect, 0 + delta, 90, true, paint); } @Override public void onClick(View v) { ValueAnimator va = ValueAnimator.ofFloat(0, 360).setDuration(2000); delta = 0; va.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { delta = (Float) animation.getAnimatedValue(); invalidate(); } }); va.setInterpolator(new DecelerateInterpolator()); va.start(); invalidate(); Whymca Mobile Developer Conference 2012 32
  37. Wide GesturesUnleash your finger
  38. intro ia signature gestures multitask wrap up ICS and swipes IceCreamSandwich uses and sponsors simple gestural control to quickly navigate between detail views or tabs Swipe is a simple way to express “move away” intent Easier than clicking somewhere - target area is whole screen (Fitt’s Law) Easier than free scrolling - the content is paged (Hick’s Law)Whymca Mobile Developer Conference 2012 34
  39. intro ia signature gestures multitask wrap upWhymca Mobile Developer Conference 2012 35
  40. intro ia signature gestures multitask wrap upSwipe made easyHistorically, Android developers had an hard time with thisScrolling, inertias, bounce, attraction, paging(and android.widget.Gallery  is not apt for the purpose)Lots of efforts from the community, only few high-quality ones • Google’s ViewPager  +  (Jake Wharton’s ViewPagerIndicators) • Cyril Mottier’s PagedViewViewPager  Included in Compatibility Package v4 and v13http://goo.gl/JRqfCWhymca Mobile Developer Conference 2012 36
  41. intro ia signature gestures multitask wrap upDIY: a shortcutOpening activities with swipeAn easy way to be faithful to the Design Guidelines withoutsweating too much is detach animation from gestures SwipeDetector component that detects a discrete UP/DOWN/RIGHT/LEFT + Context.startActivity(Intent  i); Context.overridePendingTransition(R.anim.swipe_i n,  0);Whymca Mobile Developer Conference 2012 37
  42. intro ia signature gestures multitask wrap upSwipeDetector public class SwipeDetector implements View.OnTouchListener { .... case MotionEvent.ACTION_DOWN: downX = event.getX(); downY = event.getY(); downT = event.getEventTime(); return true; case MotionEvent.ACTION_UP: if (mListener == null || event.getEventTime() - downT > 1000) return false; final float deltaX = downX - event.getX(); final float deltaY = downY - event.getY(); // swipe vertical? if (Math.abs(deltaY) > yThreshold && Math.abs(deltaX) < whoKnowsThreshold) { // top or down if (deltaY < 0) { mListener.onSwipeDown(); } else { mListener.onSwipeUp(); } return true; }Whymca Mobile Developer Conference 2012 38
  43. intro ia signature gestures multitask wrap up Oldies but goldiesJake Wharton’s DirectionalViewPager SlidingDrawer Whymca Mobile Developer Conference 2012 39
  44. Prepare to multi-task(seriously)
  45. intro ia signature gestures multitask wrap up Android lets people combine applications into new workflows through multitasking, notifications, and sharing across apps.Whymca Mobile Developer Conference 2012 41
  46. Whymca Mobile Developer Conference 2012 X
  47. intro ia signature gestures multitask wrap upMulti-tasking++Android has always been characterized by theability to keep multiple app running at once.Even if not really running, system componentsare “paused” resumed, stopped and restarted ,whenever the system feels like.“All apps running at the same time”Whymca Mobile Developer Conference 2012 42
  48. intro ia signature gestures multitask wrap upDo your homeworkActivities should save and restore their status:Activity.onSaveInstanceState(Bundle  b);                                Activity.onRestoreInstanceState(Bundle  b);Views should use:Parcelable  View.onSaveInstanceState();                                            View.onRestoreInstanceState(Parcelable  state);When changing configuration (device rotation):Activity.onRetainNonConfigurationInstance()                                  Activity.getLastNonConfigurationInstance()  are deprecated! Use Fragment.setRetainInstance()Whymca Mobile Developer Conference 2012 43
  49. intro ia signature gestures multitask wrap upFragment (ation?)Lifecycle-aware modularization of UI chunkshttp://slidesha.re/iHxTqOWhymca Mobile Developer Conference 2012 44
  50. intro ia signature gestures multitask wrap up1. It’s a lifecycle concept: don’t use it like an <include  />!2. getLastNonConfigurationInstance() is deprecated setRetainInstance()3. cannot be nested!4. in/out animation and back stack together don’t work5. you can use fragments in ViewPager6. onCreateDialog() is deprecated android.app.DialogFragment7. only viable option is with Android Compatibility library Fragment API is fragmented (???)Whymca Mobile Developer Conference 2012 45
  51. Floating windowsEnhancing multitasking
  52. intro ia signature gestures multitask wrap up AirCalc MBFGWhymca Mobile Developer Conference 2012 47
  53. OverSkreen MBFGWhymca Mobile Developer Conference 2012 X
  54. intro ia signature gestures multitask wrap upOverlaysThe key to implement floating, always on top views is exploitingoverlays, through the usage of WindowManager system serviceAndroid displays views on different layers (+15 layer types)Application usually manage a Window.TYPE_APPLICATIONExamples of other window types:Status Bar, Application Dialog, System Dialog, IMEWhymca Mobile Developer Conference 2012 48
  55. intro ia signature gestures multitask wrap up public class FloatingButtonService extends Service { public void onCreate() { super.onCreate(); mButton = new Button(this); mButton.setText("Forever Here"); mButton.setOnTouchListener(new OnTouchListener() { ...something... }); WindowManager.LayoutParams params = new WindowManager.LayoutParams( WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.TYPE_SYSTEM_ALERT, LayoutParams.FLAG_NOT_FOCUSABLE | LayoutParams.FLAG_NOT_TOUCH_MODAL, PixelFormat.TRANSLUCENT); params.gravity = Gravity.CENTER; mWm = (WindowManager) getSystemService(WINDOW_SERVICE); mWm.addView(mButton, params); } public void onDestroy() { mWm.removeView(mButton); super.onDestroy(); }Intent serv = new Intent(this, <uses-permission android:name= FloatingButtonService.class); "android.permission.SYSTEM_ALERT_WINDOW" />startService(serv); Whymca Mobile Developer Conference 2012 49
  56. And so what?
  57. intro ia signature gestures multitask wrap upAndroid is the service designplatform.Capabilities are limitlessHeadaches are limitlessStep your game up.Whymca Mobile Developer Conference 2012
  58. intro ia signature gestures multitask wrap upLinkshttp://d.android.com/designhttp://code.google.com/p/androidavanzato/http://slidesha.re/GSalF6 - @gerdavax on NFChttp://www.frogdesign.comWhymca Mobile Developer Conference 2012 52
  59. Emanuele Di Saverio emanuele.disaverio@gmail.com @hazam Guido Parlato guido@higui.it @higui© 2011 frog. All rights reserved.

×