青(Running)と緑(Completed)を区別する - よりinclusiveなCircleCIを目指して
本記事は、
に参加しています。
はじめに
街はクリスマスで、緑と赤であふれかえっていますが、ユーザインタフェースに緑や赤を多用するのは、オンプレ時代であればデータベースサーバ、クラウド時代であればCI/CDサービスではないかと考えている @mfunaki です。
UIにおける「色」については、去年のCircleCI Advent Calendar 2021でも取り上げさせていただきました。
本記事は、色使いだけですべてが必ずしも解決できない問題を取り上げさせていただきます。
CI/CDサービスの悩みどころ
緑や赤を多用するUIを持つCI/CDサービスにおいては、弊社以外にも、inclusiveなUIデザインについてさまざまな取り組みが行われています。
また、CI/CDサービス以外にも(冒頭にあげたデータベースサーバ以外にも)、IDEやエディタといった開発ツールにおいても緑や赤は多用されており、Microsoftのような大手ベンダーでは、W3CのWCAG(Web Content Accessible Guidelines)相当のガイドラインに準拠したデザインに取り組んできた歴史があるようです。
WCAGでは、4.5:1のコントラスト比をガイドラインとして挙げていますが、4.5:1のコントラスト比を持つからといって、アクセシビリティが担保されていると言い切れない点に関しては、昨年のブログでも取り上げました。
CircleCIにおける並行実行時の実行状況表示
そんな折、CircleCIの「青と緑の色の違いが見辛い」という指摘がされたツイートを目にしました。
(circleciのコンテナの青と緑の色の違いが見辛いのは自分だけなのかな)
CircleCIの中の人としてお恥ずかしい話なのですが、ここで言われていることが何を指しているのかが分からなかったので、投稿いただいた方にスクリーンショットをいただいたのでした。
CircleCIで複数の実行環境を並行して実行する際に、parallerism指定をすることが可能ですが、この際に、それぞれの実行環境に割り振られたジョブの軽重により、早く実行が完了する環境もあれば、完了までに時間がかかる環境も当然出てきます。
こちらに紹介した画面では、５実行環境が並行して実行されており、実行中の環境すべて(0, 1, 2, 3, 4)が「青色」の箱で描画されています。
実行環境 2 のジョブが完了したことが「緑色」の箱で示されています
最終的には、すべての実行環境でジョブが完了しています。
上に挙げた３つのスクリーンショットは(サイズも大きく)、緑と青が(私の目では)区別できているのですが、これらの色の違う箱を
- ブラウザ上で
- 実行状況に応じて色が変化しつつある状況で
色の違いを区別してジョブの実行状況を把握するのは、ほぼほぼ不可能ではないかと感じました(言い訳っぽくなってしまいますが、だからこそ、これまで実行状況が色の違いで表されていることに気が付いていませんでした)。
CircleCIにおける取り組み
こういった「見にくさ」はサービスのUIに限った話ではなく、例えばCircleCIのドキュメントやウェブサイトなどについて、さまざまなご指摘をいただき、
- ブラウザの機能を使って疑似体験してみたり
- (去年のブログでもご紹介したように)さまざまな色覚をお持ちのエンジニアの方のご意見を伺ったり
しています。
先に取り上げた、「実行環境の四角いアイコンの色が判別しづらい」件に関しては、単に色やコントラストを変えるだけでなく、アイコンのデザイン自体も修正する方向で(実は)対応を進めてきていました。ただし、今回いただいたご意見を元に、再度アイコン候補を見たところ、(ブラウザ上で小さく表示されることを考え合わせると)デザインの再検討を行うこととなりました。
(実際にはこれがブラウザ上でもっと小さく表示されることを考えると、デザインの改良が必要であると判断された)
おわりに
人間は五感から得られる情報の中で、視覚情報の占める割合が大きい一方で、視覚以外の情報とも組み合わせた場合のUIのあり方(例えば、スクリーンリーダーと組み合わせた際の情報の提示方法や i18n, l10n)についても、CircleCIではアクセシビリティチームが検討を進めています。
グローバルにユーザーが存在するプロダクトやサービスが、よりinclusiveであるための取り組みとして、開発やデザインの現場でどういったことがされているか、(昨年のブログと合わせて)知っていただく一助となれば幸いです。
Discussion