CMU-08-763-技术高管的人机交互导论笔记-全-

CMU 08-763 技术高管的人机交互导论笔记(全)

01:2015年11月2日,星期一

概述

在本节课中,我们将学习人机交互课程的基本信息、课程结构、核心目标以及为什么用户界面设计对产品成功至关重要。课程旨在教授四种核心的用户界面评估与设计方法,并通过实践作业帮助大家掌握这些技能。


课程介绍与后勤安排

我们开始上课。大家可能注意到,我们正在向硅谷的一些人进行同步直播,偶尔会有消息弹出。如果出现类似情况,请告诉我,因为我通常看不到。

欢迎来到《面向技术高管的人机交互导论》。这门课程我已经教授了大约十年,我们每年都努力改进。第一讲的人数总是超过教室容量,目前有超过100人注册,而我们的主教室只能容纳65人。我希望在第一次作业后,最终人数会稳定下来。如果你不打算选这门课,现在退出会对其他同学有帮助。但我今天的目标是说服每个人都留下来。

今天是万圣节,我们有一些剩下的糖果,请大家拿两块。很抱歉,硅谷的朋友们,我无法给你们糖果。

这门课程有三个不同的课程编号,但它们内容完全相同。如果你是Tepper商学院的学生,必须注册Tepper的编号。课程时间是每周一和周三的下午1:30到3点左右,地点在楼下的1305教室。我们使用Panopto系统进行录制和同步直播,所有课程视频都会发布在课程网站上。

课程网站链接可以从课程主页或我的个人主页找到,Blackboard上也有链接。在课程网站的计划页面上,每节课的材料下都会有视频链接。

目前有很多人在候补名单上。教室无法容纳130人,所以如果你听完这节课后决定不选这门课,请尽快退选,这对你的同学来说是礼貌的。我希望你们都留下来。

我没有固定的办公时间,但通常都在工作。如果你有注册问题,根据你注册的编号,需要联系不同的人。如果还是无法解决,可以找我。

我们有四名助教,足以处理100名学生的作业。他们都是人机交互专业的学生,背景扎实,会非常有帮助。他们将安排办公时间,具体时间表确定后会公布在工作人员页面上。

希望大家已经提前找到了课程网页。课程计划和作业都会发布在那里。我们主要使用Blackboard来提交作业和接收带有评语的作业反馈,所以不要惊讶于Blackboard上内容很少,所有主要材料都在课程网站上。

对于非Tepper商学院的学生,请注意Tepper的校历比主校区晚一周。由于我们有大约三分之一的学生来自Tepper,我们基本上需要遵循Tepper的校历。这意味着课程会延续到常规课程结束日期之后。在主校区的考试周,我们还有两节课和一次期末考试。

在规划行程时需要注意。如果你计划圣诞节回家,必须确保在期末考试结束前不要离开。期末考试将提供两次机会,一次针对主校区学生,一次针对Tepper学生,但两个考场都足够大,容纳所有人都没问题。期末考试日期是12月17日(周四),请不要在此之前离开。

考试周的两节课也很重要且有趣,它们安排在主校区的考试周期间。


课程资料与教材

课程的阅读材料几乎全部来自我们的教科书,也有一些可选的额外阅读材料。所有阅读材料都列在每节课的页面上。

我强烈建议每个人获取或借阅教科书,它也有电子书版本。我和我的朋友Rex Hartson共同开发了这本教材。大约四、五年前,他给了我一个非常早期的版本,我们在课堂上使用并根据反馈进行了改进。这个过程重复了两次,最终版本才出版。今年是我们使用正式版本的第四年,它非常有用。这本书有900页,看起来有些吓人,但我只指定了其中很少的章节。要完成作业,你必须阅读指定的章节,但这只是整本书的一小部分。

Rex表示他计划在不久的将来推出一个更精简、更聚焦的修订版。如果你对教科书有反馈,我很乐意收集并转达给他。

如果你对用户界面特性感兴趣,还有其他一些书籍可供参考。Byron Holzblat的书详细介绍了我们第一次作业要做的内容。Jakob Nielsen的《可用性工程》虽然有些旧,但非常有趣。Don Norman的《日常事物的设计》是一本非常薄且有趣的书,如果你对这类内容感兴趣,我强烈推荐。

所有这些书都是可选的,主要是为感兴趣的人准备的。顺便说一下,幻灯片已经发布在课程网站上。

另外,关于幻灯片的一点是,我每年都会创建一个新网站。如果你去看去年的网站,会发现它和今年的很像,只是颜色从红色变成了绿色。我在每个页面顶部都加了这个横幅,以免混淆。这样做的好处是,在你修完这门课程后,无论你去行业还是其他地方,如果你想回顾在HCI课上学到的内容,这个页面将永远存在,包含所有视频、作业和材料。你也可以使用去年的网站来预习、观看去年的视频或查看去年的作业。我们的作业会略有不同,但课程内容基本一致。


课程核心:四种关键方法

那么,这门课是关于什么的?主题是人机交互,也称为用户界面、用户体验。它有很多名称,也有一些不再使用的旧名称,如人为因素或人机工程学、人机界面等。

基本上,这是一种让你所有产品——任何需要人使用的产品——变得更好的方法。HCI研究所刚刚庆祝了其成立20周年,我们教授这门材料大约有18年了。我们几乎立即就建立了人机交互的硕士项目,并尝试了许多不同的用户界面方法和技巧,最终确定了这四种最为重要。

本课程的目标是让你理解这些关键的、已被证明既易于使用又非常有效的用户界面技术。在这门课的六次作业中,你将实际学习和实践这四种方法:情境调查、快速原型制作、用户研究和启发式评估。

因为这些方法是研究人的方法,所以它们不会过时。无论你研究的是老式台式电脑、笔记本电脑、手机、手表还是智能电视,你都在研究人们如何与之互动,而这不会改变。你可以用它来研究儿童、专家或新手。这些技术在很大程度上是与具体评估对象和设计对象无关的。

同样,快速原型制作也是如此。作为课程的一部分,你将尝试为某个东西设计一个更好的用户界面。这也是一项永远不会过时的技能,因为你总是在设计某些东西。

这门课是关于实际教授这些方法的。有时我会被问到:“我不想实际学习怎么做,我只想了解它们。”但这行不通,因为除非你实际去做,否则你不会真正理解它们。不幸的是,在一个七周的课程中实际实践这些方法,意味着我们需要相当数量的作业,而且作业有些长。

课程没有编程要求。前几次我试图让学生编程,但结果很糟糕,所以我们不再这样做了。每个人都将制作原型,你可以使用任何你想要的工具。默认工具是PowerPoint。你将在PowerPoint中制作一个模拟的iPhone界面或其他东西。如果你看过PowerPoint,它支持超链接和按钮,因此PowerPoint是一个功能强大的原型制作工具。你也可以使用Balsamiq或Axure等工具。有很多很棒的工具可供选择,任何人都可以学习。绝对不需要编写脚本或JavaScript、HTML、Java等代码。

因此,没有任何理由会导致任何人无法在这门课程中取得成功。


作业安排与评分政策

作业时间表已经公布,尽管作业内容尚未发布。作业在课前截止,这样做的目的是让大家没有借口缺席那天的课。

对于迟交作业,前三次作业我们有相当宽松的政策。每迟交一个上课日,扣10分(满分100分)。例如,作业周三截止,你可以最晚在下周一提交,只扣10分。如果再晚,则扣20分,依此类推。

然而,最后两次作业需要在同学之间交换。你的第四次作业将交给你的同学,他们也会给你作业。如果你迟交,就无法进行交换。因此,最后两次作业必须按时提交。在课程开始时,你可以有一些灵活性,但后果是明确的:除非有非常特殊的情况,否则迟交就会扣分。

如果你需要出差,总是可以提前提交作业。对于硅谷的同学,所有作业都通过Blackboard以电子方式提交。

我们谈到了期末考试。这门课可以通过/不通过评分。具体标准取决于你所在项目的规定。课程按分数评分,网站上有一个非常简单的公式。你可以查看教学大纲,那里有很多重要信息,包括先修条件、教科书、工作量等。

这是一门6个学分的课程,意味着每周需要12小时的工作量。每周上课3小时,剩下9小时用于作业。通常学生报告他们花费的时间大约就是这个数。我查过相关规定,以确保我有权布置每周9小时的作业,这确实是符合要求的。不幸的是,正如我所说,除非你实际去做,否则你无法真正学会这些技巧,而这需要一些时间。我们非常努力地确保作业不重复、不枯燥,并移除了一些学生认为特别繁重的要求。如果你对如何让课程更有趣有任何想法,请告诉我。

我们不允许旁听,因为教室已经满了。如果你不想修学分,欢迎观看录像。


作业结构与设备选择

那么,作业是什么样的?在这门课程中,每个人都将独立完成所有作业。你需要选择一样东西:一个网页、一个设备、手机上的一个应用、笔记本电脑上的一个应用、任何种类的电器、Giant Eagle超市的Redbox或机场的自助服务亭(这可能不是个好主意)。你将研究人们如何使用它,这将是第一次作业。

在第二次作业中,你将尝试发明一种更好的方式,通过在纸上绘制界面来设计一个更好的用户界面。

在第三次作业中,你将用你的纸面原型实际测试,通常找一个不太懂技术的人,看看他们是否能使用它,以及你的设计是否真的更好。

然后你将实现它,这可能是使用PowerPoint或Balsamiq等原型制作环境。

在第五次作业中,你们将互相批评彼此的设计。

在第六次作业中,你将根据批评意见进行修改。

因此,在整个课程中,每个人都将针对同一个设备、同一个用户界面进行研究。明智地选择你的设备非常重要。为了避免任何形式的作弊,每个人必须选择不同的东西。

在下节课开始时,我们将确保每个人都选择了不同的东西。我会审阅每个人的提案,并确保它们具有足够的复杂度。如果你要进行用户研究,而每个人都能轻松完成,那么你就无法从中获得有用的信息。所以你需要选择中等复杂度的东西。

网站上有很多例子。仅仅说“我要做iPhone”是不够的,因为iPhone有成千上万的功能。但你可以说“我要做iPhone的联系人列表功能”或“短信界面”(虽然这可能太简单了)。有很多想法可供选择。

有时有人问,如果你已经有一个初创公司,是否可以使用自己的网站。只要你不介意同学们看到它,并且不需要他们签署保密协议,这是可以的。使用相机等电子设备也基本没问题。

使用机场自助服务亭的问题在于,你需要让人们去那里实际操作,这可能不太方便。如果你想使用家里的东西,只要你不介意人们来你家使用它,也是可以的。也可以使用周围的电器,比如复印机或投影仪,它们通常出人意料地复杂。

我们如何分配?我已经在Blackboard上发布了一个链接。你需要在这里填写你想研究的东西。我会在下周三上课前审阅,标记出我认为可以的提案,并添加评论。对于不合适的提案,我会添加一些建议。我们将在课堂上讨论,以确保一切一致。

你需要选择之前没有人选择过的东西。为了公平起见,我昨晚给所有已注册课程的学生分配了一个随机数,并按随机数排序。如果你不在此列表中,只需将你的名字添加在末尾。

我已经注意到一些问题,比如“Kindle”太模糊了,你必须选择Kindle的特定任务或功能。对于“烤箱”,你应该注明型号。只要是完全不同的烤箱,两个人做烤箱也没关系。所以请注明你考虑的是哪种烤箱。

对于像Giant Eagle结账机这样的东西,你需要对实际使用它的人进行用户研究,商店可能不会乐意。这可能有点问题。如果你尝试,我没意见,但可能会遇到麻烦。对于可编程微波炉,请注明型号。如果你使用一个我没听说过的网站,请提供完整的URL,以便我了解。

关于这个任务有什么问题吗?有些人提交提案并获得批准后,在尝试第一次作业时可能会发现它太简单、太难或无法完成。在这种情况下,你可以更改,但必须更改为尚未被其他人选择的东西。

另外,有些人可能会选择某个东西然后退课,那么他们的设备就可以被其他人选择。所以你会看到一个可供选择的列表。

你不需要在课堂上完成这个,可以稍后做。考虑到每个人都是随机排序的,如果你看到下面有你真正喜欢的东西,你也可以选择它。所以,如果你排在后面,可能值得等待,以确保没有人选择你正在考虑的东西。无论你采用什么策略,每个人的设备都必须在周二晚上之前列在那里。


人机交互的重要性与核心概念

以上就是后勤安排。关于课程或第零次作业有任何问题吗?

现在,我将尝试说服你们,为什么这是你们在第二个小学期(或任何时候)可以选修的最重要的课程。我们将讨论用户界面作为一个领域,以及作为产品一部分的用户界面。

考虑用户界面时,一个关键问题是这个术语的含义。“用户”是谁?这很直接,就是将要使用你产品的人。这与“设计者”——制造产品的人——是相对的。

一个关键的观察是:设计者与用户不同。

我喜欢问的一个问题是:这个房间里有多少人高于平均水平?好吧,你们都在撒谎,因为如果你们是平均水平,就不会在卡内基梅隆大学了。这个房间里的每个人都比平均水平高出一个、两个甚至四个标准差。

有多少人在制造产品或思考时,会说“我不想要任何普通人购买我的产品,我的产品只面向聪明人”?这没有意义。作为高于平均水平的经理、工程师或无论你的焦点是什么,你与你希望使用产品的人不同。因为如果你只瞄准像你一样聪明或与你兴趣相同的人,你将失去几乎整个市场。

因此,本课程中讨论的许多机制和技巧,都是为了帮助你更好地了解用户:他们是谁,他们如何思考事物,他们与你(设计者)有何不同。

什么是用户界面?它基本上是用户遇到的一切。你可能认为用户界面是图标和颜色,但它远不止于此。它几乎是这个列表上的所有东西,基本上是产品中的所有东西。许多技巧,尤其是我们将要讨论的第一个技巧,真正关注的是“有用性”,这与“可用性”非常不同。这个产品是否在做人们想要的事情?它是否在做能帮助人们或让人们觉得生活更高效的事情?

这就是功能和有用性。你如何知道产品中需要什么?有需求分析等多种方法,我们将教你一种方法来探究这个问题。

还有“内容”,这对网页尤其重要,但也适用于其他有标签、名称或任何文字的产品。这些文字应该是什么?它们应该说什么?如何表达?什么对你的用户来说是清晰易懂的?

应该如何呈现?应该使用什么颜色?如何布局?事实证明,人们阅读界面的方式与读书一样,是从左上到右下。因此,你如何组织材料,使其以逻辑顺序呈现,让人们知道先做什么,后做什么?

导航在网页上非常重要,但在许多消费电子产品上也是如此。例如,如果你有一个高级相机,你想设置白平衡,这可能需要在菜单系统中深入两到三层。你如何设计,让人们知道白平衡在哪里,并且能够再次找到它?或者任何没有巨大屏幕的系统,都将有许多小选项。想想手表,在Apple Watch上点击多少次才能进入任何功能。导航方案是什么?你如何使其清晰?

它甚至关系到响应速度等事情。你可能认为这完全是工程选择,但它对人们的互动有很大影响。人们常常会说:“如果我点击这个按钮会很慢,所以我要做另一件事。”或者“这个网站太慢了,我要忽略它,去竞争对手的网站。”因此,用户界面是可见的,响应速度在用户界面中是可见的。

然后还有情感影响等因素。有多少人爱他们的手机?人们与某些产品有情感联系。有多少人爱Microsoft Word?有些产品人们的情感联系不那么强。你如何设计能让人产生这种联系的产品,真正帮助人们对购买、使用或向朋友展示感到满意?

显然,文档和帮助也很重要。

教科书区分了“用户体验”(包括所有这些方面,尤其是情感影响)和“用户界面”。我不做这种区分,我认为这两个词都完全合理地涵盖了所有这些方面。


高质量用户界面的属性

思考一个系统,想想你如何将其分类为高质量与低质量。对于高质量的汽车,每个人都知道那意味着什么:它不会抛锚,看起来不错。对于技术用户界面或软件产品,你会用哪些属性或指标来称其为高质量?

  • 稳定性:比如它不会崩溃。
  • 响应性:当你点击东西时它很快。
  • 一致性:各个部分看起来协调一致,相同操作在不同部分的工作方式相同。
  • 直观性:你可以理解如何使用它。
  • 易学性:无需帮助即可弄懂如何使用。
  • 美观性:视觉上吸引人,声音等其他界面部分也应如此。
  • 可预测性:随着时间推移变得更容易使用。
  • 符合期望:用户有特定的欲望和期望,如果界面按预期工作,就会显得更容易使用。
  • 易于理解:不仅仅是输入,还包括界面反馈给你的内容,你需要知道系统试图告诉你什么。

我这里还有一些东西,刚才没人提到“可学习性”,这可能属于直观性。但意思是新手可以立即开始使用这个界面。

我们也没有真正谈到“效率”,但这是用户界面的另一个关键焦点。如果你是系统的专家并且经常使用它,你应该能够快速使用它。所以有些人认为用户界面只针对新手,但实际上我们更关注专家使用,确保专家不会浪费时间,没有大量看似愚蠢的点击。因此,生产力和效率很重要。

“可记忆性”是指如果你做了一件事,离开一个月后回来,你记得如何做。

“错误”我们也没有真正谈到,避免错误是可用性的一个重要方面。

所有这些以及“满意度”,都是用户界面可用性的各个方面。这就是我们将在本课程中学习如何同时改进所有这些方面的内容。


用户体验与游戏设计

我们谈了一点用户体验,包括情感、趣味、风格和艺术。顺便说一下,关于设备选择,通常不建议选择游戏。

因为游戏故意设计得难以使用。你可以有一个界面上有个大框写着“赢”,那会非常容易使用,但一点也不有趣。游戏让自己变得有趣的方式,实际上是故意设置使用障碍或需要克服的难关。因此,除非游戏有一个非常有趣的机制,你想测试这个机制或游戏的设置(这通常很无聊),否则一般来说,游戏不是一个好选择。尽管它们很有趣,并且可能具有艺术性,但就我们在这门课程中教授的内容而言,效果并不好。娱乐技术中心等有专门课程关注测量趣味性和设计有趣的游戏,但这不是本课程的主要主题。

不过,即使是像iPhone应用这样的东西也可以很有趣。许多动画、晃动和滑动操作都很有趣。所以对于常规产品、常规互动来说,这也可以是一个合理的目标。

用户体验还包括品牌、政治以及设备本身之外的许多东西。服务设计就是理解整个流程,不仅仅是界面本身,还包括它如何融入你的生活,以及如何与你将要做的事情相契合。


为何用户界面至关重要

为什么关注产品的用户界面很重要?一个原因是,今天几乎所有人都期望所有产品都易于使用。没有人期望在使用某物之前阅读100页的手册。现在甚至很难找到某些产品的手册。

可用性是人们决定购买什么或在博客等地方评论产品时的关键评估因素。

事实证明,有明确的方法可以改进可用性,这就是我们本课程要关注的内容。所以,即使你认为自己不是设计师,仍然有很多方法可供工程师、经理等任何人使用,来衡量界面、改进用户界面并测试不同的方法。

当然,在一个六、七周的课程中,我不能把你带到人机交互专家的水平,或者像在我们硕士项目中学过许多不同技巧并有丰富经验的人的水平。但希望本课程的目标之一是让你了解这类人能够做什么。

让你体会到设计好的用户界面有多难,以及如果你是一名经理或产品负责人,用户界面专家将为你的团队带来什么样的技巧和方法。

有大量证据表明,接受过人机交互培训的人可以做出更好的界面。即使你从本课程中获得培训,也能提高你制作更好界面的能力。如果你将来与HCI专家合作,这当然也能让你很好地理解他们将做什么以及他们为团队带来的价值。


糟糕用户界面的代价与成功案例

世界上有很多糟糕的界面。这是一个比较老的例子:过去电器上都有需要设置的时钟。有多少人的时钟仍然显示夏令时?有多少是因为你不知道怎么调?

我们的老朋友Randy Pausch,过去每次教授用户界面课程时,都会用大锤砸碎一件消费电子产品,以此宣泄人们对这些设备用户界面质量低劣的挫败感。

有多少人拥有不止一个遥控器?它们都略有不同。这张照片是以前拍的,那时遥控器还有显示屏,现在很少见了。按钮布局总是不同,而且总是设计得很差。

这是1991年一篇非常有趣的文章,时间相当久远了。文章说:“我搞不定这破玩意儿。”从录像机、电话到复印机、微波炉,充斥着无用功能的糟糕机器正在让消费者发疯。“用户友好”到底怎么了?如果我们今天重写这篇文章,把录像机换成DVR,电话换成智能手机,情况仍然基本如此。许多消费电子产品的进步小得惊人,而另一方面,其他一些东西终于变得好多了。


优秀用户界面的商业价值

为什么公司要考虑改进用户界面?对客户有很多好处。新手能更快上手,人们不会浪费那么多时间学习你的系统。专家效率更高。大多数白领工作者大部分时间都在电脑前工作,因此,你能让他们更高效,将对人们实际完成的工作量产生重大影响。

它减少了错误。我们讨论的许多用户界面技巧实际上可以帮助你制作让人们少犯错误、更快发现错误并修复错误的产品。这显然是一个关键优势。

最后,正如我们谈到的,人们以使用你的产品为荣的情感联系,这当然会带来更高的生产力和满意度。

有一些研究关注可用性的成本,几乎所有研究都显示出令人难以置信的收益和投资回报率。这是因为可用性要解决的问题通常非常昂贵。

例如,如果你的系统在设置时让人困惑,他们可能会拨打你的帮助中心。每次拨打帮助中心的电话成本高达50美元或类似的高额数字。如果你的产品利润微薄,那么几乎每一个帮助电话都意味着你另外十几件产品没有赚到钱。因此,如果你能让所有人无需拨打帮助中心就能弄明白如何操作,你就以直接的方式节省了大量资金。

减少客户投诉。另一个重点是,正如我提到的,第一次作业和情境调查是关于需求发现,理解产品的真实需求。这可以显著减少你的工程预算,因为你会更清楚地了解产品必须做什么。如果你能把钱花在用户想要的功能上,那么你就不必浪费大量资金制作没人想用的功能。

事实证明,工程,尤其是软件开发,非常昂贵且难以进行。整个行业大量的工程努力浪费在从未面世、发布后不得不撤回或后期修复的东西上。许多研究表明,关键原因之一是缺乏对用户需求的关注,以及没有进行我们将要讨论的这类工作。

在第二次作业中,你将制作一个纸面原型,这可能花费你三四个小时。它将让你真正理解人们希望如何使用这个产品,人们如何反应,人们是否会觉得它有用。通过采用这些我们谈论的廉价且不费力的机制和流程,你可以通过确定产品的哪些部分是需要的,对公司的底线产生巨大影响。

拥有更好的用户界面的另一个好处是,它让你的销售人员更容易向人们展示产品的功能,因为功能会显而易见。销售人员会更好地理解它,客户也会理解,因此产品更容易演示和销售。

将工程资金投入到用户实际想要使用的地方,会增加所谓的“实现价值”,即你花费的钱实际上在为你工作。

如果你能通过可用性使你的产品与竞争对手区分开来,那显然会增加你的收入和利润。因此,有很多商业和金钱上的理由说明为什么可用性几乎总是有回报的。

一些修过我课程的人告诉我,他们实际上将课程中设计的产品用作毕业作品集的一部分。我们当然也看到,对具有用户界面经验或知识的人有巨大需求。用户界面专家有很多工作机会,即使你说你想成为经理,但有一些用户界面经验,或者作为工程师等,对你的简历和求职都是真正的优势。

所有公司、政府和军事机构都在用户界面上投入了大量的资金和时间。

关键的一句话是:如果用户不会用,那它就没用。

你可能认为,如果QA部门找不到任何bug,某个功能或系统就是可用的。但即使QA部门找不到任何bug,你把它交给用户,他们却无法使用,那么它可能就不存在,可能不算数。因为如果你没有为可用性测试你的产品,那么你根本就没有测试过它。

一个推论是,特别是对于网络产品或任何具有深层菜单结构的东西:如果用户找不到某个功能,那它可能就不存在。

百思买有一个很棒的研究,大约三分之二退回百思买的产品,是因为人们声称它没有某个它实际拥有的功能。仅仅是因为人们想要这个功能,希望它做某事,但不知道如何让它做,所以他们以为不可能,于是就退货了。显然,百思买和所有消费电子公司都因此损失了大量金钱。


成功产品的用户界面因素

反之,可用性确实定义并促成了产品的成功。经典的例子是Palm Pilot。有多少人听说过Palm Pilot?这是90年代末的一个大产品。有多少人知道这是什么?你注意到苹果标志了。对,这是Apple Newton。我不知道是否有人看过史蒂夫·乔布斯的电影,他们取笑了这个产品。这是苹果公司的一个失败产品,它太大太重,没有真正做人们想做的事。

另一方面,当Palm Pilot推出时,它非常成功。一个原因是它能放进口袋。另一个原因是他们非常仔细地设计了界面,让人们想做的事情真的很容易做到。他们花了很多精力去理解人们的需求,进行用户测试,并找出如何让Palm Pilot真正响应用户的需求。

谁知道这是什么?这是最初的iPod,有人年纪大到拥有过一台吗?是的,有不少人。iPod不是第一个数字音乐播放器。事实上,许多竞争对手多年前就有了数字音乐播放器,微软甚至在此之前就有一个。但没人想要它们。

一个关键原因是它们都有像下一曲、上一曲这样的小按钮,就像你的汽车或CD播放器上的那样。但当你有100首歌时,下一曲和上一曲作为选择东西的用户界面方式,完全是失败者。

最初的iPod有这个非常新颖的圆形转盘。他们非常精心地设计了它,这样如果你转得快,你可以快速浏览所有1000首歌。如果你转得慢,它足够精确,你可以选择一首特定的歌。如果你玩过其中一个,你可以探索光标实际上以非常不同的速度移动,如果你转得快或慢。他们花了很多精力来设计它,所以它非常容易使用。

但另一个重点是,在当时,如果你有像微软的Zune或Rio这样的其他播放器,买歌真的很难。那时所有公司都对人们盗版歌曲和翻录CD感到愤怒。苹果不仅创造了这个设备,还创建了iTunes商店,使合法购买歌曲变得便宜、容易,并且用户体验非常好。所以我们之前谈到了服务设计,iPod如此成功的关键原因之一是苹果进行了服务设计。他们不仅设计了iPod,还设计了iTunes,而且史蒂夫·乔布斯能够与所有主要唱片公司达成协议,这样所有你想要的歌曲都可以合法且容易地获得。因为很多人不想为了花99美分买一首歌而违法,这看起来太傻了。通过考虑整个流程,他们使iPod取得了巨大成功。

最初的iPod相当大且笨重,因为它们里面有一个实际的硬盘。如果你曾经打开过一个,看看他们在那时必须做什么才能让它工作,会很有趣。

每个人都知道这是什么,这是最初的iPhone,今天看起来有点小。但事实证明,它在当时也非常具有革命性。还记得iPod吗?Palm Pilot有一个全屏,它就是一个屏幕。有多少人记得黑莓?RIM黑莓,它有一个你用拇指点击的小键盘。事实证明,每个人都在朝那个方向发展。微软和Palm都放弃了全屏,转向了带小拇指键盘的半屏,因为这似乎是每个人都想要的。而苹果说:“我们不在乎。”

iPhone推出时,它几乎是第一款使用多点触控的手机。如果你了解这些旧设备的屏幕,它们是设计用来使用触控笔的。一个尖头的东西,但你不能在iPhone屏幕上使用尖头的东西,所以你必须用像手指这样的东西。史蒂夫·乔布斯非常反对触控笔,而支持手指作为界面。所以他们显然抛弃了之前为Newton手写识别器等所做的所有工作,使一切都变成可以用手指点击的大按钮。

所以它在当时非常具有革命性,因为其他人都走了不同的路。显然,它完全占据了市场,现在所有界面都以这种方式工作。

同样,对于iPad,没人认为它会有用,因为微软和其他许多公司多年来一直尝试推出平板电脑。微软有一个叫做Tablet PC的东西,比尔·盖茨曾站起来说这将是下一个大事件,结果没人想要。事实证明,现在几乎没人想手写了。我看到也许有15个人用真正的纸,但你们这代人真的对手写不太感兴趣了。所以,把平板电脑当作手写工具的概念是行不通的。但苹果的大创新或观察是,这应该是一个媒体机器。大多数人用iPad看电影、玩游戏、阅读,但不太用于写作或提供输入。

下一个例子是Wii。当Wii首次宣布时,微软、PlayStation和任天堂都在竞相制造更快、更大、更复杂的游戏机。而任天堂Wii实际上比所有竞争对手都慢得多。相反,他们把资金投入到这些创新的控制器中,这些控制器内置了运动传感器。而其他所有人都在使用传统的、需要快速手指操作的控制器。Wii曾一度完全主导市场,仅仅因为他们想出了这种新的用户界面、新的游戏方式以及可以提供的新类型游戏。他们证明了你并不真的需要所有人都认为是关键要求的所有这些额外的图形和处理能力。

这些都是优秀用户界面真正定义并使这些产品成功的例子。


网络产品的可用性

这对网络也是如此。网站确实在很大程度上由可用性定义,可用性主导着网络。

显然,现在几乎任何人购买任何产品时,都会首先在网上查找。所以即使你要购买像汽车、复印机或打印机这样的实体产品,你也会先在网上查找。但如果你要使用网络服务或电子商务网站,那么你将在网上实际购买东西。

如果消费者不知道如何使用你的网站,找不到产品,那么基本上他们会去别的地方。

一个有趣的观察是,如果你亲自去Giant Eagle,它没有你想要的产品,你需要费很大劲回到车上,然后开车去CVS或其他地方看看他们是否有这个产品。而如果你在Expedia上,不喜欢它的用户界面,切换到Yahoo Travel或其他竞争对手的网站真的很容易,只需点击一下。相比之下,实体商店切换起来要麻烦得多。

另一个有趣的事情是,谷歌在搜索方面做得很好,亚马逊在让你购买你想要的产品方面做得很好。如果你有一个小公司,有一个搜索框或购买框,人们不会真的把你的网站和其他小网站比较,他们会把它和谷歌、亚马逊比较。

如果你走进一个GetGo,在货架上寻找,他们没有你想要的产品,你不会感到惊讶,因为很明显这是一个小商店,与大型Giant Eagle相比。但这不适用于网站。如果你的小网站没有像样的搜索,没有一键购买,或者运作不佳,不幸的是,人们会说:“嗯,亚马逊能做到。”不一定考虑到亚马逊可以在每个页面上花费一百万美元,而你的小网站不能。

另一件相关的事情是,有一些关于网站设计糟糕的公司的研究,这对品牌名称的反映非常糟糕。所以,如果你是宝马或其他奢侈品牌,你认为“哦,每个人都会喜欢我的车,我不需要担心我的网站”,这项研究表明这不是真的。如果宝马有一个非常糟糕的网站,人们会想:“嗯,这家公司显然不关心可用性,他们的车可能也很难用,也许我会去别处试试奔驰。”因此,即使这可能与你实际销售的东西没有重要关系,网站的可用性也是一个关键要求。

电子商务网站与常规软件的另一个有趣区别是,如果你想购买一个产品并使用它,你必须先付钱。所以如果你有笔记本电脑或软件,有时你可以先试用再决定。但对于任何硬件或消费电子产品,你必须先付钱才能使用。而对于网络上的任何东西,最后一个按钮才是你真正拿到钱的地方。

因此,如果购买机制有任何令人困惑的地方,或者如果人们在购物体验中途对你感到恼火,他们就会离开,你根本拿不到任何钱。所以网络产品的一个很大区别是,钱只有在人们已经使用之后才来。


糟糕用户界面的严重后果

有一些例子表明,糟糕的用户界面确实造成了一些非常糟糕的事情。最简单或最不糟糕的实际上是降低了公司的价值和评级。

这是一个很好的例子:福特多年来一直致力于提高汽车质量。很久以前,他们的汽车有容易出故障的名声。所以他们非常努力地进行工程改进,使汽车不那么容易抛锚,发动机更可靠,所有其他部件也更可靠。然后在2011年,他们决定像其他人一样采用电子仪表盘,但他们做得太差了,以至于他们的质量评级急剧下降,仅仅是因为没有意识到需要在仪表盘质量上投入这么多资金。一些评论非常严厉:“一个交互系统的恼人行为导致其评级暴跌。”

所以这是人们必须处理的事情。一个糟糕的工作导致使用困难,这完全说得通。

这是另一个更近一点的例子,但仍然与福特有关。司机在打算按其他按钮时,意外按到了这个按钮。这是停车、倒车、驱动,这是你换挡的方式。而这是你关闭汽车的方式。果然,司机在高速公路上行驶时,意外关闭了汽车,比如试图切换到S挡时。还有乘客试图关闭收音机时,关闭了整个汽车。你可以想象,如果你在高速公路上行驶,汽车突然关闭,那真的很危险。

这篇文章说,13,500辆汽车不得不被召回。你怎么在召回中修复这个?他们可能必须更换整个设备或类似的东西。必须有一种关闭汽车的方式,所以它必须移到别处。

这是另一个很好的例子,我找不到更新的数字,所以这只到2013年。如果有人知道更新的图表……这条绿线是诺基亚或塞班系统,几乎降到零。蓝线是安卓,对吧?关于这个有趣的是,紫线是iOS,苹果。它并没有像你想象的那样在数量上占据主导地位。但它仍然是最赚钱的,苹果仍然是世界上最有价值、最赚钱的公司之一。原因之一是因为他们的用户界面和其他设计元素,他们能够控制成本。实际上,他们只有四款iPhone型号可以购买甚至得到支持,而安卓有大约1000或2000款型号,三星必须有100款产品使用安卓,100种不同的手机,而苹果只有四款。因此,尽管安卓拥有巨大的市场份额,苹果仍然能够在盈利能力和有效性方面保持领先。

但当iPhone推出时,诺基亚在这里表现不佳,但它仍然是一个主导者。我实际上看过一些早期的诺基亚手机,它们试图模仿iPhone,但很糟糕。我们谈到了iPod上的转盘,对吧?在iPhone上,如果你轻扫,内容就会滚动。在这款诺基亚手机上,他们没有做苹果所做的工程努力。当你轻扫时,感觉就像在泥泞中移动东西。感觉不对。与iPhone那种有趣且反应灵敏的感觉相比,它有一种烦人的、卡顿的感觉。所以诺基亚在早期阶段做错了很多事情。RIM也是如此,这条橙红色的线也降到了零。他们试图推出一款全屏手机,叫做Storm,有人试过吗?也很糟糕。是的,没人真的喜欢它。所以,许多人在没有投入足够精力或资源的情况下,试图复制这种界面风格,最终失败了。

还有一些糟糕用户界面实际上致人死亡的例子,这相当令人震惊。

第一个例子,这是一个比较旧的系统,但仍然很有启发性。这是一个用于船上人员、海军的显示器。人们应该追踪飞机。他们需要确定的一个关键事情是飞机是在下降还是在上升。因为如果它朝你飞来,那是坏事;但如果它在上升,可能就不是坏事。所以Aegis系统的工作方式是,这里有一个数字。如果飞机在下降,显然数字会变小。如果它在上升,那么数字会变大。这似乎是一个完全合理的界面。

但发生的事情是,负责监控的水手误读了其中一个点,以为它正朝他们飞来,并且直接对准了船只的航线,所以他们把它击落了。但结果那是一架正在起飞的客机。它确实直接对准了船只的航线,但它是在上升,因为它是客机,而不是在下降。这被归因于这个用户界面。显然,这是一个高压情况,如果你搞错了,而它真的在俯冲攻击你,那么它可能会炸毁你。所以这不是他们能够以正常能力工作的情况。

可能有什么不同的设计会是更好的用户界面?当然,可以用颜色编码。可能这个系统太旧了,他们没有那个选项。那么可能还有其他什么想法?如果你知道任务是什么,如果你知道他们需要检测下降,那么你可以说,好吧,让我确保那真的明显,让它闪烁或以某种方式特别显示这是你应该特别注意的一个。还有什么?对,你可以直接有一个箭头。易于解释,显示它是上升还是下降。还有其他想法吗?很好,为什么要把上升的也显示出来?我的意思是,也许他们需要为其他事情追踪所有东西,但他们当然可以有模式。也许在某种模式下,它只显示朝我飞来的或正在下降的,而不显示上升的。另一种可能性是,他们没有特别需要高度,也许他们应该只显示变化。所以+3或-700之类的。如果你真正需要知道的是变化,那么为什么不直接显示那个呢?为什么要让人们在大脑中计算?这就是Aegis系统。

有一些医疗仪器被指责性能不佳。这是一个电子病历系统,当它在医院安装时,大大减慢了医生的速度,以至于他们实际上开始失去更多的病人,因为医生花太多时间在电脑上做文书工作,而不是真正帮助人们。

这个例子。选举季快到了,我希望你们都享受所有的广告。这是2000年的选举,现在是很久以前了。但如果你记得,乔治·W·布什在那次选举中击败了阿尔·戈尔,选举完全取决于佛罗里达州的投票结果。有很多关于悬挂式孔屑之类的事情,结果证明这些都不相关。决定选举的真正原因是一个用户界面错误。

这些是佛罗里达州使用的选票。有大量证据表明……它说什么?颜色象征上升一座山?是的,颜色象征上升一座山,是的,我们说那很好。在这个例子中。是的,好的。

所以在这个例子中,这是纸质的,选民应该做的是打穿其中一个黑孔,然后由机器读取。你只允许打穿一个孔。这是他们想投票支持的总统候选人。帕特·布坎南。所以选举中奇怪的事情之一是,如果你熬夜看电视,出口民调显示戈尔以压倒性优势获胜,所以许多电视台宣布戈尔赢得了选举。但当他们实际计票时,发现戈尔没有赢,而是有成千上万张票投给了帕特·布坎南。为什么会这样?对。对,所以他们只是在这里,我想投票给阿尔·戈尔,所以他是第二个,所以我到这里来,往下数两个,然后打穿那个孔。成千上万的人打穿这个孔,以为他们投给了阿尔·戈尔,但实际上他们投给了帕特·布坎南。

所以这完全是这个用户界面错误的结果,导致乔治·布什当了八年总统。这有点好笑,但也不太好笑。

你可能听说过Healthcare.gov,几年前它推出时出现了各种软件问题。Healthcare.gov的大多数问题实际上是实现错误,背后的工程非常糟糕。但据估计,大约40%的缺陷实际上是用户界面错误,人们实际上错误地使用网站或

02:发现用户无法言说的需求

在本节课中,我们将学习如何进行“情境访谈”,这是一种通过观察用户在真实环境中使用产品或系统,来发现其潜在需求和实际困难的核心方法。我们将重点介绍其原理、执行步骤以及如何设计有效的任务。


概述:为何要观察而非询问?

上一讲我们介绍了人机交互的多种研究方法。本节中,我们来看看其中最重要的一种:情境访谈。人们通常认为,了解用户需求的最佳方式是直接询问他们。然而,这往往效果不佳,因为用户可能无法准确回忆或表达他们遇到的真实困难。情境访谈的核心在于观察用户在实际情境中的行为,从而获取客观、具体的数据,而非依赖用户的主观总结。


情境访谈:一种人种学方法

情境访谈融合了多种方法,包括访谈、“出声思维”协议和参与式设计。它是一种解释性的实地研究方法,意味着你需要进入用户的“自然栖息地”进行观察。

  • 关键目标:揭示用户的真实需求、使用障碍和问题根源。
  • 核心概念:理解“情境”——即事物发生或存在的相互关联的条件。没有任何产品或网页是在真空中被使用的,周围的环境、工具、人员协作都会影响使用体验。

公式有效需求洞察 = 观察实际行为 > 依赖用户自述


观察比询问更有效的原因

心理学中存在“显著性”现象,即人们只会注意到并记住那些他们关注的事物。例如,在一项针对程序员的研究中,当被问及什么最耗时,他们提到了理解代码和修复漏洞。但实际观察数据却显示,他们三分之一的时间浪费在了滚动和低效的导航上。这个巨大的时间损耗因为过于常见而被用户完全忽略。这证明了通过观察获取客观数据的重要性。


在情境中需要关注什么?

进行情境访谈时,你需要关注以下多个维度,以全面理解用户体验:

以下是你在观察时需要留意的关键方面:

  1. 工作空间:活动发生的物理环境。例如,超市自助结账台的布局、放射科医生读片的工作站设置,都可能显著影响使用效率。
  2. 工作本身:用户正在执行的具体任务及其要求。
  3. 变通方法:用户为克服系统缺陷而自行发明的非正规操作流程。
  4. 意图:用户执行任务的动机和目标(如追求速度、质量还是低成本)。
  5. 用语:用户对事物和概念的称呼。使用用户的语言进行设计至关重要。
  6. 工具:除了你正在研究的产品外,用户还使用了哪些其他工具(如Excel、日历、电子邮件)。
  7. 协作:用户如何与他人协作及信息如何流转。
  8. 商业目标:对于工作类产品,需理解客户公司的价值观和商业诉求。

情境访谈与传统方法的区别

理解情境访谈与传统用户调研方法的区别,有助于我们把握其独特价值。

以下是情境访谈与常见方法的关键差异:

  • 数据性质:访谈、调查和焦点小组获取的是概括性、抽象的数据,依赖于用户的记忆和主观表达。情境访谈获取的是具体的、客观的行为数据,来自用户的实时体验。
  • 问题发现:用户可能不会主动报告“滚动效率低”这类问题,但观察能直接揭示它。一个用户遇到的客观困难,很可能代表了一部分目标用户群的共同问题。
  • 驱动力:基于客观数据的改进建议,比基于个人意见的争论更具说服力,能有效推动产品决策。

如何执行情境访谈:学徒模式

执行情境访谈时,心态至关重要。你应该将自己视为学徒,而用户是专家。你的目标是向用户学习他们如何工作和思考。

核心原则:让用户主导活动,但你需通过提问来理解其行为背后的原因。

以下是一些中立的、能引导用户表达的有效提问方式:

  • “你正在做什么?”
  • “你为什么这么做?”
  • “你现在想达到什么目标?”
  • “你原本期望发生什么?”(当出现错误或困惑时)
  • “你会怎么称呼这个功能?”
  • “你原本希望在哪里找到这个功能?”

关键在于保持对话进行,在用户沉默或困惑时适时提问,以探究其内心的认知过程。


当无法直接观察时怎么办?

有些场景难以进行实时观察和打断(如外科手术、核电站应急操作),或者过程极其漫长。此时,可以采用替代方法:

  • 制品回顾:利用用户产生的“制品”(如手术录像、拍摄的照片、系统日志)进行回顾。通过回放录像或查看图片,在关键节点暂停并询问用户当时的想法和目标,可以触发其准确记忆,获取具体细节。
  • 原型测试:对于尚不存在的全新产品,可以制作原型让用户试用,从而收集关于设计问题的客观数据(这将在后续作业中涉及)。

实践要点与任务设计

在实际操作中,需要注意以下事项:

  1. 记录:尽量对访谈过程进行录音或录屏。这能让你在事后回顾细节,弥补单人执行时笔记的不足。
  2. 笔记:记录用户的言行、操作、你的解读以及即时产生的设计灵感(但注意不要在当时与用户讨论这些灵感,以免影响其行为)。
  3. 分析:分析所花费的时间可能远长于访谈本身。在团队中,共同分析有助于形成统一的产品改进愿景。

任务设计技巧
任务设计是成功的关键。理想情况下,应由用户选择真实任务。在作业中,我们需要为用户设定任务,但要尽可能模拟真实性。

  • 避免提示答案:不要直接说“搜索阿司匹林”,而可以说“假设你头疼,想在这个网站上买点药,你会怎么做?”这样能观察用户自然的解决路径。
  • 使用真实数据:尽可能让用户使用他们自己的信息(如出发地、目的地)。若必须提供,应尽量少且中性。
  • 控制时长:单个任务对新手用户应在15-20分钟左右完成。如果专家完成只需几分钟,则任务可能过于简单。
  • 由易到难:安排一系列任务,从最简单的开始,逐步增加复杂度,以确保能收集到多层次的信息。
  • 保持中立:避免在任务中使用可能冒犯或娱乐化的虚构信息(如名人名字),确保对所有用户都专业、得体。

总结

本节课我们一起学习了情境访谈这一核心方法。我们了解到,通过在真实情境中观察用户行为,可以突破用户“说不出”的局限,发现其真实需求和产品中的客观问题。关键在于以“学徒”心态,通过中立提问引导用户,并精心设计接近真实场景的任务。在下一讲中,我们将继续深入探讨如何分析从情境访谈中收集到的数据。

请注意,对于本课程的第一次作业,你只需针对一位用户一个足够复杂的设备/任务完成一次简化的情境访谈练习,重点是掌握该方法的核心流程。

03:情境分析与设计实践

在本节课中,我们将深入学习情境分析(Contextual Analysis)与情境设计(Contextual Design)的核心方法,特别是如何通过用户访谈来理解用户需求,并识别用户在使用系统时遇到的障碍。我们将重点探讨访谈技巧、数据记录方法,以及如何将观察结果转化为三种核心的图形化模型:流程模型、社会模型和人工制品模型。

访谈准备与执行原则

上一节我们介绍了情境分析的基本概念,本节中我们来看看进行用户访谈时需要遵循的具体原则和技巧。这些原则旨在帮助研究者获取真实、有效的用户数据。

以下是进行用户访谈时的一些通用建议或规则:

  1. 明确测试对象:确保用户理解你是在测试系统,而非测试他们本人。通常,当人们被要求执行任务时,他们会认为自己在被测试。如果用户认为你在测试他们,他们可能会说“我太笨了”、“我不理解这个”或“我不是你要找的合适人选”。因此,重要的是给予他们正确的背景和心态,例如可以说:“这个系统存在一些问题,我们请你来帮助我们找出它们。” 这样能让用户理解他们是在协作、参与,是在帮助你测试产品,而你实际上希望发现产品的问题。这样,用户就会更积极地帮助你发现问题,而不是因为无法完成任务而感到紧张。这总是一个有用的开场方式。

  2. 关注情境(Context):如果你提前看过需要制作的图表类型,其中一种叫做社会图或文化图。它关注的是人们为什么做某事,是什么影响他们做出选择,以及他们对系统、产品和所做事情的原因有何看法。这完全是关于“为什么”,即事情发生的原因。这部分内容不一定会在标准访谈中自然出现,因此你必须从一些问题开始,引导用户说出相关信息。例如,你可以问:“如果你不代表某个组织,你会如何描述……?”

  3. 选择代表性用户:几乎任何时候进行用户测试,你都会希望找到能代表某个群体的人。这是不可避免的,你不可能测试所有人。因此,目标是找到类似于你目标受众的人。就本次作业而言,我们特别希望每个人都能找到一个会遇到问题的用户。这在现实生活中不一定是常规做法,但我们希望每个人都能练习理解人们如何以及为何会遇到问题。在另一节课(可能是最后一节课)中,我们将讨论一种称为“人物角色”(Personas)的方法,这是一种理解目标受众并将其分组的方式。然后,一个非常常见的策略是思考:谁是我们的目标受众?我们如何将他们分类?你肯定会希望从各个类别中挑选人员。但就本次作业而言,你只是从这个类别(比如最左侧的类别)中挑选一个,即那些是新手、不理解事物的人。这主要是为了让你的第一次用户研究更具教育意义。因此,希望你挑选的人与你尝试研究的设备不至于相差太远,以至于他们能提供一些相关的答案或信息。你要试图找出他们通常在什么情况下会做这类事情,或者在什么情境下会做。例如,如果你有一台相机并交给某人,你会问:“你通常拍什么?你如何决定是否拍照?是否曾有人请你拍照?” 这样,你试图理解该设备在用户真实生活中的使用情境。他们不应该编造,你也绝对不能编造,但理解所有这些所谓的“影响因素”或“情境”、“文化背景”非常重要。因此,在实际使用开始前,你应该为用户准备一份简单的问卷。

  1. 准备书面脚本:本次作业要求你准备一份书面脚本,即一组写好的问题。这对于单个用户来说不那么重要,但如果你有多个用户并且问他们非常不同的问题,你会得到不同的答案。因此,如果你想了解不同人物角色之间的差异,以相同的方式向他们提问就非常重要,而真正做到这一点的唯一方法就是准备书面脚本。你需要写下指示,准备书面脚本的另一个原因是确保你以正确的方式表达。你需要每次都使用相同的方式表达。新手常犯的一个关键错误是在问题中泄露答案。例如,如果你说:“你能按下搜索按钮吗?” 每个人都会看着屏幕,找到一个写着“搜索”的按钮并点击它。这并非真正的协调性测试,也不应该是视觉搜索测试。你想知道他们是否理解该做什么,因此不应该在问题中给出答案。例如,“使用小时和分钟按钮来设置时间”告诉他们如何操作,告诉他们按哪些按钮,这是给出指示的错误方式。如果你说“时钟应该显示正确的时间”,那么你是在告诉他们要做什么,但没有给出任何关于如何做的提示。因此,我们希望你为这次作业写下指示的一个关键原因是,练习找出不泄露答案的提问方式。这是一项非常有用的技能。我们希望确保你在脚本中做到这一点。因此,你应该写下将要提问的实际问题,然后从你的纸上或其他地方读给被试者听。我们还发现,如果你把指示写在纸上交给用户,他们通常会忽略。特别是如果你有一长串问题,他们只会略读一下,然后说“好了,我准备好了,你可以告诉我你想让我做什么了”。所以,尽管听起来可能有些尴尬,但直接读出你写下的内容效果会好得多,他们会听,会按照你的指示做,而你也会小心地以正确的方式表达。

  2. 设计多样化任务:我们上次讨论了准备多种任务。很多同学就作业问到了这一点。除非你碰巧有一个能探索整个界面的总体任务,否则通常你会为不同部分设计不同的任务。我们讨论过这一点。我们经常收到的一个问题是:“能给我一些例子吗?” 因此,我在讲义幻灯片中放了一些例子。我想现在没人用这个旧设备了,但这是一些情境性问题,旨在让用户进入使用GPS设备的正确状态。例如:你以前使用GPS的频率如何?你什么时候使用它?谁决定你要去哪里或走哪条路线?如果你对它感到困惑,你会怎么知道?你会问谁?这些都是为了理解人们如何使用GPS的情境性问题。关键在于,问题是:如果你什么都不能说,你该说什么?这确实令人困惑。关键是要试着思考用户肯定知道什么,以及你关心什么任务。例如,如果某人面前有一瓶写着“拜耳阿司匹林”的阿司匹林药瓶,他们想要一瓶新的,那么他们知道药瓶上写着“拜耳阿司匹林”。因此,对某人说:“假设你手里有一瓶阿司匹林,你想要更多。你会如何使用这个网站找到阿司匹林?” 你假设他们脑子里有这个信息,这样告诉他们就完全合理。或者,假设你想知道这个网站是否适合查找如何处理头痛。那么你会说,你不会说“你能找到治疗头痛的阿司匹林吗?”,因为那会泄露答案。如果你想知道网站是否能回答这个问题,你可以说:“假设你头痛,你会怎么做?你能在这个网站上找到任何有用的东西吗?” 这取决于你心中有什么特定的任务。就像这里,如果我试图问人们(让我们翻到下一页),例如:“你能找到去沃尔玛的路吗?” 这假设他们脑子里已经有沃尔玛了。因此,这可能是一个完全合理的任务,你想知道当人们知道想去哪里时,这个GPS是否能帮助他们。或者,他们能否按类别找到东西?例如,如果他们需要一家商店或者需要买一个游泳池,他们会去哪里?因此,你可以根据为用户设想什么样的任务以及如何覆盖任务的不同部分、网站的不同部分或设备的各个部分来规划。

  3. 任务集合示例:这是一组旨在涵盖该GPS擅长执行的各种任务的问题,理论上应该花费大约15到20分钟,对于新手可能需要半小时。这是一个任务集合。其中一些比较模糊,一些非常具体。希望你不是在试图欺骗用户,所以你不会要求他们做GPS根本无法完成的事情。例如,如果这个特定的GPS确实无法找到两条街道的交汇处,那就有点过分了。因此,根据你的GPS实际能成功完成什么,将决定你如何提问。

  4. 用户描述与匿名化:作业的另一部分是描述用户,你不应该使用真实姓名,因为应该是匿名的。这是一个你可能需要记录和揭示的信息类型的例子,这些信息将有助于你理解她如何使用GPS,所有这些也会反映在社会模型中。

  5. 准备访谈记录:作业的另一部分要求提供一份记录。这基本上是对所发生事情的总结,不必逐字逐句,因为那显然比我们真正需要的更详细,但重要的是包含你的问题。如果你直接按照脚本提问,可以直接复制粘贴,然后记录结果发生了什么。这些可能是对用户实际所说内容的总结或概括,是几行内容的合并。关于行号,Microsoft Word可以自动添加行号,你只需打开这个功能,这样就不必担心时间码之类的东西了。我们试图让这尽可能简单,同时仍为评分者提供足够的信息,以便他们了解真实情况,从而判断你的图表是否匹配。时间码也可以,这更容易。如果你已经开始使用时间码,当然可以继续使用,那样更准确,也更贴近现实生活。这只是一种更简单的方式,你可以选择任何一种。

情境调查实践与分析

现在,我们将进行一个小型的情境调查实践。我必须提醒你,这个视频相当旧了,但它很好地展示了大量故障点。它也是真实的,因为这是我录制时实际发生在我身上的事情。

在进行视频或观察时,你会希望关注所有这些不同类型的事情:情境、事情发生的原因以及导致事情发生的原因。

(视频内容摘要:用户尝试在CDW网站购买手持电脑,遇到了搜索失败、回车键无效、类别列表冗长且关键词位置不佳、登录混淆用户名与邮箱、错误信息位置不显眼、网站存在两个不同客户部分导致重复登录、网站速度慢、表单字段标签混淆(如“Title”实际指地址名称)、信息丢失需重新填写、过多不相关的送货地址选项等大量问题。)

在观察时,你需要关注所有这些不同类型的方面:情境、事情发生的原因以及导致事情发生的原因。用户会尝试提出关于界面为何不按预期工作的理论,这被称为用户的“心智模型”(Mental Model)。用户会阐述关于搜索为何失败的假设。最终发现只是搜索引擎太差,但用户假设应该输入全名而不是部分名称,也许那样就能工作。这是另一个需要捕捉的重要信息:用户的心智模型是什么?他们认为系统应该为他们做什么。同时,也要注意非语言行为,例如用户困惑时可能停顿或不做某事,这也是你应该留意的。

图形化模型:总结与洞察

我们推荐这些图表(在书中称为图形模型)的原因在于,它们是一种以更简洁的方式总结信息的方法。你几乎总是可以将其浓缩到一页纸上,因此这是一种总结所有信息的非常简洁的方式,并有助于你获得洞察。

有句话说:“观点廉价,洞察无价。” 每个人都有观点,例如“我认为这应该是蓝色的”、“我认为这应该移到这里”。但如果你通过这类实际使用获得了数据,那么你就能更好地进行重新设计。

本次作业要求你制作的图形化呈现方式已被证明特别有用。实际上,最有用的第一件事就是观察用户,因此进行用户研究是无可替代的。有多种方式来表示信息。在作业一中,我们将让你制作这些图表;在作业五中,你将使用另一种表格来表示你的发现。因此,除了教你不同的方法,我们还在教你不同的信息呈现方式,而这些图表已被证明是在非常小的空间内总结大量信息的特别有用的方式。

在真实情况下,你会有多个用户、多个调查者,从数据到图表的步骤会更困难。因此,中间有一个步骤(本次作业不做),即你试图分析信息、组织信息以理解发生了什么。通常,人们通过制作“亲和图”(Affinity Diagrams)来做到这一点,通常采用便利贴贴在大墙上的形式。如果你走到我们硕士生所在的南克雷格街,几乎总能发现墙上贴满了便利贴。这也是我们将它们放在这些可以长时间使用的房间里的原因之一,这样他们就可以把便利贴贴在墙上,并在试图理解数据时保留一段时间。这些被称为亲和图,因为所有发生的事情都是相关的,彼此之间有某种亲和力,然后蓝色的便利贴是类别或分组的名称。这是一种组织方式:我们所有的三个用户或七个用户是否有相同的问题或不同的问题?他们在界面的不同部分是否有相同的问题?作为一种组织数据的方式,写下每个问题,贴在板上,进行小组练习,将它们分组在一起。使用大板而不是计算机程序的原因之一是,你们可以一起站在它周围协作。

在这次作业中,我们跳过了这一步,我们只有一个用户,也没有额外时间,所以你将直接从数据、从记录中制作图表。

有多种模型或图表。作业包括前三种:流程模型、社会模型和人工制品模型。但还有其他一些可能有用或没用的图表,我们这次作业不再要求。此外,除了我将在本次讲座中讨论的这五种之外,还有更多。如果你感兴趣,可以在教科书中阅读。甚至有可能为你的新设计制作相同类型的模型,我们也不会费心去做,所以你只需根据实际观察到的情况制作模型。

因此,对你的模型的第一个要求是它们展示实际发生的情况。你不被允许编造。模型上的所有内容都必须实际发生过。我们将通过要求你用时间码或行号标记所有内容来判断,以显示它来自记录中的哪个位置。这样,有时你想知道这个陈述的上下文是什么,或者他们在出现这个错误时试图做什么,你可以回到记录中阅读那个时间段到底发生了什么。

希望你们都能发现大量故障点、障碍或问题,这些都是同一回事。这些通常会用红色标记,带有闪电符号或波浪线之类的。这显然是重新设计的机会。

核心模型详解

1. 流程模型 (Flow Model)

你需要制作的第一个图表称为流程模型。这有点让人困惑,它不是网站地图。所以你不应该向我展示网站或手机的所有不同页面。它是关于信息流的,也不是流程图(如果你知道那是什么)。流程图是带有条件判断的事件序列。它也不是那个,它是关于信息如何从用户流向设备的。通常,你的设备会是一个气泡。所以你会有一个气泡代表CDW,一个气泡代表你的相机,一个气泡代表你正在做的任何事(比如Giant Eagle结账系统),一个气泡代表用户,以及许多线条来显示用户和系统之间的信息流。

你试图捕捉的关键是:涉及的关键角色、关键人员以及他们之间的沟通流。任何被使用的物理物品,被称为“人工制品”(Artifact),你会在图表上用方框表示。所以人是圆圈,物品是方框。显然,你希望有很多故障点。圆圈和小图标(如果你想用,不一定必须)代表人。方框代表人工制品和物品。箭头显示信息流,例如从用户到网站,从网站到用户。故障点、时间码。如果你观察到一些有趣但并未实际发生的事情,也可以表示,但必须特别标记,例如用“A”表示假设(Assumption)。你知道用户此时真的很困惑,或者我真的认为蓝色会更好。所以如果你想到了一些不想丢失的好主意,当然可以把它放在图表中,只要标记清楚。然而,这不是关于你对这些界面的看法。在以后的作业(可能是作业五)中,你将实际使用不同的评估技术,在那里你可以表达自己的观点,但这不是那种技术,所以你的观点不应出现在这个图表中。它只是用户实际所说和实际所做的内容。“A”是关于用户所做事情的假设。你作为实验者或访谈者永远不会出现在这些图表中,即使是你告诉用户做什么。为了这个练习,我们假设是他们自己想出来的。所以图表中没有访谈者。

流程模型中的关键点是信息如何来回流动,谁决定事情,谁告诉别人做什么。涉及的各种人员如何参与这个机制?谁负责?这是CDW的例子。用户(我)在中间,我的角色是为学生购买设备。在开始时,有一段关于所有其他人的简短交流,我们想捕捉这一点。所以有时我的秘书买东西,有时学生向我要东西,所以这个箭头从学生指向我。有时我请求计算设施购买东西,所以箭头指向另一个方向。记得在某个时刻,我在文件中查找东西,所以那是一个方框,因为它是人工制品,是一个物品。实验者假设那样做不好,我没有那样说,所以他不能在上面标数字,但存在这个文件,实验者认为这不安全,所以这是一个问题,他想确保不丢失这一点,所以他在那里标了“A”。这里有两个CDW气泡,这是因为网站本身试图告诉我有两个不同的网站。如果你记得,有两个不同版本、两个不同网站名称的大区别。在用户的心智模型中,应该有两个网站。这就是为什么有两个圆圈。如果你的设备试图呈现为一个统一的整体,那么你只会有一个圆圈。这就是用户的心智模型与实际情况之间的区别。每个网站都有一堆页面,但这里并没有表示出来。

所有网站都有多个部分,有菜单、搜索屏幕、搜索结果、产品列表等等。通常,你不会在流程模型中分开这些。因为在用户的心智模型中,它是一家公司、一个网站。同样,如果你使用相机,相机有无数个屏幕,你从一个屏幕到另一个屏幕,它有主菜单,背面有12个按钮。同样,那都是一个物品,都是一个系统。所以它只有一个气泡。如果用户应该将这些视为不同事物的心智模型,或者有时人们确实使用不同的事物,那么情况就不同了。例如,网络上有很多情况,有人会说,即使我在Rite Aid网站上,我也会用Google搜索这种药。我会在Google里输入“Rite Aid阿司匹林”,或者他们可能用Google查找某些东西,然后回到网站输入。那么你显然会把Google和你的网站视为两个不同的事物,因为在用户的头脑中,它们本来就是不同的。所以这有点模糊。它基本上取决于用户的心智模型,他们如何从系统或事物的角度思考这个问题。

Giant Eagle结账系统,有很多不同的机器。有一个信用卡机,有一个大屏幕,还有一个秤。我认为那可能仍然是一个整体。也许你会为那个大屏幕和信用卡机设置两个事物,因为它们确实非常独立,在某个时刻它会说“看那边,是时候把你的信用卡放进这个其他东西里了,然后完成后回到这里”。所以在这种情况下,用户的心智模型可能是这个信用卡东西与结账东西是分开的。所以这有点模糊,但通常,一个事物的所有页面都在同一个系统中,同一个气泡里。

发生了什么?搜索结果:我发送搜索词,返回无结果。产品返回,订单发送。我输入了用户名和密码,但当我输入邮箱地址时不起作用。我被重定向了。这里有一个例子,通常另一个问题是:在这些图表上放多少细节?答案同样不是特别令人满意,你可能会觉得有压力,但答案是:什么是有帮助的。我们不要求你记录某人输入的每一个击键,因为那样东西太多,没什么帮助。所以这里有一个大箭头代表“送货和账单信息”,上面有一堆故障点。因此,将整个页面及其所有问题归为一个事务似乎最有用。但如果你想将送货部分、账单部分等分开,那也是合理的。还有很多其他错误等等,显示在流程图上。

这是教科书中的另一个流程图,看起来有点不同。至于你使用哪个绘图程序、用什么颜色等等,都可以,随你喜欢。我实际上是用PowerPoint画的,但你可以用Illustrator,甚至可以用铅笔和纸,只要整洁,我们能看清就行。这是同样的想法。这是针对远程听众、会议室情况的。中间是演示者。他正在与白板、投影仪、摄像机、屏幕和另一个投影仪互动。所以有所有这些物理物品,这就是为什么它们是方框,他必须与之互动。有一台本地计算机运行一些软件,还有一台远程计算机。音频有很多问题。这个图表的一个问题是上面没有时间码。所以你的例子中需要有时间码。这也是我提供给Rex的一个场景,所以他没有时间码,因为我没有提到。有很多良好的信息来回流动。

关于流程模型有什么问题吗?它通常相当直接。你们一直在问的问题是需要记住的关键点:如何决定气泡里放什么,以及如何确保线条上的信息处于正确的层次。

2. 社会模型 (Social Model)

另一方面,社会模型每个人都感到困惑。它实际上有点棘手。但一种思考方式是:你把所有不适合放在流程模型上的东西都放在这里。它完全是关于人们的观点、影响、情境。任何帮助用户决定为什么做某事或何时做某事的东西,用户有任何看法的东西,都应该放在社会模型上。不太关注实际发生了什么,除非它影响人们为什么做事情。

Byron Holzblat称之为文化模型,这是它的旧名称。它涉及诸如组织、家庭、商业、目标等事物。当你访问网站或购买东西时,你重视什么?文化是相当隐形的,就像你去拜访工作中的朋友一样。你知道他们如何决定做事吗?你无法通过观察看出来。所以这些是你必须通过提问才能发现的东西,人们甚至可能没有真正意识到太多,所以你必须提问。有句话说:“文化对鱼而言,就像水一样隐形。” 鱼一直身处其中,所以它并没有真正认识到它的各个方面。

在社会模型中,你关心的是正式和非正式的政策(在商业环境中),或者可能是在家庭环境中。所以如果你为家庭做某事,他们如何决定做什么、何时做,谁来决定事情。在商业中,商业价值是什么。个人之间的权力,谁决定什么,公司和团队的价值观以及这种权力关系。你可能认为这很明显,你会使用组织结构图,但通常情况并非如此。例如,当我的学生试图与我预约时,结果发现学生的日程通常比我更满,因为要上课,而且我可以移动会议。我不希望学生缺课。所以即使你可能认为我在组织结构图上比学生高得多,但实际上是由学生决定会议时间。这是一个例子,说明如果你在做会议规划系统,你会关心的文化类型。你会说,哦,最资深的人决定,但实际上,通常是最忙的人决定,或者日程最不可变动的人决定。所以你必须询问这些非正式的政策、非正式的规则,因为你不能只是假设。这回到了我一直强调的关键规则:不允许编造,这包括不要对会出现在社会模型上的事情做假设。所以你必须实际询问,这也是我们确保你将其放入记录并引用一切的原因,这样你才能根据真实数据设计,而不是仅仅根据可能发生或应该发生的假设,因为这些通常并不真实。

群体的认同感和领域情感。这是放置人们对事物的感受的好地方。例如,“我不喜欢这个网站”、“这个相机太令人困惑了”、“它太重了”。所以像这样的观点或偏好,所有这类东西都放在社会模型上。如果这是一个你随身携带的设备,人们可能会说:“哦,如果我带这个到处走,我的朋友会认为我是个极客”,或者“这个相机太重了,我绝不会带着它到处走”,或者“当我去Giant Eagle时,我从不使用自助结账,因为它总是对我发出哔哔声,我不喜欢看起来傻乎乎的”。所以这些是事情发生的一些情境原因,你想尝试捕捉并放在社会模型上。

如何制作社会图?首先,你为所有相关人员画圆圈,再次强调,是影响者。大多数人会有思想泡泡,你在里面放他们对事物的看法。它从人身上延伸出来,所以看起来与流程模型不同,因为它有这些思想泡泡。也有箭头和方向箭头,像流程图一样,但这些箭头不同,它们代表影响和/或命令。通常它们被表述为命令,例如“给我好价格”或“给我看物品列表”,或者“我希望你做这个”。因为它们是影响,所以措辞与信息流不同。这个图表上也有故障点,即事情不顺利的情况,或者有人要求你做你不想做的事,或者负面价值观。

在你做家电或设备的特定情况下,你会想写下你能发现的关于使用情境的任何信息。可能影响事情的其他人员?人们对你在评估的任何事物的感受。

我再怎么强调也不为过,因为肯定会有人犯这个错误。

这是CDW的例子。用户在中间。我的思想泡泡是:我想买到正确的设备。可靠性很重要,好价格很重要。这些都来自视频开始时的访谈,甚至在我们开始使用网站之前。同样,其他大部分内容也来自开始部分。我说过计算设施处理我的大额采购,所以再次,箭头被表述为他们应该做什么的命令。这真的不需要是“A”,因为我明确说过他们花费太长时间,所以那里可能应该有时间码。秘书有时会搞错。CDW,我说过我重视可靠的服务和好价格。所以有一个箭头指向它。在这种情况下,是同一个气泡。我没有分成两个气泡,这主要是因为无论如何都是同一回事,何必麻烦呢?所以再次,在粒度层次上,是什么有用就怎么来。你知道,如何以适当的细节层次捕捉你学到的东西?

这是来自小组的例子。我们有听众,我们将其分为两部分:本地听众和远程听众。远程听众在想:我担心我会错过只有本地听众才能得到的东西。本地听众说:我希望软件和设备正常工作。演示者说:我对演示有点紧张,我想清晰地沟通,我希望我能回答他们的问题,我不想在别人面前出丑。所有这些信息都来自关于人们为什么参与的访谈,这些在流程图中都没有意义。一个关键要求是,你发现的每件事至少出现在一个图表上。所以如果发生了某事,你可以把它放在流程图中;如果是一个观点,你可以放在这里。但不必把所有东西都放在所有图表上。所以你发现了无数个故障点,它们不需要出现在社会图上,因为它们与人们彼此的看法无关。社会图上的一些东西也不会出现在流程图上。有些东西可以同时出现在两个地方。这没问题,但你当然不希望所有东西都出现在所有地方。故障点:远程听众听不见。再次,这些被表述为命令:“告诉我们你在做什么”、“给我反馈”等等。

3. 人工制品模型 (Artifact Model)

第三种模型是最简单的,称为人工制品模型。人工制品是由某人制造的东西。通常是物理物品,例如信用卡、记事本、Giant Eagle里的一张纸,那里有各种各样的物品:罐头、屏幕、秤。所以这些都是不同的人工制品。在计算机产品中,我们通常认为人工制品是屏幕截图,即呈现给用户的不同屏幕。你捕捉屏幕截图是为了展示哪些部分工作良好或工作不佳。因此,你会捕捉用户使用或创建的任何方面的内容,以理解发生了什么。

对于典型的计算机,你可能会回去重复用户的操作并捕捉屏幕截图。或者,如果你在操作过程中录制了内容,你可以直接从录制中截取屏幕。如果你正在研究物理设备,那么你可能需要拍一些照片。但通常不难获得足够高分辨率的照片来看清发生了什么。你可以用观察结果来注释它。这是搜索结果页面的屏幕截图,故障点是搜索结果太长,类别标签应以区分性词语开头。如果你记得视频中的那个故障点,看到图片会更容易理解。因此,人工制品模型的目标之一是让阅读你报告的人了解发生了什么,了解事物的样子。包含更多人工制品、更多屏幕截图是可以的。在同一页上放置多个错误也可以。所以可能有很多关于这个屏幕的不同事情可以说。你不如把它们都放在同一个屏幕上。我在这里注意到的一个故障点是:这是一个令人困惑的标签,指向“Title”。对于屏幕截图,基本上为系统中每个发生有趣事情的页面准备一张截图。再次强调,如果那个页面上没有发生任何有趣的事情,你就不必担心。如果发生了多件事,你可以在同一张图片上标记它们。上面这个是一个重要性非常低的问题,我注意到了。你可能甚至没注意到这个:添加到购物车按钮从顶部移到了底部。这对用户完成任务的能力没有影响,但在回顾时似乎有点奇怪。它没有理由移动,图标不同,设计略有不同,没有明显原因,颜色从透明变为红色。所以这似乎有点奇怪。但它对任何事情都没有影响,不过不妨记下来。

其他模型简介

还有一些其他模型,我将简要解释,因为它们可能有用,而且你们中有些人在研究非计算机的野外设备。

物理模型(Physical Model)关注环境如何实际影响你的行为。几年前,我们为通用电气公司审查了一位X光技师,他们担心所有技师整天坐在这个终端前使用鼠标会患上重复性劳损。我们去查看了物理环境,结果发现没有足够的空间使用鼠标,因为他们需要这些来自患者的大量实体图表。大图表会堆成一大堆,他们必须把它放在面前才能查看需要找什么,然后就没有足够的空间放鼠标了,所以他们以一种别扭的方式使用它。在这种情况下,物理环境与问题高度相关。同样,如果你在做Giant Eagle的结账系统,结账的物理环境可能非常相关。对于网站来说就不那么重要了,你坐在哪里使用网站并不重要,所以对于我们这门课研究的设备来说很少重要,我们不要求。但如果你认为它对你的特定情况相关,你会得到一些额外的加分。例如,你做事时周围物品的摆放、工作中的打印机距离、如果你在研究相机,你需要指向相机背面因为它有触摸屏但你手里拿着别的东西,或者如果是冬天用户戴着手套因此无法使用这个设备,因为戴手套无法操作。所有这些都值得包含。

物理模型涉及事情发生的地点、与执行任务相关的物理结构、物品在空间中的移动(例如某人必须从一个地方到另一个地方或在不同的地方做事)、任务周围工具的布局等等。当然,还有任何与物理布局相关的故障点。对于CDW,没有物理布局,没什么可画的。但在这个电话会议中,它非常相关。演示者无法真正够到鼠标,因为它在这里,是有线鼠标。所以这种分离的事实非常重要,只有通过绘制这个图表才能看到。显然,有一个明显的解决方案:使用无线鼠标或快速点击器,这直接来自于注意到这一点。麦克风不工作。从这个图表中你看到的另一件事是,这里有一个房间,人们不断从这些人面前走过才能进入另一个房间,没有其他路可走。所以这是一个交通通道,这在让人们理解发生了什么方面是一个故障点。可能与你正在做的重新设计无关,但这是你注意到的事情,所以应该放在某个图表上。这可能只出现在物理图上,因为在情境访谈中可能没有人提到。

最后,还有另一个称为序列模型(Sequence Model)的图表,我们在这次作业中完全不做,因为它几乎100%与记录和流程模型重复。但序列模型基本上是所发生一切事情的流程图:首先发生这个,然后发生那个,然后发生另一个。如果你有记录,这并不有趣,但你可以用它来在更高的抽象层次上总结所进行的步骤。所以它是步骤、触发器(即事情发生的原因、导致进入下一阶段的原因)。通常,触发器让你将事情分组到不同的子任务中。例如,首先我尝试搜索,然后我尝试将东西放入购物车,然后我尝试购买东西。所以这是活动的不同类别。意图或你为什么做某事。然后你可以展示步骤。当然,还有故障点。制作序列图的关键原因是拥有比记录更高的抽象层次。显然,如果你只是重复记录中的所有内容,制作图表就是浪费空间。但你可以使用非常高级的总结来描述发生了什么。再次强调,你做的层次取决于你想知道什么。例如,如果你在思考文件夹中的文件,用户打开一个来写新信。你可以在功能层面说:找到最近写给同一个人的信,打开它,删除日期或用新日期替换,删除内容并输入新内容。这通常是我给已经写过信的人写新信的方式:我找到上次给他们的信,然后更新内容。但如果你对人们如何在文件夹中找到东西感兴趣,这并没有告诉你我如何在文件夹中找到东西,但它会告诉你我如何创建新信。所以这取决于你感兴趣的是什么。如果你在研究文本编辑和文件夹管理,那是非常不同的需求,你想知道的细节层次也非常不同。所以如果你是微软,在研究人们如何使用文件夹,那么你可能需要第二个层次,即:我将Windows资源管理器切换到详细信息视图,按日期排序文件,然后双击最上面的项目。完全不同的细节层次将帮助你理解任务的不同部分。你应该关注哪个部分?完全取决于你在这次重新设计中关心什么。如果我只在研究Microsoft Word,我不会改变任何关于文件夹的东西,那么这就完全相关。所以这完全取决于要审查哪些部分。

这是CDW情况的序列图。你注意到这个大循环。所以再次,这是一个抽象层次。我做了一次,然后几乎又做了一次所有事情。并不完全相同,有一些小差异,但就这个总结而言,这些差异并不重要。这让你很好地理解到:哦,你必须一遍又一遍地做同样的事情,这是关键点。

教科书中还有更多模型,如果你关心的话,但它们不在作业或考试中,所以你不必关心。他们提出了一种称为“任务结构模型”(Task Structure Model)的东西,试图获取任务和子任务。我们上次讲座讨论过:如何理解任务和任务的组成部分?显然,你需要知道你想让界面支持什么任务。因此,理解不同的任务并描述它们是有用的。这在某些情况下可能对你有用。它再次关注你需要做什么,而不是如何做。所以关键是从问题到设计,中间有一个步骤,你试图以一种让你灵活思考解决这些需求的不同方式来描述需求。这就是你在这里试图捕捉的:领域层面的任务,例如“编辑新信”或“购买新智能手机”。它没有说明我将如何完成那个任务,但作为购买新手机的一部分,我需要找到合适的手机,需要输入用户名和密码登录,需要提供采购信息。在这个细节层次上,你可以理解任务和子任务。你还可以捕捉信息需求,例如系统需要有我的姓名和地址,否则无法发货给我,需要有这个那个等等。但它没有给你任何关于如何在界面中完成这些的信息。这是他们从购买门票的不同场景中的例子。他们展示了不同层次的任务故障点。相当直接。这些的关键挑战通常是深入到什么程度,为每个任务提供多少细节。

模型创建与整合

在现实生活中,你会有多个人,因此通常(实际上有人问过这个问题)你会为每个设备制作一个模型。通常,你必须通过为每个用户制作一个模型(就像你在这门课中要做的那样),然后将它们合并成一个跨所有人的“整合”或“聚合”模型。对于这次作业,你只需为一个人、一个系统制作一个模型。所以基本上你会提交三个模型。人工制品模型会有很多页,每页一个屏幕截图或其他什么。通常流程模型可以放在一页上,但如果需要可以稍大一些。同样,社会模型通常也放在一页上。在现实生活中,你可能会为每个用户制作一个模型,然后整合它们,并有一个整合模型。

然后,在下一个作业中,你将使用这些模型作为数据,帮助你理解如何进行设计。因此,你将尝试通过减少流程来简化界面。显然,你将尝试消除你发现的所有故障点。你将尝试理解人们不理解什么,以便你能以更好的方式做事。界面的哪些部分令人困惑,哪些标签没有意义。所有这些都应该直接从模型中得出。然后你将能够设计得更好。

总结

本节课中,我们一起深入学习了情境分析与设计的核心实践方法。我们重点探讨了如何准备和执行有效的用户访谈,包括明确测试对象、关注情境、选择用户、准备脚本、设计任务等关键原则。通过一个真实的CDW网站购买案例,我们观察并分析了用户在实际操作中遇到的各种故障点和非语言行为。

更重要的是,我们学习了如何将观察数据转化为三种核心的图形化模型:

  • 流程模型:聚焦于用户与系统之间以及相关角色之间的信息流动,使用圆圈代表人,方框代表人工制品,箭头表示信息流。
  • 社会模型:关注影响用户行为的文化背景、观点、价值观和人际关系,使用思想泡泡和影响箭头来表示。
  • 人工制品模型:通过屏幕截图或实物照片来展示用户交互的具体界面或物品,并标注观察到的具体问题。

我们还简要了解了物理模型和序列模型等其他工具。所有这些模型的共同核心原则是:必须基于实际观察到的数据,不能编造,并且需要用时间码或行号与原始记录关联。这些模型是将大量用户数据浓缩、可视化并从中获得设计洞察的强大工具,为后续的界面重新设计奠定了坚实的基础。

04:从分析到设计

在本节课中,我们将学习如何将需求分析的结果转化为具体的设计方案。我们将探讨设计的本质、面临的权衡,并重点介绍一种关键的设计工具:快速原型设计。

课程概述与作业情况

作业一提交截止时间已过。目前约有77人注册课程,比昨晚减少了7人。如果您的作业状态显示黄色感叹号,则表示提交成功。

作业有合理的迟交政策。强烈建议在周一上课前提交,这样只会扣10分(满分100分)。前三份作业适用此灵活政策,但作业四和五必须准时提交。考虑到第一份作业通常最具挑战性,额外的缓冲时间对大家很有帮助。

这是昨晚统计的学生背景分布:高中生人数最多,其次是Tepper商学院学生,然后是信息系统硕士生、INI学院学生、ECE和CIT学院学生等。很高兴看到来自不同背景的同学对人机交互感兴趣。

设计概述:从需求到方案

上一节我们介绍了如何通过情境调查等方法进行需求分析。本节中,我们来看看如何将这些需求转化为具体的设计方案。

设计是一个被过度使用的词汇。在卡内基梅隆大学,设计学院主要关注图形设计和视觉外观。我们将在周一的客座讲座中深入探讨这部分内容。在本课程中,我们特指用户界面的设计。

设计本质上是一个创造性过程。就像写作课程可以教你语法和结构,但无法保证你成为畅销书作家一样,本课程可以教你规则、避免常见错误以及评估技巧,但卓越的设计仍需创造力。我们的目标是让每个人都能设计出足够好用的用户界面

设计是有依据的。它并非闭门造车,而是需要综合考虑来自情境分析、市场部门的信息以及用户需求。设计也是负责任和尊重用户的,旨在为目标受众创造合适的产品。

近年来兴起的“设计思维”概念,其核心正是设计师长久以来的工作方式:在约束条件下创造出既吸引人又能满足目标受众需求的产品。

设计中的核心权衡

设计的关键在于管理各种权衡。在现实世界中,你无法拥有一切。

  • 上市时间与资源:作为管理者,你需要决定在可用性、功能开发和修复错误之间如何分配时间与人力成本。
  • 个性化与可用性:这被称为“个性化的诅咒”。每个设计师都希望做出新颖独特的设计,但过度偏离用户熟悉的模式(例如,将网站搜索框从右上角移到别处)可能会严重损害可用性。
  • 知识产权:直接复制他人的优秀设计(如苹果的“列表回弹”效果)可能引发专利侵权问题。这是一个复杂且法律不断变化的领域。
  • 可用性与其他标准:可用性并非总是最高优先级。有时为了其他目标(如安全、商业策略)需要故意降低可用性。
    • 公式最终设计 = 可用性权重 * 可用性目标 + 安全性权重 * 安全性目标 + ...
    • 示例1(安全):Gates楼三楼楼梯间的特殊门禁设计,强制人员在火灾时从三楼主出口撤离,虽然降低了通行便利性(可用性),但提升了安全性。
    • 示例2(商业):麦当劳使用不舒适的座椅,旨在鼓励顾客快速用餐离开;而星巴克使用舒适的座椅,希望顾客停留更久并消费更多。
  • 客户与用户:付钱的人(客户)和使用产品的人(用户)需求可能不同,需要平衡。
  • 新功能与软件膨胀:为了促使消费者升级,软件需要不断增加新功能,但这可能导致软件变得臃肿、复杂,从而降低可用性。

设计流程与原型设计的重要性

理想情况下,界面设计应与后端软件开发同步进行,但这在实践中往往很困难。许多界面需求(如撤销操作、实时表单验证)会深刻影响软件架构。

代码示例(简化表单验证)

// 低效方式:提交后由服务器返回错误
form.submit() -> server.validate() -> return error page

// 高效方式:在浏览器端实时验证,需要不同的架构
inputField.onChange() -> javascript.validateLocally() -> show instant feedback

由于后端实现工作量巨大,一旦投入,很难更改。这意味着早期的错误设计决策可能导致后续陷入困境。公司通常会有产品功能发布的路线图,但也需要根据市场反馈保持敏捷。

设计分为高层设计低层设计

  • 高层(概念设计):涉及整个系统架构、隐喻(如桌面、购物车)、以及如何在不同设备上呈现。
  • 低层:涉及具体的控件、标签名称、交互细节等。

两者都对可用性有重大影响,都需要设计和测试。设计师需要通过产品本身(界面、文档)这个狭窄的沟通渠道,让用户脑海中形成的心智模型与设计师的设想保持一致。如果失败,用户将无法理解产品。

示例:老式冰箱:用户的心智模型是两个旋钮分别控制冷藏室和冷冻室温度。但实际系统模型是一个旋钮控制制冷强度,另一个控制冷气在冷藏和冷冻室间的分配比例。这种不匹配导致用户难以调节到合适的温度。更好的设计是让系统模型符合用户的心智模型。

在低层设计上,有无数选择(按钮、滑块、触摸屏等)。这里引入一个核心概念:可供性

  • 定义:可供性是事物可被感知的、实际的属性,特别是那些决定事物可能如何被使用的基本属性。
  • 目标:让用户明白可以对一个物体做什么。
  • 示例:早期的网页链接有下划线,按钮有3D效果,这些都清晰地表明了“可点击”。现代“扁平化”设计的一个常见问题就是可供性不足,用户需要试探才能发现可操作元素。
  • 反面案例:三哩岛核事故中,一个指示灯显示“阀门关闭信号已发送”,但操作员理解为“阀门已关闭”,这个错误的可供性反馈是事故的重要原因之一。

解决方案:快速原型设计

为了避免上述问题,我们采用快速原型设计,从草图开始。

草图用于决定设计什么(探索想法),而原型用于把设计做对(细化方案)。草图是快速、廉价、可丢弃的,其低精度迫使你专注于高层设计,其模糊性允许你推迟考虑某些细节。绘制草图的过程本身就能帮助你形成和完善想法。

关键原则:产生大量不同的草图。好的想法往往源于众多的想法。

草图可以辅以故事板(像漫画一样展示操作序列)来表现动态过程。

作业二示例:电影售票亭的三个不同设计

  1. 触摸屏菜单式:通过弹出菜单选择电影、时间、票数,然后支付。
  2. 刷卡直购式:每个电影选项旁配一个信用卡读卡器,刷卡即购票,无需触摸屏幕。
  3. 物理旋钮式:通过物理上下箭头按钮控制屏幕上模拟“卷轴”来选择电影和时间。

这三个设计在硬件成本、交互方式、适用场景上截然不同,体现了不同的设计权衡。

原型保真度与用途

原型有不同的保真度层次:

  1. 纸面原型(低保真):手绘草图,非常有效,能让用户专注于概念和高层交互,而非视觉细节。
  2. 绿野仙踪原型(中保真):用户面对一个看似运行的界面,实际上由实验者在幕后操控。无需实现功能即可模拟交互。
  3. 可交互原型(高保真):使用工具(如PPT、Figma)创建可点击的模拟界面。
  4. 实现原型(代码实现):部分或全部功能被编码实现。

有趣的是,低保真原型在获取高层设计反馈方面通常比高保真原型更有效,因为它避免了参与者纠结于颜色、字体等细节问题。

原型还分为:

  • 水平原型:展示整个界面的广度,但功能不深入。
  • 垂直原型:深入实现某个特定功能或交互(如测试“滑动滚动”的最佳参数),用于解决特定设计难题。

原型的用途广泛:

  • 测试设计概念:这个想法可行吗?用户能理解吗?
  • 沟通想法:向经理、团队或客户展示设计概念。
  • 作为设计规范:为开发团队提供清晰的视觉化实现指南,比文字描述更直观有效。
  • 参与式设计:让用户基于原型提出改进意见,比凭空想象更容易。

作业与实践演示

在作业二中,你需要为选定的设备构思三个截然不同的设计草图(部分B),然后选择其中一个,绘制出包含所有控件的完整、详细的界面草图(部分C),为后续的用户测试做准备。

我们观看了一段视频,演示了如何使用纸面原型进行用户测试。用户和测试者通过“扮演”计算机和操作者,能够有效地发现设计中的问题,即使界面是手绘的。这种方法简单但功能强大。

在作业三中,你将使用这样的纸面原型进行用户测试。在作业四中,你将创建一个更高保真度的可交互原型。

总结

本节课中我们一起学习了如何从需求分析过渡到设计阶段。我们认识到设计是一个充满权衡的创造性过程,并介绍了快速原型设计这一核心方法,特别是从草图开始的重要性。通过创建和测试低保真原型,我们可以高效地探索设计概念、沟通想法并发现潜在问题,为后续的高保真设计和最终实现奠定坚实基础。请记住,在作业中要努力构思真正不同的设计方案,并为详细原型考虑周全所有的界面元素。

P5:图形与交互设计基础 🎨

在本节课中,我们将学习图形与交互设计的核心概念。课程将涵盖设计思维、设计流程、设计的构成要素(排版、图像、视觉组织),以及如何为系统和交互进行设计。这些知识对于完成课程作业和提升整体设计素养都至关重要。

设计思维与流程 🔄

上一节我们介绍了课程概述,本节中我们来看看设计思维及其流程。设计思维是一种以人为本、以解决方案为导向的创造性过程。许多知名公司和机构都总结了自己的设计流程模型。

以下是几种常见的设计流程可视化模型:

  • 莱索漏斗模型:该模型描述了设计过程中的“发散”与“收敛”两个阶段。设计师首先需要发散思维,探索尽可能多的可能性,然后逐步收敛,聚焦并精炼出最终方案。
  • 双钻模型:该模型将设计过程分为四个阶段:发现(研究问题或机会)、定义(明确问题)、构思(探索解决方案)和实现(制作原型并测试)。这是一个不断迭代的过程。
  • 青蛙设计模型:这是一个简化的三阶段模型:发现设计交付。交付阶段包括用户测试和反馈,从而引导进一步的优化。
  • 斯坦福设计学院模型:该模型强调共情,包含五个阶段:共情(理解用户)、定义(定义问题)、构思(产生创意)、原型(制作原型)和测试(测试并获取反馈)。
  • LUMA学院模型:该模型将设计活动归纳为三大类:观察(了解情况)、理解(分析洞察)和创造(制作解决方案)。

这些模型都体现了设计是一个不断探索、定义、创造和精炼的循环过程。

设计的核心:形式与内容 🎭

在深入具体设计要素之前,我们需要理解一个贯穿所有设计领域的核心概念:形式内容。形式指的是事物看起来的样子,而内容指的是事物实际是什么。设计师需要不断思考这两者之间的关系,并寻求它们之间的无缝融合。

例如,三张描绘男性躯干的图像(内容相同),可以分别以古典雕塑、现代摄影和抽象绘画(形式不同)来呈现。设计师需要根据目标受众和具体情境,选择最合适的形式来传达内容。

设计不仅仅是装饰。优秀的设计通过形式有效地传达内容,甚至提升内容的体验。例如,进度条(形式)本身并不加快下载速度(内容),但它通过向用户提供反馈,缓解了等待的焦虑。

设计的基石之一:排版 📝

排版是所有书面沟通的基础。它同时具有视觉属性和语言属性。文字可以被“阅读”(线性的、理性的),也可以被“观看”(整体的、直觉的)。

排版涉及多个层面:字母、单词、句子和段落。设计师通过控制字体、大小、行距、对齐和留白等方式,来组织文本,影响阅读的节奏和信息的层次。

以下是一个文本排版演变的例子,展示了如何通过视觉组织来提升内容的可读性和吸引力:

  1. 原始状态:大段未经排版的文本,缺乏视觉层次。
  2. 调整留白与布局:改变页边距和文本位置,创造清晰的视觉入口点。
  3. 处理文本纹理:调整字距和行距,使文本块看起来均匀、舒适。
  4. 添加标题与提要:使用大标题吸引注意力,并用副标题或提要概括内容,引导读者深入阅读。
  5. 运用渐进披露:将长文分割为小块,添加小标题,让读者可以自由选择阅读深度,降低阅读压力。

通过这一系列设计决策,完全相同的内容从一堆枯燥的文字,变成了一个层次清晰、易于阅读且具有美感的版面。

设计的基石之二:图像 🖼️

图像同样包含形式与内容。例如,一个青椒(内容)可以用写实照片或抽象线条画(形式)来表现。设计师通过选择不同的形式来传达不同的情感和含义。

文字与图像的结合能产生强大的化学反应。同一张图片,配上不同的文字说明,可以引导观众产生截然不同的理解。这体现了设计师在塑造意义和引导感知方面的力量。

设计的基石之三:视觉组织 📊

视觉组织是设计师将混乱信息变得清晰有序的关键能力。就像把散落的火柴棍排列成有意义的图案一样,设计师通过组织信息来揭示其内在结构和关系。

信息架构是视觉组织的高级形式。理查德·索尔·沃尔曼认为,信息组织方式不外乎五种:按位置按字母顺序按时间按类别按层级

  • 地图与图表:这是抽象和简化的过程。例如,伦敦地铁图从复杂的地理地图演变为高度抽象、只关注连接关系的拓扑图,极大地提升了可用性。
  • 仪表盘设计:仪表盘是呈现实时数据、提示关键行动的信息界面。同样的数据集,不同的视觉设计会突出不同的重点,从而影响使用者的决策。设计师有责任确保设计能准确、清晰地传达数据的核心含义。

为系统设计:网格系统 📐

当设计扩展到整个系统(如多页文档、网站或应用程序)时,需要一套统一的结构来保持一致性,这就是网格系统。网格由不可见的列和行组成,为放置文本和图像提供了对齐基准。

使用网格系统,设计师可以高效地创建出一系列风格统一、布局和谐的页面。它确保了设计元素在整个系统中的秩序感和专业性。

交互设计基础 💻

交互设计专注于设计数字产品、环境、系统和服务的交互行为。其目标是创建直观、易用且令人愉悦的交互体验。

艾伦·库珀将其定义为“设计交互式数字产品、环境、系统和服务的实践”。有效的交互界面应该是视觉上清晰明了且宽容的,能让用户产生掌控感。最好的交互设计往往是“隐形的”,用户在使用过程中几乎意识不到它的存在,直到交互顺利完成。

交互设计需要平衡人的需求系统的能力。设计师需要思考用户的意图、感知、认知、情感和行为,同时考虑系统的传感器、反馈机制、数据计算和状态变化。

在交互设计中,有两个关键概念:

  • 前馈:设计元素能够暗示正确的操作方式。例如,一个带有凹陷踏板图案的垃圾桶,暗示了用脚踩踏打开的方式;一个向右的箭头图标,暗示了播放或前进的功能。
  • 反馈:系统对用户操作做出清晰、及时的响应。例如,点击按钮后按钮颜色变化,提交表单后显示“提交成功”的提示。反馈对于建立用户信任至关重要。

案例研究:越战纪念碑 ✨

越战纪念碑是形式与内容、排版与组织完美结合的典范。设计师玛雅·林面临的挑战是:设计一个能容纳6万多个阵亡者姓名、具有沉思性、与环境和谐且不涉及政治声明的纪念碑。

她的解决方案是:一面嵌入地面的、光亮的黑色花岗岩“V”形墙。墙上的名字按阵亡日期顺序排列,而非字母顺序。这一关键的设计决策(组织方式)使得纪念碑的意义从“查找姓名”的电话簿,转变为一次“追寻与缅怀”的旅程。参观者沿着时间线行走,触摸名字,感受战争的规模与个人的牺牲,这极大地增强了纪念的情感冲击力。

总结 📚

本节课我们一起学习了图形与交互设计的基础知识。我们从设计思维和流程入手,理解了形式与内容这一核心关系。接着,我们深入探讨了设计的三大基石:排版、图像和视觉组织,并了解了如何通过网格系统为大型项目建立秩序。最后,我们聚焦于交互设计,学习了前馈与反馈等关键原则,并通过越战纪念碑的案例看到了优秀设计如何通过精心的形式与内容安排,产生深远的情感与思想影响。记住,优秀的设计是隐形的仆人,它通过清晰、有效且充满敬意的方式,服务于内容和用户。

05:如何设计有效的可用性评估 📊

在本节课中,我们将学习如何设计一个有效的可用性评估。这是你们即将开始的下一项作业的核心内容。我们将探讨可用性评估的重要性、设计步骤、关键考量因素以及如何分析和报告结果。

课程概述与作业安排

上一讲我们讨论了原型设计,本节我们将聚焦于如何评估这些原型的可用性。

首先,关于作业安排。作业一的成绩已发布,请查收带有详细评语的PDF版本。作业二今天截止。现在,你们应该开始着手作业三了。由于下周是感恩节假期,作业三的截止日期是下周一,你们只有五天时间完成。这项作业分为两个阶段,无法在最后一刻仓促完成。

作业三是一项用户研究,与作业一类似,但呈现答案的方式完全不同。这次你们将使用一个特定的模板来填写答案,而不是绘制图表。模板的核心部分是一个大表格,用于记录在用户测试中发现的所有问题。

为什么可用性评估至关重要?🔍

即使通过情境调查深入理解用户并遵循设计指南,或者聘请优秀的设计师,也不足以保证能设计出完美的用户界面。研究表明,即使是最好的设计师也会存在盲点,会做出自己认为合理但用户感到困惑的设计。因此,可用性评估对于改进任何设计都至关重要。

需要明确的是,可用性评估不同于质量保证测试。虽然你可能会在可用性测试中发现程序错误,但其主要目的不是寻找漏洞,而是观察典型用户如何完成典型任务。它也不是让团队成员或焦点小组来评价界面。关键在于观察参与者在尽可能接近真实的环境下,如何实际操作系统,而不是仅仅询问他们的意见。

评估设计的关键考量

设计评估时,需要仔细规划。首先要明确评估的目的:是形成性评估(用于理解功能、竞品分析)还是总结性评估(用于测试已设计好的产品)。今天的重点在于后者。

在正式测试前,进行试点评估总是个好主意。这能帮助你发现说明材料是否清晰、任务设置是否合理,或者是否存在一些干扰测试核心目标的混杂因素。

当需要比较两个不同版本的设计时,有两种主要的研究设计方法:

  • 组内设计:每位参与者都尝试两个版本。这可以消除个体差异的影响,但会引入顺序效应(例如,先尝试A版本可能会影响对B版本的表现)。
  • 组间设计:一半参与者尝试A版本,另一半尝试B版本。这避免了顺序效应,但需要更多的参与者来平衡个体差异,通常采用随机分配的方式来确保公平性。

可用性评估中可以测量什么?📏

除了发现可用性障碍,我们还可以量化测量许多方面:

  • 易学性:新手首次使用能否完成任务?可测量成功前的尝试次数、查看帮助的频率或完成任务所需时间。
  • 效率:专家用户使用时的效率。可测量任务完成时间、固定时间内完成的任务数量或质量。
  • 错误率:用户犯错频率、从错误中恢复所花时间或错误的严重性。
  • 用户满意度:通过标准化问卷(如系统可用性量表SUS)获取主观满意度分数,便于与旧版本或竞品进行比较。

拥有这些量化数据的好处是,你可以向管理层或工程师提供客观、可衡量的证据,证明设计的改进程度。这就是所谓的“可用性工程”。你可以为各项指标设定目标值,例如将任务完成时间从20分钟减少到10分钟。

设计问卷与“出声思考”法

设计问卷时,建议使用李克特量表(例如:1=非常不同意,5=非常同意)或语义差异量表(例如:困难 --- 容易)。关键是要确保所有问题的正面表述方向一致,避免用户因阅读不仔细而给出无效答案。

在可用性评估中,“出声思考”法被认为是最有价值的方法之一。它要求参与者在操作界面时,实时说出他们的想法和困惑。这能帮助你理解用户行为背后的“原因”,而不仅仅是“发生了什么”。虽然这可能会影响任务完成时间的精确测量,但通常理解原因比精确计时更重要。 facilitator需要不断鼓励用户说出想法,但要注意提问方式,避免暗示答案。

招募参与者与伦理考量

应尽可能招募具有代表性的目标用户。对于B2B产品,可以联系客户公司,他们通常乐于参与,因为这有助于改进使其员工更高效的工具。有时需要提供报酬或小礼物,尤其是针对专业人士时。

关于需要多少用户,研究发现,在寻找界面问题的可用性测试中,5名用户通常就能发现大部分(约80%)的可用性问题。随着用户数量增加,发现新问题的收益会递减。因此,采用迭代测试和修复的策略是高效的。

进行用户测试时必须遵守伦理规范:

  • 确保数据匿名,保护参与者隐私。
  • 强调是“测试系统”,而非“测试用户”,减轻参与者的表现压力。
  • 如果用户感到沮丧,应适时停止测试。
  • 大学等机构通常设有伦理审查委员会来监督涉及人类受试者的研究。

执行评估:步骤与技巧

一次完整的评估包含多个阶段:准备、介绍、执行和收尾。

准备阶段:准备好所有材料、软件和设备。编写详细的测试脚本。

介绍阶段:向参与者解释测试目的,签署知情同意书(如需),进行前测问卷。明确说明将使用“出声思考”法,并告知测试中你将不会提供帮助。

执行阶段:按照脚本引导参与者完成任务。作为facilitator,你的任务是观察、记录和适时鼓励用户说出想法,但避免给予提示。如果让设计师或工程师旁观,需要防止他们过早干预。

收尾阶段:进行后测问卷,感谢参与者。清理测试环境,为下一位参与者重置系统状态(如清除浏览器缓存、历史记录)。

分析数据与撰写报告

分析数据时,对于量化数据(时间、错误数)可以计算平均值、寻找异常值。对于发现的可用性问题,需要按严重性(从低到高)和范围(是局部问题还是全局问题)进行整理和优先级排序。严重性高且范围广的问题必须优先修复。

报告应清晰明了。在作业模板中,你们需要提供用户描述、测试脚本、文字记录以及一个核心问题表格。表格中需包含问题截图、描述、原因分析、范围、严重性、修复建议及可能存在的权衡。

在实际工作中,你通常还需要向管理层或团队提交一份执行摘要,突出最关键的问题,并可以辅以视频片段来生动地展示问题。

关于原型与作业的补充说明

有效的原型对于可用性测试至关重要。它应该看起来像一个完整的产品,包含所有可能让用户分心或困惑的“干扰项”,这样测试结果才真实。例如,一个网页原型即使后台没有功能,前端的链接、按钮布局也应与最终产品一致,以便测试用户的导航能力。

最后,关于作业三,请记住它分为两部分:对第一个用户进行测试并发现问题;然后修改原型,再对第二个用户进行测试。你们需要在提供的模板中记录至少两个问题,并说明所做的设计更改。

课程总结

本节课我们一起学习了如何设计有效的可用性评估。我们了解了评估的重要性、各种考量因素(如组内/组间设计)、可测量的维度、设计问卷的技巧以及核心的“出声思考”法。我们还讨论了招募用户的策略、伦理规范、执行测试的具体步骤以及如何分析和报告发现的问题。记住,可用性评估是一个迭代的过程,是打造优秀用户体验不可或缺的环节。

07:原型实现与工具演示 🛠️

在本节课中,我们将学习如何使用多种工具来实现一个原型。这直接关系到接下来的作业。

课程概述与作业安排

今天是2015年11月23日,星期一。本周是感恩节假期,希望大家有个愉快的去处。以下是作业安排:

  • 作业二 已发布在Blackboard上。
  • 作业三 在本节课前截止。
  • 作业四 现在可以开始,下周一截止。所有人必须按时提交作业四,因为作业五将很有趣——你们将互相评估彼此的系统。
  • 作业五 的流程是:下周一我们会收集所有提交的作业四,助教会快速测试每个作业以确保其可运行。预计下周二早上,你们会收到一封邮件,其中包含两位同学的系统,你们需要对其进行评估。如果下周一没有提交作业,我们将无法将你的作业分配给同学,你也不会收到任何需要评估的作业,这不公平。
  • 作业六 是你们将收到两位同学对你们作业的评估,然后需要根据反馈修改自己的作业。这项作业也不能迟交,否则对等待反馈的同学不公平。

历史经验表明,如果到现在还没有完成作业三,想要赶上进度会非常困难。如果你远远落后,我强烈建议你立即赶上,或者考虑退课。

作业四:线框图/可点击原型

作业四的目标是制作一个线框图原型可点击原型。核心思想是完整地展示界面,用户看到的每一个屏幕都应该是基本完整的。

以下是关键要求:

  • 完整性:对于你定义的任务中用户会看到的每一个页面,这些页面应该是完整的。但你的网站或系统中可以有整个部分不被呈现。
  • 静态模拟:原型看起来像真实的网页或应用,但所有页面都是静态的。你可以“假装”系统在工作,而无需进行大量实际的后端实现。
  • 处理用户输入:对于表单或数据库查询,你可以忽略用户输入的内容,直接跳转到一个固定的结果页面。你可以在说明文件中指示:“假设用户输入了‘John Doe’和‘匹兹堡的地址’,然后点击提交”。
  • 模拟外部动作:如果你的原型涉及相机拍照或打印机出纸等外部动作,你可以弹出一个对话框或另一个屏幕来模拟,例如显示“假设相机已拍摄照片”或“假设打印机已输出纸张”。
  • 复杂度:目标是大约10个不同的屏幕30个控件。过多(如80页)或过少(如3页)都不合适。
  • 线框图风格:可以使用线框图风格,即用轮廓和占位符表示元素,无需最终图形和颜色。
  • 标签真实:页面上的主要按钮和关键标签应使用真实的文字,而不是“Lorem Ipsum”之类的占位文本。大段的非任务相关文本(如产品描述)可以使用占位符。

要求每个页面完整有两个原因:

  1. 如果你要进行用户测试,用户应该像面对真实网站一样被你的原型“迷惑”。
  2. 原型将指导专业的开发团队进行实际实现。

我们展示过Tham网站的例子,它看起来像真实的网站,但那是一个四人团队两周的工作成果。你们不需要做到那种细节程度。

实现工具与跨平台要求

在实现方面,你可以使用任何喜欢的工具。助教将在下半节课演示他们推荐的四款工具。

以下是工具选择建议:

  • 推荐工具:大多数人使用PowerPoint,因为它普及且易于制作原型。但其他专用工具可能更高效。
  • 不推荐编程不推荐使用Java、JavaScript、C#等进行编程实现。那样会陷入过多的实现细节,无法在一周内完成。使用绘图工具(如Photoshop、Balsamiq)则快得多。
  • 跨平台输出:非常重要!班级里有Mac和PC用户,我们会将你的作业随机分配给同学评估。因此,你的原型输出必须在Mac和PC上都能运行。
    • 几乎所有工具都可以输出为PDF,这是跨平台的。
    • 也可以输出为PowerPoint文件(假设大家都有)或HTML网页
    • 避免使用仅限特定平台(如OmniGraffle仅限Mac,或包含ActiveX控件的Visual Basic仅限PC)的工具,除非你能确保输出格式(如PDF)可跨平台使用。

助教演示的工具

助教将演示以下工具,它们都有30天免费试用期,足够用到课程结束:

  1. Balsamiq:快速的线框图工具,可拖放元素,创建可点击原型并导出为PDF。CMU也有在线学生账户。
  2. InVision:需提前在其他工具(如Illustrator、Photoshop)中制作好屏幕图片,然后上传至InVision添加热点链接,创建可点击原型。它支持手势和过渡动画,易于分享测试。
  3. Axure:功能强大的线框图和原型工具,支持动态面板(可在同一位置切换内容),能导出HTML和CSS。
  4. HTML & CSS:使用代码创建原型。虽然更灵活,但可能比可视化工具更耗时。可以使用Sublime Text、Brackets等编辑器。

一项2010年的调查显示,77%的人仍在纸上画原型,这也是我们之前让你们练习纸上原型的原因。其他流行工具包括Visio、PowerPoint、Dreamweaver、Axure、OmniGraffle等。

使用PowerPoint制作原型详解

现在,我们详细介绍如何使用PowerPoint制作原型。它有一些你可能不知道的强大功能。

基本形状与超链接

首先,像平常一样添加形状(如圆角矩形按钮)和文本。

创建超链接跳转

  1. 选中按钮,右键选择“超链接”。
  2. 在对话框中,选择“本文档中的位置”。
  3. 选择你想要跳转到的特定幻灯片。你还可以选择“第一张幻灯片”、“最后一张幻灯片”、“下一张幻灯片”或“上一张幻灯片”。

这样,在幻灯片放映模式下点击按钮,就会跳转到目标幻灯片。

“插入动作”实现返回

“超链接”功能中的“上一张幻灯片”是按幻灯片顺序的上一张,而非用户浏览路径的上一张。要实现“返回”功能,需要使用“插入动作”:

  1. 选中作为“返回”按钮的形状。
  2. 在“插入”选项卡中,找到“动作”。
  3. 在“单击鼠标”选项卡中,选择“超链接到”,然后选择“最后查看的幻灯片”。

这样,点击按钮就会返回到用户之前所在的幻灯片。

使用开发者工具添加控件

你可以在PowerPoint中添加复选框、文本框等控件,但需要启用“开发者”选项卡:

  1. 点击“文件” > “选项” > “自定义功能区”。
  2. 在右侧主选项卡列表中,勾选“开发者工具”,然后确定。

启用后,“开发者”选项卡会出现。你可以使用其中的控件(如文本框、复选框)拖放到幻灯片上。要修改控件属性(如标签),需要右键点击控件,选择“属性表”进行设置。注意,这些控件不需要编写代码使其真正工作,它们只是静态展示。

关键设置与技巧

  1. 禁用单击换页:默认情况下,在幻灯片放映时单击任意处会跳到下一张。对于原型,这很糟糕。需要关闭此功能:
    • 转到“切换”选项卡。
    • 取消勾选“设置自动换片时间”下的“单击鼠标时”复选框。
  2. 使用母版:如果多个幻灯片有相同的元素(如导航栏),可以在“幻灯片母版”中创建,这样只需修改一次。
  3. 规划与占位符:在开始添加大量链接前,先创建所有幻灯片的占位符。如果之后在中间插入新幻灯片,原有的链接可能会错乱,提前规划可以避免这个问题。
  4. 不要添加注释到原型中:所有给测试者的任务说明和指示都应放在单独的“Readme”说明文件中,而不是放在PowerPoint原型页面上,以免混淆。

PowerPoint的缺点是,如果要展示多个选项的不同组合状态(例如两个开关的四种状态),可能需要为每种组合创建单独的幻灯片,管理起来可能繁琐。

助教工具演示摘要

上一节我们详细介绍了PowerPoint,本节中我们来看看助教演示的其他工具。

以下是助教演示的各工具要点:

Balsamiq 演示要点

  • 快速线框图工具,拖放元素,界面元素有手绘草图风格。
  • 可以创建多个“Mockup”(界面图),并在它们之间设置链接,创建可点击流程。
  • 可以将项目导出为PDF进行测试。
  • 支持从“Mockups To Go”等网站导入第三方UI套件(如Android控件)。
  • 可以将草图风格切换为更精致的线框风格。

InVision 演示要点

  • 本身不创建界面图,需要先用其他工具(如Illustrator、Photoshop)设计好屏幕图片。
  • 上传图片后,在“Build”模式下通过拖拽创建热点区域,并链接到其他屏幕图片。
  • 支持移动设备手势(如点击、滑动)和丰富的页面过渡动画。
  • 非常易于分享和进行用户测试,可以生成链接在手机或电脑上打开。
  • 缺点是只能链接整个屏幕图片,无法在页面内局部切换内容。

Axure 演示要点

  • 功能强大的专业原型工具,类似于Balsamiq但功能更丰富。
  • 支持动态面板,这是其最大优势,可以在同一位置实现内容的动态显示/隐藏(如标签页、折叠菜单),无需为每个状态创建单独页面。
  • 可以定义复杂的交互(如OnClick、OnShow)。
  • 能导出为HTML/CSS代码,甚至可以在本地服务器预览。
  • 学习曲线相对较高,但制作高保真交互原型效率很高。

HTML & CSS 演示要点

  • 使用代码构建原型,灵活性最高。
  • HTML由各种标签(如 <div>, <button>, <a>)构成,定义页面结构。
  • CSS用于控制样式(如颜色、大小、位置)。
  • 可以使用Brackets(支持实时预览)、Sublime Text等编辑器。
  • 对于简单的静态页面原型是可行的,但若涉及复杂交互,可能需要JavaScript,这可能会增加工作量。
  • 适合有一定前端基础或想深入学习的人。

课程总结与安排

本节课我们一起学习了如何为作业四实现一个线框图或可点击原型。我们明确了原型的核心要求:模拟完整任务流程、保持适当复杂度、使用真实标签,并确保跨平台兼容。

我们详细探讨了使用PowerPoint制作原型的技巧,包括超链接、动作设置、控件添加和关键配置。此外,助教还为我们演示了Balsamiq、InVision、Axure和HTML/CSS这几款各有特色的原型工具,拓宽了我们的选择。

关于作业支持,请注意:由于感恩节假期,本周的办公室时间有所调整(详情请查阅课程人员页面)。助教和我会通过Piazza和邮件在假期期间为大家提供帮助。

最后,请务必在提交作业前,将你的所有原型文件放在另一台电脑上测试,确保一切运行正常,因为助教和你的同学将在不同的环境下运行它。

祝大家感恩节假期愉快,我们下周一见。

08:启发式评估 📋

在本节课中,我们将学习如何进行启发式评估,这是评估用户界面的一种系统化方法。我们将详细介绍尼尔森的十条可用性启发式原则,并学习如何应用这些原则来分析和改进界面设计。

概述

启发式评估是一种由专家根据特定指导原则(启发式原则)来检查整个用户界面的方法。它不同于用户研究,其目标是全面覆盖界面,而非仅关注特定任务。这种方法成本低廉、效率高,但依赖于评估者的判断。接下来,我们将深入探讨其具体方法和核心原则。

什么是启发式评估?

启发式评估本质上是一种基于特定指导原则的界面评估方法。这个术语及其原则由雅各布·尼尔森提出。其核心思想是由专家(即正在学习的你们)来评估系统。

它与用户研究不同。在用户研究中,用户执行特定任务。而启发式评估的目标是覆盖整个界面,但它仍然成本低廉且易于高效执行。然而,这种方法依赖于评估者的判断,需要评估者决定系统在多大程度上违反或遵守了这些规则。

它被称为“折扣”评估法,因为它廉价且快速。尼尔森的研究表明,与后期修复问题或进行用户研究相比,进行启发式评估的成本效益最高可达50倍。

启发式评估是对整个系统的系统性检查。不同的评估者可能会发现不同的问题,因此让多人评估同一界面是有益的。研究还表明,受过训练的评估者比计算机科学家或未学习过相关知识的人做得更好。

这种方法通常会产生一长串问题列表。然而,它并不擅长评估这些问题的严重性,即难以区分哪些是用户使用的真正障碍,哪些只是有时间时可以修复的次要问题。此外,从用户界面可用性研究(如之前所做的)和启发式评估列表中得到的反馈可能非常不同,因此两者都需要进行。

研究表明,随着评估者人数增加,发现的新问题数量会急剧减少。通常在4个评估者时,已能发现约70%的问题,再增加人数收益不大。本次作业中我们安排两人评估,这很典型,有时甚至只安排一人。

让团队成员评估自己的界面帮助不大,因为设计时就应该应用这些启发式原则。许多公司有专门的HCI专家,或者可以聘请外部人员进行评估。

评估方法

评估方法相当直接。每个评估者检查整个界面。评估者可以向设计者提问,例如在不理解某些功能时。通常,评估者会多次检查界面以确保注意到所有细节。可以一次应用一条指导原则检查所有页面,也可以一次检查所有10条指导原则。

我们要求大家在提交作业时附带一个说明文件,以便评估者了解设计目标、哪些部分有效、哪些按钮应该有效等。在实际评估中,通常也会向评估者提供使用场景和用户假设等信息。

尼尔森启发式原则

对于本次作业,我们将使用尼尔森修订后的10条启发式原则列表。教材第13.4节也讨论了这些原则。这些原则层次很高,只要人类认知方式不变,它们就应始终有效。尼尔森检查了他过去的60条原则,发现90%在20年后仍然有效。

除了尼尔森的原则,还有许多其他指导原则。教材第22章列出了202条,有些非常具体,有些则很通用。在未来的课程中,我们还将讨论针对网页界面、国际化界面和手机界面的更多具体原则。

以下是尼尔森的10条启发式原则,我们将在本讲剩余部分逐一讲解。

1. 系统状态可见性 🎯

这一原则要求确保用户始终了解系统正在发生什么。让用户了解系统状态、他们所在的页面、流程的步骤等。一个经验法则是:如果用户离开屏幕10分钟后回来,或者其他人走到电脑前,他们应该能通过观察立刻明白当前情况、处于流程的哪一步、是否在处理错误等。

这包括为界面步骤和页面提供标签,以及提供关于系统内部正在发生什么的适当反馈,例如系统在做什么、输入如何被解释等。

违反示例:我曾为一家公司(不便透露名称)提供咨询,他们有一款产品非常糟糕。其中一个问题是分组功能。当用户尝试取消分组时,会弹出一个简短消息询问“真的结束分组吗?”,用户通常点击“是”。但系统没有告知用户,分组上附加的所有属性在取消分组时都会被丢弃,而且该操作不可撤销。确认对话框没有提供任何这些关键信息,完全违反了状态可见性原则。

2. 系统与现实世界匹配 🌍

这一原则涉及所使用的词汇和机制,旨在沟通正在发生的事情。

首先,尝试使用用户语言中的术语。错误信息、提示和标签都应使用用户熟悉的术语,尤其要避免计算机技术术语。例如,错误信息不应说“数组越界”,而应说“无法处理超过255个项目”。

其次,从用户视角使用语言。例如,说“您已购买”而不是“我们已售出”。这能减少混淆。

使用用户知道的常见词汇,避免技术行话。例如,一条错误信息显示“邮件服务器查询结果……无效的Spawn ID6……”,这对大多数用户完全无用。这些细节应放在不可见的日志中,而不是显示给用户。

错误信息和反馈应引用用户实际所指的对象,隐藏所有内部细节。例如,一条打印机错误信息包含“LPT1:”等过时的内部细节,而实际问题只是打印机缺纸。信息应该简洁明了。

允许使用全名。现实世界中的名称包含空格和特殊字符。在系统中,如果没有特殊原因,应允许用户使用有意义的全名。

另一个例子是信息“按任意键继续”,这导致了许多求助电话,因为键盘上没有“任意”键。如果说“按空格键”或“按回车键”,每个人都会明白该怎么做。

3. 用户控制与自由 🕹️

这一原则涉及一系列要求,例如拥有取消按钮。

应始终允许用户在执行操作过程中中止,直到最后一刻。即使在操作完成后,最好也能提供撤销方式。这在网页和手机界面上已不常见,但在桌面界面中,几乎每个操作都是可取消和可撤销的。

例如,在Windows中调整窗口大小时,可以按ESC键中止操作。在网页上,如果用户处于多页流程中,应提供返回上一页的按钮。浏览器有后退按钮,网站设计者应确保后退按钮能执行合理的操作。

早期网页常警告不要使用浏览器的后退按钮,但现在大多数问题已解决。网站设计者必须确保后退按钮能正常工作。

另一种方式是使用面包屑导航,显示当前步骤并提供返回途径。目标是在用户出错、感到困惑或改变主意时提供帮助,必须假设每个人都会犯错。

违反示例:之前提到的产品中,有一个文本字段处于“待删除”状态(类似日历应用中选择整个文本的情况)。如果用户不小心删除了该字段中复杂的产品ID内容,由于系统要求该字段不能为空且无法恢复旧值,用户最终只能关闭应用程序,因为他们无法记住产品ID。

4. 一致性与标准 📏

一致性非常重要,但也非常难以实现,因为有许多方面需要保持一致。

需要确保相同命令在所有地方具有相同的效果和名称。例如,复制、粘贴、剪切等操作应使用相同的词汇。不应在某些地方用“删除”,在另一些地方用“移除”。这看似明显,但由于大型团队开发,实际很难保证。

一致性还涉及位置、大小、颜色、措辞等方面。用户会尝试为界面中的几乎任何元素赋予意义。因此,如果同一操作出现在多个地方,它应该是完全相同的:相同的名称、外观、字体、颜色等。

顺序也应一致。如果用户在界面某一部分按特定顺序操作,在其他地方也应保持相同顺序。

示例:颜色一致性难题:我曾为一家控制工厂软件的公司咨询。他们刚收购另一家公司,两家公司对“紫色”的含义定义不同。一家认为紫色介于红色(严重)和黄色(中等)之间,另一家认为介于黄色和绿色(良好)之间。整合产品时,他们必须选择一种定义以保持内部一致性,最终选择了其中一种。这个例子说明,即使只是“一致性”这一条原则,有时也难以轻易实现。

如何实现一致性?遵循标准显然有帮助。在网页上,可以让一个小团队或单个人用CSS定义样式,然后所有实现者使用这些样式。有时可能需要额外的风格指南。

违反示例:之前提到的产品中,部件名称具有复杂的内部结构,但在两个不同的界面部分,命名方式不同(一个用点分隔,一个用逗号分隔),没有理由这样做,只是不同程序员在不同时间决定的。

另一个例子是“复制”一词,在计算机产品中应执行计算机用户期望的操作(即复制到剪贴板)。

5. 防错设计 🛡️

这一原则的目标是首先帮助用户避免犯错,后续原则则关注出错后如何帮助用户。

首要方法是提供选择而非输入。使用弹出菜单、日历选择器、禁用不可用的选项等。例如,日期选择器中,如果不允许选择过去的日期,则应将其置灰。

如果用户提供了输入但需要澄清,给出选项比让他们重新输入更有用。例如,在Expedia搜索“Columbus”时,它会列出多个同名地点让用户选择。

自动填充功能(如Google的搜索建议)是帮助防止错误的好方法。如果用户开始输入错误内容,自动纠正或提供选择可以帮助他们。

确认是另一种防止错误的方式。如果发现用户输入了非法内容,可以提示确认。确认对话框必须清晰易懂。

避免使用模式。模式是指同一操作在不同情境下做不同的事情。有些模式不可避免(例如点击鼠标的效果取决于光标位置),但应尽量减少模式,并使模式对用户高度可见。

经典模式反面教材:在命令行时代,有一个显示时间的命令叫daytime。但在一款邮件程序中,进入邮件模式后,单键具有特定含义,输入daytime意味着“删除所有邮件”。程序会请求确认,输入y(es)、eme后,所有邮件被删除。虽然有撤销功能,但只有一级撤销,导致灾难性后果。这是一个模式设计糟糕的经典例子。

6. 识别而非回忆 🧠

这一原则的理念是尽可能让所有东西可见,以便用户从看到的内容中选择,而不是必须记住。

任何需要用户从小集合中选择对象或值时,都应能通过菜单选择。这在网页、传统界面和手机界面上都很常见,尤其是手机,应尽量减少输入。

但菜单不能太长,否则用户仍需回忆要寻找的命令。自动填充是另一种帮助用户识别所需内容的方法。

简单的做法是,每当允许用户输入时,提示应告知格式或可选项。一个很好的例子是打印幻灯片或页面时,可以指定页码范围。在PowerPoint的打印范围提示中,用小字说明了格式(如“1,3,5-12”),这是一个很好的提示示例。

其他例子包括份数选择(可直接输入或点击按钮)、整理方式图标等。整个界面中应提供所需信息,以便用户识别。

任何时候发现用户需要在纸条上写下东西然后稍后输入计算机,或者必须在界面不同页面之间复制粘贴,都表明违反了此原则。用户不应被迫重新输入信息。

这也适用于界面操作的一般规则。如果用户必须记住在一个页面用“删除”,在另一个页面用“移除”,这就是一个回忆问题。如果到处都能做相同操作,则是一个优势。

最后,在第一讲中提到的雷达显示器例子:用户需要心算旧值并与新值比较来判断飞机升降。这违反了本原则,要求用户基于回忆进行心算,而不是直接显示数值让他们识别。大家提出了许多通过颜色、图标或直接显示数值来改进的设计方案。

7. 使用的灵活性与效率 ⚡

这一原则的理念是专家用户应能高效操作,应为知道如何操作的用户提供简便方法。

例如,为网页设置书签,允许用户直接跳转到界面中部。对于常规产品,在菜单中提供快捷键(命令键)。在旧版Windows和Macintosh中,每个菜单项旁边会显示加速键。如今,许多界面不再显示这些信息。

在网页上,如果创建了指向网站中部的书签,然后尝试使用,它可能无效。这是因为许多网站在URL中编码了大量信息(如会话ID、时间等),导致重用该URL时失效。这与本原则相悖,本应允许用户跳转到网站中部并再次找到内容。

另一个例子是,如果用户已登录并输入过送货地址,系统应记住这些信息,避免用户重复输入。这是提高专家用户效率的功能。

即使是提供良好的默认值也很重要。例如,在电子商务网站上,购买数量默认值通常是1,因为大多数时候用户只想买一件。提供好默认值能提高效率。

8. 美观与简约设计 🎨

这一原则涉及设计讲座中讨论的所有内容:使用良好的颜色、图标、屏幕布局等。设计的角色之一是引导用户关注正确的事物,并让他们以正确的顺序操作。

良好的分组很重要,相关项目应通过框或界面区域组合在一起。我经常看到违反此原则的情况,例如一整行数据输入框,不清楚应按什么顺序填写或哪些属于一组。

保持显示惯性,即不同屏幕上元素应处于相同位置。如果Logo在不同屏幕上移动,用户会感到分心和烦恼。

留白是设计的一部分,不应试图在每个屏幕上塞满尽可能多的信息,而应利用留白使现有元素合理分组、整洁有序。

新手设计师常犯的错误是使用过多颜色和字体。设计讲座中建议,最多使用两种字体:无衬线字体(如Helvetica或Arial)用于标题和屏幕阅读,衬线字体用于大部分内容。颜色也应从较小的集合中选取,并应提供冗余编码。

大约8%的男性是色盲(通常是红绿色盲)。由于红绿色常被用来表示好坏,对于色盲用户,这两种颜色可能看起来是相同的灰度,导致他们错过重要信息。因此,在使用颜色的同时,应提供冗余编码,例如为红色项目添加星号或其他图标,确保色盲用户也能理解内容。

另一个技巧是将显示器切换到黑白模式,确保颜色在黑白模式下仍有区别。可以使用强度,深色看起来比浅色更黑。

避免低对比度。苹果设计指南中常出现此问题,例如白色背景上的浅灰色文字难以阅读。一个商业产品的反面例子是,在深色背景上使用了黑色文字,导致无法阅读。

尼尔森将“美观”和“简约设计”归在一起,但它们确实不同。简约设计旨在消除不必要的东西。如今人们阅读不多,如果指令超过一行,用户可能会忽略第二行。

一般原则是减少屏幕上同时出现的内容数量。识别真正需要用户处理的内容。我常为一些公司提供咨询,他们会说“这有点复杂,我们会确保手册写清楚或提供帮助文本”,但这通常无效。一个策略是,如果发现向他人解释某事过于复杂,那就重新设计它,避免那种复杂性。

避免无关的图片和信息。在之前提到的产品中,有一个菜单项叫“显示弹药筒”,我问工程师它的含义,没人知道。原来是很久以前某个客户要求的功能,他们为这个客户特别添加后,就一直保留在菜单中(但对其他用户置灰)。这导致培训师常被问及,支持电话也偶尔收到相关询问。既然不相关,为什么不直接移除它?当然,如果是“免费增值”模式,提供一些需要付费才能解锁的功能菜单项,则是另一回事。

通常,应减少选项和菜单选择。这与Windows和Macintosh的设计理念(为每个操作提供越来越多的方式)相反。例如在PowerPoint中,每个操作可能有3到4种调用方式(菜单、右键菜单、键盘快捷键等)。这违背了简约设计原则,因为专家用户必须花费认知精力来选择使用哪种方式,这降低了效率。

许多人会在页面上添加图片和其他信息。在电子商务网站上,图片对于销售至关重要。另一方面,装饰性的图片、巨大的Logo或人物手持产品的图片等,并不能提供有用的信息。

9. 帮助用户识别、诊断和恢复错误 ❗

错误不可避免,尽管我们会尝试使用之前的策略减少错误。但一旦用户陷入错误状态,帮助他们理解情况并恢复就非常重要。

一些专家建议,应将错误视为教导用户了解其困惑之处的一种方式。用户通常不会故意犯错,可能是简单的拼写错误,这时需要帮助他们高效地摆脱错误。但很多时候,用户陷入错误是因为他们普遍对系统允许什么、会做什么或当前状态感到困惑。在这种情况下,需要清楚地说明他们的误解或困惑之处,以及事情为何不按预期工作。

错误信息必须清晰,使用用户能理解的语言,不要使用代码。例如,我的机顶盒显示“错误25”,我不知道该怎么办。它本应利用整个电视屏幕告诉我问题是什么以及如何解决。任何时候有机会提供完整的错误信息,都应该这样做,而不是使用代码。

同时,要精确。“语法错误”是编译器过去常告诉程序员的,但对于最终用户,永远没有理由使用这种语言。即使有复杂的字段需要用户输入,也不应说“语法错误”,因为用户可能并不理解编程中的“语法”概念。需要帮助用户理解如何解决问题,而不仅仅是错误是什么。

示例:不明确的错误信息:在之前提到的产品中,尝试保存文件时显示“无法保存文件”。为什么不呢?可能的原因有很多:磁盘空间不足、已有同名文件(应询问是否覆盖)、无写入权限、设备损坏、网络断开、未指定目标位置、文件名包含非法字符、介质写保护等。操作系统实际上知道无法保存的原因,并将此信息传递给应用程序。这条错误信息本质上是告诉用户:“哈哈,我知道哪里错了,但你必须自己猜出来。”没人喜欢这种猜谜游戏。这与“语法错误”和其他模糊信息类似。

要有礼貌,不要指责。“致命错误”意味着“因为你犯了错,现在程序要死了”,这并不真实(程序下次启动还会运行)。更礼貌、积极的表达是:“抱歉,发生严重错误,程序必须关闭。”同样,责备系统而非用户。“非法命令”听起来像用户做了违法的事。“无法识别的命令”则更温和、礼貌。

幽默或讽刺的评论对程序员来说可能有趣,但用户很少觉得有趣。用户处于糟糕的情绪中,他们犯了错,没有成功完成任务,这时通常不是开玩笑或娱乐的好时机。而且,如果用户反复看到同一条幽默错误信息,会非常恼火。

显然,要使错误恢复变得容易。如果告诉用户该怎么做,但操作本身很难或不可能,那也无济于事。有时,提供多级错误信息是有帮助的,例如一个基本错误信息,旁边有一个问号,点击可以获得更多关于出错原因或情况的信息。

我收集了许多错误信息的例子。以下是一些网页错误示例:

  • 匹兹堡文化信托网站:显示“设备上没有剩余空间”,然后给出一个荒谬的长URL和文件路径,暴露了内部细节。这不仅对用户不友好,研究还表明,向客户暴露这些内部细节是一个巨大的安全漏洞,恶意攻击者可以利用它来损害系统。
  • 好市多网站:显示“通用错误。以下部分旨在帮助商店开发人员调试示例商店上的问题。”这甚至不应该被用户看到,但网站进入了显示这些内部页面的状态。
  • 一条测试结束信息:“恭喜,您已完成。”这可能被误解为“你死了”那种“完成”,需要注意用词的歧义。
  • 一个试图幽默的例子:“抱歉,亲爱的,但有些事情完全出错了……”这可能符合其广告风格,但如果反复看到,用户会感到厌烦。
  • 一个未完成的错误信息占位符:“我们友好的错误信息将放在这里。”当用户看到时,并不觉得友好。
  • 模糊的错误信息:“此号码目前无法在U Promise服务中注册。”这暗示其他时间可能可以,但事实并非如此。可能原因是信息输入不正确、号码已注册或号码无效。系统应该知道是哪种情况。结果是用户不得不打电话询问,增加了支持成本。
  • 技术性错误:“未指定有效的交易ID。”没人知道“交易ID”是什么,这绝不应该显示给用户。

相比之下,雅虎和大多数网站在错误处理上做得更好,会明确显示哪里出错,并通常将错误字段高亮显示。

10. 帮助与文档 📚

这包括帮助用户理解如何操作的所有内容:帮助文本、标签、任何文档(如消费电子产品的手册)。

人们通常期望产品能够即用即走、不言自明,不能指望用户必须学习。一般规则是:不要以为可以通过提供帮助来解决复杂性。

一个非常有用的策略是,让技术文档编写者成为设计团队的一部分。他们通常是英语专业出身,在公司地位可能不高,无权与产品设计师沟通,但他们非常了解系统中哪些地方难以使用,因为他们必须想办法解释它。让他们参与设计并帮助修复问题,非常有益。他们也能帮助确保系统中的所有句子都清晰、无歧义。

显然,一致性在这里也很重要,文档中使用的词汇应与屏幕上的一致。文档本身在某种意义上也是一种用户界面。如果帮助系统本身很难用,用户就很难找到信息。

很早以前的一项研究表明,一个帮助系统本身非常难用,以至于进行可用性评估后,通过改进帮助系统的界面(更不用说它要帮助的那个系统了),使用帮助系统的时间几乎减少了一半。

关于作业5

对于作业5,你们将对其他同学的系统进行启发式评估。

请注意,作业并未要求大家实现帮助功能。因此,在评估他人系统时,如果说“该系统没有帮助”或“帮助按钮无效”,这是没有意义的反馈。同样,如果使用第10条原则(帮助与文档)作为启发式评价,说同学的系统没有实现帮助,这种反馈也毫无帮助。

总的来说,我们希望你们提供有用的反馈,帮助同学理解他们做错了什么以及如何修复。

评估模板与之前使用的类似,包含相同的列。我们将关注你们是否提出了有帮助、有意义的启发式评价。

重要事项:你们将评估其他同学。需要在模板中填写被评估系统的名称、创建者姓名以及你们自己的姓名。可能没有系统名称,但会有创建者姓名。请将两者都填入。

请使用Word文档,并提交原始文件。这样助教可以更方便地将你们的两份评估文件发送给相应的被评估同学。

示例:模板中包含以下列:参考(截图或描述)、启发式原则名称、问题描述、范围、严重性、修复建议。例如,一个一致性问题是按钮在两个界面部分位置不一致,严重性为轻微,因为用户可能不会因此遇到问题,修复方法是将其在一个位置移动。

对于作业6,你们将填写黄色列,说明针对他人对你们系统的评价采取了什么措施。


总结

本节课我们一起学习了启发式评估的方法和尼尔森的十条核心可用性启发式原则。我们了解了如何系统性地检查界面,识别违反这些原则的问题,并为设计改进提供具体建议。记住,启发式评估是专家评估方法,需要结合用户研究以获得更全面的洞察。在接下来的作业中,请应用这些原则,为同学提供建设性反馈,并思考如何将这些原则融入自己的设计实践中。

09:可用性工程流程

在本节课中,我们将学习如何将可用性整合到整体项目计划中。我们将探讨作为管理者,如何规划可用性工作的不同步骤,以及可用性如何与敏捷开发等软件组织流程相结合。

课程安排与作业提醒

上一节我们完成了可用性评估的讨论,本节我们来看看项目管理的宏观流程。但在开始之前,先同步一些课程安排信息。

希望大家都已收到需要评估的同学系统,并已开始进行评估。有少数同学未提交作业。未提交作业的同学可能需要考虑退课,因为很难安排他人为其作业评分。目前注册人数接近70人,多于实际到课人数。希望大家都能参加期末考试。

下周是官方课程的最后一周,我将宣布期末考试的相关事宜。请注意,根据Tepper校区的日程,我们在考试周还有完整的一周课程,因此实际上还有两周时间。

以下是具体安排:

  • 下周:照常上课。
  • 考试周:我们有一节非常有趣的客座讲座,Dave Bishop几乎每年都来,大家都很喜欢他的分享。此外,最后一讲将涵盖课程和作业中未涉及的其他HCI方法。
  • 期末考试:暂定于12月17日(周四)和12月21日举行。考试为闭卷、纸笔形式,不涉及编程。更多细节将很快公布。
  • 当前作业:下周一提交。不接受延期,因为我们需要将作业分发给同学互评。
  • 最终作业:下下周一提交。
  • 补交作业截止日:考试周的周三,以便我们完成所有评分工作,同时让大家能在考前获得反馈。

另外,Blackboard上有一份包含所有同学姓名和待评作业的电子表格,其中也有大家的邮箱地址,方便联系。请注意,由于包含隐私信息,请不要将其公开。

可用性工程概述

现在进入今天的主题:可用性流程。这关乎作为管理者,如何将可用性纳入整体项目计划,需要经历哪些步骤,以及可用性如何与敏捷等软件开发流程结合。

理想情况下,本讲应安排在课程更早的部分,因为它提供了很多背景信息。但由于课程安排需要与作业内容对应,所以推迟到了现在。

在本课程中,我们讨论可用性。希望到现在大家已经明白,可用性不是可以忽略并在最后修补的东西。

雅各布·尼尔森曾言:可用性不是像一层厚厚的花生酱那样可以随意涂抹在糟糕设计上的品质。

一个类似的推论来自软件工程的质量观念:仅靠最终测试无法获得高质量产品。如果没有正确的流程和步骤,就无法在最后阶段凭空添加任何维度的质量。

作为管理者或团队,必须致力于可用性,并在过程中为其分配适当的资源。如果忽视它,或不为其规划、分配资源,它显然不会自动实现。

之所以不能将可用性留到最后处理,一个明显的原因是:到那时大部分软件已经编写完成,任何改动都变得非常困难。而在纸面原型或早期设计阶段,修复问题则灵活得多。

雅各布·尼尔森创造了“可用性工程”这个术语,试图与软件工程相提并论。软件工程是大多数工程师和软件开发公司所熟知的、更数据驱动的严谨流程。

工程学通常侧重于使用可衡量、可操作的数据来驱动流程,客观地判断进展。这就是可用性工程的概念——它不仅仅是一门艺术或雇佣合适的人(尽管雇佣错误的人肯定无济于事),即使雇佣了合适的人,也必须规划为他们提供正确的工具和时间,并以允许他们取得进展的方式来管理项目。

实际上,“可用性工程”一词可追溯到IBM,并且有一些国际标准(尤其是在欧洲)规定了如何开发软件以符合这些标准。

以下是尼尔森推荐的将可用性工程与其他软件开发活动结合的步骤,我们将逐一探讨。

第一步:了解你的用户

第一步是了解你的用户。我们在第一讲和第一次作业中讨论的情境访谈法就是一种方式。此外,还可以使用调查、访谈、焦点小组等多种方法来更好地理解你的用户群体。

一个关键要求是让整个团队(而不仅仅是可用性专家)都参与进来,努力将对目标用户及其需求的理解传播到整个团队。

做到这一点可能有很多困难。例如,市场部门有时会保护开发人员,避免客户直接联系他们,以防开发人员花费大量时间处理客户问题而非本职工作。销售部门也可能不希望客户接触工程师,以免客户得知未来产品计划而停止购买当前产品。当然,用户通常很忙,可能不愿花时间与你交流,但这通常问题较小,因为大多数人都希望自己的意见能在产品新版本中得到体现。

那么,设计中需要考虑用户的哪些方面呢?显然包括:

  • 经验水平:如果是针对特定工作领域的产品,他们在该领域的专业水平如何?
  • 教育水平和年龄
  • 使用习惯:他们主要使用Mac还是iPhone?熟悉电子表格或文字处理器吗?你可能希望根据用户的典型使用习惯来融入一些交互技术。
  • 学习意愿:用户愿意花多少时间接受培训?例如,专业摄影师愿意花大量时间学习新相机功能,而iPhone相机用户则不愿花太多时间学习新功能,新功能必须非常直观或自动运行。
  • 硬件环境:大多数笔记本电脑屏幕分辨率是多少?在iPhone上有几种像素尺寸?在Android手机上,实际上有数千种不同的分辨率。必须考虑物理按钮、固定菜单等因素。
  • 社交使用环境:用户通常是独自使用还是在群体中使用?例如,在教室或拥挤房间中使用的系统发出蜂鸣声可能不合适,但在商场信息亭中可能没问题。

关于了解用户这个概念,最早的文章之一就指出,仅仅识别目标群体或刻板描述典型用户是不够的,需要更详细地理解他们的个体需求,了解他们当前活动成功的障碍是什么。这就是我们教授情境访谈法的原因,它是获取这些需求最成功的方法之一。

人物角色

有一种方法叫做“人物角色”。有多少人听说过?这是一种成熟的、用于呈现你对用户了解的信息的方法。

它由艾伦·库珀推广,他是微软早期的设计师之一,也是Visual Basic的开发者之一。多年来,他经营着自己的咨询公司Cooper Design。但这项技术的应用范围更广,在整个行业都有使用,是跟踪产品目标用户的好方法。

一个人物角色是一类用户的“原型”,它是一种概括,不代表某个具体的人,而是代表一类用户。但它不是以概括的形式呈现,而是以一个具体人物的形式呈现。

其理念是,选取目标受众的一部分,为这个群体创造一个典型或原型人物。通常,在进行情境访谈后创建人物角色,或者,如果你对目标群体有充分了解,也可以提前创建,然后通过情境访谈技术更详细地了解他们。你也可以利用情境访谈来理解不同目标群体之间的差异。

人物角色试图捕捉我们刚才讨论的许多方面:他们的背景、需求、经验水平、对计算机的熟悉程度、态度、与产品相关的技能以及他们希望如何使用产品。

通常,一个产品可能有三到四个人物角色,具体取决于计划针对多少不同的目标受众。如果目标受众非常同质,可能只有一个;也可能有多种。它们的用途是:例如,这个人是Bob,你可能还有Sue和Mary。你给他们起虚构的名字,从图库中选取图片。一个非常好的用途是在设计会议中,当测试时,你可以说“Bob会希望这样做”或“我们知道Mary有这个需求,但这个产品没有满足”。这是让设计团队、开发人员和测试人员就目标用户及其需求和特性保持一致的好方法。

这是一个例子:Bob,52岁,机械师,从业12年,是领域专家,精通汽车。但现在我们引入了这个计算机产品。这里有一些个人细节,试图让他更真实。同样,这不是基于某个具体的人,而是基于这类人群的概括。他见证了公司多年的变化,并尽力适应,但发现新电脑令人生畏。他成为机械师是因为喜欢动手和机械工作,但现在必须使用电脑,所以对此不太满意。他被告知新版本出来后必须更多地使用电脑,他担心自己无法掌握。尽管他是资深员工,却不得不向资浅同事请教如何使用电脑,这让他感到尴尬。他也不想在客户面前使用手册,因为他应该是专家,如果需要查阅资料,会显得不专业。Bob怀疑自己能否应对新的计算机系统。他不介意向孙辈请教如何给海外兄弟发邮件,但在工作中向同事求助则是另一回事。这样,你对这个人及其需求就有了很好的了解。如果你为机械师开发软件,并时刻想着Bob,这将有助于确保软件易于使用。

你也可以用它来确定测试用户需要是谁,你会希望找一些像Bob这样的人参与用户研究(领域专家但不一定是计算机专家)。它还能帮助你编写手册和文档,因为必须使用他熟悉的术语。

同样,如果你为机械师开发软件,可能还需要一个20岁的人物角色,代表精通网络但可能对汽车(尤其是旧车)了解较少的人。这就是人物角色,它是一个可以牢记并用于设计的绝佳技术。

任务分析

另一种分析叫做“任务分析”。我们在情境访谈中略有提及,但其核心理念是理解你的应用程序需要支持哪些任务非常重要。

几乎任何应用程序都需要支持许多不同的任务。我们在作业中反复要求大家写下要用户执行的任务,但这些可能只是你要测试的任务,而应用程序实际需要支持的任务可能多得多。

以亚马逊购物应用为例,人们需要用亚马逊完成哪些任务?

  1. 搜索:根据已知信息查找特定产品。例如,搜索书籍时,你可能知道确切书名或作者,输入精确短语,系统应准确给出该产品。另一方面,另一个任务可能是了解某个类别下有什么产品,这是不同的任务。输入“烹饪”会得到一长串列表,让你更好地了解可用内容。
  2. 购买:实际购买物品。这涉及许多子任务:提供信用卡信息、填写送货地址等。任务包含子任务,因此称为“分层任务分析”。
  3. 评价:撰写评价或阅读他人评价。
  4. 退货:涉及完全不同的页面流程。
  5. 联系客服:通过聊天或邮件获取客户服务。
  6. 查看订单历史:可能用于报税或再次订购相同商品。
  7. 包裹追踪

即使是像在线书店这样听起来简单的应用,也需要支持一长串任务。把这些都写下来真的很有用。在情境访谈过程中,你可能需要提前识别一些任务,以便观察。有些任务可能通过情境访谈才显现出来,是你未曾想到的。你可以看到人们自己尝试执行这些任务。也许这些不是你为产品设想的任务,但现在很受欢迎,因此你会想要支持。

例如,现在的相机经常用于各种与拍照无关的事情:寻找停车位、识别盘中食物量、扫描二维码等。理解所有这些任务列表非常有用。

问题再次出现:应该在何种详细程度上讨论这些任务?如果你分析一个任务并试图识别其子任务,通常会得到一张巨大的图表,列出产品应支持的所有事项。问题是,你想深入到什么程度?例如,购买任务的子任务是输入信用卡信息,其子任务是输入CVV码,再子任务是验证其为三位数。可以想象这会延伸得很远。一种截断方法是,在用户层面停止你的以用户为中心的任务分析。

理想情况下,以用户为中心的任务分析只告诉你需要做什么,而不涉及如何做。例如,你需要输入信用卡信息,包括有效期和CVV码,但不说明字段如何设计。这使得它与系统功能描述截然不同。用户必须输入或理解的特定信息可以通过多种方式呈现,任务分析的目标不是约束用户界面。

一个关于任务分析的有趣例子:我曾为一家制造不同断电源系统的公司提供咨询。他们最近从旧的旋钮和表盘界面升级到新的图形用户界面,但客户非常不满。结果发现,他们是按“功能”来设计屏幕的:一个屏幕显示电池状态,另一个显示市电质量,另一个显示电池维护时间等。但用户需要执行的“功能”几乎都需要访问10个不同的页面,因为功能通常跨越所有特性。进行例行维护时,需要检查每个系统的状态,因此必须浏览所有屏幕。发生实际停电时,需要切换到电池模式并启动发电机,这些又分布在不同的屏幕上。通过基于功能而非任务进行设计,他们使得每个操作效率极低。我们一起基于功能(即所需执行的任务)重新设计了界面。由于他们进行过研究,并且手册中写明了步骤,技术文档编写者和工程师都知道步骤,但屏幕设计师忽略了这些,采用了不同的方式。通过理解任务,将屏幕设计为支持用户实际需要执行的任务,会让每个人都更满意。

任务分析的关键部分是理解目标(用户试图完成什么)以及帮助他们实现目标的信息需求。用户需要知道什么才能高效地完成此任务?例如,查看电池状态时需要知道电池状态;用相机拍照时,可能想知道照片效果、光圈或快门速度(尤其是专业人士),这能判断照片是否会模糊。另一方面,用户需要输入什么?用户需要点击或输入什么来实现特定任务?尝试为每个任务理解这两部分信息,能让你很好地了解屏幕上应该有什么。如果你能在同一屏幕上呈现所有他们需要知道的信息,并让他们输入所有需要提供的信息,那么这个任务将非常高效。如果他们需要去很多不同的地方或搜索信息,那么这个任务就会困难得多。

场景与功能分析

如何表示任务?一种方式是使用层次结构进行描述;另一种方式是编写所谓的“场景”。我们之前讨论过故事板,在作业中提供的任务脚本也类似于编写场景,但有更形式化的呈现方式,将任务描述为故事。软件工程中有与之非常接近的“用例”。

它基本上是用户可能如何使用你系统的具体例子。如果需要,可以将其与人物角色联系起来。通常,一个场景会涉及用户界面的多个不同方面,应在较高层次描述。同样,你可以使用这些场景在内部讨论和评估你的具体设计:完成这个场景需要多少次点击?需要多少个屏幕?

确保你的场景不仅仅是完成任务的最佳方式,这一点通常非常重要。典型的使用方式可能涉及很多错误或重复操作。因此,你的场景应考虑这些因素:典型的错误案例或人们常犯的错误是什么?你可以从先前版本的日志或情境访谈中了解,期望人们如何从错误中恢复,理解人们在失败几次后如何实际成功完成任务。

另一种分析是“功能分析”,几乎所有公司都非常擅长。这基本上是一个功能列表。市场部门喜欢提供功能列表,客户喜欢为下一个版本提供功能需求列表。因此,大多数公司在制定功能需求方面没有问题。如果你有与他人签订的生产某些软件的合同,合同中可能就有功能列表。

这里有一些技巧:一是再次以用户任务、用户活动的术语来描述,而不是以按钮或特定用户界面的术语来描述。例如,不说“这个按钮应有此行为”,而说“我们需要使用户能够完成此任务”。理想情况下,不要将功能分析建立在当前用户界面上,因为那显然会限制你改进它。

功能分析和市场营销的一个普遍问题是所谓的“软件膨胀”:每个新版本都必须有更多功能,几乎从不允许删除旧功能。你在我们使用过的每个产品中都见过这种情况:iPhone过去是点击,现在有点击、长按、重按(3D Touch)、左右滑动(过去只是上下滚动)等。有各种需要学习的新行为。因此,新手现在使用iPhone与10年前刚推出时相比,学习体验完全不同。

问题是,作为设计团队或产品经理,你如何知道这些功能需求中哪些最重要?如何区分真实需求与仅仅因为可能更容易销售而想出来的东西?这就是我们讨论的所有HCI技术的用武之地:试图更好地把握哪些需求最重要、哪些更易用。

以上都属于了解用户及其任务和需求的一般范畴。显然这是一个关键重点,但你可能还想了解其他方面,包括竞争分析。我们进行的情境访谈都是针对竞争对手。如果你计划创建自己的产品,世界上可能已有其他人拥有类似或竞争性的产品。需要理解竞争对手在可用性、功能特性、术语等方面的状况。

目标设定

我们之前稍微讨论过目标设定。对于产品来说,理解目标非常重要,尤其是在谈论可用性工程时,需要有实际的数字:这个产品版本的目标是什么?作为管理者,这是最难把握的事情之一。你总是可以花更多时间添加功能、调试以使功能更好用,或者改进可用性。问题是如何权衡?理解哪些对这个产品版本最重要?一种方法是尝试使用更数值化或客观的标准。

对于可用性,你可以像跟踪bug数量或功能需求数量一样,设定一些目标。例如,人们常说新版本必须“用户友好”或“易于使用”,但你如何量化?如何知道是否实现了用户友好?你可以说经理喜欢,所以足够好;或者沿用旧方式,保持一致性;或者模仿他人的做法;最糟糕的标准可能是选择最容易实现的,因为结果往往证明,最容易实现的通常最难用。

我们在之前的讲座中讨论过更好的目标。有哪些可衡量的可用性属性?

  • 学习时间:学习执行特定操作或任务需要多长时间。
  • 错误率
  • 专家效率:在特定时间内完成的任务数量,或专家完成任务所需的时间。

这些是关键指标。还有更具体的表述方式,例如“可在两分钟内学会”、“用户每会话执行少于两次错误购买”、“错误率低于每10次操作两次”等。这些都是量化目标、可判断是否达标的例子。

你可以针对竞争对手或旧版本设定目标。另一个指标是“满意度”,可以通过某种标准化调查来衡量。如果在前后或新旧版本中使用相同的调查,可以判断人们是否更满意。目标是拥有明确、具体、可衡量的指标,以便判断是否达成。

以下是我们刚讨论的列表。还有来自网络分析的其他指标,如点击率、成功率、错误率、放弃率等。越来越多的应用程序可以记录日志,以便从常规应用程序获取与网络应用程序相同的信息。即使是游戏,也可以记录这些数据。许多免费iPhone游戏之所以免费,是因为你授予了它们记录数据的权限,部分记录用于广告,但也可用于改进用户界面和功能集。然后,你可以通过我们之前讨论过的标准问卷进行主观满意度调查。

就像任何其他管理一样,不可能同时优化所有方面。作为管理者,必须努力理解这个产品版本的具体目标:客户在抱怨什么?你希望以什么闻名?是希望成为最易用的产品,还是功能最全、价格最优、或拥有某种特定机制的产品?所有这些不一定是每个版本的关键要求。你可能有一个基线,例如当前每会话3个错误或每操作1.3个错误,你只想确保在添加新功能时不使其恶化。通常,一个版本可能不添加任何新功能,只是改进旧功能。这些都是可选的考虑。

影响分析与参与式设计

另一种分析称为“影响分析”或“财务影响分析”,也称为投资回报率分析。问题是:如果我们在用户界面工作上投入一些资金,回报会是什么?能节省多少?有方法可以得出实际数字。如果你能让某项任务更快完成,节省时间,就可以计算出用户的平均时间成本,并乘以用户数量。如果这是公司内部使用的内网产品,那么用户浪费在任务上的每一分钟,都是本可用于其他生产性工作的时间,因此很容易得出这类数字。

我曾咨询过一家公司,他们专注于降低产品的零件成本,因此选择了非常廉价的硬件。结果,由于使用廉价硬件,他们需要花费更多的工程时间来编程以实现良好性能。他们没有计算的是,只有几千用户会支付更少的费用,而每单位成本乘以计划销售的2000个单位,与工程投入相比完全不成比例。由于公司组织不善,零件成本由一个部门承担,工程成本由另一个部门承担,他们没有动力降低整体产品成本,因此浪费了大量工程精力来处理这个他们决定使用的荒谬零件。因此,采取更系统的、全局的视角,理解所有相关人员的参与、他们的每分钟成本、特定操作或用户界面的时间成本、错误成本(如果错误持续在数据库中或导致用户拨打技术支持电话,成本很高)非常重要。你可以用这些数字来激励为什么在可用性上投入更多资金更有效。关于这个话题实际上有整本书的案例研究。

下一步是“参与式设计”,我们之前略有提及。这个想法是让用户群体参与设计工作本身。我们一再强调,用户不一定是好的设计师。如果你给他们一张白纸,他们通常无法为你设计出出色的界面。但另一方面,用户通常很擅长对你展示的界面做出反应。希望你们通过纸面原型发现,如果你说“这是我认为对你有帮助的想法,你觉得怎么样?如何改进?这与你真正想完成的任务匹配度如何?”,人们通常非常擅长回答这类问题。他们可以使用你的原型尝试自己的任务,看看是否有效或如何使其更有效。

你可以在整个过程中进行参与式设计:从情境访谈开始,也可以像我们做的那样用纸面原型进行,也可以用现在正在评估的可点击原型进行用户评估(我曾有一个作业要求用可点击原型评估用户,但大家都抱怨这与已做的重复,所以我们取消了)。但在现实生活中,你会将可点击原型展示给用户,还会有软件的早期版本、Alpha版本,都可以展示给用户。因此,你应该在整个过程中进行这种迭代测试。

一致性与迭代设计

一致性是我们讨论过的启发式原则之一,有些人认为它是最重要的启发式原则。如果获得良好的一致性,大多数其他属性会自动随之而来。

它在这里被单独提出,是因为它需要一些规划工作。大多数其他设计方面可以由个人完成,例如个人可以选择好的颜色。但为了确保产品中颜色一致,你必须提前规划,必须有样式指南或CSS文件,以确保设计团队中的每个人就如何做事达成一致。

我曾咨询过一个非常奇怪的产品,它是一个非常大的产品,他们将每个功能分配给不同的实施小组。结果,不同功能的工作方式存在最奇怪的差异:有些是先选择再执行操作,有些是先选择操作再选择对象,有时用边界框选择,有时直接点击对象。各个功能之间完全没有一致性,几乎无法使用,因为没人能弄清楚如何做任何特定操作,它们的工作方式都不同。这仅仅是因为没有做任何这类规划工作,只是说“好吧,各组尽力做好这个功能、那个功能”。他们没有考虑到这些小组会做出完全不一致的设计,这是一个非常奇怪的疏忽。

显然,你需要进行这个迭代过程,并使用指导原则进行评估。希望到目前为止,通过这门课程,大家已经明白,随着经验增加,你会做得更好。希望学完这门课后,每次使用商业产品时,你都会对其糟糕的用户界面感到恼火,并意识到这不是你的错,而是某个设计师懒惰,没有投入资金或努力来改进用户界面。随着经验增加,你不仅能识别问题,还能识别明显的解决方案:更好的标签、更清晰的任务组织、更以用户为中心地关注每个单独操作和整个任务等。因此,让更有经验的人参与设计显然会更有效。

像我们在这门课中所做的那样使用原型,对于获得高质量界面至关重要。显然,我们在这门课中只停留在低保真原型,但在现实生活中,你会使用越来越高的保真度。

我们只做了一点实证测试(大概是作业3),在现实生活中你需要做更多。公司通常习惯于投入测试工作。有故事称,微软第二大软件是什么?考虑到上下文,应该很容易猜到。微软第一大软件是Windows,第二大软件是什么?不是Office。实际上是Windows的测试框架。他们编写了海量软件,有报告称测试人员与开发人员一样多。因此,投入到测试(质量和bug)的精力与资金是巨大的。但你还需要对可用性进行同样的实证测试。记住,如果对人无效,那就完全无效。

因此,你需要在每个阶段都有能力将产品展示给用户,并理解问题所在。进行测试而不修复问题毫无益处。作为管理者,你必须想办法留出时间来修复用户测试揭示的问题。这就是为什么你希望尽早开始,因为在线框图或规范阶段修复问题非常便宜,而在拥有产品的Alpha版本后修复问题往往非常昂贵。

当你发现问题并尝试修复时,存在一些风险:你可能使情况更糟,或者修复了这个问题却使其他问题恶化,因为你可能引入不一致性。因此,跟踪这个过程非常重要,理解你必须反复测试。

我经常看到设计会议中出现这种情况:在一次会议上做出重要决定,一个月后,在另一次会议上,人们考虑推翻原来的决定,于是重新争论一遍。通常是因为团队人员变动,或出现了最初未意识到的新标准,现在大家不记得当初为什么那样决定,于是考虑改变。解决方法是拥有所谓的“设计原理”,记录所有设计决策的原因。

问题在于,任何用户界面都有数百个设计决策,从每个按钮的标签、位置、颜色,到整体架构。技巧是为重要的、难以抉择的决策制定设计原理,并将其保存在易于查找的地方。这通常能节省大量时间,因为以后不必重新讨论,只需查阅设计决策记录,回忆原因即可。

另一种思考方式是:当你在设计会议上争论某个设计决策或方向时,与其争论,不如思考缺少什么信息能直接给出答案。通常,缺少的是某些用户信息:如果我们知道用户是否真的这样做或那样想,或者用户是否希望更好地与此连接。几乎所有这些决策都可以通过客观测量来决定。如果你有能力去询问用户、做一个小测试或调查,通常就无需在设计会议上花费数小时争论某个设计决策。

迭代设计与敏捷开发

这是一个经典的迭代设计螺旋图,最初由Larry Bean于1988年绘制,已经非常古老。其理念是:进行分析、设计、实施,然后评估。评估后会产生一些问题或需要修复的新功能,于是你需要再次循环,进行另一轮分析、设计。离中心越远,产品完成度越高,时间沿着这条线前进,越靠外意味着越接近产品发布。

在可用性工程中,理念是在这个评估阶段拥有我们讨论过的具体数值,这样你就知道何时可以停止评估界面的某一部分并继续前进。

教科书中讨论了并行轨道:一个用户界面团队进行设计,另一个实施团队实际实现功能,并讨论如何在所有团队之间迭代信息。这是组织软件开发过程的一种方式,有助于理解哪个小组应该负责流程的哪个部分。

最后,你将发布产品。正如我提到的,获取关于产品在实地使用情况的实际数据非常有用。显然,通过网络分析可以轻松获得某些信息。还有其他信息来源:技术支持人员(如果允许用户通过电子邮件联系)、网站上的论坛等,都是了解用户遇到困难的好地方。如果你能消除这些问题,用户会更满意,对支持的需求也会减少。有时你可以立即修复,有时必须等到下一个版本。

另一个问题是如何将此流程与敏捷开发结合。也许大家都听说过敏捷开发,这是目前组织软件开发项目非常流行的方法。其理念是取代“瀑布模型”。瀑布模型是一种非常古老的想法,可追溯到计算机诞生初期:先进行分析阶段,完成后进行设计阶段,设计完成后进行实施,实施完成后进行测试,然后交付。这是政府和国防部希望运行许多项目的方式:在分析阶段产生非常详细的规范,交给某家公司实施,公司测试规范,然后交付理论上符合规范的产品,获得报酬。当然,问题在于,正如我们所看到的,规范总是错误的,时间在推进,技术在发展,一年前的原始目标可能不再相关,你对用户有了更多了解,而这里没有测试的空间。因此,瀑布模型对于大多数软件开发项目来说几乎是无望的,尽管在军事和政府合同中仍不罕见。

我们讨论的迭代设计有更紧密的循环,是更小的部分,但我们仍然经历了这些阶段。我们以低保真原型、高保真原型、最终实际实现和交付来讨论过,因此在某种意义上,迭代设计包含这些步骤,但速度更快。而敏捷流程则说这些循环非常微小。这个图试图表明所有这些都在并行进行。

敏捷或极限编程的理念是拥有这些非常短的、通常称为“冲刺”的周期。你尝试完整地完成系统的一小部分,然后完成并交付,再进行下一部分。因此,不是拥有整个系统的规范,而是只取一小部分,在固定时间内完成,然后交付。

当然,问题是这听起来在一致性方面完全是混乱的。如果你独立设计每个部分,一致性从何而来?如何让可用性测试参与进来?因此,敏捷是由软件工程师提出的概念,他们不想实施规范,不想花大量时间编写文档,而是希望将时间用于高效编码和测试。

其关键方面是团队的紧密整合。有人认为敏捷运作良好的关键原因是整个团队在这些小事情上一起工作,每个人都对正在处理的小部分有很好的理解。这实际上归结为沟通:因为每个人紧密合作,出现的问题更少,人们倾向于同地办公以便良好沟通。需要学习新东西的时间非常短,大家一起学习,然后交付。

有时这被称为“Scrum”,即拥有这些小冲刺的方法。这是另一种呈现方式,与传统软件开发相比,它有许多冲刺。

这方面有时被称为“激进同地协作”:不是让每个人分散在世界各地的小隔间里,而是将每个小组放在同一个空间。他们共享一面墙,可以在上面放置设计、用户研究笔记、情境访谈图表、亲和图、软件架构图、用户界面草图等。通过让每个人在一起,促进沟通,确保对工作方式的误解更少。

软件工程师喜欢敏捷的另一点是它不太注重文档。但缺点之一是没有真正的机制来捕获设计原理。因此,管理层需要推动这一点:对于重要的设计决策,需要有人将其记录在某个地方,以便在以后需要重新审视设计或软件部分时可用。

在敏捷中融入可用性

那么,如何将可用性融入其中?这几乎是一个广泛的讨论点。任何手机或网络产品都必须具有非常高、非常好的可用性。因此,几乎所有的公司都认识到这是一个关键要求。关于如何成功地将可用性与开发结合,已经有很多讨论。

以PayPal为例,他们向世界分享了他们的做法,这总是有帮助的。他们说,他们有一个独立的用户体验团队,该团队至少比实施团队提前一个冲刺。他们也围绕这些小功能进行组织,因此用户体验团队尝试在特定功能实施前至少几周进行设计、原型制作和用户测试。这需要提前进行大量规划,因此需要详细的即将到来的日程安排。此外,在他们的设计中,他们会不时停下来,确保整个产品的一致性。他们称之为“愿景冲刺”:停止实施,进行更全面的测试、软件架构和信息架构审查。

设计的另一个方面是将可用性人员放在哪里。有些可用性人员非常擅长颜色选择、图形设计、图标制作等。这类人员你并不需要一直使用。在最终设计阶段,你肯定需要他们。但让这类专家在每个团队中可能是浪费时间。因此,你可能认为将其作为整个公司的中心资源非常有用。如果你在像Google、Microsoft甚至Bloomberg这样拥有许多不同产品的大公司工作,有时将用户体验团队或某些专家放在高层,然后在需要不同帮助时将他们借调到不同项目是有意义的。如果你需要低层次的设计或准备进行用户测试,就引入用户界面团队,他们提供适当的输入,然后去其他项目工作。这样做的优点是用户体验团队可以彼此坐在一起,周围有了解他们工作的人,可以根据他们的用户界面知识和专长以及用户界面的成功来评估他们。他们的经理可以更好地衡量他们的可用性质量。此外,你还可以负担得起拥有非常专业化技能的人员,例如擅长用户测试的人可以一直做用户测试,而擅长图形设计的人可以制作图标和选择颜色等。缺点是他们对产品了解不深,产品团队也不认识这些人。因此,产品团队可能觉得他们做了所有这些伟大的工作,而这些来自公司的烦人的人进来告诉他们一切都搞砸了,必须修改。这类似于你可能发现自己非常努力地设计这些界面,而你的同学现在给你所有这些你不喜欢的反馈。这些人通常被视为“闯入者”而非帮助产品改进的“合作者”。

显然,另一种选择是将用户界面人员放在每个项目组或产品组内部。这样他们能很好地了解产品,更容易进行我们讨论过的以用户为中心的设计,更容易与设计团队的其他成员沟通。当设计过程中出现新问题时(例如,“哦,我们刚刚意识到需要添加一个新按钮,应该叫什么?放在哪里?”),如果设计师就在你身边,你可以直接问他们,而不是作为软件工程师自己编造答案。但问题是,这个人通常必须具备所有用户界面技能:必须是好的设计师、好的用户界面测试员、好的原型师等。而且可能没有足够的工作让这个人全职投入。这是每个公司都必须决定的大问题。如果你有一个大团队,将拥有不止一个可用性人员或不止一个产品,如何组织人员?正如我提到的,这是一个非常热门的领域。大多数公司都在某种程度上采用敏捷,大多数公司现在都有用户界面人员。因此,网上有大量关于此的讨论。我喜欢订阅尼尔森集团的“Alert Box”,每周他们会发送几篇只有一页长的文章,介绍用户界面的新发现。我强烈推荐订阅这个Alert Box,他们最近至少有三篇关于这个话题的文章,还有很多其他内容。

总结与问答

好的。有什么问题吗?这不是一个容易的话题。有同学问,在这种情况下或那种情况下你会怎么做?答案几乎总是:视情况而定。这不是最简单的答案,但这与管理之所以困难的原因之一相符:你必须基于所有这些信息做出有根据的、明智的决策。希望这门课能让你了解一些必须牢记的其他考虑因素。

本节课中,我们一起学习了如何将可用性工程流程整合到项目管理中。我们从了解用户、创建人物角色、进行任务分析开始,讨论了设定可衡量的目标、进行影响分析,以及通过参与式设计让用户参与。我们还探讨了保持一致性、进行迭代设计的重要性,并深入研究了如何在流行的敏捷开发框架中融入可用性工作。最后,我们简要讨论了可用性团队的组织结构。掌握这些流程和考虑因素,将帮助你作为技术管理者,更有效地规划和交付用户友好、成功的产品。

10:网页设计 🖥️

在本节课中,我们将学习网页设计的关键原则和最佳实践。课程内容基于尼尔森诺曼集团的研究,涵盖了导航、内容组织、响应式设计、链接设计、页面内容与可读性等多个方面,旨在帮助初学者理解如何创建用户友好且高效的网站。


课程概述与作业说明

课程已接近尾声。作业五的截止日期是今天,希望大家都已提交。作业六已发布,内容相对直接。助教们希望能在明天中午前收集并分发大家的互评意见。

作业六的核心任务是:根据互评者对你原型提出的评论,填写“黄色列”中的反馈,并据此更新你的设计。以下是处理评论时需要注意的几点:

  • 处理不同意见:审阅者可能并非专家,其建议有时可能不尽合理。如果你不同意某项建议,可以不予采纳,但必须说明理由。例如:“审阅者建议将页面从绿色改为蓝色,但蓝色是我们的主题色,因此不予采纳。” 或者:“审阅者建议更改此处,但这会导致与另一页面不一致。”
  • 处理原型限制:对于评论中提到的“按钮无法点击”或“缺少数据验证”等功能性问题,可以合理地回应:“这将在最终版本中实现,但当前仅为原型阶段,此功能尚未激活。”

作业六设计得相对简单,且分值较低(10分),因为这是最后一周的作业。

关于期末考试,信息已发布在课程网页上。考试将在下周进行两次,学生可根据自己的时间安排选择参加周四上午或周一的场次。

此外,下周三的课程开始时,将预留约5分钟时间供大家填写课程评估。评估分为官方版本和我个人设计的版本。我个人设计的评估更具体,且我每年都会根据大家的反馈对课程进行实质性调整,因此非常希望大家能提供宝贵意见。


网页设计的重要性与现状 🌐

上一节我们介绍了课程收尾的作业与考试安排,本节中我们来看看本节课的核心主题:网页设计。

如今,网站对任何公司或组织都至关重要。然而,研究表明,用户在网站上完成各种任务(如查找营业时间、产品信息或用户手册)的成功率仍然很低,尽管已从22%提升至40%,但仍有很大改进空间。

即使对于电子商务网站,也有大量用户访问是为了进行研究,而非立即购买。因此,网站不仅需要支持购物,更需要帮助用户学习。一个有用且吸引人的网站能提升品牌形象,促使用户在需要购买时再次光顾。

反之,糟糕的网站体验会严重损害品牌。调查显示,如果用户在网站上任务失败或遇到问题(如链接失效、设计不佳、加载缓慢),他们可能会转向竞争对手、不再信任该品牌,甚至不再访问。

对于公司内部网站(内网),情况类似。虽然成功率已大幅提升至75%,但仍有四分之一的员工在使用内部系统(如填写差旅申请、查询政策)时失败,这导致了巨大的生产力损失和时间浪费。有估算表明,仅将网站可用性从“糟糕”提升到“平均水平”,每年就能为公司节省数百万美元。

用户完成网站任务通常需要多个步骤,而每一步都可能流失一部分用户。例如,从首页到最终确认购买,可能只有34%的用户能全程成功。因此,优化每一个页面的体验都至关重要。


核心设计原则:导航与结构 🧭

上一节我们了解了网页设计的重要性,本节中我们来看看网站设计中最核心的原则之一:导航。

由于绝大多数网站都包含多个页面,清晰的导航是基本要求。这包括让用户随时知道“我在哪里”、“我去过哪里”以及“我能去哪里”。

以下是实现良好导航的几种方法:

  • 保持一致的网站结构:所有页面应具有统一的外观和布局,并且始终能轻松返回首页。
  • 利用面包屑导航:显示用户在网站层级结构中的当前位置(例如:首页 > 软件 > 儿童软件),并提供返回上级页面的链接。
  • 高亮当前位置:在主导航菜单中,通过颜色、样式等变化,清晰标示用户当前所在的页面或版块。
  • 慎用链接样式:过去,未访问和已访问的链接会以不同颜色显示,这对用户很有帮助。但现代设计中,链接常常缺乏明确的可视化区分(如下划线),导致用户难以识别哪些是可点击的。设计师需要在美观和可用性之间取得平衡。

网站的信息架构(即内容如何组织)同样关键。研究表明,不同网站在帮助用户查找内容的成功率上差异巨大(从80%到9%)。为了设计出符合用户心智模型的导航,可以采用“卡片分类”等以用户为中心的技术:将网站的所有主题写在卡片上,让目标用户对其进行分类,从而了解他们自然的组织逻辑。

网站结构可以是“宽而浅”(顶层类别多,子层级少)或“窄而深”(顶层类别少,子层级多)。选择哪种取决于产品类型和用户的思考方式,没有绝对答案。

对于产品列表,提供“对比”功能通常很受欢迎。例如,在电商网站中,允许用户并排比较不同产品的规格参数,能极大提升决策效率。

最后,避免在网站上使用“正在建设”的页面。如果某个部分尚未完成,最好暂时隐藏链接,直到其功能完善。


应对多样化的访问环境 📱

上一节我们探讨了导航与结构,本节中我们来看看如何确保网站在各种不同的设备和环境下都能良好工作。

网站设计者无法控制用户使用何种设备、浏览器或屏幕尺寸访问网站。因此,设计必须具备适应性。

响应式设计 是当前的主流解决方案。它意味着网站能自动调整布局以适应不同的屏幕尺寸,而不是为手机、平板、桌面分别设计独立版本。其核心思想是:使用同一套HTML代码,通过CSS媒体查询等技术,根据视口宽度动态调整页面元素的排列方式。

一个简单的例子是:当窗口变窄时,侧边栏从左右布局变为上下布局,或者导航菜单折叠成一个“汉堡包”图标。

除了屏幕尺寸,还需考虑分辨率(每英寸像素数)。高分辨率屏幕(如Retina显示屏)需要更高清的图片资源,而文字大小应使用相对单位(如em, rem),而非固定像素,以确保在不同设备上显示比例合适。

设计时应优先保证垂直滚动,尽量避免出现需要水平滚动才能查看完整内容的情况,这对用户体验非常不友好。

关于图片与文字:避免将重要信息(如会议日期、联系方式)仅以图片形式呈现。这会导致文字无法被选中、复制、搜索引擎索引,也无法被屏幕阅读器识别。正确的做法是:要么使用CSS将文字叠加在图片上,要么在图片下方提供完整的文字说明,并为图片设置包含关键信息的alt属性。

在代码层面,应使用语义化的HTML5标签(如 <header>, <nav>, <section>),并避免使用已废弃的标签(如 <blink>, <font>)。可以使用如 BrowserStack 等工具在多版本、多类型浏览器中测试网站的兼容性。


性能、链接与页面内容 ⚡

上一节我们讨论了如何适应多样化的环境,本节中我们来看看影响用户体验的其他几个关键因素:性能、链接设计和页面内容。

性能是用户对网站的首要抱怨之一。加载缓慢会导致用户认为网站已损坏,并可能重复点击,造成更混乱的局面。一般指导原则是:用户操作后的响应时间应小于1秒;如果超过10秒,用户很可能会放弃。

对于已知会较慢的操作(如生成报告、跳转到大型媒体文件),应提前向用户提示。同时,应确保浏览器“前进”、“后退”操作能快速响应,这通常需要合理设置页面缓存。

优化性能的技巧包括:为图片指定尺寸,以便浏览器提前预留空间;优化表格等HTML元素的加载方式。

链接设计至关重要。任何用户可能想点击的内容都应该是可点击的链接。失效的链接或“应该但不是链接”的文本会严重损害网站和公司的可信度。即使内容重组,也应尽力通过重定向等方式,确保旧链接仍能指向相关的新内容。

链接文本应具有描述性,避免使用“点击这里”。例如,使用“查看课程表”而非“点击这里查看课程表”。这样既能表明可点击性,又突出了关键信息。

此外,应保持URL结构清晰且可“ hack”。例如,如果用户手动删除URL末尾部分,应能跳转到合理的上级目录页面,而不是显示错误。

关于是否在新窗口/标签页打开链接:通常建议在同一窗口打开,以利用浏览器的后退功能。仅当操作会显著改变上下文(如在教学平台中打开外部论文PDF)时,才考虑在新标签页打开。

页面内容与可读性是另一大挑战。研究表明,高达40%的可用性问题源于糟糕的文案:用词不当、句子令人困惑、信息缺失或不准确。

为网页写作需要特定技巧:

  • 便于扫描:用户很少逐字阅读,而是快速扫描。因此,应使用清晰的标题、项目符号列表、高亮关键词和链接。
  • 标题至关重要:将最重要的词放在标题和链接文本的开头。这不仅利于扫描,也便于屏幕阅读器和搜索引擎理解。
  • 保证可读性:使用高对比度的配色(如黑底白字),避免使用全大写字母(阅读速度慢且像在喊叫),并谨慎使用两端对齐的文本(可能导致单词间距不均)。
  • 表单设计:对于电话号码、信用卡号等输入框,应允许用户按习惯格式输入(包括空格或短横线),由后台代码自动清理,而不是强制要求特定格式。
  • 遵守惯例:Logo通常在左上角(从左到右阅读的语言),搜索框在右上角,语言选择在顶部中央。打破这些惯例会降低可用性。

首页是公司最重要的资产之一。它应该清晰地表明公司是做什么的,并提供主要任务(如搜索、预订)的直接入口。一个设计良好的搜索功能能直接提升销售额。

最后,选择一个简洁、易记的 .com 域名至关重要。


总结

本节课我们一起学习了网页设计的核心原则。我们了解了导航与信息架构的重要性,探讨了如何通过响应式设计适应多种设备,强调了性能优化、清晰的链接设计以及高质量、易扫描的页面内容对用户体验的关键影响。记住,一个好的网站需要在美观、功能与可用性之间找到最佳平衡点。

11:国际与移动用户界面

在本节课中,我们将学习两个重要的用户界面设计领域:国际用户界面和移动用户界面。我们将探讨如何设计能够跨越不同文化和语言工作的界面,以及如何为手机和平板电脑等移动设备创建高效、易用的应用。


国际用户界面设计

上一节我们介绍了课程的后勤安排。本节中,我们来看看如何设计适用于不同国家和文化的用户界面,即国际用户界面。这不仅仅是翻译文字,还涉及图标、文化习惯、数字格式等多个方面。

核心概念:国际化与本地化

  • 国际化:指使产品设计能够兼容不同国家、语言和文化的过程。这是一个更广泛的前期设计概念。
  • 本地化:指将产品界面翻译并适配到特定语言或地区的过程。这是国际化后的具体实施步骤。

超越语言翻译的挑战

除了翻译文字,设计国际用户界面时还需考虑以下问题:

  • 图标与文化差异:图标在不同文化中可能有不同含义。例如,美国的蓝色邮箱图标在其他国家可能不被识别为邮箱;某些手势(如“OK”手势)或身体部位(如脚)的图标在某些文化中可能具有冒犯性。
  • 视觉双关语:在英语中有效的视觉双关(例如用“桌子”的图标代表电子表格中的“表格”),在其他语言中可能无效,因为对应的词汇可能不同。
  • 体育与隐喻:基于特定国家体育项目(如棒球、美式足球)的隐喻可能让其他文化背景的用户感到困惑。
  • 任意符号:某些符号(如红十字)在特定国家有特殊含义(如瑞士国旗),不能想当然地用于表示“帮助”。

翻译与术语

直接让双语者翻译界面可能不够专业。界面中的专业术语(如“文件”、“编辑”、“视口”、“画布”)在目标语言中通常有对应的标准译法,必须使用这些标准术语以确保一致性和可理解性。

技术实现问题

  • 字符编码:需要支持各种语言的字符、重音符号和亚洲文字。
  • 排序规则:混合多种语言时,如何确定排序顺序是一个挑战(例如,早期Outlook将所有带重音符号的字母排在英文字母之后)。
  • 缩写与俚语:为避免非母语者困惑,应避免使用缩写(如“MI”代表中间名缩写)和俚语(如“let's go under the hood”)。

文化与习惯差异

以下是设计时需要考虑的一些具体文化差异:

  • 教育年级:不同国家对学校年级的编号方式不同。使用年龄(如“12岁及以上”)比使用年级更明确。
  • 节假日:各国的节假日(如感恩节、独立日、母亲节)日期和庆祝方式不同。
  • 姓名格式:“名”和“姓”的字段设计可能不适用于所有文化。有些文化中姓氏并不唯一(如韩国的金、李、朴),使用电子邮件地址作为唯一标识可能更可靠。
  • 纸张尺寸:美国使用英寸和Letter尺寸,而世界多数地区使用公制和A4等尺寸。
  • 数字与单位
    • 货币:货币符号($、¥、€)和汇率不同。注意美元符号($)被多个国家使用。
    • 数量级:“十亿”(billion)在英美代表不同的数值(10亿 vs 1万亿)。
    • 数字格式:小数点(.)和千位分隔符(,)的使用在不同地区是相反的(例如1,234.56 vs 1.234,56)。
    • 度量衡:服装尺码、重量、尺寸的单位和标准全球各异。
  • 时间与日期
    • 时间格式:12小时制(AM/PM)与24小时制并存。提及时间时必须指明时区。
    • 日期格式月/日/年(美式)、日/月/年(欧式/印度式)、年/月/日(中式/ISO标准)等多种格式并存。应避免使用纯数字的模糊日期(如10/11/12),而使用“October 11”或“11 October”等清晰格式。
  • 电话号码:各国号码位数、分组方式(如XXX-XXX-XXXX vs XX-XX-XX-XX-XX)、国家代码和拨号规则不同。最佳实践是允许用户自由输入,再由程序清理和验证。

本地化的具体实施

本地化不仅仅是翻译文字:

  • 内容调整:不同地区的网站可能突出不同的新闻、服务或功能模块。
  • 布局与长度:翻译后的文本长度可能发生显著变化(如德语通常比英语冗长),需要调整界面布局和元素尺寸以适应。
  • 功能增减:某些语言版本可能需要额外的功能或设置选项(如德语版Word多出的选项卡,或亚洲语言对段落间距的特殊处理)。

提供语言选择的指南

如何让用户找到并切换到他们的语言版本至关重要:

  • 避免使用国旗代表语言:因为多种国家可能使用同一种语言(如英语、西班牙语、葡萄牙语)。国旗应代表国家/地区版本,而非单纯的语言。
  • 使用目标语言书写语言名称:例如,供中国用户切换至英文的链接,应用中文写上“英语”或“English”,而不是用英文写“English”。这样,不懂英文的用户也能找到切换选项。
  • 确保翻译完整性:如果链接指向的页面没有对应语言的翻译,应明确标示,否则会令用户感到沮丧。
  • 字体与图片:对于语言名称本身,如果用户系统可能没有该语言的字体,使用该语言文字的图片比依赖字体更可靠。
  • 域名:使用国家代码顶级域(如 .cn, .de, .fr)通常意味着该网站使用当地语言。

电子商务的考量

如果你的网站涉及在线销售:

  • 全球地址支持:地址表单必须能处理全球各种格式的地址,包括不同的邮政编码格式和省/州字段(有些国家没有这个层级)。
  • 法律与税务:需要考虑销售税、增值税、进口关税等。
  • 货币与支付:虽然信用卡公司会处理货币兑换,但价格显示仍需清晰。

实现技术

  • Web:可以通过HTTP请求中的区域信息、URL参数或用户登录后的偏好设置来提供不同语言版本。更现代的方法是采用响应式设计,根据设备区域动态调整内容。
  • 桌面应用:通常使用资源文件将代码与界面文本分离。所有字符串、标签、错误信息都存储在资源文件中,通过ID引用。这使得为不同语言创建版本变得容易,但构造动态消息(如“无法复制文件A到目录B”)会更复杂,因为词序在不同语言中可能不同。
  • 系统库支持:操作系统(如Windows、macOS)提供本地化API,可以自动处理日期、数字、货币符号的格式化,但实时汇率转换仍需自行处理。

用户测试

至关重要的一点是:必须在目标语言和文化中进行用户测试。仅在美国完成用户测试和迭代后,直接翻译并发布的产品,很可能在其他地区出现严重的可用性问题。测试需要由熟悉目标语言和文化的可用性专家或真实用户来完成。


移动用户界面设计

上一节我们探讨了跨越文化的界面设计。本节中,我们转向另一个至关重要的领域:为手机和平板电脑等移动设备设计用户界面。移动设备的使用场景和约束与桌面电脑截然不同。

移动优先的时代

如今,移动设备用户数量已远超传统PC。设计时应秉持 “移动优先” 的理念:首先为小屏幕设计核心体验,确保最重要的内容和功能易于访问,然后再扩展到桌面版本。这有助于聚焦产品的核心价值。

移动设备的独特使用场景

与桌面电脑相比,移动设备的使用有以下关键区别:

  • 短暂、频繁、可中断的交互:用户通常在碎片化时间快速完成任务,并可能随时被来电或其他通知打断。应用绝不能“锁定”设备。
  • 公开环境使用:移动设备常在公共场所使用,对隐私和快速操作有更高要求。
  • 高度个性化与时尚性:手机被视为个人配饰,设计感和美观度非常重要。
  • 输入方式受限:触摸屏输入不如物理键盘精确和高效,应尽量减少文本输入需求。

移动设计原则与常见错误

  • 避免直接移植桌面设计:将桌面网站的复杂导航和大量装饰元素直接搬到手机上,会挤占宝贵的屏幕空间,导致用户体验糟糕。
  • 遵循平台规范:iOS和Android有各自的设计指南。此外,安卓设备还存在屏幕尺寸和分辨率碎片化的严峻挑战,设计需要能够适应各种尺寸。
  • 为常见任务优化:分析用户最常执行的任务,并使其操作路径尽可能短。例如,早期Palm Pilot日历中,“添加事件”只需两次点击,而“删除事件”则需要多步操作,这基于“添加远比删除频繁”的用户行为分析。这有时意味着需要牺牲一致性来换取效率
  • 目标尺寸要足够大:触摸目标(如按钮)应足够大(通常建议至少9x9毫米),以方便手指准确点击。早期Windows CE为了塞入更多内容而缩小目标尺寸,导致了糟糕的可用性。

响应式设计

响应式设计 是当前的主流方法,它使用灵活的网格布局、弹性图片和CSS媒体查询,使同一个网站能自动适应不同屏幕尺寸的设备,而不是为手机和桌面分别开发独立版本。

核心代码示例(CSS媒体查询)

/* 当屏幕宽度小于600像素时(通常是手机) */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .navigation-menu {
    display: none; /* 隐藏复杂导航,用汉堡菜单代替 */
  }
}

![](https://github.com/OpenDocCN/cs-notes-pt2-zh/raw/master/docs/cmu-08763-hci-intro/img/ce81a1358861f58aa8a1f80c12718f15_35.png)

/* 当屏幕宽度大于600像素时(通常是平板或桌面) */
@media screen and (min-width: 601px) {
  body {
    font-size: 16px;
  }
  .navigation-menu {
    display: block; /* 显示完整导航 */
  }
}

注意:响应式设计不是简单地将手机版界面(如隐藏所有导航的“汉堡菜单”布局)直接用在桌面大屏幕上,而是为每种屏幕尺寸都提供最优的布局。

手势交互的利与弊

移动设备支持丰富的手势操作(如点击、长按、滑动、重压),这为专家用户提供了快捷操作方式。

然而,手势也存在问题

  • 缺乏可发现性:用户无法通过观察界面知道哪些手势可用。
  • 学习成本高:需要记忆大量手势及其对应操作。
  • 容易误操作:不同手势(如轻扫与长按、重压与长按)之间容易混淆。
  • 存在可访问性问题:对于手指粗大、行动不便或有视觉障碍的用户可能不友好。手指还会遮挡操作区域。

美学与可用性的平衡

近年来,有一种趋势是过度追求视觉上的简约和美观,而牺牲了可用性原则,例如:

  • 移除必要的视觉线索和反馈。
  • 使用难以点击的微小触控目标。
  • 为了外观牺牲产品的易握性和防滑性。
    优秀的移动设计必须在美学吸引力功能可用性之间找到平衡点。

总结

本节课中我们一起学习了两个专项界面设计领域。
首先,在国际用户界面部分,我们了解到设计全球性产品远不止翻译文字,必须深入考虑图标、文化隐喻、数字日期格式、法律法规等全方位差异,并在目标市场进行本地化用户测试。
其次,在移动用户界面部分,我们认识到移动设备的使用场景、输入方式和设计原则与桌面电脑有本质不同,“移动优先”和“响应式设计”是重要的现代设计理念,同时需要警惕过度复杂的手势和牺牲可用性换取美观的倾向。
掌握这些特定领域的设计指南,将帮助你创建出更包容、更易用、更适应现代技术环境的优秀产品。

12:Maya Design 的实践案例与设计方法 🎯

在本节课中,我们将跟随 Maya Design 的首席人类科学家 David Bishop,了解一家顶尖设计咨询公司如何将人机交互原则应用于真实世界的复杂产品中,并学习他们用于“驯服复杂性”的核心方法。

课程概述 📋

本次讲座将介绍 Maya Design 公司如何通过跨学科合作、信息架构和迭代式设计流程,将复杂的产品变得易于使用。我们将通过多个实际案例,展示人机交互原则如何显著改善产品,并学习一套实用的设计工具箱。


引言:驯服复杂性 🦁

今天,我很高兴向大家介绍我们的客座讲师 David Bishop。他几乎每年都会为这门课程做讲座,并且总是非常受欢迎。事实证明,我们教授的许多技术在实际世界中确实非常有用。David 讲座的一大亮点在于,他拥有大量案例,展示了人机交互原则如何显著改善产品。

David 在卡内基梅隆大学也参与了许多其他活动。他是我们硕士课程的兼职教授。他不仅与这个班级合作,而且他关于行业实际运作的知识对我们非常有帮助。如果你有一家本地公司,并且需要用户界面方面的帮助,我强烈推荐你联系他。

我叫 Dave Bishop,是 Maya Design 的首席人类科学家。我们公司位于市中心的四门中心大厦 16 楼,已有约 25 年历史。我通常会向潜在客户介绍我们存在的理由,解释我们如何工作。我会谈谈 Maya 作为一家咨询公司的特点、我们使用的一些技术,并穿插一些案例研究,展示我们如何在实践中运用这些方法。

我们向人们指出,计算能力和复杂性的成本已经下降。根据不同的统计口径,我们现在制造的微处理器(或晶体管)数量可能比地球上的米粒还多,而且成本更低。回到 1900 年代,在匹兹堡,获取书籍的主要途径是去卡内基图书馆,书籍是奢侈品,并非人人拥有。而现在,我们可以在线购买书籍,有古腾堡计划,可以购买 Kindle 电子书,有时只需 99 美分,并通过无处不在的网络无线传输。因此,物质成本已经下降。

但另一方面,信息量却在急剧增加。根据不同的说法,我们每天创造的信息量相当于两个国会图书馆,或者 Facebook 每天创造的信息量相当于两个国会图书馆。关键在于,我们生成和创造的信息量是巨大的。

这就留下了一个鸿沟,因为人类并没有真正进化。我的脑力、记忆能力可能和我父亲、祖父、曾祖父一样,其进化速度远远赶不上其他事物的变化速度。因此,我们说我们的业务是“驯服复杂性”。这些系统的能力、创造复杂性的可能性、世界上的信息量都在飞速增长,而我们理解、利用这些信息的能力却与 1900 年代大致相同。

我们说“驯服复杂性”的原因之一是,我们的工作不是把一个复杂的产品变成不复杂的产品。我们的工作是,以某种方式驯服这种复杂性。我们将展示如何做到这一点,即处理那些因功能蔓延、可用性问题、复杂性问题或存在于复杂数据空间而产生问题的产品,并尝试驯服其中的一些复杂性。


跨学科设计实践 🤝

良好的人本设计实践的一个原则是以跨学科的方式进行工作。Maya 从创立之初就是基于此建立的。三位创始人分别是一位计算机科学家、一位认知心理学家(基本上是人文科学家)和一位设计师(工业设计师)。即使到今天,我们仍然由这些学科的人员构成。

工程人员知道事物如何运作,不仅仅是计算机科学,还包括如何构建系统、建立数据库、通过网络传输数据,他们了解什么是技术上可行的。人文科学家了解人们的思维方式,我们拥有人类学、民族志学、可用性专家和认知心理学等领域的人才。视觉设计师、工业设计师和那些赋予事物形式和功能领域的人员也与我们紧密合作。

Maya 处于这些学科的中心。我们投入大量精力确保公司的一切工作都以跨学科的方式进行。在 Maya,你找不到这三个独立的部门,它们分散在我们整个组织中。任何一个小团队里,你都能找到来自这些不同学科的人。


信息架构的核心作用 🏗️

Brad 让我谈谈信息架构。我想展示这张幻灯片,并通过一些案例研究来解释为什么 Maya 经常谈论信息架构,以及为什么我们认为它对驱动良好的用户界面设计至关重要。

在这里是某个系统的核心,这是数据库、网络,或者可能是一个物理系统(我们这里用齿轮表示)。这是更纯粹的工程部分,即系统架构,它是系统中非常重要的一部分。如果没有工程师或构建系统的专业知识,你将一无所有。

在这一端是所有面向最终用户的部分。有人必须与这个系统交互。我听过无数术语:用户界面、UI、用户体验、人机界面。当有人构建物理产品时,例如一个阀门或现场设备,他们会说它需要一个控制面板,并称之为 HMI。我不太在意术语,但关键是这部分面向用户,而用户通常看不到后端部分,但如果没有它,产品就不存在。

在这两者之间,有一个很多人不常想到但非常重要的领域,那就是信息架构的概念。以亚马逊为例,所有后端是如何在全球范围内发送信息、使用内容分发网络、快速存储书籍和评论数据库、实现购物车和支付功能的。后端很重要,数据库必须有某种组织结构,很多与速度、健壮性等有关。

在用户界面端,显然也必须运作良好,因为如果人们找不到他们想购买、租赁、转移到 Kindle 或退货的书籍、电影等,亚马逊就无法赚钱。他们必须优化前端的一切。但他们是如何做到的呢?

想想亚马逊,必须有人坐下来想出一种存储方式(我不是指数据库,而是指如何组织信息)。你必须意识到有书籍,书籍由作者撰写,所以一旦我进入《白鲸记》,我可以点击赫尔曼·梅尔维尔,发现他写了很多书。但这更深层,因为他们必须驯服这个世界的复杂性:书籍有多个版本。必须有人坐下来思考:这本书有多个版本,对吧?有人写了这本书,10年后更新了,称为第二版。又过了10年,再次更新,称为第三版。如果有人评论一本书,评论是针对书本身还是针对某个版本?必须有人思考并解决这个问题。你必须告诉后端的工程师你希望它如何工作。

我是评论了书还是书的某个版本?这样当我查看第三版时,评论会自动消失吗?为什么?因为我把评论放在了特定版本上。另一方面,如果我把所有评论都放在书上,那么我可能在看一条评论,评论是针对第一版的,说它很糟糕,而这本书实际上已经改进了,我正看着第三版,但因为那条很旧的评论而不购买它。这些都是你必须思考的问题。

你可以想象这将如何影响用户界面。现在我必须向人们展示这是针对哪个版本,我必须理清复杂性,决定如何去做。再以亚马逊为例,如果有人评论一本书,他们是在评论书的内容(例如,“《白鲸记》真是个糟糕的故事,最后所有人都死了,包括鲸鱼”),还是在说“《白鲸记》这本书真糟糕,装订闻起来像胶水”?现在你意识到它有平装本、精装本和有声书,你也必须理清这些东西。

后端的工程师会以某种方式实现,他们会把评论放在数据库的某个地方,并指向某个版本、书籍或装订方式。你必须以某种方式向用户展示。但老实说,正是在信息架构这个领域,你会思考这些问题。一旦你理清了一些结构,它真的会帮助你设计用户界面,并帮助你与工程师沟通如何实现。

在很多情况下,这才是真正重要的。信息架构经常体现在搜索功能上。想想在网站上搜索,如果搜索效果很差,你找不到想要的东西,这可能意味着他们有一个包含所有产品、书籍、评论、文章等的数据库。你输入一个搜索词,他们基本上会查看所有内容,并返回数据库中包含该搜索词的所有条目。

然后你想,好吧,那可能有很多东西。我该如何呈现给人们?显而易见的做法是查看搜索词在该文档中出现的比例,因为如果出现很多次,那么它可能与该搜索词非常相关,我会把它放在顶部。但如果文档很短,它也会排到前面,这并不能帮助你更好地筛选。

另一方面,想想你在 Land‘s End 的体验。在 Land’s End,你可以输入“睡衣”。在信息架构和系统架构之间的某个地方,有人足够聪明地说:“你知道,我们在 Land‘s End 卖很多东西。我们的每个产品都有很多不同的属性:有些是男式,有些是女式,有些是儿童款,有些不是;有些有尺码,有些是均码;有些是棉质的,有些不是;有些是当季的,有些是过季的;有些穿在上半身,有些穿在下半身。”

因此,当你在 Land‘s End 输入“睡衣”时,他们能够意识到这是一个非常模糊的搜索词,但他们非常想卖给你一件睡衣,因为他们认为你想买一件睡衣,而你也认为你想买一件睡衣。他们需要引导你如何筛选和缩小范围。所以他们会说:“睡衣,我们有一百万件睡衣。你应该试试这个。”看看他们是怎么做的:他们会问“你是想要男式、女式还是儿童款?”因为他们基本上理解了信息架构。

他们不会只是吐出所有睡衣,而是会问:“你想只看打折的吗?还是想看棉质的?你在找什么尺码的睡衣?可能在找什么季节的?”他们可以理清这类问题。他们还可以根据你所在的国家/地区,判断如果你在南方,可能不需要法兰绒睡衣;如果你在北方,可能只想看法兰绒睡衣。关键在于,这种对信息空间的思考是必须的,这样才能让数据库或后端正确,也让前端的用户界面更有意义,而不是仅仅吐出“哦,我们有 10000 种睡衣”。


客户与跨领域学习 🌐

我这里有一张幻灯片,简要介绍了一些我们合作的客户。可以说,我们在许多不同的行业有许多不同的客户。从我作为咨询机构一员的角度来看,这可能是最精彩、最有趣的事情之一:我们在所有这些不同的领域工作。例如,Target 会打电话给我们,要求我们基于一些研究创建用户画像,而不涉及用户界面设计工作;后来,Dun & Bradstreet 会打电话给我们,说他们确切知道用户是谁,希望我们帮助他们建立一个用于查找公司并了解其付款情况的下一代网站。

对我来说,这种多样性(也许并不适合所有人)确实让每天上班都很有趣,同时也允许我们把从这里学到的东西应用到另一个客户那里,把从那里学到的东西应用到另一个客户那里。这是很多公司通常做不到的。很多公司只专注于自己的小领域,他们可能知道竞争对手在做什么,但他们非常不擅长跨领域借鉴,比如思考“华特迪士尼公司会怎么做?”、“哈雷戴维森会怎么做?”或者“银行会怎么做?”即使我们不是银行,或者我们就是银行,当我在寻找各种信用卡时,Land‘s End 帮我找到睡衣的方式,是否适用于我在银行从一大堆信用卡中找到适合我的那一张呢?在很多情况下,答案是肯定的。这可能是我们作为咨询公司的超能力之一:我们能够从其他领域引入经验。

欢迎你们来 Maya 参观。我们特意设计了我们的空间,以促进跨学科设计、持续协作,并邀请客户进来与我们、与白板一起工作。它看起来不像一个格子间农场,这是有意为之的。我认为这当然有助于工作。作为顾问,我们做了很多工作,成果会贴在墙上。我们不断购买数码相机,拍摄越来越多的照片。很多工作都是以非常物理的形式完成的。是的,我们的便利贴预算可能相当大。但关键在于,重要的不是这种技术比那种技术更好,而是要以正确的方式思考问题。这远比关心你使用这个还是那个后端数据库引擎更重要。


设计的本质:一段旅程 🧭

思考一下这个。这是我们对设计的定义之一。我们不断尝试与商业客户做的一件事是,说服他们按照我们的方式做事,但这并不完全准确。我们试图让他们遵循良好的人本设计原则和设计原则,而他们往往不一定知道这些原则是什么。从某种意义上说,这对我们有好处,因为如果你在咨询公司工作,这是工作保障。另一方面,这对我们也有好处,因为它迫使我们不断思考什么是好的实践,并尝试将其融入我们的项目中,我们将在一些案例研究中看到这一点。

但如果你仔细想想,这很有趣。这是一个非常简单的句子,但你有一个起点,即你识别出的问题。是的,很多挑战在于正确识别问题并确保你解决的是正确的问题,我们称之为“问题界定”。然后尝试找到一个解决方案,即构思并形成解决方案。但设计是这段旅程,从问题界定开始,然后尝试跨越这段旅程,到达某种解决方案。

这是我们经常看到人们忘记的重要事情。他们认为设计是一种“嗯,我做了设计”的事情,或者更糟的是,对于人本设计,他们会说“嗯,我让可用性人员参与了,他们设计了它”。不,如果你这么说,那它可能不会好用。设计更是一个持续的过程,一段旅程,一个迭代的过程。我们也会多谈谈这一点。但罗特曼管理学院的 Heather Fraser 说过,这更像是一个健身计划,更像饮食和锻炼,是你必须一直做的事情,而不是一次性的事情。所以,如果有人告诉你“哦,是的,我们做了设计”,我认为你应该问他们更多问题,因为仅从这一句话来看,他们可能并没有真正做好设计。


设计工具箱:观察、分析与构思 🧰

Maya 做的一件事是,我们最终分拆了一家名为 Luma Institute 的公司。因为在很多公司和行业中,除了能够去像 Maya 这样的咨询公司说“你能为我们做这项工作吗?或者你能做研究吗?或者你能编写用户画像吗?或者你能帮助我们进行界面设计吗?”之外,他们还想提升自己的水平,学习设计,特别是人本设计。

我展示这张幻灯片并不是为了说我们建立了另一家做培训的公司,而是想展示我们如何组织一些技术以及我们使用的一些技术。在第一列中,所有方法与观察人类、用户体验和人类行为有关。我们有民族志研究、参与式研究和评估性研究。第二列是关于分析挑战和机会、分析问题空间的所有内容,所有问题界定的东西都在这里,你们会在我们的一些工作中看到一些例子。最后一列是关于我之前谈到的迭代设计,但这里也是所有原型制作、模型、故事板、概念海报等所在的地方。

这里有很多幻灯片,所以我会讲得快一点,否则我们永远讲不完。你可以看到这里大致分为三部分:民族志研究、参与式研究和评估性研究。并不是说你必须在项目中说“哦,我需要一个这个,两个那个”,并从菜单中挑选,但意识到有不同种类的方法确实有助于你理解。

在民族志研究领域,我们做了很多访谈,可以进行“墙上的苍蝇”式观察、“走一英里”沉浸式体验。这是我穿着士兵的装备(不是我的万圣节服装),以便理解穿着那件迷彩夹克、戴着头盔、使用单目镜是什么感觉。当你使用这种东西时,失去深度知觉是什么感觉?你们可能熟悉“情境访谈”这个术语,可能自己也做过一些。我们使用所有这些技术,挑战在于如何知道在特定项目中使用哪一种最合适、最具成本效益、时间上可行、实际上可以招募到参与者。如果我无法为情境访谈招募人员,无法进行工作影子观察,也许我不得不进行“墙上的苍蝇”式观察。这取决于环境以及我如何接触到这些人。

在参与式设计方面,比如“购买功能”游戏,有人听说过这个技术吗?我前阵子找到一本名为《创新游戏》的书,作者是 Luke Hohmann,里面有一整套严肃的游戏,你可以与系统的潜在用户一起玩。在这个“购买功能”游戏中,这是一种让人们告诉你他们想要什么功能的方式,而不是直接问他们“嘿,你想要什么功能?”,因为你可以想象,直接问是一种很糟糕的方式。

我的做法是,发明一大堆功能,真的太多了。然后根据我认为实现这些功能的难度,给每个功能赋予不同的成本。然后我们可以做一个设计练习,我让他们基本上从我这里购买这些功能,并且我故意不给他们足够的资金,他们不能全部买下,所以他们必须做出一些艰难的选择,决定他们可能想要哪些功能,不想要哪些功能。Hohmann 在这本书中描述得很好。所有这些方法都遵循那种范式:我先做一些准备工作,然后与真实用户一起,通过玩游戏等方式与他们共同设计,但并不是真的要求他们来设计,而是通过游戏等方式从他们那里获取信息。

我们也在空间方面做过,所以你可以基本上给他们几种信息可视化和仪表板,但只有一定数量能放得下,所以他们必须舍弃一些。这本质上是一种在约束条件下的强制决策。关键是,如果你不这样做,我认为你刚才谈到的方法也有效。如果你问人们关于功能的问题,每个人都会说他们想要每一个功能。然后你就会出现功能蔓延,人们什么都找不到,然后你有了复杂性,你必须想办法驯服它。所以这是这里的技巧之一。

然后是评估性研究,比如 A/B 测试、可用性测试、启发式评估等。我们几乎使用这里列出的所有方法。我不能说我们在每个项目上都使用每一种方法,但如果你在任何时候走进 Maya,我们有 9 个客户项目在进行,我们有 35 个人,我们可能在任何时候都在使用这些技巧中的一种。这些基本上是我们最常用的 32 或 36 种方法(取决于幻灯片上能放多少)。


理解方法:综合知识与民主化过程 🧠

在理解方法方面,有很多关于综合知识的内容。我们会绘制利益相关者地图,绘制体验图,制作概念图,经常构建用户画像。我们使用亲和图,还有人听说过“可视化投票”这个技巧吗?通常,我们的很多客户会请我们协助某种会议或头脑风暴讨论,很多时候会有概念产生出来,问题就变成了如何评估它们。我们经常在会议中快速使用一种方法,并尽可能使过程民主化。

我们会给每个人几张撕下来的便利贴或几个用于标记法律文件的标签贴,然后说:“好吧,每个人有三张,黑板上有 10 个概念。看一会儿,你们都看过它们的演示了,当我们说‘开始’时,去把你的三票投给你喜欢的概念,可以全投给一个,也可以分散投给三个。”这是一种快速了解房间内氛围的方法。很多时候,如果你与有层级结构的公司合作(大多数公司都有),一旦老板说“嗯,我认为三号是最好的想法”,其他人都会跳出来说“当然,老板,是三号”。这有点夸张,但我们使用的很多技巧都是为了尝试民主化这些过程,让更多人参与进来。

这个可能是我们拥有的最高价值的技巧之一,叫做“玫瑰-花蕾-刺”。我们从童子军那里借鉴来的。关键是,如果你让人们评论系统,只是让他们大声说出来,会发生很多事情,而且可能都很糟糕。

举个例子,一些士兵使用了一个系统几天,然后有人说:“我们想进行一次事后回顾。让我们把所有士兵召集到一个房间,然后问士兵们他们喜欢和不喜欢这个系统的哪些地方。”第一次他们这样做时,效果很糟糕。发生的事情之一是,一个士兵说:“嗯,你知道真的很糟糕的是,在第二天中午左右,我试图做 XYZ,然后我被‘电击’了,那太糟糕了。”另一个人说:“是的,我也遇到了。”又一个说:“是的,我也遇到了。哦,那真的很糟糕。”这里发生了两件事:首先,我们不知道这种情况发生了多少次。是的,可能很糟糕。但你有很多“我也是”、“我也遇到了”之类的附和,他们都集中在一个问题上。现在,很可能那是唯一不好的问题,其他发生的一切都很棒。那很好,我们想知道。也可能有很多其他不好的事情发生,但每个人都跳出来讨论那一个问题,意味着我永远无法发现任何其他问题。

因此,我们用“玫瑰-花蕾-刺”方法做了几件事。我们会把同一群人带到房间最后,说我们要进行一次事后回顾,但方式会有点不同。我们不会让每个人只是大声说出来(顺便说一下,那样做的另一个问题是,很多人只会坐在后面等别人说话,所以我无法从一半的参与者那里得到反馈。如果我让他们参与,却不收集他们的反馈,那有什么意义呢?)。

我们会这样做:我给每个人一叠便利贴。在所有红色的便利贴上,我们称之为“玫瑰”,我希望你写下你能想到的所有好的事情,你有 20 分钟的时间来回顾过去几天使用系统的情况。在蓝色的便利贴上,我希望你写下所有的“刺”,即发生在你身上的所有不好的事情。他们写下“屏幕变空白”、“它关机了”或做了这个做了那个,不管是什么。你有 20 分钟做所有这些。我还希望你思考那些可能不算好也不算坏的事情。我们不会称之为玫瑰,也不会称之为刺,我们称之为“花蕾”。它有潜力成为好的东西,正在变得更好的路上。或者也许它介于两者之间,你无法决定是好是坏,但你认为它值得注意,我们应该写下来。

每个人都可以安静地工作。大约 20 分钟后,如果你有 20 个人,你会得到 400 个玫瑰、花蕾和刺,这比你只是进行一次事后回顾并问“你们觉得怎么样?”得到的反馈要多得多。然后他们说一件坏事,每个人都堆在那一个问题上面,变成了一场关于为什么发生、如何发生、什么时候发生在我身上、有多严重等等的大讨论。这掩盖了所有其他事情,而且我没有得到房间里一半人的贡献。

正如你所想象的,一旦我有了 400 条反馈,我需要另一种技巧,比如亲和图(我想你们熟悉这个)。但关键在于,它民主化了过程,让每个人都参与进来,我听到了好的和坏的事情,我听到的坏事情比只是口头询问要多得多。关于这个技巧最有趣的是,我只是稍微改变了一下,稍微改变了练习方式:我让人们单独工作一段时间,然后基于此引导讨论。因为现在我可以问人们:“有没有人想和房间分享?有没有人想分享一个?还有人有类似的吗?还有人有不同的吗?”现在我某种程度上阻止了“狗堆”问题。

最后,在构思方面,我们做了很多草图绘制。我们做“替代世界”练习,我之前举过例子:“迪士尼会怎么做?”我们构建故事板,构建原型。我不再称它们为“原型”,我通常称它们为“模型”。原因之一是我不想让我的用户界面模型与工程原型混淆。所以我让工程师保留“原型”这个词,他们可能真的要构建后端、一些数据库或一些基础设施,他们真的要设计一些东西。我为自己保留“模型”这个词,比如外观模型,这真的只是另一种模型。我们构建概念海报和视频草图。这是一种尝试展望未来、设想一些概念的方式。

事实上,这里有一个例子,我们模拟了一篇杂志文章。你会说:“嗯,你知道,当这个产品完成时,广告会是什么样子?”很多人很难想象产品完成时的样子,很多人很难想象一个产品或我们正在制作的东西,除了它所有功能的总和之外的样子。强迫某人想出一页广告,意味着我必须想出一个它的“英雄镜头”,我需要给它起个名字,需要一个标语,需要有三四个要点来谈论这个东西的好处。这才是产品的核心。如果你们听说过 MVP(最小可行产品)这个术语,试着提前写好杂志文章或像这样的首页广告(我稍后会展示一些家庭健康监测产品的例子),或者提前写好宣传册。走向未来,尝试这样做,它会迫使你写下产品的核心是什么,并让每个人都达成共识。这就是这里所有技巧的目的。


案例研究:Comcast 用户画像 👥

让我给你们举一个案例研究的例子。Comcast 打电话给我们,他们不一定希望我们做设计工作,或者作为那个项目的一部分做设计工作。所以这是一个客户要求 Maya 作为咨询公司只做项目一部分的例子。我们知道我们将使用这些用户画像来驱动后续的设计工作或营销工作。

我们进行了大约 50 到 100 次访谈,取决于项目规模和我们要做多少。我们做了大量笔记,混合了开放式和针对性问题。我们想办法做亲和图,之后组织信息。我不记得这个项目具体的颜色代码是什么,但能够看到从这些研究中产生多少结构化数据是很好的。

我们使用亲和图等方法来尝试理解其中出现的一些更大概念。亲和图的好处是,它让你在事先不知道结构的情况下组织事物。所以我们不一定知道研究中会出现什么,或者我不一定知道在我的启发式分析、可用性审计或可用性测试中会发现什么样的问题。但我可以使用亲和图让那种结构自然浮现。这是该技巧的最佳用途。

这些是我们构建的一些早期用户画像。给他们起了一些简单的名字。蓝色的便利贴下面有一些关于我们估计他们年龄的细节。我们从真实的访谈中引入数据来开始做这个。我们设置了这种物理板。我们不想做的一件事是用信息淹没自己。所以,这种板大概能放 15 张左右的便利贴。我不能把所有都放上去,但这也会迫使我集中注意力一点,这让我们能更进一步。

那么,我们为什么要这样做呢?有人想猜猜为什么我做了五个看起来都在同一个模板里的用户画像吗?我为什么要这样做?当然,我需要记录他们。但我为什么要像这样把它们布局在一张纸上,说“这是我目前有的五个用户画像”?

是的,这样我就可以相互比较。我可以看两件事:一是这个人很有趣,他只有 10% 的时间看电视。所以作为一个用户画像,这是一个有趣的人。希望我们真的遇到了很多像 Michelle 这样的人,但这与另一个花 65% 时间看电视的人非常不同。所以我想确保我有覆盖范围。这是我做的另一件事:确保我访谈的所有人都有代表性。嘿,我们访谈了很多基本上不看电视的人,我的用户画像中代表他们了吗?嘿,我们访谈了很多年长的人,很多年轻的人。我的用户画像中涵盖了所有年龄段吗?涵盖了所有其他人口统计资料吗?

然后我们可以更深入一点细节。我想这些都有正面和背面。这是 Dana 用户画像的正面,它并没有比另一个说更多内容,实际上说得更少,但这里有大约五个目标。我们有一张 Dana 的代表性图片,以便我们能记住她是谁。我可以看出她有孩子。我还不能判断她是单亲妈妈还是家庭规模有多大。然后我在这里有很多细节,在背面。所以这是屏幕时间,我可以看到她可能访问哪些网站。我们经常制作这种二元地图,说:“你知道,在我们所有的研究中,这方面有两种立场。”Dana 在“个人内容发现”这一边,与……我希望我没有带其他用户画像。但如果我去看其他一些用户画像,会与另一个非常“策划”型的观看者形成对比,他们观看被提供的内容,他们选择自己喜欢的频道,然后那个频道的内容应该是为他们策划的,而不是像这边这个人有非常个性化的体验。

但这有更多细节。你在这里可以看到的另一件事是,Dana 她并不特别,但她与这里的其他人不同。我可以看到,我访谈的每个人都大致沿着这些线分布吗?我可以看到 Dana 与这里的质量中心非常不同,移动访问多得多,在顶部,她基本上在节目播出时看电视,所以她不是那种非常依赖 DVR 的人。


项目检查:评估设计流程的健康状况 🩺

好的,这是一个案例研究。让我稍微跳回去,谈谈我们经常试图帮助客户的一件事,以及我们在做这些项目时一直在思考的一件事。我向你们展示了我们从人本设计课程中拿出的那个大工具箱,向你们展示那个就像把 Maya 拥有的所有技巧都倒在桌子上,说我们使用情境访谈、购买功能游戏、可视化投票、玫瑰-花蕾-刺、情境访谈、墙上的苍蝇观察。但在每个项目上,我并不是使用所有这些。

我如何判断一个项目是否成功?我不能仅仅计算使用了多少工具。哦,嘿,因为那样我就可以只是增加更多工具。“哦,你做了情境访谈,你还应该做可用性测试。你还应该做墙上的苍蝇观察。你还应该,你知道,加入启发式分析。”所以,你知道,如果我想到我家的工具箱,一项工作成功的标志是,你知道,我翻新了那把椅子。标志不是我是否使用了工具箱里的每一件工具。所以你想知道什么时候是使用哪种工具的正确时机,什么时候是错误时机。这是一个好项目吗?不是好项目吗?特别是在人本设计和可用性方面。

因此,我们尝试开发了这个叫做“可用性成熟度模型”的东西,我们可以用它去评估这些项目。结果发现,“成熟度模型”这个词有点太高大上,吓到人了。我们试图称它们为“过程质量评估”,又是太多大词,太多音节。“检查”怎么样?检查,对吧?这行得通。没人真的那么害怕检查。听起来我可能有一点指导的机会。让我做一个项目检查,然后我可以帮助你,这正是这个工具想要做的:帮助你更好地遵循我们所知的一些好人本设计模式。

结果,现在这个数字在变化,我想,有 ISO 标准。直到我开始这个职业生涯,我才知道这个标准:“交互系统的人本设计过程”。有人想猜猜这里面有什么吗?我可能已经暗示过一些了。如果你想想你学过的所有技巧,并且你要去制定一个项目计划,那个项目计划里可能有什么?应该有什么特点?

我是否需要……?好吧,这可能是一个问题,对吧?我的项目计划是否对最终目标有良好的定义?我是否正确界定了问题?那么用户研究呢?你认为我的项目计划中应该还是不应该包含用户研究?是的,是的,对吧。那么我的项目团队构成呢?谁需要在我的项目团队中?我需要它有合适的规模吗?太大?太小?合适的类型是什么?合适的学科,对吧?所以这是另一个。那么项目的性质呢?它应该是这种大型的层级结构,我在顶层有一个项目经理,他们告诉其他所有人该做什么吗?还是说“听着,我要告诉你规范是什么,我希望你们所有做这个工作的人闭嘴,按照我告诉你们的去构建”?我是在给你错误的答案,对吧?不,我可能希望它更具迭代性,对吧?我可能想弄清楚我的 MVP 是什么,然后尝试模拟那个 MVP,然后得到一些反馈,然后再把反馈融入进去。如果你有一个现有产品,也许我慢慢接近它,我开始做一个启发式分析,然后从中,我把反馈融入进去,做一些设计更改,然后在可用性实验室测试它们。

所以这就是内容。在那个标准里,每个好的人本设计项目都应该有。它真的只有三件简单的事情。事实上,它们如此简单,我可以画一张小图。我应该让用户参与。不仅仅是让他们参与,而是让他们参与我设计过程的每一个部分。我需要确保我让他们都参与了,对吧?当我做用户画像时,我和每个人都谈过了吗?我让一个有代表性的横截面参与了吗?我不仅在开始时让他们参与,为了构建用户画像而访谈他们,而且我需要在中间也让他们参与,制作用户界面模型,把东西放在他们面前。我需要在项目接近尾声时也让他们参与。

那么,我是否在整个项目中,让尽可能多的用户,涵盖所有相关角色和经验水平,都参与了?我是否在迭代我的设计?我是否早期构建了一些模型?我是否在制作一个 MVP,然后不断构建,通过迭代的方式获得更好的产品?这与我站在那边时说的正好相反。你知道,“我只是写一个规范,然后按照规范构建”。最后,我是否使用了,首先,正确的学科(正如你在第二行指出的),以及,我是否在进行跨学科设计?把人们隔离在不同的孤岛里,从不互相交流,对我没有帮助。我希望以跨学科的方式进行。


简化评估:10个关键问题 ✅

我们曾一度认为可以使用这个标准,因为它很简洁,看,这是过程评估。我们只要读这个,它就会告诉我们怎么做。结果发现,即使在这个文档里,它也说它非常严格、非常复杂、非常正式。它说“上述评估方法旨在产生可重复的结果,但这种严格程度及相关形式化并不总是合适的。”这对于一个文档告诉你不要使用它来说有点疯狂。

我想他们的意思是,在某些情况下是可以的,但请记住,我们试图做检查,试图理解这个人本设计过程,并试图让我甚至可以在提案交给客户之前查看它,并评估说:“哦,对了,我忘记了一件简单的事情。我没有像可能的那样跨学科,让我稍微重写一下那个提案。”但如果这个标准非常严格和正式,我可能做不到。

我们所做的是挑战自己,想出一个包含 10 个问题的问卷。从你们坐的地方可能很难看清,但我们可以在这里快速评估项目。重要的不是我是否能做到,而是我想告诉你们其中一些问题是什么,因为肯定地回答这些问题,代表着好的人本设计实践。

第一个是“让用户参与”。子问题是:“我是否在整个项目中,让所有培训水平和经验水平的用户都参与了?”下一个是“描述目标”。你们注意到在那个用户画像中,当 Dana 出现时,我们列出了她的几个目标。所以下一个问题是:“好吧,你告诉我用户是谁(或者,你让用户参与了),但我是否以了解他们目标的方式让他们参与了?我能告诉你用户将如何行动吗?我是否足够了解他们,以至于我真的能为他们构建一个交互系统?”下一个非常相似,它说“模拟工作”。我是否知道,如果是亚马逊,人们如何找到书、放入购物车、结账?如果是一个医疗保健公司的后端系统,我是否知道这些人如何输入应该在这个医疗保健计划上的人的名字?所以我是否以一种可以实际使其更可用、为他们工作得更好的方式模拟了他们的工作?

这个说“开发模型”。你是否在整个项目过程中制作了模型?你是否使用这些模型去测试你正在构建的用户界面或用户体验?这个说“定义指标”。我制作了模型,我把它放在了用户面前,但我是否得到了反馈,以便我知道它是否变得更可用?我如何有指标?你知道你可以测量东西,我可以测量人们完成任务需要多长时间,我可以测量他们是否出错,我可以测量每个把东西放入购物车的人,他们是否都能输入信用卡号并实际购买那些东西?他们是否寄到了正确的地址?所以他们是否完成了任务?他们是否以不一定最少但适当数量的点击完成了任务?

这个说“测试可用性”。所以当我们在谈论制作原型时,我谈到了这个,是关于你是否制作了它们。但这更多是关于你用它们做了什么,对吧?我是否把它们放在了用户面前?我是否对它们进行了启发式分析?我是否进行了认知走查?有很多方法可以测试我的模型,但希望我是在把它们放在有代表性的用户(如果不是真实用户)面前。

这个说“设计改进”。所以所有这些都很棒。你应该做所有这些。但如果你不根据所有这些反馈实际去更改你的设计,你就没有前进。所以这是我们检查你是否在进行迭代设计的部分。最后,这个关于你是否有一个跨学科团队:你的项目上是否有许多不同的角色?以及你是否设计了你的项目团队,使他们真的都在一起工作、互相帮助,而不是在孤岛里。

这有道理吗?关于这个的好事是……我以为我有一个填好的例子,但有时我们可以观察一个团队,然后说:“好吧,我看了你的项目或团队,我要给这些东西每一项打一个 1 到 5 的评分。”我们中的几个人会访谈一个团队,他们会说:“是的,我们做了,我们出去做了这个实地研究,我们做了那个情境访谈,我们做了别的事情。我们进行了一次可用性测试。”然后我说:“哇,在让用户参与方面,你们似乎真的很出色。我说,你知道用户试图做什么吗?”他们告诉我,并向我展示用户画像,展示他们现在理解了用户的目标等等。我们进行到这里,我说:“你们在可用性方面测量什么?”他们说:“哦,我们不知道。”或者“我们不知道我们可以测量东西”,或者“我们有一个满意度调查”。然后我说:“是的,但你们测量他们完成任务需要多长时间吗?或者你们测量每个人是否成功吗?”然后他们说:“好吧,所以现在我可以在雷达图上画出这个小图,任何时候你有一个像那样的大凹陷,我可以说你有很多改进空间。”或者我可以看多个项目,说:“你知道,顶部的那些人可能应该和这个项目团队谈谈,因为他们或多或少都做得很好。”现在我可以告诉你应该效仿谁,去找,特别是如果你们都在同一家公司,去找他们的项目计划者,去找他们的项目经理,或者去找那个团队里的某个人。


案例研究:电力仪表设计 ⚡

让我给你们看一个案例研究。希望这将是一个很好的例子。这是我最喜欢的项目之一。我很喜欢展示这个项目,把它作为一个例子。我认为,即使它现在可能有 15 年了,它之所以仍然具有相关性,是因为如果我们考虑所有那些事情,它确实得分很高。我们进行了很多次迭代,我会展示给你们看。我们有关于用户的文档,我可能可以给你们看很久以前关于系统架构和用户界面架构的那张幻灯片。我们在信息架构上做了工作,它驱使我们得到了我们认为好的(我们知道它是好的)交互设计,因为我们用用户测试过它,并且我们有一些指标和数据。

所以这是一个例子,展示了产品在客户来找我们时的样子。我确定你们听说过“功能蔓延”这个术语,但这个东西……它是一个电力仪表,有点像你家外面的那种,但这是工业用的,通常使用 480 伏电源,测量 400 多种不同的参数。它测量电压、电流、过去 24 小时内的最低电压、谐波失真、谐波失真的谐波失真……他们只是不断添加功能,因为他们处于竞争环境中。任何时候他们认为竞争对手赶上了,他们就添加功能;任何时候竞争对手加入了一个超越他们的功能,他们明年也会加入那个功能。到了最后,当你按下这些上下按钮时,它本应翻页浏览里面的屏幕,开始时大约有五六个屏幕,这些指示灯会随着你从一个屏幕到另一个屏幕而亮起。所以你会按下向下箭头,它会从电流到电压到功率等等,那个区域的灯会亮起。

但随着他们添加功能,到了最后,你按下向下箭头,它甚至不会从电流到电压。灯不会从这里移到这里,你会意识到电流有两个屏幕,然后下一年有三个,再下一年……每个参数的数量都不同。所以当你按下向下箭头时,你不知道会发生什么,文档有这么厚,全是文本屏幕,一屏接一屏。

所以我们做了一些研究。我们去了现场。当我们去那里时,发生的一件非常有趣的事情是……我不知道我是否能准确地画出这张图。但我们正在和这些人谈论他们使用的一些系统以及这个仪表如何工作,以及他们会怎么做。他们最终有像这样的东西,你知道,他们会有一个像这样的表盘。我们看着它,它是歪着安装的。他们旁边有另一个像这样的,这个安装得,你知道,有点向另一边歪。所以,你知道,小指针会像那样起来。这个指针指向不同的方向。他们有一排这样的东西。所以我们问他们,因为我们说:“你们看起来像聪明人。你们为什么这样做?”

他们说:“嗯,再看一次。”我说它们看起来还是歪的。他们说:“不,你没明白。再看一次。”他们所做的是,他们在顶部像这样做了一个小记号笔标记。在每一种情况下,当工厂正常运行良好时,所有箭头都笔直指向上方。那个人说:“你明白我们为什么把它们装歪了吗?我们没有像你以为的那样装歪。当一切运行良好时,我们可以站在房间对面,看到所有箭头都笔直向上,他们说,然后我们知道一切顺利。当其中一个箭头偏向一边时,我们就可以看出工厂有问题。所以我们喜欢这些模拟表盘。我们费了这么大劲来做这个。”那很有趣。他们说:“你知道,我们失去了所有这些能力。我们转向这些新的数字仪表,全是屏幕上的文字和数字,你无法分辨任何信息,我无法从房间对面看出来,我必须走过去,必须按按钮、点击翻页。新手进来时,他们无法告诉你这个仪表上 480 的读数是否正常。但在过去,当我们使用这些模拟的东西,把它们装在墙上,以你们所谓的错误方式安装,并在顶部做一个小记号笔标记时,他们也能做到这一点,他们可以在上面贴一个带子,把这个带子涂成绿色,覆盖这些带子涂成黄色,你知道,如果指针进入黄色

13:其他设计方法与评估技术

在本节课中,我们将学习一系列在常规课程中未深入探讨的人机交互方法。这些方法旨在帮助回答关于用户的各种问题,包括设计前期的需求分析和后期的系统评估。我们将介绍文化探针、日记研究、卡片分类、身体风暴、人类绩效建模、速度约会、认知走查和认知维度等方法。

上一节我们介绍了人机交互的核心方法,如情境调查。本节中,我们来看看其他一些同样重要但关注点不同的方法。这些方法可以分为两大类:设计方法(帮助设计更好的系统,理解设计需求)和评估方法(在系统创建后对其进行评估)。情境调查主要关注工作场景和短期任务,而今天介绍的一些方法则更侧重于用户的情感、长期或间歇性发生的行为。

文化探针 🧩

文化探针旨在帮助设计师更好地理解特定群体(如家庭、小团体或公司)的文化、态度和价值观。其核心思想是向参与者提供多种记录工具(如地图、明信片、一次性相机、录音机),并指导他们在数周或数月内记录与特定主题相关的日常生活片段。

以下是文化探针的关键特点:

  • 模糊提示:通常给出宽泛的提示,如“请告诉我们一条对您很重要的建议”或“请拍下对您重要的东西”,以激发灵感而非获取具体信息。
  • 获取背景理解:目的是理解用户所处的整体环境,为产品设计提供灵感,而非验证某个具体产品概念。
  • 游戏化与互动性:过程应设计得有趣,让参与者感到自己在贡献有价值的信息,从而获得更真实、有用的反馈。
  • 最终讨论:收集资料后与参与者进行的讨论是获取关键洞察的主要环节。

文化探针适用于设计早期阶段,旨在深入理解用户背景,作为灵感来源。

日记研究 📔

日记研究是文化探针中日记部分的简化版,专注于记录那些发生时间不可预测或间歇性的活动细节。当无法通过观察(如情境调查)来研究此类活动时,日记研究非常有用。

以下是实施日记研究的要点:

  • 具体问题:为每次事件设计包含具体问题的一两页日记,记录技术使用、决策过程等细节。
  • 及时记录:参与者需要在活动发生后尽快记录,以防遗忘。
  • 激励措施:可以通过差异化报酬(如按条目数量付费)来鼓励参与者长期坚持记录。

日记研究适用于研究如“一群人如何决定去哪吃饭”或“用户每次遇到系统问题时的反应”这类场景。

卡片分类 🃏

卡片分类是一种用于理解用户如何组织和分类信息的技术。它对于设计网站信息架构、产品分类或菜单结构特别有用。

卡片分类的基本过程如下:

  • 准备卡片:将需要分类的项目(如菜单项、产品名称)写在卡片上。
  • 用户分类:请用户将这些卡片分组,并可能为每组命名。
  • 分析模式:通过多位用户的分类结果,寻找一致的组织模式,以此指导实际的产品结构设计。

此外,卡片分类也可用于对可用性问题或设计需求进行优先级排序,例如让用户将写有问题的卡片分为“必要”、“不太必要”和“不重要”等类别。

关于这类定性研究方法需要多少参与者的问题,研究表明,对于具有相似 demographics(人口统计特征)的群体(如有年幼孩子的家庭、工程师),通常4-5人就能开始发现重复模式,达到信息饱和。如果结果差异很大,则需要增加参与者或反思方法是否合适。

身体风暴 🎭

身体风暴源于头脑风暴,要求设计师通过身体表演来模拟用户使用产品的场景,从而获得对设计需求的高保真度理解。

身体风暴的应用方式包括:

  • 模拟使用:例如,设计公共信息亭时,设计师亲自扮演用户,模拟点击按钮的过程。
  • 探索情境:例如,设计淋浴收音机时,设计师闭上眼睛模拟在淋浴中调节旋钮的动作;设计床头收音机时,躺在地板上模拟在床上操作。
  • 激发创意:通过身体互动,可以发现仅靠桌面讨论难以察觉的设计问题和机会。

身体风暴适用于涉及物理交互或特定环境的产品设计,能帮助团队更具体地构思设计方案。

人类绩效建模 ⏱️

人类绩效建模是一种评估方法,它利用已知的人类认知和运动能力参数,来预测用户完成特定界面任务所需的时间,尤其适用于操作步骤明确、无需大量思考的任务。

该领域有两个主要模型:

  • 击键层级模型:计算诸如击键、指向、手部移动等基本操作的时间。公式可以简化为:任务总时间 = Σ(各操作类型时间 × 该操作次数)。不同设备(鼠标、触摸板、手指)的操作时间和精度参数不同。
  • GOMS模型:在KLM基础上,考虑了用户为达成目标可能选择的不同方法以及选择规则。它通过模拟用户在不同情境下的决策路径来估算任务时间。

人类绩效建模的优点是可以在设计实现前就进行性能预测和比较,常用于对任务完成时间有严格要求的领域,如汽车驾驶系统交互设计。

速度约会 💑

速度约会是一种快速获取用户对多个设计概念初步反馈的方法。它得名于快速相亲活动,核心是在短时间内让用户接触并评价一系列设计想法。

速度约会的实施要点如下:

  • 快速呈现:使用草图、故事板或简短场景描述,让用户在几分钟内形成印象并给出反馈。
  • 比较与筛选:适用于在众多初步想法中筛选出有潜力的方向,或探索用户对前沿、甚至有些“令人不安”概念的接受度。
  • 两种形式:一种是类似身体风暴的快速场景扮演;另一种是基于故事板的快速评分和评论。

这种方法有助于验证设计假设,了解用户对不同设计方向的兴趣程度,特别是在用户对概念缺乏先验经验时。

认知走查 🧠

认知走查是一种由专家执行的详细任务分析评估方法。专家逐步模拟新手用户执行任务的每个步骤,并追问四个关键问题:

  1. 用户会尝试达成正确目标吗?
  2. 用户会注意到正确的操作项吗?
  3. 用户会将操作项与要达成的目标关联起来吗?
  4. 如果执行了正确操作,用户能察觉到进展吗?

这个过程非常细致,旨在识别用户在每个步骤可能遇到的知识缺口或理解障碍。它对于发现界面中需要学习或可能引起困惑的环节特别有效,但执行起来较为耗时且需要经验。

认知维度 📐

认知维度是一套用于评估编程系统或任何“符号化”工具(如电子表格)可用性的指导原则。它类似于启发式评估,但更专注于创建和修改结构化信息(如代码)的体验。

一些关键的认知维度包括:

  • 贴近映射:编程语言或工具的表述方式与用户心中所想任务的接近程度。例如,在电子表格中用 SUM(A1:A10) 求和,就比用Java写循环更贴近直观想法。
  • 隐藏依赖:元素之间的关系在界面中不可见。例如,在电子表格中,仅看单元格无法知道其值是手动输入的还是由公式计算的。
  • 过早承诺:用户必须在准备好之前就做出决定。例如,许多编程语言要求在使用变量前先声明它。
  • 粘度:进行更改的难度。例如,在图形化编程环境中,将“if”块改为“for”块可能比在文本编辑器中直接修改代码要困难得多,因为可能需要删除并重建整个结构。

这些维度有助于分析工具在支持用户进行构建、理解和修改复杂结构时的优缺点。

本节课中我们一起学习了多种补充性的HCI设计与评估方法。文化探针和日记研究帮助理解用户长期和情感化需求;卡片分类优化信息架构;身体风暴通过表演激发设计灵感;人类绩效建模预测任务效率;速度约会快速筛选设计方向;认知走查细致分析任务流程;认知维度则专门评估编程类工具的可用性。掌握这些方法的适用场景,能让你在未来的技术管理和产品开发中,更全面、有效地进行以用户为中心的设计与评估。

posted @ 2026-03-28 12:22  布客飞龙V  阅读(1)  评论(0)    收藏  举报