Microcopy bezeichnet kurze, funktionale Texte in Benutzeroberflächen — Button-Labels, Fehlermeldungen, Placeholder-Texte, Tooltips und Hinweistexte — die direkt die Nutzbarkeit und Conversion beeinflussen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: UX Writing, UI Copy, Interface Copy, Produkttext
Was ist Microcopy?
Der Begriff "Microcopy" stammt aus dem UX-Writing-Kontext und beschreibt das Gegenteil von "Macrocopy" (langen Marketingtexten): kurze, funktionale Texte, die Nutzern helfen, eine Benutzeroberfläche zu verstehen und zu bedienen. Joshua Porter popularisierte das Konzept 2009, nachdem er eine einzelne Textänderung in einem Checkout-Formular — das Hinzufügen einer kurzen Erklärung zu einem Sicherheitsfeld — die Conversion um 6,3 % steigerte.
Microcopy ist oft das letzte Element, das im Designprozess Aufmerksamkeit bekommt — und gleichzeitig eines der wirkungsvollsten.
Erklärung
Button-Labels
Schlechte Button-Labels sind generisch: "Senden", "OK", "Weiter", "Bestätigen". Sie beschreiben die Mechanik (ein Formular wird gesendet), aber nicht die Konsequenz (was passiert nach dem Klick?).
Das Prinzip der Handlungsorientierten Labels: Gute Button-Labels beginnen mit einem Verb und beschreiben die konkrete Aktion aus Nutzersicht:
- "Senden" → "Nachricht senden" oder "Bestellung aufgeben"
- "OK" → "Löschen bestätigen" oder "Änderungen speichern"
- "Weiter" → "Zu Zahlungsmethode" oder "Konto erstellen"
Primär-Button-Regel: Der primäre Aktionsbutton eines Dialogs oder Formulars sollte immer beschreiben, was nach dem Klick geschieht. "Kostenlos testen" ist besser als "Registrieren". "Jetzt buchen" ist besser als "Weiter".
Ablehnungs-Button-Regel: Sekundäre "Nein"-Buttons sollten neutral sein, nicht beschämend (→ Confirmshaming). "Abbrechen" oder "Später" sind neutral. "Nein danke, ich verzichte auf Vorteile" ist manipulativ.
Fehlermeldungen
Fehler sind Momente höchster Frustration. Schlechte Fehlermeldungen sind generisch, technisch oder schuldzuweisend. Gute Fehlermeldungen sind lösungsorientiert, menschlich und konkret.
Schema einer guten Fehlermeldung:
- Was ist passiert (klar, ohne Jargon): "Dein Passwort ist zu kurz."
- Warum (optional, wenn nicht offensichtlich): "Passwörter müssen mindestens 8 Zeichen haben."
- Was du tun kannst: "Bitte gib ein Passwort mit mindestens 8 Zeichen ein."
Verbotene Phrasen in Fehlermeldungen:
- "Fehler 403" / "HTTP 500" (technischer Jargon)
- "Ungültige Eingabe" (informiert nicht, was ungültig ist oder warum)
- "Sie haben einen Fehler gemacht" (schuldzuweisend)
- Ausrufezeichen in Fehlern ("Achtung!") — Panik ist nicht hilfreich
404-Fehlerseite: Spezialfall von Fehlermeldung. Best Practice: Erkläre, was passiert ist, biete Navigation zurück an, humorvolle Ton wenn zur Marke passend. Mailchimp's 404-Seite mit dem Monkey-Mascot ist ein Design-Klassiker.
Placeholder-Texte
Placeholder-Texte erscheinen in leeren Eingabefeldern und verschwinden beim Tippen. Häufige Fehler:
Als Labels nutzen: Placeholders sind kein Label-Ersatz. Sobald der Nutzer tippt, verschwindet der Kontext. Immer ein separates Label verwenden.
Zu generisch: "Name eingeben" statt "Vor- und Nachname (z. B. Anna Müller)" ist weniger hilfreich.
Richtige Verwendung:
- Format-Hinweis: "TT.MM.JJJJ" für Datumsfelder
- Beispielwert: "beispiel@email.de" für E-Mail-Felder
- Erklärung bei unklaren Feldern: "Dein Benutzername ist nicht deine E-Mail-Adresse"
Kontrastregel: Placeholder-Text muss ausreichend Kontrast haben (mindestens 3:1 nach WCAG), aber gleichzeitig klar vom eingetippten Text unterscheidbar bleiben. Zu heller Placeholder ist unlesbar; zu dunkler Placeholder verwechselt Nutzer schon eingetragene mit leeren Feldern.
Tooltips und Hilfe-Texte
Kleine Info-Icons (ⓘ) mit Tooltips erklären auf Hover/Tap, warum ein Feld nötig ist oder was ein Begriff bedeutet.
Best Practices:
- Maximal 1–2 Sätze
- Erkläre "warum", nicht nur "was" ("Wird für Passwort-Zurücksetzen benötigt", nicht nur "Telefonnummer")
- Auf Mobile: Tap statt Hover für Tooltip-Aktivierung
- Aria-Verknüpfung mit dem Feld für Screen-Reader
Leere Zustände und Onboarding-Texte
Empty-State-Texte gehören ebenfalls zur Microcopy. Zu generisch: "Keine Daten vorhanden." Besser: "Noch keine Projekte — erstelle dein erstes und starte sofort." (Einladend, motivierend, mit CTA.)
Microcopy und Vertrauen
Beim Bezahlvorgang reduziert präzise Microcopy Angst:
- "Sicher bezahlen mit 256-Bit SSL-Verschlüsselung" neben dem Bezahlen-Button
- "Keine versteckten Kosten" neben der Preisinformation
- "Du kannst jederzeit kündigen" neben dem Abo-CTA
Diese kurzen Reassurance-Texte (Vertrauens-Microcopy) haben nachweislich positive Auswirkungen auf Conversion — Joshua Porters Forschung und zahlreiche A/B-Tests bestätigen dies.
Beispiele
- Mailchimp: Legendär für menschliche, warme Microcopy. Der "Send"-Button wird vor dem Versand einer Kampagne zu "Ready to send? Freddie awaits." — eine freundliche, aufmerksamkeitsstarke Bestätigung. Fehlermeldungen mit Charakter: "Uh oh! Looks like something went wrong."
- Duolingo: Motivierende Microcopy bei Fehlern: "Schon fast! Versuche es nochmal." statt "Falsche Antwort". Die Sprache passt zur spielerischen Marken-Persönlichkeit.
- Airbnb: Button-Label "Auschecken: Schritt 1 von 3" statt generischem "Weiter". Nutzer wissen immer, wie viel Aufwand noch kommt.
- Google Forms: Pflichtfeld-Fehlermeldung: "Dieses Feld ist erforderlich." — simpel, neutral, lösungsorientiert. Kein Jargon, kein Ausrufezeichen.
- Spotify Registrierung: Passwort-Placeholder: "Erstelle ein Passwort" mit Inline-Hilfetext "Mindestens 8 Zeichen" — erscheint nicht erst als Fehlermeldung, sondern preventiv als Hinweis.
In der Praxis (Figma-Umsetzung)
Microcopy im Design-System dokumentieren: Erstelle in Figma eine "Copy Guidelines"-Page mit:
- Button-Label-Richtlinien: "Verwende immer Imperativ + Objekt"
- Fehlermeldungs-Templates: [Was ist passiert] + [Warum] + [Lösung]
- Placeholder-Formate pro Feldtyp
- Verbotene Phrases (Ausrufezeichen, Jargon, Schuldzuweisung)
Annotation-Komponente: Nutze Figma Annotations (Beta-Feature) oder eigene Annotation-Frames, um Microcopy-Entscheidungen zu dokumentieren. Warum "Jetzt buchen" statt "Weiter"?
A/B-Test-Vorbereitung: Markiere kritische Microcopy (Buttons, Fehlermeldungen) in Figma mit einer "Test"-Variante-Property. So können Entwickler und Content-Teams direkt in Figma Alternativformulierungen hinterlegen.
Vergleich & Abgrenzung
Microcopy vs. Content/Marketing Copy: Marketing-Copy verkauft und überzeugt. Microcopy hilft und erklärt. Beide nutzen Sprache, aber für verschiedene Ziele. In guten Produkten ergänzen sie sich: Marketing-Copy bringt Nutzer zum Produkt, Microcopy hält sie darin.
Microcopy vs. Tooltip: Tooltip ist ein UI-Element; Microcopy ist der Text darin. Alle Tooltips enthalten Microcopy; nicht alle Microcopy ist in Tooltips.
Häufige Fragen (FAQ)
Wer schreibt Microcopy — Designer oder Texter? In großen Organisationen gibt es dedizierte UX Writers (z. B. bei Google, Apple, Shopify). In kleineren Teams übernehmen oft Designer oder Produktmanager diese Rolle. Idealerweise sind beide beteiligt: Designer kennen den Kontext, UX Writers kennen Sprache und Nutzerpsychologie. Wichtig: Microcopy sollte niemals am Ende nachträglich eingefügt werden, sondern vom ersten Wireframe an Teil des Designprozesses sein.
Wie testet man Microcopy? A/B-Tests für Button-Labels und CTA-Texte sind die direkteste Methode. Usability-Tests zeigen, bei welchen Texten Nutzer innehalten oder Fragen haben. Heatmaps und Session-Recordings zeigen, welche Elemente gelesen und welche ignoriert werden. Click-Tracking auf Fehlermeldungen (häufig geklickte Fehlermeldung = schlecht geschriebene Fehlermeldung) ist ein indirekter Indikator.
Verwandte Einträge
- Form Design — Labels und Fehlermeldungen im Formularkontext
- Dark Patterns erkennen — Wenn Microcopy manipulativ wird
- Empty State Design — Microcopy für leere Zustände
Weiterführend
- Porter, J. (2009). Microcopy: Tiny Words That Make a Huge Impact. 52weeksofux.com.
- Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.
- Torrey, K. (2020). Strategic Writing for UX. O'Reilly Media.
- Nielsen Norman Group (2018). UX Writing: How to Do It and Why It Matters. nngroup.com.
