Quick actions

It works like this:

QuickActions

  1. The user taps a distinct visual target and…

  2. … a quick actions pop up is layered over the current screen containing the most important and obvious actions that can be performed.

  3. The user selects an action that will be executed directly, or after a confirming in a dialog.

Use when

A quick actions pop over can be used when you want to provide actions for items that have competing internal targets. It has to be triggered from a distinct visual target, so the user knows that there's something he can do with it. Make sure the pop over is not blocking the screen like a traditional dialog, but popping above or below the item. Only use the most important and obvious actions in the quick actions pop over. For other contextual actions you can choose to add a context menu. Don't use quick actions when multiple selection is supported, like in Gmail. Use a button bar in that situation instead.

The Good

  • Minimally disruptive to screen content
  • It's fast
  • It's fun
  • Its user friendly (oscar)

The Bad

  • Visual targets can be hard to notice
  • No build-in widget; text must be short. (Clinton)
  • limited number of items can be displayed (Rinat)

Examples

Twitter

1 Twitter's first version android application shows a visual target on the right of each tweet. Other targets are the links in the tweets, and the avatars of the user. Tapping on them would respectively open the link or the profile page.
2 Tapping on this target on the right, opens the quick actions pop over with options to perform on this tweet. Notice how the target is now highlighted.

Samsung Galaxy S Contacts

1 In the list with contacts on the Galaxy S, each item can be tapped on to move to the detailed info of that contact. Or the contact's picture (which is very subtly boxed, showing it distributes quick actions) can be tapped...
2 ... opening the quick actions pop over, showing the most important options that can be performed on this contact.
3 The number of options don't fit the pop over. Swiping a bit to the left reveals the last option. Selecting this option...

4 ... performs the action directly, in this case opening the twitter profile page of the contact. Notice how the profile picture of the user is (very subtly, and therfore hardly noticeable) boxed the same as it was in the contacts list. Tapping on it...

5 ... opens the quick action pop up again.

TaskKiller Free

1 Tapping on an icon in the grid view, displaying all running applications, opens a quick actions pop over. Choosing the option performs the action immediately.

9 Responses to Quick actions

  1. Marcos Vasconcelos says:

    But, how to implement this QuickActions for an apk?

  2. suzanne says:

    We are considering a way to get some code in, or link to code. But since we are designers, we need developers to help us create an open platform to do so. We’re working on it!

  3. gimmko says:

    tutto cio e’ molto carino da vedere, ma senze codice serve a poco. per codice intendo anche pseudo codice, non e’ essenziale che sia compilabile

  4. gimmko says:

    aggiungo, con un po di codice, diventerebbe veramente interessantissimo.

  5. voicedev says:

    Hi, it would be nice if you guys made, at least, the GUI templates you use for your tutorials available for others to use

  6. caat@unitid.nl says:

    Here’s a link to a toolkit in which you can find all templates: http://www.androidpatterns.com/how-to-make-a-pattern-and-get-it-on-androidpatterns-com

  7. powerje says:

    Some advice on implementing this behavior can be found here:
    http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/

  8. sebap123 says:

    Hi guys.
    First of all, great page – I`m an Android developer and sometimes I don`t remember or don`t know how something looks like.

  9. sebap123 says:

    Second of all, the proper name for this pattern isn`t QuickAction but QuickContactBadge – as it`s said on developer Reference.

Leave a comment