Curso Diseño UI - 3. Diseño UI vs UX vs Front-End
Summary
TLDREl guion del video explica la diferencia entre 'UI' (Interfaz de Usuario) y 'UX' (Experiencia de Usuario), dos términos a menudo confundidos. Mientras que la UI se refiere a la apariencia y diseño visual de una aplicación, el UX se enfoca en las interacciones y sensaciones que genera en el usuario a lo largo del tiempo. Se ilustra con un ejemplo de compra de un iPad, destacando cómo la experiencia comienza desde la tienda hasta la configuración inicial del dispositivo. Además, se aclaran las confusiones con 'Front-end', que se relaciona con el desarrollo de la interfaz digital, y cómo a veces los diseñadores de UI pueden tener que cubrir múltiples roles en el proceso de creación de productos digitales.
Takeaways
- 😀 La confusión entre 'UI' (Interfaz de Usuario) y 'UX' (Experiencia de Usuario) es común, pero ambas son aspectos distintos de la experiencia digital.
- 🔍 'UX' se refiere a la experiencia de usuario en su conjunto, incluyendo interacciones con una marca, producto o servicio.
- 🎨 'UI' se centra en la interfaz gráfica de usuario, es decir, cómo se presenta y cómo el usuario interactúa con ella.
- 📦 El ejemplo del iPad ilustra cómo la experiencia de usuario abarca desde la compra en la tienda hasta la configuración inicial del dispositivo.
- 🛍️ La experiencia de usuario no solo incluye la interfaz, sino también aspectos como el trato en la tienda y el empaque.
- 👥 En empresas, hay un equipo dedicado al 'UX' que se encarga de investigar y mejorar la experiencia del usuario.
- 💼 'UX' es una disciplina que puede involucrar análisis, entrevistas y actividades para cumplir con los estándares de la empresa.
- 🖥️ 'Front-end' se refiere a la fase de desarrollo que construye la parte delantera de una interfaz digital, basándose en diseños previamente creados.
- 👨💻 Los diseñadores de 'UI' no necesariamente escriben código, su trabajo es asegurarse de que el diseño se construya correctamente por otros.
- 🌐 El diseño de interfaces interactúa con otras áreas y a veces los límites entre las disciplinas no son claros, lo que puede llevar a que los diseñadores aborden múltiples roles.
- 📚 En la realidad, especialmente en Latinoamérica, es común que los diseñadores de interfaces tengan que cubrir áreas como 'UX', 'Front-end' y otros aspectos del proceso de diseño.
- 🌟 Aunque es ideal tener especialistas en cada área, en muchos contextos, es necesario estar preparado para abordar múltiples disciplinas en el diseño de interfaces digitales.
Q & A
¿Qué significa 'diseñador y guay' y 'diseñador y uex' en las descripciones de perfil de alguien?
-Esto se refiere a personas que se identifican como diseñadores gráficos ('guay') y diseñadores de experiencia de usuario ('uex'), respectivamente. La confusión surge porque ambos términos son acrónimos y a menudo se usan juntos, pero representan roles distintos dentro del diseño.
¿Cuál es la diferencia entre 'UI' y 'UX' según el guion?
-La 'UI' se refiere a la 'Interfaz de Usuario', que es el diseño gráfico de una aplicación o sitio web. Mientras tanto, el 'UX' se refiere a la 'Experiencia de Usuario', que cubre todas las interacciones que un usuario tiene con un producto o marca, más allá de la interfaz gráfica.
¿Qué ejemplo se utiliza para ilustrar la 'Experiencia de Usuario' en el guion?
-Se utiliza el ejemplo de la compra de un iPad, desde la interacción en la tienda hasta la configuración inicial del dispositivo, para demostrar cómo cada paso contribuye a la experiencia de usuario.
¿Por qué es importante distinguir entre 'UI' y 'UX' en el diseño de productos digitales?
-Es importante porque, aunque a menudo se confunden, la 'UI' se enfoca en la apariencia y usabilidad de la interfaz, mientras que el 'UX' se enfoca en las interacciones y emociones del usuario a lo largo de su experiencia con el producto.
¿Qué es el 'Front-end' según el guion?
-El 'Front-end' es la etapa de desarrollo que implica escribir el código HTML, CSS y JavaScript necesario para dar vida a los diseños de la 'UI' y hacer que sean accesibles y funcionales en un navegador web.
¿Por qué a veces se confunde el rol de 'Diseñador de Interfaces' con 'Desarrollador Front-end'?
-Se confunde porque el trabajo de un diseñador de interfaces puede no ser solo conceptual, sino que a menudo también se encargan de la implementación de esos diseños a través del código front-end, especialmente en entornos donde no hay una especialización clara.
¿Qué implica ser un 'Diseñador de Interfaces' en el contexto del guion?
-Ser un 'Diseñador de Interfaces' implica conceptualizar y diseñar pantallas para aplicaciones o sitios web, asegurándose de que se reflejen correctamente en la implementación final, sin necesariamente escribir el código front-end o back-end.
¿Por qué es común que los diseñadores de interfaces también se vean envueltos en tareas de 'UX' y 'Front-end' según el guion?
-Es común debido a la falta de especialización en muchas empresas, especialmente fuera de Silicon Valley, donde los diseñadores pueden tener que cubrir múltiples roles para asegurar que sus diseños se implementen adecuadamente.
¿Qué sugiere el guion sobre cómo los diseñadores de interfaces deberían prepararse para su trabajo?
-El guion sugiere que los diseñadores de interfaces deben estar preparados para cubrir áreas como el 'UX', el diseño gráfico, y posiblemente el 'Front-end', al menos en entornos donde no hay una gran especialización o recursos.
¿Cuál es la perspectiva del guion sobre el estado actual de la industria del diseño en Latinoamérica?
-El guion indica que en Latinoamérica, y en Chile en particular, es probable que los diseñadores de interfaces tengan que cubrir múltiples roles y tareas, más allá de solo diseñar interfaces, debido a las limitaciones de recursos y especialización en la industria.
Outlines
😀 Diferencia entre UI y UX
El primer párrafo explica la diferencia entre el término 'UI' (Interfaz de Usuario) y 'UX' (Experiencia de Usuario). El UI se refiere a la apariencia visual y la estructura de una aplicación o sitio web, mientras que el UX se enfoca en las interacciones del usuario con el producto y cómo se siente a lo largo de su experiencia. Se utiliza el ejemplo de la compra de un iPad para ilustrar cómo el proceso completo, desde la atención en la tienda hasta la configuración inicial del dispositivo, contribuye a la experiencia de usuario, más allá de la interfaz gráfica propiamente dicha.
🤔 Confusión entre UI, UX y Frontend
El segundo párrafo profundiza en la confusión que a menudo surge entre los roles de diseñador de interfaces (UI), experiencia de usuario (UX) y desarrollo frontend. Se aclara que, aunque los diseñadores de UI pueden estar involucrados en el proceso de UX, no siempre son responsables de todas las fases de la experiencia del usuario. Además, se diferencia el diseño de interfaces (UI/UX) de la etapa de desarrollo frontend, que implica escribir código para dar vida a los diseños en navegadores web. Se señala que a veces, debido a esta confusión, las personas pueden asumir que diseñar interfaces es lo mismo que brindar una buena experiencia de usuario o que involucra el desarrollo frontend.
👨💻 Realidad del diseño de interfaces en el mundo laboral
El tercer párrafo discute la realidad del trabajo de los diseñadores de interfaces en el ámbito profesional, especialmente en contextos fuera de Silicon Valley y en empresas que no tienen los recursos de las grandes corporaciones. Se menciona que, en muchos casos, los diseñadores pueden tener que cubrir múltiples roles, desde el diseño de la experiencia de usuario hasta el desarrollo frontend, debido a las limitaciones de recursos humanos y presupuestarios. Se destaca la importancia de estar preparado para abordar estas múltiples tareas y se sugiere que, a pesar de las ideales distinciones entre los roles, en la práctica es común que los diseñadores tengan que estar versados en áreas más allá del diseño puro.
Mindmap
Keywords
💡Diseñador
💡GUI (Interfaz Gráfica de Usuario)
💡UX (Experiencia de Usuario)
💡User Experience (UX) Design
💡Front-end
💡Wireframes
💡Interfaces
💡Confusión entre términos
💡Evaluación de la experiencia del usuario
💡Desarrollo de interfaces
💡Industria del diseño
Highlights
La diferencia entre UI (Interfaz de Usuario) y UX (Experiencia de Usuario) se explica a través de un ejemplo práctico.
UX se refiere a las interacciones que un usuario tiene con una marca, producto o servicio.
El proceso de compra de un iPad ilustra cómo se genera una experiencia de usuario.
La atención en una tienda y la respuesta a las dudas del cliente son parte de la experiencia de usuario.
El diseño de la tienda y la forma en que se atiende al cliente influyen en la experiencia de compra.
La experiencia de desempaquetar un producto es parte integral de la experiencia de usuario.
La interfaz de usuario aparece en el último paso del proceso de experiencia de usuario.
La experiencia de usuario no necesariamente depende de la interfaz de usuario del producto.
El papel del departamento de UX es construir experiencias que cumplan con ciertos estándares para los usuarios.
La confusión entre diseñadores de interfaces y expertos en experiencia de usuario se debe a una falta de comprensión clara de sus roles.
El diseño de interfaces interactúa con otras áreas en la creación de productos digitales.
Los límites de la disciplina del diseño UI no son claros y a menudo se confunde con otras áreas.
El desarrollo front-end es diferente al diseño de interfaces y no implica necesariamente escribir código.
Los diseñadores de interfaces no deben necesariamente ser expertos en todas las áreas, pero deben tener conocimientos básicos para comunicarse con ellas.
En la realidad, muchos diseñadores de interfaces en Latinoamérica cubren múltiples roles debido a las limitaciones de recursos.
El estado actual de la industria en Chile y gran parte de Latinoamérica puede requerir a los diseñadores que realicen tareas más allá de su especialización.
El curso se enfoca en el diseño de interfaces digitales y no abarca todas las áreas que un diseñador puede tener que cubrir en la práctica.
Transcripts
bien creo que todos hemos visto a
alguien que tenga en su descripción o
que se defina a sí mismo como un
diseñador y guay y uex o wikis pero qué
significa esto porque las personas usan
estas estas dos siglas o estas dos
acrónimos al lado del otro entendamos en
esta elección cuál es la diferencia
entre y white y su ex y por qué muchos
muchos confunden lo que son estas estas
dos terminologías entonces ya sabemos lo
que es y hay cierto es y es el interface
que para fines prácticos en el fondo es
un sinónimo de decir interfaz gráfica de
usuario pero que es uex veámoslo a
continuación uex al igual que igual
viene de un acrónimo en inglés y las
letras y la letra x vienen de la palabra
y user experience que en el fondo
significan en español
experiencia de usuario entonces la
experiencia de usuario es se refiere a
las interacciones que un usuario tiene
con una marca producto o producto
le hacen sentir me explico yo tengo por
ejemplo un ipad cierto que es donde
estoy viendo esta presentación entonces
hay una experiencia que yo tuve al
momento de ir a la tienda de apps cierto
había 10 todos estos mesones blancos la
forma en que me atendió la persona de
esta tienda me hizo sentir de cierta
forma me hizo sentir acogido me
respondió a todas mis dudas por lo tanto
me hizo sentir escuchado me hizo sentir
que las preguntas que yo tenía
no eran estúpidas me atendió de buena
forma y finalmente terminé comprando
este ipad
posteriormente cuando llegué a casa abrí
este esta caja del ipad que venía en una
caja blanca muy bonita con algunas
terminaciones brillantes que lo hacían
ver relativamente elegante así que lo
saqué de la caja que calzaba
perfectamente casi que estaba al vacío
el ipad dentro de la dentro de esta caja
venían unos manuales de instrucciones
muy bonitos bien empaquetados y luego
venía el ipad en sí mismo envuelto en un
plástico entonces abrí este plástico que
venía muy bien la barra dito y al
momento de sacarlo generaba esta
sensación de estar abriendo algo nuevo
que es muy interesante y el momento de
prender el ipad aparece esta manzanita
te pregunta un par de cosas y ya está
lista para que la pudiera utilizar
entonces todo eso es una experiencia
como me hizo y me hizo como decirlo la
forma en que me sentí a lo largo de todo
ese proceso ya ya sea desde el diseño de
la tienda desde cómo me respondió la
persona hasta cómo fue la interacción al
momento de encender el ipad e ingresar
las primeras configuraciones fue todo
bastante similar todo me hizo sentir de
la misma forma me hizo sentir que estaba
siendo escuchado que ninguna de las
cosas que decía eran estúpidas me hizo
sentir que este producto me entendía
porque nada de lo que me solicitó hacer
para desde que tuve interés en comprar
el producto hasta que comencé a usarlo
en ningún momento me hizo sentir
frustrado o que me ponía trabas todo el
tiempo fue un fluir amable para mi
experiencia entonces todo eso es una
experiencia y toda esa experiencia no
necesariamente depende de la interfaz
del usuario de la interfaz del ipad al
momento de funcionar porque como pudiste
ver en esta historia la interfaz sólo
apareció en el último paso
en el momento en que yo encendí e
ingresé ciertas configuraciones el resto
fue fuera de una interfaz de usuario por
eso es que es importante separar lo que
es y uex de lo que es igual la interfaz
de usuario tiene ingerencia que afecta a
lo que es la experiencia que un usuario
tiene al momento de utilizar un producto
o una marca pero no lo es todo la
experiencia de usuario es una es una
disciplina o es un departamento de
muchas marcas que se encarga en
construir experiencias amigables o
experiencias que cumplan con ciertos
criterios para los usuarios al momento
de usar un producto por ejemplo en uber
hay un equipo de su ex que se dedica a
realizar análisis real y se dedica a
realizar entrevistas se dedica a
realizar un montón de actividades que
finalmente los llevan a aplicar ciertos
cambios ya sean en las interfaces o en
ciertos en cierta forma de describirlo
que hagan que la experiencia de los
usuarios cumpla con ciertos estándares
que en esta empresa de ejemplo que
estamos utilizando que es uber
cumpla con estos criterios y sea una
buena experiencia alineada con lo que
quiere proyectar la marca sin embargo
porque a veces se genera esta confusión
y aquellos que diseñamos interfaces
tendemos a creer que somos
también personas que hacemos y user
experience
porque si bien igual es una parte de
todo lo que implica la experiencia del
usuario lo que pasa es que hay una
especie de eclipse en donde finalmente
lo que los usuarios ven lo que la gente
ve tangible del trabajo de un
departamento y uex es la interfaz de
usuario uno crea uno cae en la en la
confusión de creer que lo que está
viendo al utilizar una aplicación por
ejemplo digamos instagram uno ve que la
interfaz es fácil de usar uno ve que la
interfaz tiene botones que son fáciles
de entender y uno dice ah esa es una
interfaz de usuario bien hecha eso es
una buena experiencia
pero solo estamos viendo la parte final
el resultado de un proceso de user
experience que incluye que incluye
análisis entrevistas e investigación un
montón de cosas y guay es la parte
visible de esta de este proceso entonces
uex es un llamémosle un departamento o
un área dentro de los productos
digitales más grandes y el resultado
tangible o el resultado visible de esta
de este trabajo por mejorar la
experiencia de los usuarios al utilizar
un producto es la experiencia la
interfaz de usuario aunque eventualmente
puede resultar en muchas otras cosas
como te decía en el ejemplo del ipad
puede resultar en la forma en que luz en
que las personas te atienden al momento
de ir a la tienda o en la forma en que
están pintadas las paredes en las
tiendas pero ya que estamos hablando de
diseño digital vamos a quedarnos con que
la interfaz de usuario es la parte
tangible o el resultado tangible
de una experiencia de usuario por lo
tanto como vimos anteriormente uruguay
no es su ex guay es una parte de la
experiencia es una parte del proceso de
diseño de experiencia de usuario bien
espero que esto quede claro si tienes
alguna duda déjamelo debajo de este
vídeo pero creo que con eso ya tenemos
claro lo que es la diferencia entre
igual y uex ahora veamos otra confusión
que a veces puede ocurrir que es con el
front end que es el front end el front
end es el el código o la etapa de
desarrollo del código que construye la
parte frontal de una interfaz digital
bien
una interfaz digital como dijimos
anteriormente es la
esta piedra rosetta que permite que un
dispositivo entienda lo que quiere decir
un usuario y lo convierta en un lenguaje
que un sistema pueda entender bien
los diseñadores de interfaces
habitualmente diseñamos nuestras
nuestras pantallas las pantallas para
los sistemas en los que estemos
trabajando en alguna aplicación tipo
adobe ex de tipo sketch tipo firma
etcétera y luego hay ciertos
desarrolladores que son desarrolladores
formen que es básicamente escriben el
código html css y javascript que sea
necesario para que estos diseños que
nosotros hicimos en plano en estas
aplicaciones sean cosas tangibles y que
realmente un navegador las pueda leer y
eso es lo que lo que entendemos como
diseño front-end pero el desarrollo
fonden perdón pero el desarrollo
frontend no es necesariamente igual
entendemos por diseño y uruguay la etapa
en donde estamos conceptualizando las
pantallas en donde estamos diseñando
estas pantallas donde estamos creando
una imagen que se va a utilizar como
referencia base para construir el código
de la aplicación o para construir el
código del sitio web y esto que estamos
diseñando nosotros va a ser la
referencia y el sitio web o la
aplicación debería ser un reflejo exacto
de aquello que nosotros diseñamos pero
nuestro trabajo como diseñadores de
interfaces no es escribir el código ya
sea front-end ni siquiera mucho menos el
código back-end o mucho menos
integrarnos con las bases de datos
nuestro trabajo es velar por el diseño y
que aquello que nosotros estamos
diseñando posteriormente se construya
por otras personas correctamente de la
forma en que nosotros lo diseñamos
por eso el diseño de interfaces esto es
muy importante entenderlo el diseño de
interfaces interactúa con muchas otras
áreas dentro de la creación de productos
digitales y esto hace que los límites de
las de la disciplina del diseño
uruguay no sean muy claros
por eso nosotros nos encontramos con
personas que dicen soy diseñador y guay
uex o dicen soy diseñador diseñador y
guay y desarrollador forment o que dicen
ser todas las cosas
quienes diseñan interfaces digitales
nosotros en este caso no necesitamos
necesariamente dominar todas las áreas
nosotros vamos a diseñar interfaces de
usuario y eso no implica que debamos ser
expertos en user experience o en todas
las etapas de la experiencia de usuario
tampoco implica que tengamos que hacer
expertos en el diseño o en el desarrollo
front-end tampoco implica que tengamos
que ser expertos fotógrafos tampoco
implica que tengamos que ser redactores
perfectos que tenemos que tener una
ortografía perfecta todos esos
conocimientos son ideales y debemos
conocer por lo menos lo mínimo para
poder comunicarnos con estas diferentes
áreas tenemos que saber lo mínimo de
usar experience para poder entender lo
que nos va a decir un departamento de
investigación cierto tenemos que
entender lo mínimo de fotografía para
saber cómo pedirle una buena foto para
nuestra interfaz a un usuario
al fotógrafo tenemos que entender lo
mínimo de redacción para saber qué es lo
que le vamos a pedir a la persona que
redacte los textos para nuestras
interfaces pero eso no quiere decir que
nuestro trabajo sea realizar todas estas
labores sin embargo dicho eso nuestro
trabajo como diseñadores de user
interface
probablemente en muchos de los casos nos
va a tocar cubrir todas estas áreas
porque entiendo suena muy bonito y en la
mayoría de los de los vídeos que verás
en youtube en la mayoría de los
contenidos que tienen que encontrarse en
internet te van a decir esto que diseño
y guay es una cosa que diseñó y uex es
otra cosa que redacción de copy es otra
cosa que fotografía es otra cosa pero
la la cruda realidad por lo menos en
latinoamérica es que le es muy probable
que te toque cubrir todas estas áreas
así que es importante que estés
preparado porque es muy probable que te
toque cubrir todas estas áreas porque
aquí no estamos en silicon valley aquí
no estamos hablando de empresas
digitales que tengan miles de millones
de dólares sería ideal pero lo más
probable es que por ejemplo estando en
chile te toque diseñar qué es por
ejemplo el trabajo que tengo yo hoy día
que de en el trabajo de oficina
lo que me toca hacer a mí es diseñar
interfaces para sistemas informáticos y
en estas interfaces me toca trabajar con
un montón de desarrolladores y sucede
que todos estos desarrolladores no son
expertos son florent así que muchas
veces me ha tocado a mí desarrollar el
código front-end para estas estas
interfaces o para estas para estos
sistemas también ocurre que el
departamento de
el departamento de desarrollo no es tan
amplio por lo tanto no tenemos un equipo
de user experience no tenemos aún weeks
researcher no tenemos a un ex líder
básicamente me toca cubrir con todos
estos roles y entender que recibir los
requerimientos de las otras áreas
diseñar las pantallas hacer los wire
frames entregar los diseños hacer el
front end cierto soy básicamente una
única persona que cumple todos estos
roles y no soy el único que que trabaja
de esta forma hay muchos otros
diseñadores que yo conozco que trabajan
de esta misma modalidad y no es
necesariamente que sea malo es porque es
el estado actual de la industria por lo
menos en chile y entiendo que en gran
parte de latinoamérica
sé que en españa están un poquito más
adelantado pero tampoco es que sea mucha
la diferencia y lo más probable es que
el único lugar en donde esté
step este mundo ideal en donde el
diseñador de interfaces únicamente
diseña interfaces quizás el único
contexto en donde eso ocurre así sea en
sillicon valley o en lugares muy
avanzados o en empresas muy grandes la
mayoría de los casos nos van a tocar a
realizar todos los cubrir todas las
áreas sí que es importante que nos vamos
ya preparando para eso pero por ahora
para fines de este curso vamos a seguir
enfocados en el diseño de interfaces
digitales exclusivamente bien te mando
un abrazo y nos vemos en la próxima
elección
Weitere ähnliche Videos ansehen
UX Design vs UI Design - What's The Difference? (2024)
Curso Android. Uso de recursos I. Vídeo 23
Don Norman: The term "UX"
Entendiendo al cliente. User Experience y Psicología | Blanca B. | TEDxUC3MLive
Curso Android. Trabajo con API y Eventos I. Vídeo 20
Curso Diseño UI - 14. Claves Para un Buen Diseño UI
5.0 / 5 (0 votes)