Iconography of Security

24ways.org 24ways.org3 years ago in #Typography Love255

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. Activity log from the Vault Secure UI Kit, by Adobe and Simply Secure.Cookie banner, from the Cookie Banner UI Kit, by Adobe. 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. Key, lock, unlock, shield, and warning icons from Iconic.A selection of security-related icons from Material Design.Security shields from a selection of Chinese apps, 2014. From a longer essay by Dan Grover. 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. flickr/Jim PennucciGPG Keychain, an open-source application for managing encryption keys. Image: tutsplus.comWhen 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. “Congratulations, you’re locked out!” 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. “Good job, you’ve downloaded malware!” 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…

Like to keep reading?

This article first appeared on 24ways.org. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply