从这几个案例入手,学会设计APP注册流程

从注册这点小事儿上看如何提升细节设计和用户体验,希望对一些新入行的童鞋有所帮助。


从注册这点小事儿上看如何提升细节设计和用户体验,希望对一些新入行的童鞋有所帮助。

从这几个案例入手,学会设计APP注册流程

互联时代的产品都离不开:

从这几个案例入手,学会设计APP注册流程

直白点就是什么样的环境下?为哪些人?提供了哪些事情的解决方案?

场景

PC:室内的+相对沉溺的+长时间的

Mobile:随时随地的+碎片化的+随时转身离开的

用户

产品定位的受众人群,可以是学生、孕妇、求职、买卖……,比如招聘类的目标受众就是需要找工作的群体;房租中介类就是需要租赁、买卖房屋的群体等等。

任务

帮助这些受众完成他们想要得到事务的一种逻辑流程。

比如我们可以在某宝上:搜索想要的商品-锁定-下单-收货-评价,这就是一套购买流程,提供了用户网络购买流程的解决方案。

这里我们就用户注册这一场景,浅谈设计任务及其背后对思维逻辑,然后去提升细节设计。

到达注册页面的途径

用户到达一个app的注册页面一般有4种渠道:

从这几个案例入手,学会设计APP注册流程

当网易音乐的第一批用户从豆瓣平移过来之后,用户就不再是大家的了。赢取一个新用户比维护一个老用户的成本要高很多,所以当用户来到了注册界面作为设计师就要尽可能到创造舒适的用户体验,尽可能多的帮助用户注册登录。

信息构架及任务流程

信息构架

就是包涵哪些信息,这些信息是怎样穿插在一起的。

注册模块概括来说由2部分组成:用户信息+验证。用户信息包括但不限于:

  • 手机号码
  • 邮箱
  • 账号
  • 姓名
  • 性别
  • 兴趣

……

然后再由不同产品的定位决定类别的从筛选到简化。

验证码:是一种区分用户是计算机还是人的公共全自动程序,防刷、防黑、防灌水之类的程序行为。

被广泛采用的有:短信验证码、动态验证码组成。

任务流程

可以分为逻辑流和页面流,逻辑流就是数据逻辑针对开发编写,页面流可理解为页面的跳转关系针对用户。

简单以去哪儿的注册流程中的输入手机号和验证码为例:

下面是我们呈现给用户操作的页面流

从这几个案例入手,学会设计APP注册流程

下面是介于页面流的逻辑判断

从这几个案例入手,学会设计APP注册流程

控件的状态

注册场景下涉及的控件一般是:输入框、按钮、验证码。

输入框

供用户输入信息,一般包含:提醒文案、正文、示措提醒

按钮

引发即时操作,即当用户点击后,触发即时操作。作为基础控件之一,按钮广泛应用于不同平台的所有产品中。通常位于一个或一系列操作的底部或右方。

按钮的一般状态:

PC:normal、hover、down(pressed)、disabled

Mobile:normal、onclick、disabled

从这几个案例入手,学会设计APP注册流程

这里简单说一下disabled。从去哪儿注册的例举可以看出,当input为空时,关联按钮为disabled的状态,这是采用了放错的原则:如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免误按。

产品中的辩证法与相对论

学会用辩证法,去分析问题。在产品道路上同样适用,有时候得到就意味着失去,用辩证法的方法看问题,利于分析事情的二面性,衡量其利弊,进而找到真正适合自己产品的合适的方案。

拿动效举个例子,动效本身并没有错,但是一个庞大的产品就不宜使用过多的动效,原因:

  1. 因为动效会加重系统负担;
  2. 为了不断延长其生命力需要不断的版本迭代,很可能一些辛苦设计开发出来的动效随着产品的发展方向而被很快淹没;
  3. 最为重要的一点,对于用户而言动态的更易于吸引注视,动效的增加会使原本复杂的页面更加复杂化,更难于找到页面的重点内容而失去操作方向,事实上这个时候动效已经转变为一种打扰。

很遗憾,这个观点没有找到合适的案例进行分析,淘宝、京东、美团等在动效方面都表现得比较安静。

下面是一个天气app的页面,因为app本身很简单,就是展示天气而已,动效的增加不仅动态的解释了天气的状况也让原本单调的页面多了一丝趣味,而用户也并不会因为动效的加入而迷失。这就是相对论,简单的事务可以做些复杂的处理。

从这几个案例入手,学会设计APP注册流程

同样是列表,淘宝为什么在页面中没有采用一些动态的展示or特效,设计欠缺?开发不够?答案是否定的。淘宝营造的购物场景应该是尽量沉溺于页面流中的,尽快的找到用户想要的商品,顺利的转化购买,相信这也是作为电商的本质目的。复杂的事情简单化。

从这几个案例入手,学会设计APP注册流程

下面我们来欣赏一些按钮的微交互

从这几个案例入手,学会设计APP注册流程

从这几个案例入手,学会设计APP注册流程

从这几个案例入手,学会设计APP注册流程

设计背后的逻辑思维

随着时间流逝,科技发展,人们对事物认知不断提高,注册场景下的设计也不断进步。揣摩变化,思考逻辑,提升细节设计。

PC互联期

(请忽略内容,仅观察表现形式)

首先明确的是,注册页面被设计出来的目的是希望用户能够填写信息并成为我们的用户。但是,当用户看到这样的一张信息较多的页面,视觉压力和逃避心理就来了。

除了视觉和心理压力,我们还可能会被每一行的必输提醒而吸引,不过行行必输,行行提醒有点过,视觉干扰也就来了。

从这几个案例入手,学会设计APP注册流程

费茨(Fitts)定律告诉我们,当我们需要观察的2个事物距离越远时,所需要的时间就越长。

从这几个案例入手,学会设计APP注册流程

人眼阅读的轨迹顺序从1-8,这种排列方式受标题字符数的制约。有了排序参考,大家就可以考试是不是还有其他更好的排列方式?

从这几个案例入手,学会设计APP注册流程

相对于上面的注册信息,这种拆解信息的方式不管是视觉还是心理感受都会一些,而且对用户必填信息进行了提炼。这种方式后也被应用于移动端。但是拆解步骤不宜过长,否则用户会失去耐心而中途放弃注册,这是我们不愿看到的。

从这几个案例入手,学会设计APP注册流程

移动互联期

从人随网走到网随人动,用户体验收到前所未有的重视,涌现出大量的专业设计和体验设计师。对于产品注册信息的提炼由多样逐渐走向结构简单、信息简洁,以用户为中心的设计越来越被更多人接受。

下面来看下别人家的注册页面及设计思路。

淘宝的注册流程相对来说是比较长的。必填项:手机号、验证码、会员名、密码*2,有防错机制,有号码&用户名2次确认。但是第一次支付密码输入页面没有自动弹出键盘。不过整个跑下来还是挺轻松,复杂的事情简单做,困难的事情分解做。

从这几个案例入手,学会设计APP注册流程

携程的注册流程较简单,必输项:手机号、验证码、密码。无防错机制。2/3中有已输号码再现,不过却隐藏了中断部分。揣测隐藏的号码的目的是保护用户信息不受偷窥?不过以个人愚见,在注册环境,保证用户正确的输入信息,快速的完成注册才是NO.1的任务,所以这里的防保护机制会有些买椟还珠的感觉。

还有一点,激活输入页面时,键盘都没有弹出,需要点击input框调出键盘。

但是提示文案相比下引导性较强。

从这几个案例入手,学会设计APP注册流程

美团的注册流程里,在电话输入上作了放错,然后就后面就没有然后了。有防刷机制,比如当连续输入2次经系统检测为已注册的用户时,会弹popup要求人or机验证。对于输入号码有部分显露。注册第3部界面中的小尖头有误导用户后面仍有流程的误导。

从这几个案例入手,学会设计APP注册流程

去哪儿体验是相对好的,必输项:手机、验证码、密码*2,有防错机制,有密码6位数提示展示。

从这几个案例入手,学会设计APP注册流程

苏宁的注册流程,必须项:手机号、验证码、密码,有防错机制,但是允许你同样的号码再次注册,代价就是抹掉所以数据,从v5变成v0。这样来看,对于形同手机注册的提示文案还是不够的。

从这几个案例入手,学会设计APP注册流程

下面分享一下个人小案例及背后的思考,场景:注册;输入项:手机+验证码+注册btn

当时的第一版就是左侧的,也是比较保守的,不出错的。视觉线:填写手机号-看一眼验证码输入框-点击验证码按钮-回来输入验证码-点击注册。在这个过程中,验证码输入框被2次阅读,当时觉得这是一种浪费,所以出了右边的方案。视觉线是直了:输入手机号-点击验证码-输入验证码-点击注册,但是从手机号到验证码跳了一行,思路会突然断一下,再着一按钮直接冲在最前吗有点突兀。

从这几个案例入手,学会设计APP注册流程

那怎么样才能视觉线和思路保持一致呢?发现仅是一小步,将验证码按钮上移到输入手机一行,这样在用户输完手机号码时,看到验证码很自然就会点击,然后输入完成操作。当然“除非有更好的选择,否则就遵从标准”。

从这几个案例入手,学会设计APP注册流程

说到手机号码,有意看了下苹果在电话数字上的处理,虽然比起银行卡只有11位的数字,还是在不同场景下都做了分段处理,不得不说苹果的体验越来越细腻。当然这是更多的为了识别他人的号码。

从这几个案例入手,学会设计APP注册流程

虽然用户输错自己号码的几率是比较低的,但是一般来说,用户输入完毕后都会快速秒扫检查号码的正误,如果我们采用了分段的现实方法,识错上应该会容易些。

从这几个案例入手,学会设计APP注册流程

总结

看了这么多案例,那么我们在设计注册页面的时候怎么去思考呢?

  1. 了解设计场景,设计目的。也许我们投入了很多资源做引流,当用户到达这个页面时,想尽办法留住他们。
  2. 学会站在不同产品的立场分析别人的设计思路,而不仅仅是视觉表现。
  3. 视觉简单,逻辑通畅。
  4. 目前大部分的注册流程为分解的形式及一站式,结合产品实际场景选择适合自己产品的,尽可能的简化信息、缩短流程,提升注册达成率。
  5. 对于交互对象的多层次视觉呈现,比如文案提醒、示错、验证提醒,按钮的响应反馈,都是提升用户体验的小细节。
  6. 在对象对齐及排列方式,学会依靠一些定律,法则,可以是我们在迷茫不定的时候,看轻方向。
  7. 不断学习、思考、对比,提升自己对事务的认知。

只有理解设计背后的思绪才能提升细节设计,也只有明确了设计场景和设计目的才能在不同的设计方案中找到最合适的那个。

就像买一件衣服,我们总会盯着线头、走线、针眼、纽扣、锁边这些点以此来评价一件衣服的品质,界面已是如此。经得起推敲的设计才是好设计。

本文仅笔者观点,不到之处欢迎大家沟通指正。

最后分享一下笔者在设计过程中的思考三步法则:

  1. 为什么要做这个事情?
  2. 怎么去做?
  3. 还有没有更好的解决方法?

“小是最伟大的关怀”2016和大家共勉。

 

作者:湖湖  途牛UED

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

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

(0)
CatherineCatherine
上一篇 2017-05-25 15:18
下一篇 2017-05-25 16:26

相关推荐

  • [译]可用性之外:使用劝导式模式设计(上)

    你可能已经有一个很好的产品。你做了可用性设计,你也拥有了几个经常使用你产品的核心客户。然而,这在激烈的竞争中往往并不突出。你的产品具有高跳出率,只有很少的用户会回到应用中,用户比你期望中更快地抛弃你的产品,一般情况下,用户不会深入所有你的产品所提供的体验。

    2017-05-27
  • 从用户体验到品牌形象,营销的道路有多远?

    在数字化时代,如何提升品牌形象和用户体验,是两个营销的核心问题,品牌形象塑造消费感知,用户体验决定消费忠诚。企业重要的战略资源之一是:优质化的内容。而真正做内容营销的门槛极高,唯有真正强大的IP内容,才具有引爆市场与号召市场的能力。什么是营销IP,即知识产权(Intellectual Property),大IP,本身是产业链也延伸,具有黑洞版的吸金能力,是从招牌、内容、产业链等的延伸式营销。举个目前比较火热的例子,电影《魔兽》,根据网络...

    2018-02-02
  • 2018年的用户体验状况

    这是由一位美国作者站在美国的视角写的文章,即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于潮流。1、更简单的导航方式导航体验是2017年的热点话题之一。为了设计出顺畅的用户...

    2018-03-19
  • Axure产品原型在手机上运行的完整教程

    图1 模拟丁香园的高保真原型在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌,就必须做产品的高保真原型进行模拟,这时如果做出来的原型能运行在手机端,那再好不过,如图1(注:上图是仿照丁香园的家庭用药,做的一个高保真原型,算是免费给丁香园打广告,是不是考虑给我点广告费?哈哈)。原型制作软件有挺多,不过个人使用之后,...

    2018-03-06
  • 广告Banner :20种高度可行、转化率高的设计思路

    Banner广告是快速高效的吸引用户的重要手段。Banner广告在网站中通常都占据着不错的位置,它们的转化率和它本身的设计优秀与否息息相关,最重要的是,它要能迅速的吸引用户的注意力,通过优秀的文案和视觉让用户立刻马上点击。今天的文章,我们通过一系列优秀的范例,帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

    2017-05-03
  • 交互设计流程的“闭环”问题

    交互设计师有一项很重要的工作就是定义任务流程。在接到需求之后,设计师需要把抽象的需求设计成具象的流程,然后再把流程分配到不同的界面,最终形成成品。设计流程不难,但是设计好的流程非常难。举个简单的例子,注册这个流程可以这么定义:

    2017-05-27
  • 交互设计与人类行为习惯的一些思考

    在交互设计中,利用很多的人类行为习惯作设计指引,如从左到右的阅读习惯,格式塔原则的视觉习惯等。很多的研究者对此已经深入研究,本文主要围绕习惯与交互设计的联系及相互影响的思考。好的交互设计是培养用户获得更好的行为习惯,更好地解决问题。

    2017-05-26
  • 【译文】“防止用户犯错:避免有意识的错误”

    西南航空的手机网站对已经过去的日期使用了灰色的背景,使你明白在预订一个航班时这些日期是不可选择的。不幸的是,对下个月的日期也使用了相同的设计,这意味着不可选。Polarr是IOS系统里很受欢迎的照片编辑工具。右侧的编辑控件(温度,色调等)需要你点击那个方块,然后向左或向右滑动而改变参数。然而,这些控件并没有展示出用户应该如何与其互动,所以新手用户很可能需要试错几次才能明白应该如何正确的使用这些功能。另外的一个交互困难就是:由于控件在屏幕的最右侧,你可以很轻松的向左滑动而减少参数数值,但水平空间有限,当你想向右滑动增加参数数值就会存在困难。IOS 8中,为帮助视力不好的用户阅读体验,提供放大显示图标和文字的功能。但是改变变焦需重新启动手机,这是一个重功能,需要花费一些时间,所以IOS系统会在你使用这个功能前,预览变焦完成后的样子。这个体贴的预览功能可以帮你评估出你是否真的需要操作变焦。Hipmunk提供快速浏览恢复选择机票过程的所需信息,甚至是被打断。在预订过程中的第二步,它清楚地显示了旅行的日期,在机场的问题,最便宜的出发程已被选中,以及用户被要求再选择一个回程航班。即使注意力分散了一段时间后,用户可以简单地恢复这个过程,而不会不小心偏离原本对航班的计划和要求或尝试重复已经完成的步骤。苹果新出的图片软件运用了一个很传统的对话框确认用户是否真的想删除最近爬山旅途中的照片,并且通过highlight 24张照片表示删除范围。更好的是,确认删除操作的按钮清楚地标示是删除,而不是一般的确认。Gmail 提供对破坏行为很有帮助的撤销功能,如误删了92封邮件。这个功能被证明是非常有用的,Gmail现在支持在发送email中允许点击发送键30秒内中撤销。Tweeter的字符限制条件很有名气,他们在用户超过那个字符限制前就会提示用户剩余的字符数。当一个tweet过长是,他会显示出超过的字符,高亮出那些超出的字符,并且使发送键不可使用,以让用户明白他们需要如何修复错误。

    2017-05-30
  • Axure画产品原型最新常用组件分享(一)

    画产品原型是产品经理必备的一项硬技能,一般使用axure进行制作,很多人可能都知道axure,但是怎么利用axure把产品原型画的又快又好并不是一件容易的事;原型要画的好,最重要的不是你掌握多复杂的功能,而是要制定好设计规范;下面我把移动产品原型制作中常见的一些元素按照一定的设计规范制作成组件分享给大家,你只要把相应的元件拖动到自己的工作界面,简单修改文字就可以使用了,这是第一个部分,包括以下内容:一. 手机外壳二. 空页面模板三. 常...

    2018-04-05
  • QQ国际版视觉探索:准备了两套视觉设计方案

    QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长,我们对当前视觉提出一个疑问:现有产品的视觉形态,是否符合国际版的产品调性?基于这个问题,我们开启这次探索之旅。

    2017-05-08