Ein gutes User Interface führt zu einer angenehmen User Experience – und wiederkehrenden Kunden!

Wie ein gutes UI und UX einer Webseite aussehen sollten

Stellen Sie sich einmal vor, Sie machen heute einen Kurztrip und alles geht glatt: Sie kommen am Bahnhof an, der Zug wartet schon, und kaum sind Sie angekommen, scheint die Sonne und in einem Café in der Stadt ist gerade ein Platz für Sie frei geworden.

Die Bedienung ist freundlich, der Tisch super sauber, und die Speisekarte übersichtlich und ansprechend. Und ohne lange zu warten, steht auch schon ein Cappuccino vor Ihnen. Wenn Sie hingegen eine ganz andere Erfahrung machen, nämlich mit unfreundlichem Servicepersonal, langen Wartezeiten, unsauberen Tischen, und dann wird auch noch etwas Falsches geliefert – dann werden Sie dieses Café sicherlich nicht noch einmal besuchen!

„Ein gutes UI macht die UX auf Ihrer Webseite angenehm und easy!“

So in etwa könnten wir uns ein gutes UI und UX einer Webseite vorstellen. Beides wird womöglich im ersten Schritt kaum wahrgenommen, aber sie machen die Reise auf Ihrer Webseite angenehm und leicht: Es gibt eine gute Führung von Seite zu Seite, alle Seiten sind leicht auffindbar und die Ladezeiten passen. Dann können Sie davon ausgehen, dass viele Nutzer sicherlich wieder gerne auf Ihrer Webseite vorbeischauen!

Wichtig für jedes Projekt: User Interface und User Experience

Bei Ihren Projekten werden Ihnen immer wieder zwei Begriffe über den Weg laufen: UI und UX – also User Interface und User Experience.

Um einmal kurz den Unterschied zu erklären: Der Begriff UI bezeichnet die Benutzeroberfläche, oder die Benutzerschnittstelle, die es ermöglichen soll, dass der Benutzer die Anwendung überhaupt erst bedienen kann. Hier gibt es nicht die eine Regel, die besagt, wie eine Oberfläche ganz konkret auszusehen hat, aber im Laufe der Zeit haben sich ein paar Regeln etabliert, die sehr, sehr sinnvoll sind, und die man im Konzept und Design berücksichtigen sollte.

„Warum Sie UI und UX in Ihren Projekten immer berücksichtigen sollten!“

Der Begriff UX hingegen beschreibt vielmehr die allgemeine Benutzererfahrung oder das Erlebnis, das der User erfährt, wenn er mit Produkten, Webseiten, Apps, oder Diensten interagiert. Und diese Benutzererfahrung findet immer statt – bewusst oder unbewusst! Deshalb sollten Sie diese beiden Themen in Ihren Projekten immer berücksichtigen! Um so dem User etwas anzubieten, das auf der einen Seite leicht bedienbar ist und gleichzeitig auf der anderen Seite eine schöne Erfahrung hinterlässt.

Was bedeutet UI ganz konkret für ein Projekt

Wir haben im vorigen Video kurz angerissen, was der Begriff UI ganz allgemein bedeutet. Aber was heißt das ganz konkret?

Wann ist ein UI – also die Benutzeroberfläche – gut, und wann ist es schlecht? Aus der Sicht des Designers stellen sich dabei erst einmal folgende Fragen: Wie möchte man ganz allgemein auftreten? Dezent, oder laut? Informativ, oder plakativ? Welches Farbschema macht für die Anwendung Sinn? Hintergrundfarbe, Primärfarbe, Sekundärfarbe, oder Schriftfarbe, und so weiter. Welche Schriftarten und Schriftschnitte machen Sinn? Wie wähle ich beispielsweise den grundsätzlichen Aufbau und die Einteilung der Webseite? Und wie werden zusammengehörige Informationen gut strukturiert? Zum Beispiel im Hauptmenü oder Contentbereich. Funktioniert das Layout sowohl auf großen als auch kleinen Screens?

„Bei einem guten UI sind alle Elemente selbsterklärend, konsistent und durchdacht!“

Dieser Aspekt ist bei komplexen Datenanwendungen oft ein Kernthema. Bei all diesen Fragen ist es außerdem sehr wichtig, dass alle Elemente beziehungsweise Komponenten selbsterklärend, konsistent und durchdacht sind.

Was macht eine gute User Experience aus?

Wie bei vielem anderen gilt auch bei der User Experience: Erst wenn etwas nicht so funktioniert wie erwartet, dann bleiben diese negativen Erlebnisse im Gedächtnis hängen und hindern möglicherweise einen User daran, gerne wieder zur Seite zurückzukehren.

Das bedeutet deshalb, dass der User darauf vertrauen können soll, dass eine Webseite sich so verhält und funktioniert, wie er es erwartet. Die wichtigsten Punkte, die man daher beachten sollte, sind: Auf jeden Fall eine ganz klare Menüstruktur, kurze Wege zu den Inhalten, kurze Ladezeiten, ein übersichtlicher und strukturierter Contentbereich, funktionierende Verlinkungen und gegebenenfalls auch ein zügiger Support.

„Eine gute User Experience bleibt in Erinnerung“

Außerdem macht es Sinn, über unterstützende Animationen nachzudenken und schön aufbereitete Bild- und Videomaterialien, angenehme Farbkombinationen sowie ansprechende typographische Elemente anzubieten. Das alles bleibt dann positiv in Erinnerung. Bedenkt also bei Euren Projekten, diese Aspekte immer zu berücksichtigen, um bei Euren Website-Besuchern eine möglichst positive Erfahrung zu hinterlassen.

Warum es wesentlich ist, seine Zielgruppe zu kennen.

Seine Zielgruppe zu kennen, ist eine ganz, ganz wesentliche Voraussetzung im kompletten Konzeptions- und Designprozess.

Viele Entscheidungen werden sich nach den Erkenntnissen über die eigene Zielgruppe richten. Denn wenn Ihr Euer Produkt an der Zielgruppe vorbei entwickelt, dann kann das natürlich den erwarteten Impact deutlich abschwächen!

„Sammeln Sie Erfahrungswerte durch Usability-Tests!“

Dabei ist es außerdem wichtig, sich nicht nur auf die eigens entwickelten Personas oder Userstories zu verlassen, sondern auch reale Erfahrungswerte und Kenntnisse aus den verschiedenen Usability-Tests heranzuziehen. Um bereits früh im Design-Prozess einlenken zu können, ist es zum Beispiel auch möglich, anhand von klickbaren Prototypen Erfahrungswerte zu sammeln, um diese dann direkt im Anschluss in die Layouts einfließen zu lassen.

Denken Sie außerdem immer daran, dass ein Design aus den genannten Gründen auch nicht in Stein gemeißelt sein darf. Natürlich wird man das Design nicht komplett über den Haufen werfen, aber es kann durchaus Sinn machen, an den ein oder anderen Stellschrauben zu drehen, um Barrieren und Hürden, die in den Usertests deutlich geworden sind, abzubauen oder komplett zu eliminieren.

Form follows function

Je nachdem, welche Art von Webapplikation Sie entwickeln möchten, muss natürlich das Design entsprechend berücksichtigt werden.

Wenn wir zum Beispiel an eine Brand-Webseite denken, stehen hier die Vorstellung der eigenen Marke und auch möglicherweise die Produkte im Fokus. Dementsprechend ausgewogen müssen wir uns zwischen emotionalem Design und Produktinfos bewegen.

Wollen wir allerdings eine Produktneuheit über ein Webspecial kommunizieren, können wir den Fokus viel, viel stärker auf Effekte, großflächige Bilder und auch Videos und kurzgehaltene Marketingtexte legen.

„Ein sauberes und sinnvolles Design richtet sich nach den vorliegenden Daten.“

Haben wir allerdings eine Datenbankanwendung mit ganz, ganz komplexen Tabellen und Strukturen, ist es absolut notwendig, den Fokus voll auf die Pflegbarkeit von Attributen, Werten, Benutzerrollen, Rechten, und so weiter zu legen. Hier hat sich der Begriff „form follows function“ etabliert – die Form folgt also der Funktion. Es ist absolut wichtig, schon beim Design zu wissen, wie die Daten und Informationen vorliegen, um später ein sauberes und sinnvolles Design zu entwickeln.

Die Bedeutung von Styleguides

In unseren Projekten haben wir sehr häufig mit Kunden-Styleguides zu tun, die auf verschiedene Anwendungen angewendet werden müssen.

Styleguides sind, ganz allgemein formuliert, Designrichtlinien, die gedruckt oder digital vorliegen und darauf ausgelegt sind, die Vorgaben des Erscheinungsbildes einer Marke oder eines Produktes zu definieren. Im Kern werden hier die Fragen behandelt, die wir auch schon in den vorigen Videos erörtert haben. Je größer ein Unternehmen ist, desto sinnvoller ist ein Styleguide.

„Im Idealfall definiert ein Styleguide alle relevanten Gestaltungsrichtlinien.“

Im Idealfall definiert ein Styleguide alle relevanten Gestaltungsrichtlinien wie zum Beispiel markenrelevante Themen wie Logo, Farbschema, Typographie, Bildstil oder das Aussehen von Icons. Aber auch detaillierte Vorgaben zu Websites, Apps, Printmaterialien, Messeständen, und so weiter. Wägen Sie also in Ihrem speziellen Fall immer ab, ob Sie einen Styleguide benötigen, und wenn ja, wie umfangreich dieser werden soll, damit Sie trotzdem noch flexibel genug in neue Projekte starten können.

Eine gute User Experience wird von Suchmaschinen belohnt!

Bei Google steht der Nutzer an erster Stelle und deshalb belohnen Suchmaschinen Webseiten mit einer guten User Experience mit einem entsprechend guten Ranking.

Wenn es früher gereicht hat, Metatags zu verwenden und Überschriften und Texte anzupassen, dann ist es heute heute notwendig, die gesamte UX mit einzubeziehen.

„Eine gute Nutzerführung führt zu glücklichen Usern und einem guten Ranking.“

Denken Sie dabei immer an einfache Seitenstrukturen und gute Navigationen! Priorisieren Sie schnelle Ladezeiten Ihrer Webseite – sie gelten als einer der wichtigsten Punkte beim Google-Ranking! Stellen Sie Schrift- und Interaktionselemente ausreichend groß und lesbar dar und optimieren Sie unbedingt die Bildgrößen.

Stellen Sie außerdem relevante und attraktive Inhalte bereit und optimieren Sie die Seite verstärkt für mobile Endgeräte. Eine einfache und klare Nutzerführung macht also nicht nur Ihre User glücklich und führt zu guten Konversionsraten, sondern ermöglicht auch gutes Ranking in den Suchergebnissen!

Wie Sie dem Nutzer ein angenehmes UX bieten

Wenn wir hier im Unternehmen ein Projekt umsetzen, wie beispielsweise eine Anwendung zur Verwaltung Ihrer Daten dann wollen wir natürlich dem Nutzer unter allen Umständen ein angenehmes UX bieten. Das können Anwendungen sein wie ein PIM oder ein MAM, oder oder ein Flyertool zum Generieren von Printmedien, eine mehrsprachige Webseite, und so weiter.

Selbst wenn hinter der Seite eine komplexe Anwendung steht, wollen wir die Barrieren zwischen dem Anwender und der Seite so weit wie möglich herunterfahren! Der User soll verstehen, wie man zum Beispiel ganz leicht ein Printdokument generieren kann. Er soll auf der Webseite den schnellsten Weg zum gewünschten Produkt und zum Warenkorb finden.

„Wir unterstützen unsere Kunden auf dem kompletten Weg vom Design bis zur Umsetzung“

Wir machen es dem User leicht, damit er findet, was er sucht – auch in einer komplexen Datenanwendung! Dabei haben wir Ihre Unternehmenskultur im Blick, Ihre Anwendungen, Produkte und Dienstleistungen. Und so unterstützen wir unsere Kunden auf dem kompletten Weg vom Design bis zur Umsetzung.

Was macht ein gutes Zusammenspiel von UX und UI aus?

Fassen wir also noch einmal zusammen, was ein gutes Zusammenspiel von UX und UI auf einer Webseite ausmacht.

Erstens, der "Look": Die Seite ist so gestaltet, dass Besucher dort abgeholt werden, wo sie gerade stehen. So, dass sie Vertrauen fassen können und transportiert wird, um welches Produkt oder um welche Dienstleistung es sich handelt.

„Look, Feel, Form follows function, Teamwork – so funktionieren gute UX und UI.“

"Feel": Ziel ist es, dass sich der Besucher wohlfühlt und Freude an der Interaktion mit der Seite hat. Die "Erwartung": Der User bekommt auf der Seite die Information, die er sucht. Das bedeutet aber, dass wir ihn gut kennen sollten, um zu wissen, wonach gesucht und was erwartet wird. "Form follows function": Das Design orientiert sich am Zweck der Anwendung und ordnet sich diesem entsprechend unter. Und zu guter Letzt "Teamwork": Für eine optimale Benutzererfahrung machen Researcher die Vorarbeit – Designer, Entwickler, Businessanalysten, Tester, Contentstrategen und andere arbeiten aber immer eng zusammen.

Und jetzt wünschen wir viel Erfolg und freuen uns über Eure Erfahrungen oder auch Fragen in den Kommentaren!