i prefer both 2 and 3 but i would prefer 2 it feels cleaner and more immersive
Compact tabs
I'm not going to contribute to the ranking of the variants as there are a lot of opinions. However, I currently have a hard time visually identifying that more tabs are open than shown. Thus, please add an indicator in case more tabs are open than displayed.
- Edited
I must be on the weirder side of things, I like 6 and 3 Gives it a lot of uniquness.
Some comments:
- I wonder how it'll look like with more tabs. It may also be a bit hard to tell which tab is the current one, since the visual distinction isn't pronounced.
- (third choice) This reminds me of old semi-skeomorphism as this looks quite a lot like a radio group. The hanging tabs (similar to current design) in this case works well for me, since it has good contrast against the background unlike say #1
- Same comments as #2, except the background distinction is a bit more subtle. It feels like a middle ground between 1 and 2, since it doesn't have the visual distinction issue of the first design but doesn't have a very pronounced indicator unlike #2
- I don't quite like this one, as floating things of this type don't feel native. It feels a lot like how arc does its vertical tabs with its odd non-native feeling native components.
- (first choice) I LOVE THIS. It has a lot of visual distinction between tabs, the current tab is extremely easy to see, and it feels most native and blending-in in my opinion.
- (second choice) Similar issues with #1, it lacks visual distinction between non-selected tabs and the lack of outline makes it less distinguishable as a tab bar. HOWEVER, the current tab selected is very easy to determine, and I think that this is the best for minimalists.
My favorite is 1, followed by 3
TheOtherKai i think u have 1-6 backwards
u mention 4 as "floating", but this is 4:
but 3 is:
i like 5
Woo-hoo, a treat!
My heart (and vote) is with #1. Second vote is #4. Let me comment on each design too:
- This is the best combination of design elements: no wasted space between tabs; no unnecessary noise. Everything in its right place :-)
- Many people seem to prefer this because it looks like Safari. For me, its a disadvantage: the borders around tabs do not really add any value; the gaps between tabs could go.
- There is nothing else in UI that supports shadow; it looks alien here.
- Similar to #1; I don't think tabs need to be separated by background; but it does not hurt much.
- Unique! Too much design, though.
- This is "wrong" design, in a sense that it groups things incorrectly. The first, active, tab looks like it does not belong to other tabs. There is nothing uniting all tabs as a group.
First choice is #3 and second choice is #1. I like the compactness of them, yet they each make it obvious which tab is selected..
Number 5 is my first choice, number 3 is my second choice, number 2 and 6 are tied as my third choices.
5 seems like a nice, visually easy way to see what is active, 3 is similar but more subtle. 2 is very similar to Safari (so it's meh, and 6 is more similar to 5 but it just has a bit too much gray.
3 is my primary choice, love the floating tab
1 is secondary as it seems to be most like Safari
my top choice would be 2: looks clean while not being confusing, fits very well and feels native
or 5: is comprehensive and spacious, the tab name looks like its attached to the url bar, separating the inactive tabs better
the others seem either cluttered or not consistent with orion's / macos' current design
2 and 5
#2 because it echoes the Safari compact tabs (which I like)
#5. Like the curved tab look
3 is best in my opinion
2 is good
1 is fine
- Edited
Vlad I also prefer these two, active tabs should always be highlighted and background tabs should look clickable. (It’s how every other browser works)
Option 1 has this backwards, the active tab looks disabled and all the other tabs blend with the UI and don’t appear to be clickable. Option 6 is the opposite of 1, but I agree it could be a bit more distinct. Perhaps the active tab could still have a thin outline?
Something I do like about 1 is that the inactive tabs have a hover effect so that the user know’s they’re clickable. Option 6 should have that same effect.
Longely This example describes the design perfectly, the distinct borders and the “merging” effect with the rest of the UI makes it way easier to find the active tab.
- Edited
"the active tab looks disabled" that really depends on what you compare it to, if you compare it to anywhere other then browsers in Mac OS it looks identical to other active items.
here an exmaple:
and heres the tabs:
When i made the sketch for option 6 the idea was to follow the logic of active tabs mergin with the toolbar as normal mode does. But with a flat design needed for "color mode" to look good, that approach IMO doesn't make that much sense, because thats not how flat design works anywhere else in the OS.
which is also why i really wanted wanted to split this up in 2 different options, as mentioned alot earlier
So you would have:
Normal expanded mode (without flat design and no color merge, so like it is now)
Normal Compact mode (following the design of normal mode, so no flat design, folowing how normal mode looks and works, that would be something like option 5 or little like 6 but without the flatness that the figma sketch has)
and then you would have a "Color option" applying a flat design to BOTH compact and expanded mode. made some sketches further up of color mode ON/OFF. would most likely look like option 1 as thats the most native, or 4
The team seems to be set on not having the same design logic for compact tabs as for normal tabs which is a shame IMO, since i dont think its intuative it works and looks different (when you still have an addressbar). and people who like flat design and imersion would still be able to get it by turning on "color option" and they would be able to get it in there normal mode aswell (not only compact)
ps, the reason why Safari looks different in "compact mode", is because it WORKS differently. thats not the case here, theres still an address bar, It could seem like people might be forgetting this a bit when voting for Safari style out of familiarity
Updated prototype for the first two
at the bottom there's dark/light and v1-v2-v3 switch
added v3 - similar to v1 but has little spacing between tabs