Wenn ein neuer Kunde auf Deine Webseite geht, hält dieser Ausschau nach bekannten Symbolen und Bildern, um sich in ersten Schritt zu orientieren. Verwenden am besten nur bekannte (Mainstream) Symbole, Farben und Bilder.
Wichtig ist, dass Du das gleiche Symbol mit einer üblichen Funktion verknüpfst, die ein bekanntes Ergebnis erzeugt z. B. der Klick auf ein Mülltonen-Icon soll nicht ein Menü öffnen, sondern das vorliegende Item löschen.
Experimentiere nicht mit Symbolen. Du kannst Deine eigene Note dazugeben, aber achtet auf einen hohen Wiedererkennungsgrad.
Hipp vs. Mainstream
Hipp / unkonventionell
Standard = konkreter
Deine Kaufkollektion, Basket
Einkaufkorb
Übermitteln, Transit
Absenden = Pfeil rechts
Finden, Googln, Lupe
Suchen = Lupe
Member Area, Client Area, Personal Room
Einloggen = Pfeil in Box
Releases, Anwendungen
Downloads = Dicke Pfel nach unten
FAQ, Support, Wissenbasis
Hilfe = Fragezeichen
Komplet neue Symbole und Funktionen solltest Du dem Nutzer mit einem Tutorial (Onboarding) näher bringen. Der Nutzer sollte das Userinterface nicht in Funktion und Aussehen überraschen, sondern eine Anwendung bedienbar machen.
#2(Nicht) offizielle GUI Design-Gewohnheiten
10 gutes Design Regeln
Das Design im Web und in Software orientiert sich an diversen inoffiziell etablierten Regeln. Der Nutzer nimmt diese Konzepte mehr wahr und sind für diesen eine Selbstverständlichkeit. Gleiche Konzepte und Strukturen helfen dem Nutzer schneller mit der Software / Webseite zu interagieren.
Die folgenden Regeln hören sich beim ersten Lesen banal an. In Wirklichkeit halten sich die Designer nicht an die Regeln:
Der Login- und Registrieren-Button mit dem Anmelde-Namen ist oben rechts
Das Logo des Unternehmens ist oben links oder mittig
Das Menü findet der Nutzer im oberen Teil oder Links neben dem Haupttext / -funktion
Text, Bilder und Funktionen der Software / Webseite sind zentral angeordnet
Unwichtige Informationen findet der Nutzer unten (Impression, Wortanzahl bei Word, Zoom Einstellungen).
Je weiter oben Elemente angeordnet sind, desto wichtiger ist das Element.
Container(rahmen) trennen inhaltlich verscheiden Elemente ab.
Primäre Funktionen sind auf der Oberfläche dargestellt, währende Sekundäre in einem Menü versteckt sind.
Ein Hyperlink ist ein unterstrichener, blauer Text.
Texteingaben werden zwischen gespeichert, falls die Internetverbindung abstürzt (Cookie) oder lokal in der Anwendung gespeichert.
Was bringen „innovative“ und „revolutionäre“ Design-Änderungen, wenn das Produkt schwieriger zu nutzen ist. Wenn der User ein Produkt kauft, möchte dieser (in den meisten Fällen) dieses nutzen. Die Kunst sieht neben der praktikablen eine ästhetische Funktion vor. Ästhetische Software kann nutzbar sein, wenn das Design gut überlegt ist.
Sehr gerne! Hier kommen 20 weitere UX/UI-Sünden, die oft übersehen werden – aber Nutzer regelmäßig zur Weißglut bringen. Jede mit kurzer Erklärung, warum sie problematisch ist:
🧱 1. Scroll-Jacking
Problem: Die Seite verändert das Scrollverhalten (z. B. springt oder blockiert).
Folge: Nutzer verlieren die Kontrolle und Orientierung.
🧭 2. Versteckte Navigation
Problem: Menüs sind nur durch Hover oder Klick auf kryptische Icons sichtbar.
Folge: Nutzer finden wichtige Funktionen nicht.
🧩 3. Inkonsistente Icons
Problem: Gleiche Symbole bedeuten unterschiedliche Dinge – oder umgekehrt.
Folge: Verwirrung und Fehlbedienung.
🧼 4. Zu kleine Touch-Ziele
Problem: Buttons oder Links sind zu klein für Finger auf mobilen Geräten.
Folge: Frust durch Fehlklicks.
🧟 5. „Tote“ Elemente
Problem: Dinge sehen klickbar aus, sind es aber nicht.
Folge: Nutzer klicken ins Leere.
🧊 6. Fehlender visueller Fokus
Problem: Keine klare Hierarchie – alles sieht gleich wichtig aus.
Folge: Nutzer wissen nicht, wo sie hinschauen sollen.
🧨 7. Auto-Play von Videos oder Sounds
Problem: Medien starten ungefragt.
Folge: Schreckmoment, besonders in ruhiger Umgebung.
🧮 8. Überladene Formulare
Problem: Zu viele Felder, keine klare Struktur.
Folge: Nutzer brechen ab oder geben falsche Daten ein.
🧯 9. Fehlende Fehlermeldungen
Problem: Bei falscher Eingabe passiert nichts oder die Meldung ist unklar.
Folge: Nutzer wissen nicht, was sie falsch gemacht haben.
🧞 10. Unklare Call-to-Actions
Problem: Buttons wie „Weiter“ oder „Abschließen“ sind nicht eindeutig.
Problem: Desktop-Layout wird einfach auf Mobilgeräte übertragen.
Folge: Scrollen, Zoomen, Chaos.
🧘 13. Zu lange Ladezeiten
Problem: Design ist so schwer, dass die Seite ewig lädt.
Folge: Nutzer springen ab.
🧬 14. Unnötige Registrierung
Problem: Inhalte oder Funktionen sind hinter einem Login versteckt, obwohl es nicht nötig wäre.
Folge: Nutzer geben auf.
🧿 15. Dunkle Muster („Dark Patterns“)
Problem: Design manipuliert Nutzer zu unerwünschten Aktionen (z. B. Abo abschließen).
Folge: Vertrauensverlust.
🧻 16. Keine Rückmeldung bei Aktionen
Problem: Nach Klick passiert nichts sichtbar.
Folge: Nutzer klicken mehrfach oder denken, es sei kaputt.
🧔 17. Zu viele Pop-ups
Problem: Ständige Unterbrechungen durch Hinweise, Newsletter, Cookies etc.
Folge: Genervte Nutzer.
🧞♂️ 18. Unlogische Reihenfolge von Inhalten
Problem: Wichtige Infos sind versteckt, unwichtige stehen oben.
Folge: Nutzer müssen suchen.
🧪 19. Fehlende Barrierefreiheit
Problem: Kein Kontrast, keine Screenreader-Unterstützung, keine Tastatur-Navigation.
Folge: Viele Nutzergruppen werden ausgeschlossen.
🧠 20. Design ohne Nutzerfokus
Problem: Entscheidungen werden aus ästhetischer oder technischer Sicht getroffen – nicht aus Nutzersicht.
Folge: Das Interface sieht gut aus, funktioniert aber schlecht.
Wenn du magst, kann ich dir diese Liste auch als übersichtliche Tabelle oder Checkliste für dein nächstes Projekt aufbereiten. Oder wir machen ein kleines „UX Detox“ für ein konkretes Interface. Sag einfach Bescheid!
Wenn der Designer eine sinnvolle Animation beim Überfahren eines Buttons einbinden möchte, sollte eine Informations-Box dem Nutzer in kurzer und knapper Form die Button-Funktion erklären.
Ein Beispiel für unnötiges Design wäre z. B. das der Button sich beim Überfahren bewegt und dreht.
#4 Reduktion auf das Wesentlichste
12 Reduktion auf das Wesentliche
Die Webseiten von früher waren oft vollgestopft (siehe Amazon-Screenshot von früher). Der Nutzer sollte möglichst viele Informationen auf einer Bildschirmseite wahrnehmen.
Durch die Vielzahl an Informationen und optischen Simulationen kann sich ein Nutzer schnell verloren fühlen. Unübersichtliche Webseiten schrecken viele Nutzer ab, weil diese schwieriger zu bedienen sind. Gutes Design und Struktur soll den Überblick über eine Software wahren und Wichtiges vom Unwichtigen trennen.
Viele neue-gestaltete Webseiten sind viel minimalistischer und zeigen eine begrenzte Anzahl an Worten und Bilder auf einer Bildschirmseite.
Das bedeutet, dass der Software Entwickler, die Design-Elemente auf eine Seite klar und eindeutig entwirft. Die verbleibenden Elemente sollten gut ausgewählt und bewusst designt sein.
#5 Groß = Wichtig
13 Große Elemente
Wichtige Aussagen und Bilder sollten groß und zentral dargestellt sein. Der Fokus des Nutzers soll bei den wichtigsten Elementen haften bleiben:
Google setzt das Prinzip richtig um. Die Suchleiste ist groß und mittig auf der Landingpage dargestellt. „Andere Funktionen“ versteckt Google am Bildschirm-Rand.
Ein anderes Beispiel ist das Überschriften-System in HTML. Solange Du nicht mit CSS diese veränderst, sind H1-Überschrift, die Titel der Webseite. H2 bis H6 sind Unterüberschriften, die mit jeder Stufe kleiner im Text werden.
#6 Gebe Feedback
14 Feedback
Dein Programm soll nicht nur Eingaben des Nutzers annehmen, sondern den Nutzer konkrete Rückmeldung über Erfolg oder Misserfolg der Eingabe geben.
Stell Dir vor Du, füllst ein 1000-Zeilen-Steuererklärung aus. Du sendest das Papier zum Finanzamt und nach 3 Monaten sagt, dass Finanzamt, dass die Unterlagen untergegangen sind. Frustration pur.
Hier ein paar Tipps dem Nutzer gelungenes Feedback zu geben:
Nach dem Eintippen der Daten, sollte Deine Anwendung einen Syntax- und Inhaltscheck durchführen. (Ist der Nutzername bereits vergeben?)
Erstelle einen Wartebalken. Zeige den echten Status des Prozesses und die Wartezeit an, damit der Nutzer sich nicht veräppelt fühlt. Für Computer-Geeks kannst Du die Logs ausgeben lassen, sodass diese die Ursache leichter finden können.
Verwende Push-Benachrichtigen: Wenn der Nutzer auf eine Rückmeldung innerhalb Deiner Anwendung wartet, müsste dieser sich immer wieder einloggen und prüfen, ob neue Nachrichten gekommen sind. Das ständige Einloggen ist umständlich. Bei wichtigen Änderungen soll die Anwendung den Nutzer per Mail oder per Push-Benachrichtigung informieren.
#6 Denke an die professionellen Power-Nutzer
15 Shortcuts
Biete Shortcuts für professionelle Power-Nutzer an, die 8 Stunden am Tag mit Deiner Anwendung arbeiten. Diese sollten möglichst einstellbar sein. Power-Nutzer freuen sich auch über Features wie
Das dauerhafte Überspringen von Einsteiger-Tutorials
Viele Einstellungsmöglichkeiten für die Oberfläche und Funktion des Programms
Eine Erweiterungs-Schnittstelle für z. B. eigene Scripts
Das Abspeichern von Vorlagen
Ein aktives Vorschlagswesen für neue Ideen für Deine Anwendung
Das Anlegen von Macros
Diese Ideen können Power-Nutzer beim Alltag unterstützen. Neulinge können diese Shortcuts und Tricks lernen, um effektiver mit der Software arbeiten zu können.
#7 Konsistenz ist der Held
16 Konsistenz
Achte bei der Gestaltung Deiner Anwendung darauf die gleiche Farbplatte und Schriftarten zu verwenden. Reduziere die Gestaltungsmerkmale und sei konsistent in der Gestaltung und Struktur Deiner Anwendung.
Gleicher (grober) Aufbau auf jeder Seite (z. B. Logo, Menü, Artikel, Kommentare)
Differenziere zwischen normalen Farben und Signalfarben für z. B. den Kauf-Button
Gleiche Elemente gleich benennen und vermeide eine Variation in der Begrifflichkeiten: Speichern, Abspeichern, Save und Sicherung bedeuten dasselbe.
Ähnliche Elemente sollten ähnlich designt sein (z. B. Dialogfenster), damit der Nutzer das Element wiedererkennen kann.
Schreibe einen Kommentar