Sound & Vision: The Music of Interaction Design
Are Music and Interaction Design similar to one another? and how can it help us create a better user experience?
As an individual interested and engaged deeply with both music and design (Interaction design specifically), I've come to realize over the years how much these two unique art forms have in common. They blend art and science, much of their core elements are the same (rhythm, flow, composition), they can arouse immediate emotional response, and they both tell a story which often can be read subjectively according to the person’s own historical/cultural background.
In this post, I’ll be reviewing 5 elements that exist both in music and Interaction design, and when combined together, create a better, more meaningful and interesting user experience.
1. Surprise
Musically, studies have shown that we are most interested and concentrated with a song, when it maintains a certain amount of surprise. When the music we listen to is too predictable (Pop hits for example) — we get bored, and when it has too many surprising elements (Jazz improvisations for example) — we tend to get frustrated and lose interest.
This basic principle is also true in interfaces.
in our fast growing world, where every toddler knows every social network, it’s important to try and create an experience with a pinch of surprise.
It doesn't have to be a grand orchestration. Even a small gesture can change our user’s experience for the best; a nicely done animation move, a humorous popup or an icon — if we were able to put a smile on our users’ faces, or make them pause for a second in their ordinary workflow, then mission accomplished.
Take for example, the UK national train mobile app. When a user browses the app at home (we all do that, don’t deny it), and presses the “next train home” button, he gets the next popup: “You are already home!” (Too bad the app couldn't add a “D’oh!” to it).
Now, this is quite funny. The app is telling you something you already know (you’re kinda dumb for trying this at home…), but having been “busted” doing so — that’s the surprise bit.
Users tend to remember a surprising experience, making your product memorable and worth getting back to. Users appreciate gestures, and the notion someone thought about them — is valuable. Similar to relationships, sometimes even the smallest surprise says, “I think of you”…
Here’s another surprising experience; imagine yourself taking a nice evening stroll, when you suddenly see a dozen eyes following you from what seems to be a standard shop window…
This video is an example for a surprise that not only makes you smile, but also inspires you to engage. To become curious and playful, to interact back at, well… a window. This is a priceless experience.
2. Subtraction
“When designing a user interface, ask yourself not ‘what does this need?’, but ‘what can this do without?’ (Mark Boulton, British Interaction designer and blogger)
The ability to subtract elements and refine our idea will enable us to achieve a better experience, and more importantly, much more communicative. An overload of features won’t make one’s interface’s problems look better — on the contraire, it will enhance them.
Perhaps the most important question that should be asked is, “do I really need this”. Often people tend to forget that sometimes simplicity — or maybe accuracy — works better than any given shiny effect.
This is true for content (“continue” button and not “click to continue”), for design (a menu icon that turns itself into an exit icon — you don’t need 2 icons placed together) and for interaction (not every component has to swirl and dissolve).
Taking the music world as a metaphor for this conclusion, not every song has to include a big-band orchestra in order for it to be remembered. Sometimes we can be moved simply by hearing one playing instrument with a singing voice (though I don’t kid myself it is often also a matter of taste — some of us simply like folk / low-fi music than big pop / hip-hop productions).
Often product mangers want to show off their product’s capabilities to such extent that they forget, how sometimes “less is more”.
Weather apps for example, exist by the bundle. They all have the same purpose, but they try to outcome the competitors by adding more textual layers and/or demonstrate a top-notch design. But do we really need this much of info? Will users prefer one app over the other, because it presents the humidity percentage? Does it matter whether I see a rainy cloud illustration to indicate it’s raining outside?
As oppose to that, let’s take Tobias Van Schneider’s (super-talented interaction designer) “Authentic Weather” app. This conceptual project is referred to as “probably the most honest weather app out there”.
The app “tells” you what it “really” thinks of the weather (an element of surprise - these “weather phrases” change according to different weather, days, location and even the daily news). Users can get more info by pinching the main screen (and get the exact temperature as an overlay layer), or swiping down to get the forecast for tomorrow, the next day or “whatever” (yes, this is the true title). They can also use the camera mode to snap a picture of the weather and share it.
So this app is appealing, mainly because its minimal and slick design supports its minimal concept. Once determined -to describe the weather as phrases -there aren't many detours to take, and so the user gets an accurate, functional and enjoyable experience.
3. Rhythm
Rhythm, derives from the Greek word “flow”, is what units between different elements within a given composition. Without rhythm, we won’t have music. This is true also in interaction design; the ability to maintain users within an app or a website has a lot to do with the pace we — as UX designers or Interaction designers — choose for them when they browse through actions and screens.
To take the metaphor a step forward, if a user’s usage of an app is like a stroll, we should not only make his view clear and beautiful, but also provide him soothing and relaxing atmosphere so he could skip happily at his own pace.
There are many “instruments” interaction designers can use in order to achieve different types of rhythm. One of the most basic tools to be used is Typography. Different fonts, even without changing the layout, kerning or leading, can make a big transformation in creating different “beats”.
“It is like writing music in a way — the tune isn't done by me, the tune is what people write — I do the sound. A sentence is a sentence is a sentence. And a tune is a tune is a tune. But whether you play the tune on a Banjo or the Piano, or whether you sing it, or whether a girl sings it or a man sings it, makes it sound different. And that’s what I do, I add the sound” (Erik Spiekermann, Typographer and Graphic Designer)
Another important tool is composition; the way different elements get together within a given space. This basic term exists in all the Art fields: Architecture, Music, Painting, Interior Design, Photography, Dance, Illustration, Interaction Design and so on.
Composition usually is accomplished with the assistance of the grid. The latter is the structure (usually two-dimensional) made up of a series of intersecting straight guide lines used to structure content. Based on a grid, the designer can organize and place graphic elements (images, texts, icons and so on). Different grid systems serve different purposes and goals, and of course, convey different rhythm types to users.
The last tool I’d like to mention in this context is repetition.
In music, when our brain looks for the repetitive element in a song — and this happens automatically — it creates an expectation.
“Repetition makes it possible for us to experience a sense of expanded present… a Deja-Vu-like sense of orientation and involvement” (Elizabeth Hellmuth Margulis, Researcher and Writer of “How Music Plays the Mind”)
This is why we like to hear our favorite music over and over again, and more importantly — the repetitive motive is what makes us look for a rhythm, a hook we can rely on.
Most of popular music songs from the early 20’s are built in repetitive segments: section A (the verse and chorus), section A again, section B (a slightly different verse and chorus) and section A again.
Repetition in design can be achieved by using color (as background, text, interactive elements), typography (typeface, setting, color), layout (structure) and other visual elements (images, icons).
GOOD’s website (entitled “a magazine for the global citizen”) has a couple of repetitive elements that help unite its look and feel and make it more accessible (and pretty!):
Typography — headers are bold, tags are uppercase, and overall there are 3 font types (header, subtitle, author details). This leaves no room for mistakes or unwanted noise.
Grid — strict news-like structure divided in 3 columns, with wide images and bold separators.
Color — main colors are black (logo, headers, separators, navigation), blue (buttons, links, ads), orange (hover titles, small texts) and green-blue.
These elements make GOOD’s website to stand out and appeal to its users. It creates a rhythm that helps them navigate, engage and eventually, enjoy its varied content. And from rhythm comes flow…
4. Flow
Prof. Mihaly Csikszentmihalyi is a distinguished scholar of Psychology and Management, best known for his work in the study of happiness and creativity. He is also the architect of the notion of flow.
Prof. Mihaly basically stresses that flow is not depended on culture, time or place; it is in fact a distinguished moment of self-motivation, where a person is invested entirely in his creative doing (avoiding stressful emotions such as anxiety or boredom, thus “riding” the “flow channel”).
Flow is an important element in Interaction design, since it affects our direct experience. However, flow is not something an application can “have”; the challenge is to create flow within the users, by giving them the right stimulation.
In short, flow depends on good UX. And good UX makes people happy.
There isn't one proper way to gain flow, since every site/app has different goals, users and graphic language. It really comes down to this: we should not design for devices or technology, but for people. i.e., for emotions and behaviors.
Following our discussion on the importance of tools like typography, color and composition, we can now elaborate on transitional effects, which are a valid tool for creating flow for our users. Similar to music, where different segments and instruments collide and entwine to create a singular song, transitional effects between actions and screens intend to make users comfortable and content.
Using slow and tiring transitions will get users aggravated, while a speedy transition will make them dizzy and even disoriented.
This short clip entitled “the future of the airline website”, designed and executed by FI, not only includes a well-crafted UI, but also provides an experience that works so well due to smart and engaging transitions. They are almost invisible, but they play an important rule: they sharpen our attention, direct us where to look, and show us the relationship between various UI elements.
“It’s all about the choreography of people’s attention. Attention is like water. It flows. It’s liquid. You create channels to divert it and you hope that it flows the right way” (Apollo Robbins, Magician)
Naturally, we can’t force users to look to a specific point or press on a specific button, but we can guide them with the assistance of our design. Which leads me to my final point.
5. Magic
So basically, we should strive to be magicians ☺ and the magic happens when we maintain all of the above elements: when we produce an experience that has a refined content that has flow and rhythm, with a pinch of surprise. Don’t we all want our products / apps / sites to be like that?
And like any amazing dish, we need a secret ingredient that will add a little bit more magic. And this comes in the form of our ability to tell a story. People tend to see design as a mean to solve a problem. Why not see it as a mean to connect?
Interaction design can be a narrative path with many possibilities, and it’s up to us to determine what’s the purpose of our story: to educate, stimulate, inspire or sell.
Michel Gondry is a visual artist, a well-known film director who started his career by making video clips. Daft’s Funk’s song, “around the world”, is one of his most famous and creative works. Gondry has built a story frame around the song’s repetitive melody: each instrument received a different visualization — Spacemen represented the singing voice, Athletes — the bass line, Disco girls for the keyboards, skeletons for guitars and the Mummies for the drum machine.
Gondry has given this song a new narrative, and used various tools to do so: the intentionally weird choreography moves, the colorful lighting in the background, the division to 5 groups of odd characters, and so on. And so this 97’ hit received a meaningful subtext that speaks about time, space, art, life and death, and creativity.
Kevin Spacey, (The all mighty Frank Underwood in “House of Cards”), also speaks of the importance of telling a story, in this 2013 Edinburgh Television Festival talk:
According to him, the definitions that separate between a website, a movie, a book or a widget will disappear in the future and thus, the only thing that will always stay relevant is content.
And so in the same way that we keep coming back to the music that attracts us, interests us, moves us or tells us a story, we will also keep coming back to the UI that gave us a good and memorable experience.
Our role as designers is not only to lay information, but to pave a narrative, because there lays the true magic. And no one can resist a good magic…
