加快速度:为更好的移动用户体验设计快速体验

移动用户体验

客户的顾客比以往任何时候都更想要移动友好的网站谷歌的一项调查显示。消费者在购物时使用最多的设备也证实了这一点。根据搜索引擎观察(Search Engine Watch)的数据,现在60%的购物者都是这样只使用移动设备来做购买决定.这是Shopify自己的一项独立研究电子商务平台确定,目前,超过50%的电子商务流量来自移动设备

底线:作为设计师,你必须在设计时始终把手机放在第一位否则就有可能被那些希望自己的在线商店对移动设备友好的潜在客户抛在后面。欧宝体育官网入口首页

确保一个网站是移动友好的,并通过扩展,提供更好的用户体验的最好方法之一就是加快速度。移动体验的特点应该是快速的页面加载时间,让购物者更容易找到他们想要的东西,并鼓励他们在网站上停留更长时间。

三秒规则

当谈到移动设备的快速速度时,数字3具有特殊的意义。据《赫芬顿邮报》报道在美国,如果加载时间超过3秒,手机购物者就会放弃一个网站。呵!移动用户是互联网上最注重即时满足的消费者,所以你必须基于他们想要的用户体验进行设计。

这一数据表明,移动用户渴望快速的移动体验。这也意味着仅仅拥有一个移动网站、应用程序或混合版本是不够的——构建一个快速的移动网站是移动友好体验的前沿和中心。

当你客户的顾客享受到更好的移动用户体验时,他们更有可能转化并从网站购买.因此,网站的速度不仅影响用户体验,而且从客户的角度来看,还关系到他的业务底线。

这里有四个杀手级技巧,可以将客户端的移动用户体验转变为一个快速的体验。

你可能还喜欢:你现在可以在任何网站或移动应用程序上建立一个完整的电子商务商店

移动用户体验技巧#1:只包含必要的页面元素

再一次,我们谈论移动用户体验设计中的极简主义,并且有很好的理由。无论你使用的是手机还是平板电脑它的屏幕尺寸比台式机小得多,所以你最好限制任何不必要的元素进入你的最终手机设计。

你可以通过减少整体页面元素来实现这一点,无论是图像、站点副本、表单、跟踪令牌、CSS、JavaScript等等。请记住,您应该压缩、组合或删除元素完全只要有可能。

移动用户体验-百思买

百思买(Best Buy)的手机网站加载速度不到3秒。当然,它的设计师已经将这种极简主义优先的方法应用到它的移动用户体验中。看看一般的产品页面,我们会发现图片和文案都保持在最低限度,规格和细节的重要部分实际上是在全新的手机页面中开放的。

移动用户体验-百思买

你可能还喜欢:使用JQuery图像缩放和JavaScript缩放产品图像在Shopify。

技巧2:注意你的图片大小

继续小一点确实更适合移动屏幕这一主题,让你的图像尺寸也更小一些。

你可以让你的客户端网站在移动设备上更容易看到,首先在桌面浏览器窗口中打开网站,并将其设置为最窄的宽度,这样它仍然是可读的。然后,取这个最小查看窗口的大小,并将其设置为移动站点的首选视口宽度。因此,图像在移动设备上会自动变大,需要缩小以获得更好的用户体验。

要调整图像,只需给移动图像的最大宽度为100%,如果它们对任何移动设备来说都太大,则会调整大小以适应较小的移动屏幕。将此命令添加到移动站点的CSS样式表中。

永远不要忘记你所设计的屏幕尺寸是很有帮助的。在最坏的情况下,你是在为扑克牌(手机)大小的屏幕设计,但即使是平板电脑屏幕也比桌面屏幕小得多。

移动用户体验——宜家

宜家网站的加载速度也超过了3秒,这使其成为移动用户体验速度的一个很好的例子。由于这些调整使其移动网站上的图片变小,请注意,宜家的产品页面图片在标准尺寸时实际上不太清晰。只有当购物者把它们放大时,它们才会变得更清晰,更容易看到。

移动用户体验——宜家

关键是,为了确保更快、更好的整体移动用户体验,必须做出这样的小牺牲。尽管如此,用户可以很容易地通过用手指放大屏幕来解决这个小问题,这样他们就可以非常清晰地看到图像中的产品,最终帮助他们做出购买决定。

你可能还喜欢:测试你的网页和手机设计的5个最佳原型工具

技巧3:消除重定向

什么是重定向?它们是将访问者从一个文件立即带到另一个文件或位置的指令。虽然它们可以通过各种方式实现,但问题是:任何一种方式都会损害您的页面速度!这就是为什么建议设计师优化,或者更好的是,完全删除它们。

根据SEO专家Patrick Sexton的说法,重定向使您客户的网站访问者到达他们想要到达的页面的时间更长.这是因为他们总是被重定向,而不是直接指向他们想要的页面。移动网站的重定向越多,速度就越慢。经验法则是,重定向通常使用更多的客户端处理。

Patrick喜欢使用以下步骤来删除重定向:

  • 首先定位重定向(工具,如重定向检查程序重定向映射器是有用的)

  • 弄清楚为什么会有重定向
  • 分析它如何影响或被其他重定向影响
  • 如果不需要,请删除它(很可能没有必要)
  • 如果它影响或被其他重定向影响,则更新它
  • 通过使用删除重定向hst,如果您的网站是安全的

零售商Crate and Barrel也有一个手机网站,页面加载时间不超过3秒。移动网站的快速速度表明它已经控制了重定向。

移动用户体验-板条箱和桶

技巧4:依赖响应式设计

今天,响应式设计是网页设计的中流砥柱,这是有充分理由的。当你考虑到“响应式设计”这个词是几年前由Ethan Marcotte创造的时候,你会觉得这很令人印象深刻。

它可以单独增加客户端移动站点的用户体验,从而获得可衡量的改进结果。研究表明,制作一个响应性好的移动网站——而不是仅仅在原始桌面网站的基础上制作一个优化的移动网站——真的很重要提高转化率

响应式设计是指只有一个站点,但它在桌面和移动站点上都能完美无缝地呈现。如果你的客户不是世界上最大的公司,因此预算和/或资源有限,那么响应式设计可以是一个优雅而有效的解决方案,以加快移动用户体验。

这是因为所有用于监控和更新站点的资金和精力都可以放在一个站点上,而不是分别放在专门的桌面和移动站点上。将其视为构建更好用户体验的一石二鸟解决方案。

根据About.com的说法,你的客户应该有这样的期望预算约$750响应网站设计它可以无缝地处理手机、平板电脑和台式机。除此之外,每一种设备尺寸都要额外花费150美元,比如横向和纵向两种尺寸的平板电脑,而这三种基本尺寸都不包括在内。

好市多(Costco)的手机网站是另一个快速移动体验的好例子。为了与响应式的最佳实践保持一致,其桌面网站通过在主页上更改以下内容而转变为移动网站:

  • 页面左侧的弹出式超级菜单变成了汉堡包菜单
  • 减少图像和站点副本的数量
  • 单列设计占据了整个页面,而不仅仅是中间栏<

这是好市多网站的桌面效果:

移动用户体验——好市多

这是它在手机上的样子。正如你所看到的,移动用户体验很棒,不会让购物者反感。

移动用户体验——好市多

迈向更快的移动用户体验

手机购物越来越流行了。人们想在下班回家的路上或者排队的时候购物。随着这些用户行为变得越来越引人注目和报道,设计师必须顺应这一趋势,设计出有用、方便且与购物者相关的移动用户体验。

实现这一目标最有效的方法之一就是让你的移动网站尽可能快。记住三秒规则:如果页面加载时间超过三秒,购物者就会感到沮丧,然后离开网站!通过始终如一地设计页面加载时间少于3秒的移动网站来取悦客户。你的客户指望你为他们的网上商店带来更大的转化率和销售额。欧宝体育官网入口首页

改善手机用户体验可以归结为一些具体的策略,如果你做得对,就会给购物者和你的客户带来很大的回报。以下是本文对快速移动用户体验设计的重要启示:

  • 只包含最重要的移动页面元素
  • 缩小图像尺寸
  • 摆脱重定向
  • 使用响应式设计

你如何设计一个更好的手机用户体验?在下面的评论中分享你最喜欢的技巧。

你可能还喜欢:优化移动电子商务设计的5个简单技巧

借助Shopify合作伙伴计划发展您的业务

了解更多