In my first article, I attempted to explain the importance of graphic design for the user experience (UX). In a nutshell: I think there are still many people, in the field and outside it, who do not understand the importance of graphic design. Of course, this is not a black and white issue. In my opinion, the myths and misunderstandings about graphic design add shades of grey to this situation.

To highlight the importance of graphic design for UX, I tried to identify the main principles underlying the practice.

First, I would like to emphasize the most important principle, which seems to be forgotten all too often: user interface (UI) design is an integral part of UX. User interface design is a means that we have at our disposal to solve UX problems. The following image, from Dan Willis, illustrates this well:

Since graphic design is a component of UX, we have to master and understand certain aspects of UX before undertaking graphic design. Patrick Williams, accredited graphic designer and Creative Director at the digital agency TP1, explains:

“For me, graphic design and UX have a common goal: to draw the users in and to assist them. Both practices rely on different means but serve the same purpose. Even with the best UX, if the UI is not aligned, this common goal cannot be reached and vice versa.”

Beckii Adel, who is in charge of user interface design as well of everything UX-related at Dynamo, also shares this view:

“Since I do not agree with the idea that ‘form follows function’, I think that design should be developed hand in hand with other aspects of UX. The idea is to work together to ultimately create a product. “

To demonstrate how graphic design plays a key role in UX, let’s consider the eight principles I have identified:

•  Graphic design creates visual languages
•  It connects the experience to the brand
•  It infuses the product with emotion
•  It improves the acceptability of interfaces
•  It emphasizes simplicity
•  It allows users to skim pages
•  It supports the information architecture
•  It supports interface usability and accessibility

 

1  Graphic design creates visual languages

According to Luke Wroblewski, graphic design creates visual languages that help users to quickly understand what is offered, how they can use it and why it is useful for them.

Airbnb excels in this area with its home page. The visual language is efficient, since the three main types of users can find their way very quickly. These three types of users are identified according to the task they want to perform:

•  It’s the first time I use this site and I want to know how it works.
•  I am looking to rent an apartment for a trip.
•  I want to publish an ad for an apartment.

Of course, the decision to remain focused on users and their tasks is not made by graphic designers, but their work can really support this idea. Typographic treatments and colours help users find their way because they create a visual language and delineated zones.

2 Graphic design connects the experience to the brand

A recognizable, well understood and engaging brand is central to the success of a business. The imprint it leaves on users’ memories determines whether they will return. Thus, the first contact with a visual identity through an interface is decisive. The integration of the brand into the interface or the integration of the interface into the brand requires special attention from graphic designers.

Apple remains one of the best examples of brand integration and consistency in all of its communications. Despite its simplicity, Apple’s visual identity has imprinted itself in people’s minds. If we analyze Apple’s graphic design, it becomes abundantly clear that typographic treatment, image presentation and colour management are extremely consistent in all of its communications, whether they are digital or printed.

 

3 Graphic design infuses the product with emotion

Users’ emotional experience is complex and fragile. The user’s experience must be consistent and user-centred to guarantee its success. This is increasingly being described as the “emotional design”.

Emotional design can be based on different objectives, such as engaging in dialogue with users, giving them control, customizing information according to their needs or asking them to act. In any case, the goal is to engage users in the experience. At the Tout le monde UX event about engagement, Antoine Azar, CEO and CTO of Mobilogie Thirdshelf in Montreal, said that in his opinion, the one-to-one relationship with the user will become a significant trend in the coming years.

When the emotional impact is critical for the success of a project, graphic design and other aspects of UX must be based on research and thorough analysis of users, their contexts and their expectations.

The Songza site, for example, is full of emotional design. Music is offered according to different emotions, the time (day, week, season, etc.) and activities related to these times. Here is a screenshot from a Sunday morning:

 

4 Graphic design improves the acceptability of interfaces

Although we don’t often talk about the acceptability of interfaces, it is an important factor. It is even more important than usability because in order to be usable, the interface has first to be used and in order to be used, it has to be accepted.

This diagram from Nielsen explains the concept of acceptability:

The first thing we see in an interface is its design, so it strongly influences our acceptance of it.

The TV remote control is an example of an interface that I refuse to use. We don’t talk much about this type of interface, but I think that it would benefit from an extensive graphic makeover. Other than the basic functions, such as changing the channel or the volume level, I don’t engage in any further interaction with the object because I just don’t understand it. Its information structure and the terminologies have nothing to do with my expectations or with my knowledge.

 

5 Graphic design emphasizes simplicity

The graphic design stage is the last opportunity to simplify interfaces; this is good thing since graphic design has the power to illustrate complex concepts with a well thought-out image.

Moreover, everybody agrees that simpler is better when it comes to presenting the content and interactions. Unfortunately, it is often the case that interfaces become more complex as they proceed through the approval process.

We have to find a balance between simplicity and the addition of detail in order to ensure that interface functions are easy to understand. 

To explain the technology of one of their shoe models, Saucony created a website where the different shoe components can be explored. This is a good example of how information can be taken from complex to simple with the help of design. Each image dissects a component of the shoe; even the assembly of components can be seen, with the use of parallax effects in between images.

 

6 Graphic design allows users to skim pages

Something that has been observed countless times is the fact that, quite simply, users don’t want to read when they visit a website. Steve Krug keeps saying it and we do too:  people skim pages and only read them partially.

We have to keep this phenomenon in mind and must draw the user’s attention to what counts. Graphic design plays a key role here. Iconography, images, typographic treatments, colours and other graphics tools can be used to guide users through the pages. It can be quite simple to do, but sometimes the graphic designer faces big challenges. The Montreal Airport site, designed by Nurun, for example, probably represented a serious challenge given the mass of information it contains.

On the home page, a recurring user task was brought to the forefront: flight information. The main menu is also supplemented with icons to facilitate an understanding of all the contents and services offered. Other user tasks, such as directions to the airport or parking spot reservation, also respect the established visual hierarchy.

 

7 Graphic design supports the information architecture

Graphic design can really help users find their way through the information architecture and ensure that they understand the contents that are presented. From the large structure (macrostructure) to the details (microstructure), design helps with the comprehension of the information hierarchy.

According to Peter Morville, information architecture employs diagrams to organize information that, when properly selected and employed, allow users to find what they are looking for and navigate in the structure. To work properly, these diagrams should be designed with great care, at the final design stage as well as at in the wireframes.  

The strategy used on the Adioso site is to allow travelers to look for flights according to prices, unlike most sites, for which the starting point of the research is the destination. The design of the search field labels on the home page not only help to introduce this concept, but make sure that it is the prominent feature, with other relevant search fields remaining available.

 

8 Graphic design supports interface usability and accessibility

Graphic design consolidates usability and all ergonomic aspects of the experience. This is often the best way to address usability problems. Unfortunately, if this is not achieved, it is often the source of usability problems. Even if graphic designers don’t usually create the experience architecture, they must understand and participate in the process of developing interface ergonomics. This should be a given, especially since they are the ones giving the interface its finishing touches!

Interaction design, closely related to graphic design, also contributes to meeting users’ expectations.

Interface accessibility is targeted at several specific factors. There are many factors and disabilities that can limit individuals’ ability to understand interfaces: partial or total blindness, aging, deafness, psychological conditions, etc. Depending on the mandate and users, different needs must be accommodated. The Montreal Transit Corporation (STM) site, designed by TP1 and Adviso, had to be adapted to make it accessible to the entire population of Montreal. For example, the blue that is normally used for the visual identity of the STM was adapted to become more visible. The team had to work with the Colour Contrast Analyser charter and test every graphic choice.

 

Applying These Principles

Integrating these eight principles into our practice entails acknowledging that the research phase and understanding the project is as important for graphic design as it is for the other components of UX. Graphic design has to be a part of the UX conversation. The research conducted to inform graphic design must absolutely be based on a understanding of the mandate and the users. The vision has to be aligned with strategies that are used for problem solving. The best way to do this is to work in a fully integrated way.

In my opinion, the best collaboration scenario would be one where all phases, including research, would be carried out in close collaboration with the graphic designer. For me, this collaboration is made easier by the fact that I understand the whole UX design process, which includes graphic design. In larger projects that require more resources, I am convinced that the adoption of the complicity I am describing would lead to success.