Daniele V Silva - Webdesigner, desenvolvedor front-end, programador de interfaces, Gerente de projetos web, consultora e freelancer

via Instagram http://ift.tt/1DE1z8y

Dashboard – Dicas de design para aplicações web

Publicado em , por , na categoria Elementos e técnicas, Webdesign

Hey! Adivinha só quem voltou!
Pois é, depois de quase um ano eu estou aqui escrevendo novamente.
Nesse momento estou trabalhando no desenvolvimento de interface para duas aplicações totalmente diferentes, e cheguei a um ponto que pode ser crucial para o sucesso da aplicação: o Dashboard. Como percebi a carência desse assunto em português resolvi escrever sobre o que aprendi ao longo do processo de criação, espero que sirva de fonte de informação pra vocês quando estiverem no meu lugar.

Dashboard, ao pé da letra “Painel de bordo”, é um termo usado em diversas áreas e nada mais do que um painel de indicadores.
Em se tratando de aplicações web, o dashboard é uma forma rápida de visualizar as principais atividades sendo executadas dentro de uma aplicação, e funciona como uma porta de entrada para a maioria das ações que o usuário pode executar. O Dashboard, na maioria das vezes, é dividido em pequenos blocos que exibem as informações referentes as diversas áreas e funcionalidades da aplicação e são chamados Widgets.
Parece complicado, mas é super simples, a maioria dos webdesigners desenvolve pequenos dashboards regularmente sem perceber
Cada aplicação tem a sua própria linguagem de comunicação com o usuário, que é basicamente estabelecida através da regra de negócio determinada pelo tipo de serviço à que o sistema de aplica. Por exemplo: uma aplicação para a área de turismo terá uma necessidade especifica no seu dashboard, que é diferente da necessidade de um sistema de reservas para um restaurante.  Será que podemos chamar isso de algum tipo de Folksonomia?
Mas de modo geral, o dashboard é uma forma simples e rápida de reunir todas as informações importantes em uma única página (ou aba).
Essa pequena definição provavelmente foi suficiente para ajudá-lo a entender como o dashboard é importante, no entanto, normalmente o mínimo de esforço e estudo é aplicado no desenvolvimento dessa área. A intenção desse artigo é passar alguns conceitos básicos que encontrei nas minhas pesquisas e aquilo que considero boas práticas de desenvolvimento.

Desenvolvimento do layout

A maioria dos Conceitos que aplicamos no desenvolvimento de um site também podemos aplicar no dashboard de uma aplicação web.

Organização

A organização é a chave para uma aplicação usável. Muitas vezes, precisamos exibir uma grande quantidade de informação em um espaço muito pequeno, e é muito importante determinar qual conteúdo é realmente relevante e o que podemos exibir em uma página de mais detalhes.
Supondo que se trata de de um sistema de reservas para um restaurante. O responsável pela ocupação das mesas consulta o seu dashboard para saber rapidamente quantas e quais mesas ainda estão disponíveis, nesse caso quais são as informações realmente relevantes? Ele precisa saber efetivamente quais são as mesas livres, talvez por um sistema de numeração, também precisa saber os horários que estarão disponíveis, quantas pessoas aquela mesa comporta e talvez, de acordo com a regra de negócio, qual o posicionamento dela no espaço físico do restaurante.
Mas ele não precisa saber por exemplo, as informações pessoais dos clientes que reservaram as mesas que já estão ocupadas, seus nomes, ou se são clientes antigos do restaurante. Podemos guardar isso para um novo widget, ou para uma página com detalhes da reserva.

Do ponto de vista psicológico, uma das principais funções de um dashboard é saciar a nossa curiosidade e a necessidade que temos de receber informação. Por isso é muito importante conhecer bem o negócio para determinar quais informações são importantes e para que tipo e nível de usuário elas deverão ser exibidas.

Enfim, o Dashboard pode ser pesado, pode não ser muito atraente visualmente, e até cansativo, mas se exibe todas as informações da maneira adequada, ainda assim será útil.

Grids, cores, áreas de atenção e relevância

A natureza humana tem uma predileção pelo belo. A beleza está diretamente ligada ao sendo de prazer e satisfação, mas como nós já sabemos, beleza é uma questão de ponto de vista e gosto pessoal, por isso é é muito importante ser cuidadoso quando escolhemos um estilo pessoal para uma aplicação pois é muito mais fácil errar do que acertar. As aplicações mais eficientes são aquelas que você utiliza sem se quer perceber. Elas não devem causar impacto visual (nem mesmo impacto positivo) apenas manter o usuário confortável para executar as funções a que se propõe de forma eficiente.

O grid

Conforme expliquei anteriormente, o Dashboard de uma aplicação web, na maioria dos casos é formado por pequenos blocos alinhados lado a lado e uns sobre os outros, formando linhas e colunas a que chamamos Grid. A idéia de grid fica mais fácil de entender quando nos lembramos do tempo em que desenvolvíamos sites usando tabelas, ele é composto basicamente de linhas e colunas que determinam o posicionamento de cada elemento em um site ou aplicação web. Não vou me aprofundar muito nesse assunto agora pois é assunto para um artigo inteiro. Mas de forma geral, um grid nos ajuda a pensar de forma modular, e widgets são pequenos módulos de conteúdo que deverão ser posicionados dentro do seu dashboard, então, ao invés de trabalhar com uma suposição para as larguras e alturas de seus widgets, experimente trabalhar com algumas especificações básicas, como por exemplo, a largura da tela, considerando os padrões que temos atualmente, o layout deve seguir a resolução de 1024 x 768, nesse caso, sua área util deve ter a largura de 960px, pois é um número que permite uma grande quantidade de divisões (2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 e 480) ou seja, colunas.
Você deve estar pensando: mas ninguém precisa de tantas colunas, eu concordo com você e sugiro dividir em apenas 12 colunas ( isso depende da complexidade) em muitos casos, 3 colunas é suficiente, mas na verdade, quanto mais colunas você tiver,  mais complexo pode ser o seu layout e você pode comprovar isso através dos exemplos de grid ao lado.

As cores e a harmonia do layout

Definido o grid, temos que planejar como trabalhar as cores. Mais uma vez, não vou entrar em muito detalhes sobre a importância das cores e como combina-las pois já falei muito sobre isso. Mas é importante frisar que as cores além de causar uma resposta emocional, também nos auxiliam a distinguir, separar, organizar e classificar conteúdos e ações.

Para começar, você precisa escolher a sua paleta de cores, normalmente ela é baseada nas cores que o cliente já usa, mas eu pessoalmente prefiro trabalhar com cores neutras para o background, bordas e detalhes e utilizar as cores do cliente como um complemento, se elas não forem muito agressivas, podem ser usadas como cores padrão para exibição dos dados, por exemplo.

Uma aplicação muito colorida, pode causar confusão na hora de entender o seu funcionamento,  de memorizar as respostas que receberemos após determinadas ações, ou até mesmo do seu significado no contexto da ferramenta. Por exemplo, o vermelho é a cor que associamos imediatamente a notificações de erros, se o layout da sua aplicação possui essa cor em um contexto diferente, como nas bordas, por exemplo, você terá que encontrar uma outra forma de comunicar os erros, ou seja, você vai sair do padrão que o usuário já está adaptado pela força da experiência passada e seu usuário terá que aprender qual é a forma que a sua aplicação usa para retornar uma resposta de erro. O mesmo para a cor verde, que associamos a uma resposta positiva e a cor amarela que associamos a uma notificação geral ou de atenção.

Também é importante considerar que uma aplicação ou sistema, de forma geral será utilizado varias vezes ao dia, ou por longos períodos e por isso precisa se agradável. Muitas cores, cores muito escuras, ou poucas cores muito contrastantes podem tornar o uso da aplicação cansativo e desagradável. O mesmo para o uso de imagens. Imagens de fundo ou imagens excessivamente repetidas, tudo isso se torna visualmente cansativo.

Do meu ponto de vista, o uso mais inteligente da cor em um Dashboard é optar uma unica cor em diferentes tonalidades, e utilizar cores diferentes somente para determinar as ações do usuário, desse jeito ele vai se sentir confortável, sabendo que tipo de resposta esperar e interpretando-a mais facilmente.

Áreas de atenção e relevância

O seu modelo de negócios deve dizer quais informações são mais importante para o seu usuário naquele momento, e tornas-las  imediatamente identificáveis para o usurário. Mas se temos um grid básico, com 9 módulos visualmente semelhantes posicionados um ao lado do outro, como podemos tornar um determinado widget mais relevante do que o outro?

Um dos mais inteligentes métodos para destacar a informação relevante é baseado no posicionamento. Estudos mostram que as pessoas tendem a scanear o site de uma maneira bem similar, se observa primeiro a área no topo da esquerda para a direita, depois ele desce pelo lado esquerdo até embaixo, em seguida observa o centro da página e por último as informações no lado direito embaixo, veja como isso funciona na figura ao lado.

E para melhorar ainda mais o trabalho de relevância baseada no posicionamento, você pode utilizar blocos que ocupam duas ou mais áreas importantes no layout.

Formatos de Layout para um Dashboard

Não é fácil generalizar os formatos disponíveis para dashboards, isso depende da quantidade de informação que você deseja disponibilizar na mesma tela e também da flexibilidade que a sua linguagem de programação proporciona.

O formato mais comum é aquele onde temos a área principal dividida em duas partes, uma pequena área superior onde colocamos o logitipo, as informações de usuário, logout, etc. E uma área mais ampla abaixo onde colocamos os widgets.

Esse formato, apesar de simples é muito eficiente. É fácil de ser customizado e a organização também é muito mais simples quando você não tem interferência de outros elementos.

Muitas vezes é necessário um menu mais longo do que a largura da tela (960px como sugerido anteriormente), nesse caso, outro formato interessante seria uma segunda versão do anterior, apenas acrescentando um menu extra ao lado esquerdo. Menus verticais em geral tem uma área útil maior do que menus horizontais. Esse formato de layout também é interessante quando é necessário exibir alguma informação que deve estar sempre fixa, uma caixa de pesquisa, por exemplo ou até anúncios, Mas lembre-se que a sua área util será bem reduzida.

Por enquanto é isso…

A principio isso é tudo o que você precisa saber para criar o seu layout.

Eu pretendo prosseguir com um detalhamento de como exibir os dados, que tipos de gráficos utilizar, como transmitir informações através das cores, etc. E também como e porque utilizar icones.

Exemplos de Uso

7 opiniões sobre “Dashboard – Dicas de design para aplicações web”

  1. Excelente post! Estou criando um dashboard mas precisava ler algo que me inspirasse e acabasse com minhas dúvidas.. Vou aproveitar pra continuar lendo outros posts daqui haha. Obrigado por compartilhar seu conhecimento.

  2. Princidonio David disse:

    Aló Pessoal,

    A minha empresa pediu-me que eu desenvolvesse um Dashboard, e agradecia que voces me ajudassem no seguinte:

    1. Gostaria de saber que ferramentas são usadas para fazer um dashboard?

    2. Existe alguma aplicação ja feita que se pode customizar para outras empresas?

    Abracos

  3. Julio disse:

    Muito massa seu artigo, ajuda bastante bem vinda principalmente pq este é um tipo de assunto que não é facil de encontrar. Muito Obg pelo post.

  4. Mariza disse:

    Ótimo o artigo obrigada. Vou fazer um seminário sobre o tema, faco faculdade na Alemanha e quando tenho um tema desconhecido gosto de le-lo antes em portugues , mas como vc falou difícil de encontrar certos artigos em portugues.
    Mariza

  5. Rafael disse:

    E escreva mais artigos ….

  6. Rafael disse:

    Puts muito bom esse artigo seu.. estou desenvolvendo uma dash e me serviu muito bem este artigo como base.. realmente o assunto é muito escasso na internet.. obrigado alias adoro seus artigos

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *