Applying the Constraints of Music to Design

Although neither a web page or a piece of music are tangible, physical things, they nevertheless can prove to be highly valuable and meaningful. They can add beauty, clarity, and purpose to our lives if crafted intelligently. Below I attempt to draw comparisons between a good song and a well-designed user interface.

Time signatures, Keys & Constraints

There are a lot of corollaries to draw between music and web design. One being that they both represent a balance between two things, free artistic expression and strict order.

In music, all songs are confined within structures called time signatures, and keys. The time signature defines the rhythm that must be followed so that all the instruments can work together in a unified way. The key of the song, or the "root note" is also pre-defined and all instruments must adhere to it as well. If they don't, the sound produced could not be described as more than that of utter chaos. Any successful song you can possibly think of adhere to the constraints of time signature and key.

In Web Design, we have the same sort of constraints. There are elements of interfaces that users are simply accustomed to, in terms of layout. If done deliberately and tastefully, deviating from these customs can help your design stand out or even set a new trend in motion. However, if done arbitrarily and without a deep understanding of design principles, it can be disastrous. It's easy to become frustrated by these constraints. Not only do we have to adhere to best practices, but we have countless other constraints such as deadlines, stakeholder input, etc. However, it's helpful to not look down upon these constraints as stifling creativity-blockers, but as opportunities.

Constraints provide clarity. Designing a user interface is by its very nature complex. With so many problems to solve for, constraints help us determine what the most viable solutions are. They help us to quell the forces of ambiguity and uncertainty that are constantly working against us. Constraints in turn save us TONS of time. Without them, you may end up designing a product that ignores what customers will actually use and what makes the most sense for the business you're working in.

With this concept in mind, I encourage you to think about any art form, and you will realize that constraints are a wonderful and integral part of them all. The painter's canvas, the actor's script, the songwriter's time signature & key. These constraints are ubiquitous and should not be shunned but embraced.

Silence & Space

In music, silence is the origin from which sound is created, sound cannot exist without silence. The same can be said of space in UI design. Everything emanates from blank space.

"Silences have a purpose in music – they help to distinguish different sections of the score, they allow listeners to shift their attention from one syntactic unit to the next (Knösche et al., 2004), and they help us lay down memory for the tune (Deutsch, 1980)."

Music is a way of communicating emotions and ideas. If there is too much noise in a song, too much clutter, it can be difficult to understand what the music is trying to convey. For example, imagine listening to a song where the instruments are so loud they drown out the singer's voice, preventing you from hearing the words clearly. This would irritate and alienate most listeners. Drawing a corollary back to UI design, imagine a site where the primary call-to-action is drowned out by the noise of a neighboring element. This would cause confusion among users, and they would probably determine your product is too hard to use while navigate elsewhere.

Without giving your UI room to breathe, you add clutter and dysfunction into the user experience. The power and importance of whitespace in UI/UX design cannot be overstated. For a deeper dive into the topic, read this article.

"Yesterday" and Effective Communication

What makes a great song? Well that's hard to define, but for now let's dissect an undoubtedly successful song in terms of reach, and the most covered song of all time, "Yesterday" by The Beatles. What makes this song so great? What enabled it to stand the test of time, captivating entire generations? In my humble opinion, it is effective communication. The song is clear, concise, and unambiguous as to the emotions of the songwriter and what they are trying to convey.

It's completely stripped down, instrumentally speaking. No accompaniment that doesn't serve the song is present. I don't think the song would have been nearly as successful if the whole band was rocking out and there was a random guitar solo after the second verse. By the same token, if the final released version of the song was just Paul singing A cappella, it might not have had the same emotive effect.

The qualities of "Yesterday" that make it an iconic song can be said of a well-designed user interface as well. All elements of the page must support the main message or call to action so that the message is being communicated in a clear, concise, and direct manner. Is the message you're trying to deliver through your design being transmitted in a way that's easy to feel and understand? Are you communicating effectively with your user? Make sure you're not adding any components (accompaniments) to your site that do not serve the larger message. If you are, chances are you're adding clutter and perhaps drowning out your message making it hard for the user to make out the purpose of your product. At the same time you must also make sure you're creating something engaging, interesting and satisfying enough that the user will not lose interest.

A good question to ask is: "Is everything on the page serving a purpose?" Be realistic about what information is absolutely necessary. When you use a website or app, you're typically scanning your way through it as opposed to going line by line as you would read a book. With that in mind, think of how you can make the user experience of your site better by making it more scannable.

Conclusion

We can apply the same attention to detail to our design as a songwriter does to their masterpiece. In fact, why not think of ourselves as songwriters, as artists? We are also crafting experiences and are faced with similar constraints and challenges. So let's create our masterpiece using all of these constraints to our advantage.