A transcript of [S02E15, (325) of UX Podcast. James Royal-Lawson and Per Axbom are joined by Ellen Lupton to discuss storytelling in visual design, and the “rule of three”.
This transcript has been machine generated and checked by Harinie Gunasekera.
Transcript
Computer voice
Season two, Episode 15.
Ellen Lupton
Good storytelling changes pace. It has big moments and small moments and loud and quiet. [Music]
James Royal-Lawson
You’re listening to UX Podcast coming to you from Stockholm, Sweden.
Per Axbom
Helping the UX community explore ideas and share knowledge for over a decade.
James Royal-Lawson
We are your hosts, James Royal-Lawson,
Per Axbom
and Pat Axbom.
James Royal-Lawson
With listeners in countries and territories all over the world from Serbia to Luxembourg.
Per Axbom
Today, we are talking to none other than graphic designer Ellen Lupton, known for her love of typography, and the author of “Thinking with Type”, which is now in its third edition, as well as “Extra Bold Design” and “Storytelling and Graphic Design Thinking” and lots more books,
James Royal-Lawson
As well as been quite a prolific writer. Ellen is also a creator, educator, and designer, and teaches at the Maryland Institute, College of Art, where she is the Design Chair.
Per Axbom
And we talked to Ellen, obviously, about storytelling, about visual design. And we received some really, really practical advice. [Music]
James Royal-Lawson
Today’s interview was recorded at “From Business to Buttons”, which is a conference that is held every May here in Stockholm, Sweden.
Per Axbom
For this year’s event on May 24. Use the code UXPODCAST for a 10% discount. Heavily discounted student tickets are also available. [Music]
James Royal-Lawson
Ellen, in your presentation, “Storytelling and Visual Design,” you’ve got a number of points that you share. One of the particular is rule of threes. So I thought we’d take two topics.
Ellen Lupton
[Laugh]
James Royal-Lawson
One of which is the rule of threes. Tell us a little bit about what the rule of three means.
Ellen Lupton
So the rule of threes is used by writers and comedians and designers to help people cognitively make choices about information or understand a process. So if you think about fairy tales, there’s often three wishes, or three dancing princesses or three doors, and the last one you should never open. And so that number three has a kind of archetypal significance to people. If we consider the fundamental pace of a story, it has a beginning, a middle and end, a really simple process has three steps 1,2,3. In fact, it might feel incomplete if it only had two. So you want that sense of resolution. The third step brings it to conclusion.
So using the rule of threes is really useful for designers to simplify a very long process. To like visually group many steps into three chunks, or many features of a product into three buckets. To take a long series of things and find three phases, or even in a complex layout, like in a dashboard, where you might have multiple choices of use of the data to say, well, here’s three and kind of hide the other ones. It’s just very useful and it helps people with their cognition of complex information.
Per Axbom
And when you explain it like that, it was like blew my mind kind of how often it appears and I don’t really think about. It’s just common sense, it feels like. It’s not that I learned it as a designer, it’s just a pattern that just makes sense as a human being a beginning, middle and end.
Ellen Lupton
It is a comon sense that is reiterated time and again,
Per Axbom
Exactly, yeah.
Ellen Lupton
And then it becomes familiar, but it has an arc. And stories have an arc. Aristotle defined a story as a whole action of a certain magnitude. So it has to be whole, something happens and then comes to a resolution and it has to matter. It has to be worthwhile in some way. And that 1,2,3 creates that sense of an arc and something that has been completed.
James Royal-Lawson
I think back about how, I mean, I suppose we’ve had quite a few magic numbers, you know, over the years with design. Remember back when we talk about menus and things you say, well, you know, you don’t need more than seven items or like four maybe comes into it. We do get a few of these numbers thrown about. So, you know, other situations when we should avoid forcing ourselves to three.
Ellen Lupton
Well, sometimes you need seven.
James Royal-Lawson
Yeah. [Laugh]
Ellen Lupton
And seven also comes from fairy tales.
James Royal-Lawson
Yeah.
Ellen Lupton
It is a beautiful number. It’s a prime number, it has an elegance within the sequence from one to ten. That’s very attractive. And of course, people can remember seven things, not me anymore, but,
James Royal-Lawson
[Laugh]
Ellen Lupton
And phone numbers were broken down into units, of three, and four to make that number seven more palatable.
James Royal-Lawson
Right. So the chunking, yeah
Ellen Lupton
Yeah.
Per Axbom
And you had an example on stage. I think it was from Starbucks, where they had 1,2,3 steps. But the second step was made of two parts. And that was really interesting, because you also got the question at the end around, well, is that ethical to do it like that? And thinking about it, it did make sense. Had it been four steps, it wouldn’t have been as easy to actually take it to heart.
Ellen Lupton
Exactly, the three is very comprehensible. And in that Starbucks ad, if I can help people visualise it. The three steps were named, but they’re also represented visually with a big icon. And that really helps people, reinforces visually this series of three things.
James Royal-Lawson
So I can imagine lot’s of listeneners now, trying to look at their wizards that they have and trying to think “How can we cram this down to three instead?”
Per Axbom
[Laugh] We’ll put a link to that in the show notes.
James Royal-Lawson
So another one of the, I have joked about that we have like, rule of three and we’ll use two. But we’ll see how that goes? Labyrinths and mazes. Now, in your presentation. Maybe you did this more because we’re in Sweden. But we had a wonderful little segment when I’m talking about the maze of IKEA, I’m gonna say maze of IKEA, which wasn’t really.
Ellen Lupton
Well, so an IKEA store is a highly designed experience, as are many retail spaces. But I think IKEA to a very high unselfconscious degree. And I was interested in this when I was working on my book “Design and Storytelling”. And I remember, just how controlled the experience of IKEA is. And so I started looking at research to find out you know, evidence about why the stores are designed the way they are.
And one paper that I read explained that technically, IKEA is not a maze at all, it is a labyrinth. And that these are two different paradigms for turning a bunch of space into a path. Right, which is what a story design is. And technically a maze is a puzzle. And it’s designed to get you lost. And to give you the user constant choices, exhausting choices. Do I go left? Do I go right? Do I go forward? Do I go back? A labyrinth is a fixed path. And these were created in churches and gardens. And even in like a little kind of fidget device where you could trace the labyrinth with your hand. And it’s meant to be meditative. You take a walk and you’re not constantly asking yourself which way to go.
James Royal-Lawson
So yeah, it’s a mental stimuli and forcing you to think, forcing you to back up on yourself and try again. You’re actually, now I’m turning off, no I just I’m just going straight, without going straight.
Ellen Lupton
Exactly. You’re not constantly asking yourself where do I go next. In an IKEA store. So I went back to IKEA with my camera which I always have, my phone and I wanted to be like super conscious of how the store reinforces that path. And I noticed that the path is actually a different floor surface. It has a curb on either side to, you know help people not trip over the two surfaces. There’s actually arrows that are projected through a light on the ceiling so that arrow doesn’t get worn off from people walking on it. It is like made of light. I was just amazed to see the degree to which the path is truly reinforced, and underscored by the design.
Per Axbom
And you compare it to the yellow brick road from the “Wizard of Oz”, which I thought was amazing. Because when you made that reference, it made sense. [Laugh]
Ellen Lupton
Yes, in the “Wizard of Oz”, the path is the story and they go to, you know, they are following that path and the path gets broken, and it’s interrupted, and there’s bad things that happen, but they need to keep finding the path.
James Royal-Lawson
Something I always used to, like, with IKEA stores is, was the secret doors. And years, I, to be honest, I think previously, the secret doors were harder to find, because like, you know, when you’re halfway through a lap, and you can’t deny, I just need to go to the warehouse, I need to go to checkout. So then there’ll be a section of wall, which actually is a door and you can cut through to the warehouse. And this used to be kind of like, “oh, secret”. Where as now though, they seem to be a little bit more, they’re actually signed now.
Per Axbom
You are right.
James Royal-Lawson
And often they are actually opened before they never used to be, never used to be signed.
Per Axbom
And you were sort of a power user when you knew where the doors were.
James Royal-Lawson
Yeah, so they’ve made some kind of
Ellen Lupton
Shortcuts
James Royal-Lawson
yeah, they made shortcuts more official now. Than when before they were kind of like secret power. Which I don’t know. I mean, storytelling wise, I kind of like them as a secret power. Where now.
Ellen Lupton
I always feel devious and like I’m a consumer with true agency when I go through the secret passageway
Per Axbom
Yeah,
James Royal-Lawson
yeah.
Ellen Lupton
But actually, it’s there for a purpose.
James Royal-Lawson
Yeah,
Ellen Lupton
Otherwise, they wouldn’t.
Per Axbom
It is, but still feels like gamification. That I can sort of, I can cut off the path, I can go through the game faster.
Ellen Lupton
But then you’ll miss kitchens.
Per Axbom
I will miss kitchens. [Laugh]
Ellen Lupton
No one can do that. [Laugh]
James Royal-Lawson
Presumably they have evidence that said that level of irritation and annoyance, that customers who were forced to do the full lap who did know where they need to be, was too great, so they started to.
Ellen Lupton
It’s an escape valve, a pressure valve,
James Royal-Lawson
Yeah, which is good.
Per Axbom
I have to make one note on language. Since we have so many listeners in Sweden. We don’t have a separate word for maze. We just have the word labyrinth, meaning probably both things. I even tested it in Google Translate. What’s the difference between a maze and a labyrinth? To Swedish? What’s the difference between the labyrinth and a labyrinth? It says, [Laugh]
Ellen Lupton
Well in English, we use them indiscriminately anyway. Or in other langueages.
Per Axbom
yeah, So
Ellen Lupton
It’s really like a technical thing. And like I have a book called mazes and labyrinths because people do use them without distinguishing and it’s not an error to call. Use the two words.
Per Axbom
Yeah the one or the other. [Laugh]
Ellen Lupton
However, there are two different principles of design. And that is clear. And you wouldn’t put a maze on the floor of a church for the monks to walk around because they would lose their mind. [Laugh] So it’s two different paradigms. We do have two beautiful words in English and some other languages. But everybody can grasp the conceptual difference between a fixed path and a path with lots of choice.
James Royal-Lawson
But how do, I so how do I know, if I’m in a maze or a labyrinth design situation? You know, is it easy for me to kind of recognise that, okay, I’m now I’m doing a website that’s a maze, or now I’m doing a website that’s a labyrinth.
Ellen Lupton
Well, likely a website would have some of both, you know, little departments of different. So think about a process that you want to have be a 1,2,3 sequence. And you want to maintain people’s interest and comprehension across that sequence. That’s probably a good labyrinth. If people are customising a service, or choosing different features to combine in their account or reading a newspaper where you have constant side stories and different avenues to travel on, that’s a labyrinth.
Ellen Lupton
Right?
James Royal-Lawson
Yeah.
Per Axbom
Yeah. And that makes so much sense. And it made me frustrated when I was trying to translate it to Swedish and I realised. I can’t.[Laugh] But of course, I understand the concept. Now we need to think about explaining it in different ways.
Ellen Lupton
We could think of linear and nonlinear.
Per Axbom
Exactly,
James Royal-Lawson
yeah.
Ellen Lupton
And a website or a digital product is going to have some linear components and some nonlinear ones.
James Royal-Lawson
Yeah.
Ellen Lupton
I’m thinking about psychologically the difference, the sense of freedom, created by a nonlinear experience, but also the potential for exhaustion. You know that people will become fatigued.
Per Axbom
Yes. And the way you described this onstage was so vivid and fun. So I’m going to stick with IKEA because you talked about descending into the belly of the warehouse, which was just amazing. And then approaching, while the final boss in a game, the checkouts, which is so true, and everybody understands what you mean. And sometimes it’s important to also have the friction or some sort, some things that are more difficult than others. You touched upon that, a bit towards the end, I think.
Ellen Lupton
Well, if you think about a good story, a good story changes energy, like an action film. If it’s all car chases, and there’s never any dialogue, then no woman will ever go to that movie. [Laugh] Right? We cannot have that constant intensity. So a good storytelling changes pace. It has big moments and small moments and loud and quiet. And a good experience design should have changes in pace, you know, you come into the IKEA store, and you’re full of optimism, you’re gonna redo your whole house, and you leave a bit depleted, you know. With more stuff than you wanted, and maybe not solving as many problems.
So at IKEA they build in rewards and wrath, right. You’re not always being assaulted. And so when I go to the IKEA store, and I make it through the checkout, which is the final challenge of my hero’s journey. There is a whole other restaurant on the other side of checkout, which sells hot dogs. And these hot dogs are wonderful, and welcome, and super cheap. And it’s like, I need this snack, right, you may have already had a full lunch with your family in the big cafeteria. And that’s wonderful too. But this is like an emergency hotdog.
Per Axbom
Yeah
Ellen Lupton
This is mercy.
Per Axbom
And it aligns with peak “End Theory”, which means that you leave the store actually feeling energised.
James Royal-Lawson
And do you know what, last time, I got to the hot dogs, and I’m wanting the hot dog at the end there, I’ve been here for a while now, I’ve done all this, I’ve punished myself with a journey through. I need the hot dog. They introduced one of those self service touchscreen ordering units, to get the hot dog.
Per Axbom
Oh no.
James Royal-Lawson
So of course, me being me, I was now confronted by a new interface design, which I was having to fight with, learn, analyse, fight through. So I lived through a second hero’s journey, when I was just ready, give me the goddamn sausage.
Per Axbom
[Laugh] Such a good point.
James Royal-Lawson
But you know, occupational hazard coming into new interfaces at the end of the journey. Given that we’ve talked about the importance of three, so I can’t stick to two. We’re gonna have to have a third one. In your presentation, you talk a lot about the use of colour as well. In relation to signifying, I suppose, a change of world, from the ordinary world to something else, and how we use that on on websites. Explain a little bit more about this colour.
Ellen Lupton
So as designers, we are creating a world for our users. And we are inviting them to cross the threshold into that world. And once they enter, everything should go together. So think about Dorothy finally makes it to the City of Oz and everything is green. And this is magical. This is not how things normally look. And so she knows where she is.
When we use colour as designers, there are many functions including warnings and codified uses of colour, but colour is also used to create an atmosphere. So many Fintech companies, for example, are predominantly green. And you are entering this green money world. An app about you know, renting camping spaces might use predominantly soft browns and pale blues to create an illusion of nature even though you’re still just looking at your phone, right, which has no nature in it. [Laugh] But those colours help to create a world, it’s one of the simplest tools that we have for changing where you were into something new, which is what storytelling does, creates a world.
James Royal-Lawson
And those perceptions. Are they global? Are the universal human perceptions of like, you know, the nature of the soft tones, the browns or greens of nature, or is that something that’s coming from our biases as, the countries that we come from?
Ellen Lupton
Well with colour I think there’s always some of both. There’s always some cultural bias. The colour red has different meanings in different cultures. The colour white could signify death in one culture, but we use black in another culture. However, there are also some, some universals, like I think nature has some pretty beautiful colours that we can borrow and look at. But you might make them softer, or more intense. And there’s so much choice that goes in designing those combinations.
Per Axbom
And the colour itself will tell a story, which I think is interesting. Because one of my if, I think, one of my key takeaways was sort of from the beginning, when you were talking about how icons, told a story. So even by what colour the icons are, or what they’re signifying, or what action there is, the full story is within the icon. I think this is interesting for designers in that it doesn’t have to be the whole journey or the whole flow. That is the story. Every element can have its own story.
Ellen Lupton
If you think about a movie, a movie is made up of scenes, and each scene has a goal, someone in the scene is trying to get something and they either get it or they don’t. And that’s what the scene is for. [Laugh] If they don’t get it, then they have another scene where they try again. If you think about experience design, it’s many actions. Even something like subscribing to a service, includes many actions that need a beginning and middle and end a sense of completion.
Per Axbom
Everyone who has ever filled in a form knows that, that’s the story. [Laugh]
Ellen Lupton
Right made up of many actions for something like icon is a signal for one action within a much bigger journey.
Per Axbom
Mind blowing. [Laugh]
James Royal-Lawson
All these different elements that we can use to help convey a story in the designs that we have.
Per Axbom
Yeah, exactly. Now, I’m so much more aware of it now. Because I’m I know, I’ve used a lot of these things that you’ve been talking about. Now, I’m so much more aware of why. [Laugh] and how to incorporte it.
Ellen Lupton
These patterns are universal but we can become more conscious of them. And I discovered it by reading lots of books about how to write a story. And doing that I was like, Wow, this reminds me of action in design. And these patterns are so powerful.
Per Axbom
Thank you so much Ellen.
James Royal-Lawson
Thank you, Ellen.
Ellen Lupton
Thank you Per, thank you James. So much fun to talk to you.
Per Axbom
So now we are actually moving into part three of the podcast episode. And I hadn’t reflected on that so much before but we actually always do have three parts to each UX podcast episode. We have the intro, we have the interview and then we have this part where you and I reflect on what we’ve talked about in the interview.
James Royal-Lawson
And that’s despite the fact that you do have three audio files that you need to produce.
Per Axbom
Exactly. [Laugh]
James Royal-Lawson
Yeah. But interestingly, in just this episode, not only do we have the usual intro, body of the podcast and the outro, the interview itself had three parts.
Per Axbom
Right, exactly. It’s “turtles all the way down” and three of us. [Laugh]
James Royal-Lawson
And three of us too. Well, I think reflecting back on the, on our chat with Ellen. Now, in some ways, none of it was new. I mean, yes, there was some new aspects. And both of us said during the interview that we were “Oh, yeah, I hadn’t thought of it like that before”. So we got a new new perspective on some things that I think that we have been aware of, over the years. But that itself made me think about just the quantity of concepts, of principles, you know, routines and so on everything that we, who are working in the digital space, as designers. What we need to have in our bag, our toolbox, and that we need to be able to pull out of our heads on demand in many situations and get it all right.
Per Axbom
Right. And it’s so good to reflect on these things. Because what I realised was I kept saying, “Well, I know this, but I forgot why I was doing it”. [Laugh]
James Royal-Lawson
Yes, yeah. So even when you even when you remember to pull that tool out of your toolbox, you’ve maybe forgotten the essence of why it’s there, or the underlying principle that backs up the theory of the whole “Why are you doing it?” Which, I mean, me and you have been in this game now for a long time and
Per Axbom
A couple of years
James Royal-Lawson
a couple of years. You know, yeah, we’re learning new stuff. We’re relearning old stuff,
Per Axbom
Exactly, yes.
James Royal-Lawson
I think I mean, that’s, I think it’s really it’s reassuring to know that it’s okay to not remember everything all the time?
Per Axbom
Yes and I love it when we get into these episodes, because both you and I actually do love the details of designing as well as this overarching strategy. But talking to Ellen, in this interview, I realised, well, even the icon is a strategy. Even so, you have to remember that you are making considered decisions about everything that’s going on within every step of the way. So you’re, you’re just making sure that you are doing it in a deliberate way.
James Royal-Lawson
Yeah, the considered design, and considering every aspect of what you’re designing, and also remembering what to consider.
Per Axbom
Yes, exactly. [Laugh]
James Royal-Lawson
It’s a bit full circle, though.
Per Axbom
It’s funny, because you and I, I’m not going to mention what company it was. But you and I went into a website together earlier today. And we noticed that a company had like four options. And we said, well, that doesn’t make sense. It should have been three. And we looked at it, and we realised, well, it would have been much better if it had been three. [Laugh]
James Royal-Lawson
Yeah, because the fourth option was actually of a different flavour, you could say to the other three, so it actually didn’t fit into the story, or the packaging of the of the first three options. So yeah. Okay, we had primed ourselves by refreshing our knowledge about the power of three, the storytelling arc, and so on. So we were looking for that kind of, you know, I was ready to find fours and fives or whatever, I’m trying to boil them down to three. But, yeah, there’s so much out there.
And I wonder as well about design systems, or even, you know, when we’re getting designs served or generated for us from other tools, that puts another demand on our ability to consider design. And you mentioned the icons. When if I’ve got an icon set or an icon from my design system, does that enhance my ability to apply it in a considered way? Or does it limit it?
Per Axbom
Right, and am I applying it in a, in a way that is intended to make it more visually appealing? Or actually also, because it tells a story, it complements what I’m trying to accomplish with my design? And I always. You tend to forget that level of detail that goes into thinking about what story am I telling, even as you have three pricing options. What story are you telling, by having these selected pricing options, there’s always a story there. That’s really helping me think about this.
And I’m definitely going to be applying this idea of, well, I had four steps, but I’m going to try and make it into three, one of the steps may have two things. But it makes more sense. It’s just easier to cope with it, it tells a better story.
James Royal-Lawson
Yeah, I know, in the in the time that’s passed, since we talked to Ellen, I have actually done that. I’ve looked back on some of the suggestions and design work I was, I already had kind of like in the pipeline. And we pivoted and we actually made a couple of fours into threes.
Per Axbom
Yeah.
James Royal-Lawson
Which is, actually was nice,
Per Axbom
Wow, nice, yeah.
James Royal-Lawson
and it actually did work better.
Per Axbom
It seems almost silly. It’s, it seems it’s too simple. [Laugh] It’s a great rule.
James Royal-Lawson
Yeah
Per Axbom
You almost don’t believe it, but when you apply it, you realise? Well, of course it has to be this way.
James Royal-Lawson
But there’s also, I suppose there’s also a hazard or danger in the simplicity, because what becomes a risk there is looping back to what you said earlier in this outro it becomes a bit of a default it becomes I need three options. And you lose sight of the story arc, the power of three. The you know, the the way, the reasoning why? It is
Per Axbom
And Ellen did saying sometimes you need seven. [Laugh]
James Royal-Lawson
She did when I prompted her about that? Yeah, sometimes you do need seven. It’s, but, it’s be conscious of what you’re doing and consider your design. It’s wonderful. Recommended listening Per.
Per Axbom
Some more storytelling lined up for us, I guess.
James Royal-Lawson
Ofcourse. I mean, we have dabbled a few times now with storytelling over the years. And just this time, I think it absolutely is our interview with Anna Dahlström.
Per Axbom
Oh, yeah.
James Royal-Lawson
About storytelling. And the reason why, I think absolutely, is because in that podcast, we do talk about three act stories.
Per Axbom
Oh yeah.
James Royal-Lawson
So, it will, it should dovetail really nicely into this conversation.
Per Axbom
It makes complete sense.
James Royal-Lawson
Yeah, to dive a little bit deeper into aspects of storytelling,
Per Axbom
Episode 239.
James Royal-Lawson
Yes, of season one as we refer to it these days.
Per Axbom
[Laugh] The longest ever season. If you want us to be part of your next conference event or in house training. We are offering workshops, talks and courses to inspire and help you grow as individuals, teams and organisations. Get in touch by emailing hej@uxpodcast.com.
James Royal-Lawson
I’d like carrier pigeons as well Per. If people can send us messages via carrier pigeon, I’d accept that.
Per Axbom
I would accept that. Definitely.
James Royal-Lawson
Yep. Send your pigeons to us.
Per Axbom
and a message in a bottle
Per Axbom
Remember to keep moving.
James Royal-Lawson
See you on the other side? [Music]
Per Axbom
James Do you know why Norwegians build their own tables?
James Royal-Lawson
No Per. I have no idea why Norwegians build their own tables.
Per Axbom
No IKEA
James Royal-Lawson
Oh.
This is a transcript of a conversation between James Royal-Lawson, Per Axbom, and Ellen Lupton recorded in May 2023 and published as episode 325 of UX Podcast.