这是用户在 2024-5-27 17:04 为 https://web.mit.edu/6.813/www/sp18/classes/01-usability/ 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?
Welcome to NB!
Registering only takes a few seconds and lets you annotate online PDFs...
Firstname
Lastname
Pseudonym
Email
Password
Confirm Password
Email
Password
Lost password ?
6.813/6.831 — User Interface Design & Implementation
Spring 2018

Reading 1: Usability 阅读1:可用性

UI Hall of Fame and Shame
UI名人堂和耻辱

Usability is about creating effective user interfaces (UIs). Slapping a pretty window interface on a program does not automatically confer usability on it.
可用性是关于创建有效的用户界面 (UI)。在程序上拍打一个漂亮的窗口界面并不会自动赋予它可用性。

This example shows why.
此示例说明了原因。

User Interface Hall of Shame
用户界面 Hall of Shame

Source: Interface Hall of Shame
来源:界面耻辱大厅

This dialog box, which appeared in a program that prints custom award certificates, presents the task of selecting a template for the certificate. This interface is clearly graphical. It’s mouse-driven–no memorizing or typing complicated commands. It’s even what-you-see-is-what-you-get (WYSIWYG)–the user gets a preview of the award that will be created.
此对话框出现在打印自定义奖励证书的程序中,显示为证书选择模板的任务。这个界面显然是图形化的。它是鼠标驱动的,无需记忆或输入复杂的命令。它甚至是所见即所得(WYSIWYG)——用户可以预览将要创建的奖项。

So why isn’t it usable?
那么为什么它不能使用呢?

The first clue that there might be a problem here is the long help message on the left side. Why so much help for a simple selection task? Because the interface is bizarre! The scrollbar is used to select an award template.
这里可能存在问题的第一个线索是左侧的长帮助消息。为什么对一个简单的选择任务有如此多的帮助?因为界面很奇怪!滚动条用于选择奖励模板。

Each position on the scrollbar represents a template, and moving the scrollbar back and forth changes the template shown.
滚动条上的每个位置都代表一个模板,来回移动滚动条会更改显示的模板。

This is a cute but poor use of a scrollbar. Notice that the scrollbar doesn’t have any marks on it. How many templates are there? How are they sorted? How far do you have to move the scrollbar to select the next one? You can’t even guess from this interface.
这是一个可爱但糟糕的滚动条使用。请注意,滚动条上没有任何标记。有多少个模板?它们是如何分类的?您必须将滚动条移动多远才能选择下一个滚动条?你甚至无法从这个界面中猜到。

User Interface Hall of Shame
用户界面 Hall of Shame

Source: Interface Hall of Shame
来源:界面耻辱大厅

Normally, a horizontal scrollbar underneath an image (or document, or some other content) is designed for scrolling the content horizontally. A new or infrequent user looking at the window sees the scrollbar, assumes it serves that function, and ignores it. Inconsistency with prior experience and other applications tends to trip up new or infrequent users.
通常,图像(或文档或其他一些内容)下方的水平滚动条设计用于水平滚动内容。新用户或不经常查看窗口的用户看到滚动条,认为它提供该功能,然后忽略它。与先前经验和其他应用程序的不一致往往会绊倒新用户或不经常使用的用户。

Another way to put it is that the horizontal scrollbar is an affordance for continuous scrolling, not for discrete selection. We see affordances out in the real world, too; a door knob says “turn me”, a handle says “pull me”.
另一种说法是,水平滚动条是连续滚动的功能,而不是离散选择的功能。我们在现实世界中也看到了可负担性;门把手上写着“转我”,把手上写着“拉我”。

We’ve all seen those apparently-pullable door handles with a little sign that says “Push”; and many of us have had the embarrassing experience of trying to pull on the door before we notice the sign. The help text on this dialog box is filling the same role here.
我们都见过那些明显可以拉动的门把手,上面有一个小标志,上面写着“推”;我们中的许多人都有过尴尬的经历,在我们注意到这个标志之前试图拉门。此对话框中的帮助文本在此处填充相同的角色。

But the dialog doesn’t get any better for frequent users, either. If a frequent user wants a template they’ve used before, how can they find it? Surely they’ll remember that it’s 56% of the way along the scrollbar? This interface provides no shortcuts for frequent users. In fact, this interface takes what should be a random access process and transforms it into a linear process. Every user has to look through all the choices, even if they already know which one they want. The computer scientist in you should cringe at that algorithm.
但是对于经常使用的用户来说,对话框也没有变得更好。如果经常使用的用户想要他们以前使用过的模板,他们如何找到它?他们肯定会记得它是滚动条的 56% 吗?此界面不为频繁使用的用户提供快捷方式。事实上,这个接口将本应是随机访问的过程转换为线性过程。每个用户都必须浏览所有选项,即使他们已经知道他们想要哪一个。你心中的计算机科学家应该对这种算法感到畏缩。

Even the help text has usability problems. “Press OKAY”? Where is that? And why does the message have a ragged left margin? You don’t see ragged left too often in newspapers and magazine layout, and there’s a good reason.
甚至帮助文本也存在可用性问题。“按 OK”?那是哪里?为什么消息的左边距参差不齐?你不会经常在报纸和杂志版面上看到破烂不堪的左边,这是有充分理由的。

On the plus side, the designer of this dialog box at least recognized that there was a problem–hence the help message. But the help message is indicative of a flawed approach to usability.
从好的方面来说,这个对话框的设计者至少认识到存在问题,因此发出了帮助消息。但帮助消息表明了一种有缺陷的可用性方法。

Usability can’t be left until the end of software development, like package artwork or an installer. It can’t be patched here and there with extra messages or more documentation. It must be part of the process, so that usability bugs can be fixed, instead of merely patched.
可用性不能留到软件开发结束,比如包图稿或安装程序。它不能在这里和那里用额外的消息或更多的文档来修补。它必须是流程的一部分,以便可以修复可用性错误,而不仅仅是修补。

How could this dialog box be redesigned to solve some of these problems?
如何重新设计此对话框以解决其中一些问题?

The Example, Redesigned 重新设计的示例

Source: Interface Hall of Shame
来源:界面耻辱大厅

Here’s one way it might be redesigned. The templates now fill a list box on the left; selecting a template shows its preview on the right. This interface suffers from none of the problems of its predecessor: list boxes clearly afford selection to new or infrequent users; random access is trivial for frequent users. And no help message is needed.
这是重新设计的一种方式。模板现在填充左侧的列表框;选择模板时,其预览将显示在右侧。该界面没有其前身的问题:列表框显然为新用户或不经常使用的用户提供了选择;对于频繁使用的用户来说,随机访问是微不足道的。并且不需要帮助消息。

More UI Hall of Shame
更多 UI 耻辱堂

Source: Interface Hall of Shame
来源:界面耻辱大厅

Here’s another bizarre interface, taken from a program that launches housekeeping tasks at scheduled intervals.
这是另一个奇怪的界面,取自一个按计划间隔启动内务处理任务的程序。

The date and time look like editable fields (affordance), but you can’t edit them with the keyboard. Instead, if you want to change the time, you have to click on the Set Time button to bring up a dialog box.
日期和时间看起来像可编辑字段 (affordance),但您无法使用键盘编辑它们。相反,如果要更改时间,则必须单击“设置时间”按钮以弹出一个对话框。

This dialog box displays time differently, using 12-hour time (7:17 pm) where the original dialog used 24-hour time (consistency). Just to increase the confusion, it also adds a third representation, an analog clock face.
此对话框以不同的方式显示时间,使用 12 小时制(晚上 7 点 17 分),而原始对话框使用 24 小时制(一致性)。为了增加混乱,它还添加了第三种表示形式,即模拟钟面。

So how is the time actually changed? By clicking mouse buttons: clicking the left mouse button increases the minute by 1 (wrapping around from 59 to 0), and clicking the right mouse button increases the hour. Sound familiar? This designer has managed to turn a sophisticated graphical user interface, full of windows, buttons, and widgets, and controlled by a hundred-key keyboard and two-button mouse, into a clock radio!
那么时间到底是怎么变化的呢?通过单击鼠标按钮:单击鼠标左键可将分钟增加 1(从 59 到0),单击鼠标右键可增加小时。听起来很熟悉?这位设计师成功地将一个复杂的图形用户界面变成了一个时钟收音机,里面装满了窗口、按钮和小部件,由一百键键盘和双键鼠标控制!

Perhaps the worst part of this example is that it’s not a result of laziness. Somebody went to a lot of effort to draw that clock face with hands. If only they’d spent some of that time thinking about usability instead.
也许这个例子最糟糕的部分是,这不是懒惰的结果。有人费了九牛二虎之力才用指针画出那个钟面。如果他们花一些时间考虑可用性就好了。

UI Hall of Fame or Shame?
UI名人堂还是耻辱?

Gimp is an open-source image editing program, comparable to Adobe Photoshop. Gimp’s designers made a strange choice for its menus. Gimp windows have no menu bar. Instead, all Gimp menus are accessed from a context menu, which pops up on right-click.
Gimp 是一个开源图像编辑程序,可与 Adobe Photoshop 相媲美。Gimp的设计师为其菜单做出了一个奇怪的选择。Gimp 窗口没有菜单栏。相反,所有 Gimp 菜单都是从上下文菜单访问的,该菜单在右键单击时弹出。

This is certainly inconsistent with other applications, and new users are likely to stumble trying to find, for example, the File menu, which never appears on a context menu in other applications. (I certainly stumbled as a new user of Gimp.) But Gimp’s designers were probably thinking about expert users when they made this decision. A context menu should be faster to invoke, since you don’t have to move the mouse up to the menu bar. A context menu can be popped up anywhere. So it should be faster. Right?
这当然与其他应用程序不一致,例如,新用户可能会绊倒试图找到“文件”菜单,该菜单从未出现在其他应用程序的上下文菜单中。(作为 Gimp 的新用户,我确实绊倒了。但 Gimp 的设计师在做出这个决定时可能考虑的是专家用户。上下文菜单的调用速度应该更快,因为您不必将鼠标向上移动到菜单栏。可以在任何地方弹出上下文菜单。所以它应该更快。右?

Wrong. With Gimp’s design, as soon as the mouse hovers over a choice on the context menu (like File or Edit), the submenu immediately pops up to the right. That means, if I want to reach an option on the File menu, I have to move my mouse carefully to the right, staying within the File choice, until it reaches the File submenu. If my mouse ever strays into the Edit item, the File menu I’m aiming for vanishes, replaced by the Edit menu. So if I want to select File/Quit, I can’t just drag my mouse in a straight line from File to Quit–I have to drive into the File menu, turn 90 degrees and then drive down to Quit! Hierarchical submenus are actually slower to use than a menu bar.
错。在 Gimp 的设计中,只要鼠标悬停在上下文菜单上的选项(如“文件”或“编辑”)上,子菜单就会立即弹出到右侧。这意味着,如果我想访问“文件”菜单上的一个选项,我必须小心地将鼠标向右移动,保持在“文件”选项中,直到它到达“文件”子菜单。如果我的鼠标误入“编辑”项,我的目标“文件”菜单就会消失,取而代之的是“编辑”菜单。因此,如果我想选择“文件/退出”,我不能只是将鼠标从“文件”拖到“退出”,我必须开车进入“文件”菜单,旋转 90 度,然后向下行驶到“退出”!分层子菜单的使用速度实际上比菜单栏慢。

Part of the problem here is the way GTK (the UI toolkit used by Gimp) implements submenus. Changing the submenu immediately is probably a bad idea. Microsoft Windows does it a little better–you have to hover over a choice for about half a second before the submenu appears, so if you veer off course briefly, you won’t lose your target. But you still have to make that right-angle turn.
这里的部分问题在于 GTK(Gimp 使用的 UI 工具包)实现子菜单的方式。立即更改子菜单可能是一个坏主意。Microsoft Windows做得更好一些 - 在子菜单出现之前,您必须将鼠标悬停在一个选项上大约半秒钟,因此如果您短暂偏离路线,您不会失去目标。但你仍然必须进行直角转弯。

Apple Macintosh does even better: when a submenu opens, there’s a triangular zone, spreading from the mouse to the submenu, in which the mouse pointer can move without losing the submenu. So you can drive diagonally toward Quit without losing the File menu, or you can drive straight down to get to the Edit menu instead. Gimp’s designers made a choice without fully considering how it interacted with human capabilities. We’ll see that there are some techniques and principles that we can use to predict how decisions like this will affect a user interface–and we’ll also see how we can measure and evaluate the actual effects.
Apple Macintosh 做得更好:当子菜单打开时,有一个三角形区域,从鼠标蔓延到子菜单,鼠标指针可以在其中移动而不会丢失子菜单。因此,您可以沿对角线驶向“退出”而不会丢失“文件”菜单,或者您可以直接向下行驶以进入“编辑”菜单。Gimp的设计师在没有充分考虑它如何与人类能力相互作用的情况下做出了选择。我们将看到,我们可以使用一些技术和原则来预测这样的决策将如何影响用户界面,我们还将看到如何衡量和评估实际效果。

UI Hall of Fame or Shame?
UI名人堂还是耻辱?

There’s another interesting design feature in Gimp’s menus–well-intentioned and clever, but problematic in practice. Suppose my mouse is halfway down the File menu when I notice that the Quit command actually has a keyboard shortcut: Ctrl-Q. Great! So I press it.
Gimp 的菜单中还有另一个有趣的设计功能——用心良苦,但在实践中却有问题。假设我的鼠标在文件菜单的一半处,我注意到“退出”命令实际上有一个键盘快捷键:Ctrl-Q。所以我按下了它。

But it doesn’t invoke the Quit command. Instead, it changes the shortcut of whatever command my mouse is hovering over–in this case, Save–to Ctrl-Q. This is a mode: a state of the system in which a user action has a different meaning than it does in other states. Modes may be inevitable in user interfaces, but mode errors–using the action in the wrong mode, so it does something you don’t intend–do not have to be inevitable.
但它不会调用 Quit 命令。相反,它会将鼠标悬停的任何命令(在本例中为保存)的快捷方式更改为 Ctrl-Q。这是一种模式:一种系统状态,在这种状态下,用户操作具有与其他状态不同的含义。模式在用户界面中可能是不可避免的,但模式错误(在错误的模式下使用操作,因此它执行了您不想要执行的操作)不一定是不可避免的。

Worse, it’s not an easy error to undo. (Pressing Ctrl-Z, the conventional undo shortcut, only makes it worse!) I have to reassign the old shortcut to the Save command–if I can remember the original shortcut. Then I have find the command whose original shortcut was Ctrl-Q, and restore that one as well. This error wasn’t easily recoverable.
更糟糕的是,这不是一个容易撤消的错误。(按 Ctrl-Z,传统的撤消快捷方式,只会让情况变得更糟!我必须将旧的快捷方式重新分配给“保存”命令 - 如果我能记住原始快捷方式的话。然后我找到了原始快捷方式为 Ctrl-Q 的命令,并恢复该命令。此错误不容易恢复。

Gimp’s designers had a terrific idea here–making it easy to assign keyboard shortcuts by just pointing at the menu item you want to change and pressing the shortcut. That’s simple and elegant, in fact far simpler than most customization interfaces. But they’ve given us too much rope, and it’s easy to hang ourselves. This interface isn’t safe to use.
Gimp 的设计师在这里有一个绝妙的想法——只需指向要更改的菜单项并按下快捷键,即可轻松分配键盘快捷键。这简单而优雅,实际上比大多数自定义界面要简单得多。但是他们给了我们太多的绳子,很容易上吊自杀。此界面使用起来不安全。

UI Hall of Fame or Shame?
UI名人堂还是耻辱?

In Emacs, Ctrl-S starts an incremental search. This is a well-designed feature.
在 Emacs 中,Ctrl-S 开始增量搜索。这是一个精心设计的功能。

  • it’s highly responsive: updates as fast as the user can type
    它响应速度快:用户输入的速度即可快速更新
  • it’s easily and obviously reversible: press Backspace if you made a mistake
    它很容易而且显然是可逆的:如果你犯了错误,请按退格键
  • it provides immediate feedback about what it’s doing
    它提供有关其正在执行的操作的即时反馈
  • successful searches may even achieve early success: only 3 letters was enough to find BasicProgressGenerator, and I could instantly tell that it was enough
    成功的搜索甚至可能取得早期的成功:只有 3 个字母就足以找到 BasicProgressGenerator,我可以立即看出这就足够了
  • user gets early feedback about typos and failed searches
    用户获得有关拼写错误和失败搜索的早期反馈

What’s the downside? All its controls are invisible. How do you start the incremental search? How do you search again? How do you go backwards? How do you do a case-sensitive search?
有什么缺点?它的所有控件都是不可见的。如何开始增量搜索?如何再次搜索?你如何倒退?如何进行区分大小写的搜索?

Once learned, however, these commands are simple. Ctrl-S starts the search. Pressing Ctrl-S again looks for a later match. (But now there is the possibility of mode error!) Pressing Ctrl-R looks backwards for a previous match. (What does Backspace do?) Using any capitalized letters in your query forces a case-sensitive search. (But how do I search for an all-lowercase string case-sensitively?)
然而,一旦学会了,这些命令就很简单了。Ctrl-S 开始搜索。再次按 Ctrl-S 会查找稍后的匹配项。(但现在有模式错误的可能性!按 Ctrl-R 可向后查看上一场比赛。(Backspace 有什么作用?在查询中使用任何大写字母都会强制进行区分大小写的搜索。(但是如何区分大小写地搜索全小写字符串?

UI Hall of Fame or Shame?
UI名人堂还是耻辱?

XEmacs has menus (the original Emacs didn’t). Alas, XEmacs isn’t interested in helping users learn incremental search. Instead, it pops up this conventional Find dialog, which scores great on visibility, but lacks the responsiveness, easy reversibility, and fast performance of incremental search. Even worse, it covers up the matches you’re trying to find unless you manhandle it out of the way!
XEmacs 有菜单(原来的 Emacs 没有)。唉,XEmacs 对帮助用户学习增量搜索不感兴趣。相反,它会弹出这个传统的“查找”对话框,该对话框在可见性方面得分很高,但缺乏增量搜索的响应能力、易逆性和快速性能。更糟糕的是,它掩盖了你试图找到的火柴,除非你把它弄得一团糟!

UI Hall of Fame or Shame?
UI名人堂还是耻辱?

Finally, we have the much-reviled Microsoft Office Paperclip.
最后,我们有备受诟病的Microsoft Office回形针。

Clippy was a well-intentioned effort to solve a real usability problem. Users don’t read the manual, don’t use the online help, and don’t know how to find the answers to their problems. Clippy tries to suggest answers to the problem it thinks you’re having.
Clippy 是解决一个真正的可用性问题的善意努力。用户不阅读手册,不使用在线帮助,也不知道如何找到问题的答案。Clippy 试图为它认为你遇到的问题提出答案。

Unfortunately it’s often wrong, often intrusive, and often annoying.
不幸的是,它经常是错误的,经常是侵入性的,而且经常令人讨厌。

The subjective quality of your interface matters too.
界面的主观质量也很重要。

Why UI Design is Hard
为什么UI设计很难

You Are Not the User
您不是用户

  • Most software engineering is about communicating with other programmers
    大多数软件工程都是关于与其他程序员的沟通

    • …who are a lot like you
      …谁很像你

  • UI is about communicating with users
    UI 是关于与用户通信的

    • Users are NOT LIKE YOU
      用户不像你

  • The user is ALWAYS right
    用户永远是对的

    • Usability problems are the design’s fault
      可用性问题是设计的错

Unfortunately, user interfaces are not easy to design. You (the developer) are not a typical user. You know far more about your application than any user will. You can try to imagine being your mother, or your grandma, but it doesn’t help much. It’s very hard to forget things you know.
不幸的是,用户界面不容易设计。您(开发人员)不是典型用户。您比任何用户都更了解您的应用程序。你可以试着想象自己是你的母亲或奶奶,但这没有多大帮助。很难忘记你所知道的事情。

This is how usability is different from everything else you learn about software engineering. Specifications, assertions, and object models are all about communicating with other programmers, who are probably a lot like us. Usability is about communicating with other users, who are probably not like us.
这就是可用性与你所学到的软件工程的其他一切的不同之处。规范、断言和对象模型都是关于与其他程序员的通信,他们可能很像我们。可用性是关于与其他用户进行交流,他们可能不像我们。

The user is always right. Don’t blame the user for what goes wrong. If users consistently make mistakes with some part of your interface, take it as a sign that your interface is wrong, not that the users are dumb. This lesson can be very hard for a software designer to swallow!
用户永远是对的。不要因为出了什么问题而责怪用户。如果用户在界面的某些部分经常犯错误,请将其视为您的界面错误的标志,而不是用户愚蠢。对于软件设计师来说,这一课可能很难接受!

Don’t Expect Users to be Designers
不要指望用户是设计师

  • Telephone handset weight
    电话听筒重量

    • Users said: it’s fine 用户说:没关系

    • But they really wanted: lighter
      但他们真的想要:更轻

  • number of Google search results
    Google 搜索结果的数量

    • Users said: 30 results 用户说: 30 结果

    • But they really wanted: 10
      但他们真的想要:10

  • Command abbreviations 命令缩写

    • Users make 2x errors with their own custom abbreviations
      用户使用自己的自定义缩写会犯 2 个错误

Unfortunately, the user is not always right. Users aren’t oracles. They don’t always know what they want, or what would help them. In a study conducted in the 1950s, people were asked whether they would prefer lighter telephone handsets, and on average, they said they were happy with the handsets they had (which at the time were made rather heavy for durability). Yet an actual test of telephone handsets, identical except for weight, revealed that people preferred the handsets that were about half the weight that was normal at the time. (Klemmer, Ergonomics, Ablex, 1989, pp 197-201).
不幸的是,用户并不总是正确的。用户不是预言机。他们并不总是知道自己想要什么,或者什么会帮助他们。在 1950 年代进行的一项研究中,人们被问及他们是否更喜欢更轻的电话手机,平均而言,他们说他们对自己拥有的手机感到满意(当时为了耐用性而制作得相当重)。然而,对电话听筒的实际测试显示,除了重量外,其他电话听筒都相同,人们更喜欢重量大约是当时正常重量一半的手机。(Klemmer,人体工程学,Ablex,1989 年,第 197-201 页)。

Another example: Google has discovered that when they survey users about how many search results they want per page (10, 20, 30), users overwhelmingly say “30 results”. But when Google actually deploys 30-result search pages (as part of an “A/B test”, which we’ll talk about in a later reading), usage drops by 20% relative to the conventional 10-result page. Why? Probably because the 30-result page takes a half second longer to load (The Cost of Latency).
另一个例子:谷歌发现,当他们调查用户每页想要多少搜索结果(10、20、30)时,绝大多数用户都会说“30个结果”。但是,当 Google 实际部署 30 个结果的搜索页面时(作为“A/B 测试”的一部分,我们将在后面的阅读中讨论),使用率相对于传统的 10 个结果页面下降了 20%。为什么?可能是因为 30 个结果的页面加载时间多了半秒(延迟成本)。

Users aren’t designers, either, and shouldn’t be forced to fill that role.
用户也不是设计师,不应该被迫担任这个角色。

It’s easy to say, “Yeah, the interface is bad, but users can customize it however they want it.” There are two problems with this statement: (1) most users don’t, and (2) user customizations may be even worse! One study of command abbreviations found that users made twice as many errors with their own command abbreviations than with a carefully-designed set (Grudin & Barnard, “When does an abbreviation become a word?”, CHI ‘85). So customization isn’t the silver bullet.
很容易说,“是的,界面很糟糕,但用户可以随心所欲地自定义它。这种说法有两个问题:(1)大多数用户没有,(2)用户自定义可能更糟!一项关于命令缩写的研究发现,用户使用自己的命令缩写所犯的错误是使用精心设计的命令缩写的两倍(Grudin & Barnard,“When does an abbreviation become a word?”, CHI '85)。因此,定制并不是灵丹妙药。

Usability, Defined 可用性,定义

Usability Defined 可用性定义

  • Usability 可用性

    = how well users can use the system’s functionality
    = 用户使用系统功能的程度

  • Dimensions of usability 可用性维度

    • Learnability 可学习性

      (L): is it easy to learn?
      (L):容易学吗?

    • Efficiency 效率

      (E): once learned, is it fast to use?
      (E):学会了,用起来快吗?

    • Safety 安全

      (S): are errors few and recoverable?
      (S):错误是否很少且可恢复?

  • Other dimensions are relevant too
    其他维度也相关

    • Ergonomics: comfort, fatigue
      人体工程学:舒适、疲劳

    • Aesthetics: satisfaction, happiness, pleasure
      美学:满意、幸福、愉悦

    • But we’ll mostly focus on LES
      但我们将主要关注 LES

The property we’re concerned with here, usability, is more precise than just how “good” the system is. A system can be good or bad in many ways.
我们在这里关注的属性,可用性,比系统有多“好”更精确。一个系统在很多方面可能是好的,也可能是坏的。

If important requirements are unsatisfied by the system, that’s probably a deficiency in functionality, not in usability.
如果系统不满足重要需求,那可能是功能上的缺陷,而不是可用性上的缺陷。

If the system is very expensive or crashes frequently, those problems certainly detract from the user’s experience, but we don’t need user testing to tell us that.
如果系统非常昂贵或经常崩溃,这些问题肯定会影响用户的体验,但我们不需要用户测试来告诉我们这一点。

More narrowly defined, usability measures how well users can use the system’s functionality. Usability has several dimensions: learnability, efficiency, and safety.
更狭义的定义是,可用性衡量用户使用系统功能的能力。可用性有几个维度:可学习性、效率和安全性。

These aren’t the only aspects of a user interface that you might care about (for example, subjective feelings are important too, as is fatigue), but these are the primary ones we’ll care about in this class.
这些并不是您可能关心的用户界面的唯一方面(例如,主观感受也很重要,疲劳也很重要),但这些是我们在本课程中要关心的主要方面。

Notice that we can quantify all these measures of usability. Just as we can say algorithm X is faster than algorithm Y on some workload, we can say that interface X is more learnable, or more efficient, or more safe than interface Y for some set of tasks and some class of users, by designing an experiment that measures the two interfaces.
请注意,我们可以量化所有这些可用性度量。正如我们可以说算法 X 在某些工作负载上比算法 Y 更快一样,我们可以说接口 X 对于某些任务集和某些用户类别比接口 Y 更易学习、更高效或更安全,通过设计一个测量两个接口的实验。

Usability Dimensions Vary In Importance
可用性维度的重要性各不相同

  • Depends on the user
    取决于用户

    • Novice users need learnability
      新手用户需要可学习性

    • Experts need efficiency 专家需要效率

    • But no user is uniformly novice or expert
      但是,没有一个用户是统一的新手或专家

  • Depends on the task
    取决于任务

    • Missile launchers need safety
      导弹发射器需要安全

    • Subway turnstiles need efficiency
      地铁闸机需要效率

The usability dimensions are not uniformly important for all classes of users, or for all applications. That’s one reason why it’s important to understand your users, so that you know what you should optimize for. A web site used only once by millions of people–e.g., the national telephone do-not-call registry–has such a strong need for ease of learning, in fact zero learning, that it far outweighs other concerns. A stock trading program used on a daily basis by expert traders, for whom lost seconds translate to lost dollars, must put efficiency above all else.
可用性维度对于所有类别的用户或所有应用程序都不具有统一的重要性。这就是为什么了解你的用户很重要的原因之一,这样你就知道你应该优化什么。一个只有数百万人使用过一次的网站——例如,全国电话禁电登记处——对易学性有如此强烈的需求,事实上是零学习,以至于它远远超过了其他问题。专家交易员每天使用的股票交易程序,对他们来说,损失的几秒钟就意味着损失的美元,必须将效率放在首位。

But users can’t be simply classified as novices or experts, either. For some applications (like stock trading), your users may be domain experts, deeply knowledgeable about the stock market, and yet still be novices at your particular application. Even users with long experience using an application may be novices or infrequent users when it comes to some of its features.
但用户也不能简单地归类为新手或专家。对于某些应用程序(如股票交易),您的用户可能是领域专家,对股票市场有深入的了解,但仍然是特定应用程序的新手。即使是具有长期使用应用程序经验的用户,在使用其某些功能时也可能是新手或不经常使用的用户。

Usability Is Only One Attribute of a System
可用性只是系统的一个属性

  • Software designers have a lot to worry about:
    软件设计人员有很多事情需要担心:

    • Functionality 功能性

    • Performance 性能

    • Cost 成本

    • Security 安全

    • Maintainability 可维护性

    • Usability 可用性

    • Size 大小

    • Reliability 可靠性

    • Standards 标准

    • Marketability 市场化

  • Many design decisions involve tradeoffs among different attributes
    许多设计决策涉及不同属性之间的权衡

  • We’ll take an extreme position in this class
    我们将在这门课上采取极端的立场

Usability doesn’t exist in isolation, of course, and it may not even be the most important property of some systems. Astronauts may care more about reliability of their navigation computer than its usability; military systems would rather be secure than easy to log into. Ideally these should be false dichotomies: we’d rather have systems that are reliable, secure, and usable. But in the real world, development resources are finite, and tradeoffs must be made.
当然,可用性不是孤立存在的,它甚至可能不是某些系统最重要的属性。宇航员可能更关心导航计算机的可靠性,而不是其可用性;军事系统宁愿安全,也不愿易于登录。理想情况下,这些应该是错误的二分法:我们宁愿拥有可靠、安全和可用的系统。但在现实世界中,开发资源是有限的,必须做出权衡。

In this class, we’ll take an extreme position: usability will be our primary goal. Here’s a familiar UI design. You’ve probably used it before, but probably without thinking much about its usability. We’re handing some out for you to play with and think about.
在本课程中,我们将采取一个极端的立场:可用性将是我们的首要目标。下面是一个熟悉的 UI 设计。您可能以前使用过它,但可能没有过多考虑它的可用性。我们正在分发一些供您玩耍和思考。

Course Overview 课程概述

What You’ll Learn in 6.813/6.831
您将在 6.813/6.831 中学到什么

  • Design principles 设计原则

    • learnability, visibility, errors, efficiency, …
      可学习性、可见性、错误、效率......

  • Design techniques 设计技术

    • task analysis, prototyping, user testing, …
      任务分析、原型设计、用户测试......

  • Implementation techniques
    实现技术

    • MVC, output, input, layout, color, typography, …
      MVC、输出、输入、布局、颜色、排版......

  • HCI research (6.831D only)
    HCI 研究(仅限 6.831D)

    • current and classic papers
      当前和经典论文

    • experiment design & analysis
      实验设计与分析

This course will be structured as four threads of readings: design principles; design techniques; implementation techniques; and research. You have to gain experience in the first three in order to do your group project, which takes the entire semester. The fourth is for the 6.831D version of the course, which introduces doctoral students to research in HCI.
本课程将分为四个阅读主题:设计原则;设计技术;实施技术;和研究。你必须在前三个阶段获得经验才能完成你的小组项目,这需要整个学期。第四个是该课程的6.831D版本,该课程向博士生介绍HCI的研究。

Each class will be accompanied by a reading (like this one) available on the course web site.
每节课都将附有课程网站上提供的阅读材料(如本课程)。

What You’ll Get From 6.813/6.831
您将从 6.813/6.831 获得什么

  • A sense for usability
    可用性意识

    • some knowledge of human capabilities
      对人类能力有一定的了解

    • design principles and patterns for better usability
      设计原则和模式,以提高可用性

  • A process for building usable interfaces
    构建可用接口的过程

    • cheap prototypes 便宜的原型

    • early and regular feedback from users
      用户的早期和定期反馈

    • iterative design 迭代设计

  • Experience with GUI implementation
    GUI 实施经验

    • HTML/Javascript

  • (6.831D) Preparation for HCI research
    (6.831D) 人机交互研究的准备

    • controlled experiments 对照实验

    • current HCI research topics
      当前HCI研究课题

Here are the key objectives of the course. This is what we hope you’ll take away from the class.
以下是该课程的主要目标。这就是我们希望您能从课堂上学到的东西。

Active Learning 主动学习

  • Passive engagement is a poor teacher
    被动的参与是一个糟糕的老师

    • watching lectures 观看讲座

    • reading text 阅读文本

  • We aim for active learning
    我们的目标是主动学习

    • in-class activities 课堂活动

    • NB discussion of reading 注意阅读讨论

    • Omnivore reading questions
      杂食动物阅读问题

A lot of research has emerged that shows that passively observing material is not effective for learning. This includes watching lectures and reading textbooks. You get much better results from
已经出现了许多研究表明,被动观察材料对学习没有效果。这包括观看讲座和阅读教科书。您可以从中获得更好的结果

active learning 主动学习

where you actively engage with the material by discussing it and solving problems.
您通过讨论和解决问题来积极参与材料。

To foster active learning, lectures will be filled with individual and group activities and discussions. That’s why you can’t miss them—you can’t make them up later on your own.
为了促进主动学习,讲座将充满个人和小组活动和讨论。这就是为什么你不能错过它们——你不能在以后自己编造它们。

For reading, we’ll be using NB, a platform that aims to support discussion of the readings with your classmates, as well as Omnivore, which will give you some questions to think about the reading.
对于阅读,我们将使用 NB,一个旨在支持与同学讨论阅读的平台,以及 Omnivore,它会给你一些思考阅读的问题。

Course Structure 课程结构

  • See course website for:
    请参阅课程网站:

    • Lecture notes 讲义

    • NB annotation/discussion tool
      NB 注释/讨论工具

    • Grading policy 分级政策

    • Calendar 日历

    • Group project 小组项目

    • Problem sets 问题集

    • Automatic extension policy
      自动延期策略

    • Piazza forum 广场论坛

    • Collaboration policy 协作策略

Additional Reading 补充阅读

A note on using NB for Reader Responses.
关于将 NB 用于读者响应的说明。

Micheline Chi and Ruth Wylie. The ICAP Framework: Linking Cognitive Engagement to Active Learning Outcomes.
Micheline Chi 和 Ruth Wylie。ICAP框架:将认知参与与主动学习成果联系起来。