Menu, Pestañas o Arbol

[mamcx]

Empezado por Carlex

Busco mas que todo, en base a su experiencia, pros y contras de cada una de ellas, cual es mas optimo y amigable al usuario a la vez.

Eso es dificil de responder porque la web no tiene un "tamaño" natural. Asi que realmente tienes que diseñar asumiendo todas las combinaciones imaginables, no solo de tamño de pantalla (lo que la mayoria cree que es "responsive design") sino incluyendo muchos otros factores como combinacion de colores, fuentes, etc.

Un recurso que recoje bastante del tema es https://refactoringui.com. Pero ya que me acorde que cuando sale el tema de la web me dicen que cuento sobre un monton de cosas, en terminos muy simples:

Las mejores interfaces en cuanto a usabilidad se inventaron hace años y se olvidaron: Masomenos tal como fue windows 2000/OSX Leopard.

Empieza diseñando desde la perpestiva de un "movil", como un iPhone. Luego brincas a iPAD y luego a una pantalla grande desktop.

Menus de UN solo nivel es lo MEJOR en terminos de usabilidad. Luego tabs. Luego menus desplegables y/o arboles

Es MEJOR usar textos que iconos. Esta bien iconos ademas de un texto. El texto debe ser corto y directo: Textos como "Aceptar" "Cancelar" tienden a ser malos. Es mejor que digan la accion concreta "Guardar", "Regresar", "Facturar", "Deshacer".

Piensa en jerarquias: De mas importante/relevante a menos importante. Todo fluye de arriba/abajo, izq a derecha (en nuestra familia de idiomas). Usa espacio, relacion y flujo para destacarlo y SECUNDARIAMENTE colores y tamaños.

Todo lo relacionado debe estar "agrupado".

Idealmente, ninguna tarea (incluendo desplegar un menu e ir a submenu) debe ser de una "profundidad" mayor a 3.


P.D: Es dificil determinar que esta relativamente bien diseñado cuando tanto color y bonito distrae. Pero esta es una pagina de componentes que muestra en gran medida:

https://tailwindui.com/components

que hace parte de TailwindCSS que es un framework css bien pensado.