This repository was archived by the owner on Feb 20, 2023. It is now read-only.
Repository navigation
This repository was archived by the owner on Feb 20, 2023. It is now read-only.
Top sites are more prominent on the homescreen #13765
Description
Based on a large number of user feedback, a lot of our users are finding it read the title of top sites as they are too small. Especially when a user have 2 links saved from the same domain (similar favicon) they find it difficult to distinguish between the two. Users have also expressed that the top site icons are too small for something that is supposed to help them get to where they need faster, whereas the "collections" CTA/placeholder is much larger in proportion.
User Story
- As a user, I want my top sites to look more prominent on my homescreen so they are more useful to me.
Acceptance Criteria
- I can easily read the title of a top sites and distinguish between two top sites from the same domain.
- The size of the top site icons are larger and more prominent than the collections CTA/placeholder.
UX
- Specs for the top sites section, and for the updated favicon below
- The Top Sites section should have 4 top sites in a row. This should also allow the full 'Top Articles' text to be visible for the default Pocket top site.
- The favicon size should be increased to 32x32px, leaving 4px of padding inside the favicon container
Top Sites
Top Site Favicon
┆Issue is synchronized with this Jira Task
Reacted by Cheap-Skate, Scripterr, madb1lly, mrBega, Marco, Osas and Lazy Monkey
Reacted by s-ankur
Activity
[-]Make top sites more prominent on the homescreen [/-][+]Top sites are more prominent on the homescreen [/+]liuche commentedon Aug 12, 2020
@apbitner will add specs for what these should be for making Top Sites more prominent.
apbitner commentedon Aug 18, 2020
UX specs have been added to comment zero. Please let me know if any additional specs are needed.
liuche commentedon Aug 18, 2020
hey @apbitner not sure if I can see the changes to comment zero - should they be dimens or an abstract link?
apbitner commentedon Aug 18, 2020
@liuche Whoops, forgot to hit 'update comment' 🤦🏻♂️
31 remaining items
yoasif commentedon Sep 2, 2020
Took a look at the latest version of this.
Cheap-Skate commentedon Sep 2, 2020
I agree
Nit: Top Sites favicon border width no longer matches the long-press Back button History favicon border width, #14627
General moan, I dislike the favicon borders throughout Fenix,
visibility - it makes the favicons smaller than necessary particularly History & Bookmarks, but also Top Sites and
aesthetics - it doesn't look very Material Design
My eyesight is not great and it's hard for me to distinguish eg BBC News red square favicon from CNN red square favicon.
(This is almost a meta issue, @yoasif has linked to some of the other similar issues)
gabrielluong commentedon Sep 2, 2020
#14145 will address the icon in the mockup.
codrut-topliceanu commentedon Sep 3, 2020
@vesta0 Could you please state what the new requirements are? Or will the new comments be addressed in another issue?
For mozilla-mobile#13765 - Fix TopSites layout and item sizes (mozill…
vesta0 commentedon Sep 10, 2020
@apbitner we chatted about increasing the icon sizes but I can't remember where we landed. Can you please add your final recommendation here?
apbitner commentedon Sep 10, 2020
As part of this work we reduced the padding inside the rounded-rectangle frame to make the favicon inside larger. We did not change the size of the frame itself as this frame size is used in other places in the app where we show favicons and we want to remain consistent. The font color of the labels will be changed as part of app-wide accessibility improvements which will improve visibility of the top sites.
yoasif commentedon Sep 10, 2020
@apbitner It is confusing what you mean by frame - yours is the first usage of the term in this bug. 😉
I think the issue initially asked that the icon size be increased - is that occurring or has it occurred? Personally, I don't care so much about the frame (I assume you mean the decoration/borders around the favicon) - I had previously filed #11743 to eliminate it.
Some clarification here would be appreciated.
gabrielluong commentedon Sep 10, 2020
I think we should file a new issue for this new work.
apbitner commentedon Sep 10, 2020
@yoasif By frame, I mean the border around the icon with the white background. That has remained the same, but the icon within it has increased in size. However, we don't have control over the actual favicon being used, so some may be smaller or bigger than others. Related, we will be taking a look at favicon sizes used through the app in #14931
yoasif commentedon Sep 10, 2020
@apbitner thank you for the explanation!