个性化阅读
专注于IT技术分析

用于移动体验的电子商务UX

本文概述

“移动商务”一词是20年前由凯文·达菲(Kevin Duffey)提出的, 当时他建议移动设备可以充当客户口袋中的零售店。考虑到当时的技术局限性, 谁会想到我们有一天能够在小型袖珍设备上轻松地浏览, 查看和购买商品?

我不能高估移动技术正在改变我们与消费者互动的方式;我们必须接受这些变化。 –沃尔玛(Walmart)首席执行官乔尔·安德森(Joel Anderson)

电子商务的惊人增长也推动了移动电子商务的发展, 目前其价值已接近7, 000亿美元。移动电子商务目前是巨大的在线市场中最大的部分。上个月, 超过80%的美国人在网上购物—三年前, 这一数字仅为11.6%。

Business Insider Intelligence的一份报告建议, 到2020年, 移动商务将增长至45%。ComScore研究达成了共识, 并在2016年报告称, 与2015年相比, 通过移动设备的支出增长了44%。

移动电子商务购物方面

Statista的智能手机购物统计信息的各个方面

尽管销量很高, 但仍有超过60%的用户仍然担心在使用手机时会窃取其财务信息。尽管如此, 客户的满意度仍然很高, 亚马逊和苹果等移动零售巨头的满意度都超过80%。

移动电子商务ux应用流程

Alex Khoroshok的移动电子商务概念

移动电子商务UX成功的最佳做法

支持通过缩放和双击手势进行图像缩放

人们熟悉诸如双击和捏捏之类的手势, 以便放大移动设备上的图像。在移动电子商务可用性研究中, Baymard Institute发现, 很自然地, 购物者希望能够彻底检查产品, 并关注细节。有兴趣购买产品但无法通过放大来浏览产品的用户不喜欢购买该产品, 并且常常不愿参与销售。

移动电子商务ux产品页面

在Overstock的应用程序中放大了产品图像。

令人惊讶的是, 在50个收入最高的移动电子商务应用程序中, 有40%以上不支持缩放手势。即使提供特写图像版本的站点也经历了相似的跳出率, 这表明在移动电子商务应用程序中支持产品图像缩放手势至关重要。

考虑到移动设备的屏幕较小, 这是特定于平台的问题。支持这些功能中的至少一项功能将使一个应用程序跻身电子商务应用程序前50%的公司, 即收入最高的列表。

要考虑的几个因素:

  • 低分辨率图像相当于无缩放图像。用户有兴趣清楚地查看产品的详细信息, 因此需要高分辨率的图像。放大低质量图像的选项几乎没有用, 因为它不允许用户查看细节。
  • Baymard Institute发现, 有50%的应用程序没有向用户表明他们可以捏或双击产品图像。指示图像缩放的可用性很重要。尽管这些手势对于移动用户是众所周知的, 但仍需要证明它们是可用的。为了做到这一点, 建议使用图标或视觉表示。

为购物车提供”保存”功能

如前所述, 小尺寸的移动设备是移动电子商务的主要障碍。 Baymard Institute观察到, 超过61%的移动用户将经常使用台式机而不是手机来完成购买。

移动电子商务ux购物车保存功能

Nordstrom和Overstock应用程序中的”可保存”购物车。

“节省购物车”功能减少了购物车被遗弃的数量, 并使购物者可以保存商品以备以后购买。持久的购物车使客户可以继续购物, 而无需在退货时搜索所需的产品-55%的购物者会使用此功能。

留住这些客户的方法如下:

  1. 通过保存添加到购物车中的物品, 使购物车成为心愿单。
  2. 创建一个选项, 使购物者可以接收包含已保存项目的电子邮件。显示提醒, 他们可以使用其桌面完成购买。

使用描述性, 标签明确的表格

将最佳实践应用于移动表单是另一个考虑因素。重要的是, 电子商务应用程序或网站的用户体验设计在消除任何混乱的同时, 还应允许用户尽快完成表单。

以下是移动表格可用性的最佳做法:

  • 在表单上方放置表单标签, 以提高可读性, 易用性和清晰度。解释为什么需要某些信息会减少用户在移动设备上填写表格时的焦虑感。
  • 使文本输入与相应的键盘匹配。输入电话号码和信用卡号时显示拨号盘, 输入地址和文本时显示文本盘。这将减少用户错误并加速表单完成。
  • 限制输入字段的数量以减少输入工作量。较少的输入字段将生成较少加载的表单, 并将改善UX签出流程。
  • 完成后自动将每个字段向上移动到屏幕上。这样做不会妨碍查看不完整字段。
  • 使用步进器而不是下拉菜单来减少购物者的工作量。步进器用于增加或减少恒定值, 是一种工作速度更快, 更吸引眼球的解决方案。
移动电子商务ux注册表格

在Sears的移动应用程序中带有清晰标签的表格

提供智能的自动建议, 自动检测, 地址查找和错误

自动建议的主要目的是使用户更轻松快捷地填写表格。自动建议可预测常见的搜索查询, 并帮助购物者更轻松地找到产品。

通过使用信用卡类型自动检测, 可以进一步提高移动可用性。自动检测通过为支持的卡类型提供即时反馈来简化购买过程。尽可能多的数据输入过程的自动化(最好使用视觉效果)可改善用户体验, 并将对转换率产生积极影响。

移动电子商务ux提示搜索

在Etsy和Toys” R” Us的应用程序中进行自动提示搜索。

地址查找和验证加快了结帐过程-各种API(例如Google Places和USPS)都可以轻松实现此功能。

为错误提供内联输入验证也是移动UX设计的最佳实践。缺乏快速的性能是电子商务购物者的主要挫败感。可以通过向用户提供有关其进度的实时反馈(例如, 在结帐过程中), 特别是当他们犯了无意的错误时, 来帮助他们。这使用户可以立即纠正他们的错误, 从而以积极的方式影响可用性。

使用微交互来改善移动购物用户体验

微交互是产品界面中的细节, 旨在完成一项任务, 同时改善自然产品流程。喜欢和评级产品, 选择颜色和尺寸以及向下滑动以刷新数据都是微交互的例子。

移动电子商务ux微交互

Mykolas Puodziunas在移动电子商务中进行产品颜色选择微交互

考虑到它们的普遍性, 微交互可以构成或破坏移动电子商务应用程序的用户体验。

微交互可用于:

  • 引导用户以更直观的方式浏览应用程序;
  • 通过更顺畅, 更自然的互动, 传达更好的信任感, 减少购物者的焦虑并提高整体的心理舒适度;
  • 防止将来发生错误, 并根据用户已完成的活动向他们提供即时反馈;和/或
  • 通过响应通知来改善用户与应用程序的交互。

提供轻松的拇指交互

了解购物者握住其移动设备的最常见方式可以改善移动电子商务用户的体验和可用性。 2013年, 史蒂文·霍伯(Steven Hoober)问”用户如何真正持有移动设备?”观察了人们如何与智能手机进行交互和手持智能手机, 并注意到了三种主要的行为模式应指导移动用户体验设计。

移动电子商务ux拇指导向设计

手和拇指放在设备上的什么位置?拇指导向的UX

使界面适应人们自然使用手机的方式将增加用户的舒适度并减少购物者的焦虑感。移动设备和屏幕尺寸各不相同, 但”拇指区”(设计和用户体验的关键方面)保持不变。

围绕”拇指区域”进行设计:

  • 解决导航和探索的潜在问题
  • 通过更好地适应手势和手指伸直来改善交互
  • 通过将重要元素放置在”易于访问”区域中来更好地转换并提高可用性

面向转换的移动电子商务设计注意事项

传达移动电子商务应用程序中的安全感

安全是用户在移动设备上购物时最大的担忧之一。交流他们的交易是安全的, 可以增加购物者对商店的正面评价的价值。

通过信任徽章在移动电子商务中提供安全感

在Walmart和Walgreens的应用程序中使用信任徽章

以下是一些与用户交流安全性并减少用户焦虑的UX设计技术:

  • 使按钮标签具有暗示性, 并清楚说明购物者的去向。诸如”进行”, “安全”和”加密”之类的词会增强用户的心理舒适度。
  • 使用锁符号可以向购物者保证他们的交易是安全的。
  • 使用McAfee Secure和Norton等安全提供商的信任徽章。这有助于用户对网站产生积极的印象(Baymard Institute研究)。
  • 在设计中运用色彩心理学原理, 以更好地了解购物者的信任感。其中一些原则包括面向受众和针对特定性别的颜色。
移动电子商务ux提示按钮设计

戴尔应用程序中的提示按钮设计

优先搜索(并保持搜索优先)

购物者使用移动电子商务网站或应用来浏览产品或购买特定产品;因此, 精心设计的搜索对于移动电子商务应用程序至关重要。 eBay认为其网站搜索是移动购物者最重要的功能之一, 并通过将其放置在界面的中央和折叠上方来强调它。

移动电子商务搜索

搜索American Eagle Outfitters和L.L.Bean的移动应用程序

移动搜索的重要注意事项:

  • 确保它是可见的!保持搜索栏易于访问且在折叠上方, 使购物者可以轻松地搜索商品。
  • 通过使用从常见搜索模式获取的数据来进行预搜索, 并在搜索结果页面上显示相关产品。
  • 提供高级筛选选项, 使客户可以轻松快捷地找到所需的产品。

显示搜索表单时要考虑的重要方面是, 它们仅在用户与应用程序交互的第一阶段才有价值。用户通常在购物旅程的开始时就搜索应用程序, 并且在旅程的后期显示搜索表单时可能会损坏UX。

例如, 在结帐过程中, 搜索不再有用, 只会分散注意力, 因为它可能会使用户失去注意力并放弃对购买的承诺。

提供顺畅, 便捷的结帐

研究表明, 结帐流程是在线完成购买过程中压力最大的部分。 Baymard Institute报告放弃购物车的比率为35%, 因为需要在购买前创建一个帐户。为了降低购物车放弃率, 设计一个简单, 快速的结帐流程非常重要, 该流程不会要求购物者先注册。

移动电子商务ux结帐流程

Etsy和Ann Taylor的移动应用程序中的结帐流程

可用性研究发现, 超过60%的用户难以找到访客结帐选项;因此, 访客结帐选项必须清晰可见并且易于访问。

移动电子商务ux结帐流程

移动电子商务结帐流程动画线框, 迈克尔·庞斯(Michael Pons)

以下是一些改进电子商务结帐流程的建议:

  • 为了提高用户的参与度, 请对结帐过程的每个步骤进行编号并显示当前活动的步骤, 以对其进行标记。
  • 使用进度条之类的视觉表示来显示结帐过程中的前进进度。
  • 提供在结帐过程中进行注册和登录的选项, 但可以选择。
  • 为了减少焦虑和跳出率, 建议用户如果已经以访客身份退房, 请在退房后登录或注册。
  • 应用渐进式披露技术来提高用户关注度, 并将内容加载速度提高30%。

简介:成功的移动电子商务设计有哪些主要特征?

  • 提供快速简便的注册和结帐流程
  • 通过显示适当的图标, 徽章, 评论和推荐来灌输安全感和信任感
  • 提供围绕拇指友好区域设计的交互
  • 使用一致且简洁的导航
  • 结合了快速搜索和轻松过滤产品的功能
  • 了解用户压力, 焦虑和移动应用转化率之间的直接联系
  • 提供移动网站的快速加载, 响应式体验
  • 支持产品图像缩放手势

移动电子商务领域只会变得越来越大

移动电子商务趋势表明, 移动电子商务市场呈指数增长, 行业的增长为卖方创造了许多利益。但是, 随之而来的是移动电子商务设计的许多最佳实践和标准, 卖家要想成功就必须遵循这些最佳实践和标准。

移动电子商务ux购物体验

Vitaly Rubtsov的服装店应用程序

购物者期望一个移动应用程序运行良好, 外观漂亮并适应他们的行为。尽管每个应用程序都有其自身的局限性和目标, 但遵循本文概述的基本原理将有助于创建成功的移动电子商务应用程序。

下载移动电子商务UX改进备忘单

• • •

在srcmini设计博客上进一步阅读:

  • 电子商务的显着趋势及其对设计的影响(含信息图)
  • 电子商务UX –最佳做法概述(带有信息图)
  • 电子商务UX –基本设计策略和原则
  • 电子商务网站设计终极指南
  • 重新设计了电子商务:微小的变化如何使用户体验得到重大改善
赞(0)
未经允许不得转载:srcmini » 用于移动体验的电子商务UX

评论 抢沙发

评论前必须登录!