Iconologia no design de interfaces

A toda hora estamos interpretando símbolos, sejam eles uma escrita, um desenho, um sinal ou uma combinação entre cores e desenhos. O mundo é regrado por ícones. No trânsito nós temos as placas de sinalização que utilizam de desenhos simples e de simples interpretação para facilitar a “navegação” dos nossos “usuários” das rodovias. Ainda no trânsito temos a significação universal das cores que torna instantânea a interpretação feita pelo nosso cérebro. Um exemplo claro disso é um semáforo: você já imaginou se, ao invés das cores verde, vermelho e amarelo, o semáforo trouxesse escrito “avance”, “pare” e “atenção”?

Sinal de Trânsito confuso

É… o trânsito não seria tão intuitivo e prático como nós conhecemos, então é aqui que chegamos à questão que eu costumo refletir e vou compartilhar com vocês: por que navegar na internet nem sempre é tão intuitivo e prático quanto “navegar” no trânsito? Vamos ver…

Iconologia?

Erwin Panofsky, crítico e historiador de arte e um dos principais representantes do método iconológico e estudos de iconografia, fazia distinção entre iconologia e iconografia em que, segundo ele, iconologia seria o estudo singular das significações do objeto; iconografia é o estudo do tema desse mesmo objeto e o universo em que ele está inserido.

Tem acontecido por aí…

Quando falamos de ícones no design de interfaces estamos falando sobre o ambiente gráfico ou GUI (Graphic User Interface), que tornou-se indispensável em todo tipo de dispositivo, desde relógios até painéis de carros.

Ícones em dispositivos diversos

Gosto de dar uma volta nesse assunto para lembrar como as pessoas valorizam a interface gráfica e como isso facilita a vida delas. Para demonstrar isso, nada melhor do que o vídeo de lançamento do primeiro Apple Macintosh. Observe como o público reagiu diante da apresentação do primeiro computador com interface gráfica utilizando ícones, janelas e boa parte das funcionalidades que usamos até hoje.

Desde essa iniciativa inovadora da Apple em 1984, outras empresas também passaram a investir em interface e design, que nos leva à grande diversidade de dispositivos variados com interfaces gráficas.

Gostaria de destacar dois cases em especial:

Windows 95

Windows 95

Windows 2000 / XP

Windows 2000 / XP

Windows 7 (2010)

Windows 7 (2010): Interface minimalista, otimizando espaço das janelas utilizando ícones e removendo as descrições desenecessárias num primeiro momento da visualização do usuário.

MAC OS

Apple MAC OS

MAC OS X Snow Leopard: Valorização dos ícones utilizando-os com resoluções mais altas, também removendo as descrições para otimizar o espaço de trabalho.

MAC OS X Snow Leopard: Valorização dos ícones utilizando-os com resoluções mais altas, também removendo as descrições para otimizar o espaço de trabalho.

Você consegue perceber o que tem sido evidenciado na evolução desses dois cases de design de interface? Observe que, com o passar dos anos, Mac OS e Windows – líderes no mercado de sistemas operacionais para usuário final – tem adquirido muitas novas funcionalidades. A possibilidade de execução de várias janelas ao mesmo tempo fez com que a interface do sistema se tornasse cada vez mais embaralhada. Então, se você observar as imagens novamente, vai notar que a solução encontrada pelos profissionais de design dessas empresas foi a substituição da palavra escrita ou do título das janelas por ícones bastante evidentes que, além de aproveitar melhor o espaço da tela, tornaram a interface muito mais intuitiva para o usuário.

Windows 7 Barra de Janelas Abertas

Windows 7 Barra de Janelas Abertas - valorizando a sinalização com ícones

Dock do MAC OS

Dock do MAC OS

Desastres iconológicos

Há quem diga depois de ler tudo que escrevi até agora: “Então basta apenas colocar ícones nas opções para deixar nosso usuário feliz”. Então eu respondo: “NÃO!”.

Antes de prosseguir eu vou mostrar uns cases de interfaces e uso de símbolos onde o estudo do significado (semiótica) não foi muito bem resolvido ou está defasado.

Comparação 1: Blender x Maya

Blender

Blender: Interface super confusa, com pouca otimização no espaço de trabalho e ausência de sinalizações na interface o que torna a interface nada intuitiva

Autodesk Maya

Autodesk Maya: É fato que os softwares de modelagem 3D geralmente possuem uma interface bastante complexa por conta das muitas opções que oferecem, porém o Maya distribuiu essas opções com maestria sinalizando as opções mais importantes e tornando a interface muito mais intuitiva para o profissional

Comparação 2: Symbian x Iphone

Symbian

Symbian: durante o lançamento do iPhone, celulares com essa interface ainda eram lançados no mercado. Essa interface "retrô" realmente não tinha como competir com o design dos novos dispositivos móveis que estavam por vir

iOS 4

iPhone iOS 4

Dever de casa…

Como eu já falei anteriormente, o estudo dos ícones e dos símbolos usados numa interface é parte de uma estrutura maior que é a interface gráfica como um todo. Para que uma boa interface gráfica seja concebida é preciso planejar a disposição da informação (Arquitetura de Informação), estruturas visuais, cores e símbolos. O planejamento desse conjunto potencializa uma interface intuitiva e agradável pro usuário, proporcionando uma melhor experiência de uso, objetivo esse que as empresas (principalmente de tecnologia) tem se preocupado em atingir para atrair mais consumidores.

Categoria: Labs.
Tags: , , , , , .

Sobre Maycon Souza

Diretor de Tecnologia da Morphy, entusiasta de novas tecnologias movido pela superação dos desafios!

Deixe um Comentário

Os campos com * são obrigatórios. Seu e-mail não será divulgado.
  1. Excelente post. Me emocionei mesmo com esse vídeo da apple de 1984. Coisa linda :-) E o iphone tb, muito superior! Mandou bem!
    @idegasperi

  2. Concordo com o Israel, esse vídeo da reação das pessoas à interface gráfica é demais. Teu post tá bem exemplificado, bem bacana, japonês!

  3. Muito bom seu post, agora entendi exatamente o que você faz :)

  4. Muito bom! Achei muito interessante e útil. Um abraço.

  5. Interessante – vale lembrar que a nova interface do Blender está bem melhor, mais atraente, colocando todas as operações importantes e o próprio menu de contexto dinâmicamente integrados na janela 3D… estou gostando muito e trabalhando bem com ele. A interface anterior, que aparece no artigo, era meio ultrapassada mesmo…