Visual Framework

Problem

People rely on visual cues to give them an overall sense of where they are.

Solution

Create an overall visual framework that consistently uses styles, layout, and navigational elements.

Context

You always need to think about and create a visual framework.

Rationale

A visual framework creates a consistent, predictable visual environment that can help orient people across the various different views in a solution. By doing that, people can easily figure out where they are and what they are looking at. It can contribute to and reinforce a brand.

It can also aid in usability—people know where to look for certain kinds of elements. If the navigation is always in the same place, then people know where to find it when they need it and they can ignore it when they don’t need it. Similarly, placing the same kinds of buttons (like OK, Cancel) in the same place in dialogs can help people more quickly make the choices they want and avoid errors. In general, it can help people to focus on the kinds of visual element they are interested in without having to re-evaluate the enter interface as it changes.

All in all, it contributes to the overall experience that people have with your solution. Just like you want to think through the various stories of interaction, you want to make sure that the visual framework contributes to establishing connections throughout the various interactions.

Implementation

In practice, many user interface technologies have the idea of templates/masters. The idea is that you create one or more of these that has a consistent structure (such as Grid Layout) and elements (like Breadcrumbs, Global Navigation, Button Groups, Command Area, etc.) with placeholders for content that can change. Then you use these throughout your solution, only deviating when you have a good reason to.

In addition to the structural and elemental framework, you also should think about stylistic elements—using consistent colors (as in Few Hues), fonts, and treatments (such as Corner Treatments). You should also think about language—creating a consistent style and also consistent formatting elements (use of lists, tables, etc.) and length (e.g., how long are your headings, summaries, etc.). Similarly, you should consistently use controls (checkboxes, radio buttons, drop downs, etc.) throughout the solution.

As noted in the rational, a visual framework contributes to the overall interaction experience, so you should think about the framework together with a consistent behavioral experience—when and how you show dialogs, what kind of validation constraints you use and how these are surfaced to people, what kinds of transitions you use, and more.

Sources

Jennifer Tidwell, Visual Framework

Tags

Usability, Navigation, Color, Interaction Design, Page Layout, Consistency, Information Design, Visual Design.