Die 10 UX-Ergebnisse, die Top-Designer verwenden

Hören Sie sich die Audioversion dieses Artikels an

Die Arbeit eines UX-Designers findet in vielen verschiedenen Umgebungen statt – von schlanken Startups und agilen Umgebungen, in denen Teams mit wenig Dokumentation arbeiten, bis hin zu Beratungsaufträgen für Dritte oder großen Unternehmen und Regierungsbehörden mit strengen Dokumentationsanforderungen. Unabhängig von der Art des Engagements oder der Umgebung (und das Einzige, was alles zusammenhält) müssen UX-Experten ihre Designideen, Forschungsergebnisse und den Kontext von Projekten effektiv an ein breites Publikum kommunizieren.

Während des UX-Designprozesses produzieren Designer eine Vielzahl von „Artefakten“ und Projektergebnissen als Teil ihrer UX-Designmethodik. Diese können viele Formen annehmen: Ergebnisse helfen UX-Designern, mit verschiedenen Interessengruppen und Teams zu kommunizieren, die Arbeit zu dokumentieren und Artefakte für Meetings und Ideenfindungssitzungen bereitzustellen. Sie tragen auch dazu bei, die „Single Source of Truth“ zu schaffen – Leitfäden und Spezifikationen für die Implementierung und Referenz.

Hier sind die 10 UX -Ergebnisse, die ein UX-Designer normalerweise während eines Engagements erstellt. (Diese Liste ist keineswegs vollständig und kann je nach Art des Engagements möglicherweise länger sein.)

1. Geschäftsziele und technische Spezifikationen

Dies ist ein grundlegender Schritt. Für einen UX-Profi beginnt alles mit dem Verständnis der Produktvision, also dem Grund für die Existenz des Produkts aus geschäftlicher Sicht. In einfachen Worten geschrieben, sollte die Erklärung das angesprochene Problem, die vorgeschlagene Lösung und eine allgemeine Beschreibung des Zielmarktes enthalten. Es sollte auch die Lieferplattformen beschreiben und die technischen Mittel, mit denen das Produkt geliefert wird, leicht berühren.

Es muss nicht länger als eine Seite sein, sollte aber den Kern des Was, Warum und Wie beschreiben. Hier ist ein Beispiel: „The Fantastic App Co. hat eine Lücke bei Geschenkanwendungen auf mobilen Plattformen für den Millennial-Markt (iOS und Android) identifiziert. Viele Millennials haben Probleme, sich an besondere Daten zu erinnern, das beste Geschenk zu finden und diese Geschenke dann zu finden und zu kaufen. Unsere Lösung wurde entwickelt, um diesen Stress abzubauen. Durch den Einsatz von vorausschauendem Design und den neuesten KI-Technologien bietet die App eine nützliche und fast magische Benutzererfahrung.“

2. Wettbewerbsanalysebericht

Für jeden, der mit der Entwicklung eines neuen Produkts beginnt, ist es wichtig sicherzustellen, dass es gut auf den Markt passt. Entscheidend ist, dass das Produkt als Teil einer UX-Strategie auch einen überzeugenden Wettbewerbsvorteil und eine UX haben muss, die anderen auf dem Markt überlegen ist.

Wettbewerbsanalyse bedeutet: „Identifizieren Sie Ihre Konkurrenten und bewerten Sie ihre Strategien, um ihre Stärken und Schwächen im Vergleich zu denen Ihres eigenen Produkts oder Ihrer eigenen Dienstleistung zu bestimmen.“

Eine der ersten Aufgaben eines UX-Designers besteht darin, zu recherchieren, welche Produkte oder Dienstleistungen die Zielkunden derzeit verwenden, um das Problem zu lösen. Gibt es ein gleichwertiges Produkt oder eine gleichwertige Dienstleistung? Gibt es eine alternative Lösung, die gut genug, aber nicht perfekt ist? Ein Pflaster – ein Vitamin, aber kein Schmerzmittel? Wie kann bessere UX einen Unterschied machen?

Als Bestandteil der Benutzererfahrungsforschung identifiziert ein Wettbewerbsanalysebericht die fünf besten Wettbewerber und untersucht, was sie richtig und was sie falsch machen. Dieser Schritt hilft dabei, eine Designrichtung festzulegen, in der klare Ziele definiert und die Elemente, auf die der Fokus gelegt werden soll, dargelegt werden.

3. Personas und UX-Forschungsberichte

UX-Designer müssen sicherstellen, dass die Stakeholder die Bedürfnisse der Kunden des Produkts verstehen. Das Erstellen von Personas zum Einkapseln und Kommunizieren von Benutzerverhaltensmustern und das Durchführen von Benutzerforschung sind bewährte Methoden, dies zu tun. Personas sind repräsentativ für die typischen Benutzer eines Produkts – indem sie ihre Ziele, Bedürfnisse und Interessen einbeziehen, helfen sie dem Team, das am Projekt arbeitet, Empathie gegenüber dem Benutzer zu entwickeln.

User Research ist auch ein integraler Bestandteil des UX-Designprozesses. Es umfasst eine Reihe von Techniken, die verwendet werden, um Verhaltensmuster zu extrahieren, Kontext hinzuzufügen und Einblicke in den Designprozess zu geben. Es gibt viele Arten von User-Research-Tools und -Techniken – es geht nur darum, das richtige „Objektiv“ für die richtige Situation auszuwählen.

Bevor Sie mit der Nutzerforschung beginnen, ist es wichtig, sich die Zeit zu nehmen, einen Forschungsplan zu entwickeln . Dies ist ein Dokument, das dabei helfen wird, Forschungsziele und -methoden zu kommunizieren und Unterstützung von Stakeholdern zu erhalten. Es ist auch ein großartiges Tool, mit dem alle während des Forschungsprojekts auf Kurs bleiben können.

Am Ende der Phase der Benutzerforschung wird ein Bericht erstellt, der die Forschungsergebnisse in umsetzbare Elemente umwandelt. Das UX-Team ist dann darauf eingestellt, das Produkt um diese Elemente herum zu entwerfen.

4. Sitemap und Informationsarchitektur

Eine Sitemap ist ein visuell organisiertes Modell aller Komponenten und Informationen, die in einem digitalen Produkt enthalten sind. Es stellt die Organisation des Inhalts einer App oder Website dar. Zusammen mit Wireframes sind sie eines der grundlegendsten UX-Ergebnisse und werden in einem UX-Designprozess selten übersprungen.

Sitemaps helfen bei der Gestaltung der Informationsarchitektur – der Kunst und Wissenschaft, die Komponenten eines Produkts zu organisieren und zu kennzeichnen – um die Navigation, Auffindbarkeit und Benutzerfreundlichkeit zu unterstützen; Sie helfen Ihnen auch bei der Definition der Taxonomie und der Benutzeroberfläche.

Sitemaps sind praktische Referenzen, die Sie als Ressource haben und anpassen können, wenn sich das Produkt auf der Grundlage von iterativem Prototyping und Benutzertests weiterentwickelt. Während des Design-Workflows wird häufig ein Nummerierungssystem verwendet, um alle auf dem gleichen Stand zu halten, wenn der Inhalt des Produkts diskutiert wird.

5. Experience Maps, User Journeys und User Flows

Eine Erfahrungskarte ist eine visuelle Darstellung, die den Fluss eines Benutzers innerhalb eines Produkts oder einer Dienstleistung veranschaulicht – seine Ziele, Bedürfnisse, aufgewendete Zeit, Gedanken, Gefühle, Reaktionen, Ängste, Erwartungen – dh die Gesamterfahrung während seiner Interaktion mit einem Produkt. Es ist normalerweise auf einer linearen Zeitachse angeordnet, die Berührungspunkte zwischen dem Benutzer und dem Produkt zeigt.

Bei User Journeys und User Flows handelt es sich eher um eine Reihe von Schritten, die ein Benutzer unternimmt, und zeigen, wie Benutzer derzeit mit einem Produkt interagieren – oder potenziell interagieren könnten. Sie demonstrieren Verhalten, Funktionalität und die wichtigsten Aufgaben, die ein Benutzer ausführen kann. Indem Sie den „Fluss“ verschiedener Aufgaben untersuchen und verstehen, die ein Benutzer ausführen könnte, können Sie darüber nachdenken, welche Art von Inhalten und Funktionen in die Benutzeroberfläche aufgenommen werden sollen und welche Art von Benutzeroberfläche der Benutzer benötigt, um sie auszuführen.

Ein Großteil von UX dreht sich darum, Probleme für Benutzer zu lösen. Beim Erstellen einer User Journey muss der Designer die Persona, die Ziele, Motivationen, aktuellen Schmerzpunkte und die Hauptaufgaben des Benutzers verstehen, die er erreichen möchte.

Was ist der Unterschied zwischen einer User Journey und einem User Flow ? Stellen Sie sich einen Benutzerfluss als den Benutzer vor, der über Ihr Produkt oder Ihre Dienstleistung an einer Aufgabe oder einem Ziel arbeitet, z. B. ein Auto bei Lyft bucht; Eine User Journey zeigt das Gesamtbild. Eine User Journey geht über Aufgaben hinaus und untersucht, wie eine bestimmte Kundeninteraktion in einen größeren Kontext passt.

6. UX-Wireframes

Wireframes sind ein fester Bestandteil der UX-Designmethodik und zweidimensionale „Blaupausen“-Illustrationen eines Design-Frameworks und von Schnittstellenelementen, die zeigen, was wohin gehört. In erster Linie ein Layout-Tool, helfen sie dabei, die Informationsarchitektur, den Abstand von Inhalten, Funktionalitäten, das Interaktionsdesign und das beabsichtigte Benutzerverhalten zu definieren.

Wireframes sind Brot und Butter für UX-Designer und eines der häufigsten Ergebnisse eines Projekts. „Zeig mir deine Wireframes“ hört man wahrscheinlich häufiger als alles andere im Vorstellungsgespräch eines UX-Designers.

Wireframing ist eine wichtige Phase im UX-Designprozess und eine kostengünstige Möglichkeit, Ideen zu erforschen und innovative Konzepte zu entwickeln, die die Kundenziele erreichen. Sie sind großartige Werkzeuge, um über das Skizzieren hinaus schnell Ideen zu entwickeln, und sie sind in vielen verschiedenen Geschmacksrichtungen erhältlich – von Low-Fidelity (kein Styling, schwarze und weiße Felder, griechischer Text) bis High-Fidelity (vollständig gestylt, farbig, sehr detailliert).

Wireframes, die in Kurzform am Arbeitsplatz manchmal als „Drähte“ bezeichnet werden, können auf der ganzen Linie eine Menge Zeit und Geld sparen, weil sie so biegsam und schnell zu produzieren sind. Sie dienen als Kernstück, um das herum Gespräche mit Stakeholdern und Teammitgliedern geführt werden können, während die Designrichtung festgelegt wird.

Wireframes sind grundlegend und tragen als solche dazu bei, ein Design strukturell zu definieren und wie ein Benutzerfluss durch eine App oder Website in verschiedenen Anwendungsszenarien funktioniert. Es gibt einige interessante Wendungen bei Wireframes, wie z. B. „Wireframe-Karten“, die in einem früheren Artikel hier im Toptal Design Blog besprochen wurden, und „Wireflows:“ eine UX-Lieferung für Workflows und Apps von der NNGroup.

7. Interaktive Prototypen

Interaktive Prototypen, ein weiteres wichtiges Ergebnis während eines benutzerzentrierten Designprozesses, hauchen einem Produkt Leben ein. Rudimentäre Prototypen sparen eine Menge Zeit und Geld – sie zeigen, wie die Dinge in einem tatsächlichen Anwendungsszenario funktionieren, und ermöglichen eine schnelle Design-Iteration und Benutzertests. Sie helfen einem Designer auch dabei, sein Design in verschiedenen Phasen des UX-Designprozesses effektiv zu kommunizieren.

Das Prototyping kann an jedem Punkt der Entdeckungsreise durch Iteration erfolgen. Von Papierprototypen bis hin zu hochglanzpolierten Designs – eine interne Überprüfung eines Produktprototyps lässt jeden im Team sehen, wie die Dinge funktionieren, wenn ein tatsächlicher Benutzer damit interagiert.

Statische Skizzen und Wireframes erwecken ein Produkt nicht so zum Leben wie ein interaktiver Prototyp. Fast magisch sieht und spürt man, wie sich das Produkt verhält – wie alles zusammenhängt. Verschiedene Designs und Funktionen können erkundet werden; neue Ideen können entstehen. Problemstellen können erkannt und unangenehme Wechselwirkungen aufgedeckt werden.

Interaktive Prototypen helfen Benutzertests enorm. Anstatt Menschen durch statische Seiten zu führen, können potenzielle Benutzer ein Produkt testen, das sich zu 100 % echt anfühlt, Ideen liefern und wertvolles Feedback geben.

Heutzutage gibt es Prototyping-Werkzeuge für Designer in allen Formen und Größen. Hier sind 21 interaktive Prototyping-Tools für UX-Design.

8. Visuelles Design

Visuelles Design ist der „letzte Anstrich“ auf dem Produkt. Aber nicht nur das: Visuelles Design kann die UX eines Produkts stark beeinflussen und muss daher sehr sorgfältig angegangen werden. Hoffentlich wurden in früheren Schritten des UX-Designprozesses viele Interaktionsdesign- und Usability-Heuristiken ausgearbeitet, damit sich die Designer auf die Optik konzentrieren können. Es ist eine letzte Gelegenheit, das Produkt auf die nächste Stufe zu bringen.

Das visuelle Design ist der letzte Schritt vor der Übergabe an die Entwickler und die Phase, in der ein Styleguide und endgültige Spezifikationen erstellt werden. Es geht nicht nur darum, „Dinge hübsch zu machen“, sondern um die Möglichkeit, ein Markenfarbschema zu definieren oder zu implementieren und die Benutzerfreundlichkeit mit Layout, Kontrast und visueller Hierarchie zu beeinflussen.

9. Styleguide und Spezifikationen für Entwickler

Der letzte Schritt im UX-Design-Workflow besteht darin, Spezifikationen und einen Styleguide für Entwickler zusammenzustellen. Styleguides sind ein Muss, wenn das Design eines Produkts langfristig erfolgreich sein soll.

Ein Styleguide soll sicherstellen, dass Designs konsistent über Branding, visuelle Stile, Farben, Schriftarten und Typografie hinweg implementiert werden. Es wird auch für Entwurfsmuster, Sprache, Regeln (z. B. Tastenkombinationen und Datenanzeigeregeln) und zum Festlegen von UI-Verhalten (z. B. Fehlerbehandlung) verwendet.

Manche Styleguides und Vorgaben werden manuell zusammengestellt, andere automatisch generiert. Das manuelle Zusammenstellen eines Styleguides ist ein langwieriger Prozess und kann oft sechs Monate dauern, daher ist jedes Automatisierungstool eine willkommene Zeitersparnis.

Die automatisierten Wege variieren je nach verwendetem Tool. Sie sind eine agilere, inkrementelle Methode zur Übergabe von Designs im Vergleich zu über lange Zeit erstellten Styleguides. Sie können eher als „Stilbibeln“ im Regal betrachtet werden, auf die sich jeder im Team beziehen kann.

Wenn Sie in Sketch arbeiten, gibt es Gottes Geschenke wie Zeplin. Zeplin ist ein Kollaborationstool für UI-Designer und Frontend-Entwickler. Es geht über den Design-Workflow hinaus und hilft Teams bei der Design-Übergabe.

Darüber hinaus kann mit dem Craft-Plug-in in wenigen Sekunden ein Design-Styleguide aus Sketch generiert oder Messungen und CSS aus dem Design abgerufen werden, indem mit dem Marketch-Plug-in eine HTML-Datei generiert wird, wie in diesem Artikel beschrieben.

Hier sind 50 großartige Styleguide-Beispiele. Außerdem eine von der BBC und eine von IBM, die beide ihre Leitfäden online hosten, was es für jedermann einfach macht, sie anzuzeigen.

10. Usability-Tests und Berichte zur Nutzungsanalyse

Die Arbeit eines UX-Designers ist nie erledigt. Auch nach der Veröffentlichung eines Produkts gibt es Gelegenheiten, Feedback zu sammeln, Nutzungsdaten zu sammeln, zu verfeinern, freizugeben und den Kreislauf von vorne zu beginnen.

Ein Usability-Test zeigt Ihnen, ob Ihre Zielbenutzer Ihr Produkt verwenden können. Es hilft dabei, die Probleme zu identifizieren, die Menschen mit einer bestimmten Benutzeroberfläche haben, und zeigt schwer zu erledigende Aufgaben und verwirrende Sprache auf.

Usability-Testberichte werden normalerweise während der Prototyping-Phase geliefert, aber es ist nicht ungewöhnlich, bestehende Produkte mit Benutzern zu testen, um zu sehen, wo es Raum für Verbesserungen gibt.

Das Verstehen von Daten, die während Usability-Tests gesammelt wurden – das Sammeln, Sortieren und Erstellen von Berichten – wird zu einer immer häufigeren Aufgabe unter UX-Praktikern – tatsächlich wird es zu einer kritischen UX-Fähigkeit. Hier ist eine Berichtsvorlage für Usability-Tests.

Nachdem das Produkt auf den Markt gebracht wurde, wird das Designteam durch eine weitere Sammlung von Daten – eine quantitative Methode – darüber informiert, wie das Produkt bei Benutzern im Massenmaßstab funktioniert.

Es gibt unzählige Tools und Möglichkeiten, das Nutzerverhalten zu erfassen und zu analysieren. Von Eye-Tracking über Klick-Tracking und Heatmaps (die Klicks, Taps und das Scrollverhalten zeigen) bis hin zum UI-Element-Tagging, das den digitalen Fußabdruck jedes Benutzers auf Mobil- und Webgeräten verfolgt.

Analytics-Berichte zeigen, welche Funktionen Kunden verwenden, wie viel Zeit sie auf Ihrer mobilen App oder Website verbringen, Trends im Laufe der Zeit – und sie aggregieren Ergebnisse über Regionen, Konten, Benutzer und benutzerdefinierte Segmente hinweg. Sie bieten vollständige Transparenz darüber, wie Funktionen verwendet werden und von wem.

Analytics-Unternehmen erstellen in der Regel automatisch kundenspezifische Berichte nach Bedarf. Diese Berichte sind sehr nützlich und können überraschende Einblicke in die Nutzung Ihres Produkts geben. Diese erstaunliche Funktion, von der Sie dachten, dass sie alle Ihre Kunden überzeugen würde, wird möglicherweise kaum jemals verwendet. Auf der anderen Seite kann sich herausstellen, dass eine kleine, unbedeutende Funktion in der Benutzeroberfläche viel Verwendung findet, und Sie können entscheiden, dass es an der Zeit ist, sich auf die Erweiterung dieser bestimmten Funktionalität zu konzentrieren.

Die Mission eines UX-Designers besteht darin, Unternehmen in die Lage zu versetzen, Produkte und Dienstleistungen auf der Grundlage eines tiefen Verständnisses menschlicher Verhaltensweisen, Ziele und Motivationen zu entwickeln. Die 10 oben genannten UX-Ergebnisse gehören zu den am häufigsten von UX-Designern produzierten Ergebnissen, da sie im Rahmen von „Design Thinking“ und einem benutzerzentrierten Designprozess großartige Erfahrungen für Benutzer schaffen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft