TheOtherKai i think u have 1-6 backwards
u mention 4 as "floating", but this is 4:
but 3 is:
Compact tabs
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
I'm liking most of the designs proposed so far, really liking them infact, but I have a minor problem with all of the suggested designs that is also present in safari, I'm guessing it's a non-issue for most people, but it's a major usability issue for me that keeps me returning to firefox. It concerns the favicon turning into a close icon when the mouse pointer hovers over it.
I naturally aim for the icon when I want to switch to a different tab. Once I set my target on the favicon, I've already moved my mouse pointer and clicked the icon before I notice it's turned into a close icon. Boom! tab gone.
- Edited
SpoiledTorpedo
I think Safari is a bit better in that regard because it shows the X as soon as your cursor hovers over the tab, while Orion shows it only when you hover over the favicon. So Safari gives you a few extra crucial milliseconds to notice it. Though personally I wouldn't mind if the close button (in inactive tabs) was removed altogether and replaced by a key modified + click or something. I usually close tabs with cmd+w anyway.
Vlad I find v3 the best because the height of the gray rectangle for the active tab is the same as the address bar. v2 has the gray border which I don't like