Security Vs. UX: How To Reconcile One Of The Biggest Challenges In Interface Design

Data breaches can be prevented. And good design can help.

Security Vs. UX: How To Reconcile One Of The Biggest Challenges In Interface Design

Data breaches are an unfortunate reality of doing business today. But they are avoidable. A whopping eight of out 10 of enterprise data breaches can be traced to human error. That’s not just a matter of careless users. That’s a design problem.


As designers, our job is to be the users’ champion. It’s not enough to make them feel safe when using our product; we have to ensure they are safe. Security must be deeply ingrained in the product–easier said than done.

Security isn’t just a design challenge, it’s a product challenge

Security often gets a bad rap for adding unwanted complexity to the product development process. It’s not uncommon for security measures to be tacked on at the end as an afterthought. What’s more, designers aren’t typically involved with technical decisions, especially at the operations level.

That’s why as user champions, we must act as liaisons between users and business stakeholders. Designers already know the importance of learning during the user research stage. So to persuade business stakeholders, we should call on as many security advocates as possible, such as fellow designers, product managers, engineers, and those in operations. Teach them how crucial security is to both business and user needs. Once everyone understands the stakes, they’ll all be on board.


Getting started with security UX design principles

Once the hardest part is over (ie. getting the team on board to include security in the product process), designers can focus on what they do best: create great experiences for users. A few considerations when designing with security in mind:

1. Know your users.
Knowing your users and their goals will always be key components of any design process. That’s especially true when designing a secure product. Some questions to ask: How sensitive are users’ tasks and the data collected? Are they able to share from the app? If the info is shared, will it cause personal damage? Financial damage? What if your users are B2B, but they are administering a system that’s B2C? Understanding the context of why and how someone uses your product is crucial.

2. Display trust to your users
If you’ve ever worked in e-commerce, you know it’s crucial to portray a business as trustworthy, otherwise people aren’t likely to buy. This is also true for systems and apps; people want to know your product is safe to use.


To accomplish a sense of trust before users even sign up, your company should adopt a public security policy that can be found easily on the marketing website. In this policy, explain why security is important and the measures your organization is taking to protect users’ data.

Also look to become compliant in PCI, ISO, SOC, or whatever is applicable to your product. Ultimately, it’s about proving that your company values security, not just saying it. (And please insist on SSL encryption. This should not be your only security measure, but seeing that green lock in the address bar is a strong symbol for users.)

3. Don’t leave users guessing.
I touched on stakeholder education as an important factor earlier, but user education is equally crucial.


Users often don’t fully understand security. It’s their information at stake, but many users believe that security is baked into a product.

As designers, we have to explain why security precautions are necessary (without being forceful or condescending) and why getting users on board creates a more secure environment for everyone. Which leads me to…

4. Master microinteractions.
But how do we explain the importance of security measures through design?


This is where mastering microinteractions is a must. Microinteractions are “single moments of communication that help users flow through your design.”

In the case of security, that means explaining why passwords must be eight characters or more during the signup process, or requiring a user to authenticate before changing account info.

Copy, graphics, and flow are all essential in this step. The microinteraction must be helpful, and flow naturally to nudge the user along. When writing copy, speak in a conversational tone, and create graphics that users can identify with.


5. Celebrate users’ participation in security.
When a user completes a task associated with security, celebrate his success with appropriate graphics and microcopy. Associate as many positive emotions as possible when someone interacts with security functions, and try to dispel any negative associations.

Let’s drill down deeper with a few examples.

1. Signups, logins, and other easily breached areas

Logins are the first wave of defense. They’re also easy to hack. Throw into the mix systems that don’t enforce password standards, apps that use emails as usernames, and users who simply don’t care about security, and you have a breach in the making.


To make matters worse, signups and logins have a reputation for being clunky, so users are typically left frustrated by the entire process. (I’m looking at you password field with no direction on character requirements.)

Designing these elements may not be glamorous, but they are crucial. Here are a few improvements designers can make:

Encourage the product side of your team not to allow email as the username. Logging in with email is generally considered user-friendly, but it’s not security-friendly. What happens if an attacker breaches the email? Then every system that the email is connected with is open to attack. You can still use email to recover a username, but using the email as the only username is a big security no-no.


During the signup process, implement password standards and encourage strong passwords. To avoid user frustration, show checkboxes next to mandatory requirements and a strength meter to indicate progress. You can also use playful microcopy to celebrate the user’s participation.

Apple’s account creation screen demonstrates best practices for communicating password requirements and progress.

Remove “confirm password” and minimize form fields during initial signup process. You don’t really need them, and they’re another field slowing down your user. When it comes to additional fields, speak with your sales team to understand the bare minimum information they’d require upfront. You might discover, for instance, that progressive forms help to better distribute what the user perceives as the effort he’s sinking into a product. For example, the initial signup form might ask for just an email address, then the next ebook download form asks for job title.

MailChimp’s trial signup screen only asks for email, username, and password. Additional user information is presumably gathered with additional product usage.

Add two-factor authentication. I’ll admit, this one can be an arduous process, but for systems that contain insanely sensitive information (email, design platforms, marketing platforms, banks, payment gateways, and so on), this may stop an attacker in his tracks. At the very least, it alerts the user that someone may be trying to breach her account, thus springing her into action.

Nice UX from Capital One: once a user is two-factor authenticated on mobile, he can set up a swipe pattern for easy login

2. User types and permissions

Another area where design can improve security is through user types and permissions.

User types and permissions can stop the spread of information. Hackers usually look for an admin-level login or machine to gain access to other data. But permissions can be revoked during an attack, which can minimize damage done.

Access to data should be limited based on what info a user needs to do a task. Product designers can take cues from HIPPA and the healthcare industry by allowing a user type to only view the info he needs to do his job. The less info he has, the less that can be stolen.


3. Share controls and default share settings

For products with a heavy collaborative component (like Google and Facebook), designing what and how info is shared can require some finessing. But any sharing poses a security risk to an organization, so it’s important to get this feature right. Here are some suggestions to get started:

Default to no sharing. To protect data in an app from the wrong people, default sharing to private or no sharing. With these settings, the info has a barrier of protection until a user deliberately chooses to share.


Design controls for who can share and where to share. Similar to user types and permissions, this feature lets the admin or user control who can share their document.

Design controls for who can see. Once something is shared, who can see it? Can she edit it? Can she also share? Controlling shared items is important. Consider how detailed Google’s sharing options are in Google Docs. While the design isn’t perfect, the functionality is all there.

Security is now everyone’s responsibility, and no single department should be responsible for implementing or maintaining it. While users should understand the importance of securing their own information, they should also be able to navigate your product as smoothly as possible.


So when designing with security in mind, remember: Who is your user, and how does security fit her needs? Internally, make the conversation about security and design, never one or the other.

For more on UX best practices, check out the free guide “Interaction Design Best Practices: Mastering the Tangibles.”


About the author

Gwen Betts is a senior product designer at Komand, a security automation and orchestration platform.


#FCFestival returns to NYC this September! Get your tickets today!