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

原文链接:http://blog.sina.com.cn/s/blog_5b7b30fb0100adzr.html

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)

相关阅读

Tags: , , ,

“心理分析案例系列(一):作为思维装置的线框图” 的评论共 3 条

  1. candy Says:

    谢谢分享:)

    作者在transformation阶段才开始做需求文档和竞品分析的功课,这个做法听起来很独特,但非常有道理。因为可以避免其他因素的影响和限制,把用户体验设计师的观察力,创造性和解决问题的探索能力最大限度发挥出来。值得以后工作中借鉴。

    有几个小疑惑:
    1. “问题空间”怎样定义?是指解决用户需求的设计情景么?
    2. 作者提到Convergence阶段,要定义设计规范。我下载globalcruises_ixd_v151.pdf文件,里面只有annotation和wireframe. 这就是作者值得设计规范文档么?似乎更类似设计说明书。。。

    订阅贵博有一段时间了,第一次留言,请多多指教~


  2. finger Says:

    作者在这里借用了认知心理学和人工智能中”problem space”的概念。也就是说:问题解决的过程就是把你的初始目标通过一系列的算法,逐步推进一致接近和达成目标的过程,这些算法都存在于问题空间中。

    Newell介绍了问题空间的原则如下: “人们解决实际问题的理性活动,可以描述为
    1)一系列知识状态
    2)从一个状态转到另一个状态的算法
    3)算法应用的限制条件
    4)决定下一步应用哪一个算法的控制性知识

    举个例子:你早餐想吃鸡蛋饼,这是你的目标,你首先要决定是在家自己做还是出去路口买一个;因为时间不够了,你决定出去买;等你到了小吃摊时发现人很多,就得决定去哪个摊位等,是大嫂那家还是大妈那家;最后你选择了大嫂家,等了1分钟后后,终于心满意足地迟到了自己的鸡蛋饼。这一系列的判断就是在你的问题空间中进行的。


  3. finger Says:

    第二个问题:
    我觉得作者在融合阶段主要是想说缩减设计范围,也就是我们说的“确定下一步要采取何种算法”,这个pdf主要是说明作者的思维过程的,没有涉及到设计规范。


我来说两句