ユーザーの主導権と自由
(ユーザビリティヒューリスティックNo.3)

ユーザーは、よく間違えたり、気が変わったりする。フローを終了させたり、直前にした操作を元に戻せるようにして、ユーザーがシステムを前の状態に戻せるようにしておこう。

(この記事の最後にある、ヤコブのユーザビリティヒューリスティックNo.3の無料ポスターをダウンロードしよう)

ヤコブ・ニールセンのユーザーインタフェースデザインの3番目のユーザビリティヒューリスティックは、ユーザーの主導権と自由だ。この原則は以下のようなものである:

ユーザーは、システムの機能を選択し間違えることがよくあるので、「非常口」を明確に示して、追加されるダイアログを経なくても、希望していなかった状態を彼らがやめることができるようにしなければならない。「元に戻す」と「やり直し」をサポートしよう。

たまたま使ったユーザーインタフェース(UI)に対して、ユーザーがそれをコントロールしているという感覚を持てるようにすることも、優れたユーザーエクスペリエンスには不可欠な要素だ。それには、ユーザーが間違いをすばやく修正したり、行った選択を撤回できる必要がある。トラブルからすぐに抜け出せれば、ユーザーもそのUIをもっと探索しようという気になり、機能の学習や発見が促進されるからだ。また、(製品内を探索する場合は)全体的な利用率や売上も向上する。逆に、UIがこうした操作をサポートしていない場合、ユーザーは身動きがとれないように感じて、不満を訴えることが多いだろう。

一般に、ユーザーがシステムを前の状態に戻ことができるUIコントロールには以下のようなものがある:

  • 前のページや画面に戻るための「戻る」リンク
  • タスクや複数のステップのプロセスを終了できる「キャンセル」リンク
  • 新しいビューを閉じることができる「閉じる」リンク
  • UI要素に加えた変更を撤回できる「元に戻す」という選択肢(と同様の「やり直し」)

ユーザーがいつでも1ステップ前に戻れるようにしておこう

ユーザーがリンクをクリックして、新しいページや画面、ビューを開くときはいつでも、彼らが元の場所に戻れるようになっている必要がある。ユーザビリティテストをすると、Webで、ユーザーはブラウザの「戻る」ボタンを使って前のページに移動するが、Webサイト内を移動するときにも、Webサイト自体のナビゲーション(パンくずリストなど)を使うのではなく、ブラウザの「戻る」ボタンをデフォルトで使用するユーザーをよく見る。これが、リンクを無差別に新しいタブで開かないことを我々が推奨する理由の1つだ。ユーザーの中には、新しいタブに移動したことに気づかず、戻るのに苦労する人がいるからだ。

ブラウザの「戻る」ボタンを無効にして、ユーザーがサイトから離れられないようにしてはならない。一部のサイトは、意図的にサイトをスティッキーにして、ユーザーが検索エンジンに戻れないようにしている。このような方法を取れば、ユーザーは(サイトから離脱することができないので)何秒間かは長くあなた方のサイトにとどまってくれるだろうが、イライラするだろう。それでも、取引をしたいと思ってもらえるように幸運を祈っておく! こうしたデザインは、具体的なUX目標よりもバニティメトリクス(虚栄の指標)を優先した結果、選ばれることが多い。「戻る」ボタンを無効にして、ユーザーを動けないようにするのではなく、サイトでは価値のあるコンテンツを提供して、ここにとどまりたいとユーザーに思ってもらう必要がある。

オンラインフォームの中には、ブラウザの「戻る」ボタンが機能しないものもある。フローを逆行すると、根本的なロジックが破綻してしまう可能性があるからだ。また、ブラウザの「戻る」ボタンが使えても、前の画面に戻る代わりにタイムアウトメッセージが表示され、作業が失われる場合もある。可能であれば、ブラウザの「戻る」ボタンをユーザーが使用「可能」なフォームを作成しよう。これが不可能なデザインなら、ユーザーがブラウザの「戻る」ボタンをクリックしたときに警告を表示し、この操作をキャンセルする機会を提供しよう。さらに、ユーザーが作業を失うことなくフォームを前に戻れるように、「戻る」リンクやクリック可能なプログレスバーの作成も検討する必要がある。

デルタ航空のアプリでは、一度フライトを選択すると、ユーザーが検索を最初からやり直す以外にフライトの一覧ページに戻る手段がない。つまり、この事例では、「戻る」リンクが期待通りに機能しないのだ。「戻る」リンクでは、1ステップ前に戻ることができないからだ。その代わりに、「戻る」リンクが「キャンセル」リンクとして機能する。しかし、ユーザーはこのようにひどい目にあうと、可能なフライトを調べるのをためらうようになり、その結果、売上が減る恐れがある。

「戻る」リンクを使う場合は、ユーザーの期待に応えるようにしよう

オーバーレイやライトボックスが表示されると、ユーザーは自分がどこにいるかわからなくなり、新しいページに来たと思ってしまうことが多い。特にオーバーレイが画面全体を占める場合はそうだ。その結果、前の画面に戻るのに「閉じる」リンクや「×」アイコンをタップせずに、ブラウザの「戻る」ボタンを使うことがよくある。この操作をすると、1つ前ではなく、2つ前のステップの画面が表示されるため、ユーザーは混乱し、方向感覚を失う。

最近、実施したモバイルのユーザビリティテストで、ある参加者が全画面表示のオーバーレイで、ブラウザの「戻る」ボタンを使ったところ、オーバーレイからは脱出できたが、戻ろうとしていたページから「も」追い出されてしまった。参加者はコメントした。「そのページに帰れないとは思いませんでした。(中略)「戻る」をクリックすると、それまでいたページからは移動できましたが、ポップアップが出たページにも戻れないのです」。

デスクトップでもモバイルでも、ユーザーがオーバーレイを新しい画面と勘違いする可能性がある場合は、必ず「戻る」ボタンが「閉じる」リンクと同じ働きをするようにしよう

ASOS.comでは、ユーザーが「送料無料と返品の条件」(Free Shipping & Returns)リンクを選択すると、全画面表示のオーバーレイが表示される。しかし、ブラウザの「戻る」ボタンをタップすると、商品概要ページではなく、商品一覧に戻ってしまう。
Wayfair.comでは、「レビュー」(Reviews)リンクをクリックすると、ドロワーが開き、それが全画面表示になるが、そのページにあるどちらの「戻る」ボタン(サイトとブラウザ)をクリックしても、ユーザーの期待通り、最初の商品概要ページが表示される。また、ドロワーは左から右にスワイプすることでも閉じることが可能である。

モバイルアプリでは、ユーザーはWebのエクスペリエンスから「戻る」ボタンの知識を得て、同じ機能を期待する傾向がある。つまり、(どちらの方向から来たとしても)それで1ステップ戻れると考えるのだ。しかし、残念ながら、多くの場合、デザイナーはこのボタンをアプリケーションのIA上の移動手段と考えている。その結果、ユーザーが方向感覚を失うことがよくある。下の例のBBC Newsのアプリでは、右から左にスワイプすれば別のニュース記事を読むことができる(表示される順序はニュース一覧ページで縦に表示される順番に一致している)。しかし、「戻る」ボタンでは、スワイプしてアクセスした記事に戻ることはできない。「戻る」ボタンを使用すると、以前にアクセスした記事ではなく、IAの1階層上に位置する記事一覧ページに戻ってしまうからだ。

BBC Newsアプリでニュース記事をクリックした後にスワイプすると、ニュース一覧内の他の記事を見ることができる。「戻る」ボタンをクリックすると、ユーザーが以前にアクセスした記事ではなく、IAの1階層上のページが表示される(一覧ページに戻る)。

出口のリンクをすぐ発見できるようにしよう

物理的な空間と同様に、見つけやすく、必要なときに発見できるように、出口は適切に表示されている必要がある

「閉じる」や「終了する」、「キャンセル」を表示する際には、デザイン標準に従おう。そうすれば、そこにあるだろうと一般に期待される場所で、ユーザーがそうした表示をすぐ見つけることができる。たとえば、ライトボックスオーバーレイでは、ユーザーは通常、オーバーレイの右上隅に「×」アイコンがあると期待している。

Harper’s BazaarのWebサイトでは、ポップアップがユーザーに購読を検討するように促してくるが、「閉じる」(Close)リンクは、オーバーレイの外側の左下隅に表示される。この珍しい配置のせいで、背景とのコントラストが弱いことも相まって、このリンクはわかりにくい。

期待される場所に「終了する」の表示を配置する以外にも、ユニバーサルアイコンを使い、ユーザーがリンクの内容を理解できるようにしよう。アイコンにテキストラベルを付けたり、アイコンをプレーンテキストに置き換えてもよい。たとえば、「<」の代わりに「戻る」を、「×」の代わりに「閉じる」を使ってみよう。

ユーザーがすぐ操作をキャンセルできるようにしよう

購入や送金、大容量のダウンロードのどれを開始する場合でも、ユーザーはいつでもそのタスクをキャンセルできる必要がある。「キャンセル」という選択肢は、見つけやすく、すぐ実行できなければならない。プロセスが複数ある場合は、ユーザーは「キャンセル」の代わりに「戻る」リンクを利用できるが、不要なクリックを避けるために「キャンセル」リンクを提供したほうがよい。

ツイートの作成を始めてからは、画面左上の「キャンセル」を選択すればすぐ作業をキャンセルすることができる。「キャンセル」を選択すると、Twitterから、メッセージを削除するのか、それとも、下書きを保存するのかという選択肢が提示される。こうした選択ができるおかげで、誤ってユーザーの作業が失われることがない。

デザイナーの中には、モバイルでは、「キャンセル」の代わりに「×」アイコンを使用して、スペースを節約しようとする人がいる。残念ながら、「×」は、「キャンセル」ではな、「閉じる」と勘違いされることがある。インタフェースによっては、ユーザーエラーを回避するために、両者の違いを区別することが重要だ。「×」が「閉じる」と「キャンセル」を意味する場合は、明示的なテキストラベル(「キャンセル」)を入れるか、警告ダイアログを表示して、ユーザーの作業が失われないようにしよう。

Wealthfrontのアプリでは、投資口座から送金するとき、ユーザーは連続した画面でいくつかステップを踏むことになる。送金をキャンセルするには、画面上部にある矢印を使用して1ステップ戻るか、「×」を選択すればよい。しかし、「×」を押すと、送金のための入力内容は保存されるのか、それとも、送金が完全にキャンセルされるのかは明確でない。ここでは、「×」を押すことで送金が完全にキャンセルされる。したがって、ラベルは「キャンセル」のほうが良かっただろう。

「元に戻す」をサポートしよう

ユーザーがシステムの状態を変更する場合、その操作を簡単に元に戻せる必要がある。たとえば、誤ってテキストの段落全体を削除してしまったのに、それを元に戻せなかったら、と想像してみてほしい!

「元に戻す」ボタン以外にも、インタフェースで「元に戻す」をサポートする方法はいろいろとある。たとえば、ユーザーが誤って買い物かごにアイテムを追加してしまった場合には、そのアイテムを削除することで、変更を元に戻せるようになっているとよい。

ECサイトでは、上のCVSの例のように、「削除」(Remove)を選択することで、買い物かごへのアイテムの追加を取り消せるとよい。
通知設定を変更するとき、ユーザーはトグルスイッチやチェックボックスを利用して、変更を元に戻すことができる。
住宅メーカーのMattamyは、Webサイト上でインタラクティブな間取り図を提供して、可能な変更プランをユーザーが検討できるようにしている。変更内容を元に戻すには、左ペインで、変更したオプションのチェックを外せばよい。しかし、残念ながら、「リセット」ボタン(右端の赤で強調されているボタン)が「元に戻す」ボタンと勘違いされやすい。

ユーザーが短時間で多くの操作を続けて行う可能性がある場合は、複数回の「元に戻す」や「やり直し」ができるようにしよう。多くの場合、直前の操作を元に戻せるだけでは不十分だからだ。また、デスクトップでは、パワーユーザー向けに標準のキーボードショートカットをサポートするとよい。

「元に戻す」を発見できるようにしよう

iOSのシェイクして元に戻す機能を知っているだろうか。この機能は非常に発見しにくいため、十分に活用されていないことで有名だ。

デスクトップのデザインの場合は、ユーザーは、キーボードショートカットを使えるとわかるはずだ、と決めつけてはならない。UIでの操作を元に戻すオプションは表示するほうがよい。この機能はユーザーが通常期待する場所にある必要がある。たとえば、ワードプロセッサやデザインソフトウェアなどのWYSIWYG(What-You-See-Is-What-You-Get:見たとおりのものが得られる)アプリケーションでは、「元に戻す」は、通常、ツールバーまたはアプリのメニューに置かれる。また、クロームのないWebベースのアプリケーションでは、「元に戻す」は、多くの場合、コンテキストに依存しているオプションで、一時的なスナックバーやコンテキストメニューに表示される。

Microsoft Wordでは、他のWYSIWYGアプリケーションと同様に、「元に戻す」(Undo)や「やり直し」(Redo)などが「編集」(Edit)メニューにある。また、これらの操作のためのキーボードショートカットもあわせて表示されている。

「元に戻す」がコンテキストに依存している場合は、UI内で見やすく表示されているか確認しよう。Googleドライブでは、ユーザーがファイルに変更を加えると、変更が行われたことを確認し、元に戻すための選択肢を提供するために、ウィンドウの左下隅にスナックバーが表示される。しかし、残念ながら、このスナックバーのメッセージは数秒間しか表示されないので、この機能を利用するには、ユーザーが元に戻したほうがいいとわかっていて、すばやく行動をする必要がある。(キーボードショートカットを使うこともできるが、UIにはそれについての表示はない)。

Googleドライブでは、ユーザーが操作を終えないと、「元に戻す」(Undo)を利用できない。操作が完了すると、「元に戻す」は画面の下部にスナックバーとして表示されるが、数秒後には消えてしまう。

結論

ユーザーが製品を自由にコントロールしていると感じられるようにするには、タスクを破棄したり、1つ前のステップに戻ったり、システムの状態に加えた変更を元に戻したりすることを楽にできる必要がある。明確な出口と「元に戻す」機能を綿密に作り上げるにはどうすればいいかをじっくり考えることで、ユーザーは、デザインに翻弄されるのではなく、エクスペリエンスをコントロールしていると感じることができるだろう。

ダウンロード