Pictograms

Convey information through visually representative simple images.

The role of pictograms

Pictograms are a valuable tool for conveying information efficiently, promoting interactivity, and simplifying complex concepts. They use simple pictures to represent objects, concepts, or ideas. Let's explore some key points that highlight the benefits of using pictograms:

Help to enhance the tone of the input text and make it more didactic. This will make the content more accessible and easier for users to understand.

Pictograms should not be used loosely; they should be used in a clear and direct context in order to send a direct message of support.

It's a very useful tool to represent the personality, voice, and platform of our brand effectively.

They are quite important to convey feedback states and therefore help the understanding of the message and alleviating potential tensions.

When we use visual elements such as images or illustrations, they should serve more than just decoration. They should help tell stories and convey ideas carefully, rather than being used without consideration. Excessive use can have detrimental effects on the overall experience.

By placing them in the interface we can improve the user experience, making it more intuitive, efficient, and engaging for the users.

Pictograms are not a replacement for icons.

Types

For optimal scalability, it's advisable to utilize generic pictograms whenever possible. Before introducing new pictograms, careful consideration should be given to determine their necessity. This empty state guideline can be a useful resource in making this determination, but not definitive.

As mentioned previously, the use of pictograms shouldn't be excessive. They serve as a helpful visual aid within an interface to convey a message. However, if they are overused, their impact diminishes. Additionally, it's crucial to select appropriate pictograms that align with the overall message consistency. For instance, when indicating a connection error for multiple reasons, using the same pictogram would effectively communicate the agnostic message of "connection error," while with the text in the composition can clarify the specific cause of the error. To facilitate this process, it’s essential to categorize and classify pictograms into 2 types:

Feedback status

These pictograms are designed to assist users in quickly understanding what's happening through feedback, either after completing a process or while navigating through different sections. These are always related to a process that has started, has been requested or has ended.

Feedback’s flow

These are aligned with the semantic ones and some specifics flows feedback like card authorization. They are an important aspect of providing feedback after the flows. They include the following: info, success, error, warning or pending status among others.

Contextual status

In our system, we occasionally provide feedback related with situations such as loading errors, empty states or helpful actions.

Generic

These examples, although not specifically linked to specific feedback messages, are crucial in helping us understand the concepts better. They serve as visual aids that make abstract ideas clearer by providing concrete instances and while fostering a deeper connection between abstract concepts and their practical implications.

The use of pictograms can be highly beneficial for the onboarding process and in situations where user action is required. However, it's critical to note that pictograms should not be used as triggers, since they are not interactive by nature.

The generics pictograms don’t have a semantic color within, only the indigo's detail.