UI/UX Request: Make Tab Preview Fade In


#1

Hey, just a suggestion to make Tab Previews a bit better - how about having Tab Previews fade in when the tabs are selected?

I think a reason why Tab Previews are disliked so much is because it is a bit jarring. It feels like the tab was accidentally clicked when no click was made. So having a fade-in animation to the tab may better convey that they are looking at a preview instead of it feeling like something buggy and unexpected occurred.

Thoughts?


#2

Hi @dragespir to be honest I personally don’t think that was the purpose of the preview feature to begin with. I think it was implemented to give users an instantaneous view of the numerous tabs without actually entering the page and rather than clicking on one tab after the other as well as avoiding accidental closures and reopens (if that make s sense) of tabs when you’re skimming through dozens of tabs.

I should mention that the feature is currently buggy and has already been apprehended by one of the engineers and should soon see it fixed in the next update.

Considering my description of the preview option, do you still believe having it fade in would be a benefit to users as I still think it would just waste time? Not to sound rude, perhaps you’re experiencing the bug mentioned above or a bug and don’t realize it.


#3

I see… Thank you for the input and clarification for its intent. However, from a usability standpoint, having an instantaneous flip to a different tab from just a hover action seems like it would be confusing no matter the target purpose. Let me also add to what I meant by “fade-in animation”. So when I say to fade-in, I don’t mean something that takes 0.5-1.0 seconds to animate. I’m talking about approximately 0.10-0.25 seconds for the complete animation to start and finish. (final timing adjustments should be made by whoever is governing UI/UX for the team)

I understand that the purpose is to “preview,” which is why a fade-in animation is necessary to convey that concept. The best existing example that you may be familiar with is on Windows Vista/7 OS, when you have multiple windows open and layered on top of each other: When you hover your cursor over an icon on the Start bar that is not the current top-window, a preview thumbnail comes up. And then when you proceed to move your cursor over that preview thumbnail above the start bar, all top-layer windows fade out to reveal the one the cursor is pointing to in the thumbnail. You can see that the feature also acts as a “preview” option, and they successfully implement an animated fade-out to convey the sense that the window being shown is merely a preview, and that there are still windows stacked on top. (I am not sure if this feature is still existent on Windows 10)

Maybe whatever “bug” is in the current version will fix it, so I don’t mind waiting to see what the engineers come up with. But having been working with UI design for a bit (in apps mostly), my professional opinion is that some kind of quick fade animation would best convey a “preview” concept, especially for the tabs in this case.

Let me know your thoughts!

Edit: @Numpty So if I were designing this feature, I would say:

  • Mouse hovering over non-current tab triggers fade-to-tab animation
  • Animation lasts 0.10-0.25 seconds (requires testing for best “preview feeling” for timing)
  • The end preview state of the tab is slightly dimmer, possibly RBGA value of (0.9, 0.9, 0.9, 1.0) but also requires UX testing with various kinds of webpages to fade into to find best values for “preview feeling”

#4

If you have a nice proposal, please open an issue on our GitHub repo to discuss further. They do not always see the community.


#5

Ah! I know what you mean.

It’s sort of like the new ‘Task View’ feature in Win 10 as well (the motion of lower left icon with three square)

Ironically, I’m actually typing up a post related to this but in regards to the taskbar/tabbar, I’ll post you a link of it and the the link pertaining to your issue from Github after I update the comments linking your suggestion, unless you’re going to.


#6

Hi @suguru we posted almost literally at the same time.

I was considering updating the comments of @dragespir suggestion in - https://github.com/brave/browser-laptop/issues/11632 because it seems like an easy fix (very rich of me to say I know) but also because there far less issues in the milestone so hopefully it can be taken into considering rather than being pushed into the backlog.

Do you reckon it would be alright if I did?


#7

Thanks @Numpty and @suguru for getting on this! Please do go ahead and make the update on Github! Thanks!!


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.