Escolha os seus Pokemóns para combate, filtrando por tipo e fraqueza.

Status do Projeto: Concluído

Deploy: Site OnPokemon

---

ÍNDICE

• 1. PRODUTO
  • 1.1. Pokémon
  • 1.2. Histórias de Usuários
  • 1.3. OnPokemon
• 2. PROTÓTIPOS
  • 2.1. Protótipo de Baixa Fidelidade
  • 2.2. UX (Experiência do Usuário) e UI (Design de Interface)
• 2.3 Protótipos de Alta Fidelidade
  • 2.3.1 Smartphone na Posição Vertical
  • 2.3.2 Smartphones na Posição Horizontal
  • 2.3.3 Tablet na Posição Vertical
  • 2.3.4. Table na Posição Horizontal
  • 2.3.5. Desktop
• 3. TESTE DE USABILIDADE
• 4. FEEDBACK DA LABORATORIA
• 5. FERRAMENTAS UTILIZADAS
• 6. CHECKLIST
• 7. AUTORAS

---

1. PRODUTO

1.1. Pokémon

Pokémons são criaturas de todas as formas e tamanhos que podem ser selvagens ou então aparecer ao lado de seus parceiros treinadores. Durante suas aventuras, os Pokémons crescem e se tornam mais experientes e evoluem para se tornarem Pokémons ainda mais fortes. Centenas de Pokémon conhecidos habitam o universo Pokémons, com números incontáveis esperando para serem descobertos!

Há 18 tipos diferentes de Pokémons e cada um pode ter até dois, como no caso do Bulbasaur, que é grama e venenoso. Cada tipo tem maior ou menor chance do golpe usado causar dano no inimigo, o resultado dependerá do tipo do adversário e se o seu ataque é do seu mesmo tipo.

Os Pokémons têm diferentes tipos e fraquezas em combate. Estas características são importantes na escolha do Pokémon mais adequado para sua batalha. Às vezes, você tem que escolher aqueles com menos fraquezas e saber de que tipo eles são. Portanto, é importante que um mestre de Pokémon seja capaz de ordená-los por essas 2 características.

1.2. Histórias de Usuários

"Eu, como treinadora iniciante do jogo Pokémon Go, desejo pesquisar os meus Pokémons, filtrando-os por tipos e fraquezas, para escolher os mais adequados para as minhas batalhas no jogo.

"Como treinador do jogo Pokémon Go, quero buscar mais de um nome dos meus Pokémons, ordenando-os por tipos e visualizando mais informações sobre cada um deles, descobrindo suas fraquezas, desse modo poderei batalhar mais confiante para ser um mestre Pokémon."

1.3. OnPokemon

OnPokemon é um site de filtragem em Pokémons por: nome, tipos e fraquezas de cada um deles. Os resultados da pesquisa são mostrados na tela, ordenados por números da Pokédex Nacional, por nomes em ordem alfabética crescente e decrescente e, podendo serem mesclados pela maior ou menor quantidade de fraquezas.

Os principais usuários do OnPokemon, são os jogadores (treinadores) que desejam saber informações sobre seus Pokémons para batalhar com outros treinadores no jogo Pokémon Go. Para eles, é essencial saber o tipo e fraquezas de seus Pokémons e poder visualizá-los em qualquer lugar, como em smartphone, tablet e notebook, sem alterar as configurações visuais dos dados mostrados na tela.

2. PROTÓTIPOS

• OnPokemon é um projeto desenvolvido em 2022, para o bootcamp da Laboratoria Brasil.
• Esse projeto é baseado nas instruções apresentadas pelo README do Data-love.
• Para iniciar o projeto, iniciamos com um planejamento realizado no site Trello, com base em Babys Steps e na metodologia Scrum, com sprints de uma semana, totalizando em quatro sprints.

2.1. Protótipo de Baixa Fidelidade

• Para realizar o projeto do bootcamp Laboratoria, foi realizado primeiro um protótipo simples (baixa fidelidade) usando papel e lápis. Neste protótipo, foi pensado no conceito de Mobile First que prioriza quais elementos são prioridade na exibição para o usuário e quais podem ser descartados.

• No OnPokemon foi priorizado as informações essenciais, como: explicação sobre o uso do site, explicações para preenchimento do formulário de filtragem e nos resultados visualizados.

  • PARA MOBILE (smartphones e tablets):

    
    

  • PARA DESKTOP (computador e nootbook):

    

2.2. UX (Experiência do Usuário) e UI (Design de Interface)

• Estilo

  • OnPokemon é do estilo skeumórfico, que utiliza artifícios como texturas, sombras, gradientes e proporções, para simular os objetos reais e é muito utilizado em jogos, como o Pokémon Go. Já para o site OnPokemon, foi usado no logo para o desenho da pokebola, além das imagens da pokédex fechada e aberta, dos ícones e dos campos do formulário.

• Responsividade

  • Os tamanhos de telas utilizados no site, foram escolhidos segundo as estatísticas encontradas no site Statcounter, com base em dados coletados mundialmente. Os aparelhos eletrônicos escolhidos foram: smartphone, tablet e desktop.

    • Smartphone na posição vertical: 360 x 640 pixels
    • Smartphones na posição horizontal: 640 x 360 pixels
    • Tablet na posição vertical: 600 x 962 pixels
    • Table na posição horizontal: 962 x 600 pixels
    • Desktop: 1280 x 720 pixels

• Telas e Mensagens

  • As informações necessárias são apresentadas em formas de textos, a qual ocupam toda a extensão da largura da tela dentro de retângulos. Para as informações secundárias, são utilizados modal ou pop-up para as informações sobre o site e contato com a equipe OnPokemon, localizados na página inicial (home), sem precisar ir para outra página.

  • Conforme a tela do aparelho aumenta, o formulário, as escolhas das ordenações e os cards das respostas são realocados para ocuparem os espaços vazios encontrados no lado direito da tela. Cada um será feito em uma página que seguirá o seguinte caminho de navegação:

    • Home
      • Mais informações
      • Filtrar
        • Ordenação
          • Respostas

• Tipografia e Hierarquia

  • A tipografia escolhida possui fonte sem serifa, com a font-family: Arial, Verdana, Helvetica e Sans-Serif. São letras fáceis de serem visualizadas e lidas em aplicações da web.
  • Para visualizar a hierarquia, foi usado fontes grandes para títulos de páginas, como o logo da página home e os títulos: FILTRAR e RESULTADOS . Para destacar os últimos dois títulos, o tamanho do logo foi diminuído e aumentado nos deles, assim, não interferirá drasticamente de um título para desktop para um mobile que poderia ocupar grande parte de sua tela.
  • Para os demais textos, obedecem a hierarquia em relação ao título da página e ao tipo de tela em que será exibido.

• Cores e Contrastes

  • As cores escolhidas para o site foram pensadas em cores neutras para combinarem com as cores das imagens dos Pokémons, além de cores que pudessem ser contrastadas entre a cor do texto e o seu plano de fundo, para facilitar a leitura e legibilidade. Para isso foi utilizado a ferramenta da Adobe Color que testa, na parte de acessibilidade, as cores de textos com o seu plano de fundo. Foram testadas com a cor de plano de fundo da aplicação em si, dos textos, dos botões e pop-ups.

    

2.3 Protótipos de Alta Fidelidade

• Para o desenvolvimento do protótipo de alta fidelidade, foi usado uma ferramenta digital para protótipo. A ferramenta utilizada foi o Figma, que é um editor gráfico de vetor e prototipagem de projetos de design baseado principalmente no navegador web.

2.3.1 Smartphone na Posição Vertical

2.3.2 Smartphones na Posição Horizontal

2.3.3 Tablet na Posição Vertical

2.3.4. Table na Posição Horizontal

2.3.5. Desktop

3. TESTE DE USABILIDADE

• Para realizar o teste de usabilidade, usamos o formulário do Google para coletar informações dos usuários

3.1. Formulário:

3.1.1. Perguntas obrigatórias para a página Home:

• Atividade 1 - O que você vê nesta página? O que deveria acontecer em seguida?
• Atividade 2 - Você encontrou dificuldades para mudar de página? Por quê?

3.1.2. Perguntas obrigatórias para a página Filters:

• Atividade 1 - Use a barra de pesquisa para encontrar um Pokémon pelo nome. O que você esperava que acontecesse? Qual foi o resultado?
• Atividade 2 - Utilize um dos filtros. O que você esperava como resultado quando executou a filtragem? O que você vê nesta interface da parte de resultados(cards)?

3.1.3. Perguntas opcionais de sugestões e críticas:

• Deixe as suas sugestões e críticas:

3.2. Respostas:

• Os usuários encontraram dificuldades para acessar a página Filters, a partir da página Home. Uma sugestão encontrada para informar os usuários é informá-los por texto dentro do texto de boas-vindas.

• Uma dificuldade encontrada na página Filters, é que não será possível pesquisar pelo nome e pelo checkbox ao mesmo tempo. Então, colocamos como correção para o site de bloquear o campo do checkbox, que pesquisa pelo tipo e fraquezas, quando o nome do pokémon for digitado. O inverso ocorreria também para bloquear o nome, ao assinalar o checkbox. Além de adicionar um botão de limpar o formulário.

• As sugestões apresentadas foram de fornecer mais informações sobre os pokémons, ao clicar nos cards.

4. FEEDBACK DA LABORATORIA

• Após o Project Feedback da Laboratoria, o site ONPOKEMON precisou ser alterado, desde a página inicial até a página de filtragens. Na página inicial, foi adicionado um efeito visual iluminado na cor neon azul, animado sobre a Pokédex, além de acrescentar o texto instruindo o usuário a clicar na Pokédex.

• Na página de filtragens, foi necessário retirar as caixinhas de seleção, conhecidas como checkbox, substituídas pelas listas de seleção, sendo separadas em duas: uma para escolher tipo ou fraqueza, e, a outra para escolher os elementos, como inseto, pedra, etc.

• Por fim, também foi retirado o botão de confirmar da página de filtragens para enviar as respostas do checkbox. Como foi optado pela lista suspensa, o usuário necessita apenas selecionar os valores dessas lista e automaticamente será filtrado os pokémons escolhidos. Permaneceu o botão de limpar listas suspensas, caso o usuário queira desselecionar alguma opção.

5. FERRAMENTAS UTILIZADAS

• Planejamento:

  • Scrum: Trello

• UX/UI:

  • Edição de Imagens: Canvas
  • Paleta de Cores com Acessibilidade: Adobe Color
  • Protótipo: Figma
  • Para fazer Gif: Canvas
  • Para fazer o Teste de Usabilidade: Google Forms

• Web:

  • Editor: Visual Studio Code

6. CHECKLIST

• Usar VanillaJS.
• Passa pelo linter (npm run pretest)
• Passa pelos testes (npm test)
• Testes unitários cobrem um mínimo de 70% de statements, functions, lines e branches.
• Inclui uma definição de produto clara e informativa no README.md.
• Inclui histórias de usuário no README.md.
• Inclui rascunho da solução (protótipo de baixa fidelidade) no README.md.
• Inclui uma lista de problemas detectados nos testes de usabilidade no README.md.
• UI: Mostra lista/tabela/etc com dados e/ou indicadores.
• UI: Permite ordenar dados por um ou mais campos (asc e desc).
• UI: Permite filtrar dados com base em uma condição.
• UI: É responsivo.

7. AUTORAS

Adriana Tiemi Watanabe Projeto do Bootcamp da Laboratoria

Beatriz de Sousa Carvalho Projeto do Bootcamp da Laboratoria