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

Opiniones:
30
Votos:
148
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: 64

Opiniones:
30
Votos:
148
Compartir:

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

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 Hugo León
0
Hugo León
Hace 2 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 3 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
289
Sebasti√°n Vivarelli
Hace 3 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 3 meses

Gracias por el resumen! Muy didactico!

1
Responder
Retrato de Roberto Martínez Garza
14
Roberto Martínez Garza
Hace 3 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 3 meses

Excelente explicación.

1
Responder
Retrato de Elvira Dominguez
0
Elvira Dominguez
Hace 3 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 3 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 3 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 3 meses

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

1
Responder
Retrato de Lucia Farias
4
Lucia Farias
Hace 4 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 4 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 4 meses

Muy f√°cil y bien explicado. Gracias

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

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

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

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

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

Gracias por avisar. Ya est√° corregido.

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

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

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

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

1
Responder
Retrato de Guillermo Dufranc
442
Guillermo Dufranc
Hace 4 meses

¬°Ecxelente! Gracias.

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

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

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

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

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

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

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

Muy buen articulo!!!

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

Muy did√°ctico.

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

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

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

Increible artículo!

1
Responder
Retrato de Luciano Cassisi
1366
Luciano Cassisi
Hace 4 meses

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

2
Responder

Te podrían interesar

Ilustraci√≥n principal del art√≠culo Dise√Īando apps para m√≥viles
Autor:
Javier Cuello
Título:
Libro: Dise√Īando apps para m√≥viles
Sinopsis:
Un libro que llena un vac√≠o de informaci√≥n en espa√Īol para todos aquellos que quieren comenzar a dise√Īar Apps y no saben c√≥mo dar sus primeros pasos.
Compartir:
Interacciones:
Votos:
57
Opiniones:
17
Seguidores:
155
Retrato de Gabriel Simón
Autor:
Gabriel Simón
Título:
Los designios del dise√Īo
Sinopsis:
Una mirada al acto de dise√Īar y un intento de respuesta a las distintas definiciones y √°reas que conforman el dise√Īo.
Compartir:
Interacciones:
Votos:
47
Opiniones:
30
Seguidores:
209
Retrato de Leonardo Correa
Autor:
Leonardo Correa
Título:
Dise√Īo gr√°fico y web para la posteridad
Sinopsis:
Muchos clientes nos piden dise√Īos ¬ęmodernos¬Ľ. ¬ŅCuan sano es para la billetera del cliente, o para la nuestra, seguir las modas impuestas?
Traducciones:
Compartir:
Interacciones:
Votos:
63
Opiniones:
52
Seguidores:
15
Retrato de Hector Bruguera
Autor:
Hector Bruguera
Título:
Dignificando la creatividad
Sinopsis:
Latinoamerica est√° despertando creativamente, pero ello ha generado la necesidad de ser valorada como tal. Estamos encaminados a dejar una pauta en el movimiento publicitario.
Compartir:
Interacciones:
Votos:
32
Opiniones:
10
Seguidores:
30
Retrato de Guillermo Dufranc
Autor:
Guillermo Dufranc
Título:
Packaging que no deja residuos: ¬Ņutop√≠a o realidad?
Sinopsis:
La sostenibilidad es un camino a recorrer con el objetivo de hacer mejoras en el tiempo para reducir el impacto al medio ambiente.
Traducciones:
Compartir:
Interacciones:
Votos:
58
Opiniones:
32
Seguidores:
442
Retrato de Alma Martínez
Autor:
Alma Martínez
Título:
De fetiche a dispositivo
Sinopsis:
Desde la antig√ľedad los objetos han sido fundamentales en nuestras vidas. Primero como elementos de culto, luego como indicadores de status, hasta convertirse en objetos-dispositivo.
Compartir:
Interacciones:
Votos:
10
Opiniones:
3
Seguidores:
43
Retrato de Angélica Osorio Martínez
Autor:
Angélica Osorio Martínez
Título:
La forma como medio de comunicaci√≥n para el dise√Īo
Sinopsis:
La forma como un todo estructurado, encuentra sus inicios en la naturaleza misma. La comunicación es el medio para comprender el entorno permitiendo tanto a los objetos naturales como artificiales ser interpretados en un contexto específico.
Compartir:
Interacciones:
Votos:
77
Opiniones:
25
Seguidores:
2
Retrato de Guillermo Dufranc
Autor:
Guillermo Dufranc
Título:
Honestypack: la evolución del branding de empaques
Sinopsis:
El fen√≥meno de las marcas que quieren decir que son ¬ęhonestas¬Ľ mediante el dise√Īo estructural y gr√°fico, est√° creando un nuevo est√°ndar en comunicaci√≥n.
Traducciones:
Compartir:
Interacciones:
Votos:
103
Opiniones:
21
Seguidores:
442

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

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

Branding Corporativo

Branding Corporativo

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

4 semanas
20 Mayo

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