Defuse 2019: Perverted by Language.

I spoke at last year’s Defuse. Defuse is an annual design event where 12 speakers have five minutes each to present on a topic. Speakers have no control over your slides which progress every 15 seconds for 5 minutes.

Talk themes

In this talk I wander around the meaning of words, my difficulty with understanding, and banged the old drum against designers love of icons over words. I’m saddened to report in 2020 that interfaces are still loaded with hieroglyphics nobody can understand.

Public speaking

I am not a good public speaker. I love a metaphor and aim to be unambiguous but I often lack clarity when it comes to delivery. This is why I prefer to write things down. I hate writing, but i think it is a necessary evil for destroying the uncertainty. With verbal communication you have to rely on everyone’s interpretation of what was said being aligned.

Clearly nervous man talking to a full Sugar club

Big thanks to the Laura Nolan for making me practice. This would have been a train wreck otherwise.

Design Values: How I learned to start worrying and love the (defused) bomb.

In 2017, I narrowly avoided being part of the worst data catastrophes in human history. The Equifax scandal affected an estimated 145 to 147 million Americans. Hackers got access to sensitive consumer data including names, Social Security numbers, birth dates, and addresses. As relayed in the excellent book Future Ethics:

“A further 209,000 credit card numbers were taken. After nudging a couple of executives towards retirement and offering credit monitoring to affected citizens, Equifax is still, at the time of writing, a $16 billion company, valued just 4% lower than pre-leak levels. The consequences of identity theft fall more on consumers than the companies responsible.”
2020, Cennydd Bowles

Equifax was exactly the kind of name you didn’t want to be associated with your security product in 2017. But, let’s rewind a bit to the halcyon days of 2016.

Me in 2016.

In 2016 I married my deadly wife. Other things happened in the world too, but none of them are really newsworthy. I was at Synchronoss  as part of a small team working on the redesign of an identity proofing product called Universal ID.

The simple version had limited verification and required fewer steps (and with that came less design). The advanced version was a bit more interesting, and presented some good opportunities for design. Designed for government bodies, hospitals, and financial institutions meant robust security and smooth integration with identity verification services. We were a decent team with good intentions. Unfortunately, you can likely guess, our partners that would run these critical identity checks. I’ll give you a hint and say it rhymes a little with equine tax.  

To hell with good intentions.

It’s a hard sell to say trust us with your personal information when you are giving that information to someone else. In mid 2017 the team decimated. My position felt uncertain with very little work for me to actually do. 

I had worked with Synchronoss as a consultant and later as an employee for a few years, but without a team the environment I was in was isolating. The design team in Dublin constituted of me and one other person.

The nearly men.

Nearly everything I worked on in Synchronoss died at some point before release. There were many reasons, and some of the work came back to life over time, but a few years of this can drain you. Incidentally, A PM joked that we only get brought in to officially kill projects that had grown too expensive. It started to feel that way. Like Kind Midas, I had a sparkling shit touch that brought death to projects. 

A shift in thinking about work.

I began to reevaluate the kind of work I was doing. I was in a decent job. The money was good but the work wasn’t demanding or especially rewarding. Universal ID seemed dead and I made the decision to start looking and move on.

I am proud of the work we did at Synchronoss. We campaigned and fought to build something inclusive in Universal ID. We fought to eliminate optional questions during the registration flows by tracking down the business rationale for every request we made of our users. The portal design followed a mobile-first approach with a focus on loading quickly. Speed and efficiency were paramount. The needs of people with different abilities and ways of thinking played into how we thought about the product (we anticipated a diverse audience). 

We had cool ideas informed by research for making authentication not the worst thing in the world. One was to use the microphones to detect ambient noise as a security measure. Another utilised bluetooth to detect when you were near your device. These measures were to satisfy the technology averse doctors that would otherwise hack the system. Apparently, doctors tend to have other things on their minds than setting secure passwords.

 My love for the practice and enthusiasm for the work had waned. The key question I began to ask myself around the time:

Am I causing harm?

I judge myself by the work I do and by the impact it has on the world. Therefore, I don’t identify myself as a designer, but as a person first and foremost. This is modern-day Eoghan speaking. Back in 2016 I probably didn’t think like that, and I certainly never articulated these thoughts to anyone (especially myself). 

I am thankful today that this did not ship. There is an alternative reality where the breach doesn’t happen and the project ships. In that world I am the guy who designed the thing that leaks tonnes of personal data for UK residence. In this universe, John Oliver calls me an arsehole during the whole show he does on Equifax.

I focused on the wrong things. Focus was not my strongest point back then. It is not my strong point now, to be honest. I had fallen in love with building the thing, I had not considered the risks.

This is not a question of being clever, but being thoughtful beyond failure and considering the impact if you are successful. What then? One way of staying on course is to keep in mind why you are doing what you are doing. Why is the driving force behind the goal. Why drives the mission.

Remember the mission.

The “smartest man in the world” fell in love with the problem he was solving. Richard Feynman continued to work on the atomic bomb and devastation was delivered even after the threat had gone. Project Manhattan was set up as a nuclear arms race with Germany. Incidentally, Feynman was even meant to go on the plane that dropped the bomb, but the bomb was so successful they decided they didn’t need a scientist.

The bomb was dropped on Hiroshima on August 6, 1945. After the End of World War II in Europe. The devastation was incredible with 80,000 people dying in Hiroshima that day alone.

“Having run this tremendous race and then at the end of it concluded that it wasn’t all that worthwhile. ”

Values you set.

I don’t judge Feynman for this, but it is difficult to excuse him. For me, it resonates as a cautionary tale. I happened to avoid my part in the biggest data breach in history, but only through circumstance. I’ve always been a lucky beggar. I too can focus on what I am doing and forget why I am doing it. 

In reality, it comes down to the values you set out during your time on this planet. You cannot have values, if you first don’t value yourself. This is to say people are valuable, and human centered design is about humans first. Additionally, there is a compelling argument that we should be thinking Earth first, but that is a topic for another day. For now let’s talk about you, your value, and values. You need to value yourself.

Value yourself.

I was underpaid for the work I did for many years. I undervalued my opinion, contribution, and probably myself. This low opinion of myself is partly an Irish thing. We’re taught not to take a compliments, and I find hard to accept praise to this day. Meaning, we should accept when someone says something nice. Dismissing recognition is a rejection of others. Knowing this, it should be easier to accept praise. The alternative is just rude.

Backup & Transfer #OldWork

I worked as part of a small design team tasked with the redesign of Backup & Transfer for Android & iOS. Backup & Transfer is relatively straight forward white label app used for backing up and transferring data between phones.

This was back in 2015 or 2016. We knew from research that some of the issues faced came down to trust, and communication. At the time, Google had just introduced the idea of asking people to give apps permission to the data on their devices. App developers were able to pillage everything freely up till that point.

Although it seems crazy now you could pull all the contacts, messages, and photos, off someones phone pretty much without asking. It was declared in the manifest file when you downloaded an app and never mentioned again. That was the landscape for Android back then. No consent or consideration for people or their information. How times have not changed.

Animation of Backup & transfer application on a phone. Display shows a list of items selected such as contacts, photos for backup to the cloud
Michael Rickard was the lead visual designer on this, and made this fancy animation.

Backup & Transfer required access to everything. It needed trust.

You cannot back up or transfer data if you cannot get access it. Backup & Transfer only worked if you granted the app permission to the data on your phone. This required some people to trust the app. Others were more cavalier and just hit ok on everything.

Old visualisation showing click paths and steps that were tested for usability using remote unmoderated participants
Some visualisation of research findings. Way over the top.

Permission Priming.

The unfamiliarity with permission requests meant that we needed to educate upfront to say why we were asking and demonstrate the value of granting permission. Permission primers are common now, but at the time we were all trying to figure this out. Both Android & iOS presented some unique challenges.

Personal Cloud Animation showing Value proposition for Backing up Mobile Phone Data
More animation and visuals by Michael Rickard for Personal Cloud that shows some of the priming for what is to come. We contextual requested permission at the point where they selected file types to backup.

iPhone users were familiar with permissions, but the platform has a very strict policy around requests. In effect, you only had one chance. When a user denied the request there was no way to ask again, or update these settings without significant effort and knowledge on the users part to grant these permissions.

Android on the other hand was more lenient. You could prompt people more than once. However the dialogs that requested permissions were quite technical, and frankly scary. Also, they were new and unfamiliar.

If you want to learn more about this UserOnboard is a great resource for learning about primers, and onboarding. I especially enjoy the tear downs that he does.

White label?

White label, for those of you who may unfamiliar with the term, simply means companies like Verizon and AT&T could add their own brand element to this app. Typically, things like logos, colours, typography were variable. Fundamentally, however, the apps were the same as far as functionality and user experience.

This is part 3 in the series of old work. Here you can see parts 1 & 2:

Don’t make me (not) think. Designing responsibly.

Steve Krug’s famous call for clarity is sensible and easy to understand. His book Don’t make me think deserves its place as a design classic. As a primer it is useful to understanding how other people think. Touching on how cognitive barriers can prevent users from achieving their goals. Don’t make me think suggests a path towards reducing friction. Adopting it blindly as a rule is dangerous.

A lens on the past.

This book came out in 2000. Back then, computers were unfamiliar alien objects with impenetrable interfaces. The internet was niche, and often little regard was given to the actual experience. The space jam website from 1996 is a beautiful artifact that shows how things were at the time. Don’t make me think was a needed clarion call to making digital things more usable.

How we think.

Humans are surprising, and diverse of thought. Technically savvy people think in a way that is frequently far removed from the rest of societies expectations. To massively generalise, engineers understand processes, logic, and think in systems . Regular Humans have systems too. They just don’t follow the implementation models of software. Designs role is to make systems behave how the people using them expect them to work.

The conceptual model.

This isn’t the same as how things actually work. It’s a subtle and important distinction. A good real-world example can be found in your kitchen. If you ever set your oven to a high temperature to get it hotter faster you have (probably) fallen into a trap. Most ovens, like thermostats, heat at the same rate. It’s a reasonable misunderstanding. The conceptual model you hold of how you think something works doesn’t line up with the reality of how it actually works.

There are times when you can be right in understanding the concept of how something works in one situation, but wrong in a virtually identical situation.

Take music as an example. Playing a song from your phone connected to a speaker with Bluetooth is different than playing over wifi. Bluetooth acts like an invisible wire that tethers the phone to the speaker. Playing a song over wifi cuts this tether and effectively reduces the phone to remote control.

When is it okay to trick and deceive people?

These deceptions exist in lots of software. To give the impression of speed, Apple show a screenshot of the users desktop when they power on their computers. Likewise, Twitter “works” when you are offline.

Picture of a magician turning the words interaction designer into distraction engineer
Interaction Designer is an anagram of distraction engineer. Illusionist image by sobinsergey

Don’t believe me? Try it this yourself. Go into airplane mode and like some tweets. It will work without an internet connection. A way nicer way of handling things than popping up an error. As a result, the action is only applied when you go back online but that doesn’t matter. Twitter assumes success, and handles failure.

Feeling fast. Speed as deception.

There is a reason why you walk so far to collect your bags when you get off an airplane. This walk is designed to occupy you while they unload the plane. People hate waiting. Perceived efficiency is often as good as, if not better than, actual efficiency.

Make it easy to use.

This seems a noble goal. That said, there are times when cognitive ease is bad and friction is good. Sometimes you want to engage what Daniel Kahneman and Amos Tversky called System 2. In essence, thought is divided into the 2 systems. System 1 is automatic and quick. System 2 is slow and deliberate.

Forming design.

Seemingly small design decisions like the positioning of labels with input fields can serve to slow down or speed up people when they are entering information on forms. Using a single checkbox for decisions puts the burden on the person to understand what the impact is. This is utilised as a dark pattern to manipulate and trick. A simple cheap solution exists in the form of radio buttons which spell out the decisions without requiring cognitive leaps.

As an aside, if you want to learn more, read the book that Michael Lewis wrote instead of Kahnemans. It’s far more fun and way less academic than Thinking fast and slow. Personally, I’ll take a love story over a science journal any day.

Rules of engagement.

The Privacy by Design guidelines by Ann Cavoukian are an interesting and often cited source worth mentioning. There is criticism that the guidelines are vague, favour corporations, and are difficult to adopt/enforce. This is probably valid, but a little harsh. Personally, I see the guides as a decent framework that can serve to discuss values. The European General Data Protection Regulation (EU GDPR) incorporates these guides.

Privacy by Design.

  1. Proactive not reactive; preventive not remedial
  2. Privacy as the default setting
  3. Privacy embedded into design
  4. Full functionality – positive-sum, not zero-sum
  5. End-to-end security – full lifecycle protection
  6. Visibility and transparency – keep it open
  7. Respect for user privacy – keep it user-centric

Brave new world.

As a tool these guides can help to ensure the impact on people is considered upfront. It can at least facilitate the conversation. Like Neil Postman predicted, we are all amusing ourselves to death. So, we’ve given up our privacy and let companies look deep into our lives. More than we probably should.

It is absurd to say we understand what we are giving up. Companies claim we are willing participants, but that is clearly a deception. Honestly though, do you really trust Jeff Bezos?

Your rules and my rules are likely different. We are all moral creatures. As such, you are welcome to disagree with me, and I often contradict myself or otherwise fail to live up to the standards I set. But it is worth considering your impact on society.

Price of success.

I am in a very privileged position in that I can determine the kind of place I work, and the type work I do. I have worked on things in the past that I wasn’t proud of. Honestly, when I was starting out I didn’t give enough thought to the actual impact of the work I was doing.

Personally, I don’t really want to work on addictive software that nudges people towards compulsion, depression, and isolation. I mean, I wasn’t designing bombs, but I did work on some questionable products that treated people as means. It’s all very well to moralise on this now that I can afford to, but as I have gotten older I am more interested in this stuff.

Destructive innovation is the term for things that get destroyed by progress, and is seen as the cost of doing business. Amazon killed bookshops and ironically brought them back in 2018. We don’t consider the bad side of what could happen if we are successful when designing products.

Sometimes make me think.

Cennydd Bowles has written an incredible book called Future Ethics. Watch Cennydd speak over on ethical.net. He makes a more compelling case than I can for when it is important to make people think. The book is essential reading for anyone interested in Ethics. It is not preachy in the slightest, and cleverly frames ethics as a constraint. Designers love and understand constraints.

In the book he contradicts the idea of data transparency. The case instead is for making data more material and visible. If we could see information flow, we would be better informed on the exchanges we were making with people our data. He also keenly articulates the need to widen the net when considering stakeholders in our design. AirBnB serves as an example of something that is well designed for two specific groups (the host and the guest) but bad for the local community. Dublin has felt the downside of AirBnb immensely.

Data Lists made visual. #OldWork.

Data lists, nodes, heads, and tails. These were all foreign objects to me at the time and to be honest my grasp of them today is still a bit wooly.

The wikipedia version: A singly linked data list is a type of linked list that is unidirectional, that is, it can be traversed in only one direction from head to the last node (tail). Each element in a linked list is called a node.

This is part two in the series of old work I am posting here. You can see part one here. In effect, this is one of the first pieces of work I did after graduating from the Institute of Technology Blanchardstown. This is now part of TUDublin. So, it is fitting that one of the first paid gigs came from them.

Motion graphics.

Employed as a study aid to teach the concept of creating data lists, essentially the objective was to support students in grasping a complex unfamiliar concept. Typically this required the lecturer to conduct a white boarding session for each student before they grasped the concept.

In total ten videos made the series, which myself and Daire put together over the course of five weeks using a combination of Apple Motion, and Flash. The result, it would be fair to say, skews young. We had in our mind that they could be used to teach kids. The college runs boot camp in the summer to teach children to code.

The lecturer Arnold provides the voiceover, and had to teach us the fundamentals first. So, we got the white boarding lesson, and it did indeed take a few times to catch on. Overall, the end result isn’t bad for the five weeks given to learning, scripting, motion graphics and editing.

Visualising data: Creating a list

The videos serve as an introduction to people getting their heads around this topic. The metaphor of a train is one that Arnold uses to teach students the data lists concept, so we ran with that.

Advice for UX graduates: Be nice. Be curious. Consider what you want.

Students and UX graduates sometimes ask me for advice around getting into the industry. This is all very flattering, but it is a tricky thing for me to answer.

Hello imposter. May I look at your qualifications please?

No, I do not have a qualification in UX. I began my career working as a frontend dev building WordPress and Joomla sites, and I became interested in UX as I wanted to more involved in the decisions on what was being designed.

Frankly, It has been a while…

Time has done its thing. It has passed. With this passage of time, my perspective on the realities of being a graduate are fuzzy at best. So, be aware that I definitely don’t remember what it is like accurately, and it should be stated that I am an unreliable narrator at the beast of times.

Nice if you can get it.

Fundamentally, I consider timing, and luck crucial to any success I have had in my career. Chance and circumstance can be the difference. This is the forgotten reason why some people are successful and some other people are not. Even when both deserve to be.

A healthy work ethic and not being a total dick also helps to ensure you take opportunities that come your way. Additionally, it probably helps that I am sadly what is considered the default in society. A straight, white, male.

Be curious.

People exist that have a natural interest in the world. They like to know how everything works, and don’t need to hear this. For the rest of us, it is worth realising that you can choose to show interest.

Attention is the gift the listener gives when someone is speaking. Active listening is more than being quiet when someone is talking. You can decide to give your attention. Sometimes you don’t want to. That’s where the cost comes in.

Faking it.

Here’s a little trick I play on myself. Feigning interest in something forces me to find something I can relate to. This deliberate effort serves as a hook. For me personal investment is essential. Design is for other people, and finding ways to relate to the work makes it so much easier.

Some good, some bad.

The expectations now are probably much different than they were when I graduated. That said, some things probably haven’t changed. Companies are still looking for graduates who are able to do production work and “hit the ground running.” Good companies understand that experience and skills are not the same thing. Bad companies don’t care.

Your first job can inform the next one so it is a good idea to research and plan your career path. I didn’t do this, and relied on luck and the ability to drunkenly hustle an internship at a defuse event in 2011.

Big companies.

Big companies realises that people starting their first role in UX need to be supported. Not to say that there are no expectations on graduates when they start their first role. There are. However, graduates often tend to generate a level of expectation upon themselves that is unhealthy.

Agencies.

Agencies can take advantage of this expectation. They love a hungry grad coming in and working overtime. Agency work often expects this, but this way of working can lead to burnout, stress, and late nights. That said, It can also be a lot of fun, and a great way to learn how to do lots of different things. So it depends on what you want.

Practical tips:

Trying to be a good ancestor, here are some bits I’ve related to students.

Demonstrate an interest in design.

This may be obvious. However, it is important to show you care about design, and take an interest in what’s happening beyond graduation.

Work on your communication skills.

You need to be able to communicate your ideas clearly to get your point across. As it happens, other people can’t see inside your head.

Know the value of soft skills.

Soft skills are hard to acquire. Core skills like reading and writing can always be improved. Make friends with your local library. Additionally, I recommend you read, watch, or listen to stuff by people like these fine folk:

  • Erika Hall @mulegirl
  • Dan Saffer @odannyboy
  • Sam Ladner @sladner
  • Don Norman @jnd1er 
  • Kim Goodwin @kimgoodwin
  • Abbey Covert @Abby_the_IA
  • Dan Brown @brownorama
  • Christina Wodtke @cwodtke
  • Alan Cooper @MrAlanCooper

This is not extensive by any means, but you could do worse 🙂

Meet your design community.

And, this advice predates COVID but online events can be alright too. Typically includes free food and drinks Usually coffee and pastries for early ones, or beer, wine & pizza for later ones.

Finally, I wrote up some practical tips before on this site. I cannot bear to read what I thought three years ago, but maybe there are some useful nuggets here:

Icon fonts and Sketch. A single source of truth.

Much has been made of utilising icon fonts. I don’t want to go into too much depth of whether they are appropriate, or better than SVG in this article. Instead I would like to share a way for designers to use icon fonts to improve their workflow. First an overview around implementation.

Trust your developers

I really don’t care if icon fonts are used to deliver icons. You can use SVG, or PNG. It doesn’t matter to me as long as this criteria is hit:
– The performance is optimal
– It looks good everywhere
– It doesn’t impact negatively on people with different needs, such as those using assistive technology (A11Y Y’all).

It’s an implementation detail

As such, it falls to engineering the determine the most appropriate solution. If, however, engineering are already using icon fonts, or you are working on white label solutions this article might be helpful, and provide you with some workflow tips.

Be a D.R.Y. aul yolk

D.R.Y. is a acronym used by engineers. It means don’t repeat yourself. I want to make a case for designers to think more like engineers for a change. Don’t worry, no coding is required. This principle boils down to reusing code, instead of rewriting it. It’s pretty fundamental. Write a piece of code once, put it into a function, and call the function wherever you need it.

Say no to manual labour

Thanks to Sketch, much of the manual processes required to produce screens has been eliminated. Nowadays, the dull UI production of screens is a distant, yet vividly horrible, memory. Symbols and styles reduce monkey work tremendously, and allow for automation to take place. Don’t. Repeat. Yourself.

Some context to the bad old days

In the rare auld times, you would have to manually design and maintain each screen. It was an art of pressing Cmd+C followed by Cmd+V. Doing that today is not just inefficient–It is also very boring, and leaves you open to making mistakes.

If a component appears on more than one screen it deserves to be a symbol. If a component appears just two times (unsymbolised?), you double the risk that your design will be out of sync. You need to update both components if there is a change. This risk increases and multiplies with each instance in the design. Remember: Don’t repeat yourself.

What is good about icon fonts

Icon fonts hold all of your icons in a single font file. This means that you have a better chance of achieving consistency. Done correctly, you will have a single source of truth for icons that both design and engineering can reference. I’ll try to communicate a few ways that this can be valuable.

Be consistent, and avoid death by duplication

Often in products you see a variety of idioms used in the design. There can be multiple different icons in place that do the same job. This means that people need to first discover that two icons represent the same thing, and store this information in memory. Then they have to recall this quirk each time they return to the interface. This is stupid, needless, and makes the product just a little bit more complex.

You may argue that this is not that big a deal. You’re actually (sort of) right. In isolation it is not. But, think of it as a small snowball rolling down a hill. It’s accumulating little issues along the way, increasing not only in size, but in velocity. By the time it becomes a big deal, it is too late. You might even have a metaphor, before you are crushed by an avalanche of little inconsistencies.

Here’s a good post about applying recognition over recall by our friends at NNGroup, and understanding the principles of cognitive load and cognitive barriers.

An example of “The Frankenstein effect”

Let’s take Facebook as an example. In the mobile app notifications is represented as a bell icon. If you visit their mobile website it uses a globe icon for notifications.

screenshot showing Facebook navigation bar on android and the web with the notification icon highlighted
Screenshot of the Facebook navigation bar as it appears on the native android app, with another screenshot showing how it appears on the mobile site below.

How did this happen?

Honestly, there’s probably a decent reason. I don’t know, and it would be easy to criticise. The globe icon is a likely just a leftover legacy from the web that works for the audience who use the website. It’s design debt that doesn’t probably cost too much to them (people are addicted to Facebook, and probably don’t think much about what goes where).

It’s safe to assume Facebook has a bunch of different design teams. The web team, and the app teams. Also, I do realise the mobile website for Facebook is (probably) a keep the lights on initiative, with most of the website use being done on a laptop. Facebooks primary focus is mobile, but it’s (a bit) interesting that the experience is out of sync between the app and the web version.

“The Frankenstein effect” is not a real term as far as I am aware, but one I feel describes the issue appropriately.

Nerdy game time

I personally like my tabs to be labeled. Obvious always wins as Luke Wroblewski would say. Coincidently, he has been collecting data on the navigation versions Facebook A/B test. At the time of this post it was up to 56 variants. You can view the documented versions here.

A quick fun exercise is to ask people to open an app they use all the time with icon only navigation (such as the Facebook app).Then, get them to tell you what the tabs mean before they navigate.

This can yield some interesting results. Efficiency is often impacted, when clean design gets priority over clarity. Wayfinding requires thinking. You can see the cognitive cogs turning in people when faced with this challenge. Put labels on the tabs and try this test. People will look at you as though you are insulting their intelligence.

In conclusion to this detour, unless your app is going to be used as much as Facebook and Twitter, you might want to consider labels. It’s just a kind thing to do. Form should not lead function–at least, this is what I tell myself when I look at this ugly site.

Get to the point. You promised me workflow tips

So now that I have rabbited on about some of the benefits of icon fonts, I’d like to share a way of using icon fonts within Sketch in a smart way that embraces D.R.Y. The main technique comes from this post on Medium (go and share some claps, or whatever Medium do now to show appreciation).

In this article Peter takes you through a step by step technique for using icon fonts in Sketch. It’s really efficient. I won’t repeat this, but I will add one thing to it. In the article, he mentions copying and pasting icons from font-book into Sketch. This is kind of weak as a process & something that would be a hard sell to the designers.

However, he goes on to show that you can reference the icons and call them by a friendly name. He points out that Googles material design icon font does this, and it is way better, and a much easier sell.

I wanted to understand how this was done, so I downloaded the material icons and did some investigating. This took a little time, as I was trying to uncover where the voodoo was happening. It took me a while to realise that the article was wrong in it’s assessment on the situation. The icons had not been named at all. Instead the folks at Google had utilised ligatures.

The magic of Ligatures

In typography, a ligature occurs where two letters are joined as a single glyph. Here’s some code to show how it works:

sub m e n u by uniE961;

Essentially this script says that when the letters that make up the word menu are written, you want to substitute it for the glyph(icon) with a unicode of uniE961.

This is a pretty clever solution, and might have good benefits towards improving a11y. It won’t be an easy way of working if you have to write a piece of script for every icon. I knew the designers would (probably) be even less happy with this approach then copy and pasting from font book. I almost gave up…

Hello icomoon

Icomoon is a free service for creating icon fonts. It, rather usefully, has the capability to add ligatures to your icons in a way that doesn’t require scripting. It is also conveniently the tool that design team was creating their icon fonts with. This was a big win. It meant I didn’t need to introduce any new tools to the team. It simply added to the process that was already in place.

Show. Don’t tell

I’m a big fan of showing rather than telling (although this might not be so obvious with the textual nature of my site). Here’s a video I made with loom, showing how to go about creating your own icon font using friendly ligatures using icomoon and Sketch. I’ll upload a narrated version during the week. I’m too self conscious to talk to myself (what if I like it to much), so if anyone wants a remote walkthrough I can provide it!

Note: Loom is great by the way, and free to use (yeah this is a referral link).

Potential Benefits of using icon fonts this way

  1. Single source of truth: Engineers and designers are using the same file.
  2. Control in the designers hands (they need to reinstall new font releases)
  3. Whitelabel rebranding potential. If you establish a naming convention, you simply need to change the font the icon is pointing at, and don’t spend hours swapping individual icons.
  4. It’s much faster, and reduces production work. Who has times to resize and slice each icon in sketch at 25pts and 24dpi for iOS & android

Tip: If you are using something like Zeplin for redlines, it might makes sense that the ligature you use matches the CSS modifier. This way they would be able to just copy the content from Zeplin with a click. For example:

span class="icon [modifier class]"

Who’s job is it anyway?

Really, it is the designers responsibility (if they exist) to step up, and ensure that there are at some guiding principles in place. If not a full design system, then at least a set of icons, and components, that consider the future of the product. Go beyond addressing just the immediate need.

In conclusion

Some caveats to this approach. It has not been tested to scale, and there are likely potential issues that I haven’t seen. I don’t know what the release of Sketch Libraries means, as I have yet to dive in to it. I just think that we should be a little bit more clever about how we do the production work.

And remember:
Don’t.
Repeat.
Yourself.

Download a Sketch file to play with, and an icon font here.