UI Design Patterns & Best Practices

1. UI Design Patterns & Best Practices Mike Wolfson July 22, 2010

2. Best Practices – Why? Important to ensure your App follows the established UI guidelines, and performs well -Otherwise, you will get bad reviews, and not be successful -Apps that follow common design standards, will “fit” better in the Android ecosystem, and rise to the top Read the UI design guidelines!http://developer.android.com/guide/practices/ui_guidelines/index.html

3. Avoid the Jank This occurs when the system locks out user input -Makes the app feel sluggish -Annoys the user 100 to 200ms is the threshold beyond which users willperceive lag (or lack of "snappiness," if you will) Android System Monitors: - No response to an input event - 5 sec - BroadcastReceiver hasn't finished executing - 10 sec Resource: http://code.google.com/events/io/2010/sessions/writing-zippy-android-apps.html

4. Force Close If triggered:

5. What happens next? User hits FC button majority of the time. - Goes away annoyed. - Leaves Bad Market reviews - Complex memory structures will need to be recreated (if user even decides to return to app) -Non-synced data is lost ”This App Sux, Force Closes, 1 star” “Doesn’t work, uninstall”

6. Single Threading Model Android applications normally run entirely on a single (i.e. main) thread. -This includes the drawing events -This means, if system is blocked on an operation, the UI thread is blocked (and app is frozen) Android UI toolkit is not thread-safe and must always be manipulated on the UI thread. Potentially long running operations (ie. network ordatabase operations, expensive calculations, etc.) should be done in a child thread

7. Android Threading Rules Cardinal rules of Android UI: • Do not block the UI thread • Make sure the Android UI toolkit is only accessed on the UI thread.

8. Avoid FC and Jank – accessing UI thread manually Android offers several ways to access the UI thread from other threads:   * Activity.runOnUiThread(Runnable)   * View.post(Runnable)   * View.postDelayed(Runnable, long)   * Handler Problem: -manually handling threads is error prone, and difficult

9. AsyncTask Goal of AsyncTask is to take care of thread management for you. private class DownloadImageTask extends AsyncTask {    protected Bitmap doInBackground(String... urls) {        return loadImageFromNetwork(urls[0]);    }    protected void onPostExecute(Bitmap result) {        mImageView.setImageBitmap(result); Resources: (read source code in: ShelvesActivity.java and read the docs! http://developer.android.com/reference/android/os/AsyncTask.html )

10. IntentService “Set it and forget it” – places request on Service Queue, which handles action (and “may take as long as necessary”) public class UpdateService extends IntentService { public class UpdateService extends IntentService { To call: Intent selectIntent = new Intent(this, UpdateService.class);        selectIntent.putExtra("userAction",

11. Tips to keep your app “snappy” If your application is doing work in the background, show the user progress is being made - AsyncTask.getStatus() For games specifically, do complex computations in child thread If your app has time-consuming startup, offer a splash screen quickly, then fill in information as it is ready -inform user about progress For data sync, database queries, and other long running processes - use IntentService

12. Design patterns Patterns describe a general solution to a common problem -Natural by-product of software design lifecycle Google created these patterns to establish a common UI language -following them ensures your app “fits” into the Android ecosystem -apps will feel more integrated, and natural to the user Android patterns are designed to follow the natural way to navigate the web

13. Contacts Sync/ Quick Contact Sync your app with Android contacts -do this at startup (first time user runs app) Make use of “QuickContact“ -deeper integration of app with phone contacts

14. Dashboard Navigation center for important actions Highlight only most important/commonly used capabilities of application Expose new content to user Use this as a place to: -enhance brand -engage user -centralize navigation Make it fun!

15. Action Bar Dedicated real estate at top of screen to support navigation, and frequently used operations Replaces Title Bar Do use to bring key actions to front Do use to convey sense of place Make consistent between activities -Don’t use for contextual actions Provide link to home (dashboard)

16. Companion Widget Supports the app by displaying its content on the home screen Only use to provide extra value -not just a simple link to start your application Do handoff to app for detailed views or complicated tasks Be space efficient -keep your widget small

17. QuickAction Popup triggered from distinct visual target Minimally disruptive to screen context Straightforward, Fast and Fun Present only most important actions Use when item doesn’t have meaningful detail view Don’t use in contexts that support multiple selection Resource: http://code.google.com/p/simple-quickactions/

18. Conclusion Avoid the Jank (make sure your application is responsive) - Don’t block the UI thread - Offload long running tasks to background threads -Using AsyncTask or ServiceIntent -Keep user notified about progress Ensure your app “fits” in the Android ecosystem by following established UI design patterns Questions?