Como fazer uma interface padrão do Firefox melhor

Como melhorar a interface padrão do Firefox

• Desde a versão v89 do Firefox, houve controvérsias sobre a UI, e este repositório ganhou popularidade como resposta a isso.
• Os navegadores Waterfox e Floorp também adotam esse tema como padrão.
• Até 2023, a Mozilla decidiu encerrar o suporte ao Windows 7 e ao Windows 8. A v115 é a última versão com suporte, válida até setembro de 2024.

Princípios

• No design de UI/UX, há 3 critérios principais e 16 menores.
• Como não é possível fazer testes A/B, é importante prever o comportamento do usuário.
• Consideraram-se: intuitividade, simplicidade, visibilidade, adaptabilidade, consistência, previsibilidade, manuseabilidade, eficiência, clareza, proximidade, tamanho, responsividade, flexibilidade, acessibilidade, funcionalidade, contextualidade, harmonia, prazer e compatibilidade.

Problemas

• Aponta os problemas entre a UI Photon do Firefox v88 e a UI Proton da v89.
• Entre os principais problemas estão as abas parecerem botões, o preenchimento excessivo e os ícones serem difíceis de entender isoladamente.

Problema de abas (adaptabilidade, manuseabilidade)

• Analisa os problemas de design das abas considerando adaptabilidade e manuseabilidade.
• Apresenta o caso do Safari da Apple como exemplo de alteração de design de abas em resposta a reclamações de usuários.

Problema de espaço excessivo (visibilidade, proximidade, tamanho, contextualidade)

• Explica por que muito espaço é um problema, considerando visibilidade, proximidade, tamanho e contexto.
• Explica como projetar uma UI de fácil clique usando a Lei de Fitts.
• Analisa os problemas por meio da comparação do espaçamento da UI com o Google Chrome.

Ajuda dos ícones (clareza, acessibilidade)

• Explica a importância dos ícones considerando clareza e acessibilidade.
• Reforça a importância dos ícones com base no refresh de design do Chrome em 2023.

Redesenho de abas

• Explica diversas escolhas de design para o estado de abas e aponta erros comuns da UI Proton.
• Projeta comportamentos inteligentes e eficientes de acordo com a largura da aba.

Distribuição

• Existe um critério pessoal para uma boa UI, mas em parte isso é uma questão de "gosto".
• Compara as abas Lepton, Photon e Proton, escolhendo exemplos compatíveis com cada conceito.

Adição de ícones e ajuste de preenchimento

• Resolve as reclamações anteriores por meio da adição de ícones e do ajuste do preenchimento.
• Destaca a excelência do design de ícones do Lepton por meio da comparação dos ícones de menu do Edge, Chrome e Lepton.

Tema

• Fornece uma UI adaptável a diferentes sistemas operacionais e configurações.
• Segue designs de vários sistemas operacionais, do Windows 7 ao macOS.

Interação

• Projeta interações que ajudam o usuário a entender o que está acontecendo e interações que tornam a experiência agradável.

Conclusão

• Este tema incorpora as melhores características de temas existentes levando em conta convenções, psicologia e resultados de pesquisa.
• Suporta, conforme o contexto, sistema operacional, modo escuro, tema customizado e interações.

Opinião do GN⁺

• O ponto mais importante neste texto é a análise aprofundada de princípios de design e de soluções de problemas para melhorar a experiência do usuário.
• Para usuários de Firefox, este tema pode ser uma alternativa prática para uma experiência de navegação melhor.
• Para pessoas interessadas em design de UI/UX, é um material esclarecedor para entender o contexto e os impactos das decisões de design.

[GN⁺]

Comentário no Hacker News

• O principal problema da nova UI é que tudo ficou excessivamente grande. Isso pode até funcionar numa tela de celular, mas em uma tela de desktop comum vira desperdício de espaço. Isso acontece em parte pelo aumento de padding mencionado no artigo, mas também por terem removido a opção de densidade de UI “compacta”. Ainda assim, dá para trazê-la de volta em about:config com browser.compactmode.show. Essa opção fica marcada como “Não suportado”, mas permanece assim há anos.
• Como autor de um tema popular do Firefox, o Lepton, você pode ver várias decisões que tomei para melhorar decisões piores da Mozilla e como isso acabou ganhando popularidade. Este post faz parte da série.
• Eu sou bem convicto de que melhorar a UX do navegador começa pelas abas verticais. No caso de abas horizontais, com 6–8 abas abertas fica difícil gerenciar e rastrear tudo. Com abas verticais e aninhadas, os links abertos em uma nova aba viram automaticamente uma aba filha. Isso torna mais fácil enxergar estrutura e contexto do que com abas horizontais. Se você adicionar cores diferentes para representar sites distintos, também fica mais fácil ver grupos de abas. Além disso, é possível favoritar a “árvore” de abas para salvar o progresso de pesquisa e elaboração de documentos. Os arquivos CSS e algumas capturas de tela estão aqui.
• Esse post tenta persuadir que o autor do tema criou um tema do Firefox objetivamente melhor partindo de regras de UX, mas a maioria das mudanças parece apenas gosto pessoal. Está claramente bem construído e mantido, mas, para mim, não é visualmente atraente e parece mais complexo em partes. Cada pessoa tem preferência, e o Firefox escolheu um design, mas permite implementar essas mudanças — o que é bom. No entanto, tentar provar que o gosto do autor é o único empiricamente correto soa um pouco tolo.
• Desde que o Firefox estragou as abas, deixei de usá-lo como navegador padrão. Abro de vez em quando para testes, mas toda vez que vejo abas em vez de botões, lembro de novo que vou tentar de novo daqui a seis meses. O tema claro fica ainda pior, com fundo cinza claro e botões brancos. Nem sequer respeita a configuração de tema do sistema no Windows. No Edge isso é compreensível, no Chrome não, mas pelo menos tem contraste suficiente. O Firefox perde completamente o ponto.
• Há quem não se incomode com o fato de as abas serem “botões”. Isso realmente incomoda tanto usuários novos? Às vezes parece que só eu penso assim.
• Como todo mundo fala de suas próprias reclamações, aqui estão as minhas:
  • Quando você tem uma árvore de favoritos grande e com muitas pastas, adicionar um novo favorito no pequeno popup da UI de “adicionar favorito” é horrível.
  • A barra lateral de favoritos permite busca por nome, mas não por localização. O recurso de busca de favoritos (Bookmark search plus 2) resolve isso, mas não deveria ser necessário.
  • Não dá para ter múltiplas sidebars. Então não dá para abrir simultaneamente o Tree Style Tabs para tratar abas verticais junto com pastas e busca de favoritos. Isso é inacreditável.
  • Isso é tudo na prática. A maior parte é sobre gerenciamento de favoritos! Não sei se o restante da UI está bom ou se já me acostumei tanto que não vejo mais mais o que é estranho. Ainda assim, estou razoavelmente satisfeito com o Firefox. Não sinto muita necessidade de reclamar de redesign de tema como muita gente.
• A maior reclamação que faço sobre mudanças de UI “desnecessárias” do Firefox foi a remoção do browser.urlbar.clickSelectsAll há quatro anos. Como era de se esperar, a Mozilla não se importa com isso. Pelos relatos de bugs, isso só pode ser interpretado como hostil ao usuário. Nenhum outro campo de texto funciona assim. Não consigo entender por que a Mozilla lançou essa “feature” e ainda removeu a opção para desativá-la.
• O pior aspecto da experiência de UI/UX do Firefox é o legado. Todas as funcionalidades básicas do navegador abrem em views separadas. Preferências abre em uma aba do navegador, histórico abre na barra lateral, mas para gerenciar histórico? abre em uma janela separada. Favoritos e downloads também abrem nessa janela. Download tem um pequeno popup, mas gerenciamento de downloads abre nessa janela. ctrl+shift+o do Firefox para favoritos abre essa janela, enquanto ctrl+b abre a barra lateral. Perfil? Não existe uma função de perfis amigável ao usuário, e parece uma interface legada escondida em about:profiles. Senha? Abre em uma aba do navegador com uma aparência muito própria que não combina com o resto.
• O ponto pior do Proton UI que ninguém comenta é que, se você não usa um monitor moderno com 1080p (ou superior), é objetivamente uma atualização gigantesca no sentido ruim. Meu notebook é um Thinkpad X220 antigo, então essas mudanças afetam minha produtividade ao desperdiçar espaço de tela de forma quase inútil. Nesse caso não é como inflar tudo como em apps Electron ou React, e sim mudar a UI sem necessidade para manter a aparência superficial de que a Mozilla ainda se importa com o Firefox. O Proton me desagrada tanto que acabo rodando userchrome personalizado.