Die Erfolgsmethode Wireframing

Wireframing ist der erste Schritt bei der Gestaltung einer Website und dient vielen Zwecken: Es beschreibt, wie Informationen auf einer Seite dargestellt werden, legt die Struktur und die Funktionen einer Website fest und definiert den Ablauf der User Journey. Unabhängig davon, ob du an einem völlig neuen Projekt interessiert bist oder ein altes Projekt überarbeiten willst, bietet das Wireframing eine solide, nutzerorientierte Grundlage für deine Website.

Es ist nicht ungewöhnlich, Wireframing und Prototyping zu verwechseln. Wireframing ist der vorausgehende Schritt vor dem Prototyping (das wir in Teil 2 dieser Serie behandeln werden), und konzentriert sich nicht auf Elemente der visuellen Darstellung, die über das Layout und Screendesign hinausgehen. Wenn es um Wireframes geht, kann man sich den Prozess am einfachsten wie eine Blaupause vorstellen. 

b13 Wireframing kann das Engagement deiner Website, deiner Konversionsrate und die allgemeine Kundenzufriedenheit verbessern. Nimm Kontakt mit b13 auf, um die Usability deiner Website mit Hilfe von Wireframing zu verbessern.

Sammeln von Informationen und Definieren von Zielen

Der erste Schritt zum Wireframing bei b13 ist ganz einfach: Informationen sammeln. 

• Mit dem Kunden zu sprechen, um das Ziel der Website oder des Projekts zu verstehen, ist ein elementarer Bestandteil. Steffi Kreuzer, UX-Konzepterin und Designerin bei b13, sagt: „In der ersten Phase verstehe ich, was unsere Kunden wollen, und sie klären, was sie brauchen. Es kann aber auch andersherum sein: Ich sage dem Kunden, was er braucht, um das zu erreichen, was er will.“
• Führt eine Bestandsaufnahme der vorhandenen Informationen durch, wie z. B. bestehende Prozesse, Benutzer-Personas und User Flows.
• Führt gemeinsam mit dem übrigen b13-Team eine expertenbasierte Recherche durch, um eventuelle Informationsdefizite auszugleichen.

„Nachdem ich all diese Informationen gesammelt habe, weiß ich, was das Ziel der Website ist und was die Bedürfnisse der Endnutzer sind.“

Übersetzen der gesammelten Daten in eine Informationsarchitektur

Sobald die notwendigen Daten gesammelt wurden und das Ziel des Projekts definiert ist, erstellt b13 die Informationsarchitektur. Dieser entscheidende Schritt bildet die Grundlage für die Sitemap, den Benutzerfluss und stellt sicher, dass die Navigation auf der Website klar, verständlich und intuitiv ist. 

Informationsarchitektur bedeutet, die Platzierung der einzelnen Informationen auf der Website zu verstehen. Es ist der erste Schritt, bevor irgendetwas digital umgesetzt wird. Es geht darum, Fragen zu stellen wie: „Ist es wichtiger, dass ich diese Information mit einem Klick finde, oder ist es in Ordnung, sie mit drei Klicks zu finden?“ Anhand diese hierarchischen Baums der zusammenhängenden Informationen können eine Sitemap und die Navigation erstellt und der Benutzerfluss auf der Website erfasst werden.

Hinzufügen von Inhaltselementen zum User Flow

Die nächste Phase des Wireframings besteht darin, die Seitentypen und Inhaltselemente zu definieren und sie in den Gesamtnutzerfluss einzubinden. Die Entscheidung über die Arten und Funktionen von Inhaltselementen und ihre Platzierung ist ein wichtiger Teil des Wireframings, da sie dazu beitragen, das Engagement des Benutzers zu steuern, z. B. ob er auf einer Seite innehält, um einen Absatz zu lesen, auf eine Schaltfläche zu klicken, ein Video anzusehen oder ein Formular auszufüllen.

Zu den Werkzeugen, die in dieser Phase eingesetzt werden können, gehören beispielsweise ein atomarer Styleguide und ein definiertes Abstandssystem für Inhaltselemente. 

„In meinem atomaren Styleguide definiere ich alles und lege es in einer Inhaltsbibliothek als ‘single source of truth‘ ab. Auf diese Weise muss ich bei Aktualisierungen nur dort Änderungen vornehmen und kann dadurch Folgefehler ausschließen.“ 

Abgeschlossen wird dieser Prozess durch die Betrachtung der verschiedenen Benutzerströme der Website. Die Benutzerströme zeigen, wie Kunden von Punkt A zu Punkt B zu Punkt C gelangen, sei es, dass sie etwas kaufen, ein neues Konto anlegen oder ein altes aktualisieren. Durch Fragen wie „Wo sind die wichtigsten Punkte, an denen Kunden bei Prozess abspringen? Was wäre der beste Weg, damit sie sich sicher fühlen, wenn sie ihr Passwort noch einmal überprüfen oder eine Vorschau ihres Warenkorbs sehen möchten, während sie einkaufen?“, können alternative Pfade und Lösungswege in Betracht gezogen werden.

Der letzte Schritt: Abwägen der Bedürfnisse von Benutzern, Entscheidungsträgern und Entwicklern

Der letzte Schliff an den Wireframes und vor dem Prototyping kann knifflig sein. Es geht darum, die richtige Balance zwischen allen zu finden, die sich das Wireframe ansehen werden - Nutzer, Entscheidungsträger und Entwickler. Steffi sagt, dass jede Zielgruppe auf unterschiedliche Aspekte des Wireframes Wert legt, obwohl der Kunde natürlich das letzte Wort hat.

Der Kernpunkt bei Entscheidungsträgern, denen vor allem das Endergebnis oft am wichtigsten ist, ist die Kommunikation. Es ist elementar, ihnen das "Warum" hinter den Entscheidungen zu erläutern und zu betonen, dass eine "hübsch aussehende" Webseite nicht ausreicht. Das ist nicht das, was die Kunden dazu bringt, auf deiner Seite zu bleiben. Wenn man sich darauf konzentriert, wie das Wireframing bewusst Raum für zukünftiges Wachstum und neue Funktionen schafft, lassen sich später im Designprozess wiederkehrende Fallstricke vermeiden.

Bei den Entwicklern liegt der Schwerpunkt auf einer anderen Ebene. Bevor das Wireframe an die Entwickler weitergeben wird, sollten die Arbeit noch einmal final überprüft werden. Entwickler sind sehr detail- und informationsorientiert und legen großen Wert auf gut definierte und saubere Wireframes. 

Lege eine langfristige Grundlage für mehr Kundenzufriedenheit

Beim Wireframing geht es nicht nur um eine ansprechende visuelle Präsentation der Informationen auf deiner Website. Indem du von Anfang an die Sichtweise deiner Kunden berücksichtigst, legst du mit dem Wireframing eine solide Grundlage, um das Engagement, die Konversionen und die Kundenzufriedenheit auf deiner Website langfristig zu verbessern.

Bleib dran für unseren nächsten Beitrag in dieser b13-Design-Serie, in dem wir uns mit dem Prototyping beschäftigen. Wende dich an b13, um Ihr Projekt mit nutzerorientierten Wireframes auf Erfolgskurs zu bringen.