Transcripciones
1. Introducción: Bienvenido a lo fundamental
del prototipado Ux. Hola, soy Manon Battel un diseñador gráfico y de
experiencia de usuario En este curso, cubriremos la creación de
prototipos como parte de
su proceso de diseño y cómo la creación de
prototipos puede crear una su proceso de diseño y cómo mejor experiencia de usuario También cubriremos diferentes fidelidades de
prototipado, y
terminaremos este curso
creando un
prototipo interactivo con El curso es una visión general
de la creación de prototipos, y aprenderemos
algunas de las herramientas básicas que pueden ayudarte a apoyar en
este proceso de creación de prototipos Entonces, si estás listo,
déjanos
sumergirnos en los fundamentos de la creación
de prototipos UX Este curso es aplicable todos los diseñadores de
experiencia de usuario, diseñadores gráficos, diseñadores de UI e incluso que quieran aprender más sobre prototipos y Figma. Destacar, te veo
en la primera conferencia.
2. Fundamentos de la creación de prototipos en el diseño de UX: O prototipo tiene varios significados
y varias definiciones. Entonces quiero definir
el término prototipo para el alcance del curso
antes de que empecemos. Un prototipo es un modelo de
trabajo temprano de un diseño utilizado para obtener retroalimentación para
experimentar rápidamente con nuevas ideas Varios factores
influyen en qué tipo de prototipo creará, cronología
del proyecto, dónde
se encuentra en su proceso de diseño y qué tan robusto debe ser el
prototipo. Un prototipo se puede
crear con bocetos, marcos
de alambre o maquetas Un boceto es un dibujo de la interfaz de usuario donde el diseño
comienza a tomar forma. Entonces los wireframes son
representación de layouts y contenidos y donde todo residirá en la interfaz de
usuario Los wireframes pueden ser en
escala de grises o en blanco y negro. Una maqueta suele ser una
interfaz de usuario completamente renderizada con detalles de color, tipografía y diseño general
definidos Una maqueta parece un
producto final o un diseño final. Déjame darte una nota rápida
sobre wireframes y maquetas. A veces el término wireframes
y mockups se usan indistintamente
porque las personas se refieren a sus
trabajos de diseño como wireframes, incluso si no son grises care Cuando se trabaja con un sistema de diseño de
robots, a veces
es más fácil diseñar componentes que sus wireframes
aparezcan completamente renderizados, incluso si su trabajo
aún está en progreso Los bocetos, los wireframes y los mockups son
una representación estática de Pero no representan la interacción
diseñada por ellos mismos. Necesitas agregar interactividad o una notación a
estas pantallas estáticas entender
cómo
interactuará
el diseño cuando alguien realice
una acción en tu interfaz Estoy definiendo la interactividad
como cualquier comportamiento que cambie el estado del diseño
o la base de flujo en
la interacción del usuario Ejemplos simples de interactividad como un icono que podría
cambiar la vista de la página, o al hacer clic en ese, icono abrirá un menú
contextual La forma en que el usuario interactúa con tu interfaz es el
aspecto clave de tu diseño general Por lo tanto, la creación de prototipos nos permite
probar nuestros diferentes flujos, validar conceptos de diseño,
iterar a través diferentes ideas y ofrecer
una experiencia cohesiva Uno de los conceptos clave de la
creación de prototipos es
validar sus diseños temprano e incluso a menudo y
sin muchos gastos generales Hay muchas formas diferentes
de abordar un problema de diseño. Prototipos de ideas y conceptos te
ayudarán a atravesar las malas ideas rápidamente y sacar nuevas ideas
al frente completo Tu prototipo no
tiene que ser código. Puedes crear prototipos
con cualquier cosa, desde bocetos hasta incluso usando maquetas
completamente renderizadas Y esto es exactamente lo que vamos a hacer
en este curso, y llevará tu experiencia de
usuario a todo otro nivel. Muy bien, te veré
en la próxima conferencia.
3. La importancia de la creación de prototipos en el diseño de UX: Una de las cosas clave para
recordar sobre la creación de prototipos es, no se
trata de tus herramientas Se trata de tu diseño. Sí, las herramientas apoyarán
y ayudarán con tu diseño, pero tu diseño es
tu enfoque principal. Prototipado a toda fidelidad, nos
ayuda a elimar el
riesgo de invertir en un producto que no
resuene con el usuario, no sea fácil de usar
o que no resuelva los problemas de negocio
adecuados Déjame darte más ejemplos por qué creamos prototipos El primero es validar
nueva idea de producto. Por ejemplo, el
negocio quiere atar una nueva idea
o un nuevo producto. Entonces, al crear un prototipo
temprano y probar la
idea de manera de bajo costo, daremos la dirección suficiente
para determinar que si es un producto o un
futuro que vale la pena invertir en él, lugar de gastar
demasiados recursos por frente. El segundo es validar los conceptos o flujos de
diseño. Hay múltiples formas de
resolver un problema de diseño. Y como parte de su proceso de
diseño, muchas veces múltiples ideas y
múltiples diseños podrían ser prototipos para determinar
qué dirección de diseño
es la mejor para el negocio
y para los usuarios Tercero es determinar si las experiencias del producto
son utilizables o no. prototipos de pruebas de
usabilidad
suelen ser más detallados
y de mayor fidelidad. Porque en este punto, la dirección del diseño
ya se ha resuelto, y ahora la retroalimentación está más enfocada en si el
producto es utilizable o no. En esta fase, el tipo de comentarios que quizás quieras
buscar es que
incluirían comentarios sobre si las etiquetas de
los botones son claras y si las interacciones son entendidas por
el usuario o no. A elementos de diseño,
incluido el contenido, son un juego justo para la retroalimentación en este prototipo de alta fidelidad. El cuarto es comunicar
una idea o visión. Los prototipos son excelentes, ya que se
comunican con otros sobre
cómo funcionará su diseño Si presentas tu trabajo a
otros de forma regular, será un buen hábito tener un prototipo
a mano por si acaso para responder a la pregunta,
cómo va a funcionar. Estos son algunos de los pocos
ejemplos por los que necesitamos prototipo. Entonces, la próxima vez que crees
tu propio prototipo, mantén estas razones en tu mente. Bien,
te veré en la próxima conferencia.
4. Mitigación de riesgos a través de la creación de prototipos: Desarrollar productos
sin antes recibir comentarios
anteriores de su mercado
objetivo es muy arriesgado. Es caro construir
un producto sin
determinar primero si tu mercado es adaptable a tu idea
o a tu producto. Construyendo la experiencia de
producto incorrecta, tiempo de desarrollo de
costos. Si tienes una idea de producto y creas una experiencia completamente
funcional, podrías descubrir que el producto
no es lo que el usuario quería. Aquí es donde la creación de prototipos
puede ayudarte mucho. Descubrirás a través
del proceso de prototipado dónde
fallan tus ideas de diseño o dónde brillan. Los prototipos son útiles para cualquier etapa de su proceso de
diseño Puedes crear prototipos solo
para descubrir cómo debería
funcionar
tu experiencia en una etapa de descubrimiento. En las etapas posteriores, puede crear prototipos más
robustos con el objetivo de
recopilar comentarios de los usuarios Al crear prototipos
a partir de comentarios, determine qué tipo de
comentarios está buscando ya que eso podría influir en un tipo de prototipo que
creará más adelante Por ejemplo, si
buscas una retroalimentación más
granular, quieres un prototipo de mayor
fidelidad que el usuario pueda interactuar. Con la ayuda de un buen moderador, puede obtener
muchos comentarios sobre
el diseño con prototipos de baja
fidelidad Si se trata de una sesión de moderador, hay más flexibilidad en no tener un prototipo completamente
funcional, ya que el moderador
puede trabajar al usuario a través las áreas
del prototipo
que no funcionan, las sesiones
no moderadas se
enfrentan a sí mismas a través Así que quieres asegurarte que tu prototipo
pueda hacer frente a la tarea y los clics que va a encontrar en un entorno
no moderado La mayoría de
las herramientas de prototipado cubrirán tanto la baja fidelidad como
la alta fidelidad Pero para
interacciones más realistas, es posible que necesites una
lógica y condiciones más avanzadas. Por ejemplo, si necesita almacenar
los datos de un usuario o si necesita un reproductor de video
nativo para abrir en el dispositivo de su usuario, estas son necesidades avanzadas de creación de
prototipos, y querrá asegurarse que tiene la
herramienta adecuada para el trabajo Pero antes de hacer eso,
deberías hacerte
estas preguntas. ¿El prototipo
necesita ser tan avanzado? Porque a veces
queremos mantener las cosas realistas y lo más
simples posible. La siguiente pregunta que
puedes hacerte
es, ¿Es importante obtener
los comentarios que necesitas? Y por último, ¿
la simulación de la experiencia es lo suficientemente
buena como para obtener una señal sobre dónde debe ir el diseño Determinar qué tipo de
comentarios necesitarás te
ayudará a decidir cómo acercarte
a tu prototipo. Bien,
te veo en la próxima conferencia.
5. Prototipos y diseño: modelos clave de procesos de diseño: Quizás te estés preguntando
cómo aplicar tu pensamiento de diseño
en tus productos, diseños o realmente cualquier cosa. Bueno, para responder a eso, hay algunos modelos distintos
en el proceso de diseño. Básicamente, el proceso de diseño es
un método de resolución de problemas. Y a pesar de que hay algunos modelos
distintos de proceso de
diseño, la idea clave o concepto clave
es en gran parte la misma. Al, eso es gestate. prototipos es una fase clave
en el proceso de diseño, y a medida que el producto
se vuelve más definido, las técnicas de prototipado también
pueden cambiar en consecuencia, pasando de menor fidelidad
a mayor Antes de entrar en fidelidad, echemos un vistazo
al proceso de diseño. El primer modelo es el doble diamante de un
consejo de diseño. El diamante doble se centra en las etapas clave
del proceso de diseño. Descubrir, definir,
desarrollar y entregar. El siguiente modelo es el enfoque de escuelas estándar
D con las etapas clave
de enfatizar, definir, idear,
prototipar y probar Estos modelos tienen
ahora diferencias, pero todos los modelos de proceso de diseño abordan
los mismos atributos clave. Están centrados en el usuario con un enfoque en empatizar
con el usuario para comprender sus desafíos mientras descubren
oportunidades y conocimientos Al definir el espacio problemático
basándonos en esos conocimientos e ideando a través de diversos conceptos e ideas de
diseño, nos ocurren soluciones
potenciales, prototipando e iterando sobre esas ideas y conceptos de diseño,
y luego entregando finalmente esas ideas
clave El
proceso de diseño del centro de usuario es desordenado e iterativo y no tan
lineal como puede parecer El proceso pretende ser un marco en el que se puedan
crear soluciones de diseño. Idealmente, desea seguir estos pasos clave en
su diseño para asegurarse que está
enfocado en diseñar las cosas correctas y que está entregando
el producto adecuado. Por ejemplo,
podrías estar volviendo a probar
a través de varias
ideas y conceptos diferentes Entonces podrías comenzar con la creación
de prototipos en papel. Y a medida que su proyecto avanza
hacia la entrega final, es posible que desee un prototipo
funcional más robusto para retroalimentación de
usabilidad y para comunicarse con su
diseño con su equipo. Puede realizar prototipos en cualquier
etapa de su proceso de diseño. Y a medida que aumenta
la fidelidad del diseño, también aumenta
la fidelidad del prototipo. En otras palabras, alta fidelidad. Hemos hablado de
diferentes modelos de
procesos de diseño y prototipos. En la próxima conferencia,
dejaremos sumergirnos en la fidelidad de
prototipos. O luz, te veo ahí.
6. Los tres niveles de fidelidad de los prototipos en el diseño de UX: Tomemos un momento y
hablemos de fidelidad. La fidelidad se refiere a
la integridad de la interfaz de usuario, la
interacción y el flujo La fidelidad también puede referirse
a la apariencia visual, pero también a la funcionalidad del protipo Básicamente hay
tres tipos de fidelidad,
baja, media y, por último, alta. Hablaremos
de cada uno de estos en detalle. Aplicar la baja fidelidad
es una buena manera enfocarse en
fechar las interacciones en el flujo correctas sin preocuparse
demasiado por
la interfaz visual Un ejemplo de cuándo quieres
usar el enfoque de baja fidelidad es cuando estás en la fase inicial de
entrevistar a tus usuarios, y tienes algunas ideas de los problemas que quieres resolver Pero quieres recibir comentarios antes de ir demasiado
lejos en esa idea. En este caso, esbozar algunas ideas de alto nivel
y ponerlas
frente a tu usuario
es una excelente manera de
obtener comentarios y rastrear
sus reacciones Los bocetos pueden introducir un
nuevo nivel de ideas en las que el usuario puede no haber
pensado hasta sin
ver tu boceto Pueden obtener muchas ideas
geniales y comenzar
muchas conversaciones nuevas Uno de los beneficios
del boceto es que puedes
iterar rápidamente o
repetir rápidamente a través de conceptos e incorporarlos en los comentarios de los
usuarios muy Los prototipos de baja fidelidad no
solo se aplican a los bocetos. Recuerda que puedes tener un prototipo de baja fidelidad que tenga una interfaz muy
sin pulir, como una fama de alambre de escala de grises Algunas herramientas de prototipado
también están diseñadas para estimular una interfaz incompleta utilizando formas
básicas para transmitir este
bajo nivel de fidelidad Los prototipos de fidelidad media
pueden tener una mezcla de funcionalidades
básicas y algunos
definen elementos de interfaz Pero algunos flujos pueden no
estar completos en él. Porque quieres más aportes y más comentarios del
usuario para guiar tu diseño. Por ejemplo, en un
proyecto en el que trabajo, pongo un
prototipo de media fidelidad frente a mis usuarios. Solo unos pocos enlaces funcionan porque quería comentarios sobre los
enlaces que no funcionaban, y quería que el usuario
me dijera a dónde cree que
deberían ir y por qué. En este ejemplo, el
diseño estaba parcialmente definido, pero necesitaba más
comprensión por parte
del usuario para definir el
resto de mi diseño. Por lo general, los
prototipos de fidelidad media se utilizan de cara
al diseño donde tienes algunos
elementos clave en el lugar, pero aún así necesitas
validar algunos conceptos
para obtener una mejor comprensión
de las necesidades de tu usuario prototipos de alta fidelidad se utilizan mejor para
escenarios en los que tiene una idea sólida de cómo debería verse y funcionar
la interfaz de diseño, y desea obtener
comentarios más específicos de ella Como nota, las interfaces
visuales altamente definidas dan la impresión de que el producto es final y acabado. Los comentarios pueden estar en el nivel de la interfaz con un
enfoque más en colores, fondos y etiquetas fiscales. Pero si no estás viendo
ese tipo de comentarios, puedes mantenerte en
menor fidelidad para enfocarte más en los conceptos básicos
de interacciones y flujos. diseño
de alta fidelidad también es útil para la
entrega final porque
permite que todos los miembros
del equipo de desarrollo se involucren con el diseño
y vean cómo funciona. prototipos es útil en cualquier
parte de su proceso de diseño, y Fidelity
le muestra qué tipo de comentarios desea y dónde se encuentra en
su proceso de diseño Bien, te veré
en la próxima conferencia.
7. Comprensión de los prototipos de baja fidelidad en el diseño de UX: Los prototipos de baja fidelidad son una presentación aproximada de
tu idea o de tu diseño, y
en realidad no están muy definidos Se pueden hacer fácilmente
en bocetos sobre papeles, pero hay algunas herramientas
digitales que pueden estimular esa apariencia
inacabada Y los veremos
más adelante en este curso. La baja fidelidad a veces se
define como solo una base de papel, como un boceto sobre papel. Hay algunas tonciones en este
debate, pero estoy definiendo baja fidelidad para incluir wireframes clicables, que se pueden crear en
un software de creación de prototipos que un software de creación de prototipos que imita El uso de prototipos de baja
fidelidad tiene muchas
ventajas y ventajas , especialmente antes en
el proceso de diseño de UX Pocas ventajas clave
son que los usuarios tienen más probabilidades de ser
abiertos con sus comentarios. Una naturaleza de baja fdalty del prototipo da
la impresión de que el diseño es una fase conceptual anterior Y si pides los comentarios, es más probable que
los usuarios
den su opinión honesta porque aún saben que el diseño está en
construcción. Al seguir adelante, son muy fáciles crear con poco
tiempo o esfuerzo. Y si estás usando papel, puedes
esbozar rápidamente una idea y pocas pantallas clave para
atravesar el concepto básico. Son fáciles de iterar
rápidamente en los comentarios. Y si el primer
concepto de baja fidelidad vuelve a funcionar, entonces puedes probar algo nuevo. Con los prototipos de baja fidelidad, puede idear fácilmente una nueva idea o concepto basado en los comentarios del usuario
u otras cosas que no se incluyeron
después del primer prototipo, iterar e incorporar
esa retroalimentación muy Hay más enfoque en
las integraciones y flujos cuando estás creando
diseños que son de baja fidelidad Te da la oportunidad enfocarte realmente en
la interacción y el flujo sin estar demasiado preocupado por
la capa visual A veces conseguir
el diseño básico en tu mente es todo lo que necesitas. Bueno, algunas desventajas
de los prototipos de baja fidelidad son que son limitados en el flujo y el comportamiento de
interacción El diseño de prototipos de baja
fidelidad limita la
interacción y el comportamiento realistas Por lo tanto, no podrás recibir comentarios
ricos sobre cómo funciona el elemento de
interfaz. Son faciltd drivens. En ocasiones,
los prototipos de baja fidelidad no tienen suficiente claridad en
la interfaz para
destacarse por sí solos para que
los usuarios la entiendan Por lo que se requiere de un facilitador que
guie al usuario a través
del diseño para que sepa lo que
está viendo y
pueda ayudarlo a navegar a través del
flujo y la interacción Tercero, es que la
usabilidad es indeterminada. Otra cosa clave a tener
en cuenta es que estos son excelentes al descubrir problemas de usabilidad de
alto nivel, pero no son de comentarios detallados de
usabilidad sobre el comportamiento de interacción A la baja fidelidad se puede relacionar
demasiada imaginación. Sí, existe tal cosa
llamada fidelidad demasiado baja. Si tu versión de baja fidelidad es solo caja para
estimular un diseño, y estás pidiendo al
usuario que llene esa caja. A veces el usuario no
tiene la imaginación o vocabulario
visual para describir
qué causa en esa caja Aún tiene que haber
alguna dirección en el diseño de baja fidelidad
que el usuario pueda interpretar Pero todavía hay mucho valor en mantener
la baja fidelidad durante
la fase anterior de su proceso de diseño. Los prototipos de baja fidelidad son útiles y funcionarán
casi desde todos los proyectos, pero son muy útiles en la etapa inicial de
su proceso de diseño Entonces, la próxima vez
que tengas un proyecto duro, y se requiera
enfocarte en lo básico y fundamental, intenta usar prototipos de baja
fidelidad y te ayudarás mucho Bien,
te veré en la próxima conferencia.
8. Comprensión de los prototipos de fidelidad media y alta: Los prototipos de fidelidad media pueden compartir los mismos atributos de los prototipos de alta fidelidad
como Luke y Fel, pero puede que no tengan todas las
funcionalidades Los prototipos de fidelidad media funcionan bien cuando es posible que tenga en cuenta parte del
diseño, pero es posible que aún no tengan
una imagen completa de su diseño Podrían tener una mezcla
de elementos que pueden diseñar y no diseñados
o indefinidos Son los mejores a partir de escenarios. Entonces te sientes bastante bien algunos elementos de los
diseños e interacción, pero aún tienes
algunas preguntas abiertas y no sabes en
qué dirección ir. Se puede tener una mezcla de elementos
que se establecen, pero mantener los elementos
como marcadores de posición Puedes hacerles más
preguntas para ayudar a aclarar qué tipo de contenido y
a dónde llevar el diseño. En comparación, los prototipos de
alta fidelidad suelen estar cerca del diseño final y tenemos
todos los colores y representante de la marca Por lo general,
las interacciones clickthrough
también están en el lugar en diseños
de alta fidelidad. Algunas ventajas de los prototipos de
fideidad media es que son flexibles Funcionan muy bien,
y tienes algunas ideas, pero en realidad no lo has
averiguado todo. Hay un poco más de flexibilidad
en la forma en que abordas el diseño. Ahora, algunas desventajas. Necesitarás un facilitador, sobre todo si
buscas nuevas ideas Es posible que tengas que hacer
funcionar
la imaginación del usuario al mirar la página con contenido de tipo place
ser. Además de eso, los prototipos de fidelidad
media
no son confiables para captar problemas de usabilidad ya que serán muy
probables de alto nivel Los diseños de alta fidelidad,
por otro lado, tienen ventajas únicas sobre los diseños de fidelidad
media. Primero, son más
representativos del aspecto y
la sensación del diseño
porque el diseño se siente más real, realista, y los usuarios
pasarán por el prototipo como si
tuvieran una experiencia normal. En segundo lugar, el diseño probablemente
no necesita un facilador. Si el diseño es casi
entonces, en términos generales, no se requiere
un facilator para que el usuario
recorra el diseño Quizás incluso uses un programa de pruebas remotas que el usuario pueda
completar por su cuenta. El tercero es que los problemas de
usabilidad probablemente se atraparán. Cualquier problema de usabilidad que quede o no haya sido
atrapado a través primeros prototipos probablemente
quedará atrapado en diseños de alta
fidelidad Aquí hay algunas desventajas de ambos diseños de
fidelidad media a alta. Primero es que requieren
toneladas de tiempo para crear. Los prototipos del alimentador H ih
pueden ser muy robustos y llevará
más tiempo crear un prototipo de
pulido completamente funcional Segundo, los usuarios no están
tan dispuestos a dar retroalimentación como en el
nivel anterior de prototipo. Las apariencias finales
del diseño pueden limitar el
tipo de comentarios que los usuarios están dispuestos a decir porque el diseño se ve tan
final y fantástico. Por ejemplo, si el
flujo es confuso, pueden abstenerse de decir
eso porque podrían
sentir que el diseño ya está terminado y
podrían agregarlo por sí mismos. Y el tercero es que
son más difíciles de operar. prototipos de alta fidelidad
puede llevar mucho tiempo creación de prototipos de alta fidelidad
puede llevar mucho tiempo si requieren muchas interacciones
y casos de uso Como resultado, pueden
ser difíciles de actualizar, especialmente si
hay algunos problemas con la funcionalidad central que se destacan
a través de esta prueba. La creación de prototipos es un
aspecto fundamental del proceso de diseño de Estados Unidos. Y al conocer algunas de las
desventajas y ventajas, puedes saber qué
fidelidad es la correcta de ti y dónde estás
en tu proceso de diseño.
9. Optimización de los comentarios de los usuarios: técnicas de creación de prototipos: Al crear tus prototipos de
diseño, quieres estar al tanto de qué tipo de comentarios
estás buscando Quieres asegurarte de obtener el tipo correcto de
comentarios que
te serán útiles para incorporar
en tus diseños. Al probar tu prototipo
con un facilator, necesitarás un investigador usuario o alguien con una mentalidad
neutral, y también que esté
muy familiarizado con el prototipo y
los objetivos de diseño Es muy importante que el facitador sea neutral
porque no quieres que nadie haga preguntas principales
o juzgue al usuario de ninguna manera Si estás probando prototipos de baja y
media fidelidad, el diseñador y el
facilator colaborarán para
llegar a partir del tipo de preguntas que harás en
torno al Las preguntas de los
prototipos de baja fidelidad serán abiertas Y a partir de diseños de
fidelidad media, la pregunta podría ir
desde el extremo abierto hasta lo específico. Y por último, a partir de prototipos de alta
fidelidad, la pregunta
será más específica Tendrás que establecer un objetivo claro de lo que
quieres de tus pruebas. Por lo que es importante que los
facilitadores sean expertos en hacer las preguntas correctas sin llevar al
usuario a la respuesta La investigación abierta puede ser
complicada porque la gente
tendrá preguntas y
un buen facilitador podrá dejar fluir
la charla, pero devolver el enfoque
al diseño si es necesario Normalmente, cuando un facitador está entrevistando al usuario ya sea de
forma remota o en persona, el equipo del proyecto y el diseñador
observarán la sesión Es fundamental que el
diseñador esté presente en la sesión de investigación del usuario para escuchar los comentarios
directamente del usuario. No importa cuán sólido
creas que es tu diseño, siempre
es humilde
escuchar a un usuario, los diseñadores a
veces facilitan sus propias
sesiones de diseño con el usuario, lo cual no es un problema si el diseñador está abierto a
todos los comentarios, mantiene una
mentalidad curiosa durante la entrevista y puede hacer preguntas sin
guiar al usuario A veces, cuando los diseñadores
están probando su propio trabajo, sesgo de
confirmación puede barrer. sesgo de confirmación ocurre
cuando espera de sus usuarios experimentar el diseño de la manera que
desea experimentar allí. Y cuando la retroalimentación está en
opuesta o está en 180 grados, minimizan o
ignoran esa retroalimentación. El objetivo de probar tu
prototipo es
averiguar si tu diseño resuena
con tu usuario o no A veces lo hará,
a veces no lo hace. Todo esto es información útil
para nosotros porque podemos incorporar los comentarios e ideas en la siguiente iteración Ahora que hemos aprendido
diferentes tipos de fidealties, y probando prototipos,
aprendamos a crear prototipos en
diferentes niveles Bien,
te veo en la próxima conferencia.
10. Prototipos en papel: Crear un prototipo en papel
es un proceso muy simple y se enfoca más en comprender los atributos
de
alto nivel de su diseño, como flujos, interacciones
y diseños. El diseño de papel necesita
a alguien que facilite la conversación porque requiere un poco de imaginación del usuario Un facilator
podrá ofrecer contextos proporcionando
escenarios para que piensen y
ayuden a
guiar al usuario si se quedó
atascado o para que el usuario hable más sobre sus
pensamientos sobre el diseño La creación de prototipos en papel es
bastante fácil de hacer. No tienes que preocuparte
si puedes dibujar o no, y la fidelidad solo
tiene que ser lo suficientemente clara como para hacer que tu punto
entre cuadrados, rectángulos, líneas y palabras Todo lo que realmente necesitas
es un rotulador negro, papel y algunas notas adhesivas. Para probar prototipos de
papel móvil, es bueno tener un recorte
de un marco móvil para estimular la visión limitada
de los elementos en la El resto del prototipo se
puede dibujar en papel. Cuando estás usando el mismo prototipo para varias personas. A veces el papel se
rasgará o se desgastará. Por lo que es muy recomendable usar un peso de papel más pesado que
ayude a prevenirlo. Digamos que queríamos crear una aplicación de comercio electrónico a
móvil. Al acercarse a cualquier
tipo de prototipo, querrá comenzar
por esbozar sus ideas de las
pantallas y los diseños, así
como los flujos
para su diseño Por ejemplo, tengo
pocas iteraciones donde
solo se me ocurrieron algunos
enfoques diferentes a mi diseño Digamos homepage y el tipo de contenido
que quiero mostrar. También tengo una idea de cómo se
debe organizar la barra de cinta. Se puede ver que esto
es bastante rudo. Y mis bocetos son realmente todo acerca de obtener múltiples
ideas en el papel Aquí no necesitas la perfección. Lo siguiente que hice fue crear un flujo de alto nivel de pantallas
clave e interacción
desde el diseño. En mi ejemplo, aquí
tengo la página principal, algunas capacidades
y la posibilidad agregar un ítem a la tarjeta. Puedes simular el comportamiento de
desplazamiento usando tiras de
material de dibujos animados ligero y moviéndolo hacia arriba y hacia abajo a través de la ventana gráfica
de tu plantilla o de lado a lado para
estimular el desplazamiento
de izquierda a estimular el desplazamiento
de izquierda Idealmente, puedes
dibujar tus diseños en retrato para
estimular el desplazamiento arriba y hacia abajo o en horizontal para la interacción de
partitura horizontal Eso es todo acerca de la creación de prototipos en
papel, y en la próxima conferencia, pasaremos a Figma. Bien, te veo ahí.
11. Fundamentos de la creación de prototipos en Figma: Hola, y bienvenidos de
nuevo, a todos. A partir de esta conferencia,
vamos
a iniciar la creación de prototipos en Figma. Así que descarga el Figma e inicia sesión o regístrate en la
cuenta Figma. Bien,
te veo en la pantalla Figma. He creado estas pantallas para una
compañía ficticia de comercio electrónico utilizando estos elementos Todos estos archivos están
en la sección de recursos, así que asegúrate de verificarlo, y todos estos activos
están incluidos en eso. Para que puedas seguirme
en Figma conmigo. Caminemos a través del
flujo general y las interacciones. Se trata de una
compañía ficticia que vende sombreros, y los clientes pueden personalizar un sombrero si
seleccionan esta opción Desde la página de inicio, puede pegar en esta cabeza en particular, y le llevará a
la página de detalles del producto. Puede desplazarse por esta página
y ver contenido de apoyo, como detalles y reseñas. Cuando graba en el enlace para
ver las prácticas éticas, veo una hoja inferior
con más información. Puedo arrastrar la hoja inferior arriba y desplazarme para
ver más imágenes. Empecemos a organizar todas
las pantallas y elementos, así
como comenzar nuestro prototipado
conectándolos en Figma. Voy a usar el tamaño de
marco del iPhone, que es 390 por 844, que es el
tamaño predeterminado del iPhone Seleccione F en el teclado
para crear un nuevo marco. Para seleccionar el tamaño
y tipo de marco. En el panel lateral derecho, habrá diferentes tipos y tamaños de
pantalla. Haz dos más
copiando y pegando. Vamos a nombrar la primera casa marco, y la segunda, el
producto se vende al por menor Y el último, hoja inferior. Tengo los elementos que
vamos a usar a la izquierda, y vamos a componer las
pantallas usando estos elementos. Aquí, tengo tres marcos. Uno del encabezado de la página de inicio, uno del contenido y el
último de la barra de pestañas. Voy a seleccionar el encabezado de la
página de inicio de la capa y copiarlo y
pegarlo en el marco. Nombro home usando
comando más C en MC o Control plus
en windows para copiar. Voy a seleccionar
el marco de inicio y pegarlo en el marco. Voy a hacer lo mismo
desde el contenido del hogar. Lo copiaré y pegaré en el marco y lo
reposicionaré Y por último, voy a
copiar y pegar el elemento de la barra de pestañas en el
marco y reposicionarlo Para la página de detalles del producto, utilizaremos el mismo proceso. Copia y prueba todos los elementos de la misma manera que
lo hicimos en la primera página. Voy a hacer eso ahora.
El botón agregar dos autos aparecerá en la
parte inferior de la pantalla. Entonces lo volveré a colocar para que quede sentado
en el fondo Para la última pantalla,
tomaremos los dos elementos
de
la capa de los elementos de la hoja inferior y
los copiaremos y pegaremos en el
marco de la hoja inferior. Para la pantalla de la hoja inferior, voy a cambiar
el radio de la parte superior izquierda y derecha
a diez para que coincida con las esquinas redondeadas del
estilo de hoja inferior para el encabezado. Una vez que reposicionemos
esos elementos, Siguiente, copiemos y peguemos la hoja inferior para hacer
una segunda hoja inferior Ahora vamos a cambiar la altura
de la segunda hoja inferior a 268 y nombrarla como hoja
inferior dos. Estas son las dos alturas
de las láminas inferiores. Cuando creamos el
prototipo conectando esto, queremos simular
la interacción de arrastre. Entonces necesitamos dos alturas
diferentes, la altura mínima y
la altura máxima. Hemos colocado nuestras pantallas para prepararnos para el prototipo. En la próxima conferencia,
conectaremos nuestro prototipo y haremos
que esto funcione. Todos, no vayas a ningún lado, y te veo
en la siguiente.
12. Domina los prototipos interactivos en Figma: En el video anterior, hemos configurado nuestras pantallas
para comenzar a conectarnos a nuestro prototipo y llevar
nuestra visión a las ideas. Para este prototipo, el flujo comienza desde la
imagen del sombrero en la página principal. Primero, expandamos
el marco de inicio para mostrar la imagen
dentro del marco. Nuestro contenido no es visible
fuera del marco, pero queremos eso porque permite que el área
sea etiqueta de
desplazamiento dentro de
esta ventana gráfica
cuando configuramos esto para que se desplace Este sombrero con la
banda azul etiquetada campo es el artículo que quiero
conectar a nuestra siguiente pantalla. Desde el panel lateral derecho, hay un prototipo de etiqueta de pestaña. Con la pantalla de inicio seleccionada, vamos a tocar prototipo. Cuando toca los elementos
del marco en el modo de creación de prototipos Verás contornos de forma
que tendrán círculos, y cuando coloques el cursor sobre
ellos, se convertirán en signos más Estos son los
puntos de conexión donde puedes arrastrar flechas a las otras
pantallas para crear interacción. Agreguemos esta
conexión desde la cabeza
en la página de inicio a nuestra página de detalles
del producto. Cuando hagas esa conexión, verás esta ventana
contextual que te permite
seleccionar el tipo de disparador donde se navega y qué tipo de
interacción deseas. Tocando esa área de
interacción, obtendremos diferentes opciones. La acción que
busco es empujar. Cuando se selecciona empujar, hay cuatro flechas diferentes que indican la
dirección del empuje. Seleccionaré la primera flecha. En la flecha hacia atrás de la
página de detalles del producto, agregaremos esta integración
push o interacción push conectando
a nuestra página de inicio. Seleccionaremos la segunda flecha para darnos el comportamiento de
empuje opposinge Parezcamos increíbles
y perfectos para mí. A continuación, actualizaré el
marco del hogar para que vuelva a altura
844 ajustando la altura en el panel de diseño del
lado derecho Ahora, agreguemos el área de capacidad de
desplazamiento. Seleccione el marco de inicio y cinta adhesiva en
el prototipo en el lado derecho. Seleccionaremos el desplazamiento
vertical área
de comportamiento de desplazamiento Esto establecerá el marco
para que sea desplazable. Queremos que el encabezado y la barra de
cinta se mantengan en su lugar. Entonces seleccionaremos el encabezado, iremos nuevamente al
panel de prototipado y seleccionaremos la posición fija desde
el área de comportamiento de desplazamiento A continuación, seleccionaremos la barra de cinta y en
el panel de prototipos, seleccionaremos fix del área de comportamiento de
desplazamiento Vamos a establecer el flujo
a ningún desplazamiento. Para la página de detalles del producto, también
queremos
asegurarnos de que el contenido sea configurando el
marco en vertical. También se debe
fijar el encabezado de esta
página así como el botón de
agregar a la tarjeta. Haremos
lo mismo que hicimos en la pantalla de inicio
seleccionando el encabezado y
cambiando la configuración en el panel de prototipado para
fijar
la posición con desbordamiento
configurado a ningún desplazamiento Lo haremos
tanto desde el encabezado el botón de agregar dos tarjetas. Es hora de previsualizar nuestro diseño, y veamos cómo está funcionando. Debería estar desplazándose perfecto. Y si pegas cinta en la cabeza, deberías ver la página del
producto t empujando. Tu diseño no se desplaza,
revisa tus capas. Deberías ver un área
que diga pergaminos, y
querrás asegurarte de que las capas correctas estén
debajo de esa área de desplazamiento Si no puedes ver la opción de fix en el panel lateral
derecho, intenta arrastrar el
elemento al área
bajo fix en el panel de capas de la izquierda En el siguiente video,
configuraremos nuestra interacción de hoja inferior mediante el
uso de superposiciones e interacción de
trapo
13. Prototipos avanzados en Figma: En el video anterior, hemos configurado una página de inicio
desplazable y
una interacción escribible o de tipo para nuestra página de detalles del producto Vamos a entrar en las superposiciones de la hoja
inferior e interacciones farmacológicas simples Ya hemos colocado todos los elementos en
la hoja inferior, por lo que ahora los conectaremos. A partir de este enlace sobre
el producto al por menor, quiero pegarlo para
mostrar la hoja inferior. Esta hoja inferior llaga información
adicional sobre cómo
se producen y obtienen los materiales. He diseñado esto como una hoja inferior
porque alguien
puede pegarlo solo
si está interesado
en aprender más. La hoja inferior tiene tanto una puntuación
horizontal como vertical para mostrar más información
en un espacio reducido. Empecemos a
conectar este prototipo. Voy a añadir un retangle sobre el plutex escribiendo la
letra R en el A continuación, eliminemos el relleno seleccionando
la forma de retangle, y luego en el panel lateral
derecho, girando el relleno a cero o
quitándolo con menos tamaño Con el retangle seleccionado, vaya al prototipo de penner, y conecte el retangle a la pequeña hoja inferior
con En el menú contextual, queremos seleccionar la
propiedad y seleccionar mudarte. Selecciona el último icono de
la flecha apuntando hacia arriba. En el área de configuración de superposición, seleccione la opción central inferior, que también se asigna
al último icono. Querrás seleccionar
las dos opciones para cerrar al hacer clic afuera
y agregar fondo. Esta configuración le muestra dónde aparecerá
la hoja inferior y el comportamiento de borrar la hoja inferior si el
usuario graba fuera de ella. El fondo se refiere al efecto
degradante que
cubrirá la pantalla cuando se haya activado
la hoja de botones Veamos cómo se ve. Se puede ver que
sube de abajo. Y cuando grabo en
el fondo, la hoja inferior vuelve a bajar, y eso es exactamente
lo que queríamos. A continuación, obtengamos
el primer conjunto de imágenes en la hoja inferior
para desplazarse horizontalmente. Hicimos un pergamino de vertica
en la última conferencia, así que estamos familiarizados
con ese concepto Pero ahora podemos establecer el conjunto
de imágenes etiquetadas scroll a scroll horizontal seleccionando el grupo de imágenes y configurando
el desbordamiento en horizontal. Apliquemos ese mismo efecto
horizontal a la otra
hoja inferior también. Pre con él, y esto parece que está
funcionando como se esperaba. A continuación, agreguemos esa interacción de arrastre desde el asa superior de
la hoja inferior. Seleccionará el asa superior y desde la sección prototipo, conectará el asa superior a
la hoja inferior más alta. Cambiaremos la
interacción a, y seleccionaremos
superposición de pantano y animación inteligente Aplicaremos los
mismos ajustes a
la lámina inferior más alta conecta de nuevo a la hoja inferior
más pequeña. En el marco de la hoja
inferior más alto, seleccionaremos el contenido
para desplazarnos verticalmente y probemos nuestro diseño.
14. Proyecto de clase: Hola, y bienvenidos de
nuevo, a todos. En esta conferencia,
vamos a discutir sobre tu tarea de clase
o tu proyecto de clase. El proyecto de clase
para ti será, tienes que hacer un
prototipado en papel para cualquiera de tus ideas, tu producto o tu diseño Déjame mostrarte de lo
que estoy hablando. Como puedes ver en la pantalla, estos son algunos de los ejemplos
de prototipado en papel Y no olvides y no
olvides que
ya hemos cubierto esto en algunas
de las conferencias anteriores. Siéntase libre de hacer prototipos en papel
para cualquiera de sus ideas. No te preocupes si
puedes dibujar o no. prototipos en papel es muy fácil, y todos pueden
hacerlo”. s decir que simplemente puedes hacer un prototipado
en papel en solo un boceto aproximado, así
como puedes personalizar
tu prototipado de papel, según tu gusto, y
según tu El objetivo final de
este proyecto de clase es comenzar
su viaje de diseño UX. Todo bien. Después de completar
su prototipado en papel, haga clic en la imagen del mismo o
adjunte la captura de pantalla del mismo en la sección de proyecto
para obtener tu certificado Eso es todo por esta
conferencia y todo lo mejor de tu proyecto
o de tu tarea. Y siéntete libre de hacerme
cualquier duda si tienes. Bien,
te veo en otra.
15. ¡Lo lograste! Momento de cierre: Muchas gracias por
ver este curso. Espero que ahora se
sienta seguro comprender
cómo la creación de prototipos encaja en su
proceso de diseño general y cómo puede lograr su mejor interfaz de usuario y darle vida a su diseño Para saber más sobre mí, por favor visita en mi
Enlace en y sígueme. Puedes consultar
mi otro curso diseño gráfico
en Canva Me encantaría saber más sobre tus proyectos en los que
estás trabajando, y estaría encantado de responder cualquier duda que
puedas tener. Gracias de nuevo y
feliz diseñando.
Manthan Patel, AI Instructor
