O Show da Programação do Curso.Dev, trás alguns desafios e oportunidades de melhoria de Design.
ATT: É Apenas um caso de estudo, estou ciente que o ojetivo é manter a ideia do programa original
Sou inscrito do canal do Filipe Deschamps há alguns anos e estou sempre atento a qualquer novidade. Mesmo não sendo programador (sou de UX), aprendo muita coisa sobre carreira e tecnologia com os conteúdos dele.
Como bom inscrito e fã do trabalho do Filipe, assim que ele lançou o vídeo apresentando o Show da Programação, corri para jogar. Mas enquanto me divertia, comecei a sentir alguns desafios de UX e Design. Em alguns momentos, o próprio design me conduzia a uma certa ansiedade, especialmente pela expectativa criada em torno da meta de alcançar 1 milhão de pontos — que é justamente o objetivo principal do Show.
Com base nessa experiência, comecei a refletir e decidi fazer um redesign apenas como estudo. Além da parte visual (UI), meu foco estava no gerenciamento de expectativas, já que a interface é o que deveria guiar tudo que o usuário precisa saber.
O meu redesign se baseou nos pontos principais abaixo, tendo como referência as heurísticas de usabilidade de Nielsen.
Quando acessei o site e vi a frase: “Você consegue chegar ao 1 milhão sem trapacear?”, pensei: “Xé, um milhão de pontos é muita coisa”. Naturalmente, imaginei que a interface me guiaria sobre quantos níveis ou etapas eu precisaria passar até alcançar essa meta. Mas, ao iniciar o jogo, só encontrei uma área de controlo com as opções Pular, Cartas e Fechar, além da indicação de quantos pontos eu ganharia por acerto.
O problema é que eu não tinha visibilidade clara dos meus pontos acumulados enquanto avançava. Só sabia o quanto podia ganhar — não o quanto já tinha, nem o quanto faltava. Mesmo sendo positivo que o Show salve o progresso no navegador, depender apenas dessa informação gerava confusão e aumentava a frustração na minha experiência pessoal, e claro, na minha área tudo é uma hipótese até que testemos com os usuários kkk.
Como resolvi:
Como a meta é de 1 milhão de pontos, faria sentido dividir essa jornada em níveis/estágios, agrupando perguntas. Exemplo: para chegar a 1M, o usuário precisa passar por 10 níveis, cada um com uma quantidade específica de questões.
Como o navegador guarda o progresso, faz todo sentido ter um estado global visível, mostrando quantos pontos o usuário já acumulou e quanto falta para o objetivo.
Separar a pontuação global da pontuação de cada nível ajuda muito no gerenciamento de expectativas.
Notei também desafios de hierarquia visual, o container das perguntas tinha cores intrusivas. A pergunta que deveria ser o elemento de maior foco — competia visualmente com os containeirs das respostas. Isso prejudicava a clareza e a visibilidade do estado do sistema.
No fim, a intenção foi garantir que o usuário tivesse feedback claro, entendesse o que esperar e soubesse como se orientar ao longo de todo o Show.
Do jeito que está hoje, o jogador precisa lembrar sozinho como o jogo avança, quanto falta para atingir o objetivo e como cada ação funciona. Isso aumenta a carga cognitiva e até a ansiedade justamente o oposto do que se deseja numa experiência gamificada.
Soluções aplicadas:
Progresso sempre visível.
Pontuação global e pontuação por nível separadas e fáceis de entender.
Menos dependência da memória e mais apoio visual constante.
2. Questões Visuais
O design atual usa: Cores muito saturadas competindo entre si (vermelho muito intenso + azul vivo).
Botões com destaque exagerado, tirando o foco da pergunta — que deveria ser o centro da experiência.
Pouco “respiro” entre os elementos, gerando muito peso visual num único bloco.
Diferentes estilos de textos, botões, cores e elementos, criando ruído visual.
3. Área de Controlo (Pular / Cartas / Fechar)
Essa foi uma parte especialmente interessante de analisar. As ações Pular e Cartas são funções ligadas às perguntas. Já o botão Fechar tem um significado totalmente diferente e até meio “destrutivo”. Colocar tudo no mesmo nível hierárquico torna a experiência confusa e arriscada.
Além disso, o botão Fechar não tem confirmação. Clicar nele pode parecer perigoso e quebra o fluxo.
Para resolver, separei o Fechar das demais ações e o coloquei em um local mais neutro e padrão, onde seu peso visual não compete. Já Pular e Cartas conectei diretamente à área das perguntas, elevando sua hierarquia de acordo com a função real delas.
Foi um estudo muito divertido e útil para treinar Design. A minha ideia é simplesmente contribuir, de alguma forma, para o sonho e o projeto de alguém que tem feito tanto pelas comunidades de TI e que influencia muita gente, inclusive aqui em Angola.
Ainda há outros pontos de design que identifiquei, mas deixei aqui só um resumo. Estou a gravar um vídeo para o meu canal do YouTube explicando esse exercício. Espero de coração que o Filipe veja também, e se algum dia surgir uma oportunidade de contribuir oficialmente com o projeto, seria uma grande honra.
Obrigado! Vou deixar o link do estudo aqui nos comentários para quem quiser ajudar a melhorar.
Draft: https://www.figma.com/design/0LqW42owp6YAlejGFPJKS7/SP?node-id=0-1&p=f&t=JSjMQBvTAqZVs67u-0
Qualquer dúvida, pode me chamar no insta @waltdejesus ou em qualquer rede social.
