Neues

Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing

Ahadesign News

scottanderson-designerUser Interface Design ist eine von diversen Disziplinen, die Anwender beim Umgang mit digitalen Produkten unterstützt. UI-Design umfasst das Design für Benutzererfahrung, Interaktionsdesign sowie visuelles und grafisches Design. Der Designer Scott Anderson hat einen interessanten Bericht zum UI-Design verfasst, den wir hier in Kooperation mit Toptal.com in deutscher Sprache wiedergeben.

Was ist UI-Design?

Im weitesten Sinne ist das User Interface der Bereich, in dem Menschen mit Maschinen interagieren. Menschen geben Anweisungen an Maschinen und Maschinen beginnen mit der Ausführung. Die Maschinen liefern dann Informationen und Rückmeldungen zum Menschen, der daraufhin weitere Aufgaben an die Maschine delegieren kann. Die Art der Interaktion zwischen Mensch und Computer hat sich seit Lochkarten und Kommandozeilentext mit den heutigen grafischen Benutzerschnittstellen (GUIs) stark verändert.

xerox-informationsystem

Xerox 8010 Informationssystem von 1981. (DigiBarn, verwendet unter CC BY; Original-Ausschnitt)

User Interface Design beschäftigt sich primär mit dem Layout, der Hierarchie von Informationen und der Beschaffenheit von Interface-Elementen von Software auf Webseiten und mobilen Apps. Das kann auch Video-Spiele und TV-Interfaces beinhalten.

Bei Einhaltung der Prinzipien des User-Centered-Design (UCD), erstellen UI-Designer strukturierte und orientierende Interfaces, um Anwendern eine einfache Möglichkeit zur Nutzung von technischen Lösungen zu geben. Dies erfordert oft Kompromisse, wenn der UI-Designer sich zwischen Funktionalität und oft von einer, der Marke vorgegebenen Ästhetik, entscheiden muss.

b2bdashboard

B2B dashboard UI design, by Miklos Philips

Gutes Interface-Design unterstützt die Nutzung mit klaren konsistenten Layouts und strukturiertem Inhalt und gibt dem Anwender Hinweise zum erfolgreichen Abschluss seiner Aktionen. Dabei verzichtet es auf unnötige Inhalte und Design-Elemente.

Gut gestaltete digitale User Interfaces nutzen visuelle Metaphern, die einen Bezug zur echten Welt haben. Zum Beispiel Schaltflächen, Schieberegler, Rechner, Disc-Icons um Aktionen zu speichern usw.

User Interfaces werden mit unterschiedlichen Element-Typen gestaltet:

  • Eingabe-Kontrollen, welche eine interaktive Komponente in einem UI darstellen. Das geht von Checkboxen über Radio-Buttons bis zu Dropdown-Listen und Textfeldern. So wird es den Anwendern ermöglicht, Auswahlen der angezeigten Optionen zu machen und Text einzugeben.
  • Navigations-Kontrollen, mit denen Anwender ein Ziel wählen oder Daten auf dem Bildschirm ändern können. UI-Elemente beinhalten Dropdown-Menüs, Slider und Scrollbars, Breadcrumbs, Tabs und Paginationen.
  • Informations-Elemente, die eine Rückmeldung an den Benutzer geben. UI-Elemente können Icons, Text und visuellen Inhalt, Fortschrittsbalken und andere Hinweise enthalten.

 

ios-app-uidesign

iOS app UI design, von Thrive

Effektive UI-Designer nutzen Verfahren, Konventionen, Standards und grundlegende Tauglichkeits-Prinzipien. Damit wird die optimale Nutzbarkeit des Interfaces sichergestellt. Die wichtigsten Prinzipien sind:

  • Konsistenz in der Nutzung und Wiederverwendung von gemeinsamen Interface-Elementen, um dem Anwender einen komfortablen Umgang zu ermöglichen und ihn nicht zu verwirren.
  • Seiten- und Bildschirmstruktur mit einer klaren Element-Hierarchie, bei der die wichtigsten Teile für den Anwender sofort ersichtlich sind.
  • Verwendung von Farben und Typografie, um wichtige Elemente klar hervorzuheben.
  • Eine gute Kommunikation und Rückmeldung, um den Anwender über Status-Änderungen, Fehler oder Bestätigungen von Aktionen zu informieren. So sieht der Nutzer, wie das System reagiert und er kann viel einfacher entsprechende Eingaben machen und reagieren.
  • Das Verständnis über die Vorlieben des Anwenders und seine Prioritäten, um übliche Aktionen einfach zu ermöglichen.
  • Reduktion der Komplexität und gute Nutzung des Platzes für das Interface, um Nutzer nicht unnötig zu belasten bzw. zu überfordern und ein einfaches und intuitives Vorgehen zu ermöglichen.

 

uidesign-pflanzenapp

UI design für eine Pflanzenbewässerungs-App, von Tubik

Der Unterschied zwischen UI und UX

User Interface Design wird oft mit User Experience Design verwechselt. Auch wenn sich beide Bereiche oftmals überschneiden, gibt es doch für jede Design-Art ganz bestimmte Anforderungen. Ein User Experience Designer kümmert sich um die komplette Struktur und Funktion einer Website oder einer Applikation und darum, wie sich ein Produkt für den Anwender anfühlt und funktioniert.

Der UX-Designer arbeitet als Informations-Architekt, um Inhalte zu organisieren. Er berücksichtigt Benutzeranfragen und erarbeitet genaue Abläufe und Geschäftsanalysen, um komplexe Operationen wie zum Beispiel den Kaufabschluss beim eCommerce, das Anlegen eines Kontos usw. optimal zu gestalten. UX-Designer entwickeln dann User-Flows, Customer Journey Maps, grobe Drahtgitter-Diagramme und interaktive Prototypen, um zu testen und zu überprüfen und die Konzepte durch Benutzertests zu verfeinern.

applewatch

Apple Watch Wireframe Animation (UX design von Alex Dovhyi)

UI vs. UX

Das Interface ist nicht die Lösung. UI-Design spielt generell eine wichtige Rolle bei der Arbeit eines UX-Designers, aber es ist nicht der einzige Teil. Das bedeutet, UX-Design ist das Konsumierbare und UI ist das Werkzeug, mit dem konsumiert wird.

UX-Design ist ein strategischer Design-Prozess für ein Produkt oder eine Seite in mehreren Schritten, welcher letztlich dem Anwender eine einfache und unkomplizierte Bedienung ermöglicht. Die richtige User-Interface-Lösung wird also durch den UX-Design-Prozess erreicht.

uxui-unterschied

Der Unterschied zwischen UI und UX (Illustration von Shane Rounce)

Was machen UI-Designer?

User Interface Designer verwenden UX-Design, um Produkte näher an die finale Form zu bringen. Für die Hierarchie und Priorität von Elementen auf jedem Bildschirm, folgen sie UX-Wireframes und wenden visuelle Design-Richtlinien mit Interaktions-Design an, um einen konsistenten Ablauf für den Anwender zu erreichen.

ecommerce-uidesign

eCommerce UI-Design Store Konzept von Remco Bakker

UI-Designer sind verantwortlich für die visuelle Hierarchie, Layout, Platz und Ausrichtung auf dem Bildschirm, visuelle Gewichtung von Headern und Typografie, der korrekten Verwendung von standardisierten Interface-Elementen wie Buttons und Formularfeldern und der Einhaltung von Markenrichtlinien für Farben, Anwendungen und Logos.

Moderne User-Interfaces sind nicht einfach statische Bildschirme, sondern interaktive Elemente mit dynamischen Verhalten und animierten Übergängen. Deshalb müssen UI-Designer für das Verfeinern der von UX-Designern entwickelten Konzepte mit Motion-Designern und Interaktions-Designern zusammenarbeiten.

User Interface Design kann auch die Visualisierung von Daten und Informationsdesign beinhalten, welches Nutzer vereinfacht durch komplexe Daten-Darstellungen führt.

ecommerce-uidesign-juwelier

Juweliergeschäft eCommerce UI Design Konzept von Tubik

User Interface Designer liefern die finalen visuellen Mock-Ups einer jeden Webseite oder Applikation für die Entwickler des Endprodukts. Genauso wie UI-Design manchmal mit UX-Design überlappt, kann UI-Design auch mit der aktuellen Front-End-Entwicklung eines digitalen Produkts zusammenkommen.

Für eine gute Effizienz und Benutzererfahrung werden die Methoden der Interaktion immer ausgefeilter. In der heutigen Welt wird User-Interface-Design immer wichtiger. In den nächsten Jahrzehnten wird UI-Design neben zweidimensionalen Bildschirmen auch in der 3D-Welt der virtuellen Realität eine Rolle spielen.

Ungeachtet der Technologien, Bildschirmen, Plätzen und Umgebungen, wird UI-Design stets die Interaktion des Nutzers zwischen Mensch und Maschine so gut wie möglich unterstützen.

Kommentar schreiben