imagen-ux-portada

Hoy toca hablar de UX (User Experience) o Experiencia de Usuario; una importante disciplina que muchos conocen, muchos estudian pero, lamentablemente, pocos aplican. Y no porque no existan expertos en esta materia, sino porque las ecommerces no parecen estar por la labor de invertir ‚Äútodav√≠a‚ÄĚ en este tipo de optimizaciones.

Pasó en su época con el SEO, pasó con el Responsive, pasó con el CRO y ahora está pasando con la UX.

La filosof√≠a de las ecommerces (sobretodo pymes) parece ser la siguiente: ‚ÄúHasta que no sea estrictamente necesario (es decir: hasta que Google no me penalice o mis ventas empiecen a bajar) no voy a hacer m√°s cambios en mi web‚ÄĚ

Una actitud reactiva que implica un ‚Äúcoste de oportunidad‚ÄĚ en ocasiones, muy alto.

Por esa razón nuestra tarea debe ser: concienciar a nuestros clientes para que se pongan al día con los deberes atrasados en lo que a experiencia de usuario se refiere.

Y para ello, lo primero de todo, es dejarles meridianamente claro qué es la UX y cuál su papel para con ella.

Definiendo: UX

Si me lo permit√≠s, os explicar√© qu√© es la Experiencia de Usuario con mis propias palabras y desde el punto de vista online, que es el que nos ata√Īe. ¬°Apuntad!

La UX es la sensaci√≥n que experimenta un usuario cuando interact√ļa con nuestra p√°gina web.

Os pongo un ejemplo para intentar no solo que lo le√°is, sino que lo ‚Äúexperiment√©is‚ÄĚ. Fijaos en c√≥mo el buho se tapa los ojitos cuando se va introducir la contrase√Īa en este formulario.

imagen-ux-example1

¬ŅCu√°l es la sensaci√≥n que os ha producido? Muy probablemente hay√°is pensado lo mismo que yo pens√© al verlo por primera vez: ‚ÄúJejeje, ¬°Qu√© detalle tan chulo!‚ÄĚ

Y muy probablemente, el usuario que haya interactuado con este formulario habrá tenido esas misma sensación. Una interacción satisfactoria, una buena experiencia de usuario.

Sin embargo, dicha experiencia no siempre es positiva.

Volvamos de nuevo al ejemplo anterior. Imaginad qu√© habr√≠a pasado si, a√ļn con el detalle del buho, el bot√≥n ‚Äúlogin‚ÄĚ de este formulario no nos permitiera hacer click sobre √©l.

Evidentemente, nuestra experiencia cambiar√≠a, ¬Ņverdad? Sentir√≠amos incertidumbre, inseguridad, frustraci√≥n‚Ķ emociones negativas que se traducir√≠an en una mala experiencia de usuario.

De ah√≠ se concluye que, en lo que a la construcci√≥n de UX respecta, intervienen un mont√≥n de factores. Si bien es verdad que la Experiencia de Usuario est√° m√°s relacionada con aspectos subjetivos como el dise√Īo emocional, el tono del mensaje, el factor persuasivo, la ergonom√≠a, etc. hay muchos m√°s aspectos ‚Äúobjetivos‚ÄĚ que tambi√©n tienen un papel destacado, como por ejemplo: la usabilidad de la p√°gina, la accesibilidad, la arquitectura, la adaptaci√≥n a responsive, la forma de interacci√≥n, la velocidad de carga, etc.

imagen-ux-diagrama

Ejemplos de Experiencias de Usuario (UX) positivas

A continuación te vamos a presentar algunas muestras más de UX positivas para que veas que la idea de satisfacer al usuario está extendida entre las grandes ecommerces. Y no hay mayor ecommerce que Amazon.es. Veamos algunos ejemplos suyos:

 

imagen-ux-amazon1

Con esta iniciativa Amazon quiso que sus usuarios revivieran el esp√≠ritu navide√Īo durante sus compras de temporada. S√© que alguno de vosotros estar√° pensando: ‚ÄúPufff, seguro que no activar√≠a la m√ļsica nadie, es un co√Īazo entrar en una p√°gina con m√ļsica‚ÄĚ. Os confieso que yo tambi√©n pens√© esto mismo cuando v√≠ la iniciativa pero, sorprendentemente, y seg√ļn Amazon, un 70% de las visitas que registr√≥ la p√°gina durante la promoci√≥n, activaron el reproductor.

Otro ejemplo de Amazon:

imagen-ux-amazon2

Dise√Īo centrado en el usuario

Si has o√≠do hablar de UX, tambi√©n habr√°s o√≠do hablar del dise√Īo centrado en el usuario. Una doctrina muy afamada en la actualidad que requiere de un amplio conocimiento ergon√≥mico, psicol√≥gico e imaginativo para su desarrollo.

Para poder crear una interfaz ausente de trabas, debemos entender al usuario, ponernos en su piel, interactuar como él lo haría, pensar lo que el piensa.

F√≠jate en c√≥mo se desarrolla, a trav√©s del testing, un dise√Īo centrado en el usuario:

imagen-user-design

Google loves UX

‚ÄúDesde el principio, nuestros esfuerzos se han centrado en proporcionar la mejor experiencia posible a los usuarios‚ÄĚ Palabra de Google.

Google ha tenido esta idea presente desde sus inicios y ha trabajado en ella continuamente hasta nuestros días. Fíjate:

Ejemplos de UX en el ‚ÄúMundo Google‚ÄĚ

Seguro que conocer√°s muchos de los ejemplos que te vamos a mostrar a continuaci√≥n pero, es muy probable que, despu√©s de verlos desde la perspectiva UX, los valores mucho m√°s y entiendas la dedicaci√≥n que el se√Īor ‚ÄúG‚ÄĚ pone en mimar nuestra experiencia de usuario.

  • Doodles (un cl√°sico)

¬ŅC√≥mo hacer que la interacci√≥n con una barra de b√ļsqueda, un logo y un bot√≥n sea m√°s placentera? Google lo tuvo claro: a√Īadiendo sus ya conocid√≠simos ‚ÄúDoodles‚ÄĚ

imagen-ux-doodle3 imagen-ux-doodle4 imagen-ux-doodle2 imagen-ux-doodle1

¬ŅResultado? Los primeros resultados despu√©s de que Google instalara sus graciosos .gifs en la p√°gina principal de su site, revelaron que hab√≠a recibido muchas m√°s interacciones, registraba mucho m√°s tiempo de permanencia y adem√°s, ofrec√≠a sensaciones positivas a los usuarios que utilizaron su buscador.

  • Microinteracciones UX

Las microinteracciones son peque√Īos gi√Īos que se a√Īaden en una interfaz y que aportan un valor a√Īadido que provoca en el usuario un sentimiento satisfactorio. Quiz√° por s√≠ solas estas microinteracciones no tengan la fuerza necesaria como para construir una experiencia de usuario placentera pero, sin ninguna duda, ayudan a reforzarla.

F√≠jate en el detalle de incluir la foto de una simp√°tica calabacita en las notificaciones del calendario de tareas de Gogle mobile durante Halloween. ¬ŅGuay, no?

imagen-ux-notification

Pensad en la sensaci√≥n que habr√≠a experimentado el usuario si ese peque√Īo icono no hubiese estado ah√≠. Al entrar en el apartado de notificaciones, dicho visitante se habr√≠a encontrado con una p√°gina vac√≠a que no le hubiese producido ning√ļn tipo de sensaci√≥n. Por lo tanto la habr√≠a obviado y su experiencia al interactuar con ella habr√≠a sido ‚Äúindiferente‚ÄĚ

Sin embargo, con solo un icono, Google consigue que esa p√°gina no pase desapercibida y que el usuario, a√ļn no teniendo ninguna notificaci√≥n, se vaya con una sensaci√≥n m√°s positiva.

  • Funcionalidades UX

Para que ve√°is que Google estudia y testea la interacci√≥n de los usuarios con sus diferentes productos, aqu√≠ os mostramos una de las funcionalidades de su Traductor. En √©l, adem√°s de poder escuchar la traducci√≥n de la palabra que introducimos, el Gigante ha tenido el detalle de ralentizar la velocidad de reproducci√≥n durante la segunda escucha para que podamos asimilar mejor cada matiz de la pronunciaci√≥n. ¬ŅHabr√≠as ca√≠do t√ļ en eso?

imagen-ux-traductor

  • Gamificaci√≥n

Ya os lo hemos dicho, Google sabe cómo jugar sus cartas. En este caso ha sabido convertir una experiencia de usuario negativa en una experiencia placentera gracias un simple juego.

Cuando el navegador Chrome no encuentra la p√°gina solicitada por el usuario, en la pantalla aparece un peque√Īo mensaje con el icono de un dinosaurio.

Pues bien, si en ese momento pulsáis sobre la tecla espaciadora de vuestro teclado veréis cómo la página se transforma en una especie de videojuego en el que debéis conseguir que el dinosaurio esquive todos los obstáculos que se encuentra en su camino.

imagen-ux-not-available

Aquí tenéis un vídeo para que lo veáis con vuestros propios ojos.

¬ŅQu√© dec√≠s? ¬ŅEmpezamos a trabajar YA en UX?

Si ¡Ahora mismo! Sin más demoras, ni excusas. Y si me lo permitís, os daré 3 razones fundamentales por las cuales debéis poneros manos a la obra:

  1. Por Google

Ya hab√©is visto que la meta del gigante es ofrecer la mejor de las experiencias a sus usuarios. Y si hab√©is seguido las doctrinas que nos ha marcado en cuanto a posicionamiento, contenidos, enlaces y dem√°s, ¬ŅPor qu√© no os adelant√°is y lo segu√≠s tambi√©n en lo que UX respecta? ¬ŅO es que hace falta que empiecen de nuevo las penalizaciones?

  1. Por Vuestra ecommerce

Ofrecer una buena Experiencia de Usuario a vuestros visitantes os hará vender más. Os lo puedo asegurar. Un cliente contento es un cliente predispuesto, abierto a nuestras promociones, mensajes, interacciones persuasivas, etc. Por lo tanto, si trabajáis correctamente la experiencia de usuario de vuestra web vuestra tasa de conversión subirá como la espuma.

  1. Por vuestros usuarios

Ten√©is la oportunidad de hacer felices a vuestros usuarios. Y un buen negocio siempre debe velar por ellos. ¬ŅEl vuestro lo es?

¬ŅC√≥mo se mide la experiencia de usuario?

Si os hab√©is animado a empezar con UX o ya hab√≠ais hecho vuestros pinitos en esta disciplina pero ahora quer√©is darle ca√Īa al m√°ximo, lo primero que deb√©is saber es que, en este campo (como en la mayor√≠a), medir es OBLIGATORIO. Tanto antes de embarcaros en un proyecto, como durante su optimizaci√≥n, como al final de todo el proceso, hay que medir.

Dicho esto, lo primero de todo es saber qué tenemos que medir.

En UX lo que vamos a medir es la calidad de una experiencia. Si ha sido buena, mala, excelente, regular…

Esto es muy complicado ya que se trata de algo totalmente subjetivo. A la hora de extraer resultados, no solo intenvendría el grado de placer que el usuario experimenta al interactuar con una página, sino también sus expectativas iniciales sobre la misma o su utilidad… y todo ello en función de las propias características contextuales del sujeto: personalidad, clase social, edad, sexo, nivel cultural, dispositivo, etc.

A√ļn as√≠, existen diversas herramientas que se est√°n utilizando para recabar datos acerca de la QoE (Quality of Experience). Aqu√≠ os dejo una clasificaci√≥n muy interesante que nos trae Isabelle Hupont.

  • Cuestionarios al uso

    • System Usability Scale (SUS). Mide la dimensi√≥n ‚Äúusable‚ÄĚ de la QoE

    • Differential Emotions Scale (DES). Mide la dimensi√≥n ‚Äúafectiva‚ÄĚ de la QoE

  • Escalas Pict√≥ricas. En las que se presentan diversos avatares con expresiones diferentes y el usuario tiene que marcar la que m√°s se asocie a su estado de √°nimo en ese momento.

  • Herramientas Autom√°ticas

    • Reconocimiento facial de expresiones

    • Registro de se√Īales fisiol√≥gicas y gestos

    • Eye Tracking

    • Emotracking

  • Crowdsourcing. T√©cnica que emplea herramientas colaborativas en las que un gran grupo de usuarios dan su opini√≥n acerca de una p√°gina, un proceso, un formulario, una imagen, etc. que otros usuarios presentan. Tambi√©n funciona mediante cuestionarios. Un ejemplo lo tenemos con la herramienta ‚ÄúUsabilityHub.com‚ÄĚ

  • Herramientas Online: peek.usertesting.com, usertesting.com, crazyegg.com, vwo.com, mouseflow.com, userzoom.co.uk.

Nota: Si queréis acceder a la presentación completa podéis verla aquí. ¡Os la recomiendo!

El problema de todo esto es que las herramientas que nos proporcionan unos resultados más empíricos (como son las herramientas automáticas que hemos citado anteriormente), solo están desarrollándose a nivel experimental en laboratorios, por lo que su uso es todavía muy limitado.

Por otro lado, el resto de t√©cnicas (m√°s asequibles y accesibles) se comparten en muchas ocasiones con otras disciplinas como la usabilidad, y eso no es del todo adecuado seg√ļn los expertos en Experiencia de Usuario quienes consideran que deber√≠a abogarse para que exista una t√©cnica de medici√≥n asequible y dedicada en exclusiva para UX.

¬ŅGoogle puede saber si mi p√°gina ofrece una buena UX?

En la actualidad, Google cuenta con una herramienta llamada Pagespeed Insigths que, en teoría, mide la Experiencia de Usuario de las páginas consultadas, en mobile. Sin embargo, lo cierto es que esta herramienta solo tiene en cuenta factores que realmente están relacionados con la usabilidad y la accesibilidad de la página.

Aspectos como: tama√Īo de los botones t√°ctiles, adaptaci√≥n del contenido a la ventana gr√°fica, utilizaci√≥n de pluggins, tama√Īo de fuente, etc.

imagen-ux-pagespeed

Como vemos, todo cuantitativo y nada subjetivo.

Estamos seguros de que para sus propias páginas, Google tendrá un equipo de investigación en UX increíble, pero hasta el momento, en lo que se refiere a páginas de terceros, lo que nos presenta es esto.

No obstante, no se os ocurra perderle la pista porque como sab√©is, Google siempre tiene un ‚Äúas‚ÄĚ debajo de la manga.

Tendencias UX en 2016

  • Seguiremos con la Gamificaci√≥n

Si os ha gustado lo del dinosaurio de Google, esperad a ver la que tiene montada Nike con su dise√Īo personalizado de zapatillas.

imagen-ux-zapatillas

A los usuarios nos encanta ‚Äútoquetear‚ÄĚ, por eso nos gustan tanto estas cosas. El visitante se divierte, puede observar diferentes modelos de zapatillas, sus calidades, sus materiales‚Ķ incluso puede compartir su creaci√≥n en redes sociales. Lo cual hace que dicho usuario tenga una buena experiencia y Nike, por su parte, una buena promoci√≥n de producto.

  • Efectos de dise√Īo Parallax Scrolling y scroll horizontal

Estos efectos se pueden ver sobretodo en mobile, un terreno en el que la UX ha adquirido en poquísimo tiempo una importancia extrema.

Con interfaces tan min√ļsculos se hace necesario recurrir a soluciones funcionales y emocionales que puedan, a la vez que servir de utilidad para el usuario, conseguir que su interacci√≥n con estos elementos sea totalmente placentera.

Fíjate en estos ejemplos.

imagen-ux-mobile1

imagen-ux-mobile3

imagen-ux-mobile2

  • Microinteracciones

Os lo hemos mostrado antes, las microinteracciones se empiezan a extender entre las páginas web mas actuales (tanto en versión desktop como en versión mobile). Os mostramos un ejemplo.

En Whatsapp Web (la versi√≥n que permite gestionar el whatsapp desde un PC) la interfaz lanza una notificaci√≥n cu√°ndo la bater√≠a del tel√©fono est√° agot√°ndose. Un detalle (microinteracci√≥n) que adem√°s de ser bastante √ļtil, causa en el usuario una sensaci√≥n positiva; como una especie de sentimiento de gratitud.

imagen-ux-whatsapp

  • Multimodal

Aunque quizá esto sean tendencias 2017, en la actualidad ya existen los primeros prototipos de webs multimodal. Es decir, webs de accesibilidad completa en las que se puede entrar o navegar a través de la voz, de los gestos o incluso de impulsos cerebrales.

imagen-ux-multimoldal1

imagen-ux-multimodal3

imgen-ux-multimodal2

Conclusi√≥n ¬ŅHab√©is visto Wall-E?

A lo largo de este artículo hemos estado hablando de conseguir que el usuario se sienta a gusto interactuando con nuestro site; que experimente una navegación fácil, rápida y ergonómica en la que no existan trabas que le hagan frustrarse. En conclusión, una página en la que el visitante no tenga que pensar demasiado.

Pues bien, considerando que todav√≠a estamos en la ‚Äúprehistoria tecnol√≥gica‚ÄĚ y que las aplicaciones y dem√°s funcionalidades online ya buscan la manera de no hacer pensar demasiado al usuario, no puedo evitar que se me venga a la mente esta imagen:

imagen-ux-walle

¬ŅCre√©is que acabaremos as√≠? Muchos consideran que es muy posible.

Evidentemente la tecnolog√≠a seguir√° evolucionando para ‚Äúacomodar‚ÄĚ nuestro d√≠a a d√≠a pero, ¬Ņllegar√° el punto en el que nuestro cerebro tambi√©n se acomode?

Este es uno de los retos que se nos presenta de cara al futuro, esperemos estar preparados.