04月 27, 2013

吉州青原惟信禅师,上堂:「老僧三十年前未参禅时,见山是山,见水是水。及至后来,亲见知识,有个入处。见山不是山,见水不是水。而今得个休歇处,依前见山只是山,见水只是水。大众,这三般见解,是同是别?」以禅宗三见为开场,是对本问题的思考,并非故做高深,实在是此句入心。我们以手机的发展做一个小例,初初手机只是用来进行通话、发短信的工具(见山是山),随着发展渐渐进入了智能手机的时代,触摸屏的发展改进了交互体验,打破了传统手机的框架,手机这一物件承载了越来越多的功能,不光局限于通话及短信(见山不是山),未来的发展手机功能被抽离出来,附着到其它如下面将要说的私有物品上,像Google Glass,那手机依然是手机(见山还是山)。

「过了山,眼界就开阔了」以这一句做为破题之文,早先也尝试过进行趋势分析2013 年,有哪些界面设计风格趋势? 今日算是个补全吧,分析确非强项,只能在自身知识范围内寻找可能形成的设计趋势,如果有遗漏及不足,请补充说明,感谢!下面让我们开始吧。

图2 「人是世间万物的尺度」

「人 是世间万物的尺度」-普罗泰戈拉,设计从人类使用工具之始就产生了,随着人类文明的发展,若干年来,工具发生了天翻地覆的变化,但期间人始终为人,操作电脑的现代人与最初使用石斧的原始人在生理特征上几乎没有发生任何变化,双手、五感、大脑… 设计的本质并没有发生变化,以人做为标准依旧可以度量设计。

1.私有物品智能化:也就是时下流行的穿戴式设备,个人不太喜欢这个词,感觉狭隘了,看看最近流行的被智能化的私有设备,Google Glass、Galaxy Altius、Nike+ Fuelband、Fitbit、Jawbone UP、Pebble…… 如果尝试画一个圈(如图2),中间是人,离用户最近、最核心的圈子就是私有化的一些设备,再外圈一些才是PC、家电等,所以如果有公司能够占据私有物品圈中的核心地位,那也将意味着给它带来惊人的市场和机会,例如:手机,以及iPhone给苹果带来的改变,它算是私有物品目前智能化度最高的物件了。如果将人们最常用的私有物件看做是一个系统,那么在核心圈中,手机将担任智能中心的一个角色,其它设备可能都将与手机进行互联,打造一个私有化的智能圈。 Google推出的Glass明显加速了这个进程,令各大厂商投入私有物品智能化的市场当中。

图3 Google Glass

2.智能家电的变革:随着通信技术的成熟,移动互联网的成长,以及私有物品智能化的普及,智能家电的发展已变成了一种必然趋势,家电行业也需要在这种时候突破传统家电的框架,为未来家电注入新的活力,需要以全新的眼光也看待传统的东西,将已知变成未知,相信这会为我们带来无数的可能性,看看Nest恒温器的例子,这款产品很优雅地解决外观、功能、节能、以及智能等问题,在用户使用一段时间后,它将了解用户对温度的习惯。就像当年苹果公司发布iPhone时,重新定义了手机,如今Nest所做的也是同样的事情。其实,创新不一定要在前沿行业,只要你有足够的创意,在传统行业一样可以给用户带来惊喜。在这个领域当中还有很多需要进行重新设计及定义。接下来看一下eico为我们带来的 Project HALO,重新诠释了洗衣机的定义,同时还有很多可以值得去开拓、挖掘的地方。相信国内还有很多设计公司接到了来自家电行业的类似设计需求,变革正在悄然发生,难道你还要默默的等着吗?

Project HALO 视频

3.机顶盒的战火:小米盒子的推出确实搅动了数字电视市场,最少让互联网的视频内容提供商,像优酷、爱奇异、搜狐视频等都在观望另一张网上的动静,它们不担心小米盒子,它们只希望小米能够成为一个试水者,期待政策的松动,相信这些公司内部多少都应该有盒子计划,或盘算通过某些渠道能够成为内容提供者。最近也刚试用了小米盒子, 从体验上来讲应该算是国内机顶盒行业里的佼佼者了。像图2,小米手机期望能够在用户的私有圈中占据一个位置,同样在外围的家电圈中也需要占据一个位置,未来家庭物联网生态系统中的智能中心,机顶盒能够很好的扮演这个角色。但现在的机顶盒在交互以及用户体验上并没有发生根本性的变化,还未达到能承载智能中心的能力,相信未来在这一方面进行加强,基于语音、体感或其它交互类型的设计将会是一种趋势,做为设计者如何能够视而不见?

图4 小米盒子

4.平板兴起:可以看看下图,按照现在的趋势,未来2-3年平板电脑的出货量将超过PC,这意味着更多的平板将在未来上市,不同的硬件配置、不同的屏幕尺寸、不同的针对人群、不同的使用场景,设计上也将会产生更多的可能性,同时,因为屏幕的直接原因,移动广告也可能在平板平台爆发。

图5 平板电脑出货量预测

5.汽车与互联网的结合:随着经济的发展,能够购买得起汽车的人会越来越多,同时也将成为大家基本的代步工具,经济发达国家,像美国人已经离不开汽车,所以它会成为人们未来生活中重要的一个终端。想像一下,基于汽车的信息化,导航、车况提醒、行车安全、车内娱乐,这也是为什么像Google 这样的公司,开发无人驾驶汽车的初衷吧,以这个作为切入点,控制未来人们在汽车内的状态。

6.微信平台:腾讯目前不需要做一个移动操作系统来承载它的产品,因为微信未来会成长为一个平台,如同 Google 一样,它不需要做一款PC操作系统,只需要以做系统的心态推进 Chrome。移动端的特性确实很适合微信的发展,先将用户所有的碎片时间都抓住,以社交+通知的方式替代传统 Web端的 URL,同时也有可能在 APP 内部应用 Html5 技术,未来围绕它打造游戏平台,使移动变现方式更明晰,随着必会推出移动支付解决方案(会不会以二维码为基础呢?),这些都会是趋势,但如何影响设计呢?随着应用的复杂化,给用户带来的信息压力也会越来越大,微信联系人消息、邮件提醒、公众号消息、朋友圈更新、以及未来的游戏平台、移动支付等等,设想一下,用户打开微信的时候将被排山倒海的各种消息及提醒所淹没,这仅是一个例子,针对可能出现的情况是不是我们应该从现在开始做点什么呢?

7.字体设计的回归:文字,是一种文化的浓缩,具有影响受众的力量,尤其是以象形、指事、会意等六书为主的汉字,其本身就携带着大量的视觉信息。很早之前就有一个观点:限制国内设计水准的重要原因之一就是字体设计。除了对设计者审美要求很高外,中文字体的设计需要耗费大量的时间和精力,但由于国内市场的环境,相应的经济回报相当 有限,所以一般设计师很难完成一套字体的设计,往往本需要有能力的机构进行主导(很佩服知乎上的@厉向晨 @許瀚文 等字体设计师)。个人感受越来越多的人及设计师关注起字体设计,更多的公司及产品在寻求相匹配的字体,像,字节社、锤子OS(最少它说明会去购买 一些字体)、连阿芙精油也弄个字体,这是个好的趋势。

图6

8.输入方式的创新:上面提及的私有物品也好,智能家电也好,需要面对一座大山–输入方式,如何在进机顶盒上进行有效的搜索操作?利用遥控器?利用手机?还是直接给用户一个键盘 ?是否有更好的方式?

语音:现在中文语音的识别率已经很高了,Google Glass目前也是采用语音识别相应的指令。相对于键盘以及触摸操作,语音能够完全解放了人的双手,具有有明显的交互优势。在移动端主要是因为使用场景的限制,如锤子OS海报所示,大多数用户不愿意在公众场合利用语音进行交互,但我们换个场景,用户是在一个隐私、完全自主的环境,像家里,就可以随心所欲的利用语音的高识别性改进现有交互了,应用在机顶盒、家电等方面。

体感:说到体感让我想起了中国的一句老话「丝不如竹,竹不如肉」,桓温问孟嘉:听伎,丝不如竹,竹不如肉,何也? 孟嘉回答说:渐近自然。在用户体验上,早期的命令行模式就如同中国古弦乐「丝」,后来发展到图形界面,通过鼠标操作所见即所得「竹」,再后来发展的触摸感 应,以人的手指做为直接的控制器「肉」,「渐近自然」这四个字道出了交互设计发展的真髓。XBOX的Kinect

,Leap Motion 等产品,代表了这一个方向上的努力。

图7 Leap Motion

现有的移动设备也好,将要出现的智能化的私有物品也好,从体验和功能上都受限于输入方式,只要设备不断发展,交互也必会继续发展下去。

9.输出仍以视觉为主:想想我们在上面提到的手机,电视,都需要用户眼睛去「看」,通过看这个行为令用户感知到设计,与其说你在使用智能手机,还不如说是手机屏幕吸引了你的眼 神,Google更狠,期望通过一幅银镜绑架你的眼晴,在你观察世界之时永远隔着一块屏幕,从技术上讲这是一次进步,但在人文层面就留给市场来证明吧。现在各种产品及设备的突起同样是在争夺用户注意力,你有吸引用户注意力的idea吗?

10.简约、朴素的设计风格(flat design):现在移动端主要针对用户的碎片化时间进行产品设计,但这样设计带来了一个问题–浮躁,用户感觉不稳定。举个例子,如果你是一种重度碎片化的用户(相信知乎 上不少),一定会有常有一种举动,拿起手机,点亮屏幕,其实你也不知道想干什么,看一眼,不获取任何信息,再把屏幕给关上或放入口袋,一再下意识的重复这 个动作过程。简约、朴素的设计风格是潜意识希望规避这种情况而诞生的,让我们回忆一下魅族Flyme 2.0所带来的视觉语言,侘寂!以及锤子OS里拂过屏幕后通知消息全部清除,都是同样在这种潜意识下产生的。保持一种宁静,在这喧闹的环境中有一处能让你 的心感觉平静之所,那将是一个多麽吸引人的地方。想想为什么这么多人在旅游时希望能够去一处人迹罕至的地方,除了观赏没有看过的风景外,另外就是享受这样的一种別樣的宁静。这样的设计风格的产生多少带有一些人文情怀。

图8 Google+ Grid by Haraldur Thorleifsson

11.细致的动态效果:交互是一个动态的过程,虽可具体到某个场景,或对界面元素进行设计,但元素的动作及行为在表现层上也需要进行设计,就需要使用细腻、精致的动态效果来实现了,这些是细节。当视觉风格以简约为主,那真正吸引用户的将会是一些出彩的动态效果,在这方面需要达到的标准同样也是「渐近自然」。

12.设计师的觉醒(人文情怀、匠人精神):在工业化之前,匠人依靠纯手工生产产品,无法大规模生产,每件产品看起来可能都一样,但会具有微小的差别,一瞬间的创造灵感以及积累的经验造就了每件手工产品的不同。它们每个都具有不一样的生命以及特别的意义,这使其具有了灵性,购买者所追求的不仅是产品本身,还有匠人们为产品所付出的态度与精神,以及蕴藏其中的匠人工艺,这才是手工产品价值所在。设计者以掌握高超的技艺,并制作出骄傲的产品为荣,追求卓越,「嗜之越笃,技巧越工」。虽然,只是在知乎上以文字的方式表达一些理念,但我希望能够成为一名匠人,保持一颗匠心,借用原研哉的一句话「将设计以文字的方式表达出来也是一种设计」。

13.社交综合症(孤独感):愈社交,愈疏离,朋友被划分为无数个圈子,打上不同的标签,在多个社交产品之间流连。交流简化为评论、@、私信,现实生活中的社交能力不断下降,虽然被无数信息围绕,但内心深处有一种无法察觉的孤独感,注意力越来越无法长时间集中,长文的写作只能放在深夜(凌晨1点后吧),焦点会在多个窗口或多个页面这间切 换,并时常忘记操作的目的性,这可能只是我个人的感受,权当一听。

写到这吧,还有许多趋势值得我们去探索,云、智能交互、大数据、移动支付等等,过 了山,眼界就开阔了,抛弃我们所熟知事物的框架,使其成为一个未知的领域,重新建立认知。

人们总希望自己能够在高处眺望未来,观望着远处的风景,有可能只是个自以为的高处,而我仅期望能够脚踏实地,用不够快的速度向山上攀爬,期待着另一边的景致,低头认清路上的荆棘,预见未来最好的方式就是亲手创造未来。

03月 20, 2013

标题晕嘛?晕就对了,在知乎上回答的一个问题,其中涉及两个层面,所以分别进行回答吧(美妙的周末一晚又被我这么废 了)

一,「怎样利用设计,提升产品的“安全”体验」

给用户可控感

如果希望让用户在应用或产品中感觉安全,重要条件:令用户感觉可控

尽可能让用户在我们的应用当中感觉一切都在掌控之中,未知令人恐惧,原因在于个体缺少对事物的确定感及可控感,感觉无力。

我有位气场很强、很有压迫感的朋友,当他上台进行演讲前,他会先保持沉默,一句话也不说,只是用神眼扫视全场,马上,在很短的时间里会场就安静下来,这种沉默比大声喊「请大家安静」更具有震慑作用。沉默是一片空无,是一种未知,在这未知中令人感到畏惧。

将以上引申到产品设计当中也是适用的,一个「沉默」的界面同样会令用户感觉到畏惧,这里的沉默是指用户无法理解的文案、操作后无明显的反馈、采用一些令用户不适应的排版及布局…

以下具体介绍应用当中可控性的体现:

导航

导航是应用内信息结构的表现,用户通过这样的表现能够明白去哪寻找需要的信息,明白自身当前所处的位置等。

主要目标是,不要让用户迷失在你的产品里。信息架构的梳理、导航方式的应用,web端或桌面常用面包屑形式,移动端因屏幕尺寸的限制各有自己的特色,不过,Android的back和up的设计一直让我犯迷糊。

滚动区域

一般滚动条或滚动区域的设计常被人忽略,核心的一点是:不要让用户迷失在滚动区域里。举个知乎较早的栗子(好像这个栗子现在还有),知乎首页通过向下滚动获取更多信息,但在用户加载过很多信息后点击进入下一级页面,再后退时就无法返回先前的页面位置了(如图1)。Chrome浏览器在网速较慢时也会出现类似的情况,后退后仅停留在页面的头部。

图1 加载信息后,点击图中红框内的链接,再后退试试

另外,尽可能的避免在滚动区域内还有其它滚动区域。这样的方式令用户感觉到混乱,并常常导致错误的发生,应避免这样的情况并寻找其它的替代方式。常见例子就是像百度文库网页上还有一个文档内容滚动区域,传送门:三体编年史_百度文库

移动端,iOS点击顶部状态栏可快速滚动回列表的顶部,这也是一个基于用户安全心理的一个设计(只是隐藏得太深,可适当进行显性化设计)。

警告、确认

在进行危险操作时,有明显的提示并要求用户进行确认,令用户能够得到适当的保护。通常需要打断用户当前操作出现一个弹出框。嘿,由于人是一种习惯性动物,能够很快习惯不断出现的弹出框,个人更喜欢gmail里的提示,它将撤销与提示很好的结合起来,并不打断用户当前的操作。

操作可逆

人,不断的在犯错,有时是重复的错误,像撤销这样的可逆操作简直是我们的救星,这功能能够使用户更放心的使用我们的产品,令产品有足够的安全感。从功能性上来说,私以为这个功能可以和复制、粘贴相媲美,有时我在想如果photoshop里如果没有撤销的话,嘿… 嘿…

图2 删除撤消提示

自动保存

我不知道有多少视觉同学因为photoshop崩溃或其它妖怪原因而导致自己辛苦做了N个小时的工作不翼而飞,那种感觉真心想砸电脑啊,因为这个,有很多朋友因此而养成了定时Ctrl+S,或定期另存为的习惯。

如果应用要求用户编辑或组织信息,那应该提供自动保存功能,自动保存可以以后台的方式进行执行。这样才能够让用户安心的使用这款产品啊(如图3)。

图3 Gmail写邮件自动保存

安全出口

这里又要再拿iPhone的home键盘举例了:当用户在虚拟的界面里进行操作,感到迷茫,不理解或者是迷失的时候,Home 键就是他/她的安全出口。你的应用当中呢?还是完全丢给系统处理?

苹果为什么不倡导开发者在 App 中添加「退出」按钮,而要用 Home 键?

————————-

二,「用户会觉得360的产品很安全,除却360是做杀毒的,还有什么别的原因吗?」

安全感

如果希望让用户感觉安全,首要条件之一:令其处于不安全的环境。

这个和上面回答的「安全」是两码事,一个是指应用里,一个是指系统环境。在设计领域对于人的心理环境的研究能够更好的指导我们进行设计。当用户处在一个特定的环境当中,这里指不安全的环境,用户往往感觉不快或不能接受,用户需要去释放这样的心理负担,如果你的产品设计(包括功能设计)能够很好的解决用户心理上潜在的不安全感,那么你的产品就能够得到用户的青睐。

大家使用了这么多年的电脑,PC端确实有许多问题,病毒、木马、蓝屏、系统崩溃、误操作…等,这些都是造成用户感觉不安全的因素,360这款产品本身在制造不安全环境上或者说是将这些问题呈现在用户面前确实有出色之处,体检得分,危险行为,上传下载速度…… 无时无刻都在强调360产品的存在感。

国内用户很吃这一套,同时这些用户感觉到之前说过的可控性,通过360理解电脑里发生的一切(用户以为的一切)。因这类安全产品的本质是「制造不安全的环境」,那必然就会与其它应用及软件产品出现冲突,这也是3Q大战的原始冲动吧。

唉,写到这默叹一口气,摘录一段《鶡冠子·世贤》

魏文侯问扁鹊曰:‘子昆弟三人,其孰为善?’扁鹊曰:‘长兄最善,中兄次之,扁鹊最为下。’魏文侯曰:‘可得闻耶?’扁鹊曰:‘长兄于病视神,未有形而除之,故名不出于家。中兄治病,其在毫毛,故名不出于闾。若扁鹊者,血脉、投毒药、副肌肤间,而名出闻于诸侯。’

诸位是希望做扁鹊呢?还是做他哥呢?(你能有得选吗?)

产品形状

使用与安全相关的物体,如:盾牌、头盔、保险箱、锁具等等,这些与能够令用户与实现生活当中的安全相联系起来,加快用户的理解速度。典型的形状案例,传送门:LBE手机安全大师

图4 各安全应用的logo及相关图形

色彩安全

色彩确实能够影响人类的心理,并从其对颜色的喜好上能够分析出他/她的一些性格特点,心情好的时候是明度高的晴天,艳阳高照,心情不好的时候往往是明度低的阴天,只是明暗度的变化就能够对人产生影响。

善于利用用户自身长期的实现生活当中所积累下来的经验。像医院使用白色,白色体现了洁净、纯洁、信任。消防车使用红色,红色是象征热情、控制、以及危险的色彩,我们都知道红绿灯,红灯停、绿灯行,投射到用户潜意识的认知就是危险和安全,同时绿色也是大自然当中的常见色,使感觉到自然、轻松等,这也是360采用绿色为其主色的原因吧。有兴趣可以看看这里,传送门:色彩心理学_百度百科

图5 360网站部分截图

善用通知

巧妙的利用通知系统令用户感知到一种不安全的状态,开机时间慢、木马多、垃圾增加、安全漏洞未打布丁…等等,利用通知的字体大小、颜色等对通知进行层级控制,有区别才有比较(图6)。

最夸张的是我以前装过卡巴斯基的杀软,每次有异常的时候那一声怪叫(像马的 嘶吼声)都把我吓一跳,尤其是夜里。

尽可能的利用通知,包括系统层级的通知,以及应用内的通知,移动端的安全应用好像不太重视应用内的通知,Android端是强占着通知中心的固定区域(曾在Android的测试机上装了四款安全应用后,再看通知需要滚屏了)。

图6 各种通知

解决用户问题

这是360的安身之本,不要说它在背后做什么小动作,那些东西用户看不见,用户看到的只是开机速度打败了全国98%的用户,IE首页再也没被改过了…… 提供一站式的解决方案,对小白用户来说实在太方便了(图7)。

图7 360部分功能

360这款产品,借用一代宗师里的话,「一门里,有人当面子,就得有人当里子。面子不能沾一点灰尘。流了血,里子得收着。收不住,漏到了面子上。就是毁派灭门的大事」。安全、用户信任,这是面子,风光着呢,同样,背后还得有里子,云端对客户端功能的控制,信息收集的隐秘性,反侦测行为的判断,危机公关等。里子才是可怕的东西,收集点对手不利的证据,灭灭想杀上来了同门小弟…… 互联网也是江湖

Tags: ,.

我的观点 — 「搜狗输入法智慧版是块试验田」

长时间跟进输入法的设计,深深了解输入法创新是多少的艰难,输入方式上基本固定了几种:拼音、双拼、五笔、手写、语音等,想在输入方式上创新可能性已然很低。在输入体验上创新又会遭遇用户习惯强有力的阻挠,各大公司为了保证主流用户体验只能是保证原有习惯及功能不改变的情况下进行小版本、小功能的迭代。

聊一下个人对智慧版产生过程的猜测吧,搜狗输入法经过长时间的发展,如此多人力的投入,到现在肯定已经积累了很多idea,也就是输入法上的一些创意想法,但有些创意并不能完全应用到实际版本当中,因为会对用户体验冲击很大 — 改变用户长时间积累下来的使用习惯,经过权衡后这些创意被沉淀下来。某一天,设计人员或是PM实在憋不住了,提出智慧版方案(也有可能是搜狗的开发人员富余出来了,嘿)。

另外一个智慧版产生的前提条件 — 搜狗输入法在桌面端是霸主地位。搜狗现在的市场地位与用户量,允许它有富余的资源(时间&人力)来玩了。其它输入法还处于一个拼命追赶的状态,哪还能顾得上停下来刷刷成就感。

搜狗为了保证主流用户的输入体验,很聪明的分出来另一个版本,不在主流版本上推。

这个分版本就是智慧版,将前期那些被权衡掉的创意进行整合,是搜狗在输入理念上的实验性产品,同时也是用来测试用户对输入体验创新的接受度。主线版本功能还是很传统,符合大多数人对输入需求。

此时,传统 + 创新,两个版本分别对应不同的用户!拥有尝试精神的用户或称之为高端用户可以在搜狗智慧版上获得不同于其它输入法的用户体验,顺带,也培养用户对输入法这款工具型产品的全新认知。在智慧版上获得大众认同的的功能将会逐渐更新至主线版本,这个理念我是认同的。ps.目前,智慧版的功能,有想跳过「三级火箭」战略,直接在输入中实现搜索,我只能嘿嘿,尝试~ 尝试嘛。搜狗输入法智慧版2.0是“三级火箭”战略的升级

搜狗输入法智慧版也算是输入法市场的一股清流,为我们带了全新输入理念,这对整个市场是有益的,其它输入法也应该思考一下如何体现一下自身的沉淀了。

针对智慧版其它输入法产品是否有应对方法?当然有:

1. 激进改进:每款输入法产品都有相当一段长的积累,将前期积累的创新功能放置入现有输入法产品。

优点:输入创新,如果用户反应良好,能够拉大与其它输入法的距离,同时缩小与搜狗的差距。

缺点:创新存在风险,可能导致用户习惯的更改,最终使用户迁移至其它的输入法。

2.保守拓展:小版本迭代,渐进优化,不影响现有功能,同时分析前人(搜狗)所走过的路,针对性改进自身产品。

优点:保证用户品牌。

缺点:缺少新鲜度,运营乏力。

3. 分版本:主线版+创新版,拼想法、拼运营…

优点:与搜狗桌面端类似,可区分用户,试验创新。

缺点:分流用户,有可能使品牌受损。

同时,方式3,分版本,还存在消耗现有资源的情况,如果不增加人力,可能会影响主线版本的迭代,嘿,反正我不知道哪家有实力这样玩。

btw.百度输入法其实也有自己的试验田,有条件的也可以来尝试一下

Tags: ,,.
01月 30, 2013

登录框存在已久,对于用户来说是必定每天接触,对于设计师来说也是一个墨守陈规的控件,两个框加个按键,如果猛然抓个设计师问「你觉得登录框还有哪些可以改进的点」,得到的回答应该是长时间的沉默,当然也包括我。「宁可一思进,莫在一思停」,这是一代宗师里的拳理,同样也是做人做事的道理,思进方可有所为,一思一念间高下已分,体现在互联网应用及服务应该就更为深刻了。

扯回主题,现阶段常见登录框需要解决的问题

1. 输入效率问题,现阶段大多数用户登录均要求用户使用传统的键盘进行输入,这里就涉及一个问题–击键效率或称为输入效率。有许多解决输入效率的方法,如,

使用统一账户,许多互联网服务允许使用OpenID,新浪、腾讯、Facebook、twitter…等等,像知乎允许使用新浪微博的账号登录,这样就减少了用户进行注册或登录时的输入成本。

记住用户名及密码,这样可避免用户下次再进行输入,但用户清空cookie或安全级别要求高的互联网服务就悲剧了。

在输入过程中给予用户帮助,例子:新浪微博使用邮箱做为登录名(图1),用户在输入@ 后,将会出现输入建议,输入建议里有常用邮箱的后缀以辅助输入。

图1

另外,还有一些细节,如,在用户输入完用户名或密码后,焦点重新切换回用户名或密码的输入框,应该是全选已输入内容呢还是输入焦点位于已输入文字的后面?用户名及密码正确,仅验证码出错的情况下应该如何处理?

解决方案:使用OpenID,或使你的账户成为OpenID(对于国内巨头这是句废话),允许用户记住账户及密码(默认项给勾上),给予用户输入辅助,记住用户输入过的历史记录(可别记密码)并在适当的触发条件下显示出来。ps.以上仅为部分,还需要区域Web端及移动端。

2. 输入模式问题,在输入用户名时,用户是否能够明确自己处于中文模式或英文模式?输入密码时,能否明确Caps Lock处于哪种状态?输入模式到目前为至一直是个令人讨厌的问题,或者你感觉不到,认为在输入错误后仅仅需要按几次退格就可以修正这个错误,假设用户在期望输入英文时恰好正处在中文输入模式里,那用户需要执行的操作就多了,先删除已输入的错误字符,再执行Crl+空格,或者用鼠标切换至英文模式。另,非可见密码状态下Caps Lock的开关影响到整个登录操作的成败(图2)

图2

解决方案:中英文输入模式最终需要输入法来进行解决,可惜现阶段没有哪款输入法考虑到输入模式对用户的影响并加以解决。登录框内可采用类似图2在密码区域增加Caps Lock状态提示,一般无需特别对用户名输入区域增加Caps Lock提示,因大部分用户名对大小写不敏感。另,可考虑优雅的明文显示密码,如在「移动应用中注册新用户及用户登录的时候,密码应不应该显示为明文?」一文中所描述。

3. 图灵验证问题,现常规的验证码也是让我无限蛋痛的问题之一,为了判断是否属于正常登录而非恶意的侵犯或骚扰,这对于真正的用户来说,验证码没有必要出现,所以仅在登录时触发某些条件再显示验证码吧。难以识别的的验证码对于用户来说是沉重的压力,像I和l的识别难度,还有支付宝原来的字母O和数字0的问题,无奈设置的验证码一次次将用户阻挡在服务之外。

如实在无法绕过验证码这个环节,是否可以考虑为验证码增加一些实际意义,像reCAPTCHA: Stop Spam, Read Books 项目(已被google收购),利用验证码技术来帮助典籍数字化的进行,这个计划将由书本扫描下来无法准确的被光学文字辨识技术(OCR)识别的文字显示在验证码问题中,让用户在回答验证码时用人脑加以识别(图3),一举两得。

图3(不过这验证码曾让我想砸电脑 -_-’)

PS. 其实中文的识别比英文要难得多,为什么不闹个汉字的OCR改进计划呢?利用用户输入验证码的精度校正汉字的OCR。

解决方案:主要是解决验证码的识别问题,像End the CAPTCHA Agony利用游戏的方式进行验证。或像SolveMedia(Engagement Advertising Technology),在验证码内嵌入容易识别的广告。国内已经有类似的公司做这样的事情,相对于提供免费服务的网站来说,这样做也无可厚非,如豆瓣可以尝试在验证码环节加入自己的FM pro广告,嘿嘿。

4. 反馈,这包括在用户登录过程中所需要的各种反馈,如:

输入框选中的反馈,明确用户当前所在位置。

输入过程中的反馈,上面输入效率及输入模式中提到的点。

提交验证过程反馈,给个loading效果让用户知道目前处于等待状态,是否允许在提交过程中取消登录?

验证出错后的反馈,提示用户哪个环节出现了错误,密码是保留还是清空?

图4

解决方案:明确登录过程中的各种反馈,并将这些反馈进行细化,使之具有意义,方便用户理解。如,OSx 及 iCloud的登录框在出错后,都会抖动提示验证出错。恰当的动效在这里得到的很好的体现,抖动的效果与人类摇头的效果一致。

5. 多账户问题,某些应用及服务允许多账户,如桌面端的QQ、Chrome、Win操作系统等。涉及账户的选择、登录的时机等。举个反例,Mac端的QQ,当用户打开Mac版QQ时,第一时间显示的是单个账户,没有明确提示用户选择其它账户或添加其它账户的入口,导致很多用户只能在不断试错后才知道点击头像进行选择(图5左)。ps.MacQQ打开后,默认焦点停留在QQ号码输入区域并全选,这是想闹哪样?如果用户登录过了,默认焦点应该在密码输入区域啊,反馈过也没见改进… -_-’

图5

解决方案:系统支持多账户,给出足够明显的提示,方便用户切换账户(图5右),并尽可能以选择代替输入,成本较低,注意一下选择账户后光标的默认位置(这里可能还涉及记住密码的问题)。

6. 遗忘密码问题,这也是因为各种应用及服务太多,而且大都需要用户进行注册,用户也难免会遗忘(使用统一的OpenID可解决很大一部分问题)。遗忘密码可在登录区域明显的放置,也可采用一些巧妙的方式进行提示(图6)。

图6

解决方案:这里提一下忘记密码流程上需要注意的点吧,尽量少使用安全问答,不安全,现阶段个人信息在网上近乎透明;用户遗忘密码时不要强行给用户设置一个新密码;通过邮件让用户自行重置密码;对于安全级别要求高的服务采用多种方式重置密码,如,手机+邮件+U盾+人工等。

7. Accessibility,登录区域是否满足了无障碍性的需求?用户名及密码的输入是否有其它的方式?验证码的设计是否合理?大部份的研究指出,大概有20%的人口有某种程度的残障,当然并不是所有残障人士都有让他们使用互联网困难的残疾,可是在人口比例上还是很重要的。

中国是全世界盲人最多的国家之一,眼部疾病在中国也是一个主要的公共卫生问题。中国约有盲人600-700万,占世界盲人总数的18%,另有双眼低视力患者1200万。我国盲人数量早已超过诸如丹麦、芬兰、挪威等国家的人口数。

网银登录验证码被指歧视盲人 493人联名要求纠正

http://www.chinanews.com/sh/2012/07-03/4003005.shtml有兴趣可到这里详细了解:WebAIM: Introduction to Web Accessibility

解决方案:坚持可用性设计理念,利用现有技术及交互手段:语音输入;语音识别;脸部识别;手势识别;语音验证(File:中文語音Captcha.ogg)等等……

8. 安全问题,数字证书、密保卡、U盾等,对应不同的安全级别,各有利弊。另,登录区域记住密码功能,cookie需要着重设计。该层面很多涉及底层技术,设计人员在这里就不胡说八道了。个人倾向于利用移动设备解决安全问题。

上面啰嗦了一大堆,下面说说自己比较喜欢的登录方式:

1. 利用二维码扫描登录,几乎规避了上面大部分问题,并在安全性上有一定的保证,使用用户的手机进行验证,不需要用户的额外输入,也不存在密码或遗忘密码问题。当然也存在一些其它的问题,如,成本,用户移动设备需要支持扫描功能,需要移动端与Web端或桌面端相结合,登录时需要执行某些特定操作,打开APP,进入某功能等(这也可带动移动端APP的日活,玩笑)。

图7

2. 利用特定的交互方式,像Bump连接Web端(图8),通过手机的重力感应感知到「bump」,然后将地理位置与碰撞时间等信息上传到服务器,服务器根据最接近的时间点和地点判断出手机或者电脑的IP地址,为它们建立通信配对。虽然也可用来进行用户登录,但安全性较差,真要采用这种方式,可就要改进一下相关的流程。

图8

以上当然无法完全替代传统登录方式,但可做为补充及增益。

Tags: ,,.
01月 6, 2013

iOS说,「I’m always right」,于是「确定」就在了右边。

Android倔强的说,「要在左边」,于是「确定」就在了左边。

接着,iOS把Android胖揍了一顿,「stay foolish,foolish……都TM要在右边」,Android被硬拗到了右边。

这是个老话题了,只是时间流转,各平台都在更新,我们也要与时俱进,有必要再拿出来提一提。

移动端三大主要平台,Android、iOS、Windows Phone,咱们逐个说。

1. 先从WP开始吧,WP平台内的弹出提示称之为「raw notifications」,延续Win桌面平台的设计原则。

图1

如图1所示,dialog内操作按键称之为「Commit button」,肯定性操作位于左边,否定性操作位于最右边。Win平台定义了具体的用法与顺序:Yes/No, Yes/No/Cancel, [Do it]/Cancel, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancel。传送门:http://msdn.microsoft.com/en-us/library/aa511268.aspx#commitButtons ps.注意OK键没有在此间出没,后面具体说明。

图2

WP平台及Win8平台dialog内操作按键的左右顺序也是一致的(图2)。

2. iOS平台,它的出身与历史注定了与OS X在设计上的传承。与Win相反(或者说Win有意与OS X相反,这里面又要翻出一堆历史遗留问题了 ^_^)肯定性操作位于右边,否定性操作位于左边。(大多数情况下)ps. iOS需要注意按键高亮的状态。

图3

OS X用户预期所有的按键位于dialog的右底部,启动一个操作的按键总是位于最右侧。该按键称之为「Action button」,以确认当前dialog最重要的操作。取消按键位于「Action button」的左侧(图3左)。 OS X Interface Guidelines,传送门(参见Dialog章节): http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Windows/Windows.html#//apple_ref/doc/uid/20000961-TP10

iOS继承了OS X的设计原则(图3右),只是稍稍有些不一样,体现在对于Cancel的理解上:

当操作涉及潜在的风险时,两个按键中「Cancel」按键应位于右侧,并高亮提示。

当需要引导人们进行所期望的操作时,两个按键中的「Cancel」按应位于左侧,相对应的操作按键高亮提示。

iOS中「Cancel」可能位于左侧,也可能位于右侧,这取决于所执行的操作是否具有破坏性。 iOS平台更看中的是按键的高亮状态(iOS高亮状态始终在右侧,OS X则不然)。同时在dialog弹出的情况下按下Home键,应当是等同于点击了「Cancel」按键,并不执行任何操作。iOS Human Interface Guidelines,传送门(参见alert的描述): http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW39

3. Android平台,这才是最头痛的家伙,大多数的坑都在这里。刚出道时,可能是因为当时设计规范执行力度、Android系统的碎片化等原因,导致dialog内的操作按键顺序随着各应用开发者喜好而定,大多数与Win平台保持一致。更新至Android 4.x后,官方终于对此有了一个很明确的态度,并在Android Design里有了标准的定义。

图4

Dialog操作按钮通常是「取消」/「确定」,确定键同时也是首选操作以及最可能执行的操作。但是,如果涉及特殊操作例如关闭或等待,那么所有的按钮都应该使用动词。同是,dialog中肯定性的操作总是安排在右侧,而否定性的操作放在左侧。与iOS理念上统一,但也有所保留!^_^ ps.就算是到现在还是能看到大量的Android应用与该原则相悖,或许是惯性,或许是迁就低版本系统… -_-’

Android Design,传送门(参见Dialog章节):http://developer.android.com/design/building-blocks/dialogs.html

聊完了各平台的设计规范,对各平台dialog内操作按键的顺序有所了解,大家知道怎么去进行设计了,但是身为设计者需要更进一步的思考,有兴趣的请越过下面华丽的切糕线。

———–切糕线———–

———–切糕线———–

如果你是一个苦逼的设计者,在完全没有设计原则指导的情况下,将如何安排Dialog内操作按键的顺序呢?…… 想个五分钟吧。

以下仅为个人观点!!欢迎打脸 ^_^

我倾向于肯定性操作位于右边,否定性操作位于左边,也就是「取消」/「确定」。ps.所说皆错

「确定」/「取消」,采用这种顺序最大的理由是符合自然的阅读顺序,也就是大部分从左起语言的顺序。用户在执行某操作弹出dialog后,视线最先接触的是需要执行的「Action」,因为设计者认为「Action」重要程度比「Cancel」要高,需要着重强调(这里涉及认知领域的首因效应,以后有机会再讲吧。)ps.由于是Win平台所采用的顺序,就简称为Win顺序吧。

「取消」/「确定」,由于主要是水果平台采用,以下简称为 OS X顺序,或者iOS顺序。说说具体为什么倾向它的几个理由:

阅读视线流

扫视时的阅读顺序

逻辑顺序

1. 阅读视线流,Win顺序虽然能够用户视线更早接触到「Action」,但不可否认一个事实,用户会阅读完所有可操作的选项,这意味着用户的视线不会停留在「Action」上,它将继续向后进行扫描,在查看完所有可选项后,再返回之前的的「Action」执行相应操作。采用iOS顺序,用户的视线流将会更平滑,视线最终停留的位置也是「Action」所处的位置。通过图5对比,可以得知「确定」放置于左侧,将导致用户的视线流发生改变,用户视线流无意识的回跳,而放于右侧将保持视线流在一个方向,减少视线曲折搜索的过程。

图5

2. 扫视时的阅读顺序,有人可能会问了这与第1条理由有什么区别?阅读是由扫视(saccades)和凝视(fixation)两个动作连续组合、切换的过程。第1条的理由基于凝视(fixation)运动过程。

为什么在dialog弹出时会出现扫视?因为,用户对于dialog里的内容只是快速的浏览,或者说是没有人会认真阅读dialog里的内容。由此也引申出dialog设计时的一个重要原则:不要在dialog相关的action按键里写上「好」或「确定」等,应该用实际会发生的动作来命名。这也是为什么建议使用动词的原因。如:你需要执行一个「保存」操作,那你的dialog里出现的相关Action应该是「取消」和「保存」。

说回扫视,用户的在进行扫视时顺序往往如图6,最终视觉的落点是在视觉界面的右下角(Terminal Area),扫视终点往往就在「Action」区域上,该区域能够获得更多的视觉关注。这也是为什么Win及OS X桌面系统内的dialog按键均非居中显示,而是位于右下角的原因。Gutenberg Diagram(古藤堡图表)也是用以描述扫视顺序的模型(传送门:http://www.studiodino.com/info/news47.htm)。。ps.注意图6标识出的区域1,iOS在右侧「Action」键上加了高亮效果,这对视觉搜索有益。

图6

3. 逻辑顺序,首先让我们来对dialog内按键定义一下,「确定」按键是用户以执行相关操作的按键,点击后将对现有状态发生根本性的改变。「取消」按键是使用户返回到原来状态,取消当前dialog。

这意味着,用户点击「Action」后将进入下一步操作,点击「Cancel」将执行返回操作。想想我们常见的:浏览器上的导航按键、kindle上的左右翻页按键、安排软件过程当中的「上一步」「下一步」……等等!

如图7,用户在dialog内所看到的视觉顺序与逻辑顺序是一致的。

图7

另外,桌面平台上还考虑到用户左右手使用习惯,这其实与dialog内的逻辑顺序也有所关联。我们知道大部分的人主要是右手用户,当dialog内的「Action」位于右侧时,用户在操作时能够更为顺应他们自身的使用习惯。 这一点还体现在Win和OS X桌面文件排布顺序方面,OS X为了大部分的右手用户将桌面文件分布在屏幕的右侧。

图8

最后来个Ending,其实视觉顺序在设计时,或系统设计时是一条很重要的原则,可惜国内并没有太多设计师重视这条原则,举例说明(图9),从下图中将Win和OS X的窗口控制按键抽离出来,并将「关闭」替换成「取消」,如果将这些操作放置在一个dialog中,有没有发现它们还是符合这两个系统分别坚持的设计原则呢?

图9

休假后的第一篇,略长…略长……. 囧

Tags: ,,,.
12月 6, 2012

先从视觉注意开始吧,尝试寻找下图中不同的元素。

图1

是不是很快能够从一大片”L”图形中寻找到图形”+”,但除了图形”+”外,你还能够看出另外一种元素吗?再试试下图。

图2

很容易看到图中由”+”组成的矩形,但是看到图形”T”则困难得多(图1),当我们在图2中利用矩形标示出相应区域,是否图形”T”能够明显识别出来,回到图1,请再尝试视觉搜索,并对比一下。

观察者大约能够在50毫秒内看出图形的边界–认知心理学当中称之为弹出效应(pop-up effect)。这种「弹出」使我们能够对刺激进行平行搜索。

回到虚拟键盘的设计。当多个视觉元素排列在一起时,需要用户能够快速的对它们进行识别,并确定可点击区域,对比图3中两种设计样式,哪种更能刺激你的视觉产生弹出效应?区块化的视觉效果是不是让你在进行视觉搜索时压力更小一些?

图3

另外,边缘的知觉清晰度与图形的亮度能够影响人们对图形的识别(图4)。ps.这也是为什么在设计时为突出主要元素需要加强与其它元素对比度的原因。

图4

键位之间的空隙确实能够加强心理干预,提高手指在点击时的精确性。除了心理层面的作用,在实际操作中,这样的键位如何提高精确度?

我们来回顾一下苹果官方关于适合点击区域的定义 “44 x 44 points is the comfortable minimum size of a tappable UI element”,换算成iPhone4的分辨率应该是88 x 88(Retina屏宽高均提高2倍 one point equals two pixels ),iPhone4虚拟键盘竖屏状态下单个键位可视宽高为52px*76px(图5)。

图5

单个键位的视觉尺寸小于官方定义的「舒适尺寸」,实际用户在操作过程中是否会有比较大的失误率呢?通过苹果专利”Activating virtual keys of a touch-screen virtual keyboard”,了解iOS键盘能够动态的调整触摸热区,触摸位置与触发键位通过距离来确定,输入时引入权重等。竖屏时的键位之间的间隙横向间距为32px,竖向间距为12px(这个间距根据屏幕宽度所能容纳的最多键位计算出来的),当用手指点击触屏上的虚拟键位时,实际手指点击区域往往于目标不一致,一般位于目标的下方,76px的键位高度与32px的间隙能够满足点击时所需要的区域(键位宽度为52px,大多数键位左右有12px的间隙)。

虚拟键位的视觉尺寸虽然小于「舒适尺寸」,通过动态的调整触摸热区能够尽可能的提高用户输入的精确度。

另外,竖屏键位有几个间距比较特别的位置,第一行键位与顶部的间距为22px,除第二行键位最左侧及最右侧的间距为38px外其它行均为6px,Shift键和Delete键与左右相邻的间距为24px(更大的间隙对于用户心理的干预更大)。

根据@鄭紫陽 提问更新:全键盘省如果略掉间隙可提高键位视觉尺寸,从 52px*76px 提高到 (52+12)px*(76+16)px,缺少间隙的干预作用有可能导致用户在点击操作时错误率上升,因为虚拟目标位置和手指点击区域往往于不一致。省略掉间隙导致视觉搜索压力会增加。另外,在进行视觉设计时第二行的A键和L键很难处理(边距大于其它键位,在横屏时更明显)

附赠横向苹果键盘尺寸标注:

图5

推荐阅读 @Hi-iD 的《Affordance(可供性)和设计》,其中对iOS键盘的分析很好,受教很多。

其实,IOS设备里并不是每个键盘都有间隙的,像数字键盘及日文键盘等,可能设计者考虑这些键位尺寸都比较大,用户点击也比较方便,所以将间隙拿掉了。

图6

另外说到虚拟键盘的拟物化设计,在视觉样式上应该不算吧,最少在iOS之前木有哪款键盘样式长成这个尿性,拟物主要体现在键位布局方面,像虚拟键位上的字母不管用户有没有切换Shift永远都是大写,这里也顺带分析一下,具体有两个原因:

历史

识别

历史原因,打字机的键位上的字母均为大写,传承到电脑键盘上的字母也是大写,做为开创触摸操作的iPhone手机在键盘设计上也顽强的保留了这个传统(图7)。

图7

识别原因,在同字号的情况下,大写字体比小写字体更饱满及更整齐,识别性更强,小写字体基本位于x-height内,但有少数字母如q、p、j等会突破基线处于下部区域,而 i、f、j又会超出x-height处于上部区域,在排版设计中,小写字体能够很容易的引导视线的流动,但在键位这样需要强识别的位置可能导致视觉无法像搜索大写字母一样进行集中。

图8

Tags: ,,,.
11月 20, 2012

文/iDoNews新锐作者 MoonMonster

总是会有些流言「苹果应该把这该死的Home键从我眼前拿掉!」,尤其在iOS升级到5.x后增加了多指手势功能(4.3内测时已经有手势功能),Android的4.x系统也将实体按键更改为虚拟按键,人们更加认为苹果会将Home键拿掉,但事实呢?并没有,iPhone 5没有,iPad mini也没有。

是否这就意味着Home键不能以其它方式取代?当然不是,现阶段光iOS上就有多种取代Home键的交互方式(不考虑交互优劣),如:AssistiveTouch、多指手势操作等,那为什么Home键还继续在iOS设备上占有一席之地?

Home键,它是iOS设备正面唯一的物理开关,能让人们直白的理解它的功能,当一个对iOS设备一无所知的人在拿起iPhone或iPad时,他们能够在没有帮助的情况下很顺利的进行操作。反过来,如果没有Home键,有多少常规用户能够理解多指手势操作?有多少用户能够在设置项里理解并打开AssistiveTouch?会有同学认为,没有Home键,那就会有其它的设计形式!没错,会有其它的设计形式,会有Android 4.x的虚拟按键,会有WebOS的手势操作区域,但还有哪个设计会比一个提供实体反馈物感及行为感的开关更简单直观呢?

其实我还能够用更多理由来告诉大家,苹果目前不会将Home键从iOS设备上拿掉(不表示以后不会),方便退出应用啦、统一的交互逻辑,修改后对设计规范的冲击啦,用户体验成本啦等等…… -_-’

来说说更进一步发自初心的理解吧,iOS设备的 Home 键,除了它所具有的功能性作用外,还是连接虚拟和现实的接口(或者称之为开关),在冷冰冰的界面中,有一个真实触感的出口。有人可能会认为又蛋痛了,不就是一个按键嘛,有必要上升到如此之高的程度嘛?

随着iPhone的推出,移动设备进了触屏的时代,「这是最好的时代,这是最坏的时代」,触屏技术及理念彻底的改变了人与机器的交互方法,人们可以直接通过自己的触碰进行更为直观的操作,减少了键盘、鼠标等中介环节。越来越多的设备开始采用触屏交互,越来越多的实体在逐渐的消失,与此同时也给我们带来了一些困扰。

我们是生活在一个实体的世界当中,长期的生活经验让我们在实体世界操作使用工具和日常各种物品时,获得相应的物感及行为感,像物体的质量、尺寸、质感、形状等等,以及操作后获得的位置感、方向感、速度感、状态感等等。

但是屏幕上构造的信息完全不同于上述信息,人们长期操作工具或物体获取信息的经验几乎完全失去了作用,我们越来越依靠视觉感观感知状态及反馈,所有信息集中在一块块的屏幕之间,通过单一的触碰引发视觉上的变化,显示屏幕上的信息也并不都是一致的,随着系统或应用的不同,可能会有不同的信息内容。

当用户在虚拟的界面里进行操作,感到迷茫,不理解或者是迷失的时候,Home 键就是他/她的安全出口,用户可以任意徜徉在虚拟的界面当中,当他希望能够返回到一个让自己感觉安全并舒适的地方时,他们能够及时返回。实体世界的物理反馈,按键按下的瞬间愉悦,明确自己将会到达的目标,简单、稳定、可感知,这一切的一切都那么的真实,”home, sweet home…”

补充:原来同事有个可爱的孩子,老爸为了逗他开心常给他玩iPad上的游戏,后来他老爸告诉我们一件有趣的事情,他的小孩常常对着家里电视机也用手指去点屏幕上的菜单…… 随着科技的发展,下一代的用户的成长是不是意味着实体物感的完全消失呢?!

PS. 再来个屌丝的理由:至少用户知道手机哪头是上,哪头是下…..

您正在阅读的是iDoNews业内人说

一天一分钟,业界在听你回声。如果你有更加丰满、个性化的互联网点评视角,欢迎奔跑加入iDoNews业内点评团,私信@沸话小欧 即可。

转载请注明 iDoNews新锐作者/MoonMonster

Tags: ,,.
11月 19, 2012

文/iDoNews新锐作者 MoonMonster

细节即灵魂,观察一个人和观察一个产品是一样的,他/她所表现出来的细节,谈吐、思维、待人、接物…… 无一不是直接或间接袒露出其专业素养。

做为新手、菜鸟,无深厚的行业经验,除了自身努力加强专业素养,更有效的路径是向前辈、大牛、值得学习者进行讨教(非死皮赖脸哦,有点诚意的),被人说新手又怎样?脸皮不要这么薄嘛,谁不是从菜鸟成长起来的?我也曾经被经理骂过好几年(有时上火也会顶嘴,事后会主动道歉并承认自己的问题),在经理离职寻找更好发展的时候他专门找我聊天,我二逼的问他”为什么不管我做什么设计、规范等等都被你骂?”,经理看了一眼说”骂你,是因为你还有成长空间。” Ps. 不鼓励这种一味反向教育方式,毕竟没几个人脸皮厚得像我。应该是大棒与萝卜齐飞,赞扬与骂娘并进!

被认为是新手没有什么不好,证明你可以去不断的试错,别人对你的苛求也少,就算得到负面反馈也是Exp的增加,为升级做积累嘛,善于积极思考、善于抓住事物本质特征、拥有不曲品格的人,才能在工作中取得不错的成绩

另外,工作中遇到问题并不可怕,问题往往是机会的伪装,要学习通过解决问题来提高自己的工作技能,并取得更好的发展。别找些把自己弄死也解决不了的问题,会有挫败感并使自己丧失信心,注意难度区间,问题应该处在看似自己解决不了,但把自己拼了也就解决了的难度 ^_^ Ps.多数时候我是把自己给拼了。

再来说说老鸟吧,专业技能绝对是没有问题的,但关键在心态!当一只小小菜鸟向你问一个比较二的问题的时候(别二到”您好,能占用您一段时间聊聊天吗?”,最好是专业方面),你的心态是否能够保持平和,能否尽量进行解答或指引其自己去寻找答案(指导他人的同时,也是对自身专业知识体系的短板进行补充),这些都应该是一个老鸟的专业素养,尤其在学校教育与实际衔接不算太紧密的中国社会,新人上手会经历一段过程的,谁让你是老鸟呢?学高为师嘛。

您正在阅读的是iDoNews业内人说

一天一分钟,业界在听你回声。如果你有更加丰满、个性化的互联网点评视角,欢迎奔跑加入iDoNews业内点评团,私信@沸话小欧 即可。

转载请注明 iDoNews新锐作者/MoonMonster

Tags: ,,.
11月 13, 2012

文/DoNews新锐作者 MoonMonster

移动端和PC端从体验设计上有本质的不同,移动设备有自身的特点及限制,需要我们重新思考一下原有PC端形成的一些设计标准(不断的质疑和否定才能成长嘛),比如:密码输入区域的设计

先从PC端说起,密码输入是我们日常上网或操作电脑最常接触到,PC端常规的设计思路是对用户输入的每个密码进行遮掩,用户输入一个字符,密码输入区域就显示一个替换符 “*” 或 “•”(图1) 。

图1

为什么这样进行设计呢?先从PC本身的属性谈起,1. PC具有公共属性,可能在多种场所甚至被多人使用,但你输入密码是私密性的。2. PC固定在特定的位置,无法随意移动(早期PC时代,非笔记本横行的现在)。 3. PC显示区域足够大,光用脑袋是不能够完全挡住偷窥者的。鉴于以上这些属性,PC端在用户输入密码时应给予适当的保护。当然也有过份保护的例子,如下图2,命令行时代的产物,用户输入密码时,没有任何反馈以提示用户(现在每天还要使用到,唉!)。

图2

另外一个重要的原因,由于长时间敲击键盘进行输入练习,键盘的物感形成了肌肉记忆,输入密码(敲击键盘)的过程成为一种条件反射(知觉-行动链),用户在输入时更多的是依靠手指上的感觉,而非有意识的去关注(所以,也就不存在识别了),人体肌肉获得记忆的速度十分缓慢,但一旦获得,其遗忘的速度也十分缓慢,并且肌肉记忆的精确度均很高,用户在PC上输入密码的错误率也很低。

在PC端这样的设计没有太大问题,只是偶尔在知觉-行动链被打断时会想不起来输入到什么位置了,因为不过脑嘛 ^_^,绝大多数用户在遇到这种情况时,会选择将已输入的密码全部删除重新开始输入,纠错成本PC端用户可以接受,所以对这样的设计PC端用户也就接受并习惯了。

再来看看移动端,大部分的移动设备(如,手机)属于个人私密性较高的设备,并且显示区域均较小,用户在进行输入时,可对输入密码进行有效的保护(或者找个僻静的地方进行输入)。或许有同学会认为移动用户的使用场景多样,更需要对密码进行保护,但只要窥视者有心,不管密码是否被保护均可能会被其获知,见图3,大多数移动OS用户的每次输入均出现键位提示!移动端想防窥还是得找僻静小角落啊。

图3

现在移动端大多数均以触屏为主要交互手段,在触屏虚拟键盘进行输入操作缺少以往实体键盘的物感,需要用户在输入过程中对虚拟键位及手指的位置进行认知,手指很难形成肌肉记忆(黑莓Storm的Clickable技术就是模拟实体按键触感的技术),借用一下surface的眼动研究(图4),可以发现用户的视线会在虚拟键盘及输入区域之间进行切换,思考一下,你在PC端进行输入一般字符时会盯着键盘看吗?在移动端进行输入操作时成本比PC端高出了许多,并且错误率随之也放大了,大部分的用户已经能够很明显的感觉到在移动端输入之困难,再让用户进行纠错操作,成本就可想而知了!

图4

移动端的设计者其实早已察觉到了上述的问题,并对移动端的密码输入区域进行了重新设计,以iOS的解决方案为例子,用户当前输入的密码以明文显示,在继续输入下一位时将上一位密码转换为替换符(图5)。

图5

这样的设计一定程度上规避了上述的问题,方便了用户,但也存在一些问题,只有当前的输入为明文,之前的密码依旧是替换符,用户在对密码的认知上无法存在连续性,另外,当用户在虚拟键盘寻找需要输入的字符花费较长时间,原来的明文会自动转换为替换符号,这样易导致用户忘记之前的输入。

另一个解决方案,在输入区域附近放置一个密码显示的开关,当开关打开时,密码以明文的方式进行显示,当开关关闭时,密码以 “*” 或 “•” 替换符显示(图6),用户可在输入过程中很轻松的切换密码显示模式,当用户确认周边环境安全,并希望提高输入体验时,可选择明文显示,反之选择替换符显示。

图6

但这种方案涉及到另一个问题–默认选项,用户一般较少主动去设置某些选项,并依照默认选项使用下去,所以,上面方案默认选项如果采用隐藏密码的设计,那这个设计的效果及优势就没有得到体现。采用明文密码显示会使其更具有意义。

采用明文显示密码能够提高用户体验,有助于用户进行输入,注册及登录流程会更易用,隐藏密码可提高安全性,并与目前用户习惯相符,但降低了输入效率,如何在两者之前进行平衡?是否有其它解决方案?这些是设计者需要花时间思考的问题。

还是以iOS平台为例子,再来一个解决方案,用户在密码输入区域进行输入时,还是依照现有iOS的交互逻辑执行,但是当用户感觉自己输入错误了,按退格键试图删除错误输入时,将隐藏密码以明文显示出来,方便用户查看自己的输入,并确定需要进行修改的位置(图7)。这样的设计保留了原来用户的使用习惯,却又考虑到用户在出错后的行为模式,为退格键附加了一个切换明文模式的功能。

图7

综上所述,就移动端用户注册及登录时,隐藏密码不仅会阻碍用户快速、准确地输入,还会遮掩用户的输入错误,并对安全性没有起到太大的作用,个人还是倾向于优雅的使用明文密码显示,但以什么样的方式显示密码,以及采取何种形式的交互是需要进行认真设计的(在PC端还可以在当前输入区域获取到焦点时明文显示密码,失去焦点时隐藏密码)。

往往我们在进行设计时都遵循某种设计惯例,或找现成产品中被实现过的例子。较少自身深入的进行思考,有些设计不适用在你的产品当中,可能会使用户体验不好或增加任务的复杂性,那我们就需要重新审视一下我们设计了。

======带个自私自利的小AD=========

只需你花一分钟,让业界听到你回声。如果你有更加丰满、独特的个性化点评视角,欢迎奔跑加入iDoNews点评团,私信@沸话小欧 即可。

转载请注明 DoNews新锐作者/MoonMonster

Tags: ,,.
11月 12, 2012

文/DoNews新锐作者 MoonMonster

输入体验也是一个被大家平时不太注意的细节(尼玛,为什么又是细节,我和它杠上了啊),每天都在使用,能感觉得到,但偏偏又无法很明确的进行描述,这就是输入体验,输入体验的优劣往往决定了一款产品的好坏。

1. 今天你大了吗?先从简单的首字母自动大写开始吧(以iOS为主要例子),这个设计主要出现在英文输入模式,方便用户将首字母进行大写,并减少用户击键次数。当用户初始进入输入状态时进入大写模式(下方图1左),另外,在用户开始新的一句时也会进入大写状态(上面回答过的两次空格后也会进入大写械,图1右)。

图1

首字母自动大写看起来简单,但在设计交互逻辑上还是需要花点时间进行思考,举个栗子,用户输入第1个大写字符后,希望将它修改为小写,你会怎样进行设计呢?WebOS(别告诉我你不知道这个系统)的输入首字母大写,实现的方式和是一样的,但在对退格键的交互上它花了心思,两个细节:

当用户输入第1个字母后,自动转换为大写(字母H,图2左),输完第1个字符后用户按退格键,此时并不删除字符,而是将大写字母H转换为小写字母h(图2中),再按退格键才会完全删除这个字母。设计师判断是因为WebOS的大写模式造成了用户的输入无法达到预期,所以此时会将大写字符转换为小写字符。

用户输入第1个字母后,大写,再输入其它字母均为小写(例如输入了Hap,图2右),用户不想要这个单词了,退格第一次删除p,退格第二次删除a,退格第三次删除H(此时H不会转换为小写的h)。此时设计师判断用户在多字符情况下一直退格是真心要将输入结果删除掉,所以在大写字符处也不进行转换了。

图2

WebOS在不同情景下,执行的结果是不一样的,这证明了设计师对细节的掌握,充分考虑了用户使用场景。如果你是设计师,让你用另一种设计方案来解决同样的问题,你会怎么样思考呢?输入效率会更高吗?

2. 聪明的输入,输入字符自动修正,在英文模式里,这是个极其出色的设计,对于使用者来说能够更专注于输入的内容,而不需要担心是否出现错误或其它降低输入效率的行为,更有效的减少了用户退格的使用行为(提高了正确率嘛), 自动修正其实是针对用户输入过程中的一项设计,所以除了精确的修改用户输入的内容外,最主要的是尽可能减少输入过程中的干扰。

我们以iOS为例子(它的设计并不一定好哦,亲),用户输入Messge(少字母a)iOS会出现修正提示(图3左),此时用户只需要输入空格、return或点击屏幕就能够将修正结果上屏,如果用户需要保留错误结果需要手动将自动修正关闭(到了蛋痛时间,自动修正的关闭icon很小,很难进行点击操作,为什么苹果设计师不使用另一种方式进行关闭呢?),继续进行输入,此时系统将进行拼写检查,如有错误将会在相应单词下出现红色虚线(图3中),用户点击红色虚线的单词将出现修改结果弹出框(图3右),另外,用户使用退格键退格到错误单词时也会弹出修正结果弹出框(图3中)。设计师针对英文输入特点,有效的进行了设计(我还是不喜欢它的自动修正关闭的设计),针对不同的状态,输入错误时、单词输入完毕后、退格至错误单词… 均给出修正结果以提高用户输入效率。

图3

我们再来看一下Android 4.1的例子,Android系统中英文输入采取与iOS不同的处理方式,在键盘上方出现一条类似中文输入的Candidate(候选)区域,我们俗称Cand区,用户在输入过程中Cand区呈现不同的候选结果,为用户提供更多的输入结果选择,Android的首选词位于Cand区的中间,用户可直接空格将首选上屏(中文输入用户熟悉吧 ^_^),左侧是用户实际输入的字符,右侧是另一个候选。

注意下图当中各种不同输入状态细节的变化,用户输入“Didnt”(图4 Step1),输入字符下方出现蓝色较粗下划线,这意味着用户当前输入的这个词组有修正结果,并在Cand区首先位置显示,此时用户输入空格将把“Didnt”修正为“Didn’t”(图4 Step2),继续输入“Didnt”,输入字符下文出现黑色细下划线(图4 Step3),这代表着用户输入的是正常范围内的单词(别介意,例子中添加过自定义单词),此时Cand区第1个候选结果是另一个修正结果,输入完“Didnt”后,系统会进行拼写检查,发现是这一个错误在之前输入字符下方出现红色下划线进行标示(图4 Step4),用户通过点击错误单词查看修正结果(图4 Step5)。另外,长按Cand区中央候选词将出现更多的修正结果(图5右)。

图4

图5

看完了iOS和Android两个系统的自动修正案例,从设计上我个人更倾向于Android,Cand区域的设计以及通过不同颜色的下划线(可能会有少许的视觉干扰,但与实际效果比较是可以接受的)标示出相应的输入状态,让用户能够准确的判断出当前的状态,黑色下划线表示“亲爱的,一切正常,继续输入吧”,蓝色表示“哥们,我给了你个靠谱的修正结果,放心按空格吧”,红色表示“擦,能靠谱点嘛,出错了”。ps.也可能是因为我自己就是中文用户,已经习惯了Cand区这样的设计,所以会有一些主观上的倾向。

另外,中文输入法其实也可以针对汉字的输入码进行智能修正,这样能够确保用户进行正确有效的输入。

3. 输入场景的变化,不同的输入面板,让我们再来聊一聊输入场景吧!“哎哟,输入个东西不就是敲字嘛,哪还来的什么场景啊。”,亲~ 让我们看一看下面图6中的几个键盘吧。

最左边是处于备忘录中的键盘面板,中间和右边是处于浏览器中的键盘面板(还有许多其它面板就不一一罗列了),浏览器地址栏中,系统输入面板中原本是空格的位置根据地址栏的特性被拆分了三个独立的按键,”dot”、”slash”、”.com”,并且通过长按“.com”键盘可以选择其它后缀可选(图6右)。可能会有同学说,为什么没有”http://”或者”www”按键呢?这涉及到以后想讲的一个话题,关于输入区域的容错性,在这里就不延伸了。从这样的设计理念中当可以看到,当用户切换使用场景时,相应输入面板也会跟随着改变,以方便用户进行更高效的输入操作,这也是触屏时代所具有的特性。ps.在这里也介绍一下百度手机输入Android版拥有多达14个输入面板,尽一切可能方便用户进行输入.

图6

4. 条条大路通罗马,多样化的输入方式,在这里要向大家介绍一下关于iOS各键位的设计细节(当然,这里就不写太细了,点到为至吧,长文写得我脑疼 -_-’)。

Shift的用法,看官先想一想如果你们在自己的手机上输入大写字母你会采取哪种方式呢?

先来看看iOS里几种输入大写字母的方式:1. 首字母自动大写,位于句首的字母会自动进行大写。2. 点击一次Shift输入一个大写字母,然后再恢复为小写状态。3. 双击Shift键,进入大写模式,再点击一次Shift键盘返回正常状态。 4. 按住Shift键,同时输入相应字母。

这种设计并非苹果蛋痛,而是每种输入方式都有其相应的目的,我们来分析一下这几种方式,方式1,基于英文书写习惯,系统自动为用户进行首字母大写。方式2,这种方式方便了用户临时性输入单个大写字母。方式3,标准的模式切换,进入大写状态,这是为了进行大写长文本输入的模式。方式4,此方式是延续用户在PC上的使用习惯,并允许用户临时输入大写较长文本。ps.你可以在英文输入面板,按住Shift键,再按住字母”O”键盘,键盘一个奇怪的字符,输入到文本区域。对比一下你不按住Shift键,输入相同的字符…

iOS 5.x系统原生中文输入时,空格键盘是对候选词进行选择,确认键是将候选上屏(但在未选择候选词之前确认键是将输入的编码上屏),这种方式与我们传统的输入习惯不符(我们习惯空格将首选词上屏),在这里爆一个独家小技巧,如果你希望的中文候选词就在第一位,你进行 Shift+空格键 操作,这样就可以将第一个候选词上屏了,绝对独家哦~~ ps. iOS 6同学请无视吧!

再来看另外一个例子,用户在iOS输入符号,如感叹号!、问号?、或者$&@等符号时常规流程是怎么样的?在输入面板中点击左下角的符号键,进入符号面板(可以看分割线以上的图1,非本篇的图1),选择所需要的符号,再点击左下角的英文键,返回英文输入面板。

用户在iOS里输入一个符号平均需要3步,但这里有另外一种“捷径”,用户点击输入面板左下角的符号键(手指不要离开屏幕),面板切换到了符号面板,手指滑动到希望输入的符号上,面板自动返回到原来的英文输入面板。这样的设计,有效的为用户节约了点击次数,并能够快速的返回原来面板继续之前的输入,这样的设计同样也有弊端,不足够显性化,也没有适当的引导,造成大量的用户输入符号时还是需要进行3步操作。

最后,再说一个小细节吧,这其实并不算是输入行为,当用户在输入区域进行了输入操作,晃动一下手机,将出现一个“撤销键入”的dialog窗口,如图

图7

======带个自私自利的小AD=========

只需你花一分钟,让业界听到你回声。如果你有更加丰满、独特的个性化点评视角,欢迎奔跑加入iDoNews点评团,私信@沸话小欧 即可。

转载请注明 DoNews新锐作者/MoonMonster

Tags: ,,.