- 1. Prefácio
- 2. Resumo do projeto
- 3. Sobre o tema e usuários
- 4. Protótipos
- 5. Testes de usabilidade
- 6. Interface do projeto e objetivos alcançados
- 7. Testes unitários
- 8. Tecnologias utilizadas
- 9. Melhorias futuras
- Créditos
- Autores
O projeto em questão é uma aplicação web criada como parte do bootcamp da Laboratoria, em que o seu principal objetivo é visualizar um conjunto de dados fornecidos que permite os usuários pesquisarem, filtrarem e ordenarem as informações de acordo com as suas necessidades. A ideia é visualizar os dados através de uma interface amigável e intuitiva.
Dentre os vários temas disponibilizados pela Laboratoria para realização do projeto, nós escolhemos o tema Tarot. O Divine Oracle dá acesso aos usuários à todas as cartas do deck - baralho - do tarot, mostrando as principais características e significados das cartas a fim de consulta. Com isso, os usuários podem pesquisar pelo nome da carta, filtrar pelo naipe, arcanos e ordenar pela numeração da carta (do maior para o menor e do menor para o maior) para facilitar a busca e compreensão.
Os principais usuários do Divine Oracle são tarotistas profissionais, aprendizes de tarot e pessoas interessadas em consultar os significados das cartas de tarot. Com isso, criamos as seguintes histórias dos usuários para desenvolver o projeto tendo como base as suas reais necessidades:
📎 Como tarotista eu quero buscar o significado das cartas para realizar as minhas consultas.
Critérios de aceitação
- Eu quero visualizar o significado das cartas com a face para cima e reverso;
- Eu quero poder consultar facilmente através de qualquer dispositivo.
Critérios de aceitação
- Eu quero poder visualizar todas as cartas de tarot;
- Eu quero consultar uma carta pelo seu nome;
- Eu quero consultar a descrição de cada carta.
- Eu quero poder consultar facilmente através de qualquer dispositivo.
Critérios de aceitação
- Eu quero poder filtrar as cartas por tipo arcano menor e arcano maior;
- Eu quero poder consultar facilmente através de qualquer dispositivo.
Critérios de aceitação
- Eu quero poder filtrar as cartas pelo seu naipe;
- Eu quero poder visualizar as informações sobre as cartas, como: significado, naipe e valor;
- Eu quero poder consultar facilmente através de qualquer dispositivo.
Critérios de aceitação
- Eu quero um campo para pesquisar uma carta pelo seu nome;
- Eu quero visualizar o significado das cartas com a face para cima e reverso;
- Se a carta não aparecer quero ser informado sobre isso (deve aparecer: carta não encontrada)
- Eu quero poder consultar facilmente através de qualquer dispositivo.
- O código tem, e passa, pelos testes unitários e cobrem um mínimo de 70% de statements, functions, lines e branches;
- O código está no repositório;
- O projeto deverá ser implantado no GitHub pages;
- O projeto foi testado com pelo menos 5 usuários e foram realizadas as melhorias necessárias identificadas no teste de usabilidade;
- UI: É responsivo.
O protótipo foi desenvolvido levando em consideração as necessidades dos usuários, para que eles pudessem encontrar as informações sobre as cartas de forma intuitiva e fácil. Pensando na praticidade, escolhemos dispor todas as cartas com parte das informações no verso da carta e as demais informações no modal que pode ser acessada através do botão learn more.
Desktop
Mobile
Os testes de usabilidade foram realizados em média com 5 pessoas, para entendermos se a interface criada no protótipo estava intuitiva e de fácil compreensão para os usuários. Com isso, percebemos que algumas pessoas tiveram dificuldade para identificar como seria feita a ordenação e qual seria o objetivo geral do site.
Sendo assim, implementamos as alterações na ordenação, indicando que seria uma ordenação numérica e adicionamos uma tela de boas-vindas para contextualizar o usuário.
Para que pudéssemos ter um bom aproveitamento dos dados a serem manipulados seguimos da seguinte forma:
- Criamos as histórias dos usuários para compreender o que seria buscado;
- Fizemos o protótipo de baixa fidelidade para testarmos as primeiras ideias de forma rápida, enquanto o protótipo de alta fidelidade foi criado para simular uma experiência mais realista;
- Realizamos os testes de usabilidade para avaliar como os usuários interagem com o produto identificando possíveis problemas de uso e melhorias.
- O desenvolvimento foi realizado baseado nas etapas anteriores, levando em consideração os feedbacks e fazendo adaptações conforme a necessidade.
[✔] Mostrar os dados em uma interface: pode ser em cards, tabelas, listas, etc.
[✔] Permitir ao usuário interagir com a interface para obter as informações que necessita;
[✔] Ser responsiva, ou seja, deve ser visualizada sem problemas a partir de diversos tamanhos de tela: celulares, tablets, notebooks, etc.
[✔] Que a interface siga os fundamentos de visual design;
[✔] Testes unitários cobrirem um mínimo de 70% de statements, functions, lines e branches.
Foram realizados testes unitários havendo uma cobertura de 100%.
- GitHub
- Git Bash
- Visual Studio Code
- HTML
- JavaScript
- CSS
- Consumir dados estáticos de forma dinâmica, carregando um arquivo JSON com
fetch; - Adicionar à interface visualização de dados em forma de gráficos;
- Adicionar responsividade para mais telas;
- Adicionar uma tela para que o usuário possa tirar uma carta.
Imagens:
Background - Freepik
Favicon - Flaticon
Deck Tarot - On Your Journey
Outras Imagens - Canva
Ícones:
GitHub - Font awesome
Expanded arrow - Font awesome
Menu list - Font awesome
Fontes:
Open Sans - Google Fonts
Milky Walky - Da font
Bizantheum - Da font
-
Ana Ferreira - @anabfer
-
Erika Peloggia - @erikapeloggia
-
Iana Rodrigues - @ianarodrigues