Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UI Design Patterns & Best Practices Mike Wolfson July 22, 2010
Best Practices – Why? <ul><li>Important to ensure your App follows the established UI guidelines, and performs well </li><...
Avoid the Jank <ul><li>This occurs when the system locks out user input </li></ul><ul><li>-Makes the app feel sluggish </l...
Force Close <ul><li>If triggered: </li></ul>
What happens next? <ul><li>User hits FC button majority of the time. </li></ul><ul><li>- Goes away annoyed. </li></ul><ul>...
Single Threading Model <ul><li>Android applications normally run entirely on a single (i.e. main) thread. </li></ul><ul><l...
Android Threading Rules <ul><li>Cardinal rules of Android UI: </li></ul><ul><li>Do not block the UI thread </li></ul><ul><...
Avoid FC and Jank –  accessing UI thread manually <ul><li>Android offers several ways to access the UI thread from other t...
AsyncTask <ul><li>Goal of AsyncTask is to take care of thread management for you. </li></ul><ul><li>private class Download...
IntentService <ul><li>“ Set it and forget it” – places request on Service Queue, which handles action (and “may take as lo...
Tips to keep your app “snappy” <ul><li>If your application is doing work in the background, show the user progress is bein...
Design patterns <ul><li>Patterns describe a general solution to a common problem </li></ul><ul><li>-Natural by-product of ...
Contacts Sync/ Quick Contact  <ul><li>Sync your app with Android  </li></ul><ul><li>contacts </li></ul><ul><li>-do this at...
Dashboard <ul><li>Navigation center for important actions </li></ul><ul><li>Highlight only most important/commonly  </li><...
Action Bar <ul><li>Dedicated real estate at top of screen  </li></ul><ul><li>to support navigation, and  </li></ul><ul><li...
Companion Widget <ul><li>Supports the app by displaying its content on the home screen </li></ul><ul><li>Only use to provi...
QuickAction <ul><li>Popup triggered from distinct visual  </li></ul><ul><li>target </li></ul><ul><li>Minimally disruptive ...
Conclusion <ul><li>Avoid the Jank (make sure your application is responsive) </li></ul><ul><li>- Don’t block the UI thread...
Upcoming SlideShare
Loading in …5
×

Android UI Design Patterns & Best Practices

81,272 views

Published on

Presentation discussing Android Design Patterns, and Best Practices.

Published in: Technology

Android UI Design Patterns & Best Practices

  1. 1. UI Design Patterns & Best Practices Mike Wolfson July 22, 2010
  2. 2. Best Practices – Why? <ul><li>Important to ensure your App follows the established UI guidelines, and performs well </li></ul><ul><li>-Otherwise, you will get bad reviews, and not be successful </li></ul><ul><li>-Apps that follow common design standards, will “fit” better in the Android ecosystem, and rise to the top </li></ul><ul><li>Read the UI design guidelines! http://developer.android.com/guide/practices/ui_guidelines/index.html </li></ul>
  3. 3. Avoid the Jank <ul><li>This occurs when the system locks out user input </li></ul><ul><li>-Makes the app feel sluggish </li></ul><ul><li>-Annoys the user </li></ul><ul><li>100 to 200ms is the threshold beyond which users will perceive lag (or lack of &quot;snappiness,&quot; if you will) </li></ul><ul><li>Android System Monitors: </li></ul><ul><li>- No response to an input event - 5 sec </li></ul><ul><li>- BroadcastReceiver hasn't finished executing - 10 sec </li></ul><ul><li>Resource: http://code.google.com/events/io/2010/sessions/writing-zippy-android-apps.html </li></ul>
  4. 4. Force Close <ul><li>If triggered: </li></ul>
  5. 5. What happens next? <ul><li>User hits FC button majority of the time. </li></ul><ul><li>- Goes away annoyed. </li></ul><ul><li>- Leaves Bad Market reviews </li></ul><ul><li>- Complex memory structures will </li></ul><ul><li>need to be recreated (if user even </li></ul><ul><li>decides to return to app) </li></ul><ul><li>-Non-synced data is lost </li></ul><ul><li> ” This App Sux, Force Closes, 1 star ” </li></ul><ul><li>“ Doesn’t work, uninstall” </li></ul>
  6. 6. Single Threading Model <ul><li>Android applications normally run entirely on a single (i.e. main) thread. </li></ul><ul><li>-This includes the drawing events </li></ul><ul><li>-This means, if system is blocked on an operation, the UI thread is blocked (and app is frozen) </li></ul><ul><li>Android UI toolkit is not thread-safe and must always be manipulated on the UI thread. </li></ul><ul><li>Potentially long running operations (ie. network or database operations, expensive calculations, etc.) should be done in a child thread </li></ul>
  7. 7. Android Threading Rules <ul><li>Cardinal rules of Android UI: </li></ul><ul><li>Do not block the UI thread </li></ul><ul><li>Make sure the Android UI toolkit is only accessed on the UI thread. </li></ul>
  8. 8. Avoid FC and Jank – accessing UI thread manually <ul><li>Android offers several ways to access the UI thread from other threads:    * Activity.runOnUiThread(Runnable)    * View.post(Runnable)    * View.postDelayed(Runnable, long)    * Handler </li></ul><ul><li>Problem: </li></ul><ul><li>-manually handling threads is error prone, and difficult </li></ul>
  9. 9. AsyncTask <ul><li>Goal of AsyncTask is to take care of thread management for you. </li></ul><ul><li>private class DownloadImageTask extends AsyncTask {     protected Bitmap doInBackground(String... urls) {         return loadImageFromNetwork(urls[0]);     }     protected void onPostExecute(Bitmap result) {         mImageView.setImageBitmap(result); </li></ul><ul><li>Resources: (read source code in: ShelvesActivity.java and read the docs! http://developer.android.com/reference/android/os/AsyncTask.html ) </li></ul>
  10. 10. IntentService <ul><li>“ Set it and forget it” – places request on Service Queue, which handles action (and “may take as long as necessary”) </li></ul><ul><li>public class UpdateService extends IntentService { public class UpdateService extends IntentService { </li></ul><ul><li>To call: </li></ul><ul><li>Intent selectIntent = new Intent(this, UpdateService.class);         selectIntent.putExtra(&quot;userAction&quot;, </li></ul>
  11. 11. Tips to keep your app “snappy” <ul><li>If your application is doing work in the background, show the user progress is being made </li></ul><ul><li>- AsyncTask.getStatus() </li></ul><ul><li>For games specifically, do complex computations in child thread </li></ul><ul><li>If your app has time-consuming startup, offer a splash screen quickly, then fill in information as it is ready </li></ul><ul><li>-inform user about progress </li></ul><ul><li>For data sync, database queries, and other long running </li></ul><ul><li>processes - use IntentService </li></ul>
  12. 12. Design patterns <ul><li>Patterns describe a general solution to a common problem </li></ul><ul><li>-Natural by-product of software design lifecycle </li></ul><ul><li>Google created these patterns to establish a common UI language </li></ul><ul><li>-following them ensures your app “fits” into the Android ecosystem </li></ul><ul><li>-apps will feel more integrated, and natural to the user </li></ul><ul><li>Android patterns are designed to follow the natural way to </li></ul><ul><li>navigate the web </li></ul>
  13. 13. Contacts Sync/ Quick Contact <ul><li>Sync your app with Android </li></ul><ul><li>contacts </li></ul><ul><li>-do this at startup (first time </li></ul><ul><li>user runs app) </li></ul><ul><li>Make use of “QuickContact“ </li></ul><ul><li>-deeper integration of app </li></ul><ul><li>with phone contacts </li></ul>
  14. 14. Dashboard <ul><li>Navigation center for important actions </li></ul><ul><li>Highlight only most important/commonly </li></ul><ul><li>used capabilities of application </li></ul><ul><li>Expose new content to user </li></ul><ul><li>Use this as a place to: </li></ul><ul><li>-enhance brand </li></ul><ul><li>-engage user </li></ul><ul><li>-centralize navigation </li></ul><ul><li>Make it fun! </li></ul>
  15. 15. Action Bar <ul><li>Dedicated real estate at top of screen </li></ul><ul><li>to support navigation, and </li></ul><ul><li>frequently used operations </li></ul><ul><li>Replaces Title Bar </li></ul><ul><li>Do use to bring key actions to front </li></ul><ul><li>Do use to convey sense of place </li></ul><ul><li>Make consistent between activities </li></ul><ul><li>-Don’t use for contextual actions </li></ul><ul><li>Provide link to home (dashboard) </li></ul>
  16. 16. Companion Widget <ul><li>Supports the app by displaying its content on the home screen </li></ul><ul><li>Only use to provide extra value -not just a simple link to start your application </li></ul><ul><li>Do handoff to app for detailed </li></ul><ul><li>views or complicated tasks </li></ul><ul><li>Be space efficient </li></ul><ul><li>-keep your widget small </li></ul>
  17. 17. QuickAction <ul><li>Popup triggered from distinct visual </li></ul><ul><li>target </li></ul><ul><li>Minimally disruptive to screen context </li></ul><ul><li>Straightforward, Fast and Fun </li></ul><ul><li>Present only most important actions </li></ul><ul><li>Use when item doesn’t have meaningful </li></ul><ul><li>detail view </li></ul><ul><li>Don’t use in contexts that support </li></ul><ul><li>multiple selection </li></ul><ul><li>Resource: http://code.google.com/p/simple-quickactions/ </li></ul>
  18. 18. Conclusion <ul><li>Avoid the Jank (make sure your application is responsive) </li></ul><ul><li>- Don’t block the UI thread </li></ul><ul><li>- Offload long running tasks to background threads </li></ul><ul><li>-Using AsyncTask or ServiceIntent </li></ul><ul><li>-Keep user notified about progress </li></ul><ul><li>Ensure your app “fits” in the Android ecosystem by following established UI design patterns </li></ul><ul><li>Questions? </li></ul>

×