Wenn Sie ein Produktmerkmal neu entwerfen, identifizieren Sie den Bedarf und iterieren Sie dann - viel.

Vor dieser Version gab es keine Möglichkeit, eine Vorschau von Optimizely Experimenten zu sehen, die auf Zielgruppen ausgerichtet sind, denen Sie nicht angehören. Wenn Sie zum Beispiel in den USA leben und Ihr Experiment auf Besucher aus Japan ausgerichtet war, konnten Sie das Experiment nicht sehen. Dies stellte ein Problem beim Testen und Debuggen von Experimenten dar.

In diesem Beitrag beschreibe ich unseren Designprozess und die Entscheidungen, die wir bei der Entwicklung dieser Funktion getroffen haben, um einen Einblick zu geben, wie Produktfunktionen bei Optimizely konzipiert, entwickelt und veröffentlicht werden.

Das neu gestaltete Vorschautool von Optimizely, das auf Wikipedia.com als Beispiel verwendet wird.

Beginnen Sie mit dem Problem

Alle neuen Funktionen bei Optimizely beginnen mit der Identifizierung des Problems. Im Fall von Impersonation hatten uns Kunden mitgeteilt, dass sie Schwierigkeiten haben, ihre Targeting Experimente zu verwalten. Insbesondere, wenn sie viele Experimente haben, die auf verschiedene Zielgruppen ausgerichtet sind, ist es schwer zu wissen, welche Inhalte jedes Mitglied der Zielgruppe sieht.

Ein Keimling einer Idee

Mit einem klaren Problem vor Augen machte das Feature-Team ein Brainstorming über Lösungen. An diesem Prozess waren Ingenieure, Product Manager und Designer beteiligt, die allesamt Ideen skizzierten und beisteuerten. Wir hatten zahlreiche Ideen, aber alle waren sich einig, dass das Vorschau-Tool um die Möglichkeit erweitert werden sollte, sich als ein anderer Benutzer auszugeben (siehe Skizze unten). Diese Funktion ist eine natürliche Ergänzung, denn die Vorschau ist für die Qualitätssicherung von Experimenten gedacht und bietet die Möglichkeit, alle Ihre Experimente auf einmal zu sehen.

Die erste Skizze, die die neue Impersonate-Funktionalität beschreibt.

Bessere Skizzen

Mit einer grundlegenden Vorstellung davon, wie dies funktionieren würde, wurde es meine Aufgabe, die Funktion vollständig zu entwerfen. Ich begann damit, verschiedene Möglichkeiten zu skizzieren, wie die Funktion funktionieren könnte. Mein Ziel war es, herauszufinden, wo diese neue Benutzeroberfläche hingehört und wie die Benutzer mit ihr interagieren würden. Es ging nicht darum, jeden Winkel des Tools zu durchdenken - das würde später kommen.

Verfeinerte Skizzen des neuen Vorschau-Tools.

Interaktive Mockups

Mit den Skizzen, die mir einen Weg aufzeigten, ging ich zu den interaktiven High-Fidelity-Mockups über. In diesem Stadium war es für mich wichtig, meine Ideen in eine Form zu bringen, mit der ich tatsächlich interagieren konnte. Es ist eine Sache, sich eine statische Skizze anzusehen, aber es ist etwas ganz anderes, sich durch sie durchzuklicken und mit ihr zu interagieren. Ich hätte noch mehr skizzieren können, aber ich konnte mir meiner Designentscheidungen nicht sicher sein, bevor ich sie nicht anwenden konnte. Mein Ziel mit dem interaktiven Mockup war es, die wichtigsten Benutzerinteraktionen festzulegen, die die Funktionsweise des Produkts bestimmen. Dies würde im Wesentlichen als Skelett dienen, dem ich später die "Haut" des visuellen Designs hinzufügen würde. Um dies zu erreichen, habe ich eine statische HTML-Seite programmiert, die wie das Endprodukt aussah und sich auch so verhielt, aber nicht wirklich funktionierte. Ich beschloss, einen HTML-Prototyp zu erstellen, weil:

• Es ist schnell und einfach, Änderungen vorzunehmen (für mich).
• Er läuft im Browser, dem Medium, über das die tatsächlichen Benutzer damit interagieren werden.
• Er kann für Benutzertests verwendet werden.
• Große Teile von HTML, CSS und JS können in der endgültigen Version wiederverwendet werden.

Ich bin bei dem interaktiven Mockup sehr iterativ vorgegangen. Ich identifizierte den schlechtesten Teil der Benutzeroberfläche, arbeitete daran, bis er nicht mehr der schlechteste Teil der Benutzeroberfläche war, und ging dann zu einem neuen schlechtesten Teil über. Irgendwann war der ursprünglich schlechteste Teil wieder der schlechteste, und ich würde ihn weiter verbessern. Wenn ich so arbeite, ist nie etwas "fertig", und ich frage mich ständig: "Was kann man noch besser machen?"

Dieser frühe Screenshot zeigt, wie auffällig die neue Imitationsfunktion war.

Mit einem solchen kontinuierlichen Ansatz kann ich einen Teil der Benutzeroberfläche in einem unvollkommenen Zustand belassen, während ich mich auf etwas anderes konzentriere. Ich habe festgestellt, dass Probleme ganz natürlich auftauchen, wenn ich herumspringe und nicht zu viel Zeit an einer Stelle verbringe. An diesem Punkt bat ich unseren Benutzerforscher, einige kurze Benutzertests mit dem interaktiven Mockup durchzuführen, um Feedback zu erhalten. Das war ungemein hilfreich. Da man beim Entwerfen leicht die Objektivität verliert, ist es gut, eine neue Perspektive auf das zu haben, was ich gerade entwerfe. Dadurch wurden einige Annahmen und Designentscheidungen bestätigt und Bereiche aufgedeckt, an denen noch gearbeitet werden musste.

Versenden Sie es!

Nachdem ich die wichtigsten Probleme, die sich bei den Benutzertests herauskristallisiert hatten, beseitigt hatte, wandelte ich mein Mockup in Produktionscode um und integrierte es in die technische Arbeit, damit die Funktion auch tatsächlich funktioniert. Während dieser Zeit arbeitete ich weiter an der Benutzeroberfläche, bis sie für die Endbenutzer fertig und ausgefeilt genug war.

Iteration nach der Markteinführung

Nach der Einführung der Impersonate-Funktionalität sammelten wir mit Usabilla das Feedback der Benutzer. Wir erhielten eine Reihe von Rückmeldungen, wobei sich die meisten negativen Rückmeldungen auf die Schließen-Schaltfläche (oder deren Fehlen) konzentrierten. Ursprünglich bin ich davon ausgegangen, dass die Benutzer nicht sowohl eine Klappe als auch eine Schließtaste brauchen, also habe ich nur die Klappe eingebaut. Aber nach der Veröffentlichung wollten viele das Vorschautool komplett verwerfen. Nach Abwägung des Feedbacks habe ich beschlossen, es wieder hinzuzufügen.

Nur ein kleiner Einblick

Was ich hier beschrieben habe, erklärt nur ansatzweise den Weg, den Impersonation von der Idee bis zur Fertigstellung genommen hat. In jeden Aspekt der Benutzeroberfläche wurde viel Sorgfalt investiert. Design wird oft als Blackbox betrachtet. Ich hoffe, dieser Beitrag hat Ihnen einen Einblick in die Arbeit gegeben, die hinter der Entwicklung neuer Funktionen steckt.