294

So i read this a while back, and have been thinking about it. It seems like theres 2 problems people have.

  1. some wants an address bar that doesnt move around
  2. some people dont like the tabs arent "real" tabs

Personally i dont have a such a big problem with the address bar not staying in the same location. but if I have a problem with Orion teams suggested solution:
It is that, if the tabs also arent address bars you can type in. its not intuative that they look identical.
In Safari they look identical because they are identical. they are both a tab and an adress bar.

So i tried to think about how to solve to keep address bar in 1 place while having tabs that are "real" and doesnt look like adress bars you can type in.

Anyway this is what i came up with. maybe it can work as inspiration

Ultra compact with many tabs:

Less compact, more similar to Safari compact and Orion standard size with the open tab being the furthest to the right:


I think I would prefer a solution similar to this, if the tabs arent also adress bars that i can type in.
Obviously you can scale the adress bar as wide as you please, remove buttons etc.. this is just a quick sketch trying to keep the exact same functionality and spacing as none compact

    you can also do it this way:

    Instead of this:

    so would look like this in context:

    not sure its better tho

      Heres an example of how it could potentially look if you adobt Safari thing where they merge the browser with the page, by adobting the color of the header and remove the seperation line:

        Longely I really like these ideas, thank you for taking time to share this!

        What would this look like if somewhere in the middle?

        And can you add sketch what would it look like if they are many tabs open (so reduced to minimum size/ just icons)

        And a variation all these where the toolbar UI is merged with the page UI a'la your last proposal.

            Vlad

            If what exactly was in the middle?

            Sure heres a sketch of mininum size:

            The whole idea is that the whatever space there is to utilise on the right side of the adress bar is used for tabs.
            meaning you can still add whatever buttons or extentions icons you want.

            But in this case of standard layout, within the space that is avalible:

            The tab behavior is the exact same as in none compact mode. meaning tabs scale expand and get compressed the same as the user is used to in none compact. making it IMO super intuative. So if you want to imagine how somethng specific would look. you can just look at none compact.

            Another reason why i prefer this aproach over the previous suggested or Safaris method is. that since you are on the same horionzontal line, every inch counts. and this way there are no "dead" space between the tabs:

            Regarding Safaris coloring and UI merge. i think its a seperate issue and dont think it actually belongs in the same issue as this.

            Since it could also be implemented in none compact mode and doesnt change any functionality, its a purely aesthetic thing. meaning you could like Safaris coloring thing without liking there compact tabs, and other way around

            But sure i can try to make one. they are a bit harder to make a sketch of tho

              Here is another example of it with the Safari UI merge/color adoption:

              But again. i think this is a completly seperat issue from "compact tabs" as compact tabs are about increasing website space, and this adds nothing. it looks nice sure.. but its a different issue, wich i think clouds the conversation a bit to bring in. obviously its important that whatever compact tab solution you choose can work with it, would you take that step next to add color, but i think most can

              Also the reason why mock ups are hard to make is because Apple is doing alot of magic trickery with text color, to increase contrast depending on whatever color the icon/text are displayed on

                Another thing is that Apple makes things even more flat when going to compact mode.

                In general i think Apple has some problems with wanting everything to look as flat as possible for aesthetic reasons, which conflicts with what is actual things you can interact with.

                anyway here is how i think they would propably make the proposed system look when paired with UI merge/color adoption:

                Is it better? from an immersion standpoint sure.. it does make everything look way more clean, and if your goal with compact mode is immersion then yeah i think its better. but it doesnt nescessarily align with what makes logical sense, in reading what is what.

                So thats why i kinda want to seperate the 2 issues, of compact tab system, and Safari UI merge/color adaption.
                as i think its 2 different conversations

                  that said I do think the apple way above looks super sweet, and would love to have that

                    some more examples

                    Apple flat design 3 tabs. with open tab being in the middle:

                    Apple flat design 3 tabs. with open tab being to the left:

                    note this isnt propper spacing in the tabs or anything.. it just to illustrate the concept.

                    proper spacing would happen automatically by using the current none compact tab system, there would be no need for any new code regarding function, spacing and scaling

                    also if you wanted it to look even cleaner, you could adopt Safari way of doing it in compact mode where the favicon becomes close button:

                    so you avoid things like this:

                    so would look like this:

                      Ok last flat design example with comparison to Safari

                      Removed the tabs counter and replaced it with Safari arrowdown to save space:

                      Orion sugestion:

                      Safari:

                      Sugestion removes dead space. The sugestion has 1 tab less. but an always there address bar that is as wide as Safaris and way more buttons

                      Small note. the text and favicons on the suggestion are a bit to close to the edges compared to Orion, since my start point was Safaris tabs and didnt borther adjusting each one

                      Longely I personally find apple's design of integrating the address with the tab to be perfect and extremely intuitive. But I believe orion design team prefers to keep the address bar fixed

                          Apple's design is still a bit slow though, there could be a small bookmark star beside the three dots, their translate UI is weird. It sometimes shows in the tab, and sometimes doesn't. These consistency issues, are the only issues I have with apple's design. Maybe also the gaps can be reduced further to make it tidier.

                            bgr95

                            yes also my impression. also dont have a big problem with it, I do find it anyoing tho that the tabs jump around.. i dont think they did the way they expand that well. its not very intuative

                                Just a quick follow up on the above post with how the spacing wasnt orion. this is orion spacing in the green box, so just imagine that orange 🙂

                                as you can also see theres some space to the left of the favicon that is used for the X to close:

                                I would remove that space and use Safaris favicon close:

                                So you can get more tab text/tabs as in my sketch

                                  Longely I love this implementation and your mockups. I think this is how compact tabs should be implemented.

                                      ForumNinja404 thanks 🙂

                                      have some more ideas how to improve the space for the tabs, but want to see what vlad says first.. feel like i have posted alot hehe

                                          Longely i really dislike the lack of contrast between the tab title bar. the actual tab is supposed to be actionable, as in u can drag that one tab around, right click on it, etc. the toolbar is usually considered a distinct part, and now, with it merged into the tab bar, makes confusing. it looks like as if the tab here is actually part of the toolbar, and not a tab

                                          I really prefer the style of safari, or at least some sort of border or shading of each individual tab, so I know that they are distinct tabs.

                                              eirk

                                              I follow what you are saying.

                                              It is suppose to become part of the toolbar tho. thats how normal tabs allready work in both Safari and Orion.

                                              So its trying to follow that logic. The logic of inactive tabs getting cut off with no connenction to the toolbar and active ones merging with it:


                                              But, yes obviously when the merge happens on the same horizontal line, its gets even more swallowed by it. especially with the flat apple design with color merge. thats kinda some of the things i was talking about further up