交互设计和交互设计

<p>实际上, “交互设计”可以分成两个部分: 用户使用流程的交互设计、界面呈现的交互设计(我往往叫他单页面交互)。印象中, 最早<a title="Cooper" target="_blank" id="oyrc" href="http://en.wikipedia.org/wiki/Alan_Cooper">Cooper</a>在解释“交互设计”时, 说到的也是这两个部分。</p>
<p>所谓“用户使用流程”, 源于“业务逻辑”, 又不同于业务逻辑。因为业务逻辑一般都更偏向于技术模型, 对于实际的用户使用来说会过于繁复, 易用性很差。<br/>
这份工作, 一般由产品设计师(负责功能设计、信息架构、‘交互设计’)来完成。比如, <br/>
<em>(下面的例子, 有兴趣的同学可以给画成流程图, 理解起来会更形象)</em></p>
<p>这里有一个Push Mail添加帐户的“业务逻辑”(不包括错误判断): <br/>
1》进入“系统设置”, <br/>
2》进入“帐户管理(帐户列表)”, <br/>
2.1 选择“添加帐户”;<br/>
3》输入邮箱名称, <br/>
4》输入邮箱地址和密码, <br/>
5》填写手机号和签名, <可选择“跳过”><br/>
6》设置邮件服务器, <br/>
7》最后提交、完成。</p>
<p>评估: 如果把这个流程直接作为用户的使用流程, 所有用户要完成这个添加帐户的过程需要7个步骤, 至少8次提交。</p>
<p>经过“用户使用流程的交互设计”之后, 这个“业务逻辑”应该变成更合适的“用户使用流程”。可以是: <br/>
1》进入“系统设置”, <br/>
2》进入“帐户管理(帐户列表)”, <如果现在一个帐户没有, 直接跳过帐户管理开始添加帐户><br/>
2.1 选择“添加帐户”;<br/>
3》输入邮箱地址和密码, <br/>
3.1填写邮箱名称、手机号和签名, <可选, 默认邮箱名就是邮件地址, 签名就是邮箱前缀, 手机号可以不填><br/>
4》设置邮件服务器, <在第3步就判断“该邮件后缀, 服务器上是否已有配置记录”, 如果有, 直接到完成界面, 同时提供更改配置的入口。><br/>
5》最后提交、完成。</p>
<p>评估: 7个业务逻辑上的步骤在这里变成了6个。用户的8次提交变成了最少3次。且80%以上的时候可以少于4次(数据显示, 使用量最高的10个邮件服务商拥有了80%以上的用户)。</p>
<p>后, 经过讨论, 我们考虑到“安全问题”和“商业价值”等多个因素, 认为: “有必要相对牺牲一点体验, 已达到‘让大部分用户主动填写手机号’的目的”。<br/>
于是最终的方案改成了: <br/>
1》进入“系统设置”, <br/>
2》进入“帐户管理(帐户列表)”, <如果现在一个帐户没有, 直接跳过帐户管理开始添加帐户><br/>
2.1 选择“添加帐户”;<br/>
3》输入邮箱地址和密码, <br/>
4》填写邮箱名称、手机号和签名, <默认邮箱名就是邮件地址, 签名就是邮箱前缀, 手机号为空。可以选择“跳过”><br/>
5》设置邮件服务器, <在第3步就判断“该邮件后缀, 服务器上是否已有配置记录”, 如果有, 直接到完成界面, 同时提供更改配置的入口。><br/>
6》最后提交、完成。</p>
<p>评估: 7个业务逻辑上的步骤变成了6个。用户的8次提交变成了最少3次, 常规4次。</p>
<p>当然, 这个“用户使用流程的交互设计”提交物不只是业务流程图, 而应该是“带界面的使用流程图”。<a title="如图" target="_blank" id="a6r8" href="http://www.flickr.com/photos/juui/3025207208/sizes/o/">如图</a>。</p>
<p>.<br/>
所谓“界面呈现的交互设计(单页面交互)”, 实际上是“UI设计”(也就是, 我在建议“取消用户体验部门”中说到的“视觉设计”)所做的工作。对于“界面呈现的交互设计”来说, “使用流程图”的每个具体页面的“页面内交互”都只是“建议”, 有权更改每个页面的“交互方式”。</p>
<p>还是上面的例子, <br/>
“使用流程的交互设计”已经规定好了, “填写邮箱名称、手机号和签名”必须“由一个单独的页面完成, 而且默认不跳过”, 但进入这个页面后“光标默认到什么地方?”, “界面呈现的交互设计”应该思考。<br/>
在“使用流程的交互设计”时, 或没有考虑到光标默认停放的问题, 或放到了“邮箱名称”上, 都是不合理的。“界面呈现的交互设计”应该在这个时候给优化成成“光标默认停留在‘手机号’的输入框里”。</p>
<p>这个例子里, “界面呈现的交互设计”表现出来的作用可能并不够强, 再比如, </p>
<p><img alt="http://farm4.static.flickr.com/3033/3024406729_8b06f01019.jpg?v=0" src="http://farm4.static.flickr.com/3033/3024406729_8b06f01019.jpg?v=0" /><br/>
(图1,<a title="Google短信提醒" target="_blank" id="mkc3" href="http://www.google.com/sms/alerts">Google短信提醒</a>的手机验证)</p>
<p>在这个页面中, 用户往往输入手机号以后不知道“验证码是什么? 哪里有?”<br/>
事实上, 也许我们把“获取验证码”作为一个更突出的内容会更合适一些。</p>
<p>简单优化如下: <br/>
<img src="http://farm4.static.flickr.com/3181/3025320134_b9b69e83a8_o.jpg" /><br/>
(图2,Google手机验证的简单改进)</p>
<p>这样一来, 输入手机号码虽然还是在一个页面中, 但用户在输入手机号码的时候只能有一个“获取验证码”的操作, 不会再疑惑。</p>
<p><strong>总结: </strong><br/>
简单来说, “用户使用流程的交互设计”是站在产品和体验两个角度, 更合理的进行产品设计。即保证完整的业务逻辑和产品利益, 又用最小的交互成本让用户完成任务;“界面呈现的交互设计”更多是站在易用性的角度优化“人机交互过程”, 让交互成本再小, 易用性更强。</p>
<p>在成熟的团队, 或者交互更复杂的产品中, 有人专门做偏向于产品的“流程交互”, 有人做偏向于UI的“页面交互”更合适些, 因为你经常会发现你的产品人员不懂界面设计, 你的界面设计人员不能产品流程…<br/>
还是那句话: 团队中如何分工无所谓, 有什么样的职位无所谓。不一定非得分开“流程交互”和“页面交互”, 但这些事情都是要有人做的, 分不分开要看你的实际情况。</p>
<p>本文, 只是为了解释: “交互设计”不只是“单页面交互”, 更不只是“流程改进”。<br/>
好的视觉设计师/UI设计师应该担负起“界面呈现的交互设计”的任务, 不能只做视觉;偏产品的“用户使用流程的交互设计师”, 并非“必须具备视觉设计能力”。
</p>
<p>来源: <a href="http://uicom.net/blog/?p=794" title="白鸦, 以用户为中心的设计" target="_blank" >白鸦, 以用户为中心的设计</a></p>




Have Your Say »

Required

Required, never published

无觅相关文章插件,快速提升流量