中文站长

 找回密码
 立即注册

表单设想:一页只做一件事

[复制链接]
发表于 2017-6-2 22:24:12 | 显示全部楼层 |阅读模式
一页只做一件事,并不是必然要正在一个页面上只展现单调的元素或组件(固然也能够这么做)。2008年的时分,我正在*Boots.com*任务。他们想做一个单页的结账页面,使用阿谁年月最新潮的手艺,包罗手风琴组件、AJAX和客户端考证。每个步调(寄送地址、寄送选项、信誉卡细致消息)都收正在一个手风琴面板中。而每个面板都经过AJAX提交。提交胜利后,这个面板就会收起,而且经过滑动动画睁开下一个面板。看起来就像如许:Boots的单页结账页面,运用了手风琴面板展示每一个步调。用户含辛茹苦才完成了下单进程。过失难以更正,由于高低滚动并不便当。手风琴面板让人十分疾苦和专心。不成防止地,客户请求我们作出改动。我们停止了改版,让每个面板零丁成为一个页面,也就不需求手风琴和AJAX了。不外,我们仍是保存了客户端考证,避免不用要的效劳器恳求。看起来就像如许:Boots的结账页面:每一步都是零丁的一个页面。这个版本的转化率很多多少了。固然我不记得详细数字了,我晓得客户对比称心。6年后(2014年),我正在*Just Eat*任务,发作了一样的工作。我们设想了一个单页结账流程,此中每个局部都有自力页面。这一次,我记下了相关数据。成果是每年能增添2百万订单。要分明,这是订单量,不是利息。这个数据是基于新版本最少一周后,结账转化率晋升的比例得出的。这局部转化成了订单,数目激增52倍。这是我们的挪动端优先的设想:Just Eat的结账分为多个页面。我们还正在设想中进一步简化了付出页面:用户先挑选“现金付出”或“银行卡付出”,然后才会转到相关的页面。惋惜我们并没有对于这项优化停止测试。两年后(2016年),GDS的Robin Whittleton通知我,把每一步分为零丁页面,是一种自力的设想形式,叫做“一页只做一件事”。除了它发生的数据结果,这种形式的面前还有充沛的合理智,这局部我们很快就会讲到。不外正在这之前,我们来认真看看这种形式究竟是什么。“一页只做一件事”究竟是什么意义?一页只做一件事,并不是必然要正在一个页面上只展现单调的元素或组件(固然也能够这么做)。比方说,很能够依然会保存页头和页尾。相似的,也不是说每个页面上只能有一个输入框(当然,这么做也是能够的)。这种形式是指把繁杂的流程分析成多个小碎片,把每个小碎片自力一页展现。比方说,与其把地址输入表单放正在寄送选项和付出表单页面,倒不如把地址输入放正在一个专用页面。地址输入表单有很多输入框,但它关于用户来说,实践上是个单调的、自力的困惑。正在专用页面里答复这个困惑是有事理的。我们看看这种形式究竟好正在哪里。好正在哪里?固然这种形式经常能结出硕果(其实就是指订单和转化率了),我们最好仍是要理解它面前的道理。1. 消减认知负荷正如Ryan Holiday正在《The Obstacle Is The Way》中所说:回忆一下你第一次看到繁杂代数式时的情形。这整个就是一团紊乱的未知符号。可是当你将它分析,自力成各个局部,谜底便真相大白。一步步分析等式,就能自在处理困惑。用户正在填写表单时也是一样的事理,或许其他任何主要的工作都一样。假如屏幕上元素消减,只要独一的挑选,障碍就降到最低。因而,用户会专注于完成使命。2. 处置过失更轻易当用户填写小型表单时,过失能够很轻易被觉察,并尽早出现进去。假如只要一个过失要批改,那边就很轻易,能降低用户抛却的能够性。即便有多个过失,Kidly的地址填写表单也很轻易更正。3. 页面加载更快假如页面的设想很简略,加载就会更快。更快的加载速度能降低用户分开的风险,为我们的效劳树立起信赖。4. 简单于追踪行为一页上文章越多,就越难以理解用户由于什么分开。不要误解我的意义:页面数据剖析不克不及摆布设想,但这是个很不错的副产物。5. 简单于追踪进程和前往上一步假如用户需求频仍提交消息,我们能够把它们以更细的颗粒来保管。举个例子,假如用户半途离开,我们还能够发送邮件,鼓舞他们完成订单。6. 滚动操作消减,以至被覆灭不要误解我的意义:滚动不是什么大困惑——用户的希冀中,网页就是这么用的。但假如页面短小,用户就没需要滚动了。主操作项就更轻易呈现正在屏幕视野内,能强调它的主要性,简单于使命完成。7. 轻易发生分支有时分,我们需求依据之前的谜底,给用户供给一条分歧的途径。举个简略的例子,两个联动的下拉菜单,用户正在第一个菜单里的挑选,会影响第二个菜单中的文章。一页只做一件事能够自在处置这种状况:用户作出挑选并提交,效劳器来决议用户接下来看到什么——自然具有简略和容纳的特性。我们也能够用JavaScript。不外不管是建立仍是确保界面的可用性,都需求更高的本钱。假如JavaScript犯错,用户的体验也就被毁坏了。并且,依据一切这些摆列组合选项来加载页面,会明显施压页面担负。或许,我们能够运用AJAX,但这并没有防止衬着新页面(或许局部)。更关头的是,它并没有减缓效劳端的数据往复压力。还不止这些。我们需求发送更多代码量,而且倡议AJAX恳求,还要处置过失、显现加载指示器。这又让页面加载变慢了。自界说加载指示器是有困惑的,由于它们并禁绝确,不像阅读器的原生加载进度。用户也不熟习它们——绝对于整个网站来说,它们是特别的具有。不管若何,类似性是用户体验的老例,除非真有需要,不然不要突破它。并且,页面上有两个静态更新的联动输入项,这会需求用户依照必然次第来操作。我们也能够经过可用/禁用和显现/躲藏来节制这些输入项,但如许也愈加繁杂。最终,用户的某些更改,能够会招致随后的元素消逝或许转变,这也让人利诱。8. 对于运用屏幕阅读器的用户更友爱假如页面上文章消减,屏幕阅读器就不用远程跋涉穿过很多多余的其次消息。用户能够间接前去第一个题目,然后疾速开端操作表单。9. 简单于更改细节设想一下或人正要确认订单。关头时辰,他发觉付出消息里有一处过失。此时回到专用页面比找到页面*傍边*的某个局部更轻易。用户点击“编纂”,会前去付出消息页面,里头有专用的题目和相关的表单项目。深陷一个长页面中是会令人丢失标的目的。记住,用户点击链接代表他们要施行特定的操作——页面上的其他工具都是搅扰消息。长页面还能够会施压任务量。比方说,假如想要正在一个页面中睁开和收起面板,你就需求更多额定的逻辑考虑。一页只做一件事,这些困惑都获得理解决。10. 用户对于数据更有掌控力用户不会只加载一半的页面。要么全数,要么没有。假如他们需求更多消息,就会点击链接,他们有挑选才能。只需每一步都更接近目的,用户并不介怀点击。11. 处理了机能困惑假如每件事都繁杂非常——单页使用就是一个极端例子——机能困惑就很难处理。是由于施行时候困惑?内存走漏?仍是AJAX恳求招致的?人们很轻易以为AJAX能晋升用户体验,但增添代码量很少状况能发明更快的体验。繁杂性转移到客户端,会袒护效劳端的基本困惑。但假如页面只做一件工作,机能困惑就不轻易发生。假如真发作了困惑,排查缘由也很轻易。12. 它有一种正在行进的觉得由于用户正在不断地前去下一步,会发生一种正正在行进的觉得,正在用户填写表单时给他们一种主动的感触感染。13. 降低丧失消息的风险长表单需求更长时候来完成。假如所花时候太长,页面超时能够招致消息丧失,发生严峻的挫败感。又或许,电脑能够卡死,*《我是布莱克》*里的正角Daniel就是如许的例子。他的安康日薄西山,并且第一次用电脑就碰到了死机,然后数据丧失。最终他抛却了。14. 第二次运用的体验更顺畅比方,假定我们贮存了用户的付出消息,我们能够间接跳过那边一页,间接带他们去“结账确认”页面。这会消减障碍,晋升转化率。15. 这是挪动优先设想的一种弥补挪动优先的设想,倡导正在小屏幕上只出现最主要的消息。一页只做一件事,也遵照着不异的体例。16. 设想进程很简略当我们设想一套繁杂流程时,分析成藐小页面和组件,能够让人更轻易了解这些困惑。还能够便当地互换页面来改动次第。我们一次只研讨一件事,这点和用户一样,能让我们更自在地剖析困惑。这能够减缓设想担负——这种形式让用户利于的同时,还能有如许的附加福利。这种形式合适一切状况吗?也不完整是。Caroline Jarrett正在2015年写过一篇文章《一页只做一件事》,里头讲得很分明。她诠释道,用户调研“会通知你某些困惑组合起来放正在长页面里更适宜”。可是反过去,她也提到了“关于设想师来说‘属于一组’的困惑……关于用户而言,并纷歧定要放正在一个页面上”。她提出了一个颇具启示性的例子,GOV.UK的考证页面中,他们测验考试把“创立用户名”和“创立暗码”先后放正在两个页面上。就像很多设想师所以为的,Caroline感觉把这两者放正在分歧页面有点过分了。实践上,用户对于此一点也不介怀。关头正在于,以一页只做一件事为动身点,然后经过用户研讨,考证把此中一些项目编组兼并,能否能进一步改善用户体验。这并不代表最终成果必然是把页面兼并——正在我经历中,最好的成果常常是把工作拆分隔来,仅此罢了。当然,我也但愿听听你的经历。总结这种低调不起眼的用户体验设想形式很灵敏、高机能、有容纳性。这是真正拥抱互联网的体例,关于自傲满满和当心翼翼的用户而言都很简略。一个页面上展示良多(或许全数)文章能够会营建一种简略的幻象,但就像代数式困惑一样,除非把它们分析,不然很难处置。假如把使命看作是用户想要完成的一笔买卖,把它分析为多个小步调很有需要。这就像我们正在用网页的一砖一瓦来搭建渐进式表单。每一页面前的隐喻,都给潜认识营建一种正正在行进的觉得。我还没有碰到过哪种其他的设想形式,能具有这么多的长处。这就是那边种真谛时辰——谜底老是最简略的。原文作者:Adam Silver原文地址:https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/#关于作者#可乐橙,微信公家号:可乐橙(colachangreen)。UI/UX设想师,存眷互联网,存眷科技。现居杭州,与小同伴们正正在开创途中。大概不是一名优异的设想师,最少是个欢愉的设想师。本文翻译公布于人人都是产物司理,未经答应,不得转载。网站运营
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|中文站长

站长网 WWW.MSNZZ.COM 版权所有 All Rights Reserved.

MSN站长网

WWW.MSNZZ.COM中文站长

快速回复 返回顶部 返回列表