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: 65

Opiniones:
31
Votos:
150
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.

Retrato de Enrique Iturriaga Enrique Iturriaga Jacksonville Seguidores: 65

Opiniones:
31
Votos:
150
Compartir:

Colabora con la difusión de este artículo traduciéndolo

Traducir al inglés Traducir al italiano
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 Juanjo Diaz
0
Juanjo Diaz
La semana pasada

Excelente explicación, su UX del blog esta muy bueno. Me hizo entender con total claridad, y a la hora de trabajar se me expande mejor las ideas al momento de plantear soluciones a uno o muchos problemas, sin duda ¡me encanto!

Saludos desde ¬°Bolivia!

0
Responder
Retrato de Hugo León
0
Hugo León
Hace 4 meses

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 meses

¬°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
291
Sebasti√°n Vivarelli
Hace 5 meses

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 meses

Gracias por el resumen! Muy didactico!

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

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 meses

Excelente explicación.

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

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 5 meses

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 5 meses

¬°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 5 meses

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

1
Responder
Retrato de Lucia Farias
4
Lucia Farias
Hace 6 meses

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 6 meses

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 6 meses

Muy f√°cil y bien explicado. Gracias

1
Responder
Retrato de Christian Benítez
1
Christian Benítez
Hace 6 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
563
Mario Balc√°zar
Hace 6 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 6 meses

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

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

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

1
Responder
Retrato de Carlos Recalde
0
Carlos Recalde
Hace 6 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
583
FOROALFA
Hace 6 meses

Gracias por avisar. Ya est√° corregido.

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

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

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

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

1
Responder
Retrato de Guillermo Dufranc
448
Guillermo Dufranc
Hace 6 meses

¬°Ecxelente! Gracias.

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

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

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

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

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

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

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

Muy buen articulo!!!

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

Muy did√°ctico.

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

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

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

Increible artículo!

1
Responder
Retrato de Luciano Cassisi
1403
Luciano Cassisi
Hace 6 meses

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

2
Responder

Te podrían interesar

Ilustración principal del artículo Adriano Olivetti, el Steve Jobs italiano
Autor:
Joaquín Eduardo Sánchez Mercado
Título:
Adriano Olivetti, el Steve Jobs italiano
Sinopsis:
Historia de un impulsor del dise√Īo italiano en la mitad del siglo XX, amante y mecenas del arte, pionero de la computaci√≥n, el dise√Īo industrial, la arquitectura y el dise√Īo gr√°fico.
Compartir:
Interacciones:
Votos:
99
Opiniones:
31
Seguidores:
549
Retrato de Annika Maya
Autor:
Annika Maya
Título:
Gerontodise√Īo
Sinopsis:
El gerontodise√Īo conlleva la eliminaci√≥n de los paradigmas que rodean al dise√Īo para adultos mayores. Es una nueva manera de dise√Īar con un futuro impresionantemente fruct√≠fero.
Traducciones:
Compartir:
Interacciones:
Votos:
70
Opiniones:
91
Seguidores:
43
Retrato de Camilo A. Angulo
Autor:
Camilo A. Angulo
Título:
Los meses en-red-ados de dise√Īo
Sinopsis:
El desafío de generar intercambios de conocimiento en la tierra de nadie, las redes sociales.
Compartir:
Interacciones:
Votos:
7
Opiniones:
11
Seguidores:
203
Retrato de Guillermo Dufranc
Autor:
Guillermo Dufranc
Título:
Los alimentos saludables cambian el dise√Īo de packaging
Sinopsis:
Desde que la información nutricional comenzó a ser valorada masivamente, algunas marcas tomaron esa premisa para construir su identidad o demostrar su autenticidad.
Traducciones:
Compartir:
Interacciones:
Votos:
220
Opiniones:
75
Seguidores:
448
Retrato de Carlos Amézquita
Autor:
Carlos Amézquita
Título:
¬ŅLa m√ļsica influencia tu trabajo creativo?
Sinopsis:
¬ŅLa utilizas como fuente de inspiraci√≥n? De ser as√≠, ¬Ņqu√© m√ļsica prefieres para tus momentos de creatividad?
Compartir:
Interacciones:
Votos:
210
Opiniones:
277
Seguidores:
40
Retrato de Mara Monta√Īes
Autor:
Mara Monta√Īes
Título:
Sin conflicto no hay historia
Sinopsis:
Buscar la armonía en el caos es lo que nos obliga a actuar. Al contar historias tenemos que tener claro contra qué luchamos. Un buen posicionamiento de marca depende de eso.
Compartir:
Interacciones:
Votos:
21
Opiniones:
9
Seguidores:
73
Ilustración principal del artículo Deconstrucción: cuando la forma sigue a la fantasía
Autor:
José Manuel Carrión
Título:
Deconstrucción: cuando la forma sigue a la fantasía
Sinopsis:
Una revisi√≥n de los precedentes culturales del dise√Īo deconstruido de Carson y otros.
Compartir:
Interacciones:
Votos:
42
Opiniones:
10
Seguidores:
9
Retrato de Israel Ortega
Autor:
Israel Ortega
Título:
El cliente sabe lo que necesita
Sinopsis:
Muchas veces las críticas basadas en gustos personales nos desvían del verdadero objetivo.
Compartir:
Interacciones:
Votos:
54
Opiniones:
49
Seguidores:
26

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

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

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
2 Septiembre

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
16 Septiembre

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
30 Septiembre

Branding Corporativo

Branding Corporativo

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

4 semanas
21 Octubre