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

by Rikiya Ihara / magi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 Adobe Blog：伊原力也

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

9 突撃！隣の自作キーボード

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

13 キーボードとゲームパッドでプロトタイプを作成 A. トリガーをキーボードショートカットに設定  B. キーボードショートカットキー  C. アクションを自動アニメーションに設定  D. 移動先アートボード 

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

22 マウスとキーボード

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

それぞれのアクセラレーター 25 マウス  キーボード  ジェスチャ  ⌘ + S ショートカットキー 

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

もちろん組み合わせは利用は可能だが 27 マウス  キーボード  ジェスチャ  ⌘ + S ショートカットキー 

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

35 基本的なフォーム

Slide 36

Slide 36 text

まがい物を作ると使えなくなる 36 Adobe XD User Fes

懇親会について

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

39 Use button, not div Tシャツ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

43 http://www.outlinenone.com/

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 What Input?

Slide 46

Slide 46 text

46 Web AIM

Slide 47

Slide 47 text

47 Focus transition

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

80 Best Practices for Prototyping Keyboard Accessibility

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Slide 85

Slide 85 text

85 確かに!

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Slide 88

Slide 88 text

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

93 まとめ

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

Slide 100

Slide 100 text

Slide 101

Slide 101 text

101

Slide 102

Slide 102 text

102 おわりに

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

参考資料② 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