在设计登录注册之前,注意这10个要点能迅速提高用户体验

有盆友问起注册/登录的体验,结合网上各路高人的分享,于是我总结了一些自己对如何在注册和登录时提高用户体验的一些发现或看法,若观点有不对的地方,望大家批评指正,欢迎大家的分享与交流~

在设计登录注册之前,注意这10个要点能迅速提高用户体验

有盆友问起注册/登录的体验,结合网上各路高人的分享,于是我总结了一些自己对如何在注册和登录时提高用户体验的一些发现或看法,若观点有不对的地方,望大家批评指正,欢迎大家的分享与交流~

1.别让用户一进网站就注册

有些网站/应用一进来就要注册才能浏览,认为游客会因此而注册成为其用户。不料,我个人遇到一进网站就得注册的都不注册,选择直接离开(对某产品已非常了解除外),不知道大家是否有相同体验?偶尔注册的网站天天给我发邮件或推送短信,烦透了!至于个人信息是否被他们卖了,这个还要另说(据调查发现国内很多用户会有这个担忧)。

也有许多网页/应用为了能够留住一些游客, 会在非注册的情况下允许用户浏览,在需要账户信息时才提醒用户注册或是登录。

下图为Twitter网页端:

在设计登录注册之前,注意这10个要点能迅速提高用户体验

而新浪微博网页端改版前并没考虑到这一点。以下为新浪微博网页端登录界面的改版前和改版后,大家可以对比看看~

在设计登录注册之前,注意这10个要点能迅速提高用户体验

改版前

在设计登录注册之前,注意这10个要点能迅速提高用户体验

改版后

但这里需要留意,强社交类应用可能无需过多考虑这点,比如facebook的客户端和QQ客户端。因为这类应用属于好友社交类,但微博属于关注和浏览类的。

下图为facebook和QQ的登陆界面:

在设计登录注册之前,注意这10个要点能迅速提高用户体验

2.可跳过引导页直接注册/登录

某些时候我们是某个产品的老用户,不再需要给新手用户准备的引导页,因此提供直接登录的快捷方式是有必要的。下图为印象笔记的注册登录界面:

在设计登录注册之前,注意这10个要点能迅速提高用户体验

Behance登录&注册页,兼顾了新用户、老用户和游客模式~

在设计登录注册之前,注意这10个要点能迅速提高用户体验

3.别让用户重复填写相同内容

想必大家都经历过:注册某网页/应用时被要求填写邮箱地址两次或重复输入密码。其实大可不必。因为用户大多会记得自己常用的邮箱和密码。若邮箱或密码输入有误时可实时反馈,或者用其它更好的方式解决(下面也会提到),再多此一举填写两次反而容易导致用户流失。

看看一些值得参考的表单设计:

在设计登录注册之前,注意这10个要点能迅速提高用户体验

4.突出必填项

作为用户,最好是无可选字段,可填可不填的都不填,甚至最好不要出现。如果一块信息毫无意义,那么只会浪费用户的时间。不过对商家就不同了,搜集必要的信息更能促进业务成功。

如果在注册表单里面有可选字段,那么我们就要强调必填字段。通常一个小标志例如星号*就足够了。它可以让用户自觉发现并填写必须填的字段。

5.输入时自动填充/自动读取常用账号

我们在登录/注册时,经常需要输入账号和密码。这时候,简化或缩短用户输入时间是各网页/应用优化体验的的方式,来看看它们是怎么做的~

在设计登录注册之前,注意这10个要点能迅速提高用户体验

6.手机客户端提供密码切换可见性

我们输入密码时,密码默认加密状态,但由于手机键盘较小,易误操作,切换密码可见是非常方便的功能。

下图为支付宝和京东的登录界面:

在设计登录注册之前,注意这10个要点能迅速提高用户体验

7.提供第三方快捷登录

有时候使用某个软件,我们想快捷的登录。采用第三方授权登录的方式非常的高效。

来看看在这方面做得比较到位的产品:

在设计登录注册之前,注意这10个要点能迅速提高用户体验

8.科学友好的提示

相必大家都知道注册/登录时提示的重要性,来看看用户体验哪家强,栗子举起来~

下图是Twitter手机客户端和豆瓣客户端登录页,Twitter点击密码输入框时就有相应的提示,减少了出错的可能;而豆瓣是无提示的,直到提交时才弹出错误提示,而且弹出一两秒就消失了,对像我这种阅读比较慢的人来说真是苦恼(PS:截个图截了一万次才成功)。

在设计登录注册之前,注意这10个要点能迅速提高用户体验

9.巧妙的实时反馈

实时的验证会给用户及时的提醒,减少用户在最后提交时报错带来的挫败感。

下图为Twitter在注册时对用户名的要求和手机号码有效性的验证:

在设计登录注册之前,注意这10个要点能迅速提高用户体验

10.需求化或情感化的文案引导

很多时候,访问者转换成用户,这个关键任务落在了再普通不过的“注册”按钮的肩上,而这个可怜的按钮在产品开发中却往往得不到任何考虑和关注。

我们经常重复看到许多网站一样的元素时,已习惯性忽略这些元素,无论这些注册按钮的颜色怎么变,最多只是颜色更显眼一些。但访客对网页是浏览,不会细阅。他们很可能轻易错过关于免费试用或是产品能提供的主要价值或好处的部分。当然,这也说明产品错过了访问者转为用户的机会。

一起来看看这方面做得比较优秀的网站是怎么做的~

在设计登录注册之前,注意这10个要点能迅速提高用户体验

他们都有一个共性,那就是抓住用户心理的同时,与产品紧密联系在一起,直接展示出注册后会给予的好处,鼓励访客采取行动。

以上只是国内外的一小部分栗子,一方面与国际接轨,学习优秀的设计,另一方面列举大家熟悉的产品,方便交流~(PS:具体问题具体分析,不能一概而论。以上观点若有误,请大家批评指正~)

 

作者:Tricia(微信号:WX2225788009),YY欢聚时代交互设计师,前UI设计师。

本文由 @Tricia 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29999/

(0)
CatherineCatherine
上一篇 2017-05-26
下一篇 2017-05-26

相关推荐

  • Mockplus实例之一看就会de五个交互功能

    实例来源:豆瓣新加日记(https://www.douban.com/note/create)先看看豆瓣新加日记的网页:再看看已经制作好的原型预览页面:在原型制作中有五个有特色的交互功能:1 题目和正文切换时,边框颜色变深这里需要交互…

    2016-07-27
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28
  • 用通俗的方式告诉你什么是「交互设计」

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-11
  • 一次虚拟项目练习:支付宝到位-Redesign

    大家好,其实,我是一个视觉设计师。嗯,没错,因为对交互设计的兴趣使然,这次我想在此放一篇交互设计类的文章,以总结我这段时间的思考与设计过程,仅供交流。请多多指教。

    2017-05-11
  • 3D Touch 会为 iOS APP 的交互和界面带来什么变化?

    知乎最新关于3D Touch的讨论 仪思奇,爱好摄影的软件工程师的回答 从官方的应用案例来看,有三个特点: 可以Press的元素一定可以Tap。 触发的界面大多是隐藏式的。 触发的功能大多是非刚性的。 第一点很好理解,因…

    交互设计 2015-09-14
  • 画交互原型方案前,你应该思考的三个点

    一个优秀的交互设计师,一定要从用户目标出发,了解用户的核心痛点,满足用户的需求,只有这样才能打造一个好的产品。

    2017-04-29
  • 观点解读|四两拨千斤的交互设计方法

    最近读了一本书,叫做《细节,如何轻松影响他人》,里面给出了52条意见,每一条意见都是经过大量实验得出来的,有一定的科学依据,而且这些意见也反应了人们的普遍心理,强力推荐销售人员看看。这本书的主旨就是:只需改变一点点,就可以达到四两拨千斤的显著效果。虽然有52条之多,但是我会抽取一些和交互关系比较大的观点进行解读。

    2017-05-02
  • 干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29
  • 【原创】交互设计七大标准(7) 奥卡姆剃刀定律(简单有效原理)

    奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)是由14世纪逻辑学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”▲ 奥卡姆剃刀原理如果你有两个类似的解决方案,选择最简单的。这些所提到其实就是驭繁于简。把事情变复杂...

    2018-02-22
  • Sketch常用插件介绍

    sketch大家应该都不陌生,在互联网设计尤其是UI设计相对于老牌PS,sketch提升了工作效率,改变了以往的工作模式,sketch的强大除了软件本身,另一个不可磨灭的功劳就是丰富的插件。今天给大家介绍几款常用的插件:一、Sketch Measure一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。在线演示: http://utom.design/news/二、Craft帮你提高效率的自动填充神器a.文本自动填...

    2018-04-12