¿Qué es el diseño de contenido primero?
‘Content First Design’ es un enfoque que involucra el uso de contenido para definir el diseño y los elementos en un diseño, y no al revés. Es bastante común ver texto e imágenes de marcador de posición utilizados durante todo el proceso de creación de prototipos, y el contenido real solo se presenta al final. El problema aquí es que el contenido ficticio no captura el contexto de para qué se usarán los diseños, lo que causa problemas cuando el producto se usa en la naturaleza.
Por el contrario, diseñar primero el contenido nos ayuda a estructurar los sitios de una manera que pueda guiar mejor a los usuarios, al mismo tiempo que los ayuda a lograr sus objetivos de manera efectiva. Como dice Biz Sanford del equipo de contenido de Shopify:
“Las palabras son esenciales para ayudar a los usuarios a realizar sus tareas, y al pensar en ellas mientras dibuja, descubrirá problemas temprano y podrá avanzar más rápido más adelante”.
Sin embargo, no importa cómo llame al diseño de contenido primero, está claro que las palabras en su diseño son importantes, especialmente con el aumento de las interfaces conversacionales y las aplicaciones controladas por voz. Veamos ahora los diferentes enfoques que puede tomar para diseñar con contenido primero:
¿Sin contenido? No hay problema.
Al diseñar el contenido primero, un buen lugar para comenzar es reunir todo el contenido posible que pueda incluirse en su producto final. Sin embargo, no siempre está claro de dónde puede provenir este contenido, especialmente en las primeras etapas de un proceso de diseño. Aquí hay un par de enfoques para recopilar este contenido:
1. Proto-contenido
Una forma es usar contenido que sea similar a lo que puede esperar que sea en su producto final. Este no es el contenido exacto que usará, pero se aproxima a él; a menudo se lo denomina «proto-contenido«. Como destacó Rob Mills, estratega de contenido, el contexto que proporciona el proto-contenido es tan valioso que nos ayuda a tomar decisiones de diseño mejor informadas, viajes de usuario más precisos y también mejora la funcionalidad en general:
“El proto-contenido permite probar los diseños y la funcionalidad en un punto en el que se pueden resolver los problemas y realizar cambios, antes del lanzamiento del sitio”.
Si se pregunta por dónde empezar a recopilar proto-contenido, existen algunos enfoques simples. Tú podrías:
- Reutilizar contenido existente o borrador.
- Copiar el contenido de un competidor.
- Produce tu propio contenido de muestra.
El proto-contenido también puede ir más allá del texto para incluir cualquier medio que pueda aparecer en una interfaz de usuario.
2. Auditorías de contenido
Otra forma de generar proto-contenido (como lo sugiere UX y Service Designer, Linn Vizard) es realizar una auditoría de contenido. Al recopilar una hoja de cálculo de la información existente (o de la competencia) a través de una auditoría, se crea una imagen más precisa para guiar sus prototipos y decisiones de diseño.
Las auditorías de contenido descubren información como:
- Títulos de página.
- Tipos de contenido.
- Materias y Temas.
- Categorías.
Con esta información, se pueden formar relaciones entre los términos y se pueden revelar nuevas vías para su diseño que de otro modo no se habrían considerado. Esto también puede verse como un tipo de protocontenido y es muy útil para completar prototipos, como veremos con nuestro archivo XD en la siguiente sección.
Usando Proto-contenido en Prototipos.
Una vez que haya recopilado proto-contenido, no espere para comenzar a usarlo. Según Sanford, puede comenzar a usar contenido realista incluso tan pronto como cree maquetas de baja fidelidad:
“Para el momento en que te cambies a maquetas de baja fidelidad, deberías estar usando contenido detallado y realista para todo”.
Sin embargo, con los diversos enfoques para recopilar protocontenido, está claro que la calidad y la cantidad recopilada pueden variar. Esto está bien, ya que diferentes fidelidades de contenido son útiles con prototipos de diferentes fidelidades.
Comenzando con contenido de baja fidelidad.
Una combinación del ‘esquema’ de la historia de un escritor y la ‘estructura alámbrica’ de un diseñador, los storyframes lo ayudan a pensar en su interfaz en términos de una historia que guiará a sus usuarios a lograr un objetivo final específico. Aquí hay un ejemplo para demostrar cómo un esquema simple en un documento de texto puede influir en la creación de una página de destino:
El lado izquierdo muestra un resumen del viaje que Dropbox quiere llevar a sus usuarios. La derecha es la interfaz de usuario final que ha diseñado Dropbox, que muestra cómo la historia de la izquierda puede moldear su creación. La forma en que las imágenes y los botones colocados en la interfaz de usuario no son aleatorios, sino guiados por el contenido.
- 📝 Dibujar con palabras
Biz Sanford ofrece un enfoque similar cuando se trabaja con tipos de páginas «estáticas», como páginas de destino o de venta. Ella lo describe como «dibujar con palabras» y también promueve el uso de contenido descriptivo simple para definir los diseños de las páginas de destino:
No sería capaz de esbozar el diseño de una página de venta para Shopify Payments si no supiera cuántos beneficios para el cliente quiero incluir. ¿Debo tener 3 cajas o 4? ¿Cuánto espacio ocuparán? ¿Necesitan ilustraciones correspondientes? No puedo responder a estas preguntas a menos que use contenido real.
Esencialmente, podemos ver que es importante asegurarse de que el contenido esté pensado y priorizado antes de determinar el diseño de una interfaz de usuario.
En la estructura alámbrica a la derecha de la imagen de arriba, la cantidad y el tipo de elementos utilizados en la interfaz de usuario se basan en contenido específico. El resultado es que la sección superior (debajo del título) se muestra como una cuadrícula de 4 elementos en lugar de una fila de 3 (como se muestra en la estructura alámbrica menos precisa a la izquierda). Al definir claramente cada elemento en lugar de estimar, se pueden elegir diseños de diseño que se adapten mejor a su contenido.
Sin embargo, si queremos ir más allá de las páginas de destino estáticas, es útil un protocontenido más diverso, como el de una auditoría de contenido. Por ejemplo, cuando los prototipos se componen de muchos componentes de interfaz de usuario para acomodar diferentes tipos de información, puede ser tentador usar texto ficticio e imágenes de marcador de posición como sustituto del contenido real. Sin embargo, al hacerlo, se pierde el contexto de nuestros prototipos y los diseños pueden resultar erróneos.
En la siguiente sección, veremos cómo importar proto-contenido de mayor calidad a nuestros prototipos, haciéndolos más efectivos para recopilar comentarios y dirigir nuestros diseños con contenido.
Reemplazo de Lorem Ipsum
Adobe XD es nuestra herramienta preferida, ya que proporciona una forma flexible y rápida de importar grandes cantidades de contenido en prototipos, lo que facilita la inclusión de información relevante en cada paso del camino. Después de asignar campos de nuestro proto-contenido a elementos en una interfaz de usuario, podemos usar XD para escalar rápidamente ese contenido en nuestros diseños, manteniendo un contexto realista.
Esto no solo ayuda a priorizar la información, sino que también reduce el uso de contenido ficticio e imágenes de marcador de posición, que también recomienda Sanford:
“Nunca usamos lorem ipsum en ninguna etapa del proceso de diseño. No podemos saber si estamos resolviendo el problema correcto, no podemos obtener comentarios adecuados de nuestros compañeros y no podemos probar nada con los usuarios si no hay palabras reales en nuestros diseños”.
Esencialmente, podemos ser menos propensos a problemas como este:
Una parte poderosa de XD que permite usar contenido real a escala es la función Repetir cuadrícula: aquí hay un enfoque práctico sobre cómo aprovecharlo para importar proto-contenido:
Proto-contenido fluido a través de nuestro prototipo XD
Repetir cuadrícula en XD nos permite duplicar elementos similares simplemente haciendo clic y arrastrando, permitiéndonos ver cómo los diseños escalan con el contenido:
Luego podemos hacer fluir nuestro protocontenido a través de cada una de las instancias repetidas creadas. Por ejemplo, si tiene una colección de 20 títulos, a cada elemento de la cuadrícula se le puede asignar rápidamente un título.
Lo mismo ocurre con las imágenes, lo que te permite agregar contexto a tus wireframes con un mínimo esfuerzo:
Es evidente que el contexto que proporciona el contenido realista nos mantiene mejor informados a la hora de diseñar, y también puede dar lugar a cambios en el diseño. En tales casos, también es rápido realizar modificaciones en los diseños usando XD.
Los beneficios de trabajar con contenido en XD son claros, pero para aprovecharlos como se muestra arriba, primero se debe preparar el proto-contenido para XD.
Preparando proto-contenido para XD.
A menudo, el proto-contenido, como los datos de auditoría de contenido, se guarda en una hoja de cálculo. Sin embargo, al importarlo a XD, el contenido debe tener la forma de un archivo de texto con cada parte del contenido en una línea diferente. Pasar de la hoja de cálculo a XD es posible en 2 pasos rápidos y sencillos:
1. Abra su hoja de cálculo y resalte una columna de información, como los «títulos» de los artículos.
2. Copie y pegue el contenido seleccionado en un archivo de texto. El contenido se pegará automáticamente en líneas separadas, lo cual es perfecto para importar a XD.
Al guardar el archivo de texto, puede arrastrarlo a su cuadrícula de repetición y completar cada elemento como se muestra anteriormente. ¡Ahora nuestro proto-contenido es mucho más usable!
Contenido alternativo.
Un conjunto de protocontenido no siempre es suficiente. Otro beneficio de usar XD es que hay poca sobrecarga para experimentar con diferentes conjuntos de contenido, lo cual es necesario a veces:
“No se conformaría con un diseño sin explorar algunas alternativas, así que asegúrese de probar diferentes soluciones de texto antes de decidir qué dirección es la mejor”. – Socio de Google Ventures, John Zeratsky
Además, en el caso de que realmente no tenga ningún proto-contenido, puede generar datos de muestra formateados para XD utilizando esta herramienta, repeatgrid.com. Cualquier cosa que pueda proporcionar contexto es mejor que lorem ipsum.
Por lo tanto, diseñar el contenido primero ayuda a evitar que nuestros diseños se rompan después de que se hayan enviado, ya que se pueden evitar las limitaciones de diseño impuestas por el contenido del marcador de posición y los elementos de interfaz de usuario innecesarios.
- Las limitaciones de diseño consisten en áreas donde nuestro contenido no se ajusta al diseño: tal vez un título solo puede abarcar 1 línea; o las descripciones de más de 2 líneas se truncan.
- Los elementos de interfaz de usuario redundantes también surgen cuando el diseño de un diseño se diseña antes de que llegue el contenido. Por ejemplo, un diseño puede contener elementos de tarjetas con espacios para imágenes y etiquetas, cuando estos elementos en realidad no existen en nuestro contenido.
Como hemos visto en esta sección, ambos problemas se pueden reducir en gran medida al crear prototipos con contenido real.
Inténtalo tú mismo
En general, diseñar el contenido primero nos ayuda a comprender qué información se incluirá realmente en un diseño y, al hacerlo, identificar elementos de contenido que se pueden asignar a los componentes de la interfaz de usuario. Esto garantiza que la información más importante para los objetivos de un usuario pueda priorizarse en nuestros diseños.
Vimos esto cuando usamos contenido para guiar nuestros diseños de baja fidelidad, y luego nuevamente cuando usamos proto-contenido para potenciar nuestros prototipos XD, manteniendo el contenido como la fuerza guía de nuestros diseños a medida que escalan. Sin embargo, en el futuro, es importante considerar cómo el contenido puede afectar la relación entre las diferentes páginas y el flujo más grande de un sitio, que incluye:
- Sitio de navegación
- Botón de texto
- Mensajes de confirmación
- Error de mensajes
Un análisis exhaustivo del contenido desde el principio puede ayudar a dar forma a todos los puntos de contacto en un producto, haciendo que la información sea más accesible en un producto final. Porque al final del día, la web es esencialmente un medio para que compartamos y leamos las historias y los mensajes de los demás. O como dice Dan Mall, director creativo de Superfriendly:
“Como industria, vendemos sitios web como pinturas. En cambio, deberíamos vender un acceso hermoso y fácil al contenido, independientemente del dispositivo, el tamaño de la pantalla o el contexto”.
