Emotional Design for Productivity Tools
What’s the last time a productivity tool made you smile or even feel proud?
What a bizarre question. After all, shouldn’t we judge productivity tools, such as word processors, spreadsheets, and code editors, by how much they help their users get things done? What do pleasure and pride have to do with them?
I used to think that way until I re-read Don Norman’s book Emotional Design recently in search of inspiration for what’s next in the developer experience of Flutter, an open-source UI toolkit I work on. Originally published in 2003, Emotional Design is an underrated “sibling” of Norman’s classic UX design book The Design of Everyday things.
What is emotional design?
Emotional Design is a product design approach which focuses on satisfying human emotional needs instead of just supporting users’ cognitive processes. While there are tensions between these two goals, it’s possible to achieve both, so long as the product is intentionally designed for the three different levels at which the brain operates: the visceral, the behavioral, and the reflective.
First, the visceral level of experience comes directly from human perception, including visual, auditory, tactile and other senses. It’s how we could instantaneously see beauty in the original iMac design, feel excited when riding a rollercoaster, and experience stress when a smoke detector goes off.
Second, the behavioral level is closely associated with the functions and usability of the product. This is the domain of human cognition and the subject of Don Norman’s previous book The Design of Everyday Things. At this level, many influential design concepts, such as affordances, feedback, constraints, mapping, and conceptual models, come into play.
Finally, the reflective level is about the meaning the user finds in having the product as part of their work or life. It’s about the values the product represents and the culture the product fosters in its user communities. For example, IKEA reinforces the value of frugality and the spirit of Do-It-Yourself through both the industrial design of its furniture parts and the information design of its assembling manuals. This level of user experience is often subtle and doesn’t come to the user’s mind until it’s pondered upon.
What do emotions have to do with productivity?
One of the common reasons emotional design is often overlooked in productivity tools is that it’s not what the customers (which might not be the end-users) paid for. The affective elements in design could feel cosmetic and even superfluous to enterprise software buyers and IT decision makers. But is there a case for exercising emotional design in productivity tools? I think there are at least two good reasons for making such a case.
The first reason is that the user’s emotional state has an influence on their cognitive capacity, especially one’s ability to focus or to be creative. Norman pointed out that when someone is relaxed and happy, they’re more likely to see the big picture and think outside of the box. In contrast, the emotion of stress or fear can lead to concentration on the problem at hand until its resolution.
Positive affect arouses curiosity, engages creativity and makes the brain into an effective learning organism. (Norman)
The second reason is that the use of productivity software is increasingly discretionary instead of mandated. Many knowledge workers have at least some choices of the tools they use at work, as long as they deliver the results expected by their management. For example, software developers often can choose which code editor to use as long as their code meets the specification. Even when a specific tool is mandated (e.g., workplace chat application), the worker still has the discretion of how much they make use of that tool versus alternative ways (e.g., emails or video calls) to satisfy the same needs. When the design of a productivity tool goes above and beyond productivity and provides a pleasurable user experience, it’s more likely to enjoy discretionary adoption and sustained engagement. Early research from Microsoft on the adoption of calendar applications has made this point clear:
In discretionary use situations, ease and enjoyment are powerful motivators. (Palen & Grudin)
Emotional design and developer tools
In my area of work, developer tools, emotional design is rarely talked about even in UX circles. Yet, when I look closer, I see abundant opportunities to exercise this approach. So what should we think about when we consider the affective elements in the design of developer tools? Well, let’s start with the following factors: aesthetics, speed, and values. The first two are at the visceral level, while the last one is at the reflective level.
Aesthetics
The first thing that comes to mind is aesthetics. A prime example is the large number of specialized fonts for programming and a wide range of developer preferences over them. A particularly interesting phenomenon in programming typography is the use of ligatures, which join a sequence of several characters into a single logically meaningful symbol. For instance, the Fira Code font turns the “not-equal-to” operator from a two-character string “!=” to a single character “≠”.
Speed
The second thing to watch out for is the speed and responsiveness of the tool. This already makes sense from a pure productivity standpoint. After all, slow tools waste the user’s time and undermines time-sensitive tasks. Nonetheless, what’s often overlooked is the anxiety and boredom a sluggish user interface can induce. Moreover, the deficit of a tool’s performance can be experienced in a visceral way. For example, users find it unsettling when they hear their computers’ cooling fans blow at full speed. It’s a clear sign that the tools they use have made their computers struggle.
Values
Last, we should think about what values the design of productivity tools reinforces. To put it simply, values are expressions of what is desirable and what is not. But how do those values show up in developer tools?
One way is to problematize what might have been accepted but undesirable. Here is an example from my area of work. For a long time, cross-platform apps suffered from the stigma of being slower than native apps. Many developers accepted this tradeoff between the performance and the engineering cost of the app. Flutter, however, was founded on a new technical approach that drastically reduced, if not completely eliminated, this tradeoff. The new norm Flutter stands for is that cross-platform UIs should be rendered at 60 frames per second. To make it clear that anything below this standard is unacceptable, Flutter’s performance profiler calls out any frames that take longer than 1/60 second to render in an alarming red (see the image below).
Another way is to make it easier to achieve the desirable outcome and harder to do the opposite. In addition to being fast, another founding principle of Flutter is that apps should be beautiful. But how can we make it easier to build beautiful apps? One of the approaches Flutter has taken is to provide a large number of high-quality UI widgets based on well-established design languages out of the box and a simple API to put them together.
While we haven’t made building ugly apps harder yet, the possibility for technical interventions is there. For example, building tools that help developers identify and fix violations of UI design heuristics seems to be an active topic of research.
Where have you seen emotional design?
The concept of emotional design can expand the design space of productivity tools and inspire new directions for creating tools knowledge workers not only need but also want. Aesthetics, speed, and values are important but by no means all the factors we can consider while following this approach.
I’m sure there are productivity tools that have done this and might have done this pretty well. I’m curious about what you’re seeing through the lens of emotional design. So here is a question for you: Is there a productivity tool or a particular feature that you love, hate, or have a love/hate relationship with? If you’re willing to share, please leave a comment below.
