Tod dem Wireframe. Direkt zu High Fidelity!

UX-Design ist eine faszinierende Disziplin. Um dies gut zu machen, müssen Praktiker in einer Vielzahl von Themen und Fähigkeiten gut versiert sein. Um benutzerzentrierte Designmethoden zu praktizieren und benutzerfreundliche, innovative Lösungen für alltägliche Herausforderungen im Produktdesign zu entwickeln, umfasst das Handwerk und Verständnis eines UX-Praktikers alles, von grundlegendem Zeichnen über narratives/Journey-Design bis hin zu kognitiver Psychologie.

Im UX/UI-Designprozess wird eine Vielzahl von Tools verwendet, Artefakte generiert und Erkenntnisse gewonnen, die in einer Reihe von Dokumenten oder sogar einem Prototyp festgehalten werden. Unser bekanntestes Brot-und-Butter-Artefakt ist das gute alte Drahtmodell.

Wireframes – normalerweise monochrome Skelette von Designs, die für eine schnelle Bewertung erstellt wurden – sind großartig. Sie ermöglichen es uns, Eingaben von vielen unabhängigen Parteien in ein Dokument zu übersetzen, das jeder überprüfen kann. Viele verschiedene Stellenfunktionen werten Wireframes aus; Geschäftsanalysten, Projektmanager, Marketingleiter, alle Arten von Designern und Entwicklern, verschiedene andere Anbieter und Dienstleister – sogar die Zielgruppe beim Produkttest. Das Wireframe ermöglicht es jedem zu sehen, wie auf seine individuellen Bedürfnisse eingegangen wird, und gibt dem gesamten Team die Möglichkeit, alle Probleme zu lösen, bevor schweres Heben erforderlich ist.

Es gibt Vor- und Nachteile, aber in bestimmten Fällen ist es sinnvoll, die Wireframing-Phase ganz zu überspringen. Es könnte viel Zeit gespart werden, wenn man das UX- und visuelle Design direkt nach der Entdeckung oder während der Vorbereitung auf das Prototyping auf High-Fidelity-Ebene handhabt. Dies würde anderen die Möglichkeit geben, sowohl die Funktionalität als auch das Erscheinungsbild des Produkts gleichzeitig zu bewerten, von Benutzertestteilnehmern bis hin zu Kunden und Kollegen.

Lassen Sie uns herausfinden, warum Wireframes manchmal problematisch sein können, wann das Überspringen sinnvoll ist und wie man einen No-Wireframe-Prozess an einen Workflow anpasst.

Das Problem mit Wireframes

Ob in einer Wasserfall- oder agilen Umgebung, der typische Designprozess umfasst Phasen für Recherche, Definition, Ideenfindung, Prototyping, Tests und Bereitstellung sowie viele Berührungspunkte zur Überprüfung mit Stakeholdern auf dem Weg.

Schauen wir uns den Designprozess an, um Beispiele zu finden, bei denen das Wireframe-Design ein Engpass sein kann:

Grund 1: Kunden verstehen nicht, was sie sehen

Der Designprozess beginnt normalerweise mit einer Art Recherche des Problems. Desk Research, Stakeholder-Interviews und Benutzerinterviews sind nur einige der Aktivitäten, die unternommen werden können, um ein tieferes Verständnis zu erlangen. Nach der Recherche beginnt das Designteam, eine Reihe von Ideen und Konzepten zu bewerten, um die beste Lösung zu finden.

Wenn ein Konzept ausgearbeitet ist, teilt das Designteam dem Kunden während einer Überprüfungssitzung häufig eine Reihe von Wireframes mit.

Das Problem ist, dass Wireframes sehr abstrakt sind.

Sie beschreiben etwas, das dem Ding ähnlich ist, aber nicht das eigentliche Ding, das gebaut wird. In diesem Stadium würden Wireframes Platzhalterbilder und alle Arten von TKs (zukünftig), FPOs (nur für die Platzierung) und TBDs (noch zu entscheiden) enthalten, wie im Beispiel unten.

Es gibt wahrscheinlich Details zu Funktionalität, Geschäftsanforderungen und Fehlerbehandlung, die in einer riesigen Liste von Anmerkungen angezeigt werden. In der Regel bleibt nie genug Zeit, um diese im Detail zu durchkämmen, sodass der Kunde sie alleine lesen muss.

Bei Wireframe-Überprüfungen bitten wir unsere Kunden, sich auf das beschriebene Konzept zu konzentrieren und zu bewerten, ob es die Geschäfts- und Benutzerprobleme zu lösen scheint oder nicht. Wir erhalten jedoch immer noch Fragen zu Dingen, die für uns nicht zusammenhängend zu sein scheinen. Kunden möchten wissen, ob das Wireframe die „endgültige Kopie“ ist oder ob sie Beispiele der Fotos sehen könnten, die im Hero-Image angezeigt werden sollen – oder eine andere Frage zu etwas, das beim visuellen Design, UI-Prototyping oder der Entwicklung behandelt wird.

Wireframes sind möglicherweise zu abstrakt für Kunden und sogar interne Stakeholder, um sie effektiv zu bewerten. Wireframes sagen den Leuten, wie ein Design aussehen wird, wenn es fertig ist, aber sie müssen noch viel mentale Arbeit leisten, um es in ihren Köpfen zusammenzubringen. Unsere Kunden können visuelle Denker sein oder auch nicht, und es kann zu viel verlangt werden, von ihnen zu erwarten, dass sie sich einen Entwurf ansehen und sich ein erfolgreiches Produkt oder eine erfolgreiche Website vorstellen.

Es gab einige Kunden, die ausdrücklich darum gebeten haben, kommentierte visuelle Designs zu überprüfen, weil es für sie viel einfacher ist, die Punkte zu verbinden, eine durchdachte Diskussion zu führen und wohlüberlegtes Feedback zu geben.

Grund 2: Sie sind nicht immer für Benutzertests geeignet

Hoffentlich wurden einige Benutzertests in den Designprozess eingeplant, da dies eine gute Möglichkeit ist, alles zu testen, von der Machbarkeit eines gesamten Konzepts bis hin zum Detaillierungsgrad, der in einer Transaktion angezeigt werden soll.

Eine typische Möglichkeit, solche Dinge zu testen, ist das Prototyping.

Wireframes können – und tun – beim Prototyping funktionieren. Das Designteam ist auf das Testen von Ablauf und Funktionalität beschränkt, und da ihm eine visuelle Designebene fehlt, können visuelle Stile, die das Benutzerverhalten beeinflussen, leicht ignoriert werden.

Ist das weise? UX, Visual und Copy Design beeinflussen sich gegenseitig. Es ist schwierig, sie auseinander zu ziehen und sie in einer Testumgebung zu isolieren. Ähnlich wie bei einer wissenschaftlichen Studie können die Ergebnisse einer isoliert getesteten Funktion nicht kontrollieren oder vorhersagen, wie sie sich in freier Wildbahn verhalten wird.

Manchmal ist es effektiver, all diese Dinge ganzheitlich zu testen.

Typisches Beispiel: ein mehrsprachiges Produkt oder eine mehrsprachige Dienstleistung. Die Sprachen können unterschiedliche Grammatik, Alphabete und Zeichenbreiten haben, die sich auf das Gesamtdesign auswirken können.

Da sich kopierter Inhalt auf die UX auswirkt, kann sich die Übersetzung selbst auf die UX auswirken.

Wir hatten beispielsweise eine Aufgabe, bei der wir einige verschiedene Informationsarchitekturen testen mussten, da verschiedene Konzepte in der Landessprache erklärt werden mussten. Wir hätten die Auswirkungen auf das Verfassen von Texten und die Übersetzung nicht entdeckt, ohne den eigentlichen Text in der Benutzeroberfläche zu testen.

Wir stellten fest, dass mehr Wörter erforderlich waren, um ähnliche Konzepte in der Landessprache zu beschreiben, und dass wir die Größe und Form der Schaltflächen global ändern müssten, um die für diese Sprache erforderlichen ausführlichen Formulierungen aufzunehmen. Ohne uns beim Testen tatsächlicher visueller Komponenten in der Benutzeroberfläche auf Textprobleme zu konzentrieren, hätten wir nicht entdeckt, dass Schaltflächen die volle Breite des mobilen Bildschirms einnehmen müssen, was sich auf unser zukünftiges UX-Design auswirkte.

Fazit: Es ist sinnvoll, von Anfang an High-Fidelity-UIs vorzubereiten, insbesondere für ein mehrsprachiges Projekt.

Grund 3: Sie machen Entwicklern und QA das Leben zur Hölle

Was während der visuellen Designphase zwangsläufig passiert, ist, dass sich alles bewegt. Die gestapelten Bilder werden zu Kacheln. Der zentrierte Text wird linksbündig ausgerichtet. Die Akkordeon-Trigger-Symbole waren + und - , aber jetzt sind es ein paar Chevrons.

Dies ist ein normaler Teil des visuellen Designprozesses. Was auch normal ist, ist, dass alle Änderungen am visuellen Design nicht in den Wireframes widergespiegelt werden, da die Wireframes „abgemeldet“ wurden.

Wenn alle visuellen Elemente genehmigt sind, ist es an der Zeit, alles an die Entwickler zu übergeben. In den meisten Fällen erhalten sie eine Reihe detaillierter, kommentierter Wireframes und eine Reihe schöner visueller Designs zusammen mit einem Styleguide. Jetzt liegt es an ihnen, Querverweise zwischen diesen beiden Dokumenten herzustellen und alles zum Leben zu erwecken.

Dies ist ein Bereich, in dem der Designprozess wirklich scheitern kann. Wir geben Entwicklern zu viele Dokumente, auf die sie sich beziehen können, und überlassen es ihnen, zu bestimmen, welche Informationen Vorrang haben. Dies erhöht den Zeitaufwand für Supportanrufe und QA, was sich natürlich auf die Zeit auswirkt, die benötigt wird, um ein Produkt oder Update auf den Markt zu bringen.

Warum geben Sie den Entwicklern nicht einfach ein genaues Dokument, das alles enthält? Die meisten Kunden würden sich auch über eine Kopie als vollständige Referenz für die Arbeit freuen.

Die Lösung: Wireframes überspringen

Natürlich gibt es Zeiten, in denen eine vollständige Wireframe-Phase erforderlich ist, und es gibt Zeiten, in denen dies nicht der Fall ist. Es gibt sogar Zeiten, in denen der direkte Übergang zu High-Fidelity die Wireframe-Phase insgesamt übertrumpft.

Sie können die Wireframe-Phase überspringen, wenn einer der folgenden Punkte zutrifft:

Es gibt solides Referenzmaterial.

Werfen Sie einen Blick auf die vorhandene Arbeit. Möglicherweise sind bereits detaillierte UI-Referenzen verfügbar. Wenn Sie eine vorhandene Website aktualisieren oder einer vorhandenen App eine neue Funktion hinzufügen, sehen Sie sich die aktuelle Website und App an, um Muster und Stile zur Wiederverwendung zu finden.

Noch besser wäre es, wenn Sie Zugang zu Quelldateien für die vorhandene Arbeit hätten. Einige Funktionen und Elemente könnten während des Entwicklungsprozesses sozusagen in der Übersetzung verloren gegangen sein, und Sie könnten in der Quelldatei nachsehen, wie diese Funktion hätte ausgeführt werden sollen.

Überprüfen Sie zusätzlich zu (oder in Abwesenheit) eines vorhandenen Produkts oder einer Website, ob ein Styleguide oder eine Musterbibliothek vorhanden ist. Der Kunde hat möglicherweise bereits für einige Branding- und visuelle Designarbeiten bezahlt, und diese Ressourcen könnten für Ihr Projekt erneut verwendet werden.

Verwenden Sie so viele Stile und Muster, wie Sie finden können, damit Ihre High-Fidelity-Ausgaben so genau wie möglich sind.

Sie haben unterwegs viele iterative Prototypen und Tests geplant.

Sparen Sie sich den Aufwand für wochenlanges Prototyping und Testen. Wenn Sie Ihr Dokument beim ersten Mal sorgfältig einrichten und sich wiederholende Stile, Muster und Symbole intelligent nutzen, können Sie problemlos inkrementelle Aktualisierungen in High Fidelity vornehmen und diese direkt in Ihrem Prototyping-Workflow veröffentlichen. Kein Wireframing erforderlich.

Als großes Plus können Sie zwei Fliegen mit einer Klappe schlagen. Sie können neben Ihrem UX-Feedback auch visuelles und UI-Feedback erhalten und all diese Änderungen auf einmal vornehmen.

Ihre Testteilnehmer sind sehr wörtlich.

Genauso wie Ihre Kunden und Mitarbeiter manchmal konkrete Beispiele benötigen, kann dies auch die Zielgruppe Ihres Projekts sein.

Bei einem kürzlichen Auftritt habe ich Finanzbildschirme für eine Zielgruppe mit geringer Alphabetisierung entworfen. Das Leseverständnis war nicht das einzige Problem – abstrakte Konzepte waren oft sehr schwer zu behandeln. Dieses Zielpublikum musste in der Regel Finanzkonzepte anhand konkreter Beispiele diskutieren; Sonst konnten sie dem Gespräch nicht wirklich folgen.

Um die Finanzkonzepte zu verstehen, mussten die Testteilnehmer dieser Zielgruppe das Gefühl haben, tatsächlich Transaktionen durchzuführen. Und um zu verstehen, wie das Produkt funktioniert, musste es wie eine echte Anwendung aussehen und sich anfühlen.

Vergessen Sie Wireframes für ein solches Publikum! Sie werden am Ende viel Zeit damit verbringen, zu erklären, was sie sind – und Ihr Publikum wird sich nicht auf die Aufgaben konzentrieren oder wie sie darüber denken, weil sie sich nicht damit identifizieren können, etwas so Unbekanntes in ihrem Leben zu verwenden.

Ihr Kunde hat nur begrenzt Zeit und/oder Budget.

Es ist selten, dass Sie die Zeit, die Ressourcen und das Budget zu Ihren Gunsten haben. Sie können oft versuchen, den Umfang und den Preis zu reduzieren, oder sich bemühen, zu sehen, wo Sie knausern und sparen und Ihrem Kunden dennoch einen großartigen Service bieten können.

Wenn Sie einen Kunden haben, der sich eine vollständige UX-Aufarbeitung nicht leisten kann (oder wahrscheinlich nicht kaufen wird), darf ich vorschlagen, die Wireframing-Zeit zu verkürzen? Erstellen Sie bei Bedarf einige intern, aber halten Sie das Projekt für Ihren Kunden am Laufen. Testen Sie echte, greifbare Designs und lassen Sie Ihren Kunden auf die tatsächliche Arbeit reagieren.

So beenden Sie die Wireframe-Phase

Dieser Teil ist eher subjektiv, da er von Ihrem persönlichen Arbeitsablauf und den spezifischen Bedürfnissen Ihres Kunden abhängt.

Abgesehen davon ist dies eine Prozess-„Vorlage“, die Sie zunächst versuchen könnten, an Ihren Arbeitsablauf anzupassen, und dann optimieren, wenn Sie mehr Übung darin haben, auf diese Weise zu arbeiten.

Schritt 1: Beginnen Sie mit Ihrem üblichen Recherche- und Entdeckungsprozess.

Interviews, Feldbeobachtungen, Schreibtischforschung, Wettbewerbsanalysen – was auch immer Sie normalerweise tun (oder geplant haben), schließen Sie diese Phase wie gewohnt ab.

Schritt 2: Skizzieren Sie ein wenig entlang des Weges.

Während Sie recherchieren, bekommen Sie wahrscheinlich einige Ideen für nützliche Layouts und Muster, ansprechende Abläufe und dergleichen. Notieren Sie diese wie gewohnt. Ich mache gerne Miniaturskizzen in meinem Notizbuch, mit schriftlichen Notizen daneben. Möglicherweise ziehen Sie es vor, auf einem Whiteboard zu skizzieren oder Screenshots von interessanten UI-Mustern zu machen. Was auch immer Ihnen hilft, sich an gute Ideen zu erinnern, tun Sie es.

Schritt 3: Bereiten Sie Ihr High-Fidelity-Dokument vor

Öffnen Sie das Designtool Ihrer Wahl und richten Sie Ihr Dokument richtig ein. Wählen Sie einige Zeichenflächengrößen und beginnen Sie mit der Erstellung wiederholbarer Formen, Gruppen und Symbole.

Nehmen Sie sich die Zeit, die Markenfarbpalette als einzelne Farbfelder zu speichern, Schriftstile zu erstellen und zu organisieren und standardmäßige Schlagschatten und Filter zu erstellen, die Sie bei Bedarf auf alle Formen anwenden können.

Verbringen Sie viel Zeit damit, Ihre Symbole genau richtig zu machen. Möglicherweise haben Sie eine Schaltfläche, die je nach Status vier verschiedene Farben haben kann. Verwenden Sie – wenn möglich – Symbolüberschreibungen, damit Sie ganz einfach nach Bedarf verschiedene Farben und Textbeschriftungen anwenden können.

Wenn benutzerdefinierte Symbole verwendet werden, speichern Sie sie als einzelne Symbole auf einer quadratischen Zeichenfläche (oder einer anderen geeigneten Form). Auf diese Weise ist es für Sie einfach, sie nach oben und unten zu skalieren, während der richtige Abstand und die richtige Ausrichtung beibehalten werden.

Schritt 4: Beginnen Sie mit der Gestaltung.

Ihre erste Runde kann etwas holprig sein, wenn Sie sich daran gewöhnen, auf diese Weise zu arbeiten und zu sehen, wo Ihr Styleguide hält (und wo nicht). Erwarten Sie nicht nur Lösungen für Muster zu erstellen, die noch keinen definierten Stil haben, sondern auch, dass Sie einiges an Optimierungen vornehmen müssen, um alle Stile richtig hinzubekommen.

Gehen Sie während dieses Prozesses mit einer guten „Kopierrichtung“ oder mit einer echten Kopie vor, wenn Sie eine haben. Erstellen Sie keine Titel, die sagen: „Seitentitel gehört hierher.“ Geben Sie dem Betrachter ein Gefühl dafür, was hier passieren würde , wenn es real wäre.

Erstellen Sie auch keine Liste mit Namen, die alle John Smith mit der Telefonnummer 555-1212 enthalten. Verwenden Sie einen Zufallslistengenerator oder ein Plug-in, um verschiedene Namen und Nummern zu erstellen, oder erstellen Sie beliebige Datensätze, die Sie anzeigen möchten. Das mag übertrieben erscheinen, aber es lässt Sie Probleme mit Layout und Zeichenbreiten lösen und hilft Ihrem Betrachter zu verstehen, dass diese fünf Einträge alle unterschiedlich sind.

Schritt 5: Wissen, wann man mit dem Entwerfen aufhören sollte.

Es gibt einige Details, um die Sie sich an dieser Stelle nicht kümmern sollten, da sie wirklich zu lange dauern werden. Vielleicht ist es die Auswahl des genauen Bildes, das in einen Helden eingefügt werden soll, oder das Entwerfen eines benutzerdefinierten Symbols, um einen Download-Status anzuzeigen. Dies sind einige Fälle, in denen Sie möglicherweise ein Platzhalterbild oder -symbol verwenden und zu einem späteren Zeitpunkt echte Bilder oder Ikonographie testen.

Sie müssen entscheiden, was hier angemessen ist, da dies von den Zielen des Projekts abhängt und wie weit Sie damit fortgeschritten sind.

Beachten Sie, dass dies davon abhängen kann, was Ihre Benutzertestteilnehmer benötigen, um die Arbeit richtig zu bewerten. Für die oben erwähnte Zielgruppe mit geringer Alphabetisierung war nichts zu detailliert. Für jeden Teilnehmer habe ich eine Variante des Prototyps erstellt, bei der durchgehend sein richtiger Name und seine Telefonnummer verwendet wurden, damit sich die Anwendung wirklich so anfühlte, als wäre sie „ihre“. Je weniger sie annehmen mussten, desto einfacher war es für sie, ihnen zu folgen, und desto besser waren meine Ergebnisse.

Schritt 6: Genießen Sie hochwertiges Feedback und Testergebnisse.

Veröffentlichen Sie Ihre Designs direkt in Ihrem Prototyping-Tool Ihrer Wahl und bringen Sie sie zum Testen in die Praxis. Sie können jetzt Feedback zu mehr als nur der Funktionalität erhalten. Sie können potenzielle visuelle Probleme aufdecken, z. B. Probleme mit dem Farbkontrast oder der Lesbarkeit, und Sie können Probleme mit der Kopierrichtung oder Übersetzung entdecken. Sie können auch positive oder negative Gefühle hervorheben, die Benutzer möglicherweise in Bezug auf das Erscheinungsbild oder das Branding haben.

Dies sind alles Dinge, zu denen Sie wahrscheinlich ohnehin Feedback erhalten würden, wenn Sie in die Phase des visuellen Designs kamen. Warum nicht jetzt all das Feedback einholen? Einige der Rückmeldungen zu visuellen Elementen könnten sich direkt auf die UX auswirken und umgekehrt, daher ist es gut, all dies gleichzeitig auszuarbeiten, wenn Sie können.

Einpacken

Zweifellos gibt es viele Fälle, in denen eine vollständige Wireframe-Phase für den Erfolg des Projekts erforderlich ist. Ein komplexes Design, wie eine responsive Webanwendung, erfordert einen separaten und dedizierten Fokus auf Wireframes. Es würde Zeit und Geld sparen, alle Geschäftsanforderungen, Sonderfälle und Fehlerbehandlungen in der Wireframe-Phase auszuarbeiten, als wenn bereits eine vollständige visuelle Ebene konzipiert und angewendet worden wäre.

In den richtigen Fällen kann der direkte Wechsel zu High-Fidelity Ihren Prozess jedoch verbessern:

• Verbesserung des Stakeholder-Feedbacks . Kunden, Entwickler, andere Designer und Testteilnehmer aus der Zielgruppe können genau sehen, was sie bekommen, und so ein qualitativ hochwertigeres Feedback geben.
• Beschleunigen Sie Ihren Prototyping-Workflow . Ihre Designs sind nicht nur sofort zum Testen bereit, Sie können auch Feedback zu einer Reihe von Dingen auf einmal erhalten: zur UX, zum Text und zur Optik.
• Liefern Sie Kunden und Entwicklern ein einziges Dokument . Eliminieren Sie die Notwendigkeit von Querverweisen und überprüfen Sie eine Vielzahl von Dokumenten, um zu verstehen, wie eine Schaltfläche funktionieren sollte. Dies ist auch eine großartige Möglichkeit für Ihren Kunden, die Arbeit mit seinen internen Stakeholdern zu besprechen, um noch mehr Feedback von Ihnen zu erhalten.
• Sparen Sie Zeit und Geld . Und das ist so ziemlich immer gut so!

Probieren Sie diesen Ansatz das nächste Mal aus, wenn Sie ein Projekt haben, bei dem Sie auf einige vorhandene Designmaterialien verweisen können, oder bei dem es für Ihr Publikum einen großen Unterschied macht, ob die Arbeit in Low- oder High-Fidelity ist.

• • •

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