Building Block Design: eine modulare Designstrategie für UXer

Ein Artikel, der dabei hilft, die Lücken modularer Designmodelle aus UX-Sicht zu schließen.

Ich fange mit einer Geschichte an

Wenn Sie Geschichten hassen, sollten Sie diesen Teil überspringen. Es geht um eine UX-Designerin, die beauftragt wurde, eine modulare Designstrategie für ihre Organisation zu entwickeln. Sie hat kurze braune Haare und blaue Augen. Wenn Sie es noch nicht erraten haben, bin ich dieser UX-Designer.

Vor ungefähr acht Monaten hat sich unser Team auf eine modulare Entwurfsstrategie namens objektorientiertes UX (OOUX) gestürzt. Im Gegensatz zu anderen umfassenden modularen Systemen fordert OOUX Sie auf, sich auf die Modularisierung Ihrer Kerninhaltstypen zu konzentrieren - was OOUX Objekte nennt - und sich genau anzuschauen, wie diese Objekte zueinander in Beziehung stehen. Dieser Prozess hilft dem Designteam, inhärente Instanzen der Kontextnavigation freizulegen und auf konsistente UI-Module hinzuarbeiten.

Nun, das ist großartig für das Entwerfen von Informationsarchitekturen und Musterbibliotheken, aber was ist mit dem Entwerfen von Erfahrungen? Schließlich ist die Mobilisierung Ihrer Inhalte nur die halbe Miete. Wenn Sie an der vordersten Front von UX stehen, müssen Sie sich fragen, warum und wie.

Das Warum und das Wie

Sie könnten sich sagen: "Erzählen Sie mir nicht warum und wie! Ich bin ein UX-Forscher, verdammt noch mal! Ich esse warum und wie zum Frühstück. “Lassen Sie mich das erklären.

Ich spreche nicht von Strategie auf Feature-Ebene. Ich spreche nicht von Prozessabläufen, Wireframes und Prototypen. Ich spreche von einer Strategie auf Anwendungsebene. Weißt du, was wir immer tun sollten, aber irgendwie nie Zeit dafür haben? Und ich spreche davon, es zu einem integralen Bestandteil unserer Herangehensweise an unsere anderen Strategien wie das modulare Design zu machen.

Lassen Sie uns ein Beispiel durchgehen, um Ihnen ein wenig mehr Kontext zu geben. Angenommen, wir entwerfen eine Dating-App, bei der eines der Kernelemente des Inhalts ein Profil ist. Beim modularen Design würden wir fragen: "Wo könnten diese Inhalte in der Benutzeroberfläche angezeigt werden?" - und basierend auf unserer Antwort würden wir Module für jedes dieser Szenarien entwerfen. Vielleicht würden wir ein Profil entwerfen, das in einer Liste angezeigt werden kann, oder ein Profil, das die gesamte Anzeige einnimmt. Informationsarchitektur. Muster. Check check.

Ein

Aber jetzt, wo wir uns entschieden haben, was passiert, wenn wir unweigerlich feststellen, dass wir uns überlegen müssen, warum jemand überhaupt ein bestimmtes Profil sehen möchte? Und wie würde dieses Profil für diese Person aussehen? Implementieren wir diese Strategien nachträglich und hoffen, dass nichts kaputt geht?

Ich hoffe, Sie schütteln den Kopf, denn die Antwort ist ein klares Nein.

Anstatt direkt mit der Entwicklung unserer Module zu beginnen, sollten wir ein strategisches Framework aufbauen, das unsere Entwicklungsbemühungen in jeder Hinsicht vorantreiben kann. Anstatt das Gesicht unseres Inhalts zu definieren - das Material, das in der Benutzeroberfläche angezeigt wird - sollten wir zunächst definieren, wie und warum dieser Inhalt unterstützt wird. Dies wird als Bausteindesign bezeichnet.

Geben Sie den Bausteinentwurf ein

Anstatt wie bei anderen Modellen zunächst über den Inhalt Ihrer Module nachzudenken, sollten Sie sich bei der Erstellung der Bausteine ​​auf die Strategie konzentrieren, die hinter diesem Inhalt steht.

Lassen Sie beim Entwerfen von Bausteinen die Strategie den Rahmen für das Entwerfen bereitstellen. nicht umgekehrt.

Erst nachdem Sie Ihre zentralen UX-Strategien definiert haben - den Rahmen, in dem sich Ihre Inhalte befinden - können Sie festlegen, wie diese Inhalte auf der Benutzeroberfläche dargestellt werden. Die Gesamtstrategie für jeden Kerninhalt ist Ihr Baustein. Zusammen definieren Ihre Bausteine ​​die Benutzeroberfläche Ihres Produkts.

Das Building-Block-Design ist für UX-Benutzer modular aufgebaut.

Baustein Anatomie

Um diesen Ansatz zur Erstellung aussagekräftiger, strukturierter Inhalte besser zu verstehen, kehren wir zum Beispiel der Dating-App zurück. Nachdem ich nun einen Teil des Kerninhalts in meiner Anwendung identifiziert habe - ein Profil -, ist es an der Zeit, herauszufinden, welche Strategien möglicherweise die Gestaltung dieses Blocks beeinflussen können. Indem wir die Beziehung zwischen anderen strategischen Initiativen und unseren Inhalten untersuchen, können wir kritischer darüber nachdenken, wie wir die Gestaltung und Bereitstellung dieser Informationen angehen.

Die Anatomie des Profilblocks nimmt langsam Gestalt an.

Wenn Sie Beziehungen zwischen Strategien auf Anwendungsebene untersuchen, ist es am besten, auf hoher Ebene zu beginnen und sich nach unten zu arbeiten. Wenn ich beispielsweise Personas als Hauptbestandteil meiner Strategie identifiziert habe, kann ich diese Strategie weiter aufschlüsseln, indem ich Folgendes identifiziere:

  • die spezifischen Personen, die sich mit Profilen beschäftigen;
  • Wo in der App interagieren sie mit diesem Inhalt?
  • ihren Nutzungskontext;
  • die Kernaktionen, die sie für Profile durchführen;
  • und wie oft sie auf diese Inhalte zugreifen.

Es könnte ungefähr so ​​aussehen:

Die Persona-Profil-Beziehung bietet mehr Kontext dafür, wie das Gesicht meines Profilblocks aussieht und sich anfühlt.

Wenn ich ein wenig näher darauf eingegangen bin, warum dieser Inhalt für einen bestimmten Benutzertyp von Wert ist, kann ich kritischer darüber nachdenken, welche Aktionen priorisiert werden müssen und wie das Modul strukturiert sein sollte, um personenspezifische Verhaltensmuster zu fördern. und wo in der Erfahrung muss dieser Inhalt geliefert werden.

Diese Technik ermöglicht Designern, sich auf das Wesentliche zu konzentrieren und sich nicht auf visuelle Attraktivität, Interaktionsverführung und andere Oberflächenmuster zu konzentrieren, die gut aussehen, das tatsächliche Benutzerverhalten jedoch nicht unterstützen.

Wenn ich diese Übung im Rahmen einer zweiten strategischen Initiative wiederhole, werden zusätzliche Erkenntnisse gewonnen. Abhängig von der Anzahl und Komplexität der von Ihnen eingeleiteten strategischen Initiativen kann dies schnell zu einem zeitintensiven Prozess werden. Ich empfehle, mit nicht mehr als zwei Strategien zu beginnen.

Also da hast du es. Ein Beispiel, wie Sie Ihre Füße mit Bausteindesign nass machen. Wenn Sie der Meinung sind, dass dies eine hilfreiche Übung für Ihr Designteam ist, lesen Sie die nachstehende Kurzanleitung, um weitere Tipps zu erhalten. Und natürlich würde ich gerne Ihre Gedanken zu allen modularisierten Dingen hören. Geben Sie unten Ihre Kommentare ein oder kontaktieren Sie LinkedIn.

Schnellstartanleitung

Ich habe herausgefunden, dass viele Modelle mit modularem Design einfach darauf abzielen, ihren Lesern umsetzbare Aufgaben zuzuweisen. Lassen Sie mich daher kurz auf diese wertvolle Information eingehen:

Schritt 1: Strategiebestandsaufnahme.

Wir führen Inhalts- und Komponenteninventare durch. Warum also nicht ein Strategieinventar? Erstellen Sie eine Liste aller vorhandenen Strategien auf Anwendungsebene. Beispiele hierfür sind: Personas, Daten, Verwendungskontext und Gestaltung der menschlichen Umgebung, Reaktionsfähigkeit usw. Dies ist eine gute Gelegenheit, um eine Pause einzulegen und die Frage zu stellen, ob wir eine solide Strategie für unsere Anwendung haben. Wenn die Antwort Nein lautet, ist es Zeit zur Arbeit gehen.

Zu erledigen: Rallye-Teammitglieder, um selbständig ihre eigenen Strategiebestände zu erstellen.

Schritt 2: Definieren Sie Ihren Kerninhalt.

Dies ist das, was Ihre Benutzer in Ihrer Anwendung tun. Um dies herauszufinden, nehmen Sie sich etwas Zeit für ein Brainstorming mit Ihrem Team. Stellen Sie sich Fragen wie: „Wonach suchen meine Benutzer? Aussicht? Herunterladen? “Wenn Sie einen Kerninhalt identifiziert haben, schreiben Sie ihn auf ein Blatt Papier und hängen Sie ihn an die Wand.

Aufgaben: Führen Sie eine erste Brainstorming-Sitzung mit Ihrem Team durch.

Schritt 3: Definieren Sie das Wie und Warum.

Nachdem Sie Ihre Strategien und Kerninhalte auf Anwendungsebene ermittelt haben, ist es an der Zeit, beide zusammenzubringen! Kehren Sie zu einem Folgetreffen in Ihren Brainstorming-Raum zurück und stellen Sie sicher, dass Ihr Team seine Strategie-Inventare mitbringt. Lassen Sie für diesen Teil des Prozesses Ihre Teamstrategie Haftnotizen zu allen Kerninhalten platzieren, auf die sich diese Strategie auswirken kann.

Zu erledigen: Führen Sie ein Brainstorming mit Ihrem Team durch.

Schritt 4: Die Anatomie eines Bausteins.

Es ist Zeit, sich zu teilen und zu erobern. Weisen Sie den Teammitgliedern eine Handvoll Hauptinhaltstypen zu - oder Bausteine ​​- und lassen Sie sie die Anatomie dieses Inhalts durchlaufen.

Zu erledigen: Weisen Sie jedem Teammitglied mehrere Inhaltstypen zu. Dieses Teammitglied sollte die Anatomie dieses Inhalts definieren.

Schritt 5: Ausrichten, ausrichten, ausrichten

Als letzten Schritt stellen Sie die Bande in Form einer zurückhaltenden Präsentation wieder zusammen, in der jedes Teammitglied die Anatomie seiner Bausteine ​​vorstellt. Sparen Sie am Ende Zeit für Fragen, Abstimmung und Entscheidungen über die nächsten Schritte, um die einzelnen strategischen Komponenten jedes Bausteins voranzutreiben.

Zu erledigen: Planen Sie eine Zeit für die Teammitglieder ein, um ihre Bausteinanatomie zu präsentieren.

Dieser Artikel wurde Ihnen von RUXERS zur Verfügung gestellt. RUXERS ist eine Community von echten Anwendererfahrungsführern, die die neuesten Entwicklungen in Bezug auf Design, Anwendererfahrung, Benutzerfreundlichkeit und Forschung teilen und diskutieren. Wir sind auf Twitter - mach mit!