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
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.
“Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.”
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.
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.
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
LISTA DE TABELAS
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
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.
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.
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
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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:
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
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
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.
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.
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.
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
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
“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.
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.
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.
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:
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.
