8 TOP Tipps für das optimale User Interface Design [+ Beispiele]

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.

3 Gründe, warum Design für jede Software wichtig ist

Gutes Design leistet einen entscheidenden Beitrag:

• Der Endnutzer möchte keine Software bedienen, die schwierig zu bedienen ist und nur mit Jahren an Einarbeitung verständlich ist (SAP)
• Der Endnutzer möchte einfach alle Funktionen schnell und einfach erreichen
• 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

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

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.

Hier gilt: Weniger sind mehr. Reduziere die Komplexität.

#3 Schaffe Barrierefreiheit nicht nur im realen Leben

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.

#4 Verwirre den Nutzer nicht – Interface Design Beispiele

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.
• Helfe dem Nutzer sein Fehlverhalten zu verstehen.
• Gestehe Programmierfehler und Server-Downs ein.

#5 Sichere Änderungen + Schütz die Arbeit Deiner Nutzer

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

Übersichtlichkeit siegt.

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

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

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.

Bildquellen

• https://www.mongodb.com/download-center
• https://www.gimp-werkstatt.de/forum/ucp.php?mode=register
• https://de.todoist.com/Users/showLogin
• https://de.wikipedia.org/w/index.php?title=Spezial:Anmelden&returnto=Wikipedia:Hauptseite
• http://www.amazon.com/exec/obidos/subst/home/home.html
• https://www.idealo.co.uk/
• http://www.amazon.com/exec/obidos/tg/detail/-/B0000WZWSI?v=glance
• https://www.hihonor.com/de/product/10049830047391.html
• https://www.google.de/
• https://de.todoist.com/
• http://javaeditor.org/doku.php