top of page

Words of Wonders

UI/UX Design

Desafio

Melhorar a experiência do usuário e a usabilidade do jogo por meio de uma interface mais intuitiva e atrativa.

Objetivo

Identificar quaisquer problemas ou áreas de melhoria na interface atual do jogo, como navegação difícil, desordem visual, falta de feedback, etc.

31 (2).png

Análise do jogo

Etapa 01

  • ​Controle: O jogo está no modo vertical, permitindo que o usuário segure o celular e jogue com apenas uma mão. O menu do usuário fica concentrado na parte inferior da tela, mas as configurações e os botões para fechar os modos ficam na parte superior, impossibilitando tocar no aparelho com apenas uma mão.

  • Simplicidade e consistência: O jogo tem uma interface confusa, com botões e elementos gráficos apresentando estilos distintos, como ícones básicos ou aparência tridimensional; botões sem bordas com sombras ao lado de botões com bordas e transparentes, bem como uma paleta de cores indefinida.

  • Experiência: O jogo apresenta uma identidade visual simples, além de botões e mecânicas semelhantes a outros jogos.

  • Erros: O jogo fornece feedback claro para interações de erro; no entanto, algumas funções desabilitadas não têm feedback.

  • Cuidado: Os recursos são bem explicados para novos usuários, e novos recursos são introduzidos de acordo com a curva de aprendizado.

31 (3).png

Análise de Concorrência

Etapa 02

  • Menus e Navegação: A organização dos menus e a facilidade de navegação entre as diferentes telas do jogo

  • Controles: Os controles do jogo são intuitivos e responsivos, especialmente em dispositivos com tela sensível ao toque.

  • Feedback Visual e Sonoro: Fornecem feedback claro sobre as ações do jogador e o estado do jogo

  • Ícones e Botões: Eles são facilmente reconhecíveis e acionáveis

  • Tamanho e Espaçamento: Eles proporcionam uma experiência confortável em telas, especialmente em diferentes tamanhos e resoluções.

31.png

Userflow

Etapa 03

Depois mapeei os fluxos do usuário e todas as telas possíveis no jogo.

111.png

Sketches

Etapa 04

Com todas as telas mapeadas, criei rascunhos de possíveis soluções para algumas telas principais.

112 (1).png

Wireframes e Estudos

Etapa 05

Nessa etapa comecei os wireframes e alguns estudos de possíveis UIs para o jogo.

113 (1).png

Telas finais

Entrega

A partir dos estudos, foi definido um visual a seguir focando sempre nos pontos de melhoria levantados durante a pesquisa.

112 (2).png
61-(1).png

Vamos trabalhar juntos?

oibabiasi@gmail.com

bottom of page