294

B4ND1T @eirk

After thinking a bit about it, and looking how Apple deal with it other places in the OS. maybe it should/could be done in another way that is more in line with that. as much as i like that it follows the logic of the normal none color mode and think of it as intuative, maybe it is more intuative to follow how they do it more generally outside of the browser.

Here is an example of how they do it:

so 4 items all part of the same thing with the active one having darker box around it. and the other options diveded by a subtle line (just like normal tabs in Orion).

Moving mouse over it:

in other examples the dark box linking all 4 items together is always visible, there isnt really any consistency in that.
so you could do either or, IMO Color mode is about imersion, so i would say as clean as possible is the goal so i would go without it permanatly there, but could be done both ways.

So would look like this:

with all the tabs getting connected when hovering above with mouse. as in the exmaple further up

Or this:

with them visually permanantly connected

Would you prefer something like this?

I think the visual ambiguity the John Gruber talks about happens because Apple has to show them both as seperate address bars and tabs. which kinda messes up there own design rules a bit, as they cant just follow what they do every where else. the way shown above is way more in line with that, and we dont need the "ambiguity" since its only tabs and nothing else.

      Just as a side note:

      Firefox kinda do it this way as standard. and dont have a need for a permanent box surrounding all tabs. so in Color mode i really dont think it should be there, should only appear when hovering over with mouse. the subtle line divider should be enough IMO.


      • eirk replied to this.

        Longely the thing is, firefox has a clearly separate tab bar, so such lack of elements to distinguish between tabs isn't needed. here, I still feel that it is a bit awkward with the lack of differentiation between the "toolbar" and the tabs

            I was thinking maybe something like this would allow for a very clear distinction between the toolbar and the tabs:

            (sorry I don't do designing lol)

              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.