Componentes Web

Te doy la bienvenida a la Web escuela de nuestros talleres de WordPress, UXD, IxD y UID web. Un espacio con componentes autoexplicados, enlaces y material de apoyo.

(Estás visualizando el Hero de la página principal del sitio)

El hero, hero section o hero banner, es una sección destacada que intenta capturar la atención del visitante, de manera visual, sobre un mensaje clave u oferta destacada en función del propósito del sitio.

Ubicada, normalmente, en la parte superior de la página, suele contener imágenes, colores, textos y/o videos, que buscan llamar a la acción del usuario, mediante botones o enlaces relevantes.

Algunas funciones específicas:

1. Captar la atención del usuario.
2. Comunicar un mensaje clave.
3. Generar interés y, de ser necesario, engagement o conexión emocional con el usuario.
4. Utilizar una estética acorde con la imagen de la marca.

Importante: Todas las páginas, secciones e información en este sitio se presentan como material de apoyo a nuestros cursos y talleres de diseño UX y de diseño UI de nuestros cursos y talleres de diseño, por tal motivo, los formularios de suscripción y contacto no se encuentran activados, y muchas de las imágenes y textos se utilizan únicamente para apoyar visualmente en este contexto.

Si lo necesitas, una fila puede ayudarte a separar/agrupar contenidos. Puedes usarlos activamente usando botones o enlaces como el siguiente, que dirige hacia nuestro canal en YouTube, a modo de call to action.
Importante: Agrega accesibilidad a todos tus enlaces web. Permitirás que más personas puedan utilizar tu sitio, y mejorarás tu posicionamiento SEO.

Esto es un título de sección

 

Sección «blurb(s)» (este es un subtítulo)

Utiliza presentaciones descriptivas de productos o servicios, a modo de componentes publicitarios: Imágenes, íconos, títulos y descripciones, animaciones, con enlaces y/o botones acordes a los objetivos de la sección.

Títulos y subtítulos, bien empleados, ayudarán a tu usuario a organizar, jerarquizar tus contenidos, contribuyen a la experiencia de tus visitantes (usuarios).

 

Título 01

Descripción del producto o servicio 01.

Título 02

Descripción del producto o servicio 01

Título 03

Descripción del producto o servicio 01

Contenido destacado

Jerarquiza contenidos mediante grandes secciones que utilicen colores o imágenes llamativas, alineadas con el objetivo, buscando generar una acción concreta del usuario.

Destacado (2)

También puedes destacar un contenido específico mediante una sección con un video de fondo.

Tabla de Planes / Precios

¿Cuándo y cómo?

Aprovechemos esta sección para presentar un nuevo componente (accordion) para responder algunas preguntas sobre las tablas de planes o precios, válidas para cada decisión respecto a la interfaz de tu sitio web o aplicación… y que los resultados de tu investigación UX rijan todas tus decisiones 😉

¿Es necesaria?

 ¿Realmente, el sitio necesita una tabla de planes o precios? ¿Y ese otro componente que estás considerando?

¿Cuál es la posición ideal?

¿Debe ir al inicio, al medio, o al final de la página? ¿Recuerdas las dimensiones de Gillian Crampton Smith?

El usuario, el cliente y el proyecto

Determina, claramente, los objetivos del proyecto, de acuerdo a las necesidades de tu cliente, manteniendo los beneficios para el usuario como eje central.

Accesibilidad

En cada caso, pregúntate: ¿Estoy considerando criterios de accesibilidad en cada una de mis decisiones?

Usabilidad y heurísticas

Emplear determinado componente, ¿aporta a la usabilidad de mi sitio? ¿Recuerdas las diferencias entre criterios de accesibilidad? ¿Estás considerando alguna de las heurísticas vistas en clases? Por favor, ¡no olvides las Heurísticas de usabilidad de Nielsen!

La Gestalt y las "leyes del UX"

Son múltiples los criterios relacionados con la experiencia del usuario: Agrupación, jerarquización, orden, color, tipografía, aspectos relacionados con las tomas de decisiones, etc.

Ley de Jakob

«El usuario está más tiempo en otros sitios» J. Nielsen.

Investiga, investiga, investiga… pero no para copiar, ni para buscar leyes universales, ni para creer que existen decisiones perfectas, sino como punto de partida para decidir fundamentadamente.

El usuario en el centro
  1. Las tendencias son válidas, si están alineadas con los objetivos del proyecto y sus usuarios, no por la tendencia como tal.
  2. La solución universal en el UXD no existe, diseñamos para personas (sujetos), con criterios subjetivos y cambiantes. Las leyes absolutas no existen. Itera, itera, itera…
  3. El UXD es diseño de la experiencia del usuario: No es marketing, ni gestión, ni color, ni diseño de interfaces, no son tus gustos personales, ni modas. Considéralas únicamente en función de los usuarios y objetivos del proyecto. Sin no es así, no estás haciendo UXD.

Hablemos de “toggles”, ¿qué son?

Del inglés, la palabra toggle puede traducirse como alternador o conmutador. En la web se trata de un componente que permite intercambiar la visibilidad de un contenido del que, inicialmente, solo se muestra su título.

¿Pero entonces, es como un accordión?

Se le parece, pero no se trata del mismo componente, ya que en el toggle está formado por un único par título/contenido, pudiendo agruparse varios de estos en una misma sección, comportándose cada uno de ellos de manera independiente. Así, permitiremos que el usuario pueda, por ejemplo, comparar sus contenidos al hacer visible los contenidos de más de uno de estos a la vez.

Veámoslo con un ejemplo:

Este texto corresponde al título del primer contenido

Este es el espacio reservado para el cuerpo de texto principal del toggle.

Los bordes, color de fondo, radio de curvatura de los ángulos y demás, al igual que las demás características del toggle, pueden ser personalizados según las necesidades del proyecto con mayor o menor dificultad, dependiendo de la plataforma o lenguajes utilizados para el desarrollo del sitio. Asimismo, en cada caso, podrías elegir si el componente se mostrará inicialmente abierto o cerrado.

Normalmente, a través de CSS no deberías tener ningún tipo de problemas con la personalización de los toggles, ni de ningún otro componente en la web.

Como podrás ver en los próximos ejemplos, es posible incluir no solamente párrafos, sino también listas o inclusive otros contenidos dentro de los cuerpos de los toggles.

Algunas ventajas asociadas con el uso de toggles
  1. Pueden mejorar la usabilidad, aportando una forma intuitiva de mostrar contenidos en espacios reducidos, permitiendo que el usuario interactúe con los bloques de información de una manera más dinámica o conveniente, de acuerdo a sus objetivos. Este ahorro de espacio puede ser especialmente útil en dispositivos móviles y otros dispositivos con pantallas reducidas.
  2. Mediante el uso de colores, iconos, etc. podemos ayudar al usuario a identificar rápidamente el estado de cada toggle, evitándole confusiones. A modo de ejemplo, mira el cambio de estado del ícono que se encuentra en el ángulo superior derecho de este toggle.
  3. Al utilizar toggles podremos lograr que los usuarios pueden acceder a información rápidamente, sin necesidad de abrir nuevas páginas, deslizamientos (scroll) extensos dentro de una página, u otras interacciones que les puedan resultar complejas o molestas.
  4. Finalmente, podemos decir que los toggles ofrecen un aspecto más adecuado con el lenguaje web actual, por lo que, en muchos casos ofrecen una experiencia mejorada a nuestros visitantes.

Recuerda que, en cada caso, y como decimos siempre en nuestros cursos y talleres, la decisión del uso de cada componente en una app. o página web, dependerá exclusivamente de la investigación UX que el equipo debe haber realizado con antelación. Lo importante no son los componentes sino las necesidades del proyecto y sus usuarios.

Posibles desventajas asociadas con el uso de toggles
  1. El uso de toggles pueden presentar problemas relacionados con la accesibilidad si no se implementan correctamente. Asegúrate de que sean fácilmente identificables para las personas con discapacidades visuales, y que se puedan activar y desactivar utilizando métodos alternativos al mouse, como por ejemplo, el teclado, para ofrecer apoyo a posibles discapacidades motrices.
  2. A nivel auditivo es posible que los toggles puedan ofrecer una retroalimentación insuficiente para el usuario, según se encuentren activos (o abiertos) o inactivos (cerrados). Proporciona indicaciones claras para ayudar a los usuarios con su interacción.
  3. También podemos encontrar limitaciones asociadas al tipo de contenidos, a los dispositivos, o al propio diseño. Determina, claramente, todos estos aspectos de diseño, antes de integrar los toggles en el proyecto.

Recuerda que todas las personas tenemos diferentes capacidades, que pueden ser permanentes, temporales, o asociadas con la propia naturaleza humana (la edad, por ejemplo). Apoya, siempre que puedas, todos los aspectos relacionados con la accesibilidad.

Sección de contacto

Comunica brevemente con tus usuarios, describe tus medios de contacto, enlaces a redes sociales, tiempos de respuesta, enlace a políticas de privacidad, etc.

Utiliza los placeholders del formulario de acuerdo con el tenor que hayas determinado de acuerdo a tus usuarios y a los objetivos del proyecto.

Importante: El formulario no es funcional, al igual que todo el sitio, se presenta como recurso didáctico para nuestros cursos y talleres de UX y UI web.

 

Plácido Luna
Información sobre la marca o proyecto, según objetivos del sitio.
Enlaces 02
Enlace 02a
Enlace 02b
Enlace 02c
Enlace 02d
Enlaces 03
Enlace 03a
Enlace 03b
Enlace 03c
Enlace 03d