改善电子商务移动网站用户体验的方法

永远记住，某人分享的最佳实践可能并不适合其他人。 这些最佳实践不是平等创建的，而只是起点。 在本系列文章中，我们将介绍经过高度研究的移动网站最佳实践或指南。 我们的目标是扩展我们在开发令人惊叹的移动网站方面的知识，并使用定量数据验证最佳实践，这些数据关于用户如何在外观、清晰度、可信度和可用性等特定维度上感知移动网站。

最好在您的实践中使用这些文章指南，但这不是您最终应该得到的。 这是您应该开始优化的地方。 你应该至少和这些指南一样好。 请记住，这些是当前的 Web 实践。 2 年前曾经有效的方法可能不再有效。 战术图是真实的。 人、网络技术和营销趋势总是在变化，胜利总是会消失的。

我们建议您考虑这些指南，但也要考虑您的特定网站如何符合或与指南不同。 您可以立即将这些做法应用到您的移动网站上，但我们建议您先对其进行测试。 它们可能不适用于所有情况。 让我们来看看“如何改善您的电子商务商店移动站点的用户体验？”的第一部分。

1.首先尝试设计您的移动网站（即在设计桌面网站之前）

我们都知道移动设备在我们的销售中的重要性。 超过 50% 的销售额来自移动设备。 设计您的移动网站既不有趣也不简单。 这是开始设计网站的最明智的方式。 让我们知道为什么：

限制是移动设备高于任何其他平台。 屏幕尺寸更小，带宽低，以及许多其他限制。 如果您从头开始使用移动站点，则可以避免优雅降级带来的复杂性（例如不能跨平台转换的功能或需要更多时间加载的不需要的数据）。

其次，用户友好的移动网站应该干净、直观且加载速度快。 这些要求迫使设计人员了解用户访问网站的原因以及哪些内容和功能是必不可少的。
移动平台上更好的用户体验意味着用户可以轻松找到他们正在寻找的一切，仅此而已。 除此之外，为优先内容开发一个清晰的框架可以减少设计桌面站点的工作量。

2. 自动重定向移动站点，页面必须是移动优化的

移动用户的数量仍在增加，增加了移动购物者的数量。 人们经常使用手机进行购物，并希望这很容易。 如果你不跟上，你就落后了。

为了跟上潮流，电子商务网站应该针对所有设备进行优化。 通过优化的移动网站（即完全响应式移动网站）提供更好的移动体验。

响应式设计是一种使网页适应正在浏览的屏幕的做法。 网页内容会自动适应不同设备的屏幕，例如笔记本电脑、智能手机、平板电脑、台式机等。这种方法不会改变内容和功能。

对于响应式站点，相同的 URL 对应于所有平台。 这只是意味着移动设备将没有单独的 URL，并且用户不必等待重定向这些 URL。 更少的加载时间 = 更好的移动体验。 此外，所有 SEO 都指向一个 URL。

自适应站点类似于响应式站点，但没有针对任何屏幕尺寸的单一布局。 相反，对于不同的屏幕尺寸有多种布局。 该站点检测正在使用的设备并显示相应的布局。

通过开发响应式移动站点很容易实现此准则。 确保跨不同平台和设备（使用不同浏览器）对网站进行质量检查。 此外，请检查网站上的所有页面，以确保它们已针对移动设备进行了优化。 这里的关键是为移动用户提供最佳的用户体验。

3. 跨不同平台的一致设计以获得更流畅的用户体验

您需要在所有平台和设备上保持一致性和标准，以确保可用性。 这意味着用户无论使用何种设备，都会在您的电子商务商店中遇到相同的视觉效果、模式和流程。 简而言之，通过移动设备或桌面浏览器访问您的电子商务商店的用户具有相同的体验。

由于屏幕尺寸不同，可能会出现对不同布局的需求，但在一致设计的体验中，用户会识别出熟悉的功能。

许多初创公司和企业家都错误地将桌面和移动网站视为不同的产品。 这种方法会造成不一致，导致用户体验较差，并有可能误解公司的品牌。

你可以避免这个问题。 以下是一些建议：

A. 视觉识别

尝试使用相同的颜色、外观、字体样式、视觉元素等。

B. 一致的图像

应用程序和网页图标应该代表相同的功能

C. 措辞

移动和桌面网站上的按钮、链接和菜单选项的名称应相同

D. 交互和流程

每个功能的导航过程应该相同（例如，查找产品或结帐方法）

E. 设计人员、开发人员和测试人员之间的协调

团队中的每个人都应该对部署的每个功能有类似的理解。

应用这些基本概念，用户可以轻松使用 Web 和移动服务。

4. 在设计您的移动网站时利用分析来确定设备的优先级

我们都至少通过移动设备访问过一次网站。 但是，如果您知道最常使用哪种移动设备或平台来浏览您的商店，您就可以针对该设备优化您的网站。

Google Analytics 等分析工具可为您提供高效、快速且清晰的指标洞察，从而准确确定用户访问您网站的方式。 使用 Google Analytics，您可以获得以下问题的答案：

• 访问该网站的用户有多少来自 Android 或 iOS 社区？
• 有多少访问者使用低分辨率屏幕的设备？
• 使用最新 Android 版本和使用 2 年旧版本的用户的页面访问次数是否有差异？
• 与安卓用户相比，iOS 移动用户在商店上花费了多长时间？
• 使用了什么类型的连接？ Wifi 或移动数据？

这样的数据对于产品战略来说非常宝贵，公司可以专注于您的目标受众。 他们可以创建适合用户真正需求的产品。

例如，电子商务商店有很多图片、内容和需要在屏幕上滚动的长列表。 他们可能会意识到大多数用户会在网站上停留几秒钟。 公司可以检查访问其站点的设备的配置文件。 如果离开的用户使用的是小屏幕和低分辨率的设备，人们可能会因为糟糕的用户体验而离开网站。 因此，我们可以采取的下一步是改进用户体验。

简而言之，我们对用户了解得越多，就越能确保提供可访问、高效和令人愉悦的产品。

5. 测试您网站的移动版本

您必须检查您的网站在不同移动设备上的外观和工作方式。 您可以使用某些工具来测试您的网站。

A. 谷歌的移动友好

这是一个简单的工具。 您需要输入您的网站 URL，Google 会生成“用户友好”的评论。 审查可以是这样的：
“这个页面很容易在移动设备上使用。”
或者
“页面不适合移动设备 - 此页面可能难以在移动设备上使用。 修复以下问题：

• 文字太小无法阅读
• 未设置视口
• 可点击元素靠得太近
• 使用不兼容的插件。”

B. 移动测试。 我

在手机 test.me 中，您需要输入要检查的网站 URL 并选择设备和操作系统。 从那里，您可以在任何移动设备上获得完整的网站视图。 通过测试，您可以在发布前修复错误。

6. 制作灵活流畅的设计布局

在今天的市场上，有很多移动分辨率和屏幕尺寸，这增加了设计师的努力。 许多设备的密度也各不相同。 从低密度屏（360像素）到高密度屏（4K），常见的描述密度的方式如下：

• 低密度 (ldpi)
• 中等密度 (mdpi)
• 高密度 (hdpi)
• xhdpi（超高密度）
• xxhdpi（超高密度）
• xxxhdpi（超高密度）

以下是一些与密度相关的简单术语

A. 决议

屏幕上的像素数

B. 密度无关像素 (DP)

一个虚拟像素单元定义了一个 UI 布局。 DP 以与密度无关的方式表达布局尺寸或位置。 DP 等于 160dpi 屏幕上的 1 个物理像素。

C. 屏幕尺寸

屏幕的大小以屏幕对角线长度来衡量。

D. 屏幕密度

屏幕物理区域内的像素数量，通常用每英寸点数表示。

所有这些概念都可以在开发移动网站时应用。 它确保接口适用于所有设备。 这称为流体界面。 简而言之，流体界面是一种以百分比定义尺寸的界面。

7. 如果你没有使用响应式设计，那么创建单独的 URL 以保持一致性

在设计电子商务商店的 UI 时，设计师应该考虑内容将如何显示，以及不同设备的用户将如何访问它。 在某些场景中，比例和布局与原始设计规范有很大差异。 当网站的设计不适合多种设备时，它们就没有“响应性”。
响应式设计是一种开发技术，可检测客户端设备类型并调整其设计以适应显示设备的屏幕尺寸。 因此，相同的内容可以在桌面上以 3 列格式显示，在平板电脑上以 2 列格式显示，在智能手机上以 1 列格式显示。

无响应的设计会引发多种问题，例如不正确的字体大小、无法点击的按钮等。并不是每个人都像我们一样可以创建高度响应的设计。 但是开发人员和设计人员可以选择管理响应式网页设计。 他们可以生成自动识别（通过 HTML 标签）设备类型的 URL。 检测到设备后，可以优化显示内容：

生成的 URL 的一些示例是

• www.website.com（桌面访问）
• m.website.com（移动访问）
• www.website.com（带有基本 HTML 的精简版）（功能手机访问）

8. 使用“viewport Meta Tag”使页面适合移动屏幕

根据谷歌的说法，“视口可以控制主页在移动设备上的显示方式。” 换句话说，如果设计师不考虑视口，移动设备上的 UI 就会像桌面站点一样出现。 这种场景下系统会适配手机使用的屏幕，但是一般情况下是不行的。 在某些情况下，图像会失真并造成糟糕的用户体验。 应用视口后，设计师可以控制显示模式并改善用户体验。

如何考虑视口？

您可以使用名为“视口元标记”的 CSS 标记，该标记包含在 CSS 设备适配规范中。
这个标签的语法如下： <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9.在开始移动设计时，确定网站“核心”。

在创建移动站点设计时，设计人员应确保清楚地呈现站点的主要功能。 简而言之，移动网站应该允许完整的功能，因为 CTA 在任何为移动设备设计的网站上都很明显。

但是如何确定要包含的其他功能呢？ 想想您网站的核心。 网站的主要支柱是什么？ 网站的主要功能有哪些？ 哪些功能次要但可以改善用户体验（例如搜索、过滤器等）？

让我们通过一个将核心概念应用于食品配送电子商务网站的示例。 该网站的主要支柱是：

• 登录和注册
• 产品搜索
• 产品列表
• 添加到购物车
• 查看

桌面站点具有更多功能，但您可以过滤必要的功能并将它们包含在移动站点中。 它还消除了用户因小屏幕上的太多选项而感到不知所措的可能性。

10. 使用简单的表单和输入字段

有一个表格，用户可以在许多网站上填写以联系支持团队或获取新闻通讯和其他目的。 如果设计不当，移动用户会发现这些表单是一个大问题。 表格越长越复杂，用户输入信息的难度就越大。

如何优化移动设备的表单？

• 仅包括用户必须输入的必要字段。 如果必填字段太多，用户更有可能放弃注册过程。
• 不要将字段分成太多字段。 例如，名字/姓氏可以被认为是一个简单的名字。
• 确保为数字字段（例如联系人号码）自动激活数字键盘。 、邮政编码等
• 使错误消息简洁。
• 尝试在这些领域包括自动化。 例如，在询问用户地址时，利用 GPS 功能并预填诸如 Pin 码、州、城市等字段。

应用这些基本概念将改善您的移动网站的用户体验。 这些应用程序将限制用户放弃表单或您的网站的机会。

包起来

在本系列的第一阶段，我们已经通过了 10 条准则来改进您的电子商务商店的移动站点用户体验。 在印度最好的电子商务开发公司 Emizentech，我们在开发响应迅速的电子商务商店方面拥有专业知识。 让我们知道您的要求。