👨🏽‍🔧 🌀 🥩 コンテキストメニューのデザイン ✖️ 👩🏽‍🤝‍👨🏻 🛒

ヘイガンリバーズの " コンテキストメニューデザイン "というタイトルの記事の翻訳を紹介します。 Two Rivers Consulting Corporationの承認を得て、特にHabrahabrユーザー向けにUXDepotに移行。

コンテキストメニューとは何ですか？

コンテキストメニューは、カーソルが現在指しているオブジェクトに関連するコマンドを含むメニューです。このメニューは、多くの場合、右クリックメニューとも呼ばれます。これは、歴史的にWindowsで右マウスクリックによって呼び出されていたためです。

Apple Mail（左）とWindows Mail（右）のメッセージのコンテキストメニュー。

コンテキストメニューを使用する必要がありますか？

コンテキストメニューは、すべてのアプリケーションに適しているわけではありません 。 Lands EndやAmazonなどのオンラインストアで使用しないことを強くお勧めします。また、複雑な相互作用を必要としない消費者サイト（銀行サイト、出会い系サイト、Facebookなど）にコンテキストメニューを使用することはお勧めしません。

コンテキストメニューは 、ユーザーがよく使用し、よく理解している深刻な企業アプリケーションで最も効果的だと思います 。このようなアプリケーションでは、コンテキストメニューは非常に便利です。なんで？

まず第一に、 コンテキストメニューはマウスの動きを保存するのに役立ちます 。ユーザーが頻繁に繰り返しアクションを使用することを余儀なくされる場合、コンテキストメニューを使用すると、不要な動きを防ぐことができます。オブジェクトを選択し、ツールバーに「カーソルを移動」してアクションを選択する代わりに、ユーザーはその場ですべてを実行できます。

第二に、 コンテキストメニューは、ユーザーがアプリケーション内のオブジェクトについてさらに学習するのに役立ちます。コンテキストメニューを開くと、このオブジェクトで使用できるコマンドが表示されます。これは、ユーザーが特定の時間にやり取りしていること、およびアプリケーションがこのタイプのオブジェクトを使用して何を実行できるかを理解するのに役立ちます。

ただし、このようなアプリケーションでも、 多くのユーザーがコンテキストメニューをまったく使用しないことに気付くかもしれません 。ほとんどの場合、これは、ホットキーも使用しない同じユーザーグループです。したがって、すべてのユーザーがコンテキストメニューを使用し、これらの考慮事項に基づいて独自の製品を作成するわけではないという事実に同意する必要があります（詳細は後述）

したがって、コンテキストメニューなしではできないと固く決心した場合は、それを正しく行う方法について考えてみましょう。

コンテキストメニューはどのように呼び出されますか？

従来、Windowsアプリケーションでは、コンテキストメニューは、オブジェクトにカーソルを合わせて右クリックすることで呼び出されます。 MacOSシステムでは、ユーザーはマウスの右ボタンを使用するか、コントロールボタンを押しながら左ボタンでオブジェクトをクリックすることもできます。通常、このアクションは単に「 右クリック 」と呼ばれます。

オブジェクトの任意の場所で右クリックすると、コンテキストメニューが呼び出されます 。署名付きのアイコンの場合、アイコンを右クリックすると、署名は同じコンテキストメニューを呼び出す必要があります。オブジェクトがテーブルの行である場合、ユーザーが行のどこをクリックしても同じメニューが開きます。ユーザーがこの行のどの列をクリックしたかによって、異なるコンテキストメニューが表示されることはありません 。

簡単なメモ：タッチスクリーンデバイス（iPadなど）の世界では、オブジェクトの上に移動できるカーソルはありません。この場合、オブジェクトを指す3つの可能な方法をすばやく指定できます。

オブジェクトをクリックした直後にコンテキストメニューを表示します（ただし、これは煩わしい場合があります）
指で押してボタンを一瞬押した後にコンテキストメニューを表示します（この場合、非自明性の問題が常に発生しますが、これは最初のオプションよりも優れています）
コンテキストメニューを呼び出すコントロールを追加します（おそらく、これが問題を解決する最良の方法です-以下で説明します）。

MacOS X（左）とWindows Vista（右）の画像ファイルのコンテキストメニュー。

コンテキストメニューを呼び出すアイテムを追加する

一部のWebアプリケーションにはインターフェース要素があり、クリックするとコンテキストメニューが表示されます。これは通常「メニューアイコン」と呼ばれます。これは、オブジェクトの名前（または画像）のすぐ隣にある下矢印を表すアイコンです。

このコントロールを使用する場合、ユーザーは左クリックまたは右クリックしてコンテキストメニューを開くことができます（メニューを開く方法としてマウスオーバーを使用しないでください ）。この場合にできる最悪のことは、ユーザーがマウスの左ボタンとマウスの左ボタンでコントロールをクリックしたという理由だけでメニューを表示しないことです。

この場合、メニューが使用可能であることを示すメニューコントロール。

メニューコントロールを使用する場合は、クリックすることはオブジェクト自体をクリックすることとは異なることを確認する必要があります。上記の例では、ユーザーがAhmed Hassain行のどこかをクリックすると、単にAhmed Hassain行全体を選択しますが、この行のメニューアイコンをクリックすると、コンテキストメニューが表示されます（行は強調表示されません）。

さらに、ユーザーは、アイコンをクリックすることなく、行の任意の場所を右クリックしてコンテキストメニューを開くこともできる必要があります。

メニューコントロールを使用する必要がありますか？ コンテキストメニューに関する大きな問題の1つを完全に解決します。多くのユーザーは、コンテキストメニューが利用可能であることを知りません。 Webアプリケーションでは、ユーザーは多くの場合、コンテキストメニューがないと想定します（デスクトップアプリケーションにはないこともあります）。

メニューコントロールは、コンテキストメニューがあることを示すのに役立ち、ユーザーにそれを使用するように促します 。一方、メニューが利用可能であると常に想定しているユーザーがいて、自分でメニューを開こうとします。このユーザーグループ用のアプリケーションを作成する場合、メニューを開くために目立つコントロールを作成する必要はありません。

メニューアイコンの大きな問題は、画面上で繰り返し表示され、目詰まりすることです。この問題は、マウスカーソルがオブジェクト上にあるときにのみアイコンを表示することで解決できます。

マウスにカーソルを合わせたときに表示されるメニューを制御します。

メニューコントロールの別の問題は、一部のオブジェクトにアタッチすることが難しいことです。たとえば、ツールバーのコンテキストメニューを考えてみましょう。ツールバー自体は大きなインターフェイス要素であり、そこにメニューコントロールを配置する場所が明確ではないため、メニューがあることは明らかです。したがって、メニューコントロールはどこでも機能しません。

コンテキストメニューには何を含める必要がありますか？

コンテキストメニューには、選択したアイテムに関連するコマンドが含まれている必要があります 。つまり、選択した項目に適用できるメニューバーまたはツールバーのコマンドを含めることができます。

コンテキストメニューには、オブジェクトで使用できるすべてのコマンドを含めるべきではありません。これにより、メニューが巨大で使いにくくなります。最も頻繁に使用され、最も重要なチームに焦点を当てます。不要なコマンドでメニューをオーバーロードすることは、それでできる最悪のことです。重要なことに集中し、混乱を減らします。

たとえば、Dreamweaver、Microsoft Word、およびApple Pagesで選択したテキストの3つのコンテキストメニューを次に示します。メニューDreamweaverはスイス製の折り畳みナイフのように見え、1つのコンテキストメニューですべての可能なコマンドを提供します。このため、ネストされたリストが多数ある非常に大きくなり、使用が難しくなります。個人的には、Dreamweaverのコンテキストメニューを呼び出さないようにしています。

その中で、最も頻繁に使用される機能（たとえば、「コピー」または「貼り付け」）は、リストの終わり近くにあります。反対に、WordとPagesでは、頻繁に使用されるコマンドはリストの一番上に配置され、ネストされたリストを含むコマンドは最後に配置されます。また、メニューの最も重要な機能のみを選択し、それらをより適切に整理しました。

コンテキストメニューをより便利にしたい場合は、100％すべてではなく、最も重要なコマンドの60％だけを残してください 。すべての重要なコマンドを1つのメニューに収めようとすると、これは良いことにはなりません。メニューのサイズが大きくなり、操作性と操作速度が低下します。

覚えておいてください：コンテキストメニューが一般的に使用される主な理由は、ユーザーの時間を節約するためです。

Dreamweaver、Microsoft Word、およびApple Pagesのコンテキストメニュー

コンテキストメニューには、選択したオブジェクトに関連しないコマンド （「ページの更新」など）を含めないでください。ユーザーが指しているオブジェクトを操作するのに役立つコマンドに集中してください。

可能であれば、チームをそれぞれ1〜6個のブロックにグループ化します 。ブロックを線で区切ります。最も頻繁に使用されるコマンドはリストの一番上に移動し、最も頻繁に使用されないコマンドは削除する必要があります。コマンドが特にめったに使用されない場合、おそらくコンテキストメニューに属していません。

ネストされたリストを自由に使用できますが、ネストされたリストを含むコマンドはコンテキストメニューで実行する必要があります。ネストされたリストは好きではありません。なぜなら、ユーザーは間違いを犯す可能性があり、さらに、コンテキストメニューの意味は時間を節約することに帰着するのに多くの時間を費やしているからです。

さらに、非標準のメニュー項目を使用できます 。

たとえば、フローティングパレットはMicrosoft Word 2007のコンテキストメニューとともに開き、Mac OSのファイルのコンテキストメニューには、ショートカットの色を選択するための特別な色のボタンがあります。「メニュー」と言うからといって、テキストだけで制限する必要があるわけではありません。

コンテキストメニューは、単なるコマンドのリストではありません

コンテキストメニューには、固有のコマンドを含めることはできません 。言い換えると、コンテキストメニューコマンドは、ツールバー、メニューバー、または画面上の他の場所で他の方法でも使用できる必要があります。ほとんどのユーザーは、アプリケーションでコンテキストメニューを開くことはほとんどないことに注意してください。そして、これは彼らがそこにのみ存在するチームを見ないことを意味します。

通常、コンテキストメニューの最初に「デフォルトコマンド」を配置します。これは、オブジェクトをダブルクリックして実行されるコマンドです（たとえば、ファイルのコンテキストメニューの[開く]コマンド）。オブジェクトにデフォルトのコマンドがない場合は、最も使用されるコマンドに集中してください。

コンテキストメニューでオブジェクトの名前を使用して、コマンドをわかりやすくすることができます 。たとえば、「Open」コマンドの名前の代わりに、「Open Screenshot.png」というフレーズを使用できます。この手法を使用する場合、妥協点を見つけるのは難しい場合があります。メニューを自明にする必要がありますが、冗長ではありません。 Mac OSのメニューには、一部のコマンドにはオブジェクトの名前が含まれていますが、他のコマンドには含まれていません。

コンテキストメニューでアイコンを使用していません。正直なところ、私はアプリケーションでそれらをまったく使用していません-私の意見では、それらはインターフェースを詰まらせており、ほとんど役に立たない（ ノート翻訳者-o_O ）しかし、これは私の意見に過ぎず、あなたは自分で決める。

多くのアプリケーションのコンテキストメニューでは、コマンドの近くにホットキーは表示されません。これは、メニューが簡単に見えるように行われたと思います。決定するのもあなた次第です。

複数の選択されたオブジェクトはどうですか？

通常、コンテキストメニューは選択された1つのオブジェクトに対して呼び出されますが、ユーザーが複数のオブジェクトを選択してコンテキストメニューを開くとどうなりますか？いくつかの例を見てみましょう。

4つのフォルダー（A、B、C、D）と2つのグラフィックファイル（EおよびF）の6つのオブジェクトがあるとします。

Windowsのフォルダーとファイル

例1

ユーザーはフォルダーA、B、Cを選択し、フォルダーD上でマウスを使用しながらコンテキストメニューを呼び出します（重要：フォルダーDは最初に選択されていません）。この場合、オブジェクトA、B、およびCの場合、 選択したDでのみ選択解除してコンテキストメニューを開く必要があります。

例2

ユーザーがA、B、Cを選択し、Cマウスでコンテキストメニューを呼び出す場合、A、B、Cが同じタイプのオブジェクトであるかどうかを最初に判断する必要があります。つまり、これらすべてのオブジェクトに同じメニューがありますか？はいの場合、すべてが簡単です。 このメニューのすべてのコマンドが、選択したすべてのオブジェクトに適用されていることを確認してください。

たとえば、「開く」コマンドの場合、3つのオブジェクトすべてを開く必要があります。複数のオブジェクトに適用できないコマンドがある場合は、メニューから削除せずにコマンドを非アクティブにする必要があります。

前に、コマンドを適用する対象をユーザーが理解できるようにするために、「開く」の代わりに「Open Screenshot.png」を作成できることについて説明しました。同様に、この場合、「Open 3 objects」と書くことができます-これは、選択したすべてのオブジェクトにアクションが適用されることを理解するのに役立ちます。 この場合、コンテキストメニューは次のようになります。

3つのオブジェクトを開く
3つのアイテムを削除する
3つのアイテムをコピー

AppleはMac OS Xでも同様のアプローチを使用していますが、どこでも使用しているわけではありません。コンテキストメニューに「3つのファイルを圧縮」というフレーズが表示される理由がわかりませんが、どこにも「3つのファイルを開く」と表示されません。変です。

例3

次に、ユーザーが複数の異なるオブジェクト、たとえばフォルダーA、B、およびグラフィックファイルEを選択した場合を見てみましょう。ご存じのように、フォルダーとグラフィックファイルのコンテキストメニューはまったく異なります。

これは、いわゆる混合選択です。以下の例では、フォルダ（左）と画像（右）のコンテキストメニューを見ることができます-それらは大きく異なります。

フォルダー（左）および画像ファイル（右）のWindowsコンテキストメニュー

混合選択の場合、どのコンテキストメニューを使用する必要がありますか？最も一般的な答えは、ユーザーがホバーしたオブジェクトのコンテキストメニューを表示することです。

マウスカーソルが置かれているオブジェクトのコンテキストメニューを使用する

たとえば、ユーザーは混合選択でA、B、およびEを選択し、Eのコンテキストメニューを呼び出します。表示されるコンテキストメニューは、Eのコンテキストメニューです（マウスカーソルが置かれているオブジェクトのコンテキストメニューが常に表示されます）。

左：フォルダーAが強調表示され、フォルダーのコンテキストメニューが表示されます。

中央：画像Eが強調表示され、画像ファイルEのコンテキストメニューが表示されます。

右： 2つのフォルダー（AおよびB）とグラフィックファイルEが強調表示され、ファイルEのコンテキストメニューが表示されます。

混合選択の場合のコンテキストメニュー

ただし、ユーザーが選択したすべてのオブジェクトに適用できるさまざまな種類のファイルのコンテキストメニューからコマンドを選択した場合、これを行う必要があります。そのため、「削除」コマンドを選択した場合、選択したすべてのオブジェクトは、異なるタイプのオブジェクトであっても削除する必要があります。

一方、ユーザーがEのメニューを呼び出し、AとBに適用できないコマンドを選択すると、Eにのみ適用されます。ユーザーが[エクスポート]コマンドを選択し、Eにのみ適用できる場合、Eのみがエクスポートされます。

次の2つの図は、同じ選択を示しています。A、B、およびE。左側の図では、Bのコンテキストメニューが開いており、フォルダーのメニューが表示されています。右側の図では、同じオブジェクトが選択されていますが、Eでメニューが開いているため、画像ファイルのメニューが表示されます。

あなたは驚くでしょう-このアプローチは、あなたが定期的に使用するアプリケーションの大部分で使用されています。考えてみてください。「削除」コマンドを選択すると、3つのオブジェクトがすべて削除されると予想されます。

これは複雑に聞こえますが、ユーザーには有効なものの1つです。

このアプローチの問題は、常に予測できるとは限らないことです 。「エクスポート」を選択すると、どのオブジェクトがエクスポートされるか正確にはわかりません。このアプローチの原則は、すでによく知っているアプリケーションでのみ確認できます。

そのような矛盾を取り除くために、明確なコマンド名を使用することを再度提案できます。

3つのファイルを削除する
Screenshot.pngをエクスポート

これにより状況が大幅に改善および簡素化されると思います。

このアプローチの実装には1つの困難があります。すべてのコンテキストメニューのすべてのコマンドを実行し、混合選択で適用できるコマンドと適用できないコマンドを検討する必要があります。異なるオブジェクトのコンテキストメニューが類似しているほど、このタスクは簡単になります。 Mac OS Xでは、フォルダーとファイルのコンテキストメニューはほぼ同じであるため、Appleの生活はずっと簡単です。

OS Xの混合選択とコンテキストメニュー

この例は、問題を解決する最善の方法は、単にその発生を回避することであることを示しています。言い換えれば、異なるオブジェクトに異なるコンテキストメニューを使用しないようにしようとすると、混合選択に関連する問題は脅威になりません。

したがって、解決策の1つは、すべてのタイプのオブジェクトでコンテキストメニューを同じにすることです。

しかし、選択をリセットするとどうなりますか？

ユーザーが複数のオブジェクト（たとえば、A、B、およびE）を選択してから、いずれかのオブジェクトでコンテキストメニューを呼び出すと、選択がリセットされます。ユーザーがメニューを呼び出したオブジェクトが強調表示され、メニューはこのオブジェクトにのみ適用されます。

個人的には、ユーザーが特定の選択をするのに多くの時間を費やすことがあるため、このアプローチは好きではありません。この場合、予期しない放電のリセットは迷惑になります。このアプローチは避けるべきだと思います。

新しいメニューの作成はどうですか？

この問題の別の解決策は、選択されたすべてのオブジェクトに同時に適したコマンドのみを含む新しいコンテキストメニューを作成することです。

私はこれを言うことができます-それは価値がない。これにはいくつかの理由があります。これは、設計とプログラミングの問題が混在しています。メニューに新しいコマンドを追加するたびに、考えられるすべてのメニューの組み合わせを作り直す必要があります。これは面白くない、信じて。

そして最悪なのは、 このアプローチはユーザー自身にとって悪いことです。これは非標準的なソリューションであり、人々に拒否されています。メニューのユーザーは、位置記憶（脳がインターフェイスのスキャンを容易にするために作成する特定のパターン）に依存しています。つまり、メニューのコマンドがどこにあるかを覚えています。

現在の選択に応じて変化する変わったメニューを表示すると、ユーザーはメニューの操作により多くの時間を費やすため、位置記憶に混乱が生じます。

つまり、このアプローチにより、ユーザーはより多くの間違いを犯し、より多くの時間を費やすことができます。これは、通常コンテキストメニューを使用する理由の正反対です。

結論

要約しましょう：

コンテキストメニューは、すべてのアプリケーションに適しているわけではありません 。それらを作成する前に、ユーザーがそれらを使用し、それらが必要であることを確認してください。

わからない場合は、いくつかのユーザビリティテストを実行し、ユーザーが少なくともそれらを開こうとしていることを確認してください。テスターが繰り返しの定型タスクを実行し、それらのどれもコンテキストメニューを開いたことがない場合、それは必要ありません。

コンテキストメニューを作成する目的は、時間を節約することです。本当に時間を節約できるように作成してください。それらを短く、よく整理してください。

コンテキストメニューのデザインを改善する方法を考えてください。

いくつかのアイデアに言及しました。オブジェクトの上にマウスを移動すると表示されるメニューコントロールを追加します。このコマンドまたはそのコマンドの影響を受けるオブジェクトをメニューに示します。開発の機会はたくさんあると確信しています。この「標準」式を基にして、それを自由に調整してください。

翻訳者からのPS： この記事を楽しんでください。 翻訳の誤りをご指摘いただければ、喜んで訂正いたします。 午後に私に書いてください:)

コンテキストメニューのデザイン