赞助商
立即赞助

想提高电商界面设计的转化率?总监提炼这10个关键要点

电商设计3年前 (2021)发布 流光
2.8K 0 0

海参君注:本文译自 Julia Dzyubina 的 Designing better product pages。作者为用户体验设计公司 Clay 的艺术总监。作者在文中分享了在设计服装类电商产品页时的一些经验以及行业趋势。希望对您有所启发。

适合读者:中级界面设计师、中级交互设计师、服装类电商产品经理

阅读难度:☆☆

产品页面是电子商务网站的核心。这是大多数用户决定是否购买产品的地方,因此应该格外注意。我希望我的见解能帮助您设计更好的用户体验。

采用生活化的照片,而不是单一的产品图片

尽管商品图片大多保存在客户端,但作为设计师,您仍然可以引入完整的概念并影响客户的产品展示策略。

如今的品牌不仅销售产品,还销售生活方式。这就是为什么 Instagram 上的销售额在增加,每个大品牌都有一个提供给顾客购物的社交账户。

从图获灵。穿身易。

如果您为单一品牌商店进行设计,请考虑上下文、现实生活动态中的因素和情感因素,以便在客户、品牌和整个社区之间建立更牢固的关系。注意Mango&Urban Outfitters 是如何用一张现实生活中的服装照片来补充他们的真实镜头的,照片上展示了所选的产品。

想提高电商界面设计的转化率?总监提炼这10个关键要点

77% 者决,愿顾照,照。

Smart Insight 研究显示,77% 者决,愿顾照,照。顾照、赖,易认。

Baymard 研究所建议允许用户将自己的图片上传到该网站。这可能会导致与时尚博客、杂志 和零售商建立互惠互利的伙伴关系。例如,Made.com 允许用户在 Instagram 帖子中标记他们自己的照片,以便在他们的网站上推荐。

想提高电商界面设计的转化率?总监提炼这10个关键要点

由于社会化、全球化、多元化庆祝、风格差异、反讽、开放、透明是西方社会日益增长的价值观,我相信即使是奢侈品牌也会从严肃和疏远,转向与顾客进行更加生动的对话。看看 Balenciaga 和 Vetements 最近发布的这些帖子就知道了。

想提高电商界面设计的转化率?总监提炼这10个关键要点

尊重行业标准

,请确考虑已立界模。

产品页面平均分为两栏:左边是照片,右边是产品信息和操作。用户已经熟悉了这种布局,如果使用它,用户就不需要学习新的 UI,将注转。

想提高电商界面设计的转化率?总监提炼这10个关键要点

△ COS  Farfetch 详页

坚持双重布局并不意味着所有产品页面看起来都应该是一样的。在这些限制范围内,仍有创造的空间。例如,Rick Owens 网站利用整个浏览器窗口来展示产品,他们打破了传统的布局,并带来了独特的风格和新鲜感。

想提高电商界面设计的转化率?总监提炼这10个关键要点

允许购买套装

允许顾套,并相似或互补。从套获灵,验键。

想提高电商界面设计的转化率?总监提炼这10个关键要点

充分介绍产品

除了使用生活化的产品图片外,还应该介绍产品的精华,这意味着准确、全面地展示其特性,以及帮助客户想象产品。

贴士,帮图变:

  • 在隐形人体模特和模特上展示产品。
  • 尽供模尺寸尺寸。
  • 捕捉特写细节:衬里、缝合、面料、标签、拉链、纽扣。
  • 拍摄一段视频:观看动态的产品有助于更好地想象它。
  • 用同样的风格处理产品图片。确保您的产品都是相同大小的,并且在每个图片中居中位置相同。图片应具有相同的缩放比例、Y 位置、清晰度、白平衡设置等。
  • 如果产品(如外套)有拉链或按钮,则应该展示其打开和关闭的状态。
  • 按例展示。尺寸例初并显,请已尺寸参照照,例箱、,应该至照。
  • 同时显示更多不同角度的照片。在类似 ASOS 这样的网站上,用户在能看到产品背面时还能想到产品正面的样子,反之亦然。这使得客户评估和想象的过程变得更加困难、漫长和繁琐。

想提高电商界面设计的转化率?总监提炼这10个关键要点

Farfetch 同时显示两张图片。Mango 做得更好,去掉了图片轮播,并将图片用网格展示。

想提高电商界面设计的转化率?总监提炼这10个关键要点

提供方便的图片缩放功能。缩放照片是一种缺乏一致性的交互,因为所有网站的操作方式都不同。无论您选择哪种缩放机制,都要确保您的界面指示其行为方式。图片缩放使用自定义光标形状。

不要使用图片轮播

图片轮播不起作用,实际上没有人点击它们。

大量研究表明,图片轮播不起作用,实际上没有人点击它们。尽管它们指的是促销时的图片轮播,但其中的缺点对于产品图片的轮播也同样适用:

  • 图片轮播一次只显示 1-2 张照片。
  • 要求用户准确地用鼠标点击一个很小的轮播控件。
  • 不能在「自动切换」上点击,并且每次点击都会将注意力从产品转移到导航上。

越来越多的先进品牌的网站正在转向宽敞的布局,大图片占据了整个页面的左侧。用户通过滚动在它们之间导航,这几乎可以自动执行,并且不需要关注导航本身的过程。

虽然图片轮播消失了,但两列布局仍然存在。有时,右侧固定在屏幕上,而包含照片的左侧则以通常的方式滚动。

想提高电商界面设计的转化率?总监提炼这10个关键要点

Acne Studios, Ambush 和其他一些品牌会在页面上放置大图,让客户无需额外点击就可以近距离查看产品。全尺寸图片通常与浏览器高度不能适配,用户必须向下滚动才能看到图片的其余部分。我觉得这种方法有点把重点推向了错误的方向,因为更重要的是理解产品,想象产品的效果并做出决定,而不是查看特写细节,这通常是用户确定对产品感兴趣后评估的第二步。

想提高电商界面设计的转化率?总监提炼这10个关键要点

不要截断视觉动线

如果视觉动线在缩略图部分被截断,50-80% 的用户根本看不到图片。

Baymard 的研究表明,由于节省空间的原因,如果视觉动线在缩略图部分被截断,50-80% 的用户根本看不到图片。

想提高电商界面设计的转化率?总监提炼这10个关键要点

设计一个所有照片的视觉动线最初都可见的布局,它们不仅可以帮助用户快速看到所需的角度或特写,还可以快速直观地导航至所需的图片。

优先为极端情况设计

因为它们在电子商务中并不罕见。

总有将产品信息设计得超级简约和干净的诱惑,让产品成为王。但事实是,用户确实需要很多细节来决定,商店通常想激起购物者的兴趣。

所以在此之前,想象一下产品正在打折或有特价优惠。您可以有一个销售计时器,「售罄」或「低库存」标签,或显示该产品的库存只有 M 大小。长的产品名称、品牌名称、ID、增值税包含和店内供应信息需要出现在最初的页面上。我们不能仅仅为了让界面看起来简洁,而将它们折叠在「更多信息▾」下。

您已流畅简洁模,将素组痛苦,它变混乱。删除添易,「」,确它读协。素数均素。改变,使页「跳转」,将户空习惯。

想提高电商界面设计的转化率?总监提炼这10个关键要点

描述产品及其获取方式

将产品信息正确分组,并考虑哪些附加信息可能会有帮助:

  • 在尺寸选择器附近显示尺寸指南链接。
  • 在模型照片附近显示模型尺寸。
  • 将转换模/测。
  • 在成分附近显示保养说明。
  • 允许通知缺货的尺码。
  • 立即显示运费。Baymard 的研究表明,64% 的用户会立即在产品页面上查找运费,其中 24% 的用户声称因为找不到运费而跳过了购买。这对于国际订单来说尤其重要,因为运费有时会比商品本身的价格高出一倍(我的生活故事)。

想提高电商界面设计的转化率?总监提炼这10个关键要点

为了让您的页面保持流畅和简约,遵循渐进式展示信息的方法:不要一开始就用大量的信息淹没客户。允许用户随心所欲地深入了解细节。如果您使用可折叠/可展开的列表或选项卡,您可以容纳大量信息。但请记住,要使其易于发现和使用描述性名称:「成分和保养」比「更多信息」的信息量大得多。

充满礼貌,热心帮助

用户体验设计的礼貌和关心意味着你预见到用户可能面临的任何困难和问题,并试图避免或防止它们。你应该想象可能出现的问题,并提前提供全面的信息。

UX 对用户的行为作出响应,并向他们提供明确的视觉反馈,特别是对那些对显示内容没有明显影响的行为,比如将产品添加到愿望清单或购物车中。

UI 的表达被许多设计师所低估,他们大多专注于通过各种装饰设计方法来表现品牌形象或展示产品。大胆的设计和精美的图片会激起人们的兴趣、欲望和其他情绪,而贴心的 UI 会与你的网站建立一种充满爱心和信任的关系,并促使用户回访。

这里有一些关于如何让 UI 成为一个「用户的好朋友」的小贴士:

  • 确保可以轻松发现联系和帮助链接。
  • 请随时复制有用的信息。您可以将有关发货和退货的信息放在每个产品页面和整个结账流程中,这样,无论何时用户需要这些信息,他都不必费力地阅读常见问题解答(FAQ)。
  •  ID 应支持需求。
  • 当用户实际上从未犯过任何错误时,不要责备他。例如,如果用户试图在没有选择尺寸的情况下将产品添加到购物车中,请使用动画或工具提示将他的注意力转移到缺少的选择上,但避免使用红色、所有大写字母、警告标志、声音或与错误相关的动画。
  • 添加「添加购物车、愿望列表和登录」的视觉反馈。根据 NNGroup 的研究,这比乍一看要重要得多。

允许跨设备同步

37% 的用户在移动设备上进行搜索,但会切换到桌面端来完成购买。

根据 Appsee 的数据,37% 的用户在移动设备上进行搜索,但会切换到桌面端来完成购买,因此请确保您:

  • 建议他们登录以同步他们购物车和愿望清单。重要的是要告诉用户他将如何从注册中获益。同步是注册的强烈动机,因为它提供了更无缝的购物体验。
  • 确保共享选项易于找到,并允许共享物品和整个购物车。

欢迎关注译者的微信公众号:「海外设计参考」

想提高电商界面设计的转化率?总监提炼这10个关键要点

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

数据指标是什么?——是一个切入数据的角度。有了数据指标的存在,才能知道需要采集什么数据、需要持续监测什么数据、用什么角...
数据分析
编者按:随着亚马逊、小米、阿里巴巴等大公司都推出了智能语音产品,如何为这类以语音交互为核心的智能产品做设计也成了一个...
交互设计
之前一直觉得色彩,图形,字体是 UI设计的三大构成,任何设计都是从这三大元素开始的,所有的 UI设计都是由这些构成的,但是...
界面设计
@苏大牙牙牙 :说到腾讯,大多数设计师对他们的体验设计,还是比较认可的。那么,腾讯的设计到底好在哪呢?体量这么大的公司...
App设计
如果有一家公司是无缝客户体验的代名词,那就是奈飞。它已成为许多人的最主要的娱乐来源,以至于全球 15% 的网络流量都流向...
Netflix
假如你想给 iPad 设计一个鼠标的光标,你会怎么做? 没问题,你也许会说,不就是给 iPad 加个鼠标的光标吗,这没什么难的。...
iPad
关于体验度量方法行业内案例已有一些,但普遍为较为全局,实施与结果输出成本相对较高,对一些小团队可能运用起来比较困难。...
体验度量
一、功能逻辑梳理 在做框架设计与加减乘除合并同类项之前,梳理业务与产品逻辑对于复杂的流程界面来说是至关重要的。 我们举...
App设计