On Friday I gave a talk at Yahoo! about applying Visual Communication principles to Web application design. The presentation was an extended version of a talk I gave at eBay last month and is based on concepts outlined in Site-Seeing:
Visual Communication Principles for Web Application Interface Design (4.1 MB PDF)
In order for a Web application to be "usable", it must be understandable. It needs to communicate, and communicate effectively. When a user interacts with a Web application they have only the visual presentation (the interface) to "tell" them what the application has to offer, and how they can make use of it. As a result, designers must rely on visual communication principles to tell our audience: about the behavior, structure, and purpose of our Web applications. The better at communicating we are, the easier it is for our audience to understand our messages and intentions, and the easier it is for them to use and appreciate our Web applications.
Visual communication can be thought of as two intertwined parts: personality (or look and feel) and visual organization. The personality of a presentation is what provides the emotional impact —your instinctual response to what you see. Creating an appropriate personality requires the use of colors, type treatments, images, shapes, patterns, and more, to “say” the right thing to your audience. A well thought-out visual organization, on the other hand, can greatly enhance usability by grouping information into meaningful page elements and sequences. Such a system relies on an understanding of how people use visual relationships to distinguish objects and what those relationships reveal to viewers (through visual weight and visual hierarchy).
Visual Communication is a key component of interface design and unfortunately often under-represented in interaction design methodologies. This talk introduces the core principles of Visual Communication (with an emphasis on Visual Organization) and through many practical examples details how they can be put to use during the Web application interface design process.