User Interface Design (UI)

Im User Interface Design wird die Bedienoberfläche - das "User Interface" - einer digitalen Anwendung, einer Website oder eines eShops grafisch ausgestaltet. Das UI-Design konkretisiert die Anforderungen an eine spätere Umsetzung und stellt sicher, dass für den User eine attraktive Umgebung entsteht.

Design der Seitentypen und Content-Elemente

Ausgehend von der Corporate Identity des Unternehmens und der User Experience Konzeption (UX) entstehen im Rahmen des User Interface Designs Layouts aller erforderlichen Seitentypen. Auch geplante Content-Elemente werden im Interface Design berücksichtigt. Dies können zum Beispiel Standard Elemente wie Text, Headlines, Links, Buttons, Bühnen, Slider, Teaser oder ein Akkordeon sein. Darüber hinaus sind in nahezu jedem Projekt auch individuelle Content-Elemente erforderlich, die im User Interface ausgestaltet werden, wie zum Beispiel individuelle Icons, Infografiken, Illustrationen oder weitere Elemente, die im Inhaltsbereich der Seiten platziert werden können.

Als Ergebnisse aus dem Graphical User Interface Design resultieren neben dem eigentlichen Design für die Umsetzung des UI Maße, Farbwerte, Schriftschnitte, Abstände, Überschriften sowie die Style-Vorgaben für die erforderlichen Seiten-Templates und Content-Elemente.

Formulardesign

Die meisten Online-Angebote haben klare Conversion-Ziele. Dies kann zum Beispiel der Kauf eines Produktes, die Kontaktaufnahme oder der Download von Dokumenten sein. Im UI gilt es also die Interaction des Nutzers so zu gestalten, dass diese Conversion-Ziele möglichst effizient erreicht werden. Eine große Rolle im Design spielen dabei Formulare. Im Formulardesign stellen unsere User Interface Designer sicher, dass die grundsätzlichen Regeln für Formulare eingehalten werden und so eine möglichst gute Orientierung des Nutzers sichergestellt ist. Hierbei werden zum Beispiel Eingabefelder möglichst untereinander angeordnet, so dass der Blick des Users einer klaren Linie folgen und das Formular rasch erfassen kann. Um das Formular platzsparend zu gestalten, sollten die Länge der Eingabefelder an den einzugebenden Inhalt angepasst werden. Das Postleitzahl-Feld nimmt zum Bespiel lediglich einen Bruchteil des Feldes für die E-Mail Adresse ein. Werden ähnliche oder zusammengehörende Eingabefelder in Blöcken zusammengefasst und mit Überschriften versehen, erzeugt dies eine gute Übersicht. Um eine rasche Erfassung von Fehlermeldungen zu ermöglichen, ist es sinnvoll diese direkt am Eingabefeld anzuzeigen und in Signalfarbe zu kennzeichnen. Eine auffällige Darstellung des abschließenden Buttons mit eindeutiger Betitelung (Call to Action) stellt zudem sicher, dass den Nutzer eine klare Handlungsaufforderung ereicht.

Bildsprache

Um im UI eines Webauftritts Emotionalität zu erzeugen, finden oft Fotografien oder andere Bildmaterialien Verwendung. Ein Bild wirkt zum einen durch den abgebildeten Inhalt und zum anderen durch die formale Gestaltung. Um fotografisch und inhaltlich wiedererkennbar zu sein, sollten diese Bilder als wichtige UI-Elemente möglichst einheitlich und konsequent eingesetzt werden, so dass sie eine gemeinsame Botschaft senden. Hierzu definieren wir im Vorfeld eine geeignete Bildsprache und eine BIldstrategie. Neben dem geschriebenen Text ist diese Bildsprache eine weitere entscheidende Kommunikationsform zur Vermittlung von Inhalten. Die im UI eingesetzten Bilder entstammen dann einer Bilderserie, die eine gemeinsame Geschichte erzählt. Eine Geschichte, die verstanden wird.

Design Styleguide

Alle Ergebnisse aus dem User Interface Design münden in einem Design Styleguide. Alle Screendesigns und weiteren Designelemente, Vermaßungen, Typographieregeln und das Verhalten von Objekten werden im Design Styleguide dokumentiert. Der Styleguide legt fest, wie das Unternehmenslogo und weitere Gestaötungselemente in der Öffentlichkeit eingesetzt werden dürfen.Darüber hianus wird die Verwendung von Bildern konkretisiert.
Das Dokument dient Mitarbeitern, Kunden oder Partnern eines Unternehmens dazu, die Corporate Identity des Unternehmens bei der Gestaltung von Kommunikationsmitteln einzuhalten. Der Design Styleguide sorgt also für ein einheitliches Erscheinungsbild.

Hat das UI Design Einfluss auf die Performance?

Ja. Die Interface Designer beeinflussen mit ihrer Arbeit indirekt die Performance eines digitalen Tools oder Systems. Hierbei unterscheiden wir zwischen der tatsächlichen Performance und der wahrgenommenen Performance. Die tatsächliche Performance kann z.B. durch einen Performance-Check gemessen werden. Sie meint die Ladezeit einer Seite, also wie schnell eine Webseite korrekt gerendert wird und auf Userinput reagiert. Darüber hinaus sollte man sich auch mit der wahrgenommenen Performance befassen. Hierbei wird dem User durch geeignete Feedbacks während des Ladens von Inhalten das Gefühl von Geschwindigkeit vermittelt. Vor allem flüssige Animationen unterstützen diesen Eindruck geschickt.