Designing Icons Around Privacy

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.

7 thoughts on “Designing Icons Around Privacy”

  1. This is ingenious I must say however i think a little improvement could be made. The first icon shows the arrows pointing to me (I suppose I am the bigger one) but the rest shows the arrow pointing towards others. I assume the direction of the arrow should be consistent. So it doesn’t look confusing. If the arrow point towards others means they can see me and the arrow pointing towards them also mean they can see me then, the word SHARED should not be used instead it should be ACCESS. Its just my thought though.

    1. Good points yuneekguy. The arrows were pointed towards the subject for the “Public” icon to denote that the content may not be actively shared, but that they could access it. I definitely see what you’re saying about the difference between Shared and Access. I may try a double arrow for Public.

      This is a great question – I definitely have to ask the people I’m designing these icons for about this. Thanks!

  2. One modest suggestion in light of the amount of graft you’ve already put in: how about representing the views of people/groups from above? i.e. an aerial view where ‘you’ is always at the centre in relation to others, as this is the common perception of your own space. Other groups could be represented around the centre in layers orbiting the middle.

    Might open up some interesting graphical possibilities but I suppose the main challenge will be representing the human form from above. Over to you I guess but hope this was useful.

    Great work as usual, keep it up.

  3. I love the concept. I’m not sure it’s clear enough (or maybe even consistent?) what the difference between solid black, solid gray, outline gray and solid white is. I wonder if all of these actors/states should be in each diagram, too?

    If outline gray is “public” and solid gray are people in an “extended” network and solid black are “friends” (or specific people), then all actors would be represented in each diagram and whoever has “access” would be in the main “circle.”

    Shared Publicly: “me” + all actors in a circle
    Shared Specific People: “me” + all actors in the circle except outline gray (public) and solid gray (extended) outside
    Private: only “me” in the circle, everyone else outside
    Shared Extended Network: “me” + all actors in the circle except outline gray (public) outside
    Shared Group: “me” and two solid black (friends/specific people) in their own circle all in the main circle and all other actors outside
    Shared Friends: “me” and solid black (friend) in the circle, all other actors outside

  4. I agree with the step towards the ERSB method of extra information.  This would help define specifics without a needing a lot of different icons. 

    As for your issue of blocking: have the arrow “Bounce” off of the Blocked item.  If needed, add a halo around the item to emulate the concept of a force field (the block). This wouldn’t need to go all the way around the icon, but could be a short arc similar to the Tap of the Tap Icon from Cue.

  5. I might be out of step with the rest of the world, but I think of access/privacy as ripples or concentric circles surrounding me.

    Dot or circle in the center is me, next out; family, then friends, then co-workers, then acquaintances, then public.   The farther away your circle is, the less access.  

    There are spider-web-like tracks OR pie-wedges; that go from me in the center in a line out to the edge for specific activities.  Or lines delineating extended networks or friends of friends.

    Where this ceases to work for me is when you skip a circle, usually co-workers, and second most often, family members.

Leave a Reply

Your email address will not be published. Required fields are marked *