1073654 - [UX] Visual Design for editing panel for tiles on about:newtab

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect)

Description

[Sevaan Franks [:sevaan]]

Attachment: Editing tiles on about:newtab

This bug is for visual design for the "Edit Tile" panel on about:newtab detailed in Bug 1065313

Comment 1

[Sevaan Franks [:sevaan]]

Attachment: Gif showing tile flip animation

Since the tile flips over, it might be cool to show a frosted reverse of the original tile in the background of the edit panel.

Comment 2

[Michael Maslaney [:mmaslaney] ([e-mail])]

Please find the Visual Design mockup here: http://people.mozilla.org/~mmaslaney/tile/FX-Tile-Editing.png

Pinging Sevaan and Aaron for a UX/UI review.

Comment 3

[Sevaan Franks [:sevaan]]

Looks good!
Couple notes:

- Your dropdown menu when clicking the edit icon says "Enhanced" and "Remove". I think you mean for "Enhanced" to be "Edit" (or "Edit Tile", but seem my additional thought below regarding this)
- You mention the "Undo" prompt...do we want to include that? Or is there a standard visual we use in other places?
- Because the tile is automatically pinned after you edit it, you should include that pin icon on the newtab page you have at the end of the flow.
- Just wondering if the Edit gear could be a little larger (or the pin a little smaller)...they seem just slightly misbalanced.

And one other thought...when the tile flips over the title says "Edit Tile - <Current Tile Title>"...but no where else do we ever mention the word Tile and Bill Selman's research suggests that most users wouldn't call it a tile in the first place. How do you feel about removing the word "Tile" and just making it "Edit: <Current Tile Title>"? This would also allow for slightly longer tiles before they disappear into elipses (and maybe we should make a note of that too).

Comment 4

[Aaron]

Nice work Maslaney. A few comments...

1.) Cog icon > I would like to reserve the "cog" explicitly for the page-level controls. Can you come up with another option or two? Perhaps a pen.

2.) Edit menu > Options don't make sense. The tile is already "enhanced". I suggest that the options be "Edit" and "Delete tile".

3.) Rollover > Do we need the gray bg and rule? I think it would look crisper with an all-white bg.

4.) Rollover Buttons > Perhaps make the "Done" button light up in blue once a URL has been selected?

Comment 5

[Aaron]

one more...

5.) Include the favicon of the URL selected (or a dotted outline if none is available)

Comment 6

[Michael Maslaney [:mmaslaney] ([e-mail])]

Thanks for the feedback Sevaan and Aaron. Please find the updated mock here: http://people.mozilla.org/~mmaslaney/tile/Title-editing-v2.png

Comment 7

[Aaron]

This looks great, Mike. Thanks for making those changes!

Comment 8

[Sevaan Franks [:sevaan]]

+1

Comment 9

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Tile-edit-assets.zip

Attached assets