¿Qué es el diseño UX y UI? + Caso de Estudio y Herramientas de Diseño.

¿Qué es el diseño UX y UI? + Caso de Estudio y Herramientas de Diseño.

En este post definiré el UX, el UI y sus diferencias. Y además otras definiciones que todo Diseñador UX y UI debería conocer.

Para finalizar un caso de estudio para plasmar las definiciones previas en lo práctico y visual.

Estamos en una era digital donde todo está cada vez más a un click del usuario por lo que el usuario ha ido cobrando más importancia. A día de hoy, ya no vale: “esto es lo que hay” y por ello las marcas se están empezando a mover para generar experiencias más personalizadas y humanas para así llegar a más usuarios y fidelizarlos. Podemos decir que un elemento clave para alcanzar la rentabilidad en un negocio digital es la captación de tráfico. Sin un flujo constante de visitas que sean potenciales clientes a un sitio web o app, resulta menos probable conseguir nuevos clientes y, por tanto, el crecimiento se verá a la baja. Por lo tanto, el éxito de una web se basa en una cosa: en cómo es percibida por los usuarios. Surgen así preguntas como: ¿este sitio web me da el valor que yo quiero? ¿es fácil o agradable de usarlo? Los usuarios que circulan por un sitio web es lo que se preguntan mientras interactúan con tus productos o servicios y toman una base de toma decisiones para volverse un usuario recurrente.

 

¿Por qué es tan importante generar una UX?

 

Es importante asegurar que el producto final guste a los usuarios finales, pues ya no se trata de que ellos se adapten a tu producto sino de que tú te adaptes a ellos. Un equipo de producto debe identificar las necesidades del usuario y esto significa resolver lo que la gente necesita de tu producto o servicio, y no lo que tu negocio piensa que necesitan.

 Vídeo Ejemplo de Shopping Online donde el usuario puede tener problemas en el checkout.

   Estudios hechos por iab Spain de Top tendencias digitales 2017  y Top tendencias digitales 2018 donde puedes observar que el mercado cada vez hace más hincapié en las Experiencias del Usuario.

 

¿Qué es el UX?

 

La experiencia de Usuario (UX) es donde intersectan los objetivos del negocio y el de los usuarios. Y es la forma en como una persona se siente cuando usa un producto mientras intenta cumplir una tarea o un objetivo. O, en otras palabras, para un usuario sería la excitación y los momentos memorables sobre el uso de un producto.

Definición por Smashingmagazine.com

La Experiencia de Usuario (UX) es como se siente o percibe una persona cuando conecta o interactúa con un sistema. Este sistema puede ser: una web, una app, una laptop o portátil, software…es decir una interacción entre humano y ordenador (HCI: human-computer interaction). Para generar una buena experiencia de usuario, los Diseñadores UX evalúan (mediante técnica de investigación y testado) como los usuarios se sienten con el sistema enfocándose en diseñar productos fáciles de usar, valiosos donde se percibe el valor del sistema, deseables, útiles, accesibles, encontrables y eficaces de mejora en las tareas.

 

Definición de Experiencia de Usuario según Don Norman y Jakob Nielsen:

 “El termino User Experience (UX) engloba todos los aspectos de la interacción del usuario final con la compañía, sus servicios y sus productos.” Don Norman nació en 1935 y es la persona a la que se lo otorga el crédito del término User experience (UX) y el primero en describir la importancia del Diseño Centrado en el Usuario (la noción que diseña las decisiones basadas en las necesidades y los deseos del usuario). Fue en 1993, cuando se unió a Apple y dijo: “La experiencia de usar estas computadoras es débil.” O como dice en el vídeo: “La experiencia de usuario no es sólo un simple dispositivo: web o una app. UX es cómo experimentas todo: tu vida, el mundo, un servicio… pero recuerda que es un sistema que engloba todo.”

Vídeo Norman

 

Definición de UX del libro: `The Element of User Experience´- Jesse James Garrett.

La experiencia de usuario no es sobre el funcionamiento interno de un producto o servicio. UX trata sobre cómo funciona por fuera, cuando una persona entra en contacto con ello. Cuando alguien te pregunta sobre cómo es usar el producto o servicio, están preguntando sobre la experiencia de usuario. ¿Qué implica una interacción? Apretar un botón como puede ser de una caja registradora, una alarma de reloj o en un paso de peatones para obtener el paso por ejemplo.

(Photo by Ashim D’Silva on Unsplash)

 En definitiva, cada producto que sea usado por alguien crea una experiencia de usuario: libros, una silla de trabajo…etc. El diseño de un producto puede influir bastante en el uso de ese producto y en como nos sentimos cuando lo usamos. Por ejemplo, si la interfaz de UBER no nos dejará poner el lugar exacto de donde estamos o la hora exacta en que queremos usar un coche, ya no percibiríamos de la misma forma el servicio y mucha gente desinstalaría su app y habría una pérdida de cliente considerable.

 

¿Qué es la Interfaz del Usuario (UI)?

 

User Interface (UI) son los elementos visuales, pantallas…como botones o iconos que puedes usar para interactuar con el dispositivo. Como ejemplo os pongo: Skype y su nueva interfaz en desktop y móvil.

 

 

¿Qué es la Usabilidad?

 

Definición de la Usabilidad según Jakob Nielsen:

Usabilidad es un atributo de calidad que evalúa que tan fácil es de usar las Interfaces del Usuario (UI), que cubre un sistema fácil de aprender, eficiente de usar, agradable de usar por las personas, con el fin de alcanzar un objetivo concreto.

 

Se define con 5 componentes de calidad:

  • Capacidad de Aprendizaje: qué tan fácil es para los usuarios cumplir tareas básicas la primera vez que se encuentran con el diseño.
  • Eficiencia: una vez los usuarios aprenden el diseño, ¿qué tan rápido pueden mejorar sus tareas?
  • Capacidad de Memorizar: qué tan fácil es de recordar el diseño por los usuarios
  • Errores: ¿cuántos errores los usuarios hacen, que tan severos son los errores y que tan fácil se recuperan de los errores?
  • Satisfacción: ¿qué tan agradable es de usar el diseño?

En definitiva, la usabilidad se enfoca en: la eficacia del uso, el fácil aprendizaje y la satisfacción del usuario.

 

¿Qué es la Arquitectura de la Información (AI)

 

AI es el arte y la ciencia de organizar y etiquetar webs, intranets, comunidades online y software para facilitar la usabilidad del contenido y la localización (según iainstitute.org) de la información de tal manera que el usuario pueda navegar a través de ella. La arquitectura de la información es, por ejemplo:

  • menús
  • ítems en las páginas
  • estructura del site
  • terminología usada para describir cosas

Se suele representar con un flujo de diagramas y se suelen usar herramientas como: 

  • Card sorting: permite organizar y definir la distribución de las categorías y contenidos. Optimal Sort es una herramienta online donde puedes organizar la arquitectura de información de tu web. Aunque también puedes usar post-it y organizar la información en una mesa o una pizarra.

            Explicación de Card Sorting. 

  • Árbol de Contenido o Mapa de Navegación: definir cuál será el esquema de organización general que tendrás el producto o servicio. (VER EJEMPLO EN CASO DE ESTUDIO SPOTIFY-ARQUITECTURA DE INFORMACIÓN).                                                                       
  • Diagrama de Flujo: representan los procesos, es decir los caminos que seguir un usuario hacia el proceso de compra.

Os dejo este ejemplo que hice para BOOKING:

En definitiva, arquitectura de la información es la columna vertebral o el esqueleto de la información en un sitio. No confundir con la Navegación, que se refiere a los elementos de la Interfaz del Usuario (UI) que permiten al usuario alcanzar información específica del sitio.

Ilustración de UX, UI, Usabilidad y Arquitectura de la Información

CASO DE ESTUDIO: SPOTIFY MÓVIL

Interfaz del Usuario o UI: los iconos que hay en la parte inferior de la pantalla con sus descripciones: Inicio| Explorar| Buscar | Radio | Tu Biblioteca. Estos iconos o botones permiten al usuario interactuar con el sistema.

Usabilidad: el caso que estos iconos o botones no estaban antes visibles en la parte inferior de la pantalla, sino que estaban escondidos en un menú hamburguesa lo que dificultaba la navegación del usuario a través de la app. Los elementos de la interfaz del usuario son ahora más eficientes, tienen una mayor interacción y no hace pensar al usuario.

Experiencia de Usuario (UX):  es la facilidad y rapidez para guardar las canciones que te gustan. Música en streaming, tener una biblioteca personal, sugerencias de música en función de tus gustos, descubrir música, compartir música y socializar, escuchar música offline. Tiene tanto valor, que muchos están dispuestos a pagar Spotify Premium para no tener anuncios y tener la música offline.

Arquitectura de la Información: es fundamental para estructurar la información de un producto, pues es la base para pensar las interacciones y una guía para el diseño de la interfaz de la web o app.

 

Diferencias entre un UI Designer y UX Designer:

 

  • A día de hoy, un UI Designer trabaja en webs, apps, wereables (son objetos que llevamos encima a diario: ropa inteligente, relojes inteligentes…) y otros programas. Además, están más concentrados en la parte visual. Son responsables de diseñar la plantilla de una interfaz de producto digital y los elementos visuales de todas las páginas y pantallas de un sistema: ejemplo cómo el botón se verá, color…
  • Sin embargo, un UX Designer creará escenarios para tratar de averiguar dónde poner el botón con la intención de saber que quiere el usuario y resolver los fallos que existen y causan dolor al usuario cada vez que hace una compra, por ejemplo.

 

 

CASO DE ESTUDIO: UBER

La experiencia de Usuario en UBER: sería no tener que pagar al conductor. La APP de UBER sería la interfaz a través de la cual el usuario decide donde ir y su usabilidad está bien definida pues conseguimos el objetivo de llegar a donde queremos. Luego hace no mucho, UBER añadió UberEATS: se refleja en la APP, encuentra restaurantes que hagan entregas cerca de ti. Además, ahora puedes asociarte con UBER y entregar pedidos con tu propio horario. Esto es un ejemplo donde se mejora la experiencia del trabajador y del Negocio UBER.

 

16 Herramientas para Diseño y Prototipado de APP y páginas Web 

 

Por lo general se suelen usar 3 a 4 métodos para prototipar el producto definido:

  1. Sketch : se pinta a mano en un papel, aunque directamente se puede hacer online con algunas de las herramientas para diseñar que menciono a continuación.
  2. Wireframe: son visiones esquemáticas de una interfaz y se sitúan los elementos básicos de una página. Se suele especificar la arquitectura y organización de los contenidos de navegación de cada página. También tienen una baja fidelidad de diseño.
  3. Mockups: es el siguiente nivel a los Wireframes y es cuando se le da vida al diseño aplicando la creatividad del diseñador UI. A diferencia del paso anterior que iba en tonos blancos y grises, se deriva a una colorida versión donde toma vida la marca del producto. Toma así una media fidelidad de diseño.
  4. Prototipado: es la fase final de esta etapa de prototipado y es la interacción del mockup. Aunque esta última fase no tenga todas las interacciones y animaciones en sitio, tendrá las interacciones clave y mostrará una clara visualización de las funciones del producto final.

 1.InVision:

Es más una herramienta de presentación de prototipado y colaboración de diseño donde puedes testear el diseño final, pues se necesita de una segunda aplicicación como, Sketch  app por ejemplo, para crear Mockups para luego así importarlos a Invisión y animarlos. Puedes usar Invision para presentar el proyecto a tus clientes, aunque necesitarás internet. No te pierdas InVision Studio (enero 2018) : promete desbancar a las herramientas de diseño de interfaces como Scketch y Framer.

 

PRINCIPLE-HERRAMIENTA-PROTOTIPAR 2.Principle

Es una herramienta para animar, interactuar y prototipar para los diseñadores de interfaces de usuario.

 

 3.Axure

Es una herramienta de diseño de interfaces y prototipado que tiene una amplia librería de patrones para diseñar y se puede trabajar de forma offline. También puedes crear Diagramas de flujo para saber como navega el usuario hasta el checkout.

 

 4.Sketch

Esta es una de mis herramientas favoritas para wireframing y diseño de interfaces. Aunque podemos añadirle un plugin llamado Craft (producto de Invision)  para diseñar con datos reales y puedas verlos en Sketch. Os dejo un ejemplo de como interactuan estas 3 herramientas en un rápido prototipado.

 

 

 5.Marvel

Es una herramient de diseño, prototipado y colaboración. También podrás ver tus mockups en tu apple watch.

 

 6.Atomic

Es una herramienta para prototipar, parecido a Marvel.

 

 7.UX Pin

Es una plataforma de diseño y prototipado. Se puede diseñar y colaborar con tu equipo en cualquier lugar pues está en la nube (cloud-based). Se puede personalizar cualquier elemento con código CSS y crear un kit de herramientas de diseño y desarrollo.

Os recomiendo los libros que UX Pin tiene publicados en PDF, sólo tenéis que dejar vuestro mail para que os manden el link

 8.JUST INMIND

Es una herramienta de prototipado para web y app. También tiene bastantes tutoriales de su herramienta en Youtube Justinmind sobre wireframes para móvil y animaciones, o creación de escenarios de la interfaz del wireframe.

 

 9.Webflow

Es un CMS para crear webs pero también está siendo usado para prototipar, en mi caso lo he usado para prototipar mi web y me ha encantado. Esta plataforma de diseño web produce un HTML, CSS y Javascript limpio, de hecho puede ser el futuro del front-end pues no necesitas usar código y puedes diseñar tu web en el buscador de Webflow.

 

Os dejo mi página web prototipo: lauransotomayor.webflow.io. Es una plantilla totalmente gratis que luego fui personalizando y es totalmente gratuita con 2 proyectos máximo y también tienes algunas limitaciones como creación de páginas y subir algunas archivos PDF por ejemplo.

 

 10.Flinto

Es una herramienta Mac app para interactuar y prototipar los diseños de las apps.

 11.Origami

 

 

 12.Figma

Es otra herramienta para diseñar y prototipar y es la octava más usada después de Axure según la encuesta hecha por UXTOOLS.CO

 

 13.Prott

Es una herramienta donde puedes tomar foto a tus sketch hechos en papel y subirlos a esta plataforma, y además prototipar con ellos. También puedes transformarlos en mockups y compartirlo con tus compañeros

de equipo. Prott – Prototyping tool for Web, iOS, Android apps from Goodpatch on Vimeo.

También tienes otras herramientas para diseñar y prototipar como: Adobe XD  , PROTO.IO o Framer. 

Conclusiones del Diseño de la Experiencia de Usuario

 

Como podéis observar hay muchas herramientas para diseñar, prototipar y que cada vez son más amigables y fáciles de usar para que el diseñador pueda enfocarse en su tarea construir la mejor forma para llegar a las necesidades de los usuarios. En mi caso me quedo con : InVision, Sketch, Webflow, UXPin y Prott. Aunque me encanta el blog de Just In Mind o UXPIN, también Webflow tiene varios webinars que podéis estar al día en Twitter. Espero que os hallan quedado más claras las definiciones de UX, UI y todas las expuestas. Y si tenéis alguna duda, no dudes en escribirme o contactarme por Twitter @entrenaproyecto. Para los más interesados: el 8-9 de febrero habrá un gran evento para diseñadores, desarrolladores y digitales. Son unas Conferencias en Berlin, donde acudirán top diseñadores de webs, UX designers, UI Designers y Desarrolladores. Os dejo el hashtag: #AwwwardsBerlin @AwwwardsConf

 

Explora las novedades de Sotomayor Studio.

¿Te ha sido útil el Post? Comparte:

Pin It on Pinterest