1470168 - Add tooltip beside 'save to Firefox' checkbox

Status: VERIFIED FIXED

(Firefox :: WebPayments UI, enhancement, P1)

Description

[Eric Pang [:epang] UX]

Work with Brian Jones to create a tool tip for the "save to firefox" check box that helps users understand where their information is being saved.

Comment 1

[Jacqueline Savory [:jsavory] UX]

Copy from Brian is added to both visual and interaction spec:

Shipping Address Checkbox: "Firefox can add your address to forms like this one to you don’t have to type it every time."

Payment Information Checkbox: "Firefox can securely store your credit card information to use in forms like this, so you don't have to enter it every time."

Comment 2

[Sam Foster [:sfoster] (he/him)]

What is the interaction for this tooltip - on hover anywhere on the checkbox or label?

Comment 3

[Jacqueline Savory [:jsavory] UX]

I would make it appear on hover over the (?) icon, but not on the checkbox or label. I think that would be confusing and might overlap weirdly with items. I think just hovering over the (?) is standard behaviour too.

Comment 4

[Matthew N. [:MattN]]

We should try to make this keyboard accessible as well for people who don't use a mouse (e.g. screenreader users). Maybe we can use :focus for that? We should probably use role=="tooltip" as well.

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1470168 - Add tooltip beside 'Save to Firefox' checkbox. r?MattN

I had to move the tooltip to appear above the tooltip to make sure that it cause scrollbars to appear on the address form.

Comment 6

[Matthew N. [:MattN]]

Comment on attachment 9012194 [details]
Bug 1470168 - Add tooltip beside 'Save to Firefox' checkbox. r?MattN

Matthew N. [:MattN] (PM me if requests are blocking you) has approved the revision.

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Jacqueline Savory [:jsavory] UX from comment #1)
> Copy from Brian is added to both visual and interaction spec:
> 
> Shipping Address Checkbox: "Firefox can add your address to forms like this
> one to you don’t have to type it every time."

I have corrected what I believe to be a typo here, replacing "one to you" with "one so you".

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e2f7985ef41d
Add tooltip beside 'Save to Firefox' checkbox. r=MattN

Comment 9

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/e2f7985ef41d

Comment 10

[Hani Yacoub, Desktop QA]

Attachment: contact info.png

"Nightly can add your address to forms like this, so you don't have to type it every time." is displayed in add shipping address forms.
"Nightly can securely store your credit card information to use in forms like this, so you don't have to enter it every time." is displayed in add credit card forms.


"Nightly can add your address to forms like this, so you don't have to type it every time." is also displayed in contact information forms, it's a bit weird specially if the form is requesting only a phone number or name.
Shouldn't there be more specific tooltip for this case?

Comment 11

[Jared Wein [:jaws] (please needinfo? me)]

Yeah, we should either have a different tooltip message for the Contact information or make this message a little more generic. Can you file a bug for this? We could use "Nightly can add contact information to forms like this, so you don't have to type it every time." Note I removed the "your" since I don't think we should be making the assumption that all entries will be specific to the person filling it out, same for the other tooltip messages.

Comment 12

[Hani Yacoub, Desktop QA]

I logged bug 1495375 to use a different tooltip message for the Contact information.

Comment 13

[Hani Yacoub, Desktop QA]

I'll mark this bug as verified as fixed on Firefox Nightly 65.0a1 (2018-10-25) on Windows 10 x 64, Windows 7 x32, Mac OS X 10.13 and on Ubuntu 16.04 x64 since bug 1495375 will handle the other issues.