Merging Chrome into macOS, a Design Experiment

A quick look on my prototype ;)

Much of our computer time is spent inside web apps such as Gmail, Google Docs, or Netflix.

These web apps reside within tabs inside our browsers, a place that has become our virtual workspace.

Yet, interestingly, despite our evolving use patterns, computer designs remain firmly rooted in a tradition. They were historically built around using local desktop apps or browsing static web pages.

This design legacy has been around for decades, and while it has seen evolutionary leaps, a more profound shift beckons.

• Disclaimer #1 : this article is only about UX/UI, not about tech
• Disclaimer #2: startup bias here (this will not be interesting for you if you are in an enormous corp that works like it’s the 90s)

A Historical Glance at Computer Evolution

• Command Line Interface: In the early days, we had the command-line interface. It was a world devoid of graphical representations, and every action necessitated a command.
• Windows & Files Paradigm: The invention of Graphical User Interfaces (GUIs) transformed computing. It introduced windows and files, making computers more user-friendly and visually appealing. Then come the web browser, a window with static web pages in it.
• Today’s Paradigm — Browsers (and a legacy of windows & files):
  Browsers became powerful enough to run apps, the modern era begins. The consequence is that we spend 90% of our time in the browser window. And inside of it, its own paradigm based on tabs and URLs. Yet the browser is often at capacity when dealing with the complexity of our digital life.

Too many tabs!

Concurrently, the prominence of files is diminishing. Most of our work has transitioned to apps, a shift that many would argue is for the better. Files, with their intricate naming, finding, and sorting requirements, have often been a user’s Achilles heel.

So, the pivotal question arises — What’s next?

The Browser Company, brings an intriguing perspective to the table. They challenge current conventions and propose fresh ways to manage the web. Their ideas, while stimulating thoughtful discourse, are not without critics. Some find their sidebar design, which takes precedence over content, to be cumbersome.

I think numerous robust solutions might already exist within our current OS (Windows & macOS). Features like touchpad gestures, focus mode, or even the simple ‘cmd+tab’ shortcut are examples.

A Culinary Metaphor for Digital Management

Imagine for a moment that managing your computer tabs and windows is akin to organizing your kitchen. If you’ve ever been tasked with preparing a large meal, you’ll appreciate the importance of keeping a neat workspace and ensuring everything has its proper place. Drawing parallels to this scenario can illuminate a fresh perspective on handling our digital space.

There are two primary purposes for a window or a tab:

1. To Be Processed: Think of these as the fresh ingredients laid out on your countertop. We can label them as “Consumables”. Their nature dictates that they are either acted upon immediately or planned for later use. Just as with ingredients, they serve their purpose for a specific task (read, view, write) and then are either cleared away or scheduled for later use. Just like perishable ingredients, there’s an expiration on their relevance; they need attention sooner rather than later.
2. To Be Used: Picture these as the sink and utensils you employ while cooking. These are termed “Tools”. They have a more prolonged utility, aiding in various tasks. You might keep them handy if used regularly. If they’re essential, like your favorite knife or skillet, they remain on the counter. Otherwise, they find their storage spot until needed next.

The digital mess emerges when:

1. All tools and consumables are left scattered on the workspace.
2. We blend tools and consumables. For instance, bookmarking applications under ‘Read Later’ or placing watch-later videos in favorites can cause confusion and inefficiencies.

With our enlightening kitchen analogy at the forefront, let’s delve deeper into the user challenges we’d like to solve.

User Problems to Solve

#1 Tabs and Windows Management

• The deluge of open tabs, coupled with a plethora of bookmarks, often leaves users feeling overwhelmed and disoriented.

Arc’s Solution of merging bookmarks with tabs is in my opinion problematic. Bookmarks should be reserved for applications (Tools) and not ephemeral pages meant for one-time consumption (Consumables).

#2 Overcoming Pre-Internet OS Legacy

• The ‘Desktop’ Paradigm: why still lean heavily on a desktop metaphor when 90% of our digital interactions are browser-centric?
• File-centric OS: There’s an app for virtually everything now, rendering the file system’s centrality obsolete. Not to mention, files often lead to user friction due to their inherent complexities.
• App Installation: In 2023, the idea of manually installing an app seems redundant when instant web apps are available at our fingertips.

#3 Overcoming Old Browsers Legacy

• URL Dominance: URLs, while essential, are technicalities. Their persistent display consumes valuable screen space. Local apps don’t incessantly showcase their directory position on your device, so why should browsers?
• Tab Management: Ever tried placing two Chrome tabs side by side? It’s far from convenient. Modern browsers were not built to deal with more than 20 opened tabs.

#4 Solve the “Browser vs OS” Conflict

Since 2010 browsers imitate OS features forcing users to choose a side.

If I want to search for something, should I open Google in my browser or Spotlight in macOS ? If I want to check my emails, should I go to gmail.com or to the Mail app ? Are my latest passwords stored in Chrome or macOS ?

Below a comparaison between both worlds:

Desktop / Browser

• Spotlight / Search Bar
• Setup an app / Open URL
• Apps installed / Favorites
• Local Apps / Webapps
• Local Files & Folders / Offline mode
• Windows / Tab
• Dock / Pinned App
• Sessions / Profiles
• Desktop / Homepage
• Share a file by email / Send link
• Start Menu or Launchpad / New tab
• Cmd+TAB or Touchpad gestures / ❌
• ❌ / Historical
• ❌ / Group of Tabs
• Icons / Favicon
• File path / URL
• ❌ / Read Later
• Split screen / ❌
• Notifications / ❌
• Apps that change the OS / Extensions
• Focus mode / ❌
• Personal info. (payment, email, password) / Personal info.

It’s time we create a seamless blend between the browser and the OS, ensuring a user-friendly and efficient digital experience.

Expectations for the solution

1. Solve all problems above and…
2. Be power enough for the Power User: Catering to professionals with multiple apps and tools in play, the system should be adept at managing tasks via keyboard and touchpad.
3. Be simple enough for the Casual User: With a primary reliance on mouse controls, the interface must ensure all features are evident and within easy reach.
4. Apps should take the maximum screen real estate & user attention, not the OS (= no flashy colors or anything too distracting). The operating system should serve as a quiet facilitator rather than an overpowering presence
5. How it work should be hidden if not important. (e.g. webapps url)
6. Simplicity & Elegance: minimizing the concepts users have to grapple with leads to an intuitive and graceful system.

My solution

1. No Standalone “Browser” App: in this vision, the idea of a browser as a separate application fades away. Tabs and web applications merge with the OS, standing shoulder-to-shoulder with local applications.
2. No distinction between locally stored applications or webapps : in the screenshot the Google app is a webapp but the Slack app can be either locally stored or online, it makes no differences. Web apps are so fast now that people shouldn’t need to know if an app use web based tech or if it’s a desktop version, how it works is a developper problem not a user problem.
3. Hidden URL: As the digital age progresses, URLs lose their importance in the face of recognizable brand names and icons. (You can always see & edit the URL by hovering the name of the tab if it’s a webapp).
4. Applications either operate in full screen or split, optimizing space and focus. The tedium of manual window management becomes obsolete.
5. No more hovering docks at the screen’s edge. The entire interaction and application access migrate to the comprehensive App Bar above.
6. No more Traditional “Desktop”: The static, icon-laden desktop is no more. It’s a dynamic, application-centric space now.
7. Promoting Tab Minimalism: The emphasis shifts towards maintaining fewer open tabs. Instead of hoarding, the focus is on decisive actions: either add it to your to-do or reading list and close the tab. This approach contrasts the current trend of seeing tabs as pending tasks, especially when we already possess efficient task management tools.
8. Minimizing File Exploration: As we embrace the age of applications, the once-central role of files and the Finder utility recedes. They’re not eradicated but take a backseat, making way for a more app-driven interface.

Let’s go into the details.

👉 The App Bar = everything which is opened now on top of the screen

It’s divided in 2:

1. The Temp. Area

• Replaces: opened tabs & opened desktop apps
• Active applications find their place here until their purpose is achieved.
• Objective: to have this list as short as possible at a given moment, if it cannot be done now, it must be added to your Todo list (task manager like Notion) or to the Reading list.

2. Always Open Area

• Replaces : macOS Dock / Windows’ Task bar & pinned apps on Chrome
• Perpetual Operation: Here, apps are always up and running. Even if you ‘close’ them, they merely minimize, operating in the background.
• Dynamic Transition: you can drag & drop an app from the Temporary to the Always Open Area. If it’s a grouped application, all its associated tabs are included.
• Clicking on a link within a pinned app doesn’t replace its position but opens in the active apps section.
• The background is black on purpose to seamlessly blend with the monitor. Envision it as the screen’s extension from beneath, emphasizing the running application.

👉 App Management

What can we do with an opened app?

1. Leave it open because we’re currently working on it
2. Add it to My Apps if we identify it as a Tool, more on that later.
3. Add it to Todo/To read if we identify it as a Consumable

• To read contains a liste of Consumables to process, the goal is to keep this list as small as possible. Whenever possible, the Consumable is saved offline.
• Todo is your own way of managing tasks (Notion, Todoist, Trello etc.)

By putting front and center these 3 buttons we promote an easy processing of opened apps which ultimately lead to a neat workspace. The notion of “Favorite” is not here because it doesn’t include the distinction Consumable/Tool.

👉 New Tab

The New Tab app serves as an amalgam of various utilities: the classic new tab page of your Browser but also the Start menu (Windows) / the Launchpad (macOS), the browser’s search & URL bar, and the OS launcher like Spotlight/Alfred/Raycast.

The “New Tab” app behaves very much like the New Tab button from your browser : it’s always at the far right of opened tab. It’s not possible to close the New Tab app.

When we open an app from the New Tab app, the app replaces the New Tab app in the App Bar and and the (+) icon of the New Tab app shows up at the far right of the The Temp. Area.

Initiating a page from this app seamlessly transitions the interface from the “New Tab” to the relevant application. Simultaneously, a ‘+’ icon materializes at the far end of the app bar, facilitating further interactions.

It allows for swift navigation to Search, My Apps, Read Later, and browsing History.

Integrated Search Mechanism

A harmonious blend of the Chrome’s search bar (also called Omnibox) (Browser component) and launchers like Alfred or Spotlight (OS component).

Easily accessible with shortcuts: CMD+T (like new tab) or CMD+Space (like a launcher). The cursor is automatically positioned in the search bar, primed for keyboard input.

Capabilities include:

1. Opening URLs.
2. Searching via Google or ChatGPT.
3. Launching items from “My Apps”, “Read Later”, or “History”.
4. Interacting with API-integrated apps in “My Apps”, such as playing or pausing Spotify, opening a new Notion page, changing profiles from App Settings, and accessing recent files from Finder.
5. Additional utilities akin to calculators.

My Apps = all my tools

My Apps is a unified repository, replacing traditional favorites and locally installed applications.

• Categorized into Pinned apps (they live in the App Bar in the Always Open Area, they are always opened) and Other Apps sections. We can drag & drop them to change section. It allows for folder organization.
• Can receive notifications.
• In the Culinary Metaphor, this is where all your Tools are lined up. Either pinned for everyday tools (like your favorite knife/Mail app) or occasional use tools (like the blender/Google Photos)
• Enables a one-click installation process through the + My Apps button from the top bar of each window.

• Technologically agnostic: Whether it’s a local app developed in Swift, a PWA, or any other web technology, the “New Tab” app leaves the technicalities to the developer.

👉 Shortcuts & Gestures

One of the critical components for ensuring a seamless and intuitive user experience is the implementation of shortcuts and gestures. They can dramatically speed up tasks and foster a sense of mastery over the system. 2 focuses: Cleaning Opened Apps & Navigating between Apps

Cleaning Opened Apps:

• 3 fingers swipe up: Closes the central window if the cursor is in the center. If the cursor is on the sidebar, it closes the sidebar. Think of this as the “go away!” gesture.

• 3-finger swipe down: Saves the current window to the “TO READ” list and closes the central window (if cursor is in the center) or sidebar (if cursor is on the sidebar). This is a “go to me!” gesture.

See how the “📚 To Read” app is giggling in the App Bar

• 4-finger swipe down: Stores the current window in the “TODO” list and then proceeds to close the central window or sidebar based on the cursor position. This is a “go to me!” gesture.

Navigating:

• 3 fingers swipe left/right (or CTRL+TAB) : Navigates to the subsequent app or tab inside Page Group in the central window (if cursor is in the center) or sidebar (if cursor is on the sidebar)

• CMD+TAB: Activates the central banner and switches to the next app instance based on the order of last use. While browsers and apps are blended, it’s a crazy fast way for power user to manipulate the interface.

• CMD+T or CMD+SPACE: Launches a new tab with the cursor positioned in the search bar, combining the functions of both Spotlight/Alfred and Chrome Search bar.

👉 Sidebar = 1-click-multitasking

The Sidebar serves as a liaison to the core working area. This makes it particularly useful for multitasking and especially the tasks that require rapid shifting between interfaces, such as:

• Taking notes during a meeting.
• Transfer files like image or PDF from the Finder into the core working area by simple drag & drop
• Managing a video call while collaborating on shared projects.
• Quickly glancing at the day’s calendar.
• Quick look at the to-do list for the day.
• Checking recently received emails.
• Asking something to ChatGPT
• Access to the “To Read” list of Consumables
• Skip the song in Spotify

Apps that are pinned to the right of the designated point are, by default, showcased in the sidebar. This provides an immediate access point, ensuring that the liaison apps are always within arm’s reach.

By simply dragging and dropping the app icons across the designated point, they can toggle between the app appearing by default in the sidebar or the central screen space.

The Finder (or files management) is a perfect candidate for this Sidebar because its new role in the App Era is to serve the apps as a way of linking information from one app to another when there is no official integration. For example: an image file sent by mail that needs to be added in a Notion page for a project.

Any link clicked within the Sidebar will launch in a new tab within the main area. This ensures that the user doesn’t lose their current position or task, allowing for a smooth and uninterrupted workflow.

👉 The System App

The “System” app functions as the central hub for all your device’s configurations, offering both quick access to frequently used settings and an in-depth dive into advanced configurations.

It is fixed in the top right corner. This strategic placement ensures that it remains easily accessible regardless of the user’s current task. Given its importance, the icon’s fixed position ensures users never have to search for it.

As it’s in the right side of the Always Open Area, it is, of course, always open (in the background) and shows up in the Sidebar when we click on it.

Contents:

• Shortcut to Commonly Used Settings: Provides rapid access to the most frequently tweaked settings. (volume, network, user profile — more on that later)
• Complete Settings View: Beyond the shortcuts, users can delve into the intricate details of every setting available on their device.
• Power Management: Directly shut down or restart the device without navigating through multiple options.
• Account Management: View account details, sign out, or switch profiles.
• Updates: If any system updates are available, they’ll be prominently displayed here, allowing users to keep their device up-to-date with the latest features and security patches.

👉 Profiles

In an era of increasing multitasking and blending of personal and professional spaces, there’s a growing need for devices to adapt quickly to users’ changing contexts. Enter the “Profiles” feature — a customizable suite of settings, applications, and appearances that users can switch between effortlessly.

What Constitutes a Profile?

• Pinned App List: Each profile can have a unique set of applications pinned to its homepage or dock, reflecting the context in which the profile will be used.
• Notification Settings for ‘My Apps’: Customize which apps can send notifications and the type of notifications (silent, banners, alerts) for each profile. This ensures you’re only alerted to what’s most relevant in that moment.
• Read Later List: A collection of articles, links, and other content you want to catch up on later. Each profile can have a different reading list tailored to its purpose.
• New Tab Wallpaper: Personalize the background of the new tab page in each profile, allowing for a distinct and mood-appropriate ambiance.

Switching Between Profiles:

• Manual Switch: Within the system app, users can effortlessly toggle between profiles.
• Scheduled Switch: Set specific times for profiles to activate automatically. For instance, your “pro” profile might be active from 9 am to 5 pm on weekdays, and then your “personal” profile takes over.
• Device-based Switch: Your device could also detect its location (e.g., home, office, on-the-move) and adjust the profile accordingly.

Examples of Profiles:

• Professional: Geared for productivity, this profile might have applications like Slack, Notion, and your professional email client pinned to the homepage. Distractions are minimized with only work-related notifications enabled.
• Personal: This is your leisure space. Netflix for entertainment, news apps for catching up on world events, Notion for personal projects, personal email, and Spotify for some background music.
• Mobile or On-the-Go: When you’re out and about, this profile prioritizes applications that aid mobility. WhatsApp for instant messaging, Instagram for social interactions, Uber for transport, Google Maps for navigation, and a notes app for quick jot-downs.

👉 Page Groups

Page Groups effectively replace browser tab groups, Spaces (from macOS), and browser windows with multiple tabs. They serve as unified task management centers.

Much like in Chrome, tabs with the same domain get auto-grouped if opened successively. This reduces clutter and aids quick navigation. If a Page Group consists solely of pages from one domain, its icon in the app bar inherits the respective website’s favicon for easy identification.

Grouping pages or apps is as intuitive as dragging and dropping them onto an app icon. A unique group logo, reminiscent of Discord server icons, is automatically generated. Want to merge two Groups? Merge them together with simple drag & drop. The tabs from both groups will be sequentially organized, ensuring continuity in tasks.

Want a workspace that’s always ready? Pin a Page Group! This ensures you have a pre-set environment for specific tasks, whether it’s research, entertainment, or project management.

Be sure to check the following video in your desktop computer in full screen ✌️

What’s next?

• Mobile Version
• Multi Screen management
• a lot of stuff really, this was only a teaser!

Why am I doing this?

1. This has been a lingering itch, a thought that’s repeatedly piqued my curiosity 😅
2. Inspire people who are building OS (like Linux distributions) or browsers (it would be so cool!)
3. Catch Google’s Eye: On a lighter note, who wouldn’t want to be noticed by tech giants like Google? :)

Follow me on Linkedin or take a look at my website :)