Entendimento do problema
Neste estudo de caso usaremos uma aplicação real QuickCondo, aplicativo mobile que tem como objetivo auxiliar as atividades de um condomínio, atendendo moradores, portaria e síndico a tomar decisões que são relevantes para o bem-estar e convivência de todos em um ambiente compartilhado.
Este aplicativo foi escolhido por motivos de conter alguns problemas de estética e usabilidade, necessitava de uma melhoria. Por falta de recursos de investimento na pesquisa, as entrevistas com os usuários foram realizadas com o público de computação com faixa etária de 20 a 31 anos.
Interface antiga
A seguir, são apresentadas as funcionalidades do aplicativo QuickCondo, contemplando o fluxo de Liberação de Visitantes e o processo de Registro de Ocorrências, aplicação foi desenvolvida utilizando o framework React.
Inspeção heurística
Foi realizada uma inspeção heurística com base nos 10 princípios de usabilidade de Jakob Nielsen, com o objetivo de identificar oportunidades de melhoria na interface e propor soluções que promovam uma experiência de uso mais intuitiva, eficiente e alinhada às boas práticas de usabilidade.
Inspeção Heurística – Tela 1: Liberação de Visitantes
Fluxo analisado: Menu → Liberação de Visitantes → Formulário de Cadastro.
| Heurística de Nielsen | Avaliação | Severidade |
|---|---|---|
| 1. Visibilidade do status do sistema | O menu evidencia a funcionalidade selecionada (“Liberação de Visitantes”), porém não existem indicadores de carregamento, confirmação de envio ou mensagens de sucesso/erro após o cadastro. | 3 |
| 2. Correspondência entre o sistema e o mundo real | Os termos “Visitantes”, “Prestadores” e “Entregas” correspondem ao contexto de um condomínio, facilitando a compreensão. | 1 |
| 3. Controle e liberdade do usuário | Há botão para retornar à tela anterior, porém não existe opção visível para cancelar, limpar ou editar uma liberação antes da confirmação. | 2 |
| 4. Consistência e padronização | A navegação, tipografia, ícones e cores seguem um padrão consistente entre todas as telas da funcionalidade. | 1 |
| 5. Prevenção de erros | Os campos obrigatórios possuem indicação (*), porém não há validação em tempo real, máscaras para data ou mensagens preventivas antes do envio. | 3 |
| 6. Reconhecimento em vez de memorização | O menu permanece organizado e os ícones auxiliam o reconhecimento das funcionalidades. Entretanto, o usuário precisa lembrar quais informações devem ser preenchidas, pois não há exemplos nos campos. | 2 |
| 7. Flexibilidade e eficiência de uso | Não existem atalhos, preenchimento automático, cadastro de visitantes recorrentes ou reaproveitamento de informações anteriores. | 2 |
| 8. Estética e design minimalista | Interface limpa, organizada e com poucos elementos visuais. Entretanto, alguns textos apresentam contraste reduzido e tamanho pequeno. | 1 |
| 9. Ajudar usuários a reconhecer, diagnosticar e recuperar erros | Não há mensagens de erro específicas nem indicação visual de campos inválidos após uma tentativa de envio incorreta. | 3 |
| 10. Ajuda e documentação | Não existe acesso à ajuda, tutorial ou documentação da funcionalidade. | 4 |
Tabela 1 – Tela Liberação de visitante.
Inspeção Heurística – Tela 2: Reportar Ocorrência
Fluxo analisado: Menu → Reportar Ocorrência → Cadastro de Ocorrência.
| 1. Visibilidade do status do sistema | A funcionalidade selecionada fica destacada no menu. Entretanto, não existem indicadores de envio de imagem, progresso do upload ou confirmação após registrar a ocorrência. | 3 |
| 2. Correspondência entre o sistema e o mundo real | Os campos “Assunto” e “Foto” utilizam terminologia familiar ao usuário e condizente com o processo de registrar uma ocorrência. | 1 |
| 3. Controle e liberdade do usuário | Não há botões visíveis para cancelar, excluir imagem ou reiniciar o formulário antes do envio. | 2 |
| 4. Consistência e padronização | O padrão visual permanece consistente com o restante da aplicação, utilizando os mesmos componentes e identidade visual. | 1 |
| 5. Prevenção de erros | Não existem orientações sobre formatos aceitos para imagens, tamanho máximo ou preenchimento obrigatório do formulário. | 3 |
| 6. Reconhecimento em vez de memorização | Os campos são simples e objetivos. Contudo, o sistema não fornece exemplos de assuntos ou sugestões para facilitar o preenchimento. | 2 |
| 7. Flexibilidade e eficiência de uso | Não há recursos como anexar múltiplas imagens, selecionar ocorrências frequentes ou salvar rascunhos. | 2 |
| 8. Estética e design minimalista | O formulário apresenta organização simples e poucos elementos, favorecendo a leitura. Entretanto, existe muito espaço vazio na área destinada à imagem. | 1 |
| 9. Ajudar usuários a reconhecer, diagnosticar e recuperar erros | A interface não informa falhas de upload, tamanho incompatível da imagem ou ausência de campos obrigatórios. | 3 |
| 10. Ajuda e documentação | Não há instruções sobre como registrar corretamente uma ocorrência ou quais informações devem ser fornecidas. | 4 |
Tabela 2 – Tela Reportar ocorrência.
Além de hoje identificar ainda mais problemas heurísticos, foi realizado um survey por meio de um questionário contendo perguntas destinadas a avaliar a percepção, a compreensão e a experiência do usuário em relação à aplicação.
Link Google Sheets: (por questão de ética não vai ser exibido os nomes)
Redesign da interface – Avaliação dos elementos de UI Design
Redesign da interface de Liberação de Visitante do aplicativo QuickCondo
Tipografia
- Utilização de fonte sem serifa, adequada para interfaces móveis, proporcionando boa legibilidade.
- Aplicação de diferentes pesos tipográficos (regular e bold) para estabelecer hierarquia entre títulos, subtítulos, descrições e elementos auxiliares.
- Organização textual consistente entre as telas, mantendo padronização dos estilos tipográficos.
- Boa distribuição dos textos em cabeçalhos, cartões, formulários e mensagens de feedback.
Paleta de Cores
- Predominância dos tons de azul como cor institucional, transmitindo confiança, estabilidade e profissionalismo.
- Utilização do branco como cor de fundo, favorecendo a limpeza visual da interface.
- Emprego de tons de cinza para informações secundárias, mantendo equilíbrio visual.
- Consistência na aplicação das cores em botões, ícones, cabeçalhos e elementos interativos ao longo de todas as telas.
Hierarquia Visual
- Organização dos elementos seguindo uma sequência lógica de leitura.
- Destaque para títulos, ações principais e componentes de interação.
- Distribuição dos componentes facilita a identificação das funcionalidades mais importantes.
- Fluxo visual conduz naturalmente o usuário desde o cabeçalho até a ação principal da interface.
Princípios da Gestalt
- Proximidade: componentes relacionados encontram-se agrupados em cartões e seções, facilitando a compreensão das funcionalidades.
- Similaridade: repetição de cores, formas, tipografia e componentes cria uniformidade visual entre as telas.
- Continuidade: alinhamento vertical conduz o olhar do usuário durante o fluxo de navegação e preenchimento dos formulários.
- Figura-fundo: contraste entre fundo e componentes destaca cartões, botões, formulários e o modal de confirmação.
- Pregnância (Boa Forma): utilização de formas simples e organizadas, permitindo rápida interpretação da interface.
Consistência Visual
- Padronização dos componentes gráficos em todas as telas.
- Reutilização dos mesmos estilos de botões, ícones, cartões e campos de formulário.
- Uniformidade no espaçamento, alinhamento e dimensões dos componentes.
- Manutenção da identidade visual durante todo o fluxo da aplicação.
Alinhamento e Grid
- Organização baseada em alinhamento vertical dos elementos múltiplos de 2x.
- Distribuição uniforme dos componentes ao longo da interface.
- Espaçamentos consistentes entre títulos, cartões, formulários e botões.
- Estrutura visual organizada, favorecendo a leitura e a navegação.
Espaçamento (Whitespace)
- Utilização adequada de espaços em branco para separar grupos de informações.
- Redução da sobrecarga visual por meio da distribuição equilibrada dos componentes.
- Melhor delimitação entre seções da interface.
Iconografia
- Emprego de ícones vetoriais simples e facilmente reconhecíveis.
- Associação dos ícones às funcionalidades principais da aplicação.
- Consistência no estilo visual e nas cores utilizadas.
- Os ícones complementam as informações textuais, contribuindo para o reconhecimento das ações.
Feedback Visual
- Indicação do progresso no envio de arquivos.
- Exibição de modal de confirmação após o registro da ocorrência.
- Destaque visual para a ação principal por meio do botão “Registrar”.
- Utilização de elementos visuais que comunicam o estado da interação ao usuário.
Teste de usabilidade
O Heatmap é utilizado para compreender como os usuários interagem com uma interface, permitindo validar decisões de design e identificar oportunidades de melhoria, observe abaixo comportamento.
Mouse tracking é um movimento do mouse apresenta forte correlação com o direcionamento do olhar. Dessa forma, o heatmap do mouse permite identificar as áreas da interface que mais atraem a atenção dos usuários abaixo.
