universidade federal do rio grande do norte centro de ... · e inéditos, tratados como extensões...
TRANSCRIPT
UNIVERSIDADE FEDERAL DO RIO GRANDE DO NORTE
CENTRO DE CIÊNCIAS HUMANAS, LETRAS E ARTES DEPARTAMENTO DE COMUNICAÇÃO SOCIAL
ERILDO VITOR MEDEIROS MELO
ÍCONES NO DESIGN DE INTERFACES
USER EXPERIENCE E ACESSIBILIDADE DIGITAL.
NATAL/RN
2019
ERILDO VITOR MEDEIROS MELO
ÍCONES NO DESIGN DE INTERFACES
USER EXPERIENCE E ACESSIBILIDADE DIGITAL.
Monografia apresentada ao curso de Comunicação Social com habilitação em Publicidade e Propaganda da Universidade Federal do Rio Grande do Norte como requisito obrigatório para obtenção de título de bacharel em Publicidade e Propaganda.
Orientador: Prof. Dr. Luiz Fernando Dal Pian Nobre
NATAL/RN
2019
Universidade Federal do Rio Grande do Norte - UFRN
Sistema de Bibliotecas - SISBI
Catalogação de Publicação na Fonte. UFRN - Biblioteca Central Zila Mamede
Melo, Erildo Vitor Medeiros.
Ícones no design de interfaces: user experience e acessibilidade
digital / Erildo Vitor Medeiros Melo. - 2019.
55 f.: il.
Monografia (graduação) - Universidade Federal do Rio Grande do
Norte, Centro de Ciências Humanas, Letras e Artes, Curso de
Comunicação Social - Publicidade e Propaganda, Natal, RN, 2019.
Orientador: Prof. Dr. Luiz Fernando Dal Pian Nobre.
1. Ícones - Monografia. 2. Acessibilidade - Monografia. 3.
Experiência do usuário - Monografia. 4. Semiótica - Monografia. 5.
Design - Monografia. I. Nobre, Luiz Fernando Dal Pian. II. Título.
RN/UF/BCZM CDU 004.92
Elaborado por Ana Cristina Cavalcanti Tinôco - CRB-15/262
ERILDO VITOR MEDEIROS MELO
ÍCONES NO DESIGN DE INTERFACES
USER EXPERIENCE E ACESSIBILIDADE DIGITAL.
Monografia apresentada ao curso de Comunicação Social com habilitação em Publicidade e Propaganda da Universidade Federal do Rio Grande do Norte como requisito obrigatório para obtenção de título de bacharel em Publicidade e Propaganda.
Aprovada em: __/__/____
___________________________________
Prof. Dr. Luiz Fernando Dal Pian Nobre
Universidade Federal do Rio Grande do Norte
Orientador
____________________________________
Prof. Ms. John Willian Lopes
Universidade Federal do Rio Grande do Norte
Membro interno
____________________________________
Josenildo Soares Bezerra
Universidade Federal do Rio Grande do Norte
Membro interno
AGRADECIMENTOS
A minha família, Erildo, Ana, Bia e Vovó Menininha, por todo o apoio e incentivo
dado durante essa jornada da graduação, ainda mais nos momentos de estresse e
frustrações, por me ensinarem a ser persistente e não desistir dos meus objetivos.
A Bruna Corina, por todo o suporte, incentivo e força, especialmente nos
momentos finais da graduação, que me fez acreditar em mim e seguir meu caminho
sempre, independente das dificuldades.
Ao meu primo Rafael, por ter me apresentado ao curso de Publicidade e ter sido
como um mentor nessa e em outras caminhadas, servindo como um baú de referências
e influências.
Ao meu tio Renato, por sempre ter me incentivado a inovar, buscar novos
conhecimentos e despertar a curiosidade que culminou neste estudo, que me abriu
novos horizontes tanto no âmbito pessoal quanto profissional.
A todos os professores que eu tive na UFRN, principalmente ao professor Dal
Pian, por todo o apoio, incentivo, confiança e, obviamente, por toda a contribuição junto
a mim neste trabalho.
A Rodrigo Lemes, Daniel Furtado, Carla De Bona, Ivan Henrique, Karina Tronkos
e Welliton Matiola por todo tempo e colaboração neste trabalho através das respostas
fornecidas no questionário.
A todos os meus amigos, de inúmeros contextos, mas que posso contar para
qualquer coisa, por deixarem minha vida mais leve e me darem forças nessa missão
que é se graduar.
E por fim, obrigado vida.
“Design is really an act of communication, which means having a deep understanding of the
person with whom the designer is communicating.”
Donald A. Norman
RESUMO
Durante toda a história da espécie humana as representações imagéticas foram utilizadas como forma de transmitir mensagens, conceitos e ideias. No entanto, com a evolução das tecnologias, essa linguagem ganhou cada vez mais espaço e, atualmente, nos cerca rotineiramente. O presente trabalho objetiva discutir a função dos ícones nos produtos digitais, buscando compreender sua eficácia enquanto forma de democratização do acesso à comunicação. Para isto, foi preciso entender, de antemão, como surgiram as formas de representação denominadas “ícones” e como seu uso foi sendo introduzido e desenvolvido com o passar do tempo. Da mesma forma, houve a necessidade de explorar os conceitos de “experiência do usuário” e “acessibilidade”, tópicos rigorosamente relacionados à inclusão e democratização de conteúdos para a sociedade. Para alcançar esses objetivos, realizou-se uma pesquisa qualitativa, através de um questionário com roteiro estruturado e aplicado via e-mail com seis profissionais da área de tecnologia, sucedida por uma análise das informações obtidas com as respostas. A pesquisa buscou aporte teórico em autores como Kate Clair (2009), Cynthia Busic-Snyder (2009), Martine Joly (2012) e Donald A. Norman (2006), como referências mais importantes. As conclusões deste estudo revelam que os ícones cumprem um papel fundamental na democratização de informações e na relação usuário x produto no meio digital, uma vez que seu uso afeta diretamente a experiência do usuário e acessibilidade em diferentes esferas, sendo, nos dias de hoje, um elemento crucial nas interfaces dos produtos que almejam conquistar e fidelizar clientes. Palavras-chave: Ícones. Acessibilidade. Experiência do Usuário. Semiótica. Design.
ABSTRACT Throughout the history of mankind imagery representations have been used as a way of conveying messages, concepts and ideas. However, with the evolution of technologies, this language has gained more and more space and currently surrounds us routinely. This paper aims to discuss the function of icons in digital products, seeking to understand their effectiveness as a form of democratization of access to communication. For this, it was necessary to understand, beforehand, how the forms of representation called “icons” arose and how their use was being introduced and developed over time. Similarly, there was a need to explore the concepts of “user experience” and “accessibility”, topics strictly related to the inclusion and democratization of content for society. To achieve these objectives, a qualitative research was conducted through a questionnaire with structured script and applied via e-mail with six technology professionals, succeeded by an analysis of the information obtained with the answers. The research sought theoretical support from authors such as Kate Clair (2009), Cynthia Busic-Snyder (2009), Martine Joly (2012) and Donald A. Norman (2006), as the most important references. The conclusions of this study reveal that icons play a fundamental role in the democratization of information and the user-product relationship in the digital environment, since their use directly affects the user experience and accessibility in different spheres, being, nowadays, a crucial element in product interfaces that aim to win and build customer loyalty. Keywords: Icons. Accessibility. User Experience. Semiotics. Design.
LISTA DE FIGURAS
Figura 1 - Arte rupestre na Gruta de Lascaux.……………………………………………..16
Figura 2 - Hieróglifos egípcios....................................…………………………………......17
Figura 3 - Exemplos de kanji e suas respectivas traduções……………………………...18
Figura 4 - Interface de aplicativo de livros simulando uma prateleira.…………………..20
Figura 5 - Exemplos de logos de grandes empresas que passaram por redesign ........21
Figura 6 - Alguns elementos presentes na Experiência do usuário.………..……….......22
Figura 7 - Fluxo de processos na metodologia de Design Centrado no Usuário.……...23
Figura 8 - Exemplo de utilização do princípio da percepção através do uso de uma
descrição para vídeo.………………………………………...………………………………..26
Figura 9 - Interface do Star, estação de trabalho da Xerox lançado em 1981.…...…….28
Figura 10 - Ícones de “Início”, “Configurações” e “Notificações”.…………………………29
Figura 11 - Diferentes representações para o ícone de “Menu” no Noun Project………30
Figura 12 - A palavra “Menu” representada por diferentes famílias tipográficas………..30
LISTA DE TABELAS
Tabela 1 – Perguntas utilizadas no questionário……………………………………….….33
SUMÁRIO
1. INTRODUÇÃO…......................................................……………………………....12
2. O UNIVERSO DOS ÍCONES NA ERA DIGITAL……………………………….....16
2.1 Iconografia............................................................................................................16
2.2 Experiência do usuário.........................................................................................22
2.3 Acessibilidade.......................................................................................................24
2.4 Ícones na era digital..............................................................................................28
3. OBJETO DE ESTUDO: ÍCONES, INTERFACES E ACESSIBILIDADE….……32
3.1 Aspectos metodológicos………………………………………………………....…...32
4. ANÁLISE E RESULTADOS…......………………………………………………….34
5. CONSIDERAÇÕES FINAIS………………………………………………………....38
REFERÊNCIAS.…………………………………………………………………………..39
APÊNDICE A – Questionário utilizado na pesquisa.............................................39
APÊNDICE B – Termo de autorização de uso de imagem e depoimentos.........42
APÊNDICE C – Transcrição das respostas de Rodrigo Lemes...........................43
APÊNDICE D – Transcrição das respostas de Karina Tronkos...........................44
APÊNDICE E – Transcrição das respostas de Ivan Henrique..............................46
APÊNDICE F – Transcrição das respostas de Welliton Matiola...........................48
APÊNDICE G – Transcrição das respostas de Daniel Furtado.............................51
APÊNDICE H – Transcrição das respostas de Carla De Bona..............................55
12
1. INTRODUÇÃO
Com a contínua variação das formas de comunicação no âmbito digital,
podemos constatar que a utilização de representações imagéticas vem ganhando
cada vez mais destaque no campo comunicacional nos últimos anos, seja através
dos emoticons1, no extinto software de mensagens instantâneas MSN
Messenger2, memes, emojis3, que ocasionalmente passam por um processo de
atualização e recebem novas “expressões” e, mais recentemente, os stickers4 ou
figurinhas do WhatsApp.
No entanto, a utilização de representações de imagens como forma de
comunicação não é algo recente, nem muito menos um advento da tecnologia
digital. Basta fazermos uma breve viagem ao passado que também podemos
encontrar tais representações nas pinturas rupestres e, anos depois, nos
hieróglifos egípcios, por exemplo.
Segundo CLAIR e BUSIC-SNYDER (2009), representações puramente
visuais, como as pinturas rupestres, por exemplo, não podem ser caracterizadas
como um alfabeto, pois como não há uma padronização no seu uso, diferentes
interpretações ficam em aberto para o público. O que não se aplica aos hieróglifos
egípcios.
Os hieróglifos egípcios são pictogramas (desenhos simplificados que
representam objetos) que tiveram sua origem por volta de 3.000 a.C e
funcionavam como um sistema de escrita que representava palavras e sons
através de pictogramas.
1 Criados em 1982 pelo norte-americano Scott Fahlman, os emoticons são representações gráficas
de uma emoção feita através de caracteres que temos disponíveis nos teclados dos computadores e celulares, por exemplo. 2 Fonte: A história do MSN Messenger, o favorito dos brasileiros. Disponível em:
https://www.tecmundo.com.br/mercado/133163-historia-msn-messenger-favorito-brasileiros-video.htm. Acesso em: 7 ago 2019. 3 Criados na década de 90 pela empresa japonesa NTT DoCoMo, os emojis são desenhos próprios
e inéditos, tratados como extensões do conjunto de caracteres ocidentais usados na maioria dos sistemas operacionais da atualidade. 4 Imagens estáticas para representar emoções de forma diferente dos emojis, palavras ou áudios,
em que o usuário pode criar as suas próprias ou baixar através de aplicativos.
13
Porém, com o tempo, percebeu-se que a comunicação através de
pictogramas não englobava o desejo de passar informações mais complexas às
pessoas, o que ocasionou na combinação dessas representações simples,
resultando nos ideogramas, utilizados para representar um conceito ou
mensagens mais elaboradas.
Ideogramas, em outras palavras, são pictogramas que representam alguma coisa diferente de sua intenção original. Por exemplo, o pictograma de “mão” transforma-se em ideograma quando é combinado com outros símbolos para transmitir os conceitos de “dar”, “cumprimentar”, oferecer” ou “tomar” - ações ou conceitos associados de alguma maneira com a mão. Os ideogramas marcam o verdadeiro início da linguagem escrita. (CLAIR, BUSIC-SNYDER, 2009, p. 16)
No contexto do design, os conceitos de pictograma e ideograma são
bastante utilizados na forma dos ícones. Além disso, outras atribuições válidas
para este termo na área do design são a do campo da informática, que define
ícone como um elemento gráfico que representa determinado objeto, operação ou
link e, geralmente, é acionável por um clique ou toque, quando utilizado em um
sistema operacional ou interface gráfica, e a definição da semiótica, a qual
argumenta que o ícone é um signo que, através da semelhança ou analogia,
representa outro objeto.
Outro campo onde a presença de ícones se faz imprescindível é o da
acessibilidade. De acordo com a World Federation of the Deaf (WFD), 80% dos
deficientes auditivos possuem baixa escolaridade e/ou problemas de
alfabetização5, o que nos leva a refletir sobre como acontece a interação desse
público no meio digital, uma vez que a forma mais eficiente de comunicação entre
e para com eles é através da língua de sinais que, infelizmente, não está tão
presente nos ambientes digitais. A língua de sinais, em alguns casos, também se
utiliza de relações de semelhança e analogia em seus sinais, como no caso dos
sinais icônicos, por exemplo.
5 Fonte: Improving multimodal web accessibility for deaf people: Sign language interpreter module.
Disponível em: https://www.researchgate.net/publication/225469903_Improving_multimodal_web_accessibility_for_deaf_people_Sign_language_interpreter_module. Acesso em: 20 ago 2019.
14
Seria a acessibilidade um dos fatores que contribuíram para a evolução e
atualização visual dos ícones? Que levou à decadência as representações feitas
sob o skeumorfismo (mais detalhista, realista) e favoreceu a ascensão do design
minimalista no âmbito digital?
Todavia, mesmo imersos num universo de alfabetos, idiomas e outras
linguagens, continuamos nos deparando com sinalizações e mensagens repletas
de pictogramas, ideogramas e ícones, nos revelando que, dependendo da sua
forma de uso e em qual contexto eles estão inseridos, podem cumprir com os
seus papéis de facilitadores comunicacionais.
Dado esse contexto, a presente pesquisa objetivou, principalmente, buscar
evidências que corroboram para a crescente utilização dos ícones flat no ambiente
digital atual e, mais especificamente, analisar o papel dos ícones enquanto
facilitadores de representações imagéticas no âmbito comunicacional e
compreender a funcionalidade dos ícones para a democratização do acesso à
comunicação.
Para tais fins, foi utilizado o método de revisão bibliográfica, mediante
pesquisa em obras de autores como Kate Clair (2009), Cynthia Busic-Snyder
(2009), Martine Joly (2012) e Donald A. Norman (2006), por exemplo, e além
disso, foi realizada uma pesquisa qualitativa por meio de um questionário com
roteiro elaborado com alguns profissionais do mercado, como Rodrigo Lemes, UX
Manager no Itaú Unibanco e criador do canal Design Team6 no Youtube, Karina
Tronkos, UX Designer na Globo.com e criadora do perfil NinaTalks7 no Instagram,
Ivan Henrique, UX Designer e Desenvolvedor Front-end no Mercado Bitcoin,
Welliton Matiola, Product Designer e um dos fundadores da UI Lab8, Carla De
Bona, designer focada em UI/UX e Daniel Furtado, Product Designer e criador do
canal UXNow9 no Youtube.
A presente monografia, além desta Introdução, apresenta capítulo de
fundamentação teórica embasado em obras dos autores citados, intitulado O
6 Canal Design Team: https://www.youtube.com/channel/UCTkZTDIq25Czsazq2N493Cg
7 Perfil Nina Talks: https://www.instagram.com/nina_talks/
8 Perfil da UI Lab: https://www.instagram.com/uilabschool/
9 Canal UXNow: https://www.youtube.com/channel/UCgfaifzmqadwKyCd0lagylQ
15
universo dos ícones na era digital. Após este capítulo, foi apresentado o objeto de
estudo, no Capítulo 3 e, por fim, no Capítulo 4, a análise e resultados obtidos
através do estudo e análise das respostas obtidas na pesquisa, concluindo-se
com as considerações finais e referências.
16
2. O UNIVERSO DOS ÍCONES NA ERA DIGITAL
2.1 ICONOGRAFIA
Do grego “eikonographía”, a iconografia pode ser classificada como um
conjunto de imagens correspondente a determinado assunto10.
Durante o período pré-histórico, nossos ancestrais faziam desenhos nas
paredes das cavernas e outras superfícies como forma de registro de eventos
relevantes em seu cotidiano, o que mais tarde foi classificado como pintura
rupestre.
Dessa forma, acredita-se que a criação e utilização de pictogramas,
representações simplistas de objetos, tenha sido o pontapé inicial para o
desenvolvimento da maioria das linguagens escritas (CLAIR, BUSIC-SNYDER,
2009).
Figura 1. Arte rupestre na Gruta de Lascaux.
Fonte: Disponível em: https://pt.wikipedia.org/wiki/Lascaux. Acesso em: 29 ago 2019.
10
Fonte: Iconografia. Disponível em: http://michaelis.uol.com.br/busca?id=xR04Q. Acesso em: 29 ago 2019.
17
Os egípcios, por exemplo, utilizavam pictogramas para se comunicar
através da sua escrita dos hieróglifos, que teve origem por volta de 3.000 a.C.
Diferentemente das pinturas rupestres, que não são classificadas como um
alfabeto por não possuírem uma padronização e consistência no seu uso, os
hieróglifos receberam essa categorização. Contudo, mesmo com essas
características alfabéticas, suas representações não eram apropriadas para
expressar ideias mais abstratas e complexas como emoções, ações e outros
conceitos, o que levou à sua evolução.
As linguagens baseadas em pictogramas evoluíram para se tornar sistemas de escrita com a representação de pensamentos abstratos em vezes de simplesmente representar objetos. À medida que os pictogramas passaram a ter significados que iam além da simples representação visual de algo tangível, foram se transformando em um meio um pouco mais complicado de escrever, conhecido como ideogramas. O ideograma é a combinação de dois ou mais pictogramas com o propósito de representar um conceito. (CLAIR, BUSIC-SNYDER, 2009, p. 15)
Figura 2. Hieróglifos egípcios.
Fonte: Disponível em: https://aventurasnahistoria.uol.com.br/noticias/reportagem/como-ler-textos-
em-hieroglifo.phtml. Acesso em: 30 ago 2019.
Os japoneses se utilizam de ideogramas em sua comunicação combinando
o kanji11, da escrita chinesa, com outros dois alfabetos de origem japonesa. Desse
modo, suas palavras são escritas através da soma dessas representações ou, às 11
Fonte: Kanji – O que é e como aprender. Disponível em: https://www.aulasdejapones.com.br/kanji/. Acesso em: 30 ago 2019.
18
vezes, uma representação já é considerada uma palavra. Esse aspecto tão
característico, a junção da escrita chinesa com a japonesa, pode ser explicado
através do fato de que, de acordo com CLAIR, BUSIC-SNYDER (2009), diferentes
culturas desenvolveram seus ideogramas específicos que refletem valores como
crenças e estruturas política, social e econômica.
Figura 3. Exemplos de kanji e suas respectivas traduções.
Fonte: Disponível em: https://nihongoautodidata.com.br/alfabeto-japones-kanji-hiragana-katakana/.
Acesso em: 01 set 2019.
Atualmente, pictogramas e ideogramas também podem ser encontrados na
forma de ícones, principalmente em interfaces digitais como aplicativos de
celulares e tablets, sites e softwares de computador. ZHANG (2015) relaciona
essa presença constante dos ícones no meio digital com a sua facilidade de
compreensão, uma vez que não é necessário traduzir um ícone para outro idioma,
o que é explicado através da semiótica.
19
A semiótica, ciência que estuda os signos12, divide o signo em três
categorias: ícone, índice e símbolo. A primeira, foco deste estudo, é explicada por
JOLY (2012) como a classe dos signos que “mantém uma relação de analogia
com aquilo que ele representa”, ou seja, há uma relação de semelhança entre
aquilo que representa e o que está sendo representado. Já a segunda, “mantém
uma relação causal de contiguidade física com aquilo que eles representam”,
como uma pegada na areia deixada por uma pessoa ou animal, por exemplo.
Sobre a terceira, o símbolo, a autora refere-se como sendo a classe que “mantém
com o seu referente uma relação de convenção”, a exemplo das bandeiras para
os países e a pomba para simbolizar a paz.
Em seu livro “Introdução à Análise da Imagem”, dentre outros temas, JOLY
(2012) também aborda três tipos de mensagens que podem constituir uma
mensagem visual: a plástica, a icônica e a linguística. Os elementos que
compõem uma mensagem plástica são aqueles como cores, formas, texturas e
composição, os elementos plásticos. A mensagem icônica é formada através das
representações figurativas, também denominadas signos icônicos. Por fim, a
mensagem linguística é aquela formada pela parte textual.
No campo do design, outro conceito bastante adequado para os ícones é o
da informática, que os descreve como elementos gráficos que representam
determinados objetos, operações ou links e, geralmente, são acionáveis por um
clique ou toque, quando utilizados em um sistema operacional ou interface gráfica.
Nesse âmbito, há diversos estilos de ícones, de forma que ZHANG (2015) faz uma
analogia entre os estilos disponíveis e os pesos das fontes que utilizamos para
escrever trabalhos e textos no computador, como se cada ícone tivesse um
“negrito”, “itálico” e “sem serifa”, por exemplo. De tantos estilos, os presentes no
skeumorfismo e no flat design foram os que ganharam uma maior popularidade
devido às suas aplicações no cotidiano da sociedade.
O skeumorfismo é um tipo de design que se baseia na realidade, ou seja,
seu objetivo é criar elementos que possuam um elevado grau de semelhança e
12
Fonte: Afinal, o que é semiótica?. Disponível em: http://www.usabilidoido.com.br/arquivos/afinal_o_que_e_semiotica_amstel.pdf. Acesso em: 31 ago 2019.
20
fidelidade ao objeto real. Os ícones desse estilo foram bastante utilizados nas
interfaces dos anos 90 e início dos anos 2000, como nas primeiras gerações do
sistema operacional Windows e iOS, por exemplo, fazendo uso de simulação 3D e
cores vivas.
Figura 4. Interface de aplicativo de livros simulando uma prateleira.
Fonte: Disponível em: https://medium.com/tend%C3%AAncias-digitais/skeumorflat-eab69c984157.
Acesso em: 03 set 2019.
Já o flat design, que surgiu como uma tendência estética como forma de
substituir o skeumorfismo, conseguiu se perpetuar e vem sendo utilizado há um
bom tempo. A principal característica do flat é o minimalismo. Podemos dizer que
o seu principal objetivo é representar de forma simples e objetiva aquilo que
precisa ser passado ao público. Diferentemente do skeumorfismo, o flat não se
utiliza de efeitos em suas representações, dando uma atenção maior aos
elementos geométricos, as cores e a tipografia. O estilo ganhou tanta
popularidade que foi adotado por algumas empresas no processo de repaginação
nas suas identidades visuais.
21
Figura 5. Exemplos de logos de grandes empresas que passaram por redesign.
Fonte: Disponível em: https://medium.com/tend%C3%AAncias-digitais/skeumorflat-eab69c984157.
Acesso em: 03 set 2019.
22
2.2 EXPERIÊNCIA DO USUÁRIO
Criado no início dos anos 90 pelo professor, cientista cognitivo e co-
fundador da Nielsen Norman Group, Donald Norman13, o termo “experiência do
usuário” (do inglês “user experience” ou “UX”) representa todo um campo
multidisciplinar que integra diversas áreas presentes em um produto ou serviço,
passando por aspectos como branding, design, usabilidade e funcionalidades14.
Em uma entrevista concedida durante a UX Conference, em São Francisco,
Norman disse que experiência do usuário “é tudo relacionado a sua experiência
com o produto”15, de forma que, em algumas vezes, você nem precisa estar perto
do produto, mas apenas falando sobre ele para alguém. Muitos acabam
confundindo UX com UI (de “user interface”), campo responsável por tratar da
interação entre usuário e interface, no entanto, MATIOLA (2015) esclarece essa
distinção afirmando que o “UX Design trabalha com as emoções e experiências
dos usuários” e “o UI é justamente a ponte responsável por fazer com que essas
experiências aconteçam”.
Figura 6. Alguns elementos presentes na Experiência do usuário.
Fonte: Disponível em: https://www.toromarketplace.com/artigos/performance/toro-a-importancia-da-
experiencia-do-usuario-para-o-e-commerce. Acesso em: 05 set 2019.
13
Fonte: About Don Norman. Disponível em: https://jnd.org/about/. Acesso em: 03 set 2019. 14
Fonte: What is User Experience (UX) Design?. Disponível em: https://www.interaction-design.org/literature/topics/ux-design. Acesso em: 03 set 2019. 15
Fonte: Don Norman e o termo “UX”. Disponível em: https://uxdesign.blog.br/don-norman-e-o-termo-ux-6dffb3f8d218. Acesso em: 03 set 2019.
23
Sobre a importância de fornecer uma boa experiência para o usuário,
VIDAL (2018) deixa claro que, no ambiente digital, não basta os sites e aplicativos
atuarem apenas de forma eficiente, mas também de forma agradável e
memorável.
UX não é oferecer experiências como recompensa, é planejar a experiência da experiência. É pensar em como deixar uma sensação positiva causada por um evento exclusivo, por uma viagem, por uma mensagem personalizada, pela navegação em um site ou aplicativo, pelo atendimento com carinho e atenção, que é o que marca a vida das pessoas. (VIDAL, 2018)
Dito isto, a experiência do usuário possui uma forte relação com a filosofia
do design centrado no usuário, “uma metodologia usada por desenvolvedores e
designers para garantir que estão criando produtos que atendem às necessidades
dos usuários” (LOWDERMILK, 2013). Através de entrevistas, pesquisas, testes,
brainstormings e outros métodos de investigação e elaboração de ideias, os
profissionais buscam compreender alguns aspectos importantes na jornada de
uso do produto que podem ser decisivos na experiência final do usuário, como o
contexto de sua utilização e as reais necessidades de quem irá utilizá-lo, para a
partir daí, elaborar soluções e avaliar sua eficácia junto aos usuários.
Figura 7. Fluxo de processos na metodologia de Design Centrado no Usuário.
Fonte: Disponível em: https://www.interaction-design.org/literature/topics/ux-design. Acesso em: 09
set 2019.
24
2.3 ACESSIBILIDADE
“Facilidade de acesso; qualidade do que é acessível”16. Dessa forma, o
termo “acessibilidade” se relaciona principalmente à criação de produtos,
aparelhos, serviços ou ambientes que possam ser utilizados por pessoas com
necessidades especiais.
No Brasil, a Constituição foi publicada em 1988 e visava assegurar os
direitos individuais e sociais de todos os brasileiros, inclusive de pessoas com
deficiência. Foi a partir dela que as portas para a criação e implementação de
outras regras visando à inclusão e à acessibilidade dentro do território nacional
foram abertas, a exemplo da Lei de Cotas17, com foco na inclusão de PCDs -
abreviatura para “Pessoas com Deficiência” - no mercado de trabalho, publicada
em 1991.
No entanto, somente nos anos 2000 foi lançada uma lei que tratava
exclusivamente de acessibilidade. Propondo a redução de “barreiras e de
obstáculos nas vias e espaços públicos, no mobiliário urbano, na construção e
reforma de edifícios e nos meios de transporte e de comunicação” (BRASIL,
2000), a Lei Nº 10.09818, de 19 de dezembro de 2000 foi decretada como forma
de oferecer e garantir autonomia e oportunidade para todos.
Além destas e outras leis, em 2016 entrou em vigor a Lei Brasileira de
Inclusão. A LBI19 atua como uma das leis de acessibilidade mais amplas na
Constituição Brasileira, sendo inspirada pelo protocolo da convenção da ONU
sobre os Direitos das PCDs, que visava assegurar o direito total e igual às
pessoas com deficiência. A lei aborda desde o relacionamento entre órgãos
públicos, privados e deficientes até tópicos específicos voltados à tecnologia e
16
Fonte: Acessibilidade. Disponível em: http://michaelis.uol.com.br/busca?r=0&f=0&t=0&palavra=acessibilidade. Acesso em: 05 set 2019. 17
Fonte: LEI Nº 8.213. Disponível em: http://www.planalto.gov.br/ccivil_03/leis/l8213cons.htm.
Acesso em: 04 set 2019. 18
Fonte: LEI Nº 10.098. Disponível em: http://www.planalto.gov.br/ccivil_03/LEIS/L10098.htm. Acesso em: 05 set 2019. 19
Fonte: LEI Nº 13.146. Disponível em: http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm. Acesso em: 09 set 2019.
25
reformas estruturais, além de tratar sobre as punições para quem não cumprir
suas exigências.
Já no mundo virtual, a acessibilidade é orientada através da Web Content
Accessibility Guidelines (WCAG) 2.1, a segunda atualização após a primeira
versão das diretrizes publicadas em 2008, a WCAG 2.0, depois de uma
recomendação da W3C (World Wide Web Consortium) em 1999. As diretrizes da
WCAG 2.1 foram desenvolvidas através da colaboração entre profissionais de
todo o mundo, visando oferecer um padrão para a acessibilidade dos conteúdos
na web a nível internacional.
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1 definem a forma de como tornar o conteúdo da Web mais acessível para pessoas com deficiência. A acessibilidade abrange uma vasta gama de deficiências, incluindo visual, auditiva, física, de fala, intelectual, de linguagem, de aprendizagem e neurológica. Embora estas diretrizes cubram uma ampla diversidade de situações, elas não são capazes de abordar as necessidades das pessoas com todos os tipos, graus e combinações de deficiências. Estas diretrizes tornam também o conteúdo da Web mais acessível por pessoas idosas, cujas habilidades estão em constante mudança devido ao envelhecimento, e muitas vezes melhoram a usabilidade para usuários em geral. (W3C, 2018)
Este documento pode ser dividido em cinco princípios: Perceptível,
Operável, Compreensível, Robusto e Conformidade. Cada um destes possui suas
diretrizes específicas (totalizando 18), que podem ser avaliadas por meio de
critérios de sucesso através das técnicas apresentadas na própria declaração.
O primeiro princípio, Perceptível, trata sobre a necessidade de o conteúdo
ser apresentado em mais de uma forma. Como adicionar legendas nos vídeos e
descrições alternativas para imagens, por exemplo, além de solicitar o suporte
para leitores de tela por parte dos sites. Este princípio contém quatro diretrizes,
cada uma com suas especificidades.
26
Figura 8. Exemplo de utilização do princípio da percepção através do uso de uma descrição para
vídeo.
Fonte: Disponível em: https://www.appai.org.br/inclusao-de-deficientes-visuais-no-facebook-
atraves-da-hashtag-pracegover/. Acesso em: 18 set 2019.
Já o princípio “Operável”, aborda a facilidade de uso que o usuário deve ter
durante a sua interação e navegação pela interface, de forma que ele consiga
realizar suas operações sem barreiras ou dificuldades de acesso. Suas cinco
diretrizes, que vão desde a navegação através do teclado até o excesso de cores
e iluminação que possam atuar como gatilho para ataques epiléticos são alguns
exemplos que podemos encontrar nesta seção do documento.
O terceiro tópico, da compreensão, possui três diretrizes, com um maior
enfoque no conteúdo textual dos sites, contendo pontos sobre a legibilidade dos
textos, objetividade e clareza das informações passadas ao usuário, de modo que
o site seja acessível à pessoas com dislexia, aqueles que possuem algum nível de
dificuldade com leitura ou não tenham repertório dentro do contexto em que
aquele site se encontra, por exemplo.
Sobre o princípio da robustez, o documento trata exclusivamente da
codificação do site, com uma única diretriz. Um website robusto é aquele que está
pronto para suportar as tecnologias assistivas atuais, como leitores de tela, e
27
aqueles que possam ser navegados através do uso do teclado, para pessoas com
deficiência motora.
O último princípio, que contém cinco diretrizes, apresenta os requisitos
necessários para as páginas web estarem em conformidade com a WCAG 2.1,
funcionando apenas como uma seção informativa, de forma que o autor da página
possa se certificar do grau de conformidade do seu site com as normas
apresentadas pela W3C.
Em relação aos graus de conformidade citados pela WCAG 2.1, estes são
divididos em três graus: A, o mais baixo, ou seja, o de menor acessibilidade, AA,
com um grau mais elevado de acessibilidade e, por fim, o AAA, aquele que possui
uma maior acessibilidade dentre os três níveis.
28
2.4 ÍCONES NA ERA DIGITAL
De acordo com a Pesquisa Anual de Consumo de Conteúdo realizada em
2018 pela Adobe (Adobe Consumer Content Survey20), os usuários de produtos
digitais vem sendo menos tolerantes com experiências ruins no meio tecnológico.
Segundo o estudo, 39% dos entrevistados afirmaram se sentir incomodados com
conteúdos mal escritos ou mal projetados (28%). Além disso, 21% dos
participantes disseram que a não otimização de produtos para seus dispositivos
também é um fator frustrante nessa relação.
NORMAN (2006), aponta que para projetar design para pessoas é
necessário seguir alguns princípios fundamentais como visibilidade, feedback,
restrições, mapeamento, consistência e affordances. Tais conceitos nos ajudam a
compreender os motivos de alguns produtos satisfazerem seus usuários e outros
causarem experiências tão frustrantes.
Assim, podemos relacionar os princípios da visibilidade e da consistência
diretamente à utilização de ícones, uma vez que essas representações passaram
a compor as interfaces como uma forma de linguagem, buscando facilitar a
compreensão de mensagens e tornar a interação usuário x produto mais simples e
intuitiva.
Figura 9. Interface do Star, estação de trabalho da Xerox lançado em 1981.
Fonte: 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 out 2019.
20
Fonte: 2019 Adobe Brand Content Survey. Disponível em: https://www.slideshare.net/adobe/2019-adobe-brand-content-survey. Acesso em: 23 out 2019.
29
Devido sua simplicidade, fácil reconhecimento, adaptabilidade, variedade
de formatos, apelo estético e informativo, dentre outros atributos, os ícones se
tornaram populares e foram ganhando espaço no meio digital. Tanto é que hoje
dificilmente encontramos alguma interface que não possua ao menos as
representações de “casa”, “engrenagem” ou “sino”, comumente utilizados para
representar as ações de “início”, “configurações” e “notificações”, respectivamente.
Figura 10. Ícones de “Início”, “Configurações” e “Notificações”.
Fonte: Autoria própria.
A presença dessas formas se fez tão fundamental com o passar do tempo
que, para contribuir com a consistência e a criação de padrões de uso, atualmente
temos repositórios e bibliotecas de ícones disponíveis na internet, como o
Flaticon21, Icons822 e Font Awesome23, alguns dos acervos que se tornaram
essenciais para que os designers pudessem ter acesso a uma variedade de
ícones e, além disso, fossem capazes de realizar testes com os usuários tendo em
vista selecionar os ícones que comunicassem da forma mais clara e objetiva
possível a mensagem pretendida.
Sobre essa variedade de formas e tipos de representações, ZHANG (2015)
afirma que os ícones funcionam como tipos de uma família tipográfica, de modo
que quando procuramos um ícone para “menu”, encontramos diversas variações.
21
Flat Icon: https://www.flaticon.com/. 22
Icons8: https://icons8.com/. 23
Font Awesome: https://fontawesome.com/.
30
Assim, cada uma dessas diferentes interpretações para “menu” podem ser
encaradas como a mesma palavra escrita em diferentes famílias tipográficas.
Figura 11. Diferentes representações para o ícone de “Menu” no Noun Project.
Fonte: Disponível em: https://medium.com/@wenting_zhang/getting-fluent-at-the-language-of-
iconography-3415d03d0a8f. Acesso em: 13 ago 2019.
Figura 12. A palavra “Menu” representada por diferentes famílias tipográficas.
Fonte: Disponível em: https://medium.com/@wenting_zhang/getting-fluent-at-the-language-of-
iconography-3415d03d0a8f. Acesso em: 13 ago 2019.
Essa diversidade de representações contribui para que os profissionais
tornem o aspecto visual do produto mais homogêneo que, por conseguinte,
impacta na experiência do usuário, deixando a interação mais agradável.
Além do aspecto visual, os ícones também impactam na UX quando sua
fácil compreensão simplifica a assimilação de funções dentro de um aplicativo ou
31
site, por exemplo. Assim, em alguns casos, faz-se possível a diminuição de textos,
o que torna a navegação com uma menor carga de informação e mais intuitiva.
Ainda, é bastante comum encontrarmos ícones associados a
funcionalidades dentro dos produtos digitais, o que ocorre devido às suas
características de responsividade e universalidade.
32
3. OBJETO DE ESTUDO: ÍCONES, INTERFACES E ACESSIBILIDADE.
A principal temática deste estudo é a utilização dos ícones nas interfaces,
com seu foco voltado para o uso dessas representações como uma forma de
ampliação da acessibilidade nos produtos digitais.
A motivação para este recorte surgiu através da busca pela compreensão
em como os ícones podem aperfeiçoar a interação entre pessoas com deficiências
(principalmente os surdos) e produtos digitais, visto que a maioria das pessoas
surdas não possui uma boa compreensão da língua escrita e/ou falada, ou não a
compreendem de forma total. Além disso, a intenção de apreender a eficácia da
comunicação realizada por representações visuais foi um fator crucial para
demarcar a abordagem deste estudo.
Para isso, além da pesquisa de revisão bibliográfica, foi realizada uma
pesquisa qualitativa com Rodrigo Lemes, Daniel Furtado, Ivan Henrique, Welliton
Matiola, Karina Tronkos e Carla de Bona, profissionais da área de tecnologia que
lidam corriqueiramente com questões voltadas à experiência do usuário. A
escolha dos profissionais se deu através de suas presenças nas redes sociais
enquanto “autoridades” na área, de forma que quase todos criam conteúdo
voltado para UX, compartilhando experiências e ensinamentos para outros
profissionais, estudantes e outros públicos.
Através da pesquisa foi possível coletar informações sobre a utilidade dos
ícones na área dos produtos digitais, se eles causam algum impacto na
experiência do usuário, como sua utilização pode funcionar como um fator de
acessibilidade dentro de sites ou aplicativos e o que os profissionais acreditam
que venha a acontecer com o emprego de ícones no cenário tecnológico.
3.1 ASPECTOS METODOLÓGICOS
Para a coleta de dados utilizamos o método de pesquisa qualitativa através
de um questionário com roteiro elaborado, buscando uma construção de sentido
através da análise das respostas obtidas.
33
A pesquisa foi aplicada entre os dias 23 de setembro e 11 de outubro via e-
mail, uma vez que todos os participantes atuam fora de Natal. Foram feitos cinco
questionamentos-chave (Tabela 1) que buscavam adquirir o ponto de vista dos
profissionais acerca da utilização dos ícones no meio digital, sobre seu poder de
comunicação e impacto na experiência do usuário. O perfil dos participantes
variava entre Designer, Desenvolvedor Front-end, UX Designer, Product Designer
e UX Manager.
Tabela 1 – Perguntas utilizadas no questionário.
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?
5 Qual sua visão para o futuro em relação ao uso de ícones?
Fonte: Elaborada pelo autor, 2019.
Durante a pesquisa não foi encontrada nenhuma rejeição ou limitação, de
forma que todos os participantes tiveram tempo suficiente para retornarem com
suas respostas e argumentos a respeito das perguntas que foram enviadas.
Todos os participantes demonstraram possuir conhecimento sobre a temática do
estudo, que resultou em pontos de vista de grande valor para este trabalho, os
quais podem ser conferidos nos Apêndices C, D, E, F, G e H.
34
4. ANÁLISES E RESULTADOS
Por meio de um questionário roteirizado, os seis participantes responderam
a cinco questões com o objetivo de compreender a função e eficácia dos ícones
nos produtos digitais, além de comentar o que eles esperam para o futuro com
relação ao uso dessas representações no meio digital. O roteiro utilizado na
pesquisa pode ser encontrado no Apêndice A deste trabalho.
A partir da primeira pergunta “A utilização de ícones nas interfaces digitais
impacta na experiência dos usuários? Explique o seu ponto de vista.” foi possível
compreender que os ícones podem impactar na experiência dos usuários de
diversas formas, uma vez que quando a representação é fácil de ser associada ou
já é bem disseminada, sua percepção se torna mais rápida do que a do texto,
deixando as interfaces mais amigáveis. Entretanto, seu uso pode causar um
impacto negativo no usuário quando ele se sente enganado por um ícone. Ou
seja, quando há uma falha entre a associação da forma e a ação que pretende ser
realizada, o usuário pode se sentir frustrado.
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. (FURTADO, 2019)
Quando questionados sobre como os ícones podem atuar como um fator
de acessibilidade, todos os participantes concordaram que essas representações
são fundamentais para facilitar a interação entre usuário x interface. Rodrigo
Lemes comentou que quando trabalhou no desenvolvimento de produtos digitais
para o público infantil, os ícones contribuíram bastante para a retenção das
crianças quanto ao uso do produto e para o entendimento da sua proposta. Ivan
Henrique e Welliton Matiola pontuaram a importância de seu uso enquanto
suporte para pessoas que possuem deficiências visuais como o daltonismo. De
modo que quando há dificuldade para compreender uma mensagem através da
sua cor, um ícone pode facilmente complementar o seu sentido. Além disso, os
ícones podem servir de apoio às funcionalidades acessíveis, como “Modo
35
Noturno”, “Alto contraste” e “Aumentar texto”, sinalizando para o usuário que estas
funções estão disponíveis para uso. Daniel Furtado e Karina Tronkos também
abordaram o cuidado que é necessário para a sinalização dos ícones em forma de
texto para pessoas que utilizam leitores de tela. Uma vez que elas não
conseguem visualizar a representação, é imprescindível a presença de um rótulo
que descreva a ação que pretendida por aquele ícone, e não a descrição da forma
em si. Carla De Bona comentou sobre a praticidade que é associar um ícone
quando já possuímos um entendimento anterior àquela experiência, de forma que
não é necessária uma leitura para interagir.
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. (TRONKOS, 2019)
Desse modo, ficou claro que, em termos de acessibilidade, a utilização dos
ícones cumpre um papel de democratização da informação, uma vez que contribui
para a inclusão de pessoas que possam encontrar dificuldades na interação com
os produtos digitais, como pessoas com daltonismo, surdos, cegos, crianças e
pessoas com baixa escolaridade, por exemplo. No entanto, essa integração de
públicos deve ser realizada com cautela, de forma clara e intuitiva, objetivando a
fácil associação e compreensão das mensagens que pretendem ser passadas.
Sobre a presença dos ícones nos produtos digitais, todos os participantes
apontaram que, atualmente, eles estão presentes de forma consolidada no meio
digital. Rodrigo Lemes afirmou que “hoje estamos em outro patamar de como os
ícones se comunicam e sua importância”, através da crescente comunicação por
meios visuais ao invés da comunicação verbal. Karina e Daniel pontuaram o
cuidado com a consistência dos ícones nas interfaces, buscando um equilíbrio
entre o seu papel funcional e o estético, de modo que é necessário realizar uma
pesquisa antes de se definir os ícones que estarão presentes no produto. Ivan
Henrique chamou atenção para o fato de que os ícones estão (e precisam estar)
em constante evolução, de acordo com a compreensão dos objetos que nos
cercam atualmente. Apontando a representação do “disquete” para a função de
36
“salvar” que se consolidou nas interfaces, mas que os usuários nascidos a partir
dos anos 2000 não tiveram contato com o objeto físico, podendo não
compreender a sua mensagem.
Deve se aproveitar a "bagagem" que o 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. (HENRIQUE, 2019)
Já Welliton comentou sobre a redução da carga cognitiva quando ícones são
inseridos em meio a informações que exigem uma maior concentração para o seu
entendimento, de modo que, quando utilizados da forma certa, eles são de fácil
associação. Por fim, Carla De Bona abordou a pluralidade de telas que temos hoje
em dia e a facilidade de aplicação distribuição dos ícones nessas telas, de modo
que uma interface pode ser visualizada em um computador, em um smartphone e
um smartwatch, por exemplo.
Sendo assim, pudemos compreender que tais representações
conquistaram seu espaço no meio digital devido seus benefícios tanto como
comunicadores quanto fatores estéticos, que além de tornarem a associação das
informações mais leve e prática, acabam fazendo parte da proposta visual do
produto. Todavia, para que essa presença permaneça de forma agradável e
sólida, há uma necessidade de estudos e pesquisas junto aos novos públicos que
vem surgindo, tendo em vista os novos contextos de uso e aplicações dos objetos
transformados em ícones.
Na penúltima pergunta “Quando se faz necessário, onde você ou colegas
de trabalho procuram ícones para utilizar em seus trabalhos?”, a maioria dos
participantes citou bibliotecas online que disponibilizam ícones para download e
pagos, como Feather Icons, Font Awesome, Flaticon, Icons8, Noun Project e
Envato Elements, por exemplo. Além disso, foram citadas as bibliotecas de ícones
de empresas como Google e Apple, por já possuírem uma consolidação no
mercado e apresentarem uma gama bastante consistente de ícones. Ainda,
alguns afirmaram que desenham seus próprios ícones, dependendo do contexto e
aplicação do projeto.
37
Acerca de suas previsões em relação ao uso dos ícones no futuro, os
participantes demonstraram estar otimistas com relação a isso, mas com algumas
ressalvas. Rodrigo acredita que nossa comunicação será cada vez mais repleta
de iconografias, de modo que um dia nos comunicaremos por hieróglifos
modernos. Karina crê que essas representações continuarão presentes no meio
digital por causarem um impacto real nos seus usuários. Já Ivan e Welliton
também acreditam que eles vão permanecer à nossa volta e, com revoluções
como as da realidade aumentada e realidade virtual, os ícones podem suprir um
papel fundamental nessas tecnologias. Contudo, em outras revoluções, como no
caso das interfaces auditivas como VUIs (Voice User Interfaces) e chatbots, eles
podem ser dispensados. Daniel possui um olhar de que será cada vez mais difícil
termos representações como verdades universais, como no caso do “disquete”, de
modo que atualmente podemos encontrar diversas representações para a mesma
funcionalidade. Sendo assim, ele acredita que teremos que investir um maior
tempo em pesquisas antes de escolher os ícones dos produtos. Por fim, Carla
defende que por conta da maturidade de IoT, a pluralidade de gadgets e o
aumento do público de nativos digitais, os ícones serão cada vez mais explorados
e criados, de forma que as novas representações irão necessitar de um período
de aprendizado antes de se consolidarem no meio digital.
Logo, foi possível compreender que por mais que os ícones venham sendo
utilizados há tempos, o potencial de evolução e adaptação presente nessas
formas favorece sua estabilidade no ambiente digital e, da mesma forma que vem
acontecendo desde os hieróglifos egípcios, serão necessárias novas
transformações e processos de aprendizado para que eles continuem cumprindo
suas funções no futuro.
38
5. CONSIDERAÇÕES FINAIS
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.
39
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.
40
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:
http://michaelis.uol.com.br/busca?id=xR04Q. Acesso em: 29/08/2019.
41
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-
iconography-3415d03d0a8f. Acesso em: 13/08/2019.
42
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?
5. Qual sua visão para o futuro em relação ao uso de ícones?
43
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
44
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
45
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.
46
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
Project e Icons8.
47
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!
48
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
49
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
50
necessidade de ser tão verboso e fazer também com que o usuário grave
cognitivamente esses sons e se acostumem com eles.
51
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.
52
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
53
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
54
softwares. Eu já ouvi de alunos que o disquete era um rádio, um computadorzinho
e até um forno! Minha previsão para o futuro é que teremos que usar mais tempo
de pesquisa para escolher os ícones e não contar apenas com o "bom gosto" dos
designers. ☺ (esse ícone representa uma carinha feliz e diz que estou otimista).
55
APÊNDICE H - Transcrição das respostas de Carla De Bona, Designer com foco
em UI/UX e palestrante.
1. Com certeza e esse impacto pode ser positivo ou negativo. O ícone torna a
experiência melhor ou positiva, quando o ícone é fácil de entender o que ele
referencia e de ser lembrado. Em um cenário como esse a experiência é
potencializada, pois torna a navegação mais fluida e ágil. Já uma experiência
negativa acontece quando o Ícone indicia algo, mas depois do clique nele, você
acaba descobrindo que era outra coisa diferente gerando frustração no usuário.
2. Quando o índice do ícone é claro e pregnante em termos de modelo mental, ele
torna a interface mais acessível por que não é necessário ler para interagir.
Exemplo clássico é o botão de play que já está fortemente disseminado e sempre
que você vê ele em uma interface você sabe que está dando a ordem de
reproduzir uma mídia com vídeo ou som.
3. Um recurso que tem sido bastante utilizado na construção de interface,
principalmente por que as interfaces proliferaram para diversos gadgets, além de
exclusivamente o desktop. Nesses gadgets, na maioria das vezes com telas
menores, como é o caso de celulares e smartwatchs, o uso de ícone ajuda muito
na aplicação e distribuição dos elementos no espaço disponível em tela.
4. Uso muito bibliotecas grátis de ícones e tem projetos, com menos frequência,
que eu mesmo desenho os ícones. Links das bibliotecas grátis:
https://icons8.com/
https://thenounproject.com/
https://www.flaticon.com/free-icons/library
5. Acho que com a maturidade de iot, proliferação de gadgets e um público cada
vez mais a pregnantemente de nativos digitais, a tendência é que vamos explorar
mais a linguagem dos ícones e criar mais ícones totalmente novos que o usuário
vai precisar de um período para aprender o que indicia, assim como foi com o
56
ícone do "menu hambúrguer", que em um primeiro momento não era
compreensível, mas hoje já uma um ícone que tem seu índice consolidado.