Compact tabs

Longely

Just as a side note:

Firefox kinda do it this way as standard. and dont have a need for a permanent box surrounding all tabs. so in Color mode i really dont think it should be there, should only appear when hovering over with mouse. the subtle line divider should be enough IMO.

eirk

Longely the thing is, firefox has a clearly separate tab bar, so such lack of elements to distinguish between tabs isn't needed. here, I still feel that it is a bit awkward with the lack of differentiation between the "toolbar" and the tabs

eirk

I was thinking maybe something like this would allow for a very clear distinction between the toolbar and the tabs:

(sorry I don't do designing lol)

vladstudio

Hey everyone!
Great discussion and a very challenging question. I thought I'd add my 2 cents:

the address bar and the tabs should not be together in one row. That's just not going to work on most laptops (smaller screens). It only works with a large screen and not many tabs, like in this example above:

Either hide addressbar or move it to a separate row.

Usually, the less visual clutter, the better. This kind of box inside another box is not optimal:
Safari Compact mode assumes that the page URL no longer needs to be always visible. Problem with Safari solution is that you cannot really see the URL even if you want, the input is too short:
Please can we all agree that these margins in Safari are unacceptable waster of user's screen:

WIth all that in mind, here's the idea:

Try it:

https://www.figma.com/proto/JtNzlzZYc1BXaicxPT69DQ/Orion?node-id=401-873&scaling=scale-down&page-id=401%3A867&starting-point-node-id=401%3A873

Longely

@vladstudio

thanks for contributing to the discussion 🙂.

what i was thinking tho is that the address bar only shows URL as standard, so doesnt have to be as wide as on the example. then it would expand when pressed:

Kinda like in your demo

and as i showed further up by eliminating the dead space as you show in 4. the saved space more or less makes up for it compared to Safari. (on a larger screen ofc with many tabs, the more tabs the more space saved)

Further more, if you look at the example i posted to Vlad of minimum tabs size there are space for quite alot of tabs. I would argue you arent using compact mode if you are a Tab extremist anyway

100% agree as mentioned further up. but again. this only IMO applies to "Color mode". as I think this is only an issue regarding how to make it look in color mode. I dont think its intuative that compact mode looks and works differently. it is that a Color mode does tho. (for both normal and compact)
yes
yes

Its unclear to me if on your demo each tab is an address bar? the other tabs arent usable as such but that might be the intention?

As mentioned a couple of times, I really think we should split the issue of how the tabs actually work in compact mode, and how they look in Color mode into two seperate issues. assuming we want to keep the adress bar seperate, which is kinda unclear to me now hehe

So that normal compact tabs looks and works the the same way in normal compact mode as they do in normal browsing.

Then in my opinion there should be a color mode that is an option for both Compact and Normal mode.

Reason for this is that compact tabs is about getting more website visible. and color mode is about imersion.

Nobody can tell me it is in any shape or form functional to have the UI merge with the website and take its color. this discussion is getting super clouded because the 2 things keeps getting mixed.

So to exemplify:

ps, Ignore exactly how things look it is just to illustrate the point of Color mode on/off in Compact or Normal

Normal mode without Color Mode:

With Color Mode:

Compact mode without Color mode:

Compact mode with Color mode:

Longely

Just went trough the other Figma documents in your link. and it looks to me like you might have the idea of changing the way standard layout looks aswell, so its more visually in line with your compact idea. So what im saying about it only applying to a potential color mode. might not have any relevans at all. If thats the case I guess most of what i said above can be scratched hehe

Vlad

@Longely thanks for the update! Your mockups look great and thanks for all the analysis.

Main questions that remain

flat design or not

behavior when hovering
position of close button
behavior for drag and drop
design on mojave/catalina

We will work on some proposals too and update here.

@vladstudio we believe the url bar needs to be visible in the browser. no hiding no tricks. It is the core function of the browser, and the user should not be playing a guessing game where it is

Longely

Vlad

I bellieve most of theese things have actually been covered above. but theres alot of text so understandable if missed hehe, ill try to sumarize

behavior when hovering

The exact same when coloring isnt turned on as the system and apearance is the same. when coloring is on. like other places in Mac OS

hovering:

position of close button

I would adobt Safaris favicon close button as shown further up, to save space

behavior for drag and drop

exact same as now in normal mode, as it uses the exact same system. would look a bit different in color mode with flat design tho, but kinda the same. when you select a tab to drag an drop, that tab becomes the active one (the highlighted one) and then you move it around to where you want it to be

imagine this as a round grey box, instead of the merge with toolbar:

design on mojave/catalina

not familiar with how they differ, so would have to check it out

Was playing around with some other ideas of how to make a color mode that was different from Safari. where the toolbar would actively change color depending on the content:

More full screen like, less about adopting color:

not perfect yet, and might be a bit disturbing, not sure 🙂 but looks pretty cool iMO. did a bunch of different sketches of how it could be done if it has intrest

Raph7931

Longely This works but i feel like there might need to be something to outline the toolbar rather than it just floating there so when you scroll there could be like a line or something under the toolbar to outline it so it seems less messy

eirk

you provided a reference to this: , suggesting how there should be border or background for the unselected tabs. butthese are merely buttons in a toolbar, not draggable tabs. There needs to be more distinction that these arent toolbar items, but tabs. for example, adding a border, or some shading

one example probably could be the address bar. yes it is a toolbar item, but also much more interactive, and it is given this emphasis by adding a border around it.

Longely

eirk

I dont think I agree its nescessary. you can try Firefox as another example of how its done without

theres not even the little line seperating the tabs. and it isnt less intuative to me i can move stuff around.

Like i follow what you are saying that it makes a difference when its on the same horizontal line. but to me it seems like unescessary visual glutter, I think people will get it without

but as i also posted above it can be done both ways, with a permanent border, or one that only activates on hover.

So if people really thinks its an issue that they are unsure the tabs can be dragged or whatever, you can have the permanent border.

or you can make a small line like firefox have at the begnining

In my sketches theese things also only aplies to "color mode" (as a seperate feature to compact tabs) where flat design kicks in, and there the goal is imersion. so as little as possible disturbing the website. theres nothing practical in having the toolbar visually merge with the website. so if you prefer functionality and clear visual seperation then i dont think color mode or compact tabs for that matter is for you.

But if you want Compact tabs without color mode this is how it would look:

eirk

You are correct, but since these tabs are also in where the toolbar would usually be, the lack of contrast hides the fact that these tabs are moveable.
in firefox (and chrome), tabs occuby their own horizontal space, so there is not easy to mistake a tab for something unmovable.
but because tabs are now in the toolbar, i feel such a distinction between a tab and a toolbar item is necessary

maybe, consider a scenario where the user as enough tabs so that only the tab icons are shown. they also have a few extensions in the toolbar, resulting in two different types of colorful icons. wouldn't there be some confusion as to what is an extension and what is a tab?

Longely

eirk

Firefox do actually have other things on the same line, as it is using the space above the adress bar

I think your extension point with minimal tab size is a valid one tho. Im not sure how big of a problem i think it would actually be in reality, since in the sketches (unlike firefox) theres a small seperation line between each tab. so it would look different going from tabs to extensions.

but i see what you mean in that case

How would that long line that Firefox have work for you? if that was in the end and start of tabs?

Longely

Raph7931

I assume you are talking about the sketches of "Color mode" here? or which one exactly. I bellieve a large amount of people who are requesting this wants it because of the imersion part of everything seamlessly mergin into one thing. For the ones who doesnt like that there would be a none color mode as shown above. that just makes things compact for you.

So the idea is to split the 2 features to accommodate as many people as possible.

Raph7931

Longely I was talking about scrolling with colour mode in my last post the idea of colour mode is great and I am all for it but i think the scrolling could be tweaked.

Vlad

We have a treat for you today!

Orion's own @bg-d has created these 6 clickable prototypes based on our previous thinking and latest community feedback.

Help us choose the future of Orion compact tabs (planned for 125 or 126) by upvoting your favorite design.

1) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=10-1496&viewport=528%2C131%2C0.25&scaling=min-zoom

2) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=10-1495&viewport=528%2C131%2C0.25&scaling=min-zoom

3) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=17-1775&viewport=528%2C131%2C0.25&scaling=min-zoom

4) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=10-1494&viewport=528%2C131%2C0.25&scaling=min-zoom

5) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=8-3435&viewport=528%2C131%2C0.25&scaling=min-zoom

6) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=19-2484&viewport=528%2C131%2C0.25&scaling=min-zoom

Make your voice heard!

Comment with your primarcy choice, secondary choice and why

dorkbutt

Vlad 5 holds the most water for me because of its similarity with the current tab theme in its normal horizontal display. However, I am not digging the specifically designated shaded space for the tabs. It makes them feel detached from everything else. And I understand the importance of allocating the space for them, but the way it is done in this instance feels inappropriate. It's hard for me to put my finger on what it is that puts me off. But a part of me thinks that cutting out the toolbar so that there is like, a pocket of which the tabs can occupy instead of being another thing that the toolbar so happens to have.

I have absolutely no graphic design talent so I will have to describe what I am talking about.

So, I imagine lowering the bottoms of the tabs so that they are flush with the border of the toolbar. this will cause these tabs to be misaligned with everything else. so, with that extra headspace above the tabs, that can be for folders or similar to lay right on top of the tabs so to allow quick navigation between batches of tabs for organization with the now limited space.

7thripr

Vlad
I like 1 and 3
1 - minimal my eyes wont be attracted to the dull color.
3 - just looks more sound acc. to MacOS UI.

7thripr

Vlad one more suggestion if you are taking one...
rather than having the url bar and the tab seperate why not remove the url bar and make it so that when you click a tab it expands to url bar.

Honcharenko

Vlad 2 or 4

alexkornitzer

Has to be 1 for me as it looks the most MacOS like.

GrasPlukker

I vote for 2, because that one looks more like macOS and the safari compact tabs

Jop

I use Safari with compact tabs as my main browser currently. I like 2 and 5, the rest either has too much grey, or does not distinguish between the tabs and the bar around them.

GreyAsteroid

2 is my pick. Comparing them all, only 2, 4, and 5 have pronounced easily visible buttons for both selected and deselected tabs. The reason I choose 2 over 4 and 5 is because it's the most familiar UI out of them, it meshes well with the rest of the browser window.

Soham

I like 3 because it gives an emphasis on the open tab and looks more sleek.

« Previous Page Next Page »