Praktische Methoden zur UX-Verbesserung für Startups, die ohne Designer überleben

• Die Nutzung einer Komponentenbibliothek wie Material UI mag der einfache Weg sein, bietet aber nur grundlegende Building Blocks; das Design des gesamten User-Flows erfordert weiterhin separate Arbeit
• Wenn man Zeit darin investieren muss, das Produkt einzigartig zu machen, wie lässt sich dann so schnell wie möglich eine gute User Experience definieren?

Eine leere Seite ist eine Falle

• Beim Blick auf eine leere Leinwand nicht darüber grübeln: „Wie sollte ein E-Mail-Eingabefeld aussehen?“
• Man kann Muster nutzen, die sich bei großen Unternehmen bereits bewährt haben
  • Spart Zeit und kann die User Experience verbessern

• Zu vermeidende Ansätze

  • Design-Award-Seiten – originell, aber ohne Garantie für Usability
  • Dribbble – fokussiert auf Ästhetik, nicht auf Funktionalität

• Empfehlenswerte Ansätze

  • Websites von Wettbewerbern – ein Konto anlegen und per Screenshots dokumentieren
  • Seiten mit Pattern-Sammlungen – etwa PageFlows, Mobbin usw. für schnelle Referenzen

• Allgemeine UI-Patterns notieren

  • Gemeinsame UI-Elemente wie E-Mail-, Passwortfelder oder Bestätigungs-Flows
  • Visuelle und Layout-Regeln:
    • Zentrierte Formulare
    • Responsives Design
    • Klare Buttons
    • Logo oben

• Beabsichtigte Reibung (Friction)

  • Manche Unternehmen verlangen Kreditkarteninformationen → Strategie, um ernsthafte Nutzer zu gewinnen
  • Eine schnelle Experience ist nicht immer die beste

Ziele klar definieren

• Das Ziel ist nicht einfach nur, „eine Anmeldeseite zu bauen“, sondern → „die Anmeldung so einfach wie möglich zu machen“
• In eine Frage umwandeln:

  „Wie können wir es Nutzern leicht machen, sich anzumelden?“

• Beispielhafte Lösungen

  • Passwortstärke bereits während der Eingabe anzeigen
  • Einen Grund angeben, warum das Anmeldeformular ausgefüllt werden soll

• Weitere Fragen

  • Sofort nach der Registrierung einloggen vs. erst nach E-Mail-Bestätigung
  • Nach der Registrierung eine Bestätigungsseite anzeigen vs. eine Erfolgsmeldung anzeigen

Edge Cases (Ausnahmesituationen) berücksichtigen

• Echte Nutzer verhalten sich nicht wie erwartet → sie sind in Eile, ignorieren Anweisungen und machen Fehler
• Mit Fragen prüfen, wo Probleme auftreten können:
  • Was passiert, wenn Nutzer sich beim schnellen Tippen vertun?
  • Werden Fehler in Eingabefeldern den Nutzern klar vermittelt?

• Maßnahmen zur Behebung bei Problemen

  • Unachtsamkeit beim Erstellen eines Passworts → später mögliche Kontosperrung
    • → Ein Feld zur „Passwortbestätigung“ hinzufügen und erneute Eingabe verlangen
  • Bei nicht übereinstimmenden Passwörtern → Fehlermeldung anzeigen
    • → Bereits bei der zweiten Passworteingabe sofort warnen

Mit AI UX-Probleme entdecken

• Mit Tools wie ChatGPT lassen sich UX-Probleme prüfen
• Nicht perfekt, aber schnell und effektiv für einen ersten Check

• Nützliche Prompt-Beispiele

  • Red Team vs Blue Team:

    „An welchen Stellen könnten Nutzer in diesem Registrierungs-Flow hängen bleiben?“
    „Warum ist dieses Design intuitiv?“

  • Branchenstandard:

    „Wie gestalten führende SaaS-Unternehmen ihren Registrierungs-Flow?“

  • Edge Cases:

    „Was passiert, wenn Nutzer ihre E-Mail falsch eingeben und es nicht bemerken?“

Weitere Tipps zur UX-Verbesserung

• Messgrößen festlegen
  • Conversion Rate, Nutzerbindung, Nutzerzufriedenheit usw. → Erfolg anhand objektiver Kennzahlen bewerten
• Einfache Farben verwenden
  • Primärfarbe, Sekundärfarbe, Akzentfarbe → Coolors empfohlen
• Vertraute Sprache verwenden
  • Statt „Datenbankfehler“ → „Änderungen konnten nicht gespeichert werden“

Fazit

• In Startups ist Geschwindigkeit wichtig → Perfektionismus ist fehl am Platz
• In der UX hat Usability Vorrang vor Originalität
  • Ein intuitiver und klarer User-Flow ist effektiver als ein komplexes und originelles Design
• Nur beim Kernwert innovativ sein → für den Rest bewährte Muster verwenden
• Wenn man Mustern folgt, die Nutzer bereits kennen, sinkt der Lernaufwand

[GN⁺]

Hacker-News-Kommentare

• Der Höhepunkt der Usability lag vor 25 Jahren, als die meisten Anwendungen Symbolleisten und Menüs mit Standardmustern hatten

  • Häufige nichtprofessionelle Nutzer verwendeten die Symbolleiste, gelegentliche nichtprofessionelle Nutzer erledigten Aufgaben über Menüs
  • Professionelle Nutzer merkten sich Tastenkürzel über die unterstrichenen Buchstaben in den Menübezeichnungen
  • Um Einstellungen zu ändern, öffnete man den Einstellungsdialog mit Tabs wie "Allgemein", "Schriftarten und Farben" usw.
  • Damals hatten die meisten Menschen nur wenig Computerwissen, konnten aber die meisten Anwendungen fast ohne Hilfe benutzen
  • Das Ziel war damals, die Zeit zu minimieren, die Nutzer in der Anwendung verbringen, damit sie ihre Arbeit effizient erledigen können
  • Moderne UX zielt darauf ab, Nutzer so stark wie möglich "einzubinden"; das mag für Consumer-Apps in Ordnung sein, wird aber auch auf Unternehmensanwendungen angewendet und führt dort zu Problemen
  • Es gab Fälle, in denen nichttechnische Mitarbeiter in Fortune-100-Unternehmen sich beschwerten, dass neue SPAs ihre Arbeit verlangsamten, und wieder die alten Terminals verlangten

• Nachdem man einen Grafikdesigner eingestellt hat, ist die auffälligste Veränderung meist, dass App/Webseite besser aussieht

  • UX umfasst einen viel breiteren Bereich, von Interaktionsabläufen bis hin zu einzelnen Feature-Widgets
  • Die meisten Menschen sind schlecht darin, die gesamte UX eines Systems vorherzusagen
  • UX entsteht entweder durch das Kopieren bestehender Lösungen oder durch das Ausprobieren von etwas Neuem
  • Ein System in der Vorstellung zu bewerten ist viel schwieriger als es zu implementieren
  • Bei der Backend-Systemarchitektur kann man Fehler anhand grundlegender Prinzipien und Schlussfolgerungen vorhersagen und vermeiden
  • Designer oder Engineers mit außergewöhnlich gutem UX-Gespür sind extrem wertvoll, aber man kann nicht darauf warten, so jemanden zu finden

• Das beste Werkzeug, um Usability-Probleme zu finden, ist es, den Bildschirm mit Gemini zu teilen und per Sprache zu erklären, welche Aufgabe man erledigen möchte

  • Gemini schaut auf die UI, findet heraus, wie die Aufgabe auszuführen ist, und sagt per Sprache, wohin man klicken soll
  • Wenn Gemini es nicht lösen kann, gibt es ein Usability-Problem

• Laut "Jakob's Law" verbringen Nutzer den Großteil ihrer Zeit auf anderen Websites, daher bevorzugen sie, dass eine Website genauso funktioniert wie andere Sites, die sie bereits kennen

  • Nutzer übertragen ihre Erwartungen aus vertrauten Produkten auf andere ähnliche Produkte
  • Indem man vorhandene mentale Modelle nutzt, kann man eine bessere User Experience schaffen, bei der Nutzer sich auf ihre Aufgabe konzentrieren können, statt ein neues Modell zu lernen
  • Bei Änderungen sollte man Abweichungen minimieren, indem man Nutzern erlaubt, die ihnen vertraute Version für eine begrenzte Zeit weiter zu verwenden

• Es gibt einen Grund, warum alle Produkte auf ähnliche Weise funktionieren; wenn etwas anders funktioniert, sollte man sich fragen, ob das Absicht oder ein Fehler ist

  • Man muss ein Gleichgewicht zwischen vertrauten Mustern für Nutzer und neuen Ideen finden
  • Wenn man zum Beispiel das Checkout-Erlebnis von Amazon verbessern will, kann man die Vorteile der Vertrautheit verlieren
  • Wenn man Checkboxen, Radio-Buttons, Dropdowns und Textfelder bevorzugt, bekommt man für Nutzer vertraute Wege zum Lesen und Ändern von Zuständen quasi kostenlos dazu
  • "Nicht intuitiv" kann oft einfach bedeuten: "Ich bin mit diesem Muster nicht vertraut"

• Man kann AI verwenden, um UX-Probleme zu identifizieren, und Tools wie ChatGPT können auf UX-Probleme hinweisen, die man sonst übersehen würde

  • Nicht perfekt, aber besser als Raten

• Empfohlen wird, sich auf allgemeine Designprinzipien und Denkweisen zu konzentrieren

  • Donald Normans "The Design of Everyday Things" hilft zu verstehen, was gutes und schlechtes Design unterscheidet
  • Jesse Schells "The Art of Game Design" behandelt, wie man immersive Erlebnisse schafft; Spiele sind dabei besonders gnadenlos

• Sich daran zu orientieren, was große Unternehmen tun, kann zu Cargo-Cult-Denken führen

  • Man sollte genau wissen, warum man jeden Teil des Systems baut
  • Nur weil das von Google verwendete Captcha nervig ist, muss man es nicht nachahmen
  • Man sollte selbstbewusst darüber nachdenken, was man verbessern kann

• Auch im Bootstrap-Stadium kann man einen UX-Designer einstellen; das ist eine sehr lohnende Investition

  • Es muss keine Vollzeitstelle sein; man kann in einem Design-Sprint einige Konzepte entwerfen, UX-Workshops durchführen und die gewählte Option anschließend zu einem klickbaren Prototyp weiterentwickeln
  • Das ist eine Einsparung von $5k im Frontend-Entwicklungsbudget wert und wird im ersten Jahr durch höhere Nutzerbindung mehr als $5k zusätzlichen Gewinn bringen

• Ich kann mich nicht daran erinnern, wann ich zuletzt mit einem dedizierten Designer gearbeitet habe

  • DevOps folgt einem ähnlichen Weg, und es scheint, als würde erwartet, dass Coder das nebenbei erledigen, während ihr Code kompiliert
  • Als Nächstes sind die Coder dran
  • Spezialisten einzustellen ist sehr unbequem