先日、下記のプレスリリースを拝見しまして。
- スマートフォンのタップ操作成功率を算出するツール「Tappy」をリリース - LINEヤフーの研究開発
- スマホのタップ操作の成功率を算出するモデル ～ UIデザインにおけるユーザビリティの推定 - Yahoo! JAPAN Tech Blog
- Tappy - Yahoo!デベロッパーネットワーク
丁度、手元に色んなサイズのボタンを並べてクリック （タップ） のしやすさを調べてみようと作ったページがあったので、どんな感じになるかなと思って試してみました。
結果は下記 （デバイスは 「iPhone 15」（デフォルト値） を選択）。成功率表示が小さくて見にくいと思いますがご勘弁を。
テストしたページは、私が GitHub で公開しているもの （後述のリンク） で、サイズを変えたボタンを羅列して、特に小さいボタンは押しにくいよねっていうのを体感するために作ったものですが、客観的に検証する方法をどうしようかなと思っていたところに前述のリリースをみて、どういう結果が出るかなと思って試してみた次第。
概ね、体感に近い数値になっている気がします。さすがに 20px 四方よりも小さくなると、かなり押しにくさを感じますし、特にそれが並んでたりすると辛い感じになるのは想像通り。
普通のボタンで、小さいサイズのボタンってあまり意図的に作ったりはしないと思いますけども、例えばよくあるカルーセルのドット型ナビゲーションとか、操作できるようになってるけど、めちゃくちゃ小さい、みたいなことはよくありますので、気をつけたいものです。
余談ですが、テスト結果が共有しやすいように、成功率のレイヤー表示も含めて 1枚の画像としてダウンロードできるとうれしいな。
