Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (49 sloc) 5.08 KB
layout title date comments published image categories
post
トグルスイッチとチェックボックスの違い
2019/11/21 22:30:00 +0900
true
true
/assets/images/posts/20191121b.png
UI
UX

トグルスイッチの誤用をやめよう | UX MILK を読んでの私見です。

文脈上の状態 vs システムの状態

トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。

最初の例はちょっと賛同しかねた。 「状態」の適用範囲で、スクショにある UISegmentedControlUISwitch を使い分ける、というのは、それが成されている事例があっても気づけない気がする。

ユーザーはスイッチをオンにするとすぐに効果が現れると期待します。

これは賛同する。 私は、「スイッチ」とは、家の壁にある こういうの をイメージしている。

このスイッチは「押すとすぐに電気が付いたり消えたりする」事を期待する。 なので、スイッチを「状態を表現する」為だけに使われていると違和感を覚える。

少し前に Xamarin.Forms を使って TODO アプリを作ってみた のだけど、当時の Xamarin.Forms には「チェックボックス」が無くて、まあいいやと思って「スイッチ」を使って、「タスクが完了したか」を示したのだが、アプリを実際に動かしてみると違和感ありまくりだった。

結局画像を使ってチェックボックスの ON/OFF を表現した(尚、現在の Xamarin.Forms には CheckBox がある)。

GMail とか、アイテムが一覧表示される画面でアイテムを一つまたは複数選択するとき、それが「スイッチ」ではなく「チェック」であるというのは、現実世界に置き換えても自然な表現だと思う。

0か1の選択 vs 対立する選択

スイッチは0か1の選択のためのもので、対立する選択のためのものではありません。

これは分かりやすいです、同意。

状態 vs 行動

トグルスイッチをダウンロード用のボタンに使っています

そりゃ NG でしょ、同意。

スイッチを使うための3つの条件

まとめ。

  1. 利用環境ではなくシステムの状態のトグルに使っている
  2. 対立的選択肢ではなくバイナリ選択肢を示している
  3. 行動を起こすのではなく、状態を有効化している

1 はよく分からん。 2 と 3 は同意。

特に 3 の「行動を起こすのではなく、状態を有効化している」はミソだと思っていて、スイッチの操作が「何らかのアクションを起こす」のではなく「状態が変わる」という点。スイッチを ON にすると「電気を付ける」のではなく「部屋が明るくなる」という感覚か。 「同じじゃん」と思われるかもだけど、ちょっとした捉え方の違いが重要な気がした。

おまけ: 「状態を変えようとしたけど変わらなかったスイッチ」はありか?

この記事を読んでいて気づいたことがあったんだけど、

  1. スイッチを操作するとすぐに状態の変化が起こる
  2. それは「状態を変化させるためにデータを変更する」事になる
  3. では「データの変更ができない」事があるかもしれない(端末のストレージにアクセスできなかったり、通信不良でクラウド上のデータに書き込みできなかったり)

結果として、「スイッチを ON にしたが、データの書き込みに失敗して、数秒後に OFF に戻った」という挙動になっちゃったりするのだけど、これはアリか無しか。

現実世界では、冒頭に示したパッチンスイッチなら「無し」だけど、 こういう LED で ON/OFF 表現するスイッチなら「アリ」かもしれない(余談だけど私は LED の緑と赤どっちが ON か迷うことが多々あるのでよい UX ではないと思う)。

たぶん「データの更新に失敗する可能性は普通にある」ならそれは「アクション」と捉えボタンにする。 「失敗する可能性が極めて少ない、あるいは無視できる」ならばスイッチでよいのかな、とここでは考えておこう。

You can’t perform that action at this time.