Einführung von Instapage 3.0: Intelligenter, schneller, mutiger und einfach besser.

Das Instapage-Team hat über viele Jahre hinweg hervorragende Arbeit beim Aufbau unserer Benutzeroberfläche geleistet. Wir haben jedoch festgestellt, dass es den Bedürfnissen unserer Benutzer nicht mehr entspricht und es an der Zeit war, etwas zu ändern.

Przemek Cholewa, Instapage Design System Lead, skizziert die Denkweise des Teams während dieses Prozesses der Aktualisierung der Benutzeroberfläche:

Wir wussten, dass eine Änderung der Wahrnehmung erforderlich war, um Produktivität und Leistung zu verbessern und gleichzeitig die Benutzerfreundlichkeit zu gewährleisten. Unser Team hat verstanden, wie die Benutzeroberfläche den Benutzer entweder ablenken oder ihm helfen kann, sein Ziel zu erreichen. Das Formular sollte der Funktion folgen, nicht umgekehrt. Wir wollten, dass das Instapage Design System weniger auffällig und minimalistischer und funktionaler ist.

Historisch gesehen hatten wir nicht den Luxus an Zeit, Ressourcen und Wissen, um ein ausgeklügeltes Designsystem richtig zu implementieren. Jetzt tun wir es, und heute stellen wir die größten Verbesserungen des Teams vor, das dahintersteckt.

(Hinweis: Dies ist nicht die endgültige Entwicklung der Benutzeroberfläche und Sie können in den nächsten Wochen viele Updates erwarten.)

Rauschunterdrückung der Instapage-Benutzeroberfläche

Bei Instapage, glauben wir in iterativen Design und die Arbeit an Design nie getan - es ist ständig weiterentwickelt. Unser erstes UI-Kit wurde von Material Design inspiriert und diente unserem Produkt gut, aber im Laufe der Zeit stellten wir fest, dass das ursprüngliche UI-Kit nicht alle Komponenten enthielt, die wir brauchten und für das, was Instapage baute, zu einschränkend war.

Was Sie heute mit der neuen Instapage-Benutzeroberfläche sehen, ist eine schöne Geschichte des iterativen Designs in unserem Bestreben, eine sich ständig verbessernde Benutzererfahrung zu bieten. Es begann damit, dass wir unsere Implementierung von Material Design zu einem Übergangs- (und temporären) Designsystem entwickelt haben. Wir nannten es „ Kristall “, da es für mehr Klarheit sorgen sollte.

Crystal zielte darauf ab, Material Design an die Bedürfnisse von Instapage anzupassen, ohne die Designsprache zu sehr zu ändern. Es hat die größte Herausforderung angegangen – alle Designelemente, die wir benötigen, verfügbar und dokumentiert zu haben und ein Angular-Code-Snippet zu haben. Wir haben Mitte 2019 mit der Arbeit begonnen und Ende letzten Jahres abgeschlossen, um mit der Arbeit am letzten Schritt zu beginnen – unserer eigenen Bildsprache namens „ Crystal Clear “.

Crystal Clear ist unser letzter Schritt des Übergangs, es ist unsere eigene Benutzeroberfläche und unsere eigene visuelle Sprache, die auf die Bedürfnisse von Instapage zugeschnitten und sorgfältig mit den von uns benötigten Details gestaltet wurde.

Chief Design Officer, Uldis Leiterts, erklärt:

Als iterativer Prozess wird die Arbeit nie erledigt. Wir reparieren, verbessern und aktualisieren immer noch. Zum Beispiel benötigen einige Teile des Rasters noch etwas Arbeit. Aber anstatt die Dinge unter der Haube zu halten, wollten wir unsere Arbeit teilen, denn so stolz wir auf unsere erwartete „endgültige“ Version sind, sind wir auch stolz auf die iterative Natur des Designs und darauf, wie es der Funktion dient.

Wir hoffen, dass die erste Version von Crystal Clear und die nachfolgenden Updates die Erfahrung unserer Kunden mit Instapage, einem Produkt, das wir gerne herstellen, kontinuierlich verbessern werden.

Was ist neu an der Instapage-Benutzeroberfläche?

Insgesamt haben wir die gesamte Benutzeroberfläche entrauscht, sodass die Inhalte des Kunden zuerst gesehen werden, wie Sie unten sehen werden.

UX-Kopie

Zusammen mit dem Übergangsdesign von Crystal haben wir unserem talentierten Designteam einen UX-Autor vorgestellt. Instapage wurde von Ingenieuren entwickelt, genau wie die Kopie, die Sie gesehen haben. Es hat uns gute Dienste geleistet, aber es ließ auch Raum für Verbesserungen.

Zum Beispiel lautete eine leere Nachricht „Ihr Dashboard ist einsam“ – an sich nichts Falsches, aber es ist möglicherweise nicht die beste Sprache für seriöse Unternehmenssoftware, die wir selbst sehen. Mit Crystal Clear hat Mateusz Sochoń, UX/Content Writer von Instapage, mehr Konsistenz in Ton und Botschaft geschaffen. Wie Mateusz es ausdrückt:

Wir haben dafür gesorgt, dass sich alle leeren Zustände und die benutzergesteuerte Kommunikation zusammenhängend anfühlen, indem wir alle Unebenheiten ausgebügelt haben. Wir haben die Kopie immer dann modifiziert, wenn es Verbesserungsmöglichkeiten gab, die sich ausschließlich auf die Syntax oder den Nachrichtenton bezogen.

Neuer Stil und neue Farben

Um einen ausgewogenen Oberflächenstil zu finden, der die Benutzerproduktivität steigert, haben wir unsere Farbpalette und unseren Stil auf den neutralen Graustufenton aktualisiert. Die neue Farbpalette ist weniger dekorativ, dafür aber viel funktionaler. Als Beispiel ist Königsblau nur für Aktionen reserviert, meist CTA-Buttons:

Gutes Design ist jedoch unsichtbar, und das Team hat sich von Dieter Rams inspirieren lassen, der die Regeln für gutes Design erstellt hat. Ausgehend von den Prinzipien von Rams hat das Team die Benutzeroberfläche aktualisiert, um sie zeitloser zu gestalten.

Vorher: Kristall

Aktuell: Kristallklar

Neue Ebenenhierarchie & Schatten entfernen

Die neue Levels Convention ermöglicht es uns, die Idee der Komponenten- und Elementhierarchie zielgerichteter und organisierter in die Benutzeroberfläche einzuführen. Verschiedene Komponenten des Crystal Design-Systems werden auf verschiedenen Ebenen angezeigt, um einige Elemente hervorzuheben und sie in visuell zusammenhängenden Kontextgruppen zu gruppieren.

In unserer Anwendung gibt es vier Hauptebenen:

• Level 0: Dient als Hintergrund für alle verbleibenden Inhalte
• Ebene 1: Die Ebene, in der die meisten Komponenten angezeigt werden
• Ebene 2: Ermöglicht das Scrollen von Elementen aus niedrigeren Ebenen darunter
• Ebene 3: Ein Overlay-Element, das über alle unteren Ebenen angezeigt wird

(Hinweis: Das mittlere Level 1.5 ist das Level, das alle Komponenten enthält, die über einem Teil eines Levels 1, 2 oder 3 angezeigt werden, aber immer noch unter einem höheren Level versteckt werden. Zu diesen Komponenten gehören Tooltips, Popovers, Dropdowns. Das neue Update entfernt den Schatten aus dem Zwischenzustand. Er ist heller und visuell konsistent, unabhängig von der Ebene, auf der platziert wird.)

Darüber hinaus haben wir erfahren, dass einer der Faktoren, die die Benutzeroberfläche sauber halten, die minimale Verwendung von Schatten ist. Material Design verwendet in der Vergangenheit Schatten zur Dekoration, während Instapage Schatten verwendet, um Hauptebenen wie Überlagerungen zu trennen:

Konsistente, umrissene Ikonographie

In der gesamten App werden Sie die Ikonographie in Menüs, Dropdown-Menüs usw. bemerken. Die neue Ikonographie ist sauberer und einfacher:

Ein anderes Abstandsraster

Hinter jeder Schnittstelle liegt ein solides Fundament, sowohl Struktur als auch Raster. Die Verbesserung eines neuen Strukturrasters war notwendig, und mit Crystal Clear hat die Oberfläche mehr Raum zum Atmen und hilft den Benutzern, einfacher zu scannen:

Abgerundete Ecken eliminieren

Dieses Update ist subtiler, aber es lohnt sich, darauf hinzuweisen, da das Designteam der Meinung ist, dass die Beseitigung abgerundeter Ecken fortschrittlicher ist:

Builder-Benutzeroberfläche

Sie können sehen, wie das neue Crystal Clear-Update in den Builder implementiert wird. Beachten Sie die Graustufenpalette, mit Ausnahme von Bildern, CTA-Schaltflächen und Logos:

Was wir gelernt haben

Der Leiter der UI-Entwicklung, Łukasz Grądzki, hebt hervor, wie sich das Team und die Technologie verbessert haben. Und wie sich die Investition aus dem Jahr 2016 jetzt ausgezahlt hat:

In den letzten vier Jahren haben wir uns von einer lose zusammengestellten gemeinsamen Komponente zu etwas gewandelt, das wir heute als vollwertiges Designsystem bezeichnen können. Ein System, das für alle unsere Produkte und internen Tools verwendet wird.

Als Referenz haben wir 2016 die gesamte Anwendung auf der Frontend-Seite neu geschrieben und die erste Version des UI-Kits implementiert. Es dauerte mehr als drei Monate, um die Aufgabe abzuschließen, an der rund ein Dutzend Teammitglieder beteiligt waren. Erwähnenswert ist auch, dass die Anwendung selbst im Vergleich zur heutigen Zeit relativ klein war. Jetzt konnten wir ein vollständiges Redesign der Instapage-Anwendung ohne größere Probleme in einem Entwicklungszyklus bereitstellen.

Überzeugen Sie sich selbst von der neuen Benutzeroberfläche

Das neue Crystal Clear-Designsystem bringt Ihnen Klarheit darüber, was am wichtigsten ist – die Essenz dafür, warum Sie die Instapage-Anwendung verwenden. Wir möchten Sie befähigen, sich auf die Aufgabe zu konzentrieren, auf Ihre tägliche Instapage-Nutzung.

Wir freuen uns, von Ihnen zu hören, wenn Sie Verbesserungsvorschläge oder Feedback zur neuen Benutzeroberfläche haben. Melden Sie sich hier an, um es selbst zu erleben und sehen Sie sich unsere offenen Stellen an, wenn Sie daran interessiert sind, dem Team beizutreten.