How the lock icon can mislead you
The importance of iconography in communication and highlights how design adapts to changing user needs and preferences while keeping up with technological advancements.
When you visit a website using the Chrome browser, you may notice a small lock icon 🔒 in the address bar. This icon is meant to signify that the site you’re visiting is secure and using HTTPS encryption. But as it turns out, not everyone understands what the lock icon really means, and this has led to some serious security concerns.
The idea behind the lock icon when a site loads over HTTPS dates back to the early versions of Netscape in the 1990s. In recent years, Chrome has been a major advocate for increasing HTTPS adoption on the web to make the web more secure by default. As late as 2013, only 14% of the Alexa Top 1M sites supported HTTPS. However, today, HTTPS has become the norm, and over 95% of page loads in Chrome on Windows are over a secure channel using HTTPS. This is great news for the ecosystem; and due to the high adoption of Chrome, people are more familiar with the lock icon, which is meant to convey trust and inform site owners to upgrade their technology and use HTTPS for better security. The lock icon drew attention to the additional protections provided by HTTPS.
Users generally tend to associate the lock icon with privacy, trust, safety, and security.
However, users generally tend to associate the lock icon with privacy, trust, safety, and security when it indicates an HTTPS connection. According to Google’s research, only 11% of study participants correctly understood the precise meaning of the lock icon. This misunderstanding is not harmless as nearly all phishing sites use HTTPS, and malicious sites may display the lock icon to deceive users into thinking they are on a legitimate site. Moreover, some users may assume that the presence of the lock icon means that the site is completely safe to use, which is not always true.
For example, let’s say a user visits a malicious site that is using HTTPS and has a lock icon in the address bar. The user may assume that the site is secure and enter their login credentials, which can then be stolen by the attackers. This is a clear example of how the lock icon can be misleading.
Another example is when a user visits a legitimate site with HTTPS but sees a red triangle with an exclamation point instead of a lock icon. This icon indicates that there is an issue with the site’s security certificate, but many users may assume that it means the site is not safe to use at all, which is not necessarily the case.
Given these issues, the Chrome team realized that they needed a better icon that could reduce misleading cases and provide more clarity to users. They settled on a new icon that more clearly communicates the concept of “Site controls” or “Permissions.” The new icon is a gray circle with an “i” in the center, and it will be used to convey information about the site’s security, privacy, and other settings, as well as to access site permissions.
In conclusion, while the lock icon has played a crucial role in increasing HTTPS adoption, it has also led to some misconceptions about site security. By introducing a new icon that more clearly communicates site controls and permissions, Chrome aims to make the web safer and more transparent for everyone.
But this is not the only case; many examples show that change is necessary.
Icons have come a long way since the early days of computing. Initially, they were highly detailed and realistic, aiming to replicate real-world objects. For example, the save icon was represented by a floppy disk, as this was the most common way to save data at the time. However, as technology progressed and other storage devices became more prevalent, the save icon had to evolve to reflect this change. The floppy disk was replaced by a disc, then a hard drive, and now a cloud. In the current era, everything is auto-saved, so the need for a save button has become almost obsolete. The evolution of the save icon reflects how our needs and technology adoption have changed over time.
The Impact of technology on Iconography
Another significant factor driving changes in iconography is the rise of mobile technology. With the increasing use of touchscreens, icons needed to be simplified and larger to make them more easily identifiable and clickable. This led to the rise of flat design, which emphasizes simplicity, clarity, and minimalism, often using simple shapes, bold colors, and minimal detail. As a result, the detailed, realistic icons of the past gave way to more simplified, abstract designs that could be quickly and easily recognized on mobile devices.
In addition to changes in technology and design trends, user needs and preferences have also influenced changes in iconography. A prime example of this is the “Stop” button in web browsers, which has evolved from a skeuomorphic design with a red circle and white X to a more minimalist cancel icon, often a simple X. The change in design not only reflects the trend towards simpler, flatter designs but also makes it easier for users to understand the icon’s function, particularly on mobile devices. This highlights how iconography is continually evolving, adapting to changing needs and preferences, and becoming more user-friendly.
User needs and preferences shaping iconography
The evolution of the Mac OS mailbox app’s iconography is a prime example of how design has adapted over time, moving from more detailed, skeuomorphic icons to simpler, flatter ones. The app originally used detailed and realistic icons for the inbox and outbox, but as design trends shifted towards minimalism and line iconography, the inbox and outbox became difficult to differentiate, even with the use of different colors. In response, new iconography was introduced to better match modern standards. In current versions of the app, the inbox tray remains unchanged, but outbox features have become less prominent due to advances in technology and changes in user behavior and preferences. Modern email apps have adapted to these changes, and features like the outbox are no longer necessary.
Iconography Continuously Evolving
We must understand the importance of iconography and how it shapes our experiences with technology. One example is the evolution of the Microsoft File Explorer icon, which has undergone several design variations from 1993 to today. In earlier versions, the icon featured a magnifying glass, symbolizing the ability to quickly search for files in your system. However, in newer versions, the icon has been updated to multiple folders in a tray, emphasizing the importance of organizing files and folders effectively. This evolution of the File Explorer icon shows how design adapts to changing user needs and preferences while keeping up with design trends and technological advancements.
Additionally, as language and communication evolve, emojis have become an increasingly important part of online communication. New emojis are added every year to better represent the diverse range of people, places, and things in our lives. As designers, we must understand how to incorporate iconography into our designs effectively to convey emotions, messages, and add personality to text-based communication.
Design is all about moving on, accepting changes, and looking forward to what makes things better and more complete. And I believe Iconography (including emojis) is a crucial component of our daily lives as we rely on these symbols to communicate information quickly and efficiently. However, iconography is not static and is continually evolving to keep up with changes in technology, design trends, and user needs.
