Better Security Through UX, Part 2: Visual Design and Emotion

In Part 1 of this series, I introduced the theme that good user experience (UX) design can actually promote better security overall, by fostering trust and encouraging people to use their security tools more often. We looked at how Threat Stack approaches this topic through the lens of onboarding, or first-time use. Now we’re going to see how this theme plays out in the overall aesthetics, and visual appeal, of the Threat Stack Cloud Security Platform™.

Gorgeous graphics and crisp, beautiful typography are fine for brochure websites, but function and usability are much more important than aesthetics when it comes to digital products; after all, “form follows function,” right?

Wrong. Well, OK, mostly wrong. Certainly there’s a baseline standard of usability that a product must meet in order to succeed, and that bar is pretty high. But to dismiss visual design and aesthetics as secondary is to misunderstand something fundamental about how we humans work. Scientific evidence has begun to demonstrate that how we think is inseparable from how we feel (see the diagram below). And how we feel is a domain where aesthetics take the lead.

BSTUX2_ThinkFeelDiagram.png

Attractive Things Work Better

The visual design of any product can affect your emotions in several ways, including:

  • Conveying the product’s personality
  • Drawing associations between it and other things you like or dislike
  • Influencing your perception of how easy it is to use

It turns out that all these fuzzy connections on the emotional side can’t help but intertwine with what we tend to think of as our “rational” thinking, decision-making, and behavior — perception influences (or perhaps even creates) reality. As researchers in psychology have found, there are, ultimately, two big takeaways for anyone designing a product:

  • When we feel good about something, we perceive it as easier to use.
  • When we perceive something as easier to use, we are actually more productive with it.

In other words, as summed up by design luminary Donald Norman: attractive things work better.

With that in mind, let’s look at how we use the above principles at Threat Stack to craft an emotionally satisfying visual design that makes our users more productive.

Threat Stack’s Look & Feel

Our customers are busy people with a lot on their plate. We want to make sure that the brief time they spend each day with our user interface is pleasant and productive.

We’re also a cybersecurity company. Pause for a moment: what does the phrase “cybersecurity company” make you think of? I bet it’s something like this sampling from Google Image Search:

BSTUX2_CyberImages.png

Yeah… that may be the connotation that most of our industry is comfortable with, but it’s not really what we want our users to feel when they log into our app. So our UI takes a very different approach:

BSTUX2_TS-Alerts.pngThreat Stack’s Alerts Interface

By using a light, clean-feeling theme for our UI, we avoid the typical negative, fear-based connotations of the industry we’re in — remember, we want our users to feel good here, even if they’re investigating potential malicious behavior.

But we also don’t do this:

BSTUX2_MinimalExamples.png
On the left, DoINeedAnUmbrella.com. On the right, Dropbox.com.

Both of these examples are light and clean feeling. They’re also minimal and spare. That’s not a bad thing; they work very well for their own contexts. But our context is different, and the same type of design doesn’t work for us.

Threat Stack is never going to be an iPod or a Nest thermostat. Our users are people with some technical expertise, who are looking for control over their cloud environment. They need to see a certain amount of data at a glance, and when investigating a potential breach, they need to immediately dive into a large amount of detail. Our users appreciate the balance we strike with information density — enough to be useful, and hopefully not so much that it’s overwhelming. Our goal is to feel easy-to-use, but also to feel like a power tool in the hands of our customers.

Contrast & Association

Speaking of power tools, there is one area of the product where we “go dark,” as it were — applying a visual theme that contrasts strongly with the lighter feel everywhere else. That’s the TTY timeline shown below:

BSTUX2_TS-TTY_1.pngThreat Stack’s TTY Timeline Viewer

This is one of the most powerful tools we provide — enabling users to see the line-by-line details of what a given actor did in their system both up to and after an event that triggered an alert. And in this instance, the dark theme makes perfect sense, given what we know about our users: they tend to be very familiar with a command-line interface that looks just like this. We believe this association triggers a sense of “Ah, I’m home” — of being in familiar territory. And as a bonus, the contrast with the rest of our UI also reinforces the concept that with this tool, we’re peeling back the surface layer and giving the user a glimpse of what’s really going on under the hood.

Back to the Benefits

If we, as a product team, have done our jobs well, everything about Threat Stack comes together to create a great experience for our customers. And the positive mental state produced by that experience is the true win-win outcome — when our customers feel good about Threat Stack, clearly it’s nice for us, but it’s great for them as well. It means they can do their jobs confidently, understand their environment more fully, and stay engaged with the challenge of keeping their organization secure. We’re proud to be part of that.

References & Further Reading

I’m indebted to Stephen P. Anderson’s book Seductive Interaction Design (2011) for articulating many of the above ideas — it’s a great read.

Relevant sources cited by Anderson include:

  • Norman, Donald. Emotional Design, 2003
  • Gitte Lindgaard, Gary Fernandes, Cathy Dudek and J. Brown, “Attention web designers” in Behaviour & Information Technology, 2006
  • M. Moshagen, “A Blessing, Not a Curse: Experimental Evidence for Beneficial Effects of Visual Aesthetics on Performance,” 2009
  • A. Sonderegger and J. Sauer, “The Influence of Design Aesthetics in Usability Testing: Effects on User Performance and Perceived Usability,” 2009

The Google Image Search results shown above are from (clockwise from top left) www.nabr.org, www.entrepreneur.com, www.kcpb.com, and www.uwf.edu.