那些重要却容易忽视的用户体验

随着2007年乔布斯从兜里掏出第一代iPhone,智能手机确实被重新定义了。用户体验从未如此重要过,也从未如此被理解的如此泛滥。

如同产品经理一样,用户体验也几乎没有什么门槛,人人可以认为自己能够胜任提升用户体验的工作。可这并不是一项轻易的工作。其中有很多细节容易被人们所忽视。当你专心致志的投入在产品的开发上,很难从客观的角度去看待各种问题。

我接触过很多网站和App,手机里也大约装了150个App。出于职业的关系,只要看到界面还不错的就会下载下来体验一下。根据我的使用经验来整理一些我体会到的容易被忽视的用户体验的方面。

容错性

用户体验不仅仅是界面上的事,还有背后使用逻辑上给用户带来愉悦的体验。容错性即是其中之一。

在Pinterest网页上,用户没有登陆或者第一次打开首页,网站会在页面中央放置一个很显眼的注册表单。在首页未登陆状态仅提供注册表单的目的自然是为了增加用户数量。因为想要浏览Pinterest中无穷的高质量图片就需要注册,当然注册是免费的。

那么,对于已经注册的用户想要在新的电脑上登陆,必然需要在进入首页之后再点击右上角并不是很显眼的登陆按钮,然后在登陆的页面路输入用户名和密码登录。

因此,Pinterest在首页的注册表单上做了些优化。已注册用户可以直接在注册表单里输入用户名和密码登录。在容错性上多花了点功夫,但是却带来了更愉悦的用户体验。

不要问我怎么发现的。因为哪天你不在意把注册框当作登陆框输入之后发现竟然登陆进去了,我想你一定也会感到很惊奇。

在这个Pinterest的注册框可以直接登陆

视觉可预见性

可预见性有很多,先来说说视觉上的可预见性。

因为网速的关系,以图片展示为主的网站页面自然会加载的比较慢。因此为了缓解用户等待时的无聊,预先向用户透露他们将看到什么样的内容会是较为有效的。

同样还是Pinterest,因为这个网站就是为了图片而生,所以对网速的要求也较高。因此在页面上图片还没有加载出来之前,Pinterest会预先分析图片的主色调,然后先在图片的位置显示纯色的背景。当图片加载完成后,再将纯色背景替换为相应的图片背景。

这么做出了可以让用户预先知道将要看到的图片大致是什么样的色调,更主要的是避免了图片加载出来之前,页面上显示白花花的一片,从而可以达到提升视觉美感的作用。

Pinterest图片尚未加载出来会预先显示图片主色

另一个例子则是Medium,他们做的就更进了一步。相比Pinterest显示一块图片主色调的纯色背景,Medium显示一块非常模糊的图片,如同加了半径很高的高斯模糊效果一般。相比纯色,这种方式能够对图片有更多的预先了解。目的仍然是同样的:为了更好的提升视觉美感。

Medium在图片尚未加载出来会预先显示模糊化的图片轮廓

快速使用

让用户可以快速的使用一项功能,不要让用户等待。将可以省略的步骤省略,将不重要的步骤放在后面操作。避免给用户初次使用的时间成本过长,而造成用户的不耐烦。

举个例子,在知乎中,当你点击收藏按钮之后,会弹出一个收藏的分类,必须要勾选至少一个分类之后才能完成收藏的操作,而不能仅仅是添加在收藏的根目录清单中。这样的操作会拉长用户使用的时间,而多了一步操作也让整个流程变得繁琐起来。而有强迫症的人群,比如处女座,也许会在分类之间纠结许久,更不利于结果转化。

在知乎的这个界面中,要完成收藏必须选择一个分类

在iOS中,从任何一个App中返回到主界面都使用Home键。而在Android中,除了Home键可以直接返回主界面,系统还提供了返回键,这也能通过一步步返回,回到主界面。而当最后一步从App中返回到系统主界面时,几乎所有的国产App都会提示“再按一遍退出”。这与系统推荐的操作模式是相悖的,Android中不论是Google原生的应用,还是众多国外的App,最后一步都是直接返回到主界面,减少了一步操作。虽然避免了用户误操作退出应用,但是这样的场景还是太少。

我认为,这背后的逻辑还是因为国内的App大多还是按照PC上的开发思维来开发移动应用。认为从App返回到系统主界面就是退出,如同Windows上点击右上角的关闭按钮。而在移动应用时代,App作为软件的身份不是那么明显,而是更类似于系统中的一项服务而存在。这样对用户来说,这种体验使用更顺畅。

连贯性

一个App中,菜单按钮要么都位于左边或者右边,返回按钮都同样位于左上角,不仅是为了整体的风格统一,还能使操作更连贯。当用户对一个App很熟悉,就可以保持手指不划动长距离连续点击返回按钮,回到需要的页面。

举一个反例。在Evernote中,对现有的笔记进行编辑的按钮浮动在屏幕的右下角,而当编辑完成后,确认按钮又在屏幕的左上角。从编辑到完成的流程是线性的,将按钮的位置保持相对固定是更加有效的方法,不用再让用户去寻找下一步操作的按钮在哪里。尤其是大屏手机,这样的操作很累人。

更好的方式是即时保存,当用户从编辑界面返回到了笔记列表,就在后台自动保存,省去手动保存的步骤更为方便。也避免用户因误触到返回按钮而丢失正在编辑的内容。这方面,Evernote最大的竞争对手,微软的OneNote,做的更好。

Evernote中,新建笔记在右下角,完成却在左上角

慎用全屏

不论是在PC上还是手机上,全屏的功能都应当慎用。进入全屏意味着用户对全局的掌控力缩小了。而退出全屏要么是把鼠标移动到屏幕的边缘,或者是在手机屏幕上轻触一下,才能有退出全屏的按钮。更好的方法是在App内全屏,保留系统顶部的信号栏,让用户对手机当前情况随时都能了解,Android系统也保留虚拟按键,方便用户快捷操作。

举个反例,500PX,这个现在与Flickr齐名的,非常受欢迎的摄影社区的安卓版App浏览图片的时候是默认全屏的,安卓的虚拟按钮都被隐藏了起来。触摸屏幕并不会退出全屏,而是把UI界面都隐藏,只剩一张图片。只有从屏幕底部滑动才会呼出信号栏和底部虚拟按键。

尽管是这个图片为核心的App,也很少有图片能够完全覆盖手机的显示区域。通常我们都习惯于竖着握手机,当看到感兴趣的好看的图片的时候才会横屏仔细欣赏,但是这样也很少会利用全部屏幕的区域,而隐藏了虚拟按键返回的时候相当的麻烦。

左,默认进入一张图片以全屏的方式显示并且不显示图片意外任何UI。中,触摸屏幕任何区域呼出UI,但整个App仍然处于全屏状态。右,从屏幕上下边缘滑动才能呼出信号栏和虚拟按键

提供缓存

对于需要使用联网的功能,尽量在本地提供缓存方便用户快速使用。而在稍后进行数据同步操作,避免用户使用过程中的等待。

一个典型的例子,500px。几个月前500px做了一次比较大的改版,原先的收藏功能改为了影集的功能,而且你可以创建多个影集。于是问题也就来了,点击添加至影集的按钮会弹出影集的列表,可是500px并没有做本地的缓存,必须等待从服务器加载好了之后才能选择。即使你刚刚将一幅图片添加至影集,App已经获取过影集的列表,你再次添加另一幅图片进影集的时候,还是会再一次联网获取列表。这个过程可能很快,也可能很慢,尤其是在网络信号不好,或者快速行驶的地铁里。以至于有时列表加载出来,我已经忘了原图是什么样,应该添加到哪个影集里了。

最好的方式就是在本地提供缓存,等待网络条件合适的时候再进行数据同步。我思考过背后处理的逻辑,有可能会造成数据冲突,不过这个应该是App开发商解决的问题了。这里我只是抛出问题。

500px中,将图片添加到影集需要等待列表加载,每张都需要重新加载一次

后台处理

使用过Instagram的用户应该会发现,图片上传的速度很快,哪怕是上传一段视频,都有可能非常快。因为Instagram背后的逻辑是当你开始选中照片开始就在后台开始上传,等你完成一系列滤镜的添加,标题的编辑之后,图片基本已经上传好了。

当然这种方式可能会带来额外的流量消耗,比如用户中途放弃了,或者选择了另一张图。逻辑稍加改进,仅在WiFi网络下启用这种预上传的方式即可轻松解决。

操作的可预见性

操作的可预见性是指用户在进行了一项动作之前能够预先知道会发生什么。尤其是当某些重要操作而且无法返回的时候,提前了解后面发生什么很重要,能够使用户不会觉得那么迷茫。

操作上的可预见性通常由视觉和使用逻辑组成。一个典型反例就是VSCO,这个牛逼到不行的修图软件,却是我认为最难用的修图软件。最大的原因就是VSCO的界面大量使用了纯图标,有些图标的含义并不好理解,因此导致很多功能只好靠猜。到现在都有一些图标的功能我没有猜透。

VSCO中,大量使用了没有文字标签的图标

相反,微软在Windows8系统中引入了开始屏幕,在开始屏幕的右键菜单中,有很多新的操作,微软在使用了新的图标之余,还配上了文字,这样用户不需要靠猜去理解这个图标的含义。

Windows 8中,微软给图标都搭配了文字标签

需要注意的是,图标是很好,但是也要慎用,尤其是超出用户任职范围的东西。通常只有垃圾桶,刷新的箭头,十字叉号,这些常见的图标不论在哪里用户都能理解,而剩下的特殊的图标并不是所有人都能读懂的,搭配文字是必不可少的。

提供试用

尽可能的给用户提供试用,而不是一进来就必须注册。如果你是新的网站或者App更应该如此。用户从AppStore或者Play市场下载了你的app之后,只是出于兴趣,觉得可以尝试一下。不要一上来就必须注册,这样会破坏用户继续尝试的动力。除非你是Facebook或者Twitter,已经足够有名了,否则大家都不愿意对一款产品有深入了解之前就去注册。要知道,网络时代,我们每个人在各种不同网站不同app上注册的账号已经够多了。如果核心功能真的需要注册才能使用,提供使用Facebook之类的账号第三方登陆的方式是个不错的选择。

不要拟物

不要在界面上模拟实物的感觉。

最典型的就是阅读工具的模拟翻页的功能。实物就是实物,app就是app,没必要在app中模拟实物的感受。实物的感受是模拟不来的,而且更显得不伦不类。既然载体和纸张根本就是天壤之别的东西,就应该利用好特性会创造出不同的体验。液晶屏的优势在于可以随意调整文字大小,修改自己喜欢的字体,调整眼睛看起来舒服的背景色,而这些是纸无法比拟的,发挥好这些优势才是关键。不要试图在用户使用数码设备阅读的时候让他以为正在阅读一本书,这是不可能的。

Book Bazaar Reader中翻页效果模拟了真实的翻书效果

总结

这10条用户体验并不全是关于用户界面设计的,有些是关于产品背后的逻辑。当然,用户体验从来都不仅仅是用户体验上的事,用户体验一直存在于各方各面。尽量把自己想象成初次使用的用户,并从用户的角度去感受一款产品。不要让用户思考,但也不要把用户当傻逼。

当然这些只是我这么久以来的试用体会,你可能会同意我的看法,也可能不同意。这很正常,这取决于你是如何体会一样产品的。

其实我不喜欢时不时就搬出用户体验这样的概念。用户体验这四个字已经被说滥了,以至于不管做什么产品,都能搬出一大堆关心用户体验的论调。但事实是,真正关心用户体验的还是少数,更多的是一边高喊我们关心用户,一边强奸用户的意志。说到底,还是为了赚钱。企业为了赚钱没错,但是吃相也别太难看,节操还是要有的。

希望别都像百度看齐,而应该向Google,微软,亚马逊,苹果这些行业代表看齐,学习他们是怎么对待用户的。请学习星巴克的理念,当你真正关心你的客户,钱是不怕赚不到的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,324评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,356评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,328评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,147评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,160评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,115评论 1 296
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,025评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,867评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,307评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,528评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,688评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,409评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,001评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,657评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,811评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,685评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,573评论 2 353

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,070评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,093评论 4 62
  • 第二步扫描具体局域网所有主机 1、点击第一个,然后选择网卡,我的是eth0 2、然后扫描主机,限制性1,后执行2列...
    up_shang阅读 1,053评论 0 1
  • 任何有人物或拟人的文学作品都会涉及到情感的表达。能够生动的表达情感,不仅能让文章更丰满,让细节更具体,也能打动人心...
    fengtasy阅读 1,722评论 0 1
  • LM09:早安,我是耐心,昨天看了《因为有爱,所有话要好好说》的小视频,对于在乎我们的人,我们的一句话,就可能让她...
    心羽暖姐姐阅读 268评论 0 0