15

I’ve been designing user interfaces for 20 years now, and information-dense apps are my secret passion. I tried all major Mac browsers, and I switch them regularly, to force myself rebuild my web browsing habits.

I’ve been super excited about the new Arc browser, it looked very promising on videos… Until I actually installed it. Despite many interesting features, my general feeling after using it is disappointment. It feels to “designed”, too elite maybe.

It is also clearly made for much larger screens than my modest 13 inch Air. Compare the numder of tabs in Arc and Orion:

And I have no option to make interface more compact. Sorry Arc, my browser is a work tool. It needs to be productive, not just fancy.

Another example: Archive page. And no, it won’t let me zoom out.

Also bad

No new tab page – makes me think that a new tab is actually useful!

Instead of “new tab” concept, Arc offers an all-in-one “command palette”:

Well, turns out – having a permanent collection of often-used links is so convenient, I have to abandon Arc and switch to any other browser. I actually developed a New Tab extension, that’s how much I like the idea:

Auto-closing tabs. Don’t touch my tabs!

I think I understand the reasoning behing this decision. Well, I am capable of organizing my stuff, I just need the tool to make it as easy as possible. The system that comes in and messes with the structure I was working with – I just don’t see how it can be working for anyone.

Extras

  • Why does every app wants to also include notes?
  • And a whiteboard?

The good

  • Spaces are fancy tab groups, with icons and background colors. The selector on bottom works well, the ability to swipe spaces with keyboard shortcuts is nice.
  • Split view is well done. Not much to say.
  • Hiding extensions into a menu. That’s actually brilliant. This is my Chrome’s top-right:

and I never ever need to look at any of these icons while I work. Arc moved them inside a menu:

And now, some

Random thoughts on tab management

Tabs were an incredible invention. Problem is, there is so much more we now do in our browsers. No one seems to have yet figured out the interface to manage this amount of structured information, good enough for a grandmother to use.

(We, nerds, have tens of extensions installed, with Workspaces, Collections, Bookmark Organizers.)

So far, the best solution is some sort of splitting tabs into groups:

  • Tab Groups in Chrome and Safari
  • Windows (a.k.a. Tab Groups) in Orion
  • Spaces in Arc
  • Stacks in Vivald.

You can use tab groups to separate your work projects, personal topics of interest, etc. That is, until you click a link an email, then another one in messenger, and before you notice, your tab bar is full of unorganized tabs again.

Is this hopeless? I believe it is :-)

However. I’ve been thinking of other, more experimental ways of showing groups of tabs in a ways that’s easy to interact with.

One idea that just struck me is: Kanban board! (e.g. Trello). Take a look at this interface:

https://img.ctrlq.org/di/class-teaching-trello.png

There are some lists, each list containing some cards. Well, tabs are cards, and lists are groups. I imagine this kind of tab management would be easier to work with than this:

I have a theory that website thumbnails do more harm than good: they are too detailed. You cannot memorize them and recognize later. Favicons are much better for recognizing a webpage quickly.

Look at Trello again:

https://img.ctrlq.org/di/class-teaching-trello.png

Imagine this is a list of groups of tabs. What’s great about this interface is that it gives you a coherent visual representaion of ALL your webpages. All your browsing experience becomes a canvas, you can grasp it as a mental “picture”.

As if it was not enough :-), here is the quick Figma prototype:

https://www.figma.com/proto/p3DJVYwrHvHzbQ4JELj5fp/Kanban-like-tab-management?node-id=2%3A344&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=2%3A344

Click [][] icon to see what I mean.

Video

I’m not suggesting it as a feature for Orion, just sharing my thoughts!

  • Vlad replied to this.

    Hiding extensions into a menu. That’s actually brilliant. This is my Chrome’s top-right

    Chrome can do this, just unpin your extensions
    Orion has this as well.

      Hi Vlad,

      I like your mockup of a kanban system for browser tabs! While I agree with you that thumbnails are complex, I rely on them to tell the difference between identical sites, like different pages on the same documentation site, or WordPress dashboards for multiple sites (I color my WP dashboards differently per site).

      However, I don't think thumbnails need to be as large as they are in Safari's tab overview—I think a good compromise would be to have tiny thumbnails to the left of the tab cards:

      I can't remember where I saw this thumbnail design, where the image is cropped around the logo area. Maybe it was the Speed Dial thumbnails in old Opera, before they switched from Presto to Chromium (RIP).

      Arc's design looks like they're optimizing for tap targets, but Arc is a browser for macOS, so it doesn't make much sense to waste space like that. I think the overall idea is to browse with purpose rather than tab hoard, and maybe bigger UI elements encourages less open tabs. The tab auto-archive feature helps with tab clutter. I'm not a fan of the approach though.

      I love it when apps have a command palette, and I think showing it instead of a new tab page is brilliant! My new tab page is blank in all my browsers, because it's too easy for me to get sidetracked by bookmarks, frequently visited, reading list, etc. Would love to see a command palette in Orion in the future, even if it doesn't replace the new tab page.

      Also, I'm a fan of your work, I've been using your wallpapers since 2011.

        lkhrs - much appreciated! People are different, and that's wonderful :-)

          vladstudio Thanks for sharing your ideas in such detail manner. I assume that tab kanban view would replace current "Tab View" in Orion (it also has to be reachable for people who do not use vertical tabs).

          If so then it is exactly what we were thinking about. If there is only one group/window it would still look pretty much like it does now and the user shouldbe able to zoom into any tab group to get a similar view.

          I researched this topic a lot in the past, and Firefox had this idea of Tab Candy which later became Panorama view extension. The spatial organization where the user has infinte canvas to organize their tabs + notes also made sense. Check my notes below in assorted/random order if you want to think more about this.



          https://addons.mozilla.org/en-US/firefox/addon/panorama-tab-groups/
          https://addons.mozilla.org/en-US/firefox/addon/panorama-view/

          https://museapp.com
          https://www.nototo.app/


            Vlad,

            “it is exactly what we were thinking about” — that’s not at all what I expected, but that is beyond awesome :-)

            Never heard of Firefox’s Tab Candy - thanks for the video! It’s from 2010, wow. Interesting why this kind of tab management did not become mainstream. I’d speculate that it could become visually overwhelming really fast. I’m already lost looking at this screen (and there’s less than 20 webpages visible!):

            Paradoxically, a good management tool has constrains that limit your freedom, but instead offers some clever “concept” – to operate quickly and without much effort. Tabs themselves are a good example. There is not much you can do with tabs – but within these limits, they are a very efficient management tool.

            For this reason, I’m afraid an infinite canvas is not an appropriate solution (however tempting it looks). You can drag anything anywhere, this means the tool does not really assist you, you’re on your own, and your canvas becomes a mess very soon (unless you are obsessed with keeping things in order).

            I believe infinite boards do have their audience, it’s just a niche, not a concept that can be adopted widely.

            Since the talk is getting serious :-) I thought I’d make more detailed Figma prototype:

            https://www.figma.com/proto/p3DJVYwrHvHzbQ4JELj5fp/Kanban-like-tab-management?node-id=31%3A428&scaling=min-zoom&page-id=28%3A395&starting-point-node-id=31%3A428

            (click anywhere and Figma will highlight what’s clickable on each frame).

            Try the following:

            • click [>] to open next group;
            • click [<] to return to the previous group;
            • click [||] to open the kanban-like interface;
            • click a selected tab in groups 1 or 2 to go back to them;
            • back in the kanban-like interface, click [···] on group 1 to open context menu.

            Some screenshots:

            • Vlad replied to this.

              vladstudio This looks incredible. The main constraint for tab management in Orion is that a solution needs to work equally well for horizontal tab users (which there are more of then vertical tab users). It is the main reason the current solution in Orion works like it does and your prototype does not address horizontal tab users.

              Going back to the 'kanban' view, if you want to explore it a little more this extension was marked as inpiration for us (functionality wise, the design is outdated, so you may want to play with it a bit)

              https://chrome.google.com/webstore/detail/tab-organizer/gbaokejhnafeofbniplkljehipcekkbh

                Vlad Oh, yes, horizontal tabs! Totally forgot about them. Here is the new prototype (not as elegant as vertical view, but works well anyway):

                https://www.figma.com/proto/p3DJVYwrHvHzbQ4JELj5fp/Kanban-like-tab-management?node-id=71%3A972&scaling=scale-down-width&page-id=70%3A773&starting-point-node-id=71%3A972

                • click "kanban" icon to open the kanban-like view.
                • click "A list apart" tab to go back.

                (also added "search tabs" input to both prototypes).

                  Also - the look & feel of "kanban for horizontal tabs" can be worked on and made much better! Just another iteration:

                    vladstudio Thanks for sharing your ideas. Hopefully others will chime in.

                      9 days later

                      Hi there,

                      What if the kanban view for horizontal tabs was identical to the one from vertical tabs? it's more space efficient and works well if a tab has many groups (think of scrolling a vertical tab group).

                      also I love that in the prototype it's possible to both quickly switch the tab group or view all tab groups kanban style

                        TheUser1 I agree with this, I think the whole idea of a kanban view is synonymous with having the groups be vertical (do a kagi image search for kanban view and compare the results vertical vs horizontal).

                        I am a horizontal tab view user, because I prefer the extra horizontal real estate whilst browsing the web. With that being said I much prefer the vertical layout of kanban prototypes in this thread, I personally think they look a lot better visually, whilst also providing better performance as they appear less cluttered.

                        I think implementing some form of button to take you to this kanban view (or by replacing the current tab overview), should take you into a vertically laid out kanban view, no matter your tab orientation.

                        5 months later

                        Most of things talked here are addressed in the next release (minus kanban tabs) so I am going to mark this as done. We are planning to have kanban tab management in the future. Here is a design preview.

                          Vlad

                          oh wow! that's very exciting. Looking forward to the next release!