瞬间的设计

时间:2014-12-28  |   0  |  

瞬间设计是什么?

良好的用户体验,全在于那些完美的瞬间。在第一个瞬间,假设当一位用户从购物搜索结果页面跳转到某个店铺的时候,他此刻可能是想看看这个店铺的风格及其信用;而下一个瞬间可能就开始琢磨如何使用页面中的导航来观看某个宝贝介绍。再然后则可能是询问怎验购买,从哪里注册,者看看商品是否打折,或者尝试联系这个卖家。

若想完成优秀的设计,我们就需要时刻自问:在希望用户做些什么,界面应该如何鼓励他们完成这些任务?每一个瞬间对于完整的用户体验来说,都是不可或缺的一部分,因为他们都有可能加强也可能摧毁用户对某个产品或公司的信心。为什么这么说呢?因为每个人在每时每刻所要完成的任务,对于此时此刻的他而言,那就是重要的任务。

设计师要做什么?

我们的工作不是设计花哨的页面,而是要设计美好的瞬间,确保每时每刻都完美,是设计师的职责和价值所在。在用户进行选择的瞬间,我们要帮助他们做出正确的决 定,我们要留意创建怎样的交互行为以及鼓励人们输入,编辑,搜索和共享,激励他们完成所有的他们希望做的事情,我们还应该设计各种手段帮助人们提高工作效 率——即使他们天生忘性大,老出错,或者总是三心二意。可以说设计师的工作就是考虑所有这些瞬间——设计一些东西来支持用户达成每一个目标,而不会干扰或 者妨碍到他们,同时,把这些完全不同的部分凝成为一个整体。只有这样他们才能相信我们产品,喜欢我们的服务。

好的设计绝不是单纯的因为天才的创意或者灵感爆发的一瞬间而产生的,只有设计师在“持续改进”的迭代方法中才能达到好的效果,你必须通过不断的“质疑自己”,在不同的设计种找到缺点,并寻求 更好的方案来改进它。Bill Scott在他的《Web界面设计》里提到了关于富交互设计的六个原则告诉我们如何发现并找到解决的办法,我遵循这些设计原则,通过实例和数据来和大家一起分析一些有趣的瞬间,指导我们的设计。

一、直接操纵原则

直接操纵原则就像Alan Cooper在《ABOUT FACE 2.0》中陈述的那样”:“在哪里输入,就在哪里输出“。例如编辑内容的操作完全可以不用重新打开页面,而直接在当前页面进行就可以了。

flickr是用到即时编辑照片信息的网站。这种方式更直截了当,用户不用切换当前页面就能完成。他们将更乐意为他们照片改名字,那么也就意味着会有更多与照片有关的元数据被记录下来,方便其他用户更好的搜索和浏览。我们先分析一下在这个操作的交互瞬间。

CAD6932E945C59F4D0E32E97CA82B8D9

每个交互元素在不同触发事 件下所表现的响应状态。其中橘黄色区域是隐藏在初始状态后面发生的动作和出现的元素。

Untitled-2

邀请编辑——默认情况下,标题正常显示。当鼠标悬停在标题上,标题立刻显示黄色背景条和一个“click to edit”的提示条出现,这种邀请提示的好处是——告诉用户当前区域是可编辑的并引导他们去点击。

编辑——单击以后,就立即进入到编辑模式,标题原位置出现了标题表单和”save”“cancel”按钮,用户就能非常清楚他们是在编辑标题。(这种方式的缺点就是多出来的按钮会把照片顶到下一行,造成排版不稳定)

完成——保存方式有很多种,flickr采用了文本的”saving…“临时替换标题,一旦保存完成,新标题就会以非编辑的样式出现。

上述过程中,使用到了一些邀请提示用户完成编辑,只满足了”可操作性“。那么用户怎样才能发现这个功能呢?这就涉及到”可访问性“问题。上述例子只 有在鼠标移上去时才能被用户发现是可编辑性的,那么很可能存在一部分用户没有用鼠标移上去而忽略这些邀请。为了让功能更易被发现,可以采用在标题边放”编 辑“链接。单击该链接便可触发编辑。(不过这也会影响到页面的视觉干扰问题,如果有过多的功能提示会造成页面噪点过多,可用率下降。)因此,做设计是要权 衡易读性和易编辑性哪个重要,做出取舍。

二、保持轻量级

Digg在早期的时候,用户想要推一篇文章,需要经过两步操作。而现在的改进版——只要单击”digg“马山就可以记录一次投票。就因为”单击,结束“容易了一点,带来了用户活跃度和网站点击率的飞速增长,这正是交互轻量级设计的一大作用。

怎样通过简化交互,实现操作更接近内容,从而保证设计的轻量级呢?

1.费茨定律

费茨定律指的是:移动到目标上的时间(T)和移动距离(D)的对数(S)成正比。用公式表示为:

T = a + b log2 ( D / S + 1 )来计算。其中

D:鼠标达到目标的距离
S:目标的宽度(尺寸)

我们可以简单的理解为:目标定位越容易,距离鼠标当前的位置就应该越近,目标占用空间应该更大。为了简单,我们可以把功能都集中到一块(如放在菜单 栏和工具栏中)。但是这样就违反了费茨定律(找起来会很费劲,距离也会增加)。通过上下文工具把操作放在相关内容附近是不错的办法。[注:上下文工具是桌 面右键菜单的web版]

2.实时可见的工具

digg在每篇文章旁边,有一个推举的记分卡,下方的”digg it“按钮要比其他的操作显得明显。鼠标悬停的时候”digg it“的按钮边框变成黑色突出显示,单击”digg“后,投票结果马上记录并在记分卡上实时更新。同时”digg“按钮灰掉不可点,标签文本也变成灰 色”dugg“。

2575ABF64A81A29B5716EC85DB740284

和digg一样,豆瓣的打分也是网站的核心功能。因此明确的操作(评级)邀请非常重要。打分后,用户可以随意更改打分分值,对评价作出删除和修改。
C1D57F5DFAA3BE5C23C915959E3C9880-1
shutterstock把加入的收藏的图片总是显示在页面底部的遮罩层中,用户可以随时看到并编辑自己添加的图片。
6953441D330C50E8A9598C6EFAB50824

3.保持关键内容可见

Gmail在页面加载的时候考虑了用户慢速连接的使用情况,减少样式的加载,使用备选方案保证主要内容可见。
D0AFB7384069BCFE2B6C9D31588DD0AA

淘宝的listing页面一次改版,鼠标悬停在宝贝图片上时,不仅出现大图,同时还在时间维度上对卖家推荐的商品轮播显示,用户同样可以点击下方的小图来选择查看。不仅保证了关键内容可见,同时解决了多信息的展现和交互。

0C74D972084A393D2912252AB6454DD2

4.只做一件事情

Linkdin消息列表中,用户名承载着两个交互行为:鼠标点击后 会跳转到用户profile页面,而鼠标悬停0.5秒以后出现弹出层,显示该用户的简介。如果我们不做0.5秒的限制,就会出现用户在鼠标以上去时立刻显 示弹出层,那么很可能会有用户认为这个链接只具备这一种操作功能,而忽略了它可以点击的功能。所以对一个交互行为只赋予它一种功能,多种功能需要考虑用其 它方式去实现。

E8423B083C33E50CB15F1FC57F565522

Amazon用 另外一种方式来解决多功能的展现。星星打分的信息包括两方面:鼠标悬停展现弹出层显示每颗星的打分人数;鼠标点击后显示评价详情页面。如果把这两个信息同 时通过点击星星来实现就会出现上述类似问题。Amazon则是通过增加一个类似下拉的按钮来承载鼠标悬停的交互行为,把点击行为只留给星星。

B2384E47EBC10F21094A7B70178BD385

 

三、不要打断任务流

用户在每选择一个操作时都希望当前的任务是连贯的。页面刷新会人为的造成用户体验——或者说用户心流的中断。

[在由harper pernnial 出版的《心流:最佳体验的心理学》一书中,把心流定义为:当人们进入一种全神贯注的状态时,他会感觉一切都是水到渠成,不费吹灰之力。]

1.三个重要的交互相应参数

Jakob Nielsen提出了关于交互的相应参数,这三个准则30年后的今天依然是不变的。[Miller 1968; Card et al. 1991]

0.1秒 是用户判断系统瞬时反应的时间,意味着在该时间内显示反馈结果用户是可以接受的。

1.0秒 是用户保持不间断的思维流的限定时间,即用户会注意到这样的延迟。如果没有特别的信息反馈该操作超过0.1而少于1秒,他们会比较难以忍受。

10 秒 是保持用户关注当前对话框的极限时间。对于长时间的延迟,用户会想在等待计算机完成期间处理其它事务。所以需要显示计算机将要完成的时间(通常选择进度条或百分比来表示),不然用户期待会大打折扣。

72F2FA61BCE140831CC2A30BE837F5A4

另 外,用户的反应时间不仅仅有上限,同时也有还有下限,也就是说他是一个阈值区间。在视觉感知领域,人眼观看物体成像于视网膜上,并由视神经输入人脑而感觉 到物体的像。当物体改变时(时间小于等于0.05秒),由于视神经对物体的印象不会立即消失,因此感受不到它的变化。人眼的这种性质被称为“变化视盲”(change blindness)。因此我在上述3个响应参数的基础上,加入了0.05秒这个参数,作为衡量人眼对计算机作出反馈的最小值。[注:也有数据显示0.04秒]

4B36008B0C3C819F0E248927F5D4726C

Gtalk

60C6DD168E7DB14CCB875BD49BD19837 4C515994D9F0C45C22FFC71B369AE7ED

我 的Gmail里通常嵌入gtalk  组件 ,在我的鼠标移动相关好友名字上时,该好友区域高亮显示,且显示覆盖层显示该好友详情。鼠标移出时该覆盖层消失。这两个过程的覆盖层响应时间都控制在 0.1秒时间内,用于响应用户的反馈。另外,当鼠标悬停后快速(<0.05秒)离开高亮区域时,覆盖层并没有随之消失,这是为什么呢?由上述的用户 最小反应时间可以看出,正常情况下用户操作鼠标移开的时间也应大于0.05秒以上,如果小于这个值,多半属于非正常情况下的用户操作行为。比如:手指不小 心碰了鼠标一下等。这时候设计师将这种情况判断为防止用户误操作而依旧显示覆盖层信息,想的所么体贴啊!

2.用虚拟的视觉效果

当页面加载时间过长时,用虚拟的视觉效果提前给用户展现,来满足他们的预期,是个不错的办法。

live的图片搜索在图片加载过程中将数据正在读取的图片用灰色背景填充而不是显示空白,让用户感觉这个加载的时间不会太长。

81AEBE1FA1A2752303D92311354C1FA1

3.缓解长时间的操作疲劳

359E0D4B08176102F46077A14A7647D9

TED是 一个关注分享科技、娱乐、设计等领域前沿思想的视频网站。这个网站不单单是我常去汲取灵感的好地方,他们的播放器设计也是我认为做的最细致的。上图正在播 放一个教授的演讲,鼠标移动到播放进度条上时我们会发现:当前视频被自动化分出不同片段,你可以hover查看详细文字提示并点击定位到该片段去播放。很 棒对吧?该设计充分考虑到用户长时间观看视频带来的疲劳,或者被迫中断以后重新定位的不便,于是将大于16分钟视频做了划分。

四、提供引导邀请

我们有句古话:叫“酒香不怕巷子深”。可是在互联网你如果遵循这句话就会死得很惨。因为我们的服务实在太多了,用户如果找不到他们想要的信息,会毫不犹豫的离开。提供邀请有利于帮助他们建立熟悉的体验。

5B4BFB3CD3FA302EC68AB5C16975EFC8

上图是Absolutely网站的设计师的个人blog,他的blog独特点在于每个页面内容都经过精心设计。而Twitter是他积累思想和灵感的常用工 具,因此在页面的首页都大大的显示了“follow”的信息提示和邀请。在这里关于邀请的细节他做了很多尝试,我们不妨来看看。
F842AC900086F7F70B1F4C43A2A3917B

可以看出,设计师仅仅改变了邀请文案,从之前的“我做什么”改成“你可以做什么”到“你可以在哪里做什么”,就将follewers的百分比提高了2倍。

Google docs

Google docs在“share  folder“功能刚上线时,采用了两种邀请方式:一个大大的覆盖层指向“my folders”,帮助说明告诉用户如何使用以及share后的提示信息。并提供以后查看或关闭该邀请提示。关闭后还可以点击页面上方的链接查看详情。

A93EC5331CD0753B642C4C759B914D9D

C1A05EA56B8321D9BB875281BF37F166

2.动态邀请

动态邀请适合提示用户当前页面包含什么功能。用户一般没有耐心去看文字,利用动态邀请可以在交互过程中吸引用户,并引导他们进行下步操作。

Google map

Googlemap增加的“街景”模式浏览用小黄人引导发现新功能。

2009-12-21_164045

案例

我在做淘宝的评价时,也用到了邀请引导。为了让用户发表有帮助性的评论,在输入框运用了文案的邀请提示。同时“店铺动态评分”的星星打分的拖拽属于比较高级的操作,需要告诉用户怎样打分,并用图形将打分后的结果显示出来。

2009-12-21_165113

2009-12-21_165133

 

五、过渡转化的使用

 

 

在 《mind hack》一书中,揭示了人脑鲜为人知的工作原理。其中提到了“突然的移动或闪烁会吸引人的注意力,这正是负责视觉处理的第二块区域的功能。这就说明了 “动画”或“动态的变换效果”会成为web界面中吸引人注目的地方。过渡的使用它会造成视觉干扰,扰乱我们的思维,只有在特定的情况下使用特定的方式才能 达到到理想的效果。

展开/收起

苹果网站左侧分类导航栏采用了响应式展开收起的动画方式,不仅节省了空间,还把注意力聚焦在当前的tab下面。

   

70618BE7941DDD0F1BE611656977BC15

位置变化

google(不 是谷歌)的个性化搜索帮助在用户登录时对每条搜索信息进行相关操作,你可以发表评论,将该信息置顶或删除,用来维护自己想要的信息。点击关闭按钮后,他就 通过瞬间气体消失的动画生动的表现当前的信息已经删除。点击那个小箭头,当前信息会动态漂移到最顶部。告诉你他的位置已经出现了变化,如果不用这个动画效 果,你可能会莫名其妙,甚至没有发现它的变化。

43B12F96E796D6226739C13A4725D5EF

       

告诉当前的状态

   

flickr批量上传时,通常系统处理时间会比较长,甚至还有可能产生错误导致操作中断。他们采用了对每个照片的上传进度进行实时反馈为了,告诉用户当前的状态,从而给他们的错觉认为 该过程不是那么长,加速了用户的等待时间。

 

告诉当前的状态
flickr批量上传时,通常系统处理时间会比较长,甚至还有可能产生错误导致操作中断。他们采用了对每个照片的上传进度进行实时反馈为了,告诉用户当前的状态,从而给他们的错觉认为 该过程不是那么长,加速了用户的等待时间。

 
1AD9970B4CC3C3E5D538ED9C4A0E0F30

igoogle在页面又是个告诉当前状态的例子。用户带开页面时会提前显示各个组件的样式框,同时显示“正在加载”的状态告诉用户内容还在处理中。

BFC6A7D1882BB159D7450005F6877B85

Gap是一个年轻品牌的服饰

 

 

购物网站。他们的

购物车在默认时显示在导航栏上,用户不会太过关注。一旦有新的商品被加入“购物车”,就会以下拉菜单的形式显示新加入的商品,从而建立起对应关系。

34600E05CBEC43635F707828AF7469CA
2626905676F85E5982018163616713DB

六 即时响应

用户进行的每一步交互,都希望看到清晰、及时的提示和上下文反馈。Apple Human Interface Guildeline早有提到过“反馈和沟通”原理,对其有如下描述:

……通过提供适当的反馈让用户获得足够信息,当用户开始某一操作时,要给出相应的提示,以表明应用程序已经接受用户输入且在对其进行处理。……

接下来我们看看都有哪些及时响应的方式。

即时预览

同样还是Gap网站。在鼠标移到商品图片时,会默认自动化分出的区块(类似于放大镜),右侧显示被放大的预览图片来查看每个细节。

 

 

 

84D71794A395E9F9F9CC1FA1BE4EC707

实时更新

BingTweets是 一个由微软、Twitter和Federated Media共同打造即使搜索的独立网站。它的好处就是可以搜索twitter上最新最快的消息。你可以从不同tab下的标签里实时哪些是当前最热的(大号 字体显示),由于twitter的更新非常频繁,因此这些标签也是动态变化的,这一分钟和下一分钟看到的最热的标签都不同。

 

 

 

01BC14B295CCC2966BD7FE670194AD60

52E709FCFB27A431FE285C61176FA8CD

案例

淘 宝的注册页面交互过程很复杂,及时检验显得很重要。他能够告诉用户当前输入是否正确,而不用再点击提交时再做判断。比如说:在点击输入表单给予操作提示; 输入出错离开焦点给予错误提示;“会员名”输入时有5-20个字符的限制,为了告诉用户当前输入的字符数(有的用户不理解什么是字符)等。

203C6AC1E66C9A747A79589AE45CDA26

 

 

最后的最后

写到这里,应该结束了。不过我还想分享关于“乔布斯”的3个小故事。

在 macintosh系统开发阶段,设计团队竟然花了6个月时间用于细化滚动条,以达到令乔布斯满意的程度。滚动条在任何计算机操作系统里都是很重要的部 分,但却从不是用户界面中最显眼的要素。尽管如此,乔布斯还是坚持要对滚动条改成希望的样子,设计团队不得不修改了一个版本又一个版本。

“乔布斯可以一个像素一个像素地进行对比,来看看是否匹配。”设计工程师说,“他会一直深入到每个细节里去,详加勘察每一方面到像素的级别上去。若是有出入,“某些工程师可就要挨一顿臭骂了。

在itunes发布会的前20分钟,乔布斯还在和其他设计师针对左上角的字体进行讨论,而其他的高层却急得火烧眉毛,因为他们似乎还有更重要的事等待他确认。

设 计的品质在于细节,只有偏执狂才能成功。我一直以这些小例子作为激励我设计路上前进的动力,每次在我纠结这个地方用下拉框还是radio button的时候,用12号宋体还是14号雅黑体的时候,我都不会在认为这是浪费时间,是的,也许这些微小的细节和瞬间我们很容易忽略掉,但是正是这些 细小的东西在潜移默化的  改变着人们的生活,还有什么比做这些事情跟激动人心的 呢:- )

 


本文章引用UED淘宝的经典文章

分享: