作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
李烨的头像

Yej李

Yej是一名屡获殊荣的应用程序设计师,拥有跨iOS的多平台经验, 安卓, 穿戴。, 反应网络, 和更多.

以前在

词典
分享

2018年,美国电商销售额继续创新高. 在全球范围内,电子商务将继续稳步增长,达到2美元.3万亿年. 但是是什么让一个电子商务网页设计胜过另一个呢?

有几个因素决定了电子商务网站的整体成功,包括产品质量, 品牌认知度, 运输成本, 退货政策, 诚信, 以及客户服务. 然而,深思熟虑的 用户体验设计 这也是为客户提供满意、无摩擦体验的关键吗. 它不仅会将潜在的点击转化为实际的电子商务交易,还会让客户一次又一次地回来.

这里是一个全面的电子商务网站设计指南,创建伟大的电子商务网站, 附有示例.

为信任和安全设计电子商务

首先,重要的是设计一个顾客觉得他们可以信任的网站. 大多数购物者担心隐私问题,以及该网站是否会通过提供安全交易来保护他们的个人数据. 如果网站不值得信赖,他们就会选择去其他地方购物.

ASOS电子商务网站设计提供了良好的电子商务用户体验

以下是一些传达可信度的方法:

  • 包括对业务的概述:

    • 提供一般信息
    • 企业背后的人的照片
    • 联系信息
    • 社交媒体链接
    • 常见问题(常见问题解答)页面
  • 发布商店政策,并确保它们不会太难找到:

    • 运输和退货政策
    • 概述退货流程和哪些产品可以退货
    • 提供易于访问的隐私政策,包括购物者的个人和财务信息(这是至关重要的)

用通俗易懂的语言写作,避免法律或内部政策术语.

  • 分享产品评论. Provide product reviews to help shoppers underst和更多 关于产品; this will help alleviate any concerns they may have and provide great e-commerce UX. 更进一步,提供产品评论以及评论者的附加信息, 或者通过总结评论. 这一步可以帮助购物者更容易地充分利用他人的意见.
  • 使用安全的服务器. 购物者希望他们的个人信息在网上购物时是安全的. SSL (安全套接字层)证书验证网站的身份,并加密需要保持安全的信息. 这是表明结帐是安全的重要标志. 通过实现SSL和显示SSL证书徽章,确保购物者的数据受到保护.

电子商务信托章

  • 添加认可 信任海豹. 信任印章验证网站的合法性和安全性. 如果交易被证明是欺诈性的,一些信托公司甚至通过提供一些保险来增加额外的一层保护. 使用公认的信任印章可以确保潜在客户的交易过程是安全的, 这就导致 增加销售 并提供更好的电子商务用户体验.
  • 注重细节. 避免拼写错误,使网站看起来合法和专业, 缺失的图片, 失效链接, 404错误(未找到页面), 或其他电子商务用户流失错误.

电子商务网站设计注意事项

网站的外观和感觉是第一印象的主要驱动力. 研究 结论是人们会在50毫秒内决定他们是否喜欢一个网站.

以下是一些重要的电子商务设计技巧:

  • 遵循品牌标识. 品牌应该在整个网站中都很明显. 选择反映品牌的颜色, 并设定风格,以便明确销售什么类型的产品. 确保品牌体验在所有渠道——无论是在线渠道——保持一致, 店内, 或者在移动设备上. 这将有助于建立一个强大的品牌-客户关系.
  • 采用视觉层次. 最重要的内容应该显示在页面上方. 在某些情况下, 使用更少的留白来拉近条目之间的距离比将关键内容放在页面下方要好.
  • 不要过度设计. 限制字体格式,如字体面、大小和颜色. 当文字看起来太像图形时,就会被误认为是广告. 使用高对比度的文本和背景颜色,使内容尽可能清晰.
  • 坚持使用已知的符号. 使用易于识别的图标或符号. 不熟悉的图标只会让购物者感到困惑. 避免混淆的一个好方法是为图标提供标签.
  • 避免弹出窗口. 弹出式窗口会让人分心. 即使它们包含有价值的信息, 消费者很有可能在他们离开后立即将其抛弃, 即使他们想这么做, 消费者很难再次找到这些信息.

电子商务网站设计指南:美观的网页设计

无障碍电子商务网站导航的重要性

无摩擦才是正道. 导航是关于人们在网站上移动的容易程度, 找到他们想要的,然后采取行动. 电子商务购物体验应该是无缝的,这样购物者就不会中途退出.

这里有一些 电子商务网站设计 方便浏览的小贴士:

定义明确的产品类别

导航的顶层应该显示网站提供的类别集. 将产品分成有意义的类别和子类别. 类别标签作为描述产品范围的单个单词效果最好, 因此,购物者可以浏览它们,并立即了解它们所代表的内容. 对于优秀的电子商务用户体验,最好尽可能多地对网站导航进行用户测试,因为这是网站成败的关键功能.

简单地说, 如果购物者找不到产品, 他们不能购买产品——建立一个搜索功能,帮助他们轻松找到他们想要的东西;

  • 使搜索无处不在. 把搜索框放在每一页和熟悉的位置. 该框应该是可见的,快速识别,并易于使用. 实现搜索框的标准位置是页面的右上方或顶部中心, 或者在主菜单上.
  • 支持各种查询. 搜索需要支持所有类型的查询,比如产品名称, 类别, 以及产品属性, 以及客户服务的相关信息. 最好在输入字段中包含一个示例搜索查询,以便向购物者建议各种功能的使用.
  • 有搜索自动完成功能吗. 自动完成功能使购物者更容易找到他们想要的东西,并通过在他们已经搜索的区域内推荐商品来增加销售潜力.
  • 允许排序和过滤结果. 让购物者根据不同的标准对搜索结果进行排序(畅销书, 最高或最低价格, 产品评级, 最新的项目, 等.),以及剔除不属于某一类别的项目.

设计电子商务网站:过滤搜索结果

过滤产品

选择越多,选择就越难. 通过过滤器帮助购物者找到合适的产品. 这将帮助他们缩小选择范围,直接跳到他们想要的产品范围.

产品快速查看

“快速浏览”通过消除不必要的页面加载,减少了购物者找到合适产品所需的时间. 通常,产品详细信息显示在所查看页面上方的模态窗口中. 不要试图展示所有的产品细节, 而不是, 包括一个链接到完整的产品页面,以查看完整的详细信息. 也, 确保在显眼的位置包含“添加到购物车”按钮以及“保存到愿望列表”功能.

电子商务设计与产品快速查看

特别优惠

购物者总是寻找特别优惠、折扣或最优惠的交易. 让独家优惠可见,这样顾客就知道了. 即使价格差异不是很大,但是 心理感觉 节省一些钱会产生一种占上风的错觉.

招聘美国全职自由用户体验设计师

电子商务产品页面设计

为杰出的电子商务用户体验当购物者成功 找到 他们想要的产品,就给他们 找出 关于产品. 设计一个产品页面,创造一种尽可能类似于亲自购物体验的体验, 通过包含大量的图像, 产品的详细说明和其他有用的相关信息. 让我们深入了解一下这意味着什么.

提供优秀的产品图片

电子商务网站设计产品详细信息页面

在电子商务中,购物者不能触摸、感觉或试用产品. 相反,一切都取决于他们在网上看到了什么. 这就是为什么提供清晰地展示产品各个方面的产品图像是至关重要的. 以下是完美产品形象的清单:

  • 使用白色背景. 产品图像的背景不应该分散或与产品本身冲突. 白色背景效果最好,因为它可以让产品脱颖而出, 几乎可以搭配任何风格和配色.
  • 使用高质量的大图像. 好的形象能推销产品. 高质量的图片能吸引购物者的兴趣,并准确地向他们展示他们正在购买的东西. 大图片可以让购物者放大,仔细检查产品.

电子商务网站设计指南

  • 使用不同的图片. 从多个不同的角度展示产品,并包括特写镜头,以提供更完整的产品感. 360度视角, 他们可以在哪里移动产品, 提供接近实体进入商店并沉浸其中的体验是否是一种好方法. VR电子商务是这种体验的下一波浪潮.
  • 使用视频. 视频具有在短时间内传递大量信息的能力. 使用视频来展示产品的使用过程,并提供尽可能多的功能信息.
  • 是一致的. 在多个页面中使用一致的图像, 并且也符合网站其他部分的外观和感觉. 这将使所有东西看起来干净整洁. 主要的产品形象应该在网站的所有区域是相同的, 如产品亮点或在特色项目部分.

流畅、无摩擦的电子商务用户体验

提供适量的产品信息

给顾客详细的产品信息,这样他们就能做出明智的购买决定. 显示可用性, 可选择不同的尺寸或颜色, 维, 尺寸表, 材料, 总成本, 保证, 和更多. 他们对产品剩下的问题越少,他们就越有可能购买.

电子商务网站设计指导产品详细页面设计

采用说服性设计

根据 稀缺性原理, 人们对稀缺的东西给予更高的重视, 而那些资源丰富的资源则价值较低. 通过展示稀缺性,在销售过程中营造一种紧迫感——展示剩下的产品数量, 把缺货的尺码用灰色标出, 或者展示销售截止日期. 稀缺性将促使潜在买家采取行动.

越来越多地。, 公司正在使用先进的心理学研究, 为了提高用户粘性和购买量, 把曾经的艺术变成了一门科学. 劝导式设计 在电子商务中是获得更多购买的一种非常有效的方式.

设计好电子商务产品详细信息页面有助于其电子商务用户体验

展示顾客可能也喜欢的类似产品,并且与当前产品配合得很好, 或产品, 其他人已经购买了. 这可以显示在产品详细信息页面或购物车中,并将帮助引导购物者找到满足他们需求的产品, 潜在地鼓励他们继续购物——交叉销售相关产品的好方法.

电子商务产品推荐及相关产品

购物车设计

购物车是必不可少的,因为它是购物者审查他们所选产品的地方, 做最后的决定, 然后结账. 购物车的主要目的是引导购物者结账. 下面是设计一个用户友好的购物车的技巧, 并将鼓励购物者进一步购买.

  • 使用清晰的行动呼吁(CTA). 购物车页面上的主要操作调用应该是结帐按钮. 使用鲜艳的颜色, 大量的可点击区域和简单的语言使checkout按钮可见, 简单易用.
  • 提供充分的反馈. 确保当一个产品被添加到购物车时,它是立即和明确确认的. 购物者会对不充分的反馈感到困惑,比如显示不显眼的确认文本. 一个好主意是使用 动画,因为运动吸引人的眼球.
  • 使用一个迷你购物车小部件. 允许购物者在不离开当前页面的情况下将产品添加到购物车中, 用迷你推车. 它还允许他们导航、发现和添加更多的产品. 迷你购物车部件应该始终链接到完整页面的购物车.

最好的电子商务设计之一

  • 显示产品详细信息. 显示产品名称等详细信息, 图片, 大小, 颜色, 购物车里的价格可以帮助购物者记住每件商品, 以及比较产品. 将购物车中的产品链接回其完整的产品页面, 因此,购物者可以在必要时查看更多细节.
  • 使购物车易于编辑. 移除的能力, 保存到以后或更改细节,如大小, color, 或者数量应该很容易获得.
  • 避免意外的运输费用和税收. 意外的运输成本是主要原因之一 购物者抛弃了购物车. 放置运输选项和税收与成本的精确计算, 并提前告知交货日期.

电子商务结帐设计

一个时尚和时尚的设计并不决定一个成功的电子商务网站,也不一定提供伟大的电子商务用户体验. 电子商务的成功只能通过完成购买的数量来衡量. 这里有一些方法来构建一个设计良好的结帐页面, 这将有助于成功的转换:

  • 提供多种付款方式. 不同的购物者在付款方面有不同的偏好. 迎合尽可能多的付费选择(取决于目标用户)以扩大用户基础, 让顾客更容易完成他们的订单.
  • 保持简单. 尽量减少完成购买的字段和步骤. 默认情况下使用送货地址作为账单地址是最小化字段数量的好方法——理想情况下, 设计一个单页结帐,购物者可以查看他们的购物车并输入交付和付款信息.

电子商务用户体验:设计电子商务结帐

  • 可选注册. 强迫购物者在第一次购物前创建一个账户将会被取消 赶走顾客. 让他们选择在购买完成后进行注册, 并在要求他们注册时强调注册的好处. 其好处包括,由于保存了送货地址或付款信息等个人信息,结账速度更快,还可以获得只有注册会员才能获得的独家优惠.
  • 使用明确的错误指示. 没有什么比不能购买或不知道为什么更令人沮丧的了. 而不是在提交表单后显示错误, 让错误通知实时出现. 将简洁明了的错误信息直接放在上面, 或者在需要更正的项目旁边, 这样消费者就会注意到并理解它们.

电子商务结帐UI设计

  • 让人们走上正轨. 使用多页结帐时, 包括一个进度条,显示还需要多少步骤才能完成购买. 这将消除任何歧义,并向购物者保证他们在正确的轨道上. 购买完成后,显示订单确认和订单状态,并提供发货跟踪.
  • 提供支持. 在整个结账过程中包括一个实时聊天或联系电话, 所以当顾客有疑问时, 他们可以很快得到答案,而不必离开网站去其他地方.

Summary

在线购物者希望无论如何都能获得无障碍体验. 在设计电子商务网站时, 这不仅仅是建立一个网站,而是创造一种在线购物体验,将被动购物者转化为付费客户.

希望,这 电子商务网站设计 指南将帮助你做出必要的设计决策,以建立伟大的电子商务用户体验,是专业的, 有吸引力的, 用户友好的, 并使顾客一次又一次地回来. 快速增长加上相对较低的市场份额意味着,新玩家仍有巨大的机会超越传统行业领导者.

了解基本知识

  • 什么是电子商务网上购物?

    电子商务, 也就是网上购物, 是一种电子商务的形式,它允许消费者使用网页浏览器通过互联网直接从卖家那里购买商品或服务.

  • 什么是网站上的“行动号召”?

    “Call to Action”指的是在网站或应用程序中吸引客户执行某项操作(通常对业务有益)的内容,例如注册时事通讯, 获取更多信息, 下载销售资料, 或者完成电子商务购买, 等.

  • 什么是电子商务及其优势?

    电子商务(又名网上购物)是通过互联网销售和购买服务和商品. 它是方便的, 可用的24/7, 可搜索的, 全球(广泛的客户范围), 对卖家和客户都是高性价比的, 而且不需要太多(如果有的话)物理空间.

  • 什么是网站的导航结构?

    一个网站的导航结构是指网站是如何建立的.e. 各个子页面是如何相互链接的. 当一个网站有许多子页面时, 它们必须链接到其主页,以便访问者可以使用网站的导航来浏览网站的内容.

  • 什么是一个好的电子商务网站的转换率?

    客户转化率因行业而异. 对一个人有好处的东西,对另一个人就不一定了. 然而,截至2016年第四季度,全球购物者的平均转化率为2%.95%.

聘请Toptal这方面的专家.
现在雇佣
李烨的头像
Yej李

位于 墨尔本,维多利亚,澳大利亚

成员自 2017年6月25日

作者简介

Yej是一名屡获殊荣的应用程序设计师,拥有跨iOS的多平台经验, 安卓, 穿戴。, 反应网络, 和更多.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

以前在

词典

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.