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

Y algunos consejos para que comiences con ambos.

Créditos de imagen

Hace unos días, publiqué una publicación en Typography, una publicación en Color Theory y una publicación sobre el diseño de aplicaciones móviles desde cero. Recibieron una buena cantidad de atención y la gente compartió conmigo lo útiles que fueron las publicaciones para comprender mejor el diseño.

Entonces, decidí escribir otra publicación que sea una introducción rápida a dos temas muy amplios: Diseño de interfaz de usuario y Diseño de experiencia de usuario. El conocimiento de artículos anteriores y este puede ayudarlo a convertirse en un mejor diseñador.

¡Empecemos!

En primer lugar, respondamos la pregunta: ¿Qué son exactamente el diseño de UI y el diseño de UX, y cuál es la diferencia entre los dos?

Credito de imagen

En pocas palabras, UI es cómo se ven las cosas, UX es cómo funcionan las cosas. UX es un proceso, mientras que UI es un entregable. Vamos a elaborar más ...

Diseño de interfaz de usuario

El diseño de la interfaz de usuario (UI) es un campo grande. En teoría, la interfaz de usuario es una combinación de contenido (documentos, textos, imágenes, videos, etc.), forma (botones, etiquetas, campos de texto, casillas de verificación, listas desplegables, diseño gráfico, etc.) y comportamiento (qué sucede si Hago clic / arrastrar / escribir).

Se necesita un buen ojo, mucha práctica y mucha prueba y error para mejorar. Como diseñador de UI, su objetivo es crear una interfaz de usuario que sea atractiva, hermosa y que también genere una respuesta emocional del usuario para que sus productos sean más adorables y hermosos.

Cuando comencé, algo que aprendí de mi mentor es hacer un viaje de guía turístico a su producto. Imagine su aplicación / sitio web como un viaje. Cada usuario que descarga su aplicación desde que la ve en la App Store / web, a través de su uso, logrando objetivos o completando tareas dentro de la aplicación, se embarca en un viaje. Y ese viaje debería ser encantador.

Y usted, como diseñador de la aplicación, es el artesano que diseña este viaje. Por lo tanto, no desea arrojar toda la información en la pantalla con la esperanza de que el usuario la recoja. Eso es todo lo contrario de una buena interfaz de usuario.

En cambio, usted es el guía turístico que lleva al usuario a un maravilloso viaje a través de su aplicación. Y para esto, debes ser capaz de cambiar y mover su atención de un lugar a otro guiándolos.

El diseño no se trata solo de aprender a usar software de diseño, aunque eso es ciertamente importante. El software es como la espada de un diseñador. Necesitas la espada para pelear la batalla, pero eso no es todo lo que necesitas aprender a usar. Debes aprender las estrategias, procesos, trucos y consejos de la pelea / juego para poder ganarlo. En el diseño de la interfaz de usuario, debe realizar una lluvia de ideas, experimentar, probar y comprender a sus usuarios y su viaje a través del uso de su producto.

Los beneficios de tener un producto bien diseñado es que tendrá una mayor tasa de retención de usuarios.

Cosas para recordar acerca de crear una interfaz de usuario encantadora

  1. En una pantalla, la gente siempre leerá primero el más grande, el más audaz y el más brillante.
Créditos de imagen

Esta es la naturaleza humana. Nuestra atención está programada de tal manera que primero vemos el más grande, el más audaz y el más brillante. Y luego se mueve a cosas más pequeñas, menos audaces y menos brillantes.

Como diseñador, puede utilizar esta información para seleccionar la experiencia de su usuario.

2. La importancia de la alineación.

La alineación es un aspecto fundamental del diseño de la interfaz de usuario. Y un principio de diseño importante es: minimizar el número de líneas de alineación. Mejora la lectura y hace que el diseño sea más agradable a la vista.

Créditos de imagen

En las imágenes de arriba, la imagen de la izquierda tiene 1 línea de alineación. Mientras que la imagen en la parte derecha tiene 4 líneas de alineación.

Aquí hay otro ejemplo de cómo menos líneas de alineación pueden hacer una gran diferencia para mejorar el diseño.

¡La imagen de la izquierda tiene demasiadas líneas de alineación, mientras que la de la derecha tiene solo una y se ve más agradable a la vista! Créditos de imagen

Hay dos tipos fundamentales de alineación: alineación de bordes y alineación central.

  • La alineación de bordes es donde tiene todos los elementos que tienen un lado o borde alineados con una sola línea.
  • La alineación central es donde alineas todos los elementos por su punto medio.
Créditos de imagen

Dependiendo del caso de uso, elegirá uno u otro. Por lo general, la alineación del borde se considera mejor. Es bastante fácil alinear elementos en software de diseño como Photoshop. La mayoría del software de diseño generalmente proporcionará una regla / guía para alinear todos los elementos.

3. Conviértete en un arquitecto de atención.

Aquí hay dos formas de interpretar esto: 1) Debe captar la atención del usuario con su diseño. 2) Debe prestar atención a cada pequeña cosa en sus diseños.
Para ser un gran diseñador, debes hacer ambas cosas. Lo último te permite lograr lo primero.

UI Design se trata de adaptar la experiencia a sus usuarios guiando su atención hacia diferentes cosas importantes.

Formas de utilizar el texto para captar la atención del usuario:

  • Haga su tamaño más grande o más pequeño.
  • Color más audaz o brillante. O hazlo silenciado.
  • Use un tipo de letra con un peso pesado en comparación con algo que sea delgado o liviano.
  • Poner en cursiva las palabras. Poner en mayúsculas o minúsculas algunas palabras.
  • Aumente la distancia entre cada una de las letras para que el tamaño total de las palabras ocupe más espacio.

¡Lo más importante al diseñar es probar! Asegúrese de probar todo diferente: colores, fuentes, tonos, ángulos, alineación, diseño, etc. Experimente con diferentes diseños para poder diseñar un viaje de usuario utilizando varias formas de llamar la atención.

Lea mucho más sobre el diseño de interfaz de usuario aquí. Behance y Dribbble son excelentes plataformas para encontrar un buen diseño para inspirarse.

Diseño de experiencia del usuario

El diseño de la experiencia del usuario (UX) se trata de crear experiencias agradables y sin dolor.

Aquí hay 7 preguntas que debe hacerse para saber si la experiencia de usuario de su producto es buena:

  1. Facilidad de uso: ¿Para qué usa el usuario mi aplicación? ¿Cuál es la funcionalidad principal de mi aplicación? ¿Qué es lo que necesito hacer bien para poder usar mi aplicación?
    Ahora, ¿cómo puedo minimizar la cantidad de pasos que el usuario necesita para lograrlo dentro de mi aplicación? ¿Qué es lo principal que mis usuarios quieren lograr con mi aplicación? ¿Cómo puedo hacer que la experiencia de lograrlo sea tan suave, rápida y placentera?
  2. Perfil de usuario: debe saber quiénes son sus usuarios y qué quieren lograr con su aplicación. La mejor manera de hacerlo es perfilando a sus usuarios.
    Tienes que hacer algunos ejercicios de pensamiento para entender tu mercado. Limite su público objetivo / usuario.
    La pregunta principal que debe hacerse es: ¿Cuál es la funcionalidad principal de mi aplicación? Perfile a sus usuarios para reevaluar continuamente esa pregunta.
  3. Solicitud de permisos: si su aplicación móvil tiene notificaciones automáticas, necesita servicios de ubicación, integración con redes sociales, correo electrónico, etc., sabe que necesita el permiso del usuario en un mensaje de alerta que aparece en la pantalla cuando está usando su aplicación. En lugar de preguntar a la vez qué abrumaría al usuario, use el efecto The Benjamin Franklin. Antes de pedirle a alguien un gran favor, pídale un pequeño favor. Y empuje lentamente al usuario hacia una determinada dirección.
    Asegúrese de que su aplicación envíe la notificación de permiso solo cuando el usuario esté a punto de usar esa función y no cuando simplemente inicie la aplicación.
  4. Forma vs función: el diseño no siempre se trata de la forma: un hermoso esquema de color, las fuentes, el diseño y demás. También se trata de la funcionalidad. Siempre ve por la función sobre la forma.
  5. Consistencia: ¿Soy coherente en toda mi aplicación? ¿Es mi aplicación consistente con mi marca? La inconsistencia en el diseño crea confusión. Un usuario confundido es un usuario infeliz.
    Piense en la consistencia, no solo en términos de apariencia, sino también en términos de funcionalidad.
  6. Simplicidad: ¿puedo hacerlo más simple?
    Asegúrese de que su aplicación sea a prueba de la abuela, es decir, las personas mayores pueden entenderla y usarla.
    Una aplicación mala y confusa sería filas sobre filas de botones, muchos colores diferentes y una interfaz de usuario compacta.
  7. No me hagas pensar: ¿Estoy haciendo las cosas difíciles para mi usuario?
    A los humanos no les gusta estar confundidos.
    Cuando estamos programando, estamos tratando de hacer que nuestro código sea lo más liviano y eficiente posible.
    Cuando estamos diseñando, estamos tratando de hacer que la interfaz sea lo más clara y lo menos confusa posible. ¡Y hermoso!
    Intenta que tu redacción sea lo más clara posible.

Puntos a tener en cuenta para una gran experiencia de usuario:

  1. No tenga tutoriales largos en el lanzamiento de la aplicación que expliquen cómo usar la aplicación. En su lugar, desea brindarles a sus usuarios información adicional cuando sea necesario. Hazlo contextual. Dar consejos y sugerencias. Intente crear un diseño en el que el usuario descubra la aplicación en unos segundos sin necesidad de un tutorial explícito. ¡Ahí es donde vienen los principios de diseño intuitivo!
  2. Cuando algo está tan arraigado en la mente de los usuarios de dispositivos móviles, como tirar para actualizar o pellizcar para hacer zoom, respete esas reglas para su aplicación. Y NO use esas acciones para algún otro objetivo. Al igual que tirar para agregar una nueva entrada de diario, se vuelve súper confuso. Una aplicación de diario que estaba usando hizo eso y era confusa.
  3. No trate a sus usuarios como idiotas. No le dé una ventana emergente / alerta al usuario para confirmar una acción frecuente. Solicite confirmación solo por acciones perjudiciales que los usuarios puedan lamentar, como eliminar algo o realizar una compra.
    Las ventanas emergentes y alertas innecesarias interrumpen el flujo y resultan en una mala experiencia del usuario. No hagas que tus clientes se sientan estúpidos.

Lea más sobre UX Design aquí y aquí.

Pensamientos finales

Espero que el artículo te haya ayudado a comprender conceptos básicos en el diseño de UI y UX. Me encantaría escuchar cualquier comentario o comentario sobre la publicación. ¡Puedes enviarme un correo electrónico a harshita@harshitaapps.com!

También puedes descargar mi aplicación aquí. Todos estos aprendizajes solo fueron posibles porque quería crear una aplicación hermosa y útil para el seguimiento de precios de criptomonedas, alertas y gestión de cartera. El viaje de crear esa aplicación me enseñó lecciones importantes y mejoró mis habilidades, y he estado compartiendo mucho sobre eso en mis publicaciones. :)

Terminando la publicación con una de mis citas favoritas sobre diseño ...

“El diseño no es solo lo que parece y se siente. El diseño es como funciona "
-Steve Jobs