电商应用界面中的5个降低购买转化率的错误

基里尔·舍尔斯托比托夫，Fastuna 产品经理，Tiburon Research

三分之二的俄罗斯人在网购时更倾向于使用移动应用程序。任何购物流程中的卡顿都会降低购买概率。在大规模流量下，界面问题会导致显著损失。
分析五个常见的应用程序和移动网站问题。为进行说明，我们采用首次点击测试方法对主流零售商的界面进行了测试，重点聚焦于商品搜索环节。
方法论：无主持的UI测试，使用Fastuna Where to Click解决方案。Fastuna Where to Click测试共有200名来自俄罗斯各地的18至60岁男女参与。样本在地理分布、性别和年龄结构上均与人口普查数据相符。参与者使用智能手机按随机顺序完成各项任务。每项任务中，每人仅点击屏幕一次。平台自动将所有点击数据汇总生成热力图。

模糊的可点击区域

在桌面端界面中，当鼠标悬停在交互对象上时，这些对象会改变颜色或以其他方式提示其状态。而在移动网站和应用中，提示功能受到限制，因此需要更直观的界面设计。
例如，在 DNS 中很难从搜索结果页进入商品详情页。只有直接点击商品名称才能进入；点击商品图片时，打开的不是商品页面，而是商品外观的预览图。商品详情页中的几乎所有其他区域都不可点击。为了进入商品详情页，65% 的用户点击了商品名称，18% 的用户点击了商品图片。
任务：您对这款智能手机感兴趣。您会点击哪里以了解更多详情？
一种被广泛采用的方法是，将商品卡片作为一个整体呈现，并链接至该商品的详情页。例如，在迪卡侬（Decathlon）中，每张缩略商品卡片都通过视觉设计进行了突出处理，从而降低了用户误解的可能性。在此场景下，正确点击率高达82%。
任务：在商品中，您对帐篷产生了兴趣。您会点击哪里以了解更多详情？

预览时商品属性显示不清晰

移动界面迫使用户进行优先级排序，舍弃次要内容。在预览模式下，往往需要牺牲关于可用尺寸和颜色的信息。
H&M 巧妙地化解了当前局面。为了标示可选颜色，他们在商品卡片下方使用了小圆点。在任务中，我们要求参与者选择最便宜的黑色床单。这些颜色标记与界面和谐融合，但不到30%的受访者注意到并正确理解了其含义。
任务：在商品中找到最便宜的黑色床单。
Bellroy 在预览图中使用了更明显的颜色标记。在此项任务中，寻找最便宜的绿色背包的任务，已有近一半的受访者成功完成。
任务：在商品中找到最便宜的绿色背包。
在移动网站和服装、鞋类商店的应用程序中，不同的颜色选项通常作为独立商品展示。同时，用户可以在页面内更改产品的颜色。

非直观排序与筛选

商品分类的需求源于人类在搜索过程中的自然愿望。该功能越容易被找到，效果就越好。因此，不建议在此处使用符号和标记。
例如，Kari 使用带有指向不同方向的箭头示意图的按钮进行排序，只有 35% 的受访者正确识别了其功能。
任务：点击哪里可以按价格对商品进行排序？
H&M 将选项放置得尽可能显眼，因此获得了显著更高的正确点击率。
任务：点击哪里可以按价格升序排列商品？

小而不明确的按压区域

尽管多年来一直在练习使用智能手机，但人们用手指操作远不如用电脑鼠标那样娴熟。应用开发者往往高估了点击的精确度，而很少考虑用户的生理限制。
在迪卡侬应用中，向订单添加新商品时，需要极其精准地点击微小的“加号”按钮。如果误差达到一毫米，用户不仅无法将另一件商品加入订单，反而会被跳转到商品详情页。也就是说，这里还存在可点击区域冲突的问题。
根据考虑热区效应的测试结果，在64%的正确点击中，仅约一半的按压操作能成功达成目标；另一半用户则可能因误触而意外中断订单流程。
任务：您正在应用中完成购买，但想购买两件商品而非一件。您会点击哪里以在订单中添加另一件完全相同的商品？

缺乏关于当前位置的提示

在界面中导航时，用户有时会发现自己不在预期的位置，感到迷失。必须为这类情况提供出口。最佳做法是使用导航链（如重复菜单或面包屑导航，英文 Breadcrumbs）。
在移动界面环境下，导航链的作用比在桌面端更为重要。它使用户能够返回到搜索的特定阶段，而无需从头开始。
DNS 曾尝试实现面包屑导航原则，但由于设计特点，导航链失去了目录浏览路径的形态，更像是一个商品属性列表。
任务：假设您正在选购 iPhone。您在网站上浏览了多款手机后感到困惑。您会点击哪里以重新开始搜索？
在任务中，我们设定用户正在寻找 iPhone 并希望重新开始搜索。仅有 19% 的用户使用了导航链以更快地回到所需的搜索阶段。38% 的受访者通过不同途径跳转至商品总目录，从而将用户操作流程延长了数步。

结论

1. 遵循透明性原则。用户应清楚每次点击后的结果，视觉上需突出可点击区域。
2. 将所有商品属性压缩在预览中十分困难，任何妥协都可能导致错误。如果商品仅提供两三种颜色选项，则在列表中单独展示这些变体更为简便。
3. 若希望用户使用某项功能，需用文字明确标注，避免使用含义不明确、非所有人都能理解的符号。
4. 包容用户的点击误差。扩大可点击区域，但需避免区域间的冲突。
5. 为便于定位，在界面中使用导航链，但需确保其功能对用户而言清晰易懂。
6. 类似首次点击测试的简单研究，有助于检验界面的直觉性和易用性。
结果：带有交互式热力图的研究。

基里尔·舍尔斯托比托夫，
Fastuna和Tiburon Research的产品经理。

针对新零售