Soluciones alternativas a los desplegables en dispositivos móviles

Los desplegables móviles son uno de los grandes quebraderos de los diseñadores a la hora de diseñar un interfaz eficaz.

Como Luke Wroblewski y otros dicen “los desplegables deben ser un elemento de UI de último recurso”, es decir usarse sólo en los casos donde ningún otro tipo de elementos o de interacción sean una solución válida.


Desplegable frente a casilla de verificación/botón deslizante. Imagen de Zoltan Kollin

Zoltan Kollin ha escrito un artículo con gran cantidad de ejemplos de dónde se deben usar soluciones alternativas a los desplegables según el número de opciones y según la entrada esperada.

Soluciones alternativas a los desplegables según número de opciones


Desplegable frente a selección segmentada. Imagen de Zoltan Kollin

Según el número de opciones nos muestra Zoltan estas opciones alternativas:

Solución binaria: si tenemos un desplegable con dos opciones, podemos usar varias alternativas: una casilla de verificación (o check button), un botón de radio o un botón deslizante dependiendo del caso.

Solución para un número pequeño de alternativas: si tenemos un número pequeño de alternativas (menos de cinco) podemos usar una selección segmentada que muestre las opciones y aparece coloreada la que el usuario selecciona.

Solución para un número largo de alternativas preestablecidas: si tenemos un listado preestablecido de alternativas como puede ser un listado de destinos, la solución es que el usuario introduzca por teclado su elección y le vayan apareciendo las opciones posibles y las pueda seleccionar fácilmente.

Solución para listas largas y diversas: cuando tenemos una lista larga y diversa pero que no se le puede aplicar la solución anterior, tendremos que priorizar las opciones a cuatro que cubran la mayoría de los casos y añadir un “Otros” y que los usuarios seleccionen la suya mediante botones de radio.

Soluciones alternativas según la entrada


Desplegable frente entrada por texto. Imagen de Zoltan Kollin

Kollin según el tipo de entrada que tengamos nos da estas soluciones alternativas:

Solución para una lista de alternativas preestablecidas que se pueden introducir mediante teclado numérico: tocar en el campo e introducir mediante un teclado numérico el valor.

Solución para una lista de alternativas preestablecidas que se pueden introducir por teclado: si tenemos que meter una provincia, una moneda o otro tipo de valor que el usuario conozca, lo mejor es decirle al usuario que lo escriba y le vayan apareciendo las opciones y éste seleccione la que es.

Solución para valores numéricos no decimales: en el caso de valores numéricos no decimales la mejor opción es un campo de texto donde los usuarios puedan meter la cantidad con un + y un – para cambiar el valor si se han equivocado.

Solución para valores numéricos decimales en un intervalo: si la cantidad entra dentro de un intervalo y además puede tener un valor decimal, lo mejor es un deslizante con los límites marcados y que el usuario seleccione.

Solución para fechas: la mejor solución a un desplegable en el caso de las fechas es un calendario (como ya escribimos sobre ellos, os enlazo la primera parte y la segunda parte).

Con todas estas alternativas tenéis cubiertos la mayoría de casos en los que se suele usar incorrectamente desplegables en dispositivos móviles, en el artículo de Zoltan Kollin tenéis ejemplos gráficos de cada caso.

Cuyo uso inadecuado habitualmente termina en errores e insatisfacción en el usuario por no poder elegir fácilmente lo que desea de ellos, lo cual desemboca muchas veces en no poder terminar las tareas que ha venido a realizar en nuestro producto digital.

Desde el Estudio os animamos a tener muy en cuenta estas alternativas y a ponerlas en práctica en vuestro día a día.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Analítica y test con usuarios cuantitativo

Hoy os traigo un post ligero para refrescar conocimientos sobre métodos de investigación con usuarios. En Norman Nielsen han sacado hace un poco un vídeo donde intentan resumir brevemente en dos minutos las diferencias entre la analítica y los tests con usuarios cuantitativos.

Aunque ambos son métodos cuantitativos, es decir que se basan en datos medibles, se diferencian en los datos que recogen. La analítica recoge datos de los usuarios en vivo, mientras usan el producto digital. Además suele ser barata, herramientas como Google Analytics o Hotjar permiten recoger datos de una manera simple y un coste reducido.

Al contrario los tests con usuarios cuantitativos son caros, porque tienen que probarse con al menos cinco usuarios. Además implican un día de trabajo de tres personas mínimo (que pueden ser hasta tres días si son varios perfiles) para el test propiamente dicho, más el tiempo de trabajo necesario para preparar las tareas, planificar el test y realizar el piloto, además hay una captación de usuarios que también suele tener un coste y la gratificación que se les da a los usuarios por asistir al test.

Pero un test con usuarios cuantitativo, te da una imagen muy rica y viva de tus usuarios y de tu producto digital que la analítica no te da. En un test con usuarios ves a tus usuarios usar tu producto como en la vida real, por lo que puedes empatizar con ellos y darte cuenta de sus problemas y pensar en soluciones de diseño adecuadas para ellos. Además, ese ejercicio de observación y de empatizar te ayuda a darte cuenta y reflexionar sobre asuntos sobre los que probablemente no lo harías de no observar al usuario mientras realiza las tareas.

Yo siempre recomiendo siempre que el presupuesto lo permita usar una combinación de ambas herramientas, la analítica para saber qué partes tenemos que testear y hacerlo con datos fiables, y los test con usuarios cuantitativos para saber los problemas de tus usuarios y tener datos fiables sobre los porcentajes de usuarios que completan una determinada tarea, qué puntos son los más problemáticos y a partir de ahí elaborar soluciones adecuadas a los problemas encontrados durante los tests.

Para no alargar el artículo os dejo con el vídeo donde Kate Meyer explica las diferencias entre la analítica y el test con usuarios cuantitativo:

En Torresburriel Estudio estamos especializados en diseñar y realizar tests con usuarios para diferentes productos o servicios digitales, dependiendo de los objetivos del proyecto. Contacta ahora con nosotros y hablamos 🙂

Diseñando selectores de fecha (y II): checklist y ejemplos

Ayer os hice una pequeña introducción al diseño de selectores de fecha, hoy os voy a traer una checklist para diseñarlos y unos ejemplos que os puedan servir de ayuda para diseñar los vuestros.


Selector de fechas de Swiss. Imagen de Smashing Magazine

Checklist de selectores de fecha

Aquí os voy a poner el completo checklist que ha elaborado Vitaly Friedman en su artículo para diseñar selectores de fechas:

Preguntas generales

  • Decidir si estás diseñando un selector de fecha, un selector de rangos de fecha o un selector de fecha y hora.
  • ¿El cambio entre la entrada por teclado y el overlay del calendario es continuo con activación automática del siguiente paso?
  • ¿Es un selector de fecha el patrón de diseño correcto en primer lugar? ¿Sería más rápido otras opciones por defecto como un menú desplegable, el selector de fecha nativo del SO o un interfaz conversacional?
  • ¿Cómo evitamos mostrar fechas no disponibles o sin ningún resultado?
  • Considera técnicas de localización, por ejemplo seleccionar el mes con un menú desplegable en el idioma del usuario y el día y el año mediante un dispositivo de entrada.

Diseño de los campos de entrada

  • ¿Debe el usuario poder escribir la fecha o sólo seleccionar la fecha de un overlay con un calendario?
  • Si metemos la fecha mediante un dispositivo de entrada, ¿está preparada la interfaz para soportar varios tipos de separadores y de formatos? ¿Es accesible mediante teclado?
  • ¿Permitimos fechas “inteligentes”? ¿Permitimos cosas como “mañana”, “la semana que viene”, “en julio” como entrada?
  • ¿El selector de fecha debe de tener valores por defecto? Si es así, ¿cuáles deben ser esos valor por defecto?
  • ¿Debemos mantener que le muestre el formato de entrada al usuario mientras lo está tecleando?
  • ¿Mantenemos los campos rellenados después de refrescar la página y añadimos un enlace de “Borrar todo” o no?
  • ¿Debemos añadir una navegación rápida que salte entre día, mes y año en el campo de texto y en el overlay de calendario?

Diseño del overlay del calendario

  • Idealmente cualquier fecha debería de poder ser accesible en máximo tres gestos.
  • ¿Debe aparecer un overlay con el selector de fecha cuando se pulse en el campo, cuando se pulse en el icono de calendario o en ambos casos?
  • ¿Cuántas semanas, meses o días mostrarás en una vista dada?
  • ¿Cómo incorporamos las opciones de localización? Por ejemplo, la semana es de lunes a domingo o de domingo a sábado.
  • ¿Cómo indicamos la fecha actual en el overlay del calendario?
  • ¿Debemos incluir algún tipo de navegación rápida de “anterior, actual, siguiente”?
  • Imagina o investiga los datos que son importantes para tus usuarios y muéstralos, pueden ser precios, disponibilidad, fiestas. Márcalos mediante puntos de colores o diferentes colores de fondo.
  • ¿Estás seguro que el overlay del calendario desaparece cuando el usuario pulsa fuera de él? ¿Tienes un botón de cerrar también?
  • ¿Es posible tecleando “Escape” ir al campo numérico?
  • ¿Debe poder el usuario borrar la selección mediante un botón que se lo permita?

Diseño de un selector de rango de fechas

  • Idealmente, cualquier rango de fechas debería poderse seleccionar con seis gestos.
  • ¿Se visualiza inmediatamente el rango seleccionado conectando ambas fechas y mostrando un cambio de color?
  • ¿Se anuncia el rango seleccionado por un lector de pantalla como cuando se selecciona?
  • ¿Hemos considerado diseñar un selector de fechas flexibles?
  • ¿Usamos atajos de teclado para navegar más rápidamente entre días, meses y años?

Diseño de un selector de hora

  • La opción más sencilla es una barra deslizante para los días y un ordenamiento horizontal para las horas.
  • ¿Qué es más útil seleccionar primero el día o la hora? Si seleccionas primero la hora, puedes descartar los días que no la tengan disponible.
  • Considera añadir los espacios de tiempo más usados y sugiere atajos a las selecciones más comunes.

Ejemplos

Selector de día y hora para una guía de TV


Captura de la guía de TV de HD+

Vitaly pone como ejemplo de selector de día y hora el de HD+ (proveedor de canales por satélite alemán) como podemos ver el usuario puede elegir entre mostrar la linea de tiempo horizontales o verticales, el día que quiere ver la programación y en qué franja horaria (mañana, tarde, tarde-noche o noche)

Selector de fechas con varios formatos de entrada pero sin validación

Vitaly pone como ejemplo de un selector de fechas que permite varios formatos de entrada pero sin validación de estos el de planificador de viajes a Zurich ZVV, lo que no es bueno como se muestra en el vídeo de ejemplo.

Selector de fechas con varios formatos de entrada

Vitaly pone como ejemplo de buen selector de fechas con varios formatos de entrada y validación a NSB, un planificador de viajes noruego.

Os dejo con un enlace al video de uso del selector de NSB que ha hecho Vitaly.

Selector de fechas de Airbnb

Vitaly pone como otro ejemplo a Airbnb, que usa elementos para destacar en que fechas hay mas alojamientos disponibles, además de incluir atajos de teclado para que el usuario navegue más rápidamente por él.

Os dejo con un video de uso del selector de fechas de Airbnb:

En el artículo de Vitaly tenéis muchos más ejemplos que os animo a que los estudiéis y espero que os sirvan como casos de uso. Ya que los selectores de fecha son un elemento de diseño importante en una gran variedad de productos digitales relacionados con el turismo, los viajes o el ocio.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario.
Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Diseñando selectores de fechas (I)

Seleccionar una fecha es una acción esencial en cualquier producto digital, desde elegir una fecha para un viaje, elegir nuestro cumpleaños o seleccionar un rango de fechas para unas vacaciones.


Imagen de Bill Ward

Un calendario es un patrón de diseño conocido por todos y universal que puede ser un selector muy válido para la mayoría de las situaciones, pero puede haber otro tipo de situaciones donde no sea la mejor opción.

En Smashing Magazine, Vitaly Friedman ha escrito un artículo muy completo sobre selectores de fechas y que os recomiendo, ya que tiene gran cantidad de ejemplos para una diversidad de casos diferentes de uso. Os voy a hacer un resumen en dos partes pero aún así os animo a que leáis el artículo original.

Consideraciones en un selector de fecha

Antes de diseñar cualquier cosa, nos dice Friedman que debemos responder una serie de preguntas:

  • ¿Estamos diseñando un selector de fecha, un selector de rangos de fecha o un selector de fecha y hora?
  • ¿Puede el usuario ser capaz de escribir la fecha en el campo o sólo seleccionarla mediante el selector de fecha?
  • ¿Debe aparecer un overlay con el selector de fecha cuando se pulse en el campo, cuando se pulse en el icono de calendario o en ambos casos?
  • ¿Debe tener el selector de fecha valores por defecto? Si es así, ¿cuáles?
  • ¿Debemos incluir algún tipo de interacción de siguiente, actual, atrás? Si es que sí, ¿cómo lo diseñamos para los días, los meses y los años?
  • ¿Debemos mejorar la experiencia mostrando valores de precio, disponibilidad…?
  • En pantallas pequeñas, ¿el selector de rangos de fechas debe desaparecer después de elegir dos fechas o después de darle el usuario a continuar?
  • ¿La semana empieza en lunes o en domingo?
  • ¿Cómo evitamos las fechas no disponibles o que no devuelvan ningún resultado?
  • ¿Es un selector de fecha el patrón correcto para seleccionar la fecha en primer lugar?

Pueden parecer demasiadas preguntas pero si queremos hacer un buen trabajo de diseño es necesario responderlas todas, ya que dependiendo de la respuesta nos decantaremos por una solución de diseño u otra.

Entrada escrita de la fecha

Cuando una fecha deba ser introducida mediante el teclado debemos dejarle claro al usuario el formato en el que debe introducirla, porque si es un sitio internacional nos podemos encontrar con usuarios que usen una variedad de formatos (DD/MM/AA, MM/DD/AA, AA/MM/DD, escrita con letras…) dependiendo del formato que usen en su país de origen o al que estén acostumbrados. Por lo que hay que señalar correctamente el formato (o formatos) que entiende el selector para que el usuario no cometa errores de una manera clara y concisa.

Valores por defecto

Los valores por defecto cuando se trata de seleccionar una fecha con antelación, debe ser la fecha actual (si es un selector de fecha y hora lo mismo, la fecha y hora actuales). En el caso de una guía de TV en pantalla, por ejemplo se puede hacer una línea temporal para que el usuario vaya navegando por la programación comenzando por la fecha y la hora actuales.

Para no alargar demasiado el artículo, me dejo para mañana la checklist sobre selectores de fecha y comentaros los ejemplos de diversos casos de uso que hace Vitaly Friedman en su artículo.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Subnavegación para móvil

Muchos productos digitales tienen arquitecturas de la información complejas que son difíciles de mostrar correctamente en pantallas grandes donde tenemos espacio para mostrar categorías y subcategorías. En dispositivos móviles las opciones de mostrar arquitecturas complejas se reducen, evidentemente por el tamaño de la pantalla.

Desde Norman Nielsen ponen como ejemplo de sitio difícil de trasladar, Cisco.

Os dejo un par de capturas, una del mega menú para escritorio:


Captura del mega menú de Cisco

Y otra de la versión móvil del mismo menú para que podáis comparar ambas.

En un móvil de 5 pulgadas (el tamaño más usual actualmente) en un navegador móvil el submenú de navegación de Cisco ocupa dos pantallas, una hasta “Solutions” y otra de “Solutions” hasta el final. Como podéis imaginar el scroll necesario para llegar a “How To Buy” o “Training” es algo incómodo.

Aunque como podéis ver el menú tiene una jerarquía visual clara, hay espacio entre cada elemento del menú y una priorización de sus elementos. Por lo que en principio sería un buen trabajo de traslado, a pesar de las dificultades. Doy por seguro que han hecho en Cisco un card sorting y un tree test con los elementos del menú antes de llegar a esta solución.

Pautas de diseño para subnavegación móvil

Norman Nielsen en un artículo nos da una serie de pautas de diseño para subnavegación móvil, donde al igual que en el Estudio, nos dicen que nos fijemos en las metas del usuario y sigamos estas tres pautas de diseño:

  • Coste mínimo de interacción: los usuarios deben poder acceder a un elemento de la navegación con el mínimo interacción necesario, es decir cuantas menos pantallas y menor número de clics y submenús, mejor para el usuario.
  • Incluye la ruta típica: muchas veces los usuarios tendrán una ruta típica para acceder a un sitio o una clasificación determinada en un catálogo a la que estén acostumbrados, es bueno incluirla para mejorar la usabilidad y que nos usuarios no se frustren.
  • Posibilidad de descubrimiento: los usuarios deben de poder descubrir por sí mismos la subnavegación sin necesidad de ayuda externa y sin confundirla con la navegación principal.

La subnavegacion para móvil la podemos dividir según Norman Nielsen en cuatro tipos principales:

  1. Acordeones: los acordeones serían la subnavegación que se encuentra debajo de un menú hamburguesa. Los submenús funcionan bien cuando tienen un número pequeño de categorías (unas 6 como máximo es lo ideal). Ya que cuantas más subcategorías tenga un submenú más largo será y más difícil para el usuario decidirse por una de las opciones. Los submenús tienen un coste bajo de interacción, dan de rutas a todas las opciones de navegación y es difícil confundir la navegación principal y la secundaria.
  2. Menús secuenciales: un menú secuencial es aquel que solo muestra las subcategorías de la que se ha seleccionado en el menú anterior. Los menús secuenciales tienen un poco de controversia, ya que depende de la habilidad espacial del usuario. Los usuarios con una habilidad espacial baja los encuentran confusos y liosos.
  3. Menús de sección: los menús de sección son aquellos que te muestran todas las páginas de una determinada sección. Son habituales en sitios de noticias o en sitios gubernamentales. Ya que los usuarios quieren que se les muestren contenidos de una determinada temática. Puede haber subcategorías dentro de una determinada temática, ya que normalmente son sitios dedicados a una temática concreta y los usuarios pueden querer ver contenidos de una determinada categoría, ya sea de un equipo o un deporte en concreto por poner un ejemplo.
  4. Landings de categoría: cuando todo lo de demás falla, esta suele ser la opción de emergencia. Dividir el menú por categorías y hacer una landing con cada una a partir de dónde redirigiremos a los usuarios. Este caso suele ser el elegido cuando tenemos mucho contenido que mostrar y que no tiene unas rutas establecidas o estas cambian a lo largo del tiempo. Es una opción ideal para sitios que es raro que se navegue erráticamente, es decir que el usuario va a hacer una determinada cosa y la acaba, ni desea navegar por el sitio y sus subcategorías.

Para finalizar, Norman Nielsen nos da un algoritmo de cómo debemos ordenar nuestra subnavegación dependiendo del número de subcategorías nuestra navegación:

  • Menos de seis subcategorías en la categorías del menú principal: un submenú o un acordeón.
  • Entre seis y 15 subcategorías en las categorías: un menú de sección.
  • Más de 15 subcategorías del menú principal: landings de categoría.

Con estas pautas y este algoritmo espero haber sido de ayuda si estáis rediseñando vuestro producto digital para dispositivos móviles, si necesitáis ayuda ya sabéis donde encontrarme.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Botones deshabilitados ¿sí o no?

Hoy vamos a hablar de una cuestión de experiencia de usuario y usabilidad bastante habitual en nuestro día a día en todo tipo de productos digitales, encontrarnos con un botón deshabilitado que nos impide completar la tarea que estamos haciendo.

Desde el punto de vista de la usabilidad y de la accesibilidad, los botones deshabilitados tienen problemas, especialmente en los casos de personas con vista cansada, visión túnel u otro tipo de deficiencias visuales.


Imagen de Hampus Sethfors

Los botones deshabilitados son confusos para este tipo de personas porque les resulta muy difícil saber el porqué no pueden seguir a la siguiente pantalla, ya que tienen que escanear toda la pantalla para descubrir la razón por la que no les deja y si en una persona con una visión normal cuesta, en una persona con visión reducida que necesita de ayuda como las lupas o ampliadores de pantalla que vienen con muchos SOs cuesta todavía más, porque tiene que escanear todo el contenido para saber que ha ido mal.

Además en el caso de personas que usan lectores de pantalla, es todavía más difícil e inaccesible, ya que en muchos casos no se han implementado las opciones de WAI-ARIA lo que impide una correcta navegación.

¿Por qué son malos los botones deshabilitados?

Hampus Sethfors se encontró con un caso de este tipo al intentar añadir a una mujer a Facebook después de conocerse en un networking y decidió escribir un artículo sobre los botones deshabilitados.

Sethfors nos dice que si en principio puede parecer una buena idea poner un botón deshabilitado en un formulario para indicar que no se ha rellenado correctamente, en realidad no lo es. Porque crean un experiencia de usuario pobre y empeoran el uso a los usuarios con diversidad funcional, como ya os hemos dicho en la introducción.

Sethfors da unas razones por la que los botones deshabilitados son una mala idea:

  • Engañan a los usuarios: si un usuario ve un botón que pone “Comprar”, “Enviar” o cualquier otro CTA, la acción por defecto del usuario es hacer clic sobre él sin fijarse en el color. Por lo tanto los botones deshabilitados engañan a los usuarios ya que les hace creer que pueden hacer una acción que realmente, no pueden ejecutar.
  • Son difíciles de ver: los botones deshabilitados son difíciles de ver, por lo que estamos impidiendo a todos los usuarios (tengan o no dificultades de visión) que hagan lo que han venido a hacer a nuestro producto digital, por lo que se llevarán una experiencia de usuario pobre al no poder completar bien sus tareas.
  • No dan feedback al usuario: los botones deshabilitados no dan información al usuario del porqué, el usuario tiene que averiguar la razón por la que no puede darle al botón y a veces puede ser tan sencillo como revisar por completo el formulario y revisar los errores de cada campo, pero otras veces por errores de la aplicación o políticas externas, puede no ser tan fácil y generar una gran frustración en el usuario.
  • Dan al equipo de diseño razones para pasar de largo el manejo de errores: el manejo de errores es uno de los grandes quebraderos de cabeza de cualquier equipo de IT y de diseño, con los botones deshabilitados el manejo de errores pasa al usuario que tiene que averiguar a través de los mensajes de error en que se ha equivocado y enmendar el error para poder terminar la tarea. Lo cual le deja una experiencia de usuario poco satisfactoria.
  • Hacen pensar a los usuarios: la máxima de la experiencia de usuario “no me hagas pensar” se incumple con los botones deshabilitados, ya que hacen pensar a los usuarios cómo solucionar el problema que les impide acabar su tarea y puede que muchos usuarios abandonen el sitio al encontrar dificultades de uso.
  • Alejan a los usuarios con diversidad funcional: los botones deshabilitados no pueden navegarse a través de ellos a través de interfaces por teclado o con lectores de pantalla, por lo que te estás autoimpidiendo que un cierto número de usuarios, usen tu producto digital.

En definitiva, los botones deshabilitados no son una buena idea ya que impiden hacer un buen diseño de manejo de errores y le pasan esa carga al usuario, además aumentan la carga cognitiva al usuario e impiden a los usuarios con dificultades de visión o motrices usar correctamente y con los dispositivos de ayuda habituales nuestro producto digital, por lo que podremos perder usuarios con ello.

Desde el Estudio os recomendamos implementar un buen manejo de errores que los usuarios entiendan fácilmente, además de probar que funciona la interfaz si se maneja con un teclado u otro tipo de navegación alternativa para no dejar fuera a los usuarios con dificultades.

Si tu producto digital tiene gran parte de su público en mayores de 35 años, te recomendamos también probar la legibilidad y la accesibilidad de la interfaz mediante un test Think Aloud que te permita ver los errores que cometen tus usuarios mientras lo están usando y las dificultades se que encuentran e implementar mejoras que palíen los problemas observados antes del lanzamiento del producto.

En Torresburriel Estudio estamos especializados en diseñar y realizar tests con usuarios para diferentes productos o servicios digitales, dependiendo de los objetivos del proyecto. Contacta ahora con nosotros y hablamos 🙂

Service Design, diseño de servicios

Hoy voy a hablaros de diseño de servicios o Service Design, una disciplina hacia la que debiera tender la experiencia de usuario. A partir de un artículo de Norman Nielsen sobre el tema voy a explicar brevemente en qué consiste esta disciplina y sus beneficios.

La diferencia tradicional entre bienes (tangibles) y servicios (intangibles) está desapareciendo por momentos, tendiendo a ser todo una borrosa mezcla entre ambos, más aún en el ámbito digital donde cada vez más empresas puramente de servicios digitales se introducen a vender y diseñar bienes, como hacen Amazon, Google o Snapchat.


Imagen de Norman Nielsen

Por otro lado, algunas empresas de bienes como pueden ser empresas automotrices compran empresas de servicios para añadirlos a sus coches, como cuando compraron parte de la compañía de mapas de Nokia entre varias de ellas.

Estas situaciones de convergencia ocurren cada vez más y cada vez más la experiencia de usuario tenderá hacia el diseño de servicios. Los usuarios tienden  a valorar cada vez más el servicio completo, que va desde el producto, el servicio y la atención al cliente. En ocasiones, los usuarios también tienen en cuenta otras acciones de la empresa que se engloban en la ética y la responsabilidad social corporativa (RSC).

El término Service Design fue acuñado en 1982 por Lynn Shostack (aquí tenéis un artículo suyo de 1984 en la Harvard Business Review como fuente histórica si lo queréis leer). Con este concepto ella intentaba expresar que muchas veces no se puede confiar los servicios en el talento individual y gestionar por partes, en lugar del todo como compañía.

La mayoría de las organizaciones se centran en los resultados de salida, ya sean los beneficios o la calidad de los productos, mientras que descuidan los procesos internos que dan lugar a esos resultados finales.

Norman Nielsen incluye esta definición de Service Design: el Service Design es la actividad de planear y organizar los recursos de una empresa (la gente, la maquinaria y los procesos) para mejorar directamente la experiencia de los empleados e indirectamente la de los clientes.

Los componentes del diseño de servicios son tres:

  • La gente: las personas que trabajan o acceden al servicio, que pueden ser tanto los empleados como los usuarios.
  • La maquinaria: sería todo lo que se usa para llevar a cabo el servicio, pueden ser objetos físicos o digitales.
  • Los procesos: sería la metodología a seguir para realizar un flujo de trabajo, relacionarse con nuevo personal o nuevos clientes, o los rituales a seguir por los empleados o los usuarios para interactuar con el servicio.

Dentro de las relaciones entre estos tres elementos se produce una relación similar a la que ocurre en una representación artística. Hay una parte visible (procesos externos) y partes que no lo son (procesos internos), al igual que existe la representación y el backstage.

Los procesos externos los componen los diferentes canales de la actividad, los productos, los puntos de contacto y las interfaces. Los procesos internos a su vez están compuestos por políticas, tecnología, infraestructuras y sistemas.

La importancia del Service Design radica en que se tiene en cuenta tanto la experiencia del empleado como la del usuario, lo cual a la larga genera beneficios en el usuario, ya que si los empleados pueden realizar correctamente su trabajo mejorará el servicio que den a sus clientes a la larga.

Los beneficios del Service Design son varios desde el punto de la organización:

  • Hace emerger conflictos internos latentes: muchas veces reorganizar una empresa para que funcione mejor saca los conflictos internos entre las diferentes visiones que hay dentro de la empresa, balancearlas y hacer que colaboren y se comuniquen mejor es parte del Service Design.
  • Fomentar conversaciones en profundidad: cuando se quieren modificar políticas y procedimientos que en muchos casos llevan años en práctica suelen surgir conflictos cuando se tratan los puntos débiles. El Service Design permite mejorar la colaboración y elaborar soluciones funcionales a todo el proceso.
  • Reducir las redundancias: cuando se observa todo el proceso de un servicio en su conjunto se puede actuar mejor para eliminar las redundancias. Eliminar las redundancias mejora la eficiencia de los empleados y reduce costes.
  • Conformar relaciones: el diseño de servicios ayuda a alinear los procesos internos con los procesos externos, lo que ayuda a mejorar la comunicación entre el personal y a que todos reciban la misma información en su relación con el usuario.

El Service Design trata de evidenciar los problemas existentes en los procesos internos. Cuando esos problemas pasan a la parte externa en forma de peor servicio, las quejas de los usuarios y canales inconsistentes. Alinear todos los procesos mejora la experiencia del empleado, lo cual al final mejora la experiencia del usuario.

El Service Design mejora el servicio en todo lo que es posible, ya que revisa el servicio en su conjunto. Este tipo de visión es muy adecuado para administraciones públicas o organizaciones muy grandes donde se tienen que revisar los procesos cada cierto tiempo para mejorarlos.

En Torresburriel Estudio te ayudamos en el proceso de diseño de servicios digitales mediante tests con usuarios, planteando propuestas de solución en base a los resultados del test. Contacta con nosotros y cuéntanos tu proyecto.

Cómo crear una organización global, escalable y amigable con el usuario

Dave Gray, de XPLANE, ha lanzado una iniciativa desde un post en Linkedin a raíz del Enterprise UX 2017 donde aboga por crear un movimiento para conseguir la creación de organizaciones globales, escalables y que sean amigables con el usuario.

Dave Gray ha publicado una infografía que ha compartido y que me ha parecido muy interesante, por lo que me he decidido a compartirla por aquí y a hacer un breve resumen de cómo conseguir ser  una organización con una metodología de diseño centrado en el usuario y que a la vez sea una organización a escala global y escalable.


Infografía de XPLANE

Dave aborda una pregunta habitual en el ámbito empresarial que es la siguiente: ¿por qué necesito experiencia de usuario en mi empresa? Y lo hace con estas dos respuestas claras:

  • Te ayuda a tomar mejores decisiones y reduce el riesgo y la incertidumbre. La UX empresarial te ayuda a asegurarte de que estás haciendo lo correcto.
  • La UX ayuda a nuestro Net Promoter Score (NPS), aumenta la lealtad a la marca y reduce la tasa de abandono, el coste de cambio de marca y el soporte al cliente.

Según Dave, una empresa que quiera convertirse en una empresa global, escalable y amigable con los usuarios, tiene que dar estos cuatro pasos:

  1. Elaborar una experiencia empresarial: para ello lo mejor es clarificar la visión y la estrategia a seguir, es decir, fijar unos objetivos y unos valores para seguir en la empresa. Después observar el territorio, es decir investigar lo que hace tanto la competencia como los nuevos actores en nuestro negocio como pueden ser pequeñas empresas o startups y elegir el acercamiento que vamos a tener a la nueva estrategia.
  2. Liderar los equipos que lo ejecuten: para ejecutar esta estrategia necesitamos un equipo que lo ejecute y lo lleve a cabo, que puede ser que ya exista o que lo tengamos que formar con nuevo personal. Este equipo tiene que encajar en una estructura global, pero especialmente ayudando a la gente de desarrollo e ingeniería.
  3. Superar los silos: A partir de ahí, normalmente por las estructuras y relaciones existentes, se suele chocar con la nueva metodología, por lo que tocará mejorar la comunicación y la colaboración de los miembros del equipo con otras partes de la organización para superar las dificultades.También tocará comparar las diferentes perspectivas en la empresa y encontrar el equilibrio entre todas ellas.
  4. Dejar un legado: la última fase es aquella en la que tu intervención tiene que dejar un poso en la organización. Aquí es donde la empresa tiene que mejorar relaciones de la organización con sus clientes, perseverar en la dirección tomada y construir una metodología, además de medir y evaluar el valor y el impacto.

Dave Gray ha resumido en una infografía la metodología a seguir para conseguir una compañía global, escalable y amigable con el usuario donde se interiorice la experiencia de usuario y una metodología de diseño centrado en el usuario.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

El principio de Pareto aplicado a la investigación de usuarios

El principio de Pareto o regla de 80/20, es un principio sobre la distribución que afirma que un amplio porcentaje de los casos de un determinado fenómeno será causado por un pequeño porcentaje de causas.

Pareto lo aplicó a la distribución de la tierra en Italia, donde el 80% de las tierras eran un 20% de los propietarios, mientras que el 80% restante de propietarios tenía un 20%.

Joseph Juran, se dió cuenta de que el principio de Pareto se podía aplicar a otro tipo de distribuciones. Juran la aplicó principalmente al control de calidad, donde ocurría que unos pocos defectos eran los causantes de la mayoría de los fallos.


Imagen de The Marmot

En el caso de la experiencia de usuario suele ocurrir algo similar: unos pocos defectos de diseño suelen ser los causantes de la mayoría de los problemas de uso. De hecho, una guía de problemas de arquitectura de la información de 2009 tiene casi la misma validez para diseñar un producto digital 8 años después que cuando se escribió.

En UX Magazine han escrito un artículo que relaciona la investigación de usuarios y el principio de Pareto. Jennifer Aldrich vincula los problemas de usabilidad y experiencia de usuario con el principio de Pareto, y puedo decir que su experiencia y la mía convergen en este caso.

Aldrich asegura que un pequeño porcentaje de la interfaz causa la mayoría de los problemas de experiencia de usuario de productos digitales. Mi experiencia me dice que la mayoría de problemas que se encuentra un usuario están en la navegación (que normalmente suele ocupar un pequeño espacio en la pantalla).

Si una navegación tiene una arquitectura de la información correcta y está rotulada y categorizada de manera que los usuarios del sitio la entiendan, eliminaremos muchos de los errores más habituales de usabilidad y de experiencia de usuario. A partir de ahí se podrá trabajar en otras áreas de importancia como la búsqueda o el proceso de compra, entre otros.

Jennifer Aldrich recomienda un método de investigación de usuarios basado en el principio de Pareto en cinco pasos con el que averiguar dónde tendría más impacto para tus usuarios los cambios en la interfaz.

Los enumero a continuación:

  1. Recluta usuarios del objeto de tu investigación: para empezar una investigación tienes que tener unos usuarios dispuestos a colaborar. Para ello, nada mejor que enviar un correo a aquellos que te hayan dado un consentimiento expreso. A partir de ahí, envía un correo para que se apunten a un grupo de investigación donde se les enviarán encuestas, pruebas y otro tipo de tests para mejorar.
  2. Crea una encuesta: para ello puedes usar Google Forms o Surveymonkey. Aldrich recomienda usar dos preguntas directas: si sólo pudieras cambiar un aspecto del producto, ¿qué cambiarías? Y, la otra ¿cómo lo harías y por qué?
  3. Envía tu encuesta: lo mejor para lanzar una encuesta es hacerlo a través de una lista de correo, ya sea a la antigua o con una herramienta tipo Mailchimp que te permita tener unas estadísticas precisas con tasas de apertura.
  4. Analiza los datos: esta es la fase clave, porque se trata de analizar todos los datos de esas dos preguntas y sacar una lista de aspectos del producto que tus usuarios cambiarían y sacar los porcentajes. Después, tocará evaluar las razones que te dan para hacerlo y priorizar. Además, te tocará agrupar los cambios que te piden, porque normalmente se podrán agrupar en un solo elemento: la navegación, el proceso de pago… A partir del número de respuestas que tienes que calcular los cambios que suponen el 80% de las respuestas sumadas. Es decir, si te responden 1000, serían los cambios que ordenados de mayor a menor número de respuestas, sumen 800.
  5. Crea un informe: a partir del análisis de los datos puedes crear un informe con todos estos datos con las partes del producto digital que conforman ese 80% y detallarlas con el feedback de los usuarios de los cambios que quieren. Esto sirve de cara al cliente para explicarle los porqués de esos cambios y generar empatía con él.

Hacer una investigación de usuarios basándose en este principio nos permite priorizar las mejoras que vayamos a abordar en un producto digital partiendo de las que tienen un mayor grado de incidencia en la experiencia que tiene el usuario con el producto, lo que ayuda a mejorar con menos esfuerzo más rápidamente un producto digital y que el usuario tenga una experiencia de usuario con él lo mejor posible.

En Torresburriel Estudio trabajamos proyectos de diseño de servicios y productos digitales en los que la investigación de usuarios es un elemento fundamental del proceso. Si es tu caso, contacta con nosotros hoy mismo y hablamos.

Pautas para el diseño de barras de búsqueda

La gente de Justinmind ha escrito un artículo sobre diseño de cajas de búsqueda. La búsqueda es una de las funciones más importantes en un producto digital, ya que genera en el usuario buenas o malas experiencias dependiendo de su calidad.

Por ello tanto tener una buena barra de búsqueda bien diseñada, como unos resultados de búsqueda de calidad son esenciales para que el usuario obtenga una experiencia de usuario lo mejor posible con nuestro producto digital.


Imagen de Nick Babich

A continuación os vamos a dar las pautas que explican Justinmind, junto con nuestra propia experiencia en el Estudio.

Haz fácil la busqueda en tu producto digital

En un producto digital la búsqueda es esencial, en un e-commerce puedes perder ventas si tus usuarios no pueden encontrar correctamente los productos y creen que no tienes algo que está en tu catálogo. Por lo que debes cuidar la calidad de los resultados de búsqueda y hacer pruebas de búsqueda para encontrar los problemas.

La posición ideal de la caja de busqueda es en la zona del menú de navegación principal, ya que el usuario lo ve en el primer vistazo y actúa de manera positiva al poder buscar rápidamente.

Capta la atención de los usuarios con una pista visual, el icono de búsqueda

Tus usuarios cuando buscan la barra de búsqueda suelen buscar una pista visual que les haga darse cuenta que está ahí, un icono. El icono más universal para la búsqueda es una lupa. Casi todos los usuarios si ven una lupa, la identifican como una búsqueda.

Prueba el icono, porque hay muchos iconos de búsqueda que no son fácilmente identificables como una lupa, aunque esa sea la intención del creador del icono.

Cuida con el uso de etiquetas en el campo de búsqueda

Las etiquetas dentro de los campos de búsqueda normalmente están desaconsejadas, ya que dificultan al usuario el manejo del producto digital y crean dificultades en su uso.

Desde el Estudio no aconsejamos poner etiquetas en el interior de los campos de búsqueda, ya que impiden el uso correcto de la caja de búsqueda, ya que mucho usuarios no saben como eliminarlo o les cuesta encontrarlo.

Incluye navegación filtrada si tienes demasiado contenido

Si tu producto digital tiene una gran cantidad de contenido, como puede ser un e-commerce con un gran catálogo de productos o una sitio de contenidos con muchos años, tienes que incluir una búsqueda con filtros que ayude a los usuarios a encontrar fácilmente lo que buscan.

Los filtros por supuesto se tienen que poner de acuerdo al contenido, no es lo mismo un e-commerce de ropa, que de electrónica, o una web de contenidos. Además, después hay que probarlos, tanto internamente como con usuarios del producto, para ver que funcionan correctamente.

La búsqueda predictiva ahorra tiempo

Introducir una búsqueda predictiva que ayude a los usuarios a hacer búsquedas más rápidas y les ahorre tiempo en la búsqueda.

La búsqueda predictiva tiene que tener el objetivo de que los usuarios ahorren tiempo y hagan búsquedas de una manera que mejore su experiencia con nuestro producto digital, para ello deberemos hacer un test con usuarios para probar que eso es así.

Prueba la barra de búsqueda para asegurarte que funciona

Ya puedes tener una barra de búsqueda magníficamente diseñada y con un icono que se identifique perfectamente, con una búsqueda predictiva que funcione. Que si no lo pruebas con un test con usuarios y observas que todo funciona correctamente y que echan en falta los usuarios.

Desde el Estudio siempre que hacemos un test con usuarios recomendamos que una de las tareas para los usuarios sea probar la búsqueda para conseguir que los usuarios tengan una experiencia grata y agradable de tu producto digital.

En Torresburriel Estudio estamos especializados en diseñar y realizar tests con usuarios para diferentes productos o servicios digitales, dependiendo de los objetivos del proyecto. Contacta ahora con nosotros y hablamos 🙂