Die Webseite nutzt nur technisch notwendige Cookies.
Menüs
8 TOP Tipps für das optimale User Interface Design [+ Beispiele]
8 User Interface Hacks Coding Lab Steffen Lippke Tutorials und Guides
Was ist gutes Design?
Was ist gutes / schlechtes Design?
Wieso beschäftige ich mich Design?
Diese Fragen möchte ich Dir in diesem universellen User Interface zweiteilige Gestaltungs-GUIDE klären. Dieser Guide soll Dir nicht korrektes Material– oder Apple-Design beibringen, sondern zeigen, wie Du ein funktional-designtes User-Interface umsetzen kannst.
Der Endnutzer möchte Feedback zu seinen Eingaben bekommen.
10 Thesen für gute Design – Vorreiter Dieter Rams
Dieter Rams entwarf das Außendesign für Möbel und technische Geräte wie Radios, Mixern und Taschenrechner für Vitsoe und Braun. Er ist heute bekannt als der Design-Papst, der 10 Thesen für gutes Design aufgestellt hat.
Seine Arbeiten zeichnet sich durch seine Zeitlosigkeit, Funktionalität, Langlebigkeit und Einfachheit aus. Die Stücke bezeichne ich noch „stylisch“ und modern, obwohl sie ein paar Jahre alt sind.
Was hat ein Radio mit User-Interface zu tun?
Eine ganze Menge! Der An-Aus-Schalter am Radio entspricht einen Button auf Webseiten. Schieberegler am Radio sind die Slider für Preis und Features bei Shopping-Webseiten.
Ich versuche die Konzepte von Dieter Rams auf das Design von Software im Computer zu übertragen. Egal ob Du ein physisches Produkt designst oder eine digitale Oberfläche konzeptionierst, die Kriterien und Regeln sind die gleichen.
8 praktische Tipps für besseres UI
#1 Gutes Design macht eine Software brauchbar
01 Brauchbar
Ein gutes User Interface soll in erster Linie dazu dienen, die Software bedienbar zu machen.
Die Buttons sollten nicht außerhalb des Fensters liegen oder winzig klein sein. Ausgefallene Konzepte, verrückte Farbprofile und coole Fonts machen keine Software besser.
#2 Gebe visuelle Unterstützung mit Deinem Design
02 Unterstützung
Mit CSS, JavaScript und Icons kann ein Entwickler verschieden Eingaben-Hilfen umsetzen. Z. B. beim Ausfüllen von Formularen kann visuelles Feedback dem Nutzer sofort helfen.
Statusanzeigen, Diagramme, strukturierte und visuelle aufbereitete Berichte, farbliche Vorhebungen in Texten und Grafiken liebt das Auge des Nutzers.
Designen soll nicht ein „Unternehmens-Design“ umsetzen, sondern die Funktion der Software unterstützen.
#3 Schaffe Barrierefreiheit nicht nur im realen Leben
03 Barrierefreiheit
Mit Barrierefreiheit verbinden die meisten Rampen und Aufzüge in Neubauten.
Software kann Barrieren haben wie Gebäuden. Das Bild unten zeigt einen Login, der mit Rot ein falsch eingegeben Mail-Adresse hervorhebt.
Der Entwickler hat den Tipp 2 befolgt und dem Nutzer visuelle Unterstützung gegeben. Dieser rote Rahmen erkennt eine Person mit Rot-Grün-Schwache nicht. Der Rahmen wirkt für einen solchen Betrachter Orange, obwohl der Bildschirm Rot oder Grün anzeigt.
Barriere
Lösung
Farbenblindheit
Eindeutige nicht fehl-interpretierbare Icons (Check Mark und Kreuz)
Sprache
Mehrsprachige Übersetzungspakete verwenden
Keine Maus
Mit dem Tabulator sind alle Elemente erreichbar
Sehschwäche
Skalierbarkeit der Anwendung mit StRG + Plus
Betriebssystem
Als Codebasis Java- / C-Programme oder Electron Apps
Idioten-Hirn
Abfangen von ungewollten Fehler mit Error-Exception und Warnungen
#4 Verwirre den Nutzer nicht – Interface Design Beispiele
04 Kritallklare Fehlermeldungen
Bestimmst, hast Du bei Programmen solche Fehlermeldung gelesen:
„Entschuldigung. Es ist ein Fehler aufgetreten.“
„Erorr“
„Nicht gefunden!“
„0x202342534 Fehler aufgetreten.“
Die vier Fehler haben gemeinsam, dass keiner von diesem dem Nutzer weiterhilft. Dieser fragt sich stattdessen …
„Sind meine Daten jetzt gelöscht?“
„Was soll ich tun?“
„Gibt es noch andere Software auf dem Markt?“
Sei kristallklar, spezifisch und Problem bezogen bei den Fehler-Meldungstexten!
Sage, welches Fehlverhalten des Nutzers zu einem Fehler geführt hat.
Gebe dem Nutzer genaue Anweisungen den Fehler zu beheben.
#5 Sichere Änderungen + Schütz die Arbeit Deiner Nutzer
05 Sichere Änderungen
Wenn der Nutzer…
unabsichtlich ein Programmierer schließt
ein Handwerker das Internetkabel kappt
Windows sich vor Dir verabschiedet
Deine Katze über die Tastatur läuft
… muss das Programm alle relevanten Änderungen erhalten können. Mit Revisionen soll der Nutzer mit StRG + Z einen alten Stand wiederherstellen können.
Aktivere eine AutoSave-Funktion, selbst wenn den Nutzer die Funktion nicht aktiv angeschaltet hat. Nach einem Stromausfall freut sich der Nutzer, wenn seine letzten 1000 Wörter durch die AutoSave-Funktion gerettet sind.
Eine Historie von Änderungen sollte zu jedem Programm dazugehören. Der Nutzer soll Fehler rückgängig machen können, sodass er zu einem älteren Stand zurückspringen kann. Heutzutage haben wir genügend Festplattenspeicher.
#6 Nutze lesbare Farben mit großen Abständen. Ein Beispiel
Enge angeordnete Elemente, kleine Schriftgrößen und Mini-Bilder mache eine Anwendung unübersichtlich.
Verwende weniger Elemente, die Du auf einer Ansicht anzeigen willst
Nutze lesbare Farbkontraste für den Text
Wähle lesbare Schriftarten aus (kein Gekrakel)
Nutze Abstände zwischen Objekten und Gruppen
Gruppiere zusammengehörende Elemente optisch (Rahmen, Abstand)
Verwende Signalfarben nur für Wichtiges: Kauf-Button
Wichtige Texte erkennt der Nutzer an großer Schrift und starken Kontraste. Unwichtiges steht am Rand mit geringer Schriftgröße und Kontrast.
#7 Gutes Design macht ein Produkt verständlich
07 Verständlich
Intuitiv was ist das? Bei intuitiver Software kann der Nutzer …
… die Software ohne Vorwissen
… mühelos bedienen und ohne Nachdenken
… braucht weniger Grips
…kann die Software effizient
…braucht keine fortgeschrittenen
Die Komplexität und Funktionsumfang einer Software schließt, verhindert die Intuitivität von Software. Je mehr Funktion eine Software abdeckt, desto schwerer können UX-Designer eine intuitive Software-Oberfläche konzeptionieren.
Grundsätzlich sollte jede Software die zentralen und häufig verwendeten Funktionen intuitiv gestalten. Die „seltenen“ Funktionen der Software können weniger intuitiv sein. Diese können die Hersteller in einer Anleitung beschrieben.
#8 Verwende Icons und Symbole – User Interface Design
08 Icons User Interface
Symbole und Icons zeigen Gegenstände aus der realen Welt.
Icons sind Verbildlichungen (Metaphern) der Realität.
Je nach Unternehmen nutzen diese Ihre eigenes Icon Design. Die Konsistenz innerhalb einer Icon-Palette ist zentral. Sonst sie diese wie zusammengewürfelt aus.
Quellenangabe Bilder: Icons und SVG-Grafiken im Titelbild von Microsoft PowerPoint 2019, frei verfügbar nach EULA *) Mit dem Abonnement des Newsletters erklären Sie sich mit der Analyse des Newsletters durch individuelle Messung, Speicherung und Analyse von Öffnungsraten und der Klickraten in Profilen zu Zwecken der Gestaltung künftig besserer Newsletter einverstanden. Sie können die Einwilligung in den Empfang des Newsletters und die Messung mit Wirkung für die Zukunft widerrufen. Mehr in der Datenschutzerklärung.
