読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

Webサービスにおけるショートカットキーの原則

ユーザビリティ・アクセシビリティ

Webサービスにおいてもデスクトップアプリケーションと変わらない使用用途のものが増えています。そこで使用頻度が上がるにつれてほしいなと思うのがショートカットキーです。

ショートカットキーのユーザビリティ

よく使うソフトウェアにショートカットキーが実装されていると嬉しいものです。何度も繰り返す作業を簡単に行うことができるようになります。

今までは使用頻度が高いソフトウェアはその多くがデスクトップアプリケーションでしたが、Gmailを始めとしてデスクトップアプリケーションと遜色ないWebサービスが多数現れるようになってきました。

ただ、デスクトップアプリケーションと違い、Webサービスにおいてはそのショートカットキーの実装方法が共通化されているわけではありません。そこで、一度現状のWebサービスを比較し、ショートカットキーの原則を作ってみようというのがこのエントリーの趣旨です。

そのために、当ブログでも紹介しましたが、はてなの人力検索で質問してみました。その回答と僕自身がよく使っているWebサービスのショートカットキーをGoogle DocsKeyboard shortcuts of 9 webappsとしてまとめてみました(英語のWebサービスが多いです)。

以下、このまとめにおいて導き出されるショートカットキーの実装原則です。

キーの割り当て

  • 使用頻度が高いアクションに対してはアルファベット1文字で実装する。一方、そこまで使わないアクションにはCtrlやShift、Altとアルファベット1文字を併用する。
  • そのアクションの頭文字をキーに対応させる。例えば、メールを新規作成する(compose)であれば、ショートカットキーはcにするなど。
  • Enterは実行。そのWebサービスにおける最も重要(もしくは使用頻度が高い)アクションに割り当てる。
  • デスクトップアプリケーションでよく使用されているもの(Ctrl+sで保存など)はできる限りそのまま使用する。
  • ページごとにショートカットキーが変わってもよい。

ページ、アイテム間の移動

  • kは「上へ」の移動を表すことが多い、またjは「下へ」への移動を表すことが多い。例えば、jを押すことによって、その下のメールやタスクにフォーカスされるなど。
  • 上や下への移動に加えて、横の移動(例えばタブなど)がある場合は矢印キーやShiftなどを併用する。
  • 異なるページへのリンクや何かにフォーカスさせるには、g then a(gを押してすぐにaを押す)などが直感的に分かりやすい。ちなみに、g then aはGmailの例であり、Go to AllMailの意味。

設定について

  • ショートカットキーはデフォルトではオフにしておき、ユーザによってオンにするかどうかを選んでもらう。
  • どこまでをショートカットキーでできるようにするか。全ての操作にショートカットキーを対応させるか、それともよく使うものだけをショートカットに対応させるか。
  • ショートカットキーの一覧(チートシートのようなもの)をショートカットキーで見れるようにする(例えば、helpの頭文字のhやクエスチョンの?など)もしくは、ユーザスタイルシートなども別途使用できるとよい(RTMの例