[Suggestion VB-7506] UI improvement. (reverse coloring behavior)



  • I believe that could be a good idea to reverse the tab coloring behavior. I mean the the focused tab (maybe just the tab itself not the whole address bar), should be white (or with the faded main colour), so it can easily identified, while the inactive tabs should be coloured to understand, even on a crowded screen, what is the related page. What do you think about this ? Edit: I prepared a mokup to explain my idea visually [IMG]http://i60.tinypic.com/301eubp.png[/IMG]



  • I created an example of it, see attachment.

    I don't think it fits the address bar colors very well, as the selected tab (white) is a different color than what you think is selected (red). It's confusing.
    I guess it would work okay if the address bar would always be white (or whatever the selected tab color is). It would kinda work like IE have done it. I don't like it personally.

    I prefer the current way it's done, even though I end up disabling the feature.

    Edit: Attached images are being resized :( - Here's a raw image link: ColorExample.png
    Attachments:



  • IMO, the current coloring layout is ok, but there should probably be a filter, that either softens, darkens or lightens the colors, or at least an option for such a filter should be available.

    For instance the Red, that we get from vivaldi forums is way too bright. It's hurting my eyes, to the point that I'm considering using chrome just to use this forum… which would be really dumb.

    Yes I'm aware that the coloring option can be disabled, but that defeats the point of testing out the new software and features, and many sites don't have this brightness problem and actually make browsing that bit more interesting and dynamic.



  • Yes Eske, that's what I mean.

    Maybe a border on the focused tab could be worth.

    Anyway that's the basic idea that could be refined in a zillion of ways…

    P.S. for the images, just use tinypics (or a similar service) and then link the image here



  • @VincentMeier:

    For instance the Red, that we get from vivaldi forums is way too bright. It's hurting my eyes, to the point that I'm considering using chrome just to use this forum…

    Yea, I agree with this.
    I also get distracted by high contrast in colors when switching between tabs. If they are more subtle, I might enable the feature again.



  • I also get distracted by high contrast in colors

    As I said the concept could be evolved.

    Colors could be faded, colrors could be present only on the border of the tab, colours could be present only on a corner of the tab, and so on…

    In a flavour or another I consider the colour coding very helpful.



  • Added an example on the first post.



  • Maybe it's just me, but having just the active tab colored makes that tab pop, whereas having all of them besides the active tab colored makes it more difficult to identify the active tab. It also makes the UI look really messy to have all those different colors floating around all the time.



  • @Nanopy:

    Maybe it's just me, but having just the active tab colored makes that tab pop, whereas having all of them besides the active tab colored makes it more difficult to identify the active tab. It also makes the UI look really messy to have all those different colors floating around all the time.

    Well I believe, as usual, is matter of personal preference.

    But usually (Macos docet) a cleaner UI means also a less useful UI.

    My point is that you already know what is the active tab, but the color coding can be very useful to spot the inactive one you are looking for, especially on a crowded tab bar.

    Then as I said before the variations can be dozens, starting from a colored but less saturated bar, like the example 5 above.


  • Vivaldi Translator

    well, I would love to see coloured all tabs BUT something like that:
    active tab: 100% opacity
    other tabs: 50% opacity (or so)

    that would be easy to see what is active tab even when all are coloured since others are "not so coloured" (because of the opacity).

    see them all in 100% opacity is like "my eyes are not gonna make it". And see it all in grey is ugly too :)



  • @Nanopy:

    Maybe it's just me, but having just the active tab colored makes that tab pop, whereas having all of them besides the active tab colored makes it more difficult to identify the active tab. It also makes the UI look really messy to have all those different colors floating around all the time.

    I mostly agree with this. The only option in The_Solutor's original post that would be even somewhat workable for me is Option 2 (with the bold red outlining the white on the active Vivaldi tab. Option 4 is sort of the same idea, but the gray outlining just doesn't "pop" enough to catch my eye.

    But….

    @The_Solutor:

    My point is that you already know what is the active tab, but the color coding can be very useful to spot the inactive one you are looking for, especially on a crowded tab bar.

    …I can see what you (The_Solutor) are getting at with the colors of the inactive tabs making it easier to quickly pick the one you're looking for. This seems like we're really getting into the "skinning" arena here, and Olde Opera was incredibly skinnable. I don't know what is planned (if anything) for Vivaldi's skinnability, but for me the best option along the lines you have proposed would be to leave each tab its own color (active or inactive) and enhance the active tab in some way relative to the inactive ones, such as:

    • active tab has more pixels top to bottom
    • active tab retains full color saturation while inactive tabs get desaturated grayed (darkened) or fogged (lightened) color
    • active tab has high-intensity border around active tab, possibly with border thickness adding pixels to tab height
    • etc.



  • @gdveggie:

    This seems like we're really getting into the "skinning" arena here, and Olde Opera was incredibly skinnable. I don't what is planned (if anything) for Vivaldi's skinnability, but for me the best option along the lines you have proposed would be to leave each tab its own color (active or inactive) and enhance the active tab in some way relative to the inactive ones, such as:

    Yest that belongs to the skinning area too.

    But often the term skinning is more associated just with aesthetics, while I'm more concerned about ergonomics.

    While the two things are connected, one can have an ugly but functional skin or a beautiful but useless one.

    Obviously the best is trying to get something that looks nice and is also functional… :)

    but for me the best option along the lines you have proposed would be to leave each tab its own color (active or inactive) and enhance the active tab in some way relative to the inactive ones

    Yes, the variations can be hundreds, too..



  • @The_Solutor:

    But often the term skinning is more associated just with aesthetics, while I'm more concerned about ergonomics. …
    ...Obviously the best is trying to get something that looks nice and is also functional... :)

    I'm with you 100% there! B)

    Chropera's introduction of themes was fine, but equating themes with skins was absurd (frankly, I thought "bizarre" for a company that had provided such incredible skinnability in Opera 12.x and earlier), as themes were solely aesthetic.

    I checked out hundreds of available skins in Olde Opera, and while aesthetics were always important, there were key functionality features I looked for in any skin I actually retained for use (e.g., minimal toolbar and tab pixel height while still allowing for clearly readable text, clearly visible indicator/handle in scroll bars, toolbar icons that actually "made sense" to me, presence of suitable icons for particular specific custom buttons I used, etc.). Of those, perhaps the most important was how readily (& pleasingly) the active tab could be quickly identified, whether I had 3-5 tabs open or 85 tabs open.

    All 3 of your new options are good exampes to illustrate my suggestion about enhancing the active tab. Option 6 probably "pops" out at me the most, while Option 7 seems strong enough but more aesthetic; I would probably choose it (7) if its functional performance held up with 30-40 tabs open.

    …But I'm still wondering if this granular level (or any level) of "skinnability" is planned for Vivaldi. Do you know anything about that?


  • Moderator

    It seems to me that, given the way the UI is written, skinnability should be extremely flexible and granular.



  • @Ayespy:

    It seems to me that, given the way the UI is written, skinnability should be extremely flexible and granular.

    Thanks! :)

    I was thinking, and hoping, that would be the case, based on your reply to me here. ;)



  • Curiously enough something like the option 7 appeared in Vivaldi just the day after I posted that example, although not for the same purpose (a gray triangle marks the unseen tabs, now).

    Did you notice it?



  • Wow, until i read your post i was not noticing that feature. Contrast is very low so its hard to see it, but its super idea!



  • @SomiKnight:

    Wow, until i read your post i was not noticing that feature. Contrast is very low so its hard to see it, but its super idea!

    Yes there's also the single tab progress bar, which is nice (and not mentioned in the changelog too)



  • @The_Solutor:

    Curiously enough something like the option 7 appeared in Vivaldi just the day after I posted that example, although not for the same purpose (a gray triangle marks the unseen tabs, now).

    Hmmm. I'm not seeing that at all. In my 32-bit v1.0.142.32 on 32-bit Win7 all tabs are still complete rectangles.
    Edit: I take that back. I'm seeing it on one additional tab I opened, but not on another one, and haven't yet figured out the pattern (if there is one) to reproduce it.

    I suppose you're technically correct that the inactive tab has a gray triangle the same color as the tab bar background, but I visually interpret it as a corner of the tab has been trimmed off, exposing the tab bar in the background. And if that is an actual screenshot (i.e., not a mockup you created for illustration), why doesn't the next lighter gray inactive tab to the left also have the tab corner trimmed off?

    At any rate, it appears to me that "option" (adding a triangle / trimming a corner off all inactive tabs) could work quite well if there was more contrast between inactive tabs and the tab bar background (way too little contrast in your screenshot). And it seems something like that could work even better if all the non-active tabs retained full color saturation and only the active tab retained full rectangular shape.



  • @gdveggie:

    I'm seeing it on one additional tab I opened, but not on another one, and haven't yet figured out the pattern (if there is one) to reproduce it.

    Well… open this forum index, middle click on a bunch of links to open them in background, all the new tabs will have the [missing] triangle marker, when you focus on one of them the [missing]triangle disappears.

    I suppose you're technically correct that the inactive tab has a gray triangle the same color as the tab bar background

    Well it wasn't a technical analysis, was just a quick way to describe the final effect, that would be the same with a transparent or gray as background color.

    The implementation looks clean, but as I said earlier, often clean means also not very practical, indeed looks like that almost no one noticed it because the lack of contrast.

    The tab bar must be darker, or the tab must be coloured to catch the eye…


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.