CTF IconLocal: Rough sketches

Location 3 - HughIMG_20150306_165133At the Circumvention Tech Festival in Valencia in early March, we held an IconLocal — an event to develop graphics as a community, in the style of the Noun Project. Digital security trainers (and trainers of trainers) who have worked in Africa, the Middle East, Eastern Europe, Latin America, and Russia joined forces with software developers and graphic designers for a day of developing graphics to communicate vital security and privacy concepts to software users.





We began the day with a round of introductions, a review of previous proposals for privacy and security icons, and an exploration of the challenges of developing useful icons. Trainers then shared the concepts which they felt were most challenging to communicate to users, and the metaphors which they used to communicate them. Here are the lists of challenging concepts, accompanied by useful metaphors (see right).


¬†This was followed by a “gallery crawl.” Participants went around the room viewing a series of user profiles developed at earlier OpenITP Secure User Practices events and by other organizations and people in the community (Second Muse, SecurityFirst, and Eleanor Saitta). They articulated each user’s specific needs, and added these to the profiles with sticky notes. (We will be presenting these profiles more in an upcoming blog post.)

IMG_20150306_150353The outcomes of these earlier activities were batched by theme (see right), then graphed based on how hard they were to communicate, and how important they were to communicate.

Below are the sketches which got the highest number of votes for a given topic, say “Identity un/verified” or “Transmitted encrypted.” Votes are indicated by a dot sticker of any color. (As you can see, Hugh’s one-eyed scorpion representing “malware” was a huge hit.)

While we were voting, we talked about what we thought was working in a number of these which could perhaps be combined into other ideas. Hugh’s icon for “device,” for example, was simple and yet pretty clear. So in a second round of sketches, Gus tackled using this shape in “device”-related concepts like “on a server” or “on my device.”

We also talked about concepts which we weren’t as sure would work. “Data” is usually represented in programmers’ own sketches to each other as what looks like a can or stack of cans, and Brennan used this image in one of his icons. But will this image communicate well to non-tech-types? We were advised by a mentor at the Nielsen Norman group that users ultimately learn the meaning of icons when presented with them consistently enough times, so there’s a possibility that if we use the image across a number of apps, they will.

Gus wondered whether the bubble sizes in Hugh’s icons should be reversed: ultimately, the part meaning “NOT (encrypted)” is the part we want users focusing on. This might be a good topic for user testing these icons. In later revisions, Hugh started making the bubble indicating status a little bigger, as you can see in some of these.

Transmitted encrypted 2 - Hugh Transmitted encrypted 1 - Melanie Stored time 2 - Melanie Stored time 1 - Hugh Stored remotely 2 - Melanie Stored encrypted 2 - Melanie Stored encrypted 1 - Hugh Spy 2 - Melanie Spy 1 - Brennan Sold 4 - Melanie Sold 1 - Brennan On server 1 - Gus On server 1 - Brennan On my device 1 - Melanie On my device 1 - Gus On my device 1 - Carolyn On my device 1 - Brennan Malware 5 - Hugh Location 3 - Hugh Location 1 - Melanie Location 1 - Carolyn In transit 1 - Gus In transit 1 - Brennan Identity unverified 2 - Melanie Identity unverified 2 - Brennan Identity unverified 1 - Hugh Identity 2 - Hugh Identity 1 - Melanie Encrypted clear 2 - Melanie Emergency 2 - Brennan












































































































Additionally, Carolyn and Gus made some icons for concepts which were not included in the list at the beginning of the day. Carolyn thought we needed icons for “censored” and “circumvention” (below left), and made a graphic which demonstrated getting around a wall.

Censored circumvention - Carolyn






Gus was inspired by a metaphor used by Yvonne, a Kenyan trainer who attended the IconLocal. When Yvonne teaches about topics related to trust, she explains: The first time you buy from a butcher, you need to check and see that his meat is fresh, so you go to his store to inspect it. Once you trust a butcher, you may ask him to deliver to your house without inspection. Gus sketched some meat-related trust icons influenced by the ubiquity of legs of jamon iberico in most Valencian restaurants (see above right).


Trainers’ metaphors for explaining trust and privacy are hugely important — particularly given that they confirm that concepts about keys, fingerprints, and certificates are among the most difficult things to get trainees to internalize. We tried to simplify these concepts, including “your half of the secret” (aka your key), “their half of the secret” (your correspondent’s key), and “bad secret” (meaning untrusted key, expired certificate, etc) in the list of referents. The team working on sketches struggled with this anyway, and voting didn’t indicate anyone had much confidence in the outcomes. Still, Carolyn and Gus worked off of a “friendship locket” metaphor, and Melanie made some experiments with a “secret diary” metaphor; here they are:

Your Half 1 - Melanie Your half - Gus Your half - Carolyn Their half - Gus Their half - Carolyn Bad secret - Melanie
























Here’s additional icons, which were not voted as highly as other ones created on that topic. But who knows — there may still be useful ideas here!

Stored-transmitted encrypted - Carolyn Stored time - Carolyn Stored time - Brennan Stored remotely - Hugh Stored remotely - Carolyn Stored remotely - Brennan Spy - Carolyn Sold - Carolyn On server - Carolyn Malware - Melanie Malware - Carolyn In transit - Carolyn Identity unverified - Gus Identity unverified - Carolyn Identity - Carolyn Encrypted clear - Hugh Encrypted clear - Gus Encrypted clear - Carolyn Emergency - Melanie Emergency - Hugh Emergency - Gus Emergency - Carolyn Destroy - Melanie Destroy - Carolyn Destroy - Brennan Contacts - Melanie Contacts - Gus Contacts - Carolyn






























































































The next step is refining the basic sketches from the event, turning them into SVG files, and then offering them for public use on the Noun Project’s site. Stay tuned for further progress!


Trackbacks & Pingbacks 1

  1. From Icons to help you talk about privacy — Responsible Data Forum on 24 Apr 2015 at 9:06 am

    […] Participants at the event came up with these results. […]

Post a Comment

Your email is never published nor shared. Required fields are marked *