Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Apple Pencilと左利き対応

ああうえ
September 20, 2020

Apple Pencilと左利き対応

ああうえ

September 20, 2020
Tweet

More Decks by ああうえ

Other Decks in Design

Transcript

  1. Apple Pencilと左利き対応

    iOSDC Japan 2020
    2020.09.20
    pixiv.inc
    ああうえ / @_kwzr_
    2020/09/20 16:40- Track A

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 4
    利き手対応?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. • 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 full-size slide