The couple months ago a person contacted me to help them design a small icon system for an academic paper. The icons were needed to communicate different online privacy settings when sharing content or information. Communicating levels of privacy is far more complex than the simple nouns or verbs normally symbolized in icons. The set was small enough in number for me to take design them outside of my work hours. What I’m showing today are wireframes of the icons to communicate the general direction and explain the structure/rules behind this system.
The six different forms of sharing were: public (available to all), private (available to no one), shared with your friends, shared with your extended network (friends of friends) shared with groups (classmates, co-workers, etc.) and shared with specific people of your choosing. In addition, each form of sharing could have special attributes (such as the shared content can be available to advertisers) or combinations of various attributes. Additionally, these icons should take up a small profile to avoid being burdensome to the interface it resides in. Accommodating all of these issues proved difficult.
The first step was to concede that an icon-only solution was a fool’s errand. There was simply too much information to communicate with symbols alone. It became clear that the icons could not just be icons. Instead, they would look more like ESRB ratings. While no one will espouse the beauty of the ESRB rating system, few complain about the clarity. The difference is, the ESRB icons devote a considerable amount of space on information that is not about the rating.
There were three main challenges in designing the icons. The first was how to create a system to communicate the concept of “you” in relation to others. That was far more difficult than it initially seemed. Second was how to present the idea of networks (friends, non-friends and groups). The last main challenge was how differentiate something that is explicitly blocked from people to view as opposed to simply not sharing it with certain people. I am still unsure how clear these ideas can be articulated with symbols, but I think these icons head in the right direction. The subject (or “you”) is always larger than any other element in the icon. The subject’s friends are in full view (hence fully opaque) as opposed to people outside the subject’s network. When content is not shared with an individual, they are grayed out. When content is unavailable to specific people, a line (or wall) blocks their access.
Icons for this purpose should to be small, yet clear since they play a fairly minor role an interface. Anyone that has read about my process of designing Iconic and Cue knows that legibility plays a large role in how I design icons. Therefore these icons are designed for a maximum scale of 240×200 pixels and a minimum scale of 120×100 pixels.
I am at the point in the design where it would be useful to share with the community at large to get feedback. I’m uncertain if it’s worthwhile to go through a visual design pass—I would really like to hear people’s thoughts on that.If you have any thoughts on the issue of love to see you add them to comments below. I will be making the final icons available by PDF to download and use however you so desire.