Problema

O problema é a dificuldade na visualização dos diversos dados, como poderia ver de forma mais simples o conjunto desses dados volumosos.

Solução

A solução foi criar um mapa interativo, onde o usuário pode visualizar todos os gastos/dados de forma simples e rápida. Podendo também limitar o período para a visualização.

Visualize o gráfico, para alterar o período basta clicar e arrastar nos limites do mapa.

Quando Usar

• Use quando desejar ver os gastos de algum item na hierarquia na base de pagamentos de forma anual, ou mensal.
• Use quando desejar comparar gastos de forma mais direta entre diferente órgãos, programas ou ações.
• Não use se desejar ver um montante anual de um orgão, unidade gestora, ação ou programa.

Exemplo:

Problema

O problema é a não visualização das páginas e requisições, ou seja, determinada consulta está sendo processada, mas não tem como ver que a mesma ainda está sendo carregada.

Solução

A solução foi colocar uma barra de carregamento que mostra ao usuário do site que determinada tarefa está em execução ou em processamento. Mostrando assim de certa forma um feedback do que está acontecendo ao demorar responder uma requisição.

Visualize a barra enquanto a requisição é completada e retornada.

Quando Usar

• Use quando desejar informar um retorno ao usuário do que está acontecendo.
• Use quando uma consulta agregada demorar mais de 3 segundos.
• Não use toda vez que gerar o resultado de uma consulta, mudança de páginas.

Exemplo:

Problema

O problema quando o usuário faz algo não esperado ou que não é correto no contexto no sistema algo precisa ser feito e o usuário precisa ser informado de sua ação.

Solução

A solução foi apresentar para o usuário no momento que ele faz uma ação inesperada um modal informando uma mensagem com o que é preciso ser feito para completar a ação com sucesso.

Quando Usar

• Use quando for necessário informar ao usuário, após uma ação indevida, uma mensagem informando o que é preciso ser feito.
• Não use se desejar mostrar ou descrever como fazer uma ação ao usuário se ele tiver feito a ação de forma correta.

Exemplo:

Problema

Como apresentar vários itens numa interface sem listagem, de forma estilizada e organizada.

Solução

Buscando apresentar aos usuarios os órgãos superiores, órgãos subordinados, unidades gestoras, programas, ações ou favorecidos no retorno de um resultado de busca ou simplesmente na apresentação do item na hierarquia os cards retornam de forma estilizada e simples esse resultado.

Quando Usar

• Use quando desejar mostrar ou filtrar um nome de um item na hierarquia.
• Use quando deseja retornar o resultado de uma consulta de forma não gráfica através de texto.
• Não use para fazer comparações entre itens ou retonar uma informação de forma gráfica.

Exemplo:

Problema

Como apresentar as informações, destacar o significado do texto sem chamar muita atenção para fonte

Solução

A fonte DokChampa possui aspecto simples, limpo, armonioso, intuitivo, destacando a informação e não o desenho da fonte em si.

Quando Usar

• A fonte é utilizada em todo site, em textos, números, títulos, parágrafos, variando apenas no tamanho
• Não use se um ícone ou uma imagem destacar melhor o significado de um elemento, ação em vês de forma textual.

Exemplo:

Problema

Se tratando de acessibilidade, serviço ou ferramenta séria, é necesssário destacar o aspecto visual através de cores e elementos gráficos, textuais, contudo as cores podem retratar, destacar as informações de uma melhor forma. Quais cores são necessárias para que uma boa parte da população que possui algum tipo de deficiência visual ou daltonismo possa entender o que a ferramenta quer passar e não se perder no aspecto visual da ferramenta.

Solução

Foi feito um estudo em que foi observado as principais cores que diferentes níveis de daltonismo enxerga, chegando na paleta de cores em destaque abaixo no exemplo.

Quando Usar

• Use cada cor em diferentes contrastes como fundo cinza, o verde mais escuro paraa cards, botões, textos, branco para nome do texto dentro dos botões, verde mais claro para cabeçalho, rodapé.
• Não use as cores mais claras para dá mais destaque e cores mais fortes como fundo para perder um contraste mais adequado

Exemplo:

Problema

O retorno de uma consulta pode ser grande muitas vezes, sendo assim é necessário uma forma de não deixar uma página extensa e além disso fazer com que o usuário tenha um retorno do que é procurado mais rápido.

Solução

A paginação retorna ao usuário os resultados em parte, podendo ele avançar para outras páginas com os resultados da pesquisa de forma sequencial ou simplesmente ir para a primeira ou última página contendo os resultados da pesquisa.

Quando Usar

• Use quando o resultado de uma consulta é grande.
• Use quando desejar destacar alguns resultados dentre muitos outros.
• Não use se o resultado retornado por uma consulta é sempre pequeno, e o conteúdo retornado é disposto em uma página sem necessidade do usuário fazer muito esforço para ler todo conteúdo.

Exemplo:

Problema

Quando é preciso dispor as informações de forma lado a lado, mostrar ligações ou agrupamentos é preciso dispor tais informações de uma forma simples e intuitiva.

Solução

Através de tabelas dispomos as informações mais relevantes agrupadas além de acrescentá-las em um só local.

Quando Usar

• Use quando necessite juntar vários resultados de pesquisas de forma agrupada e lado a lado.
• Não use se os resultados podem ser melhor visualizados de forma individual e gráfica, ou que não muitas agregações de resultados para serem dispostas em diversos atributos.

Exemplo: