Action Bar Best Practices

What is the Action Bar?

The Action Bar refers to the buttons that can be added to the top of an item. These buttons are created using properties and designating which ones you want to appear in the action bar.

action-bar-in-app.png

For example, actions could be calling a phone number, one-touch social sharing or emailing the contact. The action bar will automatically adjust to fit up to three actions. Actions will become available as you start adding properties to the item.

What Properties Should I Add to the Action Bar?

The properties you place in the action bar depends on what the item’s purpose is. If you are working on an item for a contact, the most important information would be the person’s contact details (i.e. phone number, email, or a ‘Save Contact’ option).

action-bar-contacts.png

On the other hand, if the item was featuring a podcast, the ‘Share’ and ‘Website’ properties may be the most relevant properties to add to the action bar.

Action Bar Best Practices

When deciding what properties to put in the action bar on your app items, it’s important to create a consistent and strategic plan. Since the Action bar is in a prominent place on your app’s items, people will become familiar with it.

If different properties are displayed on every item, it could create confusion for your users about what to expect. Determine what the standard action bar will be for each type of item you display in your app.

Hiding Properties

When placing properties in the action bar, you have the option to hide the property from the typical placement lower in the item.

hide-property.png

This is a good option to avoid redundancy or clutter in your item view. However, some information, such as a phone number, could be beneficial to show in the item. Doing so would give the ability for the phone number to be copied and shared easily, instead of solely providing the click-to-call functionality.

Action on the Right Hand Side of the Action Bar

The right-hand side of the action bar is a great spot to highlight your most important actions. For right-handed users, it’s the button closest to the thumb. From a mobile strategy perspective, the two best properties to choose from for this placement are a website property or the ‘Share’ option.

Tips From Your Simpleview Team

  • When placing the website property on the right-hand action bar space, use an arrow icon pointing to the right. This is because on an Apple iOS device, the web browser will open from the right. Using the arrow icon pointing to the right will make it feel like an integrated action for your users.

    website-icon.png
  • Using the ‘Share’ property is always a good idea. We recommend adding it to the right-hand side of the action bar. This is because the default icon is an arrow pointing to the right, which is the direction the browser will open from. This will make it feel like an integrated action for your users.

    share-icon.png