Arc Browser : Réimaginer le Chrome du navigateur
Analyse approfondie du systeme de design Arc Browser : navigation par barre laterale, Spaces, barre de commande, Boosts et les patterns revolutionnaires. Avec des exemples de code CSS, SwiftUI et TypeScript.
Arc Browser : Réinventer l'interface du navigateur
« Le navigateur est devenu le système d'exploitation. Alors pourquoi ressemble-t-il encore à un logiciel de 2008 ? » — Josh Miller, The Browser Company
Arc a remis en question chaque convention des navigateurs, du placement des onglets à la gestion des fenêtres. Le résultat est un navigateur qui ressemble davantage à un outil créatif qu'à une application utilitaire.
Points clés
- La barre latérale verticale surpasse les onglets horizontaux - Les titres des onglets restent lisibles, et l'espace vertical est abondant sur les écrans larges modernes
- Les espaces séparent les contextes mentaux - Les onglets professionnels, personnels et de projet ne se mélangent jamais, réduisant la friction cognitive
- Barre de commande > Barre d'URL - La recherche universelle dans les onglets, l'historique et les actions élimine le besoin d'une organisation parfaite
- La personnalisation fidélise les utilisateurs - Les Boosts permettent aux utilisateurs de corriger eux-mêmes les sites agaçants, créant un investissement personnel
- Adapter le poids de l'interface à la tâche - Little Arc prouve que chaque tâche n'a pas besoin de l'interface complète du navigateur
Pourquoi Arc est important
Arc a prouvé que même les interfaces les plus ancrées peuvent être réinventées. Chrome, Firefox, Safari suivent tous la même disposition de base établie il y a des décennies. Arc s'en est libéré en traitant le navigateur comme un espace de travail, pas comme un gestionnaire de fenêtres.
Réalisations clés : - Élimination complète de la barre d'onglets traditionnelle - Interface du navigateur intégrée nativement à macOS - Séparation significative entre vie personnelle et professionnelle - Pionnier de la personnalisation des sites au niveau du navigateur - Conçu pour une navigation au clavier en priorité
Principes fondamentaux de design
1. La révolution de la barre latérale
L'innovation la plus visible d'Arc : remplacer les onglets horizontaux par une barre latérale verticale qui organise le contenu par contexte, et non par ordre chronologique.
TRADITIONAL TAB BAR:
┌──────────────────────────────────────────────────────────────┐
│ [←][→][↻] │ Tab 1 │ Tab 2 │ Tab 3 │ Tab 4 │ Tab 5 │ ... │ + │
├──────────────────────────────────────────────────────────────┤
│ │
│ Page Content │
│ │
└──────────────────────────────────────────────────────────────┘
Problems: Tabs shrink to unreadable, no organization, endless row
ARC'S SIDEBAR MODEL:
┌────────────────┬─────────────────────────────────────────────┐
│ [*] Space │ │
│ ───────────── │ │
│ Pinned │ │
│ Gmail │ │
│ Calendar │ Page Content │
│ Notion │ (full width) │
│ │ │
│ ───────────── │ │
│ Today │ │
│ Tab 1 │ │
│ Tab 2 │ │
│ Tab 3 │ │
│ │ │
│ [+ New Tab] │ │
└────────────────┴─────────────────────────────────────────────┘
Benefits: Readable titles, pinned favorites, organized by purpose
L'insight clé : L'espace horizontal est précieux ; l'espace vertical est abondant. Utiliser la barre latérale permet aux titres des onglets de respirer.
Pattern CSS (Barre latérale repliable) :
.sidebar {
--sidebar-width: 240px;
--sidebar-collapsed: 48px;
width: var(--sidebar-width);
height: 100vh;
display: flex;
flex-direction: column;
background: var(--surface-1);
transition: width 0.2s ease-out;
}
.sidebar.collapsed {
width: var(--sidebar-collapsed);
}
.sidebar.collapsed .tab-title {
opacity: 0;
pointer-events: none;
}
/* Hover to peek */
.sidebar.collapsed:hover {
width: var(--sidebar-width);
}
.sidebar.collapsed:hover .tab-title {
opacity: 1;
transition: opacity 0.15s ease-in 0.1s; /* Delay for smooth reveal */
}
Pattern SwiftUI :
struct SidebarView: View {
@State private var isCollapsed = false
@State private var isHovering = false
private var effectiveWidth: CGFloat {
isCollapsed && !isHovering ? 48 : 240
}
var body: some View {
VStack(alignment: .leading, spacing: 0) {
PinnedSection()
Divider()
TodaySection()
Spacer()
NewTabButton()
}
.frame(width: effectiveWidth)
.animation(.easeOut(duration: 0.2), value: effectiveWidth)
.onHover { isHovering = $0 }
}
}
2. Spaces : Organisation basée sur le contexte
Les Spaces séparent le travail du personnel, un projet d'un autre. Chaque Space est un contexte de navigation complet avec ses propres onglets, sites épinglés, et même son propre thème.
SPACE ARCHITECTURE:
┌─────────────────────────────────────────────────────────────┐
│ Arc Browser │
├───────────┬───────────┬───────────┬─────────────────────────┤
│ Work │ Personal │ Project │ │
│ Space │ Space │ Space │ Content Area │
│ ───── │ ───── │ ───── │ │
│ • Slack │ • Gmail │ • GitHub │ │
│ • Docs │ • Reddit │ • Figma │ │
│ • Jira │ • Netflix│ • Notion │ │
└───────────┴───────────┴───────────┴─────────────────────────┘
Each Space has:
├── Unique pinned tabs
├── Separate "Today" tabs
├── Own color theme/gradient
├── Isolated browsing context
└── Keyboard shortcut (Cmd+1, Cmd+2, etc.)
L'insight clé : Les contextes mentaux ne doivent pas fuir. Les onglets professionnels qui apparaissent pendant le temps personnel créent une friction cognitive.
Modèle de données :
interface Space {
id: string;
name: string;
icon?: string;
gradient: {
from: string;
to: string;
angle: number;
};
pinnedTabs: Tab[];
todayTabs: Tab[];
archivedTabs: Tab[];
profile?: BrowserProfile; // Different cookies, history, etc.
}
interface Tab {
id: string;
url: string;
title: string;
favicon?: string;
isPinned: boolean;
lastAccessed: Date;
parentFolderId?: string;
}
Implémentation SwiftUI :
struct SpaceSwitcher: View {
@Binding var currentSpace: Space
let spaces: [Space]
var body: some View {
HStack(spacing: 8) {
ForEach(spaces) { space in
SpaceButton(
space: space,
isActive: space.id == currentSpace.id
) {
withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
currentSpace = space
}
}
}
}
.padding(.horizontal, 12)
}
}
struct SpaceButton: View {
let space: Space
let isActive: Bool
let action: () -> Void
var body: some View {
Button(action: action) {
Circle()
.fill(
LinearGradient(
colors: [space.gradient.from, space.gradient.to],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.frame(width: 24, height: 24)
.overlay {
if isActive {
Circle()
.strokeBorder(.white, lineWidth: 2)
}
}
}
.buttonStyle(.plain)
.keyboardShortcut(space.keyboardShortcut)
}
}
3. Barre de commande : Spotlight pour le navigateur
La barre de commande d’Arc (Cmd+T) est bien plus qu’une simple barre d’URL. Elle offre une recherche universelle à travers les onglets, l’historique, les favoris et les actions.
COMMAND BAR INTERACTION:
┌─────────────────────────────────────────────────────────────┐
│ > Search tabs, history, or type a URL... │
├─────────────────────────────────────────────────────────────┤
│ OPEN TABS │
│ [doc] Notion - Project Planning Cmd+1 │
│ [doc] GitHub - Pull Request #123 │
│ │
│ HISTORY │
│ [>] Figma - Design System (2 hours ago) │
│ [>] MDN - CSS Grid Guide (yesterday) │
│ │
│ ACTIONS │
│ [*] New Note Cmd+Shift+N │
│ [*] Split View Cmd+Shift+\ │
│ [*] Copy URL Cmd+Shift+C │
└─────────────────────────────────────────────────────────────┘
L’insight clé : Trouver devrait être plus rapide qu’organiser. Une bonne recherche élimine le besoin d’une organisation parfaite.
Pattern CSS :
.command-bar {
--bar-width: min(600px, 90vw);
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: var(--bar-width);
background: var(--surface-elevated);
border-radius: var(--radius-lg);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.command-input {
width: 100%;
padding: 16px 20px;
font-size: 18px;
background: transparent;
border: none;
color: var(--text-primary);
}
.command-results {
max-height: 400px;
overflow-y: auto;
border-top: 1px solid var(--border-subtle);
}
.command-result {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
cursor: pointer;
}
.command-result:hover,
.command-result.selected {
background: var(--surface-hover);
}
.command-result-shortcut {
margin-left: auto;
font-size: 12px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
4. Boosts : Personnalisation au niveau utilisateur
Les Boosts permettent aux utilisateurs d’injecter du CSS et du JavaScript personnalisés dans n’importe quel site web : modes sombres personnels, interfaces épurées ou fonctionnalités améliorées.
BOOST CONCEPT:
Without Boost: With Boost:
┌─────────────────────┐ ┌─────────────────────┐
│ [Header] │ │ │
│ [Navigation] │ │ │
│ [Sidebar] [Content] │ → │ [Content] │
│ [Footer] │ │ (clean, focused)│
│ [Cookie Banner] │ │ │
└─────────────────────┘ └─────────────────────┘
User-created CSS:
- Hide distracting elements
- Change colors/fonts
- Improve readability
L'idée clé : Chaque utilisateur a des sites qu'il visite quotidiennement mais qu'il souhaiterait voir fonctionner différemment. Donnez-lui le contrôle.
Pattern d'implémentation :
interface Boost {
id: string;
name: string;
domain: string; // "github.com" or "*.google.com"
enabled: boolean;
css?: string;
js?: string;
createdAt: Date;
}
// Example Boost: Clean YouTube
const youtubeBoost: Boost = {
id: 'youtube-clean',
name: 'Clean YouTube',
domain: 'youtube.com',
enabled: true,
css: `
/* Hide recommendations */
#secondary,
ytd-browse[page-subtype="home"] ytd-rich-grid-renderer {
display: none !important;
}
/* Hide comments */
#comments {
display: none !important;
}
/* Expand video */
#primary {
max-width: 100% !important;
}
`
};
Éditeur de Boost en SwiftUI :
struct BoostEditor: View {
@Binding var boost: Boost
@State private var activeTab: BoostTab = .css
enum BoostTab: String, CaseIterable {
case css = "CSS"
case javascript = "JavaScript"
}
var body: some View {
VStack(spacing: 0) {
// Domain selector
HStack {
Image(systemName: "globe")
TextField("Domain (e.g., github.com)", text: $boost.domain)
.textFieldStyle(.plain)
}
.padding()
.background(.ultraThinMaterial)
// Tab selector
Picker("", selection: $activeTab) {
ForEach(BoostTab.allCases, id: \.self) { tab in
Text(tab.rawValue).tag(tab)
}
}
.pickerStyle(.segmented)
.padding()
// Code editor
CodeEditor(
text: activeTab == .css ? $boost.css : $boost.js,
language: activeTab == .css ? .css : .javascript
)
}
}
}
5. Little Arc : Minimaliste par conception
Little Arc est une fenêtre séparée et minimaliste pour les tâches rapides : un seul onglet, aucun chrome, sans distraction.
FULL ARC: LITTLE ARC:
┌────────┬────────────────┐ ┌────────────────────────┐
│Sidebar │ │ │ ← google.com/search... │
│ │ Content │ ├────────────────────────┤
│ │ │ │ │
│ │ │ → │ Search Results │
│ │ │ │ (just the content) │
└────────┴────────────────┘ └────────────────────────┘
Use cases:
- Quick search
- Checking one thing
- Opening links from other apps
L'idée clé : Toutes les tâches ne nécessitent pas le navigateur complet. Adaptez l'interface au poids de la tâche.
Pattern CSS (Chrome minimal) :
.mini-browser {
--chrome-height: 36px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.mini-chrome {
height: var(--chrome-height);
display: flex;
align-items: center;
padding: 0 12px;
background: var(--surface-1);
gap: 8px;
}
.mini-url-bar {
flex: 1;
padding: 4px 8px;
font-size: 13px;
background: var(--surface-2);
border-radius: var(--radius-sm);
color: var(--text-secondary);
}
.mini-content {
height: calc(100% - var(--chrome-height));
}
Patterns transférables
Pattern 1 : Éphémère vs. Persistant
La section « Today » d'Arc archive automatiquement les onglets après 12 heures. Les éléments persistants doivent être explicitement épinglés.
interface EphemeralityConfig {
defaultLifetime: number; // milliseconds
onExpire: 'archive' | 'close' | 'prompt';
exceptions: string[]; // domains that never expire
}
function shouldArchive(tab: Tab, config: EphemeralityConfig): boolean {
const age = Date.now() - tab.lastAccessed.getTime();
if (config.exceptions.includes(new URL(tab.url).hostname)) {
return false;
}
return age > config.defaultLifetime;
}
Pattern 2 : Vue Divisée
Navigation côte à côte sans gérer de fenêtres séparées.
struct SplitView: View {
@State private var splitRatio: CGFloat = 0.5
let leftTab: Tab
let rightTab: Tab
var body: some View {
GeometryReader { geometry in
HStack(spacing: 1) {
WebView(tab: leftTab)
.frame(width: geometry.size.width * splitRatio)
// Draggable divider
Rectangle()
.fill(.quaternary)
.frame(width: 4)
.gesture(
DragGesture()
.onChanged { value in
let newRatio = value.location.x / geometry.size.width
splitRatio = max(0.2, min(0.8, newRatio))
}
)
WebView(tab: rightTab)
}
}
}
}
Pattern 3 : Identités par Dégradé
Chaque Space possède un dégradé unique qui permet une reconnaissance visuelle instantanée.
.space-gradient {
--gradient-work: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-personal: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-project: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.space-indicator {
width: 100%;
height: 4px;
background: var(--current-gradient);
}
.space-badge {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--current-gradient);
display: flex;
align-items: center;
justify-content: center;
}
Leçons de Design
- Remettre en question les présupposés : La barre d'onglets n'est pas sacrée ; rien ne l'est
- Séparation des contextes : Différentes tâches méritent différents environnements
- Le clavier d'abord : Les utilisateurs avancés naviguent sans souris
- Complexité progressive : Simple par défaut, puissant quand nécessaire
- Personnalisation utilisateur : Permettre aux gens de s'approprier le logiciel
- Poids approprié : Adapter la complexité de l'interface à la complexité de la tâche
Foire Aux Questions
Pourquoi Arc utilise-t-il une barre latérale verticale au lieu d'onglets horizontaux ?
Les onglets horizontaux rétrécissent jusqu'à devenir illisibles lorsque vous ouvrez de nombreuses pages. Les barres latérales verticales utilisent l'abondante hauteur d'écran des moniteurs widescreen modernes, gardant les titres des onglets entièrement visibles. La barre latérale permet également des fonctionnalités d'organisation comme les sections épinglées et les dossiers qui ne fonctionnent pas bien horizontalement.
En quoi les Spaces d'Arc diffèrent-ils des profils de navigateur ?
Les Spaces sont plus légers que les profils de navigateur complets. Alors que les profils créent des instances de navigateur complètement séparées (cookies, historique et extensions différents), les Spaces partagent votre configuration de navigateur mais organisent les onglets par contexte. Vous pouvez changer de Space instantanément avec des raccourcis clavier, alors que changer de profil nécessite de relancer ou d'ouvrir de nouvelles fenêtres.
Qu'arrive-t-il aux onglets dans la section « Aujourd'hui » d'Arc ?
Les onglets dans la section Aujourd'hui s'archivent automatiquement après 12 heures d'inactivité. Ils ne sont pas supprimés mais déplacés vers une archive consultable. Cela empêche l'accumulation d'onglets tout en gardant le contenu récupérable. Les onglets épinglés ne s'archivent jamais automatiquement.
Puis-je utiliser les patterns de design d'Arc dans ma propre application ?
Oui. Les patterns documentés ici (barre latérale rétractable, palette de commandes, architecture des Spaces, système Boost) sont des concepts transférables. Les exemples de code montrent des implémentations en CSS, SwiftUI et TypeScript que vous pouvez adapter. Les patterns de barre latérale et de barre de commandes fonctionnent particulièrement bien pour toute application à contenu dense.
Comment la Command Bar d'Arc améliore-t-elle les barres d'URL traditionnelles ?
Les barres d'URL traditionnelles recherchent dans l'historique et suggèrent des URLs. La Command Bar d'Arc recherche dans les onglets ouverts, l'historique, les favoris et les actions disponibles depuis une seule entrée. Vous pouvez trouver un onglet ouvert, exécuter une commande ou naviguer vers un nouvel endroit sans changer de contexte ni vous souvenir où quelque chose se trouve.
Références
- Josh Miller (PDG de The Browser Company) sur la philosophie de design d'Arc : The Browser Company Blog
- L'évolution des interfaces de navigateur et la persistance de la barre d'onglets : Nielsen Norman Group - Browser UX
- Patterns de conception d'interfaces clavier-first : Human Interface Guidelines - Keyboard Navigation
- Patterns de palette de commandes dans les logiciels modernes : implémentations de Superhuman, Linear et Raycast