☕️ 👏 😨 Produktdesign ohne Designer 🗺️ 😐 🐽

Ich arbeite seit 3 Jahren bei KORUS Consulting CIS und war während dieser Zeit am Design von neunzehn B2B-Diensten beteiligt. Das Interaktionsdesign ist normalerweise mit Axure, InVision, Moqups, Framer (fügen Sie Ihre Lieblingsoption ein) verbunden, aber meine Tools sind HTML, SCSS und AngularJs. Ich werde Ihnen erzählen, wie die übliche Praxis des Speicherns von HTML-Vorlagen in den Almanachen vollwertiger Layouts gewachsen ist und wie eine Gruppe von Setzern unter der Leitung eines Art Directors sechs Jahre lang die Interaktion mit den Schnittstellen aller KORUS Consulting CIS-Produkte entworfen hat.

Und warum hat es funktioniert?

In „Eine psychiatrische Klinik in den Händen von Patienten“ im Kapitel „Woher kommen die Interaktionsdesigner?“ Schreibt Alan Cooper, dass die erforderlichen Fähigkeiten bei jedem Teilnehmer an der Entwicklung leicht zu finden sind. Das Design kann von einem Projektmanager, Analysten, technischen Redakteur, Vermarkter und Entwickler ausgeführt werden. Es ist gut, wenn diese Funktion von einem separaten Spezialisten, vorzugsweise einem Designer, übernommen wird. KORUS gab diese Rolle den Programmierern. Aber nicht sofort.

Abgelehntes Photoshop

Bis 2019 gab es bei KORUS keine Designer. Und bis 2011 gab es niemanden, der etwas über User Experience hörte. Als selbstbewusster Softwareentwickler versuchte das Unternehmen, das Produkt schnell auf den Markt zu bringen, und Analysten und Entwickler waren für das Erscheinungsbild und das Verhalten der Benutzeroberfläche verantwortlich. Meistens Entwickler.

Als 2011 ein Programmierer mit den Fähigkeiten eines Designers im Unternehmen erschien, durfte er vor der Entwicklung erst in der Endphase.

Ein neuer (für KORUS ungewöhnlicher) Spezialist stieß auf ein typisches Entwicklungsschema, bei dem er Pixel verschieben und malen durfte, als die Hauptfunktionen bereits implementiert waren. Klingt nach Design nach der Entwicklung. Und dies wird in der psychiatrischen Klinik, Mr. Cooper, ausführlich beschrieben. KORUS könnte als Lehrbuchheld seiner Geschichten angesehen werden.

Photoshop oder ein anderer Grafikeditor kam nur schwer in diesen Entwicklungsprozess. Von Anfang an haben wir uns mehr auf das Layout verlassen, da es einfacher zu bearbeiten ist, insbesondere angesichts sich ständig ändernder Anforderungen. Und Sie können das Layout dem Entwickler geben. Das gleichzeitige Entwerfen, Setzen und Inspirieren von Schönheit ist viel effizienter. Bei diesem Ansatz ist das Zeichnen in einem Editor ein unnötiger Zwischenlink, und viele würden dem wahrscheinlich schon 2011 zustimmen.

Der Verzicht auf Entwurfswerkzeuge trug dazu bei, eine neue Spur auf das etablierte Schema zu legen und einen langen Weg zum richtigen Entwurf von Schnittstellen zu beschreiten. Wenn die Entwicklungszeit begrenzt ist, wird das PSD-Layout nur zu einer Empfehlung, das Layout ähnelt eher einem Regelwerk, es ist schwieriger, sich umzudrehen und den unsichtbaren Fall zu vergessen. Oder denken Sie daran, basierend auf Ihren eigenen Vorstellungen von Bequemlichkeit.

Das Layout ermöglicht es Ihnen auch, einzelne Komponenten zu speichern, um beim nächsten Mal keine Zeit damit zu verschwenden. Die erste HTML-Seite mit solchen Komponenten wird unten angezeigt:

Sie wurde zum ersten Baustein für das Repository des zukünftigen Kits auf AngularJs. Zunächst wurden gedruckte Formulare und einzelne Seiten unseres elektronischen Dokumentenverwaltungsdienstes (im Folgenden als Kurier bezeichnet) hinzugefügt.

Als das Repository wuchs und es viel mehr Layouts gab, hieß es UIKIT und ein Kätzchen-Ninja auf dem Logo:

2015 hat unser Unternehmen alle Anstrengungen unternommen, um mit der Sberbank zu interagieren, und es stellte sich die Frage, den Service neu zu streichen. KORUS hat wiederholt die Tatsache genutzt, dass es bereits Erfolge bei Komponenten und Stilen gibt: Es reicht aus, die Farben zu ändern, um sie dem Unternehmensstil von Beeline, Alfa Bank usw. anzupassen. Dank dieser Erfahrung wurde der Kurier in nur einer Stunde neu lackiert.

Und stellen Sie sich vor, wenn der Designer zuerst die grafischen Layouts neu gestrichen und der Layout-Designer dann die Stile geändert hat? Zwei Aufgaben - eine Lösung: bereits Layout in UIKIT.

Wie kann man sie davon abhalten, „schlecht“ zu werden?

Überraschenderweise hat sich in den ersten 4 Jahren nur ein Spezialist mit allen Entwurfsaufgaben befasst. Die Entwicklungen in UIKIT wurden gespeichert, dies spart viel Zeit: Der Designer konnte sich so früh wie möglich mit der Entwicklung verbinden und schreckliche Schnittstellenlösungen verhindern.

Die Erweiterung des Produktportfolios führte natürlich zur Entstehung neuer Layoutdesigner. Dadurch konnte der Wal-Ninja mehr Ressourcen zuweisen, und die Layouts wurden interaktiver. Es reicht nicht aus, HTML-Links miteinander zu verknüpfen, wir wollten mehr. JQuery und AngularJs wurden verwendet. Live-Prototypen wurden hauptsächlich von Analysten bewertet. Sie können durch alle Status klicken, Screenshots machen und diese in die TK einfügen.

„Wir haben etwas Ähnliches wie BEM gemacht, aber nicht BEM, und sind daher in allen Projekten zur Vereinheitlichung des Layouts gegangen.“

Wenn jedoch mit dem Layout-Designer alles klar ist, kann sich der Layout-Designer nur von Richtlinien und seiner eigenen reichen Erfahrung beim Setzen verschiedener Layouts leiten lassen, um etwas Einfaches zu entwerfen? Layout-Designer können die Benutzeroberfläche als Designer zusammenstellen und nicht darauf warten, dass Ihnen jemand sagt, wo Sie die Schaltfläche platzieren sollen. Sie haben diese Schaltfläche bereits viele Male in der Symbolleiste gesehen. Designer nennen diese Dunkelheit. Und KORUS brauchte verständliche Lebensfälle, die als "natürliches Design" bezeichnet werden. Und wenn Sie sich daran erinnern, dass die Produkte eines Ökosystems normalerweise einander ähnlich sind und die Einzigartigkeit ihnen nur schadet, dann lautet meine Antwort ja.

Das Aufkommen von UIKIT hat den Prototyping-Prozess beschleunigt. Eine anklickbare Layout-Demonstration wurde für den Vorverkauf und die Koordination der Details mit dem Kunden vor Beginn des Projekts verwendet. Und schließlich erhielten die Entwickler die notwendigen Informationen zum Verhalten der Schnittstelle, um sie nicht direkt im Codierungsprozess selbst zu entwickeln.

„Die Fronten haben es ihnen leichter gemacht. UIKIT hat mich teilweise dazu gebracht, es richtig zu machen. “

Interaktivität mit AngularJs

Genau dieses Arbeitsschema kam nach dem Erscheinen von UIKIT zu KORUS: Der Bedarf entstand, wurde in den technischen Anforderungen formalisiert, Layout-Designer verkörperten ihn sofort in einem Web-Prototyp.
Es blieb noch ein Rahmen aus den Tiefen des Internets zu schaffen, ihn unter einem grünen Etikett neu zu streichen und in Produkte zu implementieren, um nicht nur Schaltflächen und Überschriften für alle Dienste einheitlich zu machen.

Zusätzlich zu den Steuerelementen des Frameworks wurde UIKIT mit einer Reihe von Symbolen, Widgets, eigenen Entwicklungen und Stilen ergänzt.

Wenn es eine Aufgabe für ein Seitenlayout gab, das etwas aus unseren Diensten ähnelt, haben wir das fertige übernommen, den Inhalt an die Anforderungen angepasst und der Wrapper und die Logik sind gleich geblieben. Übergänge zwischen Seiten können konfiguriert werden, alle Schaltflächen und Felder können angeklickt werden, wir können Validierung, modale Fenster und Erfolg beim Hochladen von Dateien anzeigen. Wir können den gesamten Benutzerpfad von Anfang bis Ende mit positiven und negativen Szenarien in der Darstellung des gesamten Vorbilds anzeigen.

Einheitliche Schnittstellen

Die Wiederverwendung vorgefertigter Teile der Benutzeroberfläche ist für 2015 nicht neu. Noch vor zehn Jahren haben Layoutdesigner in Webstudios ihre Prozesse so optimiert, dass nicht jedes Mal das gleiche Element neu gesetzt wird. Wir haben die Galaxie nicht entdeckt, aber dies war nur der Anfang.

Es ist klar, dass je mehr Layouts wir zu UIKIT hinzugefügt haben, desto mehr haben wir bestehende Fälle abgedeckt und könnten sie für neue Projekte weiter anwenden.

Benötigen Sie ein neues Benutzerregistrierungslayout? Wir haben dies bereits: Wir passen es an die Bedürfnisse des Unternehmens an, verbringen nicht mehr als ein paar Stunden damit, und jetzt ist die Registrierung für die Übertragung an die Entwickler bereit, jedoch in einem anderen Service.

Benötigen Sie eine Tabelle mit Unternehmensdaten? Diese Güte in unseren Dienstleistungen in loser Schüttung: CRTL + C CTRL + V.

Am attraktivsten für das Layout-Team sind dabei die einheitlichen Stile. Richtlinien sind so etwas, das uns vorschreibt, wie atomare Elemente einer Schnittstelle aussehen sollen. Es erscheint sinnvoll, den Stil dieser Komponenten zu korrigieren und nur als letzten Ausweg zu ändern. Unabhängig davon, wie viele neue Produktlayouts wir bei UIKIT vorstellen, befinden sich Stile in Komponenten an einem Ort. Für die Anforderungen des Projekts selbst gibt es eine separate Produkt-CSS, in der Sie etwas anpassen können.

Unter dem Einfluss von Richtlinien, Optimierung und unserer eigenen Erfahrung hatten wir immer zur Hand:

Eingänge, Schaltflächen, Dropdowns;
Tabellen, Seiten, Menüs, Symbolleisten;
Formulare, Zeitleisten, modale Fenster;
Der gesamte Ablauf der Bearbeitung eines Kreditantrags oder der Erstellung eines Zahlungsbelegs.

Aus all dem war es bereits möglich, vollwertige Schnittstellen zusammenzustellen, und dank AngularJs wurde auf den Layouts die Interaktivität der Produktion erreicht, die bei Kunden sehr beliebt war.

Im Geheimen möchte ich sagen, dass wir einige Male bei UIKIT eine Demo für einen Kunden durchgeführt haben, da kurz vor der Demo ein Teststand herunterfiel.

Arbeitsschaltung

Die Zeit verging, der ideologische Inspirator und Schöpfer von UIKIT wurde Art Director, es gab immer mehr Projekte. Wer wird diese großartige Arbeit fortsetzen - das Entwerfen von Schnittstellen in HTML unter Verwendung bereits entwickelter Funktionen? Layout-Designer natürlich.

Zu sagen, dass Layoutdesigner sich sehr über die Aussicht gefreut haben, eng mit Analysten zusammenzuarbeiten und die Benutzerfreundlichkeit unabhängig zu durchdenken, ist ein kleiner Trick. Trotzdem haben sich alle (ich?) Daran gewöhnt, dass der Layout-Designer ein Spezialist ist, der ein Layout von einem Designer erhält, es schneidet und in eine Webseite verwandelt. Interaktionsdesign fügt stellenweise einer mechanischen Arbeit eine ungewöhnliche, noch nicht untersuchte Verantwortung hinzu. Aber wir wurden durch die Anwesenheit einer Person unterstützt, die unsere Arbeit ständig überarbeitete und vorschlug, wie man es richtig macht. Und er hat nicht nur dazu aufgefordert, sondern auf maßgebliche Quellen verwiesen, damit wir sie auch lesen und weniger Fehler machen. Der Art Director verwies ständig entweder auf einige Fitts-Gesetze, dann auf die Regeln des Geschäftsschreibens oder auf die Formatierung des Textes, wobei die Elemente hervorgehoben wurden ... Wir widersetzten uns, nahmen aber die Informationen auf.

Heute könnten wir zwei grüne Schaltflächen nebeneinander platzieren - morgen haben wir das nicht getan, weil wir wussten: Die Schaltfläche mit der Zielaktion sollte eine pro Seite sein.

Heute steckten alle Eingaben in der gleichen Breite fest, morgen machen wir das Feld für die TIN genau für den Inhalt. So liest der Benutzer besser, wie lange die Daten von ihm erwartet werden.

Der Prozess wurde in Betrieb genommen. Layoutdesigner sammeln Schnittstellen, stützen sich auf die Geschäftsanforderungen von Analysten, koordinieren ihre Entscheidung mit dem Art Director und geben sie an die Entwicklung weiter.

Wir sind als Designer aufgewachsen, haben gelernt, Entscheidungen zu treffen, haben uns selbstständig gemacht, um das Aufgabenspektrum zu erweitern, in das ein tiefes Eintauchen des Art Directors nicht erforderlich ist.

Irgendwo in dieser Pipeline erschien GitLab, eine Überprüfung des Layouts, die die Visualisierung mit js verbesserte.

Wenn der Layouter vor einer schwierigen, nicht standardmäßigen Aufgabe stand, verband sich der Art Director und half bei der Erarbeitung einer Lösung. Zu dieser Zeit entwarf er selbst das Konzept neuer Produkte.
Wir haben 2-3 Optionen für unser Verständnis des Problems bereitgestellt, und er hat eine ausgewählt und erklärt, wie es verbessert werden kann. Gelegentlich sagte er einfach „ok“ und wir waren froh zu verstehen, dass wir ins Schwarze getroffen hatten. Manchmal hatten wir jedoch nicht genügend Feedback, um zu verstehen, wie bequem und verständlich unsere Lösung für Benutzer ist und ob es dem Art Director klar ist. Der Zweifel ließ uns immer wieder versuchen, die Anforderungen auf verschiedene Weise zu interpretieren.

Unser Führer hatte seine eigene Meinung dazu. Er sagte, dass dies uns zum Nachdenken brachte. Jeder bewertete den Prozess auf seine Weise. Ich dachte, ich würde mir und ihm Zeit sparen. Lassen Sie mich Ihnen drei Optionen gleichzeitig zeigen, um nicht dreimal zu gehen. Eine Art A / B / C-Test für die Artillerie für mich.

Obwohl wir natürlich viel gelernt haben (schauen Sie sich nur an, wie dieser Layoutdesigner Designbücher zitiert).

Wie Sie verstehen, gibt es in diesem Prozess keinen Platz für detaillierte Überlegungen zu UX und UX Analytics. Obwohl mit einem solchen Tool testen und testen würde. Es wurde das verwendet, was der Art Director ursprünglich im Prototyping-Stadium in das Layout eingefügt hatte. Alle neuen Funktionen wurden bereits von Stakeholdern, Managern und Analysten erfunden und beschrieben. Keine Programmierer. Dies war ein Minus, da wir nicht immer abschließend erklären konnten, warum die bereits vom Unternehmen erfundene Lösung nicht geeignet ist.

Bei der Ausgabe erhielt der Schriftsetzer vom Analysten eine Beschreibung in Confluence - wie folgt:

:
:
: « »
« » checkbox .
tooltip .

Eine unpersönliche Mocap auf den Plätzen der Basilika wurde sogar auf die Aufgabe angewendet, um die Position und den Zweck der Elemente auf der Seite anzuzeigen.

Manchmal erhielten wir Aufgaben von Analysten mit folgendem Wortlaut:

Obwohl UIKIT in den Tool-Stack des Unternehmens aufgenommen wurde, gab es ohne UX-Analyse keine wichtigen Argumente gegen Schnittstellenentscheidungen, mit Ausnahme des letzten Wortes des Art Directors. Aber unser Weg zur perfekten Interaktion ging weiter.

Im Laufe der Zeit konnten wir eine gemeinsame Sprache finden und die Verantwortungsbereiche für die Qualität und Benutzerfreundlichkeit der Benutzeroberfläche aufteilen.

Insgesamt sah der gesamte Prozess der Erstellung eines Produktlayouts folgendermaßen aus:

- , UIKIT. , , , ;
, . , -, , . ;
Der Layouter nahm die Grenze des neuen Projekts und ergänzte es, brachte es unter eine detailliertere technische Aufgabe. Wenn der Kunde zuerst die Anwendung in einem Schritt und dann in zwei Schritten ausfüllen wollte, implementierte der Layout-Designer dies einfach. In Zukunft könnte sich das Layout bis zur Unkenntlichkeit ändern, und gegenüber der Originalversion gab es nur Stile, die sich im Prinzip nicht änderten. All dies wird schrittweise Schritt für Schritt mit dem Art Director besprochen. In der ersten Phase wurde der Prototyp von zwei Tagen bis zu einigen Wochen zugewiesen, dann konnte die Entwicklung jahrelang fortgesetzt werden. In solchen Projekten „raste“ unser Manager gelegentlich mit einem Redesign, um die erhöhte kritische Masse an Funktionen auszugleichen und die Benutzeroberfläche auf eine neue Art und Weise zu überdenken.

Das UIKIT-Team hat 2 Jahre gebraucht, um zu diesem Prozess zu gelangen.

Visuelle Demonstration

In allen Phasen steht das Layout dem Kunden und dem Team zur Demonstration zur Verfügung. Dies ist einer der größten Vorteile von UIKIT.

Was könnte für den Kunden bequemer und verständlicher sein, als dem Link zu folgen und selbst auf das Layout zu klicken, um das Verhalten der Benutzeroberfläche zu überprüfen? Er kann die Texte auswerten und korrigieren, die dann in die Produktion gehen. Manchmal änderte das beim Kunden erstellte Layout die Idee der Aufgabe, er konnte verstehen, dass seine Idee nicht realisierbar war und stimmte den Änderungen zu. Wenn er in Worten sicher war, dass sein Fragebogen mit 150 Feldern leicht in die Benutzeroberfläche passen würde, dann sah er im Layout deutlich, dass Verbesserungen erforderlich waren. Am wichtigsten ist, dass das Werfen dieses Profils in UIKIT billig ist.

Ein kleines Beispiel:

Erste unbestreitbare und letzte Anforderung:

Kompromiss im Prozess:

Jemand mag bemerken, dass Axure, Figma, Marvel alle von mir beschriebenen UIKIT-Vorteile haben ... Aber einige von ihnen existierten zum Zeitpunkt der Technologieauswahl nicht, andere wurden als zusätzliche Verbindung zwischen Design und Layout abgelehnt.
UIKIT bietet die Möglichkeit, nicht einmal einen Prototyp, sondern eine vorgefertigte Produktschnittstelle zusammenzubauen, die dann vom Frontend in Betrieb genommen wird.

Unternehmensanerkennung

Bis 2020 verfügt UIKIT über 38 Modelle bestehender Projekte, von denen 13 in Entwicklung sind. Dies ist eine vierjährige Erfahrung, in der Sie tausend Lösungen verschiedener Spezialisten finden, vom Art Director bis zum Tester. Alle von ihnen halten sich an die allgemeinen Regeln für CSS und Seitenerstellung.

Im Laufe der Zeit mussten wir neue Plugins verbinden, mehrere Stände für UIKIT organisieren (unser internes für die aktuelle Entwicklung und extern für die feste Version, die entwickelt wird), die Versionierung der Stile hinzufügen, das Style-Paket in artifactory und nexus importieren und dann das npm-Paket vereinfachen Übertragen von Mediendateien auf CDN. Dann sind wir zu SASS gewechselt. Eine scheinbar gewöhnliche Site-Sammlung von Layouts wurde mit ihren Bereitstellungen, Aktualisierungen des Teams und einer aktiven Diskussion über zukünftige Verbesserungen zu einem vollwertigen Projekt. Das heißt, unser Projekt, das zunächst nur eine Hilfe für das Rapid Prototyping war, wurde zu einem vollwertigen Produkt mit seinen inhärenten Prozessen.

UIKIT wurde von Kunden, Analysten, Entwicklern und Testern ebenfalls geschätzt.

Eines schönen Tages erhielt ich nur eine wichtige Frage vom Entwicklungsteam unseres Kunden:

„Wann sind die Layouts im Wal? Sie sind viel bequemer als die Anforderungen. “

Für mich als Layoutdesigner schmeichelte dieser Satz. Aber besser nicht, lesen Sie die Anforderungen.

Bis zu diesem bedeutsamen Moment hat sich das UIKIT-Team selbst unter Kollegen hartnäckig um die Anerkennung des Instruments bemüht. Der Geschäftswert des Projekts war Null, was bedeutet, dass seine Entwicklung vollständig bei den Setzern lag. Zusätzlich zu den aktuellen Aufgaben haben sie ihre Arbeit weiter optimiert. Ich mag es zu sehen, wie sehr unser Kit Ninja im Laufe der Jahre gewachsen ist, nicht schlechter als die moderne Figur, aber dank des fertigen Layouts und übertroffen.

In meiner nächsten Geschichte geht es um die technischen Details des Entwurfs mit UIKIT, darum, wie sich unsere Schaltung überlebt hat und welche Schritte wir zur Entwicklung unternommen haben.

Produktdesign ohne Designer