长滚动:移动视图

'Mobile-First': Optimizing Long Scrolling Ecommerce Sites for Success

我们都整天坐在笔记本电脑前,所以我们首先考虑的是台式机。你有点认为你的手机是理所当然的。但首先想到的应该是,“其实,让我在手机上看一下,手机体验会怎么样?” (Shopify 博客)

现在,公司比以往任何时候都更需要考虑“移动优先”。对于那里的分析师,这里有一些数据可以支持这一说法:

Simicart 在他们的文章“来自趋势移动商务统计的洞察”中,关于智能手机的文章如下:

  • 2019 年,全球 67% 的人口拥有手机。
  • 79% 的智能手机用户使用这些设备进行在线购物
  • 48% 的买家在使用搜索引擎时将手机作为主要设备
  • 58% 的 Google 搜索是通过手机完成的
  • 65% 的付费 Google 搜索结果点击来自移动设备

因此,在过去的几年里,长时间无限滚动的网站变得很普遍也就不足为奇了。此外,Google 自 2015 年以来一直大力支持移动友好型网站,然后于 2018 年 3 月开始为移动网站编制索引 .

如果您想知道移动网站的成瘾性,让我们从统计角度为您提供。 在 2013 年,用户平均每天花费 144 分钟从桌面使用数据,而在移动设备上花费 88 分钟。跳到2019年,故事发生了逆转。移动用户现在平均每天花费 203 分钟,而桌面用户每天平均花费 128 分钟!

巨头们已经说过了,我们引用了“截至 2019 年,移动设备上的购买转化次数多于桌面设备”!

作为技术合作伙伴,我们为从农业技术到医疗保健等行业制作了多个网站!所有这些网站的一个确定性是滚动格式。在我们构建的网站中,超过 99% 在其桌面网站的首屏下方都有滚动!

用户喜欢它有三个原因:

  • 使用方便
  • 消息优先
  • 社交媒体应用已经让它们适应了无限滚动体验!

图片来源:Lithiosapps 的文章

上图是如何通过不同设备上的不同线框传达相同信息的示例。这称为响应式设计 - 虽然设备上提供相同的信息,但布局完全不同!这些变化可能看起来很表面,但相信我们,当我们说,后端发生了很多事情!如果不仔细研究这些优化,可能会毁掉品牌数字身份的美好未来!

 但是,是什么让长滚动网站存在问题?

让我们先把基本的东西搞定!与移动设备相比,桌面空间显然是巨大的。根据 Abbas Rajani 在他的文章“改进长滚动移动网站的 6 种方法”中,如果未正确实施优化,可能会出现以下问题:

  • 滚动无聊

桌面具有水平元素,当在相对较小的手机屏幕空间中查看时,这些元素往往以垂直格式堆叠。这会使您的网站变长并破坏用户的兴趣,导致他们跳到另一个网站。作为一个希望将页面浏览量转化为销售额的品牌,这很糟糕。

  • 不友好的导航

导航是关键,当您在较小的屏幕尺寸(如移动设备)上放置太多内容时,它很快就会变得杂乱无章,使用户难以到达他们想要的目的地

  • 页脚元素的阻碍

要从一个页面跳转到另一个页面,尤其是在电子商务网站上,页脚导航变得必不可少。如果用户必须继续滚动一个非常长的页面以希望导航到其他网页,他们就没有它!再次向弹跳的用户问好!

  • 降低移动速度

与智能手机相比,台式机功能更强大,因此可以加载大量设计元素,但后者并不适用!其中一些可能会在手机上错过,但如果您的长滚动网站没有以这种方式优化,加载将需要很长时间,而且没有人想要这样! Campbell Jof, 在他的文章“移动设备网站优化的 8 个挑战”中谈到了人们可能面临的其他一些挑战!

那么,这是否意味着我们放弃了所有希望并为失去的未来而懊悔? 

绝对不是!

忽略长滚动页面的后果可能会给您的业务带来巨大损失,但您可以在保持内容完整的同时优化移动视图,方法如下!

  • 摆脱不必要的

告别多余的插件、弹出窗口、任何其他屏幕抑制、空白、重定向等。您的空间有限用户的注意力,不要用额外的东西来纠缠它!

  • 删除重复

 桌面版本通常在页脚中重复导航元素。在移动设备上,这将要求用户继续滚动直到最后。但是,您可以通过在网站顶部添加导航元素来更改此设置。

  • 使用水平滚动

有时,需要显示一个产品的多个图像等元素。不要为所有图像创建垂直滚动,而是尝试合并水平滚动,如 Fabian Frey 的关于“水平滚动界面”的文章

确定流行移动设备的标准尺寸

这里一个好的策略是对最流行的手机进行市场分析,并使用这些设备测试移动优化,因为不同设备的屏幕尺寸会有所不同。

查看以下几款智能手机的 iOS 和 Android 屏幕尺寸:

iOS:

安卓:

查看 Sasha Sergiienko 的文章,关于“神秘的与密度无关的像素。快速介绍 Android 设计。”

  • 不要将滚动条作为成功的指标

滚动已成为第二天性。用户不会仅仅因为他们喜欢您的网站而滚动,他们也可能只是将其作为一种自然习惯进行,而对您所说或出售的内容没有丝毫兴趣。因此,不要将到达网页末尾的用户数量数据作为一切顺利的可靠信号。看得更深!

  • 输入几个代码

响应式设计的网站使用 CSS3 媒体查询向移动和桌面用户提供相同的内容,使用流畅的网格和灵活的设计来自动适应用户屏幕的大小。除此之外,复习 HTML、Liquid 或任何其他编码语言的基础知识只会对你有好处。查看 Hartley Brody 在他的文章“我如何在 5 分钟内优化我的网站”

中所说的话
  • 结合功能动画

根据 Nick Babich 在他的文章“长滚动的最佳实践”中介绍了视差滚动和滚动激活等创意元素动画是交互设计的重要组成部分。他们让用户保持参与并想知道接下来会发生什么。但是,请记住,这些会减慢您的加载时间。

那么,电子商务将何去何从?

 Monate 的 2020 年第一季度分析, 显示,全球电子商务转化在台式机上比在手机上高约 55%。

困惑?

我们确定您现在想知道,“如果移动设备被更多地用于查看网站,那么电子商务统计数据怎么会如此矛盾?”

答案在于两个词; 移动应用程序

根据 Mango 360,移动应用用户每月平均花费 201.8 分钟购物,而网站用户每月平均花费 10.9 分钟用户”随着亚马逊、Myntra、Flipkart 等市场上的主要参与者都在游说排名第一,大多数电子商务销售都是通过这些应用程序进行的。

这是否意味着您需要两个版本的网站?桌面和移动设备以及移动应用程序?

是和否。

电子商务的未来正在迅速演变为移动应用程序。但是,这并不会使网站变得多余。用户下载您的应用程序(如果您确实制作了)的可能性完全取决于他们是否信任您的品牌。这是网站占上风的地方。它构成了客户忠诚度的支柱。应用程序可能是最终目标,但将其作为铺路石是一个非常冒险的决定。

结论

对于一个网站,用户体验意味着一切,长滚动可以创造一种完全身临其境的浏览体验。我们目前正处于科技热潮之中,每个人都在平等的基础上!使用创造力、市场分析和未来主义视角提升您的游戏水平并与竞争激烈的市场竞争,这将使您的品牌脱颖而出! The Daily Egg, 在他们的文章“如何优化副本以获得更好的移动体验”中讨论了一些可以让您的内容游戏更上一层楼的方法更高!

因此,长卷与否已不再是两难选择。

今天的问题是,“如何才能更好地为智能手机优化长滚动网站”

 

 

Get In touch