Creación de prototipos de contenido primero

El contenido es el producto básico de la economía digital. Es el oro que convertimos en una experiencia de lujo, el diamante que encerramos en los programas de fidelización y las ventas adicionales. Sin embargo, como diseñadores, a menudo lo conectamos después del hecho. Creamos prototipos de nuestra interacción y diseño visual hasta el agotamiento, pero aceptamos que las "palabras reales" se pueden agregar más tarde. Hay una mejor manera.

Cada vez más, los bienes digitales que creamos operan dentro de un sistema dinámico de contenido, funcionalidad, código e intención. Nuestros productos y servicios se desplazan y se derraman en sitios web de socios, fuentes de redes sociales y una miríada de agregadores electrónicos, todos buscando moldear el comportamiento y la comprensión de los visitantes. Los sistemas se basan en sistemas y, en poco tiempo, hemos improvisado un coloso cuya amplitud hace que las mentes se vuelvan alucinantes.

Lectura adicional en SmashingMag:

• Optimización de su diseño para pruebas rápidas de prototipos
• Elegir la herramienta de creación de prototipos adecuada
• Creación de prototipos de contenido en diseño web receptivo
• Resurrección de prototipos de interfaz de usuario

Aunque en el pasado hemos sido bastante buenos para descifrar sistemas simples (piense en sitios web estáticos e intranets), resulta que los grandes sistemas dinámicos son un poco más complicados y un poco menos predecibles. A medida que los sistemas crecen, se vuelven exponencialmente más complejos y, a medida que aumentan en complejidad, su comportamiento se vuelve cada vez más no lineal y difícil de anticipar para nosotros, pobres monos. En sistemas grandes, los errores de redondeo en el milésimo punto decimal pueden cambiar radicalmente los resultados (Mitchell 33). A medida que Internet se acerca a un billón de nodos, este es el mundo para el que ahora todos diseñamos.

Esos sistemas simples a los que estamos acostumbrados , sin embargo, pueden proporcionar una clave para diseñar espacios más complejos. Como dice el teórico de sistemas John Gall, “Invariablemente se descubre que un sistema complejo que funciona ha evolucionado a partir de un sistema simple que funciona”. En el espacio del diseño digital, si nos aseguramos de que nuestros sistemas dinámicos más simples de contenido, estructura y creación de significado funcionen según lo previsto en un nivel fundamental, entonces podemos sentar las bases para sistemas más grandes y complejos que también funcionen según lo previsto.

Una forma en que nosotros, como diseñadores, podemos mantener nuestros patos de complejidad en orden es incluir nuestro contenido en el proceso de creación de prototipos desde el principio. Un enfoque de contenido primero nos alienta a enfrentar las limitaciones y oportunidades de nuestro contenido antes, y probar funcionalmente nuestras soluciones propuestas con usuarios hambrientos de contenido real antes de que se tomen decisiones de diseño importantes.

En este artículo, le mostraré cómo usar un conjunto simple de herramientas de código abierto para introducir contenido real y dinámico en su proceso de creación de prototipos desde el primer día. Este enfoque le permite centrarse en cómo los usuarios entienden su contenido desde el comienzo de un proyecto y, posteriormente, construir elementos estructurales, visuales y técnicos sobre esa base de comprensión.

Un modelo de caja blanca para el contenido

Una de las herramientas que utilizan los investigadores de sistemas para comprender el comportamiento de los sistemas dinámicos se denomina modelo de "caja blanca". El erudito en sistemas Gerald Weinberg escribe que, mientras que el comportamiento de un modelo de caja negra está “perfectamente oculto”, el comportamiento de un modelo de caja blanca está “perfectamente revelado”. Para los sistemas complejos, esta transparencia es importante: Weinberg señala además que "incluso los sistemas más simples a veces contienen sorpresas para sus constructores" (172).

El objetivo de la creación de prototipos de contenido primero es crear un modelo de caja blanca para nuestro contenido, su estructura interna y su arquitectura de información de soporte. Esto nos permitirá descubrir temprano en el proceso de diseño cómo nuestros usuarios finales crean significado a partir del contenido estructurado que ofrecen nuestros sistemas digitales. Al tomarnos el tiempo para que la estructura de nuestros sistemas de contenido sea correcta en su esencia, preparamos el escenario para que estos sistemas simples que funcionan se integren en sistemas más grandes y complejos que funcionan.

Para crear una caja blanca para el contenido digital, debemos tener en cuenta tres cosas:

• el contenido en sí , compuesto por paquetes de contenido de diferentes niveles de granularidad, según el tipo y propósito del contenido;
• estructura , tanto a nivel de página o pantalla local como a nivel de sitio web o aplicación global;
• participación del usuario en el contexto y la postura (escritorio, tableta o teléfono) en el que finalmente se consumirá nuestro contenido.

Para permanecer "perfectamente visible", este modelo también debe ser transparente en su funcionalidad para que los miembros del equipo de diseño puedan entender por qué el modelo se comporta como lo hace. Esta última pieza, la transparencia, en combinación con la participación del usuario, es crucial para el modelo de caja blanca: no estamos construyendo un prototipo simplemente para demostrar la funcionalidad, sino para aprender, revisar y refinar nuestra estructura de contenido subyacente en función de cómo las palabras y estructura que utilizamos son interpretados por sus audiencias previstas.

Un enfoque de creación de prototipos de contenido primero es útil cuando se diseña para contenido existente, pero también es una buena manera de involucrar a un equipo editorial en el proceso de creación de contenido. Poner palabras, imágenes y activos reales frente a los usuarios al principio del proyecto permite que todos tengan tiempo para afinar, ajustar o pivotar para cumplir con los objetivos del proyecto. Si su plan de proyecto es seguir una estrategia de completar las palabras más tarde, la creación de prototipos de contenido primero le brinda la oportunidad de obtener algunas variaciones de contenido frente a los usuarios y luego obtener las reacciones de los usuarios frente a las partes interesadas.

Un marco de creación de prototipos de contenido primero

Tomando los principios y objetivos descritos anteriormente, he elaborado un marco inicial para crear este tipo de prototipo. Muy en el espíritu del pensamiento sistémico en sí mismo, esta herramienta se basa en un acoplamiento flexible de sistemas más simples, cada uno de los cuales realiza bien una tarea primaria simple.

Para este marco, armé Excel, Jekyll, ZURB Foundation y Browsersync, y los vinculé a todos con un script Gulp. Elegí estas aplicaciones y marcos en particular porque están ampliamente disponibles, son de código abierto (en su mayoría), tienen comunidades de soporte activas y tienen una excelente documentación.

Puede descargar una copia del proyecto de ejemplo que se analiza a continuación y un kit de inicio del marco de creación de prototipos de contenido primero desde la página del proyecto en GitHub. Repasemos cómo encajan las piezas y qué hace cada una de ellas.

Sobresalir

Excel, o cualquier programa de hoja de cálculo que se guarde en formato XLSX, se usa para crear y editar contenido estructurado y sistemas de categorización. Cada vez que guarda el documento, cada paquete en su conjunto de contenido (representado por una fila en la hoja de cálculo) se exporta como una página Jekyll y un documento JSON. Esto le permite ejecutar operaciones globales y de página en su contenido y propagar cambios en el contenido a todo el sitio web con un solo comando "guardar".

jekyll

Jekyll es un generador de sitios web estáticos de código abierto y se utiliza para articular la estructura dinámica entre paquetes de contenido, páginas y categorías. Jekyll representa el contenido que guarda en la hoja de cálculo como variables y le permite realizar operaciones en esas variables para crear una estructura. Jekyll también proporciona etiquetas "si/entonces" para aplicar lógica condicional y bucles for recorrer y filtrar conjuntos de contenido.

Fundación

ZURB Foundation, un marco front-end de código abierto para dispositivos móviles, se utiliza para articular la jerarquía de información y estructurar comportamientos receptivos. Las cuadrículas, las definiciones de estilo y los comportamientos receptivos de Foundation le permiten crear casi cualquier patrón de diseño web estándar simplemente aplicando clases a sus elementos HTML.

sincronización del navegador

Finalmente, Browsersync entrega su prototipo al navegador y actualiza CSS y páginas a medida que realiza cambios. Browsersync también te permite acceder al prototipo desde cualquier dispositivo conectado a la misma red. Esto significa que puede ver actualizaciones automáticas en un teléfono y una tableta mientras realiza ediciones en una computadora portátil.

Enlazadas, estas herramientas le permiten crear prototipos en un entorno similar a los sistemas dinámicos que conformarán su entorno de producción eventual, pero sin tener que sufrir las bases de datos, los servicios en la nube y la latencia de la red que lo ralentizarían cuando necesite mudarse. rápidamente para probar ideas.

Si está entrando en pánico porque esto involucra código...

No se asuste. Estas herramientas son fáciles de diseñar y tienen excelentes comunidades de apoyo. No necesita ser un desarrollador front-end para hacer realidad sus ideas. Necesita saber los conceptos básicos de HTML y CSS. Estos lenguajes no son difíciles, y aprenderlos no destruirá su capacidad para hacer un buen trabajo de diseño. En palabras de la leyenda del diseño tipográfico Erik Spiekermann: “Tienes que aprender, si no a codificar, al menos a apreciar el código, a entender el código. Porque el código es lo que eran las tuercas y los tornillos hace cien años”. La mejor manera de empezar es sumergirse.

Un ejemplo de creación de prototipos de contenido primero: el centro comunitario de Green Lake

Para tener una mejor idea de cómo se ve la creación de prototipos de contenido primero en acción, tomemos una colección de contenido digital del mundo real.

Aquí está el escenario. El Centro Comunitario de Green Lake ofrece clases, programas y eventos a los miembros de la comunidad en el vecindario de Green Lake. Desafortunadamente, toda la información actual de clases, programas y eventos está disponible en línea solo a través de PDF, que a su vez está disponible solo desde el sitio web optimizado para computadora de ancho fijo del centro. Mirad:

En un esfuerzo por llegar a los miembros de la comunidad que intentan cada vez más acceder a información sobre clases, programas y eventos a través de sus teléfonos móviles, el centro ha decidido lanzar un sitio web de programas para dispositivos móviles. Esta iniciativa eventualmente servirá como un catalizador para un sitio web receptivo de toda la ciudad para parques y recreación.

Como cualquier otro proyecto de diseño, comenzaré con un análisis heurístico y competitivo y observando el tráfico disponible y los datos de los usuarios. Si las partes interesadas y los usuarios finales están disponibles, me aseguraré de hablar con ellos también. Una vez que sienta que tengo un buen sentido del propósito del sitio web, exploraré algunas ideas básicas de interfaz de usuario y arquitectura de información de alto nivel en papel.

A medida que un enfoque de diseño inicial comienza a tomar forma, puedo usar un flujo de trabajo de prototipos de contenido primero para obtener mis ideas iniciales, y, lo que es más importante, el contenido que esas ideas deben servir, en el contexto en el que finalmente se consumirán. en este caso, el navegador. Repasemos cómo es este proceso en detalle.

Capturar contenido

En este ejemplo, puede ver cómo el contenido estructurado que capturo en una hoja de cálculo del marco de creación de prototipos de contenido primero se escribe automáticamente en una plantilla de página cada vez que guardo mi archivo _data . Aquí he usado la hoja de “catálogo” para estructurar el contenido. Las variables "título", "descripción", "categoría" y "etiquetas" ya están incluidas en la plantilla de página, por lo que esos valores se actualizan de inmediato. Puede agregar tantas otras columnas a una fila de contenido como desee; solo asegúrese de incluir la variable correspondiente en la plantilla (más sobre esto a continuación).

Las hojas de "Directorio" y "Alimentación" también se incluyen en el kit de inicio e incluyen diferentes categorías (columnas) para sus respectivos tipos de contenido. Cada hoja exporta contenido a su propia carpeta (en estos casos, "catálogo", "directorio" y "fuente") y a su propio archivo JSON. Puede agregar tantas otras hojas como necesite, solo asegúrese de actualizar su archivo de configuración de Jekyll para que sepa cómo extraerlas (consulte la documentación del complemento "Generador de páginas de datos de Jekyll" para obtener detalles completos).

Agregar más paquetes de contenido

A medida que agrego paquetes de contenido (filas en la hoja de cálculo), se agregan automáticamente nuevas páginas al prototipo. Cada fila representa una sola página y cada columna de esa fila representa una variable que Jekyll está completando en la plantilla a medida que crea una página. En este ejemplo, el contenido del catálogo del "Centro de la comunidad" es bastante uniforme, pero si las descripciones de los elementos varían mucho en longitud, podría ver fácilmente (y experimentar) cómo esa variación afectaría el diseño de la página. Tal vez entonces podría decidir fragmentar el contenido de manera diferente o agregar nuevos elementos, como resúmenes o slugs.

Este sistema también le permite experimentar fácilmente con etiquetas, categorías y etiquetas. Al cambiar los valores en la columna "categoría", puede probar cómo los diferentes enfoques arquitectónicos afectan la capacidad del usuario para encontrar fácilmente un contenido determinado. En este ejemplo, por ejemplo, he creado sistemas organizativos basados ​​en el tipo de clase y en el grupo de edad de un participante. Esto me permite probar fácilmente diferentes enfoques de navegación en el menú y en la página de inicio a medida que toma forma el prototipo.

Agregar estructura y jerarquía con HTML

Una vez que esté satisfecho con el contenido en su lugar, comenzaré a envolver ese contenido en marcado para que su estructura tenga sentido para los usuarios. Trate las variables aquí como texto y márquelas como marcaría texto en un archivo HTML "plano". Los resultados aquí deberían parecer bastante predecibles (eso es algo bueno).

El sistema de plantillas de Jekyll tomará las plantillas de página que ha creado y las envolverá con una plantilla global que contiene el encabezado y el icono de navegación. Esto es lo que significa el "diseño: predeterminado": estamos llamando a la plantilla "predeterminada" como el envoltorio de esta plantilla. Puede anidar plantillas con la profundidad que desee, aunque normalmente no es necesario tener más de uno o dos niveles de plantillas. Para dar cabida a elementos repetidos, como listas de páginas y enlaces globales, también puede usar "incluye", que inserta una pieza de código particular en la plantilla cuando se representa el sitio web. Consulte la documentación oficial de Jekyll para obtener más información sobre plantillas e incluye.

Agregar lógica con las etiquetas de marcado de Jekyll

Jekyll le permite agregar lógica básica al incluir etiquetas básicas que son específicas de su sistema de plantillas. Aquí, uso una etiqueta for para recorrer la lista de clases del Centro Comunitario de Green Lake (que se creó cuando agregué los múltiples paquetes de contenido anteriores), y represento cada clase del centro comunitario en la lista como un enlace:

También puede usar sentencias if para crear condiciones. Aquí, estoy usando una declaración if para ocultar el enlace a la página de la clase en la que estoy actualmente:

Si te acaba de explotar la cabeza, no entres en pánico. Agregar lógica es una característica avanzada. Su prototipo funcionará bien si se limita a las variables de contenido y HTML. Sin embargo, el sistema de plantillas de Jekyll es muy legible por humanos y fácil de aprender. Echa un vistazo a la introducción rápida de sus creadores sobre cómo funcionan las piezas básicas.

Agregue estilo y comportamiento receptivo con el CSS de Foundation

Una vez que el primer borrador de la estructura HTML está listo, puedo agregar estilo al prototipo simplemente incluyendo clases CSS y guardando el documento. El marco front-end de ZURB Foundation, que ya está vinculado en el kit de inicio, proporciona clases de estilo para una amplia gama de patrones de aplicaciones web y nativas. En el ejemplo que se muestra aquí, simplemente introduciendo dos clases diferentes, le di a mi prototipo móvil una sensación más "tocable" e introduje un sentido mucho más claro de jerarquía visual. Estos cambios se propagan automáticamente a todo el contenido que usa esta plantilla.

Foundation también facilita la inclusión de un comportamiento de respuesta móvil primero y el uso de docenas de componentes de diseño, contenedores y medios prediseñados. Debido a que todo es CSS, puede modificar y ajustar todo a su gusto. Para estos ejemplos, he modificado la paleta de colores base de Foundation a un estilo de "estructura alámbrica monocromática", pero puede adaptar Foundation a cualquier estilo que desee. Obtenga más información sobre el uso de Foundation consultando su documentación o tutoriales o tomando una clase (por cierto, las clases son excelentes).

Obtenga comentarios temprano y revise sobre la marcha

Una vez que el contenido está en su lugar, es fácil crear y probar múltiples variaciones de la estructura. Las etiquetas, categorías, palabras clave y otros metadatos se pueden cambiar directamente en la hoja de cálculo de contenido. Del mismo modo, las variaciones en la estructura, el flujo y la visualización de la página son solo cuestión de crear versiones alternativas de sus plantillas de Jekyll. Todos estos cambios se reflejarán instantáneamente en el prototipo en el momento en que presione "Guardar".

Para terminar una primera versión del prototipo del Centro Comunitario de Green Lake, he creado tres variaciones de la página de inicio móvil. En este caso, todo lo que tenía que hacer era reorganizar los elementos en la plantilla de la página de inicio e intercambiar fuentes de datos para los dos elementos de navegación (es decir, los botones de ancho completo y los mosaicos de imágenes).

Aunque he presentado todos estos pasos en secuencia, tenga en cuenta que Gulp (el ejecutor de tareas de JavaScript que vincula todos nuestros sistemas simples) actualiza los cambios cada vez que guarda un documento. Esto significa que puede volver a cualquier paso en cualquier momento y realizar ajustes en función de la respuesta del usuario, los comentarios de las partes interesadas o los nuevos descubrimientos sobre el contenido o el contexto.

Esta flexibilidad le permite probar fácilmente diferentes jerarquías de pantalla y tratamientos de contenido con los usuarios, y le permite usar contenido real en esas pruebas, contenido que su audiencia puede experimentar (y reaccionar) de primera mano. Debido a que la forma final del prototipo es HTML, CSS y JavaScript, puede recopilar comentarios de los usuarios con cualquier herramienta de prueba con la que se sienta más cómodo (me gusta UserTesting y Lookback).

El formato del prototipo de HTML, CSS y JavaScript también significa que su trabajo informará más fácilmente los esfuerzos paralelos y posteriores. Si su producto final se creará en una plataforma de CMS existente, por ejemplo, los requisitos de contenido, estructura y visualización que pueda articular lo ayudarán a evaluar las opciones de CMS. Del mismo modo, su prototipo puede servir como un documento de especificación para decisiones de diseño relacionadas con la cuadrícula, la jerarquía, los encabezados, el comportamiento de los enlaces y las fuentes para sus desarrolladores front-end.

No olvide, sin embargo, que el objetivo de la creación de prototipos de contenido primero no es simplemente diseñar en el navegador: el objetivo es usar el navegador y los comentarios de sus usuarios para ajustar la organización de su contenido para construir simple estructuras que funcionan bien.

El punto fuerte de este método es permitirle modificar rápidamente los sistemas que crean sus categorías, etiquetas y rutas de navegación. Esto proporciona una clara ventaja sobre el modelado de contenido estático. Si descubre que está utilizando mucho CSS adicional para que su contenido dinámico funcione de la manera que desea, vuelva a la fuente. ¿Puede dividir el contenido de manera diferente para que funcione mejor? ¿Agregar (o eliminar) un conjunto de clases o etiquetas? Prueba diferentes variaciones hasta que encuentres la solución simple y elegante que hace que todo lo demás parezca encajar.

Pensamiento sistémico más allá de la web

El ejemplo básico que se muestra aquí ilustra cómo un enfoque de creación de prototipos que prioriza el contenido puede ayudarnos a crear sistemas de contenido simples que funcionan, sistemas que, a su vez, preparan el escenario para sistemas más grandes y complejos que funcionan. La creación de prototipos de contenido primero nos ayuda a descubrir lugares donde los ajustes menores en el modelo de contenido, la jerarquía, las categorías y las etiquetas pueden conducir a soluciones más limpias y elegantes para las necesidades de información de nuestros usuarios.

Aunque esta herramienta se basa en tecnologías web, la forma en que estructuramos el contenido para comprenderlo trasciende las herramientas, tecnologías y plataformas individuales. Si su contenido en su forma más básica, despojado de los requisitos y restricciones de implementaciones particulares, tiene sentido para su audiencia y logra sus objetivos de comunicación de manera simple y elegante, entonces ya ha construido una base que va más allá de las implementaciones tecnológicas individuales. Ha creado contenido que no necesita una plataforma o guión en particular para tener sentido; es un conjunto de contenidos que quiere ser entendido de cierta manera.

Cuando colocamos el contenido en el centro del proceso de diseño, comenzamos a resolver no para una implementación particular, sino para la comprensión. Todo lo demás es un paso intermedio. Al reconocer que la plataforma final para la que diseñamos es la mente humana, podemos identificar las estructuras simples que dan lugar a la comprensión y podemos trabajar para fortalecer esas estructuras a lo largo de todo el proceso de diseño.

Trabajos citados

• Complejidad, una visita guiada , Melanie Mitchell (Nueva York: Oxford, 2009)
• Introducción al pensamiento sistémico general , Gerald Weinberg (Nueva York: Dorset House, 1975)