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

Transcript

1. キーボード操作のデザイン 2019.08.17 #XDUFes2019 @magi1125
2. 伊原 力也 • freee株式会社 UXデザイナー • HCD-Net 評議委員、認定人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員 • @magi1125 2
4. 4 Adobe Blog：伊原力也
9. 9 突撃！隣の自作キーボード
10. 10 ファミコン部、自作キーボード部 …freeeの部活制度「オフカツ！」が楽しそう
11. キーボード操作のデザイン Adobe XDではキーボード操作のプロトタイピングが可能になりました。 とはいえ、アプリやウェブページや、 さらに両者の文脈が入り交じるウェブアプリケーションにおいて、 そもそもキーボード操作をどうデザインすべきなのでしょうか。 クラウド会計ソフトであるfreeeでの経験や アクセシビリティの観点も交えつつ、検討すべきポイントをお伝えします。 （※セッション後に補足追記） 11
13. 13 キーボードとゲームパッドでプロトタイプを作成 A. トリガーをキーボードショートカットに設定
 B. キーボードショートカットキー
 C. アクションを自動アニメーションに設定
 D. 移動先アートボード

18. 18 キーボードショートカットで操作を高速化
19. 19 Ctrl ⌘ Space + + ショートカットキーをつけてみる？
20. 20 🤔 いきなりそこからでよいのでしょうか？
21. 21 キーボード操作について考える
22. 22 マウスとキーボード
23. • 画面上の任意の座標をポイント → 非連続的なアクションを実行できる • GUIの象徴 マウス 23
24. • 直線的に対象を選択していく → 連続的にアクションを実行できる • オンとオフの2値で操作でき、座標の情報が不要：アクセシブル キーボード 24
25. それぞれのアクセラレーター 25 マウス
 キーボード
 ジェスチャ
 ⌘ + S ショートカットキー

26. アクセラレーターは上級者向け • ジェスチャやショートカットキーは記憶しなければならない • 学習と引き換えに、手続きを省略できるので、高速化を生む • 手続きが省略され、操作とフィードバックのスピードがあがる • 結果としてフロー状態に入りやすくなる 26
27. もちろん組み合わせは利用は可能だが 27 マウス
 キーボード
 ジェスチャ
 ⌘ + S ショートカットキー

28. 操作体系はベーシック→アドバンスドで設計 28 マウス
 キーボード
 ジェスチャ
 ⌘ + S ショートカットキー

29. キーボード操作のデザインの段階 1. キーボードで全て操作可能にする 2. 特定ウィジェット内で最適化する 3. 特定タスクの高速化を可能にする 4. デスクトップアプリレベル 29 ⌘ + S
30. 30 1. キーボードで全て操作可能にする
32. それはアクセシビリティのため 32 • マウスが壊れても、腕をケガしても使える • 運動障害でマウスが使いにくくても対応できる • 全盲でもキーボード＋スクリーンリーダーで使える • 弱視でもキーボードの方がラクな場合は多い
33. 健常者でもキーボードの方が早いケースは多い 33 • フォームの入力と移動 • 操作対象に連続チェック • アコーディオンを開けていく • ECの決済入力、CMSの管理画面、経理業務……
34. ウェブでは簡単に実現できる 34 • a要素でリンクする ＆ 標準のフォームコントロールで実装するだけ • tab と shift + tab でフォーカスを行き来 • checkbox, select などはカーソルキーで切り替え • space で選択、enter で実行
35. 35 基本的なフォーム
36. まがい物を作ると使えなくなる 36 <span class="link">Adobe XD User Fes</span> <div class="button">次へ</div> <a class="link">懇親会について</a>
37. まがい物を作ると使えなくなる 37 • リンクやボタンを、span や div や hrefなしのa で作ってしまう • ブラウザはそれがリンクやボタンだとわからない • フォーカスがあたらないのでキーボードで操作不能になる • リンクはhref属性ありのa要素で実装する • ボタンはbutton type="button"で実装する
38. 38 div element is the final weapon - black Tシャツ
39. 39 Use button, not div Tシャツ
40. 40 BUTTON? THAT'S IT! (White) Tシャツ
41. outlineは消してはいけない 41 a { outline: none; }
42. outlineは消してはいけない 42 • a要素のいびつな形が見えるのでoutlineを消したくなったりする • リセットCSS的なものでoutlineが消えていたりする • これは、例えるならマウスカーソルを消しているのと同じ • フォーカスの場所がわからず、キーボードで操作不能になる • outline: none の指定は全消ししよう
43. 43 http://www.outlinenone.com/
44. 44 http://www.outlinenone.com/ Tシャツ
45. 45 What Input?
46. 46 Web AIM
47. 47 Focus transition
48. フォーカス順を考える 48 • 特定の行動のためにtabを何回押すことになるかを考える • ここでの操作効率が、あとで追加対応の要不要に関わってくる • 論理的な順番を検討 → その順でHTMLを書く → CSSでレイアウトする • 要素の追加削除に耐えられないので、tabindex属性での順番設定は避ける
50. freeeではどうしている？ • デザインガイドラインで「キーボードで全て操作可能」を定めている • 後述のデザインシステムでその状態を実現していこうとしている • ワイヤーフレーム段階でフォーカス順を検討している（特定機能において） 50
53. XDをどう使う？ • この段階はXDでシミュレーションするものではなさそう • 「キーボードで全て操作可能」は当たり前にやることだから • tabキー1つずつの切り替えをXDで表現するのは大変すぎるから 53
54. 54 2. 特定ウィジェット内で最適化する
55. OSのふるまいに合わせる 55 特定のウィジェットは、OSのものと挙動を合わせると操作しやすくなる • サジェスト • メニューバー • タブ • モーダルダイアログ
56. やっていること • 操作対象をグルーピングする • フォーカス範囲を制御する • グループ内をカーソルキーで行き来する • 最初と最後には home, end で飛ぶ • esc でモードを抜ける 56
57. 実例集 • WAI-ARIA Authoring Practices 1.1 • Inclusive Components • 書籍『インクルーシブHTML + CSS & JavaScript』 • 書籍『コーディングWebアクセシビリティ』 57
61. 61 ほんとうにOSに寄せるのがいいのか？ • OSのキーアサインにしたとして、ユーザーはその操作がわかるのか？ • そのウィジェットを、ユーザーはOSのものと同一と認識するか？ 🤔
62. 62 わたしたちなりの指針 • ウェブアプリで利用頻度が高いなら、学習を期待し、OSに倣うのもアリ • 逆にウェブページ上のウィジェットを頑張って対応するかは微妙 • 見た目がタブだけど実はナビゲーションとかもある。こういうのも問題 • 重要なのは「一貫性」。アプリ内で同じものが同じように扱えるのが大事
63. freeeではどうしている？ • アクセシブルなデザインシステムを開発する部署がある • デザインシステムのコンポーネントごとに操作について検討している 63
65. XDをどう使う？ • XDのシミュレーションは有効。実際の使用感を確かめられる • tab でグループに入る → カーソルキーで移動 → space で選択 → esc or tab で抜ける • これは連続して試してみないと、要不要や違和感に気づきにくい 65
66. 66 3. 特定タスクの高速化を可能にする
67. いわゆるショートカットキーの段階 67 • 先述の「キーボードで全て操作可能」「特定ウィジェット内で最適化」を 行うことで、アクセシビリティ＆ユーザビリティは飛躍的に向上する • それでもなお高速化したい反復作業があるときに導入を検討する • ただし、かなりの制約をかいくぐる必要がある、修羅の道 • 各種OSガイドラインやアクセシビリティガイドラインをまとめてみた
68. この掟の遵守者だけがショートカットキーを授かる 1. 先にショートカットキーで解決しようとしない 2. ショートカットキーは優先度をつけて厳選する 3. ショートカットキーはオンオフ可能にする 4. 既存のキーアサインとの衝突を避ける 5. ショートカットキーは上書き可能にする 6. ショートカットキーの存在を認知させる 7. ショートカットキーは覚えられるものにする 8. アクセスキー（accesskey）は使わない 68 🤯
69. 1. 先にショートカットキーで解決しようとしない • 「キーボードで全て操作可能」「特定ウィジェット内で最適化」が先 • 記憶が要らないので、上記のほうが認知負荷が低い • それをやるまえに先にショートカットでなんとかしようとしない 69
70. 2. ショートカットキーは優先度をつけて厳選する • たくさんあるとそれだけ覚えるのが大変になる • 既存キーアサインとの衝突の可能性も高まる • 本当に必要なものに絞り込むべし 70
71. 3. ショートカットキーはオンオフ可能にする • 既存キーアサインとの衝突しているかもしれない • 意図せず暴発してしまうかもしれない • なのでショートカットキー自体をオフにできるべき • （が、ちゃんと守っているサービスあんまり見かけない） 71
72. 4. 既存のキーアサインとの衝突を避ける • 複数のOS、複数のブラウザ、たくさんの支援技術、 ユーザーが入れるプラグインのキーアサインと衝突しないようにする • 衝突すると意図しない挙動になる • （検証という観点ではかなりキビしい感がある） 72
73. 5. ショートカットキーは上書き可能にする • 衝突しても、上書きできれば問題を回避できる • キー配列や利用状況はさまざま。ユーザーが最適な形に調整できるように • （が、ちゃんと守っているサービスあんまり見かけない） 73
74. 6. ショートカットキーの存在を認知させる • ショートカットキーは見た目には存在しない要素 • わからないものは使えない • メニューに併記、ツールチップ、?キーで一覧を出す、 チュートリアルなどで、その存在をユーザーに伝えるようにする 74
75. 7. ショートカットキーは覚えられるものにする • ショートカットキーには手がかりがない • 思い出せないものは使えない • ユーザーが既に知っている慣例にならったほうがよい • コマンド名の頭文字とか、意味を紐付けて覚えられるものもよい 75
76. 8. アクセスキー（accesskey）は使わない • accesskey属性というグローバル属性があり alt + 記載のキーで発動する • が、ブラウザ実装が適当なので動いたり動かなかったりする • フォーカスが移るだけの場合もあれば、即座に実行される場合もある • 動作が保証できないので、うっかり書いてしまっていたら消すこと 76
77. 問題なく守れそうなもの • 1. 先にショートカットキーで解決しようとしない • 2. ショートカットキーは優先度をつけて厳選する • 6. ショートカットキーの存在を認知させる • 7. ショートカットキーは覚えられるものにする • 8. アクセスキー（accesskey）は使わない 77 😌
78. どうしたものか……なもの • 3. ショートカットキーはオンオフ可能にする • 4. 既存のキーアサインとの衝突を避ける • 5. ショートカットキーは上書き可能にする 78 🤯
79. 良いショートカットキーのプラクティス • 1文字または2文字のショートカットキーを使う • 入力が簡単であり、一意である可能性が高く、意味を伝えられる • すでに使われているケースが多く、慣例もある • j, k, /, ?, ⌘ + enter あたりはかなり共通している • ただし入力中に1文字・2文字ショートカットは使えないので注意 • 修飾キー付きはかなり慎重に。どうしてもという時だけ 79
80. 80 Best Practices for Prototyping Keyboard Accessibility
85. 85 確かに!
86. freeeではどうしている？ • ワイヤーフレーム段階でショートカットキーを検討している（特定機能） ◦ ホームポジションの観点が独特。テンキーを前提にしている ◦ なので j, k だけでなく f, d でも操作対象を切り替えられたりする 86
89. XDをどう使う？ • XDのシミュレーションは有効。実際の使用感を確かめられる • 指の位置を考えながら、実際の反復作業を行ってみる • 無理があるキーアサインだと指が疲れたり攣ったりするので プロトタイピング重要 89
90. 90 4. デスクトップアプリレベル
91. 91 Google スライドのキーボード ショートカット
92. 92 デスクトップアプリだがたまたまウェブにある説 • OSごとにショートカットキーを用意している • ブラウザのショートカットをも上書きしている • これをやっていいのは、OSやブラウザとバッティングしても なおアプリ側がメリットがあるときだけ • OSと地続きに感じられるように作る前提であり、 デスクトップアプリだがたまたまウェブにあると言ったほうがいい • すごい気合が必要そう。こういう案件にはまだ出会ってない • やったことある人いたら教えてください
93. 93 まとめ
94. 操作体系はベーシック→アドバンスドで設計 94 マウス
 キーボード
 ジェスチャ
 ⌘ + S ショートカットキー

95. 95 BUTTON? THAT'S IT! (White) Tシャツ
96. 96 http://www.outlinenone.com/ Tシャツ
98. 98 わたしたちなりの指針 • ウェブアプリで利用頻度が高いなら、学習を期待し、OSに倣うのもアリ • 逆にウェブページ上のウィジェットを頑張って対応するかは微妙 • 見た目がタブだけど実はナビゲーションとかもある。こういうのも問題 • 重要なのは「一貫性」。アプリ内で同じものが同じように扱えるのが大事
99. この掟の遵守者だけがショートカットキーを授かる 1. 先にショートカットキーで解決しようとしない 2. ショートカットキーは優先度をつけて厳選する 3. ショートカットキーはオンオフ可能にする 4. 既存のキーアサインとの衝突を避ける 5. ショートカットキーは上書き可能にする 6. ショートカットキーの存在を認知させる 7. ショートカットキーは覚えられるものにする 8. アクセスキー（accesskey）は使わない 99 🤯
100. 良いショートカットキーのプラクティス • 1文字または2文字のショートカットキーを使う • 入力が簡単であり、一意である可能性が高く、意味を伝えられる • すでに使われているケースが多く、慣例もある • j, k, /, ?, ⌘ + enter あたりはかなり共通している • ただし入力中に1文字・2文字ショートカットは使えないので注意 • 修飾キー付きはかなり慎重に。どうしてもという時だけ 100
102. 102 おわりに
103. 103 自分も便利になり、周りも便利になり、 アクセシブルにもなる
104. 104 たとえば、XD自体もキーボードで 操作している局面は多いはず
105. 105 Adobe XD で使用できるショートカットキー
106. キーボード操作のデザインが 優れているからこそ 思考の速さでデザインできる 106
107. 107 エックスディー Tシャツ
108. 世の中をより生産的にするために キーボード操作をデザインしよう 108
109. 109 Thank you! Powered by freee AG部（toofu, ymrl, takumi, max, ouji, and more...） @magi1125 #XDUFes2019
110. 参考資料① 110 WCAG2.1 の該当箇所 • 2.1.1 キーボード • 2.1.2 キーボードトラップなし • 2.1.3 キーボード (例外なし) • 2.1.4 文字キーのショートカット • 2.4.7 フォーカスの可視化 • 2.4.3 フォーカス順序
111. 参考資料② 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