Arquitectura de la información y estructura de la interfaz

1Esquemas y maquetación

Nunca se debe pasar directamente de la idea a la codificación. Tres niveles de prototipado:

2Herramientas del sector

3Pautas de diseño para la estructura

Menús y sistemas de navegación

• Barra superior (Top Navigation): 3-7 secciones.
• Menú lateral (Sidebar): sistemas complejos con múltiples niveles.
• Menú hamburguesa: dispositivos móviles (evitar abusar en escritorio).
• Barra inferior (Bottom Navigation): móviles iOS/Android.
• Menús contextuales: acciones específicas relacionadas.
• Mega menús: portales de comercio electrónico.

Ventanas y paneles

MDI (ventanas internas múltiples) está obsoleto en diseño moderno por la alta carga cognitiva que genera; el modelo actual en navegadores y aplicaciones modernas es SDI. Las cards son contenedores visuales para agrupar información.

Cuadros de diálogo

• Modales: bloquean la interacción hasta que el usuario responde.
• No modales: permiten seguir interactuando con el resto de la interfaz.
• Notificaciones flotantes (toasts/snackbars): mensajes temporales no intrusivos.

4Atajos de teclado y aceleradores

• Respetar los atajos estándar del sistema (Ctrl+C, Ctrl+Z, Esc).
• Mostrar las combinaciones disponibles en los menús.
• Mantener un orden lógico de navegación por tabulación.

✓Para saber si lo has entendido

• Sé diferenciar wireframes, mockups y prototipos interactivos y para qué sirve cada uno.
• Conozco Figma, Penpot, Sketch y Balsamiq y su enfoque diferencial.
• Sé cuándo usar barra superior, sidebar, hamburguesa, bottom nav, contextual o mega menú.
• Entiendo por qué MDI se considera obsoleto frente a SDI.
• Distingo diálogos modales, no modales y notificaciones flotantes.
• Recuerdo las buenas prácticas de atajos de teclado y orden de tabulación.