User Experience‎ > ‎

Infobars

Infobars are non-modal, informational messages that display as an extension of the chrome. They are displayed when something happens in the Tab that the user should be aware of, e.g. a plugin has crashed, or the user can save a password they just entered. An infobar will push the website down so as to not block any content.Variants


Usage 

There are two main scenarios for dispalying an infobar: 
1) Page-related actions - to message the user about an action they can take related to the page they are on

2) Confirmations / warnings - to provide a notification or alert about a problem or a completed action

Infobars should never be purely informational; they should always have an action the user can take. Additionally, actions should be optional. If they are blocking the user from doing something else, a dialog should be used instead.

Types

1) Page-related actions

Permissions - getting the user to agree to or permit an action  (e.g. sharing their location so it can be used with the site they are on)

Page action - asking the user if they want to perform an action on a page that the user is currently on  (e.g. translating a page)

Feature setup - promoting a feature that's related to content on the current page; additionally giving them a way to set it up  (e.g. setting up Autofill feature by saving current page's form info)


2) Confirmations/Warnings 

Confirmation - a success confirmation of action/installation  (e.g. confirmation of an extension or theme installation with ability to undo) 

Problem - informing the user of a problem that occurred with a way for them to fix/troubleshoot (e.g. notification of extension crashing with option to restore; notification of missing plug-in with a way to install)

When & Where to display

In most cases, infobars should not be displayed in direct response to a user action (i.e. they should be system-initiated). If a user performs an action that directly responds with a message of the types listed above, a lightweight dialog should be used instead. The exception to this is the confirmation infobar which is usually in direct response to the user choosing to install something.

Infobars with page-related actions should only show on the pages to which they are relevant. Confirmation/warning infobars should only show on the page that they first appeared. The infobar can persist on that tab/page as long as it makes sense to stay open or until the user closes it out.

Visual

Colors

From Chrome/3rd party (PC)

From Chrome/3rd party (Mac)

Confirmation/warning


Controls

Note: The Options menu on an infobar only shows the encasing button on hover and press, similar to the page and wrench menus in Chrome.

Spacing
infobar height = 36 px
left and right padding = 6 px
spacing after icon = 6 px
spacing between buttons = 10 px
spacing after message (and before buttons) = 16 px
spacing to left of x button (between x and learn more or Options) = 12 px


Examples

e.g. Page action infobar from

 Translate

e.g. Confirmation./page action infobar with more options


e.g. Problem infobar


Content


Font

[system font]

(Tahoma 13px shown in mocks)


Message wording

Infobar messages should be clear and succinct. If possible, the message should be able to fit on one line of the infobar and still retain enough space for controls, options/learn more and a close button.   There may be cases where multiple infobars get stacked so messages should always be clear about where (which feature/app) the message is coming from.


Button wording


The button that performs the main action should convey in wording what action will take place.  The button that declines the action should simply say no if the preceding text contains a question. If the infobar message does not contain a question, then the button should convey what they are refusing.


Examples by type: 


Permissions/Page Actions - explanation of who/what is asking and what they are asking permission for

e.g. Flickr wishes to use your location.  [Share my location]  [Don't share]

e.g. This page is in French. Would you like to translate it?  [Translate]  [No thanks]

Feature setup - explanation of what feature is and/or value + question asking if user wants to perform action


             e.g. Chrome's Autofill feature can help you fill out web forms faster. Would you like to save this form info?  [Set up Autofill...]  [Nope]


Confirmation - confirmation of completed action

e.g. The "Mappy" extension was successfully installed.  [Undo]

e.g. This page has been translated from [French] to [English].  Note: The controls are dropdowns in this example.

Problem - explanation of problem

            e.g. The "Dictionary" extension crashed.  [Restore]


    Options / Learn more / Help

    If an infobar is substantial enough to have an options menu, put the Help or Learn more link within that menu.  Otherwise, any infobar that can provide additional explanation of the feature or message should give more information in a "learn more" or "About [feature name]" link.

    Persistence and Crossfading

    Persistence
    In general, to avoid the up and down bouncing of new infobar instances, infobars related to the same action instance should persist.  

    For example, translating a page involves multiple infobars.  The first allow the user to translate the page, and the second informs the user that the page has been translated AND offers the ability to do another translation.  When the user clicks on the affirmative button in the first infobar, the infobar will not bounce up and return with the second infobar.  Instead, the infobar will persist, and the content on the infobar will change.

    In a case where there is a persistent infobar and the color of the infobar must change, the first color will crossfade into the second color over 500 ms.

    For example, if a user tries to translate a page using the blue translation bar and an error occurs, the blue infobar will crossfade into a yellow infobar outlining the issue and an ability to try translating again.

    Dialogs

    A dialog should be used instead of an infobar if...
    1) it will block the user from doing something unless he/she takes action
    2) it is a direct response to a user action

    e.g.

    Variants


    Subpages (1): Geolocation
    Comments