「OK」「キャンセル」、どちらが先か？

公開：2008年5月27日付　著者：ニールセン博士
原文（英語）：OK–Cancel or Cancel–OK?
分類キーワード：アプリケーション、コマンド

要約：

OKボタンはキャンセルボタンの前と後、どちらに置くべきか？ダイアログボックスをデザインするたびにその都度判断するよりも、各プラットフォームでの慣習に従う方が大切だ。

ユーザエクスペリエンス全体には大して影響しないようなUIデザインの細々とした問題について、われわれの元には数え切れないほどの質問が寄せられる。昔からよくあるのが、ダイアログボックス内でのボタンの並び順はどちらにすべきかという質問だ：

OK / キャンセル
キャンセル / OK

両方ともそれなりに筋が通っている並べ方であり、どちらを好むかは人それぞれで、一方に決めるのは無理だろう：

OKを先にする並べ方は、英語を始めとする左から右へ読むタイプの言語では、自然な読み取り順序に沿っていることになる。これ以外のボタンの組み合わせも、この自然な流れに沿っている場合が多い（はい/いいえや前へ/次へなど）。ボタンの読み取り順序が必ず論理的な順序と一致するように並べる —— つまりここでは、OK/キャンセルの順で並べる方がふさわしいというわけだ。その上、OKの方がキャンセルよりずっとクリック頻度が高いとすれば、それを先にする方が良い。そうすれば、キーボードを操作してTabキーでボタンを選択するユーザにとっては、キーを打つ手間が1回分省ける。
OKを後にする並べ方は、操作フローを向上させる。ダイアログボックスが最終的な結論で“締めくくられる”からだ。また、前へ/次への場合になぞらえて、OKはユーザを前進させる選択肢、キャンセルは後退させる選択肢だとみなすこともできる。それなら、OKは次へと同じ位置、つまり右側に置くべきとなる。

このようなケースでは、どっちにしようが大差はないことが多い。どちらにももっともな根拠があるし、いずれにしてもユーザビリティ的に大事に至るおそれはない。特定の状況下で“正しい”選択ができれば、0.1秒ばかりの節約ができるユーザもいるかもしれないが、丹念に調査をしてまで判断するほどの問題ではない。そんなことをするくらいなら、重要なパフォーマンス指標を83％以上もアップさせられるような課題の方に、ユーザビリティ関連のリソースを配分したほうがマシだ。

そんなわけで、この件でどちらを選ぶべきか決めるには —— アプリケーションデザイン上のその他もろもろの細かい判断と同じく —— 各プラットフォームのGUI標準に従うのが一番だ。些細なメリットと引き換えに辻褄の合わないデザインをするよりも、ユーザの期待に沿うような一貫性のあるデザインをする方が、ユーザにとってはるかに時間の節約となる（そしてミスの防止にもなる）。

一貫性のなさは時間の節約どころか浪費となる

標準から外れたデザインをしてしまうと、ユーザはUI要素を見過ごしたり使い方を間違えたりすることになり、たちまち何分も —— ひょっとしたら何時間も —— 時間を無駄にすることになる。一貫性のない部分についてユーザが考え込んでしまう時間が積み重なると、デザイナーがその特別製デザインで節約できると想定している時間をはるかに上回ってしまうのがオチだ。

残念ながら、OK/キャンセルボタンの並び順については、Windows VistaのユーザーエクスペリエンスガイドラインとAppleのヒューマンインターフェースガイドラインとで方針が異なっている：

WindowsではOKが先
AppleではOKが後

もしこれら2種類のプラットフォームのどちらかに向けたデスクトップアプリケーションをデザインしているなら、事は単純だ： そのプラットフォームのガイドラインに準じればよい。

ウェブアプリケーションのダイアログボックスでのボタン配置

ウェブアプリケーションをデザインしている場合、デスクトップアプリケーションより判断が難しいが、おそらくユーザの間でもっとも利用度が高いプラットフォームに準じるべきだろう。サーバのログを見れば、そのサイトやイントラネットのユーザのうち、WindowsとMacそれぞれのユーザの割合が分かる。もちろん普通はWindowsユーザが大多数を占めるので、わざわざログを確認する暇がないなら、大抵は以下のガイドラインに従うのが妥当だろう：

下図のOffice 2007のスクリーンショットのように、OKを先、キャンセルを後にすべし：

Office 2007のスクリーンショット：「Save」「Cancel」ボタンの表示

このスクリーンショットを見ると、ダイアログボックスでのボタン配置について、さらに2つのガイドラインが示されていると分かる：

ボタンには（「OK」などの）汎用的なラベルよりも、その役割を説明するラベルを付けた方がよいことが多い。ボタンの機能がよく分かるラベルは“ジャストインタイム方式の（必要に応じて表示される）ヘルプ”として役立ち、ユーザがより自信を持って正しいアクションを選べるようになる。
一番よく選択されるボタンをデフォルトとして、強調表示すること（ただし、そのボタンを選ぶと由々しき結果が生じる場合は別だ。その場合はユーザがうっかりEnterキーを叩いても処理が実行されないように、そのボタンにデフォルトでフォーカスを合わせないようにしよう）。

↑次の記事：紙面の書き方 vs. Webの書き方
↓前の記事：リンク集は何色にすべき？～イントラネットの場合

サイトの最新情報をRSSフィードとTwitterで配信しております。ぜひ購読・フォローしてください。
（RSSフィードは、Google ReaderやLivedoor Readerでもご購読いただけます）