Diferencias entre UX y UI en Diseño Digital

• ¿Qué es UX y qué es UI?

La UX o “Experiencia de Usuario'' y la UI o “Interfaz de Usuario” son dos conceptos susceptibles de ser confundidos, ya que están muy relacionados. Sin embargo, significan cosas diferentes, y debemos tener claro su significado.

Por una parte, en el ámbito digital, la UI se refiere a aquellos objetos que permiten a los seres humanos interactuar con una máquina. Estos objetos pueden ser, por ejemplo, los botones de una pantalla, el menú de navegación, las imágenes o los sonidos.

Por otra parte, la experiencia de usuario se refiere a la percepción y a la opinión que tienen los usuarios sobre la UI. Es decir, ¿los usuarios tienen una experiencia positiva o negativa al interactuar con el producto?

Por tanto, para que los usuarios tengan una experiencia positiva con el producto debemos realizar un buen diseño de UI. En este sentido, es muy importante que nuestra página web sea usable y accesible. Veamos, a continuación, qué es la usabilidad y la accesibilidad.

• ¿Qué es la usabilidad?

La usabilidad hace referencia a la facilidad de uso que tiene nuestro producto. Por ejemplo, cómo de fácil les resulta a los usuarios encontrar el número de contacto de una empresa en su página web.

• ¿Qué es la accesibilidad?

La accesibilidad hace referencia al hecho de que una persona con cualquier tipo de discapacidad pueda utilizar el producto sin encontrarse con barreras. Sin embargo, es importante destacar que no solo las personas con discapacidad pueden experimentar problemas de accesibilidad, sino que cualquier persona puede experimentarlos, aunque sea de forma temporal.****

Por ejemplo, una persona recién operada de la vista puede tener las mismas necesidades que una persona con discapacidad visual permanente. Igualmente, es posible que una persona que no disponga de auriculares en un lugar concurrido tenga las mismas necesidades que una persona con discapacidad auditiva permanente.

• ¿Qué es un wireframe?

Un wireframe es una representación visual sencilla de la estructura de un producto digital. Representa los elementos que va a tener, pero en lo que a diseño visual se refiere, es una representación muy sencilla, ya que no incluye colores, tipografías ni otros elementos visuales. Todo lo contrario, se realiza en una escala de grises. Por tanto, suele emplearse en las etapas más iniciales del diseño.

• ¿Qué es un mockup?

En español ‘maqueta’, es una representación visual (estática) del producto digital. Permite ver cómo será el diseño visual en realidad, pues ya incluye elementos visuales como el color, las tipografías y las sombras.

• ¿Qué es un prototipo?

Un prototipo es una representación funcional de un producto digital, ya listo para conocer cómo van a interaccionar los usuarios con él y si dicha interacción le va a resultar en una experiencia positiva o negativa.

En definitiva, el wireframe define la estructura del producto, el mockup define el diseño visual, y el prototipo define su funcionalidad.

Conclusión:

• UI y UX son conceptos distintos.
• Para que los usuarios tengan una experiencia positiva con la interfaz,
• El wireframe define la estructura del producto, el mockup define el diseño visual, y el prototipo define su funcionalidad.

Reto:

• Crea un wireframe para una página web para tu marca personal. Puedes realizarlo de forma digital o con papel y lápiz.