1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
---
breadcrumbs:
- - /user-experience
- User Experience
page_name: infobars
title: 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)**
# **[<img alt="image"
src="/user-experience/infobars/blue-gradient.png">](/user-experience/infobars/blue-gradient.png)**
# **From Chrome/3rd party (Mac)**
# **[<img alt="image"
src="/user-experience/infobars/grey-gradient.png">](/user-experience/infobars/grey-gradient.png)**
# ****Confirmation/warning****
# ****[<img alt="image"
src="/user-experience/infobars/yellow-gradient.png">](/user-experience/infobars/yellow-gradient.png)****
# ****Controls****
# ****### [<img alt="image"
src="/user-experience/infobars/controls.png">](/user-experience/infobars/controls.png)****
# **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********************
# **### ****### ****### ****### ****### ****### **[<img alt="image"
src="/user-experience/infobars/example-translate.png">](/user-experience/infobars/example-translate.png)************************
# **### **e.g. Confirmation./page action infobar with more options****
# **### **<img alt="image"
src="/user-experience/infobars/example-translate-confirm.png">****
# **### ****### ****### **e.g. Problem infobar************
# **### ****### ****### ****### **[<img alt="image"
src="/user-experience/infobars/example-ext-crash.png">](/user-experience/infobars/example-ext-crash.png)****************
# ****#### ****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.**
# **[<img alt="image"
src="/user-experience/infobars/dialog.png">](/user-experience/infobars/dialog.png)**
# ****#### ****## **Variants**********
# ****## ****## [Geolocation](/user-experience/infobars/geolocation)********
|
