ミスリーディングなラベリングとその改善
インタラクションの操作子や重要なアイキャッチャー (たとえばナビゲーションメニュー、ボタン、見出しなど) に使われる言葉をラベルといいます。適切なラベル付け (ラベリング) は、情報アーキテクチャ (Information Architecture : IA) の基本のひとつです。
不適切なラベリング (言葉遣い) はユーザー行動を阻害し、目的達成を困難に (最悪の場合、不可能に) します。今回は、ユーザーをミスリードしそうな (誤った方向に導いてしまいそうな) 例として、実際に多くの人が目にしている、Adobe のソフトウェア更新を題材に考えてみたいと思います (この例は、2011年7月1日の時点のものです)。ダイアログボックスを例に採り上げていますが、Web サイトにおけるラベリングを (さらには画面遷移やインタラクションといった情報アーキテクチャも含めて) 考えるうえで参考になると思います。
現状と問題点
現状のソフトウェア更新作業がどのような流れで進むのか、どこが問題なのか、まずは見てみましょう。
ソフトウェアの更新の必要があると、下記のアップデート通知画面が開きます。
(ステップ1)
「インストール」ボタンをクリックすると、プログレスバーが進行します。
(ステップ2)
プログレスバーが100パーセントに達すると、下記の画面が表示されます。ユーザーにとっては恐らく「終了」ボタンがもっとも目を惹くことでしょう。
(ステップ3)
「インストール」ボタンを押して (ステップ1)、プログレスバーが進行するのを見て (ステップ2)、「終了」ボタンが見えている (ステップ3)、という状況です。多くのユーザーは「インストールは無事終わったんだ」と思って「終了」ボタンを押すことでしょう。すると、この時点で作業はキャンセルされてしまい、更新作業が完遂されずに終わることになります。
私自身、このトラップに引っかかって不本意に更新作業が中断したという苦い経験があります。気になったので、この画面キャプチャを使って簡易的にユーザビリティテストをしてみましたが、やはり同じように、引っかかる人はいました。
この場合、ユーザーがとるべきだった行動は、上記のステップ3の画面で、使用許諾契約に同意する旨のチェックを入れることです。すると「インストール」ボタンのグレーアウトが解除されるので、それをクリックします。
(ステップ4)
プログレスバーが表示されます。今度は「インストール中...」というメッセージが出ます (では、先のステップ2のプログレスバーは何の進行状況を表しているでしょう？...というのがエンドユーザーに正しく伝わっていることが、本来であれば大切です)。
(ステップ5)
プログレスバーが100パーセントに達すると、インストールが完了した旨のメッセージが表示されます。
(ステップ6)
ステップ1で「インストール」というラベルがある。これを押せば、インストールが始まるとユーザーは期待する。実際、ステップ2のようにプログレスバーが出るので、ユーザーはインストールが進行していると思い込んでしまう。ステップ1の「インストール」というラベルは明らかにミスリーディングと言えます。
ミスリーディングなラベリング。でもラベルさえ修正すればよいというものではない。
ステップ1の「インストール」ラベルがミスリーディングで問題だ、というのであれば、これを「ダウンロード」と変えてみましょうか。恐らく現状よりはマシかもしれません。ただしユーザーが「ソフトウェア更新作業には、ダウンロードとインストールという2段階がある」というきわめてシステム寄りな話を理解していれば、の話です。
今回のケースで、ユーザーをミスリードした直接的な原因は、ボタンのラベルです。でもラベルさえ修正すればよいというものではないことが、しばしばあります (不適切なラベルというのは表層的な結果であって、その原因は、そもそも情報設計が適切でないから、という可能性もあるのです)。画面遷移やインタラクションをチューニングすることも、同時に検討してみましょう。
たとえば、ステップ3の「インストール」ボタンがデフォルトではグレーアウトされている (ユーザーに「その先」があることが可視化されていない) のも問題と言えるでしょう。
「使用許諾契約に合意しないユーザーにはインストールさせたくない」というのは (企業側の都合として) 理解できますが、そのことと「ユーザーに次のステップを明確に提示しない」のとは別問題です。「インストール」はグレーアウトせず、次のステップを明示するのがよい気がします。恐らく使用許諾契約に合意する旨のチェックを入れずに (チェックボックスの存在に気づかずに)「インストール」ボタンを押してしまうユーザーが多いでしょう。それでも「インストール」(次のステップがあること) に気づいてもらえずに作業が中断する現状よりはマシです。使用許諾契約に合意せずに「インストール」をクリックしたら、その時点でアラートを出せばよいのです。
よりシンプルな手順にすることを考える。
ところで上記は、まだまだ小手先の修正と言えます。もっとシンプルにすることができます。操作手順がシンプルであればあるほど、ユーザーの認知/判断/操作が減ります。ユーザーの認知負荷を下げ、操作ミスを防ぐことができます。
このときに意識しておきたい原則としては、システム側が肩代わりできる (ユーザーが意図的にアクションを取らなくても済む) ことであれば、どんどん自動化すべき、ということです。
現状では、ソフトウェア更新という一連の作業を、以下の2段階に分けてユーザーに提示し、都度、ユーザーにアクションを要求しています。
- (ステップ1) ユーザーのローカル環境にインストール実行ファイルを「ダウンロード」する。
- (ステップ3) ダウンロードされたファイルの「インストール」を実行する。
「ダウンロード」と「インストール」という具合に、段階分けせざるを得ないのは、恐らくシステム側の都合であって、ユーザーの目的達成とは関係の無いことです (ユーザーはとにかくソフトウェアの更新ができれよい。しかも極力オートマチックに)。できれば、ダウンロードからインストールまでを一貫して進める (少なくともユーザーへのプレゼンテーションとしては、一貫して進んでいるように見せる) べきだと思います。
アップデート通知画面 (上記のステップ1に相当する画面) を、こんなふうに変えてみるのはいかがでしょうか。
ボタンのラベルを「使用許諾に同意してインストール」と変更します (上記ステップ3のチェックボックスの機能もこのボタンに含めることで、ユーザーのアクションを減らすことを意図しています)。クリックすると、あとはオートマチックにソフトウェア更新作業 (ダウンロード、インストール) が進行します。一連のプロセスの進行状況は、1本のプログレスバーで見せることができれば理想です (ユーザーにとってはダウンロードとインストールという段階分けは無意味なので)。ただ、システム上の制約で難しいようであれば、「ダウンロード中...」「インストール中...」という具合にプログレスバーを切り替える形でもよいでしょう。いずれにしても、途中でユーザーにわざわざアクションをさせる必要はありません。
完了したら、完了メッセージを出します。
これだけでも、だいぶ、ユーザビリティは改善されるのではないかな？と思います。
(細かな情報配置や文言、配色など、改善の余地はまだまだあります。特にリンクテキストの視認性の悪さは、アクセシビリティ的に問題があります。また、そもそもこの手の更新作業は、ユーザーの手を一切煩わせずにバックグラウンドで実行して常に最新バージョンを保つ状態にするべきでは？という議論もあろうかと思います。が、記事の話題が発散してしまうので、ここでは割愛します。)