Cybersecurity In-Depth: Feature articles on security strategy, latest trends, and people to know.

Embracing Security by Design: Security Isn't a Pretty Picture

A starting point for secure UI and UX? Remember that security measures should frustrate attackers, not users.

Samuel Greengard, Freelance Writer

March 14, 2022

6 Min Read
An overhead photo of people examining printed mockups of user interface designs
Source: weedezign via Alamy

One of the reasons why cybersecurity is incredibly difficult is that it touches so many areas of the enterprise. While it's tempting to focus on data endpoints and intersection points, how people use, misuse, and abuse systems also has a profound impact on security.

"Design and usability are pillars for strong security," says Damilare Fagbemi, founding partner at Resilient Software Security. "The way organizations approach interfaces and usability has a major impact on image but also on whether everyone can stay safe."

Of course, user interface (UI) and user experience (UX) impacts numerous areas, including websites, apps, emails, text messages, and even physical documents. They can intersect with authentication methods, shopping carts, and areas as diverse as marketing and product support. It's also remarkably easy to forget that UI and UX affect employees who use systems and devices.

"Cybersecurity protections must be seamlessly incorporated into design processes," says Therese Schachner, a consultant for VPN Brains. "People require comprehensive, straightforward instructions for various tasks, including creating passwords and using multifactor authentication."

Dark Reading spoke to experts about the intersection of security and design. While UI and UX may seem like two distinct entities — and to a certain extent they are separate things — they're also inextricably linked. This article explores the visual elements that lead to secure design.

The Visual Elements Behind Secure Design
As organizations look to ratchet up security, one thing that's often overlooked (or even ignored) is secure design. Looks matter, but a website, app, or message must be more than just another pretty face. Various elements must help people steer clear of errors and actions that lead to security gaps and breakdowns. While no one wants to implement security controls, everyone recognizes they are essential.

A starting point for a journey into secure UI and UX revolves around a basic but crucial goal: "developing security that frustrates attackers, not users," says Amber Lindholm, head of design for Duo Security at Cisco. "The user experience for any security application can make or break the usefulness and security value of that tool. A good user experience is simple and easy to navigate, allowing the user to get things done."

Unfortunately, many design elements actually undermine security by creating enough friction to encourage visitors to abandon their tasks. For example, a password entry form that continually forces a user to start over after exact criteria aren't met may lead to a weak but acceptable password. If a logon procedure for an app is too cumbersome or requires constant password resets, people will switch off controls or circumvent them entirely.

Inconsistent colors, designs, workflows, and fonts also can wreak havoc on security. They can make choices confusing and bury the correct path. For instance, when all yes and no buttons on a Web page or app appear in a monotone color, there's a larger window for error. The lack of a basic explanation of a security element and instructions about how to use it can undermine good choices. In addition, it's critical to limit choices — or at least reduce unnecessary choices — particularly when a person first visits a site. This includes forcing users into such tasks as accepting push notifications or creating an account.

"Whatever design format you use, it has to promote security and avoid overwhelming people," says Tyler Klein, executive experience director at digital design firm Robots & Pencils.

The challenge is magnified when companies conduct business globally. "Different colors, shapes, and patterns have different meanings in different countries or cultures. You have to think about these elements carefully," he says.

Designs on Security
All design elements should point in the direction of strong but easy-to-use security controls. A primary objective is to avoid bypass culture. "The idea is to frustrate attackers, not users," Lindholm explains.

A great site, app, or element builds confidence, Klein says. It explains things clearly and displays security elements in an intuitive way. "You don't want any doubt in users' minds that they are doing the right things," he says.

A good example of secure design is a password creation box that provides instant feedback. As a person enters various letters, numbers, and symbols, the box displays a green check or a red X next to it. When it's used with a clear text viewer, that's even better — the user doesn't have to guess at what constitutes a good password or worry about what they're typing. In the end, the user isn't subjected to repeated failures and forced to start over.

Secure design also extends to emails and text messages. It can include elements such as displaying a partial account number or other nonsensitive information to help substantiate the validity of the message. A growing number of companies have also begun to use a security banner that displays important information, such as telling users to refrain from clicking links in their email or saying they will never ask for sensitive information over the phone.

The common denominator, Lindholm explains, is that a well-designed website, application, or electronic message brings clarity and attention to the right information at the right time. Critical information is highly visible in virtually every element, including the relative size or hierarchy of objects, colors and shapes, position on the screen, and white space. These elements, she says, "draw the eye or help a user navigate a screen or flow."

Into the Flow
Design experts say that good security follows a path called progressive disclosure. It aims to deliver the appropriate level of security controls at the right moment. More complex information or workflows appear only as needed.

For example, Klein says that a retailer might personalize an experience and allow a person to put things in a shopping cart with few security controls. However, when the person wants to make a purchase or interact with their account, they must log in. In a similar vein, a bank might make it easy to deposit funds into an account but require a customer to step through additional security hoops to pull money out.

Along the way, appropriate cues are paramount. Just as an elevator light shows that it has been requested and what floor it's currently on, best-practice design techniques keep users informed. This may mean creating a checklist with green lights as items are completed, or it might include text and email messages.

"When websites or applications don't follow these general rules, people have challenges completing tasks and make unexpected errors," says Lindholm.

As Fagbemi puts it, "You want to do everything possible to encourage the right behavior. Design elements combined with the right processes and workflows can lead to far better security."

About the Author(s)

Samuel Greengard

Freelance Writer

Samuel Greengard writes about business, technology, and cybersecurity for numerous magazines and websites. He is author of the books "The Internet of Things" and "Virtual Reality" (MIT Press).

Keep up with the latest cybersecurity threats, newly discovered vulnerabilities, data breach information, and emerging trends. Delivered daily or weekly right to your email inbox.

You May Also Like


More Insights