Superhuman

« Nous ne construisons pas simplement un client email. Nous construisons une expérience où la vitesse est le produit. »

Philosophie

Superhuman incarne une obsession unique : la vitesse comme fonctionnalité centrale. Chaque décision de design, des temps de réponse de 50 ms à la navigation clavier en priorité, sert cette vision singulière. Le résultat est un client email qui ressemble à une extension de la pensée plutôt qu'à un outil que l'on manipule.

Les fondateurs ont appliqué les principes du game design aux logiciels de productivité : la narration (vous êtes le héros qui conquiert l'email), l'esthétique (beau, minimaliste), les mécaniques (les raccourcis clavier comme gameplay), et la technologie (optimisation incessante des performances).

Points clés

50 ms est la vraie cible, pas 100 ms — Superhuman revendique publiquement 100 ms comme seuil, mais vise en interne 50-60 ms ; la différence entre « rapide » et « ressemble à la pensée » est perceptible
Les palettes de commandes forment les utilisateurs à progresser — Afficher les raccourcis clavier à chaque utilisation de Cmd+K ; après quelques utilisations, la mémoire musculaire prend le relais et l'utilisateur n'a plus besoin de la palette
Les modèles de navigation Vim ont fait leurs preuves — J/K pour le vertical, H/L pour l'horizontal crée un modèle mental spatial que les utilisateurs avancés connaissent déjà grâce à des décennies d'utilisation d'éditeurs
L'onboarding est de la pratique, pas de l'explication — Les sessions individuelles de 30 minutes de Superhuman entraînent la mémoire musculaire avec des emails synthétiques ; les utilisateurs ne regardent pas de démos, ils développent des habitudes
L'UI optimiste est indispensable pour la vitesse — Les actions s'affichent comme terminées avant la confirmation du serveur ; l'annulation est le filet de sécurité, pas les indicateurs de chargement

Bibliothèque de patterns

La règle des 100 ms (en réalité 50-60 ms)

La célèbre « règle des 100 ms » de Superhuman est en réalité plus agressive en interne. La recherche montre que la réactivité perçue se dégrade significativement au-delà de 100 ms, c'est pourquoi Superhuman vise 50-60 ms pour toutes les interactions.

// Performance budget constants
const PERFORMANCE_TARGETS = {
  // Internal targets (what Superhuman actually aims for)
  keyRepeatRate: 65,        // ms - faster than macOS default (100ms)
  actionResponse: 50,       // ms - archive, send, move
  searchResults: 100,       // ms - first results appear
  composeOpen: 60,          // ms - new compose window

  // User perception thresholds (from research)
  instantaneous: 100,       // Feels instant
  responsive: 300,          // Still feels responsive
  noticeable: 1000,         // User notices delay
} as const;

// Optimistic UI pattern - action completes before server confirms
function archiveEmail(emailId: string) {
  // 1. Immediately update UI (0ms perceived)
  removeFromList(emailId);
  showUndoToast();

  // 2. Move focus to next email (keyboard flow uninterrupted)
  focusNextEmail();

  // 3. Server sync happens in background
  syncQueue.add({ action: 'archive', emailId });
}

Insight design : Le taux de répétition des touches est réglé à 65 ms contre 100 ms par défaut sur macOS. Ce taux plus rapide rend le défilement des emails en maintenant j/k sensiblement plus fluide.

La palette de commandes comme outil d'apprentissage

La palette de commandes Cmd+K joue un double rôle de système de formation qui enseigne progressivement les raccourcis clavier.

interface CommandPaletteResult {
  action: string;
  shortcut?: string;
  description: string;
}

function CommandPalette({ query }: { query: string }) {
  const results = searchCommands(query);

  return (
    <div className="command-palette">
      {results.map(result => (
        <div className="command-row" key={result.action}>
          <span className="command-name">{result.action}</span>
          <span className="command-description">{result.description}</span>

          {/* The teaching moment: always show the shortcut */}
          {result.shortcut && (
            <kbd className="command-shortcut">{result.shortcut}</kbd>
          )}
        </div>
      ))}

      {/* Subtle reinforcement after selection */}
      <div className="palette-footer">
        Pro tip: Next time, try <kbd>{selectedResult?.shortcut}</kbd>
      </div>
    </div>
  );
}

// Usage tracking shows the training effect
const ONBOARDING_IMPACT = {
  shortcutUsage: '+20%',      // After 30-min onboarding
  reminderUsage: '+67%',      // Feature adoption
  week1Activation: '+17%',    // Retention metric
};

Insight design : Chaque fois que vous utilisez Cmd+K pour trouver une commande, vous voyez son raccourci. Après quelques utilisations, la mémoire musculaire prend le relais et vous cessez d'utiliser la palette pour cette action.

Architecture de la boîte de réception segmentée

La boîte de réception segmentée de Superhuman catégorise automatiquement les emails en 3 à 7 flux ciblés, réduisant la charge cognitive d'une boîte de réception unifiée.

interface InboxSplit {
  id: string;
  name: string;
  filter: EmailFilter;
  position: number;
  color: string;
}

const DEFAULT_SPLITS: InboxSplit[] = [
  {
    id: 'important',
    name: 'Important',
    filter: { from: 'vip-list', or: { hasReply: true } },
    position: 0,
    color: 'blue'
  },
  {
    id: 'team',
    name: 'Team',
    filter: { domain: 'company.com' },
    position: 1,
    color: 'green'
  },
  {
    id: 'calendar',
    name: 'Calendar',
    filter: { from: ['[email protected]'] },
    position: 2,
    color: 'purple'
  },
  {
    id: 'news',
    name: 'News & Updates',
    filter: { category: 'newsletter' },
    position: 3,
    color: 'orange'
  },
  {
    id: 'other',
    name: 'Other',
    filter: { default: true },
    position: 4,
    color: 'gray'
  }
];

// Navigation with H/L keys
function SplitNavigation({ splits, activeSplit, onSelect }) {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'h' || e.key === 'H') {
      // Previous split
      const prev = splits[Math.max(0, activeSplit - 1)];
      onSelect(prev);
    }
    if (e.key === 'l' || e.key === 'L') {
      // Next split
      const next = splits[Math.min(splits.length - 1, activeSplit + 1)];
      onSelect(next);
    }
  };

  return (
    <nav className="split-tabs">
      {splits.map((split, i) => (
        <button
          key={split.id}
          className={`split-tab ${i === activeSplit ? 'active' : ''}`}
          style={{ '--accent': split.color }}
        >
          {split.name}
          <span className="unread-count">{getUnreadCount(split)}</span>
        </button>
      ))}
    </nav>
  );
}

Observation de design : Les splits utilisent une navigation de type vim avec H/L (gauche/droite) tandis que J/K permettent de naviguer au sein d'un split (haut/bas). Le modèle spatial reste cohérent.

Conception axée sur le clavier

Avec plus de 100 raccourcis clavier, Superhuman traite le clavier comme le périphérique d'entrée principal.

// Core navigation shortcuts (vim-inspired)
const NAVIGATION_SHORTCUTS = {
  // Email list
  'j': 'next-email',
  'k': 'previous-email',
  'o': 'open-email',
  'u': 'go-back',

  // Split navigation
  'h': 'previous-split',
  'l': 'next-split',

  // Actions
  'e': 'archive',
  '#': 'trash',
  'r': 'reply',
  'a': 'reply-all',
  'f': 'forward',
  'c': 'compose',

  // Power features
  'Cmd+k': 'command-palette',
  'Cmd+/': 'shortcuts-help',
  '/': 'search',
  'z': 'undo',
};

// Retour visuel à chaque frappe de touche
function KeypressIndicator({ lastKey }: { lastKey: string }) {
  return (
    <div className="keypress-toast" role="status">
      <kbd>{lastKey}</kbd>
      <span>{getActionName(lastKey)}</span>
    </div>
  );
}

// Retour d'action sans délai
function handleArchive() {
  // Retour visuel de type haptique
  animateEmailOut('slide-right', { duration: 150 });

  // Focalisation immédiate sur l'e-mail suivant
  focusNextEmail();

  // Afficher la notification d'annulation
  showToast({
    message: 'Archived',
    action: { label: 'Undo', shortcut: 'z' }
  });
}

Principe de design : Les actions n'ont aucun délai d'animation. Appuyez sur E, l'e-mail disparaît instantanément. L'animation sert de conclusion visuelle, pas d'opération bloquante.

Onboarding personnalisé

Les célèbres sessions d'onboarding individuelles de 30 minutes de Superhuman créent une mémoire musculaire par la pratique, pas par l'explication.

interface OnboardingSession {
  duration: '30-minutes';
  format: '1:1-video-call';
  structure: OnboardingPhase[];
}

const ONBOARDING_PHASES: OnboardingPhase[] = [
  {
    name: 'Synthetic Inbox',
    duration: '10-min',
    description: 'Practice with fake emails before touching real inbox',
    exercises: [
      'Archive 10 emails using E key',
      'Reply to 3 emails using R key',
      'Navigate using J/K keys',
      'Find a command with Cmd+K'
    ]
  },
  {
    name: 'Split Setup',
    duration: '10-min',
    description: 'Configure splits for their workflow',
    exercises: [
      'Create VIP split for important contacts',
      'Set up team split for work domain',
      'Navigate splits with H/L'
    ]
  },
  {
    name: 'Power Features',
    duration: '10-min',
    description: 'Introduce advanced features',
    exercises: [
      'Schedule send with Cmd+Shift+Enter',
      'Snooze email with H key',
      'Set reminder with Cmd+Shift+R'
    ]
  }
];

// Métriques d'impact de l'onboarding
const ONBOARDING_RESULTS = {
  shortcutUsageIncrease: 0.20,    // +20%
  reminderFeatureAdoption: 0.67,  // +67%
  week1ActivationLift: 0.17,      // +17%
  npsScore: 70,                    // Leader du secteur
};

Principe de design : La boîte de réception synthétique permet aux utilisateurs de développer une mémoire musculaire sans aucun risque. Lorsqu'ils accèdent à leurs vrais e-mails, les raccourcis sont déjà en train de devenir automatiques.

Système de design visuel

Typographie : la famille Messina

Superhuman utilise la famille de polices Messina de Luzi Type, un système coordonné de sans-sérif, sérif et monospace.

:root {
  /* Messina Sans - Interface principale */
  --font-sans: 'Messina Sans', -apple-system, sans-serif;

  /* Messina Serif - Corps des e-mails, texte long */
  --font-serif: 'Messina Serif', Georgia, serif;

  /* Messina Mono - Code, horodatages, métadonnées */
  --font-mono: 'Messina Mono', 'SF Mono', monospace;

  /* Échelle typographique - optimisée pour le balayage visuel */
  --text-xs: 11px;    /* Horodatages, métadonnées */
  --text-sm: 12px;    /* Informations secondaires */
  --text-base: 14px;  /* Texte d'interface principal */
  --text-lg: 16px;    /* Corps des e-mails */
  --text-xl: 18px;    /* Objet des e-mails */
}

/* Liste d'e-mails : optimisée pour un balayage rapide */
.email-row {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.4;
}

.email-subject {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;  /* Plus serré pour les titres */
}

.email-sender {
  font-weight: 600;
  color: var(--text-primary);
}

.email-preview {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-timestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

Système de couleurs : chrome minimal

Superhuman utilise la couleur avec parcimonie, principalement pour le statut et la focalisation, jamais pour la décoration.

:root {
  /* Fondation neutre */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #ebebeb;

  /* Text hierarchy */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;

  /* Accent: Blue for interactive, Purple for premium */
  --accent-primary: #0066ff;
  --accent-secondary: #7c3aed;

  /* Status colors */
  --status-unread: #0066ff;
  --status-starred: #f59e0b;
  --status-snoozed: #8b5cf6;

  /* Focus states - high contrast */
  --focus-ring: 0 0 0 2px var(--accent-primary);
}

/* Unread emails: subtle but clear distinction */
.email-row[data-unread="true"] {
  background: linear-gradient(
    to right,
    var(--accent-primary) 3px,
    var(--bg-primary) 3px
  );
}

.email-row[data-unread="true"] .email-sender {
  font-weight: 700;  /* Bolder for unread */
}

Modèles d'animation

Actions instantanées, transitions fluides

Les actions s'exécutent instantanément ; les animations apportent une conclusion visuelle sans bloquer l'interaction.

/* Email archive: instant removal, smooth visual */
.email-row.archiving {
  animation: slide-out-right 150ms ease-out forwards;
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100px);
    opacity: 0;
  }
}

/* Next email slides up to fill gap */
.email-row.moving-up {
  animation: slide-up 150ms ease-out;
}

@keyframes slide-up {
  from {
    transform: translateY(var(--row-height));
  }
  to {
    transform: translateY(0);
  }
}

/* Command palette: snappy spring */
.command-palette {
  animation: palette-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes palette-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

Modèle de toast d'annulation

function UndoToast({ action, onUndo }: { action: string; onUndo: () => void }) {
  const [timeLeft, setTimeLeft] = useState(5);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(t => {
        if (t <= 1) {
          clearInterval(timer);
          return 0;
        }
        return t - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="undo-toast">
      <span>{action}</span>
      <button onClick={onUndo}>
        Undo <kbd>Z</kbd>
      </button>
      <div
        className="toast-timer"
        style={{ '--progress': timeLeft / 5 }}
      />
    </div>
  );
}

Leçons Retenues

1. La Vitesse Est une Fonctionnalité

La performance n'est pas une exigence technique — c'est le produit. Chaque milliseconde compte, car la réactivité façonne l'expérience émotionnelle de l'utilisation d'un logiciel.

2. La Command Palette comme Formation Progressive

Ne vous contentez pas d'exposer les fonctionnalités via une command palette. Utilisez-la pour enseigner les raccourcis. Affichez le raccourci clavier à chaque fois, et les utilisateurs passeront naturellement à l'invocation directe.

3. Le Keyboard-First S'inspire de Vim

Le pattern de navigation j/k/h/l issu de vim offre un modèle mental éprouvé pour les utilisateurs avancés. La cohérence avec cette convention réduit la courbe d'apprentissage pour les développeurs et les power users.

4. L'Onboarding, C'est la Pratique, Pas l'Explication

Les sessions individuelles de 30 minutes n'expliquent pas les fonctionnalités. Elles entraînent la mémoire musculaire. Les utilisateurs s'exercent avec des données synthétiques jusqu'à ce que les raccourcis deviennent automatiques.

5. L'Optimistic UI Est Indispensable pour la Vitesse

Attendre la confirmation du serveur brise l'illusion de vitesse. Les actions doivent s'exécuter visuellement avant la réponse du serveur, avec l'annulation comme filet de sécurité.

6. Les Splits Réduisent la Charge Cognitive

Une boîte de réception unifiée impose un changement de contexte permanent. Des splits pré-triés permettent aux utilisateurs d'adopter différents modes mentaux et de traiter par lots les emails similaires.

Questions Fréquemment Posées

Qu'est-ce que la « règle des 100ms » de Superhuman et pourquoi visent-ils en réalité 50ms ?

Superhuman promeut publiquement la règle des 100ms — le seuil à partir duquel les interactions semblent instantanées. Cependant, en interne, ils visent 50-60ms pour toutes les actions. La différence entre 50ms et 100ms est perceptible ; à 50ms, l'interface semble répondre avant même que vous ayez terminé l'action, tandis qu'à 100ms, elle semble simplement « rapide ». Cet objectif ambitieux provient de la recherche en game design sur la réactivité perçue.

Comment la command palette de Superhuman entraîne-t-elle les utilisateurs à utiliser les raccourcis clavier ?

Chaque fois que vous utilisez Cmd+K pour trouver une commande, la palette affiche le raccourci clavier correspondant. Cela crée un apprentissage passif : vous voyez le raccourci (par exemple, « E » pour archiver) de manière répétée sans chercher à le mémoriser. Après quelques utilisations, la mémoire musculaire se forme et vous commencez naturellement à appuyer directement sur E au lieu d'ouvrir la palette. La palette se rend essentiellement obsolète pour les power users.

Le pattern de navigation de vim — J/K pour haut/bas, H/L pour gauche/droite — crée un modèle mental spatial où vos doigts reposent sur la rangée de base du clavier. Des millions de développeurs connaissent déjà ces touches grâce à leurs éditeurs de code. Superhuman étend ce principe à l'email : J/K permet de naviguer entre les emails d'une liste, H/L de basculer entre les splits de la boîte de réception. Cette cohérence permet aux power users de naviguer à la vitesse de la pensée sans regarder le clavier.

Que se passe-t-il pendant les sessions d'onboarding de 30 minutes de Superhuman ?

Les spécialistes de l'onboarding n'expliquent pas les fonctionnalités — ils entraînent la mémoire musculaire. Les utilisateurs s'exercent avec une boîte de réception synthétique composée de faux emails, archivant 10 emails avec E, répondant avec R, et naviguant avec J/K. Ce n'est qu'après que les raccourcis deviennent semi-automatiques qu'ils accèdent à leur vraie boîte de réception. Cette approche axée sur la pratique augmente l'utilisation des raccourcis de 20 % et l'adoption des fonctionnalités de 67 % par rapport à un onboarding en autonomie.

Comment Superhuman parvient-il à des actions au ressenti instantané avec la synchronisation serveur ?

Superhuman utilise l'optimistic UI : lorsque vous appuyez sur E pour archiver, l'email disparaît immédiatement et le focus passe au message suivant. La synchronisation serveur s'effectue en arrière-plan. En cas d'échec (rare), l'email réapparaît avec une erreur. Un toast d'annulation avec le raccourci « Z » sert de filet de sécurité. Ce pattern signifie zéro délai perceptible pour l'utilisateur, même si l'opération réelle prend des centaines de millisecondes côté serveur.

Références

Présentations de la philosophie de design de Superhuman
Interviews de Rahul Vohra (CEO) sur le product design
Le game design appliqué aux logiciels de productivité
Études de cas sur l'optimisation des performances
Métriques d'impact de l'onboarding et recherche utilisateur

Superhuman : La vitesse comme produit