Take a moment and think about the worst website you’ve ever seen.

Confusing layout. Jarring colors. Disorganized content. Broken links. A place you never want to visit again.

Now, think about your favorite piece of music.

Beautiful melody. Rich harmony. Substantive lyrical content, if it has words. Room in between the notes to give you a sense of context, spaces to breathe and reflect.

Remember the two examples you’ve visualized above. They’re actually more related than you think.

In their insightful SXSW presentation “The Music of Interaction Design,” user-experience designers Cennydd Bowles and James Box stressed the point that creation of great user experiences on the web and in other interactive applications can be inspired by musical theory. Bowles and Box have used these principles in their UK interactive design firm Clearleft Ltd. to build an impressive portfolio of clients including Universal TV Networks, Mozilla and the WWF (formerly World Wildlife Fund). Their sites are clean, straightforward and occasionally edgy – a balance they say is crucial for success in this area of design.

Cennydd Bowles (left) and James Box

Bowles and Box provided a number of visual and aural examples to explain this concept:

– The concept of perceptual layering – using distinct colors and textures to help the mind make sense of complex visual data – comes up again and again in successful design; a great example is the iconic London Underground map. This is also a fairly basic concept in music composition, exemplified through techniques such as the use of higher-pitched instruments like woodwinds, violins or a trumpet to carry melody. Focusing on distinctions between layers can help designers better understand how to make information easier for viewers (or website visitors) to understand.

– Poor interactive design often includes a jumble of items on a page – with little contrast or separation – that makes it difficult to understand or navigate information. Bowles and Box mentioned the Department of Homeland Security’s ESTA form, which they were required to fill out as visitors coming to SXSW from outside the U.S., as an example of maddening design.  Such design can also be done very well: They cited the critically-lauded word processing program Ommwriter, which creates a calming blank screen and subtle shading as a writing environment with minimal distraction – while also providing ambient, minimalist music for the user to help block out other distractions. The pair felt the addition of this soundtrack was a perfect melding of audio and visuals to create a desirable user experience.

– Musical compositions across many genres often use the tonic – the first note of a scale – as a starting point, jump off from there into exposition and later returning to the tonic to provide a sense of resolution to the listener. They argue that this can be applied as a core concept in interaction design – for example, a confirmation screen at the end of a form or e-commerce transaction that clearly summarizes the information you’ve provided so you the user doesn’t feel lost or confused.

They also discussed the shared concepts of symmetry and simple contrasts in visual design and music composition, both proven to be clear preferences among the public. They cited the “People’s Choice” project by Russian-American artists Vitaly Komar and Alexander Melamid, in which they created visuals and music based on data from residents in 11 countries who were polled about what they wanted from art. Bowles and Box played excerpts from the “most wanted song” (a short, mid-tempo R&B number, featuring vocalists of both sexes, singing generic lyrics about love) and the 25-minute-long “least wanted song” (which their Wikipedia entry accurately described as “an operatic soprano rapping over cowboy music featuring bagpipes and tuba while children sing about holidays and advertise for Wal-Mart”).

The People’s Choice project showed that total reliance on user preference doesn’t often lead to groundbreaking design (to quote Bowles, “Middle of the road is a safe place, but it’s not where true artistry lies”), but the pair stressed that an appreciation of shared concepts between visuals and music can result in a clear, communicative user experience that still takes some risks. When design is ultimately successful, said Bowles, it becomes “emotional design” – it clicks with users, yet challenges our brains to process information in new ways.

Bowles and Box expand on their user interaction design theories in the book Undercover User Experience Design, released in September 2010.  Stay tuned for more SXSW coverage from Art&Seek throughout the coming week.