Disclaimer

Informações acerca da marca e dados originais do projeto foram devidamente alterados ou removidos por questões de privacidade.  

‍

Resumo

Um grupo educacional lançou um aplicativo para Android, cuja interface foi implementada utilizando um kit padrão da Google, Material Design. Com o app já disponível na loja de aplicativo, a empresa gostaria de aplicar uma nova interface visual que combine com o branding da marca. 

‍

Assim, em um primeiro momento foi disponibilizado um questionário para a base de usuários da empresa com o intuito de compreender a opinião das pessoas acerca da agradabilidade visual atual do aplicativo. O resultado mostrou uma indiferença em relação ao aspecto visual. 

‍

Após as modificações técnicas e visuais, um novo questionário para a base de dados foi disponibilizado e resultou em uma melhora significativa na opinião dos usuários. Assim, além da aplicação da nova identidade visual e de correções técnicas na UI seguindo as diretrizes da Material Design da Google, o Design System foi atualizado com a documentação, componentes, e melhores práticas a serem seguidas por todos os departamentos da empresa.

‍

Estrutura do Artigo

‍

Identidade Visual & User Interface (UI)

• Contextualização
• Objetivo Geral
• Objetivos Específicos

Introdução

• Site Map
• User Flow
• User Interface (UI) - Antes
• Escala de Avaliação
• Escala Diferencial Semântica de Osgood
• Resultado da Escala de Avaliação - Antes
• User Interface (UI) - Depois
• Paleta de Cores
• Correções Técnicas
• Design System
• Resultado da Escala de Avaliação - Depois
• Resultado da Escala de Avaliação - Antes e Depois
• Avaliação Contínua
• Iteração #1 - Visibilidade do Sistema Comprometida
• Iteração #2 - Acessibilidade Aprimorada

Conclusão

‍

Identidade Visual & User Interface (UI)

‍

Contextualização

Um grupo educacional recentemente lançou um aplicativo para o sistema operacional Android. Em um primeiro momento, as funcionalidades principais foram implementadas para que os alunos pudessem começar a utilizá-lo o quanto antes. 

Assim, o aplicativo foi desenvolvido utilizando como base o visual padrão do Android disponibilizado por meio de um kit de Interface do Usuário (UI) no aplicativo Figma. 

‍

Objetivo Geral

Após o aplicativo ser disponibilizado na Google Play, uma de suas prioridades nas sprints subsequentes se trata de lançar uma identidade visual e UI que remeta à imagem moderna e jovial que a marca busca transmitir.

‍

Para isso, foi acordado que a cor principal da marca deve ser utilizada no aplicativo. Adicionalmente, foi concedida a liberdade de criar tonalidades na criação da paleta de cores.

‍

Objetivos Específicos

• Aprimorar a UI do App de acordo com as diretrizes da Google por meio da Material Design
• Aplicar a identidade visual da marca no aplicativo
• Elaborar diretrizes e padrões de utilização dos componentes para o Design System do aplicativo

‍

Introdução

‍

Site Map

Para fins de demonstração, exibirei apenas as páginas referente à jornada do aluno para assistir a aula de uma determinada disciplina. Assim, o Site Map em questão seria:

Página Inicial > Aulas > Aula, conforme Imagem 1.

‍

User Flow

O User Flow (Fluxo do Usuário), exemplificado neste estudo de caso pode ser visualizado conforme Imagem 2.

‍

User Interface (UI) - Antes

A Imagem 3 apresenta a Interface do Usuário (UI) antes das modificações propostas: 

‍

Escala de Avaliação

Por se tratar de um redesign, muitas empresas levariam em consideração apenas o “know-how” do time responsável pela UI do aplicativo. No entanto, solicitei ao Product Owner (P.O.) a possibilidade de utilizar um questionário com o intuitor de mensurar a satisfação dos usuários com a interface atual e futura.

Assim, a Escala Diferencial Semântica de Osgood foi utilizada.

‍

Escala Diferencial Semântica de Osgood

A Escala Diferencial Semântica de Osgood envolve a prática de apresentar pares de adjetivos antagônicos posicionados em cada extremidade de uma escala (Albert e Tullis, 2013). Como exemplo, os seguintes adjetivos poderiam ser utilizados em conjunto com uma escala de 7 níveis.

‍

Resultado da Escala de Avaliação — Antes

A escala de avaliação de Osgood foi elaborada com o intuito de mensurar apenas a opinião dos usuários acerca da UI do aplicativo. Por isso, adjetivos antagônicos foram elaborados considerando este objetivo principal.

‍

Assim, conforme Gráfico 1, é possível visualizar uma frequência maior de votos na parte mediana da escala, podendo sinalizar uma indiferença dos usuários em relação ao visual atual do aplicativo. 

‍

User Interface (UI) - Depois

Utilizando a cor principal da marca como base para a elaboração da identidade visual do aplicativo, foram criadas tonalidades complementares. Com isso, foi possível combinar diferentes cores que resultaram em diferentes degradês na Interface de Usuário conforme Imagem 5.

‍

Paleta de Cores

Seguindo as melhores práticas do Material Design para designar uma paleta de cores, a Imagem 6 exibe a cor principal da marca assim como variações de tonalidade.

‍

Correções Técnicas

Utilizando como base as diretrizes e recomendações para o desenvolvimento de um aplicativo mobile que consta no Material Design da Google, algumas correções foram feitas na UI do aplicativo, tais como:

‍

• Área de toque mínima recomendada: a área mínima de toque recomendada para uma boa navegação por parte dos usuários é de 48 x 48dp. Ou seja, por mais que o ícone seja menor, conforme Imagem 7, que possui o tamanho de 24 x 24dp, a margem interna (ou padding) deve ser de 48dp, propiciando uma área de toque confortável para a maioria das pessoas.

‍

• Padding entre elementos: o espaçamento (ou padding), entre elementos é adicionado em incrementos de 8 ou 4dp. Por isso, diferentes espaçamentos devem ser utilizado de acordo com o contexto de uso. Considerando a Imagem 8, a distância entre o menu superior do aplicativo e o grupo de menu exibido na parte inferior da tela, é de 32dp. Enquanto o padding interna entre os elementos do grupo, conforme Imagem 9, é de 24dp. Proporcionando, assim, harmonia e consistência na interface do app. Logo, além das diretrizes de espaçamento proporcionada pela Google, conhecimentos externos do design, como Princípios da Gestalt, devem ser aplicados. Neste caso em específico, utiliza-se fortemente o Princípio de agrupamento.

‍

‍

‍

Gestalt: Princípio do Agrupamento:
‍O agrupamento visual em clusters semânticos significativos permite que os leitores tenham uma noção da estrutura geral (Tullis, 1997) e pode ajudar os leitores a reduzir suas cargas cognitivas (Niemela e Saarinen, 2000). Os leitores se lembrarão melhor do conteúdo e cometerão menos erros.

(Black et al,. 2017, p. 433)

‍

• Espaço de margem esquerda e direita: Para telas com largura menor que 600dp, chamadas de “compacta” conforme as diretrizes da Material Design, as margens esquerda e direita na borda são de 16dp. Exemplificado pela Imagem 10, a correção foi feita e padronizada em todas as telas do aplicativo.

‍

‍

Design System

Todos os componentes, cores, padrões e diretrizes implementados na nova versão do aplicativo foram adequadamente documentados no Design System da empresa, conforme apresentado na Imagem 11.

‍

Essa abordagem não apenas aprimora a eficiência da equipe de tecnologia, que poderá consultar a documentação para resolver dúvidas técnicas durante o desenvolvimento do aplicativo, mas também beneficia toda a equipe de design ao proporcionar consistência por meio do uso de padrões internos. Além disso, a equipe de design pode modificar e aprimorar esses padrões conforme necessário.

‍

‍

Resultado da Escala de Avaliação — Depois

Após a aplicação da nova identidade visual no aplicativo, foi realizada uma nova rodada de questionários utilizando a Escala Diferencial Semântica de Osgood com o objetivo de mensurar o impacto da nova versão junto aos usuários. 

‍

Conforme Gráfico 2, a frequência de votos foi intensificada na extremidade direita do histograma, demonstrando uma diferença significativa para melhor em relação à agradabilidade visual do aplicativo na opinião dos usuários.

‍

Resultado da Escala de Avaliação — Antes e Depois

Ao comparar os resultados dos votos dos usuários através da Escala Diferencial de Osgood, conforme apresentado no Gráfico 3, é possível perceber que a frequência de votos, anteriormente com forte presença no centro do gráfico, agora ocupa a extremidade direita. Isso indica uma aceitação significativa por parte das pessoas em relação ao novo visual implementado.

‍

Avaliação Contínua

Após a implementação da nova identidade visual e a boa aceitação pelos usuários, comprovada por meio do questionário de satisfação, é necessário monitorar constantemente o aplicativo. 

‍

Isso pode ser feito por meio de feedback, avaliações na loja de aplicativos e testes de usabilidade moderados e não moderados, por exemplo. 

‍

Dessa maneira, é possível identificar eventuais problemas e efetuar correções, bem como realizar modificações em futuras iterações, sempre tendo em mente que o usuário é o principal fator de decisão.

‍

Iteração #1 – Visibilidade do Sistema Comprometida

Por conta de um detalhe percebido durante um teste de usabilidade moderado, no qual o usuário clicou em uma das abas do menu de navegação na qual já se encontrava, foi possível constatar que o símbolo de ativo atualmente exibido pode não estar tão destacado quanto deveria, conforme mostrado na Imagem 12.

‍

Assim, além da barra horizontal inferior exibida quando uma determinada aba está ativa, a nova versão conta com uma variação da paleta de cores da UI como plano de fundo. Isso proporciona uma ênfase mais elevada na aba ativa do menu, conforme Imagem 13. 

‍

Iteração #2 – Acessibilidade Aprimorada

‍

Contextualização:

Por meio de uma Avaliação Heurística, utilizando uma das personas principais do aplicativo educacional como base, ou seja, características de uma ampla base de usuários da empresa que compreendem um perfil em comum, que se trata de uma pessoa cuja habilidade com a tecnologia é considerada mais básica, podendo se confundir com os conceitos que usuários mais acostumados não teriam problema em distinguir, foi possível identificar um cenário que eventuais dúvidas poderiam ocorrer.

‍

Cenário:

Assim, por mais que na primeira utilização do aplicativo os usuários sejam guiados por meio de tooltips para se familiarizarem com a interface e as funcionalidades do aplicativo, pode ocorrer de a pessoa optar por pular o tutorial. 

‍

Consequência:

A semântica dos ícones dispostos na barra de navegação pode não ficar devidamente clara. 

‍

Solução:

Foram adicionados rótulos (ou labels). Adicionalmente, a anatomia do botão foi aprimorada para estar em conformidade com a versão mais atualizada das diretrizes da Google, a Material Design 3. 

‍

Agora, foi acrescentado um indicador de aba ativa ao redor do ícone e o tamanho do menu foi aumentado, respeitando o espaço interno entre os elementos, conforme mostrado na Imagem 14.

‍

Conclusão

Apesar da conclusão do artigo, o ciclo de design é iterativo. Com isso, correções, modificações e funcionalidades são continuamente implementadas. 

‍

Logo, o estudo de caso presente objetivou expor o processo que ocorre na mudança no visual de uma Interface de Usuário (UI) de um aplicativo. 

‍

Considerando o contexto da empresa que atua no setor de educação, foi possível implementar as cores da marca no aplicativo, aprimorar a UI seguindo as diretrizes e boas práticas da Google por meio da documentação do Material Design e elaborar a própria documentação da marca em seu Design System.

‍

O mais importante, no entanto, é propiciar eficiência, eficácia e satisfação para as pessoas. Por isso, priorizou-se a opinião das pessoas da base de dados da empresa antes, durante e depois das modificações. Por meio de um questionário, foi possível mensurar a opinião acerca da agradabilidade visual do aplicativo, e o resultado foi positivo. 

‍

Assim, com todas as decisões de design devidamente fundamentadas no processo, a nova UI do aplicativo provou ser relevante para quem realmente importa: os usuários. 

‍

‍

‍

Obrigado pela leitura!

‍

Sugestões, críticas ou elogios por favor entre em contato via e-mail ou LinkedIn.

‍