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

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

Android Threading Rules

Cardinal rules of Android UI:

1. Do not block the UI thread

2. 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 FunPresent 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?