O significado da densidade de UI e como projetá-la

A densidade da interface está diminuindo

• Ao comparar os sites e aplicativos atuais com os dos anos 2000, é difícil ignorar a tendência de o software estar mais espalhado.
• O que é densidade de UI?
  • A densidade de UI não é a aparência da interface em um momento específico
  • Ela está relacionada à quantidade de informação que a interface oferece ao longo de vários momentos
  • Trata-se de como as decisões de design conectam esses momentos e de como isso se conecta ao valor que o software oferece

Densidade visual (Visual density)

• Quando pensamos em densidade, a primeira coisa que vem à mente é o visual
• Densidade visual significa quanto é possível ver em um espaço determinado
• Interfaces de software visualmente densas exibem muitos elementos na tela
• Interfaces com baixa densidade visual exibem poucos elementos na tela
• Exemplo: Bloomberg Terminal
  • O Bloomberg Terminal é um exemplo clássico de densidade visual
  • Em uma única tela, ele mostra sparklines dos principais índices de mercado, distribuições detalhadas de volume de negociação, tabelas com dezenas de linhas e colunas, manchetes de notícias recentes, atalhos de teclado e sinalizações de UI para ações rápidas
• Exemplo: Craigslist e McMaster-Carr
  • O Craigslist é visualmente denso por causa de suas centenas de links simples e da interface de busca e filtros
  • O site da McMaster-Carr compartilha elementos de design semelhantes e lista detalhes de muitas variações de produtos em pouco espaço
• Julgamento intuitivo da percepção de densidade
  • As opiniões sobre a densidade desses sites se formam em apenas alguns segundos
  • Esses julgamentos acontecem de forma rápida e intuitiva, no subconsciente
  • Porém, esse tipo de julgamento rápido pode ser enviesado e pouco confiável
• Exemplos visuais de densidade
  • Dois exemplos de retângulos:
    • Esquerda: muitos pontos dispostos aleatoriamente
    • Direita: o mesmo número de pontos organizados de forma limpa em linhas e colunas
    • A maioria das pessoas sente que a imagem da direita é mais densa
  • Outro exemplo de imagem:
    • Esquerda: muitos pontos organizados de forma limpa em linhas e colunas
    • Direita: o mesmo número de pontos organizados de forma limpa, mas divididos em dois grupos
    • Mesmo com a mesma quantidade de pontos, dividir em grupos altera nossa percepção de densidade
• A incerteza da densidade visual
  • No design, não é possível ser totalmente objetivo
  • Ainda assim, para conversar sobre densidade, devemos buscar uma definição consistente, significativa e útil

Densidade de informação (Information density)

• Edward Tufte, em The Visual Display of Quantitative Information, trata do design de gráficos e tabelas

  Toda tinta em um gráfico deve ter um motivo para existir, e esse motivo deve ser apresentar nova informação.

• Data-ink
  • Data-ink significa a parte útil de uma determinada visualização.
  • Elementos visuais que não são dados devem ser removidos.
  • Data-ink não é a mesma coisa que o espaço ocupado pelo gráfico. Trata-se de densidade de informação.
• Cálculo da densidade de informação
  • A densidade de informação pode ser calculada dividindo a quantidade de data-ink em um gráfico pela quantidade total de tinta necessária para imprimi-lo.
  • A definição de data-ink pode ser subjetiva, mas o importante é aproximar essa razão o máximo possível de 1.
  • Formas de aumentar a razão:
    • Adicionar data-ink: fornecer dados úteis adicionais.
    • Remover tinta que não é dado: eliminar partes gráficas que não comunicam dados.
• Exemplos
  • Há exemplos de gráficos com muita tinta em excesso e versões melhoradas que transmitem muita informação com menos tinta.
  • A densidade de informação tem um limite superior: é possível remover tinta demais ou acrescentar informação demais.
  • O público também importa: usuários avançados podem preferir alta densidade, enquanto crianças do ensino fundamental podem preferir baixa densidade.
• Relação entre densidade de informação e densidade visual
  • Quanto maior a densidade de informação, maior tende a ser a percepção de densidade visual.
  • Exemplo: a visualização do horário de trens de E.J. Marey, de 1885. Horários de chegada e partida são exibidos em um espaço pequeno e denso.
  • Tufte defendia a densidade de dados e a maximização razoável dos dados.
• Shrink Principle
  • Gráficos podem ser fortemente reduzidos de tamanho.
  • A densidade de informação é útil para gráficos e tabelas.
  • Será que ela também pode ser aplicada a interfaces?
• Aplicando densidade de informação em interfaces
  • Informação pode ser aplicada à tela.
  • Cada parte da interface deve mostrar o máximo possível de informação.
  • É tentador pensar na tinta como pixels, mas interfaces precisam de divisórias, elementos estruturais e sinalizações que ajudem a entender as relações entre os elementos.
  • Há a tentação de remover todo espaço em branco seguindo o Shrink Principle.
  • Porém, parte do espaço em branco tem um significado tão importante quanto os elementos visuais. Também é preciso considerar o papel de sombras, gradientes e destaques de cor.
• A densidade de informação é um conceito útil, mas representa apenas parte do quadro completo.
  • Precisamos buscar maneiras de compreender todas as decisões de design da interface de forma mais objetiva e quantitativa.

Densidade de design (Design Density)

• O primeiro desafio para definir densidade do ponto de vista das decisões de design é determinar o que constitui, de fato, uma decisão.
• Entendendo decisões de design
  • Em UI, UX e design de produto, tomamos muitas decisões, conscientes ou inconscientes, para transmitir informação.
  • É preciso questionar por que certas escolhas comunicam significado, quais escolhas são apenas estéticas e quais realmente importam.
• Princípios da Gestalt
  • Psicólogos alemães do século XX estudaram como os humanos entendem formas e padrões.
  • O termo Gestalt significa "forma".
  • Nessa pesquisa, foram descobertas algumas leis básicas de design:
    • Proximidade (Proximity): percebemos coisas próximas umas das outras como um grupo.
    • Similaridade (Similarity): objetos semelhantes em forma, tamanho, cor etc. parecem relacionados entre si.
    • Fechamento (Closure): completamos lacunas no design para perceber uma forma inteira.
    • Simetria (Symmetry): agrupamos formas simétricas com base em um ponto central.
    • Destino comum (Common Fate): agrupamos objetos que se movem da mesma maneira.
    • Continuidade (Continuity): percebemos objetos sobrepostos como entidades separadas.
    • Experiência passada (Past Experience): reconhecemos formas e padrões familiares mesmo em situações desconhecidas.
    • Relação figura-fundo (Figure-Ground Relationship): distinguimos elementos de primeiro plano e de fundo em imagens 2D.
• Impacto dos princípios da Gestalt no design de UI
  • Graças ao princípio da similaridade, textos com o mesmo tamanho, fonte e cor indicam a mesma finalidade.
  • O princípio da proximidade indica que, quando um gráfico está perto de um título, esse título explica o gráfico.
  • Graças à experiência passada e à relação figura-fundo, o usuário consegue entender imediatamente como um toggle switch funciona.
• O conceito de densidade de design
  • Em vez de focar em pixels, pensamos nas decisões de design que transmitem significado intencionalmente usando princípios da Gestalt.
  • Assim como a razão data-ink de Tufte compara a tinta necessária para um gráfico com a tinta total usada, a densidade de design compara as decisões de design necessárias com o total de decisões.
  • É subjetivo, mas em interfaces de usuário contar decisões de design é mais útil do que contar a quantidade de dados ou de tinta.
• Limites da densidade de design
  • Interfaces de usuário existem para trabalho, prazer, passatempo, geração de entendimento, criação de conexões pessoais e muito mais.
  • É preciso incluir todas as ações que o usuário realiza ao longo da jornada.
  • A densidade deve considerar, além de componentes, layouts e telas, todas as ações do usuário no espaço e no tempo.

Densidade temporal

• A quantidade de trabalho que o usuário consegue fazer em um determinado tempo define a densidade temporal.
• O tempo de carregamento é o maior fator da densidade temporal. Quanto mais rápido a interface responde e carrega novas páginas ou telas, mais densa é a UI.
• O Bloomberg Terminal tem densidade temporal muito alta porque carrega dados quase instantaneamente.
• Como aumentar a densidade temporal
  • É possível aumentar a densidade temporal reduzindo ao máximo o tempo de carregamento.
  • Mas nem todo tempo de carregamento pode ser reduzido. Por exemplo, não é possível mudar a velocidade da conexão do usuário ou da CPU.
  • Algumas tarefas, como upload de arquivos, espera por resposta do suporte ao cliente ou processamento de pagamento, dependem de sistemas complexos e variáveis imprevisíveis.
• Como mudar a percepção do tempo
  • Até 100 milissegundos: se o intervalo entre duas ações for menor que 100 milissegundos, elas parecem acontecer ao mesmo tempo. Nesse caso, animações podem até fazer o app parecer mais lento.
  • Entre 100 milissegundos e 1 segundo: a conexão entre duas ações começa a se enfraquecer. Animações e transições podem preencher essa lacuna perceptiva.
  • Entre 1 segundo e 10 segundos: só animação não basta. Antes de 10 segundos, cresce a chance de o usuário abandonar a página. Nesse caso, deve-se usar um indicador de carregamento indeterminado para mostrar que o sistema está funcionando normalmente.
  • Entre 10 segundos e 1 minuto: um indicador de carregamento indeterminado começa a parecer estático após mais de 10 segundos. Nesse caso, deve-se usar um indicador claro de progresso, como uma barra, para mostrar explicitamente o tempo restante.
  • Mais de 1 minuto: o usuário deve poder sair da página ou fazer outra coisa. Ficar sem poder agir por mais de 1 minuto pode gerar frustração. Processos longos também têm maior chance de erro.
• Densidade no tempo e no espaço
  • A densidade da UI é apenas um meio. O valor da UI não está na sua aparência, mas nos resultados que ela permite alcançar.
  • Densidade significa oferecer o máximo de valor com o mínimo de tempo, espaço, pixels e tinta.

Densidade de valor (Density in Value)

• A densidade de valor está ligada ao valor do resultado que o usuário obtém.
• Exemplo: muitas vezes é melhor dividir um formulário longo em partes menores e organizá-lo como uma interface em formato de assistente. Isso acontece porque um formulário parcialmente preenchido não tem valor.
• Colocar todas as perguntas em uma única página pode parecer visualmente denso, mas, se levar muito tempo para preencher, muitos usuários não vão enviar.
• Exemplo de formulário
  • Um formulário dividido em várias partes, com erros e formas de corrigi-los claramente indicados.
  • Reduzir erros e fazer com que o usuário conclua o formulário pode exigir mais espaço e tempo no design.
  • Porém, se o sacrifício da densidade visual e temporal tornar o resultado mais valioso, a densidade total de valor aumenta.
• Aumentando a densidade de valor
  • É possível elevar a densidade visual e temporal tornando o formulário menor, mais rápido para carregar e com menos erros.
  • Se isso não reduzir o valor para o usuário nem para o negócio, então a densidade total aumenta.
  • Seguindo a abordagem de Tufte, devemos tentar maximizar ao máximo a densidade de valor.
• Problema de otimização
  • Resolver um problema de otimização pode gerar resultados paradoxais.
  • Nos primórdios da internet, empresas como a Craigslist aumentavam a densidade de valor agregando informações e exibindo-as como links em páginas.
  • Yahoo e Altavista permitiam pesquisar informações, mas ainda davam grande importância à agregação.
  • O Google adotou outra abordagem e aplicou à caixa de busca as informações obtidas pela cadeia de links da internet.
  • A informação passou a se agregar sozinha, e o que o usuário precisava era apenas de uma única entrada de texto para acessar toda a web.
• A abordagem de Google e Yahoo
  • Comparando a tela inicial do Google de 2001 com a de 2024, a densidade visual é baixa, mas a densidade de valor é muito alta.
  • Resultado: o valor do Google cresceu de $23B em 2004 para mais de $2T hoje. O Yahoo caiu de $125B em 2000 para $4.8B atualmente.
• Muitas vezes, a densidade de valor é mais importante do que a densidade visual.
• É importante otimizar design e funcionalidade para maximizar o valor que o usuário recebe.

Conclusão

• Projetar levando em conta a densidade de UI deve ir além do aspecto visual da interface.
• Isso inclui todas as decisões de design explícitas e implícitas que tomamos e todas as informações que exibimos na tela.
• Também deve incluir todas as ações e todo o tempo que o usuário investe para obter valor do software.
• Definição concreta de densidade de UI
  • Densidade de UI = valor que o usuário obtém da interface / tempo e espaço que a interface ocupa
• Elementos importantes
  • velocidade
  • usabilidade
  • consistência
  • previsibilidade
  • riqueza de informação
  • funcionalidade
• Por que algumas interfaces têm sucesso: ao considerar todos esses fatores, podemos entender por que algumas interfaces têm sucesso e outras fracassam.
• Objetivo do design
  • Devemos projetar considerando a densidade para que as pessoas consigam extrair mais valor do software que criamos.

[GN⁺]

Opinião no Hacker News

Resumo da coletânea de comentários do Hacker News

• Por que a forma física de um cardápio de restaurante é melhor do que o menu de um site móvel

  • Os menus de sites móveis têm uma UI complexa demais, então muitas vezes as pessoas acabam procurando fotos do cardápio no Google Maps.
  • Mais importante do que tentar redefinir "densidade" é fornecer o máximo possível de informação sem perder a hierarquia visual.

• A importância dos dados com foco na função, e não no formato

  • No caso do SS El Faro, o capitão usou dados meteorológicos comerciais com gráficos bonitos e acabou entrando em um furacão.
  • Mais importante do que a beleza visual dos dados é sua precisão e atualização.

• O conceito de densidade temporal

  • O JIRA é visualmente denso, mas por causa da lentidão e das várias transições de tela, na prática transmite uma sensação de dispersão.

• Por que interfaces móveis são mais esparsas

  • Os dedos das pessoas são relativamente grossos e imprecisos.
  • Como são mais lentas que no desktop, a carga é dividida em várias partes.
  • O formato de rolagem vertical e o tamanho limitado da tela impõem restrições.
  • Recursos úteis no desktop são difíceis de usar no mobile.

• Críticas ao aumento da escassez visual nas UIs

  • O mundo do web design está caminhando para usar cada vez mais espaço em branco.
  • Apps como o Hulu usam muito espaço vazio, dificultando o acesso à informação.
  • Em vez de seguir tendências, designers deveriam pensar no que realmente é bom.

• Problemas de UIs complexas e das tendências

  • Designers acreditam que seguir tendências ajuda a vender o produto.
  • Há uma tendência de imitar pessoas ou marcas famosas.
  • Designers de UI podem pensar, por engano, que os clientes valorizam tendências e modismos.

• Vantagens das UIs tradicionais

  • Aplicações B2B antigas do Windows permitem ver muita informação de uma só vez.
  • Enquanto sistemas baseados na web exigem várias páginas, sistemas tradicionais permitem ver todos os dados em uma ou duas janelas.

• Desequilíbrio na densidade de informação

  • Muitas vezes, o conteúdo simples de slides de apresentação é fotografado em imagens de alta resolução.
  • Artigos escritos em LaTeX geram PDFs pequenos, enquanto artigos feitos no MS Word ocupam muito mais espaço.

• Problemas da UI móvel

  • Em telas pequenas, torna-se impossível renovar uma receita médica.
  • UIs otimizadas com React não funcionam direito em telas pequenas.
  • O avanço da tecnologia está prejudicando a experiência do usuário.

• Exemplo de UI com baixa densidade

  • A página de produtos de investimento da Vanguard é um exemplo de UI com baixa densidade.