Como criar uma UI padrão melhor para o Firefox

(github.com/black7375)

1 pontos por GN⁺ 2024-02-21 | 1 comentários | Compartilhar no WhatsApp

A Proton UI do Firefox v89 gerou polêmica em torno das abas, dos espaçamentos e dos ícones após seu lançamento em 2021, e o Firefox-UI-Fix se tornou um tema para corrigir isso, sendo adotado também como tema padrão no Waterfox e no Floorp
Em vez de testes A/B, as decisões de design se apoiam em teorias e casos de UX como a Lei de Jakob, a psicologia da Gestalt, a Lei de Fitts e pesquisas do Nielsen Norman Group
Abas com aparência de botão, padding amplo e menus centrados em texto podem prejudicar a percepção do estado de seleção, a eficiência de clique, a exibição de conteúdo em telas pequenas e a acessibilidade
O Lepton Theme expressa de forma consistente o estado das abas entre 36px~240px e ajusta o botão de fechar, ícones, padding, cores do tema e o espaço da barra de título conforme o sistema operacional
O objetivo não é negar a Proton UI, mas melhorá-la respeitando a Proton UI, embora ainda existam áreas difíceis de implementar, como o comportamento do page action button, por causa das limitações do CSS

A polêmica da UI após o Firefox v89 e o escopo do projeto

Este documento trata principalmente da UI com base no Firefox v89, partindo do pressuposto de que depois disso houve algumas melhorias
Depois do lançamento do Firefox v89 em 2021, a polêmica em torno da Proton UI ganhou grande repercussão no Reddit e no Hacker News
O repositório Firefox-UI-Fix ganhou popularidade rapidamente ao corrigir vários problemas da Proton UI, e o Waterfox e o Floorp também usam esse tema como padrão
A Mozilla decidiu encerrar o suporte ao Windows 7 e ao Windows 8, e o Firefox v115 é a última versão com suporte ao Windows legado
- O Firefox v115 estava previsto para ser oferecido até setembro de 2024
- Tanto a Mozilla quanto o projeto precisaram organizar códigos e recursos relacionados ao Windows legado, e este documento também aborda a UI do Windows legado

Critérios para avaliar UI/UX

Os critérios de design são organizados em três grandes eixos: intuitividade, eficiência e flexibilidade
Como não há dados nem ambiente necessários para testes A/B, a avaliação é feita de forma dedutiva, prevendo o comportamento do usuário e usando várias teorias
Intuitividade
- Simplicity: remover ou simplificar elementos desnecessários para reduzir a carga cognitiva
- Visibility: tornar as funções principais visíveis para facilitar a interação
- Accustomably: reduzir a curva de aprendizado para permitir adaptação rápida
- Consistency: diminuir exceções para facilitar a memorização
- Predictability: fazer o usuário sentir que tem controle, reduzindo a ansiedade
- Affordance: fornecer pistas sobre como interagir
Eficiência
- Clearly: as distinções precisam ser percebidas com clareza
- Proximal: os elementos devem estar próximos o suficiente para permitir deslocamento rápido
- Bulky: tamanhos maiores facilitam a percepção e o movimento
- Snappy: a resposta deve ser suave e sem interrupções
Flexibilidade
- Accessibility: atender a um público amplo independentemente de idade, deficiência etc.
- Functional: acomodar diversos recursos para atender às necessidades
- Contextual: existir de forma natural em cada contexto
- Harmonious: se integrar naturalmente aos demais elementos
- Pleasure: buscar satisfação também por diversão ou criatividade
- Compatibility: considerar APIs de versões antigas, roadmap de versões superiores, upstream, SO, RTL etc.

Três problemas apontados na Proton UI

A primeira impressão do Firefox v89 Developer Edition foi de limpeza visual, mas no uso real os incômodos foram considerados grandes
Os problemas centrais se resumem a três pontos
- Tab: a aba parece um botão
- Padding: o espaçamento é grande demais
- Icons: apenas ícones podem ser difíceis de entender, e remover ícones cria outros problemas

O problema das abas com aparência de botão

O equilíbrio entre familiaridade e mudança
- Segundo a Lei de Jakob, os usuários esperam que até mesmo um app novo funcione como uma UX que eles já conhecem
- A nova UI de abas do Firefox foge dessa expectativa e parece difícil de assimilar
- No entanto, impedir mudanças na UI apenas porque ela não é familiar pode atrapalhar o progresso e levar apenas à repetição de tendências
- É possível ser um seguidor rápido, mas é preciso cuidado para não bloquear a inovação
A percepção das abas sob a psicologia da Gestalt
- A psicologia da Gestalt é usada para explicar por que as abas parecem pertencer a um grupo diferente
- Law of Proximity: como as abas estão separadas da barra de ferramentas, elas parecem outro grupo
- Law of Similarity: como as abas têm cor diferente da barra de ferramentas, elas parecem outro grupo
O Safari voltou atrás nas abas em formato de botão
- A Apple apresentou o novo navegador Safari do macOS 12 Monterey na WWDC
- Quando as reclamações dos usuários aumentaram, ela apresentou no Beta 3 uma solução de compromisso para as abas com aparência de botão
  - macOS Monterey Beta 3: Apple Redesigns Safari Tab Interface Following Complaints
  - macOS Monterey beta 3 brings redesigned Safari tab interface to address complaints
- A solução de compromisso também fracassou, e a Apple acabou revertendo totalmente para um design de abas clássico
  - Apple Releases Safari 15.1 for macOS Big Sur and macOS Catalina
  - Apple reverts to more traditional Safari tab design in macOS Monterey RC following controversy
- Isso não significa que a Apple esteja sempre certa, mas o button-like tab pode ser criticado pelo fato de a situação ter chegado a um ponto em que foi difícil voltar atrás várias vezes

Remoção de espaços excessivos e ícones

Espaçamento e visibilidade do conteúdo
- Como um navegador é um visualizador de conteúdo web, ele não deve atrapalhar a exibição do conteúdo
- A UI Proton perde em exibição de conteúdo por causa do excesso de padding
- Em dispositivos com telas pequenas, como notebooks de 13 polegadas, esse problema é crítico
Eficiência de clique sob a Lei de Fitts
- A Lei de Fitts considera que o tempo necessário para mover-se rapidamente até uma área-alvo varia conforme a proporção entre a distância até o alvo e a largura do alvo
- A fórmula principal é MT = a + b · ID = a + b · log₂(2D/W)
- MT é o tempo médio para completar o movimento, a e b são constantes que variam conforme o dispositivo de entrada, e ID é o índice de dificuldade
- D é a distância do ponto de partida até o centro do alvo, e W é a largura do alvo medida ao longo do eixo do movimento
- Desconsiderando as constantes e o logaritmo, a proporção 2D/W é o que importa
- Primeiro, é preciso reduzir a distância e maximizar a largura sem aumentar a distância
- Também é preciso evitar que o padding fique grande demais só para preencher o espaço restante
- O Photon(v88) é avaliado como uma UI mais fácil de clicar no ícone da Amazon e no menu
  - O ícone da Amazon tem W maior
  - O menu tem W um pouco menor, mas D é muito menor
- Se o ícone parecer menor do que a área realmente clicável, há perda, então é melhor preencher a área de padding para que o ícone pareça maior
O problema de a diferença da Compact UI quase ter desaparecido
- A Mozilla tornou a compact UI obsoleta
- Considera-se que, no v89, Compact UI, Normal UI e Touch UI quase não têm diferença significativa além de pequenas variações na altura da barra de abas e da barra de ferramentas
UI só com texto e acessibilidade
- Ao ver o texto da Mozilla Content design considerations for the new Firefox, surge a dúvida se remover ícones foi realmente uma boa escolha
- O estudo sobre ícones do Nielsen Norman Group conclui que a forma só com texto teve o pior resultado
- A nova UI do Chrome, lançada em 2023, também inclui ícones

Redesenho das abas no Lepton Theme

Exibição consistente dos estados das abas
- O design das abas não é apenas uma questão de aparência, mas de lidar com vários estados
- As abas podem ter estados como os seguintes
  - Selected, Multiple Selected, Hover, Text overflow, Tab overflow, Reaching tab resizing
  - Sound & Muted, Autoplay Block, PIP, Pinned, Container, No favicon
  - Changed title, Loading, Unloaded, Crashed, Shared, Theme, UI Density etc.
- Esses estados precisam ser representados de forma consistente dentro de 36px~240px
Comparação do estado selecionado entre Photon, Proton e Lepton
- Photon e Lepton facilitam o reconhecimento da aba selecionada porque ela está conectada à barra de ferramentas
- O Lepton encurta a indicação de contêiner nas abas em segundo plano para reduzir a sobrecarga visual
- No Proton, é difícil distinguir qual aba está selecionada entre a cor de fundo destacada e a barra superior
- A barra superior indica a aba-contêiner, mas passa uma sensação parecida com a aba selecionada da UI anterior, Photon
- A comparação entre os estados Selected, Multiple selected, Hovered e General é resumida assim
  - No Photon, Selected é reconhecido pela conexão com a barra de ferramentas, e Multiple selected e Hovered são diferenciados pela cor da linha de contexto superior
  - No Proton, Selected e Multiple selected parecem quase iguais
  - No Lepton, os estados são diferenciados pela conexão com a barra de ferramentas e por cores de fundo distintas
Estados compostos como mudo, PIP e abas fixadas
- Há grandes diferenças entre navegadores na combinação Muted, Hover e PIP
  - No Photon, Muted e Muted + Hover não se distinguem, e quando há indicação de PIP a posição de Muted muda bastante
  - No Proton English, Muted é mostrado apenas como texto, e PIP só pode ser percebido no estado de hover
  - No Proton Korean, a UI muda conforme o idioma exibido, Muted oculta o favicon e não se obtém indicação de PIP
  - No Lepton, todas as informações são exibidas, as posições de Muted e PIP permanecem consistentes, e no hover há sinalização de que é possível controlar
- Em combinações mais complexas, considera-se que o Proton era quase impossível de usar em ambiente em coreano
- O Lepton lida com estados compostos da seguinte forma
  - Sempre representa todas as informações
  - Se não houver favicon, aumenta o tamanho de Muted para compensar
  - Mesmo no estado Pinned, mantém sempre a mesma posição
  - Quando posições se sobrepõem, como em Container e Titlechanged, combina a exibição
Aproveitamento do espaço conforme a largura da aba
- O Lepton ajusta seu comportamento conforme a largura da aba
- Quando a largura é suficiente, mostra todos os botões de fechar como no Proton
- Quando as abas ocupam todo o espaço e a largura fica insuficiente, oculta os botões de fechar das abas em segundo plano
- Para reduzir cliques acidentais, diminui o tamanho do botão de fechar, mas ainda permite fechar ao passar o mouse sobre uma aba em segundo plano
- O título da aba parece mais eficiente por meio de ajustes no padding e no gradiente
- Economiza espaço para que o texto New fique visível na última aba
- Só faz ajustes quando falta largura, para que palavras de wiki continuem visíveis com clareza
- O Lepton mostra mais conteúdo web, e Photon e Lepton têm separadores entre abas
Formas de distribuição e preferência
- O critério de uma boa UI varia de pessoa para pessoa e, em certa medida, é uma questão de preferência
- São oferecidos três conceitos de aba
  - Abas Lepton padrão ajustadas ao Proton
  - Abas Photon com linha de contexto reta
  - Abas Proton originais
- Esse tema é conhecido especialmente pelo suporte à UI de abas do Photon

Ajuste de ícones e padding

Painéis e menus de contexto
- A adição de ícones e o ajuste do padding reduzem reclamações anteriores
- O problema de unbalanced strokes foi corrigido pelo colaborador @zapSNH, e o navegador passou a ter um conjunto de ícones consistente e reconhecível em toda a interface
Comparação dos menus do Edge, Chrome e Lepton
- O Edge tem menus sem ícones por nenhum motivo especial, e os ícones no geral são parecidos demais, o que dificulta a leitura rápida
- Considera-se que algumas metáforas de ícone do Edge, como New InPrivate window, são confusas
- O Chrome tem um estilo de ícone que não parece moderno, é anguloso em comparação com a UI arredondada, e os ícones parecem pequenos demais em relação ao tamanho do texto
- O Lepton oferece um conjunto consistente de ícones com estilo moderno e tamanho adequado
- Ele usa ícones preenchidos apenas nos itens importantes para melhorar a escaneabilidade e emprega metáforas que diferenciam melhor as formas
Menu de contexto e grupos de atalhos
- Considera-se incompreensível por que o Edge não tem ícone em Add all tabs to favorites
- O Chrome não tem nenhum ícone em menus de contexto
- O Lepton posiciona os ícones de forma que fiquem claramente distintos
- No menu de contexto de páginas web, só o Firefox coloca um grupo de atalhos no topo, obtendo um efeito de acesso rápido semelhante a um pie menu
Aplicação de mais ícones
- Ícones são adicionados ao menu global e a vários painéis
- Quando a pasta da biblioteca de favoritos é aberta, os ícones do menu também reagem
- O tamanho dos menus e painéis é reduzido, e o ponto de início do texto fica alinhado
- Ícones são adicionados para acomodar vários casos de layout

Suporte a SO, temas e cores

Tema padrão do sistema
- O Lepton ajusta a UI de acordo com diferentes sistemas operacionais e configurações
  - Windows 7: segue de perto o design de janelas Aero
  - Windows 8.1: faz a barra de título combinar bem, como no Windows 7
  - Windows 10 Light: segue as cores do Legacy Edge no Windows 10
  - Windows 10 Dark: aplica o mesmo critério
  - Windows 10 Dark + Accent titlebar: se a configuração de cor de destaque na barra de título estiver ativada, ela será seguida
  - MacOS Light/Dark: segue as cores do Mac
- Usuários do Windows 11 podem usar cores do Windows 11 parecidas com as do Edge com a opção userChrome.compatibility.os.win11
- Também funciona no Linux, corrigindo problemas de cor e dos botões de barra de título não nativos
Espaço dos botões da barra de título
- Em casos como Tabs on bottom ou One Liner, é preciso garantir espaço para os botões da barra de título dentro da barra de ferramentas
- Os valores e a posição variam conforme o sistema operacional
  - Win7, Win8: 105px, à direita
  - Win10: 138px, à direita
  - Mac: 72px, à esquerda
  - Linux: 84px, podendo variar conforme o tema do sistema
- Em tela cheia, como a UI nativa é usada, isso deve ser tratado como 0px
- Pode ser à esquerda ou à direita, e os botões podem ou não ser três
Complementos para o tema Proton
- Corrige problemas de acessibilidade causados pela falta de contraste de cores no próprio tema Proton
- Melhora o contraste de cores e as sombras de contorno dos temas incluídos
- Também aplica isso a partes onde o tema Proton não era aplicado, tornando tudo mais uniforme
- Aplica modo escuro também a áreas onde ele não era usado
- Faz com que as cores sejam aplicadas corretamente mesmo ao usar temas personalizados em vez do tema padrão
- Em tabelas e listas, adiciona uma cor de fundo diferente nas linhas pares para facilitar a leitura
- No player de áudio, aplica bordas arredondadas seguindo o design do Proton
- No player de vídeo, melhora a visualização do conteúdo e ajusta os ícones para ficarem mais agradáveis

Interação e animação

Interações que ajudam
- Quando o ponteiro do mouse ou um elemento muda no hover, isso dá uma pista de que alguma ação está sendo executada
- Em elementos como os comandos de zoom do painel, que têm natureza diferente de outras ações e parecem menores, a mudança do ponteiro do mouse ajuda
- Quando aparece uma borda ao passar o mouse sobre um campo, fica intuitivamente claro que ele pode ser clicado
- O texto do item ativo usa a cor de destaque
- Itens excluídos ficam com o ícone em escala de cinza e o título riscado, como se estivessem desativados, mas no hover o título aparece sem o risco
Projeto de animação
- As animações tornam a UI mais suave e natural, mas às vezes fazem o comportamento parecer lento
- Os critérios de projeto são os seguintes
  - Segue a curva de easing do Photon, acelerando rapidamente no início e desacelerando suavemente no final
  - Reduz a duração da animação de início para dar sensação de resposta rápida
  - Aumenta a duração da animação de término para passar uma sensação de suavidade
  - Objetos grandes têm duração maior do que objetos pequenos
  - A duração dentro de objetos aninhados também deve ser maior
- Os mesmos princípios são aplicados a cor de fundo, rotação de setas, abas de contêiner, abas com som e fixadas, e à barra lateral
- Os mesmos princípios também são aplicados a recursos opcionais que não são o padrão
  - Autohide Back Button
  - Autohide Page Action
  - Autohide Tab Bar
Restauração de ilustrações
- Considera-se que as ilustrações amigáveis do Photon reduziam o desconforto em situações de erro
- Este tema restaura essas ilustrações
- Exemplos de aplicação incluem as telas Welcome back, DNS error, Session restore e Search result

Conclusão e limitações

Este tema considera convenções, psicologia e resultados de pesquisa, além de herdar as vantagens dos temas existentes
Dá suporte a sistema operacional, modo escuro, temas personalizados e interações adequadas ao contexto
Por limitações do CSS, algumas coisas não podem ser implementadas, como o comportamento do botão de ação da página
O objetivo é: “🦊 I respect proton UI and aim to improve it.”

1 comentários

GN⁺ 2024-02-21

Opiniões do Hacker News

O que mais incomodou na nova UI foi que todos os elementos ficaram grandes demais
Em uma tela de celular tocada com os dedos, até dá para entender, mas em um desktop comum há muito desperdício de espaço
O aumento de padding mencionado no texto também contribui, mas a remoção da opção compact UI density pesa bastante
Se ativar browser.compactmode.show em about:config e depois for em menu > Mais ferramentas > Personalizar barra de ferramentas > “density”, na parte inferior, dá para usá-la de novo
A opção aparece marcada como “not supported”, mas está assim há anos
- Prefiro muito mais uma interface com padding generoso
  Quando há padding suficiente, o ruído visual e a complexidade diminuem, e os elementos ganham espaço para respirar
  Talvez não haja uma vantagem prática específica, mas só de olhar já me deixa menos ansioso
- De um lado há pessoas dizendo “não desperdicem espaço com padding”, e, toda vez que KDE entra na conversa, há pessoas dizendo “é difícil de ler porque enfiaram informação e texto demais sem padding”
  É uma situação em que se apanha fazendo ou deixando de fazer
- Gostaria de saber se alguém conhece o contexto de por que aparece como “not supported”
- Esse era o meu problema; vou experimentar essa flag hoje
- “not supported” pareceu uma birra contra as pessoas que criticaram as escolhas de design “moderno”
Sou o autor do Lepton, um tema popular para Firefox
Dá para ver, pela minha perspectiva, como tomei várias decisões e como melhorei decisões decepcionantes da Mozilla
Então isso pode explicar como ele foi melhorado e por que ganhou popularidade
Este texto faz parte de uma série
- https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
- Gostaria de saber onde posso encontrar o Lepton
  Na loja de complementos, em temas, não aparece nada com esse nome
  Talvez o Lepton seja a antiga UI do Firefox e tenha ficado apenas em releases antigos
  Li o texto, mas posso ter deixado passar alguma coisa
- Normalmente não costumo personalizar muito a UI e tento simplesmente me acostumar com os padrões
  Porque há menos atrito, e é bom conseguir se adaptar às configurações padrão logo após a instalação
  Mas a personalização da UI do Firefox virou exceção, porque é fácil de configurar e tem boa qualidade
  A sensação de que é algo mantido também é uma vantagem importante
  Eu não sabia que você vinha escrevendo textos tão longos assim; parece interessante e bem documentado, então pretendo ler
- É particularmente interessante que a telemetria seja usada para justificar a remoção de itens da interface
  Pessoalmente, a barra de endereços é enorme, a ponto de parecer que ainda sobraria espaço mesmo com 10 botões nela
  Por isso, é difícil imaginar um motivo para remover itens, a não ser querer remover tudo até não sobrar mais nada que possa ser removido
  Como você parece entender bem de UI/UX, tenho uma pergunta: tenho a teoria de que ícones em preto e branco são piores do que ícones coloridos; há algum estudo ou consenso sobre isso?
- O processo de instalação foi muito fácil
  Porém, eu recomendaria simplesmente organizar os passos principais primeiro e mover a seção avançada totalmente para o fim
```
1. Executar o script na linha de comando do OS  
2. Ir para `about:support` e clicar em limpar cache de inicialização  
```
Uma UX de navegador melhor, falando de forma enfática, começa com abas verticais
Abas horizontais ficam difíceis de gerenciar ou acompanhar com apenas 6 a 8 abertas
Em abas verticais aninhadas, links abertos em novas abas viram automaticamente abas filhas, e fica muito mais fácil inferir essa estrutura e o contexto do que em abas horizontais
Se você acrescentar cores por site, os grupos de abas também ficam mais visíveis, e dá para salvar o estado de progresso de pesquisas ou trabalhos de documentação ao favoritar a árvore de abas
Alguns arquivos CSS e capturas de tela estão aqui: https://gist.github.com/aclarknexient/88673880d373864eee1927...
Ainda preciso adicionar uma captura de tela de abas aninhadas e coloridas, então vou colocá-la depois de publicar o comentário
- Gosto de abas verticais, e elas são uma grande vantagem para o meu jeito de navegar alternando entre vários trabalhos de longa duração
  Abas se encaixam melhor do que favoritos para esse uso, porque, mesmo em 2024, o gerenciador de favoritos de todos os navegadores ainda é imaturo, então organizar favoritos é péssimo
  Abas aninhadas não me atraem muito, mas a capacidade de trocar com um clique os grupos de abas exibidos na barra lateral, como os “panes” da extensão Sidebery do Firefox ou os “spaces” do Arc, é poderosa
  Melhor ainda se os painéis/espaços forem vinculados a perfis do navegador
  Por exemplo, dá para alternar uma única janela do navegador entre navegação geral, compras, aulas de faculdade online e desenvolvimento de software, e, se necessário, destacar temporariamente um painel/espaço específico para uma nova janela
- Reconheço que é uma questão de gosto, mas acredito firmemente no exato oposto
  É verdade que, com mais de 6 a 8 abas abertas em uma barra horizontal, gerenciá-las e acompanhá-las fica difícil
  Usei o Arc nos últimos 6 meses e, mesmo em uma barra de abas vertical, quando havia 6 a 8 abertas, gerenciar e acompanhar era igualmente difícil
  No fim, eu acabava fechando tudo a cada 4 horas e começando de novo
  Há dois argumentos de ambos os lados com os quais me identifico mais
  Primeiro, se contarmos a quantidade de pixels ocupada pela barra de abas na horizontal e na vertical, nunca vi uma barra de abas vertical prática que usasse a mesma quantidade de pixels ou menos do que uma horizontal
  Segundo, como monitores quase sempre têm mais pixels na horizontal do que na vertical, também há o argumento de que uma barra de abas vertical aproveita melhor a proporção da tela
  Isso parece fazer sentido em 16:9 ou mais largo, mas, pessoalmente, parece menos verdadeiro em 16:10, comum em MacBooks
- Olhando para a captura de tela “polêmica” do FF89, uma das maiores mudanças parece ter sido redesenhar as abas com mais padding
  Mas, como oculto a barra de abas superior e uso o Tree Style Tab, que combina bem com o Firefox, nem percebi essa mudança
  Não gosto particularmente do Firefox em si, mas o ganho de UX da árvore de abas supera os pequenos detalhes em que Chrome/Safari são um pouco melhores, então nem penso nisso
  Porém, por causa das ferramentas de desenvolvedor, uso o Chrome para trabalho de front-end
- Não sei se responder ao meu próprio comentário é uma quebra de etiqueta do HN ou uma boa estruturação da informação :)
  Na seção avançada da página de opções do Tree Style Tab há uma área de folha de estilo do usuário com recarregamento em tempo real
  É ótima para testar escolhas de fonte sem reiniciar o navegador
  Mudei para usar a fonte condensada SF Pro da Apple
  A Iosevka Mono, que uso normalmente em quase todos os lugares, de alguma forma não ficou adequada para títulos de abas
  O CSS é o seguinte:
```
:root.sidebar tab-item.unread .label-content {  
font-style: italic !important;  
}

:root.sidebar tab-item {  
font-family: "SF Pro" !important;  
font-stretch: condensed !important;  
font-weight: 300 !important;  
}

:root.sidebar tab-item.active .label-content {  
font-weight: 500 !important;  
}  
```
  Adicionei ao mesmo link do comentário anterior uma captura de tela do resultado desse CSS: https://gist.github.com/aclarknexient/88673880d373864eee1927...
- Em notebooks, abas verticais começam a não ser tão boas
  O hack da barra lateral com ocultação automática quebrou no Firefox e fiquei com preguiça de consertar; agora aparece um espaço vazio cinza de alguns centímetros, mesmo sem eu ter 100 abas abertas
  Normalmente deixo só umas 5 a 10 abertas
  O mais irritante é que muitos sites hoje decidem se mostram a versão móvel ou desktop pelo tamanho do viewport do navegador, não pelo user agent
  Como já perco 1 polegada de largura por causa das abas em estilo árvore, sobra muito pouca largura que posso reduzir antes de o site achar que é um iPad
  Então, na prática, preciso usar o navegador em tela cheia; caso contrário, aparecem vários menus hambúrguer com quebra de linha de texto horrível, piorando a navegação
  Na maioria das vezes preciso desligar totalmente a barra lateral, o que acrescenta alguns cliques toda vez que troco de aba
Este texto parece tentar convencer que o autor do tema criou um tema do Firefox objetivamente melhor com base em regras de UX, mas a maioria das mudanças parece ser preferência pessoal
É claro que ele é bem feito e mantido, mas, pessoalmente, não acho visualmente tão atraente, e algumas partes parecem mais complexas
Cada pessoa tem suas preferências, e o Firefox escolheu um design, mas também oferece suporte a esse tipo de alteração, o que por si só é bom
Só que parece um pouco engraçado o autor tentar provar que suas preferências são empiricamente corretas
- UI é claramente uma questão de gosto, por isso fiz a distribuição em três formatos
  Ainda assim, achei confuso não haver indicação de que a aba está carregando enquanto está silenciada, ou não haver separadores entre abas
Desisti de usar o Firefox como navegador padrão depois que ele estragou as abas
De vez em quando abro para testar e, se elas ainda parecem botões em vez de abas, anoto mentalmente para tentar de novo dali a uns seis meses
O tema claro é especialmente ofensivo: botões brancos sobre cinza claro
Ele também não segue direito as configurações de tema do sistema no Windows
No Windows, é possível manter os apps em tema claro e ao mesmo tempo aplicar cor à barra de tarefas, ao menu Iniciar e à barra de título; o Edge entende isso e, mesmo que o Chrome não entenda, pelo menos tem contraste suficiente
O Firefox erra completamente
- Uso o Firefox como navegador secundário e, toda vez que o abro, ele primeiro me atrapalha e se intromete para avisar sobre novas mudanças e recursos adicionados desde a última vez, como Pocket e VPN
  Por favor, parem com isso e me deixem começar a navegação que vim fazer
  Gostaria que não copiassem os dark patterns da Microsoft, que empurra Office 365 e Game Pass entre atualizações
  Anunciem esses recursos para quem ainda não instalou o Firefox; eu já sou “cliente”, então não me incomodem
  Por isso uso principalmente o Chrome
  Ele pode ser mais inferior e capaz de me vigiar, mas pelo menos não fica no meu caminho
- É só instalar o Sidebery[1] e ocultar as abas padrão[2]
  Esse é o caminho :)
  [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
  [2] https://superuser.com/a/1424494
Fico curioso se há outras pessoas que simplesmente não se importam nem um pouco com as abas “parecerem botões”
Às vezes parece que sou só eu
Não sei se isso realmente incomoda tanto quem usa pela primeira vez
- Uso o Firefox todos os dias e nem sabia que isso era considerado um “problema”
  Nunca tinha pensado nisso antes de ver estes comentários, e acho a barra de abas perfeitamente usável do jeito que está, então provavelmente não vou pensar nisso de novo
- O fato de as abas parecerem botões em si não me incomoda muito
  Na verdade, é uma alternativa comum ao formato de abas, e pelo que sei até o controle de abas do Windows 95 tinha um modo que fazia as abas parecerem botões
  Acho que também era usado na barra de tarefas original, e desde os anos 90 no mIRC para alternar entre canais/janelas
  Mas a aparência desses “botões de aba” específicos, pessoalmente, não me agrada
  Parecem comprimidos alongados, meio difíceis de engolir, e eu estava acostumado com algo que parecia uma aba de verdade; não vejo motivo para terem mudado
  Felizmente o Firefox permite personalizar a aparência, então uso userChrome.css para deixar mais do meu agrado
- Não afeta meu uso do Firefox
  Só que ele desperdiça pixels colocando um espaço que não tem motivo para existir
  A esta altura, já me acostumei com decisões de UI absurdas e simplesmente sigo usando o que as organizações entregam
  Quase ninguém parece se importar com consistência ou facilidade de descoberta
- É diferente o suficiente de outras coisas com abas — por exemplo não só navegadores, mas também gerenciadores de arquivos e editores — para incomodar
  Não entendo por que jogam toda a semântica pela janela
  Parece um botão, mas não se comporta como um botão
- Eu nunca tinha notado e, mesmo depois de apontarem, não vejo como problema
  Para quem acha isso um problema, parece bastante implicância
Como todo mundo está escrevendo suas próprias reclamações, vou deixar a minha também
Quando a árvore de pastas de favoritos é grande, é horrível navegar pelo pequeno popup da UI “Add Bookmark” para encontrar onde adicionar um novo favorito
A barra lateral de favoritos permite pesquisar por nome, mas não permite descobrir onde aquele favorito está
Extensões de busca de favoritos como Bookmark search plus 2 resolvem isso, mas isso nem deveria ser necessário
Atualização: descobri o clique direito -> Show in Folder, e isso é ótimo
Ainda assim, não é a melhor UI, e a extensão mencionada continua sendo muito mais intuitiva
Não dá para ter várias barras laterais ao mesmo tempo
Por isso não dá para manter Tree Style Tabs para abas verticais e, ao mesmo tempo, a pasta/pesquisa de favoritos aberta
Não faz sentido
No fim das contas é basicamente isso, e quase tudo é sobre gerenciamento de favoritos
Não sei se o restante da UI é bom ou se simplesmente me acostumei tanto que não vejo os defeitos, mas uso o Firefox com bastante conforto
Não senti tanta necessidade de reclamar do redesenho visual quanto outras pessoas
- Por algum motivo desconhecido, em todos os navegadores os favoritos foram vergonhosamente negligenciados
  Se você pegar um navegador de 20 anos atrás, o gerenciamento de favoritos é quase igual — ou, em alguns casos, até um pouco melhor
  Melhorias em favoritos não são sexy, então parece que ninguém liga
- Fico me perguntando se não é memória muscular do atalho Ctrl+Shift+B, que antes abria um painel lateral grande
  Agora ele só mostra uma barra horizontal estreita
  Isso também torna esse redesenho claramente irritante para mim, mas descobri o atalho Ctrl+Shift+O para “gerenciar favoritos”
  Ele abre uma janela pop-up maior com os favoritos e, até agora, parece quase tão conveniente quanto o antigo painel lateral
  Também dá para pesquisar favoritos e, com o clique direito, escolher “show in folder” no menu de contexto para ver onde ele fica na hierarquia
  Mas meus favoritos estão todos em “other bookmarks”, então acho que não vou usar muito
A maior reclamação de “mudança desnecessária na UI do Firefox” é a remoção, há 4 anos, de browser.urlbar.clickSelectsAll
Como era de se esperar, a Mozilla não se importa
Lendo o relatório de bug, não há explicação além de hostilidade ao usuário: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
Nenhum campo de texto em nenhuma UI se comporta assim
Não dá para entender por que a Mozilla distribuiu esse “recurso” e, ao mesmo tempo, removeu até a opção para desativá-lo
Tudo bem alguns usuários preferirem isso, mas não deveriam tirar minha maldita opção e empurrar à força
- Na prática, a lógica da Mozilla era que todos os outros navegadores importantes se comportam assim
  Verificando no Chrome, de fato ele se comporta como o Firefox
  No lado da hostilidade ao usuário, a lógica era que as pessoas que não gostam do novo comportamento não ativam a telemetria, portanto não merecem ter o recurso que querem
  É bem irônico, considerando que a principal vantagem do Firefox é o modelo orientado à privacidade
- Concordo totalmente
  Quatro anos se passaram e ainda tropeço nisso todos os dias
  Ironicamente, o jeito como normalmente erro é justamente o caso que essa mudança dizia querer ajudar
  Quando quero selecionar a URL inteira e clico duas vezes por instinto, o primeiro clique seleciona tudo e o segundo reduz a seleção a uma única palavra
  Fico confuso por um instante e começo a clicar de novo; agora preciso clicar mais três vezes para selecionar a URL inteira
  Isso é surpreendentemente irritante
  A explicação no tracker parece ser algo como “talvez algum dia, no futuro, façamos outra coisa que justifique isso”
  Quatro anos depois, ainda não se vê nada disso
- Depois que esse recurso foi removido do Firefox, migrei para o Vivaldi
  O Vivaldi ainda permite escolher esse comportamento
  Fico curioso se há outros navegadores Unix que permitam desativar a seleção completa ao clicar
  No geral estou satisfeito com o Vivaldi, mas seria bom ter mais opções
- Ainda está quebrado
  Porque o recurso “Paste and Go” não funciona corretamente
  Pelo senso comum, “Paste and Go” deveria ser equivalente a executar “Paste”, inserindo corretamente o texto da área de transferência na posição do cursor, seguido de “ir para o endereço na barra de endereços”
  Mas, se você desfaz a seleção automática da URL, posiciona o cursor dentro dela e usa “paste and go”, o Firefox ignora a URL existente e tenta ir diretamente para o texto da área de transferência
  Isso pode até ser um risco de segurança, pois parece possível enganar o usuário para visitar uma URL que ele não pretendia
  Se não quiserem corrigir, deveriam renomear para “Clear, Paste, and Go”, de acordo com o comportamento real
- Dizem que “a Mozilla não se importa”, mas uma opção interna é só uma opção interna, e nenhum navegador se importa muito com isso a menos que seja algo como um contrato de suporte corporativo
  Se você precisa entrar em about:config por algo que não seja desenvolvimento ou gerenciamento de dispositivos móveis, é difícil esperar que continue funcionando depois de uma atualização
  Toda opção é código que precisa ser mantido
  Meu palpite é que, ao reescreverem o código que usava essa opção, escolheram o caminho mais rápido e barato de não reimplementar um recurso que nem tinha suporte oficial
O verdadeiro pesadelo de UI/UX do Firefox é o entulho legado
Parece que cada função básica do navegador abre em uma visualização diferente
As configurações ficam em uma aba do navegador; o histórico, em uma barra lateral
Mas isso só vale para Ctrl+H; o gerenciamento do histórico abre uma janela separada com Ctrl+Shift+H
Favoritos e downloads também ficam nessa janela, a janela Library que parece ter vindo da época do Firefox 3/4
Downloads também têm um pequeno pop-up, mas Ctrl+J e o gerenciamento de downloads abrem essa janela
Favoritos: Ctrl+Shift+O abre essa janela, mas Ctrl+B abre a barra lateral
Perfis são quase uma piada: praticamente não há um recurso utilizável para usuários, e uma interface com cara de legada fica escondida em about:profiles
Senhas abrem em uma aba do navegador, mas têm um visual próprio que não combina bem com nada mais
A única coisa com alguma coesão é que configurações e extensões ficam ambas em abas do navegador e há links entre elas
O resto é uma bagunça de abas do navegador, janelas, barras laterais, pop-outs e UIs diferentes misturadas
Isso está assim, bagunçado, há bastante tempo, e parece que vai continuar porque não há uma visão única nem um esforço real de organização
O Firefox View, adicionado recentemente, também parece mais uma coisa que coloca outra UI por cima
Ele também tem histórico, então agora há umas três formas de ver o histórico, e pelo menos uma delas é demais
Talvez seja uma tentativa de mover os recursos da janela Library para a aba View, mas, no estado atual, só aumenta a confusão
É verdade que há algum exagero nisso
Outros navegadores também gostam de barras laterais ultimamente e têm pop-ups e menus
Ainda assim, o que se destaca especialmente é o contraste entre a janela Library com cara de legada aparecendo em vários lugares e recursos que abrem em abas do navegador, como configurações/extensões/senhas
No fim, é difícil prever que forma vai aparecer ao abrir um recurso do navegador; no começo isso é certo, e mesmo depois de se acostumar fica a sensação de que “cada coisa simplesmente abre de um jeito”
Dá para se adaptar, mas continua sendo uma bagunça
- Acho aceitável que alguns recursos tenham tanto popover quanto janela
  Mas precisa ser implementado de forma inteligente
  Por exemplo, no Safari, os downloads são basicamente um popover, mas você pode “destacar” esse popover e transformá-lo em uma janela
  Isso atende aos dois casos de uso mantendo a consistência
  O Firefox precisa bastante desse tipo de raciocínio
O pior ponto da UI Proton, sobre o qual as pessoas não falam muito, é que ela é objetivamente um grande retrocesso se você não usa um monitor moderno de 1080p ou superior
Meu laptop é um ThinkPad X220 antigo, então a mudança desperdiçou uma quantidade inútil de espaço na tela e afetou minha eficiência real de trabalho
Isso faz parte de uma tendência de engenharia de software hostil ao usuário que prejudica pessoas que não podem comprar hardware mais novo ou, por qualquer motivo, não querem usá-lo
Neste caso, nem é transformar tudo em um aplicativo Electron ou React inchado; foi só a Mozilla piorando a UI sem motivo, para criar uma impressão superficial de que ainda se importa com o Firefox
O Proton é tão ruim para o meu modo de uso que estou usando um userChrome customizado

Como criar uma UI padrão melhor para o Firefox

A polêmica da UI após o Firefox v89 e o escopo do projeto

Critérios para avaliar UI/UX

Intuitividade

Eficiência

Flexibilidade

Três problemas apontados na Proton UI

O problema das abas com aparência de botão

O equilíbrio entre familiaridade e mudança

A percepção das abas sob a psicologia da Gestalt

O Safari voltou atrás nas abas em formato de botão

Remoção de espaços excessivos e ícones

Espaçamento e visibilidade do conteúdo

Eficiência de clique sob a Lei de Fitts

O problema de a diferença da Compact UI quase ter desaparecido

UI só com texto e acessibilidade

Redesenho das abas no Lepton Theme

Exibição consistente dos estados das abas

Comparação do estado selecionado entre Photon, Proton e Lepton

Estados compostos como mudo, PIP e abas fixadas

Aproveitamento do espaço conforme a largura da aba

Formas de distribuição e preferência

Ajuste de ícones e padding

Painéis e menus de contexto

Comparação dos menus do Edge, Chrome e Lepton

Menu de contexto e grupos de atalhos

Aplicação de mais ícones

Suporte a SO, temas e cores

Tema padrão do sistema

Espaço dos botões da barra de título

Complementos para o tema Proton

Interação e animação

Interações que ajudam

Projeto de animação

Restauração de ilustrações

Conclusão e limitações

Leituras relacionadas

1 comentários

Opiniões do Hacker News