Experimento de densidade de UI feito com Svelte

• Grid é um experimento em que o usuário pode ajustar a densidade da UI, e uma nova versão está em desenvolvimento
• Matrix, um projeto na mesma linha, mostra uma matriz de correlação do S&P 500 e do NASDAQ-100 com foco em uma densidade de UI ainda maior
• Ao selecionar os papéis que compõem o S&P 500, ele lida com correlações de mais de 250 mil células e mais de 30 milhões de pontos de dados
• Alguns recursos não aparecem na prévia abaixo; para avaliá-los, é preciso abrir a UI em tela cheia do Matrix
• O material do site é apenas para fins informativos e não deve ser considerado aconselhamento de investimento nem recomendação de compra ou venda de valores mobiliários

---

Experimento de densidade de UI de Grid para Matrix

• Grid foi um projeto que experimentou densidade de UI personalizável, e uma nova versão está em desenvolvimento
• Matrix é um experimento que leva a densidade de UI ainda mais longe, oferecendo uma matriz de correlação em grande escala do S&P 500 e do NASDAQ-100
• É possível ver parte do Matrix na prévia abaixo, mas alguns recursos só estão disponíveis na UI em tela cheia do Matrix

Escala dos dados tratados pelo Matrix

• Ao selecionar os papéis que compõem o S&P 500 como conjunto de dados, ele inclui mais de 250.000 células
  • Calcula correlações de mais de 30.000.000 de pontos de dados
  • Mais informações podem ser vistas na página About do experimento Matrix
• A página home fornece uma visão geral de todos os experimentos de visualização de dados disponíveis atualmente

Controles que podem ser verificados na prévia

• Em Dataset, há as opções S&P500 e NASDAQ100
• Em Horizon, é possível selecionar 1M e 1Y
• Como opção de pré-processamento de dados, há a caixa de seleção Detrend Data
• As opções relacionadas à ordenação são as seguintes
  • Sort By: Cluster, AvgCorr, MedCorr, Name
  • Cluster Method: Avg, Complete, Ward
  • Sort Direction: Asc, Desc
• A UI de prévia inclui Minimap, Search, Rolling Correlation Chart e orientações para hover e click nas células
• No estado exibido, aparecem Symbols 101, Correlations 5,050, Cells 10,201

Pontos de atenção ao usar

• O material do site é apenas para fins informativos e não constitui aconselhamento de investimento nem recomendação de compra ou venda de valores mobiliários

[GN⁺]

Opiniões no Hacker News

• Como lido muito com dados em formato de tabela, prefiro ver o máximo possível em uma única tela. A maior influência no design dos meus relatórios foi, surpreendentemente, o iTunes: espaçamento só na medida necessária, linhas listradas, ordenação rápida e fácil e, quando possível, uma estrutura parecida com um navegador por colunas. Uso o DataTables há anos com satisfação
  Ultimamente venho fazendo experimentos entre ordenação e exibição. Se uma issue trazida do Jira está bloqueada, fico pensando se preciso de uma coluna booleana separada para ordenar/filtrar, ou se basta aplicar estilo a outra coluna (por exemplo, tempo decorrido). Estou vendo se, em uma tabela com mais de 100 linhas, apenas valores em laranja, vermelho e vermelho em negrito em uma célula são suficientes para identificar os itens que precisam ser tratados agora
  Do modo de visualização em tabela desse experimento, gosto da atualização em tempo real, da ordenação estável em várias colunas, do destaque da linha ao passar o mouse, do esmaecimento dos zeros à direita, das cores sem exagero (basicamente uns três pares) e dos gráficos tipo sparkline nas colunas 24H Low/High. O que deixa a desejar é a barra de rolagem horizontal quase invisível, a barra de rolagem vertical larga com gráficos acoplados, a falta de clareza sobre como 24H Low/High é de fato ordenado e a ausência de filtragem. Também noto que, em comparação com meus relatórios, a variação na largura dos valores não é grande. Quando há texto misturado em vez de apenas números, gerenciar a largura das colunas fica mais difícil
  • Lembro de ter adiado a atualização para o Catalina por medo de que o iTunes.app desaparecesse. Era um app totalmente subestimado, e fiquei muito feliz ao ver que o Music.app era praticamente o mesmo app e que a migração também era fácil
  • DataTables é excelente. Uso em um produto há mais de 10 anos. Continuo procurando uma alternativa mais nova e melhor, mas ainda não encontrei
  • Também estou experimentando o desenvolvimento de um app para Mac que se integra ao Jira ou a outros trabalhos que avançam de forma assíncrona. Eu estava mais interessado no controle sobre o que receber como notificação e quando, do que na própria visualização dos dados, mas este comentário e a UI me deram vontade de tentar outras ideias nas quais eu estava travado para a tela principal de dados
  • Você está falando de formatação condicional que representa magnitude por cor?
• Gostei bastante da forma como a barra de rolagem da tabela foi expandida, como o minimapa de um editor de código, para conter informações adicionais. Ajuda a entender de relance onde os dados na tela ficam dentro de um conjunto de dados maior
  A hélice me parece difícil de ler e pouco útil. Esse tipo de gráfico combina melhor com dados periódicos cujo período é muito mais curto que o intervalo total dos dados
  O cubo despertou curiosidade, mas não vi bem a vantagem. Em geral, visualizações 3D são menos eficazes do que mostrar a mesma coisa em três gráficos 2D (neste caso, três gráficos de dispersão). Isso acontece porque a projeção de 3D para 2D introduz distorções, e também atrapalha a nossa percepção básica de comparação de posições. Fiquei curioso sobre qual era o efeito pretendido aqui
  • Só para deixar claro, não sou o criador deste belo projeto
  • Na verdade, vim aqui para falar justamente de como a aba de hélice é incrível. Por exemplo, acho que poderia ser usada para plotar a volatilidade de ações e outras commodities, especialmente derivativos
    A forma como permite olhar para o passado da maneira mais natural possível, enquanto faz os dados recentes aparecerem maiores, é realmente genial. É difícil acreditar que eu nunca tinha pensado nisso
• Espero que projetos como este sejam um sinal de retorno a interfaces bem projetadas, mas com alta densidade de informação e economia de espaço
  Desde o "Material Design", que o Google praticamente enterrou, houve desperdício demais com inchaço, espaços em branco, espaçamentos excessivos e essa ideia de “respiro”
  Sonhar não custa
  • No mobile, os alvos de toque precisam ter tamanho de dedo, então algum nível de UI espaçosa é necessário
    As empresas não querem projetar duas UIs muito diferentes para cada plataforma, e, em geral, os usuários querem que o modo de uso aprendido em uma plataforma se transfira para outra
    A acessibilidade também fica mais fácil quando o design tem folga para fontes grandes e não exige controle motor preciso. Ao ver meu pai envelhecer de forma perceptível, venho percebendo que até apps que parecem espaçosos não são suficientes desse ponto de vista
    Enquanto as forças que nos empurraram nessa direção desde o início não mudarem, não sei bem como poderíamos voltar a designs com alta densidade de informação

  • starting with (now Google-dead) "Material Design"
    Achei que ainda estivesse em desenvolvimento ativo. Você quer dizer que o Google matou isso?
    https://m3.material.io/

  • Acho que isso começou na Apple na transição do OS 9 para o OS X. Na época eu não conseguia explicar, mas ainda acho uma pena o quanto de espaço caro da tela era desperdiçado
• Acho que neste experimento falta um elemento central ao projetar densidade de UI: tipografia
  Essas telas usam uma fonte monoespaçada de tamanho único. É retrô, como uma UI em modo texto dos anos 1980, e tudo bem se essa era a restrição pretendida
  Mas, se fosse possível criar uma hierarquia adequada de fontes e tamanhos, daria para colocar muito mais informação na tela
  Como exemplo básico, a caixa “About” hoje ocupa quase 1/4 da tela de um celular. Se fosse trocada por uma fonte proporcional menor, ainda legível no celular, daria para colocar essa informação em metade do espaço
  Ao observar o trabalho de grandes designers de informação como Edward Tufte, muitas vezes se vê uma obsessão em acertar a tipografia. Os livros dele usam vários elementos e escalas tipográficas até no texto corrido fora das visualizações
  • Há alguma obra específica de Edward Tufte que você recomendaria sobre esse tema?
• Será que algo como Perspective seria um comparativo adequado? (https://perspective.finos.org/)
  Fico curioso se o foco é desempenho, visualização ou densidade relacionada a outra coisa
  • Carregou muito mais devagar do que o site original. Para constar, a aba de hélice do original é realmente impressionante
  • Quando abri pela primeira vez, achei que tinha sido feito com Perspective
    Definitivamente dá a sensação de ter recebido muita influência
• Ao criar apps financeiros com muitos dados em Windows Forms, uma coisa de que gosto especialmente é o controle DataGridView. Ele tem filtragem, ordenação, reordenação/redimensionamento de colunas por arrastar e soltar, e ainda mantém alta densidade e desempenho. Nem precisa de paginação. Se você quiser colocar 10.000 linhas, é só colocar. A maior parte das UIs que fazemos são telas cheias de painéis DataGridView. É feio? Sim. É rápido? Também

Tentativas de criar uma UI semelhante em React tiveram desempenho ruim e, em geral, fracassaram. Para obter desempenho de renderização aceitável, a tabela de dados desviou completamente do React. Mesmo assim, para impedir que a renderização do próprio navegador ficasse insuportavelmente lenta, foi preciso minimizar o número de elementos DOM por linha

• WinForms provavelmente ainda é meu framework de UI favorito. Com certeza é uma ferramenta meio bruta, mas dá para brandi-la à vontade. É extremamente flexível, bem fácil de usar, bastante rápido e terrivelmente feio
  Você pode jogar qualquer Object arbitrário nele e simplesmente funciona. Dá para aninhar um PropertyGrid dentro de outro PropertyGrid, expandir para coleções de objetos e aninhar controles na profundidade que quiser. Não é preciso mexer nem se preocupar com a estrutura interna do objeto ao qual a UI está conectada (com limites, claro)
  Para mim, WinForms é o ideal platônico de um framework de UI. Se eu fosse projetar um, acho que faria exatamente assim

• Gosto muito de densidade de informação
  Coleciono jornais antigos, e naquela época a densidade de informação era muito maior. Se você estiver procurando um ótimo livro de mesa, procure por "nytimes complete front pages". Havia uma quantidade enorme de informação essencial acima da dobra
  Vejo alta densidade de informação como equivalente a alta inteligência. Acertar as prioridades de ordenação é muito valioso e importante
  Nos últimos anos, a web parece ter ido na direção oposta, então é bom ver que ainda há gente remando para o outro lado
  Outro exemplo: meu blog foi projetado para permitir ver cerca de 20 anos de posts de uma só vez usando zoom (https://breckyunits.com/)
  Também devo lançar em breve um trabalho para promover cheat sheets de alta densidade de informação e torná-las mais fáceis de criar. Estou pensando em fechar no nome Leet Sheet (https://pldb.io/blog/leetSheets.html)

  • I think high information density === high intelligence.
    Quando você espreme muita coisa de uma vez na tela com fontes pequenas, margens pequenas etc., surgem muitos problemas de acessibilidade até para pessoas inteligentes
    Empresas como o Google aumentam espaços em branco e padding para tornar a UI acessível a mais pessoas. Não é só uma questão de visão: há também problemas físicos, como Parkinson, que dificultam clicar/tocar com precisão em alvos pequenos, e questões de neurodiversidade em que texto ou elementos demais na tela ao mesmo tempo podem, só pela quantidade, causar desorientação (por exemplo, epilepsia)
    Mesmo uma pessoa muito inteligente pode se beneficiar de uma UI bem projetada e acessível. Não se deve presumir que pessoas que precisam desse tipo de ajuda sejam menos inteligentes

• Isso é interessante porque prova algo sobre minha visão e minha compreensão visual
  A visualização "Grid" é perfeitamente aceitável. A visualização "Table" é inutilizável
  Tenho muitos problemas de perder em qual linha estou ao percorrer horizontalmente linhas longas assim. Percebi que isso se deve a uma tendência de minha dominância ocular se deslocar um pouco para a direita quando o olhar se move. Meu alinhamento binocular é sutilmente desalinhado e uso correção prismática; uma mudança recente nessa correção melhorou a situação
  Nesta apresentação, a posição das linhas indicadoras nas colunas low/high piora ainda mais o deslocamento acidental entre linhas (que sempre acontece para cima)
  Para mim, acho que o gráfico de linha funcionaria melhor como plano de fundo da célula ou na parte inferior da célula. As linhas também precisam de um listrado sutil
  A lição que tiro, como alguém que é um leitor rápido e competente e não tem deficiência visual ou cognitiva, é: não presuma que seja aceitável colocar informações ao longo de linhas largas nesse tipo de tabela. É preciso oferecer ao usuário pistas para se prender à linha enquanto ele percorre horizontalmente. Linhas divisórias finas não bastam, e mudança de fundo no mouse over não funciona em dispositivos de toque
  No estado atual, quando me deparo com algo assim, costumo desmaximizar a janela, reduzir sua altura e rolar a página usando a parte inferior da janela ou a barra de título de outra janela como uma “borda” consistente para ler os dados. No iPad, já usei papel ou um cartão

  • A dificuldade que você tem com a tabela parece ter muito mais a ver com o design do autor, especialmente a escolha de cores
    Primeiro, como mencionado, o contraste entre a linha sob o mouse ou destacada e as demais é baixo demais. Mesmo eu, com visão ok, acho difícil de ver
    Segundo, para legibilidade, linhas ou colunas de tabela deveriam ser listradas com duas ou mais cores de alto contraste. Por exemplo: branco, preto, branco, preto. Esta tabela é preta do começo ao fim
    Terceiro, o contraste das bordas da tabela é baixo demais, a ponto de serem quase invisíveis. Combinado com a cor única de linhas/colunas, isso prejudica ainda mais a legibilidade
    Em resumo, a tabela em si está ok; as cores são péssimas

• Os elementos de UI aqui parecem muito legais, mas também fiquei curioso sobre qual era o experimento e que conclusões foram tiradas
  Olhando apenas para o número bruto de elementos interativos, na minha experiência (Svelte 4), a renderização costuma dar problema antes da interatividade. Ou seja, você encontra problemas de desempenho no mesmo número de elementos, independentemente de eles serem interativos. Como foi implementado em algumas partes desta página, a solução é ir para canvas

  • Svelte pode ser usado com componentes sem renderização. https://imfeld.dev/writing/svelte_domless_components
    Svelte também pode desenhar em canvas. Há também o Threlte: https://threlte.xyz/
    Em relação ao desempenho interno do Svelte, não acho que algo como Jotai seja tão necessário quanto no React para evitar rerenderizações desnecessárias

  • you run into performance problems at the same number of elements regardless of whether they're interactive. As you implemented for the some of these pages, the solution is to go to a canvas.
    Surpreendente. Eu achava que a vantagem do Svelte era fazer atualizações de DOM muito precisas e eficientes graças à etapa de compilação e à ausência de virtual DOM. Mesmo nesse paradigma, uma tabela grande simples ainda é um problema? Entre os elementos daqui, quais, por exemplo, poderiam ter sido renderizados em DOM, mas precisaram de canvas puramente por desempenho?

• Combinar Svelte com um ótimo framework WebGL como Phaser permite renderização gráfica muito rápida: https://phaser.io/news/2024/03/official-phaser-3-and-svelte-...

• Aquele gráfico de hélice é realmente atraente. Não sei bem se dá para usar na prática, mas visualmente é incrível
  Se isso era um experimento, qual foi a conclusão?

  • Parece que não funciona no Firefox; é só comigo?