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
   

   View Slide

2. • ああうえ / @_kwzr_
   • 仕事: pixiv Sketchの開発(←↑このアプリ→↓)
   • 個人: ポーズ検索・閲覧アプリPose Arch 1万MAU
   • 左利きの話をしますが、右利きです
   2
   自己紹介
   

   View Slide

3. • UIや、イラストを描きたくなるペンの追加、iPadのための最適化など
   • 今回は、左利き(効き手対応)についてお話しします
   3
   ←↑このドロー(お絵かき)画面→↓をリニューアル
   

   View Slide

4. 4
   利き手対応？
   

   View Slide

5. View Slide

6. 6
   ここに可愛いイラスト
   

   View Slide

7. • 通常、スマホはどちらの手でも持つ
   • iPad + Apple Pencilや、iPhoneで指で絵を描くときはほぼ必ず効き手で
   操作する
   • 左利き人口は約10%
   • → 最適なデフォルトUIを考えたい
   7
   なぜ利き手対応をするのか
   

   View Slide

8. • すべてのボタンを利き手に近い方に置く
   8
   やらない方が良いこと
   

   View Slide

9. • 左:右 = 一覧:詳細 or 過去:現在
   • ナビゲーションに関わるところは、そのままの方が良さそう
   9
   OSやアプリ上の他のUIの文脈を大切にする
   一覧 詳細 ←過去　現在→
   

   View Slide

10. • ナビゲーションに関わらないUIを反転
    • pixiv Sketchで言うと
    • 動かさない: 左上のギャラリーに戻るボタン、右上の投稿ボタン
    • 動かす: ツールバーなど
    10
    左利きUIにするには
    

    View Slide

11. • ナビゲーションに関わらないUIを反転
    • pixiv Sketchで言うと
    • 動かさない: 左上のギャラリーに戻るボタン、右上の投稿ボタン
    • 動かす: ツールバーなど
    11
    左利きUIにするには
    

    View Slide

12. • ナビゲーションに関わらないUIを反転
    • pixiv Sketchで言うと
    • 動かさない: 左上のギャラリーに戻るボタン、右上の投稿ボタン
    • 動かす: ツールバーなど
    12
    左利きUIにするには
    

    View Slide

13. • まず右利きのことを考える場合、ツールバーはどちらにあるのが良い？
    13
    ではどちらにおけば良い?
    

    View Slide

14. • まず右利きのことを考える場合、ツールバーはどちらにあるのが良い？
    14
    ではどちらにおけば良い?
    

    View Slide

15. 15
    右に置くか、左に置くか聞けば良いのでは?
    • pixiv Sketchはお絵かき初心者もターゲットにしている
    • どちらにツールバーがあれば良いか分からない
    • 利き手だったらすぐ答えられる
    

    View Slide

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/
    

    View Slide

17. 17
    HIG的には?
    • 右利きだったら手で隠れるところ(赤いところ)にUIを置くな
    

    View Slide

18. • チームメンバーの体感的に、左側ツールバーは遠い印象があった
    • (反対の指で操作すれば良いが、必ず両手を使って描くとは限らない)
    18
    ではこっち(左側)が良いのか?
    

    View Slide

19. 19
    腕の特性を考える
    • 仮説: 右利きの可動域を考えると右上や左下にあるものが操作しやすそう
    • 利き手側にツールバーがあると、操作時に絵の全体像が見えてバランスの
    チェックができるという副次的な効果
    • 右上にツールバーがあった方が良い？
    

    View Slide

20. • 左右どちらのUIが高速に間違いなく操作できるか、簡単なUIで実験
    • 画面中央から、端にある上部1/3の位置のボタンの操作時間と誤タップ回
    数を左右それぞれ記録した
    20
    計測する
    実験の概要: https://gist.github.com/kvvzr/d2c924d007efe818b977ff0e21c512fe
    

    View Slide

21. • 右ツールバーの方が操作時間が有意に速かった(p• 誤タップ回数は左右で差がなかった
    21
    実験結果
    実験の概要: https://gist.github.com/kvvzr/d2c924d007efe818b977ff0e21c512fe
    

    View Slide

22. • 腕の特性を考えると、利き手側にツールバー置きたい
    • ただし、スライダーは手に隠れてしまうのでHIGに違反してしまっている
    • 実際、手が触れてしまって誤操作が起きることがある
    • リニューアル前のUI文脈もあるので大きく変えるのは難しい
    • 展望: スライダーのみ切り離して再配置可能にする
    22
    結論
    

    View Slide

23. • ユーザーが混乱しないようにナビゲーションは固定する
    • 利き手を考慮して、手でUIが隠れるところにものを置かない
    • 再配置可能なUIにすると良い
    23
    まとめ
    

    View Slide

24. 24
    ありがとうございました！
    

    View Slide

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
    参考文献
    

    View Slide