文章标签 ‘瞬间的设计’ 的存档

• 瞬间的设计(三)

  日期：2009.12.26 | 分类：用户体验设计(UED) | 评论数：0

  三、不要打断任务流

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

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

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

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

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

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

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

  

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

  

  Gtalk

  

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

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

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

  

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

  

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

  四、提供引导邀请

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

  

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

  

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

  Google docs

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

  

  2.动态邀请

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

  Google map

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

  

  案例

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

  

  

• 瞬间的设计(二)

  日期：2009.12.24 | 分类：用户体验设计(UED) | 评论数：0

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

  一、直接操纵原则

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

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

  

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

  

  邀请编辑——默认情况下，标题正常显示。当鼠标悬停在标题上，标题立刻显示黄色背景条和一个“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“。

  

  和digg一样，豆瓣的打分也是网站的核心功能。因此明确的操作（评级）邀请非常重要。打分后，用户可以随意更改打分分值，对评价作出删除和修改。

  

  shutterstock把加入的收藏的图片总是显示在页面底部的遮罩层中，用户可以随时看到并编辑自己添加的图片。

  

  3.保持关键内容可见

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

  

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

  

  4.只做一件事情

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

  

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

  

• 瞬间的设计(一)

  日期：2009.12.24 | 分类：用户体验设计(UED) | 评论数：0

  瞬间设计是什么？

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

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

  设计师要做什么？

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

  从一个例子开始

  如何设计美好的瞬间？在开始之前，请大家先回想一下igoogle界面，这个产品大家一定很熟悉，有的设计师几乎每天都用到它。igoogle有很多关于拖拽的操作，而拖拽这个复杂的交互行为需要不同的状态（我们称之为瞬间）来表现其交互事件（Event），yahoo模式库曾对其进行详细的划分，他们分别是：

  * 页面加载（Page Load）
  * 鼠标悬停在拖动目标上（Mouse Hover Over Drag Object）
  * 鼠标按下拖动目标区域（Mouse Down On Drag Region of Drag Object）
  * 拖动发起（Drag Initiate）
  o 拖动原位置（Drag Over Original Location）
  o 拖动离开原位置（Drag Leaves Original Location）
  * 拖动重新进入原位置（Drag Re-enters Original Location）
  * 拖动有效区域（Drag Over Valid Target）
  o 拖动进入有效的区域（Drag Enters Valid Target）
  o 拖动悬停于有效的区域（Drag Hovers Over Valid Target）
  * 拖动推出有效的区域（Drag Exits Valid Target）
  * 拖动非操作区域（Drag Over Invalid Target）
  o 拖动进入无效的区域（Drag Enters Invalid Target）
  o 拖动悬停于无效的区域（Drag Hovers Over Invalid Target）
  o 拖动退出无效区域（Drag Exits Invalid Target）
  * 拖动非具体目标（Drag Over No Specific Target）
  * 接受放置（Drop Accepted）
  o 接受放置起始（Drop Accepted Begins）
  o 接受放置结束（Drop Accepted Ends）
  * 拒绝放置（Drop Rejected）
  * 放置于原位置（Drop On Original Location）

  此外，拖动的目标模块包含了以下界面元素（Actor)，用于展示以上交互事件的种种有趣的瞬间，他们分别是：

  * 页面（静态文字，图片）Page (static text, images provided)
  * 光标（Cursor）
  * 工具提示（Tool Tip）
  * 模块（Drag module）
  * 模块存放区（Drag module’s Parent Container）
  * 模块放置区（Drop Target）

  针对每个界面元素所表现的交互事件不同，我们就可以得到很多有趣的交互瞬间，如以下表格所示：

  

  细心的你也许会发现，为什么这里只列举了少数的事件和元素，而没有都列举出来。其实这是因为部分特殊的交互事件非常复杂，很难一一列举。仅仅“拖动进入到无效的区域”这个交互事件就有很多种情况，比如：把模块拖动到浏览器地址栏里的情况；把模块移动到toolbar下方时的情况；还有“移动模块到有效的区域”过程中，该有效区内的模块会被挤到其他的区域内，什么时候作为判断来移动呢？尝试后你会发现当被拖动模块超出了原有模块尺寸的1/2时，就会发生跳转等等。

  由这个例子我们不难看出要设计美好的瞬间，要做到以下几点：
  1.关注分秒的响应（比如说我们要考虑到页面的加载效果）
  2.关注微妙的细节（鼠标hover上去的光标显示效果，移到哪里显示等等）
  3.想象各种可能性