Reproが創設して間もない頃は、クライアントに喜んでもらうため、どんどん新機能をつくっていました。しかし、スピードを重視した結果、スイッチなどの単純な機能のデザインがおろそかになってしまっていました。

先日、ツール内の基本的なコンポーネントを見直す機会をもらい、デザインの向上に取り組みました。

web上でのスイッチの役割とは?

簡単に言えば、オンとオフの切り替えです。スイッチを押すという作業によって家の電気をつけるように、単純なアクションに対して何かが切り替わったり、変化する必要があります。

初期のデザイン

決して悪いデザインではありませんが、理想的なものとは言えません。ユーザーからわかりにくいという声が上がったわけではありませんが、まだ改良できる点があります。

大きすぎる

まず1つ挙げられたのが、大きすぎるという点です。単体で見るとそこまで大きく感じないのですが、イベント設定ページや、ユーザープロフィール設定のようなリストの中にあると、スペースを取りすぎている事がすぐにわかります。

わかりにくい

次に挙げられたのが、それだけを見たときにオンなのかオフなのかすぐに判断しにくいという点です。

不十分なアクセシビリティ

オン・オフの区別で最もわかりやすいのが色をつけることですが、色覚障害の方には以下のように見えてしまいます。

どちらがオンでどちらがオフなのかとてもわかりにくくなってしまいます。これだと、白い部分が選択されているように見えてしまいますが、実際には逆なのです。

新しいデザイン

適したサイズ

インプットやボタンなど、すべてのコンポーネントの大きさを標準化しました。標準化したことで、レイアウトが容易になりました。

アフォーダンス

アフォーダンス理論とは、簡単に言えば、過去の経験にもどついて行動を起こすという理論です。

わかりやすくするため、オンにしたとき背景だけでなく枠線も含めてピンクに変わるようにしました。これなら、ユーザーはオンとオフを間違えることはほとんどないでしょう。

また、webの標準表記に合わせて、オンを右側に移動しました。

アクセシビリティ

スイッチがオンになっている場合はオンという文字のみ表示されるため、色で区別することなく判断が可能になります。さらにテキストがオフからオンに移動するアニメーションも追加されました。

今回の改良は、少しでもUXを良くするための、わずかなものに過ぎません。

タグ

著者について
Alex Kwa

デザインマネージャー、Repro
Repro創設時からデザイナーとして従事。
ディーター・ラムス、吉岡徳仁と深澤直人を敬愛している。
ストリートブランドSupremeをこよなく愛するノマドワーカー。