Webアプリケーションのキーボードショートカットをユーザーに公開する方法は？
開発中の小さなWebサイトにいくつかの基本的なキーボードショートカットを追加しました。これらをユーザーに公開する最良の方法は何ですか？ ?を押すと、Gmailに概要が表示されることに気付きました。
それはそれを行うための最良の/典型的な方法ですか？
Tl; dr：ツールチップを使用します。
私はアドリアーノに同意します。GmailでのGoogleのやり方は、ユーザーにキーボードショートカットを公開するための最悪の方法の1つです。どうして？すべてのショートカットの巨大なリストは全くコンテキストを提供しないので。ユーザーがキーボードショートカットを使い始めるためには、リストに移動し、必要のない他の関連しないキーボードショートカットの中に埋め込む必要があるものを見つけて、メモする必要があります。ユーザーがそれが何であったかを忘れた場合、彼はリストに戻ってそれを再び見つける必要があります。
このスタイルのキーボードヘルプの例については、Gmailとは異なり、実際には状況依存型のStack Overflowのショートカットヘルプをご覧ください。スクリーンショットについては、この回答の下部をご覧ください。
今、私はあなたの質問履歴をチェックすることから、この答えは具体的にyour問題を解決しないことを知っています（ショートカットが J そして K ページをスクロールするだけの場合は、誰もがこれらのショートカットを使用することはないと思い込んでも大丈夫だと思いますが、Web上のキーボードショートカット全般に関する質問に答えます。
ユーザーが既に知っているに固執することをお勧めします。たとえば、Windowsについて考えてみましょう。 OSには文字通りどこでもショートカットキーがちりばめられており、コンテキスト固有のものの多くは常に表示されます（ほとんど、以下を参照） 、UIをまったく妨害しません。それらは目立たないので、マウスだけを使用する人々はそれらにさえ気付かないでしょう。
1文字のアクセスキー
多くの場合、Webショートカットキーは1文字のアクセスです。たとえば、 S GitHubのキーは検索バーに焦点を合わせます（BlackBerryを持っているので私はこれを知っています、そしてBB10ブラウザーではSキーがページ上の検索ツールを開き、これがそれを妨害します-そうでなければそれを示すものはありません ? ヒントシート）。 Windowsでは、ほぼすべてのコンテキストメニュー項目とダイアログボタンおよびオプションに、ラベル内の対応する文字に下線を引くことによって示される1文字のアクセスキーがあります。メニュー項目は、その文字だけを押すとアクティブになりますが、ダイアログウィンドウは Alt+letter。 （ユーザー補助設定で常に下線を表示するオプションが有効になっていない限り、Windowsのそれ以降のバージョンでは、下線を表示するためにAltを押し続ける必要があります。）
（コンテキストメニューのスクリーンショットも表示しますが、Windows 10 Insider Previewを実行しています。この最新バージョンでは、Microsoftがそれらを壊しているようです。）
Webアプリは通常、デスクトップの対応するものよりもはるかに単純であり、ほとんどの場合、マウスでもアクションをアクティブ化できるため、1文字のアクセスキーはWebに適しています。つまり、ラベル内の文字に下線を、またはボタンの上にツールチップを簡単に挿入できます。
さらに、1文字のキーボードショートカットには、ブラウザやオペレーティングシステムのショートカットに干渉しないという利点があります（ほとんどの場合、例外については、上記のGitHubおよびBB10を参照してください）。
マルチキーキーボードショートカット
最も一般的なマルチキーショートカットのいくつかは完全にユビキタスであるため、Web上にある場合は変更しないでください。常に文書化する必要はありません。つまり Ctrl+B boldの場合、 Ctrl+I italicの場合、 Ctrl+A [すべて選択]などですが、他の方法についてはユーザーに説明する必要があります。この場合、1文字しかカバーできないため、下線のトリックは使用できません。したがって、この場合、いくつかのオプションがあります。
- Gmailスタイルで、allキーボードショートカットのリストを表示します。
- マウスコントロール（ボタンなど）にカーソルを合わせるとツールチップが表示されます。
- メニュー項目の横にショートカットを表示します。下のa laメモ帳。
（このスクリーンショットでは、実際には2種類のキーボードショートカットが表示されます：コンテキスト固有のアクセスキー（メニューが開いているときにのみ機能）と非コンテキスト固有のショートカット（いつでも機能）。
明らかに、＃3はWebでは機能しません。メモ帳のような「メニュー」の使用はかなり制限されているか、存在しないためです。上記で説明したように、Gmailのソリューションは貧弱です。したがって、＃2が残ります。この目的でツールチップを使用することは、実際には非常に一般的です。スタックオーバーフローでさえ、エディターでそれを行います。そしてそれは非常にエレガントです。 UIが乱雑になることはなく、ユーザーが必要とするときはいつでも存在します。ツールチップはよく知られているので、それは発見可能です。1つのボタンにツールチップがあることがわかったら、他のボタンもそうであることがわかるでしょう。
これに関する唯一の問題は、ツールチップがタッチスクリーンで機能しないことです。ただし、ユーザーはタッチスクリーンを使用しているので、おそらくモバイルを使用していて、目の前にキーボードがないことを意味します。したがって、これらのキーボードショートカットを使用できないため、問題にはなりません。 BlackBerryやMicrosoft Surfaceなどのタッチスクリーンラップトップなど、これには例外がありますが、これらは安全に無視できるEdgeケースです。
おそらくさらに重要なのは、ツールチップを実装するのが非常に簡単なことです。問題のHTML要素にtitle属性を設定するだけです。
デスクトップ上（Microsoft Word内）にあるにもかかわらず、よく行われたツールチップの別の例を次に示します。
もう一つ。ツールチップを使用しても、Gmailスタイルのヘルプシートは除外されません。実際、可能であれば、両方を実行してください。を押して1番目、2番目、3番目などのオプションを選択するなど、一部のパワーユーザーショートカット Ctrl+1/2/3/... 他の方法では説明できません。さらに、ショートカットのヒントシートを後ろに置く ? 新しいものではありません。多くの人がそれについて知っているわけではありませんが、GmailやGitHubなど、注目を集めているサイトがいくつかあります。このヘルプシートにアクセスするには、を押す以外の方法があることを確認してください。 ?。
スタックオーバーフローにも ? ヘルプシート（すべてのSEサイトの中で、SOは、何らかの理由でこれらのキーボードショートカットを取得するための唯一のサイトです。）最初にプロファイル設定で有効にする必要がある場合があります。スクリーンショット：
「？」を押すと、Googleが概要を表示することに気づきました。
キーボードショートカットをヘルプページとして表示し、すべてを順番に表示します。 オンラインヘルプのようなものです。
それはそれを行うための最良の/典型的な方法ですか？
Webにキーボードショートカットを表示するための標準または通常の方法はありません。私の意見では、Googleがやっていることは最悪の方法です（2番目だけは何の助けも提供しません）。
- その兆候はどこにもありません ? そのヘルプページが開きます。必要な場合は、まず[設定]メニュー（!!!）をクリックし、[ヘルプ]を開いて、ヘルプ内でそのリストを検索してください。
- 使用可能なすべてのキーボードショートカットが表示されます。それ以上でもそれ以下でもありません。現在使用しているページ（またはステータス）で利用できるかどうかは関係ありません。
- GMailにはいくつかのキーボードショートカットがありますが、より大きなWebアプリケーションリストの場合、信じられないほど長くなる可能性があります。 Googleからは、小さな検索ボックスがいいと思います（少なくとも、すべてを読んで必要なものを見つける必要はありません）。
キーボードショートカットを提供するより適切な方法はありますか？
私はそれが可能だと思います、またそれらはあなたの意図された聴衆によって多かれ少なかれ重要であるかもしれないことを心に留めておいてください。覚えておくべき最初のいくつかのポイント：
- カジュアルな電子メールクライアントユーザーはキーボードショートカットを使用できませんが、たとえば、発電所のダッシュボードのpower-userはこれらのショートカットを使用して作業を高速化できます。パワーユーザーは簡単にアクセスでき、他のユーザーには邪魔にならないようにする必要があります。
- パワーユーザーでさえ、キーボードショートカットだけを使用することはありません。彼らはおそらくマウスとキーボードの相互作用を混合するでしょう（彼らの習慣と彼らの手の位置に応じて）。キーボードとマウスはシームレスに相互に対話する必要があります。
- 入力方法に関係なく、すべてのアクションが使用可能である必要があります。マウスジェスチャー、タッチ、キーボードナビゲーション/キーボードショートカット：アクションを実行する方法が1つだけであってはなりません。これは視覚または運動障害のあるユーザーにとって特に重要です。
- ユーザーはキーボードショートカットを使用することを学習し、段階的なアプローチと機能の開示により学習を支援.
これらすべての前提条件について、keyboard aficionadosの良いエクスペリエンスを提供するために何をすべきか？
- ポップアップヘルプページが適切な場合がありますが、残念ながら使用できません。 F1 それを開くには ? ニースのフォールバックかもしれません。
- キーボードショートカットヘルプを開くためにキーボードショートカットだけに依存しないでください。そのページを開くには、常に表示されるボタン/リンクが必要です。あなたが脂肪のフッターを持っているなら、それはそのための素晴らしい場所かもしれません。
- ユーザーがホットキーを押すと、表示要素のキーボードショートカットを表示するを検討することができます。たとえば、彼が押すと SHIFT 小さなポップアップが各ページ項目の近くに表示され、使用できるキーボードショートカットが説明されています。右のホットキーは簡単な選択ではありません、私は提案しました SHIFT できます彼らはケースによってそれを押して、これを発見します隠された機能。この発見しやすい機能（Don Normanを覚えていますか？）のため、アプリケーションのフィードバックも改善される可能性があります。これについては、 他の回答 も参照してください：該当する場合は、ツールヒントを使用してください。常に複雑なコントロールが可能なわけではありませんが、何もしないよりはましです。
- アプリケーションで可能なキーボードショートカットをすべて表示しない決して。完全に分類されたリストはオンラインヘルプにとどまることができますが、このクイックポップアップヘルプでは、現在利用可能なショートカットのみを表示する必要があります。
- ショートカットを分類。本当に長いリストがあり、カテゴリが任意である場合は、グループ化に異なるプリセットと自然な順序付け（アルファベット順でも）を提供しますOK）。
- 小さな検索テキストボックスを入力します。 5つまたは6つのショートカットしかない場合は、これをスキップできます。
- 検索はもエイリアスおよびsimilar単語に一致する場合があることに注意してください。さらに、ページングされた（スクロールできない）コンテンツに対しても機能する必要があります。これが、検索ボックスとブラウザがページはめ込み検索で提供するプレーンFindとの違いです。繰り返しますが、これは十分なショートカットがある場合にのみ役立ちます。
キーボードショートカットのヘルプのためだけに多くの作業が必要です。別の方法としては、オンラインヘルプに小さなセクションを配置して、すべてを簡単に説明します。どっちがいい？ユーザーが誰であるかによって異なります。
ショートカットの提供については、ウェブ用のGoogle受信トレイを参照するだけで、より良いアイデアが得られます。彼らはモーダルページへのすべてのショートカットを統合しました。理解しやすく、ショートカットリストの配置方法が明確で、スキャンも簡単です。 （私たちはテキストを読みませんが、スキャンします-テキストをスキャンする認知プロセス）
詳細については、添付のスクリーンショットを参照してください 
小さなWebサイトの場合、ドリブルは良い例です。ショットページの下部にシンプルな最小限のバーがあり、使用できるショートカットを強調表示しています。
