Ein Kompass für Seitenlayouts

Wie Sie mit Ihrer Benutzeroberfläche eine Geschichte erzählen und den Benutzer durch die Seite führen.

Als wir das Design-System für die digitale Transformation eines Unternehmens erstellten, wollten wir sicherstellen, dass die Designer, die über alle Arten von Teams verteilt waren, ein gutes und konsistentes mentales Modell hatten, als sie an den Schnittstellen eines neuen Produkts anfingen.

Ein Ansatz bestand darin, Wireframes für die Navigationsarchitektur zu erstellen. Da das Unternehmen jedoch mehrere unterschiedliche und fachspezifische B2B- und B2C-Anforderungen hat, sind wir zu dem Schluss gekommen, dass wir noch nicht alle Möglichkeiten abschätzen können, und haben uns entschlossen, diese zu entwickeln die ersten produkte kreieren.

Wir wollten immer noch grobe Richtlinien für die Konsistenz der Navigation geben und haben einen Rahmen für die Teams ausgearbeitet, um sicherzustellen, dass der Benutzer immer gut durch den Inhalt geführt wird. Wir haben es Component Compass genannt. Im Wesentlichen handelt es sich um ein Framework, das Sie beim Layout der Seite unterstützt, die Sie gestalten möchten.

WAS

Ein Kompass gibt Ihnen Anweisungen und zeigt Ihnen, wohin Sie gehen müssen, wo Norden, Osten, Süden und Westen liegen.

Der Component Compass macht das selbe. Sie erfahren nicht, wohin Sie gehen müssen, sondern wo Sie Elemente in einer Benutzeroberfläche positionieren müssen. Es ist ein Leitfaden, um ein Objekt, das Thema dieser Seite, als eine Geschichte statt in Fragmenten zu erzählen.

Die Elemente einer Schnittstelle brauchen einander, weil sie aufeinander aufbauen. Eine Auflistung der Zutaten macht nicht viel Sinn, ohne vorher zu wissen, welches Gericht Sie daraus erhalten, auch wenn dies das ist, was Sie zum Kochen brauchen.

Der Komponentenkompass fordert Sie nicht auf, nach Norden zu gehen, sondern weist Sie an, die Dinge entweder in die Richtung „Verstehen und Überblicken“, „Produkt und Funktion“, „Persönlich und Emotional“ oder „Konsumieren und Detaillieren“ zu lenken.

Die Anweisungen kommen von und führen zu einem schönen Leseerlebnis. Von oben nach unten, von links nach rechts.

WARUM

Diese Methode kann nützlich sein, nachdem Sie herausgefunden haben, worum es auf den Seiten Ihres Produkts geht. Ich selbst bin ein großer Fan von OOUX, daher würde es für mich beginnen, nachdem ich die Objekte meines Produkts und den Inhalt herausgefunden habe, der zu diesen Objekten gehört (Kerninhalt, Metadaten und CTAs).

OOUX gibt uns bereits ein Ranking für die wichtigsten und unwichtigsten Dinge, die das Objekt ausmachen. Dies spiegelt jedoch nicht vollständig wider, wie die Benutzeroberfläche angeordnet ist, wie die Elemente aussehen, was groß oder klein ist, welche Dinge Sie anschrien und was noch zu entdecken ist.

Auch wenn aus einer Sicht etwas die wichtigste Information für dieses bestimmte Objekt ist, möchten Sie möglicherweise nicht, dass es das erste ist, was der Benutzer aus einer anderen Sicht sieht. Es könnte ihn desorientieren, oder vielleicht macht es nur Sinn, wenn zuerst ein bestimmter Kontext aus anderen Elementen hervorgeht.

WIE

Ich werde die Anweisungen so vorstellen, wie Sie sie lesen würden, oder sie in diesem Fall erleben:

TOP: Verständnis und Übersicht

Dieser Abschnitt befindet sich ganz oben auf einer Seite. Es gibt Ihnen einen Überblick darüber, wo Sie sich gerade befinden, und gibt Ihnen einen Überblick darüber, was Sie hier erhalten.

Hier möchten wir die Geschichte vorstellen, die der Benutzer erleben wird, um nicht nur zu zeigen, was das Produkt zu bieten hat, sondern um den Benutzern auch die Entscheidung zu ermöglichen, ob sie am richtigen Ort sind oder nicht.

Die Frage ist: „Welche Inhaltselemente können erklären, was hier zu finden ist und wie laut sie sein müssen, damit sie als Erstes angesehen werden, wenn jemand auf dieser Seite ankommt?“.

Womit wir den Benutzer noch nicht konfrontieren wollen, sind Details. Es geht um die Entscheidung zu bleiben oder zu gehen, also werden Sie vorstellen wollen, aber nicht erklären.

LINKS: Produkt und Funktion

Die meisten von uns lesen einen Text und scannen auch ein Bild oder eine Seite von links nach rechts (es gibt kulturelle Unterschiede, aber ich werde mit denen, für die ich entwerfe, weitermachen) links.

Der Komponentenkompass schlägt vor, Dinge zu platzieren, die die Konversation dort beginnen. Es unterscheidet sich von der Hauptrichtung, da Sie die Geschichte nicht mehr nur vorstellen, sondern sie auch zu erzählen beginnen. Es ist nicht der Titel des Kapitels, sondern die ersten Sätze, die Ton, Szene und Kontext bestimmen.

Dies kann ein Bild der Sache sein, mit der der Benutzer interagieren möchte, oder ein Text über ein Thema, das Sie einführen müssen, bevor eine Interaktion Sinn ergibt. Wenn Sie jedoch "Linksherumstellen" sagen, bedeutet dies nicht, dass sich das Dokument nicht über die gesamte Breite einer Seite erstrecken kann. Es bedeutet nur, dass es links beginnt und so weit wie nötig reicht.

Ich bezeichne diese Richtung als "Produkt und funktional", weil die Dinge, die Sie hier eingeben, das Produkt ausmachen. Es geht darum, was Sie als Team oder Unternehmen „verkaufen“ oder was Sie Ihren Benutzern bieten möchten.

RICHTIG: Persönlich und emotional

Nachdem die Benutzer wissen, wo sie sich befinden und womit sie es zu tun haben, können wir beispielsweise die möglichen Interaktionen aufzeigen. Links haben wir über unser Verkaufsbedürfnis und die geschäftliche Sicht nachgedacht. Rechts wollen wir mit der persönlichen Notiz enden. Wir stellen Fragen wie: „Was möchte der Benutzer hier tun? Wie wird er mit unserem Produkt interagieren wollen? “

Wir werden nicht nur eine kohärentere Geschichte erzählen und informieren, bevor wir Handlungsmöglichkeiten aufzeigen, sondern auch unseren Benutzern zeigen, dass sie an sie gedacht sind. Das Letzte, was Sie sehen, bleibt in Ihrem Gedächtnis viel einfacher als das Erste. Daher möchten wir den Benutzern mitteilen, dass ihre Bedürfnisse im Mittelpunkt unseres Produkts stehen, indem wir diese Dinge als „Letztes“ anzeigen. Wir hinterlassen den Nutzern etwas, das sie betrifft und das eine viel schönere Geschichte erzählt als nur Fakten.

Die Elemente hier müssen nicht für Interaktionen sein, sie können auch nur weitere Informationen zum Objekt geben. Diese Informationen sollten wiederum für unsere Benutzer von hoher Relevanz sein (wie zum Beispiel Vorteile) und Aufschluss darüber geben, was das Produkt auf einer persönlicheren Ebene mit ihnen zu tun hat.

UNTEN: Konsum und Detail

Grundsätzlich haben wir uns bereits um die wichtigsten Dinge in Bezug auf unser Produkt gekümmert. Wir haben es vorgestellt, erklärt und im Benutzerkontext übersetzt. Trotzdem haben wir es auf eine Weise gemacht, die sich auf den ersten Eindruck konzentriert.

Einige Benutzer können jetzt eine Entscheidung treffen oder sich eine Meinung bilden, aber es wird auch eine gute Menge geben, für die dies nicht ausreicht. Zum Beispiel Leute, die alles wissen müssen, bevor sie sich entscheiden, oder Fans, die einfach nur so viel wie möglich wissen möchten. In der unteren Richtung gehen wir also immer detaillierter auf das Objekt ein.

Abhängig davon, wie viel über das Objekt zu lernen ist, können Sie entweder wiederholen, was Sie oben bereits gezeigt haben, aber detaillierter, oder Details in Abschnitten von Aspekten (wie der Zutatenliste nach der Beschreibung des Gerichts) angeben, die für sich genommen , wird das Setup vom Component Compass immer wieder verfolgen.

Unabhängig davon, welche Option für Ihr Produkt geeignet ist, denken Sie daran, dass alles, was Sie weiter unten zeigen, auf dem Wissen aufbaut, das Sie dem Benutzer zuvor in die oberste Richtung vermittelt haben.

Auf diese Weise bedienen Sie zwei große Gruppen von Benutzertypen. Diejenigen, die sich nur schnell mit etwas befassen wollen, weil sie vielleicht schon die Details kennen und diejenigen, die mehr lernen müssen oder wollen, bevor sie handeln.

Wie Sie sehen, funktioniert der Component Compass mehr mit einer Kombination von Richtungen. Also nicht nach Norden, sondern nach Nordosten.

EINIGE LETZTE WÖRTER

Sie denken vielleicht, dass dies alles ziemlich offensichtlich ist und Sie tun es bereits aus gesundem Menschenverstand und bekannten Mustern. Es ist jedoch wichtig zu wissen, warum sich an bestimmten Stellen Schnittstellenelemente befinden. Diese Entscheidungen wurden aus Gründen getroffen und können mit ihnen erklärt werden. Natürlich wird es immer etwas geben, bei dem diese Methode möglicherweise nicht funktioniert, und das ist in Ordnung, wenn Sie einen soliden Grund dafür haben, aber das ist auch der Punkt, den ich ansprechen möchte. Eine Ausnahme hat einen Grund sowie diesen Rahmen, den Sie als Richtlinie betrachten können.