UX/UI Designer
Projeto pessoal, 2024
Ajudando designers a projetarem produtos digitais mais acessíveis através de uma avaliação dos componentes da interface
RESPONSABILIDADES:
-
Pesquisa
-
Construção de persona e mapa de empatia
-
Definição de funcionalidades
-
Prototipação
-
Teste de usabilidade
TIME:
-
Projeto pessoal realizado individualmente
DURAÇÃO
-
4 meses
INTRODUÇÃO
O site Nebula foi o resultado do meu Projeto de Conclusão de Curso (TCC) na graduação de Design na Universidade Federal de Pernambuco (UFPE). O objetivo do projeto foi realizar uma pesquisa sobre acessibilidade digital, entender quais são os maiores obstáculos para a criação de produtos digitais acessíveis e encontrar formas de amenizar as barreiras de acesso através das pessoas responsáveis por projetá-los.
PROCESSO
Para o projeto, foi utilizada a metodologia Challenge Based Learning (CBL), que é composta por 3 etapas principais: Engage, Investigate e Act.
ENGAGE
-
Engajamento e pesquisa sobre acessibilidade digital
INVESTIGATE
-
Desk Research
-
Survey
-
Criação de persona
-
Mapa de Empatia
-
Análise de Similares
ACT
-
Ideação
-
Matriz MoSCoW
-
Solution Concept
-
Prototipação
-
Testes de usabilidade
PESQUISA
SURVEY
Como designers e desenvolvedores de produtos digitais se comportam em relação a acessibilidade digital e a aplicação de cores em seus projetos?
De 1 a 5, o quanto você se identifica com a frase "Sinto dificuldade na hora que aplicar conceitos de acessibilidade digital em meus projetos. "
1
2
3
Pouca dificuldade
4
5
Muita dificuldade
Existem outras ferramentas ou guias que você utiliza para aplicar acessibilidade digital em seus projetos? Se sim, quais?
Teste de contraste do Adobe Color, HIG, GAIA, Guia WCAG, plugins do Figma, entre outros
Para você, qual é o maior obstáculo na hora de projetar um produto digital acessível?
O conhecimento técnico necessário
Falta de autonomia nas decisões do projeto
Falta de tempo
Você tem interesse em aprender mais sobre acessibilidade digital?
Sim
Não
Entre outras questões...
O que você considera como um produto digital acessível?
"Um produto que foi desenvolvido pensando em diferentes tipos de usuários e com recursos tecnológicos para ajudar em necessidades específicas."
- Resposta obtida na pesquisa
DESCOBERTAS
-
Apenas 0,46% dos sites brasileiros foram considerados acessíveis em 2022
-
Pela agilidade requerida pelo mercado, muitos designers não priorizam a acessibilidade como peça fundamental no processo de design
-
O maior documento guia para acessibilidade digital, o Web Content Accessibility Guidelines (WCAG), é denso, com leitura cansativa e poucos exemplos visuais
-
A Survey mostra que o maior obstáculo para aplicação de conceitos de acessibilidade em projetos é a falta de conhecimento técnico necessário por designers e desenvolvedores de produtos digitais
SOLUÇÃO
Criação de um site com checklists interativos de acessibilidade, biblioteca de componentes com filtros de baixa visão/daltonismo, além de uma página dedicada a recursos sobre o tema
O objetivo é simplificar o entendimento de conceitos e requisitos que frequentemente apresentam desafios de compreensão e aplicação
PERSONA E MAPA DE EMPATIA
Marina Ribeiro | 27 anos | Product Designer
Necessidades
-
Acessar recursos sobre acessibilidade digital de fácil entendimento
-
Encontrar ferramentas ou pessoas que possam avaliar a acessibilidade dos seus projetos e ajudá-la
-
Criar conexões com outros designers e profissionais com interesse semelhante
Frustrações
-
Sente dificuldade em aplicar cores em seus projetos, principalmente quando precisar criar a paleta para o dark mode
-
Tem dificuldade na hora que aplicar conceitos de acessibilidade pela falta de conhecimento técnico necessário
-
Sente que não tem autonomia nas decisões do projeto e isso torna-se um obstáculo na hora de pensar em acessibilidade
-
Os guias e diretrizes não tem muitos exemplos visuais ou são muito densos para leitura
MID-FI E TESTE DE USABILIDADE
Após a etapa de definição e ideação inicial, foi criado um protótipo de média fidelidade para testar a usabilidade do produto, processo que se repetiu após a finalização do hi-fi. O objetivo dos testes foi entender se a ideia estava alinhada com as necessidades dos usuários, avaliar a facilidade de navegação entre as páginas e identificar problemas de design
Algumas descobertas foram essenciais para fazer ajustes e dar início ao hi-hi:
O excesso de elementos na página do checklist estava dificultando a compreensão dos usuários, tornando a navegação mais lenta e menos intuitiva
Os usuários acharam que alguns elementos eram interativos quando não eram
Os usuários mostraram dificuldades para navegar entre páginas, o que poderia ser facilitado pelo uso de uma sidebar
UI DESIGN
Página Inicial
-
Sidebar para facilitar navegação
-
Botão para acessar o checklist (funcionalidade principal)
-
Acesso aos recursos de acessibilidade
-
Possibilidade de enviar mensagem/entrar em contato
Checklist de Acessibilidade
-
Acesso aos componentes pela sidebar
-
Diferentes opções de visualização do componente (filtros de daltonismo e baixa visão)
-
Checklist que mostra o progresso de acordo com quantos checkboxes o usuário marcar
-
Cada componente recebe uma página própria (para diminuir carga cognitiva)
Página de Recursos
-
Possibilidade de filtragem do conteúdo através de abas
-
Publicações, ferramentas, guias e pessoas relacionadas a acessibilidade digital
-
Barra de pesquisa
Todo o site foi pensado para funcionar em darkmode
