Entendendo semiótica na prática

Cristiano Gonçalves
Training Center
Published in
6 min readNov 30, 2018
Um homem segurando uma placa de trânsito ao lado do personagem Elmo.

A semiótica está presente em diversas áreas do conhecimento, como design, psicologia, filosofia e etc. Nesse artigo irei mostrar como a semiótica se relaciona com a computação, mostrando um pouco da sua importância através de algumas aplicações reais.

Semiótica é mais um tópico sobre usabilidade que está fortemente presente ao nosso redor, muitas vezes utilizamos de forma inconsciente ou até irregular, apenas para embelezar nossas interfaces sem a intenção de alcançar os objetivos propostos por essa disciplina.

Um ponto bem interessante é que a semiótica tem uma forte ligação com o Affordance e essa ligação vai além da estranheza dos dois nomes, pois em grande parte dos casos esses dois conteúdos trabalham de forma conjunta.

Semiótica e Semiose

Durante a minha graduação esbarrei com a semiótica em uma aula de IHC, naquela época eu não estava muito interessado em usabilidade e acabei complicando o significado da semiótica, não absorvendo absolutamente nada. Mesmo que futuramente eu começasse a utilizá-la sem perceber.

O nome semiótica assusta um pouco, porém o seu conceito é bem simples e fácil de compreender.

Segundo a Wikipédia, a semiótica é o estudo da construção de significado, o estudo do processo de signo (semiose) e do significado de comunicação.

Em outras palavras, a semiótica é a disciplina que estuda os signos ou símbolos e o processo de significação dos mesmos, que também é chamado de semiose. Ela trabalha com todo o processo natural e cultural que dá significado aos signos.

Signos

Um signo é qualquer coisa que possa ser utilizado para representar algo, ele possui um significado, um valor e precisa fazer sentido para alguém, com base nas suas experiências.

Se a pessoa conhece a palavra gato, como um gato é, como é o som do seu miado, como ele anda e como é sua silhueta. Se eu apresentar uma ilustração apenas com linhas bem simples com a forma de um gato, a pessoa vai conseguir identificar a ilustração sem muitos problemas. Esse mesma lógica se aplica para coisas que existem apenas no imaginário humano, como um saci-pererê ou até um dragão.

Desenho de um gato construído com formas geométricas.

O signo existe sempre que ocorre a atribuição de um significado, por exemplo: ao criarmos a logo de uma empresa, essa logo pode passar a ser o signo da mesma, podendo ser entendida sempre que vista.

Toda vez que um signo é criado, ocorre um fenômeno que chamamos de semiose.

Ícones, símbolos e índices.

Podemos classificar os signos em três modos de semiose, ícones, símbolos e índices.

Ícones

Os ícones têm uma semelhança com o mundo real e são fáceis de serem identificados e compreendidos. Eles podem ser fotografias, desenhos, estátuas e outros.

Exemplo: O desenho de uma maquina fotográfica no celular que significa acesso à câmera do mesmo.

Foto de um celular com foco no ícone de câmera.

Símbolos

Os símbolos são um pouco mais complexos que um ícone, pois seu significado está atrelado com conceito que precisa ser aprendido pra que o mesmo faça sentido. Por exemplo, a logo de uma empresa pode possuir várias figuras geométricas e tipográficas que só podem fazer sentido pra quem conhece a ideia que quer ser passada por aquele símbolo. Duas logo tendo um triângulo como base podem ter significados totalmente diferentes.

Exemplo: Uma placa de transito que necessita de um conhecimento sobre transito para fazer sentido.

Placa de trânsito — Proibido retornar.

Índice

É utilizado para indicar algo. Seu significado está diretamente ligado a experiência de quem o vê. Tudo a nossa volta é um índice ou pode se comportar como um, por exemplo, pegadas na areia podem indicar que pessoas passarem por ali, as cores de um semáforo podem indicar qual postura um motorista deve tomar.

Uma rua com alguns semáforos.

Semiótica na prática

Antes de falar sobre os projetos, gostaria de informar que todos esses experimentos são frutos da minha trilha de estudos no projeto mentoria, no qual estou sendo auxiliado pela minha mentora Livia Gabos. Também gostaria de deixar claro que os projetos que irei mostrar podem possuir diversos outros problemas de usabilidade, porém no momento o foco é apenas a semiótica.

Como de costume, caso queira ver as aplicações antes da minha explicação, basta acessar esse repositório.

Dessa vez irei mostrar partes de dois projetos onde a aplicação de elementos da semiótica fizeram uma diferença bastante considerável.

Projeto 1

Seção de categorias do site Toy Shop.

Essa imagem é da área de categorias que se encontra logo na home do site em um local de destaque. O grande problema é que cada categoria acaba não chamando muita atenção para o usuário, que ao passar o olho rapidamente pode não entender do que realmente isso se trata.

Esse problema foi resolvido adicionando imagens referentes a cada categoria, dessa forma o processo de semiose acontece de maneira mais fácil, pois o usuário tem um ícone que auxilia no entendimento de cada categoria.

Seção de categorias do site Toy Shop após a revisão de UX.

Projeto 2

Página inicial do projeto Vue Cart.

A imagem acima é da pagina inicial do projeto vue-cart, nessa seção o problema se encontra nos botões “Add to cart”, eles possuem um ícone igual ao ícone do botão que exibe os itens do carrinho, isso acaba sendo um pouco confuso, pois o mesmo ícone é usado para dois objetivos diferentes na mesma página.

Para resolver esse problema fiz a mudança do ícone do “Add to cart” para um ícone de mais(+), que traz mais sentido para o botão, pois estamos sempre adicionando algo ao carrinho. Dessa forma temos apenas um ícone atrelado a cada processo de significação(semiose).

Página inicial do projeto Vue Cart após a revisão de UX.

Os dois projeto aqui apresentados ainda possui outras melhorias que foram feitas e que não vou abordar para não deixar o artigo muito extenso, mas você pode acessar as duas versões de cada projeto nesse repositório e encontrar às melhorias que a semiótica trouxe para os projetos.

Conclusão

Até aqui vimos que a semiótica estuda os signos ou símbolos e todo processo de significação, vimos também que o processo até a criação do significado é chamado de semiose. Além disso, aprendemos que um signo é qualquer coisa que possa servir para representar algo que faça sentido para alguém, podendo ser classificados em ícones, símbolos e índices.

Ah, você pode conferir os dois projetos apresentados nesse artigo clicando aqui.

Conseguiu entender o que é semiótica? Já usava e não sabia?

Referências

--

--

Cristiano Gonçalves
Training Center

Baiano com orgulho!! — Desenvolvedor frontend e amante de nerdices, músicas e viagens.