Die Icon-Reise

24. Oktober 2017 Chris Dias, @chrisdias

Zusammenfassung

Vielen Dank für all das leidenschaftliche Feedback. Es war sehr hilfreich, schmerzhaft und unterhaltsam zugleich. Wir ändern das orangefarbene Icon zu blau für Stable und behalten grün für Insiders.

Welche ist Ihre Lieblingsfarbe?

In Monty Python and the Holy Grail stellt der Brückenwächter Sir Lancelot drei Fragen, bevor er ihn über die Brücke des Todes gehen lässt. Beantwortet er alle drei richtig, darf Sir Lancelot passieren. Beantwortet er sie falsch, endet es mit einem unzeitigen Tod. Sir Lancelot antwortete blau, als er nach seiner Lieblingsfarbe gefragt wurde, und durfte passieren.

Wir antworteten "orange".

Entschuldigung und Transparenz

Zunächst eine Entschuldigung für die Verzögerung bei der Antwort. Wir haben das Feedback beobachtet, jeden einzelnen Beitrag gelesen und "lebhafte" Diskussionen über die nächsten Schritte geführt. Wir glauben, dass wir einen rationalen Plan haben und möchten ihn mit Ihnen teilen. Wir freuen uns auf einen fortlaufenden Dialog über ein Thema, von dem wir nun wissen, dass es sehr kontrovers ist.

Für vollständige Transparenz möchten wir Ihnen etwas zur Geschichte erzählen, da wir glauben, dass dies hilft zu verstehen, wie wir überhaupt auf Orange gekommen sind.

Willkommen in der Familie

Im März haben wir (das breitere Visual Studio-Team) uns vorgenommen, ein "Familiengefühl" für alle von uns produzierten Entwicklertools zu schaffen. Wenn Sie diesen Blogbeitrag noch einmal lesen, können Sie sehen, dass wir uns an eine Reihe von "herausfordernden" Unternehmensbranding-Richtlinien halten mussten (z. B. eine einzelne Farbe).

Es ist leicht, die Richtlinien zu beschuldigen, aber gleichzeitig ist es ein wertvolles Gut, eine Reihe von Produkten zu haben, die leicht und breit erkennbar sind. Stattdessen haben wir die Herausforderung angenommen, innerhalb der Einschränkungen zu arbeiten und gleichzeitig unternehmensweit daran zu arbeiten, die Richtlinien weiterzuentwickeln und die Probleme anzugehen, mit denen wir konfrontiert waren.

Als wir das negative Feedback zu den ersten Icons sahen, konzentrierten wir uns auf das VS Code-Icon. Wir wollten ein Icon erstellen, das sowohl von der breiten Community als auch von uns selbst sofort, visuell und emotional ansprechend gefunden wird.

Hier sind einige der ersten Entwürfe

Keines davon stach für uns wirklich hervor, außer dem in der oberen rechten Ecke.

Dieses wurde abgelehnt, da es keine Falten enthielt, die ein Bestandteil des Familiendesigns sind. Zurück auf das Zeichenbrett.

Wir haben eine Zeit lang mit dem Unendlichkeitslogo experimentiert, zum Beispiel

Einschließlich eines, das Ihre Augen verletzen wird

Bis wir bei dem aktuellen "Fisch" landeten, der mit zugegebenermaßen wenigen Entwicklern gut getestet wurde.

Rotation

Auf macOS (und Linux) haben wir viel mehr Gestaltungsfreiheit, weshalb wir dort ein anderes Icon haben. Während wir die gleiche Icon-Form beibehalten wollten, waren wir nicht auf eine einzige Farbe beschränkt und konnten Kontrastprobleme lösen, indem wir das Icon auf ein dunkles Panel montierten. Die Rotation entspricht den Apple Design-Richtlinien.

Das Feedback, dass die Rotation veraltet ist und die Halterung das Icon kleiner erscheinen lässt als andere Icons im Dock, ist jedoch völlig berechtigt.

Ermüdung

Mitte des Sommers trat die Icon-Müdigkeit ein. Wir hatten so viele Iterationen gemacht, dass wir schließlich sagten: Wir bleiben bei der aktuellen Form, und wir checkten das "Vorabversion"-Design für Insiders ein. Eine Vorabversion wird durch den gehaschten Kasten rechts und unten gekennzeichnet.

Der Hash sieht in großen Größen (z. B. auf einer PowerPoint-Folie) gut aus, aber in kleinen Größen ist der Kasten sehr verwaschen und das Icon wird unscharf. Wir haben eine Reihe von Konturen in Weiß, Schwarz und verschiedenen Orange- und Grüntönen experimentiert. Hier sind sie vergrößert, um die Kanten zu sehen.

Um dieses Problem zu bekämpfen, haben wir auch die macOS-Version unter Windows ausprobiert, und das sah einfach deplatziert aus, und in kleinen Größen sogar noch schlimmer. Am Ende haben wir beschlossen, das Vorabversionsdesign fallen zu lassen und eine andere Farbe für Insiders zu verwenden. Grün war verfügbar, und es war die bestehende Insiders-Farbe, also haben wir uns dafür entschieden.

Voilà, Insiders

Icon-Squatting

Bevor es VS Code gab, gab es Visual Studio Monaco, unsere voll browserbasierte Werkbank, mit der Sie Ihre Azure App Service-Web-Apps live bearbeiten konnten. Da es sich um ein Online-Angebot handelte und wir ein Icon benötigten, haben wir uns das blaue Unendlichkeitssymbol "ausgeliehen".

Als wir VS Code zum ersten Mal veröffentlichten, geschah alles so schnell, und das Icon war uns am wenigsten wichtig. Unabhängig davon, was Sie von dem neuen Icon halten, das alte sieht auf dem Desktop und in der Taskleiste/im Dock ziemlich schlecht aus, es war wirklich als Favicon gedacht.

Später, als wir beschlossen, dass jedes Produkt in der Familie seine eigene Farbe haben würde und Blau bereits vergeben war, mussten wir uns etwas anderes einfallen lassen. Außerdem haben wir es ihnen gestohlen, also schien es richtig, es zurückzugeben :).

Kürbisgewürz

Zu diesem Zeitpunkt waren uns fast die Farben in der Familienpalette ausgegangen, außer dem nun berüchtigten Orange. Es gab einige Bedenken hinsichtlich der Ähnlichkeit mit der Farbpalette von Sublime Text, aber als wir es testeten, hatte niemand Probleme. Und ehrlich gesagt, wir waren überraschter von der neuesten Verwendung eines gefalteten Bandes durch Sublime.

Wie man schnell viele Rückmeldungen generiert ...

Die Insiders-Builds hatten die orangefarbenen und dann grünen Icons für etwa 2 Monate, während wir an den oben genannten Problemen feilten, und es kamen nicht viele negative Rückmeldungen.

Vielleicht waren unsere Ängste unbegründet. Vielleicht würden den Nutzern die neuen Icons wirklich gefallen und all die Anspannung wegen einer Handvoll Probleme war es nicht wert, den Schlaf zu verlieren. Wir beschlossen, kein Licht auf etwas zu werfen, das vielleicht kein Problem war. Wir drückten die Änderungen und machten eine kleine Referenz auf die neuen Icons in unseren Release Notes.

Und dann begannen die Probleme und Kommentare hereinzukommen.

Jeden Tag gab es zusätzliche Kommentare, die jeweils auf neue und interessante Weise eine Abneigung gegen das neue Icon ausdrückten. Nach den ersten paar Tagen dachten wir, die Rückmeldungen würden nachlassen und wir könnten die einzelnen Probleme angehen. Es stellte sich heraus, dass wir falsch lagen. Das Feedback kam einfach immer weiter. Neue Probleme wurden eröffnet, Kommentare kamen schneller herein, als wir reagieren konnten. Hacker News, Visual Studio Magazine. High-School-Freunde posteten Kommentare auf Facebook. Großartig.

Du bist mein Junge, Blau!

Und das bringt uns zum heutigen Tag.

Wir haben das gesamte Feedback aus der Fülle der eröffneten und kommentierten Probleme überprüft, seit wir 1.17.0 veröffentlicht haben, mit dem wir das orangefarbene Icon für Stable eingeführt haben. Es ist klar, dass die Halloween-Veröffentlichung von VS Code für viele von Ihnen nicht gut funktioniert hat, und dafür entschuldigen wir uns.

Zufälligerweise hat mdb07a, während ich das schreibe, gute Arbeit geleistet, indem er das Feedback und die Probleme unter Windows zusammenfasste. Ich fasse zusammen und es gibt mehr Probleme, aber die Hauptprobleme sind:

• Die Farbänderung war viel zu drastisch, Orange ist die entgegengesetzte Farbe von Blau, was das, was vorher gut aussah, jetzt schrecklich aussehen lässt.
• Ein flaches, einfarbiges Icon, das sich ausschließlich auf Transparenz zur Erzeugung von Negativraum verlässt, macht es weniger unverwechselbar und verschlimmert die Unterscheidbarkeitsprobleme.
• Der neue Rand ist so groß und fett, dass er dem Auge deutlicher auffällt als das Unendlichkeitszeichen.

Auf macOS ist das häufigste Feedback, dass die Neigung veraltet aussieht und die wichtigen Teile des Icons im Vergleich zu anderen Icons im Dock klein erscheinen lässt.

All dieses Feedback hat uns dazu gedrängt, zurückzugehen und zu sehen, ob wir es besser machen können, während wir immer noch eine Produktfamilie schaffen. Infolgedessen werden wir das Stable-Icon auf das viel geliebte Blau ändern.

Was gut mit der Statusleiste und anderen Blautönen im Editor harmoniert

Für Leute, die Schwierigkeiten haben, den Unterschied zwischen Stable und Insiders zu erkennen, funktionieren Grün und Blau besser zusammen. Hier sind die beiden Icons, die die Sim Daltonism-App verwenden (Deuteranomalie)

Es ist unvermeidlich, dass wir mehrere Produkte haben werden, die sich Farben teilen, daher sind wir nicht mehr besorgt darüber, dass VS Code sich die blaue Farbe teilt.

Wir erwägen die Verwendung eines nicht geneigten Icons für macOS, basierend auf dem Kommentar von @donysukardi hier. Wir können noch nicht sagen, ob wir das tun werden, aber wir werden es prüfen und in jedem Fall werden wir Updates in diesem Issue veröffentlichen.

Ausblick

Die Änderung von Orange zu Blau behebt nicht alle Probleme, ist aber ein Schritt nach vorn. Wir erwarten, dass sich die Ikonografie weiterentwickeln wird, und sind offen für neue Ideen für VS Code innerhalb der Familie.

Wir haben eine harte Lektion darüber gelernt, wie man Icon-Änderungen entwickelt und ausrollt, also danke. Für diejenigen, die das orangefarbene Icon geliebt haben, hoffen wir, dass Ihnen Blau noch besser gefällt.

Danke, Chris