Inbound Marketing Blog

Website erstellen: Was ist UX Design? Und was ist UI Design?

Website erstellen: Was ist UX Design? Und was ist UI Design?_shutterstock_©-Rawpixel.com_2356x1573px_628335110_komprimiert

Wer sich mit dem Thema Webdesign beschäftigt, ist bereits das ein oder andere mal auf die Begriffe UX und UI gestoßen. Doch was bedeuten sie überhaupt? Dieser Artikel erklärt Ihnen, was es mit der User Experience und dem User Interface auf sich hat, welche Prozesse sie durchlaufen und wie Ihnen eine positive User Experience bei dem Design der Website weiterhilft, die Besucherzufriedenheit steigert und somit zur Leadgenerierung beiträgt.

Was bedeutet User Experience? Und was ist User Interface?

Die User Experience, oder auch Nutzererfahrung, beschreibt die Erfahrung, Empfindung und Gefühle einer Person während der Nutzung eines Produktes. Diese setzt sich aus den drei Elementen Strategie, Funktionalität und visuellem Design zusammen

Wie oft fälschlicherweise angenommen, sind UX und UI nicht dasselbe. Sie stehen jedoch in einer Verbindung zueinander. 

Das User Interface ist ein Teil des visuellen Designs, das den Kontakt zwischen Mensch und Soft-/Hardware beschreibt. Die Interfaces werden in verschiedene Arten unterteilt. Die wichtigsten sind: 

  • CLI - Command Line Interface: Kommunikation zwischen Mensch und Computer findet durch Programmierbefehle statt.
  • NUI - Natural User Interface: Kommunikation zwischen Mensch und Computer findet durch Gesten statt.
  • GUI - Graphical User Interface: Kommunikation zwischen Mensch und Computer findet durch grafische Symbole und Steuerelemente statt.
  • VUI - Voice User Interface: Kommunikation zwischen Mensch und Computer findet durch Spracheingabe statt.

Das UI Design konzentriert sich also auf die Gestaltung der Interaktionen mit den Nutzern und ist Bestandteil des visuellen Designs einer Website. 

Erfahren Sie mehr in diesem Blogartikel:

Website erstellen: 7 Regeln, die beim UI Design wichtig sind

Wird eine Website entwickelt, werden Struktur und Inhalt allerdings immer nach Regeln der gesamten User Experience aufgebaut. Dieses sogenannte UX Design (User Experience Design) ist somit immer zu 100 Prozent kundenzentriert und zielt darauf ab, den Nutzen von Unternehmensseiten zu maximieren.  

UX Design: Der Entstehungsprozess

Um die UX inklusive UI so intuitiv und positiv wie möglich für Website-Besucher zu gestalten, wird der Design Prozess in mehrere aufeinanderfolgende Schritte unterteilt: 

  1. Produktdefinition
  2. Recherche
  3. Analyse
  4. Design
  5. Testing  

Produktdefinition:

Bevor Sie Ihre Website umsetzen, überlegen Sie sich zuerst, was Ihre Nutzer möchten und welche Personen direkt oder indirekt Interesse an Ihren Unternehmensseiten haben. Was treibt die Nutzer an und welche Aufgaben, Herausforderungen und Ziele sind damit verbunden? Welche Personen oder Stakeholder haben ein Interesse daran, Ihre Website – und idealerweise auch Ihre Produkte und Dienstleistungen – zu nutzen? 

Dies finden Sie mit Hilfe von Stakeholder Interviews und Value Proposition Canvas heraus. Ein Canvas bzw. eine Werte-Aufstellung hilft Ihnen, zu verdeutlichen, was Sie Ihren Nutzern anbieten können und was sie benötigen. Sind all diese Fragen geklärt, können Sie mit der Recherche beginnen.

Recherche:

Um mehr über Ihre Nutzer zu erfahren, erstellen Sie eine oder mehrere User Personas. Die Zuordnung zu Personas hilft Ihnen, die Bedürfnisse, Motivationen und Verhalten Ihrer Nutzer besser zu verstehen. 

Eine Persona ist ein fiktionaler Charakter, der einen realistischen Nutzer Ihrer geplanten Website widerspiegelt. Je genauer die Persona präsentiert wird, desto besser können Sie neue Nutzer für sich gewinnen und Leads generieren.

Ebenso wichtig ist die Recherche nach Ihren Wettbewerbern. Was sind die Industriestandards, welche Unternehmen befinden sich auf dem Markt und gibt es Nischen, die Sie nutzen können? Sind auch diese Fragen geklärt, können Ihre Ergebnisse analysiert und ausgewertet werden.

Analyse:

Die gesammelten Informationen lassen sich in Form von User Stories und Storyboards auswerten. 

User Stories werden aus der Perspektive eines Endnutzers geschrieben und verbessern den Mehrwert Ihrer Website. Oftmals wird folgender Satz genutzt:

  • Als (Persona) möchte ich (Softwareziel), damit (Erlebnis) 

Das Storyboard verbindet Personas und Stories und zeigt Ihnen und den Designern der Website, wie der Nutzer mit der Website interagieren wird. Nach Abschluss der Analyse kann mit der Designphase Ihrer Website begonnen werden.

Design:

Im Laufe des Designprozesses werden viele Veränderungen vorgenommen – daher ist es wichtig, schnell und simpel zu arbeiten. Skizzen und Wireframes zeigen das Grundgerüst und Aussehen Ihrer Website. Steht das Grundgerüst, benötigt Ihre Website ein Design System mit Regeln. Schlüsselelemente wie CTAs, Bilder, Textboxen oder Farben werden festgelegt, sodass ein erster Prototyp entsteht. 

Dieser Prototyp kann, dank der raschen und unkomplizierten Arbeitsweise, beliebig angepasst werden. Ein guter Prototyp spart Ihnen Budget, Zeit und ist einfach umzusetzen. Er gibt Ihnen außerdem ein besseres Verständnis für die Interaktion und Visualisierung Ihrer Unternehmensseiten. Steht der Prototyp, ist es Zeit für die letzte Phase, das Testing.

Gut zu wissen: Ein wichtiger Teil des Designs ist das User Interface. Wichtig hierbei ist, dass das User Interface lediglich den Look Ihrer Seite definiert, nicht die Funktionen.

Testing: 

Die letzte Phase des Designprozesses zeigt Ihnen, welche Punkte Ihrer Website verbessert und angepasst werden müssen und wie Ihre Website unter realen Bedingungen abschneidet. 

Testsitzungen helfen Ihnen hier weiter. Diese bestehen aus 

  • A/B Testing 
  • BETA Testing  
  • Usability Test 
  • Umfragen 
  • Webanalytics

Das A/B Testing bietet Ihnen die Möglichkeit, zwei verschiedene Varianten ihrer Website gleichzeitig zu testen. Wie Ihre Website unter realen Bedingungen abschneidet, zeigt Ihnen das BETA Testing.  Der Usability Test hilft herauszufinden, wie umgänglich Ihre Website für den Nutzer ist. Umfragen repräsentieren die Meinung der Nutzer über ihre Website. Das letzte wichtige Tool der Testing-Phase sind die Webanalytics. Hier können Sie verfolgen, wie der Nutzer sich auf Ihrer Website verhält, wer Ihre Website besucht und wie regelmäßig der Nutzer sie besucht. 

Der Usability Test vermeidet Ärger, das UX Design schafft Werte

Eine ausführliche Testphase zeigt es – wie gut schneidet Ihre (neue) Website ab? 

Dabei geht es zum einen um die Usability, also ob es Probleme bei der Nutzung gibt und wie sich Ärger und Frustration vermeiden lassen. Andererseits werden auch positive, im Idealfall persönlich bedeutsame Erlebnisse gemessen und wie gut psychologische Bedürfnisse in die Gestaltung mit einbezogen wurden. 

Das bedeutet: User Experience Design (UX Design) richtig geplant und durchgeführt, hilft, Ihre Website nicht nur effektiv, sondern auch effizient und stark zu machen. 

Und natürlich geht es bei der Erstellung und Pflege von Webseiten immer um die kontinuierliche Weiterentwicklung. Seiten planen, bauen, lernen, übertragen – immer wieder. Lesen Sie hierzu diesen Blogartikel:

 

Fazit

UX Design bzw. der User Experience Entstehungsprozess maximiert den Nutzen Ihrer Website. Er besteht aus fünf Phasen: Produktdefinition, Recherche, Analyse, Design und Testing. Jede einzelne Phase dieses Prozesses hilft Ihnen, Ihre Persona(s) besser zu verstehen und Ihre Unternehmensseiten entsprechend zu entwerfen und kontinuierlich anzupassen. 

Möchten Sie mehr darüber lesen, wie Sie nutzerfreundliche, erfolgreiche Websites erstellen? Wie Sie Ihr Online Marketing optimieren? Wie Sie mehr Traffic und Leads auf Ihren Unternehmensseiten generieren? 

Dann abonnieren Sie einfach unseren Blog. Wir veröffentlichen wöchentlich neue Artikel zu Fragen und Trends rund um die Themen Marketing, Vertrieb und Kundenservice im Online Bereich.

Inbound Marketing Blog JETZT abonnieren!

Oder Sie steigen gleich in die nächsten Artikel ein, die wichtig beim Erstellen von Unternehmensseiten sind:




Foto:

© IMAGE ID: 628335110/@ rawpixel.com/Shutterstock.com

 

Themen: Webdesign Website