[UX] [Meta] Make the most useful content easily accessible on the homescreen

[vesta0]

User Story

As a user, I want my browser homescreen to show me content that is most relevant and useful to me, such as my frequently-accessed types of content (bookmarks, history, recent tabs, top sites, synced tabs, collections, pocket) or relevant updates or tips about the product, so I can easily navigate to them with the least number of taps required

Feature Brief: https://docs.google.com/document/d/1GQ7ncFM_UcThSx6CldbrkuQRPxXsJ13rHXNPXI1_qoQ/edit

For UX: Please consider the following issues as you work on this:

11453

6510

9328

Acceptance Criteria

• I see my most frequently-accessed types of content on my homescreen by default. Note: Collections and Default top sites should always show up by default (order to be determined) until user decides to turn them off.
• Navigating to my most frequently-accessed sites should not take more than 2 taps.
• I can customize my homescreen to only show types of content that I want to access frequently.
• My homescreen provides me with the type of information that is relevant and useful to me.

┆Issue is synchronized with this Jira Task

[data-sync-user]

➤ Adam Bitner commented:

[~bfleming@mozilla.com] This is the home screen story that should be moved over to the Sour Patch board. Not sure if there are other related home screen stories that should come with.

[dglttr]

Something akin to the options available in desktop Firefox would be very nice for customizability and consistency. Pasting the section here for reference:

[madb1lly]

Hello @vesta0 and @apbitner,

By "2 taps" where do you mean from? If from the homescreen itself then Please make so only one tab is needed to load a frequently accessed site, i.e. these sites are shown on the homescreen.

Cheers 🙂

[maverick74]

Hi @vesta0 thanks for your feedback.

I would like to manifest that it would be nice that either this would also apply to the edit-URL-screen or that the edit-URL-screen would go to the so called "homescreen".

I ask this because, when I'm done with a webpage, I would like to be able to not only search for something else from that tab, but also to use the same tab and substitute that same webpage (which no longer interests me) by some other bookmarked site or top site.

I can elaborate more if I'm not clear enough.

Thank you all

[madb1lly]

Hi @maverick74,

That sounds to me just like how the Awesomescreen ( home screen) on Fennec works!

Cheers 🙂

[madb1lly]

Hi @maverick74,

I not sure why you reacted like that to my comparison. In the current (or old now?) Firefox for Android, codenamed Fennec, when we select the address bar we get the "Awesomescreen" which can be used for all the things you suggest - search, new address, bookmarks, top sites, as well as frequently used sites, history, synced tabs, even pocket recommendations and personalised highlights.

I'm still very confused as to why Fenix did not start with this design as a default because it still seems to me to be the slickest way to include all these things on the homescreen. Only collections is missing, and that would be very easy to add to one of the available panes or add as a completely new pane perhaps.

@vesta0, can you explain what's wrong with the Fennec homescreen? Is there some document/explanation from the early history of Fenix that explains this?

Thanks 🙂

[maverick74]

@madb1lly sorry, I pressed the wrong emoji. Yes, I don't understand that either. I was a heavy user of that homescreen

[vesta0]

We couldn't just start with the old design because we actually built the new Firefox from scratch. My goal for creating this user story was to make the Firefox home screen as useful as possible and AFAIC that could very possibly result in rebuilding parts of the old Firefox homescreen that users loved and found useful, without making it too cluttered which users certainly didn't like. Our UX team is investigating this.

[madb1lly]

Hi @vesta0,

Thanks for the explanation. I think you could have started with the old design but you would have had to build it from scratch, so in fact you took the opportunity to see if you could improve it, which is good.

Personally I didn't find the Fennec homescreen cluttered, which may be why I find the current design to waste a lot of screen space.

Maybe a way to find the happy medium would be to make the homescreen very dense with features and see what the feedback is then. I'm sure there will be some negative feedback, so you can just reduce the density until people are generally comfortable with it.

However I know that screen object density has accessibility aspects, so I know it's not as simple as I'm suggesting.

The main point is that I miss the utility of the Fennec homescreen, it really did make everything much more quickly accessible than the Fenix homescreen does.

Cheers 🙂

[Alighierian]

One way to reduce the clutter would be in the customisation. It's inevitable that people want different things from their browser. To a point I'd certainly agree the base has to be good. After all, if the base is lousy, users might not even bother into looking how to customize.

I would argue, however, that a bookmark browser rates higher in basic accessibility necessity than the tab groups/collections function, especially since you have to manually set the latter up, tab by tab. In terms of clutter, a collapsed default look might do the trick, just like the collections are by default. As customisation there could be a toggle to have it expanded by default, so it's a user choice in how much they clutter and with what.

[dglttr]

One way to reduce the clutter would be in the customisation.

I just want to point at my comment from above (https://github.com/mozilla-mobile/fenix/issues/12065#issuecomment-672196671) again and add some additional reasoning:

• Generally, having similar options across platforms is nice for consistency, but of course has to work individually on each platform.
• From the desktop options, I think the toggle for top sites as well as the ability to choose the number of rows could easily be used. Additionally, there would be a toggle to turn of auto-populated top sites in Fenix (see #10342).
• At some point, I think Mozilla will add snippets in Fenix too (not sure if there is a ticket already?), so that toggle will be needed too. I guess the "What's new" (#6510) and onboarding cards (#9328) could be seen as a kind of snippet.
• The other two things don't exist/aren't relevant on Fenix (namely toggling of the web search bar and the "Hightlights" section.
• What does exist in Fenix is Collections, so there should be a toggle for that (in Nightly, one can hide the no-collections placeholer since #12377, but there is no way to turn it back on).
• If easy access to bookmarks and history is added (#11453), we should be able to turn that off too.
• If a Pocket integration is eventually added (#3788), there should be a toggle.

Did I forget something? Definitely a lot of stuff to configure to really make the start page your own (eventually).

[terr72]

It might sound like a wild idea, but why not just recreate the homescreen design from FF68 in a major effort and add the optional collections at the bottom as fast but temporary solution? Over the last days I've read many reviews in the Play Store and various comment sections in news articles about the FF79 release and the lack of bookmarks on the default page are the most missed feature people complain about. I'm afraid that an elaborated UX design discussion might lead to even more lost users than it already has.

[gerdwagner]

First of all for me it would be best to have bookmarks back in their former place, too.

But there's another aspect of bookmarks/collections that is important to me: I want to be able to edit saved URLs. This is right now possible for bookmarks but isn't for collection entries. The reason is that URLs may be changed when a page is loaded. Usually only after loading I'm able to save the page as bookmark or collection entry.

Last and less important: It would be nice to be able to sort bookmarks. A nice example implementation is the sorting function of Spotify's playlists.

[terr72]

@gerdwagner I remember the constant feature requests about the ability to sort the bookmarks since at least 2-3 years. They all basically ended with "we won't do that in Gecko anymore, but the successor will feature it". Not sure why all the time spent on the collections and the new homescreen (both things practically nobody asked for) wasn't invested in a basic feature requested by many people over the years.

[davidmegginson]

First of all for me it would be best to have bookmarks back in their former place, too.

But there's another aspect of bookmarks/collections that is important to me: I want to be able to edit saved URLs. This is right now possible for bookmarks but isn't for collection entries. The reason is that URLs may be changed when a page is loaded. Usually only after loading I'm able to save the page as bookmark or collection entry.

Last and less important: It would be nice to be able to sort bookmarks. A nice example implementation is the sorting function of Spotify's playlists.

Yes, it's frustrating that bookmarks are no longer a page that I can return to with the back button.

[rusegithub]

Over the last days I've read many reviews in the Play Store and various comment sections in news articles about the FF79 release and the lack of bookmarks on the default page are the most missed feature people complain about.

Hear hear.

Please fix this, Mozilla.

[rusegithub]

First of all for me it would be best to have bookmarks back in their former place, too.

... It would be nice to be able to sort bookmarks. A nice example implementation is the sorting function of Spotify's playlists.

I strongly agree.

[ghost]

In my opinion, this is a major defect in the product and should be treated as a bug

[ZorroGuevara]

I'm getting a bit tired of all those close / open issue. My issue #12941 has been close in favour of that one. People have been giving feedback on the #12941 plus support (see OP with emoji).

I'm deeply and sadly frustrated with the way this matter is handling. This is something a lot of people, see notably r/Firefox on Reddit & issues on that matter, are missing and want. I can fully understand the huge backlog of work you have on Fenix, but this is taking a very long time and the closing issues doesn't make it good. I feel you're just earning time by closing those issues.

Anyway, my issue #12941 is kind different with that one. What I wanted is the Legacy way of having Bookmarks/History/etc. it is not the way Top Sites are doing. As long as we're good on that, we can keep the previous issue closed.

[cadeyrn]

and the closing issues doesn't make it good.

It's a duplicate. It doesn't make sense to have multiple open issues for the same request.

What I wanted is the Legacy way of having Bookmarks/History/etc. it is not the way Top Sites are doing.

Nobody said that top sites are a replacement for a faster way of accessing bookmarks and history. That's why this issue is still open.

[ZorroGuevara]

and the closing issues doesn't make it good.

It's a duplicate. It doesn't make sense to have multiple open issues for the same request.

Yes, and the previous one (older than this one) was closed because they didn't want to think about it (#10437). My point isn't to say this issue should be open instead of that one. Only that, this is a bit of a mess.

Fair enough for this issue, I'll check that one now then.

[davidmegginson]

Having the option to have new tabs default to an actual bookmarks page (that you could go back to with the back button) was highly useful in v68. I hope this issue includes a similar option, and not just some bizarre "home screen" popup with a lot of clutter, like we have now.

[violasong]

Hi all! I've started working on the UX for this bug. Here's the plan:

Milestone 1

• Research: Review existing feedback, research, and discuss with Mobile and Desktop UX (underway)
• Create MVP design (rough wireframes in progress)
• Make fast iterations based on feedback, user testing
• Release

Milestone 2

• Wait for this bug to collect telemetry data
• Create survey and run through user testing
• Launch survey to a sample of release users
• Create MVP 2 design
• Iterate based on feedback
• Release

[ghost]

Thanks for the plan. To delay this bug until telemetry data is improved is not really practical.

This bug is far more important than telemetry data. The development team have destroyed in my opinion, the user experience in Android by their design.

I never use top sites, I simply use an organised list of bookmarks, and the changes made by the development team have increased my key presses by over 100% to get to the same position.

An earlier suggestion to provide the options similar to the desktop version is a quick win, probably very simple to implement, and once completed, you can wait for telemetry to improve the experience. Starting from a disaster position, simply I don't think is correct.

[xobs]

I have a question about #14866: Will the telemetry data also catch users who are still on Firefox 68?

I have uninstalled the latest version of Firefox and have installed Firefox 68 from an apk. I'm waiting until this bug is closed before I upgrade, and I imagine others are the same, or are using a different browser in the interim. If telemetry data is only collected from users of the latest version, then I suspect the data won't be very useful.

[violasong]

To clarify: The plan is to launch a release between these two milestones so that we can get a UX fix out as soon as possible. It will still take some time for me to determine what that UX fix should be, but I'm aware of the urgency.

[SuryaNJena]

The current layout with Top Sites only makes a lot of sense to me, I hope you don't throw it away.

[Imold]

The current layout with Top Sites only makes a lot of sense to me, I hope you don't throw it away.

I don't even want Top Sites, I just want Bookmarks.

The old Firefox let us have it both ways. change it back.

[klint]

I really hope the whole thing will be configurable in the end. For instance, the way I use bookmarks on the phone is by storing them and using them as suggestions when quickly typing a few letters in the address bar. I find this more efficient. I never navigate in the bookmarks tree, the phone's screen is too small anyway. Therefore I'd prefer my home screen not to be cluttered with bookmarks. Although I perfectly understand that others may need it of course 😊

[TheRealOsas]

I use collection more than bookmarks now so pls don't remove collection from its position or if u could put it in another good discoverable spot that would be nice.

[Matth7878]

Collections should have their own UI and IMHO renamed as saved sessions or grouped tabs (aka panorama). I think homepage is a shortcut for them but they should also be present in tab tray within their own tab. (Besides normal and private)

To get back more on topic : collections are different from bookmarks and user should be able to access to both. It would be really nice to be able to customize homepage so you could choose what / how / in which order to display : top sites / collections / bookmarks / history.

[ZorroGuevara]

You don't have to "fight" against each others. The idea would be to make a customisable Home, you'll decide what you want to have. That way everyone will be happy. I myself don't care about the default layout, do what you know is better for mass users. That's what I said in my previous Issue, and why I don't like the fact it's closed (but that's how Github works), there is precision I hope this could be added to OP.

I just want to customise my Firefox. FF Android has always been poor in term of customisation, I hope this could change now.

[JoGarWeb]

¿Tabs Tray "ruined home screen"? I don't know, but in previous versions of Firefox opening 3 tabs from the Home Screen and manage them took less clicks. In addition to being more relevant in the use of Firefox. Firefox Nightly (June 3rd Build) vs Firefox Beta https://twitter.com/JoGarWeb/status/1304903761530368003 👀

[ghost]

Hi all! I've started working on the UX for this bug. Here's the plan:

Milestone 1

* Research: Review existing feedback, research, and discuss with Mobile and Desktop UX (underway)

* Create MVP design (rough wireframes in progress)

* Make fast iterations based on feedback, user testing

* Release

Milestone 2

* Wait for [this bug](https://github.com/mozilla-mobile/fenix/issues/14866) to collect telemetry data

* Create survey and run through user testing

* Launch survey to a sample of release users

* Create MVP 2 design

* Iterate based on feedback

* Release

I would suggest that for speed and resolving this issue quickly, not necessarily as a 100% solution you follow the suggestions above https://github.com/mozilla-mobile/fenix/issues/12065#issuecomment-672196671 , and make the home screen customisable as for Firefox desktop.

[BrendaEM]

(I referred here) Removing the ability to use stored bookmarks is a terrible design defect: 1.) Saved Bookmarks were 2 clicks before Firefox mobile was gutted. Typing is neither quicker, nor easier than using a bookmark. 2.) To blur the line between invoking a search and a using a known safe bookmark sets a bad internet browser use example. A known safe bookmark is not equal to an untested search result. 3.) To continually use a commercial search engine withers the openness of the internet.

Like many people, I was appalled at the last release of Firefox Mobile. I have used and enjoyed using it, since Fennec was still in beta, and the last release was by far the worst browser release I have ever seen in my life. People say time and time again: no one wants change for the sake of change. Please heed that advice. I would rather see a massive fork of the likes of OpenOffice/Libreoffice than to see another release such as the last one.

[davidmegginson]

I've decided to make the leap and try to live with all the usability problems in Fenix, because I do most of my online activities through mobile web sites rather than apps. That means the browser's security is very important to me, and if I stick with v68, I won't be getting fixes for any future exploits or other security issues.

So I'm taking a gamble that the Mozilla team will eventually restore at least most of the functionality that they took away from us with Fenix. Don't let me down, folks, and drive me back to Chrome. :(

One nice new feature I noticed is that Fenix (at least v80) preserves bookmark order, which v68 did not. That means that if I go to mobile bookmarks in my desktop browser and drag things around, I see that same bookmark order in Android now. So at least there's one concrete improvement over v68.

[violasong]

Hi all!

Seeking feedback on the following MVP design, meant for the next engineering sprint.

• This includes the Fennec concept of Bookmarks/History as homescreen tabs that can be swiped to for easy access
• History tab will now have entry points into Synced and Downloads, so the whole library will be accessible from the homescreen
• This moves the top sites down to where they are reachable by thumb. Thanks to u/Behave_or_else for the inspiration.
• The goal is adding easy access to library while still keeping the homescreen looking clean and approachable.
• This mockup is not yet fully polished, so if you notice a little blurriness on some icons etc, not to worry. For the next few work days, I'll be refining and iterating these mockups based on feedback and user testing.
• The most helpful kinds of feedback: risks and edge cases I might not have considered, ways in which this design might be more difficult to use than the current Fenix, and small improvement ideas that could fit into our very tight timeframe for this release :).

[TheRealOsas]

My only problem is the location of the private browsing icon. Pls move it somewhere else.

[ghost]

It would be so much better if we were able to customise the home screen. As I don't have history, top sites or collections, and use bookmarks.

If you made it customisable, one could have the search bar plus bookmarks as the home screen.

Forcing users to have collections and top sites isn't what Firefox historically has been about. It's been letting users customise the experience, obtain add-ons that are readily available or to be able to create ones own together with access to about:config that the developers wish to keep, so we can't switch off features that we don't want.

[BrendaEM]

No, I don't want anything on the "home screen." I want my bookmarks just where they were. You people really ruined a good web browser--so bad it looks like sabotage. The result is a shameful unusable mess that surly could not have been tested by anyone with any knowledge of user interface design.

[terr72]

@violasong I'd suggest an option to make the bookmarks tab as default startup screen and returning point when closing or opening a new tab. Just like it was in FF68. Then I'm fine with that mockup.

[cadeyrn]

@violasong

It's definitively a big improvement!

• My most important feedback is to relocate the private mode icon. It feels distracting to me to have icons on the left and on the right of the address bar. Especially since it means that the address bar will move once you open a tab. If it has to be integrated in the address bar please move it to the right (left of the tab counter). It also has the advantage to be easier accessible with one hand.
• You said "This mockup is not yet fully polished" so maybe it's too early for this kind of feedback but I still write it to make sure you will keep it in mind: With collections there is not much empty space between the last collection and the toolbar. It feels cluttered. But around the logo there is a lot of empty space that could be reduced. I suggest to have as much space below the collections as on the screen without the collections below the top pages.
• In the third screen it looks a bit strange to have "Synced tabs", "Downloads" and "Recently closed" aligned this way, especially since I don't see anything similar elsewhere in the application. And it will probably not work in languages with larger strings like German. I suggest to have either only one item per row or to solve it with icons only.
• Still in the third screen: I am not sure if I would expect downloads in the history. Maybe you could make it a fourth tab? And if you implement the previous suggestion to have only one item per row then we don't need more space as in the current mockup if downloads will be moved to its own tab.
• It should be possible to disable every tab (almost, there has to be at least one enabled tab, I guess). So if a user doesn't use bookmarks at all the user shouldn't be forced to have a bookmarks tab.
• If the user always wants to start with bookmarks it should be possible for the user to start with it. I don't think a dedicated option for defining the default tab is needed though. It should be enough to remember the last opened tab.
• Please make sure that in the new homescreen you can't scroll down anymore as in the current version of Firefox if there is no reason to scroll because there is only empty space.

[klint]

Thanks a lot @violasong, this looks very promising indeed.

A couple of remarks in addition to @cadeyrn's comments that I fully agree with:

• what would be the swiping zone to switch tabs? the blue one or the green one? I would prefer the green one, extended from the bar up to the first element met above it. The blue one feels too far in one hand mode, especially with collections. Actually, the blue one AND the green one would be perfect on the home page, but the blue one is not available in the other tabs, isn't it? Or, is it?

• maybe a stupid idea, but why not having yet another tab for private navigation, instead of the button in the navigation bar? Unless the other tabs must also be available in private mode, of course (I can't recall how it was in Fennec)

[Alighierian]

That design certainly looks like a promising step in the right direction, @violasong. Combined with the customization functionality to show or hide any of those tabs as desired, similar to Fennec's customizable home screen, would make this a nice and useable base experience again. One that would allow people to (de)clutter their screen in the way that works for them.

The main desirable items that came to my mind regarding design and interface:

• In Fennec, the address bar/search window didn't actually start to display search results until you started typing, instead, it would show your customized home screen. This made utilizing an exiting tab for something new very easy.

• A clean separation between searching bookmarks and searching the web. Preferably by having them visually separate, either by swipeable tab or two separate sections. Three if it includes history search. Occasionally I try using it in the current form but continuously end up annoyed by the clutter: it seems to search the web, history, and bookmarks all at the same time, with only minor indicators of what your bookmarks are in the resulting list.

• Tab selection as found in Fennec and the desktop browser, with a toggle to turn it on and off, as it does take up screen real estate not everybody's device might have comfortable room for. Despite that downside, I found it really useful, even on my phone, and it was my primary mode of switching tabs, making new ones, and deleting old ones.

• When in an active tab, the new additions to the settings menu should appear below the default options, instead of shoving those down, as shown here. This would be a serious improvement in navigating the menu, as you can get used to fixed locations for options, instead of having to figure out where they are every time you open the menu.

[ZorroGuevara]

@violasong As someone who has been vocable about this regression, I must say I'm really please by your solution. Most of my feedback are already said by @Alighierian I'll just had something: when we press new tab, this should also appear. We should be able to select a bookmark/history/whatever without making 3 clicks like we're doing right now.

My only concern now and is when this will land on Fenix Nightly. You have the secret settings aspect, I think it's worth making it here, so that only people who really want to test it will activate it.

[madb1lly]

Hello @violasong, It's great to see some progress being made on this, thanks 👏

Things I like:

• Top sites accessible by thumb
• Bookmarks and history quickly accessible
• Synced tabs and recently closed tabs in history

Things I think could be improved:

• Moving top sites down low but leaving the switcher between the libraries up high doesn't make sense to me; if we're trying to make things usable one-handed then the switcher should be lower down too
• Collections appear to be missing at first glance, it's not obvious that the screen needs to be scrolled to show them
• Why not add collections to the library switcher as well?
• Should the location of the top sites, switcher etc depend on the location of the address bar? Ultimately, if you can make it all configurable that gives people the choice to mix and match how they like
• Downloads could have it's own tab in the switcher, although I agree with you that it is technically history
• Currently open tabs could be another tab in the switcher?
• I agree that the location of the private browsing icon is not where I was expecting to find it at all (it's now at the opposite corner!)

What about further optional additions to the homepage like:

• Recently used bookmarks
• Recent browsing history
• Pages saved in Pocket
• Mozilla, Firefox or Pocket highlights?

I also see that there is a change to the top sites icons from square to round, is this an indicator of a future change?

I presume the colour shading in the last pic is just to indicate areas and nothing else.

Cheers 🙂

Edited because my "wild idea" is actually what you were thinking of doing anyway! 😆 I really should pay more attention when reading...

[davidmegginson]

Hi all!

Seeking feedback on the following MVP design, meant for the next engineering sprint.

* This includes the Fennec concept of Bookmarks/History as homescreen tabs that can be swiped to for easy access

* History tab will now have entry points into Synced and Downloads, so the whole library will be accessible from the homescreen

* This moves the top sites down to where they are reachable by thumb. Thanks to u/Behave_or_else for the [inspiration](https://www.reddit.com/r/firefox/comments/islbb9/added_some_flair_to_firefox_for_android_and_some/).

* The goal is adding easy access to library while still keeping the homescreen looking clean and approachable.

* This mockup is not yet fully polished, so if you notice a little blurriness on some icons etc, not to worry. For the next few work days, I'll be refining and iterating these mockups based on feedback and user testing.

* The most helpful kinds of feedback: risks and edge cases I might not have considered, ways in which this design might be more difficult to use than the current Fenix, and small improvement ideas that could fit into our very tight timeframe for this release :).

Thank you for sharing that, @violasong. I'm not sure I understand the design just from the wireframes, so I have two questions for clarification:

1. Will I be able to designate "Bookmarks" as my default home page, so that whenever I open a new tab, I will see the "Bookmarks" page (2nd in your mockup)?
2. When I tap on a bookmark to open a link, then choose the back button, will I return to that bookmarks page?

[violasong]

Addressing a few ideas that have come up often:

I do have designs created for showing the homescreen when the address bar is focused. I need to discuss this more with the team but hopefully it could be in a later sprint.

The logo at the top with lots of space around it - this is to preserve a blank/minimal look for the default use case. For the majority of users, I want to avoid the homescreen looking like a control panel or dashboard where every bit of space is taken up. However, the homescreen should adapt to fit more things as needed, such as in the Collections example (to clarify, this is the state in which the user has 1 or more Collectons added) or via potential customizability in the future.

One change I've made already is moving the private window button to end of the top tabs.

Will be doing formal user testing today!

[violasong]

Latest mockups:

[klint]

Thank you, @violasong . Even better than before. One question about swiping, from what I understand:

• swiping on the green zone takes you to the current active webpage tab, right?
• swiping on the blue zone takes you to the Bookmark or private browsing tab (depending on the direction) My question: once on the bookmarks or private browsing tab, can the user go on swiping at the same spot as on the home screen to go to the history tab? And same question once on the history tab, in a circular manner?