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

Cómo mejorar la UI predeterminada de Firefox

• A partir de Firefox v89 hubo controversia sobre la interfaz de usuario, y este repositorio ganó popularidad como respuesta.
• Waterfox y Floorp también establecen este tema como predeterminado.
• Al 2023, Mozilla decidió terminar el soporte de Windows 7 y Windows 8; la última versión con soporte es la v115, y estará disponible hasta septiembre de 2024.

Principios

• En el diseño de UI/UX se consideran tres criterios principales y 16 secundarios.
• Como no se pueden hacer pruebas A/B, es importante predecir el comportamiento de los usuarios.
• Se consideran la intuitividad, simplicidad, visibilidad, adaptabilidad, consistencia, predictibilidad, manipulabilidad, eficiencia, claridad, proximidad, tamaño, capacidad de respuesta, flexibilidad, accesibilidad, funcionalidad, contextualidad, armonía, satisfacción y compatibilidad.

Problemas

• Se señalan problemas entre la UI Photon de Firefox v88 y la UI Proton de Firefox v89.
• Que las pestañas se vean como botones, que el relleno sea demasiado grande y que los íconos sean difíciles de leer por sí solos son los principales problemas.

Problema de pestañas (adaptabilidad, manipulabilidad)

• Se analizan los problemas de diseño de las pestañas desde la adaptabilidad y la manipulabilidad.
• Con el caso de Apple Safari, se muestra un ejemplo de cambio en el diseño de pestañas provocado por quejas de los usuarios.

Problema de exceso de espacio (visibilidad, proximidad, tamaño, contextualidad)

• Se explica por qué tener demasiado espacio es un problema considerando la visibilidad, la proximidad, el tamaño y la contextualidad.
• Se explica cómo diseñar una interfaz fácil de pulsar con la ley de Fitts.
• Se analiza el problema mediante una comparación del espaciado de la UI con Google Chrome.

Ayuda de los íconos (claridad, accesibilidad)

• Se explica la importancia de los íconos desde la claridad y la accesibilidad.
• Se destaca la importancia de los íconos con el caso de la actualización de diseño de Chrome de 2023.

Rediseño de pestañas

• Se explican las diferentes opciones de diseño para el estado de una pestaña y se señalan errores comunes en Proton UI.
• Se diseña un comportamiento inteligente y eficiente según el ancho de la pestaña.

Distribución

• Si bien hay criterios personales para una buena UI, en parte es un asunto de preferencias.
• Se comparan las pestañas Lepton, Photon y Proton y se seleccionan ejemplos acordes a cada concepto.

Agregado de íconos y ajuste de relleno

• Se resuelven las quejas anteriores mediante la adición de íconos y el ajuste del relleno.
• Mediante la comparación de los íconos de menú de Edge, Chrome y Lepton, se destaca la superioridad del diseño de íconos de Lepton.

Tema

• Proporciona una UI que se adapta a múltiples sistemas operativos y configuraciones.
• Sigue el diseño de diversos sistemas operativos, desde Windows 7 hasta macOS.

Interacción

• Diseña interacciones que ayudan al usuario a comprender qué está ocurriendo y a disfrutar la experiencia.

Conclusión

• Este tema hereda las mejores características de las temáticas anteriores al considerar la convención, la psicología y los resultados de investigaciones.
• Soporta el sistema operativo, modo oscuro, temas personalizados y la interacción de forma contextual.

Opinión de GN+

• Lo más importante de este texto es el análisis profundo de los principios de diseño y de la resolución de problemas para mejorar la experiencia de usuario.
• Para quienes usan Firefox, este tema puede ser una alternativa práctica que permita una mejor experiencia de navegación.
• Para quienes se interesan en el diseño UI/UX, es una fuente de ideas valiosa que ayuda a entender el contexto de las decisiones de diseño y el impacto que tienen.

[GN⁺]

Comentarios de Hacker News

• El problema principal de la nueva interfaz es que todo es demasiado grande. Puede ser adecuado para pantallas de teléfono, pero en una pantalla de escritorio típica termina desperdiciando espacio. Esto también se debe, como menciona el artículo, al aumento del padding, pero también a que se eliminó la opción de densidad de UI "compacta". Sin embargo, se puede recuperar en about:config con browser.compactmode.show. Esa opción aparece marcada como "no compatible", pero se mantiene así desde hace años.
• Como autor del popular tema de Firefox Lepton, es posible ver muchas de mis decisiones desde el punto de vista de cómo mejoré decisiones menos acertadas de Mozilla y cómo eso se volvió popular. Este artículo forma parte de una serie.
• Creo firmemente que mejorar la UX del navegador debe comenzar con pestañas verticales. Con pestañas horizontales, cuando tienes entre 6 y 8 pestañas abiertas se vuelve difícil de gestionar o seguir. Con pestañas verticales anidadas, los enlaces que se abren en una pestaña nueva se convierten automáticamente en una pestaña hija. Esto permite entender la estructura y el contexto con más facilidad que con pestañas horizontales. Además, si le agregas colores para diferenciar sitios, los grupos de pestañas se ven más claramente. También puedes guardar el "árbol" de pestañas para conservar el progreso en tareas de investigación o documentación. Los archivos CSS y algunas capturas de pantalla están aquí.
• Este mensaje intenta convencer a los lectores de que, desde principios de UX, se creó un tema de Firefox objetivamente mejor, pero la mayoría de los cambios parece de gusto personal. Sin duda está bien hecho y mantenido, pero personalmente no me resulta visualmente atractivo y, en parte, se ve más complejo. Cada persona tiene su preferencia y Firefox eligió un diseño, pero dejó abierta la posibilidad de soportar estos cambios. Eso es algo bueno. Sin embargo, me parece algo tonto que el autor intente demostrar que su gusto es empíricamente correcto.
• Desde que Firefox rompió las pestañas dejé de usarlo como navegador principal. De vez en cuando lo abro para hacer pruebas, pero sigo anotándome mentalmente que intentaré volver a probarlo dentro de medio año cada vez que vea pestañas en lugar de botones. Especialmente con el tema claro, el fondo gris claro con botones blancos resulta todavía más humillante. Además, ni siquiera respeta la configuración del tema del sistema en Windows. Edge lo hace de forma razonable, Chrome no, pero al menos tiene suficiente contraste. Firefox lo pasa por completo por alto.
• También hay personas a las que no les importa en lo absoluto que las pestañas sean "botones". ¿Es tan incómodo para quienes las usan por primera vez? A veces siento que quizá solo yo pienso así.
• Todos ponen sus quejas, así que aquí las mías:
  • Cuando tienes un árbol grande con muchas carpetas de marcadores, agregar un nuevo marcador desde el pequeño popup de la UI de "Agregar marcador" es horrible.
  • La barra lateral de marcadores se puede buscar por nombre, pero no puedes encontrar en qué lugar está un marcador. La función extra de búsqueda de marcadores (Bookmark Search Plus 2) soluciona eso, pero no debería ser necesaria.
  • No se pueden tener varias barras laterales a la vez. Por lo tanto, no puedes abrir Tree Style Tabs para la gestión de pestañas verticales y la carpeta/búsqueda de marcadores al mismo tiempo. Es ridículo.
  • Realmente eso es todo. ¡La mayoría trata sobre gestionar marcadores! No me queda claro si el resto de la interfaz está bien, o si me acostumbré y por eso ya no noto lo extraño. Pero estoy bastante satisfecho con Firefox. No siento la necesidad de quejarme tan fuerte de su rediseño como otras personas.
• La mayor queja de "cambios innecesarios en la UI de Firefox" es que hace 4 años eliminaron browser.urlbar.clickSelectsAll. Como era de esperarse, Mozilla no parece darle importancia. Si lees los reportes de bugs, esto solo puede describirse como hostil para el usuario. Ningún otro campo de texto funciona así. No puedo entender por qué Mozilla lanzó esta "función" y además quitó la opción para desactivarla.
• La verdadera pesadilla de UI/UX de Firefox son las herencias del legado. Cada función básica del navegador se abre en una vista diferente. La configuración se abre en la pestaña del navegador y el historial en la barra lateral, pero para administrarlo se abre en una ventana separada. Los marcadores y descargas también se abren en esa ventana. Las descargas tienen un popup pequeño, pero la gestión de descargas se abre también ahí. Ctrl+Shift+O abre esa ventana, pero Ctrl+B abre la barra lateral. ¿Perfil? No hay una experiencia de perfiles amigable, parece una interfaz heredada escondida en about:profiles. ¿Contraseñas? Se abren en la pestaña del navegador y tienen una apariencia propia que no coincide en absoluto con las demás.
• Lo peor de Proton UI que nadie menciona es que, si no usas un monitor moderno de 1080p (o más), es objetivamente una mejora descomunal. Mi portátil es un ThinkPad X220 antiguo, así que esos cambios afectan mi forma de trabajar en la medida en que desperdician espacio de pantalla sin sentido. En ese caso, esto no es como volver a hacer todo en una app de Electron o React inflada; es cambiar la UI sin sentido para dar una impresión superficial de que Mozilla todavía le pone atención a Firefox. Proton me desagrada tanto que termino ejecutando un userchrome personalizado.