Page MenuHome

Revise tab graphic design
Closed, ResolvedPublic

Description

The new toolbar tabs are a nice way to keep tools nicely organised.

However, their design has these issues:

  • The titles run together. It's hard to see where one title stops and another one starts
  • The I line between the titles makes it harder to read
  • Fonts have wrong kerning, where characters overlap each other
  • The text is too small to be readily readable, made worse by the fact that it's vertical, which gives a reading handicap

Proposed changes:

  • Make font size bigger
  • More spacing between titles
  • Remove I separator and replace it with distinct tabs
  • Use same kerning as the rest of the UI text
  • Make rounded corners of tabs larger to make it easier to distinguish tabs

Details

Differential Revisions
D170: Make Toolbar Tabs more readable
Type
Design

Event Timeline

Agreed with this. I know we discussed this for quite a bit in the old task, but the readability on regular screens (Non Retina) is pretty bad atm.

So a bigger and cleaner design as William suggest will be good.

Committed some changes that address this proposal: rBcde3ff75d9771e526f1e927dc58c7f314c3bfdcb
(More space around tabs, larger text).

To show inactive tab outlines - this is a simple change to the code: Comment out #define USE_FLAT_INACTIVE in interface_panel.c.

Perhaps text should be larger still (currently its using the same size as buttons), or made to contrast more.

As for further changes suggested in this proposal, I think these could be done as apart of T38037.
I spent quite some time to match the tabs proposed and agreed for D75, any issues with that design should have been raised before I went ahead and finished off the patch.

I like this revision, for reasons @Thomas Dinges (dingto) mentioned

For those curious to see the inactive tabs with outlines as @Campbell Barton (campbellbarton) mentioned, but can't build, here's a screenshot:

@Campbell Barton (campbellbarton), nice improvements on the spacing and I agree that further changes can be done via T38037

@Campbell Barton (campbellbarton): The spacing is a definite improvement. Perhaps we can get rid of the I divider line though? It looks like part of the text and hampers the readability somewhat, and I don't think it's really needed.

Or just enable the 'proper' tabs. IMO if we are going to use the tab metaphor we should use it consistently, also for inactive tabs

agree with @William Reynish (billrey) regarding consistency. spacing is definitely better tho.

adding highlight color to active tabs, its easy to see the active tab faster and makes work faster.

How about proposal, it involves tweaks to the existing design to make active tab more obvious and inactive tabs more readable.

  1. Inactive tabs draw tab outlines (comment out #ifdef USE_FLAT_INACTIVE)
  2. highlight active tab (brighter then the region background).
  3. (optionally) brighten inactive tabs a little, since at the moment they are a little hard to read because the contrast of the black text on a dark background is not so high.

Quick mockup:

  • Gradient used so the active tab still looks like its apart of the region.
  • Exact values can be tweaked of course (highlight in this mockup may be too strong)

@ campbellbarton, Nice Work.i think when region overlap is enabled its hard to see the active tab. but for gradient mixing use the default blender "radio button active color",

@anandharaja (anandharaja), yep, we could use that color, it depends a bit if this is a highlight (to make it brighter) or if we really want a colored tab - which isnt quite the same thing. At the moment I would prefer just to brighten it to make it clear its on top, but I dont have a strong opinion, if the UI team wants to change the highlight to tint it the color of the "radio button active color" it can be made to work, but its also possible to set this color darker so it wont act as a highlight so much.

@Campbell Barton (campbellbarton): For the tab metaphor to work, the active tab should have the same color as the area it relates to. That way, there's a connection between the area and the active tab. If the active tab is darker or brighter than the area it spawns, the visual metaphor breaks down, and it no longer looks like a tab.

There are other metaphors one could use, (eg something more like the radio buttons), but if we use tabs, we should use it right.
If the active tab doesn't set itself apart enough, we can make the inactive tabs darker instead.

This was my last proposal ( more info in D170 ):

Jens

@jens verwiebe (jensverwiebe):

The fact that text of the active is brighter is nice. It makes the active tab stand out more, and it's clear that it's highlighted over the other tabs.

The 'I' divider line still needs to go though, as it has the same colour as the text, making the strings harder to visual separate and read. There's a reason we don't put I lines between words in regular sentences. ItIwouldIlookIlikeIthis. Using just spacing is better.

IMO we should go one of two ways. Either forgo the tab metaphor, and don't use a tab design for both active and inactive tabs, like so:

Or, we should use visual tabs for both active and inactive tabs, like so:

Either way can work fine I think, but it's a bit odd to have this intricate tab graphic element only for the active tab.

I think we should stick to the tab metaphor and keep the active tab the same color as the region. Not only does that clearly indicate the active tab, it also keeps it visually clean. Highlighting the active tab with a brighter text seems quite reasonable as well. We already have a Region Text Highlight theme option, so I think we should use that.

After playing with it yesterday I'm also opting for showing the inactive tab outlines.

I agree with the problem layed out in this task!

It's really hard to read and it doesn't fit the UI scheme in the current form!

Updated original mockup with brighter text for the active tab like @jens verwiebe (jensverwiebe) suggested.

Whatever style can be found here will have the potential to carry over with the larger visual style for blender as a whole. I think its important to find something that could have somewhat larger implications in terms of visual communication but also something that can be seen as both modern and pleasing to the eye.

That said, I believe text color is also important when it comes to visually defining tabs. Software in other packages have also successfully used this method and I believe its perhaps the most solid approach. As for the shape of tabs, I have to agree with those who feel that tabs need to metaphorically look like physical tabs to a varying degree. Its that similarity and familiarity that make them intuitive in their function.

I strongly advise having blocky tabs with slightly rounded (beveled) corners instead of big sweeping curved tabs which not only seem a tad too generic but dont really feel visually consistent with Blender's UI design as a whole. That is just my opinion though.

Text color can also be used defining the rules for future UI changes. Important labels for UI elements can use that color, thus the eye can seek them out. I try to illustrate this in the Mockup. New labels or areas where the developer wants to pull the eye to can use said colors which the user can define.

I considered Brecht's UI proposal regarding a top bar while laying out the mockup. Imagine how tab design would and or could carry over if his proposal becomes more of a reality. http://wiki.blender.org/index.php/Dev:Ref/Proposals/UI/Top_Bar_Reshuffle

I wouldnt want shadow_and_highlights / tab_outline for the none active tabs, this adds visual noise to the tabs.

So does 'I' seperator, but not as much.
I dont know if the 'I' seperator is required here. A bit of space will also suffice as a seperator.

Another way is to remove all shadow and highlights, and make the active tab label a different color.
Though im not keen on this idear, the active tab feels disconnected from the tools region.

Having studied all the other mockups, I still stand behind my proposition:

The tab metaphor is clear, which tab is selected is clear, the tabs are big enough to bring attention to their significance, and it matches the current style of the interface.

That said, I also agree that the interfaces should be made more calm in the end, and then the tabs could look more like what William proposes. But gradually inserting elements from the new style is not a good idea, since the GUI will look inconsistent having elements in both styles.

@Paweł Łyczkowski (plyczkowski) - agree.

if you check tabs in firefox for example. they are not highly contrasting or showing active tab in different color text.

Since blenders background is quite dark by default (and the inactive tabs even darker), it could be good to have a slight white outline around the text, If you look closely panel header text already has this, it could be used to help text stand out a bit more.

@Campbell Barton (campbellbarton) The problem with using the Firefox example (and why it doesnt work) is that Firefox's boxy tabs are designed around the ICONS that go alongside them. Take out the icons and then see what you have...it becomes difficult to find which tab you need or are in with just text alone.

It also should consider whether or not the design intends or expects users to have different themes, if so then that has to be taken into consideration.

Here's a picture of my browser at the moment, firefox default theme. I went and hid the icons to show the difference they make in how we see or contrast tabs in relation to blender.

What does pop out via color choice is the upper left tab menu, it also shows its importance. I think being able to use color is more advantageous.

@DataDay (DataDay)

Yup, icons would speed up finding tabs. Adding them, after the sections would be agreed upon, would be a good idea.

Yes, icons and contrast between the active and inactive will be great !

I also still very much prefer the simple solution from @Paweł Łyczkowski (plyczkowski), but I'll also add that I like the active tab highlighted. Here is my proposal from https://developer.blender.org/D170:

The active tab color is set via the them Region Text Highlight and inactive tab colors are set via Region Text. Thus you can choose, via your theme, whether or not to highlight the active.

Benefits to above design:

  • More visually distinct tabs that fit the "tab" metaphor and make the design consistent within its self. The separator lines added visual noise that detracted from the tab metaphor, causing the titles to "blur" together.
  • More space around the text, so they're less cramped and much more readable, while using the same amount of space.
  • The slight highlights and shadows on the tab titles improve the visual appearance.

I agree that the highlighted text helps. Pure white is a bit too light though.

2 comments if I can: there was this patch to theme the roundness of gui elements, that could help make tabs cleaner?
other point: when maximized Blender -on default layout- tabs active area is 3px short from left side of screen, fixing this makes them a lot easier to hit -fitt's law-

@Paweł Łyczkowski (plyczkowski) the exact color can be define by the theme. So far as I can tell Region Text Highlight isn't even used by anything else, and so we can probably update the default.

@lower case (lowercase), I don't really have any qualms with the roundness option, I believe we use to have it. I don't know when it was removed, probably in 2.5. As for the tabs active area being 3px short, I think I'll look into it and play with the spacing. I agree that having it at the screens edge would likely be ideal

DataDay (DataDay) added a comment.EditedJan 13 2014, 4:55 AM

@Paweł Łyczkowski (plyczkowski) @Jonathan Williamson (carter2422)

I wonder if it would be a good idea to create a refreshed default theme for the 2.7 lineup. This way color can get used for the highlights, and it can be changed for non-default themes. Having a consistent and identifiable color pallet tied to blender can work in favor of tabs and future development styles. The blender artist colors work well, though its similar to C4D's chosen color pallet.

@DataDay (DataDay) Definitely it will be great to announce upcoming 2.7 UI changes by refreshing default theme!

@DataDay (DataDay) - disagree icons are so important to know if a tab is active, With gnome-terminal for example (I use all the time) and tabs are very clearly active or not.

Icons is pretty much a separate issue. If you need an icon to tell if a tab is active or not - I think there are other problems with the design.

@Jonathan Williamson (carter2422) - adjustments to spacing - in general seem ok, Im not such a fan of the white text though, would prefer just to make the contrast between active/inactive tabs higher (see image from post above - its very clear what tab is active)

@Campbell Barton (campbellbarton) DataDay meant that icons help with finding tabs, not highlighting the active one, and I agree (his firefox screenshot shows it clearly).

@Campbell Barton (campbellbarton), here is a version with same text color for active/inactive and with slightly more contrast between them.

@DataDay (DataDay), @Tomislav Corak (tommy5), I think a refreshed theme is a good idea, but I don't think it's realistic for 2.70. Too many things to finalize still and not enough time.

I posted this in another topic before, but it's relevant here as well:

I'm agree that icons would help a lot with distinguishing tabs from eachother. In the case where there isn't an icon (addons...) there's still the text to fall back on, but at least the built-in tabs should have icons.
Another thing that speaks in favour of icons: when the viewport becomes very narrow (vertically) or a user has a ridiculous amount of tabs, the icons will/should always be displayed, as they remain much clearer than heavily truncated or abbreviated text!

@Jonathan Williamson (carter2422) looks quite good, its onlys subtle change...

  • Active tab looks to have dark dropshadow, think it could be white still.
  • Theres some glitches going on on the bottom of inactive tabs, probably not hard to fix.

Could you upload a diff once your done with it? - I can check on the border glitches.

My issue with these so far is that it's just not ergonomic in terms of being able to quickly scan the eye down the list of tabs in a normal fashion to pick out easily the appropriate one.

If, starting from the top we find the most used tools, the eye scans then, top to bottom looking for the appropriate tab. Because the lettering is the wrong way round (bottom to top) the eye then has to find the bottom of the upper most tab, scan back up to read, then back down again to the next tab and read up again (down up down up down.. ).. it's very uncomfortable and jarring.

Ergonomically, it makes more sense to me to make this list scanable, by making them read, top to bottom, as one would expect. Whether or not the tabs are on the left or right hand side of the region itself, doesn't concern me particularly, if anything my preference would be to leave them as they are, however improving the readability in this regard surely cannot be ignored.

It's not weird the item appearing out of the top of the tab, what's weird is having such poor readability.

For clarities sake, I took carter2422's nice screenshot and just rotated the text around in order to illustrate how I would be most comfortable seeing this feature.

@Olson Burry (olson) I disagree. The eye does not move from the beginning to the end of the word, it looks at it as a whole, so there is no jumping back and forth when eye scanning. And the word rotated anticlockwise is more standard and looks better than a word rotated clockwise, though I have to admit that I'm not sure why.

Maybe it's specific to this case, where the tabs are on the left. If it's a metaphor for an extrusion on a real-world folder, then with the text rotated clockwise it would be upside-down.

Heres an example of subtle changes which IMHO are more readable and in keeping with @Paweł Łyczkowski (plyczkowski)'s initial design (and blenders existing UI).

  • Slightly wider
  • A little more contrast
  • White behind text.

(patch modified from D170)

Hey @Campbell Barton (campbellbarton), your latest version is identical (in all but the intensity of the white shadow) and so I won't bother to upload my latest version. If you're game to go with that one then I'd like to commit tonight to get it finished finally and move on to other important tab tasks.

With the active text in white I think it will be good fo this version, good job Jonathan !