ux

¿Estamos entrando ya en ese futuro que veíamos en las series y películas de ciencia ficción? Por el momento los coches no vuelan, pero pulsando un botón electrónico desde casa te envían un producto al momento. En una era donde la inmediatez está a la orden del día, es lógico que los consumidores sean cada vez más impacientes. Pero… ¿Por qué? Sobre todo por el enorme desarrollo que ha experimentado la tecnología en la última década. Queremos todo aquí y ahora. Hace poco se decía que teníamos un mundo de posibilidades a un solo click, ahora este mundo es aún más acelerado y cercano. Lo podemos tener todo en la palma de nuestra mano. Gracias a la evolución del comercio web (Amazon ha hecho mucho bien o mucho mal, según se mire) y sobre todo a la de los dispositivos móviles, concretamente los smartphones, en un futuro podríamos acabar convertidos en algo parecido a los personajes humanos de la película Wall-E. Bromas aparte, desde que nos levantamos por la mañana hasta que nos acostamos, miramos las pantallas de nuestros teléfonos móviles de media unas 150 veces al día y aproximadamente durante 130 minutos. Es aquí cuando surge lo que se conoce como micromomento, aquel en el que una persona accede a un medio digital para satisfacer una necesidad de aprender, hacer, descubrir o comprar algo. Es curioso que el término haya sido acuñado por Google, el rey del Big Data, al que inconscientemente acudimos como si de un oráculo se tratase, y del que esperamos una respuesta inmediata y acertada: “cómo hacer esto, quiero ver aquello, necesito ver lo otro, etc." Respondemos a un estímulo de manera inmediata, esperando la mejor respuesta, con la que tomaremos una decisión mayoritariamente improvisada. Para hacernos una idea, después de que el consumidor haya sido impactado por X anuncios televisivos, puede surgir un destello, una necesidad de búsqueda de información en un corto espacio de tiempo. Esto es lo que conocemos como “ventana de oportunidad”. Prevenir el momento y el mensaje así como facilitar la infraestructura digital, permitirá a las marcas boxear en el ring de los micromomentos. Es necesario distinguir los micromomentos "O.G", los que consideraremos oportunidad de negocio, de los que no lo son, los "fake" que no nos interesan. Para ello según el gran oráculo Google, podemos establecer que un micromomento consta de cuatro partes: 1.- La persona: el cliente objetivo. Quién es y qué sabemos de él. 2.- La intención: información, compra, etc... 3.- El contexto: no todos los micromomentos son iguales. 4.- La inmediatez: necesidad de satisfacerlo de manera inmediata. En una época ultra-competitiva, en la que vivimos una gigantesca saturación publicitaria, donde el consumidor por norma general no considera una marca predeterminada en su búsqueda, sino que va investigando como Sherlock; los micromomentos son muy importantes, ya que el consumidor lo que realmente busca es satisfacer SU necesidad. Las empresas que elaboren una estrategia entendiendo y satisfaciendo estos micromomentos y necesidades, serán las triunfadoras de la batalla. Pero claro, no es todo oro lo que reluce, ni podemos conocer todos los micromomentos, ni todos los micromomentos son iguales. En general, queremos que se respeten nuestros momentos personales. Si publicamos nuestro desayuno en Instagram, y de repente nos aparecen dos elementos como Mario Vaquerizo y Rebeca vendiéndonos neumáticos a buen precio, lo consideraremos algo raro, intrusivo e incluso molesto. Otro caso totalmente distinto es que tengamos que pasar la revisión de nuestro coche pero no disponemos de demasiado cash. Puede que saquemos nuestro móvil del bolsillo y busquemos "neumáticos a buen precio" aquí es donde comienza la carrera de los micromomentos. Los micromomentos suceden a través del camino del consumidor De manera que, todo ello impactará en el llamado “camino del consumidor”, la peregrinación y fases en las que éste puede establecer un contacto con las marcas está en continuo cambio, y por lo tanto pueden suponer distintas oportunidades de negocio para las empresas. En primer lugar, en un determinado micromomento, una marca puede impactar y decir: ¡Oye, que estoy aquí!. En segundo lugar, en un micromomento en el que el consumidor necesite información, iniciando un proceso que puede acabar en compra, una marca debe ser capaz de entrar en la consideración del mismo, es decir, que se la tenga en cuenta a la hora de tomar la decisión: ¡Sabes que estoy aquí, y te ofrezco esto!. En tercer lugar, en la fase de compra es imprescindible no fallar, inmediatez y facilidad son las claves del éxito: ¡Pim, pam, pum, bocadillo de atún!. Y por último, la fidelidad y la lealtad son indispensables para conseguir una posible recompra: Vuelve a casa, vuelve por Navidad. Cómo podemos beneficiarnos de los micromomentos Debemos seleccionar con cuidado cuáles son los micromomentos que realmente queremos ganar. Tienen gran importancia los contenidos que ofrecemos, así como el tratamiento de los datos estadísticos o cualitativos que nos permiten una mejor segmentación. Por lo que para triunfar se debe: Analizar los micromomentos: qué se busca y en qué lugares. Es imprescindible conocer a los consumidores y a nuestro público objetivo. Analizar el contexto y momentos de contacto: adaptarnos y ofrecer soluciones de la manera más rápida y eficaz posible. Adaptar la UX: permitir movilidad entre los contenidos y el proceso de compra. Usabilidad y accesibilidad. En definitiva optimización, optimización y optimización. Posicionarse correctamente. Realizar mediciones sobre los diferentes micromomentos y el impacto de nuestras respuestas. Después de todo esto, espero que haya quedado claro que, a través de los micromomentos, se definen las preferencias de los usuarios. Además, no todos estos pequeños momentos son iguales en cuanto a importancia, y de hecho hay que evitar ser intrusivo. Por ello no podemos abandonar a la deriva como El holandés errante a nuestro target, hay que estar presentes ofreciendo las soluciones más rápidas, sencillas y sobre todo eficaces a través de las distintas fases del proceso de venta: preventa, venta y post venta. Hay muchas webs donde conocer con más detalle cómo las empresas utilizan los micromomentos actualmente, además contienen gran cantidad de información interesante y útil.

Las microinteracciones son pequeñas piezas de funcionalidad que permiten al usuario llevar a cabo una acción concreta.  Hoy en día estamos rodeados de ellas ya que se encuentran en todos los productos digitales. Un buen diseño de microinteracciones mejora la experiencia de usuario y puede ser el responsable de que los usuarios se enamoren de nuestro producto. La historia de las microinteracciones se remonta a los primeros aparatos electrónicos y muchos de los estándares de las GUI que usamos actualmente fueron en su día microinteracciones  primitivas. Una microinteracción puede ser parte de un producto o puede ser el producto completo.  Por ejemplo, una báscula de las de toda la vida solo sirve para una cosa: Calcular el peso. Tiene un único caso de uso: el usuario se sube encima y la báscula muestra el peso mediante el display. La interacciones bien diseñadas resuelven un problema concreto con eficiencia, humor y estilo; marcando la diferencia entre un producto que amamos y otro que simplemente aceptamos.  Por ejemplo Google ofrece sugerencias sobre lo que estas buscando de forma instantánea generando una sensación única y mágica en el usuario. Whatsapp muestra pequeños iconos en cada mensaje para informar del estado de las conversaciones. Un reloj indica que el mensaje no ha llegado, un tick indica que el mensaje ha llegado al servidor de WhatsApp, un doble tick indica que el mensaje ha llegado al dispositivo del destinatario y un doble tick cambia al color azul cuando el destinatario ha leído el mensaje. Por el contrario, una microinteracción mal concebida puede causar gran confusión y frustración en un usuario. Por ejemplo, la ruedecita para regular la temperatura de algunas neveras siempre me ha parecido super confusa.  Tiene números del 1 al 9, pero no queda totalmente claro si un numero más alto es más frío o es más temperatura.  El diseño mejora notablemente añadiendo simplemente la palabra Colder (Más frío).  Pero mejora mucho más si añadimos unos iconos de termómetros en cada extremo de la escala de forma que cualquier persona pueda entender la microinteracción independientemente del idioma que hable. Personalmente hubiera optado por iconos de copos de nieve que resultan más ilustrativos. Un copo en un lado de la rueda y tres copos en el lado opuesto. Incluso se podría mejorar añadiendo un degradado de color de tonos cálidos a fríos. Otro ejemplo mítico de microinteraccion mal diseñada es el cierre de un coche con el mando a distancia. Justo después de apretar el botón del mando las luces del coche parpadean y suena un pitidito, todo fantástico si no fuera porque cuando abres el coche ocurre prácticamente lo mismo.  Por este motivo la mayoría de la gente presiona el botón del mando varias veces e incluso más de uno vuelve a salir a la calle a comprobar si el coche esta cerrado. Una microinteracción se compone de 4 partes: Los Triggers (Disparadores) que la inician,  las Rules (Reglas) que determinan su funcionamiento, el Feedback generado por las rules que dan información de estado y por último los Loops and modes que determinan la duración de una microiteracción, definen si esta se repite o cambia en el tiempo y nos permiten cambiar el funcionamiento de la misma en escenarios especialmente farragosos. Vamos a desgranar cada una de estas partes: 1.- Triggers (Disparadores) que la inician Un trigger es lo que inicia la microinteracción. Es importante que el usuario identifique fácilmente el trigger, que no haya discordancias visuales, por ejemplo si el trigger parece un interruptor debe actuar como tal. Cuanto más común y usada sea la microinteracción, más visible y fácil de reconocer debe ser el trigger. Ej: Durante el diseño de la web para la Drupalcamp Spain 2017 decidimos ubicar el call to action para comprar entradas como un botón flotante que este siempre visible, en todo momento y por todo el sitio. Existen dos tipos de triggers: Manuales: Es el usuario es el que determina cuando se inicia la microinteracción. Estos triggers surgen del deseo del usuario de hacer algo: Quiero apagar la alarma, quiero saber como ir a Lisboa, quiero iniciar un chat con mi ex-novia, etc. El ejemplo más obvio y común de este tipo de triggers es el botón. De sistema: Se activan de forma automática y sin intervención humana si se cumple una determinada condición. La mayoría de las veces el usuario puede configurar y limitar estos triggers.  Ejemplos típicos de condiciones pueden ser: Errores: Cuando se produce un error en una app el sistema lo comunica mediante una microinteración. Ej: Endomondo genera un aviso por voz y muestra un icono de color rojo cuando se pierde la señal GPS. Cambios en la ubicación: Cuando entramos o salimos de una ubicación concreta. Ej: Tripadvisor muestra sugerencias sobre restaurantes de las ciudades a las que acabas de llegar mediante notificaciones  push a los móviles de aquellos usuarios que previamente lo han autorizado. Datos entrantes: Un nuevo email, una actualización disponible, el tiempo, una llamada, un mensaje, etc. Ej: Cualquier smartphone al recibir una llamada muestra varias opciones de forma automática como coger la llamada, colgar o responder con un sms. Otras microinteracciones: en muchas ocasiones una microinteracción precede a otra y forman parte de una feature o macrointeracción. Por ejemplo, en el registro de un usuario después de introducir email y contraseña puede enviarse un email para confirmar la cuenta mediante un link. 2.- Rules (Reglas) que determinan como funciona Las reglas sirven para crear un modelo de la microinteracción y deben reflejar tanto las restricciones del contexto como las restricciones del negocio. La clave a la hora de definir las reglas es reducir la complejidad. Limitar las opciones al mínimo y fijar unos valores por defecto. Cuantas más opciones más reglas. Toda aquella información que conocemos a priori debe utilizarse para confeccionar las reglas. Datos del usuario que tenemos guardados, datos de la plataforma, o del entorno. Ej: Instagram usa datos que tiene de la gente a la que seguimos y nos sigue para generar las rules de la microinteracción que nos sugiere seguir nuevos usuarios. Hay que definir estados para cada elemento y ver como cambia con el tiempo o con la interacción del usuario. Las reglas también sirven para prevenir errores. Evitar que el usuario pueda cometer un error. 3.- Feedback que informa al usuario de lo que está ocurriendo El feedback es posiblemente la parte más importante de una microinteracción porque ofrece al usuario información que le permite entender cómo transcurre la acción. Es importante definir qué información necesita saber el usuario y cuándo necesita saberla. Existen los siguientes tipos de feedback: Feedback visual: Animaciones y mensajes. El más común de todos los tipos de feedback. Ej: Asana muestra un mensaje de confirmación flotante cuando el usuario marca una tarea como completada. Feeback en forma de audio: Earcorns y voz (speech). Los earcorn son sonidos distintivos que se emplean para anunciar determinados eventos: arranque del sistema, nuevo mensaje, etc. Quizá el earcorn mas famoso de la historia sea el mítico sonido de arranque de Windows XP, o el de error! El feedback por audio también puede ser simplemente por voz, las voces sintetizadas ya son muy realistas y cada vez es más común que una app nos informe de cualquier cosa de esta forma. Feedback vibrotactil: El dispositivo en cuestión vibra para enviar al usuario algún tipo de información.  Mucho ha llovido desde que en 1976 el video juego arcade de Moto Cross "Fonz" añadiera el primer feedback vibrotactil de la historia de forma que los jugadores podían sentir la vibración al chocar contra otras motos dentro del juego. Hoy día este tipo de feedback es muy común en consolas, máquinas recreativas, smartphones y tablets. Ej: El Steam controller implementa este tipo de feedback. El feedback nos permite dotar de personalidad a nuestra microinteracción y por consiguiente a nuestra aplicación.  Ej: Mailchimp da un toque de humor genial al momento crítico de enviar una campaña de email marketing. Siempre que sea posible hay que dar feedback al usuario para evitar momentos de incertidumbre. Un buen feedback nos da esa fantastica sensación de tener el control de la app. 4.- Bucles y modos Cuando existen acciones poco frecuentes que pueden enturbiar la microinteraccion utilizamos lo que se conoce como “modo”.   Un modo es un espacio concreto en el que el funcionamiento de la microinteracción cambia. Ya en los inicios de la computación moderna el mítico editor de texto para sistemas UNIX Vi basaba su manejo en el cambio de modo: El modo comando permitía desplazarse dentro de un archivo y realizar operaciones de edición como buscar, eliminar texto, modificar texto, etc. mientras que el modo insertar permitia escribir texto nuevo en el archivo. Para cambiar de modo había que presionar la tecla ESC. (Aunque hable de él en pasado todavía cientos de miles de programadores y administradores de sistema siguen usando Vi a diario). Ej: Captura del Editor vi para Mac OS. Siempre que sea posible un modo debe tener su propia pantalla para evitar confusión. Ej: Airbnb permite a los usuarios usuarios que tienen su casa en alquiler en la plataforma cambiar entre el modo viaje y el modo host. Por último los bucles (loops) determinan la duración de una microiteracción y definen si esta se repite o cambia en el tiempo. Los parámetros de los loops deben ser elegidos con mucho cariño para asegurar la mejor experiencia de usuario. Los loops de larga duración se emplean para dotar de memoria a la microinteración y para ir simplificándola a lo largo del tiempo.   Como diseñadores es importante usar las microinteracciones de forma correcta ya que nos permiten mejorar la experiencia de usuario y dotar a nuestros productos de ese toquecito mágico que engancha a los usuarios.

El “User research” es un conjunto de técnicas de observación y obtención de feedback y análisis de resultados que permiten entender los comportamientos, necesidades y motivaciones de los usuarios de cualquier producto o servicio. Existen decenas de métodos y variantes dentro del User research, en este articulo vamos a describir las 6 más utilizadas en la industria web.   Card Sorting Consiste en pedir a un grupo de usuarios que agrupen contenido y funcionalidades en categorías abiertas o cerradas. El resultado del ejercicio son patrones de cómo los usuarios esperan encontrar el contenido así como sugerencias de navegación, menús y categorías. Este método no ofrece una estructura final, pero ayuda a responder muchas preguntas que nos hacemos durante la fase de diseño. Más información: http://www.usability.gov/how-to-and-tools/methods/card-sorting.html http://boxesandarrows.com/card-sorting-a-definitive-guide/ http://www.measuringu.com/blog/card-sorting.php     Eye Tracking Esta técnica se sirve de la tecnología para analizar los movimientos de los ojos del usuario por la interfaz. El resultado es un mapa de calor o de puntos de fijación que nos ofrece información clara sobre que partes del sitio captan más la atención y cual es el flujo visual del usuario por el sitio. Más información: http://www.webdesignerdepot.com/2013/11/4-essential-ux-rules-taught-by-eye-tracking-research/ https://uxmag.com/articles/leveraging-eye-tracking-to-create-an-engaging-user-experience/ http://www.uxbooth.com/articles/a-brief-history-of-eye-tracking/   A/B Test Consiste en ofrecer versiones distintas de una página a diferentes usuarios y comparar los resultados para determinar cuál funciona mejor. Es un gran método para optimizar embudos de conversión y landing pages. Más información: http://www.wired.com/2012/04/ff_abtesting/ https://www.smashingmagazine.com/2010/06/the-ultimate-guide-to-a-b-testing/ http://www.uxbooth.com/articles/how-to-increase-site-performance-through-ab-split-testing/   Focus Group Se trata de reunir usuarios y debatir sobre determinados temas o cuestiones relacionadas con el contenido o con el sitio web. El resultado arroja información útil sobre las opiniones y las sensaciones de los usuarios en relación al tema en cuestión y permite conocer mejor la audiencia y afinar el target. Más información: http://www.webcredible.com/blog/focus-groups-how-run-them/ http://www.slideshare.net/Centralis/adapting-focus-groups-for-user-experience-ux-research/ https://blog.mozilla.org/ux/2012/08/when-to-use-a-focus-group-and-when-not-to/   Usability testing Test individuales donde se evalúa una página o sitio con usuarios representativos del target. Se recoge feedback directo del usuario usando la herramienta o el prototipo de la misma que sirve para aplicar mejoras basadas en los resultados obtenidos. Más información: http://www.usability.gov/how-to-and-tools/methods/usability-testing.html http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/ http://uxmyths.com/post/831431504/myth-22-usability-testing-is-expensive   Encuestas cuantitativas Consiste en realizar encuestas a los usuarios para obtener información como su satisfacción con el producto, la utilidad de una página concreta, su opinión sobre un tema concreto, etc.. Los beneficios de este método son muchos ya que permite entender mejor a los usuarios finales y así diseñar mejores productos reduciendo el riesgo de cometer errores u ofrecer soluciones mediocres. Más información: http://uxmastery.com/better-user-research-through-surveys/ http://www.uxmatters.com/mt/archives/2012/09/strengths-and-weaknesses-of-quantitative-and-qualitative-research.php http://www.marketingdonut.co.uk/marketing/market-research/what-is-quantitative-research-   Fotografía principal: Hal Gatewood

Con la llegada de HTML5 hace unos años ha aparecido la posibilidad de añadir marcadores de posición o placeholders. El placeholder es el texto que aparece dentro de un campo de texto en un formulario antes de que el usuario lo complete, sirviéndonos de gran ayuda para clarificar qué tipo de información hay que introducir en dicho campo. Por ejemplo, el siguiente código HTML: <form> <label for="search">Suscribete al newsletter</label> <input id="news" type="text" placeholder="Introduce tu email" name="seach"> <button id="subscribebutton" type="submit">Enviar</button> </form> Muestra algo como esto: Añadir placeholders a los formularios es una buena práctica que mejora de la usabilidad y por supuesto la experiencia de usuario. El W3C recomienda usar el placeholder siempre junto con la etiqueta Label, ya que supuestamente son complementarias, pero en Wild Wild Web a menudo usamos solo una de las dos, ya que nos resulta redundante usar ambas. El soporte para placeholder solo será visible en los navegadores web más modernos pero se suele implementar un fallback jquery para conseguir la misma funcionalidad en los navegadores antiguos. Existen varias formas de añadir el placeholder a un campo de un formulario en Drupal 7. A continuación destacamos 4 de ellas que consideramos las más útiles. Módulo Form Placeholder https://www.drupal.org/project/form_placeholder Este módulo nos permite añadir placeholders a cualquier formulario del sitio desde la administración Drupal. Módulo Webform Hints https://www.drupal.org/project/webform_hints Este módulo permite incorporar placeholders automáticos a cualquier textfield, testarea, select list y email field de formularios creado con el módulo Webform (https://www.drupal.org/project/webform) Además, este módulo viene con soporte para navegadores antiguos que no soportan el attributo placeholder e implementa el fallback mediante jQuery. Módulo Field placeholder https://www.drupal.org/project/field_placeholder Permite añadir el atributo placeholder a cualquier campo de una entity drupal, como campos de un tipo de contenido, de términos de taxonomía, de usuarios, etc. Al activarlo aparece una nueva opción para introducir los placeholder al editar o crear un campo. Función en el template.php Por último el método más técnico un pelín más avanzado porque implica toda código pero resulta el más potente de todos. Consiste en añadir la siguiente función al archivo template.php de nuestro theme. function YOURTHEMENAME_form_alter( &$form, &$form_state, $form_id ) { if (in_array( $form_id, array( 'user_login', 'user_login_block'))) { $form['name']['#attributes']['placeholder'] = t( 'Username' ); $form['pass']['#attributes']['placeholder'] = t( 'Password' ); } } Este caso introduce un placeholder para el login form. Recuerda cambiar en el nombre de la función YOURTHEMENAME por el nombre de vuestro theme, y también cambiar el id del formulario y el nombre del campo sobre el que queremos realizar el cambio. Más información sobre cómo obtener el id de un formulario.

The Stanford Persuasive Technology Lab ha recopilado 10 directrices para la construcción de la credibilidad de un sitio web. Estas reglas se basan en 3 años de investigación con más de 4.500 personas.   Demuestra que eres real Enseña que eres una empresa real. Pon tu dirección física en tu sitio web, un mapa y fotos de tus oficinas o local. Si tu empresa está afiliada a organizaciones como la cámara de comercio u otro tipo de instituciones o asociaciones indícalo.   Haz fácil la verificación Trata de que sea fácil para las personas verificar que lo que dices es cierto. Utiliza citas, referencia a tus fuentes… Aunque la gente no haga click en los enlaces aumentará la confianza en tus contenidos.   Destaca tu experiencia Resalta lo bueno, si cuentas con personas influyentes en tu empresa, dales visibilidad. Si has trabajado con clientes importantes muéstralo, te ayudará a construir credibilidad.   Muestra personas reales Enseña a las personas reales que están detrás de tu sitio web y dentro de la empresa mediante imágenes y textos. Esta práctica es muy recomendable sobre todo si tienes servicio de atención al cliente.   Facilita tu contacto a tus clientes Cuanto más fácil les resulte a tus clientes ponerse en contacto contigo mucho mejor. Los sitios webs que hacen eso son vistos con mucha más confianza por los usuarios. Poner un número de teléfono visible y presente en toda página es una muy buena práctica.   Diseño profesional Como Don Norman, dijo, "las cosas atractivas funcionan mejor". La gran mayoría de la gente evaluará tu página rápidamente por su diseño. El sitio web ha de estar pensado para el target al que va dirigido y el propósito de la empresa. Un diseño responsive (adaptativo a todos los soportes) ayuda a mejorar mucho la usabilidad y por lo tanto la credibilidad de tu negocio.   Actualiza el contenido a menudo Los sitios webs que se actualizan o revisan con frecuencia son vistos como más creíbles. Si un usuario entra en tu página y ve que la última noticia de tu blog es de hace un año, probablemente piense que ha sido abandonada. Actualizar el portfolio, blog, imágenes y mensajes de portada hacen de tu página un lugar mucho más creíble.   Evita o minimiza la publicidad Si es posible, trata de evitar los anuncios o al menos indicar claramente cuando el contenido es patrocinado y cuando no lo es. Cada vez que molestas a los usuarios con publicidad en ventanas emergentes o anuncios dentro de tu contenido, estás perdiendo credibilidad.   Evita errores Los errores ortográficos o enlaces que no funcionan dañan notablemente la credibilidad de tu página. Revisa periódicamente el contenido y presta atención a estas cosas por pequeñas que sean.    Evidentemente estas reglas deben ir siempre acompañadas de un proceso offline depurado y profesional. El trato con los clientes, los tiempos de respuesta o la solución de incidencias son esenciales para no echar por tierra el trabajo online. ​