Compact tabs
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
Personally I think 1 is the best, with 2 being my second choice. 1 has the most clear and minimal design which results in the best user experience IMO. Also, no one has mentioned how any of these designs are going to look and function with the "Use compact size" option enabled in Preferences->Appearance (different from "compact tabs" in Safari), I think options 5 and 6 are going to look quite weird with this option enabled, making it hard for the user to know which tab is currently selected.
Couple points I want to add:
1) I'm very against combining the address bar with tabs, I think any implementation of this is a bad time. I'm all for saving vertical real estate, but combining important elements of the toolbar is not the way.
2) In the prototype for v1, the shade showing which tab is selected is not the same height as the address bar. I assume this is just an error in the prototype, and will be the same height as the address bar when fully implemented.
Do these design mock-ups remind you of the early days of the browser era? Well, there were separate search box and URL bar, but in the end, every browser today combines URL bar and search box. But Safari 15 went one step further and combined 3 UI elements: the URL bar, the search field and the tabs. To be more elegant and to save a lot of space on small devices like the MBA M1. For what other reason do the Orion developers not want to combine UI elements the way Safari has done?
- Edited
Honcharenko It is explained several times in the thread, so I'll let you read it 
Vlad I like V3 the best, since V1's tabs look uncomfortably close together especially when the selection is going from a tab to the one next to it.
I'm thinking that it could be V3 by default, and when theres more tabs it switches to V1 to make better use of the space.
V2 with the outlined tabs don't seem to have a consistent UI grouping system. The address bar has an outline since its one UI element with a distinct purpose, but the tabs shouldn't have outlines since they belong to a tab bar and are not distinct or unique UI elements.
Hi Vlad,
I really think these are good mockups.
One of my major concerns is how much space the address bar takes up, still, and how little space is given to the tabs. As a keyboard shortcut user, the tabs really should be front and center, and really this doesn't feel like it's the "best of both worlds" situation, but rather a hindrance to both the full width address bar and the compact tabs.
To check the URL in Safari compact tabs, I can press Cmd+L and see a full address bar located on the tab I am currently using. This is ideal. I only want to see a URL when I press Cmd+L. Otherwise, it's pretty useless.
In these mockups, it's hard to see what each tab is, and the address bar is too short to be very useful. So, there are two UI elements are hindered in these mockups, making both lose the utility intended.
I would really encourage the view that people have different preferences, and there is a large portion of your community that prefers the universal UI element. Please consider supporting this as an option.
I don't believe these compact tab options that you have shared are better than the two row solution. Neither the tabs nor the address bar provide a great user experience in these mockups.
That's just me though. What do I know.
the compact tabs design will be a new addition to the browser, and the existing UI will not be removed.
Vlad I’m a little late to this, but I like the general feel of v3, but can also see v2 working if the accessibility option for showing the toolbar button outlines works.
