Transcripciones
1. Introducción. Descripción de la clase: Oye, ¿son
diseñadores experimentados o que acaban de comenzar o
quieren comenzar sus carreras? Innovadores y creadores. Soy Kate y he sido diseñadora de productos durante
los últimos diez años. Bienvenido a mi clase única
sobre diseño de experiencia de usuario. En esta clase, vamos
a experimentar y ver cómo creatividad se encuentra con la tecnología para
dar forma a futuras
experiencias digitales. Quiero mostrarte cómo
puedes redactar rápidamente
flujos de usuario para cualquier aplicación desde cero e
iniciar un nuevo proyecto, solo en 20 minutos? Seguro que has estado ahí. Tienes una idea o
tienes los primeros requisitos
de un cliente. Estás sentado y
mirando tu computadora o papel y pensando en dónde
debo empezar. Pero ¿sabes qué? Este problema ya no
existe. Con tecnologías comunes
y herramientas de ayuda de IA, siempre
tienes
algo en tus manos. No necesitas ninguna experiencia en UX o UI diseñada
para esta clase. Al mismo tiempo, creo
que aquellos de ustedes que ya trabajan en la industria también estarán recibiendo algunos buenos consejos. Bien, ¿qué
vamos a hacer juntos? Exploraremos cómo la inteligencia
artificial y los modelos de lenguaje
grande pueden contribuir y acelerar
nuestro proceso de diseño, lo que nos permite generar flujos de
usuario y marcos de cables. Con solo unas simples indicaciones, vamos a verificar varias herramientas de IA y funciones
básicas gratuitas Para comenzar de inmediato, aprenderás a escribir buenos apoyos para obtener los resultados
esperados Una vez que tenemos nuestros flujos de
usuario generados en forma escrita, es hora de arremangarnos y darles vida
usando el software Figma No te preocupes si
nunca lo vas a usar antes. Te guiaré en cada
paso del camino. Dominará cómo crear marcos de alambre de
baja fidelidad para construir flujos de
usuario basados en ideas
generadas. El último paso en este proceso, vamos a estar conectando
pantallas en camino. El proyecto de concepto para la
aplicación está casi terminado. Un último consejo, te
voy a dar un par de consejos sobre cómo
poner a prueba tu idea ya que la IA no
es un humano real. Todavía no. Espero que tengamos que
probar nuestros prototipos y usarlos con personas reales para entender los problemas
y lo que hemos hecho, bien o mal como proyecto Al final de la clase, creará una idea o
característica para una aplicación móvil utilizando herramientas de
IA y un conjunto de componentes para
enmarcar cables en Figma. Esos componentes, los voy
a dar como regalo para que los puedas usar en el futuro para tus
proyectos y portafolio. No necesitas
crear el tuyo propio. Bien chicos. No puedo
esperar para iniciarlo. Y tengo tanta
curiosidad por saber qué ideas y aplicaciones vas a
crear al final de la clase. Feliz diseñando y
bienvenido a mi clase.
2. Resumen gratuito de herramientas y plataformas de IA: Bienvenidos de nuevo, Diseñadores
e Innovadores. En este video, estamos
entrando en el
mundo existente de las herramientas de IA. Estamos a punto de
explorar algunas plataformas que
cambian el juego que
ayudarán a nuestros procesos
de diseño desde diferentes ángulos. Ahora podrías estar pensando, ¿por
dónde
empiezo siquiera con las herramientas de IA? No te preocupes, hoy
te tengo cubierto. Te voy a presentar
tres plataformas de IA
disponibles y completamente
gratuitas. Puedes crear una cuenta
en solo tres clics usando la cuenta de Google o
configurarla con un correo electrónico. Primero arriba tenemos a Cha GPT, la primera y súper popular, estoy segura que has oído hablar de ella Con char GPT, puedes
sumergirte en el mundo del procesamiento del lenguaje
natural y generar flujos de usuarios,
personas, escenarios, guías para entrevistas de usuarios, agendas de
talleres, y básicamente todo lo
que necesites para un buen proceso de UX Usando
solo unos simples problemas Es como tener una conversación
con tu asistente de trabajo. El siguiente en nuestra lista es
Gemini de Google. Tiene las mismas
características y se puede utilizar para la misma tarea
que mencioné antes. Es potente y me pareció que tiene menos
alucinaciones inesperadas de IA en Por último, pero no menos importante,
tenemos perplejidad. Una joya escondida en el
mundo de las herramientas de IA. Me gusta mucho este modelo ya que también te da una lista de
referencias y recursos. Te da una idea de
dónde creó los resultados y a dónde puedes ir y leer más información
sobre los resultados. De hecho creo que es
genial y debería ser hecho por todas las
herramientas de UI, en mi opinión. Ahora hay una parte genial. Por qué no probar el mismo prompt en diferentes plataformas
que mencioné, y comparar los resultados. Puedes usar todo lo
mencionado anteriormente y ver dónde los resultados serán más satisfactorios para tus necesidades. Sea lo que sea que estés usando un
GPT, Gemini o perplejidad, nunca ha habido
un mejor momento para aprovechar el poder de la IA
en tu proceso de diseño, Pero no es nada
sin un Vamos a crear un
prompt significativo en el siguiente video.
3. Crear un prompt enriquecido: Ahora tal vez te estés
preguntando qué
es exactamente un prompt y
¿por qué importa? Cuando pienso en escribirlo, siempre
me imagino la situación cuando hablo con
mi colega, o con un esposo, o incluso con mi mamá. Estoy explicando la tarea a herramienta de
IA de una manera que explicaría a una persona de ser
humano. El prompt debe
tener una buena cantidad de detalles
importantes y también responder a las
preguntas predecibles. Preguntar como por favor cree y
escriba flujos de usuario para una aplicación de nodo definitivamente no
será suficiente para un buen resultado. qué debes enfocarte primero y cuáles son esos requisitos
de alto nivel
para cualquier pronta. Es claridad, especificidad
e imaginación. Primero,
seamos claros sobre el propósito
y el público objetivo de nuestras aplicaciones, ya sea una herramienta de productividad
o una plataforma social
para los amantes de las mascotas. Nuestro aviso debe
reflejar la esencia de nuestra aplicación y hablar directamente
con las necesidades de nuestros usuarios. A continuación, pensemos
en algún contexto. Piensa en el escenario en el
que se utilizará tu app. ¿Estamos resolviendo un
problema o cumpliendo un deseo o simplemente agregando un toque de alegría al día de alguien? Cuanto más contexto proporcionemos, mejor nuestro cuerpo de IA
podrá adaptar su respuesta. Por último, dejemos
espacio para la creatividad. No tengas miedo de
pensar fuera de la caja e inyectar un poco de
personalidad en tu pronta. Después de todo, no solo estamos
diseñando una aplicación, estamos creando una experiencia Probemos el enfoque de preguntas para el futuro.
Trabajar con indicaciones. Preparé varias preguntas
respondiendo a esas. Generarás y escribirás
un prompt realmente bueno, que luego se puede pasar
a la herramienta de IA. La primera pregunta, ¿cuál
es la trama principal o historia de la idea de tu aplicación?
¿Cuál es el propósito? Por ejemplo, me
gustaría diseñar una sencilla aplicación móvil
para el seguimiento de gastos. Es beneficioso
mencionar que la plataforma está haciendo eso para web o móvil. La siguiente pregunta, ¿quién
va a utilizar la aplicación? Por ejemplo, la aplicación será utilizada por un público amplio. En su mayoría personas jóvenes y de
mediana edad que
trabajan que quieren
hacer un seguimiento de sus gastos y
quieren planificar su presupuesto y
ver cómo pueden ahorrar más dinero y ser mejores. Siguiente pregunta. ¿Qué tipo de funcionalidades puede haber en la primera
versión simple? Que sea simple. No enumere cientos de funcionalidades
diferentes. Sea realmente preciso
pero también efectivo. También puedes preguntar
sobre la monetización, pero es de nuevo, agregando
más complejidad Mantengámonos simples. Ejemplo puede ser algo así como funcionalidades principales
serían el registro, adición y eliminación de gastos
recurrentes regulares por día. Tener diferentes categorías
para gastos, calendario, configuración de la
cuenta,
panel de control, algunos análisis donde el usuario puede ver un resumen
de todos los gastos pasados. Después la siguiente pregunta. Último, cómo presentar
un resultado de las ideas de IA. Sea preciso. Por ejemplo, por favor la tarea real para IA. Por favor, cree flujos de usuario para la aplicación que
acabo de describir, así puedo utilizarlos para diseñar marcos de
alambre para probar la
aplicación con futuros usuarios. Al final, como mencioné, tenemos de tres a cuatro preguntas
sencillas. Qué, quién y cómo. Resumir todas las respuestas de esas preguntas y
también dividir un párrafo. Ayuda a obtener mejores resultados con usted consiguió su prompt,
vamos a probarlo. En el siguiente video, te
voy a mostrar cómo diferentes plataformas generan tres resultados diferentes
con el mismo prompt. Y luego elegiremos uno
de ellos y usaremos más.
4. Generación de flujos de usuarios con IA: En esta lección, vamos a utilizar el
prompt de ejemplo que te di en el video anterior para finalmente ver los resultados
generados por la IA. Como dije, voy a utilizar las tres plataformas para comparar los resultados y elegir
los mejores de ellos. El primero es char GPT. Estoy usando una
copia de cuenta gratuita pegando mi prompt y quiero generar flujos de
usuario para una aplicación llamativa
costosa Estoy aportando todos los
detalles, el propósito, la audiencia,
mis funcionalidades y la tarea misma. Como expliqué en
la lección anterior, veamos los resultados. Lo que vamos a tener aquí. Tenemos un
flujo corto de incorporación así como inicio de sesión. Que es un buen dashboard
con un resumen como flujo de pantalla de inicio para agregar
gastos con algunos detalles, ver tus
gastos, analytics, cuenta de
usuario Cerrar sesión En general, el resultado es agradable,
pero para construir los diseños necesitaría
un poco más de detalles Siempre podemos regenerar
la respuesta después, pero me gustaría probar también
otras herramientas El siguiente es Géminis. Estoy usando el mismo
prompt y simplemente copiarlo y pegarlo de
nuevo. Veamos N Veo que tenemos un poco más de
detalles para nuestro trabajo posterior, que es Great Gemini
divide todo en varios flujos principales como iniciar sesión y agregar un
gasto, y así sucesivamente E incluso mencionó
mensajes de error lo cual es útil. Derecha. Lo que me gusta
es que veamos descripciones de
pantallas
e incluso botones y etiquetas de
campo de texto Eso es muy bueno.
Bien. ¿Qué más? La aplicación muestra los campos de la pantalla de
gastos para ingresar el monto, categoría, la fecha
y el nodo opcional. Eso es lo que necesitamos
para nuestro prototipado. Perfecto. Bien. El último que me gustaría
probar es la perplejidad La herramienta es alimentada a ojo
abierto y también te
brinda muchas referencias
adicionales de referencias
adicionales de Internet para
el tema relacionado. Como mencioné antes, estoy haciendo la misma acción, agregando mi prompt preparado
para ver el resultado. Bien, ¿qué
vamos a tener aquí? El resultado tiene menos detalles
que la herramienta anterior. Aquí podemos ver un alto nivel de falla con una breve
descripción de cada pantalla No creo que sea
suficiente para comenzar realmente el diseño de la cuenta de usuario tiene un poco más de información, la capacidad de gestionar la
identificación también. Ahora me gustaría volver
a la herramienta anterior Gemini, y pedir agregar más
detalles a la respuesta. Necesito más información para construir yo usando componentes de
marco de fuego preparados, algo así como botones, campos de
texto, etc. Bien, veamos. El resultado parece que está pensando
profundamente. Sí, X no es tan fácil, ¿verdad? Oh, guau, eso se ve
prometedor y asombroso. Ahora tenemos todo para
imitar esas ideas en
la interfaz de usuario Copiemos las respuestas
y solo agréguelas a figma. Nos vemos en la siguiente lección, donde vamos a
iniciar el diseño real.
5. Crear pantallas en Figma en función de los flujos de usuarios de IA proporcionados: Bienvenidos a la
parte Figma de la clase. En los próximos 10 minutos, aprenderá a
crear tramas de alambre basadas en flujos generados por IA. Si aún no
tienes una cuenta, necesitarás una para usar
el juego de marco de alambre gratuito que
preparé específicamente
para esta clase. Aquí le mostramos cómo acceder
al archivo diríjase al sitio web de
la comunidad Figma y busque un kit de
planos de estructura alámbrica Alternativamente, puede
usar el enlace proporcionado en la descripción de
la clase en la página del archivo de la comunidad
compartida. Da click en el botón Abrir
en Figma. Esto creará una
copia del archivo en sus borradores lista
para su uso Ya abriré el expediente
para la manifestación. Exploremos lo que hay dentro. La primera página contiene una breve descripción y
algunos ejemplos de pantalla. Puedes navegar hasta el archivo usando el
panel del lado izquierdo. El archivo está organizado
en tres páginas principales, Descripción,
componentes y portada. También he creado una
página adicional llamada Mi Proyecto. Siéntete libre de
nombrarlo de otra manera. En esta página,
estaremos construyendo nuestros defectos. Puede crear nuevas páginas haciendo clic en el icono más aquí. La página Componentes contiene todos los bloques de construcción que necesita para diseñar sus marcos de alambre. Algunos componentes
tienen marcadores de posición, mientras que otros tienen
textos prepoblados para títulos y botones acceder
a ellos Navega
rápidamente al panel izquierdo y
ve a la pestaña Activo, donde verás una lista de
componentes con Bien, bien. Ahora cambiemos a nuestra página recién
creada, mi proyecto. Ya he copiado y pegado la
respuesta generada por IA del video anterior
y
la dividí en secciones que representan
diferentes pantallas Esta estructura
también fue proporcionada por AI. Como recuerdas,
comenzaremos con la pantalla de inicio de sesión Para agregar
elementos a la pantalla, abriré el panel de activos y buscaré el componente de
pantalla apropiado. Recuerda, puedes personalizar
esta experiencia nombrando tus páginas y explorando los componentes para
adaptarlos a tu proyecto Comencemos nuestro
prototipado rápido y enmarcado de cables. Estoy agarrando la pantalla desde el lado izquierdo de la
interfaz Figma desde los activos Comprobemos rápidamente lo que sí
proporcioné para nosotros. La pantalla de inicio de sesión
constará de campo de texto, subtítulo y un
par de botones El primer campo es el nombre de usuario, IA, también asesorado,
y la contraseña. Por supuesto,
busquemos botones. Necesitamos el
botón principal de inicio de sesión. También necesitamos un
botón secundario registrarse como de costumbre, lo
puedes encontrar en casi todas las aplicaciones
cuando iniciaste. Además, la
inteligencia artificial aconseja tener un botón de contraseña olvidada,
lo cual es comprensible. Vamos a agarrar el encabezado para la pantalla y usarlo para
proporcionar un título. Estoy quitando el fondo,
no lo necesitamos, y los iconos desde arriba ven
como es fácil hacerlo en el panel de control del
componente en el lado derecho, lo
llamamos login y tal vez podamos hacerlo un poco más
personalizado y agregar algunos. Por favor, sostenga en la parte superior solo
para que sea un poco más sintiendo que es un comienzo del
viaje del usuario de la aplicación. Estoy haciendo algunos ajustes
del layout. Por supuesto, no estamos haciendo ningún pixel perfect design aquí. Estamos más bien simplemente recolectando
todos los artículos en la pantalla. No estoy midiendo nada y no lo
estoy haciendo realmente. Incluso poniendo todo eso en el marco y nombrando el marco que
necesitaríamos para el futuro Prototipado y conexión de
todas las pantallas. Bien, la primera pantalla está hecha. Veamos qué más
podemos hacer aquí. ¿Dashboard? Sí, probablemente
necesitamos continuar con la pantalla de inicio que
llamó dashboard en esto. Texto de AI. Nuevamente, estamos
buscando una pantalla en el panel de activos para comenzar a
construir el flujo de usuarios. ¿Qué más necesitamos?
Por supuesto el encabezado. Al ser una pantalla de inicio, necesitaríamos algo
así como icono para abrir un menú con otras
opciones para el usuario. Probablemente un calendario. Lo vimos también en la
IA proporcionó detalles. Sí, llamémoslo mis gastos. Creo que lo estaba llamando de otra
manera, como mis finanzas, pero creo que
los gastos suenan mejor. También, en la descripción, mencioné que podemos
agregar un par de más Sí, necesitamos del botón add, que también agarré
del panel Sí, usemos algún
marcador de posición para solo mostrar que
puede haber algunos detalles más También hubo un resumen en
la descripción del flujo de IA. Cantidad de resumen que
gastamos o gasto del usuario. También tenemos que mostrar la pantalla
de. Bien, vamos a comprobarlo. Mmm, Gastos recientes segundo,
pero en más detalles. Bien. Podemos saltarlo por ahora. Y veamos, porque
ya tenemos un ítem de lista, puedes dar click a la lista y luego se
abrirá la página de detalles. Creo que esto se ve bien. Hagamos algunos pequeños
ajustes en el diseño. Creo que esta pantalla
es buena para ir, como ya hicimos el
botón Agregar a mis gastos. Hagamos esta pantalla
con un nuevo gasto. No olvides llamar a tus marcos para que podamos
conectarlos más tarde a la pantalla de flujos a gastos. Voy a usar probablemente un componente de
telón de fondo para eso, pero también puede ser
una pantalla separada. Tenemos que agrupar el fondo porque
la pantalla de inicio se convirtió en un fondo aquí. Ir al panel de activos
busca un componente de telón de fondo. Seguro que lo viste muchas veces
en diferentes aplicaciones. Ahora, es muy
popular usarlo y casi todos los sistemas lo tienen. Bien, cambiemos el
título y el gasto. Creo que podemos eliminar
esos elementos ya que
estaremos agregando nuestros propios
varios campos de texto. Aconsejé agregar también
selección de la categoría para gastos como abarrotes
o casa o algo así. Voy a empezar con eso y los
campos de texto, Eso es bueno, que en esos componentes, aunque sea wireframes, podemos ver algunas etiquetas para que podamos comercializar para futuras
pruebas con los usuarios reales Los usuarios entenderán
lo que esos significan, el patrón primario de agregar. También con la etiqueta
creo que necesitamos
agregar cantidad que está estaba
en la sugerencia de IA. Algún título como un nombre
del menú desplegable de gastos con todas las categorías
de la lista. También hay un
consejo para tener algunos, una nota por cada gasto. Sí, podemos saltarlo
demasiado detallado por ahora. Y tal vez solo tenerlo como
esos texto marcador de posición. Por supuesto, necesitamos
el selector de calendario porque necesitaríamos
configurar el gasto, depende del día,
meses y año Como ya hicimos la pantalla de gastos
publicitarios, creo que también podemos crear una página detallada del gasto. Comprobemos rápidamente si no
nos perdimos nada. Estoy copiando la pantalla. Creo que la página
de detalles del gasto
básicamente será lo mismo que el
gasto publicitario en el telón de fondo. Estoy cambiando el título. Bien, vamos a
comprobar rápidamente lo que tenemos. Básicamente todos esos campos que
acabamos de agregar al gasto publicitario. Necesitamos
convertirlos en etiquetas. Aconsejé tener
dos botones borrar y agregar tiene sentido. usuario puede eliminar el
gasto o agregar algunos detalles y luego
iría a la
pantalla anterior que creamos. Simplemente copiamos todos los campos que
tenemos de la pantalla anterior. Del gasto publicitario, necesitamos la categoría, pero ya es
seleccionada por el usuario. Necesitamos el monto del
gasto y algún título o nombre. Vamos a llamarlo fiesta de cumpleaños. Sí. Y fecha de envío ¿dónde? Eso es 21 de febrero 24. Sí. Básicamente, toda la
información que necesitamos para el primer borrador
de la pantalla está aquí. Hagamos algunos pequeños
ajustes
aunque no sea
necesario porque de nuevo es un por fotograma y solo
probamos la falla y la
idea no debería ser ningún pensamiento del layout en general porque
podemos cambiarlo más tarde Bien, vamos a comprobar lo que tenemos. Ampliar detalle, categoría, fecha con mantener un
nodo. Sí, se ve bien. Sigamos a la siguiente. No me olvido de cambiar
el título de los marcos. Es fácil navegar más tarde ya que nos gustaría
crear una mayor conexión
entre pantallas. Vamos a agregar rápidamente el pop
up y para eliminar gasto, al hacer clic en el botón, eliminar, podemos mostrar este pop
up y luego si haces clic en él, podemos mostrar la pantalla anterior. Yo seguiría con el menú. Como aconsejé tener
varios ítems en la aplicación como analítica y calendario y
cambio de categoría. Definitivamente necesitamos algo de menú. Hay un componente para eso. Es un cajón de navegación para dibujar. Sí, cambiemos el icono. Como puedes ver, es muy
rápido y rápido con una configuración de componente como se
sugiere en el texto. Vamos a tener categorías de
análisis a domicilio, presupuesto, conectar, banco. Sí, esa podría ser una
característica genial en mi perfil. Sí, los íconos
no son un poco ajustados a las etiquetas, pero eso está bien, ya que, de nuevo, nuestros wireframes de borrador Creo que sería bueno
tener también una pantalla de calendario. Y lo tenemos en nuestra
descripción también, porque tenemos este
icono en la parte superior derecha. Da clic ahí y
abres un calendario. Sí, también podría ser en
un telón de fondo. Creo que es mejor
tener componente similar, comportamiento
similar para acciones
similares. En la aplicación
de esta página, hay un calendario simplemente
agregado aquí para que puedas intercambiar entre días y ver
gastos por cada día. También hay una sugerencia
del texto de que
vamos a tener
categorías y agregarlas, lo que también creo que tiene sentido. Te gustaría, como usuario, agregar algunas categorías más, no solo como una estándar, tener la tuya propia, por ejemplo,
para salir, tal vez estudiar
o algo más. Tengámoslo también
aquí rápidamente estamos usando el mismo
título del componente de lista y sí, cambiemos algunas etiquetas
para ese propósito. Todavía necesitamos el botón más, el botón de agregar a eso. Bueno, creamos todas
las pantallas que fueron proporcionadas por la IA para
agregar al flujo. Creo que esas son
pantallas principales para tener para el pequeño gasto o aplicación de
gastos de seguimiento. Por supuesto, pueden ser
muchos más detalles, pero para la primera, para la primera presentación, definitivamente
es suficiente. Conectemos todas las
pantallas a los flujos en el siguiente video e intentemos probarlo con los usuarios
y ver cómo funciona. Nos vemos en el siguiente video.
6. Conectar pantallas con rutas: Chicos, esta es la última
lección de esta clase. En esta lección, me gustaría mostrarte cómo puedes rápidamente, usando la
herramienta prototipo en Figma, conectar todas las
pantallas que creamos Faltaba una pantalla de la lección del video
anterior. Es gasto agregado
y solo copio una pantalla de gastos y cambio la etiqueta del botón porque
básicamente es la misma pantalla. Podré conectar el botón asistido desde la página
de detalles Las herramientas prototipo
aparecen desde la derecha aquí. Haces clic ahí y luego la función parece
que seleccionas uno de los componentes y tú con pequeñas flechas
conectas las pantallas. Al igual que aquí desde el inicio de sesión, el
usuario aparece en la pantalla de inicio cuando el usuario inicia sesión en la aplicación y
proporciona su credencial Inmediatamente puede ver después de eso la
pantalla de inicio que
diseñamos, no nos olvidaremos la contraseña
porque no creamos la pantalla para eso
en botón a expensas. Nos conectamos con la
pantalla a expensas. Después al hacer clic el botón de colección en usted aparece de nuevo en
la pantalla de inicio. ¿Qué más podemos conectar? Hagamos el menú haciendo clic en el menú de
Burger Camburger usuario abre el cajón del menú, y por supuesto puede cerrarlo y volver a
la pantalla de inicio. También conectemos la vista del
calendario desde la parte superior, para que toda la navegación superior
se haga a la pantalla del calendario. Al hacer clic en el, seleccionar uno
de los elementos de la lista, usuario abre la página de detalles tal y como diseñamos en
la lista anterior. Por supuesto, puede volver
a la pantalla de inicio otra vez. Casi todas nuestras pantallas
llevan a la pantalla de inicio. Después de usarlo, conectamos dieta con pantalla de puntos, eliminar. Conectamos la eliminación
con la pantalla de eliminación. Eliminar ventana emergente. Desde aquí básicamente
puedes
eliminar el gasto. Y después de ese usuario lleva a la pantalla de inicio y
al botón de cancelar. Simplemente cerraremos
la ventana emergente y
mostrarás la pantalla anterior
que es la página de detalles. Qué más podemos
tener en el menú, podemos volver a conectar
la pantalla de inicio con
nuestra pantalla de mis gastos. Y desde este menú también
creamos una pantalla de categoría donde cambias categorías o las eliminas de
la pantalla de categorías. De nuevo, puedes volver a la pantalla principal
con el resumen. Sí, olvidé conectar la vista de calendario con la pantalla de inicio para que el usuario pueda volver y cerrar
el calendario. Siento que
será más fácil si solo
agregaremos este botón cruzado a cada uno de los componentes del
telón cuando lo vamos a
probar para usuario. Será más fácil
entender cómo se puede cerrar esta pantalla y
volver al estado anterior. Creo que esos elementos de la lista
también son bastante engañosos. Vamos a proporcionar
al menos algún texto aquí que muestre que los usuarios envían algunos gastos fiesta de
cumpleaños, pero de lo contrario podemos escribir comida para gatos. A lo mejor algunos libros que
compré hace poco, crema de
manos, que se ve
un poco más natural. Sí, cuando seleccionas
la herramienta prototipo, esas flechas se ven
abrumadoras y ocupadas. Pero en realidad, una vez que
empieces a hacer eso, verás y encontrarás
que es súper fácil. Solo necesitas conectar todos
los componentes interactivos con algunas pantallas y luego probar primero
tu prototipo, claro, prefieres
probar eso por tu cuenta. Te voy a enseñar
cómo hacer eso en Figma. Tienes la capacidad de
abrirlo en una ventana separada, que parece un teléfono pequeño. Aquí, haces clic en
el botón de reproducción, lo pruebas, haces clic en todos los botones que conectamos
y ves cómo funciona. Si es necesario, aparece la pantalla, si funciona como se esperaba. ¿Qué más puedes hacer con Figma? Puedes descargar la
app Figma a tu móvil y abrir este prototipo muy
fácilmente en tu móvil, que se verá casi
igual que una aplicación real Y dáselo a algunos de tus amigos para que prueben
tu prototipo y vean qué es hacer
eso solo le das a tus participantes alguna tarea. Por favor, crea un gasto o vuelve
a
cambiar la categoría a la aplicación. Y luego
inmediatamente ves lo que
falta o lo que
realmente no está claro para el usuario. Observa cómo
se comporta el usuario o lo que quiere hacer
clic o lo que no puede encontrar Y luego inmediatamente
ves los puntos débiles
de tu aplicación. Ese fue el último paso de
esta lección, la clase. Ahora vamos a saltar
al proyecto y crear flujos de
usuario y experiencia de usuario
para la aplicación móvil. Con la ayuda de la IA, vamos a sumergirnos en el video de descripción del
proyecto.
7. Proyecto: Hemos recorrido un largo camino en nuestro viaje de diseño UX
y ahora es el momento de
poner nuestras nuevas habilidades encontradas en un proyecto para nuestro proyecto final. Te estoy encargando una
misión que dará rienda suelta a tu innovador interior y
mostrará todo lo que has aprendido hasta ahora en esta clase.
¿Estás listo? Aquí está. Creará un flujo de usuario para una aplicación
móvil o una función dentro de una
aplicación utilizando la potencia de los flujos de usuario
generados. Piensa en cualquier aplicación, tal vez estés sosteniendo
una gran idea nueva, o simplemente puedes usar cualquier característica conocida o aplicación móvil que ya
estés usando. No importa ya que
estamos practicando aquí. Entonces necesitarás llegar
a un buen prompt que encapsula la
esencia de la idea Una vez que tengas tu Pront, es el momento de
ponerlo en la IA y generar flujos de usuario para tu aplicación móvil
o una función Después toma tus resultados, agrégalos a Figma. Usa los componentes que compartí
contigo para crear pantallas. Recuerde, esto no se trata
solo de crear pantallas
bonitas o marcos de alambre altos y
perfectos. Se trata de crear un simulus de experiencias de usuario
intuitivas. No tengas miedo de iterar y refinar después del primer
o segundo resultado Si quieres, vas más allá
conecta pantallas con la función de prototipado en Figma
y pruébalo con tu
familia o amigos Ya tienes mi consejo sobre cómo ejecutar pruebas de
usuario efectivas. Por favor, agrega tus proyectos
como captura de pantalla bajo esta clase. Estoy súper feliz de
comentar y darte
un consejo. Gracias por estar
aquí hasta el final. Feliz diseñando y te
veré del otro lado. Adiós.
Katerina Liebich Blik, UI & Product designer | UX researcher
