search

mozilla-mobile / fenix

⚠️ Fenix (Firefox for Android) moved to a new repository. It is now developed and maintained as part of: https://github.com/mozilla-mobile/firefox-android
https://github.com/mozilla-mobile/firefox-android
Mozilla Public License 2.0
6.47k stars 1.27k forks source link

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

Closed vesta0 closed 3 years ago

vesta0 commented 4 years ago

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

┆Issue is synchronized with this Jira Task

Matth7878 commented 4 years ago

Vertical alignment feels weird. There is far more space above Firefox logo than below. It especially unsettling with collections where there is a big white space at top in detriment of how many collections fit at bottom. I really don't like your choice about how to display Firefox logo. It's really too prominent yet it's something that's only aesthetic and have no use.

Anyway thanks for your work.

kleinph commented 4 years ago

Looks great, but two notes:

terr72 commented 4 years ago

@violasong Just a tiny improval request about the bookmarks mockup: the "add folder" entry typically isn't used on a regular basis, hence it might be better positioned at the end of the list or as icon-only to the right of the Bookmarks header text. Otherwise it constantly eats up screen space as full entry on the top.

ZorroGuevara commented 4 years ago

@violasong well that's very good! I can't wait to test it, it's really a huge improvement!! For the "delete history" I hope it has a confirmation popup. It's too easy to miss tap and delete history. Cheers. Any ETA for landing on Nightly?

SuryaNJena commented 4 years ago

Hey I was wondering if there is a way to search within the history page cuz I couldn't find any way to search within the history page.

violasong commented 4 years ago

Latest version

homescreenmvp3
dglttr commented 4 years ago

@violasong Thank you very much for keeping everybody up to date here! One really sees the improvements with every new version :) Some additional questions on the new designs:

klint commented 4 years ago

Thanks again But again, I am a bit worried about the zone to swipe between homescreen tabs in cycle. This zone should be reachable with the finger (on bottom url bar mode), and present on all tabs at the same location. I don't think this is the case now (bookmarks entries have their own swiping). So here is a nasty suggestion 😊: could the 4 tab icons be moved from the top to just above the address bar, and this would be the swiping zone?

JoGarWeb commented 4 years ago

Taking advantage of the change, why not the downloads tab?

mobd commented 4 years ago

It's looking great! I'm just wondering about swiping on the toolbar to access a tab, would it work both ways as suggested in #13809? Ie swiping left/right from the homescreen would open the first/last tab in the tab tray, and swiping left/right from the last/first tab would go to the homescreen again. Or is it only the first use case?

madb1lly commented 4 years ago

Hi @violasong,

Thank you for sharing the evolution of your design, that's definitely in the spirit of open 😃

It's not clear to me how swiping between the homepage tabs will work on the history, bookmarks and private browsing tabs.

Please can you add synced tabs back into the history tab? This is an important part of "history" which I tend to use reasonably often.

Downloads are now accessed by the menu like currently?

Cheers 🙂

cadeyrn commented 4 years ago

Please can you add synced tabs back into the history tab? This is an important part of "history" which I tend to use reasonably often.

Why? Synced tab will already be integrated in the tabs tray. I don't see how it belongs to the history.

klint commented 4 years ago

Please can you add synced tabs back into the history tab? This is an important part of "history" which I tend to use reasonably often.

Why? Synced tab will already be integrated in the tabs tray. I don't see how it belongs to the history.

Maybe not in the history, maybe it could deserve its own homescreen tab, but the current location is not very useful to me, as you have to scroll down all open tabs (and the list can be long) before reaching the sync tabs in tab tray...

And by the way, I'm dreaming of the tab tray as yet another homescreen tab as well (in addition to the tray view), all homescreen tabs being easily swipable in loop (but wait, that's Fennec again 😋, only site tabs are in list not on grid...although that could be user configurable )

terr72 commented 4 years ago

@violasong Thank you for minimizing "Add folder" to icon-only. It would be great if you could also consider an option in the settings to hide the folder "Desktop Bookmarks" for people who don't use Sync at all. That would free up screen space as well.

cadeyrn commented 4 years ago

but the current location is not very useful to me, as you have to scroll down all open tabs (and the list can be long) before reaching the sync tabs in tab tray...

This is not the final position. The synced tabs will be a third tab in the tabs tray, see #14117 and https://app.abstract.com/share/c6bd0c2f-8384-44f3-ba59-4946d8cea469?collectionLayerId=ec285dbe-88bf-41cc-a531-49aad233b5ae&mode=design for the design.

klint commented 4 years ago

Thanks @cadeyrn I was getting confused between homescreen tabs and tab trays "header tabs" (the word "tab" in "tab tray" is confusing as well 😉)

gurmeetim commented 4 years ago

Nice and better than previous.I want to say For top sites First press v button then scrolling.Why not only scrolling to access all sites.Give accessibility setting of top sites.1)Fully expanded like in 3rd image 2)on the bottom like first image(with v Button) Give not limit for ading top sites.As most of the user not happy with current limited16 sites.

cadeyrn commented 4 years ago

Why not only scrolling to access all sites.

How should this work with collections below the top sites?

I noticed that the "Firefox Browser" logo was replaced with the "Firefox" logo in the latest mockup. To be honest I really like the "Firefox browser" logo. It uses more horizontal space and therefore looks less like wasted space. But I guess there was a reason to change it. Does it confuse some people or do you feel it's needless to call it "Browser" in the logo?

The height of the logo also increased a bit. Not much but it's not necessary. People know that they're using Firefox anyway, a smaller logo would be sufficient. Maybe you increased the height to compensate the smaller width due to the change of the logo? 😜

gurmeetim commented 4 years ago

Why not only scrolling to access all sites.

How should this work with collections below the top sites?

I noticed that the "Firefox Browser" logo was replaced with the "Firefox" logo in the latest mockup. To be honest I really like the "Firefox browser" logo. It uses more horizontal space and therefore looks less like wasted space. But I guess there was a reason to change it. Does it confuse some people or do you feel it's needless to call it "Browser" in the logo?

The height of the logo also increased a bit. Not much but it's not necessary. People know that they're using Firefox anyway, a smaller logo would be sufficient. Maybe you increased the height to compensate the smaller width due to the change of the logo? 😜

How should this work with collections below the top sites?

Good point.Collectìons r always below the top sites.By scrolling they r still accessible.This could be optional and benefited users who uses top sites more than collection.

madb1lly commented 4 years ago

Please can you add synced tabs back into the history tab? This is an important part of "history" which I tend to use reasonably often.

Why? Synced tab will already be integrated in the tabs tray. I don't see how it belongs to the history.

Would have been more respectful 😉 to just say there is a future plan to make synced tabs available in the main tabs tray. I was thinking about this new homescreen in isolation and without considering any other promises for future as-yet-not-implemented features.

Cheers 🙂

delxg commented 4 years ago

Hi @violasong, thanks for sharing these.

I never use top sites or collections because these do not sync across my laptop, tablet and phone. In the old Firefox I could configure the home screen to show only bookmarks and history, defaulting to bookmarks.

Will this be possible in the new design?

cadeyrn commented 4 years ago

Would have been more respectful 😉 to just say there is a future plan to make synced tabs available in the main tabs tray.

How is asking a question, explaining a future plan and commenting that I don't think that synced tabs belong to the history not respectful? Sorry, I don't understand how your comment can fit as an answer to my comment. There was nothing disrespectful and no violation of the CPG at all. And if you look at my other comments, you will see that they are all constructive and solution oriented. 🤔

black7375 commented 4 years ago

@violasong

It's really cool!!

There are some things I would like to improve. Assume various web pages as one application.

This proposal is https://github.com/mozilla-mobile/fenix/issues/12065#issuecomment-697009117 's home tab part improvement plan, Not to get rid of Bookmark and History tab!!

Like a launcher

The first list is the same as Launcher's Home or Dock.

You should be able to keep the same items unless you modify them. Users remember their location.

Except for the basic items, it should not be added automatically like the app drawer. In fact, I'm not happy with Desktop Firefox either.

Samsung Internet's Quick access is a best practice. Samsung_Internet-QuickAccess

You only need to display those that have already been pinned, so you don't need a pin icon and it can be neat. I'll call it Pinned below.

Highlights

It has expanded the above.

Now, you can ask: How can I display my top visit history?

The answer is simple. Create a space that lists the items you expect to visit frequently.

You can place the number of visits, the date of visit, etc. according to the ranking algorithm. I hope the bookmarks have a higher priority than the history. You can also consider how to recommend domains.

F&A: What is the layout of Pinned, Collections, and Highlights? Just follow Fennec's method. Fennec-0_Home

In Private Mode

It would be nice to have a useful dashboard while using private mode.

I think Fennec and Opera are good examples. Fennec-1_Private_Home

Imold commented 4 years ago

@violasong

* **Order:** Place `Pinned`, `Collections`, `Highlights` in order.

You for got about bookmarks, their the only thing that maters to me.

black7375 commented 4 years ago

I don't know if I understood exactly, but let me just tell you...

Bookmarks are like installed apps. Surprisingly, there are many people who do not organize their bookmarks and just add them. They need pinned and recommended features that are easy to use.

  • Order: Place Pinned, Collections, Highlights in order.

A suggestion for the layout inside page Home. Tabs Bookmark and History are independent.

It would be a good idea to create and manage a Pinned folder in bookmarks.

ghost commented 4 years ago

If I am unable to have as my home page bookmarks, then the home page is useless for me as I don't keep history, collections, highlights, or top sites. At the moment it's a blank page with just the search bar. Having bookmarks with the search bar as my home page would make it useful!

Imold commented 4 years ago

I don't know if I understood exactly, but let me just tell you...

Bookmarks are like installed apps. Surprisingly, there are many people who do not organize their bookmarks and just add them. They need pinned and recommended features that are easy to use.

  • Order: Place Pinned, Collections, Highlights in order.

A suggestion for the layout inside page Home. Tabs Bookmark and History are independent.

It would be a good idea to create and manage a Pinned folder in bookmarks.

Bookmarks are not like installed apps, a web browser is not an android launcher. A browser should work like a browser. Do you even use firefox sync? The whole point is that my bookmarks sync with my desktop browser, my phone is for when I don't have my PC.

black7375 commented 4 years ago

I only supplemented Home from https://github.com/mozilla-mobile/fenix/issues/12065#issuecomment-697009117 So you can use even Bookmark and History.

There is already a bookmark page with a search bar in the original.

ghost commented 4 years ago

I only supplemented B from #12065 (comment) So you can use even Bookmark and History.

There is already a bookmark page with a search bar in the original.

Unfortunately the new Fenix version has removed this, and such, the new Remix version is severely flawed for my use. I would have kept the old version, except Mozilla didn't give me a choice.

black7375 commented 4 years ago
  1. Bookmark

    Bookmarks are not like installed apps, a web browser is not an android launcher. A browser should work like a browser.

Yes. I know it's different. However, I think that a menu that does not change is indispensable in order to quickly access the items you want from many lists.

It's different from the app, so we also need Highlights based on the Bookmark(High weight) and History(Low weight). This is a dynamic.

  1. Sync

    Do you even use fire fox sync? The whole point is that my bookmarks sync with my desktop browser, my phone is for when I don't have my PC.

If all are pinned and synced with Topsites on the desktop, I don't think there is a big problem.

black7375 commented 4 years ago

Unfortunately the new Fenix version has removed this, and such, the new Remix version is severely flawed for my use. I would have kept the old version, except Mozilla didn't give me a choice.

I agree very much. I wondered why there were no Bookmark and History tabs.

My suggestion is just a way to make Home tab better. The two tabs mentioned earlier must be put and are priority.

I think I misunderstood because the text is not clear. I'll fix it for expansion.

Imold commented 4 years ago

If all are pinned and synced with Topsites on the desktop, I don't think there is a big problem.

Except I don't have/use Topsites on the desktop, just bookmarks. I use Quick Dial for my home/newtab page. Topsites won't work as a substitute for bookmarks

ghost commented 4 years ago

I don't have top sites on the desktop and use Sync. I order my bookmarks menus on the desktop and the Fenix version shows that order. As I use a tablet most of the time, I need my browser to have the right user experience. At the moment the Fenix experience is less than adequate. It's got potential, but I am not sure how long it will take until the experience becomes good.

@violasong - please consider letting the content of the home page be user customisable. Such as it only having what was in the previous version of bookmarks and search

black7375 commented 4 years ago

Currently, mobile Topsties and Bookmark are separated from Desktop. Then wouldn't it be okay if Pinned(Topsites) is also separated?

In my opinion, Pinned is the same as DockBar that only selected important elements from Bookmark. It's not a substitute, it's a representative of them.

klint commented 4 years ago

You lost me 😊. But I still don't get why users are reluctant to using site shortcuts organized on Android's launcher pages and groups. Why repeating in a browser what the launcher does far better? I'd prefer more browser specific features.

black7375 commented 4 years ago

You lost me 😊. And I still don't get why you don't want to use site shortcuts organized on launcher pages and groups. Why repeating in a browser what the launcher does far better? I'd prefer more browser specific features.

You mean the Android launcher? Pinned is available by simply entering a new tab.

Launcher shortcut refers to the entry point when you turn on the browser, and it is inconvenient to run again after that.

Imold commented 4 years ago

You lost me 😊. But I still don't get why users are reluctant to using site shortcuts organized on launcher pages and groups. Why repeating in a browser what the launcher does far better? I'd prefer more browser specific features.

I'm not reluctant I just have no use for it. Bookmarks on the other hand are more useful and sync with my desktop. Synchronization between PC and mobile is the most important thing, and only bookmarks can make my workflow work.

black7375 commented 4 years ago

I'm not reluctant I just have no use for it. Bookmarks on the other hand are more useful and sync with my desktop. Synchronization between PC and mobile is the most important thing, and only bookmarks can make my workflow work.

According to Reddit's suggestion, there is talk about making the bookmark folder also available for reference. You can easily access even nested bookmarks.

What do you think?

JohannVII commented 4 years ago

@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.

To be clear, you couldn't start with the old CODE; you very much could have started with the old DESIGN. Yes, you would be building new code to replicate that design, but the layout, options, etc. are all already right there in Fennec. Including the option to completely disable features if one didn't like them and found them to be clutter, which is now NOT possible in Fenix (Collections, for example, even when disabled from display on the only place they're actually viewable and usable, the home screen, show up in places like the tab manager's "Save to collections" button, which I would like to disable because I don't need tab collection management and do use bookmarks as a more robust way - tagging, editing display name, editing URL, etc. - to save pages I wish to visit again).

@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](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 appreciate your responses and willingness to take feedback to heart!

I do see something concerning about the plan you posted. You know that your privacy-focused users - the user base Mozilla has been specifically marketing to for a while now - disable call-home features like telemetry collection (and invasive push functions like experiments and surveys), right? If you're basing your decision-making primarily on data gained from directly monitoring user action, you're actively restricting your data set to users to whom you're not primarily trying to cater. That actually explains a lot of the design decisions and backlash with Fenix - you (not you personally, the collective "you" of the development team) actively excluded your primary target user base from consideration. This wouldn't be as big of a problem if it excluded a random sampling of users, but because it excludes a specific subset that are going to have similar habits to each other, you're badly biasing your data with the collection method.

This entire approach is wrong for Mozilla; it works for Google or Microsoft because they're INTENTIONALLY trying to exploit users who are willing to trade privacy and security for something that "just works" and alienate everyone else (because those users are not exploitable in the way that drives the company's revenues, so it's more valuable to not have to support them at all by prompting them to self-select out of using the software; it's the same thing that e-mail scammers do - it's not worth wasting time with suspicious, savvy users, which is why so many scam e-mails INTENTIONALLY use misspellings, absurd claims, etc., so they can focus on people who have shown themselves to be people who will ignore red flags for scams and respond), so unless Mozilla is changing its mission, using data mining/harvesting to drive design decisions is actively counterproductive. As @xobs notes, you're also missing data from people who LEFT Firefox over the UI changes and feature regressions introduced with Fenix or who have stayed on Fennec (which I'm doing as my primary mobile browser while testing UX on the Fenix beta, as I plan to switch over primary browsers once it's acceptable to me), while retaining existing/former Firefox users should be a major consideration if Mozilla is hoping to expand the user base.

That out of the way, the posted mock-up looks MUCH better to me. It does invoke a pervasive UI problem that has shown up in a number of cases related to the address bar location customization: related interface elements don't move with the bar.

Here, the icons for the different sections/pages/tabs of the Home view should move to the bottom with the bar (or to the top for a top bar setting) so they are accessible without traversing the screen (especially important for one-handed operation on larger devices, which was the point of allowing a bottom bar in the first place). The tab manager shade has some similar problems - it's designed exclusively around a bottom-bar assumption, so it pulls up from the bottom (not a functional problem, but visually incongruous if the bar is at the top) and puts the new tab button at the bottom (which is a functional problem, as people with a top bar position can't quickly and conveniently tap twice to open a new tab as in Fennec; the solution offered by one of the top Fenix UI design apologists in Reddit has been to note that long-pressing the tab manager button brings up a context menu from which a new tab can be opened, which is not intuitive, as things that look like buttons don't usually have associated context menus, and still takes longer than opening a new tab in Fennec because of the time delay on a long-press). Interface elements should be positioned based on the address bar position selection throughout the application; the current approach will leave new users searching for the location of controls on every new interface element (because there isn't a consistent location for them) and will still leave experienced users moving their fingers around more than necessary or being unable to use one-handed control because the controls aren't grouped together in all cases (or only are for one address bar position option).

@klint

You lost me blush. But I still don't get why users are reluctant to using site shortcuts organized on Android's launcher pages and groups. Why repeating in a browser what the launcher does far better? I'd prefer more browser specific features.

Because some users wish to maintain separation between locally-installed applications and websites, even as many developers are trying to collapse the distinction entirely (first with apps shifting to primarily online data storage, then with the PWA model, whether it's accessing a website-as-application through a bundled Webkit/Chromium distribution as a separate app or through a full web browser like Firefox). I have many, many objections to the PWA model along multiple axes of consideration (much more than would be appropriate to elaborate here), so even as I recognize that it's the direction application development is heading right now, I don't have to be happy about that or support it (ditto for perpetual development hell i.e. SaaS, which is interrelated with websites-as-applications).

klint commented 4 years ago

@JohannVII I was not talking about PWA, merely about good old site shortcuts. The only feature I miss in that area is the ability to create a simple shortcut when the site is also available as PWA.

kleinph commented 4 years ago

I think the discussion goes a bit out of hand here.

I really like the latest mockups of @violasong and I think it solves most of the criticized points:

For me only two things are missing:

So maybe we should wait for the first implementation to arrive in Nightly.

klint commented 4 years ago

@Imold

I'm not reluctant I just have no use for it. Bookmarks on the other hand are more useful and sync with my desktop. Synchronization between PC and mobile is the most important thing, and only bookmarks can make my workflow work.

Page shortcuts on the Android launcher and bookmarking/sync are not excluding eachother, on the contrary. It's just a couple of clicks more to bookmark a page after adding the shortcut. And not something I do 50 times a day, so I don't care about those extra clicks (but apparently, people are whining about extra clicks A LOT!! :P). Anyway, we should have the possibility to do both: add any page to the launcher and use bookmarks, so that everyone's happy.

@black7375

You mean the Android launcher?

yes I do. In my own experience, the Android launcher offers unmatched capabilities to organize my top sites/most accessed bookmarks. And it is even a click less to launch them :)

davidmegginson commented 4 years ago

@Imold yes I do. In my own experience, the Android launcher offers unmatched capabilities to organize my top sites/most accessed bookmarks. And it is even a click less to launch them :)

Unfortunately, that triggers another issue: https://github.com/mozilla-mobile/fenix/issues/15495

Imold commented 4 years ago

@klint

Page shortcuts on the Android launcher and bookmarking/sync are not excluding eachother, on the contrary. It's just a couple of clicks more to bookmark a page after adding the shortcut. And not something I do 50 times a day, so I don't care about those extra clicks (but apparently, people are whining about extra clicks A LOT!! :P). Anyway, we should have the possibility to do both: add any page to the launcher and use bookmarks, so that everyone's happy.

😕? I guess there was some confusion on what was being talked about. I thought we were talking about Top Sites and Collections on the Firefox home/newtab page, not page shortcuts on the Android home screen.

black7375 commented 4 years ago

@kleinph

access to Synced tabs and Downloads in the history tab, like it was in the first mockup

Wouldn't it be better to approach Synced Tabs by pressing Tab Menu? It seems to be consistent.

The following is an example of the screenshots of Vivaldi & Opera. Vivaldi-0_Tabs Opera-0_Tabs

klint commented 4 years ago

I thought we were talking about Top Sites and Collections on the Firefox home/newtab page, not page shortcuts on the Android home screen.

Sure, that was only a side discussion. Main topic here is to bring a newer and richer experience on the Fenix homescreen for everybody, including those who use bookmarks, history and top sites, and those who don't (like me...as URL suggestions based on history and bookmarks, plus Android shortcuts as top sites are largely enough for my "workflow").

violasong commented 4 years ago

Hi all, I've been taking a step back from my previous homescreen "MVP" to explore more concepts. These aren't standalone proposals, but rather different examples to help guide our discussions. Are there any other concepts I should mock up?

Figma source - feel free to fork

Screen Shot 2020-10-01 at 6 45 05 PM
mobd commented 4 years ago

Some of these look very promising! Is the idea of the mockups having open tabs there that the home screen would replace the tab tray or supplement it? The first makes the most sense to me but in the designs it seems like these are meant as a quick shortcut for when a user opens the app

ghost commented 4 years ago

@violasong Can you please mock up the old home screen that had the awesome bar and bookmarks. Anything with top sites and collections is useless to me. I have removed all top sites, recommended sites and collections. So if others do the same, and it appears many do, it's an important use case that has been missed

andreicristianpetcu commented 4 years ago

My usual workflow is open new tab, click on pinned site so anything that shows pinned sites is fine. Currently I long press tab counter just to bypass the search with the search engines. My search workflow starts from the home screen widget or from the current tab, not from the new tab. I tried using colections but it's a hard sell. Being able to see some of the opened tabs is a nice to have on the new tab button. I like 32 quite a lot. Not that aestetic but quite functional.