1465228 - [UX] Design Animation for the Tracking Protection Shield in the URL Bar

Status: VERIFIED FIXED

(Firefox :: Site Identity, enhancement, P2)

Description

[Tanvi Vyas[:tanvi]]

Users who have TP on and experience breakage may not see the Shield in the URL bar.  If we animated it, it may be more discoverable.

This bug is to create a design for such an animation.  Then we can have a separate implementation bug.

We also need to define when the animation should appear (ex: all the time, first 5 times trackers are blocked, every few days, until the user opens control center for the first time, etc etc etc).

Comment 1

[Amy Lee [:amylee] UX]

Attachment: Tracking Protection Final.mp4

Animation for tracking protection

Comment 2

[Amy Lee [:amylee] UX]

(In reply to Tanvi Vyas [:tanvi] from comment #0)
> Users who have TP on and experience breakage may not see the Shield in the
> URL bar.  If we animated it, it may be more discoverable.
> 
> This bug is to create a design for such an animation.  Then we can have a
> separate implementation bug.
> 
> We also need to define when the animation should appear (ex: all the time,
> first 5 times trackers are blocked, every few days, until the user opens
> control center for the first time, etc etc etc).

I'll let Bryan define when the animation should appear. I also added Jared on this bug since he's worked on implementing Photon animations and is familiar with the process.

Comment 3

[Amy Lee [:amylee] UX]

Attachment: shield_animation.svg

Exported sprite sheet (this will probably need adjustments depending on how it's implemented)

Comment 4

[Amy Lee [:amylee] UX]

Attachment: Tracking Protection Final.mp4

Comment 5

[Johann Hofmann [:johannh]]

Hi Amy, I would need the shield animation without the green lock. Can you please remove the lock and attach another svg? :)

Thank you!

Comment 6

[Amy Lee [:amylee] UX]

Attachment: Shield Icon Animation.svg

Hi, 

This is the animation sprite sheet for the shield icon only. Let me know if you need anything else.

Comment 7

[Amy Lee [:amylee] UX]

Attachment: Shield Icon Animation 16x16.svg

Here is the icon sized to 16x16. Let me know if you need anything else.

Comment 8

[Johann Hofmann [:johannh]]

This was done, thank you so much Amy!

Comment 9

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

Based on bug 1471713 and comment 8 I am closing this issue.