Diseño de interfaces, 3ª edición

Capítulo 4. Disposición de los elementos de la pantalla

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

La disposición se define como la forma concreta en que se disponen los elementos. En el caso del diseño de interfaces, estos elementos son las partes informativas, funcionales, de enmarcado y decorativas de la pantalla. La colocación meditada de estos elementos ayuda a orientar e informar a tus usuarios sobre la importancia relativa de la información y las funciones.

Independientemente del tamaño de la pantalla para la que diseñes -web, quiosco o móvil-, una cuidadosa consideración de la ubicación del contenido es clave para ayudar al usuario a comprender lo que necesita saber y qué hacer al respecto.

A menudo oirás el término "limpio" para describir un diseño basado en la pantalla. Un diseño limpio sigue los principios de jerarquía de la información visual, flujo visual, alineación a través de una cuadrícula y se adhiere a los principios de la Gestalt.

En este capítulo definimos estos principios que informan a tus usuarios de lo que quieres que sepan y de lo que quieres que hagan al respecto.

Aspectos básicos de la maquetación

En esta sección se tratan varios elementos de la maquetación: la jerarquía visual, el flujo visual y las presentaciones dinámicas.

Jerarquía visual

La jerarquía visual desempeña un papel en todas las formas de diseño. El contenido más importante debe destacar más, y el menos importante debe destacar menos. Un espectador debe ser capaz de deducir la estructura informativa a partir de su disposición.

Una buena jerarquía visual da pistas instantáneas sobre lo siguiente:

• La importancia relativa de los elementos de la pantalla

• Las relaciones entre ellos

• Qué hacer a continuación

Jerarquía visual en acción

Echa un vistazo al ejemplo de la Figura 4-1. ¿Puedes decir de un vistazo cuál es la información más importante en el ejemplo A? ¿Puedes decir cuál es la información más importante en el ejemplo B? A la mayoría de la gente le parecerá que el Ejemplo B es el diseño más fácil de entender, incluso con sólo rectángulos y cuadrados. Esto se debe a que la disposición de los elementos de la pantalla, el tamaño relativo y la proporción de los elementos implican su importancia y orientan al espectador sobre a qué debe prestar más atención.

Figura 4-1. A) Ejemplo de ausencia de jerarquía visual, y B) ejemplo de jerarquía visual

¿Qué hace que las cosas parezcan importantes?

Talla

El tamaño de los titulares y subtítulos dan al espectador una pista sobre el orden y la importancia. Los titulares tenderán a ser más grandes y dramáticos debido al contraste de tamaño, peso visual o color. En cambio, una pequeña franja de texto al final de la página dice en voz baja: "Sólo soy un pie de página", y menos importante(Figura 4-2).

Figura 4-2. Ejemplo de tamaño

Posición

Simplemente echando un vistazo al tamaño, la posición y los colores del diseño de la Figura 4-3, puedes adivinar los elementos más importantes de cada uno de los cuatro ejemplos.

Figura 4-3. Formas de distinguir la importancia por posición, tamaño o color

Densidad

La densidad se refiere a la cantidad de espacio entre los elementos de la pantalla. Observa el ejemplo de la Figura 4-4. El de la izquierda muestra un diseño más denso en el que el contenido está muy junto. El ejemplo de la derecha tiene un aspecto más abierto, con el contenido distribuido uniformemente. El ejemplo menos denso también será algo más difícil de leer y de que el espectador distinga qué elementos están relacionados entre sí.

Figura 4-4. Ejemplo de más densidad y menos densidad

Color de fondo

Si añades una sombra o un color de fondo, llamarás la atención sobre un bloque de texto y lo distinguirás de otros textos. El ejemplo de la izquierda de la Figura 4-5 tiene un fondo uniforme para todos los elementos. Esto implica una ausencia de distinción y una continuidad de la importancia de los elementos. En comparación, en el ejemplo de la derecha de la figura, el fondo y los elementos de contraste del centro atraen la mirada inmediatamente hacia él, lo que implica más importancia. El contraste llama la atención.

Figura 4-5. Ejemplo de sin color de fondo y con color de fondo

Ritmo

Las listas, las cuadrículas, los espacios en blanco y la alternancia de elementos como titulares y resúmenes pueden crear un fuerte ritmo visual que atrae irresistiblemente la mirada, como se muestra en la Figura 4-6.

Figura 4-6. Listas y cuadrículas para crear un ritmo visual

Hacer hincapié en los objetos pequeños

Para que destaquen los elementos pequeños, colócalos en la parte superior, a lo largo del lado izquierdo o en la esquina superior derecha. Dales un alto contraste y peso visual, y sepáralos con espacios en blanco. Pero ten en cuenta que en una pantalla con mucho texto, como la mayoría de los sitios web, algunos controles -especialmente los campos de búsqueda, los campos de inicio de sesión y los botones grandes- tienden a destacar de todos modos. Esto tiene menos que ver con las características visuales en bruto que con el significado: si alguien está buscando un cuadro de búsqueda, por ejemplo, sus ojos irán directamente a los campos de texto de la página. (Puede que ni siquiera lea las etiquetas de esos campos de texto).

Otra forma de resaltar los elementos pequeños es utilizar el espaciado y el contraste para distinguirlos, como se muestra en la Figura 4-7.

Figura 4-7. Técnicas para llamar la atención sobre objetos pequeños

Alineación y cuadrícula

En el diseño digital, la legibilidad es fundamental. Ayudar a guiar al espectador hacia la información y la acción es clave. Crear un diseño basado en una cuadrícula(Figura 4-8) permite al diseñador centrarse en el contenido, con la seguridad de que el diseño tendrá coherencia y equilibrio visuales(Figura 4-9). Las cuadrículas también ayudan a que varios diseñadores trabajen en maquetaciones separadas pero relacionadas .

Figura 4-8. Maquetación sin cuadrícula (izquierda), y maquetación diseñada sobre una cuadrícula (derecha)

Figura 4-9. Cuadrícula superpuesta a los ejemplos de la Figura 4-8

Las cuadrículas se encuentran en todo diseño digital, y son fundamentales para crear diseños que sean receptivos y puedan albergar contenido dinámico, del que hablaremos más adelante.

Las cuadrículas se componen de márgenes y medianiles(Figura 4-10 y Figura 4-11). Los márgenes son el espacio alrededor del contenido y los medianiles son los espacios intermedios.

Figura 4-10. Rejilla vertical con márgenes (amarillo) y medianiles (azul)

Figura 4-11. Rejilla horizontal con márgenes (amarillo) y medianiles (azul)

Utilizar una cuadrícula es una buena forma de garantizar que el contenido creará una composición visualmente armoniosa, y ayudará a reducir la carga cognitiva de tu espectador.

Cuatro importantes principios de la Gestalt

"Gestalt" es un término que procede de una teoría psicológica que se impuso en la década de 1920. Gestalt es una palabra alemana que significa "forma" o "figura". En diseño, a menudo nos referimos a los Principios de la Gestalt, que se refieren a un conjunto de reglas que describen el modo en que los humanos percibimos los objetos visuales. La teoría que subyace a la agrupación y la alineación fue desarrollada a principios del siglo XX por los psicólogos de la Gestalt. Describieron varias propiedades de disposición que parecen estar arraigadas en nuestros sistemas visuales. Examinaremos cada una de ellas en las siguientes subsecciones.

Proximidad

Cuando pones las cosas cerca unas de otras, los espectadores las asocian entre sí. Esta es la base de una agrupación sólida de contenidos y controles en una interfaz de usuario (IU). Los elementos agrupados parecen relacionados. Por el contrario, el aislamiento implica una distinción.

Figura 4-12. El principio Gestalt de proximidad

Similitud

Los objetos similares en forma, tamaño o color se perciben como relacionados entre sí. Si tienes varias cosas "de un tipo" y quieres que los espectadores las vean como alternativas igualmente interesantes, dales un tratamiento gráfico idéntico (y distintivo).

Una lista de muchos elementos similares, dispuestos en una línea o columna fuerte, se convierte en un conjunto de elementos iguales que deben verse en un orden determinado. Alinea estos elementos entre sí con mucha precisión para crear una línea visual. Algunos ejemplos son las listas con viñetas, los menús de navegación, los campos de texto de un formulario, las tablas con líneas y las listas de pares de titulares y sumarios.

¿Hay uno o varios elementos más "especiales" que los demás? Dale un tratamiento ligeramente diferente, como un color de fondo que contraste, pero por lo demás, mantenlo coherente con sus compañeros (véase el ejemplo de la derecha en la Figura 4-13). O utiliza un elemento gráfico para alterar la línea a lo largo de la cual se alinean los elementos, como un saliente, una superposición o algo en ángulo.

Figura 4-13. Agrupar ítems de compañeros relacionados (izquierda) y distinguir dos ítems entre compañeros (derecha)

Continuidad

Nuestros ojos seguirán de forma natural las líneas y curvas percibidas formadas por la alineación de otros elementos, como se demuestra en la Figura 4-14.

Figura 4-14. Dos ejemplos de continuidad visual.

Cierre

El cerebro "cerrará" naturalmente las líneas para crear formas sencillas cerradas como rectángulos y manchas de espacio en blanco, aunque no se nos dibujen explícitamente. En los ejemplos de la Figura 4-15, verás (en el sentido de las agujas del reloj, desde arriba a la izquierda) un rectángulo, un círculo y dos triángulos. Ninguna de estas formas está representada realmente en la imagen, pero el ojo completa la línea en tu cerebro.

Figura 4-15. Ejemplo de cierre

Estos principios se utilizan mejor combinados entre sí. La continuidad y el cierre explican la alineación. Cuando alineas cosas, formas una línea continua con sus perímetros, y los usuarios seguirán esa línea y asumirán una relación. Si los elementos alineados son lo bastante coherentes como para formar una forma -o para formar una forma a partir del espacio en blanco o "espacio negativo" que los rodea-, también se produce un cierre, que aumenta el efecto.

Flujo visual

La fluidez visual tiene que ver con las pistas que tienden a seguir los ojos de los lectores cuando escanean la página.

Está íntimamente relacionado con la jerarquía visual, por supuesto: una jerarquía visual bien diseñada establece puntos focales en la página allí donde necesites llamar la atención sobre los elementos más importantes, y el flujo visual conduce los ojos desde éstos hacia la información menos importante.

Como diseñador, quieres poder controlar el flujo visual de una página para que la gente la siga aproximadamente en la secuencia correcta. Varias fuerzas pueden actuar en contra cuando intentas establecer un flujo visual. Para quienes se han criado en la cultura occidental, una de ellas es nuestra tendencia a leer de arriba abajo y de izquierda a derecha. Ante una página monótona de texto, eso es lo que harás de forma natural; pero si hay puntos focales fuertes en la página, pueden distraerte de la progresión habitual, para bien o para mal.

Los puntos focales son los lugares a los que tus ojos no pueden resistirse a ir. Tiendes a seguirlos del más fuerte al más débil, y las páginas hábilmente diseñadas sólo tienen unos pocos: demasiados puntos focales diluyen la importancia de cada uno. Una buena jerarquía visual utiliza puntos focales para atraer la mirada hacia los lugares apropiados en el orden correcto. La próxima vez que cojas una revista, mira algunos anuncios bien diseñados y fíjate hacia dónde gravitan tus ojos. Los mejores artistas gráficos comerciales son maestros en establecer puntos focales para manipular lo que ves primero.

Entonces, ¿cómo crear un buen flujo visual? Una forma sencilla es utilizar líneas implícitas, curvas o rectas, para conectar los elementos de la página. Esto crea una narrativa visual que el espectador puede seguir. En el ejemplo de la Figura 4-16, el diseñador que creó esta antigua página de inicio de Uber utilizó varias técnicas para guiar la mirada por la pantalla; desde el uso de los botones azules de llamada a la acción, hasta el uso de una cuadrícula para dar armonía a la composición, pasando por el tamaño del titular en comparación con el subtítulo. Presta especial atención a la mirada de la joven de la foto. Su mirada apunta al titular, que utiliza líneas implícitas para guiar subconscientemente el ojo del espectador por el diseño y llegar a todos los elementos más importantes de la página.

Figura 4-16. Jerarquía visual en una antigua página de inicio de Uber

En los ejemplos de la Figura 4-17, tus ojos seguirán las líneas de forma natural. No es difícil configurar un diseño que fluya bien, pero ten cuidado con las opciones de diseño que van en contra de la fluidez. Si quieres que los espectadores lean la historia y la propuesta de valor de un sitio, dispón las piezas críticas de esa narrativa a lo largo de una línea continua, y no la interrumpas con extras llamativos.

Figura 4-17. Líneas implícitas para el flujo visual

Si estás diseñando un formulario o un conjunto de herramientas interactivas, no disperses los controles por toda la página; eso sólo obliga al usuario a esforzarse más para encontrarlos. En el ejemplo de la Figura 4-18, busca dónde está el botón de llamada a la acción; debería ser fácil de encontrar porque el diseñador lo colocó después del texto que el usuario leerá primero. Si no te importa que lean ese texto, puedes aislar las llamadas a la acción con espacios en blanco.

Figura 4-18. Llamadas a la acción

La Figura 4-19 muestra un mal ejemplo de flujo visual y jerarquía visual. ¿Cuántos puntos focales hay, y cómo compiten entre sí? ¿Dónde quieren ir primero tus ojos, y por qué? ¿Qué dice esta página que es importante?

Figura 4-19. Jerarquía visual desordenada de Weather Underground

Utilizar Pantallas Dinámicas

Todo lo que hemos tratado hasta ahora en se aplica por igual a las interfaces de usuario, los sitios web, los carteles, las vallas publicitarias y las páginas de revistas. Se ocupan de aspectos estáticos del diseño. Ah, pero tienes un ordenador dinámico con el que trabajar, y de repente el tiempo se convierte en otra dimensión del diseño.

Igualmente importante es que los ordenadores permiten al usuario interactuar con el diseño en una medida que la mayoría de los impresos no pueden. Hay formas de aprovechar la naturaleza dinámica de las pantallas de ordenador o móviles. Considera el uso del espacio, por ejemplo: incluso las pantallas de ordenador más grandes tienen menos espacio útil que, por ejemplo, un póster o una página de periódico. Hay muchas técnicas para utilizar ese espacio para presentar más contenido del que puedes mostrar a la vez.

Barras de desplazamiento

Las barras de desplazamiento permiten al usuario desplazarse a voluntad, en una o dos dimensiones (pero abstente de utilizar el desplazamiento horizontal con texto, ¡por favor!). Las barras de desplazamiento son una forma muy común de presentar una pequeña "ventana" sobre algo grande, como un texto, una imagen o una tabla. O, si puedes dividir el contenido en secciones coherentes, tienes varias opciones:las pestañas de módulos, los acordeones, los paneles plegables y los paneles móviles son patrones que ponen en manos del usuario cierto control de la disposición, a diferencia de las secciones tituladas más estáticas.

Las siguientes técnicas invocan el tiempo permitiendo que el usuario vea contenidos diferentes en momentos diferentes.

Habilitación receptiva

Para guiar con éxito a un usuario a través de un formulario o proceso, o para evitar confusiones sobre el modelo mental del usuario, una IU podría habilitar ciertas funcionalidades sólo cuando el usuario completa una acción específica. En el ejemplo de la Figura 4-20, las Preferencias del Sistema de Mac OS ofrecen un ejemplo típico de desactivación basada en una elección binaria.

Figura 4-20. Preferencias del sistema de Mac OS

Divulgación progresiva

En algunos contextos, la información sólo se muestra después de que el usuario realice una acción concreta. Moo.com, una tienda online de impresión y tarjetas de visita personalizadas (Figura 4-21), utiliza esta técnica en su flujo "crear un producto personalizado". En la figura, un cliente no ve las opciones de personalización hasta que hace clic en las partes editables de la tarjeta.

Figura 4-21. Ejemplo de Divulgación Progresiva en Moo.com

Regiones de la IU

Tanto si diseñas para web, como para software o para móviles, normalmente puedes contar con una o varias de las siguientes regiones de IU con las que trabajar (consulta también la Figura 4-22):

Título de la cabecera/ventana

Es la región superior de cualquier diseño, se utiliza para la marca global y la navegación global elementos en el diseño móvil y web, y a menudo verás que esta región se utiliza para las barras de herramientas y la navegación en el software. Las cabeceras suelen ser un elemento constante en el diseño de una plantilla, por lo que es importante elegir cuidadosamente lo que colocas en este valioso espacio de la pantalla.

Menú o navegación

Suele estar cerca de la parte superior o a la izquierda de la pantalla. Ten en cuenta que también pueden ser paneles (ver más abajo).

Área de contenido principal

Aquí debe dedicarse la mayor parte del espacio de la pantalla. Aquí es donde se ubica el contenido informativo, los formularios, las áreas de tareas y la marca de las experiencias de aterrizaje .

Pies de página

Aquí es donde reside la navegación secundaria y global o redundante; también puede contener información útil como la información de contacto de la empresa.

Paneles

Los paneles pueden estar en la parte superior, lateral o inferior. Pueden ser persistentes o desactivables dependiendo de la funcionalidad que estés utilizando en ese panel.

Figura 4-22. Regiones de interfaz de usuario, aplicación web y de escritorio

Los patrones

Los patrones de este capítulo de te ofrecen formas concretas de poner en juego todos estos conceptos de diseño. Los tres primeros abordan la jerarquía visual de toda la página, pantalla o ventana, independientemente del tipo de contenido que pongas en esa página. Deberías tener en cuenta el Marco Visual bastante al principio de un proyecto, porque afecta a todas las páginas y ventanas principales de una interfaz.

Disposición

Los siguientes patrones son los más utilizados habitualmente para aplicaciones de escritorio y web. Si estás mostrando principalmente resultados de búsqueda, una Cuadrícula de Iguales es una buena elección. Sin embargo, si tu aplicación es de tareas o productividad o una herramienta de creación, Center Stage podría tener más sentido. Elijas lo que elijas, asegúrate de que esa elección está impulsada por el contenido que necesitas mostrar para que el usuario alcance el objetivo deseado.

• Marco visual

• Escenario central

• Rejilla de iguales

Figura 4-23. Marco visual (arriba a la izquierda), Escenario central con un panel (arriba a la derecha), Cuadrícula de iguales (abajo a la izquierda)

Agrupar la información

El siguiente grupo de patrones representa formas alternativas de "fragmentar" el contenido en una página o ventana. Esto es útil cuando tienes más contenido del que puedes poner cómodamente en la pantalla de una sola vez. Estos patrones también tienen que ver con la jerarquía visual, pero también con la interactividad, y pueden ayudarte a elegir entre los mecanismos específicos disponibles en los conjuntos de herramientas de interfaz de usuario. Éstos son los patrones que examinamos en esta sección:

• Secciones tituladas

• Fichas de módulo

• Acordeón

• Paneles plegables

• Paneles móviles

Marco visual

Qué

En toda una aplicación o sitio, todas las plantillas de pantalla comparten características comunes para mantener un diseño y estilo coherentes. Cada página puede utilizar el mismo diseño básico, margen, tamaño de cabecera y medianil, colores y elementos estilísticos, pero el diseño ofrece suficiente flexibilidad para manejar distintos contenidos de página.

Utilizar cuando

Estás construyendo un sitio web con varias páginas o una interfaz de usuario con varias ventanas; en otras palabras, casi cualquier software complejo. Quieres que "cuelgue junto" y parezca una sola cosa, deliberadamente diseñada; quieres que sea fácil de usar y navegar.

Por qué

Cuando una interfaz de usuario utiliza colores, fuentes y diseños coherentes, y cuando los títulos y las ayudas a la navegación -señales- están siempre en el mismo lugar, los usuarios saben dónde están y dónde encontrar las cosas. No necesitan descifrar un nuevo diseño cada vez que cambian de contexto de una página o ventana a otra.

Un marco visual fuerte, repetido en cada página, ayuda a que el contenido de la página destaque más. Lo que es constante se desvanece en el fondo de la conciencia del usuario; lo que cambia se hace notar. Además, añadir suficiente carácter al diseño del marco visual ayuda con la marca de tu sitio web o producto: las páginas se hacen reconocibles como tuyas.

Cómo

Diseña un aspecto general que compartirán todas las páginas o ventanas. Las páginas de inicio y las ventanas principales son "especiales" y suelen tener un diseño diferente al de las páginas interiores, pero aun así deben compartir ciertas características con el resto del sitio, como:

Color

Fondos, colores de texto, colores de acento y otros colores

Fuentes

Para títulos, subtítulos, texto ordinario, texto de llamada y texto menor

Estilo de escritura y gramática

Títulos, nombres, contenido, descripciones breves, cualquier bloque largo de texto y cualquier otra cosa que utilice el lenguaje.

En un diseño de Visual Framework como el de JetBlue, mostrado en la Figura 4-24, todas las páginas o ventanas comparten lo siguiente, según corresponda:

• Señales de "Estás aquí", como , títulos, logotipos, senderos de migas de pan, navegación global con indicadores de la página actual y pestañas de módulos

• Dispositivos de navegación, incluida la navegación global y por utilidades , botones OK/Cancelar, botones Atrás, botones Salir o Salir, y patrones de navegación como el Indicador de progreso y las Migas de pan(Capítulo 3).

• Técnicas utilizadas para definir Secciones Tituladas

• Espaciado y alineación, incluyendo los márgenes de la página , el interlineado, los espacios entre etiquetas y sus controles asociados, y la justificación del texto y las etiquetas.

• La disposición general, o la colocación de las cosas en la página, en columnas y/o filas, teniendo en cuenta los márgenes y las cuestiones de espaciado enumeradas anteriormente.

Figura 4-24. Ejemplo de marco visual en el sitio web móvil de JetBlue

La implementación de un Marco Visual debería obligarte a separar los aspectos estilísticos de la IU del contenido. Esto no es malo. Si defines el marco en un solo lugar -como una hoja de estilos CSS, una clase Java o una biblioteca del sistema visual- te permite cambiar el marco independientemente del contenido, lo que significa que puedes retocarlo y ajustarlo más fácilmente para que quede como quieres. (También es una buena práctica de ingeniería de software).

Ejemplos

El sitio de JetBlue(Figura 4-25) emplea una paleta de colores restringida , un encabezado fuerte y un uso coherente de fuentes y rectángulos curvos en su Marco Visual. Incluso la página de inicio de sesión y los diálogos modales utilizan estos elementos; no parecen fuera de lugar. Observa las similitudes estilísticas con el sitio móvil.

Figura 4-25. Página de inicio de JetBlue

Del mismo modo, el sitio de TED(Figura 4-26) utiliza un color limitado y una cuadrícula de diseño para mantener la coherencia.

Figura 4-26. Página de inicio del TED

Escenario central

Qué

La tarea a mano se sitúa al frente y en el centro en la mayoría de los momentos de la experiencia del usuario. Este tipo de disposición coloca la parte más importante de la IU en la subsección más grande de la página o ventana, agrupando las herramientas y contenidos secundarios a su alrededor en paneles más pequeños.

Utilizar cuando

La función principal de la pantalla es mostrar una única unidad de información coherente al usuario, permitirle editar un documento o realizar una determinada tarea. Los demás contenidos y funciones son secundarios a éste. Muchos tipos de interfaces pueden utilizar un escenario central: tablasy hojas de cálculo, formularios y editores gráficos. También las páginas web que muestran artículos sueltos, imágenes o funciones.

Por qué

El diseño debe guiar los ojos del usuario inmediatamente al comienzo de la información (o tarea) más importante, en lugar de hacer que vaguen por la página confundidos. Una entidad central inequívoca ancla la atención del usuario. Del mismo modo que la frase principal de un artículo periodístico establece el tema y la finalidad del artículo, la entidad central establece la finalidad de la IU.

Una vez hecho esto, el usuario evaluará los elementos de la periferia en función de cómo se relacionan con lo que hay en el centro. Esto es más fácil para el usuario que escanear repetidamente la página, intentando descifrarla. ¿Qué es lo primero? ¿Qué es lo segundo? ¿Qué relación tiene esto con aquello? y así sucesivamente.

Cómo

Establece una jerarquía visual en la que el contenido o documento principal domine todo lo demás. (Consulta la introducción del capítulo para ver un debate sobre la jerarquía visual.) Al diseñar un Escenario Central, ten en cuenta estos factores concretos, aunque ninguno de ellos es absolutamente obligatorio:

Talla

El contenido del Escenario central debe ser al menos el doble de ancho que lo que haya en sus márgenes laterales, y el doble de alto que sus márgenes superior e inferior. (El usuario puede cambiar su tamaño en algunas UI, pero así es como debe ser cuando el usuario lo vea por primera vez). Ten en cuenta "el pliegue": cuando se utiliza una pantalla pequeña, ¿dónde se corta el contenido en la parte inferior? Asegúrate de que el Escenario Central sigue ocupando más espacio "por encima del pliegue" que cualquier otra cosa.

Titulares

Los grandes titulares son puntos focales y pueden atraer la mirada del usuario hacia la parte superior del escenario central. Esto también ocurre en los medios impresos, por supuesto. Para más información, consulta la introducción del capítulo y las Secciones tituladas.

Contexto

¿Cuál es la tarea principal del producto? Esto informará de lo que el usuario esperará ver cuando abra la pantalla. ¿Es un editor gráfico? ¿Un largo artículo de texto? ¿Un mapa? ¿Un árbol del sistema de archivos?

Fíjate en que no he mencionado una variable de diseño tradicional: la posición. No importa mucho dónde coloques el Escenario Central: arriba, izquierda, derecha, abajo, centro; se puede hacer que funcione. Si es lo suficientemente grande, acabará más o menos en el centro de todos modos. Ten en cuenta que los géneros bien establecidos tienen convenciones sobre qué va en cada margen, como las barras de herramientas en la parte superior de los editores gráficos, o las barras de navegación en el lado izquierdo de las pantallas web o móviles.

Ejemplos

El editor de texto de Google Docs(Figura 4-27) dedica casi todo su espacio horizontal al documento que se está editando; lo mismo ocurre con el editor de hojas de cálculo de Google. Incluso las herramientas de la parte superior de la página no ocupan mucho espacio. El resultado es un aspecto limpio y equilibrado.

Figura 4-27. Google Docs

La aplicación de escritorio Sketch (Figura 4-28) presenta un diseño Center Stage. Al iniciar un nuevo documento o plantilla en blanco, el usuario ve un lienzo en el que puede centrarse visualmente en la creación de contenido, sin el estorbo de contenido o funciones innecesarias.

Dado que la mayoría de los productos de Google Suite se basan en tareas, Center Stage es un marco común que se encuentra en la mayoría de esos productos(Figura 4-29), como Google Earth, Google Slides, Google Hangout y Google Sheets.

Figura 4-28. Boceto bohemio

Figura 4-29. Google Maps

Para más información sobre el lenguaje de diseño de Google, visita https://material.io/design.

Rejilla de iguales

Qué

Ordena los elementos de contenido, como como resultados de búsqueda, en una cuadrícula o matriz. Cada elemento debe seguir una plantilla común, y el peso visual de cada elemento debe ser similar. Enlaza a las páginas de los elementos según sea necesario.

Utilizar cuando

La página contiene muchos elementos de contenido que tienen un estilo y una importancia similares, como artículos de noticias, entradas de blog, productos o áreas temáticas. Quieres presentar al espectador ricas oportunidades para previsualizar y seleccionar estos elementos.

Por qué

Una cuadrícula que da a cada elemento el mismo espacio anuncia que tienen la misma importancia. La plantilla común para los elementos dentro de la cuadrícula informa al usuario de que los elementos son similares entre sí. Juntas, estas técnicas establecen una potente jerarquía visual que debe coincidir con la semántica de tu contenido.

Cómo

Averigua cómo colocar cada elemento en la cuadrícula. ¿Tienen imágenes en miniatura o gráficos? ¿Titulares, subtítulos, texto resumido? Experimenta con formas de encajar toda la información adecuada en un espacio relativamente pequeño -alto, ancho o cuadrado- y aplica esa plantilla a los elementos que necesites mostrar. Organiza los elementos de contenido en una cuadrícula o matriz. Cada elemento debe seguir una plantilla común, y el peso visual de cada elemento debe ser similar.

Ahora organiza los elementos en una cuadrícula. Puedes utilizar una sola fila o una matriz de dos, tres o más elementos de ancho. Ten en cuenta la anchura de la página mientras realizas este trabajo de diseño: ¿qué aspecto tendrá tu diseño en una ventana estrecha? ¿Tendrán la mayoría de tus usuarios ventanas de navegador grandes o utilizarán dispositivos móviles o de otro tipo(Figura 4-30)?

Figura 4-30. Ejemplo de diseño responsivo: versión para escritorio (izquierda), versión para móvil (centro), versión para tableta (derecha)

Puedes optar por resaltar los elementos de la cuadrícula estáticamente (para destacar un elemento sobre otros) o dinámicamente, cuando un usuario pase el ratón por encima de esos elementos de la cuadrícula. Utiliza el color y otros cambios estilísticos, pero no cambies las posiciones, tamaños u otros elementos estructurales de los elementos de la cuadrícula.

Ejemplos

En el ejemplo de Hulu(Figura 4-31), el tamaño y importancia relativa de cada elemento de la cuadrícula es el mismo y tiene un comportamiento de interacción coherente.

Figura 4-31. Cuadrícula de Hulu

En el diseño de CNN(Figura 4-32) y en el de Apple TV(Figura 4-33), el tratamiento visual coherente de marca estos elementos como pares entre sí. Una ventaja de utilizar cuadrículas para mostrar listas de elementos es que un usuario de esta interfaz sólo tendrá que interactuar con un elemento de la cuadrícula para entender cómo se comportan todos los elementos de la cuadrícula.

Figura 4-32. Rejilla de la CNN

Figura 4-33. Rejilla del Apple TV

Secciones tituladas

Qué

Define separa secciones de contenido dando a cada una un título visualmente fuerte, separando las secciones visualmente y disponiéndolas en la página.

Utilizar cuando

Tienes mucho contenido que mostrar, pero quieres que la página sea fácil de escanear y comprender, con todo visible. Puedes agrupar el contenido en secciones temáticas o basadas en tareas que tengan sentido para el usuario.

Por qué

Las secciones bien definidas y nombradas estructuran el contenido en "trozos" fácilmente digeribles, cada uno de los cuales es ahora comprensible de un vistazo. Esto hace que la arquitectura de la información sea obvia. Cuando el usuario ve una página seccionada ordenadamente en trozos como éstos, su vista se guía por la página más cómodamente.

Cómo

Primero, haz bien la arquitectura de la información: divide el contenido en trozos coherentes (si no lo han hecho ya por ti) y dales nombres cortos y memorables (véase la Figura 4-34):

• Para los títulos, utiliza una tipografía que destaque sobre el resto del contenido -más fuerte, más ancha, con un tamaño de punto mayor, un color más intenso, una familia de fuentes diferente, un texto resaltado, etc.-. Consulta la introducción del capítulo para saber más sobre la jerarquía visual.

• Prueba a invertir el título contra una franja de color contrastado.

• Utiliza espacios en blanco para separar secciones.

• Utiliza bloques de color de fondo contrastado detrás de toda la sección.

• Los recuadros de líneas grabadas, biseladas o en relieve son familiares con las UI de escritorio. Pero pueden perderse (y convertirse en ruido visual) si son demasiado grandes, están demasiado cerca unas de otras o profundamente anidadas.

Figura 4-34. Ejemplos de secciones tituladas

Si la página sigue resultando demasiado abrumadora, prueba a utilizar pestañas de módulo, un acordeón o paneles plegables para ocultar algunos de los contenidos.

Si tienes problemas para poner títulos razonables a estos trozos de contenido, puede ser una señal de que la agrupación no encaja de forma natural con el contenido. Considera la posibilidad de reorganizarlo en trozos diferentes que sean más fáciles de nombrar y recordar. Las categorías "Miscelánea" también pueden ser un signo de que la organización no es del todo correcta, aunque a veces son realmente necesarias.

Ejemplos

En su página de configuración de cuenta, Amazon(Figura 4-35) muestra los títulos correspondientes a los niveles de la jerarquía visual: el título de la página, los títulos de las secciones y los subtítulos encima de las listas de enlaces. Observa el uso de espacios en blanco, recuadros y alineación para estructurar la página.

Figura 4-35. Configuración de la cuenta de Amazon

La página de configuración de Google también incluye Secciones tituladas(Figura 4-36). Algunas contienen funciones; otras tienen enlaces profundos a otras páginas de configuración.

Figura 4-36. Configuración de la cuenta de Google

Fichas de módulo

Qué

Coloca módulos de contenido en pequeñas áreas con pestañas para que sólo sea visible un módulo a la vez. El usuario hace clic o toca en las pestañas para que aparezcan diferentes contenidos.

Figura 4-37. Patrón de pestañas del módulo

Utilizar cuando

Tienes mucho contenido heterogéneo para mostrar en la página, que posiblemente incluya bloques de texto, listas, botones, controles de formulario o imágenes, y no tienes espacio para todo. Parte del contenido de la página viene en grupos o módulos (o puede clasificarse en grupos coherentes). Esos módulos tienen las siguientes características

• Los usuarios sólo deben ver un módulo cada vez.

• Tienen una longitud y una altura similares.

• No hay muchos módulos: menos de 10; preferiblemente un puñado pequeño.

• El conjunto de módulos es bastante estático; no se añadirán nuevas páginas con frecuencia ni cambiarán o se eliminarán con frecuencia las existentes.

• Los contenidos de los módulos pueden estar relacionados o ser similares entre sí.

Por qué

Agrupar y ocultar trozos de contenido puede ser una técnica muy eficaz para despejar una interfaz. Las pestañas funcionan bien; también lo hacen los Acordeones, los Paneles Móviles, los Paneles Abatibles y, simplemente, la organización de las cosas en una cuadrícula limpia de Secciones Tituladas.

Cómo

En primer lugar, haz bien la arquitectura de la información. Divide el contenido en trozos coherentes, si no lo han hecho ya por ti, y ponles títulos cortos y memorables (de una o dos palabras, a ser posible). Recuerda que si divides el contenido incorrectamente, los usuarios se verán obligados a ir y venir entre pestañas mientras las comparan o buscan información que no encuentran. Sé amable con tus usuarios y prueba cómo lo has organizado.

Indica la pestaña seleccionada de forma inequívoca, por ejemplo, haciéndola contigua al propio panel. (El color por sí solo no suele ser suficiente. Si sólo tienes dos pestañas, asegúrate de que quede bien claro cuál está seleccionada y cuál no).

Las pestañas no tienen por qué ser pestañas literales, ni estar en la parte superior de la pila de módulos. Puedes ponerlas en una columna a la izquierda, o debajo, o incluso giradas 90 grados con el texto leído de lado.

Cuando se implementan en páginas web, las pestañas de módulo tienden a ser distintas de las pestañas de navegación (las que se utilizan para la navegación global, o para separar documentos, o para cargar nuevas páginas). Las pestañas también son útiles ahí, por supuesto, pero este patrón consiste más en ofrecer al usuario una forma ligera de ver módulos alternativos de contenido dentro de una página.

Si hay demasiadas pestañas para que quepan en un espacio estrecho, podrías hacer una de varias cosas: acortar las etiquetas utilizando una elipsis (y así hacer cada pestaña más estrecha), o utilizar botones de flecha tipo carrusel para desplazar las pestañas. También podrías colocar las etiquetas de las pestañas en una columna a la izquierda, en lugar de ponerlas arriba. Nunca coloques las pestañas en doble fila.

Ejemplos

El módulo de búsqueda de vuelos de Expedia(Figura 4-38) divide los distintos tipos de búsquedas disponibles en pestañas. Esto permite a Expedia presentar las opciones disponibles para el cliente potencial de una forma muy fácil de descubrir, sin sacrificar un valioso espacio en pantalla.

Figura 4-38. Búsqueda en Expedia

Las preferencias del sistema macOS(Figura 4-39) también utilizan Fichas de Módulo para resaltar la funcionalidad en el lugar más lógico en el que un usuario podría buscarla. Las pestañas están en la parte superior, etiquetadas como Batería y Adaptador de corriente.

Figura 4-39. Preferencias del sistema macOS

Acordeón

Qué

Coloca los módulos de contenido en una pila colineal de paneles que el usuario pueda cerrar y abrir independientemente unos de otros(Figura 4-40).

Figura 4-40. Ejemplos de acordeones

Utilizar cuando

Tienes mucho contenido heterogéneo para mostrar en la página, que posiblemente incluya bloques de texto, listas, botones, controles de formulario o imágenes, y no tienes espacio para todo. Parte del contenido de la página viene en grupos o módulos (o puede clasificarse en grupos coherentes).

Estos módulos tienen las siguientes características

• Los usuarios pueden querer ver más de un módulo a la vez.

• Algunos módulos son mucho más altos o más bajos que otros, pero todos tienen una anchura similar.

• Los módulos forman parte de una paleta de herramientas, un menú de dos niveles o algún otro sistema coherente de elementos interactivos.

• El contenido de los módulos puede estar relacionado o ser similar.

• Puede que quieras conservar el orden lineal de los módulos.

Ten en cuenta también que cuando se abren módulos grandes o muchos módulos, las etiquetas de la parte inferior del Acordeón pueden desplazarse fuera de la pantalla o ventana. Si eso supone un problema para tus usuarios, considera la posibilidad de utilizar una solución diferente.

Por qué

Los acordeones se han convertido en un elemento interactivo familiar en las páginas web, casi tanto como las pestañas y los menús desplegables. (Muchos sitios web utilizan acordeones en sus sistemas de menús para gestionar listas muy largas de páginas y categorías.

En general, agrupar y ocultar trozos de contenido puede ser una técnica muy eficaz para despejar una interfaz. Para ello, el patrón Acordeón forma parte de un conjunto de herramientas que incluye las Fichas de Módulo, los Paneles Móviles, los Paneles Colapsables y las Secciones Tituladas.

Los Acordeones pueden ser útiles en los sistemas de navegación de páginas web, pero realmente brillan en las aplicaciones de escritorio. Las paletas de herramientas, en particular, funcionan bien con los Acordeones (y también los Paneles Móviles, por razones similares). Como los usuarios pueden abrir cualquier conjunto de módulos y dejarlos abiertos, los Acordeones ayudan a los usuarios a modificar su "espacio vital" de la forma que más les convenga. Sin embargo, es fácil volver a abrir un módulo poco utilizado cuando se necesita.

Cómo

Establece el título que quieras dar a cada sección. Debe ser conciso, pero con información suficiente para saber cuál será la información que contiene.

Crea una affordance visual (una indicación que represente cómo debe utilizarse algo), como una flecha o un icono triangular, para indicar que hay información que puede revelarse haciendo clic o tocando sobre ella.

Permitir que haya más de un módulo abierto a la vez. Hay opiniones divergentes al respecto: algunos diseñadores prefieren que sólo esté abierto un módulo a la vez, y algunas implementaciones sólo permiten uno (o tienen un interruptor que los desarrolladores pueden configurar, al menos). Pero en mi experiencia, especialmente en aplicaciones, es mejor dejar que los usuarios abran varios módulos a la vez. Evita la desaparición brusca e inesperada de un módulo abierto anteriormente, y permite a los usuarios comparar el contenido de varios módulos sin tener que abrir y cerrar módulos repetidamente.

Cuando se utiliza en una aplicación o cuando el usuario ha iniciado sesión en un sitio web, un Acordeón debe conservar su estado de módulos abiertos y cerrados entre sesiones. Esto no es tan importante para los menús de navegación como para las paletas de herramientas.

Ejemplos

Las Preguntas Frecuentes de Samsung en sus páginas de Ayuda utilizan acordeones para mostrar la pregunta y revelar la respuesta al hacer clic en la flecha de expansión(Figura 4-41). Esto permite al usuario escanear rápidamente la página en busca de la información que busca y navegar rápidamente a otro tema si lo necesita.

Figura 4-41. Ayuda de Samsung

La página de configuración de Google Chrome utiliza acordeones expansibles para revelar las opciones de configuración detalladas(Figura 4-42). Esto permite al usuario ver todas las opciones "por encima del pliegue" y hacerse una mejor idea de dónde hacer clic.

Figura 4-42. Configuración de Google Chrome

Paneles plegables

Qué

Coloca los módulos de contenidos o funciones secundarias u opcionales en paneles que puedan ser abiertos y cerrados por el usuario.

Utilizar cuando

Tienes mucho contenido heterogéneo que mostrar en la página, que posiblemente incluya bloques de texto, listas, botones, controles de formulario o imágenes, o cuando tienes contenido Center Stage que debe tener prioridad visual.

Estos módulos tienen las siguientes características

• Su contenido anota, modifica, explica o apoya de otro modo el contenido de la parte principal de la página.

• Puede que los módulos no sean lo suficientemente importantes como para que alguno de ellos esté abierto por defecto.

• Su valor puede variar mucho de un usuario a otro. Algunos querrán ver realmente un módulo concreto; a otros no les importará en absoluto.

• Incluso para un usuario, un módulo puede ser útil unas veces, pero otras no. Cuando no está abierto, su espacio está mejor aprovechado por el contenido principal de la página.

• Los usuarios pueden querer abrir más de un módulo al mismo tiempo.

• Los módulos tienen muy poco que ver entre sí. Cuando se utilizan Fichas de Módulo o Acordeones, éstos agrupan los módulos, dando a entender que están relacionados de algún modo; los Paneles Colapsables no los agrupan.

Por qué

Ocultar piezas no críticas de funcionalidad o contenido ayuda a simplificar la interfaz. Cuando un usuario oculta un módulo que apoya el contenido principal, éste simplemente se colapsa, devolviendo su espacio al contenido principal (o al espacio en blanco). Éste es un ejemplo del principio de Divulgación Progresiva (mostrar el contenido oculto cuando y donde el usuario lo necesite). En general, agrupar y ocultar trozos de contenido puede ser una técnica muy eficaz para despejar una interfaz.

Cómo

Coloca cada módulo de apoyo en un panel que el usuario pueda abrir y cerrar con un solo clic. Etiqueta el botón o enlace con el nombre del módulo o simplemente "Más", y considera la posibilidad de utilizar un chevrón, un icono de menú o un triángulo giratorio para indicar que allí se oculta más contenido. Cuando el usuario cierre el panel, colapsa el espacio utilizado por ese panel y dedícalo a otro contenido (por ejemplo, desplazando hacia arriba el contenido que hay debajo en la página).

Animar los paneles a medida que se abren y cierran ayuda al usuario a crear una comprensión visual y espacial de cómo funciona y dónde encontrarlo en el futuro.

Si ves que la mayoría de los usuarios abren un Panel Abatible que está cerrado por defecto, cámbialo a abierto por defecto.

Ejemplos

La aplicación de noticias de Apple(Figura 4-43) utiliza un panel izquierdo como una forma extensible para que el usuario añada o elimine canales de noticias y temas y una forma de navegar por esos canales. Cuando el usuario quiera centrarse sólo en el contenido, puede tocar el icono del panel (a la izquierda de "Hoy", en la cabecera central) para deslizar el panel hacia la izquierda.

Figura 4-43. Apple News, versión iPad, con el panel de navegación ampliado

Google Maps(Figura 4-44) permite al usuario seguir viendo el mapa mientras encuentra las indicaciones, una vez seleccionadas las indicaciones de destino, el panel se colapsa para permitir ver las indicaciones sin obstáculos. Si el usuario necesita editar o cambiar o añadir una parada, puede expandir fácilmente el panel lateral.

Figura 4-44. Google Maps, versión iPad, mostrando el panel izquierdo con la función de dirección

Paneles móviles

Qué

Coloca módulos de contenido en cajas que puedan abrirse y cerrarse independientemente unas de otras. Permite que el usuario disponga las cajas libremente en la página en una configuración personalizada. A menudo verás paneles móviles con el diseño Center Stage en herramientas de creación como la Suite de Adobe(Figura 4-45), y aplicaciones de productividad y comunicación como Microsoft Excel y Skype.

Figura 4-45. Paneles móviles en Adobe Illustrator

Utilizar cuando

Estás diseñando una aplicación de escritorio o un sitio web en el que la mayoría de los usuarios inician sesión. Los portales de noticias, los cuadros de mando y las aplicaciones de lienzo más paleta suelen utilizar Paneles Móviles. La pantalla que estás diseñando es una parte importante de la aplicación o del sitio, algo que los usuarios ven a menudo o durante largos periodos de tiempo. Tienes mucho contenido heterogéneo que mostrar en la página, posiblemente incluyendo bloques de texto, listas, botones, controles de formulario o imágenes.

Los módulos tienen algunas de las siguientes características:

• Es casi seguro que los usuarios querrán ver más de un módulo a la vez.

• Su valor puede variar mucho de un usuario a otro. Algunas personas quieren los módulos A, B y C, mientras que otras no los necesitan en absoluto y sólo quieren ver D, E y F.

• Los módulos varían mucho de tamaño.

• Su posición en la página no es muy importante para ti, pero puede serlo para los usuarios. (Por el contrario, una página de Secciones Tituladas estáticas debería organizarse teniendo en cuenta la importancia de la posición de la página; las cosas importantes van arriba, por ejemplo).

• Hay muchos módulos, posiblemente tantos que si se mostraran todos a la vez, el espectador se sentiría abrumado. Tú o el usuario debéis elegir entre ellos.

• Estás dispuesto a permitir que los usuarios oculten totalmente algunos módulos (y a ofrecer un mecanismo para recuperarlos).

• Los módulos pueden formar parte de la paleta de herramientas o de algún otro sistema coherente de elementos interactivos.

Por qué

Los distintos usuarios tienen intereses diferentes. Los sitios web como tableros y portales son más útiles para las personas cuando pueden elegir el contenido que ven. Cuando van a trabajar en algo durante un tiempo en una aplicación de escritorio, a la gente le gusta reorganizar su entorno para adaptarlo a su estilo de trabajo. Pueden colocar las herramientas necesarias cerca de donde trabajan; pueden ocultar las cosas que no necesitan; pueden utilizar la Memoria Espacial para recordar dónde han puesto las cosas.

Desde un punto de vista racional, los Paneles Móviles ayudan a los usuarios a hacer las cosas de forma más eficaz y cómoda (a largo plazo, después de que hayan dedicado tiempo a reorganizar su entorno como a ellos les gusta). Pero este tipo de personalización también parece atraer a la gente a otro nivel. Por ejemplo, podrían hacerlo en sitios web visitados con poca frecuencia que ofrezcan algún tipo de entretenimiento. La personalización puede aumentar el compromiso y la aceptación.

Por último, un diseño de Paneles Móviles se adapta fácilmente a nuevos módulos introducidos con el tiempo, como los aportados por terceros.

Cómo

Da a cada módulo un nombre, una barra de título y un tamaño por defecto, y disponlos en la pantalla con una configuración por defecto razonable. Deja que el usuario mueva los módulos por la página a voluntad, mediante arrastrar y soltar si es posible. Permite que cada módulo se abra y se cierre con un simple gesto, como un clic del ratón en un botón de la barra de título.

Dependiendo del diseño que hayas elegido, puede que quieras dar libertad al usuario para colocar estas piezas en cualquier lugar, aunque se solapen. O puede que quieras una rejilla de diseño predefinida con "ranuras" en las que se puedan arrastrar y soltar las piezas; esto permite que la pantalla mantenga la alineación (y cierto sentido de la dignidad) sin hacer que el usuario pase demasiado tiempo jugueteando con las ventanas. Algunos diseños utilizan ghosting -grandesobjetivos de soltado que aparecen dinámicamente; por ejemplo, rectángulos punteados- para mostrar dónde iría un módulo arrastrado al soltarlo.

Considera la posibilidad de permitir a los usuarios eliminar módulos por completo. Un botón "X" en la barra de título es la forma familiar de eliminar uno. Una vez eliminado un módulo, ¿cómo puede recuperarlo el usuario? Deja que los usuarios añadan módulos -incluso nuevos, tal vez- de una lista de módulos disponibles por la que puedan navegar y buscar.