移动网站应用设计:速度至关重要!

news/2024/5/9 7:59:21/文章来源:https://blog.csdn.net/jongde1/article/details/79468414

以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具


在2016年,全球的移动互联网使用率首次超过台式电脑。根据谷歌英国地区研究:

“如今,65%的英国成年人都使用智能手机作为他们上网的主要设备。”

人们搜索信息,购买商品,订阅服务都是使用移动设备。用户偏好的转变导致用户对产品的期望也大大增加。如今,大多数用户对于糟糕的手机性能几乎没有耐心 - 如果他们不能立即获取他们想要的东西,他们就会转投其他产品的怀抱(这对于一款应用来说简直是重击)。


设计一款移动网站应用,如何才能抓住用户的心?首先,设计师应该规避设计中一些常见的错误,提高运行速度。在这里,我将会提供一些解决页面加载缓慢,登录墙用户体验差和支付过程耗时久这些常见问题的方法,以供参考。

页面加载缓慢

由于目前的技术支持实现更快的体验,用户的等待意愿开始下降。

“其中三分之二的移动网络用户表示,加载页面所需的速度对他们的整体体验影响最大。”

Google在全球范围内对90万个移动网站进行了测试,发现完全加载移动网页所需的平均时间为22秒。与此同时:

如果加载时间超过3秒,53%的用户将离开移动网站。

解决方法

1. 试着找出造成加载缓慢的原因

如果加载缓慢是你网站的常见情况,请尝试找出具体原因并解决问题。通常,页面加载时间受以下影响:

视觉元素(图像和动画)。高清图像和流畅的动画只能在不影响加载时间的情况下创建良好的用户体验。因此,这可能是造成网站加载缓慢的原因之一。建议阅读“图像优化”相关知识了解更多优化细节。

自定义字体。与网站上其他资源一样,下载自定义字体会耗费一定的加载时间(如果字体位于第三方服务上,则需要更多时间)。

商业逻辑。程序编写不够规范。

网站基础设施。网站所使用的硬件,如服务器的性能、宽度速度以及服务器的硬件配置都会影响加载速度。

2.测试你的网站

如何测试网站的性能?这里推荐两个工具给大家。第一个是Google’s Test MySite,该网站会根据网站性能的现状,提供有关如何加速和改进网站的可操作报告。

WebPagetest 是另一个测试和优化网站性能的工具,它允许你对全球多个地方的真实用户使用的真实浏览器 (如IE浏览器和谷歌浏览器) 的连接速度进行一个免费的测试。

3. 使用加载占位图

如果你不能提高网站实际的运行速度,至少试着营造一种加载速度很快的感觉--用户对于网站速度快慢的感觉通常比实际的加载速度更重要。

加载占位图是在加载内容时显示的页面版本。占位图会使用户感觉网站速度的运行起来比实际情况更快。

设计师不妨在Codepen Example中查看占位图效果。它的设计者就是利用压力缓冲器的原理,使用占位图给用户营造出一种错觉: 网站正在运行,并且内容在快速加载中。


登录墙设置

在用户使用应用程序之前,一般会有一个强制性注册的登录墙。登录墙是用户在初次使用下放弃应用的主要原因。对于品牌认知度较低或价值主张不明确的应用而言,使用应用的用户数量尤其重要。因此,建议推迟注册 – 提供用户尝试应用该项服务,他们会更乐意完成此步骤。

解决方法

1.使用电子邮件地址或电话号码作为用户ID

如果你让用户创建一个独特的用户名,他们很可能会遇到以下这些麻烦:

由于用户名必须是唯一的,因此用户可能需要花费几分钟才能得到正确的名称,因为首选用户名已被其他用户使用。

用户可能会以用户名注册,但过了一段时间后,他们就会完全忘记。根据Janrain+Blue的研究,92%的用户如果忘记了用户名就会放弃使用。


因此,允许用户通过电子邮件或电话号码作进行注册,让注册更加简单轻松。

2. 使密码验证成为无摩擦的体验

用户经常忘记他们的账号密码,当他们不得不经历密码重置这个过程时,他们会感到非常恼火。


这时候设计师应该怎么做?简化认证体验,减少放弃风险。使用第三方登录(使用Facebook / Twitter登录):


Flipboard允许用户通过社交网络帐户登录,

或指纹触摸/脸部识别登录:


iPhone应用程序的Chase银行提供了一键式登录选项。

3. 提供其他登录方式

根据用户提供的相关信息来提供其他登录方式。例如,如果你拥有用户的手机号码,则可以在手机上输入一次性密码。


漫长的支付过程

越来越多的移动用户不仅使用移动设备搜索商品,甚至会在手机上完成支付过程。这意味着我们需要为小屏幕设备设计购物体验,并让它尽可能舒适。但说起来容易往往做起来难,在移动设备上填写结账表单可能很痛苦。因此,繁琐的支付过程是导致用户放弃支付的主要原因。这并不奇怪,根据Google数据表明:

“50%的用户因为不愉快的移动端支付体验而放弃了交易”

解决方法

1.不要强迫用户创建账号

据Baymard研究所称,强迫用户创建账号是消费者放弃购买的最大原因之一。正确的做法是支持用户无需注册进行购买。因此,应用不仅需要为消费者提供了“快捷支付”选项,而且要让该选项足够清晰可见 (Baymard研究所还发现,88%的移动端支持访客支付,这些选项往往由于不够明显而容易地被用户忽略)。


易趣提供了两种选择 -'登录支付'和'访客支付'

2. 记住用户的详细信息

不要要求用户输入他们之前提供的任何信息。收集过用户数据之后,可以再将其用于用户的其他新交易中。这些数据可能是收货地址和支付信息,一定要确保用户在需要的时候可以进行修改。

3. 利用地理位置数据

与其向用户询问送货地址,不如将其当前位置作为配送货物的默认选项。但在设计时需确保用户在需要的时候,可以轻松地更改收货地址。


当用户点击“分享我的位置”按钮时,表格中的信息将会自动填入当前地址。

4. 使用Apple Pay或Google Pay支付

谈到付款问题,设计者应该尽可能提供用户多种选择,这样用户就可以选择他们喜欢的方法进行支付。提供多种支付选项的应用程序,如Apple Pay和Android Pay,可以让用户在付款时从填写额外表单的痛苦中解脱出来,并能提供给他们更大的安全感。


5. 设计“快速购买”选项

设置自“快速购买”这个选项可能对老用户更有帮助。当用户点击“快速购买”按钮时,网站应该自动将用户重定向到购买信息页面进行确认。所有常用的支付方式和收货地址都应该直接从之前的订单中进行提取。

6. 支持使用其他设备继续购买

虽然使用移动设备完成购买的人数正在增长,但有相当多的用户使用手机只是为了浏览,更喜欢在台式电脑上完成购买。设计者应该设置“保存以待后用”或“将购物车发送至邮箱”的选项来帮助用户完成支付。

阅读本文(本文最初发表于 babich.biz)之后,你们有更多关于改善移动网站性能的建议吗? 欢迎在下面的评论区中进行分享!

原文作者:Nick Babich

原文链接:https://uxplanet.org/mobile-web-when-speed-matters-d371a961cf46

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_727053.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

让你不再恋家的9款小众时尚的酒店网站设计

一场说走就走的旅行少不了一家精挑细选的酒店。出门在外,没有一个舒适的住处,恐怕旅行的记忆也并不是那么美好。大牌酒店住不起,小众酒店性价比高,但哪家最合适?网上攻略必不可少。 作为主观性非常强的视觉性动物&…

win10如何配置IIS,局域网内实现网站共享

局域网中实现项目(网站等)共享,只需启动电脑IIS服务即可。 win10配置IIS,并实现文件共享操作: 在Windows10系统中,依次点击“开始/Windows系统/控制面板”菜单项(或者直接搜索控制面板即可)。…

UX设计案例研究:建立更好的用户体验(重新设计Air Peace Airline网站)

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。坐飞机旅行总是能给人带来很棒的体验,但我认为应该考虑预订航班时给用户带来的压力。在如今的数字世界,我们越来越重视速度和简单性&#xff0…

个人网站、电视交互、后台组件...助你高效工作的素材来啦!

春天来了,万物都在复苏,可你的身体还停留在假期? 不想工作,思维卡壳,偷偷摸鱼,但又不得不完成工作,是不是你的现状?! 墨墨姐告诉你一个办法,那就是看看本期…

2018年最好的医疗网站设计及配色赏析

随着人们对医疗健康认识水平的提高,相关的医疗服务和医疗网站设计也在不断规范化。从网站设计的角度来讲,医疗网站对于医疗内部来说就是连通整个医院的信息高速公路;而对于患者来说,优秀的规范化设计能更好的引导他们准确快速的获…

网站收录查询结果不一致问题

查询网站在不同搜索引擎收录情况的两种方式: 1、第一种是通过站长工具查询,即如下所示: 2、第二种是通过 site:域名 的方式查询,比如:site:xatopsec-edu.com 利用 站长工具 / site:域名 查询收录情况,得到的结果为什么…

卧槽!这几个 Java 网站,有点刺激!

之间有很多小伙伴咨询我说想要推荐几个学习 Java 的网站,但是之前太忙了,一直没空整理,最近这段时间稍微空闲了些,所以我整理了几个不错的学习 Java 的网站,这些网站基本上都是外文网站,因为我觉得是吧&…

设计师升职加薪必须知道的10个设计网站

设计行业经过几年的发展,已经进入到了相对成熟的时期。这无疑会对设计师有更高的要求和挑战。 随着AI的发展,设计甚至从有形的设计,转变为无形的设计。这就需要你对设计有更深刻的理解,理解设计的本质是沟通,设计源于…

室内设计类网站Web原型制作分享——Dinzd

Dinzd是一家德国室内设计网站,网站内涵盖全球设计精品资讯以及优秀案列。网站布局简单直观,内容丰富。 此原型模板所用到的交互动作有结合弹出面板做下拉菜单效果,鼠标按下文字按钮跳转页面,按钮hover填充效果。 本原型由简单快速…

开发一个网站,用户密码你打算怎么存储?

我们开发网站或者 APP 的时候,首先要解决的问题,就是「如何安全传输和存储用户的密码」。一些大公司的用户数据库泄露事件也时有发生,带来非常大的负面影响。因此,如何安全传输存储用户密码,是每位程序员必备的基础。本…

设计服务类网站原型模板分享——Fortyseven

Fortyseven是一个设计服务网站,设计理念是帮助企业设计出赚钱的品牌和网站。该网站图文排版配色都很不错,很有欧美复古风,多采用大图结合文案排版。 本原型由国产Mockplus(原型工具)和iDoc(智能标注&#…

【拿来就用】20款婚礼婚庆网站模板, 轻松打造幸福满满的网站设计

婚礼网站的设计不仅需要设计师有高超的设计技巧,还需要设计师能有一颗感同身受的“幸福的心”,这样设计出的婚礼网站才能更加吸引新人。 如果你也正好在搜寻或设计这样的网站, 那么,小编介绍和分析的这20个最优且免费创意的HTML5…

想让网站销量爆涨?你离成功只差一个出色的购物车设计

每个电子商务网站都会涉及到购物添加商品这个流程,从用户对你的产品产生购买兴趣开始到用户添加到购物车并且顺利完成下单,购物车设计这个关键环节扮演着举足轻重的作用,也是决定你网站的购买力和复购力的关键因素之一。一个简单而清晰的购物…

灵感专题—2019年优秀电商网站设计作品赏析#5月

电商网站往往需要更精细的设计才能吸引用户转化和购买,一个优秀的电商网站既要保证产品展现的完整性,又要符合用户体验,再加上精美的UI设计那就更完美了,但同时对设计师的功力是很大的考验。以下26个电商网站设计遵循的是别样的设…

干货!让人一见钟情的网站header设计攻略

网站header是网站页面的核心部分,因为该部位是用户第一眼看到的地方,因此网站的header设计在吸引用户注意力并进一步留住用户方面发挥着至关重要的作用。如何才能设计出让人眼前一亮的网站header呢? 要设计出优秀的header,首先得对网站heade…

【奇思妙想】20个从设计到功能都创意十足的小众网站

现代生活节奏越来越快,工作压力也越来越大,不少设计师们在日复一日的重复工作中可能也会面临思维枯竭的困境。 摹客为大家整理了20个从设计到功能都充满趣味的网站,虽然功能类型各不相同,但这些网站收录了很多互联网人的奇思妙想&…

Hero image网站转化这么高?21个最佳案例给你参考

Hero image是网页设计中一种特定的术语,也是目前最流行最引人注目的网页设计趋势之一。Hero Image通常指的是一种大尺寸横幅图片展示在网页上,通常放在靠前并居中的位置。它囊括了网站中最重要的内容。Hero image通常由图像和文本组成,并且可…

学起来!大牌网站是如何设计Mega menu 菜单

Mega menu(大幅网页菜单)是在网页界面设计中非常常见的元素之一,用于引导用户进入下级页面。但是,正因为mega menu十分常见,所以如果总是一成不变的设计,就容易显得乏味。 本文收集了一些优秀的大牌网站meg…

【编程指南】新手上路不必忧,全球十大顶尖网站免费用!

随着互联网的快速发展,编程不再是IT专业人员和软件工程师的专利。如今,了解代码知识可能是这个信息化世界最重要的技能之一,它直接影响到我们职业发展的高度和深度。另一方面,学编程并不是为了抢程序员的饭碗,其实编程…

灵感分享|10个优秀网站设计实例赏析及原型分享

网页设计师们经常会浏览高质量的网页设计作品分享网站,来解决灵感枯竭的问题。因为在这些优秀的网站设计实例中可以看到某些趋势,诸如:扁平化设计、视差滚动、响应式设计、流行配色设计等等。今天小摹为大家带来10个优秀网站设计实例&#xf…