Notion : La Révolution Basée sur les Blocs

« Nous voulons permettre à chacun d'adapter les logiciels qu'il utilise quotidiennement à ses besoins exacts. » — Ivan Zhao, PDG de Notion

Notion a transformé les logiciels de productivité en faisant de tout un bloc. Cette abstraction apparemment simple a créé une flexibilité infinie tout en maintenant l'utilisabilité — un défi de conception que la plupart pensaient impossible.

Pourquoi Notion Est Important

Notion a prouvé que la complexité peut être composable. Au lieu de fonctionnalités rigides, ils ont créé des briques de construction que les utilisateurs combinent de façons que les concepteurs n'avaient jamais anticipées.

Réalisations clés : - A rendu les bases de données accessibles aux non-développeurs - A créé un canevas infini qui reste familier - A prouvé que flexibilité et utilisabilité ne sont pas opposées - A été pionnier de l'édition collaborative de documents à grande échelle

Points Clés à Retenir

Tout est un bloc - L'approche par unité atomique signifie que chaque élément de contenu (texte, images, bases de données) se comporte de manière identique : déplaçable, transformable, lié
La divulgation progressive échelonne la complexité - Les commandes slash révèlent les fonctionnalités avancées uniquement lorsqu'elles sont invoquées ; les débutants voient la simplicité, les experts trouvent la profondeur
La cohérence prime sur l'ingéniosité - Chaque bloc a la même poignée, le même comportement de glissement, et peut se convertir en n'importe quel autre type
Le canevas infini supprime les contraintes - Les pages contiennent des pages, les bases de données contiennent des pages, tout se lie partout — aucune hiérarchie artificielle
Une typographie apaisante laisse briller le contenu - Un design discret avec une hauteur de ligne généreuse (1.7) et une largeur de lecture confortable (720px) maintient l'attention sur le contenu utilisateur

Principes Fondamentaux de Conception

1. Tout Est un Bloc

L'unité atomique de Notion est le bloc. Chaque élément de contenu est un bloc qui peut être : - Déplacé - Transformé - Référencé - Intégré

TRADITIONAL DOCUMENT:
┌─────────────────────────────────────┐
│ [Fixed header]                      │
│ ─────────────────────────────────   │
│ Paragraph of text that's just text  │
│ and can only be text.               │
│                                     │
│ [Fixed image]                       │
│                                     │
│ Another paragraph, same deal.       │
└─────────────────────────────────────┘

NOTION'S BLOCK MODEL:
┌─────────────────────────────────────┐
│ ⋮⋮ [Heading block - H1]             │  ← Drag to reorder
│ ─────────────────────────────────   │
│ ⋮⋮ [Text block]                     │  ← Turn into toggle, callout, etc.
│     Paragraph that can transform    │
│ ⋮⋮ [Image block]                    │  ← Resize, caption, link
│     [caption]                       │
│ ⋮⋮ [Database block]                 │  ← Full database, inline
│     │ Task │ Status │ Due │         │
│ ⋮⋮ [Text block]                     │
│     Another paragraph               │
└─────────────────────────────────────┘

Le génie : Chaque bloc possède la même poignée (⋮⋮), le même comportement de glissement, et peut être converti en n'importe quel autre type de bloc.

Pattern CSS (Poignée de Bloc) :

.block {
  position: relative;
  padding-left: var(--block-indent);
}

.block-handle {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: grab;
}

.block:hover .block-handle,
.block-handle:focus {
  opacity: 1;
}

/* Universal block spacing */
.block + .block {
  margin-top: var(--space-2);
}

Pattern SwiftUI :

struct BlockView: View {
    @State private var isHovering = false
    let block: Block

    var body: some View {
        HStack(alignment: .top, spacing: 4) {
            // Universal handle
            Image(systemName: "line.3.horizontal")
                .opacity(isHovering ? 1 : 0)
                .animation(.easeOut(duration: 0.15), value: isHovering)

            // Block content (polymorphic)
            BlockContentView(block: block)
        }
        .onHover { isHovering = $0 }
    }
}

2. Divulgation Progressive

Notion révèle la complexité uniquement lorsque c'est nécessaire. L'état par défaut est épuré ; les fonctionnalités avancées émergent à la demande.

Le Menu « / » :

User types: /
           ↓
┌────────────────────────────────┐
│ BASIC BLOCKS                   │
│  [T] Text                      │
│  [P] Page                      │
│  [x] To-do list                │
│   *  Bulleted list             │
│                                │
│ DATABASE                       │
│  [=] Table                     │
│  [#] Board                     │
│  [D] Calendar                  │
│                                │
│ MEDIA                          │
│  [I] Image                     │
│  [V] Video                     │
│  [@] File                      │
└────────────────────────────────┘

Complexité Progressive :

Level 1: Just type (text block)
Level 2: "/" for block types
Level 3: "@" for mentions and links
Level 4: "[" for inline databases
Level 5: Templates and formulas

Principe d'Implémentation :

/* Hidden until needed */
.property-options,
.advanced-settings,
.formula-builder {
  display: none;
}

/* Revealed by explicit action */
.block.selected .property-options,
.settings-expanded .advanced-settings,
.formula-mode .formula-builder {
  display: block;
  animation: fadeSlideIn 0.2s ease-out;
}

3. Le Canevas Infini

Les pages contiennent des pages. Les bases de données contiennent des pages. Les pages se lient partout. L'espace de travail n'a pas de murs.

TRADITIONAL HIERARCHY:
Folders → Documents → Content
   │
   └── Rigid, one location per doc

NOTION'S CANVAS:
Everything → Links to → Everything
   │
   └── Page can exist anywhere
   └── Same data, multiple views
   └── Inline or full-page

Insight clé : Il n'y a pas de « système de fichiers ». Il y a un graphe de contenu connecté.

Pattern - Inline vs Pleine Page :

/* Same content, different containers */
.database-inline {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.database-fullpage {
  height: 100%;
  border: none;
}

/* Content adapts to container */
.database-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

4. Typographie Apaisante

La typographie de Notion est délibérément discrète. Elle laisse le contenu briller.

HIERARCHY THROUGH SIZE AND WEIGHT:

Page Title         ← 40px, Bold, little personality
═══════════════════════════════════════════════

Heading 1          ← 30px, Semibold
───────────────────────────────────────────────

Heading 2          ← 24px, Semibold
. . . . . . . . . . . . . . . . . . . . . . .

Heading 3          ← 20px, Semibold

Body text flows naturally at 16px with         ← 16px, Regular
generous line-height (1.7) and comfortable
measure. Long-form content remains readable.

Système Typographique :

:root {
  /* Notion-inspired scale */
  --font-title: 40px;
  --font-h1: 30px;
  --font-h2: 24px;
  --font-h3: 20px;
  --font-body: 16px;
  --font-small: 14px;

  /* Generous line height for readability */
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Neutral, readable font stack */
  --font-family: -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Roboto', sans-serif;
}

.page-content {
  max-width: 720px;  /* Comfortable reading measure */
  margin: 0 auto;
  font-family: var(--font-family);
  line-height: var(--line-height-relaxed);
}

Patterns transférables

Pattern 1 : Commandes slash

Le mécanisme : Tapez « / » pour révéler des actions contextuelles.

// Slash command registry
interface SlashCommand {
  trigger: string;
  icon: string;
  label: string;
  shortcut?: string;
  action: () => void;
}

const commands: SlashCommand[] = [
  { trigger: 'h1', icon: 'H1', label: 'Heading 1', action: createH1 },
  { trigger: 'bullet', icon: '•', label: 'Bullet list', action: createBullet },
  { trigger: 'todo', icon: '☐', label: 'To-do', action: createTodo },
];

// Filter as user types
function filterCommands(query: string): SlashCommand[] {
  return commands.filter(cmd =>
    cmd.trigger.includes(query.toLowerCase()) ||
    cmd.label.toLowerCase().includes(query.toLowerCase())
  );
}

Pattern 2 : Transformation de blocs

Le mécanisme : N'importe quel bloc peut se transformer en n'importe quel autre bloc.

enum BlockType: CaseIterable {
    case text, heading1, heading2, heading3
    case bulletList, numberedList, toggleList, todo
    case quote, callout, divider
    case image, video, embed

    var icon: String {
        switch self {
        case .text: return "text.alignleft"
        case .heading1: return "textformat.size.larger"
        // ...
        }
    }
}

struct BlockTransformMenu: View {
    let currentBlock: Block
    let onTransform: (BlockType) -> Void

    var body: some View {
        Menu {
            ForEach(BlockType.allCases, id: \.self) { type in
                Button {
                    onTransform(type)
                } label: {
                    Label(type.label, systemImage: type.icon)
                }
            }
        } label: {
            Image(systemName: "arrow.triangle.turn.up.right.circle")
        }
    }
}

Pattern 3 : Mentions inline

Le mécanisme : « @ » pour créer un lien vers n'importe quel élément de l'espace de travail.

.mention {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--bg-mention);
  border-radius: var(--radius-sm);
  color: var(--text-link);
  text-decoration: none;
  cursor: pointer;
}

.mention:hover {
  background: var(--bg-mention-hover);
}

.mention-icon {
  width: 16px;
  height: 16px;
}

Leçons de design

La composabilité plutôt que les fonctionnalités : Construire des blocs qui se combinent, pas des outils monolithiques
Divulgation progressive : Simple par défaut, puissant à la demande
Interactions cohérentes : Chaque bloc fonctionne de la même manière
Interface apaisée : Laisser le contenu être au centre, pas le chrome
Flexibilité infinie : Aucune contrainte artificielle sur la structure

Questions fréquemment posées

Qu'est-ce que l'architecture basée sur les blocs de Notion ?

Chaque élément de contenu dans Notion est un « bloc » — texte, images, bases de données, intégrations, et même les pages elles-mêmes. Chaque bloc a un comportement identique : une poignée pour le glisser-déposer, la capacité de se transformer en d'autres types de blocs, et un espacement cohérent. Cette approche atomique signifie que les utilisateurs apprennent un seul modèle d'interaction qui s'applique partout.

Comment fonctionne le système de commande slash de Notion ?

Taper « / » ouvre un menu contextuel de tous les types de blocs disponibles. Le menu se filtre au fur et à mesure que les utilisateurs tapent (par exemple, « /todo » affiche la liste de tâches). Ce modèle combine la découvrabilité (voir toutes les options) avec la rapidité (les utilisateurs avancés tapent directement les raccourcis). La commande slash est devenue un modèle standard de l'industrie.

Qu'est-ce que la divulgation progressive et comment Notion l'utilise-t-il ?

La divulgation progressive signifie révéler la complexité uniquement quand c'est nécessaire. Dans Notion, le niveau 1 c'est simplement taper (crée un bloc de texte), le niveau 2 c'est « / » pour les types de blocs, le niveau 3 c'est « @ » pour les mentions, le niveau 4 c'est « [ » pour les bases de données, et le niveau 5 ce sont les modèles et formules. Les débutants ne voient jamais d'options écrasantes.

En quoi le canevas infini de Notion diffère-t-il de la structure documentaire traditionnelle ?

Les applications traditionnelles utilisent des hiérarchies de dossiers où chaque document existe à un seul emplacement. Notion traite le contenu comme un graphe : les pages contiennent des pages, les bases de données contiennent des pages, et tout peut se lier à tout. La même base de données peut apparaître en ligne dans plusieurs pages, et les pages n'ont pas d'« emplacement » fixe dans un système de fichiers.

Pourquoi Notion utilise-t-il une typographie si discrète ?

La typographie apaisée de Notion (polices système, corps de 16px, hauteur de ligne de 1.7, largeur maximale de 720px) évite délibérément la personnalité. Les utilisateurs créent des contenus très variés — notes de réunion, wikis, suivis de projets — donc l'interface doit être un canevas neutre qui permet à tout type de contenu de sembler natif.

Ressources

Site web : notion.so
Blog design : Les coulisses des décisions de design de Notion
Galerie de modèles : Modèles et cas d'usage de la communauté
Documentation API : Construire avec le modèle de blocs de Notion