Site OnPokemon refatorado com novos filtros, páginas e funcionalidades

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

Status do Projeto: em andamento

Deploy: Site OnPokemon

ÍNDICE

• Escolha os seus Pokemóns para combate, filtrando por tipo e fraqueza.
• Í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 Posição Vertical
• 3. FERRAMENTAS UTILIZADAS
• 4. CHECKLIST
• 5. AUTORAS

1. PRODUTO

Antes de iniciar o desenvolvimento do app, fizemos um trabalho de investigação de melhorias a serem implantadas através de um projeto base. E criamos usuários, quais seus possíveis problemas e a criação de personas a partir disso.

O Jogo Pokémon GO é um jogo eletrônico gratuito de realidade aumentada voltado para smartphones. Com o uso do sistema de posicionamento global (GPS) e a câmara de dispositivos compatíveis, o jogo permite aos jogadores capturar, batalhar, e treinar criaturas virtuais chamadas Pokémon, que aparecem na tela do jogador usando realidade aumentada. Também há um acessório opcional, o Pokémon Go Plus, alerta os usuários quando Pokémon estiverem nas proximidades.

Pensando nos jogadores, desevolvemos uma plataforma onde reuni informações relevantes para ser um treinador Pokémon. O usuário encontrará uma plataforma intuitiva que é possivel coletar dados referente aos seus Pokémons ou aqueles que deseja capturar.

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 ativa 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 iniciante do jogo Pokémon Go, quero buscar por 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.2.1 Personas

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-Lovers.
• Para iniciar o projeto, iniciamos com um planejamento realizado no site Trello, com metodologia Scrum, com sprint de uma semana.

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):

    

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.

• 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 Posição Vertical

3. FERRAMENTAS UTILIZADAS

• Planejamento:

  • Scrum: Trello

• UX/UI:

  • Edição de Imagens: Canva
  • Paleta de Cores com Acessibilidade: Adobe Color
  • Protótipo: Figma

• Web:

  • Editor: Visual Studio Code

4. 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.

5. AUTORAS

Adriana Tiemi Watanabe

Ana Clara Freitas

Beatriz de Sousa Carvalho

Érika Moreno

Helena Gonçalves

Marione Tainara Pereira