A inspiração para este post veio do webinar de sucesso “Designing IoT Dashboards to Amaze Your Customers”, apresentado por Klaus Borges, Lead Front-end Developer, e David Hall, Customer Success Manager. O webinar reuniu mais de 100 espectadores e trouxe ótimos insights sobre como criar dashboards de IoT eficazes e visualmente atraentes. Por causa do sucesso, resumimos os principais pontos do webinar.
Ponto de partida
Para a nossa experiência de design de dashboard, vamos passar pelo que consideramos um dashboard ruim até chegar a um que consideramos excepcional. Este primeiro dashboard pode até parecer bom o suficiente se você não pensar muito a respeito.
Nossa jornada começa com um design de dashboard que à primeira vista pode parecer bom o suficiente, mas que tem vários problemas críticos quando olhamos mais de perto. Esse dashboard apresenta todos os dados ao mesmo tempo, o que pode sobrecarregar os usuários. Aqui estão os 6 principais problemas que identificamos:
-
Widgets demais: Pela nossa experiência, já ajudamos com vários dashboards que tinham dados demais e widgets demais. Além de poluir a interface e provavelmente sobrecarregar os usuários, isso também pode prejudicar a experiência de carregamento dos dados, já que os widgets podem ficar em “visualizações” diferentes: dashboards diferentes, abas dentro de um dashboard ou uma janela modal que abre ao clicar em um botão.
-
Falta de unidades de medida: Os dados de temperatura não tinham unidades, deixando os usuários na dúvida se os valores estavam em Celsius ou Fahrenheit.
-
Tabela dinâmica poluída: A Dynamic Table #1 exibia dados apertados, dificultando a compreensão.
-
Alertas confusos: Os widgets que mostram o número de alertas não especificam a severidade deles. Alguém pode acabar se acostumando com isso na interface, mas deixar essa informação explícita é sempre melhor nesses cenários.
-
Títulos e rótulos genéricos de widgets: Os títulos e rótulos dos widgets eram vagos demais e davam pouco contexto sobre os dados que representavam.
-
Legendas ambíguas no gráfico: As legendas no gráfico identificado como “Line #1” eram repetitivas e não traziam nenhuma informação acionável.
Mais contexto
Começamos as melhorias com as seguintes ações:
-
Atribuir títulos e rótulos claros e descritivos aos widgets, deixando explícito o que cada um representa.
-
Adicionar unidades de medida de temperatura (por exemplo, °C ou °F).
-
Atualizar a tabela Sensor Log para ter nomes de coluna claros, em vez da mesma variável repetida várias vezes (tudo na tabela é obtido a partir de metadados com Formulas)
-
Atualizar a tabela Sensor Log para substituir opções (que podem ser IDs ilegíveis) por rótulos, o que pode ser feito com campos Dropdown que recuperam opções estáticas (definidas no widget) ou opções dinâmicas (armazenadas em registros de dados)
-
Revisar as legendas do gráfico para indicar os níveis de severidade e a importância de cada um. Por exemplo, a severidade 1 foi definida como o nível mais alto.
O dashboard ainda não está com uma aparência ótima, mas como esses passos podem ser feitos em qualquer ordem, este é o que mais beneficia a redução da frustração dos usuários: ele pode parecer sem graça e poluído, mas pelo menos ler o texto permite que o usuário entenda tudo.
Melhorias visuais
A funcionalidade do dashboard melhorou, mas o apelo visual precisava de atenção.
Agora colorimos todos os widgets, o que às vezes parece ser a tarefa mais importante, mas adicionar mais contexto foi mais eficaz para eliminar qualquer possível fonte de confusão. Colorir é bem simples, já que você pode personalizar as cores em um widget e copiar a maioria delas rapidamente para os outros widgets do dashboard. Também incorporamos ícones para deixar os alertas mais distintos visualmente.
As colunas de níveis de severidade e de status Seen agora têm ícones, que funcionam como uma representação visual rápida e dispensam o usuário de interpretar um monte de texto.
As cores estão todas padronizadas aqui, então as mesmas cores são reutilizadas em todos os widgets. Se uma cor significa algo que exige a atenção do usuário, todo o resto que precisa do mesmo nível de atenção vai usar a mesma cor.
O gráfico também foi editado para ter cores de linha que combinam com o ponto acima.
Além disso, como a seleção atual de Blueprint Devices é para a organização TagoIO, o logo da TagoIO agora aparece no dashboard, indicando de forma destacada a organização ou o prédio que ele representa.
Uso eficiente do espaço
Apesar das iterações anteriores, o dashboard ainda tem espaço para melhorar no uso eficiente do espaço disponível. Ele ficou menos poluído, mas ainda podemos reduzir as informações ao que é necessário para o dashboard.
Lembre-se de que você pode usar outras abas no mesmo dashboard, outros dashboards e até janelas modais que abrem ao clicar em um botão posicionado no dashboard (por exemplo, o botão History para ver o gráfico)”
Focamos nos dados mais críticos, que neste cenário eram a temperatura e a umidade internas, para otimizar o espaço. Removemos as informações externas e os contadores de alerta menos severos, reduzindo o ruído. Embora essas informações possam ser úteis em uma aba separada, elas não são essenciais para o dashboard principal.
Se o usuário vê algo inútil em vez do que precisa, ele vai se frustrar, mesmo que acabe se acostumando. Se nenhum dos seus usuários se importa com uma informação do dashboard, ela ocupa o espaço de coisas mais importantes. Por isso, ouvir o feedback e iterar é muito importante para um design eficaz.
Também alargamos a tabela para melhorar a legibilidade, o que foi possível porque movemos os gráficos para uma janela modal, já que, neste caso de uso, é menos importante ver os alertas subindo e descendo ao longo do tempo logo de cara.
Ao projetar dashboards que possam ser um prazer de usar, é importante descobrir qual é o dado mais essencial para estar em uma “visualização” (dashboard ou aba), em vez de simplesmente jogar tudo ali para ver o que cola.
Os usuários podem acabar se acostumando a navegar por dashboards apertados e poluídos, mas isso não significa que não vão enfrentar muita frustração, principalmente se precisarem olhar os dados para tomar decisões críticas com base em informações.”
Experiência de usuário impecável
Criar uma experiência de usuário impecável exige atenção aos detalhes.
Reduzimos o espaço entre os widgets, permitindo que os usuários percebam as informações relacionadas como agrupadas. Como já mencionamos antes a melhoria das unidades, usamos Dynamic Formulas para permitir conversões entre quaisquer unidades que você precise. Destacamos as unidades de temperatura, mas você pode oferecer uma ótima experiência aos seus usuários permitindo que eles selecionem as unidades conforme suas preferências, o que é muito importante em um contexto global.
Além disso, algumas coisas que não aparecem neste post são melhorias na experiência do usuário. No que diz respeito à localização, oferecemos Dictionaries, perfeitos para tornar sua aplicação usável em vários idiomas.
Ao projetar os dashboards desta apresentação, o Dictionary foi usado em cada widget, porque idiomas podem ser adicionados conforme a necessidade mais adiante.
Quanto ao gráfico, clicar no botão de histórico no log de alertas do sensor o revela, garantindo que informações não críticas continuem acessíveis sem poluir a visualização principal. Outros recursos podem melhorar ainda mais a experiência, como o uso de Color and Icon Conditions para aproveitar ao máximo os indicadores visuais e as cores.
Ao usar a sua plataforma, um design de dashboard eficaz vai além de apenas agradar aos olhos: ele pode ser feito mudando as cores ou usando transparência e imagens de fundo.
Adotamos a abordagem iterativa para mostrar que você pode dar esses passos em pequenos incrementos, e cada um deles pode elevar bastante a experiência do usuário.
Mais uma vez, este post foi inspirado pelo webinar “Designing IoT Dashboards to Amaze your Customers”, em que Klaus Borges e David Hall compartilharam ideias sobre como projetar dashboards de IoT. A experiência deles, somada ao feedback de mais de 100 espectadores, nos motivou a fazer este resumo. Seguindo estas diretrizes, você pode criar dashboards que apresentam dados com eficiência e oferecem uma experiência fluida e envolvente. Para mais webinars como este, visite o canal da TagoIO no YouTube.
