冪等なトグル

00 概要

ソフトウェアの UI において、トグルスイッチやトグルボタンは、冪等性のある操作を提供していないことがほとんどです。ここは、冪等性のある操作を提供するトグルスイッチやトグルボタンを Web の UI として表現してみるための、実験的な場所です。

01 一般的なトグルスイッチ

一般的なトグルスイッチは、「状態の表現」と「状態の操作」について、以下の特徴を持っています。

• 要素自身が現在の状態を表現している
• 要素全体が 1 つのターゲット領域から構成される
• 単一の操作のみを受け付ける
• 操作するごとに状態が反転する

また、一般的なトグルボタンについても、まったく同じ特徴を持つと言えます。

以降では、一般的なトグルスイッチを「非冪等なトグルスイッチ」、一般的なトグルボタンを「非冪等なトグルボタン」と言います。

02 冪等なトグルスイッチ

一般的な、つまり非冪等なトグルスイッチの特徴を挙げたうえで、「冪等なトグルスイッチ」の特徴を想像してみると、いくつかのパターンが考えられます。

① 2 つのターゲット領域から成るトグルスイッチ

このトグルスイッチは、「状態の表現」と「状態の操作」について、以下の特徴を持っています。

• 要素自身が現在の状態を表現している
• 要素全体が分割された 2 つのターゲット領域から構成される
• 要素の左側を操作すると必ず状態が OFF になる
• 要素の右側を操作すると必ず状態が ON になる

このトグルスイッチは、確かに冪等性のある操作ができますが、ターゲット領域が狭く誤操作を招きやすいうえに、要素の実際の見た目と操作できる部分とに乖離があり、優れた UI とは言い難いでしょう。フィッツの法則が指摘する、少なくとも以下の 2 つの内容に違反しています。

1. タッチターゲットは十分に大きくなければならない
2. タッチターゲット同士は十分な間隔を空けなければならない

したがって、以下のように「ロッカースイッチ」を模したトグルスイッチを用意したとしても、上記のフィッツの法則を満たすことは難しいため、2 つのタッチターゲット領域を持つトグルスイッチを用意するのは、現実的ではなさそうです。

② 倒したい方向に倒すことで状態を切り替えるトグルスイッチ

このトグルスイッチは、「状態の表現」と「状態の操作」について、以下の特徴を持っています。

• 要素自身が現在の状態を表現している
• 要素全体が 1 つのターゲット領域から構成される
• 複数の操作を受け付ける
• 単押しでは何も起こらない（状態を反転させない）
• クリックしたまま左側にドラッグすることで、または左側にスワイプすることで状態を OFF にする
• クリックしたまま右側にドラッグすることで、または右側にスワイプすることで状態を ON にする

このトグルスイッチも冪等性のある操作ができますが、単押しでは反応しないため、最初は故障したようにも感じられます。また、小さな要素の上で方向を意識してドラッグする操作には慎重さが必要で、一般的なトグルスイッチほど軽快ではありません。一方で、一度操作方法を理解すれば、現在の状態を確かめずに意図する状態へ倒せる感覚は明快です。

03 冪等なトグルボタン

冪等なトグルボタンは、思うに、2 つで 1 セットのボタングループから構成されます。具体的には、以下の特徴を持っています。

• 要素自身が現在の状態を表現している
• 1 つのトグルボタングループ要素は 2 つのボタンから構成される
• それぞれのボタンはラジオボタンのような冪等な振る舞いをする
• 左側のボタンを操作すると必ず状態を OFF にする
• 右側のボタンを操作すると必ず状態を ON にする

このトグルボタンは冪等性のある操作ができますが、これであれば、ラジオボタングループを使うほうが良いかもしれません。