电商网站注册界面设计超全面指南

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

e-commerce-website-navigation-guideline-3-1

编者按:辗转已到第三课,趁着双十一还木有剁手之前,赶紧来学一篇超赞的登录界面设计指南!想想有一天你满心欢喜买了一篮子东西,刚想豪爽地叫小二买单,小二让你先注册,顿时欢喜近无。这时候就该设计师出场咯,今天我们分享10个技巧,帮访客高兴注册!

@AnyForWeb :电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新。精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是“请先注册或登录”,原本满满的购物欲和好心情有可能瞬间大打折扣。

电商网站需要注册和登录才能执行购买流程虽然受到很大一部分用户的不喜爱,但确实是非常普遍的现象。用户之所以如此反感,也不完全因为流程繁琐,网站的表现形式不够友好、人性化也是原因之一,甚至还有网站令用户很直接的感受到一种强迫性。

市场环境让几乎所有国内的电商网站都随大流的加上注册登录环节,那么,如何让这一步骤变得更友好更适用,这是我们需要思考的问题。现在,就列出10条我们的观点。

1. 简洁突出,大胆留白

“挑剔”是大多数网购人群的特性,这种“挑剔”不仅体现在他们对商品的态度,也蔓延到对网站的每个页面。用户不喜欢思考和寻找,他们希望所有自己需 要的内容都清晰的摊在眼前,甚至眼前只有自己需要的内容。这样的要求听起来很苛刻,但只有把握类似这样的细节,才能在竞争激烈的电商市场中占有一席之地。

很多设计师对于留白都有些战战兢兢,生怕让别人误以为是自己偷懒了。其实,在电商登陆页的设计中,留白却是一种挽回用户好心情的好方法。登录注册在用户心里就是一个很麻烦的过程,而大量的留白能让用户感觉“原来只有一个步骤而已”,能很大程度的提升用户体验。

a011f843-5b3e-4897-9d62-0539822cad0d

苏宁易购的登陆页使用了大量的留白,页面整体和细节都十分干净整洁,让用户以最快的速度完成注册或登录这一环节。

一个精致有调性的注册界面,也能减少访客的抵触情绪,来优设搜99个+注册界面就可以看到咯。

2. 以访客利益为主导 

访客利益为先的衡量标准说起来可能比较空洞,很多电商网站也因此忽略了这一点。电商网站的主要目的是尽可能的多推广、多销售自己的产品,于是有的网站就不放过任何一个可以推销自己产品的角落,这样的做法会让用户很厌烦,尤其在登陆页上出现诸如此类的推销信息。

登陆页是一个属于用户的网页,比较一下你的登陆页面,提到用户的次数和提到品牌产品的次数哪个更多?

89c725c9-bb14-4f98-b427-ae8b3ea62892

麦网的登陆页是一个反面教材,网站过于急切的想把自己的商品展示给用户,所以页面上的内容看起来很杂乱,这有可能对营销会有一些帮助,但却造成了不佳的用户体验。

94539d24-cd83-46f3-a4a6-5b3f4bf38e3e

亚马逊的登陆页就与之完全不同,不仅在引导上做的很到位,语句的撰写也更多的为客户考虑,“我的邮箱地址是…”,这样的语言显得更有亲和力。

3. 好的标题是成功的一半

有统计显示,阅读标题的人是阅读正文的人的5倍,这意味着“敲门砖”的重要性。如果你的标题够吸引人,也许用户跟不用等到购买前才登陆注册,让用户心甘情愿的化被动为主动才是交互设计更深层的意义。

ba8cf970-908c-47c9-99ea-b7969d82ace5

嗨淘首页的登录入口标题就与普通电商网站的标题不太一样,“hi”的小标识让按钮更吸引用户点击。

0b2ce0fd-a90a-4094-ae95-f2bc7815d87e

点进登陆页后,嗨淘的标题依然与众不同,相比较普通的“欢迎登录”,“还不是嗨淘网会员?”这样的标题是不是更能让用户愉悦呢?

4. 简化页面副本,切中要害

刚才已经提到,用户根本没有心思在短短的几秒钟之内做任何思考,因此,这里又涉及到了页面副本的问题。如今什么都讲求要创新独特,但在登陆页上还是要尽量避免。登陆页面上的文案还是应该简单一点,用一些一看就能懂,而且没有歧义的文字。

4156ad4c-bcf0-4156-82cf-6d9f4d99b0e1

百度糯米的登陆页真正理解了简化副本的含义。页面文字的简化并不是文字越少越好,而是要用尽可能少的文字把意思表达清楚。左侧的图片上也没有多余的文字,色彩上也选择了淡色系,让整体看起来很舒服。

5. 有趣美观的页面设计

“人不爱美,天诛地灭”,视觉上美观的是事物总能给人更好的第一印象,对于网页设计也是一样的道理。从色彩到布局,登陆页设计要的是一种和谐,如果能在和谐舒适的体验基础上增添一些趣味性,用户会更乐于使用和点击。

8eb264a5-4ad7-4d0c-8879-7212fea19765

京东的登陆页就很有趣味性,左侧图片是略带搞笑的风格,也许能不少让用户会心一笑,带着好心情来登录和购物。

6. 必要时加入动画效果

虽然登陆页面讲求简洁,但不可否认动态的事物总能在第一时间抓住用户的眼球。当用户不愿阅读文字的时候,在网页中加入动画或小视频就是个提高转化率的另一个方法。但这样的做法如果把握不好界限反而会破坏整个页面的效果,甚至影响用户体验,所以还是要谨慎而行。

db871616-2a73-4c83-86f5-23c0acd5774c

在线客服的功能很多网站都有,但在登陆页出现的却不多见。在登录或注册的过程中,其实用户很容易遇到困难,在麦德龙的登陆页中就很贴心的设置了这一功能,并且实现动态效果,让用户在有需要的时候马上找到它。

7. 撰写充满号召力的文案

要用仅仅几个字的短句就抓住用户的心,文案的号召力是很重要的因素,尤其对新用户。这里所说的号召力也并非一定要用短句来实现,使用大动态字体的“注册”也能产生相应的效果,总之能让用户感受到你的活力和朝气,他们才会更愿意去做。

07b9547c-88f9-4018-bc84-a81854532cad

充满号召力的文案一定要够简短够顺口,易迅网的“就是这么拼”虽然称不上多有创意,但着实能勾起用户的购物欲,让用户对登录注册更主动。

8. 尽量减少表单域

从视觉角度来说,表格状的形式不仅能把杂乱的数据清晰化,也能把原本简单的内容复杂化。有调查显示,电商网站登陆页上显示的表单域越少,转化率就越高,由此可见,用户对于填写表格并不感兴趣。ebay

尤其对于首次使用的新用户来说,他们对网站的信任感还很薄弱,在这时让他们填写大量的表格式个人相关信息是很不恰当的,这对之后建立彼此之间的信任感也很不利。

 

ebay的网站走的是极简路线。而表单形式在登陆页面中基本上避免不了,所以,ebay很聪明的只保留登录部分,有注册需要的用户可以点击右侧的按钮跳转到另一个页面。这是一个两全其美的做法,既让登录页面变得更简单,也让网站的条理更清晰。

9. 感谢页面社会化

与其想尽办法让广告在网站内无处不在,不如把握住感谢页面,效果可能也会好得多。当用户完成登录页的转化后,我们可以在页面上添加一些选项,比如为登陆页点个赞,又或是分享到社交网站上,这样能第一时间集中更多的客户群。

10. 使用单开式登陆页

无论从实际操作还是用户体验角度出发,单开式的登录页都是目前最理想的打开方式。如果选择弹框或者直接本页登录,会很明显的不利于用户的使用,Lancome的网站就是一个例子;另外,有些浏览器会有屏蔽弹框的功能。

3de1387d-1060-4fc7-ac28-ca7e6a39cff3

单开式的登陆页设计能更好的引导用户,同时产生一种被重视的感觉,这对于电商网站尤为重要。

ff34e0fc-5ac1-4282-97df-a82f463d8d99 15f9262f-6d95-4d59-9236-61e1198c8bb3

一号店的登陆页是同类网站中做的很周到的,在首页的登录入口位置做了一个鼠标悬停显示的效果,这样可以避免用户因为误点而造成的不必要的点击。

总结:

我们认为,在电子商务网站的登录环节暂时还无法割舍的现在,页面的设计要以用户体验为先,让用户在使用的时候尽可能的减少思考时间。同时,我们也希 望在未来可以让注册登录成为不必要的环节,让用户可以以游客身份直接购买,登录注册的好处只是让购物流程变得更容易或者价格更优惠,以这样的方式让用户主 动注册,让登录注册变成一个用户喜欢的环节。

 

投稿者:design.anyforweb

原文来自:优设

您的赞赏,是对我创作的最大鼓励。

评论( 2

登录后参与评论
  1. 去了优设看了下,看着难受啊,排版太乱了

    回复
  2. 是因为我是莱鸟级吗 为啥标题是注册页 正文都是登录页介绍

    回复
加载中