简化操作不恒等于提升体验

星期一, 1月 25th, 2010

在许多时候，简化用户的操作可以很大程度的提升用户体验，但绝不能就此视之为“金科玉律”，某些场景下，过于便捷的操作，反而会让用户产生挫败感，最近在支付方式页面，某个细节的设计上设计师们进行了激烈的讨论，讨论的过程中些许感悟和想法，草草记下。

先简单描述一下要实现的交互：用户先选择设置，然后在弹出的选择层中设置的银行账户，选定后，系统将所选信息更新到图中“未设置”区域，选择层随后自动消失。要实现的功能很简单，接下来我们看A，B两个设计方案：

收银台白板

两个方案唯一的区别就在于，用户选择单选框后，是否需要再多一步确认的操作。传统概念上，大家自然会选择简化用户操作的方案B，但是在这种场景下用户如B方案操作的话，一旦点击选择层中的任一选项，系统都会认为这是用户最终的决定，随即就会更新信息。如果用户无意识随意点选两下的话，那么当他点中一个选项时，可能会惊讶的发现信息已经被更新了。一切都在瞬间完成了，太过突然。更要命的是，选择层随后也消失了。当发现“杯具”发生后，用户只能重新点击设置，触发选择层，然后再选择一次。相比之下方案A的实现，用户虽然多了一步操作，但正是这步操作，让用户在得到系统反馈信息的时候，不至于太意外，一切都符合用户的预期……

查看全文 »

Tags：, , | 评论[7] | 共有1,163次浏览

随感协作开发的JS设计模式

星期五, 1月 1st, 2010

从最原始需求出发，我们必须有一个最简单的实现类，这个类必须是可继承的。方便之后不同的业务需要做不同的扩展。我们必须确保这个类的稳定性。

简单实现类的定义：鼠标点击触发某容器，不带任何辅助效果。我们来想想，这么简单的一个类，需要包含哪些方法，搭个骨架出来：

  1. AP.widget.basic = new AP.Class({
  2.   setOptions:function(options){
  3.     //接口设置
  4.   },
  5.   initialize:function(targets,options){
  6.     //初始化方法，目的是建立targets子集元素和某方法的关联 
  7.   },
  8.   getVessel:function(target){
  9.     //获取满足target映射关系的容器 
  10.   },
  11.   bindEvents:function(target,vessel){
  12.     //这里绑定target的触发动作
  13.   },
  14.   action:function(){
  15.     //target绑定的事件触发的执行函数，包含你要执行的逻辑 
  16.   },
  17.   show:function(){
  18.     //显示容器 
  19.   },
  20.   hide:function(){
  21.     //隐藏容器 
  22.   },
  23. })

这是所有满足本文定义的简单实现类所需的基本方法，我们可以将它作为一个基础方法，方便满足简单类定义的交互形式在此基础上扩展，然后我们开始归纳常用的满足简单类定义的交互形式，如：tab切换，气泡提醒，下拉列表，xbox……

查看全文 »

Tags：, , | 评论[10] | 共有1,675次浏览