Einblick: Neues Design & bessere Anordnung des Editors

Unser Unternehmen befindet sich gerade in einer Phase der Veränderung und unsere verschiedenen Produktteams sind gewachsen und machen Fortschritte. Wir haben Fehler gemacht und es stellten sich einige Hindernisse in unseren Weg, aber wir lernen trotzdem gleichmäßige Schritte zur Verbesserung zu machen. Danke, dass Sie den Weg unseres Teams verfolgen. Hier ist ein kleiner Einblick in die Veröffentlichung des Design-und-Struktur-Updates des Drag&Drop-Editors.

Warum haben wir das gemacht?

Unser Editor-Produktteam besteht aus zwei Designern, einem Frontend-Entwickler, einem Backend-Entwickler und unserem Geschäftsführer. Wir fokussieren uns auf drei E-Mail-Editoren: Drag&Drop-, Text- und Html-Editor. Wenn wir uns in Gesprächen darüber befanden, was als Nächstes kommen würde, identifizierten wir ein wiederholt auftretendes Problem, was eine Lösung erforderte: uneinheitliche Benutzeroberflächen in unseren neuesten Funktionen. In den letzten Jahren hat Benchmark einige neue Funktionen herausgebracht: drei E-Mail-Editoren, zwei Anmeldeformular-Baukästen, E-Mail-Engagement-Automatisierung und vor Kurzem die Profi-Automatisierung (Beta). Eine Schwäche war, dass jedes Werkzeug verschiedene Stile hatte, was das Resultat vieler Faktoren war, wie mehrere Designer, mehrere Entwickler, Fehlen einer klaren Gestaltungsrichtlinie, schlechte Übergaben, problematischer Code und so weiter. Manche Variationen waren visuell sichtbar und manche nur im Code zu erkennen.

Mit so viel fehlender Einheitlichkeit war es ein Albtraum für unsere Produktteams Funktionen zu aktualisieren. Ganz zu schweigen davon, dass es unserer Nutzererfahrung schadete und Verwirrung erzeugte, weil nicht klar war, was erwartete Verhaltensweisen und visuelle Hinweise sind. Wie lernt ein Nutzer Ihrer App zu vertrauen, wenn das Resultat einer Aktion zum Ratespiel wird? Wir mussten uns neu organisieren und die Einheitlichkeit der Produkte erreichen, so dass unsere Nutzer weniger Zeit damit verbringen darüber nachzudenken, wie man unsere Software nutzen sollte und sich stattdessen mehr auf die Aufgabe an sich fokussieren können. Aus diesen Gründen identifizierte unser Team zwei Ziele:

1. Aufräumen des Design-Stils und Codes
2. Erzeugen einer reibungslosen Nutzererfahrung über alle unsere aktualisierten Funktionen

Es gab mehrere Bereiche, die in Frage kamen, aber für diese Veröffentlichung haben wir uns entschieden, uns auf ein Stil- und Anordnungs-Update der

Hauptnavigation, aktiven Inhaltsblöcke und Textbearbeitungsleiste zu fokussieren. Jeder Bereich bot seine eigenen Herausforderungen, hier sind also einige dieser Gedanken.

Vereinfachen der Navigation innerhalb des Editors

Die erste Möglichkeit gab es in der Hauptnavigation unseres Editors. Das wurde durch vier Symbole repräsentiert, die jeden Bearbeitungsbereich einteilten. Das vierte Symbol (ein Stift) zeigte, wenn ein Block ausgewählt wurde, aber enthielt keine Optionen, wenn ein Block nicht bearbeitet wurde. Das verbrauchte wertvollen Platz und war eher verwirrend als hilfreich für unsere Nutzer, also entfernten wir es. Wir ersetzten auch die Symbole durch Text, um mehr Klarheit in allen Sprachen zu erreichen. Symbole verbrauchten weniger Platz, aber wir dachten uns, dass es wichtig ist, hier eine klare Beschriftung zu nutzen.

Sich um neun Sprachen Gedanken zu machen ist nicht einfach. Es bedeutet, dass alle unsere Entscheidungen mit zusätzlichen Herausforderungen kommen und wir beim Design immer das schlimmste Szenario im Sinn haben müssen. Eine Herausforderung ist, dass unser englischer Text weniger Zeichen nutzt als Sprachen wie Deutsch oder Portugiesisch. In so einem begrenzten Bereich, was passiert, wenn der Text zu lang wird? In zwei Zeilen schreiben? Kürzen? Den Bereich erweitern?

In diesem Fall haben wir das Problem durch die Textgröße und alternatives Verhalten gelöst. Das ist ein kleineres Szenario, aber manchmal wird es zu einer großen Herausforderung, wenn mehrere Faktoren im Spiel sind.

Textbearbeitungsleiste

Da das eine der am häufigsten genutzten Komponente ist, haben wir realisiert, dass das Updaten und Einteilen unserer Symbole viel dazu beitragen könnte, um die Nutzererfahrung zu verbessern.

Wir änderten auch das Verhalten der Leiste, damit sie sich besser an verschiedene Bildschirmgrößen und Geräte anpassen kann. Die ganze Leiste wird solange angezeigt bis der Nutzer die Browsergröße ändert. In diesem Moment klappt sich jede Option in ein Menü zusammen, das durch einen Klick auf “Mehr” geöffnet werden kann. Das alte Design störte den Arbeitsbereich des Nutzers, indem der Bereich nach unten gedrückt wurde, während das aktualisierte Design das nicht macht.

Aktive Inhaltsblöcke

Das ist der Bereich, auf den wir unsere Arbeit fokussiert haben. Wenn wir Benutzeroberflächen-Elemente von unseren neuesten Anmeldeformular-Baukästen angewandt und Fehlende erstellt haben, half es bei der Einheitlichkeit des Stils und gab den Inhaltsblöcken mehr Platz zum Atmen. Unter der Oberfläche wurde der Code aufgeräumt und besser strukturiert, damit er modularer ist und schneller läuft (danke an unseren Frontend-Entwickler!).

Das zweite Problem war die Organisation und Einheitlichkeit zwischen den Blöcken selbst. Wenn Sie alle Blockoptionen nebeneinander platziert hätten, wäre die Struktur eine andere gewesen. Unsere Nutzer mussten sich an jeden einzelnen Block neu anpassen, also haben wir alle standardisiert.

Unsere größte Änderung löste Probleme mit der Anzahl an Optionen, die gleichzeitig gezeigt wurden und den Nutzerfluss beeinträchtigten. Manche Blöcke wurden sehr aufgeblasen und waren nicht für die Zukunft skalierbar. Für diese Blöcke teilten wir die Optionen in zwei Reiter basierend auf der Funktion und dem Nutzungslevel innerhalb des Reiters. Der erste Reiter enthielt Optionen in Bezug zum ganzen Block und der zweite Tab enthielt die Optionen für die Elemente innerhalb dieses Blocks.

Was steht als Nächstes an?

Jede Menge! Unser Team hat kleine Schritte hin zum Gewinnen von tieferen Nutzereinsichten gemacht, indem zu der “Anstehende Aufgaben”-Methodik gewechselt wurde. Wenn Sie es noch nicht gemacht haben, empfehle ich, dass Sie sich Intercoms eBook ansehen.

Sie beschreiben es wie folgt: Die Leute kaufen Produkte und Dienstleistungen, um eine Aufgabe zu erledigen. Der Schlüssel zum Erfolg ist, die wirkliche Aufgabe zu verstehen, für die Kunden Ihr Produkt nutzen.

Dieses Jahr wird voll von spannenden Neuerscheinungen sein. Hoffentlich werden wir bald darüber sprechen! Bis zum nächsten Mal…