The Android Experience

5,856 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.

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,856
On SlideShare
0
From Embeds
0
Number of Embeds
456
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide
  • \n
  • Soltanto oggi, dopo quasi 4 anni dal lancio della piattaforma, possiamo dire di avere una esperienza d’uso Android raffinata e di grande qualita’.\nTratti fortemente caratteristici, deisgneata adeguatamente e Paragonabile per qualita’ a quelle che hanno storicamente costituito lo stato\ndell’arte delle UX mobile moderna (iPhone, Windows Phone, WebOS)\n
  • \n
  • \n
  • \n
  • la mission di frog e’ guidare l’innovazione per il mondo connesso, progettando e disegnando i servizi e i prodotti del futuro.\nQueste sono alcune foto prese da progetti recenti. \n
  • Frog e’ distribuita su tutto il globo, e fornisce servizi di consulenza d’innovazione multidisciplinare: Design digitale ed industriale, consulenza strategica, tecnologia.Un ambito nel quale siamo molto forti e’ il mobile, che e’ anche il nostro focus principale.\n
  • \n
  • jjj\n
  • \n
  • \n
  • \n\nL’ergonomia della nostra mano \n\nquindi l’euristica più accreditata afferma che le toolbars e le barre di navigazione debbano trovarsi nella parte bassa dello schermo\n
  • \n
  • \n
  • \n
  • Non potendo quindi suddividere la navigazione in posizioni distinte, in molte applicazioni asi \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Modifiche delle guidelines android\nmodifica degli pattern attraverso delle contaminazioni con IOS (popover)\nreinterpretazione delle linee guida per assecondare le esigenze di navigazione\n
  • Esigenze di design\nprincipalmente legate all’architettura e modelli di navigazione \nsperimentazione di nuovi pattern, che si stanno affermando come standard\n\n
  • \n
  • \n
  • \n
  • SIGNATURE INTERACTIONS\n\nAndroid Widget library is fairly complete, most apps should get away with just styling those\nRemember the style.xml!\n\nCraft a “signature” element that sticks around in the user mind\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Soltanto oggi, dopo quasi 4 anni dal lancio della piattaforma, possiamo dire di avere una esperienza d’uso Android raffinata e di grande qualita’.\nTratti fortemente caratteristici, deisgneata adeguatamente e Paragonabile per qualita’ a quelle che hanno storicamente costituito lo stato\ndell’arte delle UX mobile moderna (iPhone, Windows Phone, WebOS)\n
  • \n
  • \n
  • 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.

    ×