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

Chrome like card UI based tab switcher to navigate between tabs #3758

Closed 1oh1 closed 1 year ago

1oh1 commented 5 years ago

Why/User Benefit/User Problem

Right now switching between tabs means navigating through a list of opened tabs. This type of navigation is unwieldy when the user has 20+ tabs open and quickly needs to switch between them based on the page content of opened tabs

What/Requirements

The requirement is for a card based UI that shows up on swiping up from the tab count button. The user should be able to look at the tabs they've opened here with each tab showing up as a card. Each card would show a preview of the site opened in that tab with an option to close that tab. On tapping anywhere on a card, the user switches to that tab. Subsequently swiping up from the tab count button, the user is displayed the card based tab switcher again but the card they selected previously is the one that's selected.

Acceptance Criteria (how do I know when I’m done?)

When the feature looks similar to the one currently implemented in Google Chrome for Android

┆Issue is synchronized with this Jira Task

cadeyrn commented 5 years ago

While I am sure that the tab management can be improved for users with many tabs I disagree with the proposal to imitate Chrome. In my opinion the UI from the "old Firefox" aka Fennec is much better than the UI from Chrome. The UI from Chrome "looks nice" but is not practical because you don't see much more than one single tab without swiping.

PiotrSss commented 5 years ago

I think that Opera Mobile has perfect UI in that regard, you can see both big screens and smaller ones below them, both swipeable and clickable.

cadeyrn commented 5 years ago

Better than Chrome but also not really more useful than the Fennec UI. In Fennec I see always 6 full and 2 half thumbnails plus the page title at the same time and without swiping. Yes, less thumbnails as in Opera Mobile, but more useful (because bigger) thumbnails and the page title is the really important information. Also the current Fenix UI is more useful for me than the Opera Mobile UI because of that.

navidRashik commented 5 years ago

When we use current desktop browser we can't see the full name of the tab so users are not used to have that feature rather preview mode is more useful while switching the tab... I didn't knew opera build that ui for tab but it seems perfect...

kumarharsh commented 5 years ago

Knowing the title of the tab is very useful to me - I read a lot on the web, and when I have 30-40 tabs open, I don't remember what I read and didn't read. I had turned off the compact tabs setting in Fennec, and could see the whole title which aided in helping me decide which tabs to close.

That said, the current design in Fenix could use some improvement:

cadeyrn commented 5 years ago

When we use current desktop browser we can't see the full name of the tab so users are not used to have that feature

It doesn't make much sense to compare a smartphone UI with a desktop UI, but on desktop there are tab titles in every browser I know. Yes, it can be truncated, but it's the same with mobile UIs and it's still an useful information. So I don't understand your comment…

I didn't knew opera build that ui for tab but it seems perfect...

It looks nice (as the Chrome UI) but it's far from "perfect". Both the Fennec and the Fenix UI are more practical for working with many tabs because both has relevant information for more than only one tab without swiping. I don't say that either the Fennec or the Fenix UI are perfect, but neither the Chrome nor the Opera solution are clear improvements compared to the current UI of Fenix. They look more modern but I miss the clear advantage. So whatever Mozilla wants to do they should invest in a solution which has clear advantages and not only imitate another browser.

Maybe it could be a solution to combine the advantages from both worlds: Make something similar to the Opera UI but with smaller thumbnails so that the thumbnails don't need the whole screen. The user can swipe to the left and to the right to see all the tabs and a thumbnail of every tab. And provide a simple list with only favicon, tab titles and close button below the thumbs slider (of course a gesture for closing tabs should also work in the list view).

There will be some redunancy with my proposal so it's probably also not a perfect solution but it's another approach and maybe an inspiration for other ideas.

neekless commented 5 years ago

Coming from a user who switched from chrome, I have to say when there are many tabs open, it's much easier for me to recognize a tab from its thumbnail than from its title/favicon, especially when it comes to multiple tabs from the same domain.

I believe something like this could be viable chrome-grid-tab-switcher-2

cadeyrn commented 5 years ago

@neekless: this is very, very similar to the tab switcher UI of Firefox.

madb1lly commented 5 years ago

I use compact tabs in Fennec and navigate based on the picture rather than the title, although the title helps. I have >100 currently open (I have the infinity symbol so don't know how many!) - yes this is too many, but it illustrates why a thumbnail is helpful. Its absence in Fenix is a problem for me which even collections don't mitigate (mainly as they are unwieldy).

I've never used Chrome on Android nor Opera (but thanks for showing the picture of the tab switch UI, looks nice).

Would zoom in/out by pinch/stretch work on the tab switch page with compact tabs, so they can be resized? Would Fenix cope with the quick graphical changes?

How about a graph layout, like the now-defunct Lightbeam extension for desktop? Each graph would be the tabs opened from each other and panning around this landscape could be a quicker way to navigate... collections could also be more easily integrated.

ghost commented 4 years ago

https://github.com/mozilla-mobile/fenix/issues/12853#issuecomment-663122525, @Dunexus

Why chrome tab switcher is much better than fenix tabs tray, Part 1 -

IME, closing a tab is very frequent operation. So, let's see how much effort it takes in chrome vs fenix.

Chrome - In chrome, I click the tab icon, and the tab switcher opens. The icon for closing the tab is almost directly beneath the tab switcher icon. So, how much effort does it take to close a tab? => almost zero.

vs

Fenix - In fenix, click the tab icon to open the tab tray. The tab tray opens miles beneath the tab switcher icon. See the difference in the images? Now, I have to move my hand, or use my other hand to go dowwwwwn and close a tab. Or I have to slide the tab tray upppppp and then close the tab. It is annoying and a time waste when you are a heavy user of tabs.

ghost commented 4 years ago

Why chrome tab switcher is much better than fenix tabs tray, Part 2 -

Now, consider the same scenario as above, but with multiple tabs.

Chrome - I swipe once, all the tabs get overlayed one on top of the other, and the distance between between tab switcher icon and the close button as well as the effort taken to close a tab => almost zero

vs

Fenix - I swipe once, the tab tray takes up the whole screen instead of half the screen. If I have more tabs than the tray can display at once, I need to swipe till I find the tab that I want to close. So atleast two swipes instead of one. And still the distance between the close button and the effort taken to close the tab => too much.

ghost commented 4 years ago

Why chrome tab switcher is much better than fenix tabs tray, Part 3 -

Same argument as above, but for opening a new tab.

In chrome, I do not need to move my hand to open a new tab from the tab switcher because they are on the same row, and most phones are narrow enough for items on the same row to be usable by a single hand.

In fenix, I do need to move my hand to open a new tab from the tab switcher because the tab switcher is on the top and the new tab icon is on the bottom and most phones are long enough for this operation to require movement of hand.

ghost commented 4 years ago

Well, the effects of the three issues I have mentioned above are somewhat (not good enough) minimized if we use the bottom bar instead of top bar. However, these issues are extremely frustrating for a person who likes the top bar, and is used to having a quick workflow thanks to chrome.

Also, there are plenty more usability issues in the tab tray stopping me/other people from having a fast workflow (A lot of people love the current tabs tray and hate the chrome's tab switcher because google but let's be honest, performance isn't the only reason chrome is the most used browser, it does allow for a pretty fast workflow). Hopefully, the tab tray gets removed, because I do not see how those issues will get fixed in it. If the tabs tray can support a fast workflow, I would be more than happy to use it. However, as of now, it is very bad in comparison to chrome.

Let's not dismiss the possibility of having a chrome like tab switcher just for the sake of being different (even though different here means being worse).

ping @topotropic, because you are the only ux person I know about!

cadeyrn commented 4 years ago

Were four comments instead of one within a few minutes really necessary? It caused four notifications for only one opinion...

Why chrome tab switcher is much better than fenix tabs tray

In my opinion the chrome tab switcher is terrible and not better at all if you have more than two or three open tabs. In fact Chrome is unusable for me because of the tab switcher, so I couldn't disagree more with this statement…

madb1lly commented 4 years ago

Hello @sheepycoder,

I don't find the issues you show to be a problem, but for reference I use the nav bar at the bottom. Maybe if the tab tray switches to being drop down if the nav bar is at the top this will help.

Opening a new tab with the nav bar at the bottom is super fast, basically just a double tap!

In the Fenix tabs tray I can more quickly close tabs which are not the current tab because several are visible at the beginning, vs Chrome where it appears that only the current tab is quickly accessible. The tabs tray also provides quick access to selecting and saving to collection (but I wish it also allowed saving to bookmarks and sharing, maybe these are on the to-do list).

If things require movement of a hand then maybe you can use more than one finger? The Android UI is multitouch for a reason.

The current tabs tray is not perfect, but I think I prefer it to the previous arrangement where they were on the home screen and I certainly prefer it to the examples from Chrome you showed. I currently still prefer the compact tabs grid layout in Fennec, but atm that seems to be out of favour.

Cheers 🙂

Dunexus commented 4 years ago

but I wish it also allowed saving to bookmarks and sharing, maybe these are on the to-do list

@madb1lly This is https://github.com/mozilla-mobile/fenix/issues/12012

If things require movement of a hand then maybe you can use more than one finger? The Android UI is multitouch for a reason.

For quick worflow, using one hand is faster and more intuitive.

Something I dislike about chrome is that you need more interactions to scroll through open tabs while fenix tab tray display many tabs directly.

ghost commented 4 years ago

Were four comments instead of one within a few minutes really necessary? It caused four notifications for only one opinion...

Was a comment to shit on somebody else really necessary? It caused another notification, only out of all these notifications, yours is only useless one, whereas I was asked to provide reasons why I prefers chrome's UI and I thought it better to keep it readable.

If things require movement of a hand then maybe you can use more than one finger? The Android UI is multitouch for a reason.

Please teach me!!! I hold the phone in my palm, so four of my fingers are wrapped around the phone. I am only left with a thumb to use my phone. And I only have five fingers on one hand. And as explicitly stated, I use a one hand workflow to work on my phone like most other people, and No, I am not willing to change it. Neither am I willing to use the bottom bar.

Tabs aren't the only UI issue with fenix, maybe it is because it is different than other apps in a lot of ways, or maybe in my subjective opinion it is really bad, I am only trying to provide my point of view regarding what I think are issues with the current stuff, so that people can think about it, and maybe improve it. I am not ordering anybody to change the featureset to something that I would like.

But in any case, it seems like feedback is not really welcome here, and most people would rather be stone-headed in their ideas of perfection and would like to shove it down other people's throats without bothering to give others viewpoints any thoughts. So, I won't be commenting anymore, or opening any more issues. I will wait and see how fenix turns out. If it is good enough, I will use it, otherwise I am happy to continue using chrome+blokada/adguard. And since my opinions don't really matter, I am pretty sure, the market share will let you know its opinion.

cadeyrn commented 4 years ago

Was a comment to shit on somebody else really necessary? […] yours is only useless one

I recommend reading the Community Participation Guidelines, "Be Respectful": https://www.mozilla.org/en-US/about/governance/policies/participation/

And no, a comment is not "useless" only because the author of the comment does not share your opinion. I explained why I disagree with you.

it seems like feedback is not really welcome here, and most people would rather be stone-headed in their ideas of perfection and would like to shove it down other people's throats without bothering to give others viewpoints any thoughts. […] So, I won't be commenting anymore, or opening any more issues.

Sorry, but such comments make it impossible to have a serious discussion. You really have to learn that different people have different opinions. There is no reason to feel offended only because some other users don't share your feelings about Chrome's tab switcher. There are so many users, so many different opinions and so many aspects of a browser and how it can/should/must work. It's the most normal thing in the world that people disagree with someone's opinion in a discussion about the future of a software product.

madb1lly commented 4 years ago

Hi @ghost, or @sheepycoder, I'm not sure which one is you now! 😕

Please try not to overreact to the way people reply to you. We're all coping with the immense disadvantage of only having the written word to communicate with each other - we can't hear the tone of anyone's voice nor see the body language. Therefore, it's better to give people the benefit of the doubt; let's focus on the topic and not the person.

I missed the bit where you first said "one-handed", so please excuse me - it's obvious that multitouch doesn't work one-handed (except by accident! 😆).

I have some sympathy with your general feeling that opinions on here aren't really always listened to, or discussed, but I'm sure that's a common feeling amongst beta testers in all sorts of projects. If we're not actively contributing code then we have to rely on those who do to share our opinions, therefore we have to try extra hard to influence them in a positive way. I'm personally not very good or successful at this either so I can't offer you any tips unfortunately! 😆

I hope you stick around and share your opinions, post bugs, etc.

Cheers 🙂

kbrosnan commented 1 year ago

This is a specific request that we have not implemented in 3 years. Chrome has moved from a card design to a grid layout for tabs. We are not going to move this over to the Bugzilla tracker.