Brazil Tableau User Group 12 Aug 2026

0:01 Verônica Simões: Boa noite, pessoal.

0:04 Nosso TUG voltando aqui com, com o Felipe, Alice e Ana pra falar da parte de princílios de– princípios de design, né? Já vieram aqui acho que duas ou três vezes, né, Felipe? Quantas? Nosso TUG.

0:18 Felipe Sebben: Boa noite todo mundo.

0:19 Verônica Simões: Ou mais.

0:20 É?

0:20 Felipe Sebben: Eu acho que por aí, umas quatro aí.

0:22 Verônica Simões: Quatro vezes, é.

0:24 Felipe Sebben: É.

0:24 Verônica Simões: É, nosso TUG hoje é o, é o quinto do mundo, né? Não sei se vocês sabem, em visualização, né? Dos, dos… Né?

0:33 Impressionante, né? E independente de, de, de quantas pessoas participem, às vezes não tem muitos participantes à noite, mas depois que a gente publica, né, na, dentro do, do Data Fam e também no YouTube, é o quinto mais visualizado do mundo, né? Então tudo que a gente fala aqui, grava, né, super elogiado. A gente tem muitos elogios aí da comunidade Salesforce.

0:57 Muito legal, né? Aí só pra– compartilhando aí com vocês. Então, tá. Pra quem não me conhece, meu nome é Verônica, né, trabalho aqui com a Tableau desde 2011, né, eu sou Tableau Visioner, é, Tableau Ambassador e TUG Leader. É, fui a primeira a criar aqui o TUG na América Latina, não tinha TUG nenhum. A gente só tinha um TUG em Seattle, né, e não tinha quase nenhuma empresa na época parceira, né, da Tableau, tava iniciando e o movimento de TUG se iniciou aqui no Brasil com Rio, São Paulo e Fortaleza.

1:30 E aí depois eu e Lígia, né, há, há três anos atrás, mais ou menos, resolvemos consolidar pra ter um único grupo, né, do Brasil e a gente juntar todo mundo, até que depois da pandemia, né, não podia ser quase presencial, o pessoal faz muito mais virtual do que presencial, né?

1:48 E tamos aí pra trazer as novidades, não só de Tableau, né, mas aí agora com, com o, a, o, a integração com o MCP, né, com AI, a gente podendo trabalhar com, com o Cloud ajudando a gente, o ChatGPT, Figma, Tableau Agents, tem muitas novidades aqui, né, pra compartilhar. Criação de extensão, né? Não sei se vocês já viram, mas criação de extensão usando o Cloud.

2:16 Então tem várias, várias novidades aí por virem, né? E aí eu conto com todos, né, pra virem aqui sugerir apresentações e trazer casos de uso pra gente compartilhar com a nossa comunidade Data Fam.

2:29 Então vamo lá começar. Aí Felipe, Alice, Ana, né, bem-vindos.

2:35 Prazer novamente.

2:36 Felipe Sebben: Obrigado, obrigado Verônica. Em nome do grupo, só deixo sempre meu agradecimento a ti e à Lígia, porque se, se o nosso TUG é um dos mais, é, mais digamos assim, visualizados pela comunidade, é por causa de vocês que sempre mantêm essa visibilidade, apesar de muitas mudanças tecnológicas ao longo desses anos. Então, sem mais delongas, eu vou começar aqui primeiro, hã, compartilhando a minha tela.

3:08 Vocês conseguem ver?

3:11 Anna Fernandez: Sim.

3:12 Felipe Sebben: Sim? Então, pessoal, vou primeiro começar aqui, hã, deixando um espacinho pra gente se apresentar. Vou deixar pras gurias, pra Alice e a Ana primeiro falar um pouquinho sobre elas, depois eu falo. Por favor, Ana, Alice, fiquem à vontade.

3:28 Anna Fernandez: Bom, gente, eu sou a Ana. É, assim como a Alice, nós não somos, hã, analistas de dados, nós somos designers, né? Eu sou UX designer, eu trabalho numa consultoria hoje na United Hub.

3:41 Alice Dias: Bom, eu sou Alice, eu sou product designer. É, a gente trabalhou, nós três trabalhamos juntos aí, uni– nos unimos pelos dados, por isso que a gente entrou nessa, nessa, nesse meio.

3:55 É, e hoje eu trabalho numa empresa de CRM. CRM PipeDrive.

4:01 Felipe Sebben: Isso, pessoal. Hã, oi, boa noite. Meu nome é Felipe. É, como a Alice falou, trabalhei com a Ana e com a Alice já no passado.

4:10 Hã, tivemos boas experiências e apresentamos aqui no TUG também. Eu atualmente trabalho como senior technical lead, mas efetivamente um desenvolvedor Tableau pela HCL, alocado na Apple, aí nos Estados Unidos.

4:26 Resumidamente, Tableau é o que eu faço no meu dia a dia, tá?

4:31 Hã, seguindo então a apresentação, hã, nosso objetivo hoje é voltar um pouco, né, nesses dias em que muito se fala em tecnologias, IA e novas coisas sendo feitas, a gente vai pros fundamentos, né, que sempre vão tá por aí, especialmente quando o assunto é visualização de dados. Então a gente vai abordar um, um estudo específico de caso, a ideia de como a gente u– hã, usa dados em dashboards, por exemplo, quais são as principais melhorias, especialmente do ponto de vista de UX, que a gente já pode aplicar esses dashboards que a gente vai olhar usando os dados aos princípios básicos, né, de design.

5:15 Nós vamos ter duas versões que nós preparamos em conjunto, uma versão em que esses princípios não são, é, respeitados, assim por se dizer, e uma que tenta já implementar esses princípios assim pra gente ter um comparativo do antes e depois e cada princípio, digamos, sendo abordado. Então a ideia aqui é poder demonstrar como decisões de UX, como decisões deliberadas têm um, um impacto também deliberado e consciente na experiência de uso desses dashboards.

5:48 Hã, não focando nos dados em si, né? Os, os dados, a fonte de dados é a mesma, mas o resultado do produto como um todo é outro, né?

5:59 Sobre o estudo, né? É, a gente podia ter usado o nosso querido A Superstore que tá sempre disponível, né? Todo mundo que é de Tableau conhece, mas a gente quis mudar um pouco, né?

6:12 E então a gente usou– foi um pouco bailista também, em parte, nós usamos dados públicos do Data SUS, né, sobre ocupação hospitalar do SUS no Rio Grande do Sul, né. Então a gente pegou esse conjunto de dados, fez esses dois dashboards, mesmo mais uma vez, um sem uma aplicação deliberada dos princípios que a gente vai abordar, e uma versão mais refinada também com aplicações de UX, design visual e usabilidade.

6:39 Hã, então, o tema mais, é, um pouquinho mais detalhado são dados de ocupação hospitalar do SUS, nós usamos as fontes– várias fontes integradas aqui, o sistema de informações hospitalares do SUS, que dá os dados de integração, junto com o cadastro nacional, né, de estabelecimentos de saúde, que incorpora o– dados não só de, do SUS, né, mas de os– mas todos os estabelecimentos pra gente fazer o cruzamento e obter coisas como dados, hã, métricas como ocupação e o Data SUS.

7:11 Aqui a gente dá um agradecimento à, à base dos dados, que de onde eu retirei, assim, esses dados tratados, é um site, é uma, é uma plataforma fenomenal que eu recomendo muito.

7:22 É, eu usei a versão free tier dele, que nos dá um período atualizado até 2023, mas que pros nossos propósitos ajuda muito.

7:29 E o objetivo aqui é apoiar daí a análise de indicadores relacionados a essa ocupação hospitalar, a capacidade instalada, a distribuição regional dos leitos. Essas são as métricas, hã, principais que a gente vai tá analisando.

7:45 Aqui então eu vou colocar a versão um, tá? Essa versão foi até a Ana que fez, não fui eu, tá?

7:53 Hã, eu– é um dashboard utilizando, digamos assim, o uso, como eu falei, os– o, a falta, uma falta de, de esses princípios. Eu vou compartilhar o dashboard agora pra gente poder dar uma olhada nele. Aqui tá ele. Ana, não sei se tu quer dar uma palavrinha aqui ou outra sobre o dashboard, já que tu que fez, eu não vou tomar o crédito dele.

8:14 Anna Fernandez: Sim. A nossa ideia era ter, hã, um antes e depois, assim, algum critério de comparação pra ir mostrando o que que a gente pode fazer. Aqui é um dashboard mais intuitivo. Eu usei muito da minha experiência avaliando a usabilidade dos dashboards pelas empresas que eu passei.

8:31 Então eu peguei alguns elementos que eu via que alguns desenvolvedores colocavam no dashboard e a gente vai traba– a gente vai falar muito mais sobre o depois, mas pra vocês entenderem como a gente vai aplicando esses princípios de design que a gente vai trazer hoje pra fazer essa melhoria de usabilidade e deixar a interface melhor pro usuário.

8:51 Acho que pode passar, pode voltar pra apresentação.

8:58 Hã, e os critérios que a gente trouxe aqui, assim, quando a gente fala em design, é muito pouco sobre gosto, como algumas pessoas às vezes acham que é, e é muito mais sobre alguns fundamentos que a gente tem, algumas teorias.

9:11 É muito envolvendo a percepção visual das pessoas e como a gente pode trabalhar isso ao nosso favor. Quando a gente fala de dashboard, a gente– e outras interfaces de software também, a gente vai falar muito em diminuir esforço cognitivo, né? Que não seja tão cansativo pro usuário, hã, atribuir sentido ao que ele tá visual– ele tá visualizando na tela.

9:33 Então a gente trouxe alguns fundamentos aqui, a gente vai falar de hierarquia visual, princípios da Gestalt, lei de Hick, consistência visual e heurística de Nielsen. E mesmo o próprio desa– nós designers, a gente não decora tudo. Então a gente usa isso, às vezes, de acordo com cada projeto, a gente vai entendendo quais fu- quais fundamentos, quais teorias ou métodos a gente pode usar, aplicar à interface.

9:57 A gente vai fazer uma pesquisa pra relembrar todas as leis que tem ali, todas as explicações, e vai trabalhando assim no dia a dia. Então não é pra vocês decorarem, acharem que precisam decorar, mas só pra vocês saberem que existem. E no final a gente vai falar um pouquinho também como a gente pode usar IA, pode aplicar isso à IA pra IA já também ajudar a gente cuidar desses fundamentos.

10:21 Felipe Sebben: Obrigado, Ana. Posso retomar?

10:24 Anna Fernandez: Pode.

10:25 Felipe Sebben: Tá.

10:26 Bom, hã, eu vou agora apresentar então o que seria a versão melhorada, que nós fizemos a partir desses princípios. E complementando um pouco o que a Ana falou da minha perspectiva também, é, nós, como desenvolvedores de dashboard também, mesmo consciente desses princípios, é sempre uma– tem uma necessidade de ser um pouco pragmático com eles também, porque nem sempre todos eles vão estar equacionados na tua limitação de que tu tem, com o que tu pode fazer.

11:01 Provavelmente, é sempre um compromisso entre o que é priorizado conforme o que tu queres apresentar. Talvez seja um dos princípios, talvez seja outro. Aqui nós tentamos trazer o máximo possível desses aqui. Então eu acho que eu posso, é, mostrar rapidamente esse aqui e nós podemos, é, abordar o– cada um dos princípios, aí eu passo a bola pras gurias, mas basicamente esse seria um layout alternativo ao que nós, é, mostramos anteriormente, né.

11:36 Aí ele já tem um layout mais distinto, segmentado por, é, por diferentes, é, abas, é, dentro do, dentro de abas específicas, hã, que eu acho que nós podemos cobrir ao longo dos próximos passos, ao invés de eu ficar mostrando ele como um todo agora, assim.

11:58 Acho que seria um-uma prática melhor.

12:02 Hã, vocês acham que eu posso continuar assim, Ana, Alice, ou…?

12:08 Anna Fernandez: Pode.

12:08 Pode.

12:09 Felipe Sebben: Sim, sim, tá.

12:11 Então Aqui, hã, fica alguns dos critérios e a distribuição deles, por exemplo, na página inicial.

12:21 Hã, acho que, hã, a Ane e a Alice podem comentar um pouco melhor cada um deles nos próximos slides.

12:29 E se necessitarem, vocês podem pedir, eu volto pra eles pra most– pro dashboard, pra mostrar cada um deles na prática.

12:36 Anna Fernandez: Tá, cê pode só voltar dois slides pro antes e depois, só pra mostrar em comparação. Essa seria a visualização do, daquele inicial com o depois.

12:46 Então a gente trabalha em dois aspectos. A gente trabalha um na interface, que é essas primeira parte que a gente vai explicar, esses fundamentos aplicado à interface, que é como a gente reorganiza os elementos, a gente trabalha a tipografia, trabalho com os grupos, hã, segundo funções específicas. Mas a gente tenta também um tratamento de experiência do usuário mesmo, que é entender assim: qual a jornada do usuário neste dashboard?

13:12 Qual métrica ele tá olhando? Por que que ele precisa daquela métrica? Se ele precisa de alguma coisa adicional, além de somente um dado, por exemplo, um KPI ali, e pra gente trabalhar um pouco isso. Então vocês podem ver que a gente dividiu, a gente tinha um dashboard mais longo, mais vertical, e a gente dividiu ele em quatro páginas, hã, pra ter uma, uma ideia de uma jornada pra cada uma dessas páginas.

13:36 Mas primeiro vamos começar falando sobre a interface, daí Felipe, acho que cê pode vol– é, voltar pra onde cê tinha aquele slide da Gestalt.

13:47 Então, a primeira teoria é a Gestalt. A Gestalt vem, hã, da psicologia, ela é uma área da psicologia, surgiu que veio de um grupo de pesquisadores da Alemanha.

13:59 E a ideia da Gestalt é entender como o cérebro humano percebe elementos visuais e como ele organiza o zé– o que ele tá vendo pra atribuir sentido. Então, por exemplo, se a gente vê uma multidão de pessoas com terno preto e tem uma pessoa com uma capa amarela, o nosso olhar de– vai direto pra aquela capa amarela e a gente vai organizar como aquilo sendo diferente do grupo de pessoas de terno preto.

14:23 Então, a– nós, como designers, a gente tenta usar muito isso ao nosso favor, pra já tentar usar esses princípios pra, pras pessoas que elas já estão habituadas a, a verem aqueles elementos, elas já vão atribuir aquele sentido.

14:37 Então, a gente tem o sentido, acho que pelo menos a gente vai aplicar pra interface, principalmente de dashboard. A gente tem a proximidade, que é elementos próximos indicam conexão. Então conforme os elementos tão próximo, a gente– nós já traduzimos que eles têm funções parecidas ou eles tão em um grupo muito específico. Então, por exemplo, quando eu tenho os slicers, quando eu tenho– eles tão s– normalmente no, agrupados no mes-no mesmo lugar.

15:05 Quando eu tenho botões específicos de documentação ou quando eu tenho a navegação da página, eu tenho esses agrupamentos, que é a teoria da proximidade.

15:14 Eu tenho a teoria da similaridade também, que é formas parecidas indicam a mesma função. Então normalmente, se a gente atribui elementos do dashboard, que eles vão ter a mesma função, por exemplo, os slicers vão ter a função de filtrar os dados, hã, no dashboard. A gente já tenta fazer eles similares pra já– o usuário já entender que aquele elemento tem a mesma função.

15:36 Região comum, que ela é parecida com a proximidade. Então esses elementos próximos grupos, agrupamentos de elementos, é, no mesmo local, eles indicam que eles têm um propósito em comum.

15:48 É, eu ten– e eu tentei sinalizar algo essas áreas do dashboard, que vocês podem pro– é, ver, por exemplo, como a gente vai fazendo esses agrupamentos, hã, de-de desses elementos que têm funções parecidas. Pode passar, Felipe.

16:02 A gente tem a figura fundo. A figura fundo é a teoria do contraste que separa o objeto do ambiente. Então, às vezes, a gente tem um fundo um pouco mais escuro e os cards brancos pra fazer uma separação, pra ter essa impressão de ressaltar e dar mais ênfase pros cards com os gráficos.

16:20 Pode passar, Felipe.

16:21 Felipe Sebben: Uhum.

16:24 Anna Fernandez: A gente tem continuidade. Então a forma que a gente vai organizar os elementos, a gente tente, tenta fazer um fluxo. E também é muito parecido hoje com algumas teorias da leitura na web. Então, por exemplo, a gente tem leituras em Z e em F, que é o olhar que o usuário tá fazendo na interface. Ele vai dar, é quase como se fosse um storytelling, né?

16:46 Ele começa num ponto e ele vai seguindo, e a gente tenta arrumar, organizar e alinhar os elementos do dashboard pra, pra que esse olhar seja fluído pro usuário.

16:56 E a gente tem o destino comum também, que é a mesma direção indicando o mesmo propósito.

17:02 Pode passar, Felipe.

17:06 A gente tem a simetria, la– hã, lados iguais trazem ordem para o design. Então, às vezes, a gente tem a impressão que uma interface, por exemplo, alguma coisa tá incomodando, alguma coisa tá estranha ali, e às vezes é muito por não tá simétrico. Então é por isso que a gente tenta usar muito um padrão de colunagem, tanto em dashboard quanto em interface de software, pra gente conseguir, é, que os elementos tenham larguras muito parecidas, alturas muito parecidas, eles sejam simétricos.

17:34 Isso dá uma sensação muito maior de organização, hã, pro que a gente tá olhando.

17:40 Pode passar, Felipe.

17:43 Ponto focal também, que é o caso que eu falei da capa amarela. Então quando a gente tá falando em dados assim, a gente pode utilizar muito bem esse ponto focal, que é você colocar uma cor diferente pra ressaltar um dado ou alguma coisa que tá acontecendo com aquele dado que é importante pro usuário na leitura que ele tá fazendo da tela. Então por isso que a gente tenta deixar cores mais neutras e pegar alguns pontos ali em que a gente possa destacar pra ajudar o usuário também a tomar uma decisão mais rápida.

18:11 Felipe Sebben: Uhum.

18:12 Posso dar uma pequena intervenção nesse ponto, Ane?

18:16 Anna Fernandez: Claro.

18:17 Felipe Sebben: Porque aí eu acho que aqui vale a pena, é, eu sou um ferrenho defensor do uso de z– é, visibilidade de zona dinâmica, zona de– eu nunca sei traduzir direito, mas eu acho que ele, ele dá mui– ele atua muito em favor desse tipo de reforço a esses princípios que a Ana falou, esse último, por exemplo, porque ele permite tu, por exemplo, tu controlar muito o que torna-se visível ou não, conforme o que o usuário quer e conduzir o storytelling, por exemplo, em focos.

18:52 Por exemplo, aqui eu apliquei ele ao selecionar o K-KPI pra que ele aplique cores de destaque ao KPI que tu quer que o usuário, por exemplo, é, é, mantenha mais atenção. Então a gente sabe, por exemplo, aqui, que nós tamo lidando com internações. Inclusive, nós tamo usando aqui pra trocar os gráficos dinamicamente também aqui, mas a gente vê uma coisa por vez, que é, esse é um problema que muitos usuários querem ver tudo ao mesmo tempo e acabam, é, tendo esse esforço cognitivo.

19:23 Aí cabe como nós, às vezes, sugerir que é possível nós, é, darmos esse tipo de ênfase também segmentada, porém, eu apresento o menu, mas um de cada vez, por exemplo. Esse era só o meu comentariozinho contribuindo essa, esse princípio.

19:40 Pode continuar.

19:42 Anna Fernandez: É, pode passar pro próximo, Felipe. O próximo é o encerramento. Normalmente, a referência que o pessoal usa quando tá falando dessa lei da Gestalt é aquele círculo incompleto em que você consegue visualizar o resto do círculo. Então eu acho que quando a gente fala de dashboard, aqui é um exemplo, essas linhas laranjas eu coloquei só indicar pra uma coisa que a gente acaba enxergando como separando esses gráficos, mesmo eles tendo o mesmo fundo branco, assim.

20:10 Nesse, nessa visualização, por exemplo, o Felipe optou por manter eles no mesmo fundo branco, ele não tá separado pelas caixas como no outro, porque quer dizer que indica que é um grupo em comum, mas o nosso cérebro consegue perceber quando um termina e começa o outro. Então essa é a percepção, é, é uma, é bem relacionada à teoria do encerramento.

20:31 Pode ir pra próxima.

20:35 E a final, hããã, é a lei da simplicidade, daí ela tem essa, esse termo em alemão. É, mas é a questão de manter a interface simples, porque às vezes a gente acha que design, eu lembro que eu ti– que eu já ouvi falar na, durante uma experiência de dar um tchan nanã, assim, de dar um tchan na interface, mas, na verdade, se a gente tá pensando em experiência do usuário, a gente quer simplificar.

20:59 Então a gente quer tentar usar mais cores neutras, ter esses pontos focais pra quando a gente quer informar alguma coisa relacionada àquela cor, mas manter sempre o mais simples possível, até porque muita informação visual ali pode gerar, sim, um esforço cognitivo. E essa lei da simplicidade, ela tem várias outras formas que outras pessoas vão abordar até fora da Gestalt, mas sempre pra chegar, inclusive, depois nas heurísticas, a gente vai ver o minimalismo, né?

21:25 Mas é muito nesse princípio de manter simples pra, é, reduzir o esforço cognitivo.

21:32 Felipe Sebben: Uhum. Mais uma coisinha aqui, só rapidinho, posso falar? Pra, pra reforçar esse aqui.

21:38 Anna Fernandez: Sim.

21:38 Felipe Sebben: Hã, que quando a gente tem nesses, nesse caso específico, aqui, indo pra território, esse é um exemplo bem bom, porque aqui eu tive o desafio de, é, gráficos de, geralmente é um, gráficos de dispersão, mapa, eles tendem a ficar distorcidos se a gente não coloca ele em proporções extremamente quadradas. Então ele nunca dava certo os dois, hã, no mesmo, na mesma visualização e já tinha, e dava um esforço cognitivo muito grande, porque são, são gráficos com muitos pontos, né?

22:12 Então tu pode também usar esse recurso de visibilidade dinâmica pra alternar entre um e outro, deixando o todo mais simples também e sempre, é, disponível também pro, pro usuário também. Esse é um outro exemplo também, já indo pra a parte mais, digamos assim, tabulada da apresentação.

22:34 Pode continuar.

22:36 Anna Fernandez: Hã, da parte da Gestalt, essas são as leis. De novo, não precisa decorar todas. Normalmente, a gente vai e pesquisa como a gente vai fazer a interface pra relembrar, mas são leis que acabam ficando muito naturais conforme a gente vai tendo um pouco mais de prática aplicando isso à interface.

22:53 Pode passar pro próximo slide, Felipe.

22:57 Alice Dias: Bom, vamos pras próximas, hã, leis então. É, hierarquia visual. A– cês vão ver que a-as coisas vão meio que se juntando. É, tem várias teorias que acabam falando às vezes a mesma coisa, mas de forma diferente, que, né, se encaixa melhor às vezes em algum ambiente.

23:17 É, hierarquia visual ela fala muito sobre a gente usar, é, tamanhos, cores, espaçamentos, é, parecidos pra coisas parecidas. Então, né, a gente tem um título que sempre vai ser num tamanho um pouco maior, num bold pra se destacar melhor. E aí a gente tem essa leitura que o cérebro humano ele já vai, hã, entendendo, né? Que a gente vê sempre primeiro o que tá mais em evidência, em, em maior tamanho ou em, é, cor mais, mais forte, né?

23:51 Aí depois a gente vem pro segundo, hã, é, pra segunda etapa, que seria ali a descrição, que sempre complementa o título. A terceira já vai pro ponto mais focal central da tela, né, que é o gráfico, algum desenho, né? Uma coisa mais, é, visual mesmo. E aí depois vai mais pro final, pro, pros detalhes da, da imagem. Isso é uma coisa que a gente já faz diariamente em todos os momentos da vida, né, no dia a dia mesmo, e que se encaixa muito bem em dashboards também Pode passar.

24:29 As heris-heurísticas de Nielsen, eu provavelmente acho que a, a mais conhecida assim, é, ooo, existe o Norman Nielsen Group, Group, que é feito pelo Jacob e pelo Norman, que se juntaram pra fazer um, um, é, uma empresa que fala muito sobre usabilidade, mas o Nielsen, Nielsen ele era meio que o pai da, da usabilidade. Então, é, tem um s-um vídeo dele que é muito famoso, que já passou em todos os lugares do mundo, provavelmente alguém, né, aí já viu.

25:03 Mas, é, ele criou essas 10 heurísticas, e não vou falar todas aqui, mas tem, é, um-algumas se, se encaixam bem com as Gestalt também.

25:16 É, mas vamo dar alguns exemplos aqui, visibilidade do sistema. É, basicamente, a gente precisa informar pro usuário qual é o, o, o status desse sistema, né? Se ele, se tem algum erro, se a página tá carregando, é, se algo tá selecionado, se algo não pode ser selecionado, se tá desabilitado, enfim, isso tem que tá muito claro pro usuário pra não ter a frustração, não causar até erros, né?

25:43 De, de usabilidade mesmo.

25:46 É, consistência e padrões também, a Ana falou um pouquinho ali na Gestalt, mas, é, a gente ter, manter esses padrões de tamanho de fonte, sempre o mesmo pra título. É, as cores também sempre, né, uma cor que significa erro, ela nunca pode ser usada pra significar alguma outra coisa, porque, né, a gente vai causar algum erro ali de uso. Então isso é importante manter, né, esses padrões, hã, e a gente faz muito isso no design system, que a gente conversou na, na outra, na nossa outra apresentação sobre design que a gente fez aqui.

26:24 É, algumas outras ali, hã, ajuda e documentação, é sempre importante mostrar e ajudar o usuário, né, com, com informações complementares. Então uma tooltip num gráfico é importante, né, às vezes que não tenha muita informação no próprio gráfico, ter a tooltip mostrando todos os dados, as métricas que foram usadas.

26:49 É, no final do, do dash, às vezes é importante colocar algumas informações complementares.

26:56 É, tem algumas coisas também aqui que se encaixam na heurística, que é entender o que o usuário está acostumado a ver, né? Então, é, combinação ali entre o mundo real e sistema, por exemplo, a gente, um exemplo bem básico é ícones, né? A gente usa hoje em dia o ícone de salvar, que é um disquete, que hoje em dia nem se usa mais. E aí, né, sei lá, daqui a pouco uma pessoa jovem aí que não conhece disquete, nem sabe o que que é o disquete, mas sabe que é um ícone de salvar.

27:33 Então a gente traz essas, hã, esses padrões do mundo real pro, pra web, que pra gente conseguir, é, identificar o que que é, né?

27:45 Pode passar, eu acho, hã, é bem extenso, né? São 10 heurísticas, não vou passar em tudo, mas esse, esse ponto eu acho, as 10 heurísticas eu acho bem interessante dar uma lida, porque vale pra muita coisa também.

27:59 Aí sobre consistência visual, eu falei um pouquinho ali antes, mas enfim, a gente ter essa consistência de cor, de tamanho, de, que represente a mesma coisa, né?

28:10 É, na vida de design a gente vê muito, hã, eu não trabalho mais com dados, hã, diretamente, mas eu lembro que a gente via muito, tipo, não, tem que mostrar muita cor. É, a gente precisa evidenciar as coisas com cores. Hoje em dia eu também, na empresa que eu trabalho, às vezes eu, eu tenho essa, essas questões. Tipo, eu preciso mostrar um erro com uma cor vermelha muito grande na tela.

28:36 E às vezes não é bem assim, né? Quanto menos a gente tem cor numa tela, às vezes é melhor, porque se eu uso um, um fundo cinza, por exemplo, e eu tenho uma evidência numa cor laranja, esse laranja vai me saltar muito mais aos olhos. Então eu não posso colocar tudo que eu quiser de laranja na tela. Eu quero evidenciar pontos importantes, né? A gente usa muito cor quente, né, pra esse tipo de, de coisa, justamente pra evidenciar mais na, na tela mais sóbria.

29:06 Pode passar.

29:09 E a lei de Hick, que é limitar as opções, hã, que ajuda muito, né, na hora de visualizar as informações que a pes-que a, que o usuário precisa. Aqui a gente colocou como exemplo os filtros, né? O, o filtro ajuda muito a não, a gente não precisa mostrar todas as informações de uma vez só.

29:32 É, às vezes tem alguns dash-dashboards que várias pessoas de determinados, hã, meios usam o mesmo, e aí não, mas eu preciso usar só tal filtro. Eu vou direto nas informações que eu preciso, é muito mais fácil fazer essa filtragem e mostrar só as minhas necessidades nessa tela. Outra coisa que o Felipe usou ali que ajuda nessa setorização, é, são as tabs ali, né, então, é, dividir em, em tabs, além de ajudar a carregar muito mais fácil, ajuda também a setorizar essas informações e diminui muito a carga cognitiva do usuário que, né, se eu tô vendo essa tela aqui, eu sei que eu tô falando sobre, que eu tô vendo informações sobre território.

30:19 Então vai me ajudar a fazer esse filtro mental e não precisar, é, entender O assunto, né, sobre o que que é esse, esse, esses dados.

30:31 Então essa setorização ajuda bastante.

30:35 Felipe Sebben: É. E essa parte específica de filtros é sempre uma coisa muito corrente no trabalho, né? Sempre se pede mais filtros.

30:41 A gente sempre pode usar essa, esse con– essa ideia dessa lei de quando a gente tem alguns também, de colocar ele, por exemplo, em um– aqui no caso, ele é um, é um container que é, é flutuante mesmo aqui, mas que aparece só quando é necessário mesmo, tu deixa apenas aqueles que são usados, por exemplo, com mais frequência visíveis o tempo todo e não vai adicionando cada vez mais filtros, é, sempre visualmente disponíveis, né?

31:10 Só um adendo.

31:12 Alice Dias: Ali, pode ficar ali que eu vi um detalhe sobre o que eu falei sobre ajuda e, e documentação, que tem ali em cima, né, como usar, glossário e tudo. Isso é um grande exemplo de ajuda e documentação, né, que guia o usuário, é, a entender melhor, né, como, como usar esse dash.

31:32 Felipe Sebben: Isso. Eu confesso que eles não tão prontos ainda, tá? Mas eu-

31:35 Alice Dias: Não, mas

31:36 Felipe Sebben: Mas eu, eu faço e deixo publicado também disponível.

31:41 Alice Dias: Fazer exemplo de conta.

31:43 Felipe Sebben: Mas, sim, a ideia é que eles, é nós– é bem um bom costume sempre ter também dentro, até dentro do próprio produto, e não um, um PowerPoint que logo fica ven– hã, vencido, né? Que fica desatualizado fora do dashboard, né?

31:58 Verônica Simões: Sim.

32:01 Acho que dentro do pro– dentro do produto, só complementando, é melhor, né? Você já clicando glossário e ele já apontar pra dentro e explicar o que cada, né, KPI tá, tá, significa, né? Eu acho.

32:14 Felipe Sebben: Isso.

32:14 Verônica Simões: Só complementar uma parte de filtro também, as, hã, outra, esse de mais filtros, às vezes o usuário quer ver todos os filtros na tela e, né, fica impossível lá em cima. Aí você pode também colocar um container do lado direito, do lado esquerdo. Preferência, né, do, do direito. E ele abre sozinho quando cê clica mais filtros e bota ali os, os-

32:36 Felipe Sebben: Isso.

32:37 Verônica Simões: Os filtros lá e ele se esconde automático também. Fica legal.

32:41 Só aqui.

32:43 Uma ideia.

32:44 Felipe Sebben: Isso, é, geralmente, é, usuário, dois pedem um filtro específico. Em noventa por cento dos casos, ele nunca é usado, né?

32:53 Verônica Simões: Sim.

32:53 Felipe Sebben: Por exemplo.

32:54 Alice Dias: É, eu acho que é um bom, um-uma boa entrada pro próximo tópico que a gente tem ali sobre usuário, né?

33:03 Anna Fernandez: É, até um pouquinho antes de entrar nesse, a questão da, dessa questão de mostrar os filtros e o usuário querer ter todos os filtros na pá– e às vezes a gente mesmo quer, a gente quer tudo que tem disponível nesse dado, eu quero fazer uma série de visualizações. Mas existe um experimento bem clássico relacionado a isso, que é o da ge– dos potes de geleias, que era uma barraca com trinta potes de geleias, em comparação com uma barraca com quatro potes.

33:29 E o que se constatou é que na garrafa com quatro potes, as pessoas conseguiam escolher e levar geleia, e nas com trinta, as pessoas ficavam tão indecisas em relação às várias opções, que elas não sabiam nem o que escolher pra levar. Então é daí um pouco que vem essa teoria, assim, da gente tentar de voltar um pouco pra simplicidade, limitar as opções, pra que seja mais fácil que a pessoa tome a, uma ação em relação a isso.

33:54 Claro que daí a gente tem esses recursos que, sim, os filtros vão ser úteis pra alguns usuários, então eles vão tá disponíveis, mas só não vão tá à vista ali, vão tá já, podem ter se– nesse uso de containers ou nesses, nesse link de mais filtros.

34:07 Alice Dias: Eu acho que tem também diversas formas de fazer o filtro, né? Às vezes não é um filtro. Por exemplo, as tabs nada mais são do que filtros, só que formas diferentes de fazer essa filtragem, né? Às vezes até engana, né, o cérebro de tipo: "não, é muito mais fácil usar as tabs ali, que eu já tenho tudo pronto, do que entrar no filtro e fazer uma combinação deles", enfim.

34:31 Felipe Sebben: Uhum. Isso.

34:35 Alice Dias: Pode passar pra próximo.

34:36 Felipe Sebben: Posso passar?

34:41 Alice Dias: Tá, agora a gente entra um pouquinho mais no, na questão do usuário em si, né? A gente sempre precisa entender pra qual usuário a gente tá criando uma interface. Então nada adianta, é, a gente aplicar todas as leis de design, a gente, né, fazer o melhor dash, mais bonito, mais funcional, se ele não atende o usuário. Então acho que o, o ponto principal aqui é esse e também entrar num ponto de que é isso, às vezes é um usuário que vai, vai precisar de uma coisa específica e realmente não vai atender a todos.

35:18 A gente precisa filtrar isso, né, fazer um, é, uma prioridade ali do, do que é preciso mostrar e daqui a pouco fazer um outro que mostre outra coisa, enfim, mas sempre entender quais são os pontos principais de cada usuário. Importante também saber o nível de informação que esse usuário consegue extrair de certo, hã, gráfico. Enfim, não adianta a gente fazer um gráfico belíssimo e o usuário não saber ler.

35:48 Ele tá muito acostumado com Excel, com tabela. E o que vai funcionar pra ele às vezes vai ser uma tabela.

35:53 E em tabela a gente consegue também aplicar muitas leis de design, a gente consegue fazer uma tabela boa e uma tabela ruim. Então, é, vai de acordo com o entendimento mesmo do usuário.

36:06 Quer falar um pouquinho, Ana, sobre isso?

36:08 Anna Fernandez: Hã, sim. Eu acho que quando a gente fala do usuário, eu acho que quando a gente fala principalmente de, da produção, hã, de dados, a gente fala na primeira etapa de ver os requisitos, mas quando a gente fala de usuário, a gente quer entender, ok, tem esses requisitos de dados, mas quem é que tá usando esses dados? Quem é que vai analisar? Quais são os grupos de pessoa analisando?

36:29 O que que essas pessoas vão fazer? Qual é a jornada delas? Assim, que momento do dia? Ou é uma vez por dia, uma vez por semana? O que que tá acontecendo ali? O que que elas vão extrair dos dados? Que informações e que decisões elas vão tomar? Acho que essa, essa é a principal pergunta, né, que a gente fala qual é a pergunta que esse dashboard tá respondendo.

36:48 Isso é bem importante, porque a gente pode ter um dashboard que segue todos os fundamentos, como a Alice falou, mas ainda assim é muito difícil pro usuário tomar as decisões, porque talvez as informações não estão– não estejam no melhor formato pra esse usuário tomar a, essas decisões. E a gente tem algumas coisas que a gente pode evitar. Então, por exemplo, evitar métricas de vaidade, né?

37:08 Então evitar alguns dados que a gente pode olhar, ah esses dados, números absolutos, normalmente, que a gente encontra ali nos dados, mas que, na verdade, o usuário não tem muito o que fazer com aquilo, ele não tem uma ação pra usar esse dado. Talvez a gente pode pegar esse, e-essa número absoluto, igual o Felipe colocou, tentar ver um te– um período temporal ali pra entender o que tá acontecendo, pra pegar uma linha de tendência.

37:31 Tentar ver outras formas de mostrar aquele dado em que de fato o usuário consiga enxergar alguma coisa que vai exigir uma ação dele. Então evitar também, é, atender muitos grupos de usuários. Então às vezes, normalmente, as equipes procuram a gente prum gráfico– prum dashboard bem genérico que atenda toda a empresa.

37:49 Isso vai ficar muito, assim, vai– pode– a gente vai ter aquela, aquela série de filtros, porque cada usuário pode ter uma necessidade, cada time vai ter uma necessidade. Então, a, a gente evitar, e também o recurso que o Felipe usou de, de páginas do dashboard também é um pouco pra isso. Cada página pode atender um time ou, ou mesmo uma jornada do time, né?

38:10 Algum, alguma resposta que o, que o usuário tá procurando naquele momento.

38:15 E também, como a Alice falou já, a questão de, é, evitar, às vezes, criaç– essas criações de via– visualizações muito complexas pra usuários que não têm ainda tanta familiaridade com gráficos, né, que é a questão que a Alice falou das tabelas.

38:30 Felipe Sebben: Isso.

38:31 Hã, nós temos mais antes disso. É, a minha contribuição como desenvolvedor é, é isso mesmo, assim, propositalmente, esse dashboard pode atender a padrõ– a princípios de design até certo ponto, sim, mas ele não tem uma persona específica, ele realmente ele padeceria de, de– dessa, que pra mim é uma das partes mais difíceis, tá? E, e propositalmente eu fiz com alguns gráficos complexos, coisas que eu, no dia a dia, raramente consigo implementar, mas é uma das partes que é muito importante e que nos diferencia ainda como profissionais também de, é, outras ferramentas já mais na área de IA, que é nosso domínio da área, assim, que vai ser sempre importante.

39:18 Então, é, tem gráficos aqui que dificilmente eu consigo implementar, ma-mas que, enfim, até propositalmente mostrei pra mostrar que, é, embora a gente consiga atender a um, a um padrão aqui, eles realmente às vezes não, nem sempre vão, não, não atendem a essa ideia de uma pessoa que vai tá usando isso, tá?

39:45 Hã, dito isso, acho que a gente pode, acho que é um dos últimos tóp-tópicos, né? Gente, se vocês têm sugestões de como utilizar, falando já de IA, né, na criação do visual de dashboard, você pode começar com os de vocês e eu domino a partir daí.

40:04 Anna Fernandez: É, e hoje eu acho que muitas ferramentas de IA, elas já seguem alguns princípios, sim, até com base no treinamento que elas têm, mas a gente sempre consegue melhorar a interface que a gente tá criando com IA, hã, usando skills, no caso do Claude, usando as regras, no caso do ChatGPT. O Google também tem, normalmente, tem um arquivo design ponto MD em que você lista as regras.

40:28 E você pode pedir pra IA tanto pra ela fazer uma pesquisa por esses princípios e aplicar a interface, ou você mesmo listar e explicar, hã, qual seria o passo a passo pra fazer, pra aplicar isso à interface. E isso pode ser feito tanto na hora que cê tá desenvolve– é, desenvolvendo um protótipo, assim, é, fazendo alguns experimentos, é, ou pr– ou fazendo a criação da interface final, mas a gente também usa muitas vezes como um avaliador pra ajudar a gente avaliar as pró-pró-pró- as nossas próprias interfaces.

41:01 Então a gente terminou de fazer um dashboard, por exemplo. Provavelmente, pode ser que a gente tenha esquecido de alguma coisa, a gente foi mudando muito e pode ter alguma coisa que ficou um pouco desalinhada. A gente passa esse checklist pra IA e ela mesmo vai, vai vendo se eu tô cumprindo todas essas regrinhas, se tem alguma coisa fora de lugar ali pra que eu possa corrigir.

41:25 Alice Dias: É, eu dando uma, uma, um exemplo da forma que eu uso, eu criei uma skill que eu tenho as regras de, do design system da, da, do produto que eu trabalho e implementei as heurísticas ali dentro. Então, é, sempre que eu termino um projeto, que eu tô finalizando ele, eu dou essa varredura ali pra ele me dizer se po– tem algum ponto que precisa melhorar a partir disso, né?

41:54 Tanto das heurísticas quanto da, do, dos princípios de design da própria, do próprio produto. Então essa combinação acho que é muito boa. A gente consegue usar, é, eu particularmente não consigo finalizar um protótipo com IA, mas me ajuda muito nessa parte de discovery também. Eu tenho uma skill de discovery que nada mais é, né, hã, o, o início do projeto pra entender quem são os usuários, entender, é, pegar algumas referências de mercado.

42:27 É, ela me sugere, inclusive, se eu devo fazer uma entrevista com o usuário, um teste de usabilidade no final, enfim, tudo isso, é, me ajuda bastante. E aí com um pro-protótipo de baixa fide-fidelidade que eu peço pra, pro Claude gerar No início, né, pegando todas essas informações de discovery, é, eu parto pro protótipo daí final. E isso evita acho que uns três dias aí de trabalho.

42:54 Ééé, mas ainda assim, né, precisa desse refino no final e, e, e também no– eu faço o refino final, mas também com a ajuda, né, da, do, dessa skill.

43:08 Felipe Sebben: Isso. Realmente, tem a parte eu– é, esse dashboard foi feito muito com a ajuda de Claude, sim, eu coloquei realmente como skills também os– esses princípios que nós abordamos. Ele gerou os wireframes até certo ponto, sim, né? É, o, a parte de Tableau, é, fo– eu fiz ainda, é, eu mesmo, mas ele

43:33 eu não tive que corrigir uma boa parte do que foi apresentado, então ele é muito bom nisso também, até pra quem, é, quer já um, um, uma estrutura que atenda essas necessidades, assim, ele já ajuda muito também e é uma excelente ferramenta também, que vai bem nesse sentido também no momento de desenvolver os dashboards.

43:57 Alice Dias: Mas também, né, em contrapartida, como o Felipe falou, é, é sempre importante entender o usuário, né? A gente nunca vai conseguir-

44:05 Felipe Sebben: Isso.

44:05 Alice Dias: Que o– que o, que a IA substitua o usuário, porque de fato ela não é, né? Ela só consome o que tem, o que, o que as pessoas colocam ali, mas não substitui de forma alguma esse tato, né, que a gente consegue ter conversando com as pessoas ou, né, entendendo de fato as necessidades dela.

44:25 Anna Fernandez: Até no próprio uso da IA, é importante a gente sempre colocar o contexto da empresa, o contexto do produto e colocar o que a gente teve de achados conversando com usuários, né? Pra que a IA tenha esse con– tendo mais contexto, ela deixa de entregar uma interface genérica e ela entrega uma interface mais direcionada praquele público que a gente ta– vai entregar essa interface.

44:49 Felipe Sebben: Isso.

44:50 É muito curioso que o usuário, hã, isso acho que é até, até uma, é– o usuário, provavelmente, se ele interagisse com a IA solicitando um dashboard dele mesmo, ele iria solicitar muitas coisas. E geralmente o que acontece costuma ser dashboards enormes, ou pelo menos o que eu vejo compartilhados, são dashboards com muitos dados.

45:11 É, e talvez a resposta que ele daria, ou que nós darí– conseguiríamos se– ao entender o que ele precisa, seria uma– atenderia talvez de uma maneira mel– não vou dizer melhor, mas talvez mais eficiente do que ele, hã, ao fazer as mesmas perguntas pra IA, né?

45:31 Então ainda acho que mesmo que ela– ele conseguisse fazer tudo por si mesmo, talvez o resultado final seria bem diferente ainda assim, né?

45:40 Alice Dias: É, até porque a IA não questiona muito, né? Ela não diz não, e a gente, u-u-um grande papel de design é dizer não e questionar muito o porquê das coisas. Então ainda não, não estamos sendo substituídos 100%.

45:55 Felipe Sebben: É, é isso mesmo.

45:59 Bom, gente, pra, pra encerrar aqui, hã, aqui ficam nossas referências. Acredito que aqui temos as referências de mais de design, que eu fui responsável e não deixei nenhuma, né? Hã, não se– hã, não sei se vocês querem comentar, Ana, Alice?

46:19 Alice Dias: Não, a gente só trouxe alguns links de informações. Ali tem o NN Group, que é do, do Norman Nielsen Group.

46:29 É, basicamente, vocês vão encontrar tudo lá. Tem absolutamente tudo sobre usabilidade dentro desse, dessa plataforma.

46:39 Hã, tem ali a, a, o site oficial do Gestalt também e alguma coisa ali sobre a lei de Hick também, que é um, um, um artigo. O Medium tem bastante coisa interessante também sobre design e usabilidade, é, mas só alguns links que a gente usou como referência aí.

46:55 Felipe Sebben: Uhum. Eu deixo como minha referência só final, que depois eu posso editar na apresentação, é o Aurélien Vaultier, que é um francês muito bom na parte de visualização de dados. É também uma referência. Ele produz conteúdo muito bom, ele tem cursos e também bom– muito do que eu aprendi também com ele desse, dessa cruzamento com design e UX e dados, visualização de dados foi com ele também.

47:20 Eu con– eu deixo também nas referências.

47:23 Verônica Simões: Tá, depois quando você editar, aí a gente compartilha o, a apresentação, coloca lá no, no, no link do grupo, né? Pra quem quiser baixar lá no Bev.

47:34 Felipe Sebben: Tá, tá, deixo sim.

47:38 E é isso aí.

47:39 Verônica Simões: E aí, pessoal, dúvidas? Alguém quer fazer alguma pergunta?

47:46 Aproveitem pra fazer pergunta.

47:51 Felipe, depois aí esse dashboard que você, você publicou no Public, que aí a gente compartilha com o pessoal.

47:57 Felipe Sebben: Sim, sim, já tá disponível no Tableau, no meu perfil do Tableau Public também. Essa é outra referência que posso deixar. É, eu ainda vou alterando ele aos poucos, porque ele é um dashboard um pouco complexo, mas eu vou, eu vou– ele já tá disponível e o que foi apresentado hoje já, já está lá.

48:17 Verônica Simões: Ótimo, que aí a gente depois vai se compartilhar a gravação. Amanhã ou depois já tá disponível, aí o pessoal, todo mundo que assistir vai receber a gravação, quem se inscreveu, tá?

48:27 Felipe Sebben: Tá. Ótimo.

48:28 Verônica Simões: E também vamos disponibilizar aí na rede social.

48:32 E no YouTube, né?

48:34 Tá ótimo, pessoal. Adorei, né. Que bom que cês voltaram. Espero, espero que venham novamente, né.

48:41 Acho que tá na hora da gente trazer aí a-algumas integrações, se vocês tiverem aí propostas. Aí com o Figma mesmo, que vocês, né, comentaram, e outras até, né, que a gente possa demonstrar, né, com Tableau ou com essa parte toda de visualização, né. Como fazer prompts melhor, hã, melhores ou criar skill, né, é, é pra ajudar no seu dia a dia e com certeza, né, IA não vai substituir tão cedo aí o que a gente tem que, que, que propor aí pro usuário.

49:16 E você vê, né, é, só complementando, muitas vezes, assim, a mesma pergunta, o mesmo dashboard, os mesmos dados que você compartilha, né, entre pessoas diferentes, compartilhados com a IA, saem coisas totalmente diferentes, insights totalmente diferentes. É muito engraçado, né? Eu fiz essa experiência há pouco tempo com meu time, né, e gozadíssimo como um prompt muda completamente, né, é, a proposta, né?

49:44 Muito interessante.

49:46 Acho que a gente tem que explorar bastante e você trazer aqui pro, pro grupo.

49:50 Obrigada aí a todos pela participação.

49:54 Felipe Sebben: Não, não.

49:55 Verônica Simões: Foi excelente.

49:56 Felipe Sebben: Eu que agradeço. Agradecemos.

49:58 Verônica Simões: Muito bom.

50:00 Obrigada, pessoal. Tchau, tchau. Boa noite.

50:02 Felipe Sebben: Obrigado.

50:03 Anna Fernandez: Tchau, boa noite.

50:03 Felipe Sebben: Noite. Obrigado.