Verständliches Dashboard-Design für komplexe Werbemanagementsysteme

Appodeal arbeitet mit einem herausfordernden und schnell wachsenden Markt für die Monetarisierung mobiler Anwendungen zusammen. Daher gibt es nicht so viele Freiheiten in den Schnittstellenlösungen unseres Designteams, und die funktionalen Anforderungen sind ziemlich schwierig und ändern sich ständig.





Appodeal Dashboard ist eine einzige Symbolleiste für die Arbeit mit Werbung in Anwendungen, die praktische Analysemechanismen bietet und durch die Sie schnell Zahlungen direkt tätigen können. Im März 2018 wurden Dashboards im neuen Design um zwei wichtige Werkzeuge ergänzt: Segmente (zum Trennen von Teilen des Publikums) und Platzierungen (zum Bestimmen der Werbeplätze in mobilen Anwendungen). Und im Oktober haben wir das Demand Control Center (DCC) eingeführt, mit dem Sie Netzwerke verwalten und die Kontrolle über den Wasserfall erlangen können. Wir haben uns entschlossen, unsere Erfahrungen bei der Gestaltung des Dashboards zu teilen und über die Entwicklungsstufen zu sprechen.

Warum brauchen wir ein neues Dashboard?


Im November 2015 wurden die Dashboards mit der Entwicklung funktionaler Funktionen erweitert und passten nicht mehr in das ursprüngliche Seitenlayout. Links und Unterabschnitte verwirrten die Benutzer, die Navigation wurde unbequem, es musste nach Platz für neue Abschnitte gesucht werden. Darüber hinaus erforderte die zusätzliche Funktionalität des Serverbefehls Aufmerksamkeit. Daher war das alte Design nicht universell und nicht für Skalierungsaufgaben geeignet.


Was 2015 passiert ist

Etwa zur gleichen Zeit traten auf der Website des Unternehmens ähnliche Probleme auf, aber wir werden nicht näher auf die Details dieser Geschichte eingehen.

Was soll das neue Dashboard sein?


Wir haben nicht nach einer schönen Schnittstelle gesucht - es war wichtig, die Grundlage für eine langfristige Entwicklung zu legen. Die Designer und Designer führten eine detaillierte Analyse der Dashboard-Abschnitte durch und formulierten mehrere Aufgaben, die als Ausgangspunkt für die Arbeit dienen sollten:
  • Helles Design im Stil des Unternehmens
  • Skalierbarkeit für mehrere Jahre
  • Adaptiver Layout-Ansatz
  • Einfache Elemente, die sich in komplexe verwandeln lassen
  • Vollständige Zurückweisung von Rastergrafiken
  • Typische Benutzeroberfläche für ähnliche Werkzeuge verwenden
  • Einfache Interaktion mit Entwicklern


Ein Beispiel für ein überladenes altes Menü mit Unterabschnitten und eine einfache Navigation mit Unterabschnitten in einem neuen Design:



Achten Sie auf die riesige Fußzeile links, die das Design der Landing Page des Unternehmens widerspiegelt und den Dashboard-Bereich visuell überlastet.

Was waren die Schwierigkeiten?


Der Prozess der Entwicklung und Implementierung eines neuen Designs war nicht wolkenlos. Was in einigen Monaten zunächst für uns machbar erschien, war für uns machbar.

1. Es war nicht möglich, die gesamte Funktionalität sofort umzugestalten. Bei der Zusammenarbeit mit Produktdirektoren, Designern und Designern gingen die Entwickler von der Erstellung vieler Seiten aus.

2. Wir brauchten einen erkennbaren, aber gleichzeitig leichten Designstil, so dass Benutzer, die in der Übergangszeit mit beiden Versionen der Benutzeroberfläche arbeiten, keine großen Schwierigkeiten hatten.

3. Es war notwendig, einen Satz universeller Basis- "Steine" vorzubereiten, so dass auch nach einigen Jahren Schnittstellen daraus erstellt werden konnten. Dies gilt sowohl für Gestaltungselemente als auch für Code.

4. Die Corporate Identity des Unternehmens bildete sich weiter fort und wir waren nicht sicher, ob es vollständig ist. Deshalb war es uns wichtig, ein flexibles Design zu schaffen, das in der Zukunft schnell und ohne großen Aufwand modifiziert werden kann.

5. Das anpassungsfähige Layout und folglich die Verfügbarkeit aller Funktionen, auch auf dem Smartphone-Bildschirm, haben sowohl das modulare Raster der Seiten als auch das gesamte Design stark beeinflusst.


Dieselbe Seite auf verschiedenen Bildschirmen.

Team


Nach einer klaren Präsentation der Materialien mit den Ergebnissen der ersten Analyse- und Konstruktionsskizzen erhielten wir eine vollständige Karte, um die Pläne im Rahmen der Anforderungen umzusetzen. Gleichzeitig wussten wir noch nicht, wie viel Arbeit von uns erwartet wurde, und bewerteten das Design anhand der vorhandenen Abschnitte. Es kommt oft vor, dass ich heute das Website-Menü in drei Abschnitte einplante und morgen in jedem davon drei Unterabschnitte finden. Da die Mitarbeiter der Entwickler sehr beschäftigt waren und wir das Layout eines neuen Designs mit fortschrittlichen Techniken benötigten, fanden wir unverzüglich einen Layout-Designer, der die Verbindung zwischen dem Designer und dem Entwickler herstellte. Darüber hinaus ist es einfacher geworden, über das Thema Anpassungsfähigkeit, geringfügige Änderungen und Modelleinheiten zu kommunizieren, da solche Elemente im Code einfacher, schneller und anschaulicher als mit Hilfe von Entwurfstools erstellt werden.

Was ist das ergebnis




Dashboard-Bildschirme in neuem Design

Seit mehr als 2 Jahren haben wir über 90 Layouts und Variationen von Dashboard-Seiten erstellt und umgestaltet. Irgendwann wurde es einfacher, Entscheidungen zu treffen, denn beim Entwerfen einer Benutzeroberfläche begannen wir, über Kombinationen typischer Formen, Blöcke mit Schaltflächen, Schaltern, Registerkarten und manchmal sogar ganze Seiten nachzudenken, die integriert wurden und zu neuen Bildschirmen des Systems wurden.
Wir sind auf dem Weg zu einem vollwertigen Design-System. Daher ist das gesamte Design zunächst in Form einer großen Liste relevanter Seiten in HTML mit einem Minimum an Skripts vorhanden. Ein solcher Abschnitt mit Referenzen steht allen Entwicklern zur Verfügung. Es ist leicht, die erforderlichen Elemente zu finden und anzuzeigen.

Wenn Sie beispielsweise eine generische Tabellenseite entwickeln, wird der Designer nicht mehr benötigt. Entwickler verwenden Git-Code, um eine nahezu hundertprozentige Übereinstimmung mit dem Design zu erreichen, wobei das adaptive Layout berücksichtigt wird.

Während des Vorbereitungsprozesses gibt es einen vollständigen Satz aller UI-Dashboards in Form einer Datei in Figma, die Produktmanagern und Entwicklern beim anfänglichen Prototyping helfen werden. Sie können alle Eigenschaften eines Objekts, Symbols oder einer Gruppe ohne Quellcode sehen.


Für Kontextmenüs und Situationssymbole verwenden Sie Fontawesome

Rückmeldung


Das Wichtigste für einen Interface Designer ist das Feedback der Benutzer. Mit der Erweiterung der neuen Campaign-Oberfläche, dem vorletzten Monster in einem veralteten Design, haben wir ein System für das Sammeln schneller Überprüfungen und Bewertungen für die neue Funktionalität eingeführt. Nachdem wir größtenteils sehr gute Noten erhalten haben, haben wir einige wichtige Schlussfolgerungen für uns gezogen: Erstens waren wir von der Richtigkeit der gewählten Richtung und des Arbeitsplans überzeugt; Zweitens wurde die resultierende Schnittstelle bereits nach wenigen Monaten basierend auf den Feedback-Ergebnissen verfeinert und machte sie noch komfortabler. Drittens haben sie verstanden, dass das Testen und Feedback selbst für eine derart hochspezialisierte Schnittstelle zu vielen neuen Ideen führen kann.

Was weiter


Jetzt arbeiten wir an einem neuen visuellen Stil des Unternehmens und verfolgen die Entwicklungsstrategien des Marktes, Trends und Konkurrenten. In dieser Situation bin ich für das Dashboard völlig ruhig, da wir nicht einen einzelnen Pixel im Design manuell neu streichen müssen. Im Code wird alles einheitlich und leicht an das Markenbuch des Unternehmens angepasst, einschließlich neuer Farbtöne und Schriftarten.

In Kürze erscheint eine aktualisierte mobile Anwendung, mit der Sie die meisten Dashboard-Aufgaben für tragbare Geräte in einer ursprünglicheren Form ausführen können. Unsere Website und unser Blog ändern sich allmählich und werden auf die neuen progressiven Plattformen Divi Builder und Ghost.io umgestellt. Wir erproben neue Ansätze für die Entwicklung. In diesem Jahr werden wir den klassischen Ansatz für Designprozesse aufgeben, indem wir zu Figma wechseln und Kanban-Boards in Jira verwenden.

Infolgedessen ist es uns gelungen, eine einfache und bequeme Basis für das Design aller Schnittstellen zu schaffen, während die einzigartigen Merkmale der Kraft und des Vertrauens der Marke Appodeal erhalten bleiben. Ich hoffe, dass diese Erfahrung den Designern und Entwicklern des Unternehmens helfen wird, sich in die richtige Richtung zu entwickeln, und den Benutzern, mehr für mobile Werbung zu gewinnen.

Autor: Pavel Savinsky, Designteamleiter @ Appodeal.

Jetzt auch beliebt: