Porque todavía nos queda gente muy top, tenemos todavía a Estefany Aguilar que la tengo aquí esperando, que lleva un rato esperando, perdona Estefi, que es que Estefany, que llevamos aquí un rato de charla y vamos un poco retrasados.
Pero ¿todo bien, Carlos? Referente, vale, bien Midu, todo bien, todo genial, estamos bien, vale, genial. Pues amigos, vamos con la siguiente persona que nos va a dar una pedazo de charla y es Estefany Aguilar que te va a estar explicando cómo aprender UX para developers. Así que vamos con Estefany, ¿qué tal? ¿Cómo estás?
Hola Midu, súper bien, feliz de estar aquí contigo, un honor de verdad y nada, aquí preparando esta súper charla que me encantan estos temas como cuando son combinaditos UX, desarrollo, me encantan. Entonces aquí súper feliz de estar aquí contigo y con toda tu comunidad.
¡Qué grande! Bueno, pues a ver si convences a unos cuantos porque mucha gente dice, ah, yo diseño, yo no quiero, yo no sé qué, no sé cuánto. Bueno, pues hoy Estefany os va a convencer, ¿vale? De que tenéis que tener en cuenta la experiencia del usuario para desarrolladores. Muchas gracias por pasarte, Estefany. Te lo dejo todo a tus manos, ¿vale? Te comparto la pantalla y yo me marcho por aquí y te dejo tu tiempo. Muchas gracias por pasarte. Un abrazo.
Listo, gracias Midu. Bueno, muy buenas tardes, noches desde donde nos estén viendo. Mi nombre es Estefany Aguilar, me conocen más como Tef o TefCode, entonces ahí les dejo también mi nombre de usuario por si de pronto me han escuchado.
Bueno, el día de hoy vamos a hablar de un tema súper espectacular que es sobre UX para developers. Para esto vamos a hablar de tres temas fundamentales. El primero es experiencia de usuario.
El segundo vamos a hablar sobre todo el tema de desarrollo front-end en particular. Y luego vamos a hablar de heurísticas de UX. Este tema de heurísticas me encanta y ya vamos a hablar un poquitico más en detalle.
Y también de una experiencia personal que es cómo estas heurísticas me han ayudado mucho para aportar también al producto desde la parte del diseño.
Entonces, para este tema de experiencia es importante que sepamos qué es. Y básicamente cuando hablamos de UX es cómo se siente nuestro usuario cuando ingresa a nuestra aplicación.
Si logro completar una tarea. Si, por ejemplo, yo como usuaria quiero realizar una transferencia bancaria, por ejemplo, a mi vez. ¿Cómo me siento yo en esa aplicación?
Y si realmente logro completar esa tarea. Es decir, si logro hacer efectivamente esta transferencia o me tocó buscar ayuda, tal vez llamar al centro de ayuda de la misma aplicación para lograr hacer la transferencia, ir al banco.
O si por el contrario, bueno, tuve errores. En fin. Entonces, de eso nos habla básicamente la experiencia de usuario.
Cómo nos sentimos y también si logramos completar esas tareas y entendemos el contexto en general.
Y también es importante que sepamos que esto no es solamente tarea de una sola persona.
Si nosotros estamos trabajando en un equipo en donde tenemos diseñadores, front-end, back-end, tech leads, bueno, en fin.
Esto no quiere decir que solamente el área de UX o de diseño es la encargada de la parte de experiencia de usuario.
Nosotros, especialmente el tema de desarrollo front-end, nosotros como desarrolladores, debemos también estar ahí alertas sobre toda la experiencia, toda la interacción que hay en nuestra aplicación.
Y si en efecto nuestros usuarios sí están utilizando lo que queremos que utilicen o si sí están completando las tareas que queremos que completen.
Entonces, no es solamente de una persona. Y aparte de eso, no es solamente una parte del proceso.
Es decir, no es que el UX lo hago al principio, sino que también va a lo largo de todo el desarrollo de nuestra aplicación.
Eso es bien importante que lo tengamos en cuenta.
Y adicional que no es solamente un tema de centrarse en el usuario.
También implica un montón de cosas.
Y como implica un montón de cosas, pues aquí te cuento más o menos las disciplinas que tiene abarcado todo el tema de experiencia de usuario.
Y es básicamente todo el tema de UX Research, de Content Strategy, de Arquitectura de la Información, de Visual Design, de Usabilidad.
Hay un montón de disciplinas que están inmersas en UX y que, por supuesto, la idea no es que nosotros como desarrolladores nos convirtamos en una persona de UX,
pero que sí conozcamos cuáles son nuestros roles y cómo podemos ajustar esos roles basados en esa experiencia que podemos integrar también en nuestro trabajo y en nuestro día a día.
Nuestro día a día, básicamente, lo que tenemos que hacer es, uno, recibir un diseño.
Digamos que estamos trabajando en un equipo en donde ya hay un diseño y no lo tienen que pasar,
donde tiene que haber ese hand-off o ese traspaso de información,
donde también tenemos que tener habilidades comunicativas con las personas de diseño,
donde no solamente recibimos y hacemos como unas maquinitas, sino que también tenemos que hacer un proceso de,
ok, ven, entendamos qué es lo que me estás pasando, qué es lo que tengo que hacer, cómo es el flujo.
Entonces, ahí, en todo este entendimiento, también vemos otros skills involucrados.
Aparte de eso, pues, después de recibir el diseño y entenderlo, pues, obviamente, es traspasarlo a código y ya hacerlo realidad.
Pero aquí es donde debemos hacer un pequeño ajuste y me han gustado mucho las charlas de la CONF porque precisamente nos hablan
y nos han hablado sobre que nuestro rol como desarrolladores no es solamente codear, no es recibir una tarea, codeo, entrego, no,
sino que hay otras cosas adicionales que debemos también tener presentes.
Como frontend, debemos ajustarnos también a eso y, uno, cuando nos entregan un diseño,
también es importante que nosotros tengamos ese tema de visual design como súper integrado.
¿Por qué? Porque los diseñadores muchas veces, y ahorita más o menos les cuento un poquito de mi experiencia,
es que hay diseñadores que apenas están llegando al producto, por ejemplo,
y si nosotros ya tenemos experiencia, pues, ya podemos ser incluso muchos más críticos
con ese desarrollo que nos está, con ese diseño que nos están pasando, ¿no?
Entonces, hay varias cosas a tener en cuenta.
Y adicional, todo el tema de usabilidad.
Si nos pasan a nosotros un prototipo o unas páginas ya en diseño, por ejemplo, en Figma,
y nos dicen, ok, de aquí el usuario salta aquí, de aquí, de aquí, ok,
nosotros también podemos participar bastante en ese proceso, revisarlo y decir,
esto sí se puede hacer, esto no se puede hacer.
Entonces, ahí llega la importancia de UX, ¿no?
Porque no es solamente un tema de una persona, que era lo que hablábamos anteriormente,
sino que también buscamos que toda esa experiencia de navegación de nuestros usuarios
sea un éxito por completo, y el éxito también está en manos de nosotros.
Entonces, aquí llega el tema de heurísticas,
que estas heurísticas son básicamente unos pasos generales, no son específicos,
y se tienen que cumplir al pie de la letra,
pero estas heurísticas de usabilidad básicamente nos cuentan ciertas pautas,
que son 10, que debemos tener en cuenta a la hora de crear una página web.
Entonces, aquí no solamente está involucrada la parte de diseño,
sino que al conocer estas heurísticas de UX,
pues básicamente nosotros vamos a tener un conocimiento más amplio
y de cosas que sí se pueden y cosas que no se pueden hacer.
Entonces, vamos por la primera.
Aquí sí nos vamos a sumergir y vamos a hacer de cuenta
que en todos los ejemplos que les voy a contar,
vamos a ser los desarrolladores de ese ejemplo en particular.
En este caso, imaginemos que somos desarrolladores de clase.
Pues básicamente, si nos dicen,
ok, tenemos que hacer un curso y tenemos que mandar todos los videos de las clases,
pues bueno, si a nosotros nos dicen, muestre la clase, lo podemos hacer,
pero en nuestra intención como desarrolladores,
debemos pensar en, ok, para el usuario,
es decir, ¿quién es el usuario?
Un estudiante, es capaz de comprender en qué parte va de la clase,
si se quiere detener o si sabe en qué clase va,
si en la 1, si en la 10, si en la 20, si ya va a terminar, si apenas empezó.
Entonces, ahí es donde entra también en juego, ok, este tema de las heurísticas
y en particular esta primera que es la visibilidad del estado del sistema.
¿Cómo le estoy proyectando yo a mis usuarios?
¿En dónde están?
La segunda es que nosotros, siempre como seres humanos,
asociamos mucho con el mundo real.
De hecho, esto me encanta porque en el tema de animaciones es muy parecido.
Si nosotros vemos personas saltando o si vemos un carro moviéndose,
ya tenemos en nuestra mente más o menos cómo debe funcionar el mundo real, ¿no?
Pero si llegamos a una aplicación y no vemos que haya cierta coherencia,
inmediatamente nuestra mente es como, ok, aquí está pasando algo.
Y ya es una alerta que se despierta en nosotros.
Entonces, por eso es tan importante que todo lo que vemos en el mundo exterior
también lo tratemos de plasmar en una web o en un producto que estemos creando.
En este caso, es Airbnb y ellos lo que hicieron es colocar estos íconos,
por ejemplo, de isla o del mapa que está en la parte inferior.
Y ya estos íconos literalmente nos llevan a recordar,
que más adelante vamos a hablar de ese tema de recordar, a recordar esto.
Y ya no tenemos que pensar, ok, isla, ¿cómo así? ¿Qué será eso?
¿Qué me estará diciendo?
Sino que vemos la imagen, la asociamos con lo que ya conocemos como isla,
que es una palmera, arenita, y ya inmediatamente sabemos que son esos lugares
en una isla, por ejemplo.
Aparte de eso, pensar en que le tenemos que dar libertad a los usuarios.
Entonces, si nosotros lo llevamos a cierto sitio al usuario, pues también debemos darle la opción
de salirse, de devolverse, de, ok, darle otro estado adicional, libertad y control absoluto
en esa aplicación que estamos creando.
No sé si les ha pasado o me ha pasado, que entra a alguna web y de cierta forma
no encuentra escapatoria.
Y la única es literal cerrar el sitio y volverlo a abrir.
Entonces, ahí es donde nosotros debemos evitar que el usuario se salga, sino que se quede,
pero que tenga el control de lo que quiere hacer dentro de nuestra aplicación.
Hasta aquí he hablado de tres heurísticas.
Y me gustaría que ustedes también nos cuenten en el chat
qué otros ejemplos de aplicaciones logran detectar con este tema de las heurísticas.
Esto, de hecho, lo hice con unos estudiantes hace poquito y era muy divertido
porque encontrábamos ciertos ejemplos.
Y eso nos da también como la capacidad y la comprensión general
de todas las aplicaciones que usamos y de estos conceptos tan importantes
que debemos tener en cuenta también a la hora de crear aplicaciones.
La cuarta, yo soy súper canzona con este tema y es la consistencia.
¿A qué nos referimos con esto?
Pues que todo lo que tenga que ver con un grupito en particular,
pues se parezca o tenga relación.
En este caso, por ejemplo, vemos Starbucks que tiene un header
y en ese header o navbar tiene unos ítems, tiene menú, tiene café, tiene novedades
y como podemos ver, todos están escritos de la misma forma,
con el mismo font width o con el mismo peso.
También tiene las letras en mayúscula, el mismo tamaño,
pero si lo empezamos a colocar de forma desordenada,
pues ya nos da a entender otro tipo de cosas.
Entonces aquí lo que hacemos con el tema de la consistencia
es dar a entender que hace parte de un mismo grupo también.
Por ejemplo, los cafés que están en la parte inferior,
ahí vemos que hacen parte del mismo grupo y que aparte de eso,
aunque son cafés diferentes, están en el mismo fondo
y que aparte de eso los nombres también son muy similares entre sí
en cuanto a texto, a que si están escritos en minúscula, al peso, en fin.
Entonces eso es clave también para poder crear nuestros sitios, consistencia.
En mi caso personal, hoy en día, si por ejemplo creamos un modal
y veo que en otro lado se está haciendo ese mismo modal,
pero diferente, con otro look and feel,
pues ahí mismo levanto la mano y le digo al diseñador o la diseñadora
como, hey, pues en otro sitio de nuestra misma aplicación
se está haciendo esto mismo, pero está diferente.
¿Qué podemos hacer para que haya consistencia en estas dos partes
de la aplicación?
No sé si les ha pasado, a mí me pasa mucho ese tipo de cosas.
Por eso digo, soy súper cansona con ese tema de la consistencia.
El quinto es el tema de la prevención de errores
que también tocábamos al principio.
¿Cómo podemos hacer que el usuario evite todo este tema de errores?
Entonces, por supuesto, la aplicación está sujeta a que existan errores,
pero ¿cómo podemos hacer para alivianarle esa frustración al usuario?
Entonces acá, por ejemplo, es un ejemplo de Instagram
donde uno puede publicar una foto y ahí podemos colocar también un pie,
como escribir algo, y ahí inmediatamente nos dice como,
ok, tienes 2.200 caracteres disponibles para colocar en tu publicación.
Ahí ya inmediatamente me empieza a contar cada que yo voy escribiendo
y eso ya me da una noción de dónde voy y cuándo ya es el límite, ¿no?
Supongamos en Twitter, imagínense que este mismo caso suceda
y nosotros estemos escribiendo y de la nada nos diga que está en rojo
o que está mal, inmediatamente nosotros vamos a decir,
ok, ¿aquí qué está pasando?
¿Yo por qué me equivoqué?
Esto no me está diciendo nada.
Entonces la idea es que literalmente la aplicación
hasta con esta prevención de errores te ayude
y por supuesto, como no tenemos a nadie a quien preguntarle cosas
sobre la aplicación, pues que la misma aplicación nos hable
y haga que no cometamos este tipo de errores.
La sexta es básicamente que no le digamos al usuario,
oye, ¿recuerdas aquella vez qué?
O recuerdas, o tal, tal, tal.
Sino que nosotros recurramos a un tema de recuerdo.
Entonces, o de reconocimiento más allá de recuerdos.
Aquí en este caso es un agendamiento de visita
de esta aplicación que se llama La House
y ahí es de venta de casa o de vivienda.
Entonces una persona puede llegar a la propiedad,
decirle como, oye, yo quiero agendar visita
y te lleva a esta vista.
¿Qué pasa si uno como usuario no se acuerda
cuál fue la propiedad, en dónde quedaba?
Bueno, entonces básicamente le ayudamos ahí con el reconocimiento,
con una imagen pequeñita y con el nombre de la aplicación.
Entonces, miren cómo no recurrimos a que él recuerde cuál fue
o cuál es la que quiere agendar,
sino que inmediatamente se lo ponemos ahí pequeñito
para que haga un reconocimiento y se acuerde
de cuál es esa propiedad que quiere visitar.
La sexta es flexibilidad y eficiencia de uso.
Aquí esto me encanta porque no solamente hablamos
de usuarios nuevos, porque miren que cuando nosotros
creamos una aplicación siempre pensamos en los usuarios
que ya van a llegar, que todavía no conocen nuestro producto,
pero ¿qué pasa con esos usuarios que ya usan nuestros productos?
Entonces aquí llega una palabra clave que es los aceleradores.
Esos aceleradores nos permiten, como su nombre lo dice,
acelerar ciertos procesos.
Por ejemplo, en Mercado Libre.
Si yo ya compré un mouse, pues básicamente lo que tengo que hacer
es darle en volver a comprar y ya puedo volver a comprar,
por supuesto, el mouse.
No tengo que recurrir a ir al buscador, recordar,
que ahí también se empieza a vincular la otra jurídica,
empezar a recordar cuál era el mouse que yo había comprado,
en qué lugar, nada, sino que él ya me lo está arrojando
y si lo quiero volver a comprar, pues inmediatamente lo hago.
Entonces esto también nos da como una flexibilidad
y hacer cosas mucho más rápido.
La octava es que todo lo hagamos mucho más simple
y que todo lo que le mostremos literalmente sea lo necesario.
Es decir, que nos llenemos un montón nuestra web.
De hecho, esta vista puede ser un poco simple, muy, muy, muy simple,
porque si vemos, esto es una web y la web aproximadamente,
la que yo tengo acá es de 1.440 píxeles.
Imagínense el tamaño de la pantalla con solamente mi información
en el centro, pequeñita.
Bueno, de cierta forma se puede ver como súper sola,
pero eso es literalmente lo que debería mostrar,
no necesita mostrar nada más y tampoco distraerme con nada,
porque a la hora del té lo único que yo quiero hacer en Pinterest,
en este caso, es llegar a ver mis pines y listo, ¿no?
Entonces, bueno, ahí está todo este tema de cómo hacemos
que el diseño sea estético, minimalista y que sea literalmente puntual
y al grano con lo que queremos mostrar.
La novena, aquí este tema también tiene que ver con los errores
y es como también podemos decirle al usuario,
oye, te equivocaste, te vamos a dar la oportunidad de que puedas
corregir ese error.
Entonces, acá, por ejemplo, está Gmail,
que si nosotros borramos un correo,
me ha pasado, a veces lo borro y digo, no,
ese no era el que yo quería borrar,
pues ahí me dice inmediatamente, oye,
si te equivocaste, puedes devolver,
es que no hay ningún problema.
Entonces, ya también le da a uno un fresquito como usuario,
como, uff, de la que me salvé, ¿no?
Entonces, también podemos prevenir esos errores
de lo que habíamos hablado antes,
pero también ayudarle en caso de que se haya equivocado
o haya hecho alguna acción innecesaria,
pues, oye, retoma y no hay ningún problema.
Y la última es cómo nosotros podemos ayudar al usuario
con también documentación.
Es decir, si nosotros vamos a un buscador
y empezamos a teclear, a escribir,
pues, digamos que para nosotros es un trabajo adicional.
Pero, por ejemplo, en esta aplicación que me encanta
que se llama ColorHack,
es literalmente una te arroja paletas de colores
y me gusta mucho porque recién uno le da clic
en la barrita de búsqueda,
él te va arrojando como esos colores
a los que tú puedes llegar a buscar
o esas colecciones que puedes llegar a buscar.
Entonces, es muy fácil porque solamente con darle clic
y luego nuevamente clic en alguna de nuestras opciones,
ya tendríamos varias paletas de nuestro gusto.
Entonces, esto me encanta
porque también le podemos ayudar con documentación.
Por supuesto, esto no quiere decir
que lo que vamos a hacer es llenar una pantalla
y una aplicación de un montón de texto,
sino que ciertas cositas que le vayan ayudando al usuario
y le vayan indicando cómo hacer ciertas tareas.
Entonces, todo este tema de las heurísticas
es un tema que me ha ayudado también en lo personal
como desarrolladora Fronten a poder entender
tanto el diseño de los diseñadores, por supuesto,
y cómo nosotros también podemos integrarnos
porque no solamente es equipo diseño y equipo desarrollo,
sino cómo podemos trabajar en conjunto
y cómo también mi conocimiento como desarrolladora
y el conocimiento de ellos como diseñadores
se pueden integrar para mejorar, por supuesto, los productos.
Entonces, no siendo más, muchísimas gracias.
Muchas gracias, Estefan, increíble.
Oye, me ha encantado mucho el diseño de las slides.
¿Lo has dibujado tú a mano?
Sí, yo ilustro, pues no es como que la superilustración,
pero me encanta mucho.
Siento que dibujar es muy terapéutico.
Así uno diga como yo no sé dibujar,
es demasiado terapéutico.
Bueno, pues te ha quedado súper bonito
porque justamente hablabas de esto,
que es minimalista, pero funcional.
Le muestra lo que tiene que mostrar
y te ha quedado muy, muy bonito.
Así que nada, enhorabuena, muchas gracias.
A la gente del chat le ha encantado, ¿eh?
Le ha encantado.
Estaba la gente de no sabía que necesitaba esta charla
o gente que dice estaba esperando todo el día
solo por ver esta charla.
También que les ha encantado todos tus cursos de Platzi.
Dice, ah, yo conozco a Estefany justamente
del curso de Platzi que me enseñó tanto.
Así que genial, gente.
La gente la verdad es que estaba muy contenta.
Así que muchísimas gracias, Estefany.
Muchas gracias por pasarte.
Mira, de mis charlas más esperadas,
muchas gracias, Estef.
Pues aquí ya tienes.
La gente, ¿no?
De verdad, talento colombiano.
Ahí está.
Hasta ha venido Óscar Barajas
y ha dicho, soy tu fan.
Soy tu fan, Estefany.
Así que imagínate.
Imagínate.
Ay, tan lindo.
Qué lindo ese apoyo.
Y gracias, Midu, por este espacio.
Gracias por hacernos felices a nosotros los desarrolladores.
Compartir que todo este tiempo de pandemia
literalmente fue como súper triste para todos.
Pero, de verdad, muchas gracias.
Y gracias por ese contenido también que haces.
Yo soy ahí pendiente de tu Twitter,
pendiente de tus historias, mejor dicho.
Soy la más feliz.
Y gracias, de verdad.
Porque nos ayuda mucho, nos inspira también.
Ah, pues muchas gracias.
Y nos vemos en Colombia, en la Platzi.com justamente.
Así que nada, allí nos saludamos y nos vemos.
Pues, oye, un abrazo enorme desde el otro lado del charco.
Muchísimas gracias por pasarte y nos vemos en la siguiente.
Cuídate mucho.
Gracias a ti.
Chao.
Bueno, pues, Estefany Aguilar, madre mía.
Si no nos interesaba la experiencia de usuario,
yo creo que ahora, ahora sí, ¿vale?
Ahora sí que sí.
Bueno, amigos, voy a enseñaros un vídeo
porque ya veis que ha ido pasando un montón de gente
y tenemos todavía, nos queda la charla de Leo
para que le des caña a tu currículum.
Gracias.