A common question Interface Designers face is, how does one present a lot of information without making the interface seem too busy or overwhelming?
Interface designers may be able to solve this problem by learning from established painting techniques. Techniques which move the viewers’ eye across the canvas, create focus, and make a lot of information easy to digest. All of which may help simplify a potentially complex interface, and therefore increasing its usability.
To reduce page confusion, breaking the design down into repetitious objects may help. Consider the painting below by Lucian Freud entitled Factory in North London. The repetition here is the use of shape, namely, rectangles. From the long white rectangles that run across the building to the small rectangles that make up the panes of glass and bricks, the use of rectangles repeatedly helps move our eyes throughout the painting enabling us to see the whole image. There is an incredible amount of detail in this painting, but the use of repetitive shapes makes the painting easy to comprehend.
The use of color also makes the painting cohesive. Two colors dominate – the tan and neutral whites, which help hold the painting together visually. Such strategic use of color can play a large role in an interface’s look and feel and dramatically increase ease of use of a website.
Target.com, is a good example of using traditional painting techniques in the interface design. Most of the content on this page is contained in a rectangle shape. From the main red navigation bar, to the left column and the main content area, the use of rectangles is repeated across the page. Even the text lines seem to render as a rectangle, and there is also a repetition in the use of the arrows next to the text.
Another repeated element is color. Target takes advantage of the color red to move your eye across the page and to connect similar objects.
Consider Cezanne’s work Hortense Fiquet in a Striped Skirt. In this example, the repetition technique utilized is brushstroke. A similar carved, blunt brushstroke is repeated throughout this painting which locks the figure into the background and unifies the painting throughout. Also note the use of red color to draw your eye in and call out other similar red objects in the painting such as the figure’s hands and lips. This technique is comparable to the Target site with its use of red arrows.
Frys.com, there are some problems with repetition making it hard to easily decipher what is going on in the page. There are no dominating repetitive shapes, and there are many different forms used such as, rectangles, squares, ovals, circles, icons – when combined make the page more visually complex.
Additionally, the blue color on the page does not call out a meaningful focus as blue is used for the tabs, links, buttons, and icons. The tabs tend to render as one giant blue rectangle, because of the volume of them and the way they are stacked. This gives the tabs visual dominance over the page, making them very difficult for the user to scan and digest.
In the information age, rather than reinvent new visual concepts, we can learn from the old masters and modern painters which have long used techniques to portray a clear story, create focus, and relate similar objects. The use of similar repetitious objects can help create a rhythm throughout a web page, making it easier to visually and cognitively digest information, while the use of color can help create a focus and relate similar objects. Interface designers might consider examining specifically how established painters use these techniques and how they might be adapted to create more usable interfaces. Also consider visiting an art museum or looking at art in a book or on the web to bring new concepts and techniques into your everyday work.