Interfaz de Usuario

 

Elementos y Componentes de una Interfaz de Usuario (UI)

1. Componentes de Entrada (Input Components)
Permiten al usuario introducir datos, realizar selecciones y manipular información.
Componente	Descripción
Campos de Texto (Text Fields)	Áreas donde el usuario puede escribir texto (nombre, correo electrónico, mensajes).
Casillas de Verificación (Checkboxes)	Permiten al usuario seleccionar cero, uno o múltiples opciones de una lista.
Botones de Opción (Radio Buttons)	Permiten al usuario seleccionar solo una opción de un conjunto limitado.
Conmutadores (Toggles / Switches)	Se utilizan para activar o desactivar una función (ON/OFF), ideal para ajustes binarios.
Desplegables (Dropdowns)	Listas que se muestran al hacer clic, ahorrando espacio al ocultar opciones secundarias hasta que se necesitan.
Barras Deslizantes (Sliders)	Permiten seleccionar un valor numérico dentro de un rango predefinido (ej. control de volumen).

2. Componentes de Navegación (Navigation Components)
Ayudan a los usuarios a moverse entre las diferentes secciones y contenidos de una plataforma.
Componente	Descripción
Barras de Navegación (Navbars)	Fijas o estáticas, contienen enlaces a las secciones principales del sitio y, a menudo, el logo o la barra de búsqueda.
Migas de Pan (Breadcrumbs)	Muestran la jerarquía de la página actual dentro de la estructura del sitio, ayudando a los usuarios a saber dónde están.
Paginación	Divide el contenido extenso en varias páginas, esencial para listados largos como resultados de búsqueda o artículos.
Enlaces (Links)	Elementos interactivos que dirigen al usuario a otra página, documento o recurso.
Etiquetas/Fichas (Tabs)	Organizan el contenido en secciones dentro de una misma página, permitiendo cambiar de vista sin salir.

3. Componentes Informativos (Informational Components)
Se utilizan para mostrar datos, dar contexto, proporcionar retroalimentación o comunicar el estado del sistema al usuario.
Componente	Descripción
Iconografía (Icons)	Símbolos visuales que representan acciones, objetos o conceptos de manera concisa.
Notificaciones / Banners	Mensajes temporales o permanentes que alertan al usuario sobre el estado de una acción o información importante.
Barras de Progreso	Muestran visualmente cuánto se ha completado de una tarea o proceso que lleva tiempo (ej. carga de un archivo).
Tarjetas (Cards)	Contenedores flexibles que agrupan información relacionada (texto, imagen, enlaces) de manera compacta y organizada.
Tooltips	Pequeños cuadros de texto que aparecen al pasar el cursor sobre un elemento para proporcionar información adicional o aclaratoria.

4. Componentes Contenedores y Estructurales (Containers & Structural Components)
Se utilizan para organizar y agrupar otros elementos y controlar el flujo de la interacción.
Componente	Descripción
Modales (Modals / Popups)	Ventanas emergentes que requieren la interacción del usuario antes de que pueda volver a la interfaz principal (ej. confirmaciones).
Acordeones (Accordions)	Una lista de encabezados apilados que se pueden expandir o contraer para revelar u ocultar contenido.
Carruseles (Carousels)	Muestran múltiples contenidos (generalmente imágenes o tarjetas) en un espacio limitado, permitiendo al usuario deslizar o hacer clic para ver el siguiente.
Listas y Grillas (Lists & Grids)	Estructuras fundamentales para organizar colecciones de datos o contenido de manera uniforme.