101 UX Principles

1. Design für Benutzerempathie und Objektivität

Empathie und Objektivität sind die primären Fähigkeiten, die Sie besitzen müssen, um gut im UX-Design zu sein.

Empathie treibt das Verständnis voran. Indem Sie sich in die Lage des Benutzers versetzen, können Sie deren Bedürfnisse, Frustrationen und Ziele antizipieren. Diese Einsicht ermöglicht es Ihnen, Schnittstellen zu entwerfen, die dem Benutzer wirklich dienen, anstatt nur technische Anforderungen zu erfüllen.

Objektivität sorgt für Klarheit. Sie ermöglicht es Ihnen, Ihre Designentscheidungen kritisch zu bewerten, frei von persönlichen Vorurteilen oder organisatorischem Druck. Diese Perspektive hilft, Fehler und Verbesserungsmöglichkeiten zu identifizieren, die sonst übersehen werden könnten.

Wichtige Aspekte des empathischen und objektiven Designs:

• Führen Sie Benutzerforschung durch, um die unterschiedlichen Bedürfnisse der Benutzer zu verstehen
• Testen Sie Designs mit echten Benutzern und integrieren Sie Feedback
• Hinterfragen Sie Annahmen und seien Sie bereit, Designs zu überarbeiten
• Konzentrieren Sie sich darauf, Benutzerprobleme zu lösen, anstatt auffällige Funktionen zu präsentieren
• Priorisieren Sie die Benutzerfreundlichkeit über interne organisatorische Präferenzen

2. Typografie und visuelle Hierarchie vereinfachen

VERWENDEN SIE SCHRIFTGRÖSSEN, UM DIE INFORMATIONSHIERARCHIE DARZUSTELLEN

Lesbarkeit ist entscheidend. Wählen Sie maximal zwei Schriftarten: eine für Überschriften und eine für den Fließtext. Dies schafft visuelle Konsistenz und reduziert die kognitive Belastung für die Benutzer. Verwenden Sie nach Möglichkeit Systemschriften, um schnelles Laden und ein vertrautes Erscheinungsbild auf verschiedenen Geräten zu gewährleisten.

Größe ist wichtig für die Hierarchie. Verwenden Sie größere Schriftgrößen für wichtigere Informationen, um die Aufmerksamkeit des Benutzers auf wichtige Elemente zu lenken. Dies hilft den Benutzern, die Struktur Ihrer Schnittstelle schnell zu scannen und zu verstehen. Streben Sie mindestens zwei, aber nicht mehr als drei verschiedene Schriftgrößen an, um eine klare Hierarchie zu bewahren, ohne die Benutzer zu überfordern.

Best Practices für Typografie:

• Verwenden Sie 16px als Standardgröße für Fließtext
• Halten Sie eine Zeilenhöhe von 1,5 für optimale Lesbarkeit ein
• Stellen Sie ausreichenden Kontrast zwischen Text und Hintergrund sicher (mindestens 4,5:1 Verhältnis)
• Verwenden Sie Fett- oder Kursivschrift zur Hervorhebung, anstatt neue Schriftarten einzuführen
• Berücksichtigen Sie, wie sich die Typografie auf verschiedenen Gerätegrößen skaliert

3. Intuitive und funktionale UI-Steuerelemente erstellen

Lassen Sie Ihre Schaltflächen wie Schaltflächen aussehen.

Affordanzen leiten Interaktionen. Entwerfen Sie Steuerelemente, die ihre Funktion visuell kommunizieren. Schaltflächen sollten durch subtile Schatten, Texturen oder Farbunterschiede "klickbar" erscheinen. Dies hilft den Benutzern, interaktive Elemente sofort zu erkennen, ohne raten oder experimentieren zu müssen.

Konsistenz schafft Vertrautheit. Verwenden Sie etablierte Muster für gängige Steuerelemente wie Suchfelder, Datumsauswahlen und Navigationsmenüs. Dies nutzt die bestehenden mentalen Modelle der Benutzer und reduziert die Lernkurve für Ihre Schnittstelle. Vermeiden Sie es, neue, willkürliche Steuerelemente zu erfinden, die die Benutzer zwingen, unbekannte Interaktionsmuster zu erlernen.

Best Practices für UI-Steuerelemente:

• Machen Sie Schaltflächen groß genug für einfaches Tippen/Klicken
• Gruppieren Sie verwandte Steuerelemente logisch zusammen
• Verwenden Sie nach Möglichkeit systemeigene Eingabesteuerelemente (z.B. Datumsauswahlen)
• Bieten Sie klare visuelle Rückmeldungen für Benutzerinteraktionen (Hover-Zustände, aktive Zustände)
• Verwenden Sie erkennbare Symbole neben Textbeschriftungen für Klarheit

4. Formulare und Dateneingabe optimieren

Wenn eine gute Formularerfahrung geboten werden kann, werden Ihre Benutzer Ihr Produkt lieben.

Reibung minimieren. Formulare sind oft ein notwendiges Übel, aber sie müssen nicht schmerzhaft sein. Vereinfachen Sie die Dateneingabe, indem Sie nur nach wesentlichen Informationen fragen. Verwenden Sie geeignete Eingabetypen (z.B. numerische Tastatur für Telefonnummern) und nutzen Sie die Fähigkeiten des Geräts wie Autofill, wo immer möglich.

Durchdacht validieren. Bieten Sie Echtzeit-Feedback, während Benutzer Felder ausfüllen, aber seien Sie nachsichtig bei kleineren Formatierungsfehlern (z.B. Leerzeichen in Kreditkartennummern). Zeigen Sie klare Fehlermeldungen, die den Benutzern helfen, Fehler zu korrigieren. Bewahren Sie immer die eingegebenen Daten der Benutzer, auch wenn es Validierungsfehler gibt.

Strategien zur Formularoptimierung:

• Verwenden Sie einspaltige Layouts für die meisten Formulare
• Gruppieren Sie verwandte Felder logisch
• Bieten Sie klare, spezifische Beschriftungen für jedes Feld
• Zeigen Sie Passwortanforderungen im Voraus an
• Ermöglichen Sie Benutzern, maskierte Passwörter vorübergehend anzuzeigen
• Bieten Sie "Gast-Checkout"-Optionen in E-Commerce-Flows an

5. Navigation und Benutzerreisen verbessern

Der Benutzer sollte immer wissen, in welchem Stadium er sich in einer bestimmten Reise befindet.

Orientieren Sie den Benutzer. Bieten Sie klare visuelle und textliche Hinweise, um den Benutzern zu helfen, ihren aktuellen Standort innerhalb Ihres Produkts zu verstehen. Verwenden Sie Breadcrumb-Navigation, Fortschrittsanzeigen und ein deutliches visuelles Design für verschiedene Abschnitte Ihrer Schnittstelle.

Bieten Sie Fluchtwege an. Ermöglichen Sie es den Benutzern, leicht zurückzugehen oder optionale Schritte in einem Prozess zu überspringen. Dies verhindert, dass Benutzer sich gefangen fühlen, und ermöglicht eine flexiblere Erkundung Ihres Produkts. Bieten Sie immer eine klare Möglichkeit, zu einem "Home"- oder Startpunkt zurückzukehren.

Best Practices für die Navigation:

• Verwenden Sie konsistente Menüplatzierungen in Ihrem Produkt
• Implementieren Sie einen "Zum Inhalt springen"-Link für Barrierefreiheit
• Bieten Sie Suchfunktionen für größere Websites/Apps an
• Verwenden Sie beschreibende, handlungsorientierte Beschriftungen für Navigationselemente
• Erwägen Sie, mehrere Navigationsoptionen anzubieten (z.B. Top-Menü und Footer-Links)

6. Barrierefreiheit und Inklusivität priorisieren

Verwenden Sie nicht nur Farben, um Informationen zu vermitteln.

Design für alle Benutzer. Stellen Sie sicher, dass Ihr Produkt von Menschen mit unterschiedlichen Fähigkeiten und auf verschiedenen Geräten genutzt werden kann. Dies umfasst Überlegungen zur visuellen, auditiven, motorischen und kognitiven Barrierefreiheit. Viele Verbesserungen der Barrierefreiheit kommen allen Benutzern zugute, indem sie klarere, robustere Schnittstellen schaffen.

Testen Sie mit unterstützenden Technologien. Bewerten Sie Ihr Produkt regelmäßig mit Screenreadern, Tastaturnavigation und anderen unterstützenden Tools. Dies hilft, Bereiche zu identifizieren, in denen die Barrierefreiheit verbessert werden kann, und sorgt für ein inklusiveres Erlebnis für alle Benutzer.

Wichtige Überlegungen zur Barrierefreiheit:

• Stellen Sie ausreichenden Farbkontrast sicher (mindestens 4,5:1 Verhältnis)
• Bieten Sie Textalternativen für Bilder und Symbole
• Stellen Sie die Tastaturnavigierbarkeit für alle interaktiven Elemente sicher
• Verwenden Sie ARIA-Beschriftungen und -Rollen, um die Kompatibilität mit Screenreadern zu verbessern
• Ermöglichen Sie Benutzern, Text zu vergrößern, ohne das Layout zu zerstören
• Vermeiden Sie es, sich ausschließlich auf Farben zu verlassen, um Bedeutung zu vermitteln

7. Klare und konsistente Texte verfassen

Schreiben Sie wie ein Mensch.

Sprechen Sie die Sprache des Benutzers. Vermeiden Sie Fachjargon, technische Begriffe und "Unternehmenssprache" in Ihren Schnittstellentexten. Verwenden Sie klare, prägnante Sprache, die Ihre Zielgruppe leicht versteht. Dies reduziert die kognitive Belastung und macht Ihr Produkt zugänglicher.

Konsistenz bewahren. Verwenden Sie dieselbe Terminologie in Ihrem gesamten Produkt, um ähnliche Konzepte oder Aktionen zu beschreiben. Dies hilft den Benutzern, ein kohärentes mentales Modell davon zu erstellen, wie Ihre Schnittstelle funktioniert. Erstellen Sie einen Styleguide, um Konsistenz in verschiedenen Teilen Ihres Produkts und unter Teammitgliedern sicherzustellen.

Best Practices für das Verfassen von Texten:

• Verwenden Sie die aktive Stimme für klarere, direktere Anweisungen
• Teilen Sie lange Textblöcke in übersichtliche Aufzählungspunkte oder kurze Absätze auf
• Stellen Sie wichtige Informationen in Überschriften und Schaltflächenbeschriftungen an den Anfang
• Verwenden Sie "Anmelden" und "Registrieren" anstelle von "Einloggen" und "Registrieren"
• Bieten Sie hilfreiche Fehlermeldungen, die den Benutzern helfen, Fehler zu korrigieren

8. Such- und E-Commerce-Erlebnisse optimieren

Suchergebnisseiten sollten das relevanteste Ergebnis oben auf der Seite anzeigen.

Relevanz ist der Schlüssel. Investieren Sie in robuste Suchfunktionen, die die relevantesten Ergebnisse priorisieren. Kategorisieren Sie Ergebnisse in logische Abschnitte, um den Benutzern zu helfen, schnell zu finden, wonach sie suchen. Bieten Sie klare Filter- und Sortieroptionen, damit Benutzer ihre Suche verfeinern können.

Kaufvorgänge vereinfachen. Folgen Sie etablierten E-Commerce-Mustern für Vertrautheit. Minimieren Sie die Anzahl der Schritte, die erforderlich sind, um einen Kauf abzuschließen. Bieten Sie klare Produktinformationen, transparente Preise und mehrere Zahlungsmöglichkeiten, um Vertrauen aufzubauen und Abbrüche zu reduzieren.

Optimierung von Such- und E-Commerce-Erlebnissen:

• Implementieren Sie Autovervollständigung/Vorschläge für Suchanfragen
• Ermöglichen Sie es Benutzern, ihre Suche einfach zu ändern oder zu verfeinern
• Zeigen Sie die Anzahl der Ergebnisse für jede Kategorie an
• Bieten Sie eine Gast-Checkout-Option an
• Minimieren Sie Formularfelder im Checkout-Prozess
• Zeigen Sie Versandkosten und voraussichtliche Liefertermine deutlich an

9. Etablierte Muster und Standards nutzen

Bauen Sie auf etablierten Metaphern auf – es ist kein Diebstahl.

Vertrautheit fördert die Benutzerfreundlichkeit. Benutzer verbringen die meiste Zeit auf anderen Websites und Apps. Durch die Übernahme gängiger Designmuster nutzen Sie das vorhandene Wissen der Benutzer und reduzieren die Lernkurve für Ihr Produkt. Erfinden Sie das Rad nicht neu, es sei denn, Sie haben einen überzeugenden Grund dafür.

Wählen Sie intelligente Standards. Überlegen Sie sorgfältig, welche Standardeinstellungen und -optionen in Ihrem Produkt verwendet werden. Gute Standards können die Anzahl der Entscheidungen, die Benutzer treffen müssen, erheblich reduzieren und ihr Erlebnis vereinfachen. Ermöglichen Sie es den Benutzern immer, diese Standards bei Bedarf leicht zu ändern.

Nutzung etablierter Muster:

• Studieren Sie erfolgreiche Wettbewerber und Branchenführer zur Inspiration
• Verwenden Sie erkennbare Symbole und UI-Elemente (z.B. Hamburger-Menü, Einkaufswagen)
• Folgen Sie plattformspezifischen Richtlinien (iOS Human Interface Guidelines, Material Design)
• Implementieren Sie gängige Gesten und Interaktionen (Pinch-to-Zoom, Pull-to-Refresh)
• Bieten Sie leicht zugängliche "Rückgängig"-Optionen für destruktive Aktionen

10. Respektieren Sie die Zeit und Mühe der Benutzer

Löschen Sie niemals eingegebene Benutzerdaten, es sei denn, dies wird ausdrücklich verlangt.

Wertschätzen Sie Benutzereingaben. Behandeln Sie alle von Benutzern erstellten Daten oder Inhalte mit größtem Respekt. Verwerfen Sie niemals eingegebene Informationen ohne ausdrückliche Bestätigung. Implementieren Sie Auto-Save-Funktionen, wo dies angebracht ist, um versehentlichen Datenverlust zu verhindern.

Optimieren Sie für Effizienz. Entwerfen Sie Ihre Schnittstelle so, dass Benutzer ihre Ziele schnell und mit minimalem Aufwand erreichen können. Dies umfasst die Bereitstellung von Tastenkombinationen, das Anbieten von Massenaktionen und das Erinnern an Benutzereinstellungen, um sich wiederholende Aufgaben zu reduzieren.

Strategien, um die Zeit und Mühe der Benutzer zu respektieren:

• Implementieren Sie "unendliches Scrollen" für feedartige Inhalte, aber mit einer Möglichkeit, zur Position zurückzukehren
• Bieten Sie klare Fortschrittsanzeigen für mehrstufige Prozesse
• Ermöglichen Sie es Benutzern, komplexe Aufgaben zu speichern und fortzusetzen
• Bieten Sie Batch-Operationen für sich wiederholende Aktionen an
• Verwenden Sie asynchrone Lade- und optimistische UI-Updates, um ein Gefühl von Geschwindigkeit zu erzeugen
• Implementieren Sie einen "Zum Inhalt springen"-Link für Tastaturbenutzer

Zuletzt aktualisiert: August 22, 2024