Como visto anteriormente, a comunicação através de representações visuais não é uma novidade para a nossa sociedade, sendo uma prática que vem se aprimorando desde a pré-história. Assim, tal evolução causou um forte impacto na forma em que essa linguagem se insere no mundo nos dias de hoje.
No presente trabalho constatamos que as diversas qualidades dos ícones, como a capacidade de sintetizar, em formas simples, conceitos e ideias, sua adaptabilidade em variados tamanhos de telas, sua facilidade de aplicação, dentre outros, foram fatores fundamentais para sua participação no cotidiano da sociedade, sobretudo no mundo digital.
Ainda, foi possível compreender por meio da semiótica que a analogia é responsável por estabelecer as relações entre o objeto real e sua representação, simplificando as associações necessárias para assimilar a mensagem. No entanto, a possibilidade de ruídos e falhas nessa comunicação nos indica a necessidade de estudos e pesquisas acerca do contexto de uso, bagagem cultural do público e forma de interação, por exemplo, antes da implementação dos ícones nos produtos digitais.
Percebemos também, que numa comunidade digital como a qual integramos, com uma diversidade de pessoas, obstáculos, circunstâncias, níveis de conhecimento, infraestrutura e outros fatores diversos, os ícones se tornaram elementos essenciais nos produtos direcionados a esse grupo, impactando diretamente na experiência dos usuários, um agente determinante na captura e fidelização de clientes nos dias de hoje.
Dito isso, acreditamos que os ícones continuarão passando por processos de evolução e adaptação, visando contribuir cada vez mais com a experiência de usuários, com a democratização do acesso às tecnologias e informações.
REFERÊNCIAS
ABRAMOVICH, Giselle. “5 Consumer Trends That Are Shaping Digital Content
Consumption”. Disponível em: https://cmo.adobe.com/articles/2019/2/5-consumer-
trends-that-are-shaping-digital-content-consumption.html#gs.bxrzyu. Acesso em: 23/10/2019.
AGNI, Edu. “Don Norman e o termo UX”. Disponível em:
https://uxdesign.blog.br/don-norman-e-o-termo-ux-6dffb3f8d218. Acesso em: 03/09/2019.
AGRELA, Lucas. “Como usar, adicionar ou fazer figurinhas no WhatsApp”. Disponível em: https://exame.abril.com.br/tecnologia/como-usar-adicionar-ou- fazer-figurinhas-no-whatsapp/. Acesso em: 07/11/2019.
AMSTEL, Frederick van. “Afinal, o que é semiótica?”. Disponível em:
http://www.usabilidoido.com.br/arquivos/afinal_o_que_e_semiotica_amstel.pdf. Acesso em: 31/08/2019.
BLOG, Hand Talk. “5 fatos que você deveria saber sobre a comunidade
surda”. Disponível em: https://blog.handtalk.me/5-fatos-comunidade-surda-libras/.
Acesso em: 20/08/2019.
BRASIL. “LEI Nº 8.213, DE 24 DE JULHO DE 1991”. Disponível em:
http://www.planalto.gov.br/ccivil_03/leis/l8213cons.htm. Acesso em: 04/09/2019.
BRASIL. “LEI Nº 10.098, DE 19 DE DEZEMBRO DE 2000”. Disponível em: http://www.planalto.gov.br/ccivil_03/LEIS/L10098.htm. Acesso em: 05/09/2019.
BRASIL. “LEI Nº 13.146, DE 6 DE JULHO DE 2015”. Disponível em:
http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm. Acesso em: 09/09/2019.
CLAIR, Kate; BUSIC-SNYDER, Cynthia. Manual de tipografia: a história, a técnica e a arte. 2. ed. Porto Alegre: Bookman, 2009.
FOUNDATION, Interaction Design. “What is User Experience (UX) Design?”. Disponível em: https://www.interaction-design.org/literature/topics/ux-design. Acesso em: 03/09/2019.
GRILO, André. “Acessibilidade no Design de Interação: exemplos e
recomendações”. Disponível em: https://medium.com/tableless/acessibilidade-no- design-de-intera%C3%A7%C3%A3o-exemplos-e-
recomenda%C3%A7%C3%B5es-86c059ef9e2f. Acesso em: 20/08/2019.
JAPONÊS, Aulas de. “Kanji – O que é e como aprender”. Disponível em: https://www.aulasdejapones.com.br/kanji/. Acesso em: 30/08/2019.
JND.ORG. “About Don Norman”. Disponível em: https://jnd.org/about/. Acesso em: 03/09/2019.
JOLY, Martine. Introdução à Análise da Imagem. 14 ed. Campinas: Papirus Editora, 2012.
MICHAELIS, Dicionário. “Acessibilidade”. Disponível em:
http://michaelis.uol.com.br/busca?r=0&f=0&t=0&palavra=acessibilidade. Acesso em: 05/09/2019.
MICHAELIS, Dicionário. “Iconografia”. Disponível em:
NORMAN, Donald A. O design do dia a dia. Rio de Janeiro: Rocco, 2006.
SOUZA, Ramon de. “Você sabe qual é a diferença entre emoticons e emojis?”. Disponível em: https://www.tecmundo.com.br/web/86866-voce-sabe-diferenca- entre-emoticons-emojis.htm. Acesso em: 07/11/2019.
VIEIRA, Jéssica. “Ícones em UI Design: dicas de como utilizar esse recurso
nos seus projetos”. Disponível em: https://medium.com/ui-lab-
school/%C3%ADcones-em-ui-design-dicas-de-como-utilizar-esse-recurso-nos- seus-projetos-cf6816cf2403. Acesso em: 23/10/2019.
W3C. “Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1”. Disponível em: http://www.w3c.br/traducoes/wcag/wcag21-pt-BR/. Acesso em: 10/09/2019.
ZHANG, Wenting. “Some Icons Are Verbs, Some Icons Are Nouns”. Disponível em: https://medium.com/@wenting_zhang/getting-fluent-at-the-language-of-
APÊNDICE A - Questionário utilizado na pesquisa.
1. A utilização de ícones nas interfaces digitais impacta na experiência dos usuários? Explique o seu ponto de vista.
2. Com base nos seus conhecimentos e experiências, de que forma os ícones em produtos digitais podem funcionar como um fator de acessibilidade?
3. De que modo você enxerga a presença dos ícones nos produtos digitais atualmente?
4. Quando se faz necessário, onde você ou colegas de trabalho procuram ícones para utilizar em seus trabalhos?
APÊNDICE B - Termo de autorização de uso de imagem e depoimentos.
UNIVERSIDADE FEDERAL DO RIO GRANDE DO NORTE – UFRN CENTRO DE CIÊNCIAS HUMANAS, LETRAS E ARTES
DEPARTAMENTO DE COMUNICAÇÃO SOCIAL CURSO DE PUBLICIDADE E PROPAGANDA
TERMO DE AUTORIZAÇÃO DE USO DE IMAGEM E DEPOIMENTOS
Eu _____________________________________, CPF
_______________________, RG ______________, depois de conhecer e entender os objetivos, procedimentos metodológicos, riscos e benefícios da pesquisa, bem como de estar ciente da necessidade do uso de minha imagem e/ou áudio, especificados no Termo de Consentimento Livre e Esclarecidos (TCLE), AUTORIZO, através do presente termo, o pesquisador (Erildo Vitor Medeiros Melo) do projeto de pesquisa intitulado “ÍCONES NO DESIGN DE INTERFACES: USER EXPERIENCE E ACESSIBILIDADE DIGITAL” a realizar a gravação que se faça necessária e/ou a colher meu depoimento sem quaisquer ônus financeiros a nenhuma das partes. Ao mesmo tempo, libero a utilização desta gravação para fins científicos e de estudos (livros, artigos, slides e transparências), em favor do pesquisador da pesquisa, acima especificados, obedecendo ao que está previsto nas Leis que resguardam os direitos das crianças e adolescentes (Estatuto da Criança e do Adolescente – ECA, Lei N.º 8.069/ 1990), dos idosos (Estatuto do Idoso, Lei N.° 10.741/2003) e das pessoas com deficiência (Decreto Nº 3.298/1999, alterado pelo Decreto Nº 5.296/2004).
Natal - RN, ___ de ______ de ______.
_______________________ _______________________ Participante da pesquisa Pesquisador responsável pelo projeto
APÊNDICE C - Transcrição das respostas de Rodrigo Lemes, UX Manager no Itaú
Unibanco e dono do canal Design Team no Youtube.
1. Creio que eles são peças fundamentais na comunicação e representação de ideias. Não podemos deixar de lembrar como a semiótica traz relevância para os ícones e como o design usa disso para poder ser claro e facilitar interfaces para serem amigáveis. Um ícone mal construído pode com certeza criar ruídos da comunicação e ser extremamente danoso para a experiência.
2. Quando falamos sobre dificuldades cognitivas os ícones vem como elementos fundamentais para facilitar e servir para cobrir essas dificuldades. Já tive experiência em desenvolver produtos digitais para crianças, e os ícones são fundamentais como elementos de retenção para crianças e para o entendimento da proposta do produto.
3. Sem sombra de dúvidas hoje estamos em outro patamar de como os ícones se comunicam e sua importância. Com a potencialização de consumo digital cada vez mais acentuada, comunicação não verbal e somente visual, são elementos que toda interface precisa ter. Não é atoa que o ícone de salvar, mesmo sendo um disquete, que gerações atuais nem sabem o que é fisicamente isso, mas sabem do seu significado como elemento visual para guardar algo, se mantém como elemento presente em várias interfaces atuais e não há como trocarmos esse elemento, já sendo algo intrínseco em nossa cultura digital.
4. No nosso caso, na empresa que atuamos desenvolvemos nossa própria biblioteca de ícones, sendo importantíssimo esse elemento como parte da nossa identidade visual. Mesmo em outras empresas que já tive que atuar, ícones de própria autoria sempre foram prioritários para nosso time de design.
5. Como já citei, é fato que não existe mundo sem ícones e com o mundo digital isso é reforçado cada vez mais. É uma ida sem volta, nossa cultura humana e a
comunicação realizada por ela é estruturada e será cada vez mais em iconografias, são atalhos informativos fundamentais e principalmente universais. Minha visão de futuro sobre isso, um dia talvez não teremos mais palavras, mas talvez vamos voltar para os hieróglifos modernos chamados ícones.
APÊNDICE D - Transcrição das respostas de Karina Tronkos, UX Designer na
Globo.com e dona do perfil NinaTalks no Instagram.
1. Com certeza! Ícones ajudam com o reconhecimento rápido por exemplo. O disquete como botão de salvar, setinha como botão de salvar, casinha para home, dentre outros. Mas é necessário ter cuidado para eles serem facilmente reconhecidos e que ajudem em vez de atrapalhar. O que torna um ícone excelente é o fato dele ser facilmente compreendido sem a leitura do label. Indo mais para o lado de produto e marca, é possível transmitir a personalidade da marca por meio dos ícones! Eles certamente podem melhorar o apelo estético de um design.
2. O primeiro ponto que veio a minha mente foi para pessoas que não sabem ler. Ter um ícone em vez de um texto pode ser mais acessível sim, desde que não seja um ícone que esteja "reinventando a roda" e sim algo intuitivo e simples de se compreender. Quanto para deficientes visuais, você deve considerar que alguém não pode ver a tela porque está usando um leitor de tela de áudio, então é necessário garantir que exista um texto equivalente para o ícone, para que o usuário do leitor de tela de áudio possa entender seu significado.
3. Vejo eles presentes em todos os produtos! Inclusive, podemos usar como exemplo a Apple e a Google que tem o seu próprio sistema de ícones. A questão é buscar sempre a consistência e usar os ícones de forma funcional e não apenas decorativa. O ideal é que eles sejam forma e função.
4. Em aplicativos nativos nós utilizamos os próprios da Apple e do Google, no trabalho eu sigo os do Design System próprio da empresa e para projetos pessoais ou eu produzo os meus próprios ou uso de sites como Flaticon, Noun
5. Eles continuarão sendo usados pois são super úteis e podem de verdade melhorar a experiência do usuário. É só imaginar todos os ícones de um app tendo de ser trocados para texto. Seria simplesmente uma zona!
APÊNDICE E - Transcrição das respostas de Ivan Henrique, UX Designer e
Desenvolvedor Front-end no Mercado Bitcoin.
1. Impacta com certeza. O uso de ícones em interfaces digitais ajudam a complementar o entendimento de elementos interativos quando texto não é suficiente. Cumprem também um papel de semiótica assim como sombras e gradientes ao dar a impressão correta a botões ou elementos clicáveis. Ícones também colaboram quando estão em um papel de "bagagem cognitiva" para o usuário: quando uma forma ou um ícone estão tão disseminados na percepção dos usuários que a percepção é mais rápida através de ícones do que o próprio texto (ícones de play, pause, disquete de salvar, etc). Finalmente, auxiliam a dar percepções de "estado" e "semáforo" quando cores não são suficientes. Usuários com daltonismo, por exemplo, que não teriam a compreensão direta de um elemento em vermelho, simbolizando alerta, poderia receber um ícone de "exclamação" e assim, se beneficiar do entendimento como um usuário não portadores da condição visual.
2. Como já mencionado acima, em casos de daltonismo, complementando o feedback de cores. Ícones podem ser elementos inclusivos para usuários sem alfabetização (https://www.youtube.com/watch?v=MGMsT4qNA-c - esse vídeo mostra um caso interessante de um bebê que consegue utilizar completamente um aplicativo construído completamente a base de ícones). Ícones trazem também o efeito de entendimento universal, quando padronizados, por exemplo o ISO Dot que estabeleceu pictogramas para diversos tipos de cenário e condições rotineiras, incluindo comunicações para PcD. Ainda nos produtos digitais, diversos sites e aplicativos já contam com ícones dessa padronização para habilitar funcionalidades de assistência como "texto grande" ou ícones de "modo de alto contraste".
3. Acredito que é um elemento consolidado, importante mas que está (e de fato deve continuar) em constante evolução. O próprio ícone universal de "salvar
documento" é um disquete. Apesar de ter sua compreensão disseminada, o objeto de um disquete já é um símbolo obsoleto, que não tem referência do mundo real, ou skeumórfica, para muita gente, sobretudo usuários nascidos a partir dos anos 2000. Algumas plataformas estão mudando essa iconografia para uma representação mais atual, como por exemplo, uma nuvem simbolizando a subida de um arquivo em referência ao "salvar na nuvem", mais de acordo com tempos atuais, onde memória física está perdendo relevância. Particularmente, acredito que ícones devem ser usados com segurança. Deve se aproveitar a "bagagem" que os usuários trazem de fora do seu produto e se manter em um nível conservador e seguro para seus usuários. Em outras palavras, evitar "criar" um símbolo novo caso ele já exista de forma constante no meio digital, e se o fizer, que seja de maneira clara e simples.
4. Preferencialmente em bibliotecas "padrão" e respeitando plataformas já nativas. Por exemplo, o Material Design tem seu kit de ícones, a Apple também tem a sua (ionicons), a web utiliza bastante a iconografia do Bootstrap. Quando o produto exige um polimento visual maior, ou a marca tem uma guideline muito rica e específica, criamos uma iconografia, mas muito próxima do que o mercado oferece. Apenas adaptando o branding.
5. Acredito que seja algo que existe e que vai existir em todo o espectro de interação visual. Há duas novas revoluções acontecendo: a de interações de "realidade virtual e realidade aumentada" (AR, VR), que acredito que os ícones tenham um papel fundamental nesse período de fixação e "onboarding" da nova tecnologia. Contudo há outras revoluções que devem dispensar o uso de ícones por se tratarem de interações auditivas, como VUIs (voice user interfaces) e e chatbots, por exemplo. Essas tecnologias estão procurando seu "ícone" para chamar de seu, como notificações sonoras, vinhetas curtas e pontuações de som. Podcasts por exemplo utilizam com frequência "vírgulas sonoras" que cumprem uma função parecida com ícones nessas, tentando passar percepções sem a
necessidade de ser tão verboso e fazer também com que o usuário grave cognitivamente esses sons e se acostumem com eles.
APÊNDICE F - Transcrição das respostas de Welliton Matiola, Product Designer e
um dos fundadores da UI Lab.
1. Os ícones tem um impacto significativo na interface, principalmente em aplicativos que são obrigados a lidar com diferentes tamanhos de dispositivos. Vemos hoje muitos apps que fazem uso da bottom bar e na grande maioria das situações ela é composta apenas por ícones. Nesse sentido, quando o ícone é reconhecido pelo usuário o impacto é mais positivo do que um menu apenas com texto.
2. É uma pergunta interessante e depende de quais aspectos da acessibilidade queremos atingir e qual o objetivo. Hoje muitas interfaces oferecem mudanças e usam ícones para sinalizar isso, como por exemplo a opção de utilizar modo noturno ou aumentar tamanho de fontes.
3. Acredito que é quase impossível não usar ícones atualmente. Muitos produtos digitais trabalham com informações pesadas e quando você coloca um ícone claro e objetivo para o usuário, você diminui a carga cognitiva que ele precisa desprender para entender aquilo.
4. Hoje existem bibliotecas de ícones muito boas, uma delas é o Feather Icons e ela está disponível no site para download e em plugins para quase todos os softwares que trabalham com criação de interface.
5. Se levarmos em conta o próximo nível de interfaces que os usuários irão interagir, podemos dividir o futuro em duas etapas. A primeira é a utilização de mais ícones se pensarmos que o VR se tornará popular no futuro. A segunda é a não utilização de ícones pois as interfaces não serão visuais, mas sim por comando de voz.
APÊNDICE G - Transcrição das respostas de Daniel Furtado, Senior Product Designer na Wezen e dono do canal UXNow no Youtube.
1. O uso de ícones impacta a experiências dos usuários tanto para o bem, quanto para o mal. Quando designers escolhem ícones para representar uma determinada palavra ou ação, isso pode causar um "acerto" ou "erro" de interpretação. Usuários têm modelos mentais que são construídos por anos de uso de outras interfaces e, nos casos de ícones, de observação de outros objetos/animais/cenas. Se um ícone corresponde em aparência e utilização ao modelo do usuário a experiência é boa - todo mundo gosta de se sentir inteligente! O contrário - ícone reconhecido e ação diferente, ou ícone não reconhecido, causam confusão. A ambiguidade pode piorar uma experiência. Novamente, ninguém gosta de se sentir burro ou ser enganado. No meu trabalho fazemos muito mais a retirada de ícones ambíguos do que a colocação de novos ícones. É melhor para o usuário a certeza de um rótulo "Incluir um Produto" do que uma "caixinha" que somente um grupo reconhece. Em um caso específico havia um ícone de uma máscara (que parecia a do filme O Máscara) e o rótulo era "Máscara". Quando perguntamos para o pessoal o que aquilo queria dizer a resposta foi "é para copiar e colar uma formatação". Trocamos o ícone por um botão com rótulo "Aplicar Formatação" e a quantidade de acerto dos usuários (medida num teste) foi muito maior.
2. Ícones possuem a capacidade de serem reconhecidos visualmente por usuários independente do idioma falado. Para usuários não alfabetizados o ícone é melhor do que uma palavra. Porém é importante lembrar que ícones não podem ser vistos por usuários deficientes visuais e, nesse caso, é importante que exista também um rótulo (mesmo que invisível) para descrever a ação. É importante que o rótulo não seja a descrição do ícone em si e sim a ação. Um exemplo desse cuidado - estou escrevendo esse texto no Gmail e existe na barra um ícone com um cadeado e um relógio em cima. Eu não conheço a ação desse ícone (nunca cliquei nele) e assumo, olhando, que deve ser algo como "ativar temporariamente
a segurança". Uma descrição do ícone como "Cadeado com Relógio em Cima" não dá nenhuma explicação sobre a ação realizada. Passando o mouse por cima eu descubro que a ação é "Ative/Desative o modo confidencial". É um caso típico onde o rótulo traz muito mais informação do que o ícone em si.
3. Hoje as pessoas usam muitos ícones sem uma pesquisa prévia sobre o entendimento daquele símbolo gráfico pelos usuários. É muito comum aplicarem ícones apenas como fator "estético" e não pensarem no fato "entendimento". Quando planejamos a interface em dispositivos pequenos, como smartphones, é importante tentar colocar as informações de maneira condensada. Nesse caso é preciso lembrar que utilizar 8 ícones que não fazem sentido é pior para a experiência do que utilizar 3 que façam. É possível utilizar técnicas para determinar quais ícones usar - cardsorting é um exemplo. Pode-se fazer isso mostrando ícones para usuários e pedir um significado/ação ou o contrário, mostrar uma palavra/ação e perguntar que ícone a melhor representa.
4. Em bibliotecas ricas, como a Font Awesome ou no Icons8. Também usamos muito o Envato Elements.
5. Imagino que cada vez vai ser mais difícil existir ícones que sejam axiomas - uma verdade universal. As primeiras interfaces gráficas eram praticamente iguais para todos os usuários - sempre o ícone da lixeira do Windows era igual. Por muitos anos fomos expostos ao ícone de disquete para salvar - que fazia sentido no contexto da época.
Hoje cada aplicativo pode escolher o ícone que quiser para representar ações praticamente idênticas. Ou seja, é mais complicado um ícone ser "universal" do que era no passado. Um aplicativo representa salvar como uma seta para baixo. Outro com uma seta para cima. Outro com uma nuvem. E outro com um disquete (que os usuários não sabem o que é). Por curiosidade o ícone de disquete não queria dizer disquete para muita gente. Entre 1995 e 2010 eu trabalhei como professor de informática - tratando com alunos de vários níveis e de vários
softwares. Eu já ouvi de alunos que o disquete era um rádio, um computadorzinho