Cookies haben einen schlechten Ruf, dabei sind sie eigentlich ganz cool: Einige machen diese Website überhaupt erst nutzbar. Andere sorgen dafür, dass wir anonym nachvollziehen können, wie unsere Seite genutzt wird und wie wir sie für euch optimieren können.

Lieblings-Website – Über UI, Usability & User Experience

Wie deine Website nicht nur nutzbar, sondern auch erlebbar wird.
19. Mai 2020 | DIGITAL |
Tipps & Tricks , Webentwicklung

Egal, wo Du dich gerade im Netz bewegst, wenn du dich etwas mit Werbung oder Marketing auseinandersetzt, stolpert man über Begriffe wie User Experience oder User Interfaces. Für die einen sind das gängige Begriffe, bei anderen kommt ein großes Fragezeichen auf.

UI, Usability, UX – bitte was!?

Die Begrifflichkeiten klingen ähnlich, werden meistens in einem Zusammenhang genannt, sind aber nicht gleich zu setzen. Sie gehen Hand in Hand, sagen aber unterschiedliche Sachen aus. So spielen das User Interface (UI), die Usability und die User Experience (UX) zusammen:

UI, was für ein schönes User Interface!

Am Anfang steht das UI. Auch bekannt als User Interface oder Benutzeroberfläche. Es beschreibt die Oberfläche, mit der der Nutzer in Kontakt kommt, wenn er dein Produkt nutzen möchte. Darunter fallen alle Elemente, die dazu beitragen, den Screen mit Leben zu füllen, wie Buttons und Grafiken, Texte und Icons. Mittlerweile ist es aber so, dass auch Voice Interfaces zum User Interface zählen – also Systeme wie Google Assistant, Alexa und Siri. 

Das UI bedient sich jahrelanger Erfahrungen und Testings im Bereich des Web- und App Designs. Es gibt mittlerweile sogar ganze Leitfaden (beispielsweise Google Material), die einem sagen, wie man optimale User Interfaces für eine bestmögliche User Experience bauen kann. Diese orientieren sich an den Gewohnheiten der Nutzer und zielt auf eine optimale Usability ab. Aber wir wollen nicht vorgreifen: 

Usability – Websites nutzbar machen

Die Usability mag im ersten Moment das gleiche wie User Experience bedeuten, das stimmt aber nur bedingt. Sie beschreibt die Gebrauchstauglichkeit einer Website. 

Vorgabe für die Usability ist eine ISO-Norm, die besagt, dass ein System drei Leitkriterien folgen muss: Effektivität zur Lösung einer Aufgabe, Effizienz der Handhabung des Systems und die Zufriedenstellung der Nutzer einer Software. Dabei muss deine Zielgruppe bekannt sein und im Fokus stehen. Denn was zum Beispiel für einen Programmierer eine intuitive Website ist, darf für den Café-Besitzer zu kompliziert sein.

Eine gute Nutzererfahrung lebt davon, dass der Nutzer alles das, was er sucht, auch sofort findet. Ist das nicht der Fall, dann klickt er die Seite weg. Wenn ein Nutzer die Seite verlässt, weil er Kontaktinformationen nicht finden oder eine Bestellung nicht abschließen konnte, dann ist das schlichtweg katastrophal. 

Es gibt aber auch noch andere Umstände, in denen Seiten wieder geschlossen werden: Wie häufig hast Du schon eine Seite verlassen, weil Du beispielsweise eine Website mit dem Smartphone geöffnet hast und diese mit zwei Fingern zoomen musstest, um die Inhalte lesen zu können? Sicherlich schon häufiger. Ein Szenario, das man vermeiden möchte. Websites müssen unbedingt responsiv sein, damit sie sowohl am Desktop, als auch auf dem Smartphone nutzerfreundlich sind. Hübsch auszusehen reicht nämlich nicht: Deine Seite sollte praktisch und auf den User und seine Interessen zugeschnitten sein.

UX – User Experience

Das Wort User Experience wird nicht selten Synonym mit Usability verwendet. Das liegt daran, dass die Usability einen Großteil der User Experience ausmacht. Sie geht aber noch darüber hinaus. Im Gegensatz zum Gebrauchstauglichkeit geht es hier um die Nutzungserfahrung. 

Während bei der Usability möglichst viele Hürden für den Nutzer genommen werden sollten, bedient die User Experience auch die Emotionen des Nutzers. Welche Erwartungen hat der er vor der Nutzung der Website? Wie nimmt er die Website und den Kaufprozess wahr? Was passiert nach dem Kauf bzw. nach der Nutzung der Website? Hat er eine Beziehung zum Produkt oder zur Marke aufgebaut? 

Während die Usability sich mit objektiven Mitteln beschäftigt, geht man hier also zur Subjektivität über. Darin liegt die Schwierigkeit: Wer die User Experience perfektionieren will, muss nicht nur seine Zielgruppe kennen, sondern auch ein hohes Maß an Empathie mitbringen.

Ein witziges Beispiel, wie Websites nicht funktionieren sollten, findest Du unter folgendem Link: userinyerface.com. Beim Durchklicken sollte Dir spätestens bewusst werden, was wir mit den obigen Aussagen meinen. Na, wenn da mal keinen Emotionen geweckt werden. Nur leider nicht die richtigen. 😉 

Der Weg zu einer guten User Experience

Eine gute User Experience zu schaffen, ist also kein Zuckerschlecken. Dadurch, dass sie zum Teil sehr subjektiv ist, gibt es dafür ein kein Rezept, das garantiert zur perfekten Website führt. Aber dennoch gibt es Werkzeuge, die dir diesen Weg erleichtern.

Zielgruppen und Personas

Zunächst einmal musst du dir darüber bewusst werden, für wen du deine Nutzererfahrung aufpolieren möchtest. Das machen wir mit der Definition deiner Zielgruppe. Du musst immer im Hinterkopf behalten, welches Ergebnis das Beste für deine Kunden wäre und nicht, was du selbst am schönsten findest. Magst du beispielsweise die Farben Rot und Grün, verkaufst aber Brillen in einem Onlineshop für Menschen mit Rot-Grün-Schwäche, solltest Du davon absehen, deine Lieblingsfarben unbedingt im Design zu nutzen. Mal extrem ausgedrückt. Zielgruppen lassen sich über Personas definieren. Sie bilden reale Personen ab und werden durch demografische, sozioökonomische und psychografische Eigenschaften definiert. So bekommst du ein besseres Gefühl für deinen Nutzer und kannst dich immer wieder auf diese Personas zurück besinnen. 

User Journey

Deine nun definierten Personas müssen aktiv oder passiv dazu gebracht werden, Deine Website aufzurufen. Dafür kann man eine User Journey Map anlegen. Das beinhaltet alle Schritte, die der Nutzer macht, um von dem Gedanken des Kaufes einer Brille (um mal bei dem Beispiel zu bleiben) auch tatsächlich zum Kauf zu gelangen. Das lässt sich durch ein Storyboard visualisieren. 

Wichtig sind auch sogenannte Touchpoints: An welchen Punkten kommt dein Nutzer mit deinem Produkt in Berührung? Das kann auch außerhalb des Internets gedacht sein, denn je nach Zielgruppe ist die Nutzung von Social Medias u. Ä. möglicherweise nicht priorisiert.

Wireframing

Durch die Personas und die User Journey wissen wir nun, was wir mit dem Auftritt erreichen wollen – wir starten also das Wireframing und den konzeptionellen Teil. Dabei ignorieren wir erstmal, wie am Ende das Ganze schön bunt aussehen wird, sondern konzentrieren uns in schwarz-weiß auf die einzelnen UI-Elemente, die gebraucht werden. Es geht nur darum, die Strukturen und Funktionen klar zu machen. An der Stelle kann man auch anfangen, über Interaktionsdesign nachzudenken: Mit welchen Animationen und Automationen bietet man den Usern eine höhere Usability und im Endeffekt eine bessere UX? 

Ein Beispiel: Wie häufig hast Du es beim Online-Shopping erlebt, dass Du Deine IBAN eingegeben hast und automatisch die BIC und das Kreditinstitut ergänzt wurde? Oder dass dir zu einem bereits ausgewählten Produkt zugehörige andere Produkte angezeigt werden? Genau das ist damit gemeint.

Du siehst: User Experience ist harte Arbeit und von verschiedensten Faktoren abhängig. Dazu ist das eine höchst subjektive Empfindung, die aber durch gewisse Regeln objektiv beurteilt werden kann. Wir begleiten dich gerne auf deinem Weg zur Lieblings-Website deiner Kunden!

AUTOR

MartinaStindt

Blog und Referenzen

Referenz: Progressive Web App des KEPTNs

Unser Herzensprojekt

Webentwicklung

Wir geben dir Tipps für deine Website

SEO – Steigere deine Präsenz

Steiger deine Präsenz in den Suchergebnissen von Google und Co.

Owned Media

Warum du nicht auf Owned Media verzichten kannst und der Unterschied zu Earned & Paid Media.

web-to-print: Sparpotenzial

Unsere Beispielrechnung veranschaulicht Ihre Vorteile.

Web-to-print statt Agentur?

W2P erleichtert das Marketing und automatisiert Prozesse.