UNIVERSIDADE FEDERAL DE SANTA CATARINA KETLIN SOUZA NUNES
DESENVOLVIMENTO DE INTERFACES DE UM APLICATIVO MOBILE DE RECURSOS EDUCACIONAIS DIGITAIS PARA ESTUDANTES SURDOS
Projeto de Conclusão de Curso submetido ao curso de Design da Universidade Federal de Santa Catarina para a obtenção do Grau de Bacharel em Design.
Orientadora: Profª. Dra. Lisandra Andrade.
Florianópolis 2020
Ketlin Souza Nunes
DESENVOLVIMENTO DE INTERFACES DE UM APLICATIVO MOBILE DE RECURSOS EDUCACIONAIS DIGITAIS PARA ESTUDANTES SURDOS
Este Projeto de Conclusão de Curso (PCC) foi julgado adequado para obtenção de Título de Bacharel em Design, e aprovado em sua forma final pelo Curso de Design
da Universidade Federal de Santa Catarina.
Florianópolis, 06 de Outubro de 2020.
Prof. Mary Vonni Meurer, Drª. Coordenadora do Curso de Design UFSC
Banca Examinadora:
Prof. Berenice Santos Gonçalves, Drª. Universidade Federal de Santa Catarina Prof. Marília Matos Gonçalves, Drª. Universidade Federal de Santa Catarina Joanna Bruna Tiepo, Bacharel. Universidade Federal de Santa Catarina
______________________________________ Lisandra de Andrade Dias
Professora Orientadora
Este projeto é dedicado à minha mãe, irmãs e cunhados, por sempre me apoiarem e me incentivarem nos estudos e na minha carreira. Dedico também à comunidade
AGRADECIMENTOS
Agradeço aos meu familiares e amigos por me apoiarem e me ajudarem durante todo o processo de escrita e criação das interfaces. Não tenho palavras para expressar o quão importante foi a presença deles em minha vida durante esse ano de trabalho intenso no projeto.
Gostaria de agradecer à todos os professores do Curso de Design da Universidade Federal de Santa Catarina pelos ensinamentos que me proporcionaram durante minha formação. Agradeço principalmente à minha orientadora, Lisandra Andrade, por me orientar e por ser tão atenciosa aos detalhes. Agradeço às professoras Berenice Santos Gonçalves e Marilia Matos Gonçalves por aceitarem participar da minha banca. E também agradeço à bacharel Joanna Bruna Tiepo por aceitar participar da banca como convidada e por sua contribuição para o presente projeto.
E por fim, agradeço à todos da comunidade surda que participaram em entrevistas, testes e em conversas informais, me proporcionando detalhes e fatos que eu não conseguiria ter se não estivesse tão ligada ao público alvo.
RESUMO
O atual projeto trata do desenvolvimento de interfaces para um aplicativo de recursos educacionais para estudantes surdos do ensino fundamental, médio e EJA. O projeto segue estudos e dados sobre a comunidade surda para desenvolver um aplicativo que satisfaça suas necessidades. Portanto, o projeto visa alcançar uma interface intuitiva para o público surdo, não utilizando o português como língua principal, mas sim a Libras. Também há a utilização de ícones e ilustrações como elementos de apoio, para facilitar ainda mais o entendimento das telas.
Palavras-chaves: Acessibilidade; Aplicativo; Comunidade surda; Ícones; Interface; Libras.
ABSTRACT
The current project is about the development of interfaces for an application of educational resources for deaf students in elementary, high school and EJA. The project follows studies and data on the deaf community to develop an application that meets their needs. Therefore, the project aims to achieve an intuitive interface for the deaf audience, not using Portuguese as the main language, but Libras. There is also the use of icons and illustrations as support, to further facilitate the understanding of the screens.
Keywords: Accessibility; App; Deaf community; Icons; Interface; Libras.
LISTA DE FIGURAS
Figura 1: metodologia Bootcamp Bootleg………21
Figura 2: aplicativo Sinalário Disciplinar em Libras.……….……23
Figura 3: aplicativo METALIBRAS………..………24
Figura 4: aplicativo Primeira Mão……….…25
Figura 5: descrição da persona 1.……….…………28
Figura 6: descrição da persona 2……….………29
Figura 7: mapa conceitual do aplicativo feito pelo público-alvo.………….……32
Figura 8: painel semântico da palavra-chave “confiável”..………...…33
Figura 9: painel semântico da palavra-chave “intuitivo”.……….……...…34
Figura 10: painel semântico da palavra-chave “fácil”……….………...…....……35
Figura 11: painel semântico da palavra-chave “educativo”.………...……35
Figura 12: fluxograma da arquitetura da informação do aplicativo……….…36
Figura 13: tabela de padronagem dos resultados.……….…38
Figura 14: matriz de similaridade dos resultados.……….………39
Figura 15: arquitetura da informação final.………...….………40
Figura 16: wireframe da tela inicial pós-download.……….……...…41
Figura 17: wireframe de cadastro/login………..……….………….………….…42
Figura 18: wireframe de cadastro..………...……....……42
Figura 19: wireframe de login..……….………43
Figura 20: wireframe do tutorial de primeiros passos.……….………43
Figura 22: wireframe da tela “meu perfil”..……….……...……44
Figura 23: wireframe da tela “meus downloads”..……….……...……45
Figura 24: wireframe da tela de lista de disciplinas.……….…….……46
Figura 25: wireframe da tela de vídeos da disciplina selecionada.………...….46
Figura 26: wireframe da tela do vídeo selecionado.……….……....…...47
Figura 27: wireframe do vídeo em reprodução.……….…………...…..47
Figura 28: wireframe da tela de lista de coleções.……….……...…...48
Figura 29: wireframe da coleção selecionada.……….…………...…..48
Figura 30: criar coleção.……….…………...……….……...49
Figura 31: adicionar vídeos na coleção nova.………..…………...49
Figura 32: wireframe de extras.……….…………...…..50
Figura 33: visão macro do fluxo de telas.……….…………...……….…..50
Figura 34: exemplo da segunda versão dos wireframes.……….…...51
Figura 35: exemplo do movimento do sinal da palavra “surdo”..……….…..…55
Figura 36: construção do logotipo.……….…………...………..…56
Figura 37: amostra das cores azul principal, azul claro e azul escuro, respectivamente..……….……….…………...………..…57
Figura 38: resultado de contraste do azul principal sobre a cor branca…...…57
Figura 39: resultado de contraste do azul escuro sobre a cor branca...……57
Figura 40: proporção indicada..……….………...………...…58
Figura 41: grade utilizada para a construção das telas.………...…59
Figura 43: análise das tipografias escolhidas.……….………...……61
Figura 44: escala e hierarquia tipográfica.………..………...……62
Figura 45: evolução dos ícones da barra inferior do aplicativo.………...…63
Figura 46: ícones em sua forma animada em Libras.……….……...…63
Figura 47: amostra dos ícones do aplicativo e suas funções.………..…64
Figura 48: ilustração da área “alterar nome”.……….…………..……...…64
Figura 49: ilustração da área “alterar senha”.……….………….……...…65
Figura 50: ilustração da área “alterar ano escolar”..……….………….…65
Figura 51: ilustração da área “pontuações”.………..…………...…65
Figura 52: ilustração da área “ajuda”.………...…………...……66
Figura 53: ilustração de boas vindas.………..…….…………...……66
Figura 54: splash screen e tela de cadastro/login.………..…………...…67
Figura 55: telas de login e cadastro.……….………....………...…68
Figura 56: telas de tutorial e página principal.………...………...……69
Figura 57: telas de perfil e de alterar foto.……….………...…70
Figura 58: telas de alterar senha e alterar nome.……….…………....……71
Figura 59: telas de alterar ano escolar e de pontuações.………....……72
Figura 60: modal de prêmio adquirido ao terminar os estudos de certa disciplina.……….…………...….……….…………...………….…72
Figura 61: telas de busca e de downloads.……….…………...……73
Figura 62: telas de ajuda e de disciplinas.……….…………...…………...74
Figura 64: tela de vídeo-aula selecionada .……….………..…...…76
Figura 65: tela de play.……….…………...…76
Figura 66: tela de selecionar legenda.……….……….……77
Figura 67: tela de replay e vídeos sugeridos ao final do vídeo.………....……77
Figura 69: telas de favoritos e mais (antigo extras).……….…………..…78
Figura 69: telas de artigos e de artigo selecionado.……….…………..…79
Figura 70: tela de notícias.……….………..………...…80
Figura 71: comparação da tela antes e depois da síntese dos testes de usabilidade...……….…………...…….……….………..……...…84
LISTA DE GRÁFICOS
Gráfico 1: comparativo entre a população geral e a população com deficiência auditiva que frequentam creche/escola.……….17 Gráfico 2: comparativo entre a população geral e a população com deficiência auditiva alfabetizados……….………...….18
LISTA DE TABELAS
Tabela 1: histórias de usuários e requisitos de projeto………..30 Tabela 2: matriz de decisão tipográfica.………...……….….60
LISTA DE ABREVIATURAS E SIGLAS
Libras: Língua Brasileira de Sinais.
ASGF: Associação de Surdos da Grande Florianópolis. IBGE: Instituto Brasileiro de Geografia Estatística. LBI: Lei Brasileira de Inclusão.
e-MAG: Modelo de Acessibilidade em Governo Eletrônico.
SUMÁRIO 1. INTRODUÇÃO 17 1.2 OBJETIVOS 20 1.2.1 Objetivo geral 20 1.2.1.1 Objetivos específicos 20 1.3 JUSTIFICATIVA 21 1.4 DELIMITAÇÃO DO PROJETO 21 1.5 MÉTODO PROJETUAL 21 2. EMPATIA 22 2.1 Análise de similares 23 2.1.1 Similares diretos 23 2.1.2 Similares indiretos 25 2.2 Público alvo 26
2.3 Síntese das entrevistas 26
3. DEFINIÇÃO 28
3.1 Personas 28
3.2 Cenários 30
3.2.1 Persona 1 30
3.2.2 Persona 2 31
3.3 Histórias do usuário e requisitos de projeto 31
4. IDEAÇÃO 32
4.1 Mapa conceitual 33
4.2 Painéis semânticos 34
4.3 Arquitetura da informação 37
4.4 Card sorting 38
4.5 Arquitetura da informação final 40
4.6 Wireframes 42
4.7 Teste de usabilidade com os wireframes 52
4.7.1 Teste piloto 53
4.7.2 Demais testes de usabilidade 54
5. PROTOTIPAÇÃO 55 5.1 Identidade visual 55 5.1.1 Naming 55 5.1.2 Logotipo 56 5.2 Cores 57 5.3 Grades e Espaçamentos 59 5.4 Tipografia 61 5.5 Ícones 63 5.6 Ilustrações 65
5.7 Desenvolvimento das telas 67 5.8 Perspectivas pedagógicas para os vídeos em Libras 81
5.9 Prototipação 83 6. TESTE 83 6.1 Teste piloto 84 6.2 Teste de usabilidade 85 7. APLICATIVO FINAL 86 8. CONSIDERAÇÕES FINAIS 87 9. REFERÊNCIAS BIBLIOGRÁFICAS 88 10. APÊNDICE 91 10.1 Termo de consentimento 91
10.2 Roteiro das entrevistas 92
10.3 Roteiro do teste de usabilidade com os wireframes 93 10.4 Roteiro do vídeo promocional do aplicativo 94
10.5 Teste de usabilidade final 95
1. INTRODUÇÃO
De acordo com o artigo 6 da Constituição Federal de 1988, é assegurado que o acesso à educação é um direito de todo cidadão. E desse modo, em geral as políticas públicas têm se empenhado um pouco mais durante os últimos anos para garantir direitos inclusivos. É de extrema importância que haja essa democratização do acesso à educação, à tecnologia e à sociedade.
Segundo Charlotte e Peter Fiell (2015), o design foi e é característica importante da cultura e da vida cotidiana, definido como concepção e planejamento de todos os produtos feitos pelo homem. O design, desde seu início, pode ser visto fundamentalmente como um instrumento para melhorar a qualidade de vida. Ou seja, há vários caminhos para que nós como designers, possamos implementar cada vez mais a acessibilidade no contexto das interfaces. Entretanto, mesmo que a preocupação com a acessibilidade venha ganhando espaço, existem poucos aplicativos e sites realmente preparados para essa demanda e para esse público. Tendo isto em mente, a acessibilidade com o público surdo é pouco atendida nos aplicativos mobile, afinal não é sempre que a tela dispõe espaço suficiente para colocar um tradutor de Libras (Língua Brasileira de Sinais) ao lado, por exemplo.
Para poder entender melhor a necessidade de tecnologias para esse público, é importante analisar os seguintes dados. Segundo o censo realizado em 2010 pelo Instituto Brasileiro de Geografia e Estatística (IBGE), 9,7 milhões possuem deficiência auditiva, o que representa 5,2% da população brasileira. Deste total, 2,6 milhões são surdos e 7,2 milhões apresentam grande dificuldade para ouvir. Também segundo o IBGE, 28 milhões de brasileiros possuem algum tipo de deficiência auditiva, ou seja, 14,8% dos brasileiros.
Pesquisas também apontam que esse número tende a crescer. Pois, além do aumento da população idosa no país, apontado pelo censo do IBGE de 2010, as deficiências auditivas, que poderiam ser reversíveis se constatadas até os 06 meses de idade, são constatadas a partir dos 04 anos, o que é considerado tardio para os médicos.
Uma das maiores dificuldades das pessoas com deficiência auditiva é a inclusão nas escolas, afinal, apenas 12,3% dos jovens surdos frequentam creches
ou escolas (gráfico 1) e 24,5% da população surda não foi alfabetizada (gráfico 2). Esses números são bastante expressivos e mostram uma falha na tentativa de inclusão desse público.
Gráfico 1: comparativo entre a população geral e a população com deficiência auditiva que
Gráfico 2: comparativo entre a população geral e a população com deficiência auditiva
alfabetizados. Fonte: IBGE, Censo Demográfico 2010.
Além desses dados, o IBGE também aponta que cerca de 70% dos surdos têm dificuldades em compreender o português, logo, têm dificuldades em compreender sites e aplicativos que se comunicam exclusivamente através do português. A experiência de comunicação dos surdos é extremamente visual, eles dependem da Libras (a qual foi reconhecida como meio legal de comunicação e expressão da comunidade surda pela Lei nº 10.436, de 24 de abril de 2002) para se comunicar e obter informação. E a Libras possui uma estrutura diferente do português, o que acaba provocando esse desentendimento com a língua portuguesa. O termo “surdo-mudo”, por exemplo, é uma generalização errônea. Poucos surdos são, de fato, mudos. Eles apenas não são oralizados em português. Segundo o Ministério da Saúde, existem cinco níveis de deficiência auditiva, as quais são: ligeira, média, severa, profunda e cofose. Na deficiência auditiva ligeira, a palavra é ouvida, contudo certos elementos fonéticos escapam ao indivíduo. Este tipo de surdez não provoca atrasos na aquisição da linguagem, porém há dificuldades em ouvir uma conversa normal. Quem sofre de perda
auditiva média possui dificuldade para ouvir diálogo no tom de voz normal e também possui dificuldades na aquisição de linguagem. No nível severo, é necessário gritar para que a pessoa tenha sensação auditiva, há perturbações na voz e na fonética da palavra. O nível profundo não há nenhuma sensação auditiva, ocasionando dificuldades intensas na aquisição da linguagem oral. E no último nível, cofose, a ausência de som é completa.
Igualdade e acessibilidade é um direito de todos e não é apenas responsabilidade social, também é lei. Segundo a LBI, Lei Brasileira de Inclusão nº 13.146, de 6 de julho de 2015:
“Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.”
A acessibilidade não pode mais ser considerada opcional. Mesmo com uma lei vigente, é uma questão maior de humanização, democracia e acesso à informação. A responsabilidade social dá-se a consciência e o poder de tornar o mundo mais igualitário, e o mundo digital muito melhor para as minorias, que hoje não são mais tão pequenas assim.
1.2 OBJETIVOS
1.2.1 Objetivo geral
Desenvolver a interface de um aplicativo de recursos educacionais digitais para alunos surdos dos ensinos fundamental, médio e EJA (Educação de Jovens e Adultos).
1.2.1.1 Objetivos específicos
● Compilar dados sobre a comunidade surda, para melhor atender suas necessidades;
● Levantar critérios relevantes para o projeto atual do Modelo de Acessibilidade de Governo Eletrônico - e-MAG, versão 3.0;
● Prototipar alternativas; ● Elaborar um roteiro de teste;
● Testar o protótipo com usuários de faixas etárias diferentes. 1.3 JUSTIFICATIVA
A ideia de trabalhar com acessibilidade do presente projeto surgiu pelo interesse da autora pelo tema, adquirida ao decorrer do curso de Design. Além disso, a vontade de desenvolver um produto específico para a comunidade surda deu-se à vida pessoal da autora, cuja cresceu ao lado de uma pessoa surda. Compreendendo assim, as dificuldades deste público dentro da sociedade.
Diante disso, deseja-se que seja feita uma pesquisa sobre o tema, apropriando-se de dados para construir uma interface e fluxo satisfatórios para o público alvo na tentativa de incluí-los.
1.4 DELIMITAÇÃO DO PROJETO
O atual projeto delimita-se na pesquisa do tema, criação de interfaces gráficas em sua versão mobile e prototipação. Desta forma, não ocorrerá a programação e implementação do mesmo.
1.5 MÉTODO PROJETUAL
Criatividade não significa improvisação sem método. Essa maneira apenas se faz confusão e se cria nos jovens a ilusão de se sentirem artistas livres e independentes. A série de operações do método projetual é feita de valores objetivos que se tornam instrumentos de trabalho nas mãos do projetista. (MUNARI, 1981, pág. 11)
Dessa forma, a abordagem a ser utilizado no atual projeto é o Design Thinking Bootcamp da Universidade de Stanford. Tal metodologia é dividida em cinco (5) etapas, como mostra a figura 1.
Figura 1: metodologia Design Thinking Bootcamp. Fonte: STANFORD D.SCHOOL. Traduzido pela autora.
A primeira fase é a empatia, na qual pode-se entender o público alvo do projeto, por se tratar de um processo centrado no ser humano. Nesta fase onde as pesquisas e observações são feitas, de modo a combinar a necessidade do usuário com o que é tecnologicamente possível.
Após a detecção do problema, os dados e impressões são coletados e sintetizados para conseguir determinar qual será o foco do projeto. Essa síntese é distribuída entre personas, análise de similares, etc.
A fase de ideação é a criação das ideias geradas a partir das fases anteriores, pode-se criar a ideia principal e então estruturá-la para a aplicação da fase seguinte, que é a prototipação.
Nessa fase ocorre a materialização da ideia, na qual ocorre desde os primeiros protótipos de papel até os protótipos mais elaborados para serem usados nos testes.
A última fase é o processo de testes. Os testes com o usuário são feitos para obter o feedback sobre as soluções encontradas, refina-las e torná-las melhores. Afinal, o presente projeto pretende atingir um produto que satisfaça as necessidades do público alvo.
2. EMPATIA
Como já foi mencionado no item 1.5, a fase de empatia busca compreender as necessidades do público alvo. Como a própria palavra diz, empatia é
capacidade de projetar a personalidade de alguém num objeto, de forma que este pareça como que impregnado dela. Sendo assim, esta fase é de extrema importância para a elaboração de um produto que realmente faça sentido para o público alvo.
2.1 Análise de similares
Essa etapa do projeto teve como objetivo analisar e apontar as principais características de aplicativos similares ao projeto desenvolvido. O critérios estabelecidos para a escolha dos aplicativos similares foi o tema “educação digital para surdos” e a abordagem.
Dessa maneira, foi possível dividir os similares em diretos e indiretos. Os similares diretos são: Sinalário Disciplinar em Libras e o METALIBRAS. O similar indireto é o Primeira Mão.
2.1.1 Similares diretos
Sinalário Disciplinar em Libras - É um aplicativo de apoio de estudos para os alunos e os profissionais (intérpretes) que trabalham com os educandos surdos, como o próprio aplicativo diz em sua descrição.
Ele disponibiliza mais de 300 vídeos explicativos em Libras divididos em 13 disciplinas que compõem o currículo do Ensino Fundamental e do Ensino Médio: Filosofia, Sociologia, Ensino Religioso, Educação Física, Ciências, Biologia, Artes, Química, Física, Matemática, Língua Portuguesa, Geografia e História.
Desenvolvido para profissionais da educação, estudantes surdos, comunidade surda e demais interessados, o aplicativo também traz além dos sinais, a datilologia da palavra e a contextualização do termo apresentado no vídeo. Algo1 que é muito importante para a compreensão de algumas palavras que existem na Língua Portuguesa, mas que não existem em Libras, facilitando assim, o entendimento da situação na qual a palavra está inserida.
O aplicativo possui uma interface pouco intuitiva, pois suas categorias estão todas dispostas em uma tela, não contendo uma divisão ou uma hierarquia para evitar acúmulo de informações. Ele também não possui filtro, dificultando um 1 Datilologia - A datilologia ou alfabeto manual é um sistema de representação, quer simbólica, quer icônica, das
letras dos alfabetos das línguas orais escritas, por meio das mãos. É útil para se entender melhor a comunidade surda, faz parte da sua cultura e surge da necessidade de contato com os cidadãos ouvintes. Fonte: Wikipedia.
pouco a busca por determinados vídeos. Além disso, o aplicativo não tem um player próprio, todos os vídeos são carregados no Youtube, assim como mostra a figura 2.
Figura 2: aplicativo Sinalário Disciplinar em Libras. Fonte: Google Play Store.
METALIBRAS - O aplicativo, que ainda está em desenvolvimento, visa facilitar a integração entre alunos surdos e ouvintes através do ensino básico de Libras em escolas públicas do Brasil de forma interativa. De modo geral, o seu conceito é traduzir por meio de um personagem animado, histórias de conhecimentos gerais para Libras.
Entretanto, há certa polêmica no uso de personagens animados gesticulando em Libras, pois eles não possuem tanta expressão facial, algo crucial para o entendimento de certos termos e palavras em Libras.
Além disso, a interface do aplicativo não é intuitiva, de forma que o usuário se perde em vários momentos, sem saber o que fazer ou qual passo tomar. Até mesmo o contraste da tipografia usada não é tão satisfatório, visando as pessoas com alguma dificuldade ótica, conforme podemos ver na figura 3.
Figura 3: aplicativo METALIBRAS. Fonte: Google Play Store.
2.1.2 Similares indiretos
Primeira Mão - O aplicativo que faz parte da TV INES, traz as principais notícias do Brasil e do mundo, sendo eles divididos em: política, economia, serviços, curiosidades e dicas de cultura e lazer. Se trata de um jornal bilíngue para surdos e ouvintes.
O aplicativo tem poucas funcionalidades, de modo que sua interface foi dividida em três categorias: jornal, boletim e “saber mais”. Na seção “jornal”, tem todos os vídeos diários dos jornais feitos, geralmente um por dia, então todos têm datas. Já no boletim são as últimas notícias, como por exemplo a inauguração de um monumento importante. E no “saber mais” são tópicos atuais importantes, como por exemplo um resumo dos candidatos à presidência.
De modo geral, a interface é bem simples e fácil de utilizar, os vídeos utilizados são carregados no aplicativo que possui um player próprio. O Primeira Mão se apropria bastante de ícones, o que facilita bastante o entendimento para a parte do público surdo que não compreende muito bem o português, como podemos ver na figura 4.
Figura 4: aplicativo Primeira Mão. Fonte: Google Play Store.
2.2 Público alvo
O público alvo do presente trabalho são alunos surdos do ensino fundamental e médio, sendo assim, também é considerado alunos da EJA (Educação de Jovens Adultos).
A necessidade de fazer um aplicativo destinado à esse público foi devido a escassez de aplicativos e recursos digitais acessíveis em Libras. Afinal, como já foi mencionado anteriormente, 70% dos surdos não compreendem bem a língua portuguesa.
Sendo assim, foi feito um roteiro com perguntas abertas, para que os entrevistados pudessem discorrer sobre o assunto, expondo suas reais dores e necessidades ao acessar a internet e principalmente ao tentar estudar de maneira virtual.
Todas as entrevistas foram feitas em Libras, embora o roteiro e o termo de consentimento, encontrados no apêndice, estejam em português.
2.3 Síntese das entrevistas
Para fazer a entrevista, foi solicitado acesso à ASGF (Associação de Surdos da Grande Florianópolis) para entrevistar os seus integrantes. A ASGF conta com
algumas turmas de estudo, onde eles ensinam Português, Matemática e Ciências Gerais.
A associação disponibilizou a entrevista em uma das turmas, na qual continha 10 alunos. E foram entrevistados mais 2 alunos via chamada por vídeo, contabilizando o total de 12 entrevistados.
A entrevista contava com 12 questões, sendo em sua maioria questões abertas, para poder compreender melhor os perfis. Sendo assim, dos 12 entrevistados, 7 eram mulheres e 5 eram homens. Destes, 4 tinham entre 17 a 30 anos e 8 tinham entre 30 a 55 anos.
Na questão sobre formação, as respostas foram similares aos dados obtidos pelo IBGE. Dos entrevistados, 2 possuíam ensino médio completo e estavam lá por gostarem de estudar, porém não tinham tempo ou não se sentiam aptos para fazer uma graduação. 4 possuíam ensino médio incompleto. 3 tinham ensino fundamental completos e 2 tinham ensino fundamental incompleto. E 1 dos entrevistados estava no processo de alfabetização.
Quanto às horas dedicadas à internet, 9 responderam que costumam ficar 8 horas por dia e 3 participantes responderam que costumam dedicar de 6 a 7 horas de seu tempo na internet. Em relação aos aplicativos/sites utilizados, foi unânime as redes sociais. Todos responderam Facebook e WhatsApp. Dos 12 participantes, 8 também responderam que costumam usar o Instagram e Netflix. E o dispositivo mais utilizado é o smartphone, ganhando 11 votos. Apenas 1 participante respondeu que utilizava mais o computador por trabalhar na frente de um.
Dentre as dificuldades mencionadas, todos responderam que às vezes não conseguem compreender frases longas ou complexas postadas nas redes sociais, mas que conseguiam compreender as funções dos aplicativos através dos ícones ou porque foram ensinados por terceiros. Importante ressaltar que esses terceiros são pessoas ouvintes. Outra dificuldade mencionada foi que alguns aplicativos possuem itens em inglês, a qual é uma língua que eles não entendem, porém gostariam de aprender.
Sobre a perspectiva de haver ilustrações ou imagens para facilitar o entendimento de alguns tópicos dos aplicativos, a resposta sim foi unânime, afinal, eles estão acostumados com expressões faciais e corporais, e segundo eles, isso facilitaria bastante ao utilizar um aplicativo.
Quando perguntados se utilizam a internet para estudar, 7 disseram que não e 5 disseram que já tentaram encontrar recursos digitais para estudar, porém
destes 5, apenas 2 disseram que conseguiram achar conteúdos, os quais eram artigos em português.
A experiência em estudar online não é satisfatória, pois embora 2 participantes tenham conseguido acessar artigos, ambos disseram sentir falta de uma tradução para Libras, afinal as palavras em seu teor acadêmico eram complexas. Dentre os 7 entrevistados, 6 responderam que nunca tentaram acessar conteúdo online para estudar, disseram que já sabiam que não iam encontrar conteúdos acessível em Libras e que por isso, evitam a frustração. O único participante em fase de alfabetização disse que nunca procurou por não conseguir acessar a internet para esse fim, afinal não saberia nem como pesquisar.
Por fim, quando perguntados sobre as melhorias que a internet poderia ter, todos falaram que os sites e aplicativos podiam se preocupar mais em disponibilizar conteúdos em Libras, pois quando tem o tradutor de Libras em algum site, (como por exemplo o HandTalk) geralmente não é tão eficaz pelo próprio tradutor não reconhecer algumas palavras.
3. DEFINIÇÃO
Essa etapa envolve a interpretação de todos os fatos adquiridos no processo de empatia. Para que uma definição do problema seja atingida, é preciso processar tudo o que foi dito e visto na etapa anterior. Em resumo, a etapa da definição é sobre identificar o problema do usuário de forma clara e passível de soluções eficientes. É nessa fase onde são elaboradas as personas, cenários, histórias do usuário e requisitos de projeto.
3.1 Personas
A criação de personas auxilia no entendimento do público-alvo. É um exercício de empatia, mas também definição, onde o desenvolvedor pode se colocar no lugar do usuário e definir quais interações desejáveis ele fará com o produto.
Para este projeto foram criadas duas personas, uma representando o público adulto. Igor Vieira, estoquista e que mora com o noivo. A outra persona representa o público mais jovem, em idade escolar. Ariele Novaes, adolescente e que mora com sua mãe.
Figura 6: descrição da persona 2. 3.2 Cenários
Os cenários ajudam a comunicar a essência da ideia de produto dentro de um provável contexto de uso. Pensar no que o usuário vai fazer pode parecer não muito controlável, mas mapear alguns cenários comuns pode ser útil para compreender as limitações da solução, afinal é o produto que deve se adaptar ao contexto de uso, e não o contrário. O cenário influencia diretamente na forma de se pensar no design de interação e na solução.
Trabalhar com cenários de uso significa contar uma história fictícia (ou não) prevendo e relatando situações em que um usuário possivelmente se encontraria ao interagir com o produto/interface/solução que se está desenvolvendo.
Sendo assim, os cenários desenvolvidos para as personas do atual projeto foram feitas com base nos dados obtidos nas entrevistas.
3.2.1 Persona 1
Igor estava navegando pela internet através de seu smartphone em busca de conteúdos para poder estudar sozinho em casa. Ao pesquisar na Play Store achou
o aplicativo de recursos educacionais digitais e se surpreendeu com a proposta do mesmo.
Logo fez o download e se surpreendeu por ter vídeos explicando todas as matérias em Libras. Além disso, gostou muito do recurso “extras”, o qual possui vídeos explicando contextos, como por exemplo, o Tratado de Versalhes, para compreender melhor a Primeira Guerra Mundial.
3.2.2 Persona 2
Ariele conheceu o app através de sua intérprete na escola que o recomendou. Ela fez o download e se empolgou por achar tantos conteúdos importantes para seus estudos.
O recurso no qual ela mais gostou foi o “Atualidades”, já que é algo essencial que ela saiba para fazer o vestibular, afinal, geralmente temas da atualidade caem como redação e etc.
3.3 Histórias do usuário e requisitos de projeto
As histórias de usuários gera uma situação de interação da persona com o aplicativo, é um pouco semelhante aos cenários, porém mais específico. Ele mostra o que possivelmente o usuário poderia querer fazer e se o aplicativo corresponderia às suas expectativas. Através da história do usuário, os requisitos de projeto são obtidos com mais facilidade, a fim de desenvolver uma interface e fluxo adequados.
História do usuário Requisitos de projeto
O aluno acessa o aplicativo e realiza seu cadastro facilmente.
Login através do Facebook, Google ou do cadastro de e-mail e senha.
O aluno deseja explorar e entender mais o aplicativo.
Tutorial inicial em Libras explicando as principais funcionalidades do App.
O aluno deseja encontrar conteúdos facilmente.
Na lista de conteúdos, o aplicativo dispõe de um filtro com as opções de: filtrar por disciplina; filtrar por ordem.
Tabela 1: história de usuários e requisitos de projeto.
4. IDEAÇÃO
Na fase de ideação é possível ir moldando e dando forma ao produto. É a fase na qual são encontradas as soluções para as necessidades do usuário, vistas
O aluno gostou de alguns conteúdos e deseja salvá-los.
O aplicativo dispõe da função “favoritos”, onde o usuário poderá salvar conteúdos.
O aluno estava no meio de um vídeo, porém teve que parar de assisti-lo e não lembra onde exatamente parou para voltar a assistir mais tarde.
O aplicativo oferece a lista “voltar a estudar”, onde terá todos os vídeos inacabados do aluno.
O aluno deseja assistir mais vídeos sobre o conteúdo em específico, mas não sabe qual vídeo assistir a seguir.
Assim que o vídeo finalizar, o aplicativo recomendará um vídeo em sequência.
O aluno deseja assistir vídeos durante uma viagem em que não terá acesso à internet.
O aplicativo dispõe a funcionalidade “download” para que o usuário possa assistir a qualquer momento.
O aluno não compreendeu bem sobre o conteúdo estudado.
Fórum com materiais complementares, os quais possuem artigos para uma melhor compreensão.
O aluno deseja estar por dentro dos assuntos da atualidade.
A seção “atualidades” do aplicativo contará com temas que estão em pauta. Essa seção auxilia principalmente os alunos que prestarão concurso ou provas como o Enem. O aluno deseja um meio para saber as
notícias do dia a dia do Brasil
A seção “notícias” é um extra do aplicativo, colocando vários conteúdos atuais do Brasil e temas relevantes do exterior, como a política para informar o aluno.
na etapa anterior. Por essa razão, é importante utilizar ferramentas conceituais, visuais e de organização para que a estrutura do projeto seja eficiente e gere um resultado final satisfatório.
4.1 Mapa conceitual
O mapa conceitual auxiliou na organização de ideias, conceitos e informações de modo esquematizado. Partindo do ponto central da questão, foi possível criar ligações entre diferentes assuntos e ainda ampliar a visão do projeto.
O mapa foi eficaz no projeto, pois facilitou a compreensão por conta de seu formato visual, a sintetização de informações e também permitiu o estímulo da criatividade. Ele foi elaborado com a ajuda de duas pessoas representantes do público alvo.
Figura 7: mapa conceitual do aplicativo feito pelo público-alvo.
4.2 Painéis semânticos
Segundo o dicionário, semântico é o ramo da linguística que estuda o significado das palavras. E o uso dos painéis se concentram no significado das imagens, e principalmente no significado do produto.
Com base nas imagens agrupadas no painel, pode-se definir as formas a seguir. Optando por mais orgânicas, ou mais abstratas, geométricas, entre outros. Também facilita a definir uma paleta de cores baseada nas sensações visuais obtidas através destas imagens.
Dessa forma, foi elaborado um painel semântico para cada palavra chave do aplicativo, sendo elas: confiável, intuitivo, fácil e educativo, como pode-se ver nas figuras abaixo.
Confiável: o app deve transmitir confiança ao usuário, para que ele se sinta confortável em navegar por ele.
Figura 8: painel semântico da palavra-chave “confiável”.
Intuitivo: devido a pouca experiência do público alvo com aplicativos de estudo, o aplicativo deve ser fácil de aprender e usar, seguindo padrões já estabelecidos pelas plataformas mais comuns, mencionadas nas entrevistas.
Figura 9: painel semântico da palavra-chave “intuitivo”.
Fácil: o aplicativo deve ser um facilitador na hora do estudo, melhorando o desempenho do aluno e facilitando o acesso à conteúdos auxiliares.
Figura 10: painel semântico da palavra-chave “fácil”.
Educativo: por se tratar de uma ferramenta de auxílio para estudos de alunos surdos, é importante que o aplicativo seja muito didático e que isso se mostre também na sua identidade visual.
Figura 11: painel semântico da palavra-chave “educativo”.
4.3 Arquitetura da informação
Uma importante ferramenta para organização de informações em diferentes suportes, a fim de facilitar o uso e acesso a estas. É utilizada ainda para dar forma a produtos e experiências de informação a fim de suportar a usabilidade (MORVILLE; ROSENFELD, 2006).
Com o mapa conceitual pronto, foi possível pensar nas telas que seriam necessárias para os fluxos do aluno e como seria o processo de navegação entre elas. Para esclarecer esse processo, foi desenvolvido um mapa da arquitetura do aplicativo em forma de fluxograma:
4.4 Card sorting
É crucial que o entendimento do usuário seja eficiente quando organizamos as informações e que elas sejam coerentes com o conteúdo e a realização da tarefa no produto final.
Desse modo, o card sorting entra como forma de validar a arquitetura elaborada anteriormente, afinal essa é uma prática feita com o usuário, essa metodologia permite que os usuários possam opinar e organizar as informações da forma que eles as entendem. Com isso, pode-se ter insumos para definir a melhor organização com base nos padrões dos usuários.
O card sorting foi feito à distância com 2 participantes e, sendo assim, foram utilizadas as ferramentas online Optimal Workshop e chamada por vídeo como auxílio, caso os participantes tivessem alguma dúvida a respeito da técnica. Com os outros 2 participantes foi de maneira presencial, entretanto, novamente foi utilizada a ferramenta online Optimal Workshop para melhor síntese dos dados.
Os participantes poderiam organizar 25 cards em 8 categorias pré-definidas, as quais também poderiam ser modificadas de ordem e poderiam acrescentar categorias também. As categorias são: cadastro, login, tutorial inicial, página inicial, lista de conteúdos, meu perfil, coleções e fórum.
Figura 13: tabela de padronagem dos resultados. Fonte: Optimal Workshop.
Com a tabela de padronagem (figura 13) é possível ver a distribuição dos cards nas categorias predefinidas e a criação de uma nova categoria. Além disso, a matriz de similaridade (figura 14) mostra quantas pessoas colocaram os mesmos cards nas mesmas categorias.
Figura 14: matriz de similaridade dos resultados. Fonte: Optimal Workshop.
Além dessas sínteses, dois usuários fizeram comentários sobre a categoria “fórum”, pois não entenderam o que aquela palavra significava. Esse dado em específico é muito importante para reavaliar as palavras escolhidas para o aplicativo, afinal se trata de uma ferramenta para auxiliar estudantes surdos que não necessariamente compreendem o português.
4.5 Arquitetura da informação final
Após a síntese dos dados do card sorting, foi decidido retirar a categoria “fórum”, pois ela não fez sentido para nenhum dos usuários, condensando assim, os itens que anteriormente estavam predefinidos no fórum, na categoria “lista de conteúdos”.
Desse modo, toda a arquitetura da informação foi repensada de acordo com o que os usuários demonstraram ser mais intuitivo para eles (figura 15).
Figura 15: arquitetura da informação final.
Como mostra a figura 15, a página “lista de conteúdo” foi ampliada, agregando todos os itens que anteriormente estavam na página “fórum” e “página inicial”, se tornando a página principal e a primeira página a ser vista pelo usuário após fazer o login.
Os ítens “ajuda” e “busca” foram realocados para permanecerem fixos no aplicativo ocupando, provavelmente, uma parte de destaque. De forma geral, as
melhorias feitas consistiram em simplificar ainda mais o aplicativo, deixando-o mais homogêneo e menos separando, facilitando assim, o acesso de suas funções. Dessa forma, pode-se observar a importância de realizar o card sorting com o público-alvo, pois, embora se estude a fundo sobre o tema e as necessidades do usuário, ninguém melhor do que o próprio para auxiliar a determinar fatores importantes do aplicativo que ele mesmo irá utilizar.
4.6 Wireframes
A partir da arquitetura da informação, o projeto passa para a etapa de elaboração dos wireframes, onde começa a se materializar. Foram desenvolvidos duas versões de wireframes. Uma sem textos, para apenas estruturar as telas. E uma segunda com textos para ficar mais compreensível para o usuário na hora do teste de usabilidade.
De início, construiu-se as telas iniciais. Sendo elas: tela inicial, cadastro, login e tutorial de primeiros passos. Na tela inicial (figura 16), foi pensado alguns vídeos promocionais para incentivar o usuário a se cadastrar no aplicativo e começar a utilizá-lo. Esta é uma tela que só aparecerá uma vez para o usuário, quando ele efetua o download do aplicativo.
Ao escolher avançar no aplicativo, o usuário será apresentado a tela de cadastro/login (figura 17), para poder se cadastrar caso não seja cadastrado, ou para fazer o login caso já seja.
Figura 17: wireframe de cadastro/login.
Figura 18: wireframe de cadastro.
Figura 19: wireframe de login.
Logo após o usuário entrar com o login no aplicativo, aparecerá um tutorial de primeiros passos (figura 20), ensinando as funcionalidades básicas do aplicativo. Essa tela, assim como a tela inicial, só aparecerá na primeira vez que o usuário acessar o aplicativo. Caso o usuário não queira assistir o tutorial, ele poderá pular essa etapa, e caso tenha dúvidas sobre o aplicativo, ele poderá acessar o tópico de ajuda do app.
Figura 20: wireframe do tutorial de primeiros passos.
A estrutura da tela home (figura 21) foi pensada para ser semelhante à tela home do aplicativo Netflix, afinal, é um aplicativo que eles já estão habituados, segundo a pesquisa com público alvo. Dessa maneira, a home ficou disposta em
três listas de vídeos: “continuar assistindo”, “últimos assistidos” e “recomendados para você”.
A partir da tela home, podem ser acessados as telas de “meu perfil” (figura 22), “meus downloads” (figura 23).
Figura 21: wireframe da tela principal.
Figura 22: wireframe da tela “meu perfil”.
Figura 23: wireframe da tela “meus downloads”.
A barra inferior das telas leva para as páginas home, lista de disciplinas, coleções e extras, onde se encontram artigos e notícias. Mesmo que no card sorting tenha sido retirada a seção “fórum”, optou-se por renomear por “extras”, por ser uma palavra fácil que simboliza bem sua função. Afinal, tudo em uma mesma seção, conforme a arquitetura final indicou, poderia causar confusão ao usuário nas telas finais. Sendo assim, tomou-se o risco de continuar com quatro seções. A tela de disciplinas (figura 24) está disposta na forma de lista, dividida pelas disciplinas de modo intuitivo para o usuário poder encontrar a matéria que deseja. Acessando uma disciplina, é possível ver todos os vídeos disponíveis. Já se o usuário quiser pesquisar de forma mais simples e rápida, há a opção de busca. (figura 25).
Figura 24: wireframe da tela de lista de disciplinas.
Figura 25: wireframe da tela de vídeos da disciplina selecionada.
Ao selecionar um vídeo, surgirá uma tela com as informações deste e as opções de: assistir, download do vídeo e adicionar o vídeo à alguma coleção, assim como mostra a figura 26. Posteriormente, vem a tela do vídeo em reprodução (figura 27).
Figura 26: wireframe da tela do vídeo selecionado.
Figura 27: wireframe do vídeo em reprodução.
Já a tela de coleções (figura 28) está disposta de forma semelhante à tela de lista de disciplinas, contendo o nome das coleções e a quantidade de vídeos em cada coleção. As coleções são separadas em label, para uma melhor hierarquia na tela. Também há um botão flutuante para o usuário poder criar uma nova coleção. E ao selecionar uma coleção, a tela mostrará o nome e uma breve resumo de todos os vídeos incluídos nesta coleção, além da opção de download (figura 29).
Figura 28: wireframe da tela de lista de coleções.
Figura 29: wireframe da coleção selecionada.
A partir do botão flutuante, é possível criar uma coleção, onde será colocado o nome desejado, uma categoria, se é multidisciplinar, português, matemática, etc, e uma breve descrição (figura 30). Após preencher esses ítens, o aplicativo irá sugerir vídeos a serem incluídos na coleção, ou o usuário poderá usar a busca para adicionar o vídeo que desejar (figura 31).
Figura 30: criar coleção.
Figura 31: adicionar vídeos na coleção nova.
Para a tela de extras, foi pensado em desenvolver algo similar às telas de lista de disciplinas e coleções, afinal o usuário já criou uma familiaridade com essas estruturas. A tela é dividida em lista, onde mostra o nome do extra e uma tag indicando se é artigo ou notícia. (figura 32).
Figura 32: wireframe de extras.
Por fim, na figura 33 pode-se ver o fluxo de telas em uma visão macro da artboard.
Figura 33: visão macro do fluxo de telas. 4.7 Teste de usabilidade com os wireframes
Para fazer o teste de usabilidade dos wireframes, decidiu-se por fazer uma segunda versão deles (figura 34), assim como já foi mencionado no ítem anterior. Afinal, a primeira versão não possuía textos, desse modo, foram adicionadas caixas de texto e elementos gráficos como ícones genéricos para que o usuário pudesse compreender melhor as telas. Além disso, na hora de prototipar os wireframes foi notado a necessidade de algumas telas extras para fechar bem o fluxo.
Figura 34: exemplo da segunda versão dos wireframes.
4.7.1 Teste piloto
O teste piloto foi feito com uma usuária de 36 anos, com deficiência auditiva severa e possui ensino fundamental incompleto. Ela não é oralizada e possui dificuldades em entender o português, sendo assim, se comunica com as pessoas exclusivamente através da Libras.
Para o teste, foram aplicados três cenários/tarefas para o usuário desenvolver. Os quais eram:
Cenário 1: Cadastro
Você acaba de saber do aplicativo através da indicação de um professor, se interessa pela proposta e baixa o aplicativo. Logo fica empolgado para fazer seu cadastro no aplicativo.
Cenário 2: Assistir uma vídeo aula
Após criar a conta no aplicativo, você logo quer ver como são as vídeo aulas. Seu interesse em específico é na matéria de biologia. Como acessaria uma vídeo aula de biologia?
Cenário 3: Criar uma coleção
Você gostou tanto de algumas vídeo aulas de biologia que quer salvá-las para ver novamente no futuro. Como você criaria essa pasta com esses vídeos?
Na tarefa de cadastro, a usuária não apresentou dificuldades, inclusive achou intuitiva o suficiente, mas sugeriu a utilização de ícones para facilitar mais ainda e não depender tanto do português.
Na segunda tarefa, “assistir uma vídeo aula”, também não apresentou dificuldades, e apontou que gostou muito da ideia de que a resumo da aula, além de estar descrita em português, poderá ser visualizada em Libras também. Ela fez o caminho indo até a matéria de biologia e então selecionou um vídeo, assim como pedia o cenário.
Já na terceira tarefa, “criar uma coleção” ela apresentou algumas dificuldades. O caminho que ela tentou fazer foi diferente do proposto e apontou que o ícone de salvar na coleção pudesse ser em forma de “coração” ou de
bookmark, os quais são mais comuns em aplicativos. Também sugeriu uma simplificação do fluxo de criar a coleção, pois achou pouco intuitivo.
De maneira geral a usuária apreciou bastante o aplicativo e ficou empolgada em vê-lo em forma de tela final, alegando que talvez ficasse menos confusa por ver os elementos com cor e interativos.
4.7.2 Demais testes de usabilidade
O segundo usuário tem 39 anos, possui deficiência auditiva severa e tem ensino médio completo. Ele é um pouco oralizado, embora tenha dificuldade para falar muitas palavras. Entende o português desde que não haja palavras muito complexas, mas prefere se comunicar através da Libras.
No segundo teste foram aplicados os mesmos cenários/tarefas que foram aplicados no teste piloto. Na primeira tarefa, “cadastro”, o usuário não apresentou dificuldades assim como a usuária do teste piloto.
O usuário gostou das telas da segunda tarefa, “assistir uma vídeo aula”, pois, segundo ele, se assemelha com a Netflix, o qual é um aplicativo que ele já está acostumado a usar.
E por fim, na terceira tarefa, “criar uma coleção” também não apresentou dificuldades, mas quando perguntado se tinha alguma ressalva, ele explicou que o fluxo poderia ser um pouco mais fácil, pois pode ser confuso para algumas pessoas.
A terceira usuária tem 31 anos, possui deficiência auditiva profunda e tem ensino fundamental completo. Ela não é oralizada, mas compreende o português quando usado de maneira simples, porém, se comunica exclusivamente através da Libras.
A usuária não apresentou dificuldades em desenvolver a primeira e nem a segunda tarefa. E também não teve nenhuma ressalva sobre as telas. Porém, apresentou grande dificuldade na terceira tarefa, “criar coleção”, a qual não conseguiu finalizar. Para ela, os fluxos e informações não foram claras o suficiente, provocando confusão e frustração por não conseguir alcançar o objetivo.
Deste modo, pode-se concluir que as telas de criar coleção devem ser repensadas e modificadas para que sejam mais intuitivas, assim como o fluxo, que pode ser simplificado para uma melhor navegação.
5. PROTOTIPAÇÃO
A prototipação é a penúltima fase do projeto. É nessa etapa que são decididos a identidade visual e guia de estilo do aplicativo para então começar a desenvolver as telas dentro desses parâmetros.
5.1 Identidade visual
O atual projeto não é focado em branding, mas é importante um aplicativo ter uma identidade visual bem planejada. Além disso, essa etapa pode ser o ponto de partida para a elaboração do guia de estilo, pois a estética do aplicativo terá que ser condizente com a estética da logotipo . 2
5.1.1 Naming
Como primeira etapa desse processo, optou-se por escolher o nome do aplicativo. Como o projeto tem alunos surdos como público alvo, e estes geralmente não são oralizados, não fazia muito sentido colocar um nome em português. Sendo assim, foi feita uma pesquisa informal entre alunos surdos do curso de Letras - Libras da Universidade Federal de Santa Catarina, sobre quais sons são fáceis de pessoas não oralizadas reproduzirem.
Foi constatado que os sons mais fáceis de reproduzir são os que começam com P ou B, de forma que os sons que começam com R ou L são os mais difíceis. Foi pedido que alguns dos alunos reproduzissem em voz alta o som que mais achassem fácil. Os sons foram: pin, pon, bon, e ben.
Depois, conversando sobre outros assuntos, pode-se analisar que durante a conversa, os estudantes reproduziam muito pin e pon para expressar as frases. Então, foi decidido usar o som “pon” para ser o nome do aplicativo por ser um som muito utilizado entre eles e por ser um som amigável para quem é ouvinte.
2Logotipo: O logotipo consiste em um signo que representa uma marca ou empresa. Além do ícone, este
também contém um suporte de texto. Logo, chamamos de logotipo o conjunto ícone + tipografia (texto). Fonte: Blog Futura Express.
5.1.2 Logotipo
Ao criar o logo do aplicativo, foi pensado em fazer algo fácil de entender e que tivesse um grande significado. Sendo assim, surgiu a ideia de desenhar movimentos, afinal a Libras se expressa dessa forma.
Porém, a existência de vários movimentos dificultou a escolha de um só. Ao analisar sinais considerados importantes para a comunidade surda, foi incontestável a decisão pelo sinal da palavra “surdo”.
Dessa maneira, foi possível perceber que o movimento do sinal de “surdo”, poderia ser usado como forma de demonstrar a letra “P”. E ficou ainda mais claro quando adicionado a haste. Harmonizando assim, a proposta de ter um entendimento fácil e com um grande significado.
Figura 35: exemplo do movimento do sinal da palavra “surdo”. Fonte: Cristiane Libras Blogspot.
Figura 36: construção do logotipo. 5.2 Cores
A cor escolhida para o aplicativo foi o azul por três motivos. O primeiro é que conforme o livro “Psicologia das Cores” da autora Eva Heller o azul representa tecnologia, e como o atual projeto lida com um aplicativo de recursos digitais, foi plausível a escolha por essa cor. O segundo motivo é que de acordo com Heller, o azul também representa a pedagogia e a educação. Novamente trazendo coerência à cor escolhida.
O azul é a principal cor das virtudes intelectuais. Seu acorde típico é azul e branco. Essas são as principais cores da inteligência, da ciência, da concentração. (HELLER, 2013, p. 60.)
E por fim, o terceiro motivo: em setembro é comemorado o mês do surdo, pois em setembro ocorreram muitas datas significativas para a sua história, uma delas é a fundação da primeira escola para surdos no país, criada pelo professor francês surdo Eduard Huet. Além das datas comemorativas em setembro, a comunidade surda escolheu a cor azul para representá-los.
Conforme a história, na Segunda Guerra Mundial, Hitler mandava os soldados nazistas amarrarem, nos braços das pessoas com deficiência, fitas azuis para identificá-las como não pertencentes ao ideal da “raça pura”. Um fato tão marcante e triste foi ressignificado para um símbolo de resistência e orgulho ao decorrer do tempo.
Dessa maneira, a tonalidade do azul escolhida foi um azul vivo e que ainda tivesse um contraste satisfatório com o branco, conforme recomenda-se as
diretrizes de contraste do Modelo de Acessibilidade de Governo Eletrônico - e-MAG.
Figura 37: amostra das cores azul principal, azul claro e azul escuro, respectivamente.
De acordo com a figura 37, foram escolhido três variações de azul. O azul claro só será utilizado em detalhes das ilustrações e não diretamente na interface, pois não possui contraste o suficiente para uma visualização clara. E o azul escuro será utilizado em títulos menores para ter um contraste adequado com o fundo branco, já que o azul principal não possui contraste o suficiente para títulos menores, como podemos ver nas figuras 38 e 39.
Figura 38: resultado de contraste do azul principal sobre a cor branca. Fonte: Deque University Color Contrast
Figura 39: resultado de contraste do azul escuro sobre a cor branca. Fonte: Deque University Color Contrast
5.3 Grades e Espaçamentos
Acredita-se que a determinação de um grid ou grade é importante para dar 3 consistência e exatidão em um projeto, pois facilita muito no desenvolvimento da interface.
O grid escolhido é o de 8 pixels , o qual foi divulgado pela Google em 2016 4 para o meio digital. No grid de 8 pixels tudo é divisível por 8 ou por 4. Além disso, nessa grade os elementos podem ser mais espalhados, considerando o pouco espaço da tela, o que é vital para adicionar perspectiva ao design final. Na figura abaixo, pode-se ver a proporção indicada pela Google no site Material.io.
Figura 40: proporção indicada. Fonte: Material.io.
Como o atual projeto se trata da interface de um aplicativo mobile, foi definido uma grade de 4 colunas de 60 pixels com gutter de 16 pixels (figura 41). 5 De modo que os espaçamentos utilizados para criar a hierarquia na interface são todos divisíveis por 8 ou 4, conforme mostra a figura 42.
3Malha, grid ou grelha, em design gráfico, é uma estrutura geométrica constituída por eixos desenvolvida para
auxiliar o alinhamento de elementos textuais e imagéticos numa composição visual. Fonte: Wikipedia.
4Segundo o dicionário, é um ponto luminoso do monitor que, juntamente com outros do mesmo tipo, forma as
imagens na tela; ponto.
Figura 41: grade utilizada para a construção das telas.
Figura 42: espaçamentos utilizados na interface.
5.4 Tipografia
A escolha tipográfica precisava cumprir alguns requisitos para garantir que seja adequada às necessidades do projeto. Após uma análise foram elencados os requisitos necessários:
● Ser uma fonte open source ; 6
● Possuir uma grande variedade de pesos (negrito, seminegrito, itálico, etc);
● Personalidade da fonte deve estar alinhada à identidade visual da interface do aplicativo;
● Possuir e garantir boa leiturabilidade e legibilidade; ● Funcionar no meio digital.
Com os requisitos definidos foi possível delimitar melhor a busca e eliminar tipografias que não se adequavam aos requisitos quantitativos do projeto. Como resultado dessa busca inicial, foram selecionadas as seguintes tipografias: Work Sans e Source Sans Pro. A tabela a seguir apresenta a análise dos requisitos de ambas as tipografias.
Tabela 2 - matriz de decisão tipográfica.
6São fontes que permitem o uso comercial.
Requisitos Work Sans Source Sans Pro
Open Source Sim Sim
Variedade de pesos 18 12
Alinhamento à identidade visual
Sim Não
Legibilidade Sim Sim
Leiturabilidade Sim Sim
A fonte Work Sans apresentou um melhor desempenho na matriz de decisão por: possuir uma maior variedade de peso e estar melhor adequada à identidade visual. Na figura abaixo, há a análise de decisão feita pela autora.
Figura 43: análise das tipografias escolhidas.
Observando as diferenças, pode-se dizer que a Work Sans é uma fonte moderna e amigável, pois possui as pontas arredondadas e possui o kerning mais 7 largo, dando uma impressão de segurança e conforto.
Para a interface, foram utilizadas 7 níveis diferentes de escala tipográfica, sendo eles usados para títulos, subtítulos, textos e legendas, conforme mostra a figura 44.
7O kerning é o processo de adição ou remoção de espaço entre pares de caracteres específicos. Fonte:
Figura 44: escala e hierarquia tipográfica.
5.5 Ícones
Segundo uma fala de Melissa Toledo para a revista Webdesign, o principal objetivo do ícone está em guiar o usuário na busca pela informação, ajudando na memorização de caminhos e tornando o meio digital mais amigável.
Para o presente projeto, os ícones são de extrema importância por possuir uma linguagem visual e não verbal, fator crucial para o entendimento de algumas funções de um usuário que não compreenda bem o português. Diante disso, acredita-se que os ícones desenvolvidos possuem clareza na sua leiturabilidade.
Na figura 45 é possível observar as alterações que os ícones sofreram ao longo do projeto, a fim de proporcionar signos universais para o entendimento de todos do público alvo.
Pode-se perceber mudanças não só na representação visual dos ícones, como no nome deles também. A seção “coleções” passou a ser “favoritos”, pois nos testes de usabilidade dos wireframes, os usuários não entenderam a seção “coleções” e então sugeriram algo mais universal, como “favoritos”. A mudança resultou também na seção como um todo e não apenas no nome, na esperança de deixar o tópico mais fácil e intuitivo aos usuários.
