双十一来了,淘宝的登录页有bug?我有解决方案!

关于淘宝的登录页设计中的BUG,本文作者就用所学的用户研究、交互设计以及产品经理相关的知识来分析一下,并提出了自己的解决方案。


关于淘宝的登录页设计中的BUG,本文作者就用所学的用户研究、交互设计以及产品经理相关的知识来分析一下,并提出了自己的解决方案。

双十一来了,淘宝的登录页有bug?我有解决方案!

双11来了,小伙伴们有没准备“卖卖卖”呢?作为资深剁手党,今天想着去淘宝逛逛,囤点货,准备11出手。嗯,电脑屏幕查看、比较商品信息更方便,所以打开浏览器,找到淘宝的页面。嗯?要输入密码?也对,淘宝设定的是两周内没有登录就需要重新登录,为了用户信息安全嘛,可以理解。

“啪啪啪……”正当我自我陶醉(人们在做自动化的动作时会产生一种流畅的快感)地输入密码的时候……什么鬼?!怎么没了?跑到“扫码”这里了?

双十一来了,淘宝的登录页有bug?我有解决方案!

冷静!冷静!冷静!最近不是在学用户研究、交互设计这些东西吗?所以就此来分析下。

一. 发生了什么?

1. 用户使用“登录”功能的时候出现了错误(用户在输入密码时页面自动跳转到“扫码登录”),由于没有准备导致用户的动作被打断。

2.用户体验:用户无准备,输入动作被打断,用户产生负面情绪(快感被阻断,烦躁,愤怒……)

二. 淘宝的登录页的设计

双十一来了,淘宝的登录页有bug?我有解决方案!

经过我的分析(猜测),淘宝的登录过程应该是上图这样的流程。

为什么要设计成这个样子(打开淘宝页面,出现“密码登录”,1秒后自动跳转到“扫码登录”)呢?我再分析(猜测)。

  1. 告诉用户我有“密码登录”功能哦,不过你要等1秒钟,我跳到“扫码登录”功能后,再点击登录页的右上角的电脑图标返回“密码登录”。(设计师蛮调皮的)
  2. 我们鼓励“扫码登录”,因为它可以防止盗号,更安全。
  3. 给你制造点麻烦,让你选择我们认为最安全的方式——扫码

三. 问题是?

1.用户在没有准备的情况下,用户会产生被打断的感觉,这种打断会让用户产生不好的情绪。

2.用户在准备的情况下,需要等待(大概1秒)。人们对等待时间的耐受力:

双十一来了,淘宝的登录页有bug?我有解决方案!

  • 0.1秒在该时间内显示反馈结果用户是可以接受的。
  • 1.0秒是用户保持不间断的思维流的限定时间,用户会注意到这样的延迟。
  • 10秒是保持用户关注当前对话框的极限时间。在移动终端上,时间的标准可能还要缩短。

参考:http://blog.sina.com.cn/s/blog_5359480b01015vm9.html

设想一下,用户有准备,知道页面要进行跳转,那么用户需要等待跳转,如果用户不喜欢扫码登录,那么这个跳转对用户来说就是浪费时间,进而产生厌恶情绪;如果用户喜欢扫码登录,那么1秒的延迟似乎可以接受的。

四. 怎么办呢?

关于登录与注册页设计思路,参考了“人人都是产品经理”上诸位大神,另外浏览了几家主流的电商网站,加上无脑的臆想,给出以下三种解决方案:

方案一

玩花的,多数网站登录页设计,显示密码登录或扫码登录,同时有去向另外一种方式的快捷通道。比如淘宝的跳转后的页面。

双十一来了,淘宝的登录页有bug?我有解决方案!

方案二

双显,比如下面京东(左图)和新浪博客(右图)的登录页面。两种登录方式同时显示在一个页面,用户一目了然,并且可以自由选择自己喜欢的方式。个人更喜欢新浪的登录页面。不仅提供了选择的权利,还不会造成干扰或者困惑,登录方式的变换最多一个动作。

双十一来了,淘宝的登录页有bug?我有解决方案!

双十一来了,淘宝的登录页有bug?我有解决方案!

方案三

改进淘宝的设计,用户进入页面后显示的是“密码登录”界面,用户鼠标光标点到用户名或密码(页面不跳转到“扫码登录”),用户完成登录;用户1秒内没有输入,页面跳转到“扫码登录”页面,同时用户可以选择扫码登录或者回到原来的“密码登录”页面。

双十一来了,淘宝的登录页有bug?我有解决方案!

综合来说,我个人更喜欢第二种设计,最大化展示了登录方式的选择,用户几乎不会受到干扰。第三种方案也不错,去除Bug后,用户有足够的时间选择登录方式,并且不会在输入用户名和密码的时候被强制跳转到“扫码登录”界面。

限于个人能力和眼界,以上仅为个人观点,欢迎大家一起讨论。另,本人为17年应届心理学硕士研究生,非985,211,正在自学用户研究、交互设计以及产品经理相关的知识,并寻求一份相关的工作。

双11就要来了,祝小伙伴们节日快乐!

 

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

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

(0)
CatherineCatherine
上一篇 2017-05-17 02:15
下一篇 2017-05-17 03:59

相关推荐

  • 三种形式,浅析手持端日期控件

    日期控件,相信行业内所有的同学都不会陌生,尤其是交互的同学,可能会看得更加的仔细,日前,我们所接触到的各类app很多都有日期或时间的选择,而这些同功能的控件都以各式各样的姿态及交互呈现在我们的面前,出于自己的好奇,对这些不同行业、不同使用场景下的同一功能做了一个收集及总结的分析。

    2017-05-08
  • 什么是交互设计?

    这是我在知乎上的「什么是交互设计?」的一篇回答,重新梳理了一下逻辑,分享给大家。(长文预警 : 阅读时间 15 分钟)如果我们问,交互设计是什么?从网上各种定义中似乎能很快就能知道答案。交互设计,又称互动设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。—— 来自 I...

    2018-02-03
  • 案例分析:怎样避免交互设计中的「刻板印象 」

    刻板印象有好有坏。在合适的场景、时间、项目中,去最大化它的积极作用,尽量避免它的消极作用,才能真正的平衡设计、工作,甚至生活。

    2017-08-04
  • 关于可用性测试的一点心得

     最近在工作中做了不少的可用性测试,抽空闲的时间总结一下自己的心得,以下是我们团队展开可用性测试的步骤与方法。

    2017-05-28
  • 【科普】给想学交互设计的同学的一些建议

    最近在知乎上,有很多人问我,交互设计有什么好的学校?出国读研和在国内读研应该怎么选择?就业怎么样?其实在行业内和行业外,信息存在大量的不对称,很多同学都不太清楚怎么入门和学习交互,我觉得有必要专门开个文章聊下这个话题,算是一个有工作经验的人给新入行或者将要入行的同学的建议。1. 交互设计是否需要读研?我的答案是:看你的情况。每个人情况不同,自然对应不同的选择。情况A:如果本科就受过交互设计方面系统的训练(学校课程、实习等),有一定天赋和...

    2018-02-11
  • 微信团队出品-Sketch插件合集Wesketch

    静电说:微信团队刚刚出品了一款针对Sketch的插件合集-Wesketch,让我们一探究竟吧。WeSketch能做什么?更高效的团队协作,如:UI Kit 同步、色板同步等。更快捷的交互设计,如:图标库、自动连线、标记注释、全局替换文字、字体、颜色。更精准的前端还原,如:补齐宽高导出图片、导出 CSS 代码(支持小程序)等。如何下载和安装?访问Github地址:https://github.com/weixin/WeSketch/blo...

    2018-03-18
  • 在网页设计中如何少让用户费脑筋,保持操作流畅

    除了引导用户,还要减少他们的认知流程,以保持流畅状态。千万别把计算这种事情丢给用户,让计算机来处理。

    2017-05-23
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07
  • 《用户体验要素》

    大多数人都体验过网购,这种经历几乎每一次都是一样的:你到达网站,寻找你想买的东西,然后下单(提供你的住址和电话号码),然后网站将物品快递到你的手中。这个清晰、有条不紊的体验,都是由一系列完整的决策(大大小小的决策)组成的:网站看起来是什么样、它如何运转、它能让你做什么。这些决策彼此依赖,告知并影响用户体验的各个方面。如果我们去掉这些体验的外壳,就可以理解这些决策是如何做出来了。作者给出了一套用户体验设计的科学方法,借用此方法,我们可以对...

    微信热点 2018-04-12
  • Axure RP 7.0软件安装教程

    如何在软件屋下载软件?目录查询编号首页回复编号点击链接输入密码提取文件点击查看详细步骤Axure RP 7.0安装资源下载地址:链接:https://pan.baidu.com/s/1rafwH1U密码:m6fo安装中有任何问题请咨询软件屋私人微信:wei-c-q-186软件介绍:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。...

    2018-03-04