その機能はオンかオフか? トグルスイッチが招く混乱とは

anthony

UX Movementの著者および創設者。ユーザー体験を考えたデザインのベストプラクティス、スタンダード、およびテクニックを広く共有することで、人々にとってより良いデジタルの世界を作り出しています。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

The Confusing State of Toggle Switches

電化製品のスイッチを入れる方法はほとんどの人が知っていますが、インターフェイスでは困惑してしまう傾向にあります。スイッチに表示されているものが現在の状態なのか指示なのか判断しにくいことが多いためです。スイッチが「オン」であることを、ユーザーは現在起動していると解釈することも、切り替えたら起動すると解釈することもできるでしょう。

状態を表示する

ユーザーにとって、トグルスイッチが現在の状態を示しているのかどうかは明確ではありません。このような混乱が発生するのは、スイッチにオンとオフのラベルや、緑と赤の色、チェックマークなどがついているときです。これらの手がかりは視覚的なノイズとなり、状態をユーザーに伝えにくくなります。明確に「オン」であるシグナルがないと、ユーザーはスイッチが状態を示していると認識できません。

状態を伝える際には、アクティブなものだけを表示し、アクティブでないものは状態を明示しないようにしましょう。同じ手がかりを使ってアクティブな状態もアクティブでない状態も示すと、ユーザーはスイッチをコマンドとして認識するようになります。ユーザーは習慣的に、多くの視覚的な手がかりがまとまっていると、それらをCTAボタンのようにとらえてしまいます。このような手がかりがすべてのスイッチに付随していると、手がかりが現在どうなっているのかではなく、どう操作するのかを伝えているとユーザーは解釈するのです。

ユーザーがスイッチを間違って解釈しないように、スイッチに付随する視覚的なノイズを減らし、「オン」の状態の手がかりのみを明示してください。スイッチの「オフ」状態は中間色を使い、注意が向かないようにすべきです。「オフ」状態を示す手がかりを加えると、シグナルをかき消すノイズが生まれてしまいます。オン、オフのラベルをどちらも使用すると、スイッチがコマンドボタンのように見えるので避けてください。また、チェックマークも、ユーザーがチェックボックスと間違えやすいため、使うのを控えるべきです。

「オン」状態を示すのに必要な唯一の手がかりは、目立つ色で塗られた電源のアイコンです。ユーザーは状態を色だけでなく、区別しやすい形状によっても認識することができます。電源のアイコンは、オンとオフの状態を示すとき言語にかかわらず普遍的に使われるので、トグルスイッチの理想的なアイコンです。この手がかりによって、国外のユーザーや色覚異常を持つユーザーのアクセシビリティにも対応できるようになります。

操作の一貫性

トグルスイッチが紛らわしいもう1つの原因は、形状とインタラクションが一貫していない点です。インターフェイスで使われるスイッチはスライダーのような見た目をしていますが、ドラッグするユーザーはほとんどいないでしょう。スイッチを起動するために、ユーザーはボタンのようにクリックするはずです。それだけでなく、ドラッグすることさえできないトグルスイッチも存在します。ユーザーがドラッグしようとしても、スイッチは期待通りに動きません。

インターフェイスで使われるスイッチが現実のトグルスイッチを模している理由は、ユーザーがインターフェイスの知識がなくても操作できるようにするためです。しかし、このようなスキューモーフィック(skeuomorphic)のスタイルは、コンピュータでの操作と現実世界での操作が一致しない場合は効果的ではありません。

可能性のある解決策の1つとして、現実のメタファーを取り除き、電源のアイコンでトグルボタンを表示することです。人目を引くアイコンなら、「オン」のシグナルをより明確に伝えるでしょう。ボタンを押せば、ユーザーの期待通りに起動したり停止させたりできます。このアプローチにはポテンシャルがありますが、ユーザーにはまだ馴染みがありません。もし多くのデザイナーがこの方法を取り入れたら、このようなトグルスイッチを目にすることが増えることもあるかもしれません。

トグルスイッチは、適切にデザインしないとユーザーを混乱させます。視覚的なノイズが多すぎると、現在の状態を示していると認識されにくくなるでしょう。ノイズを最小限にしてアクティブ状態の手がかりを提供することで、状態を表しているということが明確になります。ユーザーは、電化製品の電源を切り替えるのと同じように、画面上でもスイッチを切り替えることができるのです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて