Defining an Interaction Model: The Cornerstone of Application Design

Defining an Interaction Model: The Cornerstone of Application Design

By Jim Nieters

Published: January 23, 2012

In March of 2011, I joined HP to lead the User Experience and Front-End Development organization for Consumer Travel. My goal? To design products that transform the future of travel. At the time, eleven UX professionals had already been working on the design for one of our travel applications for several months. Unfortunately, I had to throw the entire design away and start from scratch. Why? In addition to other challenges, the team could not articulate an interaction model.

What Is an Interaction Model?

“An interaction model is a design model that binds an application together in a way that supports the conceptual models of its target users.”

交互模型是一种设计模型，它将一个应用程序结合在一起，以支持其目标用户的概念模型。

What is an interaction model? An interaction model is a design model that binds an application together in a way that supports the conceptual models of its target users. It is the glue that holds an application together. It defines how all of the objects and actions that are part of an application interrelate, in ways that mirror and support real-life user interactions. It ensures that users always stay oriented and understand how to move from place to place to find information or perform tasks. It provides a common vision for an application. It enables designers, developers, and stakeholders to understand and explain how users move from objects to actions within a system. It is like a cypher or secret decoder ring: Once you understand the interaction model, once you see the pattern, everything makes sense. Defining the right interaction model is a foundational requirement for any digital system and contributes to a cohesive, overall UX architecture.

什么是交互模型？交互模型是一种设计模型，它将一个应用程序结合在一起，以支持其目标用户的概念模型。它是应用的胶水。它定义了所有的对象和行为作为一个应用部分的相互关系如何，镜像和支持实时用户交互。它确保用户一直保持定向的，并理解如何中一个地方移动到另一个地方来找到信息或者执行任务。它为一个应用提供一个通俗的视觉。它使得设计者、开发者、以及炒股者理解和解释系统中用户如何从对象到行为。它像一个密码或者秘密解码环：一旦你知道交互模型，一旦你看到模式，一切变得有意义。定义正确的交互模型是任何数字系统基础要求，并且有助于紧密结合的，所有UX(Uers Experience)架构。

“Defining the right interaction model is a foundational requirement for any digital system and contributes to a cohesive, overall UX architecture.”

Let’s look at some examples—Microsoft products that all of us have probably used. In Microsoft Word, the interaction model supports the conceptual model of users’ putting a piece of paper into a typewriter and typing. It also happens to have a lot of features that enable users to format a page and content in almost any way they can imagine. But that interaction model sits at its core. With Microsoft Excel, the interaction model reflects the conceptual model of accountants’ working with accounts in ledgers that contain rows of entries and columns of numbers and show a balance. Excel has additional features that make it a much richer experience than creating a spreadsheet on paper. But at its core is an interaction model that all users can internalize quickly. The interaction model for Microsoft PowerPoint reflects the conceptual model of users’ writing on a sheet of transparent plastic, then placing it on an overhead projector—for those of us who are old enough to have actually seen this! The interaction model for each of these products is very different, yet each, in itself, is very clear.

The interaction model is something that users internalize, but probably could not articulate—and wouldn’t care whether they could. Users internalize well-constructed interaction models, which make most actions within a system more predictable. Just as the book The Invisible Computer suggests, we usually don’t notice a product or application when it works well.

交互模型是用户内化的，但也许不能清晰表达---不用关心是否能够。用户内化结构好的交互模型，能够使得系统中大多数行为更加可预测。

Clearly, then, there is no one-size-fits-all interaction model. Every product solves a different set of problems for different users, and therefore, requires a model that, as much as possible, reflects and supports their real-world interactions.

显然的，没有通用的交互模型。每个产品解决不同用户的不同的问题集，因此，需要一个模型，尽可能反映并支持他们现实中的交互。

“Any time a product needs to scale to support complex interactions or comprises more than a dozen pages or so, its designers need to step back and define its interaction model first.”

I often hear people—even experienced designers—suggest that, once they’ve created a global template or an information architecture, they’re ready to design. Now, if they’re designing a simple Web portal, they may be right. However, any time a product needs to scale to support complex interactions or comprises more than a dozen pages or so, its designers need to step back and define its interaction model first.

我们常听到人们---即使以有经验的设计师--建议，曾经他们创造了一个整体模板或者一个信息架构，他们准备设计。现在，如果他们设计一个简单Web入口，他们可能是正确的。然而，任何时候一个产品需要可伸缩支持复杂的交互或者包括超过一打纸或者更多，它们的设计师需要返回，先定义它的交互模型。

 

Drawing Some Contrasts

A global template is akin to a design style guide that rigidly enforces exactly where every element goes—not on just one page or screen, but across many of them. An interaction model, on the other hand, is more like a foundational design pattern that describes the ways in which objects interrelate, with many subpatterns that together describe the overall model. The difference is that interaction models leave room for designers to solve users’ real problems.

一个整体模板是设计风格向导的皮肤，严格地执行精准地元素所在位置----不仅仅在一页或屏幕上，而且于它们交叉。一个交互模型，另一方面，像设计模式的基础，描述对象内在关系，与很多模式一起描述整个模式。不同点是交互模型留存空间给设计师解决用户的实际问题。

An interaction model describes how to represent an application to users. For example, should our PC-based, non-mobile application use more Web-portal affordances or desktop-application affordances? In our case, we decided that, although we would develop a Web application, it would use only desktop affordances. It would minimize the underlining of links and use more buttons instead. It would have aMaximize/Restore button that hides or shows the browser chrome, enabling the application to take up 100% of the usable space on the screen, similar to that on Cooliris, shown in Figures 1 and 2. The upshot is that, though we are designing the application technology to be highly performant, we have chosen a desktop application metaphor over a Web portal metaphor for the application. Often, what model you choose doesn’t matter as much as just choosing a model and sticking with it.

“affordance 是 afford (提供、给予、承担)的名词形式，环境的  affordance 是指这个环境可提供给动物的属性，无论是好的还是坏的，所以我认为“可供性”是一个合适的翻译“

 一个交互模型描述如何表征应用给用户。例如，我们PC，无移动应用应该利用更多Web入口可供性或者桌面应用可用性吗？在我们案例中，我决定，虽然我们将开发一个Web应用，只利用桌面可供性。它将最小化链接下划线以及利用更多按钮取代。它将最大化或者恢复隐藏或显示浏览器的按钮，使屏幕空间使用率达到100%，类似的Cooliris，如图1和2所示。

 

Figure 1—Cooliris application with browser chrome visible

Figure 2—Cooliris application maximized, with the browser chrome hidden

An information architecture maps the relationships between pages. I tend to not use the term information architecture when talking about designing a complex Web portal or application, because it suggests that we, as designers, are just structuring information. When designing a complex system, we are defining more than its information architecture. We are defining the way users move through a system consisting of many complex elementsand how they use them to perform complex transactions, then find their way back.

一个信息架构映射页面之间的关系。我试图不用信息架构的术语来谈论复杂Web入口或者应用的设计，因为它表明，我们作为设计师，只是结构化信息。当设计复杂的系统，我们需要定义更多信息架构。我们定义用户通过一个包含很多复杂元素系统的移动方式，如何用他们来执行复杂的事务，然后找到返回的路。

Thus, an interaction model is much more than just a navigation model that describes how users can move from one page or section of an application to another. Of course, an interaction model must take a product’s navigation model into account. Certainly, we need to be aware of the relationships between an application’s pages. But an interaction model supports users’ establishing their conceptual approach to reaching their objectives—employing affordances that support real-life tasks—as well as following the structure of its information or pages.

因此，一个交互模型是不仅仅一个导航模型，描述用户如何从一个页面或者区域移动到另一个。当然，一个交互模型必须考虑到产品的导航模型。确切地，我们需要注意到应用页面之间的关系。但是，一个交互模型支持用户生成他们概念的方法，来达到他们目标---利用可供性支持实在的任务---并遵从信息或者页面的结构。

An interaction model might describe how users navigates to a page, perhaps how they select an object of interest on the page—for example, a book, a passenger, or an expense—how they perform an action on that object—purchasing it, booking an itinerary for it, or adding it up. An interaction model also uses design patterns that describe the model. Our brains are wired to recognize patterns. An interaction model is a discernible pattern that supports the way users think about and approach real-life activities, which also reveals subpatterns in easily discernible ways.

一个交互模型可能描述用户如何导航的页面，可能他们如何选择一个页面中的对象----例如，一本书，一个乘客，或者一笔开支----他们如何在对象上执行一个行为---购买它，预订旅程，或者加起来。一个交互模型也利用描述模型的设计模式。我们大脑能识别模式。一个交互模型是一个可识别的模式，支持用户思考以及靠近实在的活动的方式，也是以一种容易识别的方式揭示模式。

Defining an Application’s Interaction Model

“How, then, do you define an application’s interaction model? It can take months, but in the end, when stakeholders look at the model, they typically say, ‘Of course! I get it! It’s simple!’”

How, then, do you define an application’s interaction model? It can take months, but in the end, when stakeholders look at the model, they typically say, “Of course! I get it! It’s simple!” In this way, an interaction model is not unlike complex mathematics. You work hard to understand it—maybe for hours or even days or weeks—but then, once you finally understand how to solve a type of problem, it seems so simple that you wonder why it took so long to understand it in the first place.

你如何定义一个应用的交互模型，然后呢？这可能花费几个月时间，但是最后，当股东查看这个模型是，他们通常说“可以！我知道了！这很简单”

在这种方式下，一个交互模型像复杂的数学。你努力工作去理解他----可能用几个小时或者甚至几天或者几星期----但是，一旦你了解如何解决一个典型问题，它似乎很简单，你想知道为什么一开始花费这么长的时间去理解。

At HP, defining our interaction model took us several months of very intensive work. We conducted user observations to understand how users conceptualized their goals, how they thought about objects supporting those goals, and the actions they performed on or using those objects in order to achieve their goals. On this particular project, we’re designing consumer user interfaces for mobile, tablet, and the Web, as well airline agent user interfaces for the Web and tablet. Now, I’ll tell you a little about how we crafted the interaction model for the airline agent side of the product.

在HP，定义我们的交互模型花费我们几个月密集的工作。我们实施用户报告来理解用户如何概念化他们的目标，他们如何考虑对象支持这些目标，以及他们为了完成这些目标执行在这些对象上的行为。在我们的方案中，我们设计消费者用户界面，移动，表格，以及Web，甚至航线代理Web和表格的用户界面。现在，我将告诉你一点关于如何精巧地制作产品航线代理端的交互模型。

When focusing on agent interactions, we recognized that each type of agent had a different primary object for which they needed to solve problems. For example, reservation agents taking calls—say to book a new flight or change an existing flight—are focused on a customer who is on the phone—or a caller who has permission to act on behalf of a customer. They need to solve problems for customers—such as booking a flight or changing a profile.

当集中在代理交互，我们认识到每个代理类型有一个不同基础对象，对于他们需要解决的问题而言。例如，预定代理电话----预定一个新的航班或者改变一个现有航班---集中该电话的消费者上---或者一个被允许代表消费者利益的呼叫者。他们需要针对消费解决问题—例如预定一个航班或者换班。

On the other hand, gate agents at an airport have a different goal, which they callclosing a flight, and, thus, a different primary object on which they focus. Their supervisors measure their performance based on their ability to close flights,or get their flights away from the gate on time. Gate agents have several activities going on at the same time—all with a focus on getting a flight away from the gate on time. They need to make sure the passengers all have seats, award some upgrades, accommodate those on a waiting list either on the current or a later flight, and so on, but all of these activities are in service of closing a flight. Most of the gate agents I have observed care deeply about serving their customers—even if we don’t recognize it—but their continued employment depends on their getting flights away from the gate on time.

 

So, the primary object for a reservation agent is a customer, but the primary object for a gate agent is a flight. The primary object for a baggage handler or lost-baggage agent is a piece of luggage. The interaction models we crafted for these different users put the object of their primary focus front and center for them. We also give agents a summary of key information about each object, permitting agents to perform actions against their primary objects.

所以，预定代理的一个基本对象是消费者，但是对于登机代理的基本对象是航班。对于行李寄存代理这个基本对象是一件行李。制做的交互模型针对不同用户使用不同的基本对象，集中在他们的中心或者前面。我们也给代理一个关于每个对象关键信息的概述，允许代理执行反对他们基本对象的行为。

Once we understood the object-action relationships for these users, we spent a couple of months brainstorming various ways in which we could structure the overall product to permit these object-action relationships to take place in the most efficient, delightful way. During the brainstorming process, the team explored options, produced a set of screens for each user scenario, and looked at how well the model held together across scenarios. We did not just create simple screens. Rather, we crafted some of the most complex scenarios, with some of the most complex screens, to ensure that the interaction model supported big challenges. Sometimes, we recognized early that a model didn’t work. At other times, a model looked pretty good at first, but then we found that it wasn’t scalable.

 一旦我们理解对于这些用户的对象--行为关系，我们花费一两个月时间头脑风暴很多方法，我们可以结构化整个产品允许这些对象--行为关系占到有效，宜人的方式。在头脑风暴过程中，团队探索选择，产生每个用户情景的屏幕集，关注模型如何将多情景进行结合。我们没有知识创造简单的屏幕。而是，我们精心制作一下几乎复杂的情景，包括某些复杂的屏幕，为确保交互模型支持大的挑战。有时，我提早认识一个模型不能用。在其他时候，一个模型初看起来很好，但是过一段时间我们发现它不能伸缩。

“To achieve true differentiation and transform the marketplace, we needed lead time to get it right.”

Doing this kind of design exploration is as critical a process in getting a product right as the development itself. Although a good interaction model makes us say, “Of course—that makes sense,” coming up with a model for a complex product often takes several iterations and vigorous design debate about the pros and cons of each model.

Of course, we also had a deadline by which we had to produce our designs. In the end, it was my job as leader of the organization to buy the team the time we needed to define this model, craft wireframes, and confirm through usability testing that our model in fact met the goals we set forth for the product.

The key point I made to both senior leaders and my peers was that redefining the future of travel, designing a product that differentiates itself in the marketplace based on its user experience, is no small result. To achieve true differentiation and transform the marketplace, we needed lead time to get it right. I positioned this as a black-and-white, or binary, decision: Either we had the time to get it right, or all of the effort of hundreds of engineers, product managers, and people in other disciplines would be for naught. Make no mistake though—saying this presented a risk, calculated though it was. If I and my team could not produce something inspiring, the entire team might be at risk. In the end, I weighed the risk against the projected rewards and made the decision to go big.

I also needed to ensure that some members of the team were producing short-term deliverables to keep our road map moving forward—because business always needs to move forward. We had to find a balance and received support from our adjacent disciplines, including Product Management, Engineering, and Program Management.

“Pushing back on schedules meant that the end result had to be the creation of truly inspiring, marketable artifacts.”

However, pushing back on schedules meant that the end result had to be the creation of truly inspiring, marketable artifacts. It is my belief that the job of a UX team is to produce great work. If we produce average work, there’s really no reason to have a UX team on board. The end result had to make reluctant supporters nod their heads in support—and it did. Thus, my peers gained some significant trust from other organizations through this effort.

If we can show how an interaction model can result in breakthrough solutions, we can build the right level of support for having User Experience at the center of the strategic dialogue. This is especially the case when you’re working on consumer products—given the great examples of design in the marketplace today. But enterprise users in the IT world are also users of consumer products such as tablets and cool applications on their smartphones and on the Web. The consumerization of IT is a genuine trend that businesses need to embrace to remain competitive. Almost all of us are consumers of cool products today. People’s expectations have changed. (Just do a Web search on the “consumerization of IT.”) Figure 3 shows just one of the 110 pages that our Interaction Model document comprised. (It’s not important that you be able to read the callouts; the illustration is conceptual in nature.)

Figure 3—Part of an Interaction Model document

I’d like to show you more, including how we’ve tangibly instantiated this model into a set of screens, but because our product is still in development, I cannot for now. Suffice it to say that the Interaction Model document itself must market your organization’s capabilities.

Defining an Interaction Model to Meet UX Goals

“Knowing whether an interaction model works requires not only usability testing, but also a very seasoned designer—one who can recognize when a model will not scale and predict what challenges users would encounter with the model.”

Knowing whether an interaction model works requires not only usability testing, but also a very seasoned designer—one who can recognize when a model will not scale and predict what challenges users would encounter with the model. In the end, for the travel product at HP, I and my most senior design lead made the final decisions about the interaction model. Only later did our less experienced designers internalize it. But once they did, it provided a framework for their ongoing design efforts.

了解一个交互模型工作如何需要不仅仅利用测试，而且还需要一个老练的设计师，能够识别当一个模型将不能伸缩和预测用户用这个模型将面临的挑战是什么。

You cannot create an interaction model without first understanding the user experience goals for a product—allowing a team to measure the success of the model and the individual design decisions you’ve made within the model. In the case of the travel product that my team and I are designing, we established metrics around the following goals:

你不能在不了解对一个产品用户体验目标的情况下创造一个交互模型，允许一个团队测量模型的成就，并个人设计决策你使用模型。

§  discoverability—Can users quickly find the model’s primary object and understand how to perform the actions they care about? Can they use the system successfully the first time?

可发现-    用户能快速发现模型的基本对象，并理解如何执行他们所关心的行为吗？他们第一次能成功的利用系统吗？

§  learnability—How long does it take for users to internalize how to use the system competently? Even consumer products often have a slight learning curve today. For example, my company just gave me a new smartphone, and it took me a bit of exploration to understand how to use all of its cool features—not to mention how to avoid draining the battery in three hours.

学习能力-   多久用户内化如何使用系统？即使现在消费者产品通常有微小的学习弧。例如，我们公司只给我一个新的智能手机，它花费我一点探索时间了了解如何使用所有有趣的特性----不提及如何避免在三小时内耗尽电池。

§  user efficiency and productivity—Once users are competent using the system, how easy is it for them to perform common or repetitive tasks? Can they perform bulk actions all at once, or do they have to perform dozens or even hundreds of separate actions?

使用这效率和产能---- 一旦用户有能力使用这个系统，用户执行同样或者重复任务的简单程度如何？他们能一次执行大量的行为吗，或者他们能执行一打或者甚至一百分离的行为吗？

§  system response time—Once users take an action, how long does the system take to respond? In a production environment, user efficiency and system response time combine to define the total task time. Designers have a responsibility to understand the expectations and constraints on system response time and design a product that meets or exceeds those expectations.

系统响应时间—一旦用户执行一个行为，多久系统开始响应？在生成环境中，用户的效率和系统响应时间结合来定义总任务时间。设计者有责任明白这个系统响应时间的预期和限制，并设计一个产品满足或者超越这些预期。

§  delight—How cool does the product feel to users? Do users like using it? How much do they like it—especially in comparison to other products? I set up a Customer Listening organization, and we’ll be systemically gathering this type of data—along with Net Promoter Score data—to drive the top five to seven product improvements each quarter.

乐趣--  产品让用户感到很酷吗？用户是否喜欢使用这个产品？他们有多喜欢它----特别是与其他产品对比下？我建立了一个消费者倾听组织，我将系统的收集这类数据---与Net promoter Score数据一起---来驱动每一刻钟顶尖的五到七产品改善。

Each organization needs to set specific targets against their metrics, but these have given us the insights we need regarding how we’re doing from the standpoint of product design. If we were measuring engagement, we would use different metrics.

每个组织需要建立他们指标的明确目标，但是这些给我们一个顿悟，我们需要就我们如何中产品设计的开始而论。如果我们是测量契约，我将用不同的指标。

Once a design team has defined an interaction model, they can—and, in my opinion,should—craft a framework that supports specific designs. A framework defines reusable design patterns and instantiates them into reusable design and development components that subsequently enable designers and developers to rapidly produce additional parts of the design. In my case, we have a team of a few designers and a few front-end developers working together to produce framework releases in a regular cadence. The framework includes all of the design patterns that multiple teams need, including title bars, accordion widgets, table formats, date pickers, and hundreds of other user interface elements.

Conclusion

“By first defining interaction models for our products, we crafted a product vision that … stakeholders and users could understand and rally around.”

Defining an interaction model is a foundational requirement for a digital system. By first defining interaction models for our products, we crafted a product vision that our peers, senior leaders, designers, stakeholders, and users could understand and rally around. When I showed our interaction model and application simulations to customers back in November, they wanted to move directly to talking about product schedules. Their question? When can I have this product? If you have any questions about creating interaction models, give me a shout!