Closed Bug 1073654 Opened 9 years ago Closed 9 years ago

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


(Firefox :: New Tab Page, defect)

33 Branch
Not set





(Reporter: sevaan, Assigned: mmaslaney)



(Whiteboard: [ux])


(3 files)

This bug is for visual design for the "Edit Tile" panel on about:newtab detailed in Bug 1065313
Flags: firefox-backlog+
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.
Flags: qe-verify-
Whiteboard: [ux]
Assignee: nobody → mmaslaney
Iteration: --- → 35.3
Points: --- → 5
Please find the Visual Design mockup here:

Pinging Sevaan and Aaron for a UX/UI review.
Flags: needinfo?(sfranks)
Flags: needinfo?(athornburgh)
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" 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).
Flags: needinfo?(sfranks)
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?
Flags: needinfo?(athornburgh)
one more...

5.) Include the favicon of the URL selected (or a dotted outline if none is available)
Thanks for the feedback Sevaan and Aaron. Please find the updated mock here:
Flags: needinfo?(sfranks)
Flags: needinfo?(athornburgh)
This looks great, Mike. Thanks for making those changes!
Flags: needinfo?(athornburgh)
Flags: needinfo?(sfranks)
Attached file
Attached assets
Closed: 9 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.