Componentes de una interfaz web

4. Componentes de una interfaz web

Muchos de los componentes o elementos de una interfaz web son comunes en todos los sitios web. Algunos ejemplos son: la cabecera, el menú de navegación, el cuerpo, la barra lateral o el pie de página.

Conocer el nombre de cada una de las partes de una aplicación web es esencial ya que forma parte del vocabulario utilizado por los desarrolladores y diseñadores. La siguiente figura muestra la estructura general de un sitio web.

Veamos detenidamente la descripción de los componentes principales de una interfaz web:

4.1. Cabecera o header

La cabecera o header es la zona de la interfaz web situada en la parte superior y que sirve para identificar la empresa o marca. Normalmente se utiliza para mostrar el logotipo de la empresa o su nombre. Además, este espacio da cabida a textos descriptivos, imágenes, paneles de acceso o banners publicitarios, entre otras cosas. Aunque la cabecera no es obligatoria, es utilizada en prácticamente todos los desarrollos de sitios web.

Debido a nuestra lectura visual, de arriba a abajo y de izquierda a derecha, el primer elemento que vemos en toda interfaz web es la parte superior izquierda de la página. Por este motivo, no es de extrañar que se aproveche este espacio para posicionar el logotipo y el nombre de la marca. Aunque también es posible encontrar el logotipo en la parte central de la cabecera o en otras ubicaciones.

4.2. Cuerpo de la página

El cuerpo de la página es donde se muestran los contenidos. Puede verse acompañado de uno o varios sidebars (o menús laterales de navegación). Se sitúa bajo de la cabecera o header o bajo del navbar (o menú de navegación principal). Generalmente, el cuerpo de la página cuenta con un título descriptivo. Todos los elementos del cuerpo de página deben seguir la guía de estilo del resto de la web.

4.3. Pie de página (footer)

El pie de página o footer se sitúa en la parte inferior de una interfaz web, bajo el cuerpo de la página. Generalmente, suele utilizarse para para mostrar enlaces a servicios, formulario de contacto, banners publicitarios, políticas de privacidad y cookies, entre otras cosas.

4.4. Barra lateral (sidebar)

La barra lateral o sidebar de una página web es un área ubicada a un lado del contenido principal, generalmente a la derecha o a la izquierda, que puede contener información adicional, enlaces a otras páginas o secciones, o widgets como un calendario o una lista de etiquetas.

Puede ser utilizada para mostrar contenido relacionado con el contenido principal de la página, como enlaces a artículos relacionados en un blog, o para mostrar información adicional que pueda ser útil para el usuario, como una lista de categorías o etiquetas en una tienda en línea.

También puede ser utilizada para mostrar anuncios o promociones, o para incluir elementos interactivos como formularios de suscripción a boletines o encuestas.

4.5. Menú de navegación (navbar)

El menú de navegación de una página web es un elemento crucial para ayudar a los usuarios a encontrar y acceder al contenido que buscan. Un menú de navegación bien diseñado puede mejorar la experiencia del usuario y aumentar la probabilidad de que los usuarios encuentren lo que buscan en la página.

Un menú de navegación suele ubicarse en el encabezado de la página y puede incluir enlaces a las principales secciones o páginas de la web. Estos enlaces pueden organizarse en una estructura jerárquica, con submenús que se despliegan al pasar el cursor sobre ellos, o pueden mostrarse en una sola fila o columna.

El diseño del menú de navegación debe ser claro y fácil de usar, con etiquetas descriptivas para cada enlace y una disposición lógica de las opciones. También es importante asegurarse de que el menú sea fácilmente accesible desde cualquier parte de la página y que se adapte bien a diferentes tamaños de pantalla.

4.6. Otros componentes de una interfaz web

Además de los componentes principales que hemos estudiado, hay una serie de elementos que suelen ser muy habituales en las páginas web. Aunque no vamos a entrar en una explicación tan detallada de cada uno de ellos, conviene conocerlos ya que forman parte del vocabulario técnico que todo diseñador de interfaces web debe conocer.

• Acordeón (Accordion): Un acordeón es un elemento de interfaz que permite mostrar y ocultar contenido en secciones expandibles y colapsables.
• Anuncio (Banner, Ad or Advertisement): Un anuncio, banner o ad es un elemento de publicidad que se muestra en una página web para promocionar un producto o servicio.
• Ayudas Flotantes (Tooltip): Las ayudas flotantes o tooltips son pequeñas cajas de texto que aparecen al pasar el cursor sobre un elemento para proporcionar información adicional.
• Barra de Acciones (Action Bar): Una barra de acciones o action bar es una barra de herramientas que proporciona acceso rápido a acciones comunes en una aplicación o página web.
• Barra de Búsqueda (Search Bar): Una barra de búsqueda o search bar es un campo de entrada que permite a los usuarios buscar contenido en una página web.
• Barras de herramientas, cuadrículas y listas (Toolbars, grids, lists): Son elementos utilizados para organizar y presentar información en una página web o aplicación.
• Barra de Progreso (Progress Bar): Una barra de progreso o progress bar es un elemento visual que muestra el progreso de una tarea en curso, como la carga de una página o la descarga de un archivo.
• Botones (Buttons): Los botones son elementos interactivos que permiten a los usuarios realizar acciones, como enviar un formulario o navegar a otra página.
• Carrito de compra o cesta (Shopping cart or Basket): Un carrito de compra o cesta es un elemento en una tienda en línea que permite a los usuarios guardar productos para comprarlos más tarde.
• Carrusel (Carousel): Un carrusel o carousel, también llamado slider (porque se puede deslizar el contenido), es un elemento que permite mostrar múltiples elementos en un espacio limitado, desplazándolos horizontalmente. Suele consistir en un pase de diapositivas, que pueden estar animadas o ser imágenes fijas.
• Cuadros de diálogo (Dialog boxes): Son ventanas que se abren en pantalla para comunicar algo al usuario o para pedirle que elija una opción o que introduzca algún dato. Por ejemplo, cuando quieres guardar un archivo , se abre un cuadro de diálogo que permite indicar el nombre y la ubicación del archivo.
• Deslizador (Slider): Un deslizador o slider es un elemento que permite a los usuarios ajustar un valor desplazando un control deslizante a lo largo de una barra.
• Fichas, campos y secciones (Tabs, fields, sections): Son elementos utilizados para organizar el contenido en una página web o aplicación.
• Formulario de contacto (Contact Form): Un formulario de contacto o contact form es un formulario que permite a los usuarios enviar un mensaje al propietario de una página web.
• Imagen destacada o imagen de portada (Hero image): Imagen de gran tamaño que suele aparecer al inicio de un sitio web y que sirve para destacar el mensaje, los productos o la esencia de una compañía.
• Inscripción al boletín de noticias (Newsletter Subscription): La inscripción al boletín de noticias o newsletter es un formulario que permite a los usuarios suscribirse para recibir noticias y actualizaciones por correo electrónico.
• Llamada a la acción (Call to action): Es un botón o enlace situado en un sitio web que busca atraer clientes potenciales y convertirlos en clientes finales, normalmente a través de un formulario en una página de destino o landing page.
• Menú desplegable (Drop-down menu): Es un elemento de la interfaz gráfica de usuario que permite al usuario seleccionar una opción de una lista de opciones.
• Claro, aquí tienes la traducción en inglés del término en negrita:
• Menú desplegable multinivel (Multilevel drop-down menu): Un menú desplegable multilevel o multinivel es un tipo de menú desplegable que contiene varios niveles de opciones. Cuando el usuario interactúa con una opción del menú, se despliega una lista de subopciones relacionadas con esa opción.
• Menú hamburguesa (Hamburger menu) o toggle (Toggle): Es un icono que se utiliza para representar un menú en dispositivos móviles. Cuando se hace clic en él, se despliega un menú con opciones.
• Migas de pan (Breadcrumbs): Son una serie de enlaces que muestran la ruta que ha seguido el usuario para llegar a una página en particular dentro de un sitio web.
• Notificaciones (Notifications): Son mensajes que informan al usuario sobre eventos importantes dentro de una aplicación.
• Paginado (Pagination): Es el proceso de dividir el contenido en varias páginas para facilitar la navegación y mejorar la experiencia del usuario.
• Panel de acciones (Action panel): Es un panel que contiene botones u opciones para realizar acciones rápidas dentro de una aplicación.
• Pestañas (Tabs): Son elementos de la interfaz gráfica de usuario que permiten al usuario cambiar entre diferentes vistas o secciones dentro de una misma página.
• Políticas de privacidad y cookies (Privacy and cookie policies): Son documentos legales que informan al usuario sobre cómo se recopilan, utilizan y protegen sus datos personales y sobre el uso de cookies en un sitio web.
• Redes sociales (Social media): Son plataformas en línea que permiten a los usuarios interactuar entre sí y compartir contenido.
• Rosco de carga (Spinner): Es un elemento gráfico que indica al usuario que una acción está en proceso y que debe esperar.
• Selector de idiomas (Language selector): Es un elemento de la interfaz gráfica de usuario que permite al usuario seleccionar el idioma en el que desea ver el contenido de un sitio web.
• Tarjetas (Cards): Son elementos gráficos utilizados para presentar información de manera visual y organizada.
• Ventana emergente (Popup) o popover (Popover): Es una ventana que aparece en la pantalla sin haber sido solicitada por el usuario, normalmente con el fin de mostrar publicidad o información adicional.

4.7. Diferentes nomenclaturas y convenciones para los componentes de una interfaz

Las herramientas de desarrollo de software a menudo tienen sus propias convenciones de nomenclatura para los componentes de la interfaz de usuario. Esto significa que un mismo componente puede tener diferentes nombres dependiendo de la herramienta de desarrollo que se utilice.

Un ejemplo de cómo diferentes herramientas de desarrollo pueden llamar a los componentes de la interfaz de usuario de distintas maneras es el caso de la barra de navegación o navbar. En Xcode, la herramienta de desarrollo de Apple para iOS y macOS, se llama UINavigationBar. Sin embargo, en otras herramientas de desarrollo, como por ejemplo en Bootstrap, un popular framework para el desarrollo de sitios web, se llama Navbar. Aunque ambos términos se refieren al mismo componente, cada herramienta utiliza su propia convención de nomenclatura.

Otro ejemplo es el caso de la la barra de pestañas o Tab Bar. En iOS, la barra de pestañas se llama Tab Bar y se implementa utilizando el componente UITabBar. Android llama a la barra de pestañas Bottom Navigation y se implementa utilizando el componente BottomNavigationView. En Bootstrap, se llama Navs y se implementa utilizando componentes como Nav, NavItem y NavLink. Aunque todos estos términos se refieren al mismo tipo de componente, cada plataforma o herramienta de desarrollo utiliza su propia convención de nomenclatura.

4.8. Ejemplos de componentes en interfaces

Veamos ahora el siguiente tablero de Pinterest en el que se han recogido diferentes páginas web con la descripción de sus componentes.

Comprueba tu aprendizaje