Compact tabs

Honcharenko

Vlad 2 or 4

tuesday

7thripr I was thinking about this earlier. As it stands, having both "www.google.com" in the address bar and "Google" in the current tab is a bit redundant, so I like this idea in principle. However, implementing it in a way that feels natural would be tricky... For most layouts I've been able to think of, it's overall worse — i.e. the weirdness is increased more than the redundancy is decreased.

The only thing I can think of that might work: Remove the address bar from the toolbar entirely, and only have it appear (replacing the current page's favicon and title) when you click on the currently-selected tab (or hit ⌘L). This would potentially work quite well with Option 2, actually, since they already use the same border style as the address bar…

Kagi team, if you'd like a mockup of this, let me know, and I'll see what I can do! 🙂

eirk

tuesday so... safari style compact tabs?

tuesday

eirk Ha, oops! I've never used that feature in Safari, so I didn't realize my idea was so similar 😄 After testing it out just now, my proposal was slightly different, as it would show the favicon and title by default, rather than the URL, but otherwise it's exactly the same as Safari's implementation, yes (and I'm not even very attached to the one thing that's different).

suki

Vlad #1 as the first choice for that safari look, but #6 looks pretty good too in how the active tab sort of blends in more with the browser chrome. #2 sacrifices too much tab size for a minimal change in looks IMO.

eirk

very basic, but id rather have something to distinguish between a tab and the rest of the toolbar
also very basic, the borders are really nice, but a bit too much horizontal space wasted
the focused tab floating above everything else feels very off and unnatural
the shading here really helps distinguish between the tabs and the rest of the toolbar, and the grey isn't too much
similar to 3, but its too much depth here. also, the left side when the leftmost tab is
seems like the opposite of 1,seems to me that everything is selected except the focused tab

ranking (best to worst)
4 2 1 5 6 3

Itai

2 gets my vote. Definitely the sleekest without being the most in your face. Still are able to differentiate tabs easily.

Vlad

Can someone summarize the votes? 🙂 Like 2 points for first choice and 1 points for second choice.

tuesday

Vlad Some people only selected one, or have ties for second place, so take these totals with a grain of salt. Each user's first and second choices given 2 and 1 votes respectively, as you said:

27 votes
21 votes
12 votes
5 votes
9 votes
3 votes

Vlad

tuesday Thanks for doing this! So the battles is between 1 and 2 it seems.

7thripr

tuesday hmmm 2 has too many border but is neat and 1 is good 1 tab focus any of em will just do fine.

GreyAsteroid

2 points for first choice, 1 point for second choice. On tossups or no clarification on which is first of their 2 choices they both get 2.

28 votes
29 votes
13 votes
4 votes
10 votes
3 votes

No matter how it's counted it seems 1 and 2 are both favorites. Maybe an option between the two?

yokoffing

2 for sure. It looks closest to Safari’s compact mode. In dark mode, I'd like the active tab to be brighter rather than darker.

1 is my second choice.

B4ND1T

1 would be my primary choice however I would like to see an option with the url bar integrated into the tab, like it is in safari.

ForumNinja404

Johnnyvm @Vlad I agree with this, I hate 1 & 2 because it feels too much like safari. I switched to Orion because I wanted something a bit different, not exactly the same. (otherwise there’s no point in switching)

#6 is less jarring and the tabs don’t jump around as much. It’s clear which tab is currently active. It’s beautiful, clean, predictable, I LOVE it.

FYI, The URL should update in the mockup upon switching tabs, but it currently doesn’t.

If I was forced to pick between 1 & 2, I’d pick 1.

yokoffing

ForumNinja404 I hate 1 & 2 because it feels too much like safari. I switched to Orion because I wanted something a bit different, not exactly the same. (otherwise there’s no point in switching)

So if the aesthetics are the same, there’s no point in switching? Despite the numerous changes that aren’t aesthetics? Lol

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.

Raph7931

i prefer both 2 and 3 but i would prefer 2 it feels cleaner and more immersive

rosenrot

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.

Vlad

I must be on the weirder side of things, I like 6 and 3 🙂 Gives it a lot of uniquness.

ForumNinja404

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.

TheOtherKai

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.

eirk

TheOtherKai i think u have 1-6 backwards
u mention 4 as "floating", but this is 4:

but 3 is:

« Previous Page Next Page »