Reimagining the browser for productivity

The challenge

Brave, built on Chromium, inherited the classic horizontal tab design that has been a browser standard for decades. However, modern web usage patterns revealed several limitations:

1. Screen real estate wasn't being used efficiently, especially on widescreen displays.

2. Tab management became unwieldy with multiple open tabs that a lot of our tab hoarders have to deal with.

3. The traditional tab design didn't accommodate newer browsing patterns like side-by-side comparisons, or being able to reference content from other tabs. 

Design process

Phase 1: vertical tabs 

The first major challenge was reconceptualizing how tabs could work in a vertical orientation. The existing horizontal tab design, with its connected edge to the content area, wouldn't translate effectively to a vertical layout. This led to the development of the "pill" design concept.

The pill-shaped tab represented a significant departure from traditional browser tabs. Instead of appearing attached to the content area, these tabs float independently in the tab bar, creating a more abstract visual representation of the relationship between the tab and content. Although controversial, this design choice had several advantages:

• Improved scalability for multiple tabs.

• Clearer visual separation between navigation and content.

• More efficient use of vertical space.

• A detachment of the 1:1 relationship between a tab and the content window.

This new pill shape design worked really well for vertical tabs, and I had the theory that it would also work really well in horizontal tabs. I kept that idea in my sleeve for features that were yet to come.

Phase 2: content area adaptation

With the introduction of vertical tabs, the main content area required careful reconsideration. We needed to:

1. Add appropriate padding to accommodate the vertical tab list.

2. Create a subtle separation between content and sidebar. The content of the website should never be confused with some other part of the browser UI.

3. Ensure the content area remains responsive to different window sizes.

4. Maintain a clean, uncluttered appearance despite the additional UI elements.

Phase 3: Unifying the Tab Design Language

The success of the pill-shaped design in vertical tabs revealed an opportunity to create a more cohesive browsing experience.

We realized that bringing this same design language to horizontal tabs would not only create visual consistency but also prepare the groundwork for future features. By disconnecting tabs from the content area and giving them the same pill-shaped appearance as their vertical counterparts, we created a more flexible foundation for upcoming features like split view.

This unified design approach offered several advantages. First, it made the interface more intuitive – users who were familiar with one tab style could easily understand the other. Second, it created a more modern, cleaner aesthetic throughout the browser. Most importantly, it established a design pattern that could accommodate future innovations in tab management and window organization without feeling disjointed or like a patchwork of features.

The transformation of horizontal tabs into the pill design was particularly crucial for split view functionality. When users divide their screen between multiple web pages, the detached tab design makes it visually clear which tabs belong to which content area, while maintaining the sleek, contemporary feel of the browser interface.

Phase 4: split view 

The success of the pill design in vertical and horizontal tabs led to the creation of the split view feature. This required solving several design challenges: Creating a visual system to indicate grouped tabs, maintaining clarity in the tab strip for split view states, ensuring smooth transitions between different view modes, and developing intuitive controls for split view management. 

The solution involved introducing a subtle grouping indicator in the tab strip, visually connecting related tabs while maintaining the clean aesthetic of the pill design.

Phase 5: sidebar browsing 

As we observed how users managed their workflows, we noticed a common pattern: they frequently switched between their main browsing activity and reference materials or tools they needed to keep readily available. This insight led to the development of sidebar browsing, a feature that fundamentally changes how users can maintain context while navigating the web.

Sidebar browsing introduces a new way to keep frequently accessed content within reach. Think of it as having a persistent set of compact windows that live in your browser's sidebar. These miniature versions of websites remain accessible regardless of what's happening in your main browsing window. For instance, a user writing a research paper could keep a Google Doc continuously visible in the sidebar while searching for references in their main browser window. 

This eliminates the cognitive overhead of constantly switching between tabs and helps maintain focus on the primary task. Not to mention that users can now have multiple contents without having to deal with managing multiple windows at the OS level.

The design challenge lay in creating an experience that felt natural and unobtrusive. We needed to ensure these sidebar items remained easily accessible without competing with the main content for attention. This led to several key design decisions:

• The sidebar tabs maintain their own independent state from the main browsing session, allowing users to treat them as persistent tools rather than temporary pages. 

• We implemented a compact view that preserves the essential functionality of these sites while fitting comfortably in the reduced space.

• The visual design maintains consistency with our pill-shaped tab aesthetic while clearly distinguishing these persistent views from regular tabs.

• Take advantage of the browser sidebar that Brave currently has, and it's not really being taken advantage of for websites. It's only very relevant for using our AI assistant and a handful of small features, but web shortcuts would just open in new tabs.

The feature particularly shines in scenarios where users need to reference, monitor, or interact with multiple sources simultaneously. A developer might keep documentation visible while coding, a student could maintain note-taking tools while researching, or a financial analyst could monitor market data while reviewing reports.