1.4 : Ayude a los usuarios a hojear el contenido con las secciones tituladas

Los sitios web con mucho texto, como los de los principales periódicos que han adoptado la web como un medio esencial para el futuro, conocen la importancia de utilizar secciones tituladas para atraer a los lectores. Hay un arte perfecto en el oficio, y se deriva de una ciencia exacta sobre cómo los seres humanos procesan la información. Entonces, aprenda de The New York Times y The Wall Street Journal, y descubra cómo traducir sus experiencias a cualquier sitio web o aplicación que transmita mucha información a los usuarios. Esto puede ayudarlo no solo a hacer que los visitantes de su diseño se sientan más cómodos y permanezcan con él; también podría incitarlos a tomar una buena decisión mucho más rápido y hacer algo para obtener lo que quieren, mientras te dan lo que tú quieres.

El problema del diseño

Cuando se trata de una página, ventana o panel que contiene una gran cantidad de información y todo debe mostrarse a la vez, los usuarios pueden sentirse abrumados. Tendrán que esforzarse mucho en escanear el contenido, con la esperanza de aislar la información de interés actual del resto del contenido, a fin de reducir la cantidad de escaneo que necesitan hacer.

Al leer una novela o un informe, el lector tenderá a tener pocos problemas para trabajar con secciones más grandes de texto sin títulos. Después de todo, uno de los placeres de la lectura es el acto mismo de leer, saborear la trama y cosas por el estilo, emocionarse con lo que viene a continuación. Sin embargo, dejemos nuestra idílica novela y pensemos en buscar información. Los títulos siempre son necesarios para respaldar el escaneo en busca de información relevante para la tarea en cuestión. La pantalla que se muestra en esta imagen no proporciona ninguna pista sobre el tema de la información; en cambio, está diseñado para leerse de principio a fin.

La solución de diseño

Las secciones tituladas ayudan al usuario a hojear el contenido de una página e identificar información interesante o útil. En pocas palabras, son secciones de contenido que tienen un título que indica claramente el tema de esa sección. Aunque la solución parece bastante sencilla, cuando se implementa con cuidado, sus beneficios son muy importantes.

Jennifer Tidwell, reconocida autora del libro ‘Designing Interfaces’, utiliza secciones tituladas en la página web que muestran todo tipo de patrones de diseño. En el lado izquierdo, puede ver cómo agrupó los patrones en categorías, lo que permite a los usuarios obtener una descripción general de dónde encontrar la información deseada muy rápidamente.

¿Por qué elegir un patrón de diseño de sección con título?

Cuando el usuario escanea la interfaz de usuario, las secciones tituladas proporcionan fuertes señales visuales para dirigir la atención a la información relevante. Éstos evitan que los usuarios tengan que leer el contenido ellos mismos. De un vistazo, sabrá de qué trata cada sección. Si ya sabe que uno o más de los puntos que se están realizando, puede concentrarse en lo que no quiere leer, en lugar de tomar la gran gira, lo que llevaría mucho más tiempo.

Los títulos también sirven para dividir el contenido en fragmentos más manejables, lo que es especialmente útil cuando hay grandes cuerpos de texto en una página. La visión humana está naturalmente en sintonía con la detección de diferencias, por lo que los títulos, generalmente en negrita y con una fuente más grande que el resto del contenido, atraen instantáneamente la atención del usuario, lo que ayuda a guiarlo a través de la interfaz de usuario.

Aquí tenemos un ejemplo de cómo solían verse los periódicos , antes de que la implementación de secciones tituladas se convirtiera en una práctica común para ayudar a los lectores a encontrar la información relevante. Si bien, por supuesto, puede seguir las columnas, es posible que se pregunte qué tan cómodo podría mantener eso si no tuviera otra opción de formato.

Hoy en día, los mismos periódicos utilizan secciones tituladas en cada página que crean, ya sea en línea o fuera de línea. La diferencia en el diseño de la página entre esta aplicación del New York Times y su contraparte histórica, en el ejemplo anterior, es tan clara como una campana.

Práctica recomendada: cómo implementar secciones tituladas

1. Divida el contenido en partes lógicas y significativas.
2. Asigne títulos breves a estos focos de información; normalmente, dos palabras deberían ser suficientes para las categorías que usa en una barra de navegación superior. Para otros tipos de títulos, puede usar más palabras, pero no más que una oración concisa.
3. Ahora elija los aspectos superficiales del diseño , como la fuente, el tamaño de la fuente, el color y el ancho. Pruebe estos aspectos superficiales en combinación con el resto de la pantalla. Por ejemplo, debe asegurarse de que el color del título no entre en conflicto con el color de fondo y que sean perceptibles por quienes tienen algún grado de daltonismo.
4. Asegúrese de colocar los títulos cerca de los contenidos correspondientes , mientras usa espacios en blanco para separar las diferentes secciones.
5. A veces , los diseñadores usan bordes en combinación con títulos para dividir los contenidos, pero no siempre son necesarios y pueden llamar la atención del usuario innecesariamente. Sin embargo, un borde pálido (p. Ej., Gris claro) puede aumentar la sensación de que un cuerpo de información es independiente de todos los demás contenidos, por lo que esto puede ser útil cuando no desea que los usuarios que están viendo fragmentos de información piensen que están conectados en de todas formas.

A veces, un diseñador puede usar bordes de color gris claro para separar una sección de información de otra. En el ejemplo que se muestra aquí, un banco holandés está usando bordes grises exactamente por esa razón, para enfatizar las secciones tituladas.

Problemas potenciales con las secciones tituladas

“Haga que sus subtítulos sean intrigantes además de informativos. Los lectores web tienen medidores BS bien perfeccionados, así que no exagere o perderá credibilidad. “Conmovedor” no es lo mismo que “exageración”. “

—Pamela Wilson, autora de Master Content Marketing: Una estrategia simple para curar la tristeza de las páginas en blanco y atraer a una audiencia rentable

De hecho, nunca deberíamos perder de vista el hecho de que tendremos que mantener el interés de nuestro lector con la sustancia de nuestro material. Sin embargo, sigamos con el formulario por ahora. Cuando hay mucha información en una página, las secciones tituladas pueden no ser suficientes por sí solas para ordenar los contenidos. En estas ocasiones, es posible que desee considerar el uso de otros patrones de diseño, como una interfaz de documento con pestañas, un selector de dos paneles o incluso un menú de acordeón. Los usuarios no quieren moverse a través de grandes áreas de texto, por lo que debe organizar los contenidos de una manera que les ahorre tiempo y limite la cantidad de desplazamiento requerido.

Puede haber ocasiones en las que tenga dificultades para encontrar títulos lógicos y concisos para sus secciones; en estas ocasiones, es posible que los fragmentos de información se coloquen mejor en otro patrón de diseño de interfaz de usuario, o es posible que desee reconsiderar su disposición actual. Una cosa es segura; un título debe dar señales claras de que un usuario alcanzará su objetivo al seguir ese camino en particular . Esto se denomina “esencia de información” y ayuda a los usuarios a buscar contenidos específicos y pasar de una sección a otra. Si los títulos tienen un olor a información débil, el usuario tendrá que escanear más contenidos para decidir si esto es lo que está buscando, lo que frustra el objetivo de usar secciones tituladas en su diseño.

Problemas potenciales con las secciones tituladas

“Haga que sus subtítulos sean intrigantes además de informativos. Los lectores web tienen medidores BS bien perfeccionados, así que no exagere o perderá credibilidad. “Conmovedor” no es lo mismo que “exageración”. “

—Pamela Wilson, autora de Master Content Marketing: Una estrategia simple para curar la tristeza de las páginas en blanco y atraer a una audiencia rentable

De hecho, nunca deberíamos perder de vista el hecho de que tendremos que mantener el interés de nuestro lector con la sustancia de nuestro material. Sin embargo, sigamos con el formulario por ahora. Cuando hay mucha información en una página, las secciones tituladas pueden no ser suficientes por sí solas para ordenar los contenidos. En estas ocasiones, es posible que desee considerar el uso de otros patrones de diseño, como una interfaz de documento con pestañas, un selector de dos paneles o incluso un menú de acordeón. Los usuarios no quieren moverse a través de grandes áreas de texto, por lo que debe organizar los contenidos de una manera que les ahorre tiempo y limite la cantidad de desplazamiento requerido.

Puede haber ocasiones en las que tenga dificultades para encontrar títulos lógicos y concisos para sus secciones; en estas ocasiones, es posible que los fragmentos de información se coloquen mejor en otro patrón de diseño de interfaz de usuario, o es posible que desee reconsiderar su disposición actual. Una cosa es segura; un título debe dar señales claras de que un usuario alcanzará su objetivo al seguir ese camino en particular . Esto se denomina “esencia de información” y ayuda a los usuarios a buscar contenidos específicos y pasar de una sección a otra. Si los títulos tienen un olor a información débil, el usuario tendrá que escanear más contenidos para decidir si esto es lo que está buscando, lo que frustra el objetivo de usar secciones tituladas en su diseño.

Este sitio web para los grandes almacenes John Lewis en el Reino Unido muestra lo difícil que puede ser crear títulos que tengan un fuerte olor a información. A primera vista, las categorías de productos parecen lo suficientemente claras. Sin embargo, cuando los usuarios buscan un secador de pelo, pueden empezar a buscarlo en la categoría de belleza o en la eléctrica.