UXデザイナーから学ぶ、無効状態のボタンをグレーアウトにしない理由

Post on:2019年8月22日

無効状態のボタンをグレーアウトにしない理由

ページ上でアクティブになっていないボタンがある場合、あなたはどのように実装していますか？ボタンを本来の場所から一度削除した後に表示すると、ユーザーは突然現れたボタンに驚くかもしれません。その代わりに、デザイナーはインターフェイスに大幅な変更が表示されないように「無効になったボタン」を使用します。

多くのデザイナーはこの無効状態をユーザーに伝える方法として、ボタンをグレーアウトにします。ただし、この方法ではボタンの有効状態が無効状態に似ていないため、ユーザーは同様に驚くことになります。

ボタンの無効状態をどのようにするとよいか

ボタンがグレーからフルカラーに変わるのは、ユーザーにとっては何が起こったのかと思わせる予期せぬ変化です。スムーズで、シームレスなエクスペリエンスを実現するには、これを避けることをお勧めします。無効状態のボタンをグレーアウトにする代わりに、不透明度を下げて透明する方法があります。

無効状態のボタンが透明な場合、ユーザーは有効状態のボタンの外観を確認できます。ボタンはフェードアウトされていますが、ユーザーが認識できるように一部のカラーは透けて見えます。そのため、無効状態のボタンが有効状態に移行しても、その外観にユーザーが不意をつかれることはありません。

さらに、透明なボタンは背景に溶け込みますが、グレーのボタンは前景に残ります（背景がグレーでない場合）。前景要素は、ユーザーにとってより目立ちやすいものです。ユーザーはボタンを操作するものとして認識する傾向があり、ボタンがグレーアウトされた無効状態でも操作してしまう可能性を示唆します。

左: グレーアウトの無効ボタン、右: 透明の無効ボタン

ユーザーが透明なボタンを他のボタンと混同する可能性は低いです。グレーのボタンは常に無効になっているわけではありません。例えば、優先度の低いボタン（キャンセルなど）にグレーが使用されることがあります。ユーザーはグレーアウトの無効ボタンを2次的なアクションボタンと間違える可能性もあります。また、最悪の場合、カラーコントラストの低いデザインが悪いボタンとして認識する可能性もあります。

無効状態のボタンをデザインする場合は、カラーではなく不透明度を調整します。最適な不透明度の値は、背景色によって異なります。おおまかな目安としては、不透明度を40%以下にすることです。不透明度を十分に低くすることが重要です。そうしないと、一部のユーザーにはボタンが有効な状態に見えるかもしれません。

このテクニックを使用すると、ユーザーを驚かせることなく、無効になったボタンを無効状態に見せることができます。その代わりにユーザーが驚くのは、インターフェイスがいかにスムーズでシームレスであるかだけです。