Cu√°l es la diferencia entre dise√Īo UI y dise√Īo UX

Dos conceptos que están muy de moda pero que suelen confundirse. Conoce las diferencias y la relación entre ambos.

Retrato de Enrique Iturriaga Enrique Iturriaga Jacksonville

Seguidores:
62
Opiniones:
30
Votos:
141
Compartir:
Ilustraci√≥n principal del art√≠culo Cu√°l es la diferencia entre dise√Īo UI y dise√Īo UX

Preg√ļntale a 10 dise√Īadores la diferencia entre dise√Īo UI y dise√Īo UX. Seguramente recibir√°s¬†10 respuestas muy distintas.¬†El mundo de la tecnolog√≠a es tan cambiante que todos estamos constantemente tratando de entender sus diferentes vertientes.¬†Vamos a intentar comprender a fondo¬†estos dos conceptos.

Qu√© es dise√Īo UI‚Äč

La sigla UI se explica en ingl√©s con las palabras user¬†interface: interfaz de usuario. Se refiere los elementos mediante los cuales el usuario interact√ļa con el producto. La UI de un producto puede ser algo tan simple como la manija de una puerta o la pantalla inicial de un aplicaci√≥n. Cuando usamos una¬†App estamos interactuando con un producto. Piensa en Spotify o en Uber. Para navegar estas aplicaciones, pulsamos botones, menues¬†de navegaci√≥n, etc. El dise√Īador UI, se encarga de dise√Īar el aspecto de estas aplicaciones.

Si pensamos en UI de manera m√°s flexible, en el mundo f√≠sico, podemos decir que UI es la comunicaci√≥n relacionada con el uso que se establece¬†entre el producto y el usuario. Un ejemplo no convencional de UI podr√≠an ser unas simples tijeras: ¬Ņalguna vez has agarrado unas tijeras de manera incorrecta? ¬ŅC√≥mo puedes saber cu√°l es la manera correcta de usar unas tijeras? ¬ŅC√≥mo logra el producto que sepamos si lo estamos usando de manera incorrecta? Mediante¬†del tacto y la visi√≥n. Cuando metemos el pulgar en el orificio incorrecto de las tijeras, sentimos algo totalmente distinto a cuando lo metemos en el orificio correcto. De esa manera,¬†quien sea que haya dise√Īado¬†las tijeras nos comunica¬†cu√°l es la forma correcta de utilizarlas.

Que es UX?

Cada vez que interactuamos con un producto a trav√©s de su interfaz¬†de usuario (UI)¬†existen reacciones dentro nuestro. Estas reacciones¬†har√°n que¬†juzgamos al producto de una forma determinada. Nuestras reacciones no son objetivas ni¬†tangibles. Pues eso se dedica el dise√Īo es el UX: a planificar la experiencia del usuario (la sigla se explica en ingl√©s con las palabras¬†user experience).

Sin embargo, el trabajo del dise√Īador UX no es crear la experiencia. La experiencia del usuario no es algo que se cree, sino algo que sucede, queramos o no. El dise√Īador UX lo √ļnico que puede hacer es intentar mejorarla y optimizarla, ya que la experiencia es un fen√≥meno subjetivo y ambiguo que depende de muchas variables. Los dise√Īadores UX usan¬†herramientas y m√©todos para poder entender y mejorar la experiencia de manera objetiva. Todas sus decisiones deben tener un sustento y alg√ļn tipo de validaci√≥n.

Entre las tareas del dise√Īador UX destacan las siguientes: investigar, identificar problemas, crear soluciones, evaluar las soluciones utilizando tests de usabilidad y estudiar constantemente como se puede optimizar el producto. Ese trabajo nunca termina. Una vez que el dise√Īador ha conseguido una soluci√≥n a un problema, el proceso empieza de nuevo.

 

La diferencia entre UI y UX se puede explicar muy bien con¬†un ejemplo menos convencional:¬†la banana. As√≠ es,¬†el dise√Īo UI y el dise√Īo UX de la banana son excelentes. Vamos a estudiarlos m√°s de cerca, poni√©ndonos¬†en el lugar del usuario de la banana. Supongamos que nuestro usuario se llama Andr√©s Norman.

Son la 7:04 de la ma√Īana¬†cuando Andr√©s se levanta de la cama y se da cuenta que su despertador se quedo sin bater√≠a. Andr√©s se despierta usualmente a las 6:30 porque debe llegar al trabajo a las 7:30. A Andr√©s le gusta tener tiempo para desayunar con calma antes de ir¬†a trabajar. Al ver que su despertador no son√≥, Andr√©s se levanta de la cama sobresaltado y se pone su uniforme de trabajo lo m√°s r√°pido posible. En 20 minutos debe estar en el trabajo. Desayunar como lo hace en un d√≠a normal hoy¬† no ser√° posible. Con escasos 20 minutos, Andr√©s corre a la cocina para agarrar algo que pueda comer mientras corre al trabajo. En la cocina hay un mango, una banana, una caja de cereal y avena instant√°nea. Sin pensarlo dos veces Andr√©s agarra la banana y sale corriendo al trabajo.

Si estuvieses en la posici√≥n de Andr√©s, ¬Ņqu√© hubieses agarrado? Al igual que Andr√©s la mayor√≠a de la gente agarrar√≠a la banana.

El dise√Īo UI/UX de la banana

¬ŅC√≥mo hizo el dise√Īador de la banana para comunicarse con nosotros?

Para comunicarle al consumidor cu√°ndo puede comer la banana, el dise√Īador UI hizo que la interfaz cambie de color seg√ļn el estado en que se encuentre el producto. Si la banana est√° verde: le falta tiempo de maduraci√≥n. Si est√° amarilla podemos comerla. Si esta marr√≥n, el tiempo de consumo ha pasado y debemos desecharla.¬†Ahora bien, ¬Ņqu√© pasar√≠a si cierto usuario, llam√©mosle Ra√ļl, sufre de daltonismo y no puede distinguir entre el color verde y el marr√≥n. ¬ŅC√≥mo har√≠a Ra√ļl para saber si una banana est√° lista para comer? Cuando Ra√ļl quiere saber si la banana esta lista, la toma con la mano y dependiendo de la consistencia de la banana, √©l sabe si est√° madura o no.

UX es sobre el usuario. El dise√Īador UX hace todo lo posible para que cualquier usuario (sin importar sus limitaciones) pueda utilizar el producto y tener una experiencia favorable. En general la experiencia del usuario de la banana es favorable. Andr√©s no agarr√≥ la banana porque le gusta m√°s que el mango o la avena. √Čl agarro la banana porque es m√°s f√°cil de consumir y la ¬ęexperiencia de usuario¬Ľ se adapta mejor a la situaci√≥n espec√≠fica en la cual se encuentra. La banana le cab√≠a en el bolsillo, no necesitaba un tenedor para comerla, no necesitaba limpiarse las manos al terminar y es suficientemente grande para saciar su apetito.

UX y UI: dos disciplinas que trabajan juntas, con procesos y herramientas diferentes

Como dije anteriormente, el dise√Īo UI y el dise√Īo UX est√°n muy relacionados. Cada una de estas disciplinas depende¬†enormemente de la otra. Es por esto que muchos dise√Īadores nos identificamos como dise√Īadores UI/UX, a pesar de que muchas veces nos enfocamos en una sola de estas disciplinas, que¬†requieren procesos y cualidades diferentes, aunque ambas tienen algo en com√ļn: el usuario.¬†La clave para lograr dise√Īar excelentes interfaces y experiencias, es trabajar en conjunto, y siempre¬†poner al usuario y su experiencia como prioridad.

Seguidores:
62
Opiniones:
30
Votos:
141
Compartir:
C√≥digo QR de acceso al art√≠culo Cu√°l es la diferencia entre dise√Īo UI y dise√Īo UX

Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web. Publicado el 13/11/2018

Debate

Logotipo de
Mi opinión:

Ingresa con tu cuenta para opinar en este artículo. Si no la tienes, crea tu cuenta gratis ahora.

Retrato de Hugo León
0
Hugo León
Hace 4 días

En el artículo explican muy bien las diferencias entre UI y UX , y cómo estás se relacionan ya que si no sabemos de UI no podríamos trabajar con UX .

0
Responder
Retrato de Leonardo Simon Jimenez Sandoval
0
Leonardo Simon Jimenez Sandoval
Hace 5 semanas

¬°Muy explicativo y didactico el articulo!

Sin duda ambas areas no son lo mismo, pero se relacionan enormemente.

Saludos desde Chile.

0
Responder
Retrato de Sebasti√°n Vivarelli
286
Sebasti√°n Vivarelli
Hace 5 semanas

Muy buen artículo, didáctico y claro. Explica bien las diferencias, además es un enfoque original el ejemplo de la banana. La usabilidad nos rodea a diario y excede el entorno digital. Siempre somos usuarios. Slds.

0
Responder
Retrato de Sandra Rodriguez Pol
0
Sandra Rodriguez Pol
Hace 5 semanas

Gracias por el resumen! Muy didactico!

1
Responder
Retrato de Roberto Martínez Garza
14
Roberto Martínez Garza
Hace 5 semanas

Me gust√≥ tu art√≠culo, a ver, corr√≠geme si me equivoco; al final del d√≠a el dise√Īador UI tendr√≠a embuido un poco el dise√Īo UX pues no podr√°s dise√Īar bien una interfaz sino tienes una m√≠nima idea de experiencia de usuario, vamos aunque dise√Īes al calor cualquier cosa (digital o an√°loga) tendr√°s que tener una m√≠nima idea de user experience...

Y el dise√Īador UX a la larga tambi√©n se convertir√° en UI pues entonces de qu√© le podr√≠a servir recabar la informaci√≥n de la experiencia del usuario... Ojal√° no sea confusa o mal planificada mi pregunta, sencillamente yo como muchos dise√Īadores de la vieja escuela queremos adquirir el conocimiento a prueba de tontos para despu√©s no andarnos "quemando" con los colegas o en el trabajo. Felicidades por el art√≠culo.

3
Responder
Retrato de Ramón Morales Marquez
0
Ramón Morales Marquez
Hace 5 semanas

Excelente explicación.

1
Responder
Retrato de Elvira Dominguez
0
Elvira Dominguez
Hace 5 semanas

Muy buena explicación de la diferencia ente UI Y UX.

Me parece muy acertada la explicaci√≥n de la banana, s√ļper f√°cil de comprender y sencilla para cualquier persona.

"La clave para lograr dise√Īar excelentes interfaces y experiencias, es trabajar en conjunto, y siempre poner al usuario y su experiencia como prioridad."

Concuerdo totalmente con esta cita del mismo artículo, el trabajo en equipo es esencial para lograr la efectividad de un app, de la misma forma, ir mejorándola para lograr un enganche con los usuarios y esta sea mucho más interactiva con los mismos.

1
Responder
Retrato de Diego Lunelli
4
Diego Lunelli
Hace 6 semanas

Muy buen art√≠culo. Muy original forma de ense√Īar UI & UX. Demuestra que por m√°s avances de tecnol√≥gico que haya, la naturaleza no deja de ense√Īarnos cosas.

1
Responder
Retrato de Maylady Orellana
0
Maylady Orellana
Hace 7 semanas

¬°Muy buen art√≠culo! Muchas veces tendemos a asumir que utilizando todos los principios necesarios para el dise√Īo UI podemos asegurar una buena experiencia usuario-interfaz, cuando resulta que no.

Me parece fascinante y lógico que la experiencia sea determinada exclusivamente por el usuario, pues cada persona explorará la interfaz de manera distinta.

Este post me ha hecho pensar en cómo las interfaces de apps como Facebook e Instagram han cambiado desde que se crearon, utilizando el feedback de sus usuarios para lanzar nuevas actualizaciones que mejoren esta experiencia.

1
Responder
Logotipo de Roberto Perez Santiago
0
Roberto Perez Santiago
Hace 7 semanas

Excelente... muy buen artículo además muy bien descrita

1
Responder
Retrato de Lucia Farias
4
Lucia Farias
Hace 8 semanas

Excelente post para todos los dise√Īadores interesados en llegar acertadamente al usuario. Ambos procesos son muy buenos, dependiendo del objetivo al que se pretenda llegar, esto nos abre el panorama con un objeto cotidiano y sencillo. Siempre una buena lecci√≥n sobre el dise√Īo para poder crear una idea lo suficientemente fuerte como lo fue la del platano.

1
Responder
Retrato de Diego Rivas
0
Diego Rivas
Hace 8 semanas

Excelente manera de poder comprender estos dos términos que no había entendido, muchas gracias.

1
Responder
Logotipo de Way2Net Marketing Digital
0
Way2Net Marketing Digital
Hace 8 semanas

Muy f√°cil y bien explicado. Gracias

1
Responder
Retrato de Christian Benítez
1
Christian Benítez
Hace 2 meses

En mi opinion el articulo fue muy claro, el ejemplo utilizado por el autor es preciso y demuestra la delgada l√≠nea entre el UI y el UX, ambos completamente necesarios y relevantes en la actualidad para cualquier producto o servicio que quiera perdurar en el tiempo. Es importante reconocer lo que se debe considerar al momento de dise√Īar interfaces que deben comunicar funci√≥n, caracter√≠sticas y usos con elemento visuales o escritos que respondan a criterios est√©ticos y de funcionalidad (racionales) ya que como seres humanos, especialmente en los a√Īos m√°s recientes, nos hemos vuelto m√°s audiovisuales e inclinados a procesos sencillos y t√°ctiles. Por otro lado, dise√Īar experiencias va mucho m√°s all√° de elementos de comunicaci√≥n dentro de una pantalla por as√≠ decirlo, se requiere de una investigaci√≥n profunda del comportamiento, de las inclinaciones y de la forma en la que pensamos. Para dise√Īar experiencias se necesita habilidades como las Auguste Dupin, Sherlock Holmes o H√©rcules Poirot, tener un amplio conocimiento de la materia, ser completamente analiticos con todos los datos e informacion y ser terriblemente observadores para poder predecir el comportamiento del usuario y mejorar la experiencia.

2
Responder
Retrato de Mario Balc√°zar
543
Mario Balc√°zar
Hace 2 meses

¡Qué buena explicación! Muchas felicidades por la claridad y oportunidad del artículo. Efectivamente son conceptos que se confunden mucho.

Hoy existe un nuevo concepto: IxD (InteractionDesigner), ni siquiera s√© c√≥mo traducirlo correctamente. ¬ŅSabes algo sobre ello?

1
Responder
Retrato de Guadalupe Armend√°riz
0
Guadalupe Armend√°riz
Hace 2 meses

Muy intersante la explicación, fácil de entender.

1
Responder
Retrato de Rualdo Ibne Anzueto Talento
3
Rualdo Ibne Anzueto Talento
Hace 2 meses

Magnífica relación a partir de las diferencias.

1
Responder
Retrato de Carlos Recalde
0
Carlos Recalde
Hace 2 meses

Excelente comparacion y concepto. solo en donde empieza la explicacion de

que es UX ESTA MAL ESCRITO interfaz. Dice intefaz.

2
Logotipo de FOROALFA
568
FOROALFA
Hace 2 meses

Gracias por avisar. Ya est√° corregido.

0
Responder
Retrato de Carlos Saintjulien
0
Carlos Saintjulien
Hace 2 meses

Me gustó la analogía, gracias por explicación.

1
Responder
Retrato de Henry Gary
0
Henry Gary
Hace 2 meses

Excelente información, más claro que el agua jejeje

1
Responder
Retrato de Guillermo Dufranc
421
Guillermo Dufranc
Hace 2 meses

¬°Ecxelente! Gracias.

1
Responder
Retrato de Juan Carlos Torrens Claro
1
Juan Carlos Torrens Claro
Hace 2 meses

Muy buen articulo, y definitivamente la banana es genial ejemplo.

1
Responder
Retrato de Mónica Bezanilla
0
Mónica Bezanilla
Hace 2 meses

Muy buena explicación, muy didáctico! Gracias !

1
Responder
Retrato de Christian Trucco
2
Christian Trucco
Hace 2 meses

Jaja... Muy did√°ctico. Felicitaciones Enrique!

1
Responder
Retrato de Lucas Mariano Garofalo
0
Lucas Mariano Garofalo
Hace 2 meses

Muy buen articulo!!!

1
Responder
Retrato de Pablo Junque
0
Pablo Junque
Hace 2 meses

Muy did√°ctico.

1
Responder
Retrato de Ricardo Méndez
0
Ricardo Méndez
Hace 2 meses

Excelente artículo, claro, preciso y muy creativo con el uso del ejemplo.

1
Responder
Retrato de José Viola
3
José Viola
Hace 2 meses

Increible artículo!

1
Responder
Retrato de Luciano Cassisi
1301
Luciano Cassisi
Hace 2 meses

¡Muy buen artículo! Muy didáctico.

2
Responder

Te podrían interesar

Retrato de Javier Gonz√°lez Solas
Autor:
Javier Gonz√°lez Solas
Título:
El dise√Īo como forma de vida
Sinopsis:
El t√≠tulo remite a una frase t√≥pica bastante al uso entre dise√Īadores cuya defensa de las pr√°cticas del dise√Īo suele ser casi siempre de car√°cter autorreferencial: "El dise√Īo no es una profesi√≥n, es una forma de vida", dicen.
Interacciones:
Votos:
17
Opiniones:
1
Seguidores:
24
Ilustración principal del artículo Empezar de cero
Autor:
Castro-Ordo√Īez
Título:
Empezar de cero
Sinopsis:
Al trabajo diario como dise√Īadores, tenemos que sumarle el de educadores; algunas veces de quien nos encarga los trabajos y casi siempre del p√ļblico que a√ļn hoy parece resistirse al dise√Īo.
Interacciones:
Votos:
15
Opiniones:
3
Seguidores:
8
Ilustración principal del artículo Personalización de objetos en los juegos de Facebook
Autor:
Llu√Įsa D√≠az
Título:
Personalización de objetos en los juegos de Facebook
Sinopsis:
El caso de Dragon City y la personalizaci√≥n eterna del drag√≥n como elemento base de dise√Īo.
Interacciones:
Votos:
14
Opiniones:
10
Seguidores:
20
Retrato de Diego Otero
Autor:
Diego Otero
Título:
Dise√Īo: entre naturaleza, arte, ciencia y tecnolog√≠a
Sinopsis:
Algunos afirman que todos pueden dise√Īar, pero ¬Ņtiene sentido el dise√Īo sin innovaci√≥n?
Interacciones:
Votos:
31
Opiniones:
44
Seguidores:
14
Retrato de André Ricard
Autor:
André Ricard
Título:
Del Adorno
Sinopsis:
Una incitaci√≥n a reconsiderar el papel del adorno en las obras de dise√Īo.
Traducciones:
Interacciones:
Votos:
24
Opiniones:
4
Seguidores:
443
Retrato de Jorge Monta√Īa
Autor:
Jorge Monta√Īa
Título:
¬ŅY usted vive de eso‚Ķ?
Sinopsis:
Soy dise√Īador industrial. Con frecuencia personas incr√©dulas me preguntan con cierto dejo de compasi√≥n, c√≥mo es que me gano la vida haciendo eso.
Interacciones:
Votos:
57
Opiniones:
18
Seguidores:
170
Retrato de Norberto Chaves
Autor:
Norberto Chaves
Título:
Origen, funciones y gestión de las marcas lugar
Sinopsis:
Respuestas de Norberto Chaves a seis preguntas de una estudiante.
Interacciones:
Votos:
128
Opiniones:
9
Seguidores:
3152
Retrato de Isabel Campi
Autor:
Isabel Campi
Título:
Lo funcional como categoría estética
Sinopsis:
Sobre la consideraci√≥n de la belleza de lo pr√°ctico en el dise√Īo.
Traducciones:
Interacciones:
Votos:
18
Opiniones:
2
Seguidores:
108

Próximos cursos online

Desarrollamos para ti los mejores cursos online de actualización profesional, que te permitirán formarte y especializarte de la mano de renombrados especialistas

Branding: Dise√Īador y Cliente

Branding: Dise√Īador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

3 semanas
4 Febrero 2019

Relecturas del Dise√Īo

Relecturas del Dise√Īo

Una inmersi√≥n en el discurso sobre el dise√Īo para despejar sus nociones m√°s controvertidas: creatividad, innovaci√≥n, arte, tecnolog√≠a, funci√≥n social...

4 semanas
4 Marzo 2019

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

6 semanas
8 Abril 2019

Branding Corporativo

Branding Corporativo

Cómo planificar, construir y gestionar la marca de empresas e instituciones

4 semanas
20 Mayo 2019

Estrategia de Marca

Estrategia de Marca

15 claves para programar el dise√Īo de s√≠mbolos y logotipos de alto rendimiento

4 semanas
24 Junio 2019