294

Hey everyone!
Great discussion and a very challenging question. I thought I'd add my 2 cents:

  1. the address bar and the tabs should not be together in one row. That's just not going to work on most laptops (smaller screens). It only works with a large screen and not many tabs, like in this example above:

Either hide addressbar or move it to a separate row.

  1. Usually, the less visual clutter, the better. This kind of box inside another box is not optimal:

  2. Safari Compact mode assumes that the page URL no longer needs to be always visible. Problem with Safari solution is that you cannot really see the URL even if you want, the input is too short:

  3. Please can we all agree that these margins in Safari are unacceptable waster of user's screen:

WIth all that in mind, here's the idea:

Try it:

https://www.figma.com/proto/JtNzlzZYc1BXaicxPT69DQ/Orion?node-id=401-873&scaling=scale-down&page-id=401%3A867&starting-point-node-id=401%3A873

@vladstudio

thanks for contributing to the discussion 🙂.

1.

what i was thinking tho is that the address bar only shows URL as standard, so doesnt have to be as wide as on the example. then it would expand when pressed:

Kinda like in your demo

and as i showed further up by eliminating the dead space as you show in 4. the saved space more or less makes up for it compared to Safari. (on a larger screen ofc with many tabs, the more tabs the more space saved)

Further more, if you look at the example i posted to Vlad of minimum tabs size there are space for quite alot of tabs. I would argue you arent using compact mode if you are a Tab extremist anyway

  1. 100% agree as mentioned further up. but again. this only IMO applies to "Color mode". as I think this is only an issue regarding how to make it look in color mode. I dont think its intuative that compact mode looks and works differently. it is that a Color mode does tho. (for both normal and compact)

  2. yes

  3. yes

Its unclear to me if on your demo each tab is an address bar? the other tabs arent usable as such but that might be the intention?

As mentioned a couple of times, I really think we should split the issue of how the tabs actually work in compact mode, and how they look in Color mode into two seperate issues. assuming we want to keep the adress bar seperate, which is kinda unclear to me now hehe

So that normal compact tabs looks and works the the same way in normal compact mode as they do in normal browsing.

Then in my opinion there should be a color mode that is an option for both Compact and Normal mode.

Reason for this is that compact tabs is about getting more website visible. and color mode is about imersion.

Nobody can tell me it is in any shape or form functional to have the UI merge with the website and take its color. this discussion is getting super clouded because the 2 things keeps getting mixed.

So to exemplify:

ps, Ignore exactly how things look it is just to illustrate the point of Color mode on/off in Compact or Normal

Normal mode without Color Mode:

With Color Mode:

Compact mode without Color mode:

Compact mode with Color mode:

    Just went trough the other Figma documents in your link. and it looks to me like you might have the idea of changing the way standard layout looks aswell, so its more visually in line with your compact idea. So what im saying about it only applying to a potential color mode. might not have any relevans at all. If thats the case I guess most of what i said above can be scratched hehe

      @Longely thanks for the update! Your mockups look great and thanks for all the analysis.

      Main questions that remain

      • flat design or not

      • behavior when hovering
      • position of close button
      • behavior for drag and drop
      • design on mojave/catalina

      We will work on some proposals too and update here.

      @vladstudio we believe the url bar needs to be visible in the browser. no hiding no tricks. It is the core function of the browser, and the user should not be playing a guessing game where it is

        Vlad

        I bellieve most of theese things have actually been covered above. but theres alot of text so understandable if missed hehe, ill try to sumarize

        1. behavior when hovering

        The exact same when coloring isnt turned on as the system and apearance is the same. when coloring is on. like other places in Mac OS

        hovering:

        1. position of close button

        I would adobt Safaris favicon close button as shown further up, to save space

        1. behavior for drag and drop

        exact same as now in normal mode, as it uses the exact same system. would look a bit different in color mode with flat design tho, but kinda the same. when you select a tab to drag an drop, that tab becomes the active one (the highlighted one) and then you move it around to where you want it to be

        imagine this as a round grey box, instead of the merge with toolbar:

        1. design on mojave/catalina

        not familiar with how they differ, so would have to check it out

        Was playing around with some other ideas of how to make a color mode that was different from Safari. where the toolbar would actively change color depending on the content:

        More full screen like, less about adopting color:

        not perfect yet, and might be a bit disturbing, not sure 🙂 but looks pretty cool iMO. did a bunch of different sketches of how it could be done if it has intrest

            you provided a reference to this: , suggesting how there should be border or background for the unselected tabs. butthese are merely buttons in a toolbar, not draggable tabs. There needs to be more distinction that these arent toolbar items, but tabs. for example, adding a border, or some shading

            one example probably could be the address bar. yes it is a toolbar item, but also much more interactive, and it is given this emphasis by adding a border around it.

              eirk

              I dont think I agree its nescessary. you can try Firefox as another example of how its done without

              theres not even the little line seperating the tabs. and it isnt less intuative to me i can move stuff around.

              Like i follow what you are saying that it makes a difference when its on the same horizontal line. but to me it seems like unescessary visual glutter, I think people will get it without

              but as i also posted above it can be done both ways, with a permanent border, or one that only activates on hover.

              So if people really thinks its an issue that they are unsure the tabs can be dragged or whatever, you can have the permanent border.

              or you can make a small line like firefox have at the begnining

              In my sketches theese things also only aplies to "color mode" (as a seperate feature to compact tabs) where flat design kicks in, and there the goal is imersion. so as little as possible disturbing the website. theres nothing practical in having the toolbar visually merge with the website. so if you prefer functionality and clear visual seperation then i dont think color mode or compact tabs for that matter is for you.

              But if you want Compact tabs without color mode this is how it would look:

                  You are correct, but since these tabs are also in where the toolbar would usually be, the lack of contrast hides the fact that these tabs are moveable.
                  in firefox (and chrome), tabs occuby their own horizontal space, so there is not easy to mistake a tab for something unmovable.
                  but because tabs are now in the toolbar, i feel such a distinction between a tab and a toolbar item is necessary

                  maybe, consider a scenario where the user as enough tabs so that only the tab icons are shown. they also have a few extensions in the toolbar, resulting in two different types of colorful icons. wouldn't there be some confusion as to what is an extension and what is a tab?

                    Longely This works but i feel like there might need to be something to outline the toolbar rather than it just floating there so when you scroll there could be like a line or something under the toolbar to outline it so it seems less messy

                        Raph7931

                        I assume you are talking about the sketches of "Color mode" here? or which one exactly. I bellieve a large amount of people who are requesting this wants it because of the imersion part of everything seamlessly mergin into one thing. For the ones who doesnt like that there would be a none color mode as shown above. that just makes things compact for you.

                        So the idea is to split the 2 features to accommodate as many people as possible.

                            eirk

                            Firefox do actually have other things on the same line, as it is using the space above the adress bar

                            I think your extension point with minimal tab size is a valid one tho. Im not sure how big of a problem i think it would actually be in reality, since in the sketches (unlike firefox) theres a small seperation line between each tab. so it would look different going from tabs to extensions.

                            but i see what you mean in that case

                            How would that long line that Firefox have work for you? if that was in the end and start of tabs?

                                We have a treat for you today!

                                Orion's own @bg-d has created these 6 clickable prototypes based on our previous thinking and latest community feedback.

                                Help us choose the future of Orion compact tabs (planned for 125 or 126) by upvoting your favorite design.

                                1) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=10-1496&viewport=528%2C131%2C0.25&scaling=min-zoom

                                2) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=10-1495&viewport=528%2C131%2C0.25&scaling=min-zoom

                                3) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=17-1775&viewport=528%2C131%2C0.25&scaling=min-zoom

                                4) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=10-1494&viewport=528%2C131%2C0.25&scaling=min-zoom

                                5) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=8-3435&viewport=528%2C131%2C0.25&scaling=min-zoom

                                6) https://www.figma.com/proto/Mua4l78XCMh61F8BN6573Z/Untitled?page-id=0%3A1&node-id=19-2484&viewport=528%2C131%2C0.25&scaling=min-zoom

                                Make your voice heard!

                                Comment with your primarcy choice, secondary choice and why

                                  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.