交互细节思考: Calender VS 下拉框

微小的差别给用户的感受可能完全不同。


微小的差别给用户的感受可能完全不同。

交互细节思考: Calender VS 下拉框

近些天,各大互联网公司的春招和暑期实习的网申陆续启动。

网申的基本信息填写,看起来似乎没有什么惹人注目的交互,但只要稍微用心,就能体会到各大公司在页面交互细节处理上的不同,即使是最简单的时间信息的输入,也能体现出公司的专业度,微小的差别给求职者的感受可能完全不同。

下面就腾讯、网易、京东、美团四家的时间信息输入的交互方式来谈一谈自己对交互细节的见解。

京东、美团使用的时间录入控件是Calender;腾讯、网易使用的时间录入控件是下拉框。接下来的分析由Calender和下拉框的对比展开,而仅仅是选择什么控件其实并不能决定一个交互,好的交互不论再微小,也会综合考虑使用情境、用户心理和巧妙的反馈细节等。

1.Calender比下拉框更高级?

比较而言,Calender是比下拉列表框更新奇的控件,我想,采用Calender代替下拉框的基本考虑应该是:

  • Calender只用直观选中一个点,一步到位;而下拉表要进行年/月/日三次选择。
  • Calender在“日”选择时更有优势(30左右的选项,下拉框承载量确实过长。)

先来看第一点,Calender中所谓的选中一个点,在选中这个点之前,还是得对年、月、日三个要素进行定位,实际的思考和选择步骤数量是一样的。

而且,实际的操作过程中,个人认为日历表更麻烦,选择年、月时,下意识地操作是点击左右的箭头,而像下图中京东的Calender,默认日期是今天(年是2017),所以出生日期一般要点十几次。

交互细节思考: Calender VS 下拉框

当然,京东的Calender选择年份信息不止是点击左右箭头这一种选择方法,可以直接输入或者内置下拉框:

交互细节思考: Calender VS 下拉框

理性地去考虑,确实,可以使用比“点十几次”更高效的方法。然而,我们考虑的是用户的实际使用场景和心理特征。

在使用计算机时,用户倾向性是:如果已经启动了一个操作,更多关注的是如何用这种方法把事情完成,而不会转而思考另一种思路,更换输入方式会消耗心理成本,增加挫败感,少了那种“自然而然”的体验。如果目前的方法可以解决问题,是很难放弃已有的思路的,在心情不太放松的时候尤其如此。(开始网申时候,很多同学(不是所有人)其实也会在心理评估自己,多少会有些小小的不安。)

所以的确会有人点十几次来选择年份。

至于第二点,Calender相比下拉框在选择“日”时的优势,我们在第二部分讨论。这里继续来探讨一下京东的Calender控件的设计,这个控件的设计初衷是为不同的需求提供不同的时间输入方法,在默认值为2017年的基础上,至少有以下三种方式:

  1. 左右箭头选择——选择离今年不远的年份(比如毕业时间)
  2. 点击输入框,鼠标在内嵌下拉框中选择——离今年较远的年份
  3. 点击输入框,键盘输入选择——离今年很远的年份

这时间从近到远,一一对应,都有“方便”的输入方法,多方便。但这只是设计者的初衷。作为一个只有一般经验的用户,实际遇到的问题有:

  1. 直接下意识的直接点左右箭头很多次,不想尝试别的办法。
  2. 年份可点击是通过悬停手型进行提示的,也就是说,如果不把鼠标移到年份数字上,从外观上是看不出可点击的特征(如图)的,是不知道那是个可输入框的:有潜在的学习成本。
  3. 即使弄清楚了有不同的方法,还会本能地想一下用哪个(不过这个因人而异,有的人就是喜欢用键盘,看着能输入就直接输入想都不想。),可能存在轻微的选择困难

但如果说,但这个Calender还算常规,下图美团家的这个简直了:

交互细节思考: Calender VS 下拉框

中间两个向下的箭头是内嵌的下拉框,但这种左右箭头、上下箭头的混合实在让人有一种凌乱的感觉,而且在选择过程中也缺乏一致性:①选年份上下选。②选月份可以左右也可以上下选。为什么??因为懒得做年份的左右箭头了还是位置不够了,让人有一种半成品的感觉

2.同样的下拉框,不同的交互体验

相比于日历表,纯粹的下拉框的优势是唯一性,即只有“点击——选择”一种输入方法,在使用方式上没有困惑。

那么这种方法是否高效?我们从年/月/日三项的输入体验分别来看:

  1. :30个选项,使用calender确实更直观好选,但下拉框配上鼠标滚轮的体验其实也不差。
  2. :12个选项,用下拉框承载刚刚好。
  3. :很多选项,下拉框是无法承载无限的年份,但也没必要做。(腾讯的“毕业时间”下拉选项只有2017/2018/2019三个选择,结合了具体场景解决问题,实现起来也更简单)

对传统下拉框进行巧妙的优化,可以实现简洁、高效的使用。腾讯可以根据填写的身份证信息,自动反馈出默认的性别和出生日期:

交互细节思考: Calender VS 下拉框

我们看到的只是各个网申页面身份证号、性别、出生日期的内容在填写时的顺序位置不同,而交互设计师所考虑的是顺序背后的数据的获取和过程的优化

有的人会提到下拉框相比Calender外观较差这个问题,这并不能一概而论,外观是看整体效果的,设计下拉框时稍微用点心思(边缘圆滑点,内部四周合适留白等),并且搭配好整个页面的设计,即使是使用下拉框,仍然可以获得较为良好的视觉效果,在我实际体验中,腾讯和网易都使用了下拉框,但腾讯的设计看上去比网易舒服多了,同样的是使用下拉框,

网易呈现的感觉是“因为偷懒不想更新做日历表,所以用以前一直在用的下拉框。”(下图)

交互细节思考: Calender VS 下拉框

而腾讯呈现的感觉是“因为考虑过下拉框和日历表的不同,认为下拉框更易用,并根据具体场景精心设计了下拉框的外观和功能。”

3.用什么控件不是重点,用心才是

上面所谈到的所有内容,似乎是想证明“别看Calender新,其实下拉框更好用。”其实不是。

之所以探讨这两种控件的区别,以及带有一点对下拉框的倾向性,是因为本人最近网申的是上面四家公司,在这四家的界面中,对个人而言,腾讯的下拉框的使用体验最好。

根据身份证号自动反馈出生日期的功能,并不限于下拉框,也可以用于Calender,同样的,不论是使用哪种控件,如果提供更符合使用情境的默认值和选项等(类似毕业年份只提供2017/2018/2019三个选项,或者京东Calender出生日期的默认年份在95年左右),使用体验也会提升。

所以用什么控件不是重点,用心才是。

当然,任何脱离特定的用户、具体使用场景、资源协调、统计数据等因素的综合考虑所进行的分析,都是耍流氓。

以上对“时间输入框”的分析,对①网申用户群体(20左右年轻人,可能就是认为下拉框low,偏爱Calender)、②具体使用场景(只是站在私人的角度来谈可用性,没有去调研)、③资源协调情况(工程师们天天忙着很多事,校招这界面稍微旧点差点,你喜欢公司你还是会投,不投说明你忠诚度并不高,所以按照工作的性价比,代码就不改了。)的考虑并不周到,有个人的局限性。

 

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

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

(0)
CatherineCatherine
上一篇 2017-05-05 11:51
下一篇 2017-05-05 14:12

相关推荐

  • 商业化的产品设计方向

    商业型产品顾名思义面向的都是企业级用户,这是与消费型产品的最大不同,消费级产品关注的是个人用户,所以在产品角色分析上商业型与消费型就存在很大的不同,但在一定程度上产品设计又是相通的,可能很多人已经比较了解消费级产品了,所以我现在就剖析一下商业型产品。

    2015-01-06
  • 打造有温度的H5动画:用户的故事将会被如何演绎

    2016年末,各路APP也纷纷展开一轮轮的数据厮杀,从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间,在这个既难忘又不舍的2016年,用户的故事将会被如何演绎,在寒冬带给用户怎样的温暖回忆呢?

    2017-05-11
  • 2016天猫双11背后的品牌故事:全民剁手“All in one”

    2016 双11,“All in 1” 主标识,意为“精彩不止一点”。让我们随着阿里小编一起了解2016天猫双11背后的品牌故事。All in 1!将全平台、全品牌、全球融合到一点,迸发出更精彩的世界!

    2017-05-17
  • 互联网+时代,让用户体验到你的专业性

    物质种类丰富之后,市场要面对的新重点就成了“用户体验”。只有“功能”的商品即使做成百宝箱也只能昙花一现,能够让客户用得舒心用得愉悦才是现代产品的应有魅力。在企业竞相提升体验的大潮中,“别让我等、别让我想、别让我烦”的用户三大心态仍然是大部分厂商的改良依据,然而总有一些人可以在这一基础上做得更加精细周到,成为“体验战”的大赢家。01曾经被无视的用户体验如今是神兵利器在计划经济时代,消费者的选择余地很小,导致了厂商只注重“功能”不注重“体验...

    2018-05-07
  • 极简主义风格:要讲究四大设计要点

    极简风并不是简单的做减法,这也是极简设计最棘手的地方。想必设计师都明白“少即是多”这个概念,但是要怎么在实际设计中践行这种极简设计的理念呢?今天的文章,就帮你梳理一下基本的法则,帮你在设计之前就理顺思路。“完美的设计是可以实现的,也许你还可以向其中加入更多的东西,但如果想从中移除某些元素,就完全不可能了。”

    2017-05-11
  • 智能产品的交互设计,不做到这样可不行

    我们终将以自然的方式与机器交流。在2012年圣丹斯独立电影节上,影片《机器人与弗兰克》赢得特别奖,该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事。在2017年AI大热之年,人们能否像电影里的弗兰克那样,以人对人的方式与机器交流,这在人机交互学科里定义为“人机自然交互”。何为自然交互?简而言之就是以日常交流方式与计算机进行交互。何为日常交流方式?就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。人机交互正迈上新台阶人机交...

    2018-02-07
  • 用户体验调研活动开启,多重奖励等你拿!(2场公推冲击4连红)

    20180329,星期四,欢迎接收购彩汪官方微信公众号的免费推送。昨天大元复出拿下了两场全红,状态可以说是非常好。两场欧赔1-3-4的深盘,有80%以上的彩民是认为一场正路加上一场下盘。结果两场都打出了1球小胜的结果。大元昨天就是运用了欧赔亚盘结合盘路的分析法,最终命中了2场结果。可以说在实战中盘路对于小联赛都有着不错的效果。今天有4场竞彩比赛,除开早场的澳超,晚上依然有2场英甲(其中包含一场单关深盘)+1场葡超,英系比赛是大元一直擅长...

    2018-03-29
  • 别被数据骗了——视频搜索页面设计研究总结

    如今的互联网PM都会对产品数据进行追踪,作为自己的KPI指标。但是在实际的设计结果中,令人满意的数据有时却并不一定会说明产品的实际使用效果,数据呈现的结果和用户的实际使用体验有时甚至是背道而驰。某用户:点击之后进去就直接播放了,有时候开着声音吓一大跳,会马上点出去。哦,你说按钮上的文案啊,没有注意呀!

    2017-05-02
  • 从事交互设计3年多,聊聊交互设计师的核心价值

    很多同行说交互设计 师就是要对用户体验负责,这点我当然是非常认同的。但是交互设计 师并不是独立的个体,虽然我们时常和产品、运营、开发因意见不同而产生争论,但站在公司层面来说,我们和产品、运营、开发等部门是一个大团队,我们既服务于用户又服务于大团队,服务于公司的商业价值。如果你只谈用户体验可能会不赚钱,只讲商业目标则会失去用户,用户体验和商业目标是需要保持平衡的。

    2017-09-16
  • 基于任务的导航设计

    对于不同平台导航的交互形式与视觉样式,相信有不少的文章来介绍与总结。本文所介绍的是关于导航规划思路。一个比较小众的领域,基于任务的导航(Task based Navigation)。 目前产品主要使用基于对象的导航和基于…

    2015-11-03