<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=81693&amp;fmt=gif">

¿Qué es UX y UI? Descubre 9 consejos de diseño web

New Call-to-action

¿Qué es ui/ux? ¿En qué consiste el diseño UX y UI? ¿Qué significan exactamente estos términos? ¿Por qué son tan importantes para cualquier negocio online? En este artículo te damos respuesta a todas estas preguntas. ¡Empecemos!

¿Qué es UX y UI?

Veamos primero los conceptos y después las diferencias entre ambos.

¿Qué es UX? Definición de experiencia de usuario o UX

Don Norman, científico cognitivo y arquitecto de experiencia de usuario, lo describe del siguiente modo: "La experiencia del usuario abarca todos los aspectos de la interacción del usuario final con la empresa, sus servicios y sus productos". Por tanto, podemos definir la UX como un conglomerado de tareas centradas en la optimización de un producto para que su uso sea eficaz y agradable.

Un ejemplo fácil para entenderlo es cuando nos encontramos con dos productos bastante similares en cuanto a su función: ¿cómo eliges uno frente al otro? El diseño de la experiencia de usuario (UX) es lo que hace que elijas un producto en lugar del otro, que lo recomiendes, lo disfrutes y lo vuelvas a elegir la próxima vez. 

Por ejemplo, ¿por qué utilizas Canva en lugar de Desygner? Puede que te gusten más sus filtros disponibles o tipos de diseños, o simplemente que te parezca más sencillo de utilizar. Lo más probable es que haya una razón para tu preferencia, y eso es lo que los diseñadores UX se esfuerzan por entender. De ese modo, pueden ofrecer la mejor experiencia posible al utilizar su aplicación. Lo importante es que tú la percibas más sencilla o con mayor valor añadido que la de la competencia, y por eso la eliges.

¿Qué es UI? Definición de interfaz de usuario o UI

Ya que sabemos qué es la experiencia de usuario, ¿qué es la interfaz de usuario o UI? La respuesta más clara sería que la UI es el complemento de la UX, es decir, su aspecto, la presentación y la interactividad de un producto. 

Así, identificamos el diseño UI como una práctica puramente digital, que tiene en cuenta todos los elementos visuales e interactivos de la interfaz de un producto, incluidos los botones, los iconos, el espaciado, la tipografía, los esquemas de color y el diseño receptivo.

Su objetivo es guiar visualmente al usuario a través de la interfaz de un producto. Se trata de crear una experiencia intuitiva que no requiera que el usuario piense demasiado.

El diseño UI transfiere los puntos fuertes de la marca y los activos visuales a la interfaz de un producto, asegurándose de que el diseño sea consistente, coherente y estéticamente agradable.

Diferencia entre diseño UX y UI

Podríamos resumir las principales diferencias entre el diseño UX y el diseño UI en la siguiente tabla:

diseño-ux-vs-ui

Proceso de diseño UX y UI

Antes de explicar las fases del proceso de diseño UX y UI, las podemos ver en este gráfico de forma más intuitiva:

design-thinking

1. Empatía

La empatía es la pieza central de un proceso de diseño para centrar el diseño en la persona. El modo de empatía es el trabajo para comprender la forma en que alguien hace las cosas, sus necesidades tanto físicas como emocionales, cómo piensa y, en definitiva, conocer sus comportamientos y sus porqués.

El contacto directo con las personas revela mucho sobre su forma de pensar y sus valores. Además de entrevistar a los individuos, también hay que observar cómo se comportan, ya que, a menudo, las personas nos comportamos de manera diferente de lo que decimos que hacemos si nos preguntan.

Lo más importante de esta fase es procesar todo lo que has oído y visto para entender a las personas y extraer conclusiones útiles. Hay que sacar toda la información y plasmarla en un folio en blanco donde puedas empezar a hacer conexiones: coloca fotos de tu usuario, post-its con citas, mapas de viajes o experiencias... cualquier cosa que capte las impresiones y la información sobre el usuario.

2. Definición

El modo definición del proceso de diseño ui ux consiste en aportar claridad y enfoque al espacio de diseño. Es el momento de dar sentido a la amplia información que has reunido sobre la experiencia del usuario. Hay que definir a la perfección el problema que pretendes solucionar con el producto o servicio.

3. Idear

Idear es la modalidad del proceso de diseño en la que te concentras en la generación de ideas. La ideación proporciona tanto el combustible como el material de partida para construir prototipos y poner soluciones innovadoras a los usuarios. 

El proceso óptimo consiste en buscar una gama lo más amplia posible de ideas de las que se pueda elegir, y no simplemente encontrar una única y mejor solución. Se combinan aquí la mente consciente y la inconsciente, y los pensamientos racionales con la imaginación. La tormenta de ideas es un buen ejercicio en esta fase del proceso.

Cuando tengamos suficientes ideas, hay que seleccionar varias que irán a la siguiente fase: la creación de prototipos.

4. Prototipo

El modo prototipo es la generación de artefactos destinados a responder preguntas que te acercan a la solución final. En las primeras etapas se deben crear prototipos de baja resolución que sean rápidos y baratos de hacer, pero que puedan suscitar comentarios útiles de usuarios. Así podremos ir probando diferentes soluciones a un coste bajo, tanto de tiempo como de dinero. 

Es habitual comenzar a realizar estos prototipos con materiales muy económicos, como papel, Post-It, cinta adhesiva, objetos de la sala, etc. Lo principal no es que el diseño sea bonito, sino que satisfaga la necesidad.

En etapas posteriores, los prototipos que vayan pasando los filtros de la experiencia del usuario se irán refinando poco a poco.

5. Test

En el modo de test se solicita la opinión de los usuarios sobre los prototipos que se han creado y se tiene otra oportunidad de empatizar con las personas para las que se está diseñando. Este momento es importante, pues podemos seguir aprendiendo cosas sobre cómo los usuarios utilizan el prototipo ux ui y las posibles maneras de mejorarlo. 

Para aprovechar los beneficios de este proceso al máximo, no deberíamos dar demasiadas indicaciones al usuario sobre cómo se utiliza el prototipo. Simplemente, se lo dejamos probar a ver cómo reacciona y observamos si sabe utilizarlo de forma intuitiva (UI) y si soluciona el problema inicial (UX).

New Call-to-action

Consejos para aplicar el diseño UX-UI

Ya hemos identificado el problema a solucionar y tenemos un prototipo de la mejor solución que satisface plenamente a los usuarios con diseño ux/ui. Con esto hemos planeado, sin darnos ni cuenta, la experiencia de usuario UX, y tenemos la interfaz del usuario UI con nuestro prototipo.

Consejos sobre el diseño de la experiencia del usuario (UX)

Veamos unos consejos prácticos de diseñadores UX que no debes olvidar a la hora de aplicar el diseño de UX:

1. Hacer uso de las notificaciones

Es demasiado habitual que las empresas confíen en que los usuarios se registren para una prueba gratuita y luego se olviden de ella, lo que hace que paguen por una suscripción que ya no quieren, pues, en ocasiones, ni la han utilizado nunca.

Deberíamos mantener a nuestros usuarios informados y permitirles cancelar su suscripción después de una prueba gratuita si ya no les resulta útil. O, mejor aún, si ofreces una prueba gratuita, no pidas la tarjeta de crédito porque es gratis, ¿no?

Informa sin miedo a tus usuarios cada vez que se les vaya a cobrar, si tu producto les satisface no dudarán en pagarlo y tendrán la sensación de confianza en tu marca.

2. Informar al usuario de los posibles aspectos negativos de su decisión

En lugar de dejar que el usuario se informe sobre los posibles aspectos negativos de una decisión que va a tomar, debería quedar muy claro. Los usuarios agradecen la honestidad de las marcas.

3. Dejar de hacer spam

Respeta el tiempo de tus usuarios enviando solo las notificaciones más relevantes cuando sea necesario. También es esencial que permitas a los usuarios ajustar sus preferencias de notificación de forma rápida y sencilla.

Y si la notificación no es respondida después de un cierto período, entonces no está haciendo su trabajo y debe ser desactivada automáticamente. No hace ningún bien a nadie.

¿Te gusta lo que estás leyendo? Suscríbete

4. Dejar de ocultar todo detrás de una política de privacidad

Si estás recopilando información valiosa, entonces es algo que debo conocer y consentir. Puedes detallar los pormenores en tu política de privacidad, pero es muy poco sincero que una empresa oculte información pertinente en un documento que nadie lee.

5. Facilitar la cancelación al usuario

Si me he suscrito a tu producto, haz que sea muy sencillo eliminarlo. A nadie nos gusta estar suscrito y recibir emails de algo que haya dejado de interesarnos. Hazlo fácil, tampoco te compensa tener usuarios en tus bases de datos que no estén interesados en tu marca.

Consejos sobre el diseño de la interfaz del usuario (UI)

Veamos unos consejos un poco más técnicos de diseñadores UI sobre la interfaz del usuario UI:

1. Diseñar para la densidad, no para los píxeles

La densidad es el número de píxeles por pulgada de una pantalla, también conocido como "PPI". La unidad "dp" o “dip” es la abreviatura de "píxel independiente de la densidad".

¿Por qué utilizamos la densidad en lugar de los píxeles? Al diseñar una interfaz, se recomienda no diseñar para los píxeles, sino para la densidad de píxeles del dispositivo. Así nos aseguramos de que nuestros elementos se escalan adecuadamente para adaptarse a los diferentes tamaños de los dispositivos.

De este modo, si diseñamos un activo de botón, por ejemplo, a 200 x 50 dp, se mostrará a 200 x 50 px en una pantalla de 160 ppi y a 400 x 100 px en una pantalla de 320 ppi, es decir, al doble del tamaño del activo original.

New Call-to-action

2. Utilizar incrementos 8dp

¿Por qué diseñar con espaciado en incrementos de 8? La explicación es sencilla: utilizamos el número mágico 8 porque permite representar correctamente los números impares. A diferencia del 5, por ejemplo, en un dispositivo con una resolución de 1,5x, los números impares no se representan correctamente.

Además, la gran mayoría de las dimensiones de las pantallas modernas son divisibles por 8, lo que facilita la alineación adecuada de nuestros diseños en esos dispositivos.

Al diseñar en incrementos de 8 en una cuadrícula de 8 puntos, se crea consistencia en nuestros diseños. No hay que adivinar el espaciado y todo se alinea perfectamente con las convenciones de espaciado que hemos definido.

3. Utilizar el peso del color para establecer un jerarquía

Cada color tiene un peso visual, que podemos utilizar para crear una jerarquía entre nuestros contenidos. Utilizando tonos más claros de color, podemos asignar diferentes niveles de importancia a los elementos.

¿Cuál es la regla general para el peso del color? Si un elemento es más importante que otro, debe tener un mayor peso visual. Esto hace que el usuario pueda hojear rápidamente la página y distinguir entre la información importante y la menos importante.

La información más grande y llamativa es la que atrae primero la atención del usuario, que luego pasa a la información de apoyo que hay debajo.

4. Que el producto/experiencia sea veloz y eficiente

Como usuario, la velocidad y la eficiencia son de suma importancia al interactuar con un producto. No dejes que tu creatividad haga menos eficiente o rápido el proceso de compra.

Piensa que si las animaciones y las microinteracciones añaden tiempo innecesario, no están mejorando la experiencia. Las animaciones pueden mejorar el diseño, pero si agregan distracciones y movimientos innecesarios, no cumplen su función.

Perfil diseñador UX y diseñador UI

Vamos a ver ahora las diferencias entre un profesional UX y UI.

diseñador-ux-vs-ui

Diseñador UX

El papel del diseñador de UX es hacer que el producto o servicio sea útil, agradable y accesible. Si bien muchas empresas diseñan experiencias de usuario, el término suele asociarse con el diseño digital para sitios web y aplicaciones. Como diseñador UX, eres responsable de la satisfacción general de los usuarios con un producto. Piensa en ti mismo como el defensor del cliente, siempre buscando formas de mejorar la experiencia del cliente.

Las habilidades necesarias para ser un diseñador UX ya sean técnicas o en tu lugar de trabajo son: la comunicación, empatía, colaboración, pensamiento crítico, estudio, organización, wireframing (construir el esqueleto de una web o app), testeo, escucha, observación, paciencia, capacidad de respuesta, etc.

Diseñador UI

Crear una interfaz visualmente agradable es importante, pero la UI va más allá de la estética. Al  usar una aplicación, debe ser intuitiva: debe saber cómo hacer lo que se ha propuesto hacer sin ninguna explicación. Debe saber dónde se encuentra dentro de un sitio o aplicación. También debe tener una buena idea de lo que sucederá si presiona un botón o activa un interruptor de palanca. Los diseñadores de UI usan señales visuales para ayudar a guiar al usuario a través de la interfaz.

Las habilidades necesarias para ser un diseñador UX ya sean técnicas o en tu lugar de trabajo son: colaboración, empatía, teoría del color, tipografía, diseño de patrones, creatividad, precisión, atención al detalle, etc.

 

Y hasta aquí la explicación de qué es UX y UI, y en qué consiste su proceso de diseño.

Si te has quedado con ganas de aprender más sobre alguno de estos apartados, te recomiendo visitar nuestro listado de vídeos sobre HubSpot, donde podrás aprender sobre gestión de campañas, reporting, dashboards, etc.

Espero que este artículo te haya resultado útil e interesante, pero si te ha quedado alguna pregunta después de leerlo... ¡No dudes en dejármela en la sección de comentarios!

New Call-to-action

Publicado originalmente el 17 de octubre de 2017, actualizado el 6 de junio de 2022.

Revisado y validado por Susana Meijomil, Inbound Content Manager en InboundCycle.

FAQs sobre UX UI

  • ¿Cómo aprender UI UX?

    Invertir en tu educación online resulta muchas veces más práctico y económico que pasar 5 años en una universidad. Puedes encontrar cursos en Platzi, Udemy o Crehana.

  • ¿Qué se necesita para ser diseñador UX UI?

    En pocos sitios hay carreras específicas que cursen diseño ui/ux. La mayoría de personas lo aprenden día a día y suelen venir del diseño gráfico, diseño industrial, etc.

  • ¿Cómo convertirse en diseñador UX UI sin experiencia?

    1. Conoce los principios fundamentales del diseño (Color, Balance, Jerarquía y Tipografía).
    2. Entrena tu ojo.
    3. Lee artículos y libros.
    4. Practica rediseñando proyectos.
    5. Realiza cursos.
    6. Crea tu Portafolio y Resumen.
    7. Mantente activo en tus redes.
  • ¿Cuánto gana un diseñador UI UX?

    En España, el sueldo medio nacional de Ui/Ux Designer es de 34.465€ (según Glassdoor) y 25.000€ (según LinkedIn salary).

  • ¿Qué hace un UI?

    Un diseñador UI es responsable de crear el aspecto de un sitio web. Tienen la tarea de diseñar una interfaz de usuario desde el punto de vista del usuario. Se les puede dar un problema de diseño específico y pedirles que lo resuelvan.

  • ¿Los diseñadores necesitan programar?

    Si estás considerando entrar al diseño UI/UX probablemente te estarás preguntando lo mismo. La respuesta es no. El diseño UX no requiere programación, sin embargo, hay ocasiones en las que aprender a programar puede darte una ventaja sobre la competencia y darte a entender la perspectiva del desarrollador.

  • ¿Cuál es la mejor herramienta para UI y UX?

    Hay muchas herramientas que puedes usar para tus diseños, pero yo te recomiendo Sketch (para Mac), Adobe XD (Windows o Mac) y Figma (navegador).

  • ¿Qué estudiar primero UX o UI?

    La respuesta corta es que primero debes aprender UX y luego UI. 

    UX viene antes que UI en el proceso de diseño. En ese caso, es muy lógico que primero aprendas UX y luego UI.

  • ¿Qué es UI en programación?

    Por lo general, UI implica usar el sistema de ventanas de un sistema operativo en lugar de la línea de comandos (CLI).

  • ¿Qué lenguajes de programación se usan en UI?

    Por lo general, los diseñadores UI no hacen mucha programación para empezar, ya que su enfoque general es el diseño. Pero es útil conocer los conceptos básicos de programación y, para un diseñador UI, aprender los conceptos básicos de HTML, CSS y JavaScript es beneficioso.

  • ¿Los diseñadores de UX necesitan Photoshop?

    Muchos diseñadores de UX y UX usan Photoshop porque conocen la aplicación, o al menos se sienten cómodos usándola. Sin embargo, la comodidad de una herramienta no la convierte en la mejor opción para el trabajo.

También te pueden interesar...

Contenido evergreen: qué es, cómo crearlo y ejemplos
Estrategia SEO: 15 pasos y claves para trabajar tu campaña de marketing SEO
Google Images: cómo funciona la búsqueda por imagen en Google

¿Y tú qué opinas? ¡Déjanos aquí tus comentarios!

Suscríbete al Blog
Suscríbete por email y recibe además un pack de bienvenida con nuestros 5 mejores artículos