Wie und warum habe ich eine Farbvariante und ein Barrierefreiheitstool entworfen

Als Entwickler war die Auswahl der Farben für meine Designs immer eine der schwierigeren Aufgaben. Um zu helfen, verwende ich normalerweise Tools wie Kühler, SASS-Farbgenerator und diesen Farbkontrastprüfer.

Mein Prozess sah früher ungefähr so ​​aus:

  1. Erstellen Sie eine Palette mit Kühlern
  2. Wählen Sie mit dem SASS Color Generator Varianten für jede Farbe aus
  3. Koppeln Sie Varianten zu Hintergrund- / Vordergrundkombinationen.
  4. Überprüfen Sie mit dem Farbkontrastprüfer, ob die Paare zugänglich sind.
  5. Fügen Sie meine ausgewählten Farben meinem Design-Tool Ihrer Wahl hinzu (Figma).
  6. Passen Sie die Farben an und wiederholen Sie den Vorgang ab Schritt 2.

Also, was war das Problem?

Mein alter Prozess beinhaltete viel Hin und Her zwischen verschiedenen Anwendungen. Ich konnte meine Farben nicht optimieren und die Auswirkungen auf die Barrierefreiheit in Echtzeit sehen. Stattdessen musste ich HEX-Codes von einer App in eine andere kopieren / einfügen. Als ich dann bereit war, mit der Entwicklung zu beginnen, musste ich die Variablen in SASS / CSS manuell erstellen und die Werte erneut kopieren.

Und die Lösung?

Erstellen Sie ein Tool, mit dem ich (fast) alles an einem Ort erledigen kann. Mein Ziel war es, zu einem Prozess wie diesem zu gelangen:

  1. Erstellen Sie eine Palette mit Kühlern
  2. Wählen Sie Varianten aus, koppeln Sie Farben und nehmen Sie Optimierungen mit einer einzigen App vor.
  3. Fügen Sie die resultierenden Farben meinem Design-Tool Ihrer Wahl hinzu.

Ich wollte auch, dass die App meine Farben in Code exportieren kann, damit ich einen guten Ausgangspunkt für die Entwicklung habe.

Der erste Proof of Concept

Ich wollte etwas so schnell wie möglich zum Laufen bringen, damit ich es testen konnte. Zu diesem Zweck habe ich mich daran gemacht, einen Prototyp zu erstellen.

Anwendungsfälle

Der erste Schritt bei der Zusammenstellung eines Prototyps bestand darin, die Anwendungsfälle zu definieren, die ihn antreiben würden.

  1. Als Benutzer möchte ich Varianten für meine Grundfarben generieren.

Ich wollte in der Lage sein, die App zu öffnen, meine Grundfarben hinzuzufügen, die Varianten auszuwählen und sie dann wieder in mein Designtool zu exportieren. Einfach?

2. Als Benutzer möchte ich überprüfen, ob auf ein Hintergrund / Vordergrund-Farbpaar zugegriffen werden kann.

Anhand der eingegebenen Grundfarben oder ihrer Varianten wollte ich überprüfen können, ob zwei Farben beim Koppeln verfügbar sind.

3. Als Benutzer sollte ich sehen können, welche Auswirkungen das Ändern einer Grundfarbe auf die Barrierefreiheit hat.

Ich wollte in Echtzeit Feedback zu den Farbpaaren erhalten, die ich jedes Mal ausgewählt hatte, wenn ich Änderungen an meinen Grundfarben vorgenommen hatte.

Eine (sehr grobe) Arbeitsversion

Nachdem die Anwendungsfälle definiert waren, begann ich mit dem Entwurf des Prototyps. Ich entwickelte eine Farbpalette, entwarf einen begrenzten Satz von Komponenten und kam schließlich zu einer Lösung mit drei „Modi“ oder Seiten, bei denen der Benutzer zwischen ihnen wechseln musste, um seine Aufgaben zu erfüllen.

Anstatt es weiter zu beschreiben, werfen wir einen Blick darauf.

Wie Sie auf dem Bild oben sehen können, hat der Prototyp alles erreicht, was ich wollte, basierend auf den anfänglichen Anwendungsfällen… Art von.

Klicken Sie hier, wenn Sie den Prototyp dank der Magie der Netlify-Bereitstellungsvorschau selbst ausprobieren möchten.

Das Gute und Schlechte des ursprünglichen Designs

Ich hatte nie vor, dass der erste Prototyp etwas anderes als ein Sprungbrett sein sollte, und Sie können selbst sehen, dass er ziemlich rau und fehlerhaft war.

Für die nächste Version habe ich mir zunächst angesehen, was mir am Prototyp gefallen hat .

Variantenmodus

Ich war ziemlich zufrieden mit dem Ergebnis der Variante, die einen Teil des Prototyps generiert. Es war ganz einfach, eine Farbe auszuwählen und eine Liste mit Varianten zu erhalten. Der Ansatz mit Registerkarten funktionierte auch recht gut, um mehrere Grundfarben hinzuzufügen.

Änderungen der Barrierefreiheit nach dem Ändern einer Farbe sehen können

Wie Sie in der obigen kurzen Demo sehen können, mussten HEX-Codes nicht zwischen Anwendungen kopiert / eingefügt werden. Ich konnte jetzt eine meiner Farben ändern und sehen, wie sich dies sehr schnell auf die Farbzugänglichkeit auswirkte.

Dann fing ich an, Dinge auszuwählen, die mir nicht gefielen und die verbessert werden mussten .

Wechselwirkungen waren nicht offensichtlich

Aufgrund der Ankunft auf der Startseite war nicht sofort ersichtlich, wie Sie Varianten auswählen und die Zugänglichkeit überprüfen. Sie konnten wahrscheinlich herausfinden, dass Sie irgendwann auf die Kacheln klicken mussten, aber es war wirklich klobig.

Die Modi waren verwirrend

In den ersten Entwürfen konnten Sie nur Paare aus der Palettenansicht hinzufügen und nur Varianten aus der Variantenansicht hinzufügen / entfernen. Das alles beinhaltete viel Umschalten zwischen den Bildschirmen und ich war frustriert darüber, wie viel Arbeit die App von mir machte. Dies führt mich zu meinem nächsten Punkt.

Es war zu viel Klicken erforderlich

Sie müssen klicken, um eine Variante hinzuzufügen. Dann müssen Sie klicken, um zur Palettenansicht zu gelangen. Dann müssen Sie mehrmals klicken, um ein Paar zu erstellen. Dann müssen Sie noch etwas klicken, um das gerade hinzugefügte Paar zu sehen. Wie ich oben erwähnte, war das Ganze ziemlich klobig und dies war wahrscheinlich der schlimmste Teil des Prototyps und etwas, von dem ich wusste, dass ich es ändern musste.

Auf dem Bildschirm waren nicht genügend Informationen gleichzeitig sichtbar

Je öfter ich es benutzte, desto weniger mochte ich das von mir erstellte „Modi“ -Konzept. Ich glaube, ich wurde von dem ursprünglichen Prozess beeinflusst, der die Anwendung inspiriert hat, und ich habe die Bildschirme in Silos entworfen, anstatt eine einheitliche Erfahrung zu entwerfen. Nachdem ich den Prototyp verwendet hatte, entschied ich, dass ich vom Konzept der „Modi“ zu etwas migrieren musste, das idealerweise alle auf einer einzigen Seite durchgeführt werden konnte.

Ein zweiter Versuch

Ich nahm die Lehren, die ich aus dem Prototyp gezogen hatte, und machte mich daran, eine bessere Version der App zu erstellen.

Um die Anzahl der erforderlichen Interaktionen zu verringern, die Mehrdeutigkeit der Interaktionen zu verringern und die Menge an Informationen zu erhöhen, die dem Benutzer gleichzeitig zur Verfügung stehen, habe ich mich für eine Drag & Drop-basierte Benutzeroberfläche entschieden, auf der der Benutzer ziehen kann Kacheln herum, um sie zu ihrer Palette hinzuzufügen oder Zugänglichkeitsprüfungen zu erstellen.

Das Ziehziel wird immer angezeigt, sodass nicht zwischen den Bildschirmen gewechselt werden muss.

Werfen wir einen Blick auf das, was ich mir ausgedacht habe.

Hier können Sie auf die aktuelle Version der Anwendung zugreifen.

Nächste Schritte

Die Anwendung steckt noch in den Kinderschuhen und obwohl die zweite Version der Idee, die ich mir vorgestellt hatte, viel näher kommt, können noch Verbesserungen vorgenommen werden.

Aus Code importieren

Neben dem Exportieren der Palette möchte ich die Möglichkeit hinzufügen, die anfänglichen Grundfarben aus Code zu lesen, der Variablen enthält (zunächst SASS- und CSS-Variablen).

In weitere Formate exportieren

Derzeit können Sie nur SASS exportieren. Ich plane, in Zukunft Unterstützung für CSS-Variablen und andere Formate hinzuzufügen.

Integration in Design-Tools

Das Exportieren in Code ist großartig, aber es wäre noch besser, wenn ich die Palette exportieren und dann als Ebene oder gemeinsam genutzten Stil in einem Entwurfswerkzeug wie Figma oder Sketch importieren könnte.

Verfeinern Sie die Benutzeroberfläche

Seien wir ehrlich, es ist nicht die am besten aussehende Anwendung der Welt. Ich plane, die UI-Komponenten zu optimieren, um die App visuell zu verbessern.

Feedback und Fehlerberichterstattung

Dieser spricht für sich. Ich kann die App nur mit Beiträgen derjenigen verbessern, die sie verwenden. Zu diesem Zweck plane ich, in Zukunft ein Feedback-Formular hinzuzufügen.

Feedback

Apropos Feedback… Ich habe diesen Artikel aus zwei Gründen geschrieben. Das erste war, Sie durch den Prozess zu führen, den ich durchlaufen habe, um zum aktuellen Design zu gelangen, in der Hoffnung, dass Sie daraus lernen können.

Der zweite Grund ist, dass ich das Tool der Entwicklungs- und Design-Community vorstellen wollte, da es meiner Meinung nach für viele Menschen nützlich sein kann, und auch Feedback dazu in seinem aktuellen Zustand einholen möchte.

Wenn Sie also Gedanken zum Design, zur Funktionalität, zum Prozess der Erstellung des Tools oder zu anderen Themen haben, würde ich es gerne hören!

Links

Prototyp

Aktuelle Version

Komponentenbibliothek