Android UI Design Patterns & Best Practices

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

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

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 will perceive 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

Force Close
If triggered:

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”

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 or database operations, expensive calculations, etc.) should be done in a child thread

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.

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

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 )

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",

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

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

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

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!

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)

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

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/

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?

http://localhost	202
http://android-developer-blog.blogspot.com	149
http://www.ybw.co	38
http://paper.li	8
http://a0.twimg.com	2
http://twitter.com	2
http://android-developer-blog.blogspot.de	1
http://slideclip.b-prep.com	1
http://www.slideshare.net	1
http://feeds.feedburner.com	1

Android UI Design Patterns & Best Practices

by Mike Wolfson on Jul 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 405

Statistics

Android UI Design Patterns & Best Practices — Presentation Transcript