DEV Community

Cover image for Design: Arte ou Processo?
Matheus dos Reis de Jesus
Matheus dos Reis de Jesus

Posted on • Updated on

Design: Arte ou Processo?

Capa por UX Indonesia no Unsplash

Recentemente cursei uma disciplina chamada "Visualização de Dados", e, semanalmente, a professora selecionava um conjunto de artigos sobre design, processo criativo e visualização de dados para discutirmos. Gostei tanto de um dos conjuntos de artigos que resolvi escrever sobre eles.

Todos os artigos estão em inglês e foram publicados na Nature Methods. Cada tópico deste artigo está acompanhado do seu respectivo link.

Sumário

Saliência para Relevância

Link para o artigo

Este primeiro artigo fala especialmente sobre destacar visualmente uma informação sobre as demais. O autor usa um exemplo bem interessante na figura 2a:

Alt Text
Fonte: https://www.nature.com/articles/nmeth.1762/figures/2

Segundo o autor: Combinar saliência com relevância chama a atenção visual para as informações importantes.

No heat map acima, a intenção era destacar os pontos vermelhos em detrimento dos pontos azuis. Porém, o efeito foi inverso. Os pontos azuis escuro sobressaem aos pontos avermelhados. Logo, o objetivo dessa visualização não foi atingido.

A ideia destacada neste artigo é exatamente a de tentar mostrar relevância através de saliência. Destacar uma informação é muito útil, mas precisa ser eficiente. O uso de cores e figuras deve ser feito com cuidado.

Na figura 2b o autor destaca o problema do uso de figuras em movimento. O formato usado sugere que os conteúdos em textos são relevantes para o slide em questão. Porém, as figuras em movimento do lado esquerdo podem distrair o leitor e prejudicar a compreensão da informação.

Elementos do Estilo Visual

Link para o artigo

Esse artigo fala mais especificamente sobre a construção de elementos visuais e como a escolha dos seus componentes influencia na compreensão do leitor.

O primeiro exemplo que o artigo usa é a figura a seguir:

Imagem com um grafo multicolorido, com 3 a 4 nós conectando pares de nós. As arestas também tem várias cores
Fonte: https://www.nature.com/articles/nmeth.2444/figures/1

Segundo o autor: Uma enxurrada de símbolos idênticos desencadeia uma "saciedade semântica", um fenômeno em que a repetição exagerada resulta em uma perda de significado.

O problema nessa imagem é que os elementos tem cores diferentes, tanto os nós quanto as arestas. Logo, o uso de cores não tem significado na imagem. A ausência de legenda também impossibilita a compreensão do que as cores representam. Usar um conjunto limitado de cores e apresentar o significado de cada torna a leitura de elemento visual muito mais fácil.

Uma imagem com um conjunto de figuras: um gráfico de barras, um gráfico de pizza com várias cores, um cromossomo, uma sequência de figuras geométricas, um cilindro com uma espécie de corda ao redor, uma seta verde com círculo vermelho em cima, com a escrita K3 e por fim, um balão com a escrita "Cancer"
Fonte: https://www.nature.com/articles/nmeth.2444/figures/2

Segundo o autor: Use a representação mais simples para objetos e omita informações desnecessárias.

O uso de elementos com diferentes formas na figura A, além de dificultar a interpretação, não acrescentam nada em seu significado. A figura B torna a compreensão muito mais fácil, e as informações mais importantes estão de fato em destaque.

Conjunto de figuras com formatos diferentes. Na primeira linha, dois conjuntos demonstrando interseção, o primeiro com múltiplas clores e o segundo com apenas uma escala de cores. Na segunda linha, 8 figuras: um desenho indefinido com a escrita "FOXA1", um retângulo arredondado escrito "FOXJ1", um hexágono escrito "FOSL1" e um círculo com a escrita "FOXR2". E à direita, 4 retângulos regulares com as mesmas escritas. Na terceira linha, temos as escritas "Cancer STEM","Cancer" e "Neoplastic". À esquerda, com 2 figuras irregulares abaixo de cada escrita. À direita,2 figuras regulares abaixo de cada escrita
Fonte: https://www.nature.com/articles/nmeth.2444/figures/3

Segundo o autor: Objetos que interagem ou que tem significado em comum devem ser formatados de maneira similar, para induzir a intuição.

Mais uma vez, a escolha de formas e cores afetando a compreensão da informação contida em um elemento visual. As imagens a esquerda não induzem uma correlação entre os elementos que deveriam ser similares, já que eles possuem cores diferentes e formatos irregulares. Os itens à direita, diferentemente, sugerem uma relação entre os itens e inclusive possibilitam o destaque de alguns deles.

Narrativa

Link para o artigo

Esse artigo fala a respeito do uso de elementos visuais para contar histórias, também conhecido como "Storytelling". As visualizações desse tipo relacionam eventos durante um intervalo de tempo ou de valores definido.

Alt Text
Fonte: https://www.nature.com/articles/nmeth.2571/figures/1

Segundo o autor: Use agregação para reduzir o detalhe dos dados e enfatizar a mensagem: Existem relativamente de médio intervalo.

Começando em um conjunto dos valores e finalizando em um gráfico de barras, a imagem anterior apresenta o processo de transformação dos dados em uma visualização que transmita uma ideia de maneira mais sucinta, sem precisar de muitas informações visíveis.

Alt Text
Fonte: https://www.nature.com/articles/nmeth.2571/figures/2

Segundo os autores: Uma história adiciona significado e clareza para estatísticas complexas.

Em alguns casos, apenas elementos visuais não são suficientes para apresentar uma informação de maneira clara. Quando se tem estatísticas mais complexas, apresentar uma contextualização do problema/situação pode facilitar a compreensão por parte do leitor.

Conclusão

Depois de tantos exemplos de como o design funciona e os critérios que ele deve obedecer para cumprir seu propósito, o que você acha? Design é apenas uma "arte", fruto da imaginação e criatividade, ou ele é resultado de um processo minucioso que exige conhecimento e dedicação? Ou talvez ambos?

Gostou deste artigo? Deixe suas reações e me siga em outras redes: Twitter | Instagram | Youtube.

Até o próximo artigo!👋🏽

Top comments (4)

Collapse
 
eduardoklosowski profile image
Eduardo Klosowski

Com certeza design tem um aspecto artístico, que embora possa ser possível caracterizar o contraste de cores de forma objetiva, a escolha de que cores, ou tipo de tons (pasteis, fortes...) recai para o artístico. Entretanto não vejo que precise ser sempre um processo minucioso, para pesquisar e desenvolver novas ideias, avaliar o que funciona, e tudo mais, pode ser, mas para uso geral isso não é tão necessário, visto que é possível se utilizar da pesquisa de outros. Eu gosto do site From data to Viz, onde dando algumas características dos meus dados, ele apresenta quais as visualizações indicadas, não precisando ser um processo minucioso e com muita dedicação, não vai ser inovador, mas já é um bom resultado.

Collapse
 
reisdev profile image
Matheus dos Reis de Jesus

Concordo com você. Mas, a criação do "From data to Viz" exigiu, de alguma forma, que fosse seguido um processo minucioso pra garantir que as visualizações criadas tenham uma melhor compreensão.. Não vejo como regra, e sim como uma ótima prática que sempre deveria ser considerada, e, eventualmente, deixada de lado quando não fosse tão necessário.
O foco dos artigos é mais voltado pra área acadêmica, por isso a insistência em seguir essas normas pra ter um bom resultado.

Collapse
 
daniel_castilho_d61c6a992 profile image
Daniel Castilho

Acabei de ler o seu artigo.
Sobre a sua pergunta no final, eu penso que Design também é arte, mas é muito além disso, Design é a forma como trazer a melhor experiência para o usuário.

Collapse
 
reisdev profile image
Matheus dos Reis de Jesus

Exatamente! Fiz o pergunta no sentido de exigir mais do que apenas criatividade e imaginação. Design exige cuidado, pensar sobre quem vai ler e o que é mais confortável.