ぶろよりぶろ読者になるよりぶろアプリのUIとかについて書いてく予定この広告は、90日以上更新していないブログに表示しています。Calendar、9回目は「押しにくいUI」についてです。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では半分近く見えているので、問題なく押せます。こんな中途半端な幅で作ることは滅多にないと思いますが、端末の横幅の半分近く確保すれば大丈夫だよね、というお話しでした。小さなボタンを作らなくちゃいけない...となった場合ですが、これはプログラム側でタップ範囲を拡大してあげたりする必要があります。ボタン周辺に何も置かないことで、そのボタンをタップすることに集中させる、という方法も考えてみましょう。2014に参加しています。