一位做劳保用品的老板找我诊断网站,说他总觉得手机端询盘少。我拿手机走了一遍流程,找到询盘按钮点了四次才点中——那个按钮实际可点区域比看起来还小,旁边紧挨着一个语言切换按钮,手指稍微偏一点就跳到英文站。他看完演示才反应过来:原来不是客户不想问,是客户点不到。
手指和鼠标不是一个精度
鼠标指针可以精确到一个像素,手指头做不到。成年人的指腹点击落在屏幕上平均有七八毫米宽,换算下来四十四像素左右,这是行业公认的触控目标下限。低于这个尺寸,误触和放弃都会明显上升。做响应式网站设计,视觉上按钮可以小巧精致,但真正接收点击的热区必须撑够,这是给手指留的余地,也是给转化留的余地。别小看这几毫米的差距,每天几百次点击里,丢掉的就是实打实的询单。
三个最常见的踩坑点
- 间距不足:按钮之间不留缝,点询价误触收藏,客户的心思全花在对准上,耐心耗光就走,误触的代价不止是点错,是客户对你网站整体的不信任;
- 热区小于视觉:图标看着不小,可点的只有中间那几像素,典型的是分享小图标和列表右侧的箭头;
- 位置放在拇指死角:手机单手操作时,屏幕左上角最难够,关键按钮偏偏爱放那里。
修复思路并不复杂:热区不足的,用透明区域把可点范围撑到四十四像素以上,外观可以不变;密集排布的按钮组,间距至少留八像素;核心行动按钮挪到屏幕下缘的拇指热区,单手也能轻松够到。这三个改动加起来通常一两天工作量,对询盘的提升却常常立竿见影。
自查就用拇指测试
单手持机,拇指从头到尾走一遍核心流程:进站、找产品、看详情、发询盘。凡是需要另一只手来帮忙对准的按钮,都算不合格;凡是点错一次以上的位置,记下来。十分钟测完,问题清单基本齐了。有条件的话再找位手大的同事和一位手小的同事各测一遍,覆盖面更全。测完别急着改,先把问题按位置归类,同类问题一次修完,效率最高。
建议把拇指测试纳入每次改版的固定动作,成本几乎为零。新站验收时,专门盯着按钮的点击体验过一遍,别只看效果稿。比格网络做响应式网站设计,触控目标尺寸是交付自检的固定项——转化这件事,成也细节,败也细节,按钮就是离订单最近的一个细节。把这个细节抠到位,其他的优化才有意义,否则流量来了也是白来。