A Lesson in Leitmotif

I spend a lot of time thinking about the paradox that is Jakob’s Law. The UX design principle states that users prefer products that work similarly to other products they are already familiar with. If that’s the case, how are we, as designers, able to create something that is unique enough to stand out, while still being familiar enough that users wouldn’t be scared away? Design, in many ways, is best executed when it is not noticed. Have you ever been browsing a site and then noticed that something, like a search bar, was misplaced, and it made you aware of the design and its shortcomings?  

There is a nuance to subtle design, existing not only within applications and websites, but other mediums as well, such as what we hear.  

Growing up, I was interested in the 1936 musical composition for Peter and the Wolf. In it, each of the characters was accompanied by a musical instrument and theme that reflected the tone and feel of the characters themselves. The bird was accompanied by the airey-sounding flute while the wolf, the story’s antagonist, was paired with the scary-sounding french horns. This is an example of a leitmotif – when a familiar theme is paired with a particular character or situation. When I hear the french horns, I can feel the ominous presence of the wolf, ready to terrorize poor Peter and his animal friends. 

This runs parallel to how we view a brand identity, or even components within a design system. For a website, the buttons from a landing page should resemble the buttons on the about page. When I enter a Starbucks in New York, it most likely should feel like a Starbucks in Los Angeles. 

Where the leitmotif analogy becomes a bit wild is when you consider how culturally speaking, we have rules that transcend a single application or brand. For example, error buttons are associated with the color red, while success is more associated with the color green. Our brains don’t even have to read the text that accompanies a button to guess that.

What if there was a sequence of notes that go back hundreds of years and are still being used in movies to give us the feeling of dread for things to come?

During funerals in the 13th century, monks would sing a Latin hymn that began with four notes now known as the Dies Irae (Latin for “day of wrath"). These four notes would usually start on F, and then gradually descend, giving an ominous-sounding sequence. 

Okay, so what the heck does this have to do with design?

Let’s return back to Jakob’s Law – “users prefer products that work similarly to other products they are already familiar with.” This same principle is used with the Dies Irae in popular culture and it hides in plain sight. I am, in no way, a musical person, but I find this fascinating.

One of my favorite Halloween – or… um, Christmas – movies is The Nightmare Before Christmas, the Tim Burton musical about Jack, a character from Halloweentown who, with good intentions, attempts to hijack Christmas and ends up almost ruining everything. As the audience, we know that as Jack gets deeper into his Christmas obsession, only bad things will happen. There’s a song where the members of Halloweentown are creating presents for Jack to deliver to all the boys and girls for Christmas. This song, Making Christmas is the exact melody of the Dies Irae, and the intention was to give us, the audience, a subtle hint that bad things were to come (Danny Elfman, you’re a genius). And what imagery it is to see Halloween-style creatures like zombies and vampires attempt to sing something happy, only to be the harbingers of doom. 

This isn’t the only example. The Dies Irae melody is found in so many other movies, such as The Lion King, Star Wars, and It’s a Wonderful Life – all during scenes where something bad either has happened or is about to happen. Heck, the Dies Irae is literally the theme song of The White Lotus, a television show about a murder. It’s essentially the audio version of red being associated with errors within user interfaces.

Designing for a delightful user experience can only be done if a designer really knows his or her user. This is done with research, yes, but also by understanding how a particular product would make a user feel. Many times, products, like music, affect our emotions in ways that a user isn’t fully aware of. But it’s also these subtleties that lead to brand loyalty. There are people who buy a new iPhone every year. This doesn’t happen because the product is giving them a new experience, but rather, because the brand is making them feel a certain way. And that is the genius of Jakob’s Law.  

______________________________

Hi, I’m Jon. I’m a designer from Brooklyn, NY who loves to talk about user experience and design. Subscribe to Design Breadcrumbs for more content.