Molly Wilson and Eileen Wagner battle the age old Christmas issues of right and wrong, good and evil, and how the messages we send through iconography design can impact the decisions users make around important issues of security. Are you icons wise men, or are they actually King Herod?

Congratulations, you’re locked out! The paradox of security visuals

Designers of technology are fortunate to have an established visual language at our fingertips. We try to use colors and symbols in a way that is consistent with people’s existing expectations. When a non-designer asks a designer to “make it intuitive,” what they’re really asking is, “please use elements people already know, even if the concept is new.”

Lots of options for security icons

We’re starting to see more consistency in the symbols that tech uses for privacy and security features, many of them built into robust, standardized icon sets and UI kits. To name a few: we collaborated with Adobe in 2018 to create the Vault UI Kit, which includes UI elements for security, like touch ID login and sending a secure copy of a file. Adobe has also released a UI kit for cookie banners.

Even UI kits that aren’t specialized in security and privacy include icons that can be used to communicate security concepts, like InVision’s Smart Home UI Kit. And, of course, nearly every icon set has security-related symbols, from Material Design to Iconic.

Many of these icons allude to physical analogies for the states and actions we’re trying to communicate. Locks and keys; shields for protection; warning signs and stop signs; happy faces and sad faces. Using these analogies helps build a bridge from the familiar, concrete world of door locks and keyrings to the unfamiliar, abstract realm of public- and private-key encryption.

When concepts don’t match up

Many of the concepts we’re working with are pairs of opposites. Locked or unlocked. Private or public. Trusted or untrusted. Blocked or allowed. Encouraged or discouraged. Good or evil. When those concept pairs appear simultaneously, however, we quickly run into UX problems.

Take the following example. Security is good, right? When something is locked, that means you’re being responsible and careful, and nobody else can access it. It’s protected. That’s cause for celebration. Being locked and protected is a good state.

Whoops.

If the user didn’t mean to lock something, or if the locked state is going to cause them any inconvenience, then extra security is definitely not good news.

Another case in point: Trust is good, right? Something trusted is welcome in people’s lives. It’s allowed to enter, not blocked, and it’s there because people wanted it there. So trusting and allowing something is good.

Nope. Doesn’t work at all. What if we try the opposite colors and iconography?

That’s even worse. Even though we, the designers, were trying both times to keep the user from downloading malware, the user’s actual behavior makes our design completely nonsensical.

Researchers from Google and UC Berkeley identified this problem in a 2016 USENIX paper analyzing connection security indicators. They pointed out that, when somebody clicks through a warning to an “insecure” website, the browser will show a “neutral or positive indicator” in the URL bar – leading them to think that the website is now safe. Unlike our example above, this may not look like nonsense from the user point of view, but from a security standpoint, suddenly showing “safe/good” without any actual change in safety is a pretty dangerous move.

The deeper issue

Now, one could file these phenomena under “mismatching iconography,” but we think there is a deeper issue here that concerns security UI in particular. Security interface design pretty much always has at least a whiff of “right vs. wrong.” How did this moralizing creep into an ostensibly technical realm?

Well, we usually have a pretty good idea what we’d like people to do with regards to security. Generally speaking, we’d like them to be more cautious than they are (at least, so long as we’re not trying to sneak around behind their backs with confusing consent forms and extracurricular data use). Our well-intentioned educational enthusiasm leads us to use little design nudges that foster better security practices, and that makes us reach into the realm of social and psychological signals. But these nudges can easily backfire and turn into total nonsense.

Another example: NoScript

“No UX designer would be dense enough to make these mistakes,” you might be thinking.

Well, we recently did a redesign of the open-source content-blocking browser extension NoScript, and we can tell you from experience: finding the right visual language for pairs of opposites was a struggle.

NoScript is a browser extension that helps you block potential malware from the websites you’re visiting. It needs to communicate a lot of states and actions to users. A single script can be blocked or allowed. A source of scripts can be trusted or untrusted. NoScript is a tool for the truly paranoid, so in general, wants to encourage blocking and not trusting. But:

“An icon with a crossed-out item is usually BAD, and a sign without anything is usually GOOD. But of course, here blocking something is actually GOOD, while blocking nothing is actually BAD. So whichever indicators NoScript chooses, they should either aim to indicate system state [allow/block] or recommendation [good/bad], but not both. And in any case, NoScript should probably stay away from standard colors and icons.”

So we ended up using hardly any of the many common security icons available. No shields, no alert! signs, no locked locks, no unlocked locks. And we completely avoided the red/green palette to keep from taking on unintended meaning.

Navigating the paradox

Security recommendations appear in most digital services are built nowadays. As we move into 2020, we expect to see a lot more conscious choice around colors, icons, and words related to security. For a start, Firefox already made a step in the right direction by streamlining indicators for SSL encryption as well as content blocking. (Spoilers: they avoided adding multiple dimensions of indicators, too!)

The most important thing to keep in mind, as you’re choosing language around security and privacy features, is: don’t conflate social and technical concepts. Trusting your partner is good. Trusting a website? Well, could be good, could be bad. Locking your bike? Good idea. Locking a file? That depends.

Think about the technical facts you’re trying to communicate. Then, and only then, consider if there’s also a behavioral nudge you want to send, and if you are, try to poke holes in your reasoning. Is there ever a case where your nudge could be dangerous? Colors, icons, and words give you a lot of control over how exactly people experience security and privacy features. Using them in a clear and consistent way will help people understand their choices and make more conscious decisions around security.

About the author

Molly Wilson is a designer by training and a teacher at heart: her passion is leveraging human-centered design to help make technology clear and understandable. She has been designing and leading programs in design thinking and innovation processes since 2010, first at the Stanford d.school in Palo Alto, CA and later at the Hasso-Plattner-Institut School of Design Thinking in Potsdam, Germany. Her work as an interaction designer has focused on complex products in finance, health, and education. Outside of work, talk to her about cross-cultural communication, feminism, DIY projects, and visual note-taking.

Molly holds a master’s degree in Learning, Design, and Technology from Stanford University, and a bachelor’s degree magna cum laude in History of Science from Harvard University. See more about her work and projects at http://molly.is.

Eileen Wagner is Simply Secure’s in-house logician. She advises teams and organizations on UX design, supports research and user testing, and produces open resources for the community. Her focus is on information architecture, content strategy, and interaction design. Sometimes she puts on her admin hat and makes sure her team has the required infrastructure to excel.

She previously campaigned for open data and civic tech at the Open Knowledge Foundation Germany. There she helped establish the first public funding program for open source projects in Germany, the Prototype Fund. Her background is in analytic philosophy (BA Cambridge) and mathematical logic (MSc Amsterdam), and she won’t stop talking about barbershop music.

More articles by Molly Wilson & Eileen

With a 10,000-branch network, MD & CEO Goel eyes significant growth opportunities to expand business and scale new heights.

Wiesbaden : Vieweg, 2007

Boston : Birkhauser, 2007

Akshara attempts to link two of India’s crucial cultural properties — language and crafts — and energise them in unusual ways.

India cancels intra-squad match with ‘A’ side in Australia tour for more net practice, focusing on Test series preparation

Rohit along with a large India squad will depart for Perth in two batches – on November 10 and 11 – and the captain may come back home for a while due to personal reasons.

Veteran cricketer Wriddhiman Saha announces retirement, last season in Ranji Trophy, ending a cherished journey in cricket

CRICKET | The defending champion will look to reignite its topsy-turvy campaign thus far with a dominant show against a side that has struggled to get going this season

Sai Kishore’s return boosts the visiting team; Ghadigaonkar & Co. will have to rack up big scores to provide meaningful competition

Rain is expected to play spoilsport once again; the host will be hoping its seniors deliver the goods against a formidable opponent

Both teams’ bench strength will be tested in this crucial encounter as some of the main players have been called up for national duty

Rahul made a hundred on his debut tour to Australia in 2015, a 110 at Sydney, but his overall performance Down Under remains scratchy, evidenced by an average of 20.77 across four Tests.

CRICKET | Teenager Raghuvanshi sets the ball rolling at the top of the order after visiting captain Poddar’s ill-judged move to insert the home team in

CRICKET | Kerala seizes control as the off-spinner becomes the only player to score 6000 runs and take 400 wickets in the tournament after his latest five-wicket haul

The duo’s 354-run stand for the fourth wicket helps Mumbai declare its first innings at 602 for four before dismissing five Odisha batters for 146 at the end of day two

The batter’s unbeaten 169 against Odisha in the Ranji Trophy marks his highest First Class score

Almost all batters make handy contributions as the host takes a 48-run first-innings lead; spinners Badoni and Mathur shine with the ball for the visitor

The duo’s 99-run partnership for the sixth wicket helps the host reach 340 for seven; the home team leads by 178 at the end of day two

The diminutive 32-year-old steered Australia A to 223 in reply to India A’s 161 on day two of their four-day match at the Melbourne Cricket Ground — seen as a bat-off for the Test spot left vacant by David Warner’s retirement.

Porel’s four-for and Sindhu’s three-wicket haul help the visitor bundle out the host for 221 before reaching 127 for three in its second essay at the end of day three

The host ends day three at 46 for no loss after dismissing the visitor for 250 in its second innings and needs 157 more runs to clinch an outright victory

The left-arm spinner’s six-wicket haul helps the defending champion secure a 317-run lead; Odisha in trouble at 126 for five after following on

After conceding a 233-run lead, the visitors slip to 66 for two when a downpour ends the day’s play in the post-lunch session; Nizar misses century

Many of them said they had not prepared thoroughly for AIPMT as it was only ‘an option’

Voices concerns that there are many physicians who are still on H-1B work visas even after staying in the US for over 15-20 years.

Her most recent physical exam in April was “unremarkable,” Simmons added

Lionel Messi and Inter Miami have another trophy, along with home-field advantage throughout the Major League Soccer playoffs

Physics World journalists discuss what excites them about the year ahead

The captain’s 173-run association with Sibsankar for the fourth wicket turns the tide the hosts’ way; Pradosh picks up three wickets

BCCI decision comes despite Pakistan Cricket Board offering special security arrangements, choice of venue; India favours having its matches outside Pakistan under hybrid model

Pradosh chips in with a half-century as the team reaches 217 for two in its second essay; the host clinches three points for its first-innings lead while the visitor gains a point

His 15th five-wicket haul results in Mumbai earning a bonus point following an innings win; Himanshu picks four as Swain, Biswal contributions go in vain

Saha’s fifty quashes hopes of a comeback by the hosts; Smaran, Shreyas and Manish take their side to safety after a shaky start; Mayank puts the onus on the batters to iron out their flaws

In the seven editions of the tournament so far, India has won the title twice, in 2016 (Singapore) and 2023 (Ranchi)

The PCB was told by the ICC that BCCI won't send its team to Pakistan after the decision was communicated to the world governing body.

India scored through Sangita Kumari (8th, 55th minutes), Preeti Dubey (43rd) and Udita (44th).

Badoni’s first game as skipper will be against Jharkhand at the Arun Jaitley Stadium beginning on Wednesday

India will focus on centre-wicket training at the nearby WACA stadium, where Australia will also polish their skills