Upgrade to Pro — share decks privately, control downloads, hide ads and more …

キーボード操作のデザイン

Rikiya Ihara
August 17, 2019
5.5k

 キーボード操作のデザイン

Rikiya Ihara

August 17, 2019
Tweet

More Decks by Rikiya Ihara

Transcript

  1. キーボード操作のデザイン
    2019.08.17 #XDUFes2019
    @magi1125

    View full-size slide

  2. 伊原 力也
    ● freee株式会社 UXデザイナー
    ● HCD-Net 評議委員、認定人間中心設計専門家
    ● ウェブアクセシビリティ基盤委員会 WG1委員
    ● @magi1125
    2

    View full-size slide

  3. 4
    Adobe Blog:伊原力也

    View full-size slide

  4. 9
    突撃!隣の自作キーボード

    View full-size slide

  5. 10
    ファミコン部、自作キーボード部 …freeeの部活制度「オフカツ!」が楽しそう

    View full-size slide

  6. キーボード操作のデザイン
    Adobe XDではキーボード操作のプロトタイピングが可能になりました。
    とはいえ、アプリやウェブページや、
    さらに両者の文脈が入り交じるウェブアプリケーションにおいて、
    そもそもキーボード操作をどうデザインすべきなのでしょうか。
    クラウド会計ソフトであるfreeeでの経験や
    アクセシビリティの観点も交えつつ、検討すべきポイントをお伝えします。
    (※セッション後に補足追記)
    11

    View full-size slide

  7. 13
    キーボードとゲームパッドでプロトタイプを作成
    A. トリガーをキーボードショートカットに設定
 B. キーボードショートカットキー

    C. アクションを自動アニメーションに設定
 D. 移動先アートボード


    View full-size slide

  8. 18
    キーボードショートカットで操作を高速化

    View full-size slide

  9. 19
    Ctrl ⌘ Space
    + +
    ショートカットキーをつけてみる?

    View full-size slide

  10. 20
    🤔
    いきなりそこからでよいのでしょうか?

    View full-size slide

  11. 21
    キーボード操作について考える

    View full-size slide

  12. 22
    マウスとキーボード

    View full-size slide

  13. ● 画面上の任意の座標をポイント → 非連続的なアクションを実行できる
    ● GUIの象徴
    マウス
    23

    View full-size slide

  14. ● 直線的に対象を選択していく → 連続的にアクションを実行できる
    ● オンとオフの2値で操作でき、座標の情報が不要:アクセシブル
    キーボード
    24

    View full-size slide

  15. それぞれのアクセラレーター
    25
    マウス
 キーボード

    ジェスチャ

    ⌘ + S
    ショートカットキー


    View full-size slide

  16. アクセラレーターは上級者向け
    ● ジェスチャやショートカットキーは記憶しなければならない
    ● 学習と引き換えに、手続きを省略できるので、高速化を生む
    ● 手続きが省略され、操作とフィードバックのスピードがあがる
    ● 結果としてフロー状態に入りやすくなる
    26

    View full-size slide

  17. もちろん組み合わせは利用は可能だが
    27
    マウス
 キーボード

    ジェスチャ

    ⌘ + S
    ショートカットキー


    View full-size slide

  18. 操作体系はベーシック→アドバンスドで設計
    28
    マウス
 キーボード

    ジェスチャ

    ⌘ + S
    ショートカットキー


    View full-size slide

  19. キーボード操作のデザインの段階
    1. キーボードで全て操作可能にする
    2. 特定ウィジェット内で最適化する
    3. 特定タスクの高速化を可能にする
    4. デスクトップアプリレベル
    29
    ⌘ + S

    View full-size slide

  20. 30
    1. キーボードで全て操作可能にする

    View full-size slide

  21. それはアクセシビリティのため
    32
    ● マウスが壊れても、腕をケガしても使える
    ● 運動障害でマウスが使いにくくても対応できる
    ● 全盲でもキーボード+スクリーンリーダーで使える
    ● 弱視でもキーボードの方がラクな場合は多い

    View full-size slide

  22. 健常者でもキーボードの方が早いケースは多い
    33
    ● フォームの入力と移動
    ● 操作対象に連続チェック
    ● アコーディオンを開けていく
    ● ECの決済入力、CMSの管理画面、経理業務……

    View full-size slide

  23. ウェブでは簡単に実現できる
    34
    ● a要素でリンクする & 標準のフォームコントロールで実装するだけ
    ● tab と shift + tab でフォーカスを行き来
    ● checkbox, select などはカーソルキーで切り替え
    ● space で選択、enter で実行

    View full-size slide

  24. 35
    基本的なフォーム

    View full-size slide

  25. まがい物を作ると使えなくなる
    36
    Adobe XD User Fes
    次へ
    懇親会について

    View full-size slide

  26. まがい物を作ると使えなくなる
    37
    ● リンクやボタンを、span や div や hrefなしのa で作ってしまう
    ● ブラウザはそれがリンクやボタンだとわからない
    ● フォーカスがあたらないのでキーボードで操作不能になる
    ● リンクはhref属性ありのa要素で実装する
    ● ボタンはbutton type="button"で実装する

    View full-size slide

  27. 38
    div element is the final weapon - black Tシャツ

    View full-size slide

  28. 39
    Use button, not div Tシャツ

    View full-size slide

  29. 40
    BUTTON? THAT'S IT! (White) Tシャツ

    View full-size slide

  30. outlineは消してはいけない
    41
    a { outline: none; }

    View full-size slide

  31. outlineは消してはいけない
    42
    ● a要素のいびつな形が見えるのでoutlineを消したくなったりする
    ● リセットCSS的なものでoutlineが消えていたりする
    ● これは、例えるならマウスカーソルを消しているのと同じ
    ● フォーカスの場所がわからず、キーボードで操作不能になる
    ● outline: none の指定は全消ししよう

    View full-size slide

  32. 43
    http://www.outlinenone.com/

    View full-size slide

  33. 44
    http://www.outlinenone.com/ Tシャツ

    View full-size slide

  34. 45
    What Input?

    View full-size slide

  35. 47
    Focus transition

    View full-size slide

  36. フォーカス順を考える
    48
    ● 特定の行動のためにtabを何回押すことになるかを考える
    ● ここでの操作効率が、あとで追加対応の要不要に関わってくる
    ● 論理的な順番を検討 → その順でHTMLを書く → CSSでレイアウトする
    ● 要素の追加削除に耐えられないので、tabindex属性での順番設定は避ける

    View full-size slide

  37. freeeではどうしている?
    ● デザインガイドラインで「キーボードで全て操作可能」を定めている
    ● 後述のデザインシステムでその状態を実現していこうとしている
    ● ワイヤーフレーム段階でフォーカス順を検討している(特定機能において)
    50

    View full-size slide

  38. XDをどう使う?
    ● この段階はXDでシミュレーションするものではなさそう
    ● 「キーボードで全て操作可能」は当たり前にやることだから
    ● tabキー1つずつの切り替えをXDで表現するのは大変すぎるから
    53

    View full-size slide

  39. 54
    2. 特定ウィジェット内で最適化する

    View full-size slide

  40. OSのふるまいに合わせる
    55
    特定のウィジェットは、OSのものと挙動を合わせると操作しやすくなる
    ● サジェスト
    ● メニューバー
    ● タブ
    ● モーダルダイアログ

    View full-size slide

  41. やっていること
    ● 操作対象をグルーピングする
    ● フォーカス範囲を制御する
    ● グループ内をカーソルキーで行き来する
    ● 最初と最後には home, end で飛ぶ
    ● esc でモードを抜ける
    56

    View full-size slide

  42. 実例集
    ● WAI-ARIA Authoring Practices 1.1
    ● Inclusive Components
    ● 書籍『インクルーシブHTML + CSS & JavaScript』
    ● 書籍『コーディングWebアクセシビリティ』
    57

    View full-size slide

  43. 61
    ほんとうにOSに寄せるのがいいのか?
    ● OSのキーアサインにしたとして、ユーザーはその操作がわかるのか?
    ● そのウィジェットを、ユーザーはOSのものと同一と認識するか?
    🤔

    View full-size slide

  44. 62
    わたしたちなりの指針
    ● ウェブアプリで利用頻度が高いなら、学習を期待し、OSに倣うのもアリ
    ● 逆にウェブページ上のウィジェットを頑張って対応するかは微妙
    ● 見た目がタブだけど実はナビゲーションとかもある。こういうのも問題
    ● 重要なのは「一貫性」。アプリ内で同じものが同じように扱えるのが大事

    View full-size slide

  45. freeeではどうしている?
    ● アクセシブルなデザインシステムを開発する部署がある
    ● デザインシステムのコンポーネントごとに操作について検討している
    63

    View full-size slide

  46. XDをどう使う?
    ● XDのシミュレーションは有効。実際の使用感を確かめられる
    ● tab でグループに入る → カーソルキーで移動
    → space で選択 → esc or tab で抜ける
    ● これは連続して試してみないと、要不要や違和感に気づきにくい
    65

    View full-size slide

  47. 66
    3. 特定タスクの高速化を可能にする

    View full-size slide

  48. いわゆるショートカットキーの段階
    67
    ● 先述の「キーボードで全て操作可能」「特定ウィジェット内で最適化」を
    行うことで、アクセシビリティ&ユーザビリティは飛躍的に向上する
    ● それでもなお高速化したい反復作業があるときに導入を検討する
    ● ただし、かなりの制約をかいくぐる必要がある、修羅の道
    ● 各種OSガイドラインやアクセシビリティガイドラインをまとめてみた

    View full-size slide

  49. この掟の遵守者だけがショートカットキーを授かる
    1. 先にショートカットキーで解決しようとしない
    2. ショートカットキーは優先度をつけて厳選する
    3. ショートカットキーはオンオフ可能にする
    4. 既存のキーアサインとの衝突を避ける
    5. ショートカットキーは上書き可能にする
    6. ショートカットキーの存在を認知させる
    7. ショートカットキーは覚えられるものにする
    8. アクセスキー(accesskey)は使わない
    68
    🤯

    View full-size slide

  50. 1. 先にショートカットキーで解決しようとしない
    ● 「キーボードで全て操作可能」「特定ウィジェット内で最適化」が先
    ● 記憶が要らないので、上記のほうが認知負荷が低い
    ● それをやるまえに先にショートカットでなんとかしようとしない
    69

    View full-size slide

  51. 2. ショートカットキーは優先度をつけて厳選する
    ● たくさんあるとそれだけ覚えるのが大変になる
    ● 既存キーアサインとの衝突の可能性も高まる
    ● 本当に必要なものに絞り込むべし
    70

    View full-size slide

  52. 3. ショートカットキーはオンオフ可能にする
    ● 既存キーアサインとの衝突しているかもしれない
    ● 意図せず暴発してしまうかもしれない
    ● なのでショートカットキー自体をオフにできるべき
    ● (が、ちゃんと守っているサービスあんまり見かけない)
    71

    View full-size slide

  53. 4. 既存のキーアサインとの衝突を避ける
    ● 複数のOS、複数のブラウザ、たくさんの支援技術、
    ユーザーが入れるプラグインのキーアサインと衝突しないようにする
    ● 衝突すると意図しない挙動になる
    ● (検証という観点ではかなりキビしい感がある)
    72

    View full-size slide

  54. 5. ショートカットキーは上書き可能にする
    ● 衝突しても、上書きできれば問題を回避できる
    ● キー配列や利用状況はさまざま。ユーザーが最適な形に調整できるように
    ● (が、ちゃんと守っているサービスあんまり見かけない)
    73

    View full-size slide

  55. 6. ショートカットキーの存在を認知させる
    ● ショートカットキーは見た目には存在しない要素
    ● わからないものは使えない
    ● メニューに併記、ツールチップ、?キーで一覧を出す、
    チュートリアルなどで、その存在をユーザーに伝えるようにする
    74

    View full-size slide

  56. 7. ショートカットキーは覚えられるものにする
    ● ショートカットキーには手がかりがない
    ● 思い出せないものは使えない
    ● ユーザーが既に知っている慣例にならったほうがよい
    ● コマンド名の頭文字とか、意味を紐付けて覚えられるものもよい
    75

    View full-size slide

  57. 8. アクセスキー(accesskey)は使わない
    ● accesskey属性というグローバル属性があり alt + 記載のキーで発動する
    ● が、ブラウザ実装が適当なので動いたり動かなかったりする
    ● フォーカスが移るだけの場合もあれば、即座に実行される場合もある
    ● 動作が保証できないので、うっかり書いてしまっていたら消すこと
    76

    View full-size slide

  58. 問題なく守れそうなもの
    ● 1. 先にショートカットキーで解決しようとしない
    ● 2. ショートカットキーは優先度をつけて厳選する
    ● 6. ショートカットキーの存在を認知させる
    ● 7. ショートカットキーは覚えられるものにする
    ● 8. アクセスキー(accesskey)は使わない
    77
    😌

    View full-size slide

  59. どうしたものか……なもの
    ● 3. ショートカットキーはオンオフ可能にする
    ● 4. 既存のキーアサインとの衝突を避ける
    ● 5. ショートカットキーは上書き可能にする
    78
    🤯

    View full-size slide

  60. 良いショートカットキーのプラクティス
    ● 1文字または2文字のショートカットキーを使う
    ● 入力が簡単であり、一意である可能性が高く、意味を伝えられる
    ● すでに使われているケースが多く、慣例もある
    ● j, k, /, ?, ⌘ + enter あたりはかなり共通している
    ● ただし入力中に1文字・2文字ショートカットは使えないので注意
    ● 修飾キー付きはかなり慎重に。どうしてもという時だけ
    79

    View full-size slide

  61. 80
    Best Practices for Prototyping Keyboard Accessibility

    View full-size slide

  62. 85
    確かに!

    View full-size slide

  63. freeeではどうしている?
    ● ワイヤーフレーム段階でショートカットキーを検討している(特定機能)
    ○ ホームポジションの観点が独特。テンキーを前提にしている
    ○ なので j, k だけでなく f, d でも操作対象を切り替えられたりする
    86

    View full-size slide

  64. XDをどう使う?
    ● XDのシミュレーションは有効。実際の使用感を確かめられる
    ● 指の位置を考えながら、実際の反復作業を行ってみる
    ● 無理があるキーアサインだと指が疲れたり攣ったりするので
    プロトタイピング重要
    89

    View full-size slide

  65. 90
    4. デスクトップアプリレベル

    View full-size slide

  66. 91
    Google スライドのキーボード ショートカット

    View full-size slide

  67. 92
    デスクトップアプリだがたまたまウェブにある説
    ● OSごとにショートカットキーを用意している
    ● ブラウザのショートカットをも上書きしている
    ● これをやっていいのは、OSやブラウザとバッティングしても
    なおアプリ側がメリットがあるときだけ
    ● OSと地続きに感じられるように作る前提であり、
    デスクトップアプリだがたまたまウェブにあると言ったほうがいい
    ● すごい気合が必要そう。こういう案件にはまだ出会ってない
    ● やったことある人いたら教えてください

    View full-size slide

  68. 操作体系はベーシック→アドバンスドで設計
    94
    マウス
 キーボード

    ジェスチャ

    ⌘ + S
    ショートカットキー


    View full-size slide

  69. 95
    BUTTON? THAT'S IT! (White) Tシャツ

    View full-size slide

  70. 96
    http://www.outlinenone.com/ Tシャツ

    View full-size slide

  71. 98
    わたしたちなりの指針
    ● ウェブアプリで利用頻度が高いなら、学習を期待し、OSに倣うのもアリ
    ● 逆にウェブページ上のウィジェットを頑張って対応するかは微妙
    ● 見た目がタブだけど実はナビゲーションとかもある。こういうのも問題
    ● 重要なのは「一貫性」。アプリ内で同じものが同じように扱えるのが大事

    View full-size slide

  72. この掟の遵守者だけがショートカットキーを授かる
    1. 先にショートカットキーで解決しようとしない
    2. ショートカットキーは優先度をつけて厳選する
    3. ショートカットキーはオンオフ可能にする
    4. 既存のキーアサインとの衝突を避ける
    5. ショートカットキーは上書き可能にする
    6. ショートカットキーの存在を認知させる
    7. ショートカットキーは覚えられるものにする
    8. アクセスキー(accesskey)は使わない
    99
    🤯

    View full-size slide

  73. 良いショートカットキーのプラクティス
    ● 1文字または2文字のショートカットキーを使う
    ● 入力が簡単であり、一意である可能性が高く、意味を伝えられる
    ● すでに使われているケースが多く、慣例もある
    ● j, k, /, ?, ⌘ + enter あたりはかなり共通している
    ● ただし入力中に1文字・2文字ショートカットは使えないので注意
    ● 修飾キー付きはかなり慎重に。どうしてもという時だけ
    100

    View full-size slide

  74. 102
    おわりに

    View full-size slide

  75. 103
    自分も便利になり、周りも便利になり、
    アクセシブルにもなる

    View full-size slide

  76. 104
    たとえば、XD自体もキーボードで
    操作している局面は多いはず

    View full-size slide

  77. 105
    Adobe XD で使用できるショートカットキー

    View full-size slide

  78. キーボード操作のデザインが
    優れているからこそ
    思考の速さでデザインできる
    106

    View full-size slide

  79. 107
    エックスディー Tシャツ

    View full-size slide

  80. 世の中をより生産的にするために
    キーボード操作をデザインしよう
    108

    View full-size slide

  81. 109
    Thank you!
    Powered by freee AG部(toofu, ymrl, takumi, max, ouji, and more...)
    @magi1125
    #XDUFes2019

    View full-size slide

  82. 参考資料①
    110
    WCAG2.1 の該当箇所
    ● 2.1.1 キーボード
    ● 2.1.2 キーボードトラップなし
    ● 2.1.3 キーボード (例外なし)
    ● 2.1.4 文字キーのショートカット
    ● 2.4.7 フォーカスの可視化
    ● 2.4.3 フォーカス順序

    View full-size slide

  83. 参考資料②
    111
    ● UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts
    ● JavaScript のキーボードショートカットライブラリについて
    ● Are there any guidelines concerning the use of Alt, Ctrl and Shift keys?
    ● Windows デベロッパーセンター:キーボード操作
    ● Apple Human Interface Guidelines | Keyboard
    ● Guidelines for Keyboard User Interface Design
    ● Designing Better Keyboard Experiences

    View full-size slide