On Design: Visual Literacy in Interface Design

During my art education at Emily Carr College in the 80s, I took a unique opportunity to study visual literacy under the college’s Dean of Education, Tom Hudson. This research and study involved developing computer-based imagery research for Tom’s telecourse, “Mark and Image”.

In practical terms, it was like having a world-class personal tutor. We started off simply, using the limited personal computer resources available at the time. I remember using Koala Painter (with the KoalaPad and stylus) on a Commodore 64. I divided my screen into quadrants; the first of many “worksheets” which Tom had all his traditional-media drawing students do as well. Inside one of the quadrants, Tom instructed me to draw points and to arrange them spatially. “Feel the space between the points. Feel the space,” Tom’s voice told me. I smirked self-consciously, feeling too much like Luke Skywalker to Tom’s Obi-Wan Kenobi. But I was learning to watch and to listen. Tom’s guidance resonated with me and I kept at it, slowly beginning to learn about the space, pace, rhythm and texture of points, lines and shapes. We started in black and white, and moved into colour when we started looking at “primary” shapes and basic geometry.

I did dozens of screens like this on the C-64, and later, scores and scores more on the Amiga, where the spatial resolution and colour palette were significantly improved. However, it was still a pixely, chunky drawing medium, compared with paper, ink and charcoal. We learned that any deficiencies in resolution were quickly compensated for by the advantages of digital memory. “Cut and paste” and numerous other near-instant transformational capabilities provided by our little paint program provided us with almost unlimited possibilities for variations and explorations.

As for the drawing exercises themselves, it was a bit like learning a new kind of basic grammar, like learning musical notes, chords, and scales. I was actually learning a new vocabulary of visual elements; perceptual dynamics that underlie every man-made visual image. I learned later that the approach Tom took with his computer-based drawing students was based in the Bauhaus Basic Course, in principles taught by Wassily Kandinsky, and in aspects of visual perception documented by Rudolph Arnheim.

These were the same principles that Tom and his colleagues had infused into the British Art Education system back in the 1950s. So, I watched, I drew, and I studied, feeling part of a very fascinating modernist educational tradition.

Now, as I contemplate how my career has progressed and I continue to refine my skills in interface design, I must admit that those early teachings with Tom still have so much to offer me. His voice is still in my ear, and I need to keep listening…

See: “Visual Literacy in Software Design” (paper).

Share

On Narrative: A Story runs through it…

It’s amazing how pervasive the concept of “narrative” actually is. Now, wherever I look, I see a story being told, or something in front of my eyes that is trying to communicate with me. But Non-fiction has an inherent narrative of its own too… What About text in Interactive Environments? Does it contribute a narrative as well? Perhaps we’re back to Marshall McLuhan again…

It’s amazing how pervasive the concept of “narrative” actually is. Now, wherever I look, I see a story being told, or something in front of my eyes that is trying to communicate with me.

Obviously, a story, a narrative, is the basis of written fiction, and creating an effective and engaging narrative is more difficult than I had originally imagined when I set out to write “Owe Nothing” back in 2002.

Works of Fiction, obviously…

Works of fiction (and I’m thinking primarily of the “paperback novel” genre) have a common narrative structure which introduces characters and a situation, presents the characters with a problem to solve or a challenge to overcome, and after trials, successes and failures, brings their story to a close with some sort of resolution and reflection. All of this (if popularity to an outside audience is the author’s goal) should be emotionally or intellectually gratifying to the reader in some way, or provide some sort of entertaining escape.

“Voice” in fiction can be first-person (like any hard-boiled detective caper by Raymond Chandler), where the reader is effectively transplanted into the skull of the main character, seeing things (usually) exclusively through his/her eyes. Or itr may be third-person, where the narration of the story seems to come from a camera or invisible observer which is observing the thoughts and activities of all characters, everywhere.

But Non-fiction has an inherent narrative of its own too…

Non-fiction works also have their own kind of voices that “tells a story” of sorts as well. In instruction or technical manuals, both the first-person and the third-person voice shows up quite commonly.

First-person is used when your Instructor is talking to you, the Reader directly, or when the author is citing some personal experience that is relevant to a lesson or point of procedure.

Third-person, in my experience, is used when the manual (or in my most common experience, a user guide) has no one particular person named as the “author” per se, but is ostensibly written by a corporation for their customers. In that case, the voice that is narrating could be composed by multiple unknown, uncredited authors, blended together (“fingerprints removed”, if you will) by a technical writer.

What About text in Interactive Environments? Does it contribute a narrative as well?

In a word, yes. In my opinion, every word on a web page, including the text in links, navigation buttons, mottos and tag lines, all provide context that reinforces the narrative at hand, so almost in effect becoming part of the narrative itself. (This is my story, and I’m sticking to it.)

The major difference with a visual medium (in this case, the user interface of a web site) is the use of graphic visual language that adds the extra dimension of inferred meaning or context to the wordy narrative.

Parsing photographs, words, icons, and interpreting (feeling) colours in a design is all part of “reading the page”. The designer of it has infused their own cultural symbols, values or expectations to some degree, so that the audience can relate to it more effectively.

Perhaps we’re back to Marshall McLuhan again…

If the cover of your favourite book, or the navigation controls on your favourite eBook Reader, have become strongly associated with the words in the text, then I’d say that the medium will have indeed become entwined in the message.

Share

Reflections on a multimedia career…

All through my post-secondary education (which was four frantic, sleep-deprived, incredible years at art college), I never knew exactly what I wanted to do in art and design.

Now, 21 years after graduating from the ECCAD four year program and receiving my diploma in fine arts, I look at the preponderance of digital media and information systems in the world around me, and I’m amazed at how much that culture and technology have converged, and have even seemed to become practically inseparable.

All through my post-secondary education (which was four frantic, sleep-deprived, incredible years at art college), I never knew exactly what I wanted to do in art and design.

After I learned I was accepted the the Emily Carr College of Art and Design in 1985 (and after I peeled myself off the ceiling), I started to do a few things. First, I panicked, thinking “Gawd – can I do this?”

But I got over that phase, and next I began to imagine what it would be like to be an art student. Unfortunately, nothing but stereotypical images of painting and drawing came to my mind.

Finally, I realized that I needed to prepare myself in a few ways. I needed to assemble my portfolio, and I needed to develop a little confidence. I took a life drawing course at a small studio on Granville Island, and blushed self-consciously while trying to avoid the eyes of the nude model. I scribbled, muttered to myself, and produced a bunch of weak and tentative scribbles that probably were thrown out later. As I was packing up, I looked to the model as she was just reaching for her robe, and she shot me a smile and a knowing look that both reassured me and told me that she knew just how green I was. I laughed on the inside, and walked home feeling some pride in having tried in my first life drawing class.

Fortunately, I passed my portfolio interview (and I still don’t know how I got through it), and began Foundation (first year) studies at Emily Carr.

One of the first places where things really clicked for me was in Foundation Computer class. Even though it was 1985, and we were using Commodore 64s (and in one class, I swear to god I had a Vic-20 with a datasette), I became fascinated by those little machines that were capable of turning key-presses into little glowing blocks of colour and shape. I remember trying to memorize MS Basic character string functions like “Chr$(32)”, and trying to understand how BASIC worked. A year later, the college bought dozens of Macs, Amigas and Atari ST PCs, and we all began using mice and creating real computer-based graphics and animation.

I also began to consider the schism within myself: artistic and instinctual on the one side (my Mother), and structural and technical on the other side (my Father). Early on, I did not know how to reconcile these two aspects of my personality, but I knew that they would co-exist, and eventually, I developed the idea that they would interact or influence each other in some way.

In the following years, I developed a keen interest in multimedia, animation and video, and began to learn how these technologies were gradually converging (read Stewart Brand’s book “The Media Lab”). I absorbed as much media theory as my instructor Gary Lee Nova provided, got technical help designing simple electronic circuits from Dennis Vance, and studied on my own a lot (relationships between art, science and technology, cybernetics).

More than any other teacher I’ve had, Dr. Tom Hudson was a massive influence on me throughout my art student years. Under Tom’s tutelage and inspiration, I learned about visual literacy, and undertook experiments in colour and drawing in the Bauhaus and British post-war traditions. The main difference was that all my “vis-lit” research for Tom was executed on a microcomputer, using a commercial paint program. We were actually exploring and developing work in computer-based visual literacy. This extracurricular research work was used in Tom’s educational television series “Mark and Image”, and also published in two of his academic articles for the British Journal of Art and Design Education. These events remain my academic high-water marks, and form the springboard of my interest and development as a digital designer.

By a couple of years after graduation, I was developing icons, layouts and animations for the user interface of what was to become North America’s first home-based banking system. From there, my interest in GUI design and web design was born. Since that time, I’ve enjoyed working with software designers on GUI design projects for TV, game consoles, PC and web-based applications. The essentials of visual literacy, colour, design, perception, and user expectations have all been developed and refined through those practical, real-world design projects.

Now, 21 years after graduating from the ECCAD four year program and receiving my diploma in fine arts, I look at the preponderance of digital media and information systems in the world around me, and I’m amazed at how much that culture and technology have converged, and have even seemed to become practically inseparable.

I think that good digital design is more important than ever, and being able to work in multiple media, multiple formats and multiple modes of thought (artistic, technical, exploratory, practical) seems to me to be more important than ever.

Share