Introducción

Por muy único que sea el diseño de un sitio web, hay ciertos componentes de interfaz de usuario (UI) que aparecen habitualmente:

Componentes UI Comunes

Botón

• Origen en los botones físicos de las máquinas y electrónicos
• Interactivos; permiten acciones con un clic o toque.
• Importante usar verbos de acción en las etiquetas (labels).
• Ejemplos: "Enviar", "Comprar ahora".

Checkbox (casilla de verificación)

• Permiten seleccionar múltiples opciones.
• Seleccionar y deseleccionar
• Muestran un check al estar activados.
• Usos: preguntas multirrespuesta, preferencias.

Radio Button

• Permiten solo una opción seleccionada.
• Indicados para opciones mutuamente excluyentes, como género o método de pago.

Toggle Switch (interruptor)

• Alternan entre dos estados: "on" y "off".
• Ejemplos: activar modo oscuro, modo avión.
• Consejo: hacer evidente el estado actual.

Text Input (campo de texto)

• Capturan texto de usuarios: nombres, correos, comentarios.
• Deben reconocer distintos tipos de datos y ofrecer ayuda, como formateo automático.

Menú

• Listas interactivas que muestran opciones según el contexto.
• Optimiza espacio y mantiene la interfaz organizada.

• Ejemplo: menú desplegable al hacer clic derecho.

Formulario

• Agrupación de componentes como campos de texto, checkboxes, y botones.
• Usos: registro, encuestas, procesos de compra.
• Consejo: pedir solo la información esencial.

Modal

• Ventanas emergentes que desactivan el resto de la página.
• Usos: mensajes importantes o confirmaciones.
• No abusar de ellos, ya que interrumpen la experiencia del usuario.

Card (tarjeta)

• Contenedores de información modular, compactos y visualmente atractivos.
• Usos: mostrar artículos, productos, perfiles.

Tabla

• Presentan datos en filas y columnas para facilitar la comparación.
• Usos: listados de productos, cifras financieras.
• Consejo: incluir filtros, ordenamiento y búsqueda para mejorar la usabilidad.

Header (encabezado)

• Parte superior de la pantalla o página, contiene navegación, barra de búsqueda y branding.
• Consejo: mantener el diseño uniforme en todo el sitio.

Footer (pie de página)

• Contienen información complementaria: contactos, políticas, enlaces secundarios.
• Brindan cierre y completitud a la página.

Acordeones

• Elementos interactivos que organizan contenido para mostrar más información al hacer clic o tocar.
• Útiles para FAQs o datos estructurados.
• Pro Tip: Usa íconos diferentes para secciones abiertas y cerradas.

Listas

• Presentan ítems relacionados de forma secuencial o jerárquica.
• Mejora la legibilidad y organización de contenido.
• Ejemplos: listas numeradas, viñetas, listas anidadas.

• Pro Tip: Alinea las listas y usa suficiente espacio en blanco para legibilidad.

Breadcrumbs (Migas de pan)

• Muestra la ubicación actual del usuario dentro de la jerarquía del sitio o app.
• Consiste en enlaces lineales clicables, útiles para navegación en sitios complejos.

Paginación

• Divide grandes conjuntos de contenido en secciones manejables con botones o enlaces de navegación.
• Mejora la carga, navegación y evita saturación de información.

Divisores

• Líneas horizontales o verticales que separan contenido visualmente.
• Alternativas: colores, espacio en blanco, imágenes o sombras.

Notificaciones

• Alertas sobre eventos, actualizaciones o acciones.
• Tipos: banners, ventanas emergentes, insignias, sonidos o vibraciones.
• Diseñadas para ser relevantes, no intrusivas y accionables.

Etiquetas (Tags)

• Palabras clave que categorizan y organizan elementos.
• Ejemplo: palabras clave en blogs o productos en plataformas.
• Material Design introduce el término "chips" como una variante.

Selectores de fecha

• Herramientas para seleccionar fechas o rangos.
• Pro Tip: Permite escribir fechas además de seleccionarlas y desactiva opciones no disponibles.

Gráficos (Charts)

• Representaciones visuales de datos: barras, líneas, pastel, etc.
• Mejora la comprensión y comparación de información.
• Pro Tip: Elige el tipo de gráfico adecuado para evitar sobrecarga visual.

Indicadores de carga (Loaders)

• Elementos animados que muestran que el contenido está cargando.
• Ejemplos: iconos giratorios, barras de progreso, animaciones.
• Pro Tip: Añade explicaciones sobre el tiempo estimado de espera.

Tooltips (ayudas, consejos)

• Información contextual breve que aparece al pasar el cursor o tocar un elemento.
• Útiles para aclarar botones o etiquetas abreviadas.

• Pro Tip: No dependas exclusivamente de tooltips; complementa con explicaciones visibles.

Deslizadores (Sliders)

• Permiten seleccionar valores dentro de un rango al deslizar un control.
• Ejemplo: ajustar volumen o rango de precios.

• Pro Tip: Asegúrate de que el control sea accesible para usuarios con discapacidades motrices.

Rastreadores de progreso

• Guias visuales que muestran el avance en un proceso de varios pasos.
• Incluyen indicadores de etapas completadas y pendientes.
• Pro Tip: Evita procesos con más de 5 pasos para no abrumar al usuario.

Referencias

• Toggle switch design: the full run through
• Designing Perfect Text Field: Clarity, Accessibility and User Effort  | Medium
• Cards: UI-Component Definition  | Nielsen Norman Group
• Designing Toast Messages for Accessibility  | Medium
• Material Design  | Material Design

Botones Primarios

• Destacan la acción principal que se espera del usuario
• Usan colores saturados y contrastantes
• Comunes en CTAs y botones de envío

Botones Secundarios

• Alternativas al botón primario (ej: Cancelar)
• Estilo más sutil pero estados reconocibles

Botones Terciarios

• Para acciones menos frecuentes
• Diseño discreto y separado de otros botones

Botones de Icono

• Solo contienen un icono sin texto
• Para acciones rutinarias y reconocibles
• Requieren consideraciones de accesibilidad

Botones de Texto

• Solo texto, sin bordes ni rellenos
• Para acciones menos importantes
• Mantienen espaciado consistente

Botones Outlined (Ghost)

• Solo borde y etiqueta de texto
• Buenos como botones secundarios o terciarios

Botones Elevados

• Usan sombras para destacar
• Mayor importancia visual
• Usar con moderación

Botones Planos

• Sin sombras ni elevación
• Mantienen forma y color distintivos

Botones Split

• Combinan acción principal y menú desplegable
• Incluyen separador visual
• Limitar opciones (10-12 máximo)

Botones Toggle

• Agrupan 2-3 funciones relacionadas
• Solo una opción seleccionable a la vez
• Usar colores para indicar selección

Botones de Menú

• Abren lista de acciones relacionadas
• Optimizan espacio

Botones de Acción Flotante (FAB)

• Fijos en esquinas de la pantalla
• Para acciones principales constructivas
• Usar solo uno por página

Referencias

• Guía de Diseño de Botones SAP Fiori
• Material Design - Botones
• Definición de Botones Split - Nielsen Norman Group
• Material Design - Botones Toggle
• Guía de Diseño de Botones de Menú SAP Fiori
• Material Design - Botones de Acción Flotante

Los botones son elementos interactivos de la interfaz que pueden variar en forma, estilo y dimensión, permitiendo a los usuarios navegar y realizar tareas.

El tráfico móvil representa más del 50% del uso web global (2022), haciendo crucial un diseño óptimo de botones.

Proporcionar un tamaño y área táctil óptimos para botones

• El tamaño es una característica esencial que puede hacer o deshacer toda la experiencia de usuario
• Los botones deben ser:
• Lo suficientemente grandes para interactuar
• Sin romper la jerarquía visual
• Recomendaciones WCAG:
• Zona táctil mínima de 9x9mm
• Independiente del tamaño de pantalla o resolución
• Material Design recomienda un área táctil mínima de 48x48px (≈9mm)

Mantener formas tradicionales de botones

• Botones rectangulares con esquinas redondeadas:
• Proporcionan balance y simetría
• Generan confianza
• Las esquinas redondeadas son más naturales
• Botones circulares:
• Familiares para los usuarios
• Ideales para botones de acción flotante (FAB)
• Las formas tradicionales:
• Garantizan predictibilidad
• Dan sensación de control
• Previenen fricción

Priorizar colores según importancia

• El color:
• Aporta claridad y reconocimiento
• Indica nivel de importancia
• Define la personalidad de marca
• Botones Call-to-Action:
• Deben destacar visualmente
• Fomentan la interacción
• Botones secundarios:
• Menos prominentes
• Evitar colores muy pálidos

Mantener ratio de contraste accesible

• Importancia del contraste:
• Mejora visibilidad general
• Facilita acceso a usuarios con deficiencias visuales
• Estadísticas de accesibilidad:
• 4.5% población con daltonismo
• 2.2 mil millones con problemas de visión
• Recomendaciones WCAG:
• Ratio contraste 4.5:1 entre fondo y texto
• Usar herramientas como Coolors o WebAIM

Equilibrar diseño de sombras

• Beneficios de las sombras:
• Hacen botones más interactivos
• Crean ilusión de profundidad
• Indican prioridad
• Receta para sombras:
• Usar color similar al botón
• Opacidad menor al 40%
• Sombra más pequeña que el botón

Establecer jerarquía mediante señales visuales

• Elementos de jerarquía:
• Color
• Tamaño
• Contraste
• Bordes
• Sombras
• Botones primarios:
• Más prominentes
• Representan acción principal
• Botones secundarios:
• Menos importantes
• Estilo fantasma o contorno

Maximizar precisión táctil con espaciado adecuado

• Beneficios del espacio en blanco:
• Look minimalista y elegante
• Mejora legibilidad
• Atrae atención
• Consideraciones espaciado:
• Evitar botones muy juntos
• Mínimo 12px entre botones

Proporcionar retroalimentación visual óptima

• Tipos de retroalimentación:
• Visual: sombras, cambios de color, animaciones
• Táctil: vibración del dispositivo
• Mantener diseño:
• Funcional
• No abrumador

Colocar botones intuitivamente

• Principio Gutenberg:
• Patrón de lectura en Z
• De arriba izquierda a abajo derecha
• Ubicación recomendada:
• Parte inferior de la página
• Botones fijos para páginas largas

Proporcionar etiquetas significativas

• Características de etiquetas:
• Directas y claras
• Descriptivas de la acción
• Evitar términos genéricos

Asegurar consistencia visual de la interfaz

• Tipos de consistencia:
• Visual: mismo aspecto en todo el producto
• Funcional: mismo comportamiento en toda la app
• Externa: coherencia entre plataformas

References

• Global mobile traffic 2022 | Statista  | Statista
• Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
• Material Design  | Material Design
• Make sense of rounded corners on buttons  | Medium
• About Colour Blindness  | Colour Blind Awareness
• Visual Impairment & Blindness Global Data & Statistics​ | LESH  | LESH
• Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
• Gutenberg & modern-day UX  | Medium
• The Principle of Least Astonishment  | Medium

• Comprender la anatomía de los componentes UI permite diseñar e implementar interfaces más eficaces.
• Los componentes bien diseñados mejoran la usabilidad y funcionalidad de los productos digitales.
• Principales categorías de componentes: texto, íconos, medios y contenedores.

Texto

1. Encabezados
• Establecen jerarquía visual y guían la estructura.
• Deben ser claros, concisos y relevantes.
2. Subencabezados
• Dividen secciones en fragmentos más digeribles.
• Ayudan a escanear y comprender contenido.

1. Texto de cuerpo
• Contiene información detallada e instrucciones.
• Debe ser legible, conciso y acorde a las necesidades del usuario.
• Tip: Usar un tamaño mínimo de 16 px para páginas con mucho texto.

Etiquetas (Labels)

• Elementos textuales que describen componentes o funciones.
• Ayudan a los usuarios a comprender la interfaz y reducir confusiones.
• Comunes en botones, campos de formulario, checkboxes, etc.
• Recomendaciones:
• Usar frases cortas y fuentes legibles.
• Priorizar claridad y escaneabilidad.

Iconos

• Imágenes simplificadas que representan acciones, objetos o ideas.
• Facilitan la navegación y la comprensión rápida.
• Tipos de uso:
• Con texto: Íconos acompañados de etiquetas.
• Independientes: Deben ser reconocibles y de uso común.
• Tip: Usar íconos simples basados en objetos físicos familiares.

Contenedores

• Áreas que agrupan y organizan otros elementos de la UI.
• Proveen estructura visual y lógica.
• Pueden incluir propiedades como estilos, fondos y espaciado.
• Ayudan a establecer orden y jerarquía en el diseño.

Dimensiones

• Incluyen ancho y alto del componente (excluyen márgenes).
• Se especifican en términos de valores mínimos y/o máximos.
• Nota: Al describir dimensiones, siempre indicar ancho primero (ej.: 12×10 px).

Radio de Bordes

• Define el nivel de redondez en las esquinas de un componente.
• Ventajas:
• Esquinas redondeadas son más agradables visualmente y guían la atención al centro del elemento.
• Evitan asociaciones negativas con bordes afilados.
• Cuidado: Evitar radios excesivamente grandes que puedan resultar incómodos.

Miniaturas (Thumbnails)

• Representaciones pequeñas de imágenes, videos o contenido.
• Permiten a los usuarios evaluar rápidamente la relevancia del contenido.
• Comunes en galerías de imágenes, listas de reproducción de videos o vistas previas.
• Facilitan una transición fluida del resumen al contenido completo.

Marcadores de Posición (Placeholders)

• Indicaciones temporales dentro de campos de entrada.
• Usos comunes:
• Formato esperado ("MM/DD/YYYY").
• Ejemplos ("Introduce tu correo").
• Contexto ("Buscar aquí").
• Desaparecen al interactuar con el campo.

Cómo guiar a los usuarios y ofrecer indicaciones útiles sobre cómo interactuar con los componentes de la interfaz

Estados principales de los componentes de UI

Los componentes de la interfaz de usuario (UI) pueden existir en diferentes estados (habilitado, hover, deshabilitado, entre otros). Cada estado proporciona indicaciones visuales que guían al usuario sobre cómo interactuar con el producto y qué resultados obtendrán.

El uso efectivo de cambios sutiles de diseño para diferenciar los estados mejora la experiencia de usuario, ofreciendo pistas visuales claras y fomentando la interacción.

1. Estado habilitado (Enabled)

• Los componentes están listos para recibir interacción del usuario (ej.: clics, ingreso de datos).
• Indica que el elemento está funcional y puede realizar su propósito.
• Ejemplo: Un botón "Enviar" habilitado permite al usuario completar una acción.

2. Estado deshabilitado (Disabled)

• Los componentes no están disponibles para interacción.
• Suelen verse atenuados o inactivos, indicando que no cumplen su función en ese momento.
• Ayudan a minimizar la confusión y a establecer expectativas claras.

3. Estado hover (Hover)

4. Estado presionado (Pressed)

• Ocurre mientras el usuario hace clic o mantiene presionado un elemento.
• Breve pero importante, indica que el sistema responderá a la interacción cuando se suelte el elemento.

5. Estado enfocado (Focused)

• Crucial para accesibilidad.
• Ayuda a los usuarios que navegan con teclado o comandos de voz a identificar el elemento activo.
• Representación visual:
• Bordes resaltados.
• Cambios en el color de fondo.
• Evitar confusión: no usar estilos de enfoque similares a otros estados.

6. Estado seleccionado (Selected)

• Indica la elección del usuario (ej.: botones de radio, casillas de verificación).
• Representación común:
• Casillas marcadas con un ✔️.
• Botones de radio rellenados con un punto.
• Debe ser claro pero no demasiado prominente para no distraer.

7. Estado activado (Activated)

• Muestra lo que el usuario está viendo o utilizando (ej.: filtros aplicados, pestaña activa).
• Destacado con superposiciones o cambios de color.
• Debe ser fácil de detectar sin opacar otros elementos.

8. Estado arrastrado (Dragged)

• Para elementos que pueden moverse (ej.: reorganizar una lista).
• Representación:
• Sombra suave que simula elevación.
• Reducción de opacidad en elementos circundantes.
• Indicador claro del lugar donde se soltará el elemento.

9. Estados encendido y apagado (On/Off)

• Similar a interruptores físicos.
• El estado "on" (encendido) se representa con un color o apariencia distinta del estado "off" (apagado).
• Ejemplo: Activar/desactivar modo oscuro.
• Importante: Dejar clara la función de cada estado.

10. Estado de error (Error)

• Se activa al detectar errores en la interacción del usuario (ej.: datos inválidos o campos obligatorios no llenados).
• Representación:
• Colores contrastantes (rojo suave).
• Mensajes de error claros y amables.
• Sombras suaves para destacar el área problemática.
• Consejo: Mostrar mensajes de error en tiempo real para evitar frustración.

Extra: Utilizar estados de éxito para confirmar acciones completadas con éxito, usando colores relajantes como tonos de verde.