Blog

Dicas sobre Design e Visualização de dados para QlikView

Case: mashup de design para Qlik Sense

Quando conheci o QlikView notei claramente duas coisas ao trabalhar na camada visual: a facilidade para construir objetos e gráficos e arranjá-los na tela e ao mesmo tempo a dificuldade de manusear componentes como HTML e CSS, que dariam mais dinamismo à interface final.
Essa perspectiva mudou completamente em 2014 quando a Qlik lançou no mercado o Qlik Sense.

O Qlik Sense – o irmão mais novo do QlikView, e bem mais arrojado, tecnologicamente falando – nasceu como um produto “self service”. Como tal, ele traz uma série de características que permitem com que o próprio usuário final monte layouts e objetos gráficos de forma ainda mais fácil do que o QlikView. Em contrapartida, a camada visual do Sense oferece menos liberdade de criação para o usuário (grid de desenho e alinhamento definido, estilização de gráficos e tabelas quase inexistente,  dentre outros).
Mas esta é parte da história. Na verdade o Qlik Sense, por trabalhar nativamente com elementos construídos em HTML e CSS, por exemplo, trouxe ainda mais liberdade na camada visual: desde a criação de extensões de gráficos e componentes até a criação de mashups inteiros de design, onde o visual da aplicação pode ser completamente personalizado, às vezes se parecendo mais com um site do que uma ferramenta de Business Intelligence.

A personalização do layout (cores, fundos, botões, tamanho dos elementos e estilo visual) tem se mostrado a principal dor de quem adotou o Qlik Sense como framework de BI. Fugir do branco padrão, da fonte pré-definida, da navegação entre telas em menu recolhido, dentre outros não é tarefa simples e envolve mais de um profissional qualificado.

Para demonstrar um caso prático de melhoria de mashup de design em Qlik Sense, transformamos uma aplicação demo (app “Sales Discovery”, que vem junto com a instalação do Qlik Sense Desktop) seguindo a identidade visual da Cluster.
Abaixo a tela de “Dashboard”, na sua versão original, e na sequência, a nova versão já implementada e funcional.

ANTES: Dashboard da aplicação “Sales Discovery”

DEPOIS: Foram transformadas as telas “Dashboard”, “Top Customers” e “Sales and Margin” e adicionadas duas telas de conteúdo institucional: “Mashup Sense” e “Sobre a Cluster”.

O mashup considerou o layout em 2 colunas: a primeira para a navegação principal e a segunda para o conteúdo. Os filtros foram organizados no topo da tela, livrando mais espaço e permitindo uma melhor organização quando exibido em telas menores (o layout é responsivo).
O trabalho envolveu as etapas de desenho de telas estáticas (projeto visual), implementação front end e integração com Qlik Sense, utilizando compilação de SCSS, LINT de código SCSS e JS, minificação e concatenação de arquivos, embaralhamento de scripts, JavaScript e Nunjucks para renderização (viabilizando Single Page Applications).

Os mashups de design podem ser utilizados tanto nas licenças QAP (para público aberto, como portais de transparência, etc.) quanto Enterprise, para público restrito com acesso via Tokens.

Solicite uma demonstração online deste demo e saiba como podemos transformar suas aplicações Qlik Sense em painéis com usabilidade e visual ricos.