Nesse projeto, temos como objetivo contruir uma página web responsiva que traga para o usuário informações de um banco de dados de acordo com suas necessidades. A partir de filtros, o usuário poderá selecionar apenas as informações necessárias.
O banco de dados utilizado nesse projeto traz Indicadores de desenvolvimento do World Bank, relacionados ao Brasil, Chile, Peru e México.
Criamos duas protopersonas para dar partida às necessidades mais específicas do projeto e inserir um contexto a ele.
Elas são:
Para atender as espectativas dos clientes, criamos 3 histórias de usuário. Cada uma delas implementou uma funcionalidade básica para o site, dessa maneira criamos 3 pequenos filtros para triar cada vez mais as informações.
O primeiro filtro, ou história, foi responsável por filtrar o banco de dados e trazer somente de determinado país. Entre as opções estavam Peru, México, Brasil e Chile.
Após filtrar, o resultado aparecia na tela, mas ainda com muitas informações de forma complexa e praticamente imcompreensível para o usuário. Além de muitas informações desnecessárias.
O segundo filtro, seleciona um indicador de desenvolvimento, trazendo assim todos os dados sem distinção de ano, porém já com o país filtrado pela funcionalidade anterior.
Determinamos que o dashboard só trará informações de 2012 a 2017, pois não há informação suficiente dos anos anteriores no banco de dados.
Nessa fase, as informações na tela são objetos com ano-número populacional. São informações extensas e vários dados desnecessários. Ainda não é o resultado final ideal para os clientes, porém atendem aos requisitos da segunda história.
Para a terceira história, finalizamos o processo de filtragem de informações. Após selecionar o país e o indicador de desenvolvimento, o usuário pode selecionar um ou mais anos que deseja obter informações, entre 2012-2017.
Nesse ponto a informação exibida na tela já é sucinta e clara, mostrando somente o que é relevante para o usuário.
A partir das protopersonas e do banco de dados escolhido fizemos exercícios de brainstorm para cria o layout ideal.
Para criar um dashboard, precisamos de cards para mostrar as informações de maneira clara e campos para o usuário interagir com os dados (inputs - checkbox e select).
Esses foram os primeiros rascunhos, e na última imagem o resultado unindo as ideias mais relevantes.
Problemas encontrados:
- Não limpa as informações exibidas na tela. Somente acumulam resultados de várias pesquisas.
Solução: Criar um botão de refresh, que limpa as informações quando o usuário desejar. (IMPLEMENTADO)
- O botão que processa as informações não dá nenhum sinal que o processo foi feito. O usuário não percebeu que o site já estava retornando o resultado.
Solução: Inserir um efeito no botão, que mude quando ele for clicado. Cor ou sombra. (IMPLEMENTADO)
- Vanilla JS
- HTML 5
- CSS
- Git e GitHub
- Visual Code Studio