What Music Can Teach About Information Design
The ability to read and write music notation has precipitously devolved from the skill set of people involved with any type of organization of sound, i.e. audio art and/or music. But in cases where some type of 'score' is required, standard notation is still the tool of choice.
When I teach music, I typically treat the introduction of notation with kid gloves, as it can be intimidating to students with a resistance to theoretical or scholastic approaches to learning music. But standard music notation is an excellent framework for giving instructions, without being arrogant or dictatorial. It shows people the way without confusing them, as everything is clearly stated yet left open to some interpretation.
Music notation can also teach us so much about usability, information architecture and design standards. One bar of music can transmit so much information clearly and efficiently: key, meter, tempo and dynamics are supplied at the upper left as the main navigational 'menu'.
Eye-tracking studies show that we tend to first focus our eyes at the upper left side of a display, at about 100 pixels from the top and left, which is incidentally at about the same location of the first bar of a sheet of music or the salutation line in a letter. This finding alone would suggest a concentration of important information at these locations, and may be a good strategy to target that location for the placement of important information.
As we all may remember, the early years of the Internet were a veritable bacchanalia of screen decorating-- with odd interaction design and architectures, a surfeit of Flash animations qua websites, and overly ambitious attempts to make the web like cinema--with the (now dead thankfully) Flash Intro pages, that sought to make web surfing more like film watching. To use a double metaphor, it was a time when we couldn't see the Internet for the screens. But in terms of aesthetics, the early design strategies, although they were odd, at least attempted a compelling user experience.
In contrast, some displays go out of their way to be cold and perfunctory, from improper placement of visual elements, use of garish color palettes, confusing toggle button functions, and cramming the screen with arcane icons and/or toolbars. In certain respects, these visual strategies are more like the abstract art scores of John Cage, that weren't standard in any respect.
A Cage score is an open-ended set of instructions that were never intended to produce consistent performances. Websites however rely on a small world of common perceptions and behaviors.
Utilitarian strategies, unlike abstractions, have focused intentions, and the primary objective is to understand the user (audience) well enough to know exactly how to proceed with a design.
User interfaces in business software are decidedly of the utilitarian variety at the expense of more aesthetic approaches that could make users less stressed and more productive. Such visual strategies indicate that the designer (if there even was one ) did not think that design was a factor. Visual perception is a part of an evolved human experience, and in many cases this is never addressed, or belittled as simply 'making things pretty'. In fact, these small visual details mean more than most people think--especially if users use it all day long. Migration to tablet devices and a switch to an "App" design paradigm will most likely shift the baseline to where 'pretty' will be the standard.
On Icons
Icons are the most highly abused element in interface design. Icons are abstractions, and more like a John Cage score than of Mozart. Also use of directory tree structure and folder icons drive people to think in folders. Folders also have specific affordances unique to operating systems, so one would not want to make an element that looks like a folder, or is in a place where folders are usually located, and give them another function. A better option would be to put things in stacks, in which case a drag -drop model would be more efficient.
While icons are useful in the sense that they provide some metaphorical connection to an operation or task, they are usually too abstract to use as an interactive element. Words themselves are already icons, so there is no need for other descriptions. Similarly, music notation is comprised of clearly identifiable shapes and symbols, that when used in certain patterns, produce generally consistent results.
Pattern Languages
A Pattern Language, by Christopher Alexander is a wonderful little tome that every designer, artist or even musician should have in their library. Written specifically for architects, planners and landscape designers, it can also be used as a way to make metaphorical linkages in other domains.
The book is neatly organized and presented in a series of taxonomies or clusters, from cities, villages and communities to individual rooms, nooks and gardens. One can open any page of the book at random and find some interesting pattern to inspire the task at hand.
Whereas A Pattern Language tends to say "do it this way as it is the better way", music notation says "there's no other way to do it because it might be confusing." At some juncture, constraints have to be imposed, regardless of the creative ideas and methods--ergo the use of standards and patterns, and for the purpose of this discussion, use of metaphor.
***
Some Metaphorical Comparisons: Music Notation/Information Architecture ("IA")
Key Signature
Places sharps and flats in one location so they don't have to be restated on each occurrence of a note.
When a pitch has been lowered or raised, an 'accidental' is used. If the altered pitch returns to the home key, a courtesy accidental in parentheses is supplied. (Isn't that nice?) But that doesn't typically occur in most information architectures.
Key Signature (Analog with IA)
The analog for a courtesy accidental in IA is to use some type of visual cue, most likely some unobtrusive popup of some kind with a color variation or contrast to indicate that something had been changed and is being changed back to the default.
[Note about popup messages: These can become annoying. Include unobtrusive pin-point controls directly in the dialog box so this can be done on the fly rather than being interrupted to decamp to Options or Preferences menus. This also touches on the Information at the Point of Need rule, where messages and alerts are placed strategically.
(Moo.com does a nice job with this in both their screen and print designs, with friendly little messages. Google now uses them when some new features are introduced. These types of reminders and prompts are generally a good practice, and are analogous with 'courtesy accidentals'. Reminders don't necessarily have to be fawning, just appropriate to the design schema.)
Meter
Like the key signature, meter is stated at the first bar. Courtesy meter changes are given at the end of the preceding staff:
Meter (Analog with IA)
Use of breadcrumbs as a navigational element on a website is somewhat analogous to the use of courtesy meter changes as in the above example. Once navigation reaches a certain density or complexity, breadcrumbs are extremely useful, and ideally should be placed at the center of the eyetrace, or where users expect to find it.
As with all metaphorical comparisons, they are only useful to a certain degree. All disciplines have unique characteristics that don't coincide with other domains. But when dealing with any kind of visualization, either tangible or in the imagination, there is always some element that has some practical application in the task at hand.
When I teach music, I typically treat the introduction of notation with kid gloves, as it can be intimidating to students with a resistance to theoretical or scholastic approaches to learning music. But standard music notation is an excellent framework for giving instructions, without being arrogant or dictatorial. It shows people the way without confusing them, as everything is clearly stated yet left open to some interpretation.
Music notation can also teach us so much about usability, information architecture and design standards. One bar of music can transmit so much information clearly and efficiently: key, meter, tempo and dynamics are supplied at the upper left as the main navigational 'menu'.
Eye-tracking studies show that we tend to first focus our eyes at the upper left side of a display, at about 100 pixels from the top and left, which is incidentally at about the same location of the first bar of a sheet of music or the salutation line in a letter. This finding alone would suggest a concentration of important information at these locations, and may be a good strategy to target that location for the placement of important information.
As we all may remember, the early years of the Internet were a veritable bacchanalia of screen decorating-- with odd interaction design and architectures, a surfeit of Flash animations qua websites, and overly ambitious attempts to make the web like cinema--with the (now dead thankfully) Flash Intro pages, that sought to make web surfing more like film watching. To use a double metaphor, it was a time when we couldn't see the Internet for the screens. But in terms of aesthetics, the early design strategies, although they were odd, at least attempted a compelling user experience.
In contrast, some displays go out of their way to be cold and perfunctory, from improper placement of visual elements, use of garish color palettes, confusing toggle button functions, and cramming the screen with arcane icons and/or toolbars. In certain respects, these visual strategies are more like the abstract art scores of John Cage, that weren't standard in any respect.
A Cage score is an open-ended set of instructions that were never intended to produce consistent performances. Websites however rely on a small world of common perceptions and behaviors.
Utilitarian strategies, unlike abstractions, have focused intentions, and the primary objective is to understand the user (audience) well enough to know exactly how to proceed with a design.
User interfaces in business software are decidedly of the utilitarian variety at the expense of more aesthetic approaches that could make users less stressed and more productive. Such visual strategies indicate that the designer (if there even was one ) did not think that design was a factor. Visual perception is a part of an evolved human experience, and in many cases this is never addressed, or belittled as simply 'making things pretty'. In fact, these small visual details mean more than most people think--especially if users use it all day long. Migration to tablet devices and a switch to an "App" design paradigm will most likely shift the baseline to where 'pretty' will be the standard.
On Icons
Icons are the most highly abused element in interface design. Icons are abstractions, and more like a John Cage score than of Mozart. Also use of directory tree structure and folder icons drive people to think in folders. Folders also have specific affordances unique to operating systems, so one would not want to make an element that looks like a folder, or is in a place where folders are usually located, and give them another function. A better option would be to put things in stacks, in which case a drag -drop model would be more efficient.
While icons are useful in the sense that they provide some metaphorical connection to an operation or task, they are usually too abstract to use as an interactive element. Words themselves are already icons, so there is no need for other descriptions. Similarly, music notation is comprised of clearly identifiable shapes and symbols, that when used in certain patterns, produce generally consistent results.
Pattern Languages
A Pattern Language, by Christopher Alexander is a wonderful little tome that every designer, artist or even musician should have in their library. Written specifically for architects, planners and landscape designers, it can also be used as a way to make metaphorical linkages in other domains.
The book is neatly organized and presented in a series of taxonomies or clusters, from cities, villages and communities to individual rooms, nooks and gardens. One can open any page of the book at random and find some interesting pattern to inspire the task at hand.
Whereas A Pattern Language tends to say "do it this way as it is the better way", music notation says "there's no other way to do it because it might be confusing." At some juncture, constraints have to be imposed, regardless of the creative ideas and methods--ergo the use of standards and patterns, and for the purpose of this discussion, use of metaphor.
***
Some Metaphorical Comparisons: Music Notation/Information Architecture ("IA")
Key Signature
Places sharps and flats in one location so they don't have to be restated on each occurrence of a note.
When a pitch has been lowered or raised, an 'accidental' is used. If the altered pitch returns to the home key, a courtesy accidental in parentheses is supplied. (Isn't that nice?) But that doesn't typically occur in most information architectures.
Key Signature (Analog with IA)
The analog for a courtesy accidental in IA is to use some type of visual cue, most likely some unobtrusive popup of some kind with a color variation or contrast to indicate that something had been changed and is being changed back to the default.
[Note about popup messages: These can become annoying. Include unobtrusive pin-point controls directly in the dialog box so this can be done on the fly rather than being interrupted to decamp to Options or Preferences menus. This also touches on the Information at the Point of Need rule, where messages and alerts are placed strategically.
(Moo.com does a nice job with this in both their screen and print designs, with friendly little messages. Google now uses them when some new features are introduced. These types of reminders and prompts are generally a good practice, and are analogous with 'courtesy accidentals'. Reminders don't necessarily have to be fawning, just appropriate to the design schema.)
Meter
Like the key signature, meter is stated at the first bar. Courtesy meter changes are given at the end of the preceding staff:
Meter (Analog with IA)
Use of breadcrumbs as a navigational element on a website is somewhat analogous to the use of courtesy meter changes as in the above example. Once navigation reaches a certain density or complexity, breadcrumbs are extremely useful, and ideally should be placed at the center of the eyetrace, or where users expect to find it.
As with all metaphorical comparisons, they are only useful to a certain degree. All disciplines have unique characteristics that don't coincide with other domains. But when dealing with any kind of visualization, either tangible or in the imagination, there is always some element that has some practical application in the task at hand.
Comments