https://togetter.com/li/2526176
Webの画面作っていると困ることがあります。
スイッチかつ現状を表す部品を作るときです。
以前はラジオボタンで「 ◯はい ◉いいえ」で現在の状態を表した上で、選択を変えた後に「送信」ボタンを押して選択を有効にする仕組みでした。
Webから進化したアプリでは送信ボタンがなくなり、選択した瞬間に更新される様になりました。
即座に変わることを示すためにラジオボタンからスイッチのような形に変わりました。
その結果、上記画像のような今の状態を把握するのと、押した後の状態がすぐにわからないUIが増えました。
例えばLINEの通知設定ですが、トークを開いた状態で右上のハンバーガーメニューから設定画面を開くと
スピーカーが取り消されたアイコンと「通知オン」の文字があります。
こちらは「現在通知機能は無効になっていて、押すと通知オンになります」という意味です。
一方、トーク一覧画面にてトークを長押しすると下記画面が出てきます。
同じ通知オフ状態での表示です。「押すと通知オンになります」という意味です。現状は表していません。
狭い領域で状態表示とスイッチを共存させるとこのようなことが起こってしまいます。アイコンで状態を表すならスイッチは別画面の方がいいのかもしれませんね。
アップルはトグルスイッチを利用しているのでONかOFFかがすぐに分かるようにしています。
アイコンでのスイッチはグレーかカラーありでON/OFFなどの表示は使わないことで迷わせないようにしています。
ちょっとしたことですが、惑わせない工夫はとても大事です。
