Superhuman

„Nie budujemy po prostu klienta pocztowego. Budujemy doświadczenie, w którym szybkość jest produktem."

Filozofia

Superhuman ucieleśnia jedną obsesję: szybkość jako główna funkcja. Każda decyzja projektowa, od czasów odpowiedzi 50ms po nawigację opartą na klawiaturze, służy tej jedynej wizji. Rezultatem jest klient pocztowy, który sprawia wrażenie przedłużenia myśli, a nie narzędzia, które obsługujesz.

Założyciele zastosowali zasady projektowania gier do oprogramowania produktywnościowego: historia (jesteś bohaterem podbijającym pocztę), estetyka (piękna, minimalistyczna), mechanika (skróty klawiaturowe jako rozgrywka) i technologia (nieustanna optymalizacja wydajności).

Kluczowe wnioski

50ms to prawdziwy cel, nie 100ms - Superhuman publicznie podaje 100ms jako próg, ale wewnętrznie celuje w 50-60ms; różnica między „szybkim" a „czuje się jak myśl" jest odczuwalna
Palety poleceń uczą użytkowników awansować - Pokazuj skróty klawiaturowe za każdym razem, gdy ktoś używa Cmd+K; po kilku użyciach pamięć mięśniowa przejmuje kontrolę i przestają potrzebować palety
Wzorce nawigacji Vim są sprawdzone - J/K dla ruchu pionowego, H/L dla poziomego tworzy przestrzenny model mentalny, który zaawansowani użytkownicy znają z dekad używania edytorów
Onboarding to praktyka, nie wyjaśnianie - 30-minutowe sesje 1:1 Superhuman trenują pamięć mięśniową na syntetycznych e-mailach; użytkownicy nie oglądają demo, rozwijają nawyki
Optymistyczne UI jest koniecznością dla szybkości - Akcje kończą się wizualnie przed potwierdzeniem serwera; cofnięcie jest siatką bezpieczeństwa, nie wskaźniki ładowania

Biblioteka wzorców

Zasada 100ms (w rzeczywistości 50-60ms)

Słynna „zasada 100ms" Superhuman jest w rzeczywistości bardziej agresywna wewnętrznie. Badania pokazują, że postrzegana responsywność znacząco spada powyżej 100ms, więc Superhuman celuje w 50-60ms dla wszystkich interakcji.

// 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 });
}

Spostrzeżenie projektowe: Częstotliwość powtarzania klawiszy jest ustawiona na 65ms w porównaniu z domyślną wartością macOS wynoszącą 100ms. Szybsza częstotliwość sprawia, że przytrzymanie j/k do przewijania e-maili jest zauważalnie szybsze.

Paleta poleceń jako kółka treningowe

Paleta poleceń Cmd+K pełni podwójną funkcję jako system szkoleniowy, który stopniowo uczy skrótów klawiaturowych.

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
};

Spostrzeżenie projektowe: Za każdym razem, gdy używasz Cmd+K do znalezienia polecenia, widzisz jego skrót. Po kilku użyciach pamięć mięśniowa przejmuje kontrolę i przestajesz używać palety do tej akcji.

Architektura podzielonej skrzynki odbiorczej

Podzielona skrzynka odbiorcza Superhuman automatycznie kategoryzuje e-maile na 3-7 skoncentrowanych strumieni, redukując obciążenie poznawcze jednolitej skrzynki.

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>
  );
}

Spostrzeżenie projektowe: Podziały używają nawigacji w stylu vim H/L (lewo/prawo), podczas gdy J/K nawiguje wewnątrz podziału (góra/dół). Model przestrzenny jest spójny.

Projektowanie z priorytetem klawiatury

Z ponad 100 skrótami klawiaturowymi, Superhuman traktuje klawiaturę jako główne urządzenie wejściowe.

// 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',
};

// Visual feedback on every keypress
function KeypressIndicator({ lastKey }: { lastKey: string }) {
  return (
    <div className="keypress-toast" role="status">
      <kbd>{lastKey}</kbd>
      <span>{getActionName(lastKey)}</span>
    </div>
  );
}

// Zero-delay action feedback
function handleArchive() {
  // Haptic-like visual feedback
  animateEmailOut('slide-right', { duration: 150 });

  // Immediately focus next email
  focusNextEmail();

  // Show undo toast
  showToast({
    message: 'Archived',
    action: { label: 'Undo', shortcut: 'z' }
  });
}

Spostrzeżenie projektowe: Akcje mają zerowe opóźnienie animacji. Naciśnij E, e-mail znika natychmiast. Animacja służy wizualnemu zamknięciu, nie jest blokującą operacją.

Ekskluzywny onboarding

Słynne 30-minutowe sesje onboardingowe 1:1 Superhuman tworzą pamięć mięśniową poprzez praktykę, nie wyjaśnianie.

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'
    ]
  }
];

// Onboarding impact metrics
const ONBOARDING_RESULTS = {
  shortcutUsageIncrease: 0.20,    // +20%
  reminderFeatureAdoption: 0.67,  // +67%
  week1ActivationLift: 0.17,      // +17%
  npsScore: 70,                    // Industry-leading
};

Spostrzeżenie projektowe: Syntetyczna skrzynka pozwala użytkownikom budować pamięć mięśniową przy zerowym ryzyku. Zanim dotkną prawdziwych e-maili, skróty już stają się automatyczne.

System projektowania wizualnego

Typografia: rodzina Messina

Superhuman używa rodziny czcionek Messina od Luzi Type, skoordynowanego systemu sans, serif i monospace.

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

  /* Messina Serif - Email body, long-form */
  --font-serif: 'Messina Serif', Georgia, serif;

  /* Messina Mono - Code, timestamps, metadata */
  --font-mono: 'Messina Mono', 'SF Mono', monospace;

  /* Type scale - optimized for scanning */
  --text-xs: 11px;    /* Timestamps, metadata */
  --text-sm: 12px;    /* Secondary info */
  --text-base: 14px;  /* Primary UI text */
  --text-lg: 16px;    /* Email body */
  --text-xl: 18px;    /* Email subject */
}

/* Email list: optimized for rapid scanning */
.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;  /* Tighter for headlines */
}

.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);
}

System kolorów: minimalna ozdobność

Superhuman używa koloru oszczędnie, głównie dla statusu i fokusu, nigdy dla dekoracji.

:root {
  /* Neutral foundation */
  --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 */
}

Wzorce animacji

Natychmiastowe akcje, płynne przejścia

Akcje kończą się natychmiast; animacje zapewniają wizualne zamknięcie bez blokowania.

/* 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);
  }
}

Wzorzec powiadomienia cofania

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>
  );
}

Wyciągnięte wnioski

1. Szybkość to funkcja

Wydajność nie jest wymogiem technicznym — to produkt. Każda milisekunda ma znaczenie, ponieważ responsywność kształtuje emocjonalne doświadczenie korzystania z oprogramowania.

2. Paleta poleceń jako progresywne szkolenie

Nie tylko udostępniaj funkcje przez paletę poleceń. Używaj jej do nauki skrótów. Pokazuj skrót klawiaturowy za każdym razem, a użytkownicy naturalnie przejdą do bezpośredniego wywoływania.

3. Priorytet klawiatury jest inspirowany Vim

Wzorzec nawigacji j/k/h/l z vim zapewnia sprawdzony model mentalny dla zaawansowanych użytkowników. Spójność z tą konwencją zmniejsza krzywą uczenia się dla programistów i power userów.

4. Onboarding to praktyka, nie wyjaśnianie

30-minutowe sesje 1:1 nie wyjaśniają funkcji. Trenują pamięć mięśniową. Użytkownicy ćwiczą z syntetycznymi danymi, aż skróty staną się automatyczne.

5. Optymistyczne UI jest wymagane dla szybkości

Oczekiwanie na potwierdzenie serwera przerywa iluzję szybkości. Akcje muszą kończyć się wizualnie przed odpowiedzią serwera, z cofaniem jako siatką bezpieczeństwa.

6. Podziały redukują obciążenie poznawcze

Jednolita skrzynka odbiorcza wymusza ciągłe przełączanie kontekstu. Wstępnie posortowane podziały pozwalają użytkownikom wchodzić w różne tryby mentalne i przetwarzać wsadowo podobne e-maile.

Często zadawane pytania

Czym jest „zasada 100ms" Superhuman i dlaczego faktycznie celują w 50ms?

Superhuman publicznie promuje zasadę 100ms — próg, przy którym interakcje wydają się natychmiastowe. Jednak wewnętrznie celują w 50-60ms dla wszystkich akcji. Różnica między 50ms a 100ms jest odczuwalna; 50ms sprawia wrażenie, że interfejs odpowiada zanim skończysz akcję, podczas gdy 100ms jedynie wydaje się „szybkie". Ten agresywny cel pochodzi z badań nad projektowaniem gier dotyczących postrzeganej responsywności.

Jak paleta poleceń Superhuman uczy użytkowników skrótów klawiaturowych?

Za każdym razem, gdy używasz Cmd+K do znalezienia polecenia, paleta wyświetla obok niego skrót klawiaturowy. Tworzy to pasywne uczenie: widzisz skrót (np. „E" dla archiwizacji) wielokrotnie bez próby zapamiętania. Po kilku użyciach formuje się pamięć mięśniowa i naturalnie zaczynasz naciskać E bezpośrednio zamiast otwierać paletę. Paleta zasadniczo czyni siebie zbędną dla zaawansowanych użytkowników.

Wzorzec nawigacji Vim — J/K dla góra/dół, H/L dla lewo/prawo — tworzy przestrzenny model mentalny, gdzie palce spoczywają na głównym rzędzie klawiszy. Miliony programistów już znają te klawisze z edytorów kodu. Superhuman rozszerza to na pocztę: J/K przemieszcza między e-mailami na liście, H/L przemieszcza między podziałami skrzynki. Spójność oznacza, że zaawansowani użytkownicy mogą nawigować z prędkością myśli bez patrzenia na klawiaturę.

Co dzieje się podczas 30-minutowych sesji onboardingowych Superhuman?

Specjaliści ds. onboardingu nie wyjaśniają funkcji — trenują pamięć mięśniową. Użytkownicy ćwiczą z syntetyczną skrzynką fałszywych e-maili, archiwizując 10 e-maili klawiszem E, odpowiadając klawiszem R i nawigując J/K. Dopiero gdy skróty stają się półautomatyczne, dotykają swojej prawdziwej skrzynki. To podejście oparte na praktyce zwiększa użycie skrótów o 20% i adopcję funkcji o 67% w porównaniu z samodzielnym onboardingiem.

Jak Superhuman osiąga natychmiastowe wrażenie akcji przy synchronizacji z serwerem?

Superhuman używa optymistycznego UI: gdy naciskasz E, aby zarchiwizować, e-mail natychmiast znika, a fokus przenosi się na następną wiadomość. Synchronizacja z serwerem dzieje się w tle. Jeśli się nie powiedzie (rzadko), e-mail pojawia się ponownie z błędem. Powiadomienie cofania ze skrótem „Z" zapewnia siatkę bezpieczeństwa. Ten wzorzec oznacza zero odczuwalnego opóźnienia dla użytkownika, mimo że faktyczna operacja trwa setki milisekund do ukończenia na serwerze.

Źródła

Prezentacje filozofii projektowania Superhuman
Wywiady z Rahulem Vohrą (CEO) o projektowaniu produktów
Projektowanie gier zastosowane do oprogramowania produktywnościowego
Studia przypadków optymalizacji wydajności
Metryki wpływu onboardingu i badania użytkowników

design/superhuman