No es UX vs. UI, es UX & UI

La experiencia del usuario en la web (UX) es un sentimiento abstracto que la gente percibe al utilizar un sitio web. La interfaz de usuario (UI) es con lo que la gente interactúa como parte de esa experiencia.

Mientras diseñas un sitio web, quieres que tu UX sea lo más positiva posible – quieres que tus usuarios disfruten estando en tu web, es principalmente el objetivo. Pero no puedes simplemente decir “mejoremos nuestra UX” así como una empresa no puede decir “hagamos más dinero”. Son las estrategias que utilizas para crear tu UX, es decir la UI, que puede mejorarlo (o empeorarlo).

ux-ui

Fuente: UX is not UI

Normalmente para los sitios web, el equipo de diseño de una empresa trabaja en la UI para mejorar el UX. Opciones del menú, botones, texto, imágenes, videos – y donde se coloca cada uno de ellos en la página – forman la interfaz, y todo está meticulosamente planeado. Estos son los componentes de la UX, y el cómo estén usados afectará directamente al usuario.

Empezaremos dando un vistazo a la UI con algunos ejemplos, explicando las estrategias para ayudarte a comprender porque una buena UX depende de una buena UI, y profundizar en por qué es más fácil (no necesariamente correcto) crear una UI en vez de una UX.

Qué es la UI Web… Y Qué No

En un contexto web, digamos que el diseñador elige incluir la opción de poder arrastrar archivos para poder organizar el contenido. Eso es UI. Ahora digamos que el usuario prefiere ese sitio frente a sus competidores porque le gusta lo fácil que es disfrutar de horas de música. Eso es UX.

Tal como se discutió en Web Web UI Best Practices 2014, la UI web es el diseño, presentación y ejecución de los elementos que forman una página web. Naturalmente, estos han cambiado, puesto que abarca todo lo que un diseñador puede poner en un sitio web, pero por suerte, Usability.gov, la fuente de recursos en UX líder para prácticas recomendadas y guías, los a categorizado de una forma útil y conveniente:

  • Entrada — campo de texto de formulario, campo de fecha de formulario, listas desplegables, cajas de selección, listas, botones, interruptores
  • Navegación — pases de diapositivas, campo de búsqueda, paginación, barra lateral, etiquetas, iconos
  • Compartir — lista de amigos, botones de seguimiento, me gusta/promocionar, botones de compartir, invitar a amigos
  • Información — contenido de texto, ayudas, cajas de mensaje, notificaciones, iconos, barra de progreso, ventanas modales

Por ejemplo, OS X Yosemite presume de una UI excepcional. Mientras que Yosemite es un sistema operativo (en vez de un sitio web), los principios tras la UI siguen siendo aplicables en un contexto web. El logro visual de sus botones clickables (entrada) hace que usar el sistema sea más agradable, sus barras laterales (navegación) dejan al usuario ver el contenido tras la ventana, y su definido centro de notificaciones (información) provee lo que necesitas saber sin ensuciar el escritorio.

Más importante aún, como Apple dice en sus guías de UI, estos elementos ayudan a describir a grandes rasgos “una funcionalidad personalizada y una experiencia única”. El objetivo final de la UI de Yosemite es permitir a los usuarios disfrutar de un sistema suficientemente sofisticado y poderoso pero que a la vez no asuste.

UI en Acción

UI & UX son conceptos diferentes, pero innegablemente conectados.

Como se vio en Web UI Design Patterns 2014Google Play perfecciona la técnica de arrastrar-y-soltar (llamado un “patrón”). En su sitio, los usuarios pueden arrastrar-y-soltar sus canciones en una lista de reproducción, y entonces arrastrar-y-soltarlos en el orden que quieren oirlas. Como resultado, la UX es mejorada puesto que todo lo que el usuario necesita hacer es decirle a la aplicación que canciones le gustan y relajarse mientras la música fluye. De esta manera, una decisión en la UI (arrastra-y-suelta) mejora la UX mediante la conveniente personalización.

google-play

Fuente: Web UI Design Patterns 2014

Ahora hablemos sobre un ejemplo menos directo. Digamos que un montón de usuarios dejan tu sitio prematuramente porque no quieren registrarse para usar algunas de las funciones. Es claramente un problema de UX puesto que la experiencia está provocando el abandono, pero puedes tratar de encontrar la raíz del problema y arreglar la UI. A lo mejor tu formulario requiere demasiados campos. En este caso, el patrón de inmersión inmediata (“registro vago”)  de la UI puede ser la solución. Esto le da acceso al usuario a la mayoría del sitio sin tener que registrarse. Tras navegar libremente por un tiempo, ellos mismos decidirán crear una cuenta, especialmente si les llaman las funciones disponibles solo para los miembros.

AirBnB gasta la misma táctica para atraer nuevos usuarios. Los usuarios sin cuenta son libres de explorar todas las entradas en el sitio como si fueran miembros, mostrándoles que AirBnB tiene algo interesante. Sin embargo, cuando encuentran una habitación que quieren reservar, necesitan crear una cuenta para reservarla.

airbnb

Fuente: Web UI Design Patterns 2014

Si la UX es creada en parte a través de la UI, entonces la UI es creada en processos del diseño como el esbozo o la creación de prototipos. Los bocetos y los prototipos son como los contornos o  planos que los diseñadores usan antes de crear el sitio final. Esto puede ir desde dibujos a mano alzada en servilletas a bocetos digitales creados con una herramienta como UXPin o Balsamiq. Esta podría decirse que es la fase más importante, donde los diseñadores deben pensar teóricamente sobre que tipo de UI creará la UX deseada. Simplemente como cuando construyes una casa, no empezarías la construcción a menos que el plano estuviera bien detallado.

Para una explicación más detallada sobre la creación de UIs, echa un visrazo a Guide to Wireframing (en inglés).

Por Qué Construimos UI en Vez de UX

Shawn Borsky, UI/UX Director de Diseño en Rivet Games, nos recuerda que la UX es más que el resultado de la UI. De acuerdo con el, la UX es “el nucleo de una marca”, con la marca en si misma siendo “la suma de experiencias que una persona tiene con una empresa u organización”. Esto no solo pone una UX positiva como el objetivo de la UI, sino como el objetivo de toda la interacción con una organización.

Cada detalle que aporta un sitio web contribuye a la expericia de sus usuarios y a los recuerdos e impresiones que generan al usar el sitio – pero los diseñadores no pueden tomar el control de la experiencia directamente. Como puedes ver en la ilustración de abajo, es fácil crear una visión de túnel y centrarse solo en la UI porque es tangible (como una cuchara) al contrario que crear completamente la experiencia (como el disfrute del desayuno).

ui-and-ux

Fuente: UX vs. UI

Asimismo, si estás cocinando una cena importante, quieres poner mucha atención en ello, ¿correcto? Eliges a mano los mejores ingredientes, eliges las mejores recetas y las sigues cuidadosamente, e incluso colocas un bonito centro de mesa para crear la atmósfera correcta. Bien, una web no es diferente. Quieres planear todo perfectamente para que los visitantes pasen un buen rato. Mientras que tu dedicas horas – incluso días – planeando y preparando la comida, es solo parte del objetivo final de una experiencia culinaria fantastica. Esta es la única razón por la que vale la pena centrarse en los detalles de la UI manteniendo la UX en mente.

Si la UI se construye con cabeza, atención, y cuidado, entonces repercutirá en la UX. Si la UI se crea al azar y con poco esfuerzo, o si se tiene un gran descuido, entonces la UX probablemente sufrirá. Un buen ejemplo de descuido en la UI se encuentra en la tecla de mayúsculas del teclado del iPhone (mientras que estamos discutiendo específicamente sitios web, los dispositivos móviles no son inmunes a los fallos de UI que afectan a su UX):

black

white

Fuente: Quora

¿Qué imagen tiene la tecla de mayúsculas activa y cual no? Algunos de los fondos de las teclas son siempre grises y algunos blancos, pero la tecla de mayúsculas tiene los dos, dependiendo de si está activada o no. Esto es una UI pobre, incluso siendo todo funcional y pudiendo el usuario puede acceder una tecla de mayúsculas funcional. ¿Resultado? Los usuarios (como nosotros en UXPin) frecuentemente tienen que borrar y escribir de nuevo sus textos, lo que es frustrante, generando una UX pobre.

(En serio, ¡¿en qué imagen está activo?! En UXPin, tenemos iPhones desde hace seis años, y aún nos confunde.)

Mostrado como moraleja en el Web UI Best Practices, uno de los diseños de UI pobre más notables es también bastante común, incluso para sitios como LivingSocial.

input

Fuente: Bad UI/UX Design

Esta es la primera ventana que aparece cuando entras a la web. El problema es, no hay forma de salir de ahí. Es significa que los visitantes espontáneos o curiosos que no quieran dar su email dejarán el sitio tan pronto como entren. Quizás esto es un fallo de UI internacional diseñado para presionar a los usuarios para dar su email pero ¿quiéres realmente que la UX de tu sitio sea tan intimidante?

Ahora, es importante decir que la UI aquí es completamente funcional y adecuada – los colores son buenos, los botones son claros – pero la UX sufre. Este es un buen ejemplo de como puedes tener una mala UX independientemente de una buena UI. Marcin Treder, CEO de UXPin, cree que una mala UX es solo en parte aceptable si los objetivos son válidos. “A veces verás formularios largos y complicados donde las etiquetas están a la izquierda, lo cuál crea una experiencia de lectura peor”, afirma Treder. “Por otro lado, puede conseguir el objetivo de recolectar información de calidad previniendo a la gente de un rellenado rápido del formulario de manera mecánica”.

Estamos eligiendo diseños malos de UI simplemente porque son más fáciles de ver (y más divertidos) que diseños de UI perfectamente planeados. Esto es porque una UI mejor es, la que menos notas. Igual que una buena pelicula te hace olvidar que estás en un cine, una UI sólida sumergirá al usuario en la experiencia y no le prestará atención a esta. Si ni siquiera notar que la UI produce la mejor UX.

Cómo la UI da Forma a la UX

Suficiente teoría – veamos como las decisiones en la UI afectan directamente en la UX.

ui-ux-design

Estos ejemplos son solo una vista general de las maneras en las que las elecciones de la UI afectan en la UX. Para explicar el problema/solución de 63 de estas técnicas, echa un vistazo al Web UI Design Patterns 2014.

Incluso dando la UI forma a la UX, la primera cosa que quieres es decidir que tipo de UX deseas, y entonces encontrar la UI que te ayudará a conseguirlo. Igualmente, si hay un problema con tu UX, es mejor identificarlo y detallar el problema antes de aventurarte en que UI lo solucionará.

La UX de Aprender UX

Comprender las diferencias entre UX y UI es solo el principio – la clave de construir un buen sitio web reside en familiarizarse con como los dos conceptos se relacionan entre si.  Mientras que mucho del diseños web es independiente y compartimentado, UX y UI están ligados casi siempre intrínsecamente.

UX1

Como puedes ver, crear una experiencia de usuario efectiva quiere mucho más que adornos visuales. El diseño visual y sonoro son solo un par de elementos de la UI que alimentan a la UX. mientras que no puedes necesariamente controlar la UX de tu sitio web, puedes controlar la UI – así que asegúrate de que tienes un objetivo de UX general y un diseño de UI acorde con esta.

Desarrollador php especializado en convertir un buen café en código. Amante de JavaScript, Laravel y WordPress. Adicto a cualquier herramienta que acelere el desarrollo web. Sígueme en Twitter @zreedee.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres