294

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?

                    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.