¿Que es UX/UI?

¿Has visitado una página web repleta de información, aunque sin la respuesta a tu pregunta?  ¿Has usado alguna aplicación que funcionara mal? ¿Una interfaz con imágenes entrecortadas? ¿O te ha impresionado el diseño de una página web o aplicación? ¡Enhorabuena, esto significa que tuviste una excelente experiencia de usuario! ¿Pero qué se oculta detrás de ella? ¿En qué consiste el diseño UX/UI? ¡Lo descubriremos en este artículo!

¿Cuál es la diferencia entre el diseño UX y el diseño UI?

Como se puede ver en el diagrama anterior, extraído de la página web papdan.com, ¡el diseño UX es como la parte oculta del iceberg!

Mientras que el diseño UI se centra en la parte visual, todo aquello visible para el usuario:

• Diseño gráfico: iconos, formas e imágenes para dar sentido a las acciones del usuario.
• Colores de la interfaz, ilustraciones, botones, textos…
• Tipografía: fuentes, uso de negrita o subrayado…
• Diseño de la página: espacios entre los bloques, número de elementos en la interfaz gráfica…

El diseño UX representa aquello que llamamos la «ciencia del usuario», es decir, todo lo relacionado con:

• La estrategia
• El conocimiento de las necesidades del usuario
• La constitución de prototipos, escenarios, etc.

Diseñador UX vs. Diseñador UI: competencias clave

Trabajo en equipo vs. trabajo autónomo

El diseñador UX tiende a trabajar con muchas personas y con diferentes departamentos, en actividades colaborativas que lleven a reflexionar en torno a la experiencia en sí. Por su parte, el diseñador UI trabaja de una manera más «autónoma», aunque debe interactuar con el gerente de proyecto y el diseñador UX.

El alcance del proyecto

El diseñador UX se ocupa principalmente de la situación y del problema en general. En cambio, el diseñador UI se centra en los detalles, pule la interfaz a fondo y da los toques finales, responsables de hacer que la experiencia de usuario sea lo mejor posible.

Habilidades sociales

• Diseñador UX: escucha, observación, paciencia, capacidad de respuesta
• Diseñador UI: creatividad, precisión, atención al detalle

UX/UI: lo conceptual y lo visual en simbiosis

Aunque estas dos disciplinas son bastante distintas, el diseño UX y el diseño UI son complementarios y necesarios para generar una buena experiencia de usuario. Tomemos el ejemplo de un diseñador UI que determina el tamaño y el color de los botones. Mientras que el diseñador UX, por su parte, define su utilidad.

Gran parte de las empresas que buscan un diseñador UX incluyen la mención «diseñador UX/UI» con el propósito de contratar a un experto, capaz de conceptualizar y diseñar la experiencia del usuario.

Al demostrar estas dos habilidades, el diseñador UX/UI es capaz de crear una interfaz que cumpla con los criterios de la técnica  web responsive. Es decir, podrá crear una aplicación que pueda ser utilizada y accesible en todas las interfaces de usuario, sea cual sea la resolución de pantalla.

Diseño UX/UI: tendencias y herramientas

¿Cuáles son las tendencias de UX/UI en 2021?

Y sí, ¡el mundo UX UI también experimenta los cambios provocados por las tendencias!

¿Esto qué quiere decir?

• No más colores vivos, damos paso a la sobriedad con colores suaves y relajantes.
• ¡Decimos adiós al modo brillante, saludamos al modo oscuro! Además de ser beneficioso para nuestra vista, el modo oscuro es elegante y moderno.
• Damos también la bienvenida a las tipografías atrevidas. Así, las aplicaciones web y móviles creadas en 2021 están llenas de ellas.
• Minimalismo selectivo. ¡Solo mostramos los elementos más importantes!
• Animaciones, animaciones y más animaciones. Nos gusta cuando las páginas se mueven y nos hacen soñar.

Aquí puedes encontrar una recopilación de los mejores ejemplos de diseño UX:

En ordenador

En teléfono móvil

• Adobe XD: herramienta de creación de prototipos rápida y todo en uno que permite crear wireframes, prototipos interactivos y facilita el diseño de aplicaciones web y/o móviles.
• Figma: herramienta de creación de prototipos colaborativa donde puede trabajar online, a distancia, en directo y con otros compañeros.
• InVision: herramienta de colaboración que permite a los equipos y clientes no solo colocar sus comentarios directamente, sino también poder ver versiones anteriores del prototipo.
• Zeplin: interfaz que simplifica la comunicación entre equipos y facilita la navegación generando automáticamente todos los colores, fuentes, tamaños, etc. en una guía de estilo.
• Marvel: aplicación que ayuda a crear rápidamente modelos animados en tan solo unos clics. La aplicación está disponible en Android e iOS para poder probar modelos en vivo y en tu móvil.
• Maze: herramientas muy eficaces para realizar cuestionarios y pruebas de usuario de forma remota para generar informes detallados más rápidos y fáciles.
• Miro: pizarra virtual perfecta para combinar la productividad y la colaboración entre el gerente de producto y de proyecto, diseñadores, desarrolladores web, desarrolladores de aplicaciones móviles y equipos de marketing.
  

UX/UI: ¿cuál es la conclusión?

Si después de este artículo aún tienes dudas acerca de la diferencia entre el diseño UX y el diseño UI. A continuación, te presentamos un resumen para evitar confusiones.

El diseñador UX es responsable de toda la experiencia del usuario y de la comprensión de las necesidades del usuario; también ayuda a encontrar soluciones para mejorar esta experiencia.

El diseñador UI, por otro lado, contribuye a la experiencia visual de los usuarios. Representa las ideas del diseñador UX al mismo tiempo que facilita el uso y la accesibilidad de la interfaz. De modo que ayuda a los usuarios a comprender cómo usar la interfaz y les guía a través de ella (mediante el uso de recursos como el call-to-action).

La transformación digital afecta a un número cada vez mayor de profesiones, al mismo tiempo que se vuelve imprescindible para las empresas.

De hecho, utilizamos numerosas interfaces digitales en nuestra vida cotidiana, y la experiencia de usuario (lo que se vive cuando se navega en estas interfaces) es primordial. Todos los procesos «customer centric» (orientadas hacia el cliente) están a la moda. Por este motivo, las empresas deben pensar en lo que nosotros, internautas y usuarios, vivimos a través de su interfaz online, colocándonos así en el centro de sus estrategias. Es entonces cuando entra en acción el diseño UX/UI.

¡Así es! Una mala experiencia de usuario provoca que los usuarios se cansen e incluso decidan abandonar la aplicación. Cerrarán la aplicación y no volverán a usarla de nuevo.

¡Aunque se puede pensar que los términos UX/UI son muy similares, vamos a ver que no tienen nada que ver! Algo es seguro, lo más importante es que la experiencia de usuario sea lo más agradable y positiva posible.

 ¿Qué es una experiencia de usuario?

Como se ha señalado con anterioridad, la experiencia de usuario es aquel proceso que se desarrolla cuando el usuario navega en una interfaz digital. Cuando experimentamos algo, hay varios «criterios» que debemos tener en cuenta:

• Nuestras sensaciones: ¿Por qué me gusta interactuar en esta interfaz? ¿Me gusta la forma en que se presentan las cosas?
• Nuestro ambiente: ¿El ambiente que me rodea es propicio a una experiencia de usuario exitosa?
• Nuestras necesidades y motivaciones: ¿Qué necesito? ¿Qué información busco?
• Las interacciones ofrecidas por la página web o aplicación: Cuando hago clic aquí, ¿qué ocurre?

El secreto para ofrecer la mejor experiencia de usuario

¡El diseño UX le otorga mucha importancia al hecho de ofrecer una interfaz accesible, gráficamente clara, funcional, práctica y fácil de usar ! Es necesario hacer con que los usuarios sientan ganas de quedarse en la aplicación y descubrir sus secretos. La aplicación o página web debe permitirte encontrar rápidamente la información que buscas, presentar una imagen de marca fuerte y positiva en consonancia con la identidad visual de calidad, presentar funcionalidades originales y auténticas…

 ¿En qué consiste el diseño UX?

Se habla de diseño UX (user experience design) con el propósito de definir el diseño de la experiencia de usuario. Por design se hace referencia sobre todo a la «concepción» de la experiencia de usuario más que a la creación visual.

El papel de un diseñador UX consiste en pensar, reflexionar y crear no sólo el producto, la interfaz de usuario, sino también la experiencia del usuario que esta genera.

Para realizar un diseño UX hay que tener en cuenta las expectativas, necesidades y posibles deseos de los usuarios.

Podemos definir el diseño UX como un proceso compuesto por diferentes etapas:

I. La fase de investigación y análisis (research)

1. Comprensión de las necesidades. Realización de entrevistas a usuarios (user interviews) para identificar sus necesidades, definir los objetivos y comprender las expectativas de los usuarios.

2. Personas. Creación perfiles tipo para identificar lo más destacado de su experiencia, sus objetivos, sus frustraciones…

3. Caso de uso. Interpretación de las características de cada persona y resolución de los posibles problemas que puedan surgir. De este modo, se pretende crear la mejor experiencia de usuario posible. En concreto, nos podemos plantear las siguientes preguntas: «¿Cómo vivirán diferentes personas esta experiencia? ¿Cómo utilizarían el producto o servicio ofrecido?». Así, se facilita el diseño de la estrategia.

4. Mapa de experiencia del cliente (journey map). Rastreo del recorrido del usuario cuando navega por la interfaz, haciéndonos preguntas como «¿Cómo comienza la experiencia de usuario? ¿Y cómo termina?».

II. La fase de creación y lluvia de ideas (brainstorming)

1. Flujo de usuarios (user flow). Diagrama que reconstruye las diferentes etapas del recorrido del usuario, aquellas que conducen a la consecución de un objetivo específico.

Ejemplo: Un internauta busca una bebida en la página web de un supermercado.

Así es como se vería su flujo de usuario:

• El usuario llega a la página de inicio.
• Hace clic en la categoría «bebidas».
• Se le redirige a la página de «bebidas» y elige la bebida que quiere comprar haciendo clic en el icono correspondiente.
• En la página de la bebida elegida, ingresa la cantidad deseada (1 botella, por ejemplo).
• Va a su carrito online para proceder al pago.
• Después de ingresar sus datos de pago en la interfaz del sitio web, se le redirige a una página de confirmación de pago.
• Una vez validado el pago, cierra la pestaña.

2. Wireframe. Para el diseñador UI, el wireframe es un modelo de cómo se verá la interfaz de usuario. Gracias a esta guía, el diseñador UI podrá construir el marco visual de la interfaz más fácilmente.

III. La fase de puesta en marcha (implementation). ¡Aquí es donde interviene el diseñador UI!

1. Prototipos. El rol del diseñador UI consiste en la constitución de modelos más o menos representativos y/o interactivos que representen las ideas del diseñador UX.

2. Desarrollo front-end y back-end. Una vez validados estos modelos, los desarrolladores son ahora los encargados de abordar el proyecto y construir la interfaz utilizando código.

IV. La fase de seguimiento (reporting)

1. Prueba de usuario (usability reporting). Una vez implementado el producto, los usuarios reales lo prueban con el fin de brindar su opinión sobre la experiencia de usuario que han vivido.

2. Prueba A/B (split testing). El equipo UX también lleva a cabo diferentes versiones y comprueba su impacto en los usuarios.

3. Analytics reporting. Se analizan las estadísticas resultantes de estas pruebas tales como el tiempo medio dedicado a las páginas, la tasa de rebote, etc.

Ten en cuenta que el diseño UX no se detiene en la fase de monitoreo, o reporting. De hecho, una vez terminada esta fase, el equipo UX vuelve a la fase de creación y lluvia de ideas (brainstorming), formando un ciclo hasta que se encuentre la versión final de la interfaz, la que se implementará oficialmente. ¡Se consigue así la mejor experiencia de usuario!

 ¿En qué consiste el diseño UI?

Como hemos visto anteriormente, el diseño UI está integrado en los engranajes del diseño UX. Situamos el diseño UI en la fase de implementación, esta es la etapa donde las ideas y prototipos de los diseñadores UX cobran vida.

Cuando hablamos de diseño UI (user interface design), nos referimos al diseño de la interfaz de usuario y, por lo tanto, a la experiencia estética que resulta de ella.

¿En qué consiste el trabajo del diseñador UI?

El rol del diseñador UI está enfocado en los aspectos gráficos y visuales de la interfaz. Por lo tanto, los elementos perceptibles por el usuario. Por ejemplo, el color y tamaño de un botón para que sea visible, que llame la atención y que den ganas de clicar en él; o la tipografía de los textos que se muestran en pantalla.

En One Page Agency, lo sabemos mejor. Para obtener más información sobre cómo aumentar el conocimiento de la marca y las conversiones de su empresa, conéctese con nosotros.