Cómo crear una mejor interfaz de usuario predeterminada para Firefox

 (github.com/black7375)
1 puntos por GN⁺ 2024-02-21 | 1 comentarios | Compartir por WhatsApp
  • La Proton UI de Firefox v89, tras su lanzamiento en 2021, generó controversia en torno a las pestañas, los márgenes y los íconos; Firefox-UI-Fix es un tema que la complementa y también se aplicó a los temas predeterminados de Waterfox y Floorp
  • Las decisiones de diseño no se basan en pruebas A/B, sino en teorías y casos de UX como la Jakob’s Law, la psicología Gestalt, la Fitts’s Law y estudios de Nielsen Norman Group
  • Las pestañas que parecen botones, el padding amplio y los menús centrados en texto pueden perjudicar el reconocimiento del estado seleccionado, la eficiencia de clic, la visualización de contenido en pantallas pequeñas y la accesibilidad
  • Lepton Theme expresa de forma consistente el estado de las pestañas dentro de 36px~240px, y ajusta el botón de cierre, los íconos, el padding, los colores del tema y el espacio de la barra de título según el sistema operativo
  • El objetivo no es negar Proton UI, sino mejorarla respetando Proton UI, aunque por las limitaciones de CSS todavía quedan áreas difíciles de implementar, como el comportamiento del page action button

Controversia sobre la UI después de Firefox v89 y alcance del proyecto

  • Este documento se centra en la UI tomando como referencia Firefox v89, asumiendo que después hubo algunas mejoras
  • Tras el lanzamiento de Firefox v89 en 2021, surgió una gran controversia en Reddit y Hacker News alrededor de Proton UI
  • El repositorio Firefox-UI-Fix ganó popularidad rápidamente al complementar varios problemas de Proton UI, y Waterfox y Floorp también usan este tema como predeterminado
  • Mozilla decidió terminar el soporte para Windows 7 y Windows 8, y Firefox v115 es la última versión compatible con Windows heredado
    • Firefox v115 estaba previsto para estar disponible hasta septiembre de 2024
    • Tanto Mozilla como el proyecto tuvieron que depurar código y funciones relacionados con Windows heredado, y este documento también trata la UI de Windows heredado

Criterios para evaluar UI/UX

  • Los criterios de diseño se resumen en tres grandes ejes: intuitividad, eficiencia y flexibilidad
  • Como no se dispone de los datos ni del entorno necesarios para pruebas A/B, se predice el comportamiento del usuario y se juzga de forma deductiva usando varias teorías

  • Intuitividad

    • Simplicity: reduce la carga cognitiva eliminando o simplificando elementos innecesarios
    • Visibility: facilita la operación haciendo visibles las funciones clave
    • Accustomably: reduce la cantidad de aprendizaje para que sea posible adaptarse rápido
    • Consistency: facilita la memorización al reducir excepciones
    • Predictability: reduce la ansiedad al hacer que el usuario sienta que tiene control
    • Affordance: proporciona pistas sobre cómo operar la interfaz

  • Eficiencia

    • Clearly: las distinciones deben percibirse con claridad
    • Proximal: los elementos deben estar lo suficientemente cerca como para moverse rápido hacia ellos
    • Bulky: un tamaño grande facilita el reconocimiento o el movimiento
    • Snappy: debe responder de forma fluida y sin interrupciones

  • Flexibilidad

    • Accessibility: abarca un rango amplio sin importar edad, discapacidad u otros factores
    • Functional: admite diversas funciones para satisfacer necesidades
    • Contextual: debe existir de forma natural en cada situación
    • Harmonious: debe integrarse naturalmente con cada elemento
    • Pleasure: busca satisfacción orientada a la diversión o la creatividad
    • Compatibility: considera APIs de versiones antiguas, hojas de ruta de versiones superiores, upstream, sistemas operativos, RTL, etc.

Tres problemas vistos en Proton UI

  • La primera impresión de Firefox v89 Developer Edition fue limpia, pero se considera que en el uso real resultaba bastante incómoda
  • Los problemas principales se condensan en tres puntos
    • Tab: las pestañas parecen botones
    • Padding: los márgenes son demasiado grandes
    • Icons: es difícil leer solo con íconos, o quitar íconos genera otros problemas

El problema de las pestañas que parecen botones

Eliminar márgenes excesivos e íconos

  • Márgenes y visibilidad del contenido

    • Como un navegador web es un visor de contenido web, no debería interferir con la visualización del contenido
    • La UI Proton perjudica la visualización del contenido debido a su gran cantidad de padding
    • En dispositivos con pantallas pequeñas, como laptops de 13 pulgadas, este problema es crítico

  • Eficiencia de clics vista desde la ley de Fitts

    • La ley de Fitts considera que el tiempo necesario para desplazarse rápidamente hasta un área objetivo depende de la proporción entre la distancia al objetivo y el ancho del objetivo
    • La fórmula clave es MT = a + b · ID = a + b · log₂(2D/W)
    • MT es el tiempo medio para completar el movimiento, a y b son constantes según el dispositivo de entrada elegido, e ID es el índice de dificultad
    • D es la distancia desde el punto inicial hasta el centro del objetivo, y W es el ancho del objetivo medido a lo largo del eje de movimiento
    • Si se excluyen las constantes y el logaritmo, lo importante es la proporción 2D/W
    • Primero hay que reducir la distancia y maximizar el ancho sin aumentar la distancia
    • También hay que evitar que el padding crezca demasiado al rellenar el espacio sobrante
    • Photon(v88) se evalúa como una UI más fácil de pulsar en el ícono de Amazon y en el menú
      • El ícono de Amazon tiene un W mayor
      • El menú tiene un W un poco menor, pero un D mucho menor
    • Si el ícono parece más pequeño que el área real de clic, se produce una desventaja, por lo que conviene hacer que el ícono se vea más grande rellenando el área de padding

  • El problema de que la diferencia de Compact UI casi desapareció

    • Mozilla marcó la compact UI como obsoleta
    • Se considera que en v89 Compact UI, Normal UI y Touch UI apenas tienen diferencias significativas, salvo pequeñas variaciones en la altura de la barra de pestañas y la barra de herramientas

  • UI solo con texto y accesibilidad

Rediseño de pestañas de Lepton Theme

  • Mostrar de forma coherente los estados de las pestañas

    • El diseño de pestañas no es solo una cuestión de apariencia, sino también de manejar varios estados
    • Las pestañas pueden tener estados como los siguientes
      • 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.
    • Estos estados deben expresarse de forma coherente dentro de 36px~240px

  • Comparación del estado seleccionado en Photon, Proton y Lepton

    • En Photon y Lepton, la pestaña seleccionada está conectada con la barra de herramientas, por lo que es fácil reconocerla
    • Lepton acorta la indicación de contenedor en las pestañas de fondo para reducir la sobrecarga visual
    • En Proton, es difícil distinguir qué pestaña está seleccionada entre el color de fondo resaltado y la barra superior
    • La barra superior es una indicación de pestaña de contenedor, pero se siente similar a la pestaña seleccionada de la UI anterior, Photon
    • La comparación de los estados Selected, Multiple selected, Hovered y General se resume así
      • Photon reconoce Selected mediante la conexión con la barra de herramientas, y distingue Multiple selected y Hovered con el color de la línea contextual superior
      • En Proton, Selected y Multiple selected se ven casi iguales
      • Lepton distingue los estados mediante la conexión con la barra de herramientas y colores de fondo diferentes

  • Estados compuestos como silenciado, PIP y pestaña fijada

    • En la combinación de Muted, Hover y PIP, las diferencias entre navegadores son grandes
      • En Photon, Muted y Muted + Hover no se distinguen, y si hay indicación de PIP, la posición de Muted cambia mucho
      • Proton English muestra Muted solo como texto, y PIP solo puede identificarse en estado hover
      • Proton Korean cambia la UI según el idioma de visualización, Muted oculta el favicon y no llega a mostrar la indicación de PIP
      • Lepton muestra toda la información, mantiene constantes las posiciones de Muted y PIP, y al hacer hover da una señal de que se puede controlar
    • Se considera que, en combinaciones más complejas, Proton era casi inutilizable en un entorno en coreano
    • Lepton maneja los estados compuestos de la siguiente manera
      • Siempre representa toda la información
      • Si no hay favicon, aumenta el tamaño de Muted para reemplazarlo
      • Incluso en estado Pinned, mantiene siempre la misma posición
      • Si las posiciones se superponen, como con Container y Titlechanged, las combina para mostrarlas

  • Uso del espacio según el ancho de la pestaña

    • Lepton ajusta su comportamiento según el ancho de la pestaña
    • Si hay suficiente ancho, muestra todos los botones de cerrar como Proton
    • Si las pestañas llenan todo el espacio y falta ancho, oculta el botón de cerrar de las pestañas de fondo
    • Reduce el tamaño del botón de cerrar para disminuir clics accidentales, pero al hacer hover sobre una pestaña de fondo aún se puede cerrar
    • El título de la pestaña se muestra de forma más eficiente ajustando el padding y el gradiente
    • Ahorra espacio para que se vea el texto New en la última pestaña
    • Solo ajusta cuando falta ancho para que la palabra wiki se vea claramente
    • Lepton muestra más contenido web, y Photon y Lepton tienen separadores de pestañas

  • Forma de distribución y gustos

    • El criterio de una buena UI varía según la persona y, hasta cierto punto, es una cuestión de gusto
    • Ofrece tres conceptos de pestañas
      • Pestañas Lepton generales adaptadas a Proton
      • Pestañas Photon con línea contextual en ángulo recto
      • Pestañas Proton originales
    • Este tema es especialmente conocido por su compatibilidad con la UI de pestañas Photon

Ajuste de íconos y padding

  • Paneles y menús contextuales

    • Reduce las quejas existentes mediante la incorporación de íconos y el ajuste del padding
    • El problema de trazos desbalanceados fue corregido por el contribuidor @zapSNH, y se logró un conjunto de íconos coherente y reconocible en todo el navegador

  • Comparación de menús de Edge, Chrome y Lepton

    • Edge tiene menús sin íconos sin una razón especial, y los íconos en general son demasiado parecidos, por lo que es difícil revisarlos de un vistazo
    • Algunas metáforas de íconos de Edge, como New InPrivate window, se consideran confusas
    • Los íconos de Chrome no tienen un estilo moderno, son angulosos frente a una UI redondeada, y se ven demasiado pequeños en comparación con el tamaño del texto
    • Lepton ofrece un conjunto de íconos coherente, de estilo moderno y tamaño adecuado
    • Usa íconos rellenos solo para los íconos importantes a fin de mejorar la facilidad de revisión visual, y emplea metáforas que distinguen la apariencia

  • Menús contextuales y grupos de accesos directos

    • En Edge, no se entiende por qué Add all tabs to favorites no tiene ícono
    • Chrome no tiene ningún ícono en los menús contextuales
    • Lepton coloca los íconos de forma claramente diferenciada
    • En los menús contextuales de páginas web, solo Firefox coloca un grupo de accesos directos en la parte superior, logrando un efecto de acceso rápido similar a un menú circular

  • Aplicar más íconos

    • Agrega íconos al menú global y a diversos paneles
    • Cuando se abre una carpeta de la biblioteca de marcadores, el ícono del menú también reacciona
    • El tamaño de menús y paneles se reduce, y la posición inicial del texto queda alineada
    • Agrega íconos para varios casos de diseño

Compatibilidad con SO, temas y colores

  • Tema predeterminado del sistema

    • Lepton ajusta la UI según los distintos SO y configuraciones
      • Windows 7: sigue de cerca el diseño de ventanas Aero
      • Windows 8.1: hace que la barra de título combine bien, como en Windows 7
      • Windows 10 Light: sigue los colores de Legacy Edge de Windows 10
      • Windows 10 Dark: aplica el mismo criterio
      • Windows 10 Dark + Accent titlebar: si está activada la configuración de color de acento en la barra de título, la respeta
      • MacOS Light/Dark: sigue los colores de Mac
    • Los usuarios de Windows 11 pueden usar colores de Windows 11 similares a Edge con la opción userChrome.compatibility.os.win11
    • También funciona en Linux, y corrige problemas de color y de botones de barra de título no nativos

  • Espacio para los botones de la barra de título

    • En casos como Tabs on bottom o One Liner, es necesario reservar espacio para los botones de la barra de título dentro de la barra de herramientas
    • Los valores y posiciones varían según el SO
      • Win7, Win8: 105px, derecha
      • Win10: 138px, derecha
      • Mac: 72px, izquierda
      • Linux: 84px, aunque puede variar según el tema del sistema
    • En pantalla completa se usa la UI nativa, por lo que debe tratarse como 0px
    • Puede estar tanto a la izquierda como a la derecha, y puede haber tres botones o no

  • Mejoras al tema Proton

    • Corrige problemas de accesibilidad causados por la falta de contraste de color del propio tema Proton
    • Mejora el contraste de color y las sombras de contorno de los temas incluidos
    • También lo aplica a las partes donde el tema Proton no se aplicaba, para lograr mayor uniformidad
    • También aplica el modo oscuro en partes donde no se aplicaba
    • Hace que los colores se apliquen correctamente incluso al usar temas personalizados en lugar del tema predeterminado
    • En tablas y listas, agrega un color de fondo distinto a las filas pares para facilitar la lectura
    • En el reproductor de audio, aplica bordes redondeados que siguen el diseño de Proton
    • En el reproductor de video, hace que el contenido se vea mejor y también mejora la apariencia de los íconos

Interacciones y animaciones

  • Interacciones útiles

    • Cuando el puntero del mouse o un elemento cambia al hacer hover, ofrece una pista de que se está realizando alguna acción
    • En elementos pequeños y de naturaleza distinta a otras acciones, como los comandos de zoom de un panel, cambiar el puntero del mouse ayuda
    • Si aparece un borde al pasar el mouse sobre un campo, se entiende de forma intuitiva que se puede presionar
    • En el texto del elemento activo se usa el color de acento
    • Los elementos eliminados muestran el ícono en escala de grises y el título tachado, como si estuvieran deshabilitados, pero al hacer hover se muestra el título sin tachado

  • Diseño de animaciones

    • Las animaciones hacen que la UI se sienta más fluida y natural, pero a veces hacen que la acción se perciba lenta
    • Los criterios de diseño son los siguientes
      • Seguir la curva de easing de Photon, acelerando rápidamente al inicio y desacelerando suavemente al final
      • Reducir la duración de la animación de entrada para dar una sensación de respuesta rápida
      • Aumentar la duración de la animación de salida para que se sienta suave
      • Los objetos grandes tienen una duración mayor que los objetos pequeños
      • La duración dentro de objetos anidados también debe ser mayor
    • Los mismos principios se aplican al color de fondo, la rotación de flechas, las pestañas contenedoras, las pestañas con sonido y fijadas, y la barra lateral
    • Los mismos principios se aplican también a funciones opcionales que no son predeterminadas
      • Autohide Back Button
      • Autohide Page Action
      • Autohide Tab Bar

  • Restauración de ilustraciones

    • Se considera que las ilustraciones amigables de Photon reducen la confusión en situaciones de error
    • Este tema restaura esas ilustraciones
    • Ejemplos de aplicación: pantallas de Welcome back, DNS error, Session restore y Search result

Conclusión y limitaciones

  • Este tema considera convenciones, psicología y resultados de investigación, y hereda las fortalezas de temas existentes
  • Es compatible con SO, modo oscuro, temas personalizados e interacciones contextuales
  • Debido a las limitaciones de CSS, hay cosas que no se pueden implementar, como el comportamiento del botón de acciones de página
  • El objetivo es “🦊 I respect proton UI and aim to improve it.”

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-02-21
Comentarios en Hacker News

  • Lo más incómodo de la nueva UI fue que todo se volvió demasiado grande
    Se entiende si es una pantalla de teléfono para tocar con los dedos, pero en un escritorio normal se desperdicia muchísimo espacio
    El aumento del padding que menciona el artículo influye, pero también fue importante que quitaran la opción de compact UI density
    Si activas browser.compactmode.show en about:config, luego vas a Menú > Más herramientas > Personalizar barra de herramientas > “density” abajo, se puede volver a usar
    La opción aparece marcada como “not supported”, pero lleva años así

    • Prefiero por mucho que la interfaz tenga padding generoso
      Si hay suficiente padding, baja el ruido visual y la complejidad, y los elementos tienen espacio para respirar
      Puede que no tenga una ventaja práctica concreta, pero con solo verlo me siento menos ansioso
    • Por un lado están quienes dicen “por favor no desperdicien espacio con padding”, y cada vez que sale el tema de KDE también aparecen quienes dicen “sin padding meten demasiada información y texto, y cuesta leerlo”
      Si lo haces te critican, y si no lo haces también
    • Me da curiosidad si alguien sabe por qué lo marcan como “not supported”
    • Ese era mi problema, voy a probar ese flag hoy
    • “not supported” me pareció una mezquindad hacia quienes criticaron decisiones de diseño “modernas”

  • Soy el autor de Lepton, un tema popular para Firefox
    Desde mi perspectiva se puede ver cómo tomé varias decisiones y cómo mejoré algunas decisiones desafortunadas de Mozilla
    Así que puede servir para explicar cómo lo mejoré y por qué ganó popularidad
    Este artículo es parte de una serie

    • https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
    • Me pregunto dónde se puede encontrar Lepton
      En los temas de la tienda de complementos no aparece nada con ese nombre
      Tal vez Lepton sea una UI antigua de Firefox y solo haya quedado en versiones viejas
      Sí leí el artículo, pero puede que se me haya pasado algo
    • Normalmente no suelo personalizar mucho la UI y prefiero acostumbrarme a lo que viene por defecto
      Porque así hay menos fricción, y me gusta poder adaptarme a la configuración base apenas lo instalo
      Pero la personalización de la UI de Firefox es una excepción porque es fácil de configurar y tiene buena calidad
      También es una ventaja importante que se siente mantenida
      No sabía que había escrito textos tan largos sobre esto, y como se ve interesante y bien documentado, pienso leerlos
    • Me parece especialmente interesante que la telemetría se use para justificar quitar elementos de la interfaz
      Personalmente, la barra de direcciones es tan enorme que parece que todavía sobraría espacio aunque le pusieras 10 botones
      Así que, salvo por querer quitarlo todo hasta que ya no quede nada más que eliminar, me cuesta imaginar una razón para borrar más elementos
      Como parece que sabes bastante de UI/UX, tengo una pregunta: tengo la teoría de que los íconos en blanco y negro son peores que los íconos a color; me gustaría saber si hay estudios o algún consenso al respecto
    • El proceso de instalación fue muy fácil
      Eso sí, recomendaría simplemente ordenar primero los pasos y mover por completo la sección avanzada hasta abajo 
      1. Ejecutar el script en la línea de comandos del sistema operativo  
2. Ir a `about:support` y hacer clic en borrar la caché de inicio

  • Una mejor UX de navegador, dicho con firmeza, empieza con las pestañas verticales
    Las pestañas horizontales se vuelven difíciles de gestionar o seguir incluso con solo 6 a 8 abiertas
    En las pestañas verticales anidadas, los enlaces que se abren en una nueva pestaña pasan automáticamente a ser pestañas hijas, y esa estructura y contexto se pueden inferir mucho más fácilmente que con pestañas horizontales
    Si además se añaden colores por sitio, los grupos de pestañas se distinguen mejor, y se puede guardar el estado de avance de investigaciones o documentación marcando como favorito el árbol de pestañas
    Aquí hay un archivo CSS y algunas capturas de pantalla: https://gist.github.com/aclarknexient/88673880d373864eee1927...
    También tengo que agregar una captura de pestañas anidadas y con color, así que la pondré después de publicar el comentario

    • Me gustan las pestañas verticales y son una gran ventaja para mi forma de navegar, saltando entre varios trabajos de largo plazo
      Las pestañas encajan mejor que los marcadores para ese uso, porque incluso en 2024 el administrador de marcadores de todos los navegadores sigue siendo inmaduro y organizar marcadores es pésimo
      Las pestañas anidadas no me atraen mucho, pero la función de cambiar con un clic entre grupos de pestañas mostrados en la barra lateral, como los “panes” de la extensión Sidebery para Firefox o los “spaces” de Arc, es muy potente
      Es aún mejor si vinculas esos paneles/espacios con perfiles del navegador
      Por ejemplo, puedes cambiar una ventana del navegador entre navegación general, compras, clases universitarias en línea y desarrollo de software, y si hace falta también puedes separar temporalmente un panel/espacio específico en una ventana nueva
    • Reconozco que es cuestión de gustos, pero creo firmemente justo lo contrario
      Es cierto que si abres más de 6 a 8 pestañas en una barra horizontal, se vuelven difíciles de gestionar y seguir
      Usé Arc durante los últimos 6 meses, y en una barra vertical pasaba exactamente lo mismo cuando tenía abiertas 6 a 8 pestañas
      Al final terminaba cerrándolo todo y empezando de nuevo cada 4 horas
      Hay dos argumentos de ambos lados con los que sí empatizo
      Primero, si cuentas los píxeles que ocupa la barra de pestañas en horizontal y en vertical, nunca he visto una barra de pestañas vertical realmente práctica que use la misma cantidad de píxeles o menos que una horizontal
      Segundo, como los monitores casi siempre tienen más píxeles horizontales que verticales, también existe el argumento de que una barra vertical aprovecha mejor la relación de aspecto de la pantalla
      Eso me parece cierto en 16:9 o más, pero personalmente me convence menos en 16:10, algo común en las MacBook
    • Viendo la captura “controvertida” de FF89, parece que uno de los mayores cambios fue rediseñar las pestañas con más relleno
      Pero como oculto la barra de pestañas superior y uso Tree Style Tab, que encaja bien con Firefox, ni siquiera noté ese cambio
      No es que me guste especialmente Firefox en sí, pero las ventajas de UX del árbol de pestañas superan esos pequeños detalles en los que Chrome/Safari lo hacen un poco mejor, así que no me lo pienso mucho
      Aun así, uso Chrome para trabajo frontend por las herramientas de desarrollador
    • No sé si responder a mi propio comentario va contra la etiqueta de HN o si es una buena forma de estructurar la información :)
      En la sección avanzada de la página de opciones de Tree Style Tab hay un área de hoja de estilos de usuario con recarga en tiempo real
      Es muy buena para probar elecciones de fuente sin reiniciar el navegador
      Yo la cambié para usar la fuente condensada SF Pro de Apple
      Iosevka Mono, que uso casi en todas partes normalmente, por alguna razón no quedaba bien en los títulos de las pestañas
      El CSS es el siguiente: 
      :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;  
}
      Agregué una captura del resultado de este CSS en el mismo enlace que en el comentario anterior: https://gist.github.com/aclarknexient/88673880d373864eee1927...
    • En laptops, las pestañas verticales empiezan a dejar de convenirme
      En Firefox se rompió el hack de la barra lateral con autoocultado y me da pereza arreglarlo, así que ahora tengo varios centímetros de espacio gris vacío aunque ni siquiera tenga 100 pestañas abiertas
      Normalmente solo dejo abiertas entre 5 y 10
      Lo más molesto es que hoy en día muchos sitios web deciden entre móvil y escritorio según el tamaño del viewport del navegador, no por el user agent
      Ya perdí alrededor de una pulgada de ancho horizontal por Tree Style Tab, así que casi no queda margen antes de que un sitio crea que estoy en un iPad
      Así que, en la práctica, tengo que usar el navegador en pantalla completa; de lo contrario, aparece un montón de menús hamburguesa con saltos de línea horribles y la navegación empeora
      En la mayoría de los casos termino teniendo que desactivar por completo la barra lateral, lo que añade varios clics cada vez que cambio de pestaña

  • Este artículo parece intentar convencer de que el autor del tema creó un tema de Firefox objetivamente mejor basándose en reglas de UX, pero la mayoría de los cambios se ven como preferencias personales
    Sin duda está bien hecho y bien mantenido, pero en lo personal no me parece tan atractivo visualmente y algunas partes se ven más complejas
    Cada persona tiene preferencias distintas, y Firefox eligió un diseño pero también permite este tipo de cambios, lo cual en sí está bien
    Aun así, resulta un poco gracioso que el autor parezca querer demostrar que sus preferencias son empíricamente correctas

    • La UI definitivamente es una cuestión de gustos, así que hice la distribución en tres variantes
      Aun así, me resultaba confuso no tener indicador de que estaba cargando mientras estaba en silencio, o no tener separadores entre pestañas

  • Dejé de usar Firefox como navegador predeterminado desde que arruinó las pestañas.
    De vez en cuando lo abro para probar y, si todavía parecen botones en vez de pestañas, me digo que vuelva a intentarlo dentro de unos seis meses.
    El tema claro es especialmente ofensivo, con botones blancos sobre gris claro.
    Ni siquiera sigue bien la configuración del tema del sistema en Windows.
    En Windows puedes mantener las apps en tema claro y aun así aplicar color a la barra de tareas, el menú Inicio y la barra de título; Edge lo entiende y Chrome, aunque no del todo, al menos tiene suficiente contraste.
    Firefox falla por completo en eso.

    • Uso Firefox como navegador secundario, y cada vez que lo abro primero me interrumpe y se mete a decirme qué cambios y funciones nuevas se agregaron desde la última vez, como Pocket o VPN.
      Por favor, ya basta y déjame empezar a navegar, que es a lo que vine.
      Ojalá no imitara los patrones oscuros de Microsoft, que te mete Office 365 y Game Pass entre actualizaciones.
      Ese tipo de publicidad de funciones deberían hacérsela a quienes todavía no instalaron Firefox; yo ya soy “cliente”, así que no me molesten.
      Por eso uso Chrome la mayor parte del tiempo.
      Será más inferior y podrá espiarme, pero al menos no se me atraviesa en el camino.
    • Solo instala Sidebery[1] y oculta las pestañas predeterminadas[2].
      Ese es el camino :)
      [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
      [2] https://superuser.com/a/1424494

  • Me pregunto si hay alguien más a quien no le moleste en absoluto eso de que las pestañas “parezcan botones”.
    A veces siento que soy el único.
    No sé si de verdad les resulta tan molesto a quienes lo usan por primera vez.

    • Uso Firefox todos los días, pero ni siquiera sabía que esto se consideraba un “problema”.
      Nunca se me había ocurrido antes de leer estos comentarios, y me parece que la barra de pestañas está perfectamente bien tal como está, así que probablemente no vuelva a pensarlo.
    • El hecho de que las pestañas parezcan botones no me molesta mucho por sí mismo.
      Más bien es una alternativa común a las pestañas con forma de pestaña, y según recuerdo incluso el control de pestañas de Windows 95 tenía un modo para que se vieran como botones.
      Creo que originalmente también se usó en la barra de tareas, y desde los 90 mIRC lo usaba para cambiar entre canales/ventanas.
      Lo que no me gusta personalmente es la apariencia de este “botón de pestaña” en particular.
      Parece una pastilla alargada, hasta da la impresión de que sería difícil de tragar, y como ya estaba acostumbrado a que se vieran como pestañas de verdad, no veo por qué había que cambiarlo.
      Por suerte Firefox permite personalizar la apariencia, así que lo cambio con userChrome.css para dejarlo más a mi gusto.
    • No afecta mi uso de Firefox.
      Pero sí está desperdiciando píxeles al meter espacios que no tendrían por qué existir.
      A estas alturas uno ya se acostumbra a decisiones de UI absurdas y simplemente termina adaptándose a lo que las organizaciones le imponen.
      Parece que casi a nadie le importa la consistencia ni la facilidad de descubrimiento.
    • Me molesta porque es lo bastante distinto de otras cosas con pestañas, no solo navegadores sino también administradores de archivos o editores.
      No entiendo por qué tiran toda la semántica por la ventana.
      Parece un botón, pero no se comporta como botón.
    • Nunca lo había notado, e incluso después de que me lo señalaron no me parece un problema.
      Para quienes sí lo sienten como problema, se ve bastante como buscarle la quinta pata al gato.

  • Como todos están escribiendo sus propias quejas, voy a poner la mía también.
    Si tienes un árbol grande de carpetas de marcadores, el proceso de navegar por el pequeño popup de la UI de “Add Bookmark” para encontrar dónde agregar uno nuevo es horrible.
    La barra lateral de marcadores permite buscar por nombre, pero no encontrar dónde está ese marcador.
    Extensiones de búsqueda de marcadores como Bookmark search plus 2 lo resuelven, pero no debería hacer falta.
    Edito: descubrí clic derecho -> Show in Folder, y eso es excelente.
    Aun así, no es la mejor UI, y la extensión que mencioné sigue siendo mucho más intuitiva.
    No puedes tener varias barras laterales al mismo tiempo.
    Así que no puedo abrir a la vez Tree Style Tabs para manejar pestañas verticales y las carpetas/búsqueda de marcadores.
    Es ridículo.
    En la práctica eso es todo, y casi todo tiene que ver con el manejo de marcadores.
    No sé si el resto de la UI está bien o si simplemente me acostumbré tanto que ya no veo los defectos, pero uso Firefox bastante cómodo.
    No he sentido la necesidad de quejarme tanto como otros sobre los rediseños de estilo.

    • Por alguna razón, en todos los navegadores los marcadores han sido descuidados de forma lamentable.
      Puedes abrir un navegador de hace 20 años y la gestión de marcadores es casi igual o, en algunos casos, hasta un poco mejor.
      Parece que mejorar los marcadores no es algo sexy, así que a nadie le importa.
    • Me pregunto si no tendrás memoria muscular del atajo Ctrl+Shift+B, que antes abría un panel lateral grande.
      Ahora solo muestra una barra horizontal angosta.
      A mí también me molesta bastante ese rediseño, pero descubrí Ctrl+Shift+O, que es el atajo de “administrar marcadores”.
      Abre una ventana emergente más grande con los marcadores y, hasta ahora, me ha parecido casi tan cómoda como el panel lateral anterior.
      También permite buscar marcadores y, si haces clic derecho y eliges “show in folder” en el menú contextual, también te muestra dónde están dentro de la jerarquía.
      Aunque todos mis marcadores están en “other bookmarks”, así que probablemente no lo use mucho.

  • La queja más grande de “cambio innecesario de la UI de Firefox” es la eliminación de browser.urlbar.clickSelectsAll hace 4 años
    Como era de esperarse, a Mozilla no le importa
    Si lees el reporte del bug, no hay otra explicación más que hostilidad hacia el usuario: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
    Ningún campo de texto de ninguna UI funciona así
    No puedo entender por qué Mozilla lanzó esta “función” y al mismo tiempo eliminó hasta la opción para desactivarla
    Está bien que algunos usuarios la prefieran, pero no deberían quitarme mi maldita opción para imponérmela a la fuerza

    • En realidad, la lógica de Mozilla era que todos los demás navegadores principales funcionan así
      Si lo revisas en Chrome, en efecto funciona como Firefox
      En cuanto a la hostilidad hacia el usuario, la lógica era que como a quienes no les gusta el comportamiento nuevo no activan la telemetría, no merecen disfrutar la función que quieren
      Es bastante irónico considerando que la principal ventaja de Firefox es su modelo orientado a la privacidad
    • Totalmente de acuerdo
      Han pasado 4 años y todavía tropiezo con esto todos los días
      Irónicamente, la forma en que suelo fallar es justo el caso que supuestamente este cambio iba a ayudar
      Si quiero seleccionar toda la URL y por instinto hago doble clic, el primer clic selecciona todo y el segundo reduce la selección a una sola palabra
      Me desconcierto un momento y vuelvo a hacer clic, pero ahora necesito otros tres clics para seleccionar toda la URL
      Esto es sorprendentemente irritante
      La explicación en el tracker parece ser algo como “quizá en algún momento del futuro hagamos alguna otra cosa que justifique esto”
      4 años después, todavía no se ve nada de eso
    • Me cambié a Vivaldi después de que eliminaron esta función de Firefox
      Vivaldi todavía te deja elegir este comportamiento
      Me pregunto si hay algún otro navegador de Unix que permita desactivar seleccionar todo al hacer clic
      En general estoy satisfecho con Vivaldi, pero estaría bien tener más opciones
    • Sigue roto
      Porque la función “Paste and Go” no funciona correctamente
      En sentido común, “Paste and Go” debería equivaler a hacer “Paste”, que inserta correctamente el texto del portapapeles en la posición del cursor, y luego “ir a la dirección de la barra de direcciones”
      Pero si quitas la selección automática de la URL y dejas el cursor dentro, y luego usas “paste and go”, Firefox ignora la URL existente e intenta ir directamente al texto del portapapeles
      Eso podría ser un riesgo de seguridad porque podría engañar al usuario para que visite una URL que no pretendía
      Si no quieren arreglarlo, deberían cambiarle el nombre a “Clear, Paste, and Go” para que coincida con lo que realmente hace
    • Dicen que “a Mozilla no le importa”, pero una opción interna es solo una opción interna, y salvo en casos como contratos de soporte empresarial, a ningún navegador le importa demasiado
      Si tienes que entrar a about:config por algo que no sea desarrollo o administración de dispositivos móviles, es difícil esperar que siga funcionando después de una actualización
      Toda opción es código que hay que mantener
      Mi suposición es que al reescribir el código que usaba esa opción, eligieron el camino más rápido y barato de no volver a implementar una función que ni siquiera tenía soporte oficial

  • La verdadera pesadilla de UI/UX de Firefox son los restos legacy
    Se siente como si cada función básica del navegador se abriera en una vista distinta
    La configuración va en una pestaña del navegador, el historial en una barra lateral
    Aunque eso solo pasa con Ctrl+H, porque administrar el historial con Ctrl+Shift+H abre una ventana aparte
    Los marcadores y las descargas también usan esa ventana, la ventana Library que parece arrastrada desde la época de Firefox 3/4
    Las descargas también tienen un pequeño popup, pero Ctrl+J y la gestión de descargas abren esa ventana
    Los marcadores abren esa ventana con Ctrl+Shift+O, pero Ctrl+B abre la barra lateral
    Los perfiles son casi un chiste, porque prácticamente no hay una función utilizable para usuarios y hay una interfaz escondida en about:profiles que parece legacy
    Las contraseñas se abren en una pestaña del navegador, pero tienen un aspecto propio que no encaja bien con nada más
    Lo único con algo de cohesión es que configuración y complementos están ambos en pestañas del navegador y tienen enlaces entre sí
    Todo lo demás es un desastre mezclado de pestañas del navegador, ventanas, barras laterales, popouts y UIs distintas
    Lleva bastante tiempo así de desordenado, y como no hay una visión unificada ni un esfuerzo real por ordenarlo, parece que seguirá igual
    Firefox View, agregado recientemente, también parece otra cosa más que apila otra UI encima
    Ahí también hay historial, así que ya hay como tres formas de ver el historial, y al menos una sobra
    Tal vez sea un intento de mover las funciones de la ventana Library a una pestaña View, pero por ahora solo agrega más confusión
    Sí, es un poco exagerado
    Otros navegadores también últimamente aman las barras laterales y tienen popups y menús
    Aun así, lo que especialmente destaca aquí es el contraste entre la ventana Library con aspecto legacy que aparece por todas partes y las funciones que se abren en pestañas del navegador, como configuración/complementos/contraseñas
    Al final, cuando abres una función del navegador, es difícil predecir qué formato va a aparecer; al principio sin duda, y aun cuando te acostumbras, sigue quedando la sensación de “simplemente cada cosa se abre como sea”
    Uno se adapta, pero sigue siendo un desastre

    • Me parece bien que algunas funciones tengan tanto popover como ventana
      Solo que debe estar implementado de forma inteligente
      Por ejemplo, en Safari las descargas son por defecto un popover, pero puedes “desprender” ese popover y convertirlo en una ventana
      Eso soporta ambos casos de uso y al mismo tiempo mantiene la consistencia
      Firefox necesita bastante de esa forma de pensar

  • Lo peor del UI Proton de lo que la gente no habla mucho es que, si no usas un monitor moderno de 1080p o más, objetivamente fue un gran retroceso
    Mi laptop es una ThinkPad X220 vieja, así que ese cambio desperdició muchísimo espacio de pantalla sin sentido y afectó mi eficiencia real de trabajo
    Es parte de una tendencia de ingeniería de software hostil al usuario que perjudica a la gente que no puede costear hardware más nuevo o que, por la razón que sea, no quiere usarlo
    En este caso ni siquiera se trata de convertir todo en apps infladas de Electron o React, sino simplemente de empeorar la UI sin motivo para crear la impresión superficial de que Mozilla todavía parece preocuparse por Firefox
    Proton es tan malo para mi forma de usarlo que estoy usando un userChrome personalizado