在当今的数字时代，电子商务网站一直在努力复制和尽可能接近实体零售店，并创造与在线环境中相同的环境或氛围。

在这个让用户感觉像一个象征性的家，他们愿意尝试服务的家的旅程中，存在各种挑战，其中最与您的网站可以创建多少可访问且方便的用户界面 （UI） 设计有关。

当我们谈论 UI 时，它不仅仅是关于视觉外观、有助于设计的字体和样式或使用的颜色。相反，在更深的层面上，它代表了您的电子商务品牌的利基市场，因此一个好的 UI 设计总是与创造公司的突出形象齐头并进。

它不仅会根据您提供的服务、您针对的特定受众群体或您代表的利基市场设定不同的基调，而且一个好的 UI 会尽可能简洁准确地将所需的信息和数据传达给观众，同时确保跳出率也降低。

反过来，这将帮助您做 3 件事：

• 保留用户的兴趣

• 吸引新用户

• 最终提高转化率和销售额

下面，我们分析了每个 UI 设计的目标，然后继续讨论将提高品牌知名度和后续购买的三个关键因素。

优秀 UI 设计的精髓

从本质上讲，有效的 UI 设计只是传达有价值的信息并引导用户从一个部分到另一个部分，直到他们到达卖家的天堂：结帐页面，或者在其他情况下，订阅或 “注册 ”页面。

为此，从主页上就应该明确一件事：这是您的品牌。无论您的主页旨在多么杂乱或极简主义，它都应该代表您的品牌及其所依据的价值观。

这种身份的拟人化或反映是必不可少的，SoundCloud 就是一个很好的例子。该网站使用明亮的调色板，增加了整个磨难的“令人振奋”的感觉。橙色和白色可以很好地共舞，这种组合在整个网络中都存在。背景很好地传达了听音乐的快乐感，而文本或口号片段则总结了 SoundCloud 的所有内容：与热情的社区一起寻找、分享和流式传输音乐。

我们可以从 SoundCloud 的 UI 设计中收集一些其他重要方面的想法，例如对清晰度、易于访问和为观众提供的便利性的需求。“在 SoundCloud 上连接”是网站在用户旅程的这一阶段的主要目标，由于字体的大小和位置而成为人们关注的焦点。

对于那些希望浏览快速查看的人来说，搜索栏位于辅助功能的正下方。这也与网页设计的另一个重要方面有关：它的导航系统。由于就其所有基本意义而言，网站是关于不同部分之间互连的网络，因此过渡应该是平稳和直观的。

像这样的简单功能和设计选择能够吸引观众的眼球，而不会将他们的注意力转移到其他地方，或者用 “来得太强 ”的方法用信息轰炸他们，这可能会导致跳出率增加。

为了建立有效且可行的 UI 设计，我们将阐明每个电子商务网站所有者在设计平台以促进促销和销售时应注意的一些重要元素。

行动号召按钮

作为交互式工具或按钮，号召性用语 （CTA） 引导用户并引导他们，一步一步地从他们所在的地方到他们“需要”的地方，至少为了商人的利益。

由于人类更擅长处理视觉信息或注意到与众不同的内容，因此 CTA 在让观众可见方面做得非常出色。

此外，由于它们在受众中的突出地位，它们旨在引起或接收用户的响应。此操作可以是从“注册”、“立即购买”到“阅读更多”和“立即下载”的任何内容，只要它是可点击的并将用户重定向到网站的其他部分。

从这个意义上说，CTA 按钮不仅告诉用户下一步该做什么，还消除了任何“三思而后行”或疑虑的概念。在降低跳出率方面，这样的功能很重要，因为 CTA 正在帮助用户花更多时间浏览网站的重要方面，并最终将他们引导至电子商务品牌所针对的目的地。

关于这些按钮的 UI，需要记住一些事情：CTA 与网页背景的对比度和颜色通过将它们与 Web 的其他元素区分开来，为手头的目标做出了有价值的贡献。

为此，最好使用实心且充满颜色的 CTA 框，而不是空心的。查看 Joules 的主页以了解：

它效果很好，因为红色和白色的对比，以及盒子里装满了红色，这使它们与浅色背景区分开来。

现在看看 Unbounce 的主页以及他们如何选择设计最重要的 CTA。

这两个 CTA 并没有像 Netflix 对其 CTA 所做的那样引人注目或有效，因为背景和 CTA 之间几乎没有对比。毫不奇怪，现在许多电子商务网站都在采用 Netflix 的方法。

CTA 的形状也会有所不同，其中具有圆形边缘指向内的矩形（如上面 Unbounce 示例中的矩形）效果最佳。

这对于将观众的注意力集中在里面的内容上很重要，因为尖锐的边缘看起来有点不和谐。根据 Jürg Nänni 教授在他的《视觉感知》一书中的说法，锋利的矩形确实需要更多的认知能力来处理。

CTA 的大小主要与手持设备有关，因为点击较大的按钮比您可能需要先放大内容的按钮要容易得多。为此，一些电子商务网站还使用整个图像或插图作为 CTA，以排除对移动平台的任何不便。

结帐部分

虽然这主要针对零售电子商务网站的购物车部分，但该指南完全适用于其他基于互联网的企业以及订阅页面。基本上，您可以保留此部分之外的样式、装饰、有吸引力的图标以及所有增加网络氛围的东西。

购物车部分应尽可能简约，几乎不涉及颜色，并提供简单易读的字体。所有这些花哨的恶作剧都是为了说服观众多待一会儿，但这个任务已经完成了。现在，您的网络要尽可能专业和平凡。

如果改变主意，可以立即更改数量和大小。完整收据显示在右侧，并阐明了特定费用的详细信息。最后，结帐按钮足够大且大胆，在验证信息以确认购买后，它成为“下一步”。

关于注册和订阅页面，鼓励 UI 设计中具有相同的清晰度和可访问性。表格应仅要求提供所需的相关详细信息。有时，不遗余力地询问个人当前的职业或他们是如何被推荐到该网站的，这可能会让他们在整个磨难中感到恼火。

毕竟，这些最后几页都是为了确保交易，您不能通过加入不相关或不必要的东西来妥协任何事情。简单的设计将方便用户进行解释，从而轻松决定是否要完成服务订单。

友好的错误消息

无论如何，您可以预期您的客户会遇到问题，无论是您网站的技术问题，还是消费者本人缺乏理解。这些错误不是好消息，但您至少可以做的是通过为它们提供合理的解释或理由来让它们感到有道理。

使用像 “An error has occurred” 这样的模糊陈述是令人沮丧的，用户对下一步应该是什么完全没有希望。这很可能会导致用户在一段时间内不返回网站，最终导致整体转化率降低。

对错误的解释应该简洁明了，不要过多地涉及技术细节。它应该告知的只是错是用户的错还是由网站的缺点引起的。如果是前者，请提供一个简短的解决方案，而对于后者，承认错误并通过将他们重定向到不同的部分或告诉他们错误已被转发来给他们一些安慰。

请记住，尽管它仍然是一台计算机及其代码，但它的呈现方式应该就像一个人在与另一个人交谈一样。像上面 HubSpot 所做的那样，在你的错误消息上发挥创意。事实上，将错误消息与“重试”之类的 CTA 相结合，或提供其他选项来保持用户的参与度，而不是完全忽视这种情况。

结论

一个好的用户界面将作为用户的完整路线图和体验的一部分，当他们试图了解您的品牌是什么以及提供哪些服务时。如果体验是膨胀的，尤其是在易于访问和健壮性方面，那么用户没有理由不花更多时间完整浏览 Web。

在这种情况下，大多数时候，访客很快就会成为消费者，为您的公司帽子增添一根羽毛。