Perplexity: KI-natives Suchdesign

Wie Perplexity Vertrauen in AI-Suche aufbaute: Zitations-First Design, progressive Offenlegung, Streaming-Antworten und Abfrageverfeinerung. Mit TypeScript- und CSS-Implementierungsmustern.

6 Min. Lesezeit • 1026 Worter
Perplexity: KI-natives Suchdesign screenshot

Perplexity

„Menschen wollen Informationen so schnell wie möglich und wollen diesen Informationen vertrauen können. Nun, dann ist es eigentlich ein ziemlich einfaches Design-Problem."

Philosophie

Perplexity repräsentiert ein neues Paradigma: KI-native Suche. Während traditionelle Suche eine Liste von Links zurückgibt und Chatbots konversationelle Antworten liefern, synthetisiert Perplexity Informationen aus mehreren Quellen zu einer einzigen, quellengestützten Antwort. Das Design verkörpert radikale Transparenz – jede Behauptung ist zu ihrer Quelle zurückverfolgbar.

Die Erkenntnis des Teams: Suche ist keine Konversation. Es ist eine Mission zur Informationsbeschaffung. Die Benutzeroberfläche spiegelt dies wider, indem sie Quellen und Antworten präsentiert, nicht Chat-Verläufe und Personas.

Kernerkenntnisse

  1. Quellenangaben sind unverzichtbar für KI-Vertrauen - Jede faktische Behauptung verlinkt zu ihrer Quelle; das Quellen-Panel bleibt sichtbar, damit Nutzer verifizieren können, ohne die Antwort zu verlassen
  2. Vertraute Oberflächen senken Barrieren - Das Suchfeld sieht aus wie Google, nicht wie ein Chat-Prompt; Nutzer können Schlüsselwörter oder vollständige Fragen eingeben, ohne konversationelle Muster erlernen zu müssen
  3. Folgefragen antizipieren - Die meisten Nutzer wissen nicht, was sie als nächstes fragen sollen; kontextuell relevante Folgevorschläge halten sie engagiert
  4. Den Prozess zeigen, nicht nur Ergebnisse - „Suchen → Lesen → Schreiben"-Phasen bauen Vertrauen auf und reduzieren die gefühlte Wartezeit durch Transparenz
  5. Schwache Ergebnisse als Fehlerzustände behandeln - Wenn eine Anfrage unzureichende Ergebnisse liefern würde, um Klärung bitten statt mittelmäßige Antworten zu liefern

Pattern-Bibliothek

Quellenorientiertes Design

Perplexity hat Inline-Quellenangaben in KI-Antworten populär gemacht und damit grundlegend verändert, wie Nutzer generiertem Inhalt vertrauen. Jede faktische Behauptung verlinkt zu ihrer Quelle.

interface Citation {
  index: number;
  url: string;
  title: string;
  favicon: string;
  snippet: string;
  domain: string;
}

interface AnswerBlock {
  text: string;
  citations: number[];  // Indices into citation array
}

function CitedAnswer({ blocks, citations }: {
  blocks: AnswerBlock[];
  citations: Citation[];
}) {
  return (
    <article className="answer">
      {blocks.map((block, i) => (
        <p key={i}>
          {block.text}
          {block.citations.map(citationIndex => (
            <CitationMarker
              key={citationIndex}
              citation={citations[citationIndex]}
              index={citationIndex + 1}
            />
          ))}
        </p>
      ))}

      {/* Source panel always visible */}
      <aside className="sources-panel">
        <h3>Sources</h3>
        {citations.map((citation, i) => (
          <SourceCard key={i} citation={citation} index={i + 1} />
        ))}
      </aside>
    </article>
  );
}

function CitationMarker({ citation, index }: {
  citation: Citation;
  index: number;
}) {
  const [expanded, setExpanded] = useState(false);

  return (
    <span className="citation-wrapper">
      <sup
        className="citation-marker"
        onMouseEnter={() => setExpanded(true)}
        onMouseLeave={() => setExpanded(false)}
      >
        [{index}]
      </sup>

      {/* Expandable snippet preview */}
      {expanded && (
        <div className="citation-preview">
          <img src={citation.favicon} alt="" className="citation-favicon" />
          <span className="citation-domain">{citation.domain}</span>
          <p className="citation-snippet">{citation.snippet}</p>
        </div>
      )}
    </span>
  );
}

Design-Erkenntnis: Quellenangaben sind nicht optional. Sie sind in jede Interaktion eingebettet. Das Quellen-Panel bleibt sichtbar, damit Nutzer Behauptungen verifizieren können, ohne die Antwortansicht zu verlassen.

Vertraute Such-Oberfläche

Perplexitys Eingabefeld sieht aus wie ein traditionelles Suchfeld, nicht wie ein Chat-Prompt. Das vertraute Design senkt die Barriere für Nutzer, die mit konversationeller KI nicht vertraut sind.

function SearchInput({ onSubmit }: { onSubmit: (query: string) => void }) {
  const [query, setQuery] = useState('');

  return (
    <div className="search-container">
      {/* Intentionally looks like Google/traditional search */}
      <div className="search-box">
        <SearchIcon className="search-icon" />

        <input
          type="text"
          className="search-input"
          placeholder="Ask anything..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && onSubmit(query)}
        />

        {query && (
          <button
            className="clear-button"
            onClick={() => setQuery('')}
          >
            <XIcon />
          </button>
        )}

        <button
          className="submit-button"
          onClick={() => onSubmit(query)}
        >
          <ArrowRightIcon />
        </button>
      </div>

      {/* Optional context chips */}
      <div className="focus-chips">
        <Chip icon={<GlobeIcon />}>All</Chip>
        <Chip icon={<AcademicIcon />}>Academic</Chip>
        <Chip icon={<CodeIcon />}>Code</Chip>
        <Chip icon={<VideoIcon />}>Video</Chip>
      </div>
    </div>
  );
}

Design-Erkenntnis: Schon wenige Schlüsselwörter genügen. Nutzer müssen keine aufwendigen Prompts formulieren. Die Oberfläche akzeptiert sowohl einfache Suchanfragen als auch komplexe Fragen.

Progressive Disclosure mit Folgefragen

Anstatt zu erwarten, dass Nutzer gute Folgefragen stellen, sagt Perplexity diese voraus und schlägt sie vor. Prädiktive Folgefragen berücksichtigen die Realität, dass die meisten Nutzer nicht wissen, was sie als Nächstes fragen sollen.

interface FollowUpSuggestion {
  question: string;
  reasoning: string;  // Why this might be relevant
}

function FollowUpSuggestions({
  suggestions,
  onSelect
}: {
  suggestions: FollowUpSuggestion[];
  onSelect: (question: string) => void;
}) {
  return (
    <div className="follow-ups">
      <h4>Related</h4>

      {/* Show one at a time - progressive disclosure */}
      {suggestions.slice(0, 4).map((suggestion, i) => (
        <button
          key={i}
          className="follow-up-chip"
          onClick={() => onSelect(suggestion.question)}
        >
          <span className="follow-up-text">{suggestion.question}</span>
          <ArrowRightIcon className="follow-up-arrow" />
        </button>
      ))}
    </div>
  );
}

// Predict follow-ups based on query context
function generateFollowUps(query: string, answer: string): FollowUpSuggestion[] {
  // AI generates contextually relevant next questions
  return [
    { question: "How does this compare to alternatives?", reasoning: "comparison" },
    { question: "What are the limitations?", reasoning: "critical analysis" },
    { question: "Can you provide specific examples?", reasoning: "concrete details" },
    { question: "What's the historical context?", reasoning: "background" },
  ];
}

Design-Erkenntnis: So wie nur wenige Menschen am Ende von Keynote-Präsentationen Fragen stellen, sind die meisten Nutzer nicht gut darin, Folgefragen zu stellen. Antizipieren Sie, was sie wissen möchten.

Streaming-Antworten mit progressivem Rendering

Perplexity nutzt Server-Sent Events (SSE) zum Streamen von Antworten, wobei die Benutzeroberfläche Inhalte schrittweise auf eine natürlich wirkende Weise enthüllt.

function StreamingAnswer({ query }: { query: string }) {
  const [sources, setSources] = useState<Citation[]>([]);
  const [answer, setAnswer] = useState<string>('');
  const [phase, setPhase] = useState<'searching' | 'reading' | 'writing'>('searching');

  useEffect(() => {
    const eventSource = new EventSource(`/api/search?q=${encodeURIComponent(query)}`);

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);

      switch (data.type) {
        case 'sources':
          setPhase('reading');
          setSources(data.sources);
          break;
        case 'chunk':
          setPhase('writing');
          setAnswer(prev => prev + data.text);
          break;
        case 'done':
          eventSource.close();
          break;
      }
    };

    return () => eventSource.close();
  }, [query]);

  return (
    <div className="streaming-answer">
      {/* Phase indicator */}
      <PhaseIndicator phase={phase} />

      {/* Sources appear first */}
      {sources.length > 0 && (
        <SourceCards sources={sources} />
      )}

      {/* Answer streams in */}
      <div className="answer-content">
        <TypewriterText text={answer} />
        {phase === 'writing' && <BlinkingCursor />}
      </div>
    </div>
  );
}

function PhaseIndicator({ phase }: { phase: 'searching' | 'reading' | 'writing' }) {
  const phases = {
    searching: { icon: <SearchIcon />, text: 'Searching the web...' },
    reading: { icon: <BookIcon />, text: 'Reading sources...' },
    writing: { icon: <PenIcon />, text: 'Writing answer...' },
  };

  return (
    <div className="phase-indicator">
      {phases[phase].icon}
      <span>{phases[phase].text}</span>
      <LoadingDots />
    </div>
  );
}

Design-Erkenntnis: Zeige den Prozess, nicht nur das Ergebnis. Nutzer sehen zuerst die Quellen erscheinen (das schafft Vertrauen), dann beobachten sie, wie die Antwort geschrieben wird. Transparenz reduziert die Ungewissheit während der Wartezeit.

Fehlervermeidung durch Verfeinerung

Wenn eine Anfrage zu breit gefasst ist, bittet Perplexity um Präzisierung, anstatt schwache Ergebnisse zu liefern. Das System behandelt unzureichende Ergebnisse als Fehlerzustand.

interface ClarificationRequest {
  type: 'ambiguous' | 'too_broad' | 'missing_context';
  suggestions: string[];
  originalQuery: string;
}

function QueryRefinement({ request, onRefine }: {
  request: ClarificationRequest;
  onRefine: (refinedQuery: string) => void;
}) {
  const messages = {
    ambiguous: "I found multiple meanings. Which one did you mean?",
    too_broad: "This topic is quite broad. Can you be more specific?",
    missing_context: "I need a bit more context to give you a useful answer.",
  };

  return (
    <div className="refinement-prompt">
      <p className="refinement-message">{messages[request.type]}</p>

      <div className="refinement-suggestions">
        {request.suggestions.map((suggestion, i) => (
          <button
            key={i}
            className="refinement-option"
            onClick={() => onRefine(suggestion)}
          >
            {suggestion}
          </button>
        ))}
      </div>

      <div className="refinement-custom">
        <input
          type="text"
          placeholder="Or type your own refinement..."
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              onRefine((e.target as HTMLInputElement).value);
            }
          }}
        />
      </div>
    </div>
  );
}

Design-Erkenntnis: Andere Suchanbieter liefern schwache Ergebnisse und hoffen, dass Nutzer selbstständig verfeinern. Perplexity führt Nutzer aktiv zu besseren Anfragen.

Sammlungen und Spaces

Für strukturierte Recherchen bietet Perplexity Spaces – dedizierte Sammlungen, in denen Nutzer Anfragen organisieren, Ergebnisse anheften und Referenzmaterial hochladen können.

interface Space {
  id: string;
  name: string;
  threads: Thread[];
  documents: Document[];
  createdAt: Date;
}

interface Thread {
  id: string;
  query: string;
  answer: Answer;
  citations: Citation[];
  pinned: boolean;
}

function SpacesSidebar({ spaces, activeSpace, onSelect }: {
  spaces: Space[];
  activeSpace: string;
  onSelect: (id: string) => void;
}) {
  return (
    <aside className="spaces-sidebar">
      <header>
        <h2>Spaces</h2>
        <button className="new-space">
          <PlusIcon /> New Space
        </button>
      </header>

      <nav className="space-list">
        {spaces.map(space => (
          <button
            key={space.id}
            className={`space-item ${space.id === activeSpace ? 'active' : ''}`}
            onClick={() => onSelect(space.id)}
          >
            <FolderIcon />
            <span className="space-name">{space.name}</span>
            <span className="thread-count">{space.threads.length}</span>
          </button>
        ))}
      </nav>
    </aside>
  );
}

function SpaceView({ space }: { space: Space }) {
  return (
    <div className="space-view">
      <header className="space-header">
        <h1>{space.name}</h1>
        <div className="space-actions">
          <button><ShareIcon /> Share</button>
          <button><UploadIcon /> Add Files</button>
        </div>
      </header>

      {/* Pinned threads */}
      <section className="pinned-threads">
        <h3>Pinned</h3>
        {space.threads.filter(t => t.pinned).map(thread => (
          <ThreadCard key={thread.id} thread={thread} />
        ))}
      </section>

      {/* All threads */}
      <section className="all-threads">
        <h3>All Threads</h3>
        {space.threads.map(thread => (
          <ThreadCard key={thread.id} thread={thread} />
        ))}
      </section>

      {/* Embedded documents */}
      {space.documents.length > 0 && (
        <section className="space-documents">
          <h3>Reference Materials</h3>
          {space.documents.map(doc => (
            <DocumentCard key={doc.id} document={doc} />
          ))}
        </section>
      )}
    </div>
  );
}

Design-Erkenntnis: Collections spiegeln die Recherche-Stapel mit Tabs wider, die Akademiker und Journalisten manuell pflegen – nun direkt in das Produkt eingebettet.

Visuelles Designsystem

Typografie: Klarheit vor Persönlichkeit

Perplexity verwendet ein neutrales, gut lesbares Schriftsystem. Der Inhalt ist der Star, nicht die Oberfläche.

:root {
  /* System font stack for fastest load */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;

  /* Type scale - optimized for reading */
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;

  /* Line heights - generous for readability */
  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
}

/* Answer text - optimized for long-form reading */
.answer-content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 680px;  /* Optimal reading width */
}

/* Citations - smaller, unobtrusive */
.citation-marker {
  font-size: var(--text-sm);
  color: var(--accent-primary);
  cursor: pointer;
  vertical-align: super;
}

/* Source cards - scannable metadata */
.source-card {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.source-domain {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

Farbsystem: Vertrauen durch Zurückhaltung

Farbe wird sparsam eingesetzt, hauptsächlich für Quellenangaben, Status und Fokuszustände.

:root {
  /* Neutral foundation */
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f8;
  --bg-tertiary: #ededef;

  /* Text hierarchy */
  --text-primary: #1a1a1b;
  --text-secondary: #57575a;
  --text-tertiary: #8e8e93;

  /* Citation accent - trustworthy blue */
  --accent-citation: #0066cc;
  --accent-citation-hover: #0052a3;

  /* Focus states */
  --focus-ring: 0 0 0 2px var(--accent-citation);

  /* Phase indicators */
  --phase-searching: #f59e0b;
  --phase-reading: #3b82f6;
  --phase-writing: #10b981;
}

/* Clean, ad-free interface */
.search-results {
  background: var(--bg-primary);
  padding: 24px;
  border-radius: 12px;
}

/* Citation hover state */
.citation-marker:hover {
  background: var(--accent-citation);
  color: white;
  border-radius: 2px;
}

/* Source card - subtle boundary */
.source-card {
  border: 1px solid var(--bg-tertiary);
  border-radius: 8px;
  padding: 12px;
  transition: border-color 0.15s ease;
}

.source-card:hover {
  border-color: var(--accent-citation);
}

Animationsmuster

Phasenübergänge

Sanfte Übergänge zwischen den Phasen Suchen → Lesen → Schreiben halten Nutzer auf dem Laufenden.

/* Phase indicator */
.phase-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 20px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Loading dots animation */
.loading-dots {
  display: flex;
  gap: 4px;
}

.loading-dots span {
  width: 4px;
  height: 4px;
  background: var(--text-tertiary);
  border-radius: 50%;
  animation: dot-pulse 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Quellen werden eingeblendet, sobald sie gefunden werden */
.source-card {
  animation: fade-in-up 0.3s ease-out;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gestaffelte Quellenkarten */
.source-card:nth-child(1) { animation-delay: 0ms; }
.source-card:nth-child(2) { animation-delay: 100ms; }
.source-card:nth-child(3) { animation-delay: 200ms; }
.source-card:nth-child(4) { animation-delay: 300ms; }

Streaming-Text

Die Antwort erscheint Zeichen für Zeichen, jedoch in gruppierten Blöcken für bessere Lesbarkeit.

function TypewriterText({ text }: { text: string }) {
  const [displayedText, setDisplayedText] = useState('');

  useEffect(() => {
    // Text kam bereits über SSE an - einfach anzeigen
    setDisplayedText(text);
  }, [text]);

  return (
    <div className="typewriter">
      {displayedText}
    </div>
  );
}

function BlinkingCursor() {
  return (
    <span className="cursor" aria-hidden="true">|</span>
  );
}

.cursor {
  animation: blink 1s step-end infinite;
  color: var(--text-secondary);
}

@keyframes blink {
  50% { opacity: 0; }
}

Erkenntnisse

1. Quellenangaben sind unverzichtbar für KI-Vertrauen

Bei KI-Interfaces sollte jede faktische Aussage nachverfolgbar sein. Perplexity integriert Zitiertreue in jede Interaktion. Es ist weder optional noch versteckt.

2. Suchfeld > Chat-Prompt

Eine vertraute Suchoberfläche senkt Hürden. Nutzer können Stichwörter oder vollständige Fragen eingeben; beides funktioniert. Erzwingen Sie keine Konversationsmuster.

3. Folgefragen antizipieren

Die meisten Nutzer wissen nicht, was sie als Nächstes fragen sollen. Schlagen Sie kontextrelevante Folgefragen vor, anstatt zu erwarten, dass Nutzer das Gespräch vorantreiben.

4. Den Prozess zeigen

Streaming bietet Transparenz, nicht nur Geschwindigkeit. Die Anzeige der Phasen „Suchen → Lesen → Schreiben" schafft Vertrauen und reduziert die gefühlte Wartezeit.

5. Schwache Ergebnisse als Fehler behandeln

Wenn eine Anfrage unzureichende Ergebnisse liefern würde, bitten Sie um Präzisierung, anstatt schwache Antworten zurückzugeben. Leiten Sie Nutzer zu besseren Anfragen.

6. Klare Oberfläche = Vertrauenssignal

Die werbefreie, minimalistische Oberfläche signalisiert, dass das Produkt Informationsqualität über Monetarisierung stellt.

Häufig gestellte Fragen

Wie funktioniert Perplexitys Zitiersystem?

Jede faktische Aussage in einer Perplexity-Antwort enthält inline nummerierte Zitate, die zu Quell-URLs verlinken. Das Quellenpanel bleibt neben der Antwort sichtbar und zeigt Favicon, Domain und Snippet-Vorschau. Beim Überfahren einer Zitatnummer wird der spezifische Quellenkontext erweitert angezeigt. Dies ermöglicht sofortige Verifizierung, anstatt dass Nutzer suchen müssen.

Warum sieht Perplexity wie eine Suchmaschine aus statt wie ein Chatbot?

Das Team erkannte, dass Suche keine Konversation ist – sondern eine Informationsbeschaffungsmission. Eine vertraute Suchfeld-Oberfläche akzeptiert sowohl einfache Stichwörter als auch komplexe Fragen, ohne dass Nutzer konversationelle Prompting-Muster erlernen müssen. Dies senkt die Hürde für Nutzer, die sich mit KI-Chat-Interfaces unwohl fühlen.

Was ist Perplexitys Ansatz für Streaming-Antworten?

Perplexity nutzt Server-Sent Events (SSE), um Inhalte progressiv in drei Phasen zu enthüllen: „Suchen" (Quellen finden), „Lesen" (Quellen analysieren) und „Schreiben" (Antwort zusammenfassen). Quellen erscheinen zuerst, um Vertrauen aufzubauen, bevor die Antwort gestreamt wird. Diese Transparenz reduziert Unsicherheit während der Wartezeiten.

Wie geht Perplexity mit mehrdeutigen oder zu breiten Anfragen um?

Wenn eine Anfrage schwache Ergebnisse liefern würde, bittet Perplexity um Klärung, anstatt mittelmäßige Antworten zurückzugeben. Das System identifiziert mehrdeutige Begriffe, zu breite Themen oder fehlenden Kontext und schlägt dann spezifische Verfeinerungen vor. Nutzer können Vorschläge anklicken oder ihre eigene Präzisierung eingeben.

Was sind Perplexity Spaces und wie werden sie verwendet?

Spaces sind dedizierte Sammlungen für strukturierte Recherche, in denen Nutzer verwandte Anfragen organisieren, wichtige Ergebnisse anpinnen und Referenzdokumente hochladen können. Sie spiegeln die Tab-basierten Recherche-Stapel wider, die Akademiker und Journalisten manuell pflegen – jetzt direkt ins Produkt eingebettet für fortlaufende Forschungsprojekte.

Referenzen