Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cybozu GoogleI/O 2022 LT会 - Input for all screens
Search
Jake
June 24, 2022
Programming
0
1.3k
Cybozu GoogleI/O 2022 LT会 - Input for all screens
Jake
June 24, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
ONE WEDGE_company_guide
1wedge_one
0
470
Apache Hive 4 on Treasure Data
ryukobayashi
0
270
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
2 週間で Twitter Bot を作ってみた
contour_gara
0
380
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
170
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
700
Code Reviews
bkuhlmann
4
890
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
150
"config" ってなんだ? / What is "config"?
okashoi
0
240
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
550
Snowflakeで眠ったデータを起こそう!
estie
0
120
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
For a Future-Friendly Web
brad_frost
172
9k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
A Modern Web Designer's Workflow
chriscoyier
689
190k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
GitHub's CSS Performance
jonrohan
1025
450k
The Mythical Team-Month
searls
216
42k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Transcript
Input for all screens // あらゆる画面への入力 by Jake
Keyboard Mouse Pen
Touch以外の各Inputに合わせる 適切なアクセス方法をサポートする必要
「Jetpack Compose」から 多様な入力方法を実現するかについて
None
Implement accessibility for keyboards // キーボードの入力方法を実装する時の確認事項 Keyboard
キーボードの場合、 1. ショットカットを注意 2. 可能であれば、仮装キーボードだけじゃなくて、ハードウェアーも テスト Keyboard
Jetpack ComposeのEditTextは、CopyhPasteなどの基本的 なショットカットに対応 Keyboard
しかし、Ctrl+OなどをFile Open機能に対応する必要も https://youtu.be/XtImpP23uhE?t=319 Keyboard
そして、Enterキ⑲やEscapeキ⑲がよく作動するように対応する必要も https://youtu.be/XtImpP23uhE?t=350 Keyboard
Tab、→キーで画⾯内ナビゲーションが可能なことが⼀般的 Keyboard
キーボードナビゲーションの実装のための確認事項 1. ユーザーが必要なすべての要素にアクセス可能か 2. その要素が適切な順番で並んでいるか 3. そのナビゲーションが効果的か Keyboard
テスト キーボードナビゲーションの実装のための確認事項 1. ユーザーが必要なすべての要素にアクセス可能か 2. その要素が適切な順番で並んでいるか 3. そのナビゲーションが効果的か Keyboard
Tabで移動することは以下の修正で対応可能 https://youtu.be/XtImpP23uhE?t=525 Keyboard
ComposeならfocusPropertiesを利用して https://youtu.be/XtImpP23uhE?t=534 Keyboard
Implement accessibility for mouses // マウスの入力方法を実装する時の確認事項 Mouse
マウスの場合、 ホバーステートを考えてみましょう Mouse
マウスオーバーの時、 適切なレベルで対象を強調する必要 Mouse
ホーバーステートを適切に実装 https://youtu.be/XtImpP23uhE?t=636 Mouse
Composeなら、以下のhoverable modifierを使って実装可能! https://youtu.be/XtImpP23uhE?t=650 Mouse
Implement accessibility for stylus // スタイラスペンの入力方法を実装する時の確認事項 Pen
スタイラスペンを対応する? // スクロール、クリックがよくできるかを確認 // 描く、オブジェクトの移動などの機能は対応しなくても、 タッチやドラグする⾏動と同じように実装する必要 Pen
その以外にも 1. ファイルブラウザーなどを対応する場合は、 Drag & Dropを対応する必要 2. ビデオプレイヤーなどを対応する場合は、 キーボードのMultimediaキーを対応する必要 。。。
ユーザーインプット経験はUXの直接影響を上げます。 良い品質のため、適切な対応を通じて改善しましょう!
Reference https://io.google/2022/program/a55aec14-5bda-47e0-b259-7a1f7bb366b8/intl/ja/ ありがとうございます!