Es ist bekannt, dass Designsysteme Zeit sparen - wir haben es sogar selbst gesagt. Aber hat sich schon einmal jemand Gedanken darüber gemacht , wie viel Zeit genau eingespart wird? Schließlich ist Zeit Geld. Wie viele Arbeitsstunden können also durch ein Design System eingespart werden?
Wo ist die Zeit geblieben?
Sie sind ein Designer, Entwickler, Tester (oder jeder, der in ein Projekt investiert). Hinter jeder Aufgabe, die Sie erledigen, steht eine gewisse Planung im Voraus. Es gibt immer eine Zeitabschätzung. Natürlich stellen Sie einen Zeitplan auf, damit sich jeder auf seinen Teil vorbereiten kann. Solche Zeitpläne sind jedoch selten genau. Oft erweisen sich die Zeitschätzungen als so unzureichend, dass es fast so aussieht, als seien sie willkürlich gewählt worden. Also untersuchen Sie, wo Sie einen Fehler gemacht haben könnten. In der Regel stellt sich heraus, dass die Zeit nicht wirklich verloren war - aber sie wurde auch nicht effektiv genutzt.
Wir haben dieses Problem aus erster Hand erfahren. Ich würde sogar so weit gehen zu sagen, dass jeder, der an einem ausreichend großen Projekt arbeitet, irgendwann einmal dieses Problem hatte. Die Gründe dafür sind unterschiedlich. Oft haben wir es eilig, dem Kunden Minimum Viable Product (MVP)-Strukturen zu liefern, damit er oder sie die Ergebnisse "sehen" kann. Dabei verlieren wir den Überblick über die Dokumentation und bestimmte Schritte des Arbeitsablaufs gehen im Sturm der Änderungen und Hotfixes verloren.
In anderen Fällen kann es sich um einen chaotischen Kunden, einen freidenkerischen Designer oder - noch schlimmer - einen Entwickler mit mehreren Hüten handeln, der ohne jegliches Organisationstalent zwischen verschiedenen Rollen hin und her springt. (Solche Leute stellen wir zum Glück nicht ein!)
Wie viel Zeit kann ein Designsystem sparen?
Wenn es um das Design und die Entwicklung neuer Lösungen geht, haben wir dieses Problem erkannt und an einer Lösung gearbeitet. Unsere Antwort ist die Verwendung eines ordnungsgemäß -
Unsere Erfahrung mit größeren Aufgaben hat gezeigt, dass es die benötigte Zeit um bis zu 45% verkürzen kann.
Und wie? Am besten lässt sich dies anhand einer hypothetischen Geschichte erklären, die zeigt, wie der Prozess mit - und ohne - ein Design System funktioniert.
Das Szenario
Lassen Sie uns zunächst einen kurzen Überblick über die imaginäre Arbeit geben, die erledigt werden muss. Für die Zwecke dieses Szenarios nehmen wir an, dass wir das Briefing des Kunden und die Geschäftsanalyse hinter uns haben. Wir haben ein grobes Drahtgitter für unsere Vision und wissen, dass wir sie umsetzen müssen. Die Designer müssen es entwerfen, die Entwickler müssen es codieren und natürlich folgt auf all das ein Test.
Wie es ohne ein Designsystem geht
Ihre aktuellen Designs sind über verschiedene Rechner oder Zeplin-Konten verstreut. So oder so, jeder hat eine mehr oder weniger unterschiedliche Auffassung davon, was aktuell ist.
Das Gleiche gilt auch für den Anwendungscode. Er wird oft dupliziert oder mit gegenteiligen Regeln überschrieben. Was können Sie wiederverwenden? Verschiedene Leute geben unterschiedliche Antworten.
Teil I | Design | Wo soll ich anfangen?
Zuallererst muss der Designer recherchieren und prüfen, wie der Rest der Anwendung im Moment aussieht. Die App selbst kann jedoch in den verschiedenen Ansichten inkonsistent sein und die Designs sind verstreut - manchmal können wir nicht einmal sicher sein, welche die aktuellsten sind. Wenn die Dokumentation nicht forciert wird, verflüchtigt sich dieses Wissen aus dem Projekt in gleichem Maße wie die Mitarbeiterbindung innerhalb des Teams.
Vergessen Sie nicht, dass Designer kreative Menschen sind und in den meisten Fällen einen unterschiedlichen Geschmack haben. Es ist mehr als wahrscheinlich, dass jemand einen minimalistischen Look mehr mag als ein großes, auffälliges Design, während ein anderer Designer das Gegenteil bevorzugt. Das wird sich in der jeweiligen Arbeit widerspiegeln, und das endgültige Design wird in der gesamten Anwendung nicht einheitlich sein.
Es gibt keine einzige Quelle der Wahrheit über das aktuelle Design. Um an Informationen heranzukommen, müssen Sie viel Zeit in die Recherche und Beratung investieren. Das ist ein Prozess, der sich ziemlich oft wiederholen wird, nicht wahr?
In diesem Stadium werden 70 % der Zeit eines Designers mit der Wiederholung unnötiger Aufgaben verschwendet, anstatt sie für andere, bessere Zwecke zu verwenden, z. B. für die Erforschung der Benutzerfreundlichkeit, das Experimentieren mit verschiedenen Versionen derselben Ansicht usw. Dies kann meist durch eine Korrektur des Arbeitsablaufs erreicht werden.
Teil II | Entwicklung | Übergabe an Bauherren
Standardmäßig sollte jeder Entwickler das Design in wiederverwendbare Elemente unterteilen. Nehmen Sie zum Beispiel diese kleine orangefarbene Schaltfläche, die sich in jeder Ansicht der Anwendung befindet. Wozu diese Schaltfläche immer und immer wieder schreiben?
In der Realität kann es Jahre dauern, bis ein Projekt vollständig ausgereift ist, und selbst dann müssen wir noch etwas Zeit für die Wartung und das Hinzufügen neuer Funktionen einplanen. Das kann die Lebensdauer des Projekts um weitere 5 bis 10 Jahre verlängern - wie viele dieser Stunden sollten wir damit verbringen, diese orangefarbene Schaltfläche neu zu erstellen?
Außerdem können Ihre Entwickler im Laufe der Zeit wechseln und mit jeder Person, die das Projekt verlässt, geht ein Teil dieses Know-hows verloren. Nicht jeder weiß, welche Elemente wiederverwendet werden können. Und nicht nur das: Eine einfache Schaltfläche kann aufgrund von Inkonsistenzen im Design in zwanzig leicht unterschiedlichen Varianten enden, selbst in kleinen Anwendungen. Wer weiß schon, welche davon die originale, richtige Schaltfläche ist?
Aufgrund der oben genannten Faktoren sowie eines Mangels an Informationen programmieren die Entwickler das Design so, wie sie es sehen. Da die Recherche so mühsam ist, entscheiden sie sich dafür, den Code von Grund auf neu zu schreiben - und das, obwohl bis zu 90 % des Codes aus bestehendem Code wiederverwendet werden könnten!
Auch hier gibt es keine einzige Quelle der Wahrheit. Diesmal sehen wir die Probleme, die sich daraus für Entwickler ergeben. Wie kann ein Entwickler wissen, dass die Schaltfläche bereits in der von ihm benötigten Farbe und Größe kodiert ist? Wie soll ein Entwickler überprüfen, ob der Designer mit dem Rest der Seite konsistent geblieben ist?
Konzentrieren wir uns also auf den Prozess des Entwicklers - und nehmen wir an, es handelt sich um einen gewissenhaften Entwickler, der diesen Prozess befolgt und keinen Schritt auslässt:
- Der Entwickler prüft den Entwurf. Er prüft, ob er sich von einer der bestehenden Ansichten unterscheidet. Wenn er nicht konsistent ist, verliert der Entwickler Zeit durch Konsultationen und Ping-Pong-Nachrichten mit dem Designer.
- Im ungünstigen Fall muss der Entwickler diese Inkonsistenzen korrigieren.
- Im schlimmsten Fall beschließt der Entwickler, nur das zu programmieren, was ihm vorgegeben wurde.
- So oder so können bereits kodierte Elemente nicht wiederverwendet werden, weil sie vom Entwurf abweichen.
Wie auch immer, der Code ist jetzt fertig. Überlassen wir ihn den Testern.
Teil III | Tests | Was sehen wir uns an?
Der Tester wird die Ungereimtheiten auf jeden Fall bemerken - das ist sein Job! Aber wenn er sie gefunden hat, wo soll er dann nach einem Hinweis auf den richtigen Code oder das richtige Design suchen?
Wieder geht Zeit mit Gesprächen, E-Mails und Streitereien verloren. All das hätte man leicht vermeiden können - oder zumindest nicht bei jeder neuen Aufgabe wiederholen müssen.
Der Prozess sieht folgendermaßen aus:
- Der Tester benachrichtigt den Entwickler.
- Der Entwickler wird die Anfrage entweder an den Designer oder sogar an den Tester zurückschicken, da er nur das programmiert hat, was ihm vorgegeben wurde.
Wie das dann weitergeht, hängt von den genauen Umständen des jeweiligen Teams ab. Ein Team, das mehr Zeit zur Verfügung hat, kann diese Fehler beheben. Für andere hängt die Deadline wie ein Damoklesschwert über ihnen. Wenn es wichtiger ist, das Produkt oder die Aktualisierung bereitzustellen, als sich auf die Qualität zu konzentrieren, finden diese Fehler ihren Weg zum Endbenutzer.
Teil IV | Wie viel Zeit haben wir verloren?
Kurz gesagt, die Zeit, die für die Fertigstellung der Aufgabe benötigt wird, würde viel länger dauern als nötig. Bei jeder neuen Aufgabe oder Geschichte müssen dieselben Entscheidungen wieder und wieder getroffen werden, wobei sich die gleichen Gespräche zwischen Designern, Entwicklern und Testern wiederholen. All diese Personen könnten von einem einzigen Bezugspunkt profitieren - einem Punkt der Wahrheit... wie einem Design System.
Um das zu relativieren, nehmen wir einen kleineren Teil der Aufgabe. Wenn wir nur ein paar neue Schaltflächen entwerfen, entwickeln und testen, können wir die benötigte Zeit immens reduzieren. Eine unserer Schätzungen für ein mittelgroßes Projekt belief sich auf 14-15 Stunden Arbeit ohne ein Design System.
Um das in die richtige Perspektive zu rücken: Unsere Schätzung mit einem Design System betrug nur 2,5 Stunden. Das sind etwa 11,5 Stunden oder über 80% schneller.
Wie man es mit einem Designsystem macht
Dieses Mal fügen wir dem Szenario ein Design-System hinzu. Das bedeutet, dass wir eine Reihe von Komponenten haben, auf die wir unsere Arbeit stützen können - was das ist, wird noch früh genug klar werden.
Die beste Kombination für ein Design System ist die Einrichtung:
- Eine gemeinsam genutzte Komponentenbibliothek. Eine einzige Quelle der Wahrheit für Entwickler. Andere können sie auch als Referenz verwenden. Dies ist ein Online-Tool, in dem alle wiederverwendbaren Elemente der Anwendung aufgeführt sind. Sie brauchen eine Schaltfläche für ein Formular? Kein Problem. Schauen Sie einfach in der Bibliothek nach. Sie steht für Sie bereit, da sie bereits kodiert wurde. Importieren Sie sie einfach aus der Bibliothek und verwenden Sie sie nach Belieben.
- Design-Bibliothek. Eine Sammlung von allem, was entworfen - und vereinbart - wurde, sollte hier abgelegt werden. Für Designer ist es eine einzige Quelle der Wahrheit, aber auch Entwickler und Tester nutzen es als Referenz. Hier finden Sie die Farben, die Sie verwenden sollen. Was ist mit Typografieregeln? Wie sieht es mit Symbolen, Abständen oder Rastern aus? Das alles ist hier online und kann von jedem Designer leicht aktualisiert werden.
- Arbeitsablauf. Sie haben vielleicht schon Erfahrung mit Bibliotheken, aber Sie haben festgestellt, dass sich niemand darum kümmert, sie zu aktualisieren oder zu verfolgen? Das liegt daran, dass niemand daran gedacht hat, die Leute zu fragen, was sie eigentlich brauchen. Fordern Sie die Leute auf, einen Arbeitsablauf zu erstellen, der ein Designsystem nutzt, aber mühelos zu befolgen ist.
Nun, da das Designsystem gut definiert ist, lassen Sie uns zu unserer Aufgabe zurückkehren.
Teil I | Design | Wo Sie beginnen sollten
Für welche Elemente müssen Sie, ausgehend von dem zuvor gezeigten Drahtgitter, Komponenten entwerfen? Der erste Schritt ist ein Blick in die Design-Bibliothek und die Verwendung der dort vorhandenen Elemente.
Fehlt etwas? Wenn ja, aktualisieren Sie die Design-Bibliothek mit den Elementen, die Sie von Grund auf neu erstellen mussten. Sie haben bereits Regeln für Farben, Typografie, Abstände und mehr, so dass viele der Entscheidungen bereits getroffen sind. Das war's!
Nutzen Sie diese freie Zeit, um an der Benutzerfreundlichkeit oder Zugänglichkeit zu arbeiten. Die ganze Zeit, die Sie gespart haben, können Sie für den Feinschliff Ihrer Designs verwenden. Ich weiß, wie das klingt - es ist zu schön, um wahr zu sein. Nun, das ist es, was wir aus eigener Erfahrung herausgefunden haben.
Der zusätzliche Vorteil ist eine Designsprache, die sich organisch entwickelt. Dabei handelt es sich um eine Vereinbarung zwischen den Teammitgliedern darüber, wie bestimmte Teile einer Anwendung benannt werden sollen. Es ist einfacher, den ständigen Aktualisierungen zu folgen, wenn der Fachjargon geklärt ist - wir haben uns hier ausführlicher mit Designsystemen und der Sprache befasst.
Teil II | Entwicklung | Übergabe an die Entwicklung
Das Design ist fertig und der Entwickler prüft, ob es mit dem Designsystem übereinstimmt. Dann prüft er, ob etwas aus der Komponentenbibliothek verwendet werden kann (z.B. alle wiederverwendbaren Codeteile). Danach aktualisieren sie die Komponentenbibliothek mit allem, was noch fehlt. Schließlich baut der Entwickler die Ansicht in der Anwendung schnell auf, als wäre es eine Lego-Struktur - es geht einfach darum, die Komponenten richtig zusammenzusetzen.
Teil III | Tests | Was sehen wir uns an?
Der Tester prüft, ob der Entwurf mit der Designbibliothek übereinstimmt. Meistens ist das der Fall! Schließlich werden die meisten Elemente wiederverwendet und diese wurden bereits getestet. Danach kann der Fokus auf das gerichtet werden, was für den Kunden wirklich wichtig ist, wie die Geschäftslogik und die Benutzerfreundlichkeit der gesamten Anwendung.
Dieser Schritt kann auch automatisiert werden. Sie erstellen einfach einen Snapshot der Komponenten des Designsystems und einen Snapshot der neuen Änderungen. Dann lassen Sie sie von der Maschine vergleichen.
Teil IV | Wie viel Zeit haben wir verloren?
Das war schnell! Es ist wirklich möglich, eine Aufgabe schnell in die Realität umzusetzen. Dies sind nur einige der vielen Vorzüge des Design Systems. Es gibt sicherlich noch mehr.
Ziehen Sie in Erwägung, die gesamte Anwendung zu aktualisieren oder neu zu gestalten - wenn Sie eine Farbe an einer Stelle ändern, überträgt sich das auf alle Ansichten. Sie haben alles an einem Ort und alles unter Kontrolle. Stellen Sie sich vor, wie viel Zeit Sie für sinnlose Diskussionen sparen und für Experimente oder Tests verwenden können.
Unsere Zeitschätzungen sprechen für sich selbst. Bei einer Aufgabe, die dieser hypothetischen Aufgabe ähnlich ist, haben wir die folgenden Schätzungen berechnet:
Ohne ein Designsystem? - 73 bis 85,5 Arbeitsstunden Mit einem Designsystem? - 25,5 bis 36 Arbeitsstunden
Mit einem Design System werden viele sich wiederholende Entscheidungen und lästige Prozesse aus dem Projekt herausgenommen. Auch wenn es sich dabei nicht um völlig neue Konzepte handelt, wurden sie verbessert und gestrafft, um sich auf drei wichtigere Bereiche zu konzentrieren:
- Beziehen Sie das gesamte Team (Designer, Entwickler und Tester) in die Erstellung von Workflows ein.
- Einrichtung von Bibliotheken, die für jedermann leicht zugänglich sind
- Konzentrieren Sie sich auf die Wiederverwendung dessen, was bereits geschaffen wurde
Zusammenfassung
Selbst bei der geringsten Effizienz ist der Unterschied zwischen 73 und 36 Stunden atemberaubend - über 50 % der benötigten Zeit werden eingespart! Design Systems beseitigt nicht nur alle unnötigen und sich wiederholenden Aufgaben, sondern rationalisiert auch den Rest der Arbeit.
Natürlich könnten wir voreingenommen sein, da wir selbst Design System Techniken verwenden. Aber lassen Sie uns hier ganz klar sein: Wir würden es nicht so machen, wenn es nicht so gut funktionieren würde.
Was Sie mit dieser zusätzlichen Zeit anfangen, liegt ganz bei Ihnen. Sie können sie für zusätzliche Tests verwenden, mehr Zeit auf die wenigen neuen Elemente verwenden, die hinzugefügt werden müssen, oder einfach nur Ihre Produkte so schnell wie möglich auf den Markt bringen, ohne die Qualität zu beeinträchtigen. In jedem Fall sparen Sie Geld, Ressourcen und glückliche Teammitglieder!
Geschäftsperspektive
Mit einem Designsystem können Sie mehr als 50 % der Zeit einsparen, die für das Entwerfen, Entwickeln und Testen benötigt wird. Außerdem sorgen Sie für Konsistenz und geben Ihrem Team mehr Zeit, sich auf das zu konzentrieren, was wichtig ist: Qualität und Innovation.
Contact