UI
改善
トグルボタン

状態か機能かわからないトグルボタンの改善

More than 1 year has passed since last update.


概要

ちょうど2ヶ月ぐらい前に同じことを思い、改善策を考えていたので、現実的で筋が良さそうな2つの案を紹介します。


改善策1 : 機能を表すラベルとその状態を表すトグルボタンのセットにする

改善策1.png

ボタンという機能をもちつつも、その表面に状態を表現することが混乱させてしまう原因なので、機能と状態に分離し、各々を明確に表現することで改善します。


改善策2: ツールチップを用いてそのボタンのアクションを明記する

改善策2.png

状態は画面を見てわかっていたりするので、本当にユーザーさんが欲しい情報はそのボタンの機能だと考えると、状態は置いといて、マウスホバー時などにツールチップを用いてアクションを明記することで改善します。ホバー状態があるPCの場合に使える技ではありますが。