UI Design Advent Calendar #9 『ターゲットサイズについて』

この記事は UI Design Advent Calendar に参加しています。

#1 『POP』

#2 『UIデザインとワーディング』

#3 『さまざまなOSのデザインガイドラインまとめ』

#4 『UIデザインについての効率良い情報収集』

#5 『AndroidデザイナーのためのiPhoneアプリ』

#6 『App Store Marketing Guidelines』

#7 『Photoshopを使ってデザインカンプからちょっと便利なアニメーションを作る』

#8 『コスパを重視した、モバイルアプリ（サイト）のデザイン制作フロー』

　　↑記事を書いてくださった方がいらっしゃいました！ありがとうございます！

========================================

UI Design Advent Calendar、9回目は「押しにくいUI」についてです。

ちなみに8回目は他の方が書いてくださったため、ひとりAdvent Calendarじゃなくなりました！もう何も怖くない…！

さて、皆さん普段アプリを使っていて「あ、このボタン押しにくいわ〜」と感じた経験があると思います。

一般的に、オブジェクトの幅、あるいはタッチ可能な範囲（タッチターゲットと言います）は

・iOSであれば44pt（Retinaで88px）

・Androidであれば48dp（xhdpiで96px、xxhdpiで144px）

あれば問題ないよーと言っています。これは成人男性の指の幅がおおむね10mmであることに関係しています。なので、それ以下のサイズのオブジェクトは押しにくいと言われています。

合わせて画面のレイアウトも関係します。NavigationBar上に60px四方のボタンが10個も横一列に並んでいたらさすがに押しにくいですよね。

こうした「押しにくい」というネガティブな感情はなるべくユーザーに持たせないのが一番ですが、時には"あえて"押しにくくするテクニックというのも存在します。

例えば、iPadアプリを作っている最中、やんごとなき理由でログアウトボタンを分割ビューのNavigationBar上に置かないといけなくなってしまった場合、

こんな感じに、あえて右側に置くことでログアウトの"誤タッチ"を防ぎます。まあタネを明かしてしまえば、ただのレイアウトのテクニックですね。

勘違いしてはいけないのは「押しにくい」ではなく「使いにくい」にならないようにすることです。上図の例では、ユーザーがログアウトしようという意思を持った場合、ちゃんと望んだ動作が問題なくできるようになっています。もしログアウトのラベルが半分近いフォントサイズであったなら、そこでつまづいてしまう可能性があります。

ちなみに、もうひとつの「押しにくさ」にボタンの高さがあります。タップされる頻度は少ないから、レイアウトに収まる高さに縮めて置いちゃおう、みたいな。

そういった場合は横幅の確保が大切です。

試しに色々な幅のボタンを作ってみました。高さはHIGで推奨されている最小タッチターゲットの44ptの半分の22pt（Retinaで44px）です。

幅は上から88px、倍の176px、240px、300pxです。240はいらなかったかも。。

実際に指を置いてみるとこんな感じ。

88pxは心許ない幅だけど、240pxまでいくと安心して押せる感じがします。

300pxでは半分近く見えているので、問題なく押せます。

まあこんな中途半端な幅で作ることは滅多にないと思いますが、端末の横幅の半分近く確保すれば大丈夫だよね、というお話しでした。

ちなみに、ど〜〜〜しても縦44px x 横88px くらいの小さなボタンを作らなくちゃいけない…となった場合ですが、これはプログラム側でタップ範囲を拡大してあげたりする必要があります。あるいは、ボタン周辺に何も置かないことで、そのボタンをタップすることに集中させる、という方法も考えてみましょう。