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

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect)

Description

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

We already did some work on creating an edit panel for the tiles on about:newtab (bug 989202).
With all the changes to that page though, it makes sense to take another design pass at it to confirm our direction and adjust it where needed.

Comment 1

[Ed Lee :Mardak]

I see that the initial 4 suggestions are the "next 4" so I would guess the search functionality would be filtering that "next 4" for pages that match the typed letters? I suppose something else to consider is that we currently only show one page for a given site unless it's pinned, but configuring a tile would effectively pin that page.

Comment 2

[Sevaan Franks [:sevaan]]

Attachment: Proposed redesign for editing tiles on about:newtab

Comment 3

[Sevaan Franks [:sevaan]]

Attachment: Gif showing tile flip animation

Comment 4

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to Sevaan Franks [:sevaan] from comment #2)
> Created attachment 8494561 [details]
> Proposed redesign for editing tiles on about:newtab

Unsolicited comments here.  One thing the Content Services team really liked from the old UI ( attachment 8405713 [details] ) was the ability to offer suggested sites within the UI.  Firefox should be able to offer a couple of options for "top sites" that a user might want to have in addition to allowing them to type in URLs.  And with the move toward enhanced tiles we might be able to offer tiles that can show the top headline.

Also, there was a previous plan to have empty tiles offer an empty tile [ + ] which would trigger this UI.  Would that empty tile trigger this same flip UI?

Thanks!

Comment 5

[Sevaan Franks [:sevaan]]

(In reply to Bryan Clark (Firefox PM) [:clarkbw] from comment #4)
> (In reply to Sevaan Franks [:sevaan] from comment #2)
> > Created attachment 8494561 [details]
> > Proposed redesign for editing tiles on about:newtab
> 
> Unsolicited comments here.  One thing the Content Services team really liked
> from the old UI ( attachment 8405713 [details] ) was the ability to offer
> suggested sites within the UI.  Firefox should be able to offer a couple of
> options for "top sites" that a user might want to have in addition to
> allowing them to type in URLs.  And with the move toward enhanced tiles we
> might be able to offer tiles that can show the top headline.
> 
> Also, there was a previous plan to have empty tiles offer an empty tile [ +
> ] which would trigger this UI.  Would that empty tile trigger this same flip
> UI?
> 
> Thanks!

Suggestions can be found in the dropdown that appears when the user clicks in the address box (no typing necessary): http://cl.ly/image/452i0b090A2a.

And yes, a + would initiate the flip.

Comment 6

[Sevaan Franks [:sevaan]]

(In reply to Sevaan Franks [:sevaan] from comment #5)
> (In reply to Bryan Clark (Firefox PM) [:clarkbw] from comment #4)
> > (In reply to Sevaan Franks [:sevaan] from comment #2)
> > > Created attachment 8494561 [details]
> > > Proposed redesign for editing tiles on about:newtab
> > 
> > Unsolicited comments here.  One thing the Content Services team really liked
> > from the old UI ( attachment 8405713 [details] ) was the ability to offer
> > suggested sites within the UI.  Firefox should be able to offer a couple of
> > options for "top sites" that a user might want to have in addition to
> > allowing them to type in URLs.  And with the move toward enhanced tiles we
> > might be able to offer tiles that can show the top headline.
> > 
> > Also, there was a previous plan to have empty tiles offer an empty tile [ +
> > ] which would trigger this UI.  Would that empty tile trigger this same flip
> > UI?
> > 
> > Thanks!
> 
> Suggestions can be found in the dropdown that appears when the user clicks
> in the address box (no typing necessary): http://cl.ly/image/452i0b090A2a.
> 
> And yes, a + would initiate the flip.

Just to clarify why I removed the previews of the tiles from the original concept: Most topsites won't have an image to display, and instead it will just be a screenshot of the page. The only exceptions are sponsored tiles. It's just not a clean looking experience for the user, so that's why I reverted to text.

My original concept has suggested sites by favicon: http://cl.ly/image/2K3A1S2N1037

However, after a design review with dcrobot we both agreed it would be cleaner to suggest it in the drop-down.

Comment 7

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to Sevaan Franks [:sevaan] from comment #5)
> Suggestions can be found in the dropdown that appears when the user clicks
> in the address box (no typing necessary): http://cl.ly/image/452i0b090A2a.

Ok, so on focus there would be room for a couple suggestions based on the favicon, title, and url.

> And yes, a + would initiate the flip.

Thanks!

(In reply to Sevaan Franks [:sevaan] from comment #6)
> Just to clarify why I removed the previews of the tiles from the original
> concept: Most topsites won't have an image to display, and instead it will
> just be a screenshot of the page. The only exceptions are sponsored tiles.
> It's just not a clean looking experience for the user, so that's why I
> reverted to text.

Makes sense.  We could have Firefox try to retrieve images for the top sites we recommend such that we do have something better to show, I wouldn't rule that out just because its not there now.  I think Content Services would like some way to possibly show a sponsored tile as well.  

Perhaps if there was a way with the proposed suggestions to offer a sponsored site as well.  Offering a sponsored suggestion in this UI is something we had penciled into our future steps.

> My original concept has suggested sites by favicon:
> http://cl.ly/image/2K3A1S2N1037
> 
> However, after a design review with dcrobot we both agreed it would be
> cleaner to suggest it in the drop-down.

Yeah, it's a tight space when we're working with just the size of the Tile, I'm not sure a favicon could be enough.

Comment 8

[Sevaan Franks [:sevaan]]

(In reply to Bryan Clark (Firefox PM) [:clarkbw] from comment #7)
> We could have Firefox try to retrieve images for the top sites
> we recommend such that we do have something better to show, I wouldn't rule
> that out just because its not there now.  I think Content Services would
> like some way to possibly show a sponsored tile as well.  
> 
> Perhaps if there was a way with the proposed suggestions to offer a
> sponsored site as well.  Offering a sponsored suggestion in this UI is
> something we had penciled into our future steps.

I looked into retreiving images, but the best we can do right now is a screenshot of the page.

Another concept I had was to highlight enhanced tiles within the list: http://cl.ly/image/3u271j131t1i

Maybe we can call tiles out this way?

Comment 9

[Sevaan Franks [:sevaan]]

We could highlight the row when a site's tile is enhanced, and always put one random sponsored tile right at the top of the suggestions list.

Comment 10

[Sevaan Franks [:sevaan]]

Or surface them within the list, rather.

Comment 11

[Stephen Horlander [:shorlander]]

Comment on attachment 8494561 [details]
Proposed redesign for editing tiles on about:newtab

This looks good. Editing it inline feels less cumbersome than in YAP (yet another panel)

Two things:

1) What is the X for in the upper right on the flip-side? Assuming "Cancel" I don't think we need a close icon and a cancel button.

2) The previous iteration of this (bug 989202) had the site that was currently attached to the tile. People might forget or be confused about which tile they are editing. Might be a concern.

Although if the plan is to keep the undo operation from the previous stuff I would be less worried about accidental tile editing.

Comment 12

[Sevaan Franks [:sevaan]]

Thanks. I'll make some edits based on these suggestions.

Comment 13

[Sevaan Franks [:sevaan]]

Attachment: Revised redesign for editing tiles on about:newtab

Revisions:

- Current tile title added to edit panel
- Undo detail added to end of flow.