Semana 1: creación de esquemas de página y guiones gráficos.

El primer paso es aprender a

usar los resultados de las investigaciones para determinar la ideación durante el proceso de
diseño. A continuación, crearás dos tipos de guiones gráficos: de panorama general y de primer
plano. Luego, dibujarás tus primeros esquemas de página y explorarás los beneficios de crearlos.
Ten en cuenta que, en este punto del proceso de diseño, debes tener muchas ideas de diseños que
aborden las necesidades reales del usuario. Debes refinar esas ideas y crear esquemas de página
puede ayudarte a hacerlo.

Semana 2: creación de esquemas de página digitales y en papel. Esta es una parte del curso
muy activa, en la que dibujarás esquemas de página para una aplicación móvil. Primero, dibujarás
muchos esquemas de página en papel. Luego, pasarás a esquemas de página digitales en la
herramienta de diseño Figma. Incluso aprenderás directamente de los creadores de Figma sobre
cómo usar mejor la herramienta. Finalmente, aplicarás los principios de la Gestalt, como similitud,
proximidad y región común, a tus esquemas de página.

Semana 3: creación de prototipos de baja fidelidad. Has visto las primeras tres etapas del
proceso de diseño: empatizar, definir e idear. Ahora, verás la cuarta etapa del proceso de diseño:
hacer un prototipo. Primero, crearás un prototipo en papel de tu aplicación móvil. Luego, pasarás
a crear un prototipo digital de baja fidelidad en Figma. Además, explorarás formas de reconocer
posibles sesgos en tus diseños y aprenderás a evitar patrones engañosos.

Proyecto de portfolio

A medida que avances en este programa de certificación, crearás proyectos para incluirlos en tu
portfolio profesional y mostrarlos a posibles empleadores. En este curso, seguirás desarrollando
los diseños para una aplicación móvil según la consigna de proyecto elegida en el curso anterior.
Por ejemplo, si, en el curso anterior, elegiste una consigna para diseñar una aplicación para tu
restaurante de hamburguesas local, pasarás al proceso de diseño de este mismo proyecto.

 En el curso 2, aprendiste a empatizar con los usuarios potenciales y a definir las

necesidades de los usuarios.
 Ahora, en el curso 3, idearás soluciones que aborden las necesidades de los usuarios.
Crearás esquemas de página y un prototipo de baja fidelidad de tu aplicación.
 Más adelante, en el curso 4, planificarás y llevarás a cabo una investigación para probar
tus diseños y obtener retroalimentación de los usuarios.
 Finalmente, en el curso 5, crearás bocetos y un prototipo de alta fidelidad de tu aplicación
y llevarás a cabo una segunda ronda de pruebas con el usuario.

Al final, todo lo que crees en los cursos de este programa se incluirá en tu portfolio en línea. Tomar
los cursos de este programa de certificación en orden te permitirá seguir los pasos del proceso de
diseño y terminar todo lo que deberás incluir en tu portfolio. ¡Buena suerte!
Opcional: lee esto si es tu primer curso del programa de certificación
Si este es tu primer curso del Certificado de diseño de UX de Google, ¡bienvenido! Esta lectura te
proporcionará la información necesaria para decidir si debes continuar en este curso o comenzar con
un curso anterior del programa.

Este es el tercero de siete cursos del programa de certificación. El contenido y los proyectos de cada
curso del programa se basan en la información presentada en los cursos anteriores. Para obtener la
mejor experiencia de aprendizaje, debes realizar los dos cursos anteriores de este programa de
certificación antes de realizar este tercer curso.

 Curso 1: Aspectos básicos del diseño de la experiencia del usuario (UX)

 Curso 2: Primeros pasos en el proceso de diseño de UX: Empatizar, definir e idear

Ten en cuenta que, si deseas obtener el Certificado de diseño de UX de Google, debes realizar todas las
actividades con calificación de todos los cursos del programa del certificado y obtener una puntuación
del 80 % o más. Las actividades con calificación se encuentran al final de cada semana y se indican con
el nombre “desafío semanal”.

Pon a prueba tu conocimiento de los conceptos enseñados en los cursos anteriores.

Si eliges inscribirte en este tercer curso del certificado de diseño de UX de Google sin haber realizado
los dos cursos anteriores, debes realizar el cuestionario opcional que sigue a esta lectura. El
cuestionario pondrá a prueba tu conocimiento del contenido enseñado en los anteriores cursos del
programa de certificación.

Después del cuestionario, hay una lectura que explicará tu puntuación. La lectura te ayudará a
comprender si tienes los conocimientos necesarios para tener éxito en este curso o si debes realizar los
cursos anteriores del programa de certificación y avanzar hasta llegar a este curso.

Diseña una aplicación móvil

En este curso, diseñarás esquemas de página y prototipos para una aplicación móvil. Los alumnos que
han tomado los cursos de este programa de certificación en orden ya eligieron una consigna de
proyecto en el curso anterior del programa y seguirán desarrollando ese proyecto de diseño en este
curso. Sin embargo, si este es tu primer curso del programa, tienes dos formas de elegir una consigna
de proyecto: usando un generador de consignas o creándola a partir de los materiales de inicio. A
continuación, encontrarás más información sobre cada opción.

Elige una consigna usando Sharpen

Sharpen es una herramienta en línea que crea consignas de diseño aleatorias. Usar una consigna de
diseño es una excelente manera para que los diseñadores emergentes, como tú, se inicien en el campo.
¿Por qué? Bueno, la consigna que elijas para el proyecto de este curso tiene un estilo similar a las
consignas que te pedirán en las entrevistas de trabajo reales.

Para este proyecto del Certificado de diseño de UX de Google, puedes elegir de una lista personalizada
de decenas de miles de consignas únicas en Sharpen. Tu primer proyecto se centrará en el diseño de
una aplicación móvil y el generador de consignas da muchas ideas entre las que elegir.

Consulta el Certificado de diseño de UX de Google: generador de consignas del proyecto 1. Para

producir una consigna, haz clic en el botón “Nuevo desafío” para generar consignas de proyecto y
actualiza la consigna la cantidad de veces que quieras hasta encontrar una que haga fluir tu energía
creativa. Cuando encuentres una consigna que te guste, toma una captura de pantalla o anótala.
Deberás enviar la consigna que elegiste en un cuestionario próximo.
Si ya tienes una idea para un proyecto de diseño en mente, tendrás la oportunidad de trabajar en el
proyecto de tu elección en el curso 7 del programa de certificación. Para este primer proyecto, usa una
consigna de Sharpen para asegurarte de que tu proyecto tenga un alcance adecuado y se alinee con el
material presentado en el curso.

Después de elegir una consigna de proyecto, debes ponerte al día con la situación en la que se
encuentran los alumnos del programa de certificación en el proceso de diseño. Dado que este es el
tercer curso del programa de certificación, ¡tienes mucho camino por recorrer! Debes realizar
entrevistas a los usuarios, desarrollar personas, crear historias de usuarios y desarrollar mapas de
recorrido del usuario antes de continuar con este curso. Si no estás familiarizado con alguno de estos
temas, realiza los dos primeros cursos del programa de certificación, cuyos vínculos se encuentran al
inicio de esta lectura.

Construye a partir de materiales de inicio

Como alternativa, si quieres realizar únicamente este curso del programa de certificación, puedes usar
materiales de inicio preparados. Los materiales de inicio consisten en diseños creados por el equipo de
Google en línea con las actividades de los cursos anteriores del programa de certificación. En otras
palabras, puedes realizar este curso según un ejemplo de una persona, una historia del usuario y un
mapa del recorrido del usuario si no quieres crear tu propio proyecto de portfolio. Para comenzar,
sigue el enlace a los materiales de inicio del curso 3.

Si, en este curso, creas tu proyecto a partir de los materiales de inicio proporcionados, no podrás
incluir los diseños en tu portfolio profesional. Usar los materiales de inicio es útil si solo quieres
aprender los conceptos enseñados en este curso: dibujar guiones gráficos, crear esquemas de página
digitales y en papel, y desarrollar prototipos en papel y digitales en Figma.

Independientemente de la forma en que decidas diseñar una aplicación móvil, estamos encantados de
contar contigo en tu recorrido por este curso. ¡Anímate y empieza!

Opcional: obtén más información sobre la manera en que la investigación determina la ideación

¡Pensar ideas para el diseño de tu producto no es un proceso aleatorio ni misterioso! Los diseños que
crees contarán con el respaldo de la investigación, la retroalimentación de las entrevistas a los
usuarios y los aprendizajes a partir de las observaciones. Todos los diseñadores tienen suposiciones
sobre los usuarios y lo que creen que es importante o desafiante para esos usuarios. Estas suposiciones
suelen basarse en las propias necesidades y experiencias del diseñador. Sin embargo, para generar
ideas de diseños que satisfagan las necesidades específicas de los usuarios, los diseños deben basarse
en información proveniente de la investigación real sobre el usuario, no en suposiciones.
Tras empatizar con los usuarios y definir los problemas a los que se enfrentan, estarás listo para la
tercera etapa del proceso de diseño: idear. Tu objetivo es generar la mayor cantidad posible de ideas
para posibles soluciones a los problemas del usuario que has identificado. Para ello, debes probar
varias técnicas de ideación y estar preparado para realizar varias sesiones de ideación. No es necesario
que todas tus ideas sean geniales; ¡al final, no terminarás usando todas! Por el contrario, la ideación
requiere que desafíes tus límites creativos e intentes pensar en nuevas perspectivas para tu enfoque de
diseño. Entonces, ¡no existen límites!

Al principio del curso, usaste cuatro herramientas (mapas de empatía, personas, historias del usuarios
y mapas del recorrido del usuario) para ayudar a comprender en mayor profundidad las necesidades
de los usuarios. Todas estas herramientas determinaron la creación de un planteamiento del problema
y guiarán tu proceso de ideación en el futuro. A modo de recordatorio:

 Los mapas de empatía exploran las cuatro motivaciones principales de los usuarios: lo que el
usuario dice, piensa, hace y siente. La información recopilada a partir de los mapas de empatía
te ayuda a generar ideas para soluciones que aborden los problemas reales del usuario.
 Las personas colocan a los usuarios para quienes diseñas en el primer plano. Al crear perfiles
de usuario detallados, puedes visualizar con claridad a los usuarios potenciales para los que
diseñarías.
 Las historias del usuario determinan qué necesidades de los usuarios son las más
fundamentales para abordar con tus diseños. Esta dirección te ayudará a enfocar tu ideación.
 Los recorridos del usuario te ayudan a generar ideas para diseños que realmente respalden
las necesidades de los usuarios y resuelvan sus problemas.
 Un planteamiento del problema es una descripción clara de una necesidad del usuario que
debe abordarse. El planteamiento del problema que creaste en el último curso guiará el
enfoque de tu ideación.

La investigación de los usuarios proporciona información sobre cómo se comportan los usuarios, cómo
es su experiencia o cómo piensan acerca de un producto, entre otros. Independientemente de que
realices la investigación del usuario tú mismo o con la ayuda de un investigador en UX designado, los
hallazgos de la investigación te ayudarán a comprender cómo diseñar el producto en función de lo que
los usuarios realmente necesitan. Como diseñadores de UX, los usuarios son siempre nuestra
prioridad, por lo que el uso de los hallazgos de las investigaciones puede contribuir en gran medida a
determinar el proceso de ideación.

¿Quieres aprender más sobre el vínculo entre la investigación y la ideación? Consulta este artículo
sobre la ideación de desafíos cotidianos de diseño de Nielsen Norman Group.

Revisar los planteamientos del problema

Mientras en este curso te preparas para crear guiones gráficos y esquemas de página, debes asegurarte
de haber definido un planteamiento del problema para tu aplicación móvil. Como recordatorio, un
planteamiento del problema es una descripción clara de una necesidad del usuario que debe
abordarse. Un planteamiento del problema sólido determinará todo el proceso de diseño, por lo que
es importante hacerlo bien desde el principio del proyecto.

Un planteamiento del problema incluye el nombre de un usuario ficticio, las características, sus
necesidades y una perspectiva clave obtenida a partir de la investigación. Puedes usar esta plantilla
para crear un planteamiento del problema:

[Nombre de usuario] es un/a [característica del usuario] que necesita [necesidad del usuario] porque
[idea].
Con esta plantilla en mente, es posible que aún te preguntes lo siguiente: ¿cómo creo un
planteamiento del problema para mi propio proyecto? Elaboremos un planteamiento del problema
ahora mismo con esta plantilla y un ejemplo real.

Ten en cuenta este escenario: como propietario de una nueva empresa de construcción, Sawyer busca
formas de establecer contactos con otros profesionales del sector. Creen que la creación de redes
puede hacerles conseguir más clientes y ayudarlos a aprender de los propietarios de empresas de
construcción con más experiencia. Para crear estas redes, Sawyer quiere investigar todas las
conferencias comerciales de su área local.

Con Sawyer y sus necesidades en mente, usaremos la plantilla para crear un planteamiento del
problema.

[Sawyer] es un [propietario de una empresa de construcción] que necesita [asistir a conferencias

comerciales locales] porque [necesita crear redes para conseguir más clientes].

Y ahí lo tienes: ¡un planteamiento del problema! Este planteamiento del problema establece
claramente la información que necesitamos saber sobre quién es el usuario y cómo nuestro diseño
podría ayudarlo a resolver su problema. A medida que empieces a generar ideas y crear esquemas de
página para los diseños de tu aplicación, continúa revisando los planteamientos del problema que has
creado, de modo que tus diseños aborden las necesidades importantes de los usuarios.

Obtén más información sobre las declaraciones de metas

Es hora de fusionar la información de los mapas de empatía, las personas, las historias del usuario y los
mapas de recorrido del usuario para crear un alcance específico para tus diseños. Pasarás del
problema al que se enfrenta el usuario a la solución que podemos crear como diseñadores de UX. Para
enfocar el alcance de tus diseños, crearás una declaración de metas.

Una declaración de metas es una o dos oraciones que describen un producto y sus beneficios para el
usuario. En otras palabras, la declaración de metas proporciona la solución ideal para tu desafío de
diseño. Las declaraciones de metas incluyen a quién servirá el producto, qué hará el producto y por
qué el producto resuelve la necesidad del usuario.

Analicemos cómo puedes crear una declaración de metas para tu propio proyecto de diseño.

1. Revisa tu planteamiento del problema.

Debes comprender el problema al que se enfrentan los usuarios antes de poder diseñar una solución
para abordar ese problema. Como recordatorio: esta es la plantilla que puedes usar para crear un
planteamiento del problema:

[Nombre de usuario] es un/a [características del usuario] que necesita [necesidad del usuario] porque
[idea].

A continuación, se muestra un ejemplo de un planteamiento del problema anterior del programa de

certificación que quizás recuerdes:

[Sawyer] es un [propietario de una empresa de construcción] que necesita [asistir a conferencias

comerciales locales] porque necesita [crear redes para conseguir más clientes].

Si no creaste un planteamiento del problema, aún puedes obtener las respuestas que necesitas para
crear una declaración de metas. Puedes incluir quién, qué y por qué en tu declaración de metas de
varias otras partes de la investigación y el trabajo que realizaste hasta la fecha. Puedes encontrar el
quién usando la información de tu persona. La historia del usuario puede proporcionar el qué. Y el
mapa de empatía y los mapas del recorrido del usuario te ayudarán a responder por qué.

2. Transición de la identificación del problema a la definición de la meta.

A esta altura, es hora de pasar del problema al que se enfrentan los usuarios a la solución que podemos
diseñar para satisfacer sus necesidades. Este puede ser un objetivo único y específico, o una idea
mayor que hayas elegido para que sea el foco de tu diseño.

Recuerda que la declaración de metas debe ser solo una o dos oraciones que describan el producto y
sus beneficios para el usuario. Tu declaración de metas debe abordar el problema que identificaste
anteriormente en el planteamiento del problema. Una declaración de metas sólida:

 Describe una acción específica que los usuarios pueden realizar o lo que hará el producto.
 Define a quién afectará la acción.
 Indica el impacto positivo de la acción o por qué el producto resuelve la necesidad del usuario.
 Describe el éxito en términos mensurables.

Para crear una declaración de metas, puedes completar esta plantilla:

Nuestro [producto] permitirá a los usuarios [realizar acciones específicas], lo que afectará a [describe a
quién afectará la acción] al [describe cómo la acción lo afectará positivamente]. Mediremos la eficacia
[describe cómo medirás el impacto].

Con esta plantilla, podemos escribir rápidamente una declaración de metas que aborde el problema
del usuario identificado en el planteamiento del problema anterior:

Nuestra [aplicación de conferencias comerciales] permitirá a los usuarios [expandir su empresa], lo

que afectará [la forma en que los dueños de empresas se conectan con sus nuevos clientes] al [darles la
posibilidad de conectarse con clientes en espectáculos comerciales locales]. Mediremos la eficacia
[analizando la asistencia al espectáculo].

¡Eso es todo! Ahora sabes cómo crear una gran declaración de metas. Con un poco de práctica, podrás
escribir declaraciones de metas que guíen con confianza el proceso de desarrollo del producto.

1.
Pregunta 1

En esta actividad, elaborarás una declaración de metas basada en tu declaración del problema para el
escenario de CoffeeHouse. Esta será una buena práctica para elaborar declaraciones de metas para tus
proyectos de portfolio en actividades posteriores del curso.

Este ejercicio te ayudará a reconocer cómo las declaraciones de metas ofrecen soluciones ideales para
tus diseños. Una declaración de metas está formada por una o dos frases que describen un producto y
sus beneficios para el usuario. Tu declaración de metas aborda un problema que identificaste en la
declaración del problema anterior. Una declaración de metas sólida:

 Describe una acción específica que pueden realizar tus usuarios.

 Define a quién afectará la acción (p. ej., tus usuarios).
  Declara el impacto positivo de la acción.
 Describe cómo se ve el éxito en términos medibles.

Después de completar esta actividad, tendrás la oportunidad de comparar tu trabajo con un ejemplar
completado en el siguiente elemento del curso.

Paso 1: Acceder a la plantilla de declaración de metas

Para utilizar la plantilla de este elemento del curso, haz clic en el enlace a continuación y selecciona
“Usar plantilla”.

Enlace a la plantilla: plantilla de declaración de metas.

Si no tienes una cuenta de Google, puedes descargar la plantilla directamente desde el siguiente
archivo adjunto.

Paso 2: Revisar la declaración del problema

Para este ejercicio, crearás una declaración de metas que presente una solución al siguiente escenario
problemático: Anika es una pasante de marketing que necesita una forma más rápida y colaborativa de
tomar muchos pedidos de café de sus compañeros de trabajo a la vez porque tomar pedidos individuales
lleva demasiado tiempo y ella no puede aprovechar bien su tiempo. Revisa la declaración del problema
anterior. También puedes revisar las notas de ideas anteriores en el curso para ayudarte a elaborar tu
declaración de metas.

Paso 3: Formular una declaración de metas

Elabora una declaración de metas utilizando la plantilla. Una declaración de metas se puede escribir
con esta fórmula sencilla:

1. Comienza con tu producto. Esto puede ser una aplicación, un objeto o cualquier otra cosa.
2. Describe la acción específica que tu producto permite que los usuarios realicen.
3. Describe a quién afectará principalmente la acción. Este podría ser el propio usuario.
4. Describe cómo la acción afectará positivamente a esa persona.
 5. Describe cómo medirás la eficacia de la acción.

Si necesitas ayuda para identificar estos atributos de tu declaración de metas: quién puede provenir de
la persona, qué podría provenir de la historia del usuario y el por qué puede provenir del mapa de
empatía y de los mapas de recorrido del usuario que ha aplicado a este problema en el pasado.
También puedes utilizar la información proporcionada únicamente en el escenario del problema.

Paso 4: Reflexionar sobre la finalización de esta actividad

Tu declaración de metas:

 ¿Identifica tu producto?
 ¿Describe la acción específica que tu producto permitirá realizar a los usuarios?
 ¿Describe a quién afectará principalmente la acción?
 ¿Describe cómo la acción afectará positivamente a esa persona?
 ¿Describe cómo medirás la eficacia de la acción?

Ejemplo de la actividad: elaborar una declaración de metas

Aquí hay un ejemplo completo de una declaración de metas creada, junto con una explicación de por
qué el ejemplo cumple los requisitos de la actividad anterior.

Ejemplo

Para este ejemplo, usaremos un escenario del problema para CoffeeHouse y examinaremos una
solución de declaración de metas. Nuestro planteamiento del problema es el siguiente: Anika es una
pasante de marketing atareada que necesita una forma más rápida y colaborativa de tomar muchos
pedidos de café a la vez porque tomar pedidos individuales lleva demasiado tiempo y no se aprovecha
bien su tiempo. Recuerda que el problema se define en el planteamiento del problema y la solución se
enumera en la declaración de metas. Nuestra solución de declaración de metas para el problema de
Anika es la siguiente:

Nuestra [aplicación CoffeeHouse] permitirá a los usuarios [realizar pedidos grupales por adelantado], lo
que afectará a [los usuarios que tienen que hacer y recoger pedidos grandes] al [permitir que salteen la
fila de pedidos de la tienda y ahorrarles tiempo]. Mediremos la eficacia [haciendo un seguimiento de los
pedidos de más de cinco artículos realizados a través de la aplicación].

Evaluación

La declaración de la meta es la siguiente: “Laaplicación CoffeeHouse permitirá a los usuarios realizar

pedidos grupales por adelantado, lo que afectará a los usuarios que tienen que hacer y recoger
pedidos grandes al permitir que salteen la fila de pedidos en la tienda y ahorrarles tiempo. Mediremos
la eficacia haciendo un seguimiento de los pedidos de más de cinco artículos realizados a través de la
aplicación”. Esta fue una declaración de metas exitosa por lo siguiente:

 Identificó el producto como una aplicación que se creará.

 Definió la acción que el producto permite que las personas realicen, que consiste en realizar
pedidos grupales con anticipación.
 Indicó a quién afectará la acción, que son las personas que necesitan hacer y recoger pedidos
grandes.
 Describió cómo les afectará la acción, al saltear la fila y ahorrarles tiempo.
 Definió cómo se medirá la eficacia de la aplicación, haciendo un seguimiento de los pedidos
realizados a través de la aplicación.

Ahora compara la declaración de la meta anterior con la declaración de la meta de CoffeeHouse que
creaste. ¿Cumplió los cinco criterios de una declaración de metas exitosa?

Si cumpliste cada uno de los cinco criterios, ¡buen trabajo! Si hay criterios que no cumpliste, estas son
las áreas en las que puedes mejorar tu declaración de metas. ¡Regresa e intenta volver a escribir tus
declaraciones de metas teniendo en cuenta estos criterios!

1.
Pregunta 1

Ahora que ya practicaste cómo construir una declaración de metas, esta actividad te ayudará a crear
una declaración de metas para tu proyecto de portfolio. Recuerda que una declaración de metas está
formada por una o dos frases que describen un producto y sus beneficios para el usuario. Tu
declaración de metas del proyecto de portfolio debe:

 describir una acción específica que pueden realizar tus usuarios;

 definir a quién afectará la acción (por ejemplo, tus usuarios);
 declarar el impacto positivo de la acción;
 resumir lo que significa el éxito en términos medibles.

Paso 1: Acceder a la plantilla de declaración de metas

Para utilizar la plantilla de este elemento del curso, haz clic en el enlace a continuación y selecciona
“Usar plantilla”.

Enlace a la plantilla: plantilla de declaración de metas.

Si no tienes una cuenta de Google, puedes descargar la plantilla directamente desde el siguiente
archivo adjunto.
Paso 2: Elegir un problema o una oportunidad que hayas identificado para tu proyecto de
portfolio

Para este ejercicio, vas a escribir una declaración de metas basada en la declaración del problema que
creaste para el proyecto de portfolio en la actividad Construir una declaración de problema para tu
proyecto de portfolio en el Curso 2 del programa certificado. La declaración de metas debe estar
relacionada con la consigna de Sharpen que has desarrollado a lo largo del curso. Revisa la declaración
del problema que escribiste anteriormente para tu proyecto de portfolio. También puedes revisar las
notas de ideas anteriores en el curso para ayudarte a elaborar tu declaración de metas.

Paso 3: Formular una declaración de metas

Completa una declaración de metas utilizando la plantilla. Una declaración de metas se puede escribir
con esta fórmula sencilla:

6. Comienza con tu producto. Esto puede ser una aplicación, un objeto o cualquier otra cosa.
7. Describe la acción específica que tu producto permite que los usuarios realicen.
8. Describe a quién afectará principalmente la acción. Estos podrían ser los propios usuarios.
9. Describe cómo la acción afectará positivamente a esa persona.
10. Describe cómo medirás la eficacia de la acción.

Paso 4: Reflexionar sobre la finalización de esta actividad

Tu declaración de metas:

 ¿Identifica tu producto?
 ¿Describe la acción específica que tu producto permitirá realizar a los usuarios?
 ¿Describe a quién afectará principalmente la acción?
 ¿Describe cómo la acción afectará positivamente a esa persona?
 ¿Describe cómo medirás la eficacia de la acción?

Define un flujo de usuarios

Diseñar un producto eficaz requiere una comprensión total de los usuarios y sus necesidades. Hay
muchas cosas que puedes hacer si conoces a las personas para las que diseñas. ¡Incluso puedes
predecir las necesidades de los usuarios antes de que ellos mismos sepan lo que quieren o necesitan!

Un ejemplo de predicción de las necesidades de los usuarios es el proceso que ocurre cuando pides
comida en un restaurante. El cajero hace preguntas sobre los condimentos para tu hamburguesa, si
quieres una guarnición de papas fritas y si quieres beber agua o refresco. El cajero prevé tus
necesidades como usuario y las satisface, posiblemente antes de que tú mismo las reconozcas.
Como diseñador de UX, puedes prever las necesidades del usuario al interactuar con tu producto. Una
forma clara y sencilla de definir este proceso es creando un flujo de usuarios. Un flujo de usuarios es el
recorrido que realiza un usuario típico en una aplicación o un sitio web para poder realizar una tarea de
principio a fin.

Los diseñadores de UX suelen definir el flujo de usuarios antes de comenzar a diseñar porque puede
ayudar a imaginar cómo se moverán los usuarios en la aplicación o el sitio web. En otras palabras,
antes de diseñar las pantallas de una aplicación, debes comprender cómo los usuarios pueden
moverse de manera eficaz en la aplicación en general. Debes determinar lo siguiente:

 ¿Qué acciones realizarán los usuarios en la aplicación?

 ¿Qué decisiones tomarán los usuarios?
 ¿Qué pantallas usarán los usuarios después de actuar o tomar una decisión?

Dibujar un flujo de usuarios

Los diseñadores de UX con frecuencia definen los flujos de usuarios con formas comunes: círculos,
rectángulos, diamantes y líneas con flechas. Cada forma representa una interacción que el usuario
tendrá con el producto que diseñas. Asignar una forma diferente a cada interacción hace que el flujo de
usuarios sea claro para todos los miembro del equipo involucrados en la creación del producto.

Acción: para representar las acciones que realizan los usuarios cuando se mueven por el diseño de un
producto, se usan círculos. En otras palabras, los círculos muestran los pasos que se deben seguir para
realizar una tarea de principio a fin. Para el flujo de usuarios de una aplicación de paseadores de
perros, las acciones pueden incluir abrir la aplicación, hacer clic en el perfil de un paseador de perros y
reservar un paseador de perros.

Pantalla: para representar las pantallas de un producto digital que los usuarios usarán mientras
realizan tareas, se usan rectángulos. Para el flujo de usuarios de una aplicación de paseadores de
perros, las pantallas podrían incluir una página de inicio o una página de confirmación de reserva.

Decisión: los diamantes representan puntos en el flujo de usuarios donde los usuarios deben hacer
una pregunta y tomar una decisión. La decisión que tomen los usuarios los hará avanzar por el flujo o
retroceder a una parte anterior del flujo. Para el flujo de usuarios de una aplicación de paseadores de
perros, una decisión podría ser elegir si se reserva o no el paseador de perros cuyo perfil se está
revisando.

Dirección del flujo de usuarios: las líneas con flechas unen todo y muestran el flujo de información.
Las líneas continuas indican la dirección hacia adelante por el flujo de usuarios y las líneas punteadas
indican la dirección hacia atrás o el regreso a una página anterior.

Ejemplo de flujo de usuarios

Para aplicar estos conceptos a un producto real, consulta un ejemplo de flujo de usuarios a
continuación para la aplicación de paseadores de perros mencionada durante este programa de
certificación.

El flujo de usuarios comienza con la entrada de un usuario a la aplicación y continúa hasta la

confirmación de su cita con un paseador de perros. Este flujo de usuarios prevé la necesidad del
usuario de explorar varios perfiles de paseadores de perros antes de elegir al paseador adecuado.

Como diseñador, debes tener en cuenta todo el recorrido que realizan los usuarios para obtener lo que
necesitan del producto. A medida que creas tu propio flujo de usuarios, consulta el planteamiento del
problema que desarrollaste para asegurarte de que tus diseños realmente aborden las necesidades del
usuario.

Ten en cuenta que el flujo de usuarios puede cambiar según las necesidades de los usuarios y sus
circunstancias. Si tu planteamiento del problema cambia, es probable que el flujo de usuarios también
deba cambiar. Por ejemplo, imagina que te enteras de que los usuarios de la aplicación de paseadores
de perros quieren consejos sobre cómo contratar paseadores de perros antes de reservar una cita. El
flujo de usuarios cambiaría al permitir que una opción se salga de este flujo de usuarios planificado
para visitar una nueva pantalla dentro de la aplicación, como se muestra a continuación. Esta pantalla
puede derivarse de la acción “leer consejos” para proporcionar información adicional sobre la reserva
de un nuevo paseador. No es necesario crear un nuevo flujo de usuarios para cada circunstancia
posible del producto, pero debes asegurarte de que el flujo de usuarios que creas se centre en las
necesidades que afrontarán la mayoría de los usuarios.
Para tu proyecto actual de este programa, diseñarás una aplicación desde cero y crearás un flujo de
usuarios completamente nuevo. Pero, en el mundo real, podrías trabajar en un producto existente con
un flujo de usuarios establecido. Para los productos existentes, crear o actualizar el flujo de usuarios
puede resultar complicado. Con una investigación exhaustiva de los usuarios, las pantallas se pueden
reorganizar, ampliar y recortar para adaptarse mejor a la forma en que los usuarios trabajan en un
producto. Independientemente de que trabajes en un producto nuevo o existente, recuerda que los
usuarios y sus necesidades deben ser la prioridad del diseño del producto.

Diseñar con conocimiento de las necesidades de los usuarios te convertirá en un mejor diseñador y
hará que los usuarios sigan comprometidos con tu producto. Crear un flujo de usuarios es un paso
sólido. Como diseñador de UX, una de tus mejores herramientas es poder definir el recorrido que harán
los usuarios para realizar una tarea en tu producto. Ahora es el momento de demostrar lo que sabes y
crear un flujo de usuarios para el diseño de tu propia aplicación. ¡Buena suerte!

1.
Pregunta 1

En esta actividad, crearás un diagrama de flujo del usuario para tu proyecto de portfolio. Como
aprendiste anteriormente, un flujo del usuario es la ruta que toma un usuario típico en una aplicación
o un sitio web para completar una tarea de principio a fin. Es importante describir los flujos del usuario
para comprender qué necesitan los usuarios cuando interactúan con tu producto.

Puedes utilizar formas comunes como círculos, rectángulos, diamantes y líneas con flechas para crear
un flujo del usuario.
Como recordatorio, aquí están las interacciones del usuario que cada forma representa:

Círculo: los círculos muestran las acciones que realizará un usuario cuando se mueva por tu diseño. En
otras palabras, los círculos muestran una tarea que se debe completar o los pasos que se deben seguir
para completar una tarea, de principio a fin.

Rectángulo: los rectángulos describen pantallas en tu producto digital, como una página de inicio o de
confirmación, que los usuarios experimentarán mientras completan las tareas.

Diamantes: los diamantes hacen una pregunta en la que el usuario debe tomar una decisión. La
decisión que tome un usuario lo moverá hacia adelante a través del flujo o hacia atrás para comenzar
el proceso nuevamente.

Líneas con flechas: las líneas con flechas unen todo y muestran el flujo de información.

Apegarse a estas formas comunes hace que sea más fácil visualizar y comunicar los pasos en los flujos
del usuario. Después de completar esta actividad, tendrás la oportunidad de comparar tu trabajo con
un modelo completado en el siguiente elemento del curso.

Paso 1: Acceder a la plantilla

Para crear un diagrama de flujo de usuarios, puedes utilizar lápiz y papel o la plantilla que se
proporciona a continuación.

Para utilizar la plantilla de este elemento del curso, haz clic en el enlace a continuación y selecciona
“Usar plantilla”.

Enlace a la plantilla: plantilla de flujo del usuario:

Si no tienes una cuenta de Google, puedes descargar la plantilla directamente desde el siguiente
archivo adjunto.

Paso 2: Decidir la tarea del usuario

Antes de crear un diagrama de flujo del usuario, debes decidir qué tarea de usuario asignar. Elige una
tarea que sea importante para la aplicación que estás diseñando. Puedes utilizar la declaración de
metas que desarrollaste en la actividad crear una declaración de metas anteriormente en el curso para
ayudar a identificar una tarea de usuario principal.

Por ejemplo, aquí está la declaración de metas del escenario CoffeeHouse:

Nuestra aplicación CoffeeHouse permitirá a los usuarios realizar pedidos grupales por adelantado, lo que
afectará a los usuarios que tienen que hacer y recoger pedidos grandes al permitir que omitan la fila de
pedidos en la tienda y ahorrarles tiempo. Mediremos la eficacia mediante el seguimiento de los pedidos
de más de 5 artículos realizados a través de la aplicación.

Con esta declaración de metas en mente, la tarea principal del usuario podría ser la siguiente:

Utilizar la aplicación Coffeehouse para realizar un pedido de café grupal de forma rápida y
sencilla.

Esto proporciona una tarea clara y los criterios de éxito para completarla. El diagrama de flujo del
usuario debe reflejar esta tarea de principio a fin.

Paso 3: Definir los pasos del flujo del usuario

Con la meta del usuario en mente, enumera los pasos para el flujo del usuario.

Comienza con el punto de entrada, que es el lugar donde los usuarios acceden inicialmente a tu
producto. Dado que estás diseñando una aplicación en este curso, el punto de entrada más probable
es abrir la aplicación desde un dispositivo como un teléfono móvil.

A continuación, enumera cada paso que daría el usuario hasta completar la tarea. La finalización de la
tarea ocurre cuando los usuarios completan con éxito su objetivo. En el ejemplo de CoffeeHouse, la
tarea se completará cuando los usuarios reciban la confirmación de su pedido.

A continuación, se muestra un ejemplo de los pasos del flujo del usuario desde el punto de entrada
hasta la finalización de la tarea para la aplicación CoffeeHouse:

11. Abrir la app

12. Pantalla de inicio
13. Buscar ubicaciones de cafés
14. Seleccionar la ubicación del café
15. ¿Pedir desde aquí? Sí o no
16. Pantalla de pedido
17. Hacer clic en el enlace para compartir el menú del café
18. ¿Enviar menú al equipo? Sí o no
19. Iniciar temporizador de pedido
20. El equipo agrega artículos al pedido
21. Vista previa del pedido
22. Ir a caja
 23. Insertar información de pago
24. ¿Confirmar pedido? Sí o no
25. Confirmación del pedido

Paso 4: Diagramar el flujo del usuario

¡Es hora de comenzar a mapear el flujo del usuario! Sigue los pasos que describiste en el Paso 3 para
crear el diagrama de flujo del usuario. Por ejemplo, la primera forma en un flujo del usuario representa
el punto de entrada de los usuarios.

Ten en cuenta que es posible que debas agregar pasos o cambiar el flujo que describiste cuando
creaste el diagrama. ¡Es totalmente normal!

Diagramemos el flujo de usuarios de la aplicación CoffeeHouse. El punto de entrada para esta

aplicación fue "Abrir la aplicación". Dibuja un círculo para representar una acción y complétalo con
una descripción de la acción, que es "Abrir la aplicación".

A continuación, dibuja una línea con una flecha que conecte este círculo con el siguiente paso en el
flujo del usuario. Para la aplicación CoffeeHouse, conecta la primera acción, "Abrir la aplicación", a un
rectángulo que represente al usuario que llega a la pantalla de inicio de la aplicación. Asegúrate de
incluir etiquetas claras y simples dentro de las formas para cada paso.

Continúa con este proceso para cada paso del flujo del usuario. Recuerda usar la forma adecuada para
indicar si los usuarios están completando una acción (círculo), aterrizando en una pantalla
(rectángulo) o tomando una decisión (diamante), y conecta cada forma con flechas.

Este es un consejo profesional rápido: No te preocupes por hacer que el flujo del usuario sea
demasiado complicado. Concéntrate en mapear la forma más rápida y sencilla de llegar desde el punto
de entrada hasta la finalización de la tarea.

Paso 5: Reflexionar sobre la finalización de esta actividad

Revisa el flujo del usuario que creaste para tu aplicación y asegúrate de seguir estas pautas:

 El flujo del usuario demuestra los pasos que siguen los usuarios para llegar desde el punto de
entrada hasta la finalización de la tarea.
 Todas las acciones están en círculos.
 Todas las pantallas están en rectángulos.
 Todas las decisiones están en diamantes.
 Cada forma está conectada por una flecha.

Paso 6: Guarda tu trabajo

A medida que completas la actividad del flujo del usuario, recuerda lo siguiente:

26. Toma fotografías o capturas de pantalla del flujo del usuario que creaste.
27. Guarda todo tu trabajo en tu computadora, en un disco duro o en una carpeta de Google Drive
para asegurarte de tener todos los recursos que necesitarás más adelante en el curso para tu
portfolio.

Ejemplo de la actividad: define el flujo de usuarios de tu aplicación

Este es un flujo de usuarios completo de la aplicación CoffeeHouse, junto con una explicación de cómo
este modelo cumple con las expectativas de la actividad.

Open app -
Home screen - Search coffee locations - select coffee location - order from here? - order screen - click link
for menu - send menu to team - start order timer - add items to order - order preview - go to checkout -
insert checkout info - confirm order - order confirmation

Evaluación del ejemplo

Autoevalúa el flujo de usuarios que creaste en la actividad usando cada uno de los siguientes criterios.

El modelo de flujo de usuario proporciona lo siguiente:

 Un flujo claro y sencillo para que los usuarios pasen del punto de entrada al abrir la aplicación
hasta la realización de la tarea de la confirmación de un pedido.
 Pasos claramente etiquetados representados con la forma adecuada.
 Líneas con flechas que conectan todos los pasos del flujo de usuarios.
Compara este modelo con el diagrama de flujo de usuarios que creaste en la actividad. ¿Qué cosas
hiciste bien? ¿En qué aspectos podrías mejorar? Mantén esta retroalimentación contigo a medida que
avances a lo largo del curso.

Obtén más información sobre la creación de guiones gráficos

En el diseño de UX, un guión gráfico es una serie de paneles o marcos que exploran y describen
visualmente la experiencia de un usuario con un producto. Contar una historia a través de
imágenes suele ser más eficaz que usar palabras.

Un producto real puede tener muchas pantallas, pero tu guión gráfico debe centrarse solo en las
partes más importantes de la experiencia de un usuario con un producto. Como sugiere su
nombre, hay un guión, una historia, que debe contarse a través de los paneles de un guión gráfico.
Los cuatro elementos claves de un guión gráfico son los siguientes:

 Personaje: indica el usuario del guión gráfico.

 Escena: ofrece a los diseñadores una forma de imaginar el entorno del usuario.
 Trama: describe la solución o el beneficio que ofrece el diseño.
 Narrativa: describe el problema al que se enfrenta el usuario y cómo el diseño resolverá
este problema.

En el diseño de UX, hay dos tipos comunes de guiones gráficos, que incorporan estos cuatro
elementos clave:

 Los guiones gráficos de panorama general se centran en lo que el usuario necesita, su

contexto y por qué el producto será útil para el usuario. Los guiones gráficos de panorama
general suelen usarse al principio del proceso de diseño cuando los diseñadores intentan
que los interesados apoyen sus ideas.
 Los guiones gráficos de primer plano se centran en el producto y la manera en que este
funciona. Es mejor usarlos a partir de la mitad hasta el final del proceso de diseño.

Exploremos cómo podemos crear cada uno de estos guiones gráficos con un ejemplo real.
Imagina este escenario: estás diseñando una aplicación llamada Bandmate para que los músicos
recluten miembros talentosos para su banda. Un usuario que puede acudir a tu aplicación en
busca de ayuda es un guitarrista de una banda de rock. Lo llamaremos Dan. El baterista de su
banda renunció repentinamente, por lo que Dan necesita encontrar un nuevo baterista.

Crea un guión gráfico de panorama general

1. Comienza con un planteamiento del problema. Esto te ayudará a establecer el personaje y
preparará la escena para tu guión gráfico.

Para este ejemplo, el planteamiento del problema podría ser el siguiente:

[Dan] es el [guitarrista principal de una banda] que necesita [contratar un nuevo baterista] porque
[tiene problemas para reemplazar al baterista anterior].

2. Crea una declaración de metas. La declaración de metas te ayuda a determinar una trama (el
beneficio o la solución de tu diseño) para tu guión gráfico.

Una declaración de metas para este ejemplo podría ser la siguiente:

Nuestra [aplicación Bandmate] permitirá a los usuarios [reclutar músicos nuevos o sustitutos], lo
que afectará a [los usuarios que necesitan nuevos miembros para su banda] al [permitirles
encontrar fácilmente músicos calificados para contratar]. Mediremos la eficacia [leyendo las
opiniones de los usuarios y haciendo un seguimiento de las contrataciones exitosas].

3. Prepara el guión gráfico. Puedes usar la plantilla de guión gráfico que se muestra en los videos
sobre la creación de guiones gráficos o puedes dibujar un esquema similar en una hoja de papel.

Para usar la plantilla de este elemento del curso, haz clic en el enlace de abajo y selecciona “Usar
plantilla”.

Enlace a la plantilla: plantilla de guión gráfico

Si no tienes una cuenta de Google, puedes descargar la plantilla directamente desde el siguiente
archivo adjunto.

UX Design Certificate - Storyboard [Template]_SPA

PPTX File

The storyboard
template. At the top of the page, there's a place to describe the scenario. On the template itself there are
spaces for images and descriptions of action.

4. Agrega el escenario del guión gráfico. Comienza a completar la plantilla del guión gráfico
agregando el escenario. En la parte superior de la plantilla, escribe una oración que establezca la
narrativa del guión gráfico. Vuelve al problema que habías planteado inicialmente y la solución de
la declaración de metas, escribe una oración breve y clara que describa al usuario y al problema
que resuelve tu diseño. Considera el resultado final que resolverá el problema del usuario.

Para este ejemplo, quieres que la aplicación Bandmate ayude a Dan a encontrar un nuevo
baterista para su banda. Entonces, el escenario en la parte superior del guión gráfico podría ser el
siguiente:

Una aplicación que permite a los usuarios reclutar músicos calificados, nuevos o sustitutos para
unirse a su banda.
5. Dibuja una idea por panel. El primer panel se usa para preparar el escenario de la historia.
Luego, con cada panel adicional, piensa en las acciones que hacen avanzar la historia y cómo se
siente el usuario en cada panel.

En el primer panel, ¿cuál es el acontecimiento que impulsa a Dan a buscar un nuevo baterista? En
este caso, el baterista de Dan renunció, por lo que necesita encontrar un baterista sustituto para
unirse a la banda.

En el segundo panel, Dan encuentra y abre una aplicación que puede ayudarlo a reclutar músicos
calificados, nuevos o sustitutos que se encuentran en su área local. Esta acción debe dibujarse en
su propio panel.

En el tercer panel, mientras se desplaza por la aplicación, Dan encuentra un baterista con
experiencia que vive cerca. Filtra por bateristas con al menos cinco años de experiencia en una
banda profesional, que tengan buenas críticas y que vivan a menos de 30 millas de su ubicación
actual.

Consejo profesional: recuerda que los guiones gráficos de panorama general se centran en la
experiencia del usuario. El guión gráfico debe mostrar cómo las personas usan tu producto y por
qué les resultará útil. Debido a que los guiones gráficos de panorama general se centran en el
usuario, es importante incluir emociones usando una cara triste o feliz, por ejemplo, en diferentes
pasos del recorrido para hacer que el guión gráfico se sienta humano y demuestre empatía.

6. Expón los puntos débiles del usuario a lo largo de su recorrido. Dan tuvo una mala
experiencia en el pasado cuando contrató a un teclista para la banda que resultó no estar
calificado. Mientras usa esta nueva aplicación, Dan necesita poder identificar requisitos del perfil
del músico, como la cantidad de años que ha tocado en una banda o las calificaciones que ha
recibido de otros usuarios. Dan podría sentirse un poco nervioso debido a sus malas experiencias
pasadas en la búsqueda de compañeros de banda. Esto se dibuja en el cuarto panel.

Luego, en el quinto panel, Dan elige un baterista en la aplicación y pulsa el botón “programar”
para organizar una entrevista con el posible baterista sustituto.

7. Incluye la meta o la conclusión del usuario en el último panel. En este ejemplo, la conclusión
es que un nuevo baterista se une a la banda. Dan está muy contento y su banda programa varios
conciertos. Asegúrate de incluir una emoción para demostrar cómo se siente el usuario al final de
la experiencia con tu producto. En este caso, Dan se siente emocionado y satisfecho.

¡Y eso es todo!

Llevaste al usuario, Dan, por un recorrido hasta encontrar a un nuevo baterista para su banda.
Abordaste sus puntos débiles y lo ayudaste a encontrar a un baterista calificado. Tu usuario está
encantado con la experiencia de la aplicación. Los guiones gráficos de panorama general
realmente pueden ayudarte a sumergirte en la experiencia de un usuario, lo que conduce a
mejores productos en general.

Crea un guión gráfico de primer plano

Para crear un guión gráfico de primer plano, los pasos 1 a 4 son los mismos que los del proceso del
guión gráfico de panorama general:

28. Comienza con un planteamiento del problema.

 29. Crea una declaración de metas.
30. Prepara el guión gráfico.
31. Agrega el escenario del guión gráfico.

5. Dibuja una idea por panel. Los guiones gráficos de panorama general y los guiones gráficos de
primer plano difieren en el paso cinco, cuando dibujas cada panel. Recuerda que los guiones
gráficos de panorama general se centran en el usuario, mientras que los guiones gráficos de
primer plano se centran en el producto. Para este guión gráfico de primer plano, piensa en qué
detalles del producto quieres destacar en cada panel y por qué. Debes demostrar el flujo de
usuarios dentro del producto y cómo cada acción dentro del producto conducirá a la siguiente
pantalla.

 Para comenzar, en el primer panel, el usuario abrirá su teléfono, deslizará sus

aplicaciones y pulsará el ícono de la aplicación de músicos para abrirla.
 Con frecuencia, al diseñar una aplicación, un panel de un guión gráfico de primer plano se
centrará en la manera en que un usuario comienza su recorrido al abrir la aplicación por
primera vez. Para este ejemplo de la aplicación para encontrar músicos, imaginemos que
un nuevo usuario puede crear un perfil o que un usuario existente puede iniciar sesión.
Esto aparece en el segundo panel.
 En el tercer panel, una vez que el usuario inicia sesión en la aplicación, puede comenzar a
buscar su compañero de banda. El usuario se desplaza por los perfiles de los músicos y
puede establecer filtros como el nivel de experiencia, los años que tocó, la ubicación, los
instrumentos que tocó, entre otros.
 En el cuarto panel, el usuario pulsa el botón “ver perfil” de uno de los músicos para
revisar su experiencia, sus calificaciones y su ubicación.
 Luego, una vez que el usuario encuentra a un candidato al que le interesa contactar, pulsa
el botón “enviar” para enviarle un mensaje a ese músico. El usuario puede escribir su
propio mensaje o enviar un mensaje automático que pregunta sobre la disponibilidad y si
pueden programar una conversación. También hay una opción para que el usuario
proporcione una muestra de su música al músico. Esto aparece en el quinto panel.
 Finalmente, en el sexto panel, el usuario recibe una confirmación de que se ha enviado su
mensaje y una descripción de cuáles serán los próximos pasos. El texto que aparece
debajo de la confirmación podría decir algo como: “Se envió tu mensaje a este músico”.
También habrá un botón que lo vinculará a la bandeja de entrada del usuario y otro que lo
llevará de regreso a la página de búsqueda de la que proviene.

¡Eso es todo! Ahora sabes cómo crear un guión gráfico de panorama general y de primer plano. En
la siguiente actividad, tendrás la oportunidad de crear tus propios guiones gráficos. ¡Diviértete!

1.
Pregunta 1

Esta actividad te enseñará a crear guiones gráficos para que puedas definir un flujo ideal para tus
diseños de CoffeeHouse.
Un guión gráfico es una serie de paneles o marcos que describen y exploran visualmente la
experiencia de un usuario con un producto. Piensa en el guión gráfico como una herramienta para
visualizar posibles soluciones a los problemas que enfrenta el usuario.

Hay cuatro elementos clave de un guion gráfico:

 Personaje
 Escena
 Trama
 Narrativa

El personaje de tu guión gráfico es el usuario del que trata tu historia. La escena te ayuda a imaginar el
entorno de ese usuario. La trama describe el beneficio o la solución de tu diseño. Finalmente, la
narrativa describe la necesidad o problema del usuario y cómo el diseño resolverá el problema.

En esta actividad, crearás dos guiones gráficos (uno para el panorama general y otro para el primer
plano) para el escenario de CoffeeHouse con el que has estado practicando.

En la siguiente parte del curso, podrás ver un modelo completo para compararlo con tu propio trabajo.

Puedes usar tu propio trabajo de la aplicación CoffeeHouse o los ejemplos del curso de las actividades
de la aplicación CoffeeHouse, que se pueden encontrar a continuación.

Si eliges usar los ejemplos proporcionados para crear tus guiones gráficos, a continuación, hemos
incluido enlaces a cada uno para que puedas encontrarlos fácilmente. Asegúrate de elegir solo una
persona para tus guiones gráficos.

Anika

Para ver la persona de Anika, haz clic en el enlace a continuación y selecciona «Usar plantilla».

Enlace al modelo: Persona de Anika

Si no tienes una cuenta de Google, puedes descargar la persona de Anika directamente desde el
siguiente archivo adjunto.

Para ver el mapa de recorrido del usuario de Anika, haz clic en el enlace siguiente y selecciona «Usar
plantilla».

Enlace al modelo: Mapa de recorrido del usuario de Anika

Si no tienes una cuenta de Google, puedes descargar el ejemplo del mapa de recorrido del usuario de
Anika directamente desde el archivo adjunto que aparece a continuación.

Para ver la declaración del problema de Anika, haz clic en el enlace de abajo y selecciona "Usar
plantilla".
Enlace al modelo: Declaración del problema de Anika

Si no tienes una cuenta de Google, puedes descargar la declaración del problema de Anika
directamente desde el siguiente archivo adjunto.

Ali

Para ver la persona de Ali, haz clic en el enlace de abajo y selecciona «Usar plantilla».

Enlace al modelo: La personalidad de Ali

Si no tienes una cuenta de Google, puedes descargar la persona de Ali directamente desde el siguiente
archivo adjunto.

Para ver el mapa de recorrido del usuario de Ali, haz clic en el enlace siguiente y selecciona «Usar
plantilla».

Enlace al modelo: Mapa de recorrido del usuario de Ali

Si no tienes una cuenta de Google, puedes descargar el mapa de recorrido del usuario de Ali
directamente desde el siguiente archivo adjunto.

Para ver la declaración del problema de Ali, haz clic en el enlace de abajo y selecciona "Usar plantilla".

Enlace al modelo: Declaración del problema de Ali

Si no tienes una cuenta de Google, puedes descargar la declaración del problema de Ali directamente
desde el siguiente archivo adjunto.

CoffeeHouse

Para ver la declaración de metas de CoffeeHouse completa de este elemento del curso, haz clic en el
enlace a continuación y selecciona «Usar plantilla».

Enlace al modelo: Declaración de metas de CoffeeHouse

Si no tienes una cuenta de Google, puedes descargar la plantilla directamente desde el siguiente
archivo adjunto.

Paso 1: Acceder a la plantilla

Para utilizar la plantilla de este elemento del curso, haz clic en el enlace a continuación y selecciona
“Usar plantilla”.

Enlace a la plantilla: plantilla de guion gráfico

Si no tienes una cuenta de Google, puedes descargar la plantilla directamente desde el siguiente
archivo adjunto.
Usarás la plantilla de guión gráfico para crear ambos tipos de guiones gráficos. Por lo tanto,
necesitarás dos copias de la plantilla para completar esta actividad. Usarás las plantillas para crear un
guión gráfico general y un guión gráfico de primer plano.

Puedes imprimir las plantillas de guión gráfico y completarlas con un utensilio de escritura como un
lápiz o bolígrafo, o puedes usar un programa digital. Tú eliges, pero recuerda guardar tu trabajo para
que puedas acceder a él y compartirlo.

Paso 2: Crear un guión gráfico general para el escenario de CoffeeHouse

1. Primero, necesitas una declaración del problema para identificar el personaje y la escena de tu
guión gráfico.

Ya deberías tener una declaración del problema para el escenario de CoffeeHouse que creaste en la
actividad de práctica Crear una declaración del problema y una declaración de hipótesis. También
puedes usar una de la lista de ejemplos.

2. A continuación, necesitas una declaración de metas. Puedes usar una declaración de metas que te
ayude a determinar la trama (el beneficio o la solución de tu diseño).

Ya debes haber escrito una declaración de metas para el escenario de CoffeeHouse durante la
actividad de práctica Crear una declaración de metas. También puedes usar una de la lista de
ejemplos.

3. Ahora que entiendes el personaje, la escena y la trama, comienza a completar la plantilla del guión
gráfico agregando una descripción de una oración que explique el contexto de tu historia. Para hacer
esto, agrega una oración que establezca la narrativa de tu diseño en la parte superior de la plantilla.
Esta debe ser una frase corta que nos ayude a comprender al usuario y el problema que tu diseño
resuelve para ellos.

Hemos incluido un ejemplo de un guión gráfico con un escenario de una oración, utilizando el
escenario de la banda de Dan de antes en el curso:

4. Finalmente, completa los seis paneles de la plantilla con elementos visuales que demuestren la
experiencia del usuario con tu aplicación. Cada visual debe resaltar un momento clave en el recorrido
del usuario, incluido su contexto y motivaciones, por qué quieren usar la aplicación, y la experiencia de
alto nivel de usar con éxito el servicio. (Consejo: los subtítulos son útiles para interacciones que
pueden ser difíciles de esbozar).

En este punto, tu guión gráfico debe identificar claramente el personaje, la escena, la trama y la
narrativa de la experiencia general de tu usuario. ¡Juntos, tus seis paneles contarán la historia de cómo
el usuario ha utilizado tu diseño para cumplir su objetivo!

Qué incluir en tu guión gráfico general

Recuerda centrarte en el usuario. Comunica claramente su entorno o contexto y su motivación para

usar la aplicación. Esto podría ser un punto débil percibido o una oportunidad de mercado.

Paso 3: Crear un guión gráfico en primer plano para el escenario de CoffeeHouse

El proceso para crear tu guión gráfico en primer plano implica los mismos cuatro pasos para completar
la plantilla de guión gráfico:

32. Usa tu declaración del problema de CoffeeHouse para establecer el mismo personaje y escena
para tu guión gráfico en primer plano.
33. Tu trama se basa en la misma declaración de metas.
34. ¡También puedes usar la misma declaración de escenario!
35. Esta vez, completa los seis paneles de la plantilla con imágenes y subtítulos que describan
cómo el usuario interactúa con tu diseño, la aplicación CoffeeHouse. Asegúrate de que las
imágenes y los subtítulos de tu guión gráfico de primer plano se centren en el producto. Para
cada panel, piensa en los detalles del producto que deseas resaltar y por qué. A continuación,
esboza estos detalles del producto.

Con los seis paneles de tu guión gráfico en primer plano, estás tratando de demostrar el flujo exitoso
de acciones del usuario dentro del producto y cómo cada paso conducirá al siguiente.

Mientras creas un guión gráfico en primer plano, piensa en preguntas como las siguientes:

 ¿Qué sucede en cada pantalla del producto?

 ¿Qué hace el usuario para pasar de una pantalla a otra?

Qué incluir en el guión gráfico de primer plano

Recuerda centrarte en el producto.

Tu guión gráfico en primer plano debe centrarse en la experiencia del usuario del producto,
destacando las interacciones clave como la incorporación (la primera impresión que un usuario tiene
de la aplicación), la realización de un pedido y el análisis. Indica las transiciones entre pantallas con
acciones claras que el usuario deberá realizar para completar su objetivo con éxito.

Paso 4: Guardar tu trabajo

Al completar estas actividades, recuerda:

36. Toma fotografías o capturas de pantalla del progreso que hiciste en tus guiones gráficos.
37. Guarda todo tu trabajo en tu computadora, en un disco duro o en una carpeta de Google Drive
para asegurarte de tener todos los recursos que necesitarás más adelante en el curso para tu
portfolio.

Ejemplo de la actividad: practica crear guiones gráficos

Aquí hay un modelo completo con los dos tipos de guiones gráficos según el escenario de CoffeeHouse.
Después de los ejemplos de guiones gráficos, hay una explicación de cómo el modelo cumple con las
expectativas de la actividad anterior.

Escenario: aplicación CoffeeHouse

Tanto en el caso del guión gráfico de panorama general como del guión gráfico de primer plano, la
actividad comienza con un planteamiento del problema:
Anika es una pasante de marketing muy atareada

que necesita una forma más rápida y colaborativa de tomar muchos pedidos de café a la vez

porque tomar pedidos individuales le lleva demasiado tiempo.

Este planteamiento del problema te da una idea clara del personaje de la historia. ¡Es Anika, una
pasante de marketing atareada! Este planteamiento del problema también prepara una escena para
los guiones gráficos: Anika ingresará un pedido grande de café y lo recogerá para llevar a su oficina. A
continuación, consideremos una declaración de metas según este planteamiento del problema:

 Laaplicación CoffeeHouse permitirá a los usuarios realizar pedidos grupales por adelantado, lo
que afectará a los usuarios que tienen que hacer y recoger pedidos grandes al permitir que
salteen la fila de pedidos en la tienda y ahorrarles tiempo. Mediremos la eficacia haciendo un
seguimiento de los pedidos de más de cinco artículos realizados a través de la aplicación.

Esto ayuda a establecer la trama de la historia, que tratará sobre un cliente que realiza con éxito un
pedido grande de café de forma rápida y sencilla.

Ahora estás listo para crear una declaración de escenario que describa la narrativa representada por
los guiones gráficos. Ambos guiones gráficos contarán la historia de cómo la aplicación ayuda a un
usuario a enviar un pedido grande de café para que lo recoja en su tienda CoffeeHouse local. El
siguiente paso es completar las plantillas del guión gráfico comenzando con esta simple declaración
de escenario: “Una aplicación para ayudar a los usuarios a realizar pedidos grandes de café de forma
rápida y sencilla”.

Es momento de completar los paneles de la plantilla con imágenes y leyendas de acuerdo con las
pautas para un guión gráfico de panorama general.

Descripción escrita del guión gráfico de panorama general:

El guión gráfico contiene seis paneles. En el panel uno, Anika quiere comprar café para el equipo. Anika
está rodeada de personas que hacen pedidos en la cafetería.

A continuación, Anika recuerda que una aplicación puede ayudar en esta situación. Esto está en el
segundo panel.

En el tercer panel, Anika decide usar la aplicación CoffeeHouse para tomar los pedidos de su equipo.

En el cuarto panel, Anika se entera de que pueden enviar el menú al equipo desde la aplicación para
que el equipo pueda realizar sus propios pedidos.

En el quinto panel, Anika envía el pedido a la cafetería a través de la aplicación y se comienza a

preparar el café.

El último panel muestra a Anika y al equipo disfrutando de su café en la oficina.

Descripción escrita del guión gráfico de primer plano:

El guión gráfico consta de seis paneles. En el primer panel, Anika comienza abriendo la aplicación en su
teléfono.

En el segundo panel, Anika selecciona la ubicación más cercana para comprar café.

En el tercer panel, Anika obtiene un enlace o código QR de la aplicación que contiene un menú que
pueden enviar al equipo.
En el cuarto panel, Anika ve un reloj con una cuenta regresiva que indica cuánto tiempo tiene el equipo
para realizar sus pedidos.

A continuación, en el quinto panel, la aplicación notifica al equipo que queda poco tiempo.

En el último panel, Anika envía el pedido que debe realizar la cafetería.

Guión gráfico de panorama general:

Ten en cuenta que este guión gráfico de panorama general se centra en el cómo y el porqué detrás del
compromiso del usuario con tu diseño. Al momento de crear un guión gráfico de panorama general,
piensa en preguntas como las siguientes:

 ¿Por qué el usuario necesita nuestra aplicación?

 ¿Cómo usará el usuario nuestra aplicación CoffeeHouse?
 ¿Por qué el usuario estará encantado con la aplicación?

Al igual que ocurre con una buena película, un guión gráfico de panorama general puede mostrar el
compromiso emocional que tendrá un usuario con esta aplicación o con cualquier producto.
Comprender cómo se siente un usuario mientras usa tu producto es una parte fundamental del
proceso de diseño.

Un guión gráfico de panorama general debe cumplir las siguientes pautas:

 Los bocetos deben centrarse en el usuario.

 Los bocetos deben indicar el entorno o contexto donde se encuentra el usuario.
 Los bocetos deben centrarse en la necesidad específica o el punto débil del usuario.

Guión gráfico de primer plano:

Mientras que los guiones gráficos de panorama general se centran en el cómo y el porqué, los guiones
gráficos de primer plano se centran en el qué. Piensa en preguntas como las siguientes:

 ¿Qué sucede en cada pantalla del producto?

 ¿Qué hace el usuario para pasar de una pantalla a otra?
 ¿Cuáles son algunas de las suposiciones que hacemos sobre esta experiencia?
 ¿Cuáles son algunas interacciones o puntos débiles potencialmente complicados que deberán
abordarse?

El guión gráfico de primer plano tiene menos que ver con la emoción, ya que no nos centramos en el
usuario. Por el contrario, el guión gráfico de primer plano se centra en los aspectos prácticos del diseño
en sí mismo.

Un guión gráfico de primer plano debe cumplir las siguientes pautas:

 Los bocetos deben centrarse en el producto en lugar de en el usuario que usa ese producto.
 Los bocetos deben indicar la interacción que un usuario puede tener con el producto
representando pantallas de muestra.
 Los bocetos deben indicar las transiciones entre pantallas o estados que el usuario pueda
tener que realizar.
Ahora, compara el modelo anterior con tus guiones gráficos completados. Evalúa lo que hiciste usando
cada una de las pautas usadas para evaluar el modelo.

¿Qué haces bien? ¿En qué aspectos podrías mejorar? Mantén esta retroalimentación contigo a medida
que avances a lo largo del curso.

1.
Pregunta 1

Esta actividad te ayudará a comprender cómo dibujar esquemas de página en papel. En esta actividad,
traducirás las ideas de una de tus aplicaciones móviles favoritas a un esquema de página en papel. Los
esquemas de página reducen la aplicación a su estructura básica para resaltar la función prevista de
cada elemento. Para crear los esquemas de página en papel, trabajarás en sentido inverso con una
aplicación ya diseñada. Esta actividad te ayudará a entender cómo diseñar la estructura de una página
para probar diferentes opciones y evitar que dediques mucho tiempo al diseño. Esta práctica también
te preparará para las actividades posteriores del curso cuando tengas que dibujar esquemas de página
en papel para tus proyectos de portfolio.

Después de completar esta actividad, tendrás la oportunidad de comparar tu trabajo con un modelo
completado en el siguiente elemento del curso.

Paso 1: Seleccionar una aplicación móvil para realizar un esquema de página

Piensa en una aplicación móvil que te guste usar y navega hasta la pantalla de inicio de la aplicación. Si
la pantalla de inicio tiene componentes comunes de la interfaz de usuario, como menús y botones, es
una buena selección para practicar tus habilidades de dibujo de esquema de página.

Paso 2: Escribir una lista de información clave de la pantalla de inicio

Antes de comenzar a dibujar, escribe una breve lista de la información clave que se encuentra en la
pantalla de inicio de la aplicación. La lista puede incluir un menú de navegación, una barra de
búsqueda, imágenes, texto y otros elementos que sean importantes para usar la aplicación. Esto te
ayudará a planificar qué elementos deben dibujarse en tu esquema de página en papel y cómo debes
hacerlo.

Paso 3: Dibujar el marco de la pantalla de inicio

Con un trozo de papel y un bolígrafo o lápiz, dibuja un rectángulo para representar el marco de la
pantalla de inicio de la aplicación. Las dimensiones no necesitan ser exactas. Es muy importante que
los elementos clave de la pantalla de inicio puedan caber en el rectángulo y colocarse de manera
similar a como aparecen en la pantalla.
Paso 4: Dibujar los elementos clave de la pantalla

Dibuja los elementos clave de la pantalla de inicio de la aplicación del paso 2 como líneas y formas
simples, como círculos, cuadrados y rectángulos, dentro del marco. Sigue los estándares de la
industria explicados en el video del curso para representar ciertos elementos:

 El texto se representa mediante líneas horizontales.

 Las imágenes, las fotos, las ilustraciones y los iconos se representan por cuadrados con
grandes X dibujadas sobre ellos.
 Las llamadas a la acción, como los botones "enviar" o "componer", se representan mediante
rectángulos o círculos, lo que se ajuste a la forma básica que el elemento tiene en la pantalla.

Los estándares de la industria ayudan a asegurarte de que tus esquemas de página sean simples y
comprensibles, especialmente para cualquier colaborador.

Paso 5: Reflexionar sobre esta actividad

Tu esquema de página en papel:

 ¿Encaja todos los elementos clave de la página de inicio en el marco de la pantalla de inicio?
 ¿Refleja todos los elementos clave de la página de inicio de la aplicación elegida?
 ¿Sigue los estándares de la industria para representar diversos elementos?

Ejemplo de la actividad: dibuja un esquema de página de una aplicación favorita

Aquí hay un modelo terminado, junto con una explicación de por qué el modelo cumple con los
requisitos de la actividad anterior.

Ejemplo
Evaluación del ejemplo

El esquema de página describe la estructura básica de la pantalla de inicio de la aplicación y destaca

sus funciones. Aplica los estándares de la industria para que el esquema de página sea simple y
comprensible.

 El texto está representado por líneas horizontales.

 Las imágenes, las fotos, las ilustraciones y los iconos están representados por cuadrados con
grandes X dibujadas en la parte superior de ellos.
 Las llamadas a la acción, como los botones “enviar” o “componer”, están representados por
rectángulos o círculos, lo que mejor se ajuste a la forma básica que el elemento tiene en la
pantalla.

Ahora compara el modelo anterior con tu entregable completado. Autoevalúa lo que hiciste usando los
criterios usados para evaluar el modelo. ¿Qué cosas hiciste bien? ¿En qué aspectos podrías mejorar?
Mantén esta retroalimentación contigo a medida que avances a lo largo del curso.

Diseño de la arquitectura de la información de las aplicaciones

Como diseñador de UX, la información que presenta tu diseño debe estar organizada y ordenada con
claridad, para que los usuarios puedan experimentar e interactuar correctamente con la aplicación o el
sitio web. Este proceso de organización de la información se denomina arquitectura de la información.
Piensa en la arquitectura de la información como un mapa del producto.

La arquitectura de la información se compone de tres partes:

38. Organización: La organización es cómo se conectan diferentes informaciones en un producto.

39. Jerarquía: La jerarquía a menudo se denomina “estructura de árbol” y es donde una categoría
más grande se coloca en la parte superior y las categorías específicas relacionadas con la
categoría general se colocan debajo. La información de los pares se coloca una al lado de la
otra (o al mismo nivel).
40. Secuencia: La secuencia permite a los usuarios moverse por una aplicación a través de ciertos
órdenes o pasos.

Comprender la organización, la jerarquía y la secuencia ayuda a guiar el proceso de creación de un

mapa del sitio, por lo que es bueno familiarizarse con estos conceptos.
Ocho principios básicos
En tu rol de diseñador de UX, debes estar familiarizado con los ocho principios básicos de la
arquitectura de la información. Estos son principios creados por el fundador de EightShapes, Dan
Brown. Fueron creados para ayudar a los diseñadores de UX a comprender y tomar decisiones sobre
sus productos. Esta es una lista de los ocho principios:

41. Principio del objeto: Debes ver tu contenido como “vivo” y como algo que cambia y crece con
el tiempo.
42. Principio de la elección: Las personas piensan que quieren tener muchas opciones, pero en
realidad necesitan menos opciones y que estén bien organizadas.
43. Principio de la divulgación: La información no debe ser inesperada o innecesaria.
44. Principio del ejemplo: Los seres humanos clasifican las cosas en categorías y agrupan
diferentes conceptos.
45. Principio de la puerta de entrada: La gente suele llegar a una página de inicio desde otro sitio
web.
46. Principio de clasificación múltiple: Las personas tienen diferentes formas de buscar
información.
47. Principio de la navegación enfocada: Debe haber una estrategia y una lógica detrás de la
forma en que se diseñan los menús de navegación.
48. Principio del crecimiento: La cantidad de contenido de un diseño aumentará con el tiempo.

Dedica unos minutos a leer este artículo detallado sobre los ocho principios de la IA. Luego, piensa en
cómo puedes aplicar los principios a la arquitectura de la información de tu diseño.

Principios de la arquitectura de la información para crear un excelente mapa del sitio

El paso final en el proceso de arquitectura de la información que analizaremos es la creación del mapa
del sitio. Como aprendiste anteriormente, un sitio web o una aplicación deben estar estructurados de
manera jerárquica. Esta conexión jerárquica entre el contenido a menudo se conoce en el campo de la
UX como una conexión “padre/hijo”.

Mapas del sitio de aplicaciones web

Así es como se organiza un mapa del sitio para una aplicación web:

49. Página de inicio, pantalla de inicio o punto de partida: La página de inicio suele ser el primer
punto de entrada para un usuario. Por ejemplo, el primer punto de entrada de una aplicación
podría ser la página de bienvenida. El “padre” de esta página sería “página de bienvenida”. La
conexión “hijo” podría ser: inicio de sesión de usuario nuevo, inicio de sesión de usuario
recurrente o inicio de sesión con Facebook o Google (estos son pares y se encuentran en el
mismo nivel).
50. Otras pantallas relevantes: Otras páginas relevantes incluirían todas las demás relaciones
padre/hijo en la aplicación. Un ejemplo de esto es cuando un usuario va en la pantalla
principal a Configuración; debajo de eso, las conexiones hijo pueden ser Perfil, Seguridad,
Ayuda y Políticas. Otro ejemplo es cuando un usuario va a la pantalla principal para tocar
Ayuda en una aplicación; en Ayuda, las conexiones hijo pueden ser Buscar un tema de ayuda,
Examinar temas y Contacto.

Mapas del sitio de aplicaciones móviles

Esta estructura es similar para una aplicación móvil; debe incluir puntos de entrada de alto nivel para
los usuarios. Ten en cuenta que no utilizarás tantas categorías en un mapa del sitio para una aplicación
móvil como para una aplicación web. A continuación, se muestran algunas categorías comunes de alto
nivel que pueden incluirse en una aplicación:
 51. Página de inicio, Características del producto, Configuración de usuario, Precios, Contacto y
Ayuda (también puedes consultar este artículo de Medium.com para obtener una descripción
general más detallada de cómo crear un mapa del sitio de una aplicación web).
52. Debajo de esas categorías de alto nivel están las conexiones hijo. Por ejemplo, Nombre,
Dirección de correo electrónico y Detalles de pago se incluirían bajo Perfil del usuario.

Recuerda, es importante conocer el propósito de tu aplicación y los usuarios que se beneficiarán con
ella; a partir de eso podrás decidir mejor la estructura. Esto ayudará a guiar el proceso de creación del
mapa del sitio.

Debido a que las pantallas móviles son generalmente más pequeñas, los desafíos que conlleva la
creación de una arquitectura de la información para una aplicación móvil son 1) considerar formas de
centrarse en el contenido esencial y eliminar o cambiar de lugar el contenido menos importante, 2)
considerar el tamaño y el espaciado de cualquier objetivo en las pantallas táctiles y 3) considerar
formas de asegurarse de que el texto móvil sea lo suficientemente grande. Una buena arquitectura de
la información es uno de los primeros pasos para configurar un diseño que fomente las rutas más
fáciles para que los usuarios naveguen por el contenido, así que asegúrate de tener en cuenta estos
puntos mientras sigues creando aplicaciones móviles.

Amplía tu conocimiento
Ahora comprendes mejor cómo se estructura la información en las aplicaciones. Toma estos principios
y aplícalos al comenzar tus propios diseños de productos. Echa un vistazo a este artículo para aprender
sobre los seis patrones clave que se utilizan con frecuencia para analizar la arquitectura de la
información en las aplicaciones móviles.

Consulta también estos artículos sobre la accesibilidad: Pautas para la arquitectura de la información,
el diseño de UX y el diseño visual y el Día Mundial de la IA 2019: consejos de accesibilidad para los
arquitectos de la información para comprender mejor cómo pensar sobre la accesibilidad en la
arquitectura de la información.

Luego, lee algunos principios psicológicos clave que te ayudarán a descubrir cómo organizar la
información. Finalmente, revisa los artículos en Recursos adicionales a continuación para aprender
aún más sobre la arquitectura de la información en UX.

Recursos adicionales
 Arquitectura de la información: Conceptos básicos para diseñadores de UX Planet
 La guía para principiantes sobre arquitectura de la información en UX de Adobe
 Una excelente guía para principiantes sobre arquitectura de la información de Career Foundry
 Arquitectura de la información para diseñadores de UX por Justinmind.com
 5 ejemplos de arquitectura de la información eficaz de Adobe

1.
Pregunta 1

En ejercicios anteriores, practicaste tus habilidades de creación de esquemas al dibujar un solo

esquema de página para tu aplicación favorita. En esta actividad, crearás un conjunto completo de
esquemas de página en papel para el proyecto CoffeeHouse. Para esta actividad necesitarás lo
siguiente:

 Unas hojas de papel normal o cuadriculado (21 x 28 cm o más grande)

 Algo para escribir (un lápiz está muy bien)

Recuerda: Un esquema de página es un esbozo de baja fidelidad de una experiencia digital, como una
aplicación o un sitio web.

Propósitos de los esquemas de página:

 Establecer la estructura básica de una página

 Resaltar la función prevista del producto
 Ahorrar tiempo y recursos

Tus esquemas de página estarán formados por elementos. Los elementos son como bloques
utilizados para crear un diseño. La mayoría de las veces, usarás líneas, formas y texto para dibujar
esquemas de página.

Para asegurarte de que los esquemas de página sean simples y comprensibles, los diseñadores siguen
los estándares de la industria. Los estándares de la industria son formas comunes de indicar los
elementos de página. En el caso de los esquemas de página, hay varios estándares de la industria a
tener en cuenta:

 El texto está representado por líneas horizontales.

 Las imágenes, fotos, ilustraciones e iconos están representados por un cuadrado o rectángulo
y una X que se superpone al cuadrado o rectángulo.
 Las llamadas a la acción a menudo están representadas por rectángulos o círculos. Un ejemplo
común de una llamada a la acción es el botón “enviar” en un formulario web.

Los esquemas de página te benefician como diseñador, porque te permiten:

 Identificar el contenido a incluir en el producto

 Detectar problemas con tiempo
 Lograr que los interesados se centren en la estructura
 Ahorrar tiempo y esfuerzo
 Iterar rápidamente
Con estos estándares y beneficios generales en mente, aplica estos conceptos básicos para crear
esquemas de página en papel para el diseño que has estado explorando en la situación de práctica de
CoffeeHouse.

Para ver el glosario de este elemento del curso, haz clic en el enlace a continuación y selecciona
“Utilizar plantilla”.

Enlace a la situación: Situación comercial de CoffeeHouse.

Si no tienes una cuenta de Google, puedes descargar la plantilla directamente desde el siguiente
archivo adjunto.

Después de completar esta actividad, tendrás la oportunidad de comparar tu trabajo con un modelo
completado en el siguiente elemento del curso.

Antes de comenzar, tómate el tiempo para revisar tu investigación y los guiones gráficos que ya hiciste.
A partir de este momento, será importante que pienses en el flujo de usuarios principal que los
usuarios seguirán en el producto. Consulta tus guiones gráficos y el flujo de usuarios: En general, estos
describen la tarea principal o el flujo que un usuario deberá seguir al utilizar el producto.

El objetivo de crear esquemas de página es establecer la estructura básica de una página y resaltar la
función prevista de cada elemento.

Ya aprendiste sobre los beneficios de crear esquemas de página en general. Aquí hay algunos
beneficios de los esquemas de página en papel, en particular.

Beneficios de los esquemas de página en papel:

 Son rápidos
 Son económicos
 Te permiten explorar muchas ideas
 Acotan tu enfoque

Para ayudarte a explorar muchas ideas, tendrás que crear varios esquemas de página para la misma
pantalla de la aplicación. Por ejemplo, puedes tener muchas ideas para la estructura de la página de
inicio y la función prevista de cada elemento en la página de inicio. Por lo tanto, dibujarás esquemas de
página para cada una de las maneras en que una pantalla (la página de inicio) podría funcionar.

Sigue estos pasos para dibujar esquemas de página en papel para el diseño de práctica de
CoffeeHouse.

Paso 1: Reúne los materiales

Para esta actividad necesitarás lo siguiente:

 Hoja de papel normal de (21 x 28 cm o más grande).

 Algo para escribir (un lápiz está muy bien)
Paso 2: Escribe una lista de los elementos que debes incluir en el esquema de página

Antes de comenzar a dibujar, escribe una lista de los elementos que debes incluir en el esquema de
página. Es importante enumerar esta información antes de comenzar para que recuerdes dibujar todos
los elementos en cada uno de los esquemas de página.

Para armar esta lista, piensa en la investigación que has realizado y los artefactos o resultados
entregables que has creado. En particular, el ejercicio de ideación de Crazy Eights y los guiones gráficos
que desarrollaste deberían ayudarte a priorizar funciones y elementos que el usuario potencial
encontrará útiles.

Por ejemplo, si estás diseñando un esquema de la página de inicio, piensa en los elementos y funciones
que un usuario querrá ver y deberá usar cada vez que abra la aplicación. En la aplicación CoffeeHouse,
es posible que sea conveniente incluir una forma rápida y fácil de volver a pedir artículos anteriores o
un elemento que resalte una bebida popular de temporada. Estás tomando esas decisiones de diseño
en función de lo que aprendiste, pero recuerda que las probarás más adelante para validar las
decisiones: No te quedes atascado tratando de diseñar algo perfecto ya mismo.

Paso 3: Crea cinco versiones diferentes de cómo estructurar la información en la página

Empieza a dibujar. Es una buena práctica intentar crear al menos cinco versiones diferentes de cómo
estructurar la información en la página de inicio de la aplicación CoffeeHouse. Primero, para cada una
de las cinco versiones, crea un esquema del teléfono. Puede ser un simple rectángulo. Luego completa
estos esbozos con los elementos de página que enumeraste en el Paso 2. Recuerda, en esta etapa, tu
objetivo es explorar muchas ideas con los esquemas de página.

Trata de no dedicar demasiado tiempo a estos dibujos. Programa un temporizador de dos minutos
para cada versión de las cinco variantes, lo que significará que solo pasarás unos diez minutos en total
en cada página del producto. Piensa en esto como una lluvia de ideas más enfocada que lo que has
hecho anteriormente: todavía estás produciendo una amplia gama de ideas, pero ahora todas se
centran en una sola página.

Paso 4: Elige qué elementos refinar

Cuando hayas terminado de pensar en ideas, es hora de perfeccionar o mejorar el esquema de página.
Revisa las versiones del esquema de página que se te ocurrieron y agrega una estrella al lado de las
partes que te parezcan más efectivas.

Piensa en el usuario potencial del producto y lo que tendrá que hacer en el producto. ¿Cómo puedes
resolver el planteamiento del problema de la manera más efectiva? Al mirar las variantes de la lluvia de
ideas, extrae los elementos que creas que se ajustan mejor a esas pautas. Todavía estás comenzando
el proceso, por lo que nada está grabado a fuego. Basa tus decisiones en la investigación y valídalas
con pruebas.

Estos elementos, a partir de las cinco variantes, formarán la versión final de la pantalla en papel.

Paso 5: Combina elementos en un esquema de página refinado

Al centrarte en las mejores ideas, puedes acotar las partes del esquema de página que deseas explorar
más a fondo en un esquema de página digital.

Repite los pasos del 3 al 5 hasta que hayas creado esquemas de página refinados para al menos cinco
páginas. Recuerda, estos esquemas de página refinados deben basarse en un flujo de usuarios.
También has pensado en la arquitectura de la información de todo el producto, así que crea primero
las pantallas clave o fundamentales.

Por ejemplo, crear la página “Contáctenos” podría ayudarte a alcanzar un número mínimo de
pantallas, pero sé honesto contigo mismo sobre si es fundamental para el flujo de usuarios.

Paso 6: Reflexiona sobre la finalización de esta actividad

Una buena serie de esquemas de página cumplirá con estos criterios:

 Define claramente los elementos destinados a la página.

 Incluye múltiples versiones que organizan los elementos de diferentes maneras.
 Te proporciona ejemplos diferenciados que podrás comparar y probar.

Paso 7: Guarda tu trabajo

Al completar estas actividades, recuerda:

53. Toma fotos de tu progreso y guárdalas. Estas fotos pueden incluir el progreso de los bocetos,
diferentes etapas de la actividad, imágenes de sesiones de lluvia de ideas e incluso fotos de ti
mismo trabajando.
54. Guarda todo tu trabajo en tu computadora, un disco duro o una carpeta de Google Drive para
asegurarte de tener todos los recursos que necesitarás más adelante en el curso para tu
portfolio.

Modelo de la actividad: Practica la creación de esquemas de página en papel

Aquí hay un modelo completo de creación de esquemas en papel, basado en el escenario de práctica
de CoffeeHouse. Recuerda los criterios para crear buenos esquemas de página:

 Definir con claridad los elementos destinados a la página.

 Incluir múltiples versiones de los elementos organizados de diferentes formas.
 Proporcionar ejemplos diferenciados que se puedan comparar y probar.

A continuación se muestra un ejemplo de una buena serie de esquemas de página en papel:

Modelo

Cinco versiones diferentes de esquemas de la página:

Esquema de página final refinado de los cinco originales:
Evaluación del modelo

La creación de este modelo sigue los pasos descritos en la actividad:

Paso 1: Reúne materiales

Los materiales necesarios se reúnen en un solo lugar.

Paso 2: Escribe una lista de los elementos que debes incluir en el esquema de página

Nuestra lista para la aplicación Coffeehouse incluye: navegación, una función de búsqueda, un carrito
o bolsa de compras, imágenes y texto.

Paso 3: Crea cinco versiones diferentes de cómo estructurar la información en la página

Arriba encontrarás cinco versiones diferentes de estructuras de información que utilizan los elementos
enumerados anteriormente, etiquetadas de la A a la E. Esto les da a los diseñadores la oportunidad de
explorar muchas ideas. Al crear los dibujos, el modelo también tiene cuidado de seguir los estándares
de la industria.

Paso 4: Elige qué elementos refinar

Identifica las áreas en cada uno de estos diferentes esquemas de página y elige los elementos que
funcionan mejor.

Paso 5: Combina elementos en un esquema de página refinado

Puedes acotar los diseños a un único esquema de página refinado (Inicio v.1).

Ese es el proceso completo para un solo esquema de página. El proceso anterior se repetirá para el
ejemplo de CoffeeHouse hasta que haya suficientes esquemas de página para mostrar un flujo de
usuarios completo; es decir, la tarea principal que el usuario completará en el producto.
Ahora compara el modelo anterior con tu entregable completado. Evalúa lo que has hecho usando los
criterios utilizados para evaluar el modelo.

¿Qué haces bien? ¿En qué aspectos podrías mejorar? Mantén esta retroalimentación contigo a medida
que avances a lo largo del curso.

1.
Pregunta 1

En esta actividad, aplicarás tus habilidades de creación de esquemas a la aplicación que estás
diseñando para tu proyecto de portfolio según la indicación de Sharpen.

Para esta actividad necesitarás lo siguiente:

 Una hoja de papel normal o cuadriculado (21 x 28 cm o más grande)

 Algo para escribir (un lápiz está muy bien)

Después de completar esta actividad, tendrás la oportunidad de comparar tu trabajo con un modelo
completado en el siguiente elemento del curso.

Recuerda, antes de comenzar, tómate el tiempo necesario para revisar tu investigación y los guiones
gráficos que has realizado anteriormente.

A partir de este momento, será importante que pienses en el flujo de usuarios principal que los
usuarios seguirán en tu proyecto de Sharpen. Consulta tus guiones gráficos y el flujo de usuarios: En
general, estos describen la tarea principal o el flujo que un usuario deberá seguir al utilizar el producto.

En la actividad de práctica de creación de esquemas basada en la aplicación CoffeeHouse, observaste

que el objetivo al crear esquemas de página es establecer la estructura básica de una página y resaltar
la función prevista de cada elemento a medida que construyes todas las partes del esquema
necesarias para que un usuario complete el flujo de usuarios principal en el producto. Ahora harás esto
para la aplicación que estás diseñando para tu primer proyecto de portfolio.

Para esta actividad, sigue los mismos pasos que seguiste para dibujar esquemas de página en papel
para el diseño de práctica de CoffeeHouse:

Paso 1: Reúne los materiales

Para esta actividad necesitarás lo siguiente:

 Una hoja de papel normal o cuadriculado (21 x 28 cm o más grande)

 Algo para escribir (un lápiz está muy bien)

Paso 2: Escribe una lista de la información que debe ir en la página para la que estás dibujando los
esquemas de página
Antes de comenzar a dibujar, escribe una lista con la información que debe ir en la página para la que
estás dibujando los esquemas de página. Es importante enumerar esta información antes de comenzar
para que recuerdes dibujar todos los elementos en cada uno de los esquemas de página.

Para armar esta lista, piensa en la investigación que has realizado y los artefactos o resultados
entregables que has creado. En particular, el ejercicio de ideación de Crazy Eights, el flujo de usuarios y
los guiones gráficos que desarrollaste deberían ayudarte a priorizar funciones y elementos que el
usuario potencial encontrará útiles.

Por ejemplo, si estás diseñando un esquema de la página de inicio, piensa en los elementos y funciones
que un usuario querrá ver y deberá usar cada vez que abra la aplicación.

Paso 3: Crea cinco versiones diferentes de cómo estructurar la información en la página

Empieza a dibujar. A continuación, se ofrecen algunos consejos que te ayudarán a abordar el proceso
de dibujo:

 Intenta crear al menos cinco versiones diferentes de cómo estructurar la información en la

página.
 Para cada una de las cinco versiones, comienza con un esbozo que represente la pantalla de
un teléfono. Puede ser un simple rectángulo.
 Completa estos esquemas con los elementos de la página que enumeraste en el Paso 2. Ten en
cuenta que, en esta etapa, tu objetivo es explorar muchas ideas con los esquemas de página.
 Y recuerda: trata de no dedicar demasiado tiempo a estos dibujos. Establece un temporizador
de 2 minutos para cada dibujo.

Paso 4: Elige qué elementos refinar

Cuando hayas terminado de pensar en ideas, es hora de perfeccionar o mejorar el esquema de página.
Revisa las versiones del esquema de página que se te ocurrieron y agrega una estrella al lado de las
partes que te parezcan más efectivas.

Como antes, piensa en el usuario potencial del producto: ¿Qué tendrá que hacer en el producto y cómo
puedes resolver de manera más eficaz el planteamiento del problema? Al mirar los esquemas de
página, extrae los elementos que creas que se ajustan mejor a esas pautas.

Paso 5: Combina elementos en un esquema de página refinado

Al centrarte en las mejores ideas, puedes acotar las partes del esquema de página que deseas explorar
más a fondo en un esquema de página digital.

Repite los pasos del 3 al 5 hasta que hayas creado al menos cinco esquemas de página refinados.
Recuerda, estos esquemas de página refinados deben basarse en un flujo de usuarios. También has
pensado en la arquitectura de la información de todo el producto, así que crea las pantallas clave o
fundamentales para tu proyecto de portfolio.

Paso 6: Reflexiona sobre la finalización de esta actividad

Ten en cuenta los criterios de que una buena serie de esquemas de página:

 Definirá claramente los elementos destinados a la página.

 Incluirá múltiples versiones con los elementos organizados de diferentes maneras.
 Te proporcionará ejemplos diferenciados que podrás comparar y probar.

Paso 7: Guarda tu trabajo

Al completar estas actividades, recuerda:

55. Toma fotos de tu progreso y guárdalas. Estas fotos pueden incluir el progreso de los bocetos,
diferentes etapas de la actividad, imágenes de sesiones de lluvia de ideas e incluso fotos de ti
mismo trabajando.
56. Guarda todo tu trabajo en tu computadora, un disco duro o una carpeta de Google Drive para
asegurarte de tener todos los recursos que necesitarás más adelante en el curso para tu
portfolio.

Modelo de la actividad: Crea esquemas de página en papel para el proyecto de portfolio.

Aquí hay un modelo completo de creación de esquemas en papel, basado en el escenario de la tienda
Zia's Pizza que se introdujo en actividades anteriores. Recuerda, los criterios para crear buenos
esquemas de página son:

 Definir con claridad los elementos destinados a la página.

 Incluir múltiples versiones que organizan los elementos de diferentes maneras.
 Proporcionar ejemplos diferenciados que se puedan comparar y probar.

Modelo

A continuación, se muestra un ejemplo de una serie eficaz de esquemas de página en papel:

Evaluación del modelo

El modelo completo siguió cada paso del proceso. En el modelo:

 Cada uno de los esquemas de página muestra claramente la estructura básica de la página,
incluidos elementos como navegación, botones, imágenes y texto. Estos elementos destacan
las funciones previstas de la aplicación Zia's Pizza.
 Se crearon al menos cinco versiones diferentes de cómo estructurar la información en la
página siguiendo los estándares de la industria. Hacer esto les da a los diseñadores la
oportunidad de explorar muchas ideas.
 Se colocaron estrellas junto a los elementos del diseño que resolverían el problema de manera
más efectiva.
 Los elementos destacados con estrellas se combinaron en un único esquema de página
refinado.

Este es el proceso que se utiliza para crear un único esquema de página. El proceso anterior se
repetiría para el ejemplo de Zia's Pizza hasta que haya suficientes esquemas de página para mostrar un
flujo de usuarios completo.

Ahora compara el modelo anterior con tu entregable completado. Evalúa lo que has hecho usando los
criterios utilizados para evaluar el modelo. ¿Qué haces bien? ¿En qué aspectos podrías mejorar?
Mantén esta retroalimentación contigo a medida que avances a lo largo del curso.

Una vez que estés satisfecho con la calidad de tu trabajo, asegúrate de guardar los esquemas de
página en papel para que puedas incluir imágenes de ellos en tu portfolio.

1.
Pregunta 1
Esta actividad te ayudará a aplicar tus habilidades de creación de esquemas que comenzaste a
desarrollar con los esquemas de página en papel. En esta actividad, pasarás los dibujos en papel de
CoffeeHouse de la actividad Practica la creación de esquemas de página en papel para el proyecto
CoffeeHouse a estructuras digitales.

Después de completar esta actividad, tendrás la oportunidad de comparar tu trabajo con un modelo
completado en el siguiente elemento del curso.

Para esta tarea, trabajarás con los esquemas de página en papel que creaste para la aplicación
CoffeeHouse. También es recomendable que tengas presente tu investigación mientras construyes
este conjunto de esquemas de página. Los esquemas de página en papel te permitieron tener algo de
flexibilidad. Esto fue intencional porque puedes hacer esquemas de página en papel rápidamente y
obtener una devolución con la misma rapidez. Sin embargo, tomará más tiempo crear los esquemas de
página digitales, así que consulta tu investigación para agregar nuevos detalles y seguir refinando el
diseño.

Puedes utilizar la investigación y los esquemas de página en papel que creaste para la situación de
CoffeeHouse, o puedes utilizar los modelos proporcionados aquí.

Investigación de la aplicación CoffeeHouse

Anika

Para ver la persona de Anika, haz clic en el enlace de abajo y selecciona “Utilizar plantilla”.

Enlace al modelo: Persona de Anika

O bien

Si no tienes una cuenta de Google, puedes descargar la persona de Anika directamente desde el
siguiente archivo adjunto.

Para ver el mapa de recorrido del usuario de Anika, haz clic en el enlace siguiente y selecciona “Utilizar
plantilla”.

Enlace al modelo: Mapa de recorrido del usuario de Anika

O bien

Si no tienes una cuenta de Google, puedes descargar el mapa de recorrido del usuario de Anika
directamente desde el siguiente archivo adjunto.

Ali

Para ver la persona de Ali, haz clic en el enlace de abajo y selecciona “Utilizar plantilla”.
Enlace al modelo: Persona de Ali

O bien

Si no tienes una cuenta de Google, puedes descargar la persona de Ali directamente desde el siguiente
archivo adjunto.

Para ver el mapa de recorrido del usuario de Ali, haz clic en el enlace siguiente y selecciona “Utilizar
plantilla”.

Enlace al modelo: Mapa de recorrido del usuario de Ali

O bien

Si no tienes una cuenta de Google, puedes descargar el mapa de recorrido del usuario de Ali
directamente desde el siguiente archivo adjunto.

Finalmente, aquí tienes un enlace a los esquemas de página en papel de CoffeeHouse:

Para ver el modelo completo de este elemento del curso, haz clic en el enlace de abajo y selecciona
“Utilizar plantilla”.

Enlace al modelo: Esquemas de página en papel de CoffeeHouse

O bien

Si no tienes una cuenta de Google, puedes descargar el modelo directamente desde el siguiente
archivo adjunto.

Puedes comenzar a digitalizar tu diseño con estos recursos o los tuyos propios.

Paso 1: Revisa los materiales suministrados sobre Figma

Figma es una aplicación de diseño de interfaz de usuario y experiencia de usuario basadas en

navegadores que cuenta con herramientas de diseño, creación de prototipos y generación de código
que los diseñadores utilizan para crear esquemas de página. Uno de los mayores beneficios de Figma
es que ofrece un método sencillo de colaboración entre usuarios que se puede realizar al mismo
tiempo y en el mismo documento. Es algo así como el funcionamiento de Google Docs. En este curso ya
has visto videos de Figma que desglosaron las funciones específicas de la herramienta. Consulta los
materiales de Figma directamente para obtener la información más actualizada sobre las nuevas
funciones.

Paso 2: Inicia un nuevo proyecto en Figma

57. Haz clic en el menú de hamburguesa/navegación en la esquina superior izquierda

58. Selecciona File > New

Nota: Esto te dará un lienzo en blanco para trabajar.

Paso 3: Sube imágenes de tus esquemas de página en papel

Los esquemas de página en papel te guiarán a medida que construyes y refinas tus ideas. En el menú
Shapes, usa la opción Place Image para cargar las imágenes de los esquemas de página en papel.
También puedes copiar y pegar las imágenes directamente en la ventana.

Paso 4: Crea un marco para el tamaño de pantalla del dispositivo para el que vas a diseñar

Para crear un marco, haz clic en el icono del marco en la barra de navegación superior y selecciona el
marco. También puedes usar los atajos F (marco) o A (mesa de trabajo) en el teclado. Esto abrirá un
menú con marcos para dispositivos y software de uso común. El menú ayuda a diseñar diferentes
variantes de las pantallas (escritorio, tableta, móvil).

El uso de estos marcos garantizará que el diseño se ajuste al tamaño de pantalla correcto y te ayudará
a que el diseño permanezca coherente durante todo el proceso.

Paso 5: Usa una cuadrícula para ayudarte a mantener un diseño coherente (opcional)

Usa una cuadrícula de diseño en cada marco para ayudarte a mantener los márgenes y el espaciado
coherentes en todo el diseño.
 59. En el lado derecho de la pantalla, en la pestaña Design, verás una opción para Layout Grid. Al
hacer clic en el botón + se agregará una nueva cuadrícula.
60. La cuadrícula de diseño predeterminada es de 10 px, pero se puede cambiar al hacer clic en el
icono de cuadrícula. El espaciado y los márgenes variarán según el producto en el que estés
trabajando.
61. Por ahora, usa la siguiente configuración de Layout Gridpara una aplicación móvil:
 Tamaño: 10
 Color: FF0000
 Tipo: Estirar
 Margen: 10
 Medianil: 20

Paso 6: Empieza a construir elementos

Ahora que está todo configurado, empieza a diseñar. Comienza con un elemento que se repetirá en el
diseño, como una tarjeta de contenido. Usa los esquemas de página en papel como referencia para
construir el diseño con formas en Figma. Practica el uso de atajos de teclado para hacer que el flujo de
trabajo sea más eficiente.

Usar estas formas juntas de diferentes maneras es un método simple para transferir tus ideas de
esquema de página en papel a un esquema de página digital. Crea rectángulos con el atajo de teclado
R, líneas con L y elipses (círculos) con O.

En este punto, deberás comenzar a definir la jerarquía de información en las páginas y elementos.
Decide cómo vas a usar elementos como el tamaño del texto, el peso del texto y la ubicación para
asignar el valor apropiado mientras estás construyendo. ¿Qué es lo más importante para el usuario?
Eso debería ser intuitivo en tu diseño, es decir, los usuarios deberían poder encontrar los elementos
más importantes de la aplicación sin pensar demasiado en cómo navegar.

Paso 7: Ensambla varios elementos en un marco

Ahora que has construido algunos elementos individuales, ensámblalos en un marco/pantalla.

Experimenta con el diseño y el espaciado para garantizar que sea un diseño funcional y visualmente
atractivo. Para este nivel de fidelidad, recuerda que tu prioridad es la usabilidad; todavía no deberías
incluir colores, estilos de fuente o imágenes. Debes centrarte en la estructura.

Repite los pasos 6 y 7 hasta que hayas creado suficientes pantallas para comunicar con éxito las ideas
principales del producto. No hay un número mágico de pantallas para crear. Una buena práctica es
pensar en las pantallas clave que alguien necesitará para usar el producto. Por ejemplo, podría ser más
valioso para el producto construir la pantalla de inicio de la aplicación que construir la pantalla de
configuración.

Paso 8: Reflexiona sobre la finalización de esta actividad

Asegúrate de abordar las siguientes preguntas en tu entregable completado.

 ¿Están los esquemas de página digitales basados en tus pantallas en papel anteriores?
 ¿Agregaste más detalles y pensaste en la jerarquía de información en cada uno?
 ¿Construiste las pantallas clave del producto?
 ¿Los esquemas de página le permiten al usuario saber lo que puede hacer en una pantalla?

Modelo de la actividad: Practica la creación de esquemas de página digitales en Figma

Aquí hay un modelo completo de un esquema de página digital que creamos en Figma para la
aplicación CoffeeHouse:
Evaluación del modelo

Ten en cuenta que este ejemplo utiliza un único esquema de una página de inicio, pero tu trabajo debe
consistir en un conjunto completo de esquemas de página.

Para comenzar el proceso de creación de esquemas de página digitales, sacamos los esquemas de
página en papel originales y la investigación. Estudiamos estos materiales para recordar dónde
habíamos decidido colocar los elementos y por qué.

A continuación, abrimos Figma e iniciamos un nuevo archivo de proyecto. Luego, cargamos en Figma
imágenes de los esquemas de página en papel para usarlas como referencia.

Una vez que se cargaron los esquemas de página en papel, creamos marcos para el dispositivo para el
que estábamos diseñando. Una vez que tuvimos la cantidad correcta de marcos para el diseño,
agregamos una cuadrícula de diseño para mantener todo alineado con precisión.

Luego, llegó la hora de diseñar. Comenzamos a crear cada uno de los elementos en los esquemas de
página en papel. Empezamos con los botones y los iconos. Extrajimos iconos básicos de bibliotecas de
activos gratuitas y usamos formas, líneas y rellenos para crear los elementos restantes. Una vez que
terminamos eso, creamos la sección de contenido y los marcadores de posición de texto. Ten en
cuenta que todavía no habíamos colocado ninguno de los elementos en las pantallas.

Después de crear todos los elementos, comenzamos a colocarlos en el diseño. Seguimos los esquemas
de página en papel como modelo para asegurarnos de que estábamos alineando el esquema de página
digital con las iteraciones de diseño anteriores y las perspectivas que descubrimos en la investigación.
Repetimos este proceso para cada pantalla en el diseño hasta que tuvimos un conjunto completo de
esquemas de página basados en los esquemas de página en papel.
Observa que el ejemplo de esquema de página es fácil de entender y transmite al usuario lo que se
supone que debe suceder en cada pantalla. El ejemplo utiliza una jerarquía de información que pone
en primer plano la información más importante. La importancia de la información se basó en la
investigación que habíamos completado anteriormente en el ciclo de diseño.

Ahora compara el modelo anterior con tu entregable completado. Evalúa lo que has hecho usando
estos criterios para evaluar el modelo. ¿Qué haces bien? ¿En qué aspectos podrías mejorar? Mantén
esta retroalimentación contigo a medida que avances a lo largo del curso.

Como recordatorio, los esquemas de página digitales deben:

 Incluir pantallas clave del producto construidas

 Estar basados en tus esquemas de página en papel
 Incluir más detalles que los esquemas de página en papel
 Considerar la jerarquía de la información en cada pantalla
 Permitir que el usuario sepa lo que puede hacer en cada pantalla.

No pierdas de vista a los esquemas de página digitales para que puedas incluir imágenes de ellos en tu
portfolio.

Obtén más información sobre el uso de los principios de la Gestalt en los esquemas de página
Algunas personas creen que, al igual que una obra de arte, el diseño de una aplicación o sitio web es
subjetivo y está abierto a las interpretaciones, pensamientos o sentimientos personales del usuario.
Aunque la reacción de un usuario a un diseño puede ser subjetiva, el diseño en sí no lo es. Tus diseños
brindarán a los usuarios soluciones sólidas a los problemas que experimentan. Piensa en lo que el
usuario quiere hacer cuando visita tu aplicación o sitio web. ¿Cuál es su objetivo? ¿Cómo vas a
satisfacer esa necesidad con tu diseño? ¿Cómo reaccionará el usuario?

El cerebro humano da sentido al mundo que lo rodea mediante la construcción de lógica, patrones y
estructura. Los principios de la Gestalt describen cómo los humanos agrupan elementos similares,
reconocen patrones y simplifican imágenes complejas cuando percibimos objetos. Estos principios
guían la forma en que los seres humanos ven los diseños que los rodean en la vida cotidiana. En los
esquemas de página que estás creando, puedes aplicar los principios de la Gestalt para organizar el
contenido para que sea agradable visualmente y más fácil de entender.

En el video, aprendiste sobre tres de los principios de la Gestalt: similitud, proximidad y región común.
Como recordatorio:

 Similitud significa que se percibe que los elementos que se parecen (en forma, tamaño o
color, por ejemplo) tienen la misma función.
 Proximidad significa que los elementos que están juntos parecen estar más relacionados que
los que están más separados.
 Región común significa que los elementos ubicados dentro de la misma área cerrada se
perciben como agrupados.

Entonces, ¿cómo aplicas estos principios de la Gestalt a tu propio trabajo? Echa un vistazo a un
ejemplo de cada uno de estos tres principios de la Gestalt en esquemas de página reales.

Primero, la similitud es clave cuando se trata de tus esquemas de página. Para ayudar a los usuarios a
navegar por tu aplicación rápidamente, es recomendable que mantengas juntas las “cosas parecidas”
para conservar la coherencia. Por ejemplo, si incluyes avatares o imágenes de usuarios en el diseño de
la aplicación, deberías asegurarte de que los marcadores de posición de esos avatares tengan la misma
forma y tamaño en los esquemas de página. De manera similar, esto indica a los usuarios que los
elementos tienen la misma función, en este caso, vincular a los perfiles de los usuarios.

A continuación, imagina que dibujas un botón con la etiqueta “más información” cerca del texto de un
artículo. Si un usuario presiona el botón, asumirá que puede obtener más información sobre el
contenido de ese artículo. Este tipo de diseño aprovecha el principio de la Gestalt de proximidad. En
cambio, si dejas mucho espacio entre el texto del artículo y el botón “más información”, es posible que
los usuarios no comprendan la conexión entre los dos elementos. Unos segundos de confusión o
vacilación pueden significar la diferencia entre que un usuario continúe a la página siguiente de la
aplicación o la cierre para buscar algo más útil.

Por último, ¿has notado alguna vez que las barras de navegación en la parte superior o inferior de la
pantalla de un teléfono móvil suelen tener un color diferente o están agrupadas con un borde? Ese es
el principio de la Gestalt de región común en el mundo real. Al crear un borde y agregar un bloque de
color a una barra de navegación, puedes anclar los iconos para las páginas principales de la aplicación,
en lugar de tener los iconos flotando en la pantalla. Este consejo de diseño ayuda a los usuarios a
reconocer que los iconos de la barra de navegación son más importantes que otros y se perciben como
agrupados.

Hay innumerables formas de aplicar los principios de la Gestalt en los esquemas de página para
mejorar la usabilidad de tu aplicación. Si deseas aprender aún más sobre los principios de la Gestalt,
consulta este artículo de User Testing que describe principios adicionales de la Gestalt y este artículo
de UX Collective con ejemplos de los principios de la Gestalt en esquemas de página.

Escribe un breve resumen de los objetivos de aprendizaje de esta tarea y lo que los alumnos deberán
hacer.

En esta tarea evaluada por compañeros, crearás esquemas de página en Figma para tu proyecto de
portfolio. Convertir los esquemas de página dibujados a mano en esquemas de página digitales es una
parte clave del trabajo como diseñador de UX. En esta actividad, convertirás al menos tres de los
esquemas de página en papel en esquemas de página digitales para crear un flujo de usuarios completo.

Tus esquemas de página digitales se basarán en los esquemas de página en papel que creaste en la
actividad Crear esquemas de página en papel para el proyecto de portfolio. Si aún no has realizado la
actividad de esquemas de página en papel para tu proyecto de portfolio, vuelva atrás y complétala antes
de comenzar esta actividad.

Además, darás y recibirás retroalimentación con dos compañeros. Al revisar el trabajo de tus
compañeros, ten en cuenta la eficacia con la que sus esquemas de página transmiten la intención y la
funcionalidad de sus diseños.
Review criteria
menos

Tu entrega debe incluir al menos tres esquemas de página digitales basados en tus esquemas de página
en papel. Se evaluarán sobre un total de seis puntos según los siguientes criterios:

 2 puntos: Demuestra un flujo de usuarios completo que un usuario puede completar (debe
incluir al menos tres pantallas).
 2 puntos: Define claramente los elementos de la interfaz de usuario previstos para cada pantalla,
incluso los menús de navegación, los botones, las imágenes y los campos de texto.
 2 puntos: Indica la organización o jerarquía de los elementos representados en la pantalla.

Step-By-Step Assignment Instructions

menos

Paso 1: Inicia un nuevo proyecto en Figma

Haz clic en el menú de navegación en la esquina superior izquierda y selecciona Archivo > Nuevo. Esto
crea un nuevo archivo para trabajar.

Paso 2: Crea marcos para el dispositivo para el que diseñarás

Para crear un marco, haz clic en el icono Marco en la barra de navegación superior y selecciona el marco.
También puedes usar el atajo del teclado y presionar F. Esto abre un menú con marcos para dispositivos y
software de uso común. El uso de estos marcos garantizará que diseñes para el tamaño de pantalla
correcto y te ayudará a que el diseño permanezca coherente durante todo el proceso. Elije un tamaño de
marco para tus esquemas de página que sea similar al tamaño del teléfono para el que diseñaste en los
esquemas de página en papel. Repite este proceso hasta que tengas el número correcto de marcos que
necesitarás para el flujo de usuarios.
Paso 3: Usa una cuadrícula para ayudarte a mantener un diseño
coherente (opcional)
Puedes usar una cuadrícula de diseño en cada marco para ayudarte a mantener los márgenes y el
espaciado coherentes en todo el diseño. En el lado derecho de la pantalla, verás una opción para
Cuadrícula de diseño. Al hacer clic en el botón + se agregará una nueva cuadrícula. La cuadrícula de
diseño predeterminada es de 10 px, pero se puede cambiar al hacer clic en el icono Cuadrícula. El
espaciado y los márgenes variarán según el producto en el que estés trabajando. Por ahora, usa la
siguiente configuración de la Cuadrícula de diseño, ya que estás trabajando en una aplicación móvil:

Tamaño: 10

Color: FF0000

Tipo: Estirar

Margen: 10

Medianil: 20

Paso 4: Empieza a construir elementos

Ahora que está todo configurado, puedes empezar a diseñar. Comienza con un elemento que se repetirá
en el diseño, como una tarjeta de contenido. Usa los esquemas de página en papel como referencia para
construir el diseño con formas en Figma. Siéntete libre de practicar utilizando también los atajos del
teclado. Conocer estos atajos de teclado te ayudará a que el flujo de trabajo sea más eficiente.
Usar estas formas juntas de diferentes maneras es un método simple para transferir tus ideas del
esquema de página en papel a un esquema de página digital. Crea rectángulos con el atajo de teclado R,
líneas con L y elipses (círculos) con O.

En este punto, deberás comenzar a definir la jerarquía de información en las páginas y elementos. Decide
cómo vas a usar el tamaño del texto, el peso del texto, la ubicación y otros elementos para asignar el
valor apropiado a la página mientras creas los esquemas de página. Pregúntate qué sería más importante
para el usuario.

Nota: La información más importante de la página debería poder descubrirse intuitivamente en tu

diseño. En otras palabras, los usuarios deberían poder encontrar los elementos más importantes de la
aplicación sin pensar demasiado en cómo navegar.

Paso 5: Ensambla varios elementos en un marco

Ahora que has construido tus elementos individuales, colócalos en el marco, siguiendo el diseño de tu
esquema de página en papel. Experimenta con el diseño y el espaciado para garantizar que sea un diseño
funcional y visualmente atractivo. Para este nivel de fidelidad, tu prioridad es la usabilidad; todavía no
necesitas incluir colores, estilos de fuente o imágenes.

Paso 6: Repite el proceso para todas las pantallas en tu flujo de

usuarios
Repite el proceso de crear y colocar elementos para todas las pantallas en el flujo de usuarios. Cuando
hayas terminado, deberías tener un conjunto de al menos tres esquemas de página que demuestren un
flujo de usuarios completo de principio a fin.

Paso 7: Exporta desde Figma y sube tu entrega para recibir

comentarios de tus compañeros
Una vez que tus diseños estén listos para ser evaluados por tus compañeros, exporta tus pantallas de
Figma en formato PDF para poder enviarlas para la revisión de un compañero y obtener comentarios
sobre ellas. Haz clic en el menú de navegación, luego en Archivo > Exportar marcos como PDF.
La retroalimentación es un componente vital del proceso de diseño de UX. Obtener comentarios y
aprender de ellos te ayudará a continuar repitiendo y mejorando tu diseño. Y lo que es más importante,
aplicar los comentarios te garantizará que estás resolviendo los problemas de la mejor manera posible.

Example Submissions
menos

Aquí hay algunas entregas de ejemplo:

En el ejemplo a continuación, demostramos cómo pasamos de un esquema de página en papel a uno

digital para la app de Zia's Pizza. Comenzamos con la página de inicio del esquema de página en papel
que creamos anteriormente.

Una vez que tuvimos el esquema de la página de inicio en papel, creamos un esquema del tamaño de un
teléfono en Figma. Tomamos como referencia el esquema de página en papel para crear cada uno de los
elementos en la página de inicio en Figma. Una vez creados los elementos, los colocamos dentro del
esquema en la misma posición que tenían en el esquema de página en papel. Una vez que traspasamos
todos los elementos de la versión en papel a la digital, repetimos el proceso con las demás pantallas de
nuestro diseño.

A continuación, comparamos las versiones en papel y digital del esquema de la página de inicio. Debajo
de la comparativa está el flujo de usuarios completo, representado como esquemas de página digitales.

Brindamos un total de nueve pantallas para nuestros esquemas de página digitales. Esto se debe a que el
flujo de usuarios desde la pantalla de inicio hacia las pantallas de pedido y hasta la finalización de la
compra y el proceso de confirmación requieren un total de nueve pantallas. Debes enviar un mínimo de
tres esquemas de página digitales para completar la entrega, pero debes asegurarte de que tu entrega
represente un flujo de usuarios completo. Es decir, puedes incluir tantas pantallas como necesites para
demostrar un flujo de usuarios completo. Solo hay un mínimo sugerido. Demasiadas entregas necesitarán
más de tres pantallas para demostrar un flujo de usuarios completo.
For more detailed views of each screen, check out this PDF of the checkout flow for the Zia's Pizza
wireframes.

Examples of Good Feedback

menos

En estos esquemas de página, está claro que los esquemas de página digitales están creados a partir de
esquemas de página en papel creados anteriormente que han sido perfeccionados. También muestran
una arquitectura de la información y elementos definidos de manera simple y clara. Se aplicó un
pensamiento crítico a la jerarquía de la información en cada pantalla.

Agregar a tu caso práctico

menos

Una vez que recibas los comentarios de tus compañeros y realices las revisiones, ¡estarás listo para
agregar esquemas de página a la presentación de diapositivas del caso práctico de tu portfolio!

Si necesitas acceso a la plantilla para el paquete de diapositivas del caso práctico presentado al inicio del
Curso 2, haz clic en el enlace a continuación y selecciona “Usar plantilla”.

Enlace a la plantilla: Plantilla del paquete de diapositivas del caso práctico.

Si no tienes una cuenta de Google, puedes descargar la plantilla directamente desde el siguiente archivo
adjunto.

Google UX Design Certificate - Case study slide deck [Template]

PPTX File

En la diapositiva 11, agrega una foto de tus esquemas de página en papel. Esto debe incluir las cinco
versiones esbozadas de una pantalla y la versión perfeccionada de esa misma pantalla. Asegúrate de que
la foto sea clara y presentable.

Luego, completa las diapositivas 12 y 13 con capturas de pantalla de tus esquemas de página digitales
que demuestren cómo tus diseños abordan los puntos débiles del usuario. Elige una pantalla de tu
aplicación para destacar en cada dispositiva.

Ten en cuenta que no tienes que incluir tus diseños en el marco del dispositivo, como se muestra en los
ejemplos que siguen. No obstante, si quieres que tu caso práctico incluya diseños en contexto, puedes
hacerlo tomando capturas de pantalla de las vistas previas de tus diseños en Figma.

Primero, abre tu proyecto en Figma. Navega hasta el menú de la barra lateral en la esquina superior
derecha y selecciona la pestaña Prototipo.
En la parte superior del panel prototipo, busca el menú desplegable Dispositivo y selecciona el dispositivo
que se ajusta a tus diseños. También puedes determinar el color del Fondo.

Una vez que definas estas especificaciones, haz clic en el botón Reproducir que se encuentra sobre la
pestaña Prototipo.

Luego, tu diseño debería abrirse en una nueva pantalla de Figma, donde puedes tomar capturas de
pantalla de tus diseños en el marco del dispositivo para tu caso práctico.

Aquí hay algunos ejemplos de diapositivas completas con esquemas de página en papel y digitales para
Zia’s Pizza:
 Paper
wireframes Taking the time to draft iterations of each screen of the app on paper ensured that the
elements that made it to digital wireframes would be well-suited to address user pain points. For the
home screen, I prioritized a quick and easy ordering process to help users save time. An image of the Zia's
Pizza app paper wireframes. Stars were used to mark the elements of each sketch that would be used in
the initial digital wireframes.

Esquemas de página en papel: Tomarse el tiempo para elaborar en papel iteraciones de cada pantalla de
la aplicación garantizó que los elementos que llegaron a los esquemas de página digitales fueran los
correctos para abordar los puntos débiles del usuario. Para la pantalla de inicio, prioricé un proceso de
pedidos rápido y simple para evitar que los usuarios pierdan tiempo. Una imagen de los esquemas de
página en papel de la aplicación Zia’s Pizza. Se utilizaron estrellas para marcar los elementos de cada
boceto que se usarían en los primeros esquemas de página digitales.

As the initial
design phase continued, I made sure to base screen designs on feedback and findings from the user
research. An image of the Zia's Pizze lo-fi wireframe: This button at the top of the home screen makes it
fast and easy for users to order. This button provides an easy option for users to make their own pizza.

A medida que la fase inicial del diseño continuaba, me aseguré de realizar los diseños de las pantallas en
base a los comentarios y a los resultados de la investigación de usuarios. Una imagen del esquema de
página de baja fidelidad de Zia’s Pizza. Este botón en la parte superior de la pantalla de inicio permite que
los usuarios puedan realizar pedidos de manera rápida y simple. Este botón proporciona una opción
sencilla para que los usuarios armen su propia pizza.

Digital
wireframes Easy access to navigation that’s screen reader friendly. Image of Zia's Pizza lo-fi wireframe
with menu open. Easy navigation was a key user need to address in the designs in addition to equipping
the app to work with assistive technologies.

Esquemas de página digitales: Un acceso fácil a la navegación que es amigable con los lectores de
pantalla. Imagen del esquema de página de baja fidelidad de Zia’s Pizza con el menú abierto. La
navegación simple fue una necesidad clave de los usuarios que había que abordar en los diseños, además
de equipar la aplicación para que pudiera trabajar con tecnologías de asistencia.

Formas creativas de hacer prototipos de papel

Hay muchas formas divertidas y creativas de hacer prototipos y esquemas de página de papel. Hasta
ahora, has aprendido sobre la forma más común: dibujar esquemas de página y prototipos en una hoja
de papel normal. Si te sientes imaginativo o quieres probar algo nuevo, explora los métodos que se
presentan en esta lectura.

Plantillas preimpresas
Las plantillas preimpresas permiten ahorrar tiempo al dibujar esquemas de página y prototipos. Los
cuadrados o los contornos del dispositivo para el que diseñas están preimpresos en la página, por lo
que no es necesario dibujarlos. Además, el espacio de 8 ½” × 11” del papel te permite incluir varias
pantallas de tu diseño en una hoja de papel, lo cual resulta útil cuando se dibuja un flujo o una
secuencia de acciones que se desea revisar una al lado de la otra.

Descarga e imprime estas plantillas PDF gratuitas para dibujar tus propios prototipos y esquemas de
página en papel:

 Esquema de teléfono móvil para esquemas de página y prototipos

 Contorno de rectángulo para esquemas de página y prototipos (tamaño estándar de pantalla
de teléfono móvil)
 Contorno de rectángulo para esquemas de página y prototipos (pantalla larga para
desplazarse)

Aquí hay un ejemplo de cómo un diseñador de UX de Google, Kaiwei, usó una plantilla preimpresa para
crear esquemas de página para el diseño de su aplicación.
Fichas
En lugar de esbozar todas tus ideas en un solo papel, intenta dibujarlas en un montón de fichas
diferentes. Cada ficha puede representar la pantalla de un teléfono móvil. Usa cinta adhesiva o alfileres
para pegar las fichas en una pizarra o en la pared, o colócalas en orden sobre una mesa.

Aquí hay un ejemplo de esquemas de páginas en fichas que utilizan un diseñador de UX de Google,
Dane, y su compañero de equipo.

Una ventaja de usar fichas individuales para crear cada pantalla de tu diseño es que puedes eliminar
fácilmente un dibujo que no te guste sin tener que borrar o tachar nada, como lo harías al dibujar
varias ideas en una hoja de papel. ¡Simplemente recicla la ficha que ya no necesitas!

Diseñar en fichas es especialmente útil para las sesiones de lluvia de ideas porque puedes agregar,
reordenar o eliminar fichas fácilmente del flujo de usuarios. Los miembros de tu equipo pueden crear
cada uno sus propias fichas con diseños únicos, que se pueden combinar en un flujo de usuario a
través de la aplicación o el sitio web que estás creando. Además, puedes reorganizar rápidamente
pantallas individuales o fichas y colocarlas en cualquier orden para seguir el flujo de usuarios a través
de tu aplicación.

Notas adhesivas
Las notas adhesivas son otra forma de explorar la creación de prototipos y esquemas de página de
papel. Como diseñador de UX, es una buena idea tener siempre notas adhesivas disponibles para que
puedas anotar una sola idea en cada una.

Intenta usar notas adhesivas de diferentes tamaños y colores para representar diferentes partes de tu
idea de diseño. O usa notas adhesivas de colores para señalar partes importantes de sus esquemas de
página y prototipos, como hicieron Dane y su equipo.
Plantillas
Las plantillas prefabricadas (a la venta) pueden ser muy útiles durante el proceso de creación de
prototipos y creación de esquemas de página en papel, especialmente si nunca antes has dibujado o te
sientes intimidado al tener que hacerlo. Las plantillas a menudo traen una regla incorporada, símbolos
e íconos que son habituales en los diseños de UX. Usar una plantilla como esta puede ayudar a que tus
dibujos se vean más prolijos y realistas.

Dispositivo de demostración
Un dispositivo de demostración es un trozo de papel u otro material recortado con forma de teléfono
móvil. Puedes colocar tus bocetos dentro del dispositivo de demostración para simular una
experiencia del usuario más realista con tu producto. ¿Recuerdas el dispositivo de demostración del
video con Karen que acabas de ver?

Algunos dispositivos de demostración son incluso más sofisticados, como un soporte prefabricado
cortado con láser con la forma de diferentes tipos de teléfonos móviles en el que se puede insertar una
ficha para simular una pantalla. El uso de un dispositivo de demostración te permite ver cómo se verá
tu diseño a escala en un teléfono móvil. Los teléfonos móviles tienen diferentes tamaños, por lo que el
hecho de que un diseño funcione en un iPhone, por ejemplo, no significa que aparecerá de la misma
manera en un Android. Los dispositivos de demostración pueden ayudar a mantener estas diferencias
en perspectiva y están hechos a escala para diferentes dispositivos.
Depende de ti
Un método para crear prototipos y esquemas de página en papel no siempre es mejor que otro. Es solo
una cuestión de cuáles son tus preferencias y necesidades particulares. ¿Necesitas saber cómo se verá
tu diseño en un tipo específico de dispositivo móvil? Prueba un recorte de dispositivo de demostración.
¿Estás en una reunión con los interesados y deseas mostrarles tus ideas de esquemas de página?
Dibújalos en una plantilla o en fichas. ¡Sé creativo y encuentra lo que mejor funcione para ti!

Formas creativas de hacer prototipos de papel

Hay muchas formas divertidas y creativas de hacer prototipos y esquemas de página de papel. Hasta
ahora, has aprendido sobre la forma más común: dibujar esquemas de página y prototipos en una hoja
de papel normal. Si te sientes imaginativo o quieres probar algo nuevo, explora los métodos que se
presentan en esta lectura.

Plantillas preimpresas
Las plantillas preimpresas permiten ahorrar tiempo al dibujar esquemas de página y prototipos. Los
cuadrados o los contornos del dispositivo para el que diseñas están preimpresos en la página, por lo
que no es necesario dibujarlos. Además, el espacio de 8 ½” × 11” del papel te permite incluir varias
pantallas de tu diseño en una hoja de papel, lo cual resulta útil cuando se dibuja un flujo o una
secuencia de acciones que se desea revisar una al lado de la otra.

Descarga e imprime estas plantillas PDF gratuitas para dibujar tus propios prototipos y esquemas de
página en papel:

 Esquema de teléfono móvil para esquemas de página y prototipos

 Contorno de rectángulo para esquemas de página y prototipos (tamaño estándar de pantalla
de teléfono móvil)
 Contorno de rectángulo para esquemas de página y prototipos (pantalla larga para
desplazarse)

Aquí hay un ejemplo de cómo un diseñador de UX de Google, Kaiwei, usó una plantilla preimpresa para
crear esquemas de página para el diseño de su aplicación.

Fichas
En lugar de esbozar todas tus ideas en un solo papel, intenta dibujarlas en un montón de fichas
diferentes. Cada ficha puede representar la pantalla de un teléfono móvil. Usa cinta adhesiva o alfileres
para pegar las fichas en una pizarra o en la pared, o colócalas en orden sobre una mesa.

Aquí hay un ejemplo de esquemas de páginas en fichas que utilizan un diseñador de UX de Google,
Dane, y su compañero de equipo.
Una ventaja de usar fichas individuales para crear cada pantalla de tu diseño es que puedes eliminar
fácilmente un dibujo que no te guste sin tener que borrar o tachar nada, como lo harías al dibujar
varias ideas en una hoja de papel. ¡Simplemente recicla la ficha que ya no necesitas!

Diseñar en fichas es especialmente útil para las sesiones de lluvia de ideas porque puedes agregar,
reordenar o eliminar fichas fácilmente del flujo de usuarios. Los miembros de tu equipo pueden crear
cada uno sus propias fichas con diseños únicos, que se pueden combinar en un flujo de usuario a
través de la aplicación o el sitio web que estás creando. Además, puedes reorganizar rápidamente
pantallas individuales o fichas y colocarlas en cualquier orden para seguir el flujo de usuarios a través
de tu aplicación.

Notas adhesivas
Las notas adhesivas son otra forma de explorar la creación de prototipos y esquemas de página de
papel. Como diseñador de UX, es una buena idea tener siempre notas adhesivas disponibles para que
puedas anotar una sola idea en cada una.

Intenta usar notas adhesivas de diferentes tamaños y colores para representar diferentes partes de tu
idea de diseño. O usa notas adhesivas de colores para señalar partes importantes de sus esquemas de
página y prototipos, como hicieron Dane y su equipo.

Plantillas
Las plantillas prefabricadas (a la venta) pueden ser muy útiles durante el proceso de creación de
prototipos y creación de esquemas de página en papel, especialmente si nunca antes has dibujado o te
sientes intimidado al tener que hacerlo. Las plantillas a menudo traen una regla incorporada, símbolos
e íconos que son habituales en los diseños de UX. Usar una plantilla como esta puede ayudar a que tus
dibujos se vean más prolijos y realistas.
Dispositivo de demostración
Un dispositivo de demostración es un trozo de papel u otro material recortado con forma de teléfono
móvil. Puedes colocar tus bocetos dentro del dispositivo de demostración para simular una
experiencia del usuario más realista con tu producto. ¿Recuerdas el dispositivo de demostración del
video con Karen que acabas de ver?

Algunos dispositivos de demostración son incluso más sofisticados, como un soporte prefabricado
cortado con láser con la forma de diferentes tipos de teléfonos móviles en el que se puede insertar una
ficha para simular una pantalla. El uso de un dispositivo de demostración te permite ver cómo se verá
tu diseño a escala en un teléfono móvil. Los teléfonos móviles tienen diferentes tamaños, por lo que el
hecho de que un diseño funcione en un iPhone, por ejemplo, no significa que aparecerá de la misma
manera en un Android. Los dispositivos de demostración pueden ayudar a mantener estas diferencias
en perspectiva y están hechos a escala para diferentes dispositivos.

Depende de ti
Un método para crear prototipos y esquemas de página en papel no siempre es mejor que otro. Es solo
una cuestión de cuáles son tus preferencias y necesidades particulares. ¿Necesitas saber cómo se verá
tu diseño en un tipo específico de dispositivo móvil? Prueba un recorte de dispositivo de demostración.
¿Estás en una reunión con los interesados y deseas mostrarles tus ideas de esquemas de página?
Dibújalos en una plantilla o en fichas. ¡Sé creativo y encuentra lo que mejor funcione para ti!

1.
Pregunta 1

Esta actividad te ayudará a entender cómo crear prototipos de baja fidelidad utilizando papel. Un
prototipo de baja fidelidad es un modelo sencillo e interactivo que proporciona una idea básica del
diseño de un producto, de modo que pueda probarse al principio del proceso de diseño. Los prototipos
en papel te permiten dibujar y comparar rápidamente múltiples ideas de diseño. Esto hace que los
prototipos en papel sean una gran herramienta para las sesiones de lluvia de ideas.
En esta actividad, usarás los esquemas de página de papel que creaste para la aplicación CoffeeHouse
en la actividad Practicar la creación de esquemas de página de papel para construir tu prototipo de
papel. Después de completar esta actividad, tendrás la oportunidad de comparar tu trabajo con un
modelo completado en el siguiente elemento del curso.

Puedes usar la investigación que realizaste para la aplicación CoffeeHouse para determinar el
recorrido del usuario o el flujo del usuario que sigue tu prototipo o puedes usar los ejemplos de
investigación que se proporcionan aquí.

Investigación de la aplicación CoffeeHouse

A continuación se muestran los mapas de recorrido de usuario de la aplicación CoffeeHouse, por

ejemplo, los usuarios Ali y Anika:

Paso 1: Reúne materiales y herramientas

Reúne los siguientes materiales y herramientas:

 Los esquemas de página en papel que creaste para la aplicación CoffeeHouse en una actividad
anterior del curso
 Un par de tijeras
 Un bolígrafo o un lápiz y un papel, por si falta alguna pantalla en el flujo de usuarios

Si omitiste la actividad Crear esquemas de página en papel, vuelve atrás y complétala para poder usar
los esquemas de página en papel para tu prototipo de papel.

Paso 2: Cortar cada pantalla

Con un par de tijeras, corta cada pantalla de esquema de página de papel. Todas las pantallas deben
ser sus propias piezas de papel separadas que se puedan colocar una al lado de la otra en una
secuencia.

Paso 3: Selecciona el recorrido del usuario al prototipo

Revisa los mapas de recorrido del usuario de la investigación de la aplicación CoffeeHouse y selecciona
el recorrido del usuario que quieras prototipar y probar, como hacer un pedido de café a través de la
aplicación.

Paso 4: Organiza las pantallas en orden

Piensa en el orden en que un usuario experimentará las pantallas en el recorrido del usuario. Organiza
las pantallas en una fila para seguir esta secuencia de recorrido del usuario: Comienza el pedido con la
pantalla en la que el usuario comenzará y finalizará el pedido con la última pantalla del recorrido.

Paso 5: Revisa la secuencia de tu prototipo de papel

Ahora que tus pantallas de papel están organizadas para seguir el recorrido del usuario, intenta
imaginar tu nuevo prototipo de papel como una aplicación real. Luego, realiza la secuencia como lo
haría un usuario. Esto puede ayudarte a determinar si las pantallas deben reorganizarse o si falta
alguna en el recorrido del usuario.

Si es necesario pulsar o hacer clic en algún elemento de las pantallas de papel para avanzar en la
aplicación móvil, es recomendable pulsar también en las pantallas de papel durante la revisión. Esto
podría incluir cualquier elemento, como botones o iconos de menú. Al principio puede parecer una
tontería, pero es una gran manera de averiguar si estos elementos se encuentran en las mejores
ubicaciones para el recorrido del usuario.

No dudes en reorganizar las pantallas para asegurarte de que el orden que has decidido crea un
recorrido claro y centrado en el usuario. Si falta alguna pantalla en el recorrido del usuario, usa tu
bolígrafo o lápiz y papel para dibujar estos esquemas de página que faltan.

Después de dibujar los esquemas de página que faltan, repite los pasos del 2 al 5 para agregar las
pantallas que faltan a tu prototipo.

Paso 6: Reflexiona sobre la finalización de esta actividad

Para tu prototipo de papel de baja fidelidad:

 ¿Cortaste cada pantalla de tus esquemas de página de papel para la aplicación CoffeeHouse?
 ¿Elegiste un recorrido de usuario específico para probar, como pedir un café a través de la
aplicación?
  ¿Organizaste las pantallas en la secuencia del recorrido del usuario?
 ¿Te aseguraste de que se incluyeran todas las pantallas del recorrido del usuario elegido?
 ¿Pusiste a prueba tu recorrido del usuario interactuando con tu prototipo? Por ejemplo,
presionando físicamente los botones en la pantalla para avanzar a la siguiente pantalla.
 ¿Resolviste los pasos que faltan en tu recorrido de usuario?

Modelo de la actividad: Practicar la creación de un prototipo de baja fidelidad

A continuación se presenta un modelo completo usando la aplicación para pasear perros de los videos
del curso, junto con una explicación de cómo el modelo cumple con las expectativas de la actividad
anterior.

Modelo

En este ejemplo, cada pantalla se recortó individualmente y se colocó secuencialmente de izquierda a

derecha. El orden se basó en el recorrido elegido por el usuario al programar un paseador de perros
con la aplicación. Las imágenes muestran un ejemplo de cómo los usuarios interactúan con este
prototipo presionando el botón de programación para avanzar a la siguiente pantalla.
Evaluación del modelo

El prototipo de papel sigue un claro recorrido del usuario a través de al menos cuatro fotogramas en un
flujo de navegación (fotogramas ilustrados como ejemplo). Las señales de navegación están
claramente indicadas en el prototipo y se indica la finalización con éxito de la actividad del flujo.

Ahora compara el modelo anterior con tu entregable completado. Evalúa lo que has hecho usando los
criterios utilizados para evaluar el modelo.

Mientras evalúas tu trabajo, revisa los siguientes criterios y asegúrate de que cumpla con cada uno:

 El prototipo está hecho de esquemas de páginas de papel para la aplicación CoffeeHouse.

 Se está probando un recorrido de usuario específico.
 Se incluyen todas las pantallas del recorrido del usuario elegido.
 Las pantallas están organizadas en la misma secuencia que el recorrido del usuario.
 Se indican al usuario las señales de navegación.
 Se indica al usuario la finalización satisfactoria del flujo de usuarios.
 Se ha señalado cualquier paso omitido en el recorrido del usuario.

¿Qué cosas hiciste bien? ¿En qué aspectos podrías mejorar? Mantén esta retroalimentación contigo a
medida que avances a lo largo del curso.

Obtén más información sobre la creación de prototipos de baja fidelidad en Figma

Ahora que has puesto tus ideas en papel con esquemas de página y prototipos de papel, ¡estás listo
para crear un prototipo digital en Figma! La creación de prototipos digitales facilita compartir, editar y
la colaborar en tus diseños, y te ayuda a acercarte un paso más a la visualización de tu producto final.
En esta lectura, repasaremos las instrucciones paso a paso para crear un prototipo de baja fidelidad en
Figma.

Prepárate para crear tu prototipo

Antes de comenzar a construir un prototipo en Figma, debes preguntarte cómo los usuarios pueden
interactuar con tu producto. Estas son algunas preguntas que debes tener en cuenta:

 ¿Cuáles son los flujos habituales de usuarios en tu producto?

  ¿Con qué botones interactuarán los usuarios? ¿En qué orden realizarán estas acciones?
 ¿Qué esperan los usuarios después de hacer clic en un botón o enviar un formulario?

Pensar en estas preguntas antes de comenzar a crear el prototipo te ayudará a diseñar para diferentes
y diversos tipos de interacciones de usuario. Utilizarás estas preguntas, junto con tus esquemas de
página y tu prototipo de papel, para crear un prototipo digital en Figma.

Recuerda, los esquemas de página se componen de texto, formas básicas y líneas. Utilizarás esquemas
de página y prototipos de baja fidelidad para mostrar a los interesados cómo se verá tu diseño sin
incluir colores ni contenido detallado. Tus diseños pueden (y lo harán) cambiar con el tiempo, por lo
que es totalmente normal si aún no sabes exactamente a dónde deben ir las cosas. Cuando se trata de
esquemas de página, lo importante es crear un boceto de tu diseño que transmita claramente tus
ideas.

Cuando tus esquemas de página están listos para funcionar en Figma, es hora de hacer la transición a
un prototipo de baja fidelidad. ¿Listo? ¡Empecemos!

Crea un prototipo en Figma

Sigue estos cinco pasos para crear un prototipo de baja fidelidad en Figma para tus propios diseños de
aplicaciones:

1. Crear esquemas de página en Figma.

Abre Figma y comienza un nuevo proyecto. Como se muestra en la imagen a continuación, haz clic en
el icono de hamburguesa en la esquina superior izquierda de la pantalla, haz clic en Archivo, luego
haz clic en Nuevo.
Selecciona la herramienta Marco de la barra de herramientas en la parte superior de la pantalla y elige
un marco que coincida con el dispositivo para el que estás diseñando. El marco correcto aparecerá
automáticamente en tu pantalla. O puedes crear un marco de tamaño personalizado seleccionando la
herramienta de marco y arrastrando el cursor por la pantalla hasta el tamaño deseado.

A continuación, crea los elementos de tu diseño usando las herramientas de Forma ubicadas en la
barra de herramientas en la parte superior de la pantalla, como se describe en la imagen a
continuación. Hay varias formas diferentes que se pueden elegir haciendo clic en la flecha desplegable.
Recuerda que los esquemas de página se dibujan normalmente con formas básicas, como cuadrados,
rectángulos, círculos y líneas. Para obtener más información, consulta este artículo sobre cómo utilizar
las herramientas de formas en el blog de Figma.
Luego, usa la herramienta Texto para agregar etiquetas, descripciones y encabezados a tus esquemas
de página. El icono de Texto se describe en la imagen a continuación. Haz clic donde deseas agregar
texto y comienza a escribir para crear un nuevo cuadro de texto. Los cuadros de texto se pueden mover
arrastrándolos, y las opciones de modificación están disponibles en el menú de la derecha de la
pantalla.

Repite este proceso para cada pantalla de tu aplicación. En este punto, debes tener un conjunto
completo de esquemas de página que representen el flujo de usuarios a través de la aplicación que
estás diseñando. Asegúrate de organizar los esquemas de página en un orden lógico para que la
creación de prototipos sea más fluida.

2. Cambiar el nombre de los esquemas de página.

Haz clic en el nombre de una pantalla para seleccionarla. Luego, ve al panel Capas en la izquierda de la
pantalla. Haz doble clic en el nombre del marco seleccionado en el panel Capas para cambiar su
nombre, como se muestra en la imagen a continuación.
Repite este proceso para etiquetar claramente cada pantalla del esquema de página, como "Inicio" o
"Configuración". Los nombres de las pantallas de la aplicación para pasear perros se describen en la
imagen a continuación.

3. Ir de la pestaña Diseño a la pestaña Prototipo.

Las pestañas Diseño y Prototipo están en el menú en la parte superior derecha de la pantalla. Estas
pestañas te permiten cambiar entre editar tus diseños y trabajar en los elementos del prototipo
interactivo. Presta atención a la pestaña en la que te encuentres, de lo contrario, es posible que
algunas cosas no funcionen como esperas. Para crear un prototipo de baja fidelidad, cambia a la
pestaña Prototipo.

4. Conectar un nodo.

Coloca el cursor sobre cualquier elemento de tus esquemas de página y aparecerá un pequeño círculo
con un signo más en el medio, como se muestra en la imagen de abajo. Esto se denomina nodo. Un
nodo significa que puedes conectar pantallas en función de cómo te gustaría que los usuarios se
movieran de una pantalla a la siguiente. Por ejemplo, puedes conectar una pantalla que tiene un
elemento interactivo, como un botón, a la pantalla que muestra el resultado de esa interacción.
Elige el elemento que deseas que sea interactivo y haz clic en el nodo que aparece cuando pasa el
mouse por encima. Debería aparecer una flecha de conexión. Con el cursor, arrastra la flecha hasta la
pantalla a la que quieres que se conecte el elemento y luego suelta el clic. Los dos elementos ahora
están conectados, lo que significa que el usuario será llevado a la pantalla de inicio cuando interactúe
con el elemento seleccionado.

5. Repetir este proceso para cada elemento que se conecte a otra pantalla.

En la aplicación para pasear perros, el usuario comienza en la pantalla de inicio, hace clic en el botón
"programar" y se dirige a una nueva pantalla en la que puede programar una fecha y una hora para que
venga el paseador de perros. A continuación, el usuario puede explorar una lista de paseadores de
perros disponibles. Luego, el usuario hace clic en el botón "conocer más" debajo del perfil de un
paseador de perros y selecciona el botón "libro" en la siguiente pantalla. Se los lleva a una pantalla de
pago y, finalmente, se los dirige a una pantalla de confirmación después de enviar su pago. Observa
cómo cada paso, o nodo, fluye lógicamente hacia el siguiente, como lo haría un usuario real a través de
una aplicación real.

Para conectar todos tus esquemas de página en un prototipo completamente funcional, revisa cada
uno de los elementos interactivos en orden y pregúntate con qué necesita conectarse ese elemento.
Piensa en esto como una auditoría de tus diseños; asegúrate de que cada elemento interactivo que
hayas diseñado se conecte a algo. Si un elemento interactivo no tiene una pantalla a la que conectarse,
ese elemento debe eliminarse de tu diseño o debe crearse una nueva pantalla. Visualiza cómo
funcionarán los botones y las páginas de tu aplicación para tener una mejor idea acerca de qué
elemento es responsable de cuáles acciones.

¡Ahora conoces los pasos necesarios para crear un prototipo de baja fidelidad en Figma! Estás listo
para crear tu propio prototipo de baja fidelidad en Figma. Puede ser muy emocionante ver cómo tu
diseño toma forma y empieza a funcionar como un producto real. Buena suerte.

1.
Pregunta 1

Esta actividad te ayudará a aplicar las habilidades de creación de prototipos que has aprendido. En
esta actividad, crearás un prototipo de baja fidelidad de tu flujo de usuario completo para la aplicación
CoffeeHouse. A continuación, puedes empezar a probar la funcionalidad y la usabilidad básicas.

Después de completar esta actividad, tendrás la oportunidad de comparar tu trabajo con un modelo
completado en el siguiente elemento del curso.
Antes de empezar, asegúrate de tener abierto el proyecto de Figma que contiene los esquemas de
página que creaste en la actividad Practicar la creación de esquemas de página digitales en Figma para
tu proyecto CoffeeHouse abierto.

Paso 1: Ir de la pestaña Diseño a la pestaña Prototipo

En la esquina superior derecha, hay una opción para cambiar de diseñar esquemas de página a
conectarlos en un prototipo. Cambia a la pestaña Prototipo

Paso 2: Selecciona el nodo de conexión de un elemento

En el modo de prototipo de Figma, cuando hagas clic en un elemento de tu esquema de página,

notarás un pequeño círculo azul. Al pasar el mouse por encima, aparece un signo más. Esto se llama
nodo de conexión. Con él, puedes decirle a Figma qué pantalla mostrar a continuación cuando se hace
clic en ese elemento.

Paso 3: Haz una conexión entre un elemento y una pantalla

Usando ese nodo de conexión, arrastra para hacer una conexión a la siguiente pantalla. Cuando se
establezca la conexión, tendrás algunas opciones disponibles en la ventana emergente de Detalles de
interacción. Como se trata de un prototipo de baja fidelidad, la interacción estándar (“On Tap -
Animación: Instantánea”) funcionará bien. Si conectas accidentalmente la pantalla equivocada,
también puedes cambiarla en el menú desplegable de la ventana emergente de Detalles de
interacción.

Mientras trabajas en este proceso, piensa críticamente sobre el elemento que estás conectando.
Puedes conectar cualquier elemento a cualquier página en Figma, pero asegúrate de que un usuario
sepa que puede o debe interactuar con un elemento. Pregúntate lo siguiente: "¿Mis botones parecen
botones?" Las indicaciones de navegación ayudan a guiar al usuario a través de tu producto y son la
base sobre la que se construye tu prototipo.
Repite los pasos 2 y 3 hasta que hayas conectado todos los elementos a sus respectivas pantallas.
Puede que termine un poco desordenado, ¡pero no pasa nada! Solo estás observando todas las formas
en que un usuario puede navegar por tu prototipo.

Paso 4: Obtén una vista previa de tu prototipo en acción

Una vez realizadas las conexiones, haz clic en el botón Reproducir de la esquina superior derecha para
asegurarte de que todo funciona como se esperaba. Al ver el prototipo, también puedes compartirlo;
esto te será útil cuando quieras recibir comentarios sobre tu prototipo.

¡Felicidades! Has construido tu primer prototipo de baja fidelidad. Producir un producto digital
interactivo es algo muy importante.

Paso 5: Reflexiona sobre la finalización de esta actividad

Asegúrate de abordar las siguientes preguntas sobre tu entregable:

 ¿Conectaste todos los esquemas de página necesarios para completar el flujo de usuarios
principal?
 ¿Proporcionaste un medio para que los usuarios avancen y retrocedan dentro del flujo?
 ¿Están claramente detalladas las indicaciones de navegación en tu prototipo?
 ¿Indicaste la finalización con éxito de la actividad simulada?
  ¿Regresaste a los usuarios a un origen de muestra después de completar la actividad
simulada?

Paso 6: Guarda tu trabajo

Al completar estas actividades, recuerda:

62. Toma fotos de tu progreso y guárdalas. Estas fotos pueden incluir el progreso de los bocetos,
diferentes etapas de la actividad, imágenes de sesiones de lluvia de ideas e incluso fotos de ti
mismo trabajando.
63. Guarda todo tu trabajo en tu computadora, en un disco duro o en una carpeta de Google Drive
para asegurarte de tener todos los recursos que necesitarás más adelante en el curso para tu
portfolio.

Modelo de la actividad: Practicar la creación de un prototipo de baja fidelidad en Figma

Aquí hay un modelo completo de la actividad anterior. Al ver el prototipo a continuación, ten en cuenta
que le permite al usuario explorar la funcionalidad potencial de la aplicación y le permite comprender
cómo se muestra y prioriza la información.

Modelo

Ve el prototipo en el sitio web de Figma. Haz clic en los botones etiquetados para navegar por el
prototipo.

Evaluación del modelo

Observa cómo este prototipo:

  Conecta todas las pantallas necesarias para completar el flujo de usuario principal
 Permite a los usuarios retroceder y avanzar
 Incluye indicaciones de navegación (los botones parecen botones). Por ejemplo, el elemento
"Iniciar nuevo pedido" es visualmente diferente del elemento "Favoritos del equipo" que se ve
arriba. Uno es un botón con el que un usuario puede interactuar y el otro es un encabezado
para una sección.

El flujo de usuarios principal para el prototipo es comenzar un nuevo pedido, agregarle artículos y
luego pagar ese pedido. La tarea de este prototipo también tiene un final y devuelve a los usuarios a la
pantalla de inicio una vez finalizada.

Ahora compara el modelo anterior con tu entregable completado. Evalúa lo que has hecho usando los
criterios utilizados para evaluar el modelo.

Mientras evalúas tu trabajo, revisa los siguientes criterios y asegúrate de que cumpla con cada uno:

 Se incluyen todos los esquemas de página necesarios para completar el flujo de usuario
principal.
 Hay una forma para que los usuarios avancen y retrocedan dentro del flujo.
 Las indicaciones para la navegación están claramente indicadas dentro del prototipo.
 Se indica a los usuarios la finalización con éxito de la actividad simulada.
 Los usuarios regresan a un origen de muestra después de completar la actividad simulada.

¿Qué haces bien? ¿En qué aspectos podrías mejorar? Mantén esta retroalimentación contigo a medida
que avances a lo largo del curso.

Accede a los prototipos de Figma en dispositivos móviles

Habrá muchas ocasiones en las que estarás lejos de tu computadora y necesitarás acceder a tus
diseños. Imagina lo siguiente: Estás esperando en la cola del supermercado y entablas una
conversación con la persona que tienes delante de ti. Te enteras de que son diseñadores de UX en una
institución financiera local y están ansiosos por ver parte de tu trabajo. Entras en pánico cuando te das
cuenta de que no tienes tu computadora contigo. ¿Cómo les mostrarás los diseños de aplicaciones que
has creado en este curso?

Pues bien, ¡no temas! Puedes ver fácilmente tus diseños en Figma en un dispositivo móvil, utilizando la
aplicación Figma Mirror para iOS o Android. Esta aplicación te permite crear un entorno más realista e
inmersivo para tus diseños, sin el encabezado y pie de página del navegador. Los diseños en la pantalla
de tu dispositivo móvil se actualizan en tiempo real a medida que realizas cambios en la versión de
escritorio de Figma. No es posible editar diseños en la aplicación Figma Mirror, pero la capacidad de
obtener una vista previa de cómo aparecen los diseños en el dispositivo previsto es muy valiosa.

Si deseas obtener más información, lee este artículo de ayuda de Figma sobre la visualización de
prototipos desde un dispositivo móvil.

Opcional: obtén más información sobre el sesgo en el diseño de UX

Como diseñador de UX, es fundamental evitar sesgos en tu trabajo y hacer que tus diseños sean
inclusivos para todos los usuarios. Estos tres recursos incluyen estudios de casos y aprendizajes sobre
cómo hacer que la tecnología sea más inclusiva:

 Gender Shades, por Joy Buolamwini. Cuando Joy era estudiante de doctorado en el MIT Media
Lab, descubrió que los algoritmos de reconocimiento facial rara vez se probaban en mujeres
negras. Entonces, realizó un estudio sobre el reconocimiento facial y la industria tecnológica.
 Los resultados mostraron que los algoritmos identificaron erróneamente a las mujeres negras.
Su trabajo generó conciencia sobre la necesidad de una tecnología más inclusiva.
 Lo justo no es lo predeterminado: Por qué la tecnología inclusiva requiere más que buenas
intenciones, por Josh Lovejoy. Este artículo sobre Google Design explora el problema del
diseño de valores predeterminados y analiza las estrategias para hacer de la equidad un
componente central del proceso de aprendizaje automático.
 Discriminación deliberada: Las múltiples formas en que las decisiones de diseño tratan a las
personas de manera desigual, por Lena V. Groeger. Este artículo de ProPublica analiza la
discriminación en el diseño y expone la necesidad de un diseño imparcial, diverso y accesible
para todos los usuarios.

Evitar patrones engañosos

¿Alguna vez marcaste la casilla en una aplicación para una prueba gratuita suponiendo que no
había obligación de compra y descubriste luego que se había hecho un cargo en tu tarjeta de
crédito? Y lo que es peor, ¿no había una manera fácil de cancelar la membresía? O tal vez te hayas
suscrito a un boletín de noticias solo para darte cuenta, después de hacer clic en "Enviar", de que
también habías aceptado suscribirte a varios boletines "relacionados". ¡Le pasa a todo el mundo!

Estas experiencias son ejemplos de patrones engañosos. Los patrones engañosos engañan a los
usuarios para que completen involuntariamente una acción en línea. Los patrones engañosos
pueden incluir una variedad de elementos visuales, interactivos, de audio o de movimiento que se
agregan a los diseños para engañar a los usuarios.

Aunque el término "patrones oscuros" se usa a menudo en la industria, en Google y en otros

lugares, los diseñadores a menudo usan la frase "patrones engañosos" para evitar referirse a algo
problemático como "oscuro" y potencialmente "malo". En cambio, la palabra "engañoso" se
centra en la táctica en sí misma, que engaña a los usuarios para que hagan o compren algo que de
otro modo no hubieran hecho o comprado.

Los patrones engañosos fueron expuestos por primera vez en 2010 por el diseñador de UX Harry
Brignull. Enumeró 11 tipos de patrones; algunos de los patrones son los discutidos en el video.
Echemos un vistazo más de cerca a algunos patrones engañosos comunes que puedes encontrar
en tu trabajo como diseñador de UX.

Continuidad forzada

Continuidad forzada: La práctica de cobrar a un usuario por una membresía sin una advertencia
o un recordatorio.

Piensa en el escenario del principio de esta lectura: un usuario hace clic en un cuadro en una
aplicación pensando que está obteniendo una prueba gratuita sin obligación de compra y
descubre más tarde que se hizo un cargo en su tarjeta de crédito, y no hay una manera fácil para
cancelar la membresía. Como diseñador de UX, sé sincero y transparente con los usuarios.

 Notifica a los usuarios antes de que finalicen su prueba gratuita y antes de que se les
cobre.
 Facilita a los usuarios la cancelación de su membresía. No hagas que los usuarios busquen
los pasos para cancelar.
  Proporciona un enlace para ayudar a los usuarios en el proceso de cancelación.
 Asegúrate de que los elementos visuales de tus diseños, como los botones, estén
etiquetados claramente.

Revisar la compra

Revisar la compra: Cuando un usuario tiene que eliminar un artículo de su carrito si no quiere
comprarlo, lo cual es un paso adicional que podría olvidarse fácilmente.

Un ejemplo de revisar la compra es cuando se agrega un artículo adicional al carrito de compras

de un usuario durante el pago o se preselecciona un plan o servicio adicional como "agregar a mi
carrito" durante el proceso de pago. Una manera fácil de evitar este patrón engañoso en tus
diseños es asegurarte de que no haya casilleros preseleccionados que agreguen artículos al carrito
de un usuario. No debería haber sorpresas sobre lo que el usuario espera comprar.

Costos ocultos

Costos ocultos: Cargos ocultos o inesperados en el carrito del usuario que no se revelan hasta el
final del proceso de pago.

Un ejemplo del patrón engañoso de los costos ocultos es cuando un usuario piensa que está
pagando una cantidad específica por un producto o servicio, pero, al final del pago, descubre que
hay tarifas adicionales. Las aplicaciones y los sitios web agregan estos costos ocultos con la
esperanza de que los usuarios estén demasiado cansados para encontrar otro sitio con productos
más baratos y no estén dispuestos a pasar por todo el proceso de pago nuevamente en otro lugar.

En tus propios diseños, asegúrate de proporcionar a los usuarios toda la información relacionada
con los precios por adelantado. Una buena forma de evitar costos ocultos es tener una
calculadora disponible durante la compra donde el usuario pueda calcular costos adicionales,
como envío e impuestos, antes de pagar.

Manipulación de usuario

Manipulación de usuario: Cuando se hace sentir a los usuarios culpables cuando optan por no
participar en algo.

Un ejemplo de Manipulación de usuario es cuando un usuario intenta hacer una elección y la copia
dentro del botón intenta hacerlo sentir culpable por su elección. Se añaden con la esperanza de
que los usuarios decidan optar por un servicio que se brinda porque les preocupa perdérselo.

Mientras diseñas, piensa detenidamente en las palabras que utilizas en los botones y en las
pantallas de confirmación para evitar manipular las emociones de tus usuarios.
Urgencia

Urgencia: Intentar convencer a los usuarios de que compren un artículo antes de que se les acabe
el tiempo y se pierdan el "increíble" precio de hoy.

Un ejemplo de urgencia puede ser cuando se abre una ventana emergente en un sitio web para
promocionar una oferta solo durante la próxima hora o un cupón que vence en treinta minutos. El
objetivo de la urgencia es apresurar al usuario para que realice una compra en un período de
tiempo limitado, de lo contrario, perderá una oferta increíble y tendrá que pagar el precio
completo.

La urgencia no se trata solo de ofertas y acuerdos que son limitados, se trata de agregar una
mayor presión sobre el usuario para que se comprometa a realizar una compra rápidamente. En
tus diseños, piensa en cómo estás utilizando la urgencia y asegúrate de no utilizar este patrón
engañoso para manipular a tus usuarios para que realicen ventas rápidamente.

Escasez

Escasez: Cuando un sitio web hace que los usuarios sean muy conscientes del número limitado de
artículos en stock.

Un ejemplo de escasez es cuando un sitio web dice que solo quedan cinco de este artículo,
generalmente seguido de un mensaje que insta al usuario a realizar una compra antes de que sea
demasiado tarde. Esta es una forma en que se puede aplicar un sentido de urgencia, como se
mencionó anteriormente, a la venta de un producto.

En tus diseños, piensa en lo que los usuarios necesitan saber sobre una compra que van a realizar
y si se está utilizando la escasez para instarlos a comprometerse con una compra impulsiva o si se
pretende informar a los usuarios de la disponibilidad de un producto. Los diseñadores siempre
deben apuntar a informar y no a engañar a los usuarios.

¿Qué puedes hacer para evitar patrones engañosos?

En tu papel de nuevo diseñador de UX, puedes ayudar a prevenir patrones engañosos si los
conoces. De esa manera, cuando veas un patrón engañoso en acción, podrás corregirlo. Recuerda,
los patrones engañosos no son éticos y deben evitarse. Ser claro y honesto con tus usuarios
fortalecerá su confianza en tu marca y en tu producto.

Comprender la economía de la atención

Como diseñador de UX, el producto que crees competirá constantemente por la atención de los
usuarios. Si los usuarios están prestando atención a un evento, como una notificación en su teléfono
móvil, significa que están ignorando otro. Solo hay 24 horas en un día, por lo que los usuarios deben
ser selectivos sobre cómo gastan ese tiempo. Esta batalla por la atención de los usuarios se conoce
como economía de la atención.

El término economía de la atención se originó con el psicólogo y premio Nobel Herbert A. Simon, quien
creía que existen límites en lo que los humanos pueden pensar y hacer al mismo tiempo. Muchos
científicos creen que los humanos no son muy buenos para realizar múltiples tareas; la tecnología
debe ayudar a los usuarios, no distraerlos. Cuanto más distraída esté una persona, es menos probable
que complete bien una tarea.

El choque entre atención y distracción es la razón por la que los diseñadores de UX deben considerar
cómo los productos que diseñan afectarán el comportamiento de una persona. Simon dijo una vez:
"Una gran cantidad de información crea pobreza de atención". En tu rol como nuevo diseñador de UX,
es importante que la tecnología mejore la vida de tus usuarios y no los perjudique. Los diseñadores
deben asegurarse de no diseñar sus productos de una manera que fomente comportamientos
adictivos que podrían afectar negativamente la vida de los usuarios.

On the left, they

are greyscale and have their eye closed, and have icons to the left such as a checklist, a house, a
stationary bike, a calendar, a baby. On the right, they are more colorful and have an eye open. To the
right of them, there are icons like a video game controller, text message conversation, a laptop, a phone
with various app notifications

El concepto de economía de la atención también explica cómo la interacción con la tecnología puede
causar depresión o ansiedad en algunas personas. Por ejemplo, un usuario puede sentirse triste
cuando no escucha o ve nuevas notificaciones en su teléfono, o puede experimentar el miedo a
perderse algo (también conocido como FOMO) si no actualiza continuamente su feed de redes sociales
o revisa sus mensajes. Incluso los detalles aparentemente pequeños, como los colores utilizados y el
volumen de las notificaciones, pueden distraer a los usuarios o hacer que se sientan ansiosos.

La tecnología hace que muchas cosas sean más rápidas y fáciles, pero no debería controlar la vida de
las personas. Recientemente, las empresas han comenzado a comprender el impacto psicológico de la
tecnología y están actualizando sus diseños para ayudar a los usuarios a mantenerse alejados de las
trampas de la economía de la atención. Por ejemplo, en Google, el kit de herramientas de Bienestar
digital ayuda a los usuarios a administrar mejor el uso que hacen de sus teléfonos y la cantidad de
tiempo que les dedican.

Apple también actualizó sus aplicaciones para que no envíen notificaciones mientras los usuarios
conducen. Está en la naturaleza humana querer revisar los mensajes tan pronto se recibe una
notificación, pero implementar esta función ayuda a mantener seguros a los usuarios. Este es solo un
ejemplo de cómo el diseño puede volverse más ético y considerado.

Es una buena idea pensar en la economía de la atención al comenzar a trabajar como diseñador de UX.
Estas son algunas de las mejores prácticas que debes considerar para evitar malas decisiones de
diseño:

 Evita patrones engañosos. Sé honesto con los usuarios. Piensa en tu propósito de diseño y
cómo tus propios valores se alinean con el diseño.
 Piensa en objetivos y métricas. Comprende los objetivos comerciales y los indicadores clave
de rendimiento de tu empresa. Presta atención a cómo estos objetivos comerciales pueden
contradecirse o alinearse con los objetivos de tus usuarios.
 Comparte buenas prácticas de diseño con las personas con las que trabajas. Comprende tu
posición de poder como diseñador de UX. Tienes la capacidad de influir para siempre en el
 proceso de toma de decisiones y asegurarte de que se tomen las decisiones de diseño
correctas.

La idea de la economía de la atención se ha vuelto cada vez más importante para la discusión de cómo
el diseño puede afectar positiva y negativamente a los usuarios. Cuanto más respetemos el tiempo, la
atención y las experiencias de los usuarios, más fácil será mantener el enfoque del diseño en las
personas, sus necesidades y las formas en que pueden disfrutar de la tecnología.

Si quieres obtener más información sobre la economía de la atención, consulta este artículo de Nielsen
Norman Group o este artículo de Berkeley Economic Review.

Comprende tu influencia como diseñador de UX

Los diseñadores de UX tienen una oportunidad única de mejorar la forma en que la tecnología influye
en la vida de las personas en todo el mundo. El diseño ético consiste en comprender cómo tu trabajo
de diseño afecta al mundo. Esta lectura te ayudará a comprender mejor tu influencia en la sociedad
como diseñador de UX y las formas de ser responsable a medida que avances en tu carrera de diseño.

Como diseñador de UX, debes considerar las necesidades de todos los diferentes tipos de personas,
independientemente de su privilegio o poder. La sociedad a menudo suele permitir a quienes tienen
más privilegios y poder dar forma a la cultura dominante. Una cultura dominante afecta a los valores
o normas que son importantes para otras culturas. Si la influencia de una cultura dominante es
demasiado fuerte, es posible que muchos puntos de vista culturales no se consideren en el proceso de
diseño. Esto significa que algunos usuarios podrían quedar fuera.

Tu objetivo como diseñador es siempre poner las necesidades de los usuarios como prioridad al crear
un producto, y eso significa comprender a todos los usuarios potenciales del producto. Realizar una
investigación exhaustiva con un grupo diverso de personas es una excelente manera de asegurarte de
que tu trabajo satisfaga las necesidades de todos los usuarios. Trata de notar las suposiciones sobre
los usuarios que aportas al proceso de investigación, luego piensa en formas de desafiar esas
suposiciones. Ten en cuenta cuestiones como las siguientes:

 ¿En qué se diferencian de ti las personas que utilizan tu producto?

 ¿Cómo puedes ayudar a las personas de culturas no dominantes a sentirse más incluidas en el
diseño de tu producto?
 ¿Existe algún desafío que las personas de ciertos grupos o antecedentes puedan enfrentar al
experimentar tu producto?
 Si te sientes de cierta manera sobre el producto que estás diseñando, ¿qué es lo opuesto a ese
sentimiento? Lo más probable es que uno de tus usuarios tenga esa perspectiva opuesta.

Al diseñar productos, considera cómo las poblaciones marginadas y subrepresentadas podrían

reaccionar a tus diseños. Una población marginada es aquella en la que las personas experimentan
discriminación o exclusión de la sociedad en general debido a características específicas o experiencias
de vida que erróneamente se consideran inferiores. A continuación, se muestran algunos ejemplos de
poblaciones marginadas:
  Personas con discapacidad
 Personas con acceso limitado a la tecnología
 Personas que hablan diferentes idiomas

Es importante diseñar productos que sean inclusivos y de acceso fácil para todos los usuarios. Por
ejemplo, si un usuario está desempleado, es posible que no tenga acceso a una computadora con
Internet en su casa. Los usuarios deberían poder completar una solicitud de trabajo con la misma
facilidad en un teléfono móvil que en una computadora de escritorio o portátil.

Las poblaciones subrepresentadas son grupos de personas cuyos valores y experiencias no están
representados con suficiente frecuencia en una sociedad moldeada por la cultura dominante y su
punto de vista. Las poblaciones subrepresentadas incluyen personas de ciertos géneros o
sexualidades, personas de color y minorías étnicas, entre otras.

Piensa en cómo el enfoque del diseño de un diseñador puede verse afectado por su educación,
antecedentes y circunstancias de la vida. Por ejemplo, si tu idea predeterminada de una familia es un
hogar con dos padres, es posible que no consideres las necesidades o perspectivas de las familias con
un solo padre u hogares multigeneracionales al diseñar productos.

Tanto las poblaciones marginadas como las subrepresentadas no forman parte de la cultura
dominante, por lo que a menudo no se las reconoce en el proceso de diseño a menos que el diseñador
tome la decisión consciente de incluirlas. A medida que avances en el diseño de UX, intenta encontrar
formas de incluir a los usuarios marginados y subrepresentados con más frecuencia en tu propio
pensamiento de diseño. Pregúntate lo siguiente:

 ¿Cómo puedo diseñar productos para que la cultura dominante no siempre se considere la
norma?
 ¿Cómo puedo diseñar productos de manera que fomente la inclusión de todas las
perspectivas?

Al hacer esto, ayudarás a crear diseños de productos que sean inclusivos para todos los usuarios.

Los casos extremos son situaciones que experimenta un usuario con un producto para el que los
diseñadores no se prepararon. La situación u obstáculo que surge está fuera del control del usuario
para solucionarlo. Como aprendiste anteriormente en el programa de certificación, una buena
experiencia del usuario anticipa los casos extremos y redirige a los usuarios al camino feliz cuando las
cosas no salen según lo planeado.

Debes abordar los casos extremos con consideración porque pueden promover el sesgo. Es importante
anticipar problemas potenciales que podrían surgir para todos los diferentes tipos de usuarios. Debes
ser flexible y estar listo para ajustar tus diseños a lo largo del proceso para tener en cuenta este tipo de
problemas inesperados entre grupos de usuarios que quizás no hayas considerado inicialmente.

El diseño inclusivo significa tomar decisiones de diseño que tengan en cuenta identificadores
personales, como la capacidad, la raza, la situación económica, el idioma, la edad y el género. Tener un
equipo diverso de investigadores y diseñadores, incluidos los de poblaciones tradicionalmente
excluidas, es clave para el diseño inclusivo. Esta práctica asegura que una variedad de perspectivas
únicas esté presente durante todas las fases del proceso de diseño.

El objetivo de un diseñador de UX es crear experiencias que sean accesibles para los usuarios con la
más amplia gama de habilidades. En otras palabras, nadie debe ser excluido del uso de un producto
porque los diseñadores no consideraron sus necesidades al crearlo. En el diseño inclusivo, no existe lo
normal y no hay una persona "promedio" para la cual diseñar.

Para ver un ejemplo del mundo real, consulta este episodio del podcast de InVision "DesignBetter",
con el líder de diseño inclusivo de Airbnb, Benjamin Evans.

Una forma de asegurarte de que los diseños de tus productos sean inclusivos para todos los usuarios
es responsabilizarte ante las personas con las que trabajas y los usuarios para los que estás diseñando.
Busca las opiniones de usuarios, compañeros de trabajo e interesados que sean diferentes a ti. A
medida que aprendas más sobre tus perspectivas, enfoques y cómo los afectan las situaciones, puedes
incorporar tus conocimientos en tus diseños.

Aquí hay algunas ideas para poner en práctica el diseño ético:

Crea personas inclusivas

Ten en cuenta a los usuarios marginados o subrepresentados al crear personas para evitar atender
solo a los usuarios que parecen "típicos" o universales. Ser intencional e inclusivo a la hora de crear
personas evitará que tu producto promueva las mismas ideas sobre qué tipos de culturas se valoran o
no.

Como diseñador de UX, aún debes usar factores demográficos prácticos, como la edad, el género y la
capacidad para crear personas, pero debes ser flexible y estar listo para cambiarlos cada vez que notes
sus limitaciones.

Amplía tu definición de "interesados"

Tradicionalmente, podrías pensar en los interesados como líderes de proyectos, gerentes,

inversionistas y aquellos en roles de toma de decisiones de alto nivel. Pero, si amplías la definición del
término, un interesado es cualquier persona o lugar al que un proyecto puede afectar. Al ampliar la
definición de interesados para los que estás diseñando, puedes diseñar con una audiencia mucho más
amplia en mente.

Incrementa la colaboración

Cuanto más colabores con los diferentes tipos de personas que se ven afectadas por tus productos,
más información obtendrás de su participación. Y aunque en general eso es mejor para el bien de la
sociedad, a menudo también es mejor para el diseño de tu producto.

A continuación, se incluyen algunos aspectos que debes considerar para ayudarte a colaborar mejor
con muchos tipos diferentes de personas:
  Pregúntate lo siguiente: ¿Los pequeños detalles que intervienen en las decisiones de diseño
fomentan la inclusión de todas las perspectivas?
 Piensa más allá del diseño universal. Incluso los principios de diseño más universales deben
modificarse para adaptarse a un nuevo contexto, y ese contexto se vuelve más amplio a
medida que interactúas con usuarios más diversos.
 Considera las soluciones de diseño "multiversal". Multiversal (o Pluriversal) se refiere a las
muchas formas en que un diseño funciona para diferentes personas, mientras que universal
significa que un método de diseño funciona para muchos usuarios. Un principio de diseño
multiversal significa asegurarse de que un diseño tenga más de un punto de entrada o más de
una forma de experimentarlo de manera significativa. Por ejemplo, al diseñar para alguien que
ve y para alguien que no ve, ambos deberían poder experimentar el diseño final por igual, sin
perderse nada.

Todavía queda mucho trabajo por hacer para asegurarnos de que los diseñadores de UX incorporen
prácticas más éticas e inclusivas, pero, al aprender estos conceptos ahora, estás desempeñando un
papel importante para impulsar la industria. Tienes la oportunidad de marcar la diferencia en el
mundo del diseño para ti, otros diseñadores y los usuarios de tus productos. Sé responsable, sé
inclusivo y no olvides el impacto que tu trabajo puede tener en el mundo.

Hay mucho que aprender sobre la importancia del diseño centrado en la equidad. El recorrido de
diseñar con equidad realmente nunca termina. Se requiere un aprendizaje y un crecimiento constantes
para diseñar experiencias significativas para usuarios de todo tipo. Si tienes tiempo, te recomendamos
que consultes estos recursos opcionales para seguir profundizando tus conocimientos.

 Benjamin Evans: El poder del diseño inclusivo: un episodio del Podcast Design Better, de
InVision
 Cómo diseñar y gestionar evaluaciones centradas en la equidad: UNICEF, centrado en la
sección sobre "¿Qué es la equidad y por qué es importante?", que se encuentra en las páginas
18-24 del PDF (o las páginas 2-8 en la esquina inferior izquierda del documento)

Opcional: obtén más información sobre el diseño ético

Como diseñador de UX, tienes la responsabilidad de abordar tu trabajo de manera ética y tener en
cuenta el mejor interés del usuario. Los productos que diseñes serán parte de la vida de los
usuarios, pero no deberían:

 Consumir o controlar al usuario.

 Promover comportamientos adictivos.
 Promover relaciones poco saludables entre el usuario y un dispositivo o una aplicación.
  Aprovecharse del usuario.

En cambio, los productos que diseñas deben brindarles a los usuarios la posibilidad de elegir las
acciones que desean realizar mientras usan tu producto. Recuerda, las aplicaciones deben
involucrar a los usuarios, pero las aplicaciones también deben ser honestas acerca de sus
intenciones y objetivos. Para obtener más información sobre el diseño ético, aquí hay algunos
recursos para consultar:

 Ética en el diseño de la experiencia del usuario, de Usability Geek

 Lo bueno, lo malo y lo feo en el diseño de la experiencia del usuario, de la revista User
Experience
 10 principios para el diseño ético de UX, de UX Collective