295

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.

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.

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

    2 - It is the simple while also highlighting where a person is to click to change tabs, the others are either too extra, or don't highlight the box enough. 2 fo sho

    I like 3.

    The active tab is easier to identify and the darker hover state for inactive tabs makes it easier to keep track of your cursor as you move across the tab bar.

      My first choice is 3, and my second choice is 5. The design has a clean and consistent Orion style, while still being able to recognize the current page being viewed without appearing too uncoordinated.

        1 as the primary for the cleanest look.
        2 as the secondary choice for same reason.

          Primary: 3 - It's clean, tidy and you can see the existing tab easily at a glance.
          Secondary: 2 - It's similar to Safari and provides a cohesive native experience.

            2 because it is similar to Safari, which is mainly why we're all here
            5 because it is similar to everything else out there

            @Vlad you should propably have given each sketchs names or posted screenshots bellow the link. i opened all 6 of them at once which makes them apear in different order. so i was about to vote for the completly wrong ones

            I think for me, as said earlier it depends on if theese design are also considered to be for a color/merge with website mode.

            For a normal compact tab mode without color and merge i think 5 is the best, as it follows the logic of normal none compact the most

            For a color mode with website merge i think 1 is the best and most in line with MacOs in other places

            with 2 and 3 being my least favorite for any mode as they kinda make it seems like its safari where they are also adress bars

              Primary - 2. It's the closest to Apple's design to my eyes.
              Secondary - 1. Similar to 2, the one thing I don't like is that the tabs aren't clearly clickable. It makes the toolbar look like it's cluttered with a bunch of random words instead of being full of tabs.

              Things I don't like about the other designs:
              3 - The 3D look just doesn't fit in with the rest of macOS aesthetics.
              4 - The inactive tabs fusing together is 🤮
              5 - I just hate how the tabs aren't attached to anything. When that design style is used with tabs underneath the toolbar, it looks like they're hanging off the toolbar, which makes sense. Here they're just attached to nothing.
              6 - The active tab becoming indistinguishable from the toolbar isn't great. Also the inactive tabs fusing together like 4.

              Longely

              I thought the same thing but you can just open one and at the bottom of the Figma page there will be a page numbering with forward and back arrows, 1-6

                  Primary - 2 because it is closest to safari compact tabs.
                  Secondary - 1 because of simplicity and minimalism.

                  1 - i think it looks the cleanest
                  5 - i think it looks nice that the tab name is part of the whole ui related to the tab

                    1 makes the most sense to me. It looks balanced with the icons to the left. On that note, I feel like there's way too much wasted space on the left side of the toolbar for a "compact" mode.

                    I'd say 2 and 5 feels best. If I have to pick just one, it's 2 because it's the most clean and simple.

                      Definitely Option 1, probably followed by option 4.

                      The main factors that influenced my rating:

                      • They shouldn't look like static buttons — tabs are dynamic and can be added and removed frequently, unlike the other buttons in the toolbar. Options 2 and 5 fail this criteria, IMO.
                      • Should feel like it belongs in the toolbar — Option 3 doesn't feel right to me (the toolbar is otherwise quite flat on the Z axis; adding a drop shadow is weird to me), and option 5 looks fine except that the "tab" visual metaphor doesn't make as much sense when it's disconnected from the page's contents like this).
                      • Should feel self-consistent and contiguous — In Option 6, the currently selected tab causes the tab bar to feel like two discontiguous sections to its left and right, rather than a single bar. Rather than "This tab, of n tabs, is selected" it feels like "You are here, but these are some tabs you could click on instead. Also, here are some other tabs." Option 2 also feels like the tabs are quite disparate: they are each self-contained, with gaps in between them, rather than feeling like a single row.