Learn how to create metaphors and create appropriate visualizations for them
Almost everything we experience in the world we experience through metaphor. Even when we talk about abstract things that don't have physical form, we talk about them in terms of directionality and bodies.
Stock markets go up, our moods are low, and past years are behind us.
So what makes this useful to us on the internet? Strong visual metaphor is really key for people understanding things. Capturing someone's attention is critical, and you want people to immediately understand what you're trying to tell them before you lose their attention.
If communicating to your users more effectively is something you're interested in, in this episode, you'll also learn about Maggie's process for creating, illustrating, and effectively using visual metaphors on the web!
Spend 10 minutes brainstorming metaphors for a website that you want to build or something else that you're building right now.
Kent C. Dodds (00:00):
Hello friends. This is your friend Kent C. Dodds. And I'm joined by my friend, Maggie Appleton. Say hi, Maggie.
Maggie Appleton (00:07):
Kent C. Dodds (00:08):
I asked you to say, "Hi, Maggie." But that's okay.
Maggie Appleton (00:11):
Kent C. Dodds (00:11):
I'm just kidding. So the audience is going to get really tired of this because I'm doing this with every episode this season. Some people are getting it, but yeah. Anyway, I have known Maggie for a really long time. We met through egghead. You started making just amazing artwork for the courses that I was putting on there as well as everybody else. And I've just always admired your work. And I can't remember how long we've known each other. I think I started at egghead before you did. This was many years ago now. When was it that you started egghead?
Maggie Appleton (00:51):
2016. So I just had my five-year anniversary.
Kent C. Dodds (00:54):
Oh yeah. Congratulations. That's great.
Maggie Appleton (00:56):
Thanks. It's a good place to be for five years.
Kent C. Dodds (00:59):
Maggie Appleton (02:01):
So professionally that's sort of the role I'm in. Personally, I live in London. I also am a huge nerd for cultural anthropology, which is what I studied originally and digital gardening, which is a practice where you sort of grow things on your personal website over time, slowly, as opposed to just blog posts. So it's just a fancy word for blogging in a certain style. And I'm a huge metaphor nerd, which is hopefully what we'll get to talk more about today.
Kent C. Dodds (03:11):
Yeah, absolutely. And it's been really cool to see the evolution of you professionally within egghead. To see you start as the illustrator. And now I'm working with a lot of other folks with you as kind of the lead. Voita is one. I work with Voita a lot. And he's just amazing. I don't know if you found him or if Joel or somebody found him, but good job on that one.
Maggie Appleton (03:37):
I was quite proud of that. It was we worked at my previous company. Voita worked there too. And not that I sort of stole him from there, but I sort of did. And I'm very glad about it.
Kent C. Dodds (03:46):
Maggie Appleton (05:08):
Kent C. Dodds (06:08):
Absolutely. And I'm glad that the trophy worked out so well for that metaphor. So can you dive a little bit deeper into what a metaphor really is? Like why can't we just have text that describes what we're doing? Like what does a metaphor add to this? Or even like, I guess you could represent a metaphor in text. So speaking more generally, not just visually, but what does a metaphor add to a person's experience in understanding a concept?
Maggie Appleton (06:42):
Yeah. So with metaphor, I mean, just to give a very simple definition. It does what it says on the tin, pretty much. Like a metaphor is when we understand one thing in terms of another, which sounds so simple that it's almost like why bother saying it. But there's a wonderful field of what's called cognitive metaphor. And this gets into cognitive science and sort of how our brains work in the world. That almost everything we experience in the world we experience through metaphor. So understanding one thing in terms of another and some more tangible examples of this.
Most of our metaphors are at some level grounded in our embodied experience of the world. So being a human body that has like an up and a down, and left and a right, and front and a back, and most of when we talk about abstract things. So things that don't have physical form, we talk about them in terms of this directionality and bodies, and also warm and cold, and soft and hard, all the things that are physical feelings in the world. So when we say the stock market has gone up, we're talking about an abstract idea of money has gone up. But money hasn't moved upwards in any direction, but we associate up with more money, so it's a directional metaphor. And then we do this a lot with programming and the internet because programming is inherently metaphorical because what's happening is like a bunch of electrical signals are firing inside a tiny motherboard that we can't see.
So it's very, very far away and abstract. So we talk about uploading things to the cloud. So we're using that directionality. Or downloading. We think the internet is above us, right? And our desktops are below it. And then when we're browsing around the web we go left to go backwards and right to go forward a page, which is kind of mapped to Western understandings of time as well. We think the past is to the left and the future's to the right. Or the past is behind us and the future is ahead of us because we look ahead to next week. We talk about last year. It's like behind us now. So all these directional embodied metaphors are kind of hidden in everything about the way we talk about the world. But I find, especially with programming in the web, we have to rely on them a lot because so much of programming is this. It's difficult to see. And we're a thousand layers of abstraction away from binary code. And we just need these higher level concepts to think with.
Kent C. Dodds (09:08):
Wow. I had never really thought about it that way, but that makes so much sense. It's everywhere and we don't even think about it at all. Yeah. That's very interesting. And so when you're presented with a project, how do you come up with ... So actually first, I just want to establish. It makes a lot of sense that we need to have a metaphor for the product that we're creating. There needs to be some sort of metaphor. Whether you demonstrate that metaphor in text, in like a blog post, or even better illustrated as well, to help that communication come across. Actually let's talk about that really quick. What is the benefit of using visual metaphors over text or is there a good balance of the two?
Maggie Appleton (09:54):
Mm-hmm (affirmative). Yeah. I think images are always great only because it is true, right? That the image is worth a thousand words and that it's quicker to get the concept. If I can look at an image of a visual like a robot or whatever, a waterfall, whatever it is, you get it really fast as opposed to text. I mean, sure, you can write a beautiful long piece of prose that poetically describes the waterfall. But it's so much faster to just have an image and get that. And in terms of the comparing them in terms of metaphors, I mean, you can kind of do metaphors in both. But I will say I also use language first when I'm designing metaphors.
So I don't jump to visuals immediately, but I look at the words people use around, especially with technologies. Because most of it is written in text, right? Like testing, something like that. I will do a lot of searching corpuses of language. So a corpus is a big collection of words. So things like all the words that anyone has ever written on the internet, there are tools where people have scraped those and you can search through them to see patterns in words. So you can say like what word always appears next to the word testing? Or what are the most common 10 words that appear in the same sentences testing. And from that you can start to see what kind of associations people have with the word testing. And that gives you an idea of what the metaphors they're already using in everyday language are around testing and what they associate with it. And so I use written language first before I draw anything.
Kent C. Dodds (11:26):
Yeah. That makes a lot of sense. So you typically, when ... Well, let me make an assumption then. When you're starting a new project, you typically don't try to create some fun new metaphor out of thin air. You're typically trying to find an existing metaphor for that product and then building on top of that. Is that right?
Maggie Appleton (11:49):
Yes. So I'll say there's like two ways to approach it. One of them is looking for existing ones cause that's great. That at least gives you an idea of what is already in people's minds, what they associate with that. So that's kind of one approach and I sort of balanced that with inventing new ones. And with inventing new ones, what you do tend to do is you sort of look more at the qualities of a thing that you want to highlight. Right? Because any concept we have, there's a whole bunch of qualities and attributes it has. Like, okay, React, let's say is fast. And it is reactive,
Like you can have hot reloading and it is component based. And it has all these tons and tons and tons of attributes. And we can kind of pick the two or three we want to highlight in this particular metaphor and then say, okay, if we want it to say it's component-based and data flows downwards, like we think these are the two important things we want to highlight, we then go looking for other things that share those qualities. And that becomes the basis of the metaphor because you're not going to find something that has all the same qualities as React because React is a big strange complex concept. But you can say, okay, if I want to emphasize downwards data flow, I can talk about React being a waterfall. Or I can talk about React being an upside down tree. So it's in isolating the qualities that you can find interesting metaphors.
Kent C. Dodds (13:09):
Maggie Appleton (13:24):
Yeah. Yeah. So a essential metaphor is always really helpful. So another one I'm thinking of is Eve Porcello, we're working with her on a new GraphQL workshop. A nice big one that she's going to kind of cover all the things you could ever need for GraphQL. And we're going with a summer camp sort of theme and metaphor.
Kent C. Dodds (13:43):
I love that.
Maggie Appleton (13:43):
Once you have that central one ... Yeah, it's really fun and it gives you tons of opportunities for other visual metaphors to play with from it. So you can say, okay, we can have like a camping sign and a tent and a lake and you know, all these things, but then relate them back to a GraphQL concept. So you sort of backwards map from the theme back to the main idea. So yes, central organizing metaphors are really helpful for that.
Kent C. Dodds (14:08):
Yeah. That makes a lot of sense. Very cool. So, you're working on a project. You decided, okay, here are the metaphors that people typically use. Here are some branches off of that, that I can take based on the qualities of the technology we're talking about. So then ... And oh, one other thing that I wanted to mention with like text versus visual, I think that the text is also important for those who cannot consume the visual, right? People using screen readers and things as well. Do you ever do anything like specific to help, or yeah, to cater to just the text version of the metaphor as well?
Maggie Appleton (14:53):
I mean, we definitely always make sure we have good alt texts on all the images. It is difficult too because if you're doing alt takes, there's only so much you can put into words without it being some long paragraph sort of describing the image. Yeah. So I suppose I haven't done a lot of work doing written metaphor, although I definitely appreciate it, right? When there's really good writers when they can just like really describe a metaphor and flesh it out and like have it carry through a whole piece. I really do love that. And I suppose I pay attention to a modified list that do that, but I personally don't have a ton of like metaphorical poetic writing ability yet.
Kent C. Dodds (15:30):
Well, that seems like Joel in particular is very good at writing and bringing out. And one of the nice things that I found is when I have a metaphor that a visual metaphor that you've created, it's easier for me to talk about that. And I can take the visual and describe it a lot better. So they kind of go hand in hand like that. Okay. So we've decided on what the metaphor is going to be. What's your process for turning that metaphor into something visual?
Maggie Appleton (15:59):
So that's where, not that it gets easy from that point on, but metaphor design's sometimes the harder bit. Because from there, I usually will look for a lot of reference images. I think sometimes people think I like draw out of my head a lot. And I am strong on using reference images. And that's the way I was taught by my illustration teachers is you go find as much imagery as you can and do lots of very small rough sketches. So I'll usually do like 10 to 20, depending on the piece just to find the right composition and make sure everything looks the way it should look like and play around with colors and just lots and lots of small experiments. And then you kind of look at those all over, pick the one that is most promising, refine that.
So I usually work digitally. I'll work on an iPad in Procreate or on a SynTech in Photoshop. So a screen that I can draw on. And I'll do lots of layers over the top. So I'll take the rough sketch and refine it and then make it bigger and refine that more. And then with the illustrations I make in particular, I draw vectors in Adobe illustrator, and then I finish them off in Photoshop, just putting a little, few extra details painted in. So it's a very particular process. It's not like the only way that the illustration can be made, but it's just a style I've developed over the years.
Kent C. Dodds (17:18):
Very cool. And when you were describing that you would like draw with your hand in the air. I'm curious to know what tools you use as you're getting started? Once you get over to vectors and stuff, are you drag and dropping different points on the thing or like? I don't know these tools very well. They all seem very difficult.
Maggie Appleton (17:40):
Kent C. Dodds (18:37):
Yeah. Wow. That's amazing. So you don't actually, maybe early on you're using your hand and like actually drawing it, but once it gets to the time to actually make the thing, you're just like putting points. And I say just, but it's very complicated and you have to worry about like ... What are those called? Like the curves between as the points come around and you can control the angle that those lines curve.
Maggie Appleton (18:37):
Yeah, Bezier curve.
Kent C. Dodds (19:06):
Bezier curve. Yeah, yeah. Ah. I'm so glad people like you exist. It's wonderful you can do that. I just love enjoying that. Maybe one day I'll be able to figure out how to put something together, but you know, we can specialize. It's okay.
Maggie Appleton (19:06):
Yeah. Life is long. You can have in your fifties get really into illustration or something.
Kent C. Dodds (19:28):
Yeah. That's fun. Cool. So we actually still have quite a bit of time, but I've gone through your process of developing the metaphor and actually creating it. I guess that the next step would be, you've got the illustration, now how do you fit it into the product so that the metaphor isn't hiding away what the product really is but actually explaining the product. This comes into the design portion of things. How do you make sure that the metaphor isn't hiding what the product is, but it also is helping to communicate what this project is for people?
Maggie Appleton (20:14):
Kent C. Dodds (21:15):
Yeah, absolutely. I can't think of a specific example, but I feel like I have seen some of those things where you get to the bottom of the page and you're like, I have no idea what this thing does. Like, what is this? So yeah, it sounds like there's a balance. Often you want to help communicate without having people having to read like a paragraph of text. What are some of the strategies that you use to help communicate what the product is without requiring people to read a paragraph of text?
Maggie Appleton (21:42):
I think that mostly comes in individual design techniques, so like spacing things out and using spot illustrations. You might have a big main illustration and then you'll have four to five spot illustrations down the page that highlight particular qualities of the product. Or talk about individual lessons, especially, right? Like if it's a big long course and you have modules or sections to the course, having a spot illustration for each of those that relates to the actual material that's in the section. Because that allows people to scroll quick, see sub-headers, see illustrations alongside it, get a sense of what that section is without really having to read the whole paragraph. So that scanability, that's where visuals and good visual design, spacing things out, letting things breathe, really comes in a lot.
Kent C. Dodds (22:30):
Maggie Appleton (23:06):
Well, I suppose in the past year, so I had been on a big metaphor nerd thing, right? For like, oh gosh, I don't know when I first got obsessed. Maybe I was like 14 or something I started reading books about metaphor and was like, this is really interesting. And I would never let it go. But over the past year I've been getting into UX design more, which has made me look much more at the metaphors we use for websites as a whole. Because there's the directional, right? Up, down left, right. That stuff. But most of all websites, we think the web is made of paper, right?
That was the original idea that when Tim Berners-Lee invented the web, he went, okay, this is a place that people could put academic papers on. So it's going to be all text and it's going to be white backgrounds and black text. And people are going to send pieces of paper to each other. And we're still stuck in that. Not stuck. It served us really well. But everything you see on the web, you will have cards, which look like they're pieces of paper and they're on a white background. And even when you have like a tool tip, it still feels like there's all these bits of paper that are floating on top of each other, which like material design is based on that.
So we're very much, this is the operating metaphor of the web. But that doesn't necessarily have to be the way it is. We have to have convention so we can understand what websites are. But there's other ways to think about them. Like if you think about the way games work, like MMO, RPGs, or any game. They treat it more like a 3D landscape where you're like a figure moving through the plane. And they don't think that you're on a flat surface that just can only have texts and images. And so I've gotten really interested in that idea that we presume the way websites should and could be. And I think there's a lot more space for people to play that isn't happening at the moment.
Kent C. Dodds (24:51):
Yeah. And that especially is exciting with the rise of virtual reality being just so much more commonplace and stuff too. But now you're making me think. So you're helping me with the redesign of my website right now. And now I'm starting to think, oh man, maybe we should just like, have it be all a 3D thing where you're flying through space. Oy. Talk about scope.
Maggie Appleton (25:15):
We have some work to do.
Kent C. Dodds (25:16):
Yeah. Well, I think that's very interesting. I love hearing about what the future of interactivity on the web could be. I think that we've kind of put ourselves into a box and we need to take a step back and think about, okay, so why are things the way that they are. And maybe they don't need to be that way. And we can have a much more interesting and engaging experience. And once we unlock that then it turns into a brand new challenge for us to figure out, okay, so how do we make this so that it's consumable by people and communicates effectively in that sort of thing too. Kind of turning the web into a game.
Maggie Appleton (26:04):
Kent C. Dodds (26:06):
There's one other thing I was curious about. Could you dive a little bit deeper into how you got into this idea of metaphors and using metaphors to communicate? Where did this obsession, I guess, come from?
Maggie Appleton (26:21):
I suppose, well, I know it came from my mother actually was a big metaphor fan and sort of got me reading metaphor books quite young. Well, they were just around the house and she wrote her thesis about metaphors and children's literature because she's a librarian. I was always aware of it. And then when I really decided I wanted to be an illustrator, I think I was about 20, so it's a bit late. And I was like, okay, this is what I'm going to do. It was definitely this obsession with like symbols and signs in society and how they're interpreted. And like how can one symbol mean one thing to one person and something different to another. I got really interested in how visual language worked and how signs and symbols work.
And then when I got into like working for egghead or essentially working in tech and making tech illustrations. Metaphors were like the answer I needed because I would be handed a concept like RX 3F callbacks or something. And I would just go, well, how do I draw that? Like, what do I do with that? And that was where I went, oh, this is where all that metaphor stuff I already know comes in. I know how to research metaphors. I know how to go look at language and look at the types of words that are being used around a concept and how to identify qualities and attributes and use those to find other metaphors. So I suddenly went, oh, this was the tool I needed the whole time. So then I got really, really into it, into metaphors.
Kent C. Dodds (27:47):
Oh, that makes a lot of sense. That's very interesting. Yeah. I think we're ready to give folks their homework. So here's the homework. Spend 10 minutes brainstorming metaphors for a website that you want to build or something that you're building right now. So think about like, and maybe listen to what Maggie has said already about her process. So like thinking about the different qualities that are associated to whatever it is that you're talking about. And you could even do this for a single blog post or something. It doesn't have to be a big thing, but like adding some sort of metaphor. And if you're not an illustrator like me than even coming up with a metaphor that you can describe in text can, as part of your blog post or something, could be really helpful as well. Do you have anything to add to that, Maggie?
Maggie Appleton (28:35):
Kent C. Dodds (29:11):
Yeah. Yeah. I like that. One thing that came to my mind when you were saying that is, I feel like it could be a danger to include too many metaphors. You lose cohesion and stuff. So how many metaphors is too many? D you want to have just one metaphor for the whole site? Or how does that? Or like, maybe it's okay to have multiple metaphors, but don't let them mix or something like that?
Maggie Appleton (29:34):
Yeah. I'd say one dominant one is usually a good idea just to make it nice and clear. So, as humans, we're quite good at blending metaphors. That's quite established in literature. It's like, we think of the web as both paper and as physical space. We're able to sort of overlap them. But if you overlap tons and tons or if you're using really explicit metaphors. Like you're saying, my website is a drum kit, but it's also a forest, and it's also a waterfall. Everyone's going to be like, well, what exactly is this website doing? But having one dominant one is usually a much simpler approach in terms of design and helping your user understand what you're trying to help them do.
Kent C. Dodds (30:12):
Yeah. Yeah. Okay. That's really good tip there. Okay. What's the best way for people to follow you, keep up with what you're working on?
Maggie Appleton (30:21):
Kent C. Dodds (30:44):
Excellent. Hey, thanks so much Maggie for your time. I really appreciate it. And thanks everybody for listening. We'll see you later.
Maggie Appleton (30:50):