Style Guide JUB: Utilizando UX/UI para auxiliar pais de crianças autistas.
Confira como foi a construção da interface de um aplicativo de organização de rotina para crianças autistas.
O JUB é um aplicativo de organização de rotina para crianças autistas feito como projeto de conclusão do curso UX Unicórnio. Neste artigo, vamos explorar os elementos do style guide e entender as principais decisões feitas em relação aos componentes da interface.
Para ter uma experiência completa, sugerimos que você leia o case completo neste artigo.
Acessibilidade
Garantir a acessibilidade da aplicação foi um dos pilares de toda a construção do projeto Jub. Além de considerar as dificuldades das crianças com TEA, consideramos também outros contextos de uso, como por exemplo, usuários com baixa visão.
Além das boas práticas de UX, seguimos as diretrizes de dois guias: O WCAG e o GAIA.
Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG)
Utilizamos as diretrizes do WCAG para que os itens da nossa interface atingissem os requisitos mínimos de contraste entre as cores. Para facilitar esta avaliação, utilizamos o plugin Able — Friction free accessibility no figma.
Além de avaliar o contraste das cores em cada componente, optamos por não utilizar cores puras na interface como preto (#000000) e branco (#FFFFFF), pois sua combinação prejudica o uso da aplicação por pessoas fotossensíveis.
GAIA
O Gaia é um conjunto de recomendações de acessibilidade web focado nos aspectos do autismo. Foram levados em consideração diversos pontos do guia para que habilidades como atenção, leitura, compreensão visual, verbal e linguística fossem trabalhadas da forma mais acessível possível para este público.
Entre alguns pontos analisados temos:
- G01 — Cores: As cores foram utilizadas como um complemento da representação da informação, respeitando o contraste adequado. Desta forma, não tornamos as cores a única forma de transmitir um conteúdo e consideramos as particularidades de pessoas com autismo.
- G02 — Textos: Utilizamos uma linguagem textual simples que evitou o uso de metáforas, jargões e acrônimos. Optamos também por utilizar textos mais curtos e simples para facilitar a compreensão apropriada do conteúdo.
- G10 — Interface minimalista: Optamos por fazer uma interface simples, apenas com os elementos necessários para cada ação, para não sobrecarregar as telas com uma grande quantidade de informação, o que poderia causar confusão ou frustação em algumas pessoas com TEA.
- G14 — Equivalentes textuais: Sempre que possível acrescentamos textos equivalentes próximos de ícones e imagens na interface para facilitar a compreensão clara do conteúdo imagético.
Estes foram apenas alguns itens considerados do GAIA para tornar nossa interface mais adequada para pessoas com TEA.
Branding
O logotipo é formado por um mascote animal, com a ideia de tornar a marca mais atraente e amigável para crianças. O animal escolhido foi inspirado na série sul-coreana “Uma Advogada Extraordinária”, que retrata a vida e desafios de uma advogada autista fascinada por baleias. O nome do app constitui-se da abreviação da palavra Jubarte, a espécie de baleia escolhida para a representação da marca.
Grid
Com o intuito de garantir uma organização do layout e padronização no app, optou-se por utilizar um grid de 4 colunas baseado no Material Design, um design system amplamente utilizado na construção de sites e aplicativos. O intuito de optar pelo Material Design como base para nosso grid e ícones foi a familiaridade de uso que diminui a carga cognitiva das pessoas usuárias.
Da mesma forma, utilizamos o grid de 8 pontos para organizar os conteúdos na interface, o que garantiu mais flexibilidade e responsividade no layout.
Cores
Escolhemos o azul como nossa cor primária por ela representar o universo do Transtorno do Espectro Autista (TEA) e também simbolizar o mar, habitat da mascote do aplicativo: a baleia Jub.
Além disso, a cor azul representa paz, calma, estabilidade, segurança e ordem na teoria da cores, adjetivos que condizem com o objetivo do projeto.
A cor secundária, o verde, foi pensada dentro da paleta de cores da vegetação do fundo do mar e traz uma tonalidade complementar ao azul.
Já as cores de apoio foram projetadas para trazerem a leveza e diversão da infância para a aplicação, tornando os elementos mais adequados para seu público.
As variações de tonalidades (light, dark) foram feitas através do site Eva Design System com pequenos ajustes para garantir que a harmonia entre os tons fosse adequada para a interface.
Ícones
Assim como o grid, a maioria dos ícones foram baseados no Material Design, trazendo mais familiaridade para as pessoas usuárias. De forma geral, os ícones foram utilizados como um complemento nas ações executadas pelos botões.
Tipografia
Para garantir mais flexibilidade de uso em diferentes cenários, escolhemos a fonte Montserrat que possui uma vasta família tipográfica e boa legibilidade no meio digital.
Formulários
Os formulários são componentes importantes em toda a interface, já que são através deles que o perfil de administrador adiciona as crianças, tarefas, prêmios e configura a rotina da criança no aplicativo.
O grande diferencial dos componentes dos inputs da aplicação são que eles possuem elementos e brilhos que remetem ao universo infantil e de jogos digitais, seguindo toda a identidade visual do projeto.
Componentização formulário
Pensando no seu uso dentro da aplicação, fizemos uma componentização mais avançada para o elemento de input garantindo assim que ele se adequaria a todos os cenários imaginados e futuros.
Componentes
Assim como os formulários, outros componentes como os cards e avatares seguem a mesma linha de identidade visual, respeitando as bordas, cores e brilhos do restante da interface.
Cards
Para a construção dos cards, utilizamos autolayout para que os elementos internos ficassem mais organizados.
Botões
Decidimos utilizar botões com cantos arredondados. Essa escolha tem o objetivo de conferir um visual mais leve e infantil ao layout.
Também desenvolvemos botões com diferentes estilos, alguns preenchidos e outros contornados, destinados a serem usados em ações secundárias. Tomamos especial atenção à questão do contraste, assegurando que esses botões se destaquem claramente em relação ao fundo em que são inseridos.
Componentização botão
Assim como o input, optamos por fazer uma componentização mais avançada no botão para tornar sua aplicação na interface mais flexível.
Filtros
Na tentativa simplificar a navegação e tornar a experiência do usuário mais intuitiva, criamos filtros que permitem a personalização da exibição do conteúdo conforme suas necessidades ou preferências.
Modais
Para evitar sobrecarregar a interface principal e direcionar a atenção do usuário para tarefas específicas, optamos por incorporar modais em formatos atraentes, aderentes à estética visual do aplicativo.
Protótipo navegável
Você pode conferir o protótipo navegável do App Jub no figma.
Considerações finais
Em nosso projeto, priorizamos a acessibilidade e facilidade de uso do aplicativo, pensando especialmente as crianças com autismo.
Criamos uma interface amigável e acolhedora através do uso de grid, cores e elementos interativos que proporcionam uma experiência intuitiva para as crianças e seus responsáveis.
Enfrentamos alguns desafios ao longo do caminho, mas aprendemos muito e estamos confiantes de que nosso aplicativo JUB será valioso para a comunidade autista.
