Die Beziehung zwischen UX-Wireframe und UX-Forschung

Wenn wir über das Design einer Website nachdenken, denken die meisten von uns zuerst an das Branding und den Markenstil, an die Farben und Funktionen, die beim Laden der Seite zum Vorschein kommen, und daran, wie verlockend das ist, um uns auf unserem Weg zu dem, was wir von der Seite erwarten, voranzutreiben.

Bevor aus der Seite mit den eindrucksvollen Bildern, den clever geschriebenen Texten und dem wirbelnden Schnickschnack eine lebendige, atmende Codeseite wird, sind noch viele weitere Verfahren und Praktiken erforderlich, um jedes Team in ein Stadium zu bringen, in dem das Branding und die Lieferung zusammengestellt werden können.

Jeder Designprozess beginnt mit der Überlegung, was die Beteiligten von ihren Besuchern brauchen und was sie von den Beteiligten brauchen. Die Diskussionen, die die Erreichung jedes Ziels vorantreiben, werden auf dem Weg dorthin durch eingehende Recherchen, Ideen, Präsentationen und Prototypen unterstützt.

UX - User Experience - ist die angenehme Interaktion und Transaktion des Nutzers innerhalb des Prozesses Ihrer Website. Das Ziel ist es, eine Benutzererfahrung zu bieten, die sie ermutigt, den Vorgang abzuschließen, wiederzukommen und sich schnell, effizient und so mühelos wie möglich zu empfehlen.

Wireframes sind ein wertvolles Werkzeug, das in der ersten Phase und in den nachfolgenden Diskussionen jeder Designreise eingesetzt wird.

Was ist ein UX-Wireframe?

Ein Wireframe-Webdesign ist die einfachste Darstellung Ihrer Website, typischerweise in der Anfangsphase.

Wireframes helfen uns dabei, uns vorzustellen, wie die Customer Journey für den Benutzer aussieht und sich anfühlt, und zu entscheiden, welche Elemente wichtig sind, wo sie auf der Seite platziert werden sollten und wie der Benutzer zum nächsten Schritt bei der Erreichung seines Ziels geführt werden kann.

Ein UX-Wireframe steuert die Kommunikation, die Organisation und den Workflow. Er sorgt dafür, dass sich Designer und Forscher auf das Konzept, die Nutzer und die Funktionen konzentrieren und Änderungen am Arbeitsablauf schnell und einfach umgesetzt werden können.

In jeder Phase, in der Design, Forschung und Arbeitsabläufe zusammenkommen, ist Effizienz im Hinblick auf Zeitplan und Abgabetermin von größter Bedeutung. Sie brauchen also ein Werkzeug, mit dem Sie die Ideen aus Ihren letzten Überlegungen umgestalten können, ohne dass Sie einen Designer oder ein Präsentationsteam einschalten müssen, nur um ein paar einfache Schritte weiterzukommen.

Warum Tage oder Wochen warten, wenn ein Stift und Papier dieselbe Aufgabe mit wenigen Strichen erledigen können?

Die 3 Ebenen des UX-Wireframe-Designs

Low-fidelity-Drahtgitterentwurf
Mid-Fidelity-Wireframe-Entwurf
Realitätsnaher Drahtgitterentwurf

Je nachdem, wo Sie sich im Prozess befinden und welche Recherchen Sie bereits angestellt haben, kann das Wireframe-Webdesign so einfach und schmuddelig aussehen wie grobe Skizzen (Low-Fidelity).

Sie werden zu organisierteren (und häufigeren) professionell präsentierten Optionen übergehen, indem sie Software verwenden, die intelligentere, noch leichter vorstellbare Layouts und Arbeitsabläufe liefert (Mid-Fidelity).

An der Spitze des Stapels stehen die Wireframes mit ihren pixelgenauen Layouts (High-Fidelity) mit professionell gestalteten Seiten, die nur wenige Schritte von Ihren Prototyp-Versionen entfernt sind.

Bei ersten Treffen genügen in der Regel Stift und Papier, um den Ball ins Rollen zu bringen.

Mit zusätzlicher Forschung, weiterem Nachdenken und Überlegungen kann etwas Organisiertes jedem Team helfen, zu überlegen, welche Elemente funktionieren und welche nicht, und einen besseren, strukturierteren Plan für das weitere Vorgehen zu erstellen.

Schließlich liefern diese High-Fidelity-Präsentationen eine hoffnungsvolle, festgenagelte Version, die von Designern, Testpersonen und Stakeholdern überarbeitet werden kann, bevor man zur nächsten Phase übergeht. Diese Wireframes sorgen dafür, dass alle Beteiligten auf derselben Seite stehen - sie sind die Blaupausen für die nächsten Phasen des Prozesses.

Warum ein UX-Wireframe verwenden?

Ein Wireframe hilft den Designern zu entscheiden, welche Inhalte, Informationen und Funktionen jede Plattform benötigt, wie sie strukturiert sein könnte und sollte, wie die Hierarchie funktioniert und was das für das Verhalten und die Erwartungen der Nutzer bedeutet.

Wird Ihre Plattform die Bedürfnisse Ihrer Nutzer erfüllen? Ein UX-Wireframe sollte die folgenden Vorteile bieten können:

Schnell und einfach zu erstellen, zu ändern, zu löschen oder zu überarbeiten
Hilft Teams, Interessenvertretern und Mitarbeitern, die am Entwurfsprozess beteiligt sind, jede Gelegenheit zu verstehen, sich zu konzentrieren und auf derselben Seite zu bleiben
Definiert und präsentiert Funktionen und Vorgänge, ohne komplizierte Beschreibungen oder Fachjargon zu verwenden
Manuelle Tests in einem frühen Stadium, ohne sich für zeit- und technikintensive Optionen zu entscheiden
Stakeholder können prüfen, ob das Produkt oder die Plattform den Anforderungen entspricht
So bestimmen Sie den logischen Fluss zwischen Seiten, Bildschirmen und Aktionen
Erkennen von Lücken und Verstehen der Customer Journey

UX-Wireframe ? die Diskussion beginnt hier

Wo, wie, warum? Dies sind die Fragen, die Sie sich für jedes Element Ihrer Website stellen sollten.

Ihre Antworten definieren die UX und UI Ihrer Website, App oder anderer digitaler Plattformen, so dass jeder UX- oder UI-Wireframe Ihnen, Ihren Nutzern und Partnern hilft, das Gesamtbild innerhalb einer definierten Struktur klarer zu sehen.

Die Nachteile von Wireframe-Tests

Da sie statisch sind, stellen sie nach heutigen Maßstäben nicht die beste Testmethode dar. Sie sind hilfreich für Debatten und Diskussionen, aber nicht so gut geeignet, um tatsächliche Reaktionen und Enthüllungen der Nutzer aufzudecken.
Es ist eine schlechte Option, um die Wirkung von Animationen, Übergängen und Effekten auf die Aufmerksamkeit und Reaktion der Nutzer darzustellen. Es gibt nicht dieselbe Möglichkeit, die Emotionen der Nutzer bei Bildern zu berücksichtigen, wie dies bei alternativen Design-Forschungstools der Fall ist.
Wireframes erfordern Vorstellungskraft. Designer haben diese im Überfluss, aber Sie können nicht garantieren, dass Ihre Kunden und Testnutzer die gleiche Vorstellung haben.
Es braucht Zeit, um die Lieferungen so zu gestalten, dass sie für alle verständlich sind. erhalten jede Partei Wenn es darum geht, sie zu überzeugen, kann es mehrere Runden dauern, bis sie sich auf dieselbe Seite schlagen. Überlegene Technik oder Praktiken könnten sie schneller dazu bringen.

Wie man einen UX-Wireframe erstellt

Halten Sie sie einfach.
Lassen Sie alle Farben weg; sie lenken nur ab? bleiben Sie bei Schwarz, Weiß und Grau.
Verwenden Sie keine Fotos, dekorative Schriftarten oder Branding (das kommt alles viel später).
Verwenden Sie die einfachsten Symbole, Platzhalter und Darstellungen der Elemente, die wir von ähnlichen Seiten gewohnt sind.

Sie sollten in der Lage sein, bei jedem neuen und wertvollen Vorschlag, jeder Alternative oder geforderten Überarbeitung jedes Element herauszunehmen, zu übermalen und zu reproduzieren. Der Prozess ist schließlich darauf ausgelegt, Eventualitäten und Chancen schnell und einfach zu verfolgen.

Seien Sie nicht kostbar mit Ihren Wireframes. Sie sollen gelöscht und leicht ersetzt werden können - deshalb halten wir sie einfach. Wenn eine Route nicht funktioniert, werfen Sie sie weg und stellen Sie die nächste zusammen, die funktionieren könnte.

Bei UX-Wireframes geht es um Feedback. Was funktioniert, was nicht, und was könnte alles zehnmal besser für Ihren Besucher machen, damit er seine Ziele schneller und glücklicher erreicht.

Was ist besser: das Festhalten an einfachen Skizzen oder die Verwendung professioneller Wireframe-Tools?

Entweder oder beides. Das hängt von Ihrem System ab, davon, wo Sie sich im Prozess befinden, und von den Einrichtungen, die Sie zur Verfügung haben.

Verschiedene Teams haben unterschiedliche Prozesse mit unterschiedlichen Plänen und Fähigkeiten; wir sollten alle unsere Stärken ausspielen, also erwarten Sie von Ihren Designern, dass sie ihre Arbeit auf ihre Stärken abstimmen. Es geht darum, die Aufgabe auf die beste Art und Weise zu erledigen, die sie kennen, und zwar so einfach und unkompliziert wie möglich. Die meisten fangen mit einfachen Mitteln an und arbeiten sich auf der Treueleiter nach oben, wenn die Elemente und Prozesse konkreter werden.

UX-Forschung trifft UX-Wireframe

Wenn Sie eine veraltete oder fehlerhafte Plattform umgestalten oder etwas Neues schaffen, definiert Ihre UX-Forschung die Daten und Antriebe Ihrer Nutzer.

Jede Wireframe-Möglichkeit hilft, alternative und bevorzugte Arbeitsabläufe aufzudecken. In der nächsten Phase zeigt das Prototyping, wie sich die Nutzer fühlen, und schließlich kommt alles in der Designphase zusammen und zeigt, wie es als fertiges Produkt funktionieren soll.

Wo können wir Nutzerforschung einsetzen?

Wenn es um Forschung und Wireframes geht, sind dieselben grundlegenden Schritte notwendig wie bei einem Projekt, das mit einer leeren Seite beginnt. Der Unterschied ist, dass wir unsere Forschungsdaten anwenden, um:

Organisieren Sie den Arbeitsablauf
Bewerten Sie die Reihenfolge
Funktionalität zuweisen
Bereitstellung eines Layouts, das dem Benutzer ein optimales Erlebnis bietet

Die Verwendung definierter Recherchen während dieser ersten Schritte bietet eine fundierte Grundlage, auf der man aufbauen kann und die dem gesamten Arbeitsablauf und allen kleineren Abschnitten Genauigkeit gegenüber den Annahmen verleiht.

Interviews, Fokusgruppen, Umfragen und Studien können zu Beginn eines jeden Projekts instrumentelle und ablaufbestimmende Daten liefern.

Was lernen wir aus dieser Forschung?

UX-Forschung offenbart die Ziele für jede Anwendung, mögliche Schmerzpunkte, typische Verhaltensweisen, Bedürfnisse und Wünsche. Ein Blick auf bestehende Wettbewerber oder frühere Arbeitsabläufe kann die wichtigsten Herausforderungen und Erfolge früherer Vorgänge aufzeigen und Diskussionen darüber ermöglichen, wie man Dinge besser machen kann.

Die Darstellung von Arbeitsabläufen und Sequenzen in Wireframes bietet eine visuelle Reise, die viel leichter zu verstehen ist, und definiert auch die Anzahl der Schritte, die erforderlich sind, um ein bestimmtes Ziel zu erreichen.

Wie sollten wir diese Erkenntnisse anwenden?

Die erweiterte Funktionalität jedes verbesserten Systems muss alle wertvollen Elemente enthalten, wobei die unnötigen Teile entfernt werden. Durch die Untersuchung des Arbeitsablaufs in Verbindung mit den Bedürfnissen und Reaktionen der Benutzer können wir jedes neue Layout mit einer verbesserten Benutzererfahrung liefern.

Werden Prototyping-Tools UX- und UI-Wireframes in der UX-Forschung ersetzen?

Jeder Wireframe ist ein Skelett Ihres UX-Designs zu diesem Zeitpunkt. Ziel ist es, eine Ansicht zu liefern, die jeder verstehen kann, zu sehen, wo der Prozess derzeit steht, und zu diskutieren, wohin er führen könnte.

Da die von uns verwendete Technologie immer innovativer und intuitiver wird, wird jedes der Tools, die wir zur Darstellung von Arbeitsabläufen und zur Förderung von Diskussionen verwenden, einfacher zu handhaben. Sie bieten UX-Forschern weitaus bessere Übergänge und Optionen für die Verwendung als Teil der Design- und Forschungsreise.

Wir beobachten, dass Prototyping-Tools in der UX-Forschung immer mehr den Platz des Wireframing einnehmen, da das Prototyping viel mehr Möglichkeiten für Tests und Feedback sowie für die Benutzerfreundlichkeit bietet. Außerdem bieten sie weitaus bessere Möglichkeiten, Abläufe und Prozesse in digitalen Echtzeit-Arenen physisch zu testen.

Die Bereitstellung brauchbarer Daten erfordert mehr als Skizzen und einleitende Gespräche

Im Bereich der Forschung streben wir nach Daten, die die Entscheidungsfindung unterstützen. High-Fidelity-Prototypen liefern weit mehr von dem, was wir brauchen, als die meisten Gespräche in der ersten Phase des Wireframe.

Da die Bedienung aller digitalen Tools immer einfacher wird, ist es ein scheinbar einfacher Sprung zum Prototyping anstelle von Papier und Stift oder sogar benutzerdefinierter Wireframe-Software. Wenn sie qualitativ hochwertigere Ergebnisse liefern und den Prozess ein wenig nahtloser, unkomplizierter und schneller machen - vor allem in den Händen von UX-Forschern -, warum sollten sie dann nicht die Werkzeuge sein, auf die man sich in Zukunft verlassen sollte?

Wenn Sie mehr über Wireframing und die Durchführung von UX-Forschung mit Wireframes erfahren möchten, senden Sie uns eine E-Mail an hello@ux247.com.