function fullHeightRow() { var fullHeight, offsetTop, element = document.getElementsByClassName('vc_row-o-full-height')[0]; if (element) { fullHeight = window.innerHeight; offsetTop = window.pageYOffset + element.getBoundingClientRect().top; wenn (offsetTop < fullHeight) { fullHeight = 100 - offsetTop / (fullHeight / 100); element.style.minHeight = fullHeight + 'vh' } } } fullHeightRow();

Die Beziehung zwischen UX-Wireframe und UX-Forschung

photo of a book containing various wireframe designs

Die Beziehung zwischen UX-Wireframe und UX-Forschung

In diesem Artikel werden wir uns mit diesen Fragen beschäftigen:

  • Was sind UX-Wireframes?
  • Wie werden sie im Entwurfsprozess eingesetzt?
  • Was könnte sie ersetzen?
  • Welchen Nutzen haben sie? 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 Benutzers innerhalb des Prozesses Ihrer Website. Das Ziel ist es, eine Benutzererfahrung zu bieten, die sie dazu 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

  1. Low-fidelity-Drahtgitterentwurf
  2. Mid-Fidelity-Wireframe-Entwurf
  3. Realitätsnaher Drahtgitterentwurf

Je nachdem, wo Sie sich im Prozess befinden und wie viel Sie bereits recherchiert haben, kann ein Wireframe-Webdesign so einfach und schmuddelig aussehen wie eine grobe Skizze (Low-Fidelity).

Sie werden zu organisierteren (und häufigeren) professionell präsentierten Optionen übergehen, die eine 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, weiteren Überlegungen und Abwägungen kann eine besser organisierte Vorgehensweise jedem Team dabei helfen, zu prüfen, 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, abgesicherte 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 an einem Strang ziehen - 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 zu ermitteln.
  • 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, die alternative Design-Forschungstools offenbaren.
  • Wireframes erfordern Vorstellungskraft. Designer haben diese im Überfluss, aber Sie können nicht garantieren, dass Ihre Kunden und Testnutzer die gleiche Tiefe der Vision 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.
website

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 zu kostbar für Ihre Wireframes. Ihre Aufgabe ist es, gelöscht und leicht ersetzt zu werden - 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 Ihre Besucher machen, damit sie ihre Ziele schneller und glücklicher auf ihrer Reise erreichen.

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.

Unterschiedliche Teams haben unterschiedliche Prozesse mit unterschiedlichen Plänen und Fähigkeiten; wir sollten alle unsere Stärken ausspielen, also erwarten Sie, dass Ihre Designer ihre Leistungen an die ihren anpassen. Es geht darum, die Aufgabe so einfach und unkompliziert wie möglich zu erledigen, und zwar auf die beste Art und Weise, die sie kennen. 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 Nutzer 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 vergangener 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 - insbesondere in den Händen von UX-Forschern - nahtloser, unkomplizierter und schneller machen, warum sollten sie dann nicht die Tools 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.

Verwandte Beiträge