無効状態

定義

無効状態とは、ある要素が今この瞬間は動作しないことを見せるための状態です。 たいていは色を薄くトーンダウンし、マウスを乗せるとカーソルが禁止マークに変わり、 押しても何も反応が返ってきません。こうして視覚的に力を抜いておくと、ユーザーは わざわざ押してみなくても「これは今は使えない」と気づけます。必須項目をまだ埋めて いない送信ボタンや、すでに最大数に達してこれ以上押せない加算ボタンのように、 ある条件がそろうまで一時的にロックしておきたい場面で使われます。つまり無効状態は、 要素を消してしまわずに「今は触らないでください」と丁寧に線を引く方法なのです。

なぜ重要か

無効状態は、ユーザーが今できないことに時間を無駄づかいしないよう、あらかじめ止めて くれる案内板です。もし押せないボタンが普通のボタンとまったく同じ見た目だったら、 ユーザーは押してみて何も起きずに戸惑い、自分が何か間違えたのかと責めてしまうことも あります。反対に、薄く処理されたボタンは「今はタイミングではない」という意味を静かに 伝え、無駄なクリックと混乱を減らしてくれます。ただし無効状態には落とし穴があります。 なぜ使えないのか理由を伝えないと、ユーザーは画面の前で行き止まりになり、次に何を すればいいのか分からずそのまま離れてしまうことがあります。だからよくできた無効状態は、 単にブロックするだけで終わらず、何をすればまた使えるようになるのかまで一緒に伝えます。 ふさぐことと導くことを一つにして扱ってはじめて、無効状態は壁ではなく道しるべになります。

よくある間違い

• なぜ無効になっているのか、その理由をまったく伝えないことです。薄いボタンだけが ぽつんとあると、ユーザーは何を埋めれば押せるのか分からず途方に暮れます。「必須項目を 入力すると有効になります」といった短い案内が一行あるだけで、大きな差が生まれます。
• 色を薄くするだけで区別しようとすることです。色だけで区別すると、色覚に特性のある ユーザーは有効と無効を見分けにくいので、明度差やほかの手がかりも一緒に添える 必要があります。
• 無効なボタンを完全に消してしまったり、位置を動かしたりすることです。押すべきものが なくなると、ユーザーはそもそもその機能が存在したことにすら気づけず、条件をそろえた あとでもその機能を見つけられず迷ってしまいます。

実務のヒント

• なぜ今は使えないのか、その理由も一緒に伝えましょう。「必須項目を入力すると有効に なります」といった一行の案内やツールチップがあるだけで、ユーザーはいらだたずに 次にやることをすぐ見つけられます。
• 色を薄くするだけでなく明度もはっきり落として、色覚に特性のあるユーザーでも有効と 無効をくっきり区別できるようにしましょう。コントラストはアクセシビリティの基本です。
• 無効な要素は押しても反応しないよう確実にブロックしつつ、画面から消さずに薄く残して おきましょう。場所をキープしておくことで、ユーザーはその機能の存在と有効化の条件を 認識できます。

関連概念