Apple Pencilと左利き対応

https://fortee.jp/iosdc-japan-2020/proposal/63603b0f-3052-4844-a9b2-06d9f36f726a

実験リンク: https://gist.github.com/kvvzr/d2c924d007efe818b977ff0e21c512fe
参考文献:
- Human Interface Guidelines
- https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/apple-pencil-and-scribble/
- UI考：ユーザーインターフェイスと左右の文化
- https://medium.com/@usagimaru/ui%E8%80%83-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9%E3%81%A8%E5%B7%A6%E5%8F%B3%E3%81%AE%E6%96%87%E5%8C%96-%E5%89%8D%E7%B7%A8-c4c5705421c8
- https://medium.com/@usagimaru/ui%E8%80%83-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9%E3%81%A8%E5%B7%A6%E5%8F%B3%E3%81%AE%E6%96%87%E5%8C%96-%E5%BE%8C%E7%B7%A8-87e1827f335a

Transcript

1. Apple Pencilと左利き対応  iOSDC Japan 2020 2020.09.20 pixiv.inc ああうえ / @_kwzr_ 2020/09/20 16:40- Track A
2. • ああうえ / @_kwzr_ • 仕事: pixiv Sketchの開発(←↑このアプリ→↓) • 個人: ポーズ検索・閲覧アプリPose Arch 1万MAU • 左利きの話をしますが、右利きです 2 自己紹介
3. • UIや、イラストを描きたくなるペンの追加、iPadのための最適化など • 今回は、左利き(効き手対応)についてお話しします 3 ←↑このドロー(お絵かき)画面→↓をリニューアル
4. 4 利き手対応？
6. 6 ここに可愛いイラスト
7. • 通常、スマホはどちらの手でも持つ • iPad + Apple Pencilや、iPhoneで指で絵を描くときはほぼ必ず効き手で 操作する • 左利き人口は約10% • → 最適なデフォルトUIを考えたい 7 なぜ利き手対応をするのか
8. • すべてのボタンを利き手に近い方に置く 8 やらない方が良いこと
9. • 左:右 = 一覧:詳細 or 過去:現在 • ナビゲーションに関わるところは、そのままの方が良さそう 9 OSやアプリ上の他のUIの文脈を大切にする 一覧 詳細 ←過去　現在→
10. • ナビゲーションに関わらないUIを反転 • pixiv Sketchで言うと • 動かさない: 左上のギャラリーに戻るボタン、右上の投稿ボタン • 動かす: ツールバーなど 10 左利きUIにするには
11. • ナビゲーションに関わらないUIを反転 • pixiv Sketchで言うと • 動かさない: 左上のギャラリーに戻るボタン、右上の投稿ボタン • 動かす: ツールバーなど 11 左利きUIにするには
12. • ナビゲーションに関わらないUIを反転 • pixiv Sketchで言うと • 動かさない: 左上のギャラリーに戻るボタン、右上の投稿ボタン • 動かす: ツールバーなど 12 左利きUIにするには
13. • まず右利きのことを考える場合、ツールバーはどちらにあるのが良い？ 13 ではどちらにおけば良い?
14. • まず右利きのことを考える場合、ツールバーはどちらにあるのが良い？ 14 ではどちらにおけば良い?
15. 15 右に置くか、左に置くか聞けば良いのでは? • pixiv Sketchはお絵かき初心者もターゲットにしている • どちらにツールバーがあれば良いか分からない • 利き手だったらすぐ答えられる
16. 16 HIG的には? • Design a great left- and right-handed experience. • 手で隠れるところにUIを置かない • 隠れる場合は再配置できるようにしよう • 例: PKToolPicker, Scribble https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/apple-pencil-and-scribble/
17. 17 HIG的には? • 右利きだったら手で隠れるところ(赤いところ)にUIを置くな
18. • チームメンバーの体感的に、左側ツールバーは遠い印象があった • (反対の指で操作すれば良いが、必ず両手を使って描くとは限らない) 18 ではこっち(左側)が良いのか?
19. 19 腕の特性を考える • 仮説: 右利きの可動域を考えると右上や左下にあるものが操作しやすそう • 利き手側にツールバーがあると、操作時に絵の全体像が見えてバランスの チェックができるという副次的な効果 • 右上にツールバーがあった方が良い？
20. • 左右どちらのUIが高速に間違いなく操作できるか、簡単なUIで実験 • 画面中央から、端にある上部1/3の位置のボタンの操作時間と誤タップ回 数を左右それぞれ記録した 20 計測する 実験の概要: https://gist.github.com/kvvzr/d2c924d007efe818b977ff0e21c512fe
21. • 右ツールバーの方が操作時間が有意に速かった(p<.01) • 誤タップ回数は左右で差がなかった 21 実験結果 実験の概要: https://gist.github.com/kvvzr/d2c924d007efe818b977ff0e21c512fe
22. • 腕の特性を考えると、利き手側にツールバー置きたい • ただし、スライダーは手に隠れてしまうのでHIGに違反してしまっている • 実際、手が触れてしまって誤操作が起きることがある • リニューアル前のUI文脈もあるので大きく変えるのは難しい • 展望: スライダーのみ切り離して再配置可能にする 22 結論
23. • ユーザーが混乱しないようにナビゲーションは固定する • 利き手を考慮して、手でUIが隠れるところにものを置かない • 再配置可能なUIにすると良い 23 まとめ
24. 24 ありがとうございました！
25. • Human Interface Guidelines • https://developer.apple.com/design/human-interface-guidelines/ • UI考：ユーザーインターフェイスと左右の文化 • https://medium.com/@usagimaru/ui%E8%80%83- %E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9%E3 %81%A8%E5%B7%A6%E5%8F%B3%E3%81%AE%E6%96%87%E5%8C%96-%E5%89%8D%E7%B7%A8-c4c5705421c8 • https://medium.com/@usagimaru/ui%E8%80%83- %E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9%E3 %81%A8%E5%B7%A6%E5%8F%B3%E3%81%AE%E6%96%87%E5%8C%96-%E5%BE%8C%E7%B7%A8-87e1827f335a 25 参考文献