发博文
正文 字体大小:

心理分析案例系列(一):作为思维装置的线框图

(2008-09-17 13:25:53)
标签:

ucd

交互设计

心理

用户体验

usability

experience

分类: 用户体验
Finger说明:曾经想自己写一篇设计过程心理分析的文章,后来发现实在难度太大,并且也是因为自己比较懒,所以写作计划就搁置了。最近偶然在网上看到一篇国外设计师的文章,算是作者的自我心理剖析吧,Finger深有戚戚焉,因此翻译过来供大家参考,同时请大家看到后不吝赐教,在我的博文后积极跟帖,也算是帮我个小忙吧。bow~~


                         深浅灰色:作为思维装置的线框图

                                                                 [阅读原文]

                                  “一张图胜过一千个文字,一个界面胜过一千张图。”
                                                          ——Ben Shneiderman, 2003

    我的好朋友Russ Unger最近为Peachpit出版了一本名为“用户体验设计项目指南”的书。在有关线框图一章中他让我做一些设计,我也很高兴做这事。他向我提供了一些背景资料和要求,以便重新设计一个虚拟的邮轮操作员主页,并请我设计一些加注释的线框图以便可以在书中引用。当我完成了这个小练习后,他要我为整个过程写一个简短的解释。本文是我发给他的未经任何删节的详细解释,说明我在设计过程中使用线框图作为思维装置。毫无疑问它将被编辑以适应书籍的限制,但他很友好地让我在这里发表原文。

    在我看来,线框图可作为一种设定和探索某个特定问题空间的“思考装置”——在这个例子中是供邮轮操作员使用的主页。要理解线框图的作用,就必须理解设计的本质。我把设计看作是对未来可能性的探索。我使用素描和线框图等手段进行探索行动,并评估这些行动的后果。当探索问题空间时,我可以比较容易地在头脑中保持设计模型,但我的首要目标——在利益相关者、目标受众和我之间创建一个对话框架的努力很可能会失败。

    我认为对用户体验人员来说,把设计看作问题解决是非常正常的。对我来说,通过使用线框图进行设计就是搜索问题空间的可选择方案,既是问题设定的过程也是问题解决的过程,这就意味着我总是开始于上下文情境(context)。为了简化说明,我选择我的目标受众的一个活动,让他们快速、轻易、优美地达成一个目标。在这个例子中,目标受众想在合适的时间,以合适的价格轻易地找到最好的邮轮。在我用纸或者Omnigraffle描绘出一系列想法来探索这个主要目标之前,我甚至不看需求文档或竞争性分析。此刻我不是要寻求解决办法,因为第一轮线框图是为设计师提供一个与其他设计师,利益相关者,以及线框图本身进行对话的空间。

    我的设计过程可以最好地描述为从发散阶段,通过转换阶段,最终达到融合阶段。在每个阶段,线框图都要提交给利益相关者进行批判和讨论。

    “发散”阶段主要探讨设计情境的制约因素和各种可能性。我会尽力在设计情境中发现不变的事实并尽量贯彻整个过程。这一阶段的大部份活动是收集信息,尽力理解和详细阐述设计问题。通过画出许多线框图,我可以探索可供选择的方案。所有不可能的或者可想到的想法都被呈现、测试,在许多情况下还会被抛弃。

    我最初的设想是在这一阶段形成的。在邮轮练习中我重点关注“搜索的集中性”,作为设计的驱动目标。我已经知道我想设计最佳邮轮搜索界面的可能性,我希望这项活动在设计前被引入并处于设计的中心地位。我描绘出这样一个概念:在用户甚至还没有看到完整的搜索结果之前,就立即向其提供建议的邮轮。从主页上,用户就可以进入一个对话并开始寻找一个完美的邮轮。这种交互方式背后的概念是很多年前由Blast Radius公司的 Peter Hong首次提出的,他们的小组现在与我们一起在Kayakon做PinPoint Trave的新搜索界面。这个概念曾经建立但后来又死掉了,但是我认为这个想法是值得保留的。

    在“转换”阶段,我减少了可选择方案的数目,和我的线框图包括的设计范围。我开始抛弃一开始想到的确实糟糕的想法。通常在此时,我会去看需求文档,并尽力理解利益相关者和业务需求的整个生态系统,并在我的主要设计目标的上下文背景(我的核心受众的那个中心活动)中解决这些问题。也是在此时,我开始处理其他竞争性的需求。在邮轮操作员的例子中,我描绘了页眉,页脚和静态内容,并划出内容模块所在的区域,例如CTAs(Call to Action)和promotions。在这个阶段我会和关键利益相关者共享输出结果,但是也会带上视觉设计师,研发经理和质量保证工程师,以便他们能够有助于这一进程,并提供更多的想法,同时指出隐患和制约因素。

    最后,作为设计师,我必须作出决定来执行设计规范。在“融合”阶段,我创建了两到三个备选方案供最后审议。我给线框图加上注释,以便利益相关者和目标测试者能够明白。你在图1.a和1.b看到的线框图正处于这一阶段,此时设计改变已经很少了,主要是对细节进行完善。

    这里有两个基本细化过的线框图通过了这个阶段。它们绝不是完美的,但满足了本次练习的目的,并演示了我的线框图的样子。

心理分析案例系列(一):作为思维装置的线框图
Figure 1.a | Global Cruises Sample Wireframe

心理分析案例系列(一):作为思维装置的线框图
Figure 1.b | Global Cruises Wireframe


Mark Brooks, a friend of Russ Unger, and visual designer - was able to take those wireframes and rather quickly start exploring various visual designs including the screen below.
心理分析案例系列(一):作为思维装置的线框图
Global Cruises Homepage Comp v1


If you wish to see the complete set - or for the raw Omnigraffle files which I am happy to share - just ping me on twitter: semanticwill

You can download the PDF here: globalcruises_ixd_v1.51 (PDF)

Omnigraffle Files here: globalcruises_ixd_v1.51 graffle (ZIP)


阅读 评论 收藏 转载 打印举报
已投稿到:
  • 评论加载中,请稍候...

       

    验证码: 请点击后输入验证码 收听验证码

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有