Presentaciones eficaces para UX

Una de las cuestiones que planea sobre el ámbito del diseño, y como tal sobre el ámbito de la experiencia de usuario, es cómo explicamos y cómo trasladamos a nuestros interlocutores el trabajo de propuestas que hacemos y planteamos. O lo que es lo mismo, cómo explicamos al cliente las propuestas que realizamos.

En el estudio hemos tenido tradicionalmente una ligera barrera de comunicación con algunos clientes, que hacía que resultase a veces complicado explicar lo que hacemos. Y aunque este hecho tenga un punto de contradicción, ya que nuestros clientes nos llaman a nosotros para que trabajemos en sus productos digitales, no es algo extraño que se haya planteado en alguna ocasión ese momento en el que “el cliente no entiende lo que le estamos contando”.

Presentaciones eficaces en UX
Una pantalla de los modelos de presentaciones de proyecto que hacemos en el estudio.

La razón de que esta situación se llegue a plantear la tenemos identificada bajo el nombre del síndrome de las cajas y las flechas. ¿Qué quiere decir esto? Pues sencillamente que cuando llevamos un set de wireframes a un cliente hay ocasiones en las que nos resulta especialmente complicado explicar nuestro trabajo debido a que la atención de nuestros interlocutores se desvía y se aleja del foco. Al principio no sabíamos muy bien a qué podía deberse este hecho que os estoy relatando, pero con el tiempo lo hemos identificado, lo hemos aislado y hemos tratado de ponerle remedio.

La cuestión es que por algún motivo notábamos que nuestros interlocutores perdían la atención, y nos hacían preguntas del tipo “¿pero así es cómo se va a ver mi web al final?”, o “¿este es ya el diseño final?” o, peor aún, “¿pero este diseño no es un poco plano y sin colores?”. Supongo que en alguna ocasión se os habrá planteado este escenario con algún cliente. O no, no lo sé. Lo que sí sé es que cuando nos ha sucedido nos hemos llegado a plantear si el cliente que nos había contratado estaba realmente preparado para comprar un producto de conceptualización de producto digital como el que ofrecemos. Y la sensación era de franca y robusta frustración.

Esta sensación de frustración se producía porque, básicamente, lo más fácil en esas ocasiones es depositar la responsabilidad de la culpa en el contrario, es decir en el cliente. Y es ahí precisamente donde residía nuestro error a la hora de identificar y aislar la situación. Y con ese escenario era muy difícil poner remedio a semejante situación.

Eso sucedió hasta que nos dimos cuenta de un detalle, que podría ser tildado de menor, pero que resultó (hasta la fecha en la que escribo esto) definitivo. No estábamos aportando al cliente el contexto necesario para, de manera independiente a sus conocimientos de metodología de diseño de producto, tuviera una visión global de la misma. Y ahí es donde entra la solución de las presentaciones como elemento de eficacia en la comunicación de la experiencia de usuario.

¿Qué hicimos? Hacer presentaciones. Sí, presentaciones en Keynote, o Power point, o Presentaciones de Google. Así de sencillo, o así de complicado. Lo que hicimos fue empezar a considerar la comunicación del trabajo como un entregable más, que debíamos presentar con la liturgia de una presentación, de un show, de algo que se parece más al entertainment que a la diagnosis. Dicho y hecho.

En el marco de una presentación eficaz en el ámbito de la UX lo que hemos puesto en práctica es lo siguiente:

  • Describir, a modo de recordatorio, cuáles son los objetivos del proyecto en el que estamos interviniendo
  • Explicar la definición de los términos que vamos a utilizar en la presentación, en un lenguaje claro, sencillo y pedagógico
  • Describir cuál era la situación inicial del producto, y las debilidades detectadas en la misma
  • Describir y explicar las soluciones aportadas en nuestra conceptualización, tanto desde una perspectiva global, como entrando a mostrar los detalles de las mismas
  • Describir cómo los objetivos del proyecto están presentes en las soluciones de diseño que aportamos, en forma de ventajas tanto para la propiedad del proyecto como para los perfiles de usuario identificados

Son unos puntos que ahora nos parecen sencillos, que incluso alguien podría tildar como “de sentido común”, pero que no son otra cosa desde nuestro punto de vista que la aplicación de la metodología hasta su máxima extensión. A través de estos pasos hemos logrado mejorar la eficacia de nuestras presentaciones de diseño UX.

En Torresburriel Estudio trabajamos los procesos de diseño de producto digital en aras de lograr los objetivos definidos junto con nuestros clientes. Si quieres que exploremos la posibilidad de optimizar tu producto digital contacta ahora mismo con nosotros y nos pondremos en contacto contigo.

UX y neuromarketing, un test con usuarios conjunto

En Torresburriel Estudio hemos realizado muchos tests con usuarios para diferentes productos y servicios, en sectores muy variados y con perfiles tanto generalistas como específicos para un determinado grupo de clientes. Dentro de los diferentes proyectos de testing con usuarios que hacemos en el estudio, hoy queremos contaros una experiencia diferente en este ámbito.

Un cliente, que no podemos desvelar, nos pidió completar dos tests con usuarios para una nueva aplicación móvil. El primero, para evaluar la arquitectura de la información de la aplicación y recoger las reacciones emocionales de los usuarios. El segundo, más adelante, para evaluar la usabilidad y experiencia de uso del prototipo inicial de la aplicación.

Test con usuarios con neuromarketing
Foto de una de las sesiones del test con usuarios, conjunto de Bitbrain y Torresburriel Estudio. Foto de María López.

Dentro de este trabajo de testing hemos colaborado con Bitbrain, empresa dedicada al ámbito del neuromarketing. Una disciplina que permite extraer información emocional y cognitiva de una muestra de personas ante distinto material de interés para las marcas. Para ello, Bitbrain utiliza tecnologías de imagen cerebral (por ejemplo, EEG), biosensores (como su anillo, que mide las pulsaciones y la sudoración del usuario) y tecnologías de seguimiento ocular (eye tracking).

Cada test individual con usuario se realizó en un intervalo aproximado de entre una hora y hora y cuarto. Por nuestro lado, en la primera batería hicimos un Tree Test para evaluar la arquitectura de información y un Chalkmark Test, para recoger las primeras impresiones y comprobar si la interfaz se entiende de un primer vistazo. Todo esto combinado con la tecnología de neuromarketing para extraer información a partir de esas imágenes del producto y de pruebas de estrés social.

En la segunda batería de tests, el trabajo de neuromarketing se centraba en evaluar las reacciones emocionales del usuario ante imágenes de diferentes aplicaciones del sector del cliente. Nuestro trabajo consistió en realizar un test de usabilidad (Think Aloud Test) para definir una serie de tareas que los usuarios debían completar con ese primer prototipo funcional y recoger evidencias sobre cómo completaban las tareas definidas.

Las tareas estaban escritas en forma de escenarios generales (con tareas exploratorias) y específicos, con tareas más concretas. Las tareas exploratorias eran de respuesta abierta, y tenían como propósito aprender cómo la gente descubría/exploraba la información. Por otro lado, las tareas específicas estaban mucho más enfocadas a completar acciones de uso habitual, aportando información cualitativa pero también cuantitativa.

En ambos tests, además del estudio de neuromarketing, nosotros recogimos también notas sobre actitudes no verbales de los usuarios, porque la mayoría de ellos no suelen criticar la interfaz de viva voz pero sí reflejan con muecas o gestos sus reacciones ante el producto.

En definitiva, si lo pensamos bien, tanto la experiencia de usuario como el neuromarketing son disciplinas complementarias, y no excluyentes. Mediante el estudio de las reacciones neurológicas de los consumidores ante un producto, podemos mejorar la experiencia de uso para crear un mejor producto. Por tanto, la combinación de ambas tiene la capacidad de extraer indicadores de valor sobre los que tomar decisiones de negocio.

En Torresburriel Estudio tenemos experiencia en test con usuarios. Si tienes un producto digital que quieras (re)diseñar ya sea una web, una aplicación móvil, un proceso de compra de un e-commerce o cualquier otro servicio contacta con nosotros y te ayudaremos a mejorar la experiencia de usuario de tu producto.

Micro-interacciones, la diferencia está en los detalles

Como hablamos hace algunas semanas, hoy queremos dedicar un post a las micro-interacciones, una tendencia que se impone en el diseño de UX.

Los detalles no son solo detalles, son lo que define el producto”. Esta brillante frase de Charles Eames resume la esencia del diseño y cómo debe hacerse el trabajo a conciencia, de la necesidad de incorporar la experimentación en nuestro trabajo, y asumimos las limitaciones y el rigor que exige el trabajo creativo.

Diseño de un formulario de Atlassian
Micro-interacción de un formulario de Atlassian, empresa que usa las micro-interacciones para mejorar las aplicaciones empresariales y de desarrollo de software.

Definamos en primer lugar qué es una micro-interacción. Si los detalles hacen el producto como decía Eames, podríamos definirla como una respuesta al usuario por parte de una interfaz, generando una respuesta inesperada y poco intrusiva que sorprenda o agrade al usuario.

Podemos ver estas micro-interacciones son las transiciones entre interacciones, comprobaciones en formularios, pantallas de estados vacíos, botones de interfaz animados, avisos o páginas de error 404. Algunos ejemplos de microinteracciones podrían ser los corazones del twitter al marcar un tuit como “Me gusta”, la función autocompletar de un campo de texto o las pistas que ofrecemos en un formulario para completar una tarea. Todas estas microinteracciones simplifican el trabajo del usuario con el interfaz y mejoran la experiencia de usuario sin generar intrusión.

Algunas características que comparten estas micro-interacciones son:

  • Son útiles: si una micro-interacción no resulta útil, es mejor que no esté.
  • Sorprenden o agradan al usuario: una micro-interacción debe conseguir mejorar la experiencia de uso y animar al usuario a seguir usando el producto digital. Por tanto, es conveniente que incorpore una sensación de descubrimiento, algo que sorprenda o agrade.
  • Mejoran la interacción: pueden servir para mejorar el uso de la interfaz, ofreciendo pistas sobre cómo completar una acción o solucionando dudas que puedan surgir.
  • Son fácilmente entendibles: como ya dijimos en un post anterior, “los interfaces son como las bromas: si hay que explicarlos es que no son buenos”. Lo mismo se aplica a las microinteracciones. Deben ser entendibles por sí mismas y no confundir al usuario.

Desde un punto de vista formal, las micro-interacciones funcionan en un mecanismo que se compone de cuatro fases, según lo describe Dan Saffer, creador del concepto y autor de un libro sobre el tema:

  1. Disparador: El disparador es lo que desencadena la micro-interacción.
  2. Reglas: determinan el “juego” de la micro-interacción y se entienden por el feedback que devuelve. Suelen ser no explícitas, el usuario las entiende sin necesidad de explicarlas. La interfaz se convierte en algo lúdico y exploratorio.
  3. Feedback: es la respuesta que devuelve la micro-interacción y que explicita esas reglas.
  4. Bucle y modos: los modos son acciones infrecuentes (no siempre aparecen) pero críticas, como elegir la ciudad en una app del tiempo. El bucle es el ciclo que dura la interacción y, si se repite, cómo cambia a lo largo del tiempo.

Algunos principios para diseñar micro-interacciones

Como decíamos antes, cuando diseñamos estas micro-interacciones, estamos trabajando los detalles de una aplicación por lo que tenemos que tener en cuenta algunos principios:

  • No diseñes de cero: siempre tendrás datos del usuario, aplicación o SO. Utiliza esos elementos para diseñar micro-interacciones con las cuales el usuario se sienta feliz y cómodo.
  • Anticipa los datos: siempre que sea posible, incluye información que resulte útil sin necesidad de interacción con el interfaz. Por ejemplo, el número de correos por leer aún sin abrir la aplicación.
  • Prevente de los errores humanos: los humanos cometen errores siempre, intenta que nada rompa el ciclo de la micro-interacción.
  • Usa lo existente: no añadas botones o elementos superfluas, intenta usar los elementos que los que dispones en la interfaz, o las posibilidades que te ofrecen elementos como las ayudas contextuales o los tooltips.
  • Habla como tu usuario: si tu usuario es técnico usa lenguaje técnico pero, en caso contrario, utiliza un lenguaje lo más simple y concreto posible. Adáptate al entorno en el que se desarrolle la micro-interacción.
  • Bucles largos: debes pensar no solo lo que ocurre en un ciclo corto, sino en un ciclo largo cuando la micro-interacción es ejecutada miles de veces, y si es posible irlas cambiando o mejorando para no dejar de sorprender o agradar al usuario con ellas.

En las micro-interacciones son importantes tanto la calidad de los detalles, como el conocimiento del entorno donde se inscriben, ya que determinarán que tus usuarios las comprendan y les gusten.

Si quieres ver ejemplos de micro-interacciones en diferentes entornos que te sirvan de inspiración para las tuyas, un buen sitio es Little Big Details (Pequeños Grandes Detalles) que recopilan numerosos ejemplos que pueden servirte de ejemplo de las mejores compañías y sitios web. Por supuesto, también hay que conocer los principios de animación básicos.

Detalles que pueden parecer sin importancia pueden suponer la diferencia entre un buen producto digital y el mejor producto digital posible. Una diferencia notable entre Apple y Microsoft, por ejemplo, es el gusto por el detalle y el cuidado de las interacciones hasta el más mínimo detalle. Para ello, hay que conocer los límites tecnológicos que nos restringen, el primer iPhone o el primer Macintosh distaban de ser perfectos pero causaban impresión en el usuario al usarlos y los diferenciaba del resto de productos.

Del mismo modo que Eames, Saffer también considera que la micro-interacción refleja una filosofía de trabajo bien hecho, de atención al detalle y de observación del usuario.

Bola extra: Resumen de Dan Saffer sobre microinteracciones, con videos y charlas sobre el tema.

En Torresburriel Estudio diseñamos interfaces de usuario para todo tipo de productos digitales: sitios web, aplicaciones… Si necesitas acompañamiento o consultoría para diseñar o mejorar tu producto, contáctanos y analizamos tu proyecto.

Investigación de usuarios en empresas industriales

Cuando abordamos un proyecto de mejora en la experiencia de usuario de un proyecto digital es posible que la imagen que tengamos en la cabeza tenga mucho que ver, o esté relacionada con un ámbito muy cercano a lo cool o a lo sofisticado. No es de extrañar, pues cuando vemos en las publicaciones digitales las últimas noticias de las grande empresas de internet todo son escenarios lujosos, presentaciones espectaculares, drones, coches que funcionan solos y demás exhibiciones cargadas de espectacularidad.

Panel de posts-it
Panel de conclusiones tras un workshop

La realidad, que siempre es fuente de inspiración para la fabulación, en el caso que nos ocupa hoy suele ser ligeramente diferente. Ni mejor ni peor. Simplemente diferente. Y lo es por una razón muy simple: el ámbito industrial tiene e priori menor glamour que la última presentación del Google I/O, pero el sector industrial mueve en España (datos de 2014) 571.921 millones de euros.

¿Y qué hay del sector tecnológico, que es en el que nos solemos mover? Los datos de la misma fuente (PDF) hablan de un movimiento de 80.229 millones de euros (2013). O lo que es lo mismo, el sector industrial mueve 7 veces más negocio que el sector tecnológico.

Mi percepción del asunto es que el sector industrial es un sector en el que puede que el glamour no sea la nota dominante, o la característica más conocida. Pero si nos atenemos a cifras de negocio, sería loco no prestarle atención.

En esa línea, ¿es factible implementar una metodología de investigación en el ámbito industrial cuando de lo que se trata es de mejorar la experiencia de un producto digital que se enmarca en el ámbito industrial? La respuesta es “sí”. Y diría que es un “sí” dentro de un H1, en negrita y muy grande. Por si quedaban dudas.

En el estudio estamos trabajando actualmente en un proyecto en el que precisamente el ámbito es el industrial, y además es un entorno B2B con lo que la interacción que en su caso pudiera darse con usuarios finales desaparece, porque no se dará, ni es objetivo de la intervención que estamos abordando.

El planteamiento inicial del proyecto tiene su base, precisamente, en una etapa de research, cuyo objetivo es el de conocer de primera mano todos los elementos que influyen o pueden influir en las pautas de comportamiento de los potenciales usuarios del producto digital, de forma que podamos hacer descubrimientos y contrastar hipótesis iniciales.

En ese sentido es curioso como, a diferencia de otros ámbitos de negocio en los que hemos practicado la investigación como herramienta de conocimiento y obtención de información de valor, el ámbito industrial en el que nos estamos moviendo ahora mismo tiene unas connotaciones en lo referido al trabajo de campo que hacen especialmente interesante un comentario.

Ese comentario tiene que ver con el contexto en el que se desarrolla la actividad de las personas investigadas. Se trata de un trabajo de campo en el que tanto el acercamiento como la observación del contexto son fundamentales para llevar a buen puerto el proceso de investigación. Desde los mensajes a través de los que entablamos el primer contacto con los sujetos investigados hasta el contacto visual con los mismos, deben ser objeto de un cuidadoso diseño si queremos tener a los citado sujetos a nuestra disposición en aras de la obtención de la información de valor.

Las claves que hemos aprendido en este proyecto en lo que tiene que ver con el proceso de investigación las podemos resumir de la siguiente forma:

  • El diseño de la agenda de campo es esencial: cuándo, dónde, con quién y para qué.
  • Los mensajes que se trasladan en lo que tiene que ver con el “para qué” son fundamentales. Si los sujetos investigados creen que van a perder el tiempo, o les vamos a interrogar sobre su negocio, estamos perdidos antes de comenzar.
  • El calendario de campo debe ser lo suficientemente amplio como para asimilar la multiplicidad de variables que nos podemos encontrar por el camino, de cara a no relegar la consolidación de la información una vez termine el campo por completo.
  • El uso de herramientas de gestión semántica de la información es un aliado absolutamente esencial en 3 planos:
    • En el plano del registro de la información
    • En el plano de la obtención de información cuantitativa de valor
    • En el plano de la presentación de conclusiones de la investigación a nuestro interlocutor

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. Si es tu caso, contacta con nosotros hoy mismo y hablamos.

Tendencias de diseño: mega menús

Hoy os queremos hablar de un par de tendencias en cuanto a los menús de navegación de sitios webs: los mega menús. Os vamos a hablar de dos tipos: el mega menú desplegable y mega menú a pantalla completa.

Captura de pantalla 2016-05-17 a las 12.57.33
Mega menú de Mango

Mega menú desplegable

El mega menú que se despliega hacia abajo (mega-menu drop-downs) está a la orden del día. Podemos verlo en multitud de sitios web y resulta especialmente útil para aquellos sitios con árboles de contenidos inmensos, como Mango, por ejemplo.

Este tipo de menús permite mostrar una gran cantidad de elementos de forma clara y visual e, incluso, incorporar otro tipo de recursos que se quieran resaltar, como una campaña determinada.

De modo que, algunas de las ventajas de implementar mega menús, frente a otro tipo de menús, que podemos destacar son las siguientes:

  1. Permite mostrar todas las opciones que componen cada categoría del menú de navegación al mismo tiempo. En los sitios web de gran tamaño que tienen menús normales desplegables, normalmente, quedan ocultas muchas opciones del menú. Se muestran unas cuantas y tienes que hacer scroll para poder visualizar el resto de opciones, lo que hace, entonces, que no veas las primeras opciones. El problema de no ver todos los elementos al mismo tiempo es doble: no puedes compararlos y tienes que hacer uso de tu memoria para recordar todos los elementos del menú. Por ello, el mega menú es una mejor opción, ya que, al mostrar todos los elementos al mismo tiempo, el usuario puede comparar las distintas opciones y, con ello, realizar la tarea que venía a hacer de forma más sencilla y rápida.
  2. Permiten enfatizar visualmente las relaciones entre los distintos elementos y establecer múltiples niveles jerárquicos. Lo que ayuda a los usuarios a comprender mejor las distintas opciones que se muestran.
  3. Permite hacer uso de iconos e imágenes que expliquen de forma más clara y visual distintos elementos del mega menú y que llamen la atención del usuario.

Un aspecto importante sobre los mega menús, es su forma de acceso, es decir, cómo se muestra ante el usuario. En este sentido, hay dos opciones, siendo la más común la de menú hover, aquel que aparece cuando se sitúa el ratón sobre el menú, simplemente. Sin embargo, y a pesar de su popularidad, este tipo de menús muestra dos clases de problemas. Por un lado, es muy fácil que se muestre aún cuando el usuario no lo desea, ya que cada vez que el usuario pase el ratón por encima del menú se desplegará, aunque lo que quisiera hacer fuera un mero scroll. Y, por otro lado, cada vez que el usuario sitúe el ratón fuera del mega menú, aunque sea inintencionadamente, éste desaparecerá.

Por ello, nosotros apostamos por la segunda opción: un menú clicable. En este caso, para que aparezca el menú, el usuario debe hacer click sobre el mismo, tal y como su nombre indica. De esta forma, el menú sólo se mostrará, y desaparecerá, cuando el usuario realmente lo desee, haciendo clic sobre él.

Una vez descritas las principales características de los mega menús desplegables, vamos a ver varios ejemplos.

Captura del mega menú de Disney Store
Captura del mega menú de Disney Store

El mega menú de Disney Store, web de la que ya hablamos en marzo en el blog, aprovecha el ancho de página para mostrar diferentes secciones de contenidos al mismo nivel jerárquico. Para el caso concreto de la categoría “Productos”, divide el menú en dos partes, principalmente. En la parte superior, destaca seis elementos mediante el aspecto visual diferenciado de esta sección y el uso de imágenes representativas que acompañan a cada elemento. Y en el resto del menú, se muestran todos los contenidos agrupados en seis listados por su relación entre los contenidos. Además, dentro de cada listado, hay diversas subsecciones que permiten al usuario comprender mejor los tipos de contenidos que se muestran.

Captura del mega menú de Funidelia
Captura del mega menú de Funidelia

En Funidelia, cuyo rediseño realizamos en el estudio, vemos un mega menú muy diferente. En este caso, dividen el mega menú en distintas partes reflejando, claramente, la relevancia jerárquica que tiene cada una. En la primera mitad del menú, vemos seis secciones destacadas acompañadas de fotografías representativas de cada una de ellas. Y la otra mitad del menú, se divide, a su vez, en dos partes. Inicialmente, se muestran cuatro secciones también resaltadas, pero en menor nivel al carecer de imágenes que las acompañen. Y, por último, se muestra un desglose de otras categorías de contenidos en formato lista. Y, para aquellos contenidos no mostrados en el menú, por su menor nivel de relevancia y por el límite de espacio, el menú dispone de un botón destacado que permite ver todos los tipos de accesorios.

Captura del mega menú de El País
Captura del mega menú de El País

Para el final, hemos dejado el mega menú del País por sus peculiaridades. Este menú destaca por sus múltiples y variados contenidos, mostrados con diferente jerarquía y aspecto visual en función del tipo de contenido. Así, muestra sus contenidos en diferentes bloques, resaltando unos más que otros, e incorpora el uso de iconos para destacar, en mayor medida, determinados elementos.

Otro punto a destacar es que, a diferencia de los menús vistos anteriormente, se trata de un menú clicable. Para acceder al menú, es necesario hacer click sobre el icono de menú hamburguesa que aparece a la izquierda a la altura del logotipo. Y, una vez mostrado el mega menú, para cerrarlo aparece un aspa, en la misma posición donde se encontraba el icono de menú hamburguesa.

Este mega menú cuenta con otros muchos aspectos objeto de análisis. De modo que, si queréis conocer más detalles sobre el mismo, podéis consultar el post que destinamos por completo al análisis del mega menú del País.

Nueva tendencia en mega menús: pantalla completa

Una vez vistos varios ejemplos de mega menú desplegable, queremos hablaros de una nueva tendencia de mega menú que está empezando a verse y que ya estamos aplicando en varios proyectos del estudio (que aún no podemos mostrar). Se trata de los mega menús a pantalla completa, basados en la navegación de dispositivos móviles.

En los dispositivos móviles, vemos que multitud de sites y aplicaciones muestran sus menús de navegación a pantalla completa, como es el caso de Facebook.

De modo que, ¿por qué no incorporarlos también en desktop?

Un mega menú que ocupe toda la pantalla completa, es decir, que se muestre como una página independiente, nos permitirá, principalmente, poner el foco únicamente en las opciones del menú de navegación. Pero, además, también nos dará más espacio para incorporar los distintos contenidos y otros elementos que se deseen destacar.

A continuación, vamos a ver, a modo de ejemplo, el mega menú a pantalla completa visible en la web Not Complex y vamos a analizar distintos elementos y características que lo componen.

Detalle del mega menú de Not Complex sin desplegar
Mega menú sin desplegar de Not Complex

Captura del mega menú a pantalla completa de Not Complex
Mega menú a pantalla completa de Not Complex

La primera característica de este mega menú es su forma de acceso. Se trata de un menú clicable, del que ya hemos comentado que sólo se mostrará, y desaparecerá, cuando el usuario realmente lo desee.

Dado que este menú se trata de una pantalla completa, no un menú superpuesto sobre parte del contenido de la web, para que desaparezca el menú, dispone de un elemento (el aspa situada en la parte superior derecha) que permite cerrar el menú y volver a la página que se estaba visualizando antes de hacer clic sobre el menú.

Otra principal característica que se puede observar en este mega menú es que desaparece cualquier elemento del sitio web que no sea el propio menú. Esto permite al usuario centrarse en lo que está buscando, sin distraerse con otros elementos del sitio web, y ver todos los contenidos de forma amplia y clara.

En este caso, se trata de un menú muy simple, ya que no desagregan los subniveles de las distintas categorías principales, mostradas en la parte izquierda del menú. Lo que les da espacio para resaltar otro tipo de contenidos, como pueden ser los últimos posts del blog, como se ve en la imagen.

No obstante, aunque no lo veamos en este ejemplo, un mega menú a pantalla completa permite mostrar el amplio abanico de contenidos de un site de forma desagregada sin tener que renunciar al orden y claridad visual.

Próximamente os hablaremos de los mega menús a pantalla completa que estamos llevando a cabo en el estudio 😉

En Torresburriel Estudio te podemos ayudar a diseñar el menú de tu sitio web para que funcione en todo tipo de dispositivos mediante una consultoría de acompañamiento de diseño. Contáctanos, cuéntanos tu proyecto y te enviaremos una propuesta adaptada a tus necesidades.

Comparativa de webs de apuestas deportivas online

Hoy vamos a hacer una comparativa simple de usabilidad sobre webs de apuestas deportivas online. Podría ser un análisis más amplio, pero para que no salga un artículo excesivamente largo hemos escogido 5 webs internacionales con licencia legal en España para operar. Las webs escogidas han sido: Bet365, William Hill, Bwin, Interwetten y Betfair.

Captura de Betfair
Captura de la portada de Betfair

Analizamos varios apartados de usabilidad: versión móvil, formulario de registro, arquitectura de la información de la web, posibilidad de cambio del formato de cuotas (el formato de cuotas es como se muestra las ganancias y varía según la zona geográfica), uso de CTAs…

Las puntuaciones máximas serán:

  • Versión móvil: 2 puntos
  • Formulario de registro: 2 puntos
  • Arquitectura de la información: 2 puntos
  • Cambio del formato de cuotas: 1 punto
  • Uso de CTAs: 1 punto

En total 8 puntos, las de un punto son de baremación simple y las de dos puntos tienen una baremación más compleja y que explicaremos en cada punto.

Deciros que aunque pueda parecer un sector no muy al uso para hacer un análisis de usabilidad, la calidad de algunos elementos como el formulario de registro es muy notable y se puede aprender para otros sectores como un e-commerce.

Bet365

Versión móvil: 2 puntos, se ve perfectamente y sin ningún error, además hay un trabajo de priorización de los deportes que aparecen en el menú deslizante y es muy fácil hacer una apuesta.

Formulario de registro: 1,50 puntos. Bien construido, se ven con un asterisco rojo los campos obligatorios, pero el uso de menús desplegables en exceso dificulta su uso en móvil, además el desplegable nacionalidad es muy complejo, ya que se tiene que saber el gentilicio en castellano. Salen pistas para ayudar a rellenarlo según vas haciendo click en los campos.

Arquitectura de la información: 1,10 puntos. Menú de deportes ordenado alfabéticamente, en cada deporte las competiciones están desordenadas (no están ni por prioridad ni alfabéticamente). Buena IA en móvil, bastante deficiente en desktop.

Cambio del formato de cuotas: 1 punto. Cambia entre los 3 formatos más usados y es visible en la barra de menú.

Uso de CTAs: 1 punto. Tiene CTAs y son en color amarillo sobre fondo negro, por lo que destacan muy bien.

William Hill

Versión móvil: 1,50 puntos. Se ve correctamente y sin errores, hay un trabajo de priorización de los deportes por número de apuestas (los más usuales más arriba y los más inusuales abajo del todo), pero la navegación es un poco compleja y se tarda varios clicks hasta que se encuentra la pantalla de los partidos para apostar. Hacer una apuesta es fácil y sencillo.

Formulario de registro: 1,80 puntos. Todos los campos son obligatorios, salvo el del código promocional que lo indica. El desplegable de nacionalidad es por país y no por gentilicio, lo cual facilita su uso. Además te pone pistas para rellenarlo y avisos si lo haces mal en rojo que mejoran la usabilidad.

Arquitectura de la información: 1,50 puntos. Deportes priorizados por popularidad los visibles en el menú y en otros están organizados alfabéticamente salvo Fútbol americano y Hockey sobre hielo. En el cuerpo de cada deporte las competiciones están organizadas alfabéticamente y diferenciadas por categorías (en tenis se dividen en individual y dobles por ejemplo). Versión móvil bien construida, en desktop mejorable la IA.

Cambio del formato de cuotas: 1 punto. Cambia entre los 3 formatos más usados y es visible en la barra de título del nombre de la sección.

Uso de CTAs: 0,9 puntos. Tiene CTAs y son verdes sobre fondo blanco, no se le da la máxima puntuación porque el verde es uno de los colores problemáticos que se confunde con el rojo por los daltónicos y no se le quita más que una décima porque no hay otros elementos en la interfaz en color rojo, lo que reduce el riesgo de confusión.

Bwin

Versión móvil: 1, 25 puntos. El menú deslizable de deportes tiene demasiados elementos y desorganizados. El uso de flat design no destaca las opciones de apuesta, si no pruebas a hacer click sobre ellas.

Formulario de registro: 2 puntos. Formulario correctamente pensado y separado en 4 secciones lógicas separando datos personales, datos de la cuenta de usuario y datos identificativos. Se ve de un vistazo el formulario entero y tiene un CTA muy visible.

Arquitectura de la información: 1,25 puntos. Menú de deportes priorizado por popularidad y en otros organizado alfabéticamente. En el cuerpo de cada deporte, destacan primero las competiciones del país desde dónde se accede, organizadas por la fecha. El resto de competiciones, no tiene orden lógico aparente. La arquitectura de la información es mejorable tanto en móvil como en desktop.

Cambio del formato de cuotas: 0 puntos. Sólo se ven en formato decimal y no hay forma de cambiarlo visible.

Uso de CTAs: 1 punto. CTAs amarillos sobre fondo negro, o negros sobre fondo amarillo, por lo tienen un gran contraste.

Formulario de registo de Bwin
Formulario de registro de Bwin

Interwetten

Versión móvil: 1,25 puntos. Las secciones “En directo” y “Deportes” se puede apostar directamente pero en la home no se puede apostar directamente salvo en la sección “Bestseller”, lo cual es un error grave de usabilidad.

Formulario de registro: 1,90 puntos. Uso excesivo de menús desplegables que dificulta su uso en móvil, pero diferencia en partes el formulario de una manera similar a Bwin lo que ayuda a rellenarlo, así como las pistas e indicaciones que aparecen conforme se rellena.

Arquitectura de la información: 1,75 puntos. Deportes priorizados por popularidad y en otros sin orden aparente. Diversos filtros por localización y popularidad, además de por fechas, por cuotas y más. Versión móvil, bien y versión desktop, bien.

Cambio del formato de cuotas: 0 puntos. Sólo se ven en formato decimal y no hay forma de cambiarlo visible.

Uso de CTAs: 1 punto. CTAs amarillos sobre fondo gris, destacan muy bien.

Betfair

Versión móvil: 1,10 puntos. A veces simplificar demasiado una versión móvil es malo, esta es un ejemplo de ello, ya que tiene pocas opciones, sólo las más populares para apostar, lo cual podría frustrar a los usuarios más avanzados o que no apuestan en deportes populares. Además el icono tan pequeño para acceder a los cupones de apuesta, dificulta que el usuario pueda apostar con facilidad desde el móvil, ya que tienes que afinar mucho el toque para hacerlo.

Formulario de registro: 2 puntos. Uso mínimo e indispensable de menús desplegables, pide los datos justos y necesarios, da pistas al ir rellenando el formulario.

Arquitectura de la información: 1,75 puntos. Deportes clasificados alfabéticamente y dentro de cada deporte los eventos están organizados según la fecha y hora. Tiene destacados en cada sección y los deportes más populares están visibles en el menú. Versión móvil, bien y versión desktop, bien.

Cambio del formato de cuotas: 0,75 puntos. Se pueden cambiar entre decimal y fraccionario pero no en formato americano, además está casi invisible abajo del todo.

Uso de CTAs: 1 punto. CTAs amarillos sobre fondo negro o gris, o negros sobre fondo amarillo, por lo que destacan a la vista.

Formulario de registro de Betfair
Formulario de registro de Betfair

Clasificación final de webs de apuestas deportivas

  1. William Hill. 6,70 puntos sobre 8. 8,375 sobre 10.
  2. Bet365 y Betfair. 6,60 puntos sobre 8. 8,25 sobre 10.
  3. Interwetter. 5,90 puntos sobre 8. 7,375 sobre 10.
  4. Betwin. 5,50 puntos sobre 8. 6,875 sobre 10.

Vemos que hay dos categorías, las 3 primeras con calidades similares y las dos últimas que necesitan mejorar algunos aspectos. Las 5 webs tienen un aprobado amplio, de 8 puntos posibles ninguna baja del notable si se calcula sobre 10 la nota.

Lo cual quiere decir que todo son webs en las cuales la usabilidad y la experiencia de usuario es un atributo esencial, la calidad de las webs de apuestas analizadas es bastante superior a otros sitios, incluso en la versión móvil que uno podría pensar que sería peor debido a las apps propias, que todas las webs seleccionadas tienen y que hemos dejado fuera de la comparativa por no hacerla demasiado larga.

En Torresburriel Estudio hacemos estudios de usabilidad y informes de propuesta de mejoras de diseño, tanto de webs completas como de secciones de ella, si quieres mejorar tu web, contáctanos, cuéntanos tu proyecto y te mandaremos una propuesta adaptada a tus necesidades.

De diseñador de UX a Product Designer

En el corto periodo de tiempo desde que se han empezado a implantar metodologías de diseño centrado en el usuario en empresas tanto grandes como medianas, en administraciones públicas y en startups hasta que se han empezado a valorar la UX en empresas más pequeñas y a introducir el diseño de experiencia de usuario dentro del proceso de diseño de producto, ha habido una evolución del diseñador de UX hacia convertirse en un Product Designer.

Design Assignments 2010 Higher Grade Product Design * Jonny
Esquema clásico de un proyecto de un diseño de producto tradicional. Gráfico de Jordanhill School D&T Dept.

De hecho, Product Designer/Diseñador de Producto y Product Manager/Director de Producto  son cargos que se han implantado en empresas de nueva creación relacionadas con lo digital. Marilink explicó muy bien en “Qué es “producto” en un medio digital”, en qué consistía su trabajo como directora de producto en eldiario.es y os recomiendo que lo leáis si queréis entender los cambios que van a sobrevenir en las empresas en poco tiempo de cara al diseño de productos digitales, aunque en muchas ya estén inmersas de lleno en ese proceso de cambio.

Hoy os voy a explicar lo más resumidamente que pueda estos cambios, los diferentes roles que hay y cómo han evolucionado hacia el diseño de producto. Como sabéis en el estudio trabajamos en este proceso de cambio y hoy hemos empezado la primera edición del curso de Diseño de Producto en UX Learn (si os quedasteis sin plaza dejadnos vuestro correo en la página del curso y os avisaremos cuando hagamos la segunda edición).

Producto

Antes, “producto” se entendía como un producto físico: un ordenador, una lavadora, un bolígrafo, un periódico… y se diseñaban todos los aspectos tanto físicos como de embalaje y de distribución relacionados con la llegada y aceptación de un producto físico en el cliente final. Con la llegada de la web y la distribución digital de contenidos y de software, producto se convirtio en cualquier cosa que se pudiera consumir o vender por esos nuevos canales. La llegada de la nube y el paradigma del “software como servicio (SaaS en inglés)”, ha acentuado este proceso de creación de productos digitales.

Un producto digital es: un diario digital, una app móvil, un servicio bancario, un servicio en la nube, pero todos estos productos tienen que estar alineados con el resto de productos (físicos o no) de la misma empresa y ahora también alineados con una estrategia de contenidos.

Diseñador de UX

Un diseñador de experiencia de usuario es aquel que diseña la experiencia que un usuario va a tener con un producto. Al principio de la web y los interfaces de usuario, estaban los diseñadores de UI (user interface, es decir interfaz de usuario) o los diseñadores de interacción que se encargaban de diseñar los interfaces de usuario y la interacción entre el usuario y un interfaz de usuario/web. Poco a poco, este rol fue evolucionando hacia diseñador de experiencia de usuario, que incluye esos aspectos de UI e interacción pero elaborando una experiencia completa y observando las relaciones entre producto físico y producto intangible (software) y cerciorándose que la experiencia completa sea agradable, placentera y sin fricciones de ningún tipo.

Ahora cada vez más los diseñadores de UI y/o interacción evolucionan hacia diseñadores de experiencia de usuario, haciendo que en muchas empresas haya un equipo que cubra estos tres roles, o incluso se haya puesto de moda buscar “unicornios” (es decir un diseñador integral para todos los aspectos incluido el gráfico).

Diseñador de producto

Un diseñador de producto es la persona que se encarga de diseñar un producto durante todas sus fases y supervisar todos los aspectos de éste.

Cada vez más, los diseñadores de experiencia de usuario evolucionan hacia diseñadores de producto, ya que cada vez es más común que se supervisen o participen en todas las fases de diseño de un producto digital.

Es una evolución natural, ya que tanto en empresas pequeñas como en startups muchas veces una misma persona tiene que ejercer varios roles. En el caso de una startup normalmente el Product Owner, el Product Manager y el Product Designer son la misma persona.

Según Nick Parker en un post del blog de Awwwards un diseñador de productos digitales debe conocer:

  • Diseño de UX (experiencia de usuario) y de UI (interfaz de usuario): para poder relacionarse con diseñadores de UX y diseñadores de UI, tiene que conocer mínimamente las materias del resto del equipo con el que va a trabajar.
  • Diseño de prototipos: para poder hacer tests con usuarios con un mínimo de calidad, se necesita conocer la elaboración de prototipos y conocer las herramientas correctas para elaborar prototipos para cada tipo de test.
  • Animación: las animaciones cada vez se están convirtiendo en parte esencial de la interfaz de usuario y la interacción tanto en la web como en aplicaciones móviles.
  • Investigación de usuarios: para hacer buenos productos es necesario conocer a los usuarios y lo que estos demandan en cada momento, para diseñar productos adecuados a sus demandas.
  • Testing con usuarios y propuestas de diseño: un diseñador de producto debe saber los procesos para elaborar tests con usuarios, los tipos que hay y cuál es mejor según los objetivos a obtener. También debe saber elaborar propuestas de diseño adecuadas a los resultados que se obtengan en los tests.
  • Solucionar problemas: el diseño no es sólo elaborar interfaces, sketches o wireframes, sino solucionar problemas en un determinado entorno que se nos da y elaborar la mejor propuesta posible de solución.
  • Gestión de proyectos de principio a fin: un diseñador de producto debe conocer la gestión de proyectos de principio a fin, es decir debe estar familiarizado y haber participado en todas las fases de diseño de un producto.

Muchas de estas funciones son las habituales en un diseñador de experiencia de usuario senior, que haya trabajado con proyectos y tenga conocimientos de diseño de interacción y diseño de interfaces. Por lo que, aunque suene ya demasiado repetitivo, es una evolución natural de nuestro trabajo.

El diseño de producto va a ser una materia de gran importancia en los próximos años y que unida a unos conocimientos de experiencia de usuario, será un rol muy demandado por las empresas que se quieran dedicar al diseño de productos digitales.

En Torresburriel Estudio te ayudamos en el proceso de diseño de productos digitales mediante la elaboración de tests con usuarios y la realización de un informe de propuestas de solución con los resultados del test. También podemos formar a tu equipo mediante una formación in company para que apliquen metodologías de diseño centrado en el usuario en el día a día de su trabajo. Contáctanos, cuéntanos qué quieres y te enviaremos una propuesta adaptada tu petición.    

Cómo trabajamos (II): Avanzando hacia una cultura de confianza en las personas

Hace unas semanas, hablábamos de cómo trabajamos y qué habilidades y competencias debe tener un equipo de UX o, al menos, cuáles consideramos importantes para el trabajo del estudio. Tras varias conversaciones, el feedback de aquella entrada ha sido bastante positivo. Así que hemos pensado en continuar en esa línea, explicando algunos aspectos de nuestra gestión interna.

Nuestra intención es “desnudar” parte del trabajo de gestión (organización, estrategia, innovación, cultura organizativa, etc.) que realizamos en el estudio, y compartirlo con vosotros. No pretendemos demostrar nada, al contrario. Creemos que puede ser de utilidad, y estamos convencidos que también podemos aprender mucho más si compartís y discutimos vuestras experiencias y puntos de vista.

Across the ice bridge
Foto de Mitch Barrie

Empecemos, para quiénes no me conozcáis, por explicar someramente cuál es mi trabajo como contractor en el estudio. Tiene una doble vertiente: por un lado, un trabajo más estratégico orientado a discutir y asesorar con Daniel los temas de innovación y transformación organizativa; por otro lado, un componente más funcional, que tiene que ver con aspectos de organización y gestión de equipo, así como la dirección de proyectos. Por tanto, juego un papel a caballo entre consultor y facilitador.

¿De dónde partíamos?

Lo que empezó siendo un proyecto de consultoría para el estudio, se ha transformado en un acompañamiento continuado, que empieza a dar frutos. Cuando empezamos el proyecto hace nueve meses nos centramos en analizar la situación actual. Puntos fuertes y débiles, amenazas y oportunidades.

Empecemos por los aspectos positivos. La imagen de marca de Daniel era muy potente, tenía una trayectoria muy asentada en el sector. El estudio se veía muy beneficiado de ello, porque ayudaba a presentar una imagen sólida en el mercado que atraía a más clientes. Relacionado con lo anterior, algo que ayuda al estudio a diferenciarse del resto de empresas es la especialización de sus servicios en el ámbito de la experiencia de usuario, pero también un amplio conocimiento de negocios digitales que puede ayudar a un cliente a contratar diferentes servicios cruzados (consultoría, formación o acompañamiento, entre otros).

Sin embargo, claramente había aspectos que claramente debían mejorarse. El primero, desde un punto de vista estratégico, una fortaleza con doble filo. La misma imagen de marca de Daniel hacía que la marca del estudio se diluyera. Por otro lado, una creciente actividad de proyectos había convertido a Daniel en un cuello de botella. La gestión, coordinación del equipo y todas las decisiones pasaban por él, y su trabajo continuado en casa del cliente limitaba enormemente su capacidad de acción a nivel interno. Es decir, había un cierto liderazgo pero la organización del trabajo era mejorable.

El equipo sentía que faltaba dirección y orientación en el trabajo y, en momentos puntuales, no sabían tomar una decisión para avanzar o no podían porque les faltaba la información necesaria. Habitualmente, la “auctoritas” técnica de Daniel también suponía que se esperara su aprobación para avanzar. Incluso se delegaban decisiones sencillas en Daniel. Cuando existe una figura con mucho carisma y autoridad, se multiplican las probabilidades de que el equipo termine cediendo al Group Think o al pensamiento único.

Otros aspectos derivados de este problema eran: bajo esa dirección identificada en una única persona, la comunicación y colaboración entre los miembros del equipo era insuficiente, alarmantemente baja para un equipo pequeño que necesita estar cohesionado para alcanzar resultados.

Hacia una cultura de confianza

El principio de dividir el trabajo, centralizar la toma de decisiones y el flujo de información de arriba abajo no estaba funcionando. De algún modo, teníamos una organización demasiado rígida. El trabajo se podía dividir y asignar, pero no éramos capaces de adaptarnos con rapidez a los cambios.

Sentíamos que debíamos superar esa jerarquía paralizante y transformar la organización de verdad, de forma sistémica. Necesitábamos un modelo organizativo mucho más descentralizado. Era necesario que los miembros del equipo asumieran más responsabilidades y Daniel incrementara su capacidad de delegación, evitando la microgestión y la sensación el equipo de que era necesaria una aprobación continua de su trabajo. Todo ello, sin perder de vista los resultados del negocio y manteniendo una organización humana.

En nuestro caso, la confianza vino como respuesta a estas necesidades. Lo explica con detalle Stephen M. R. Covey en su libro “The Speed of Trust”, explicando que la confianza trasciende y se ha convertido en una variable de negocio. Covey defiende que cuando la confianza se refuerza, aumenta a su vez la velocidad y disminuyen los costes. También ocurre a la inversa: un bajo nivel de confianza es un freno, sin importar cómo de buena es tu estrategia y ejecución. Más clarito: existe una relación directa entre confianza y resultados del negocio.

Teníamos identificada una gran fuente de problemas, pero faltaba enfocar cómo mejorarla. Para abordarla, nos decidimos a fomentar la confianza en varios frentes:

  • La confianza en sí mismo de cada miembro del equipo: es la primera oleada de la que habla Covey. Nuestra capacidad para establecer y cumplir metas, para mantener nuestros compromisos e inspirar confianza en los demás. En el estudio pensamos que debemos sentirnos con capacidad para tomar nuestras propias decisiones… y decidir. Y, al mismo tiempo, sentirnos responsables de nuestros resultados y acciones, asumiendo el riesgo que ello conlleva. En estos casos, recuerdo la frase de Eugenio Moliní: “las personas participan y se comprometen si quieren. Diseña espacios para que las personas puedan elegir”. Empezamos a trabajar en sesiones de mentoring continuo, con la idea de tomar mejores decisiones y aprender a distinguir las situaciones donde deben esperar aprobación (las menos) de aquellas donde pueden tomar decisiones sin esperar aprobación.
  • La confianza de Daniel en la capacidad de decisión del equipo: era crítico delegar más tareas y, al mismo tiempo, fomentar la capacidad de decisión de cada persona, con el foco puesto en mejorar el proceso y los resultados. Primero, en entornos controlados, para ir asumiendo más responsabilidad progresivamente. Incluso a riesgo de cometer errores graves, como perder un cliente. Algo que, afortunadamente, no ha sucedido. :)
  • La confianza entre los propios miembros del equipo, fomentando su colaboración y participación cruzada en distintos proyectos. Algo que se ha visto reforzado por algo tan simple, y tan efectivo, como fomentar más conversación entre las personas. Todos debemos entender que el debate e incluso el conflicto son fundamentales para construir confianza en el equipo.

Como podrán suponer, ningún tema está cerrado porque son trabajos con muchísimo recorrido, un viaje inacabado hacia la madurez organizativa. Si queremos avanzar en un cambio sistémico, necesitamos de todos. También del equipo directivo, que tiene que aceptar que algunas soluciones no serán perfectas o las que elegirían. También confiar en que los equipos conseguirán el mejor resultado que las circunstancias permitan. Y si no lo alcanzan, será nuestra labor ayudarles a analizar las causas y poner medios para corregirlo.

Los principios sobre los que seguimos trabajando son:

  • Debemos ser capaces de confiar en los demás, con información, tareas y metas.
  • Es importante admitir errores. Más que importante, fundamental.
  • No hay ningún problema por discutir abiertamente cómo nuestros diferentes estilos y aptitudes nos ayudan a mejorar en nuestro trabajo, todos aprendemos de todos.
  • Trabajemos siempre manteniendo el respeto a las competencias y habilidades de otras personas del equipo.
  • Pide ayuda a tus compañeros de trabajo y estáte listo para prestar ayuda cuando se te pida.
  • Asume riesgos cuando sea necesario y apoya a otros miembros del equipo en la asunción de sus riesgos.

Un proyecto que empezó siendo un problema de organización y mejora de resultados, ha ido transformándose en un proyecto de mejora de confianza a varios niveles. Por supuesto, no es un camino de rosas aunque lo parezca sobre el papel. La confianza encuentra respuestas, pero añade nuevos retos porque es un proceso que desgasta mucho: cierta sensación de caos, problemas de coordinación y comunicación entre personas, decisiones autónomas no contrastadas, dificultades para hacer seguimiento, etc. Pero todos ellos son problemas menores que asumimos como peajes en beneficio de una organización más flexible y hasta más humana, que también sea capaz de conseguir mejores resultados.

Nos gustaría que este post sirviese como punto de partida para conversar y compartir, y así profundizar y aprender juntos sobre el tema. Iremos hablando por aquí de otros temas de gestión que nos preocupan y dónde estamos inmersos: cómo estamos generando espacios de autonomía, cómo avanzar en la autogestión en los equipos de proyecto, cómo ayudamos a cada persona a responsabilizarse de los resultados que obtiene y los errores que comete, qué técnicas utilizamos para tomar decisiones en equipos que trabajan de forma distribuida, etc. Hay mucho que hacer, pero ya estamos en marcha.

Creemos que ser abiertos en este tema ayuda también a generar confianza en nuestro trabajo. Seguiremos compartiendo, porque este camino de exploración no tiene retorno. Será interesante ver hacia dónde nos lleva.

BOLA EXTRA: Si quieres profundizar sobre la confianza, no te pierdas la charla TED de Onora O’Neill. Aporta algunas claves muy interesantes de contexto, como la idea de confiabilidad frente a confianza.

Proyecto: Rediseño de aomm.tv, plataforma de yoga online

Hoy os contamos otro proyecto que está ya en producción y del que podemos contar algunas cosas del trabajo que hemos realizado en el estudio.

Se trata de Aomm.tv, una plataforma online de clases de yoga, meditación y pilates, orientada a todas las personas preocupadas por su salud física y mental que va más allá del mero ejercicio físico.

Home visual

El equipo de trabajo del proyecto, formado por el equipo del cliente y miembros del estudio, empezó a trabajar en torno a las siguientes fases:

  • Determinación y descripción del producto
  • Determinación de un catálogo de contenidos
  • Arquitectura de la información
  • Prototipado

En este caso, el diseño visual y la implementación quedaron fuera del alcance del proyecto.
Con estas fases, típicas de un proyecto digital de estas características, abordamos las tareas que de ahí se desprendían con la ayuda de una serie de herramientas. A saber:

  • Benchmarking
  • Entrevistas
  • Workshops de conceptualización
  • Sketching
  • Wireframing

Una parte fundamental de este proyecto fue la investigación de usuarios. Para sus practicantes, el yoga y la meditación tiene un componente cultural muy importante. Es una forma de entender la vida y la salud, que implica no sólo el cuerpo desde el ejercicio físico, sino que también abarca otros intangibles como el cuidado de la mente, la alimentación, la actitud ante temas ecológicos…

En un primer análisis de entrevistas, rápidamente nos dimos cuenta de que el perfil de cliente potencial era mayoritariamente femenino (70%), con edades variables entre 25-55 años. Mayormente urbanas y acostumbradas al uso de internet y dispositivos móviles. En general, son personas preocupadas por su salud, dispuestas a practicar online alguna disciplina que les ayude a mantenerse en forma y llevar una vida saludable, sin renunciar a su ritmo de vida.

Por otro lado, durante el proceso de benchmarking nos dimos cuenta de la necesidad de hacer mucho más visible el elemento vídeo, y hacerlo protagonista desde el primer momento. La experiencia de usuario en este tipo de plataformas online mejora sensiblemente cuando incorporamos el sonido, expresión, movimiento y mostramos el producto (clases rodadas en vídeo), en toda su amplitud. Por ello, no sólo nos centramos en analizar sitios web de diferentes países cuyo núcleo se centra en las clases online de yoga, meditación y pilates. Sino que también analizamos grandes plataformas de vídeo totalmente alejadas de este tipo de contenidos, como Netflix, pero de suma importancia a la hora de diseñar el elemento vídeo y la experiencia que le rodea.

Otro elemento fundamental que debimos abordar con sumo cuidado fue el equilibrio entre la parte audiovisual y una gestión de contenidos más descriptiva. No es sólo un vídeo inspirador que podría poner cualquier plataforma de yoga, también es un sitio descriptivo, que muestra el producto y sus beneficios. Para ello, es muy relevante mantener una forma de expresión verbal, muy directa y accesible. Con la información precisa para informar cuando sea el caso e inspirar cuando sea necesario, apoyándose en distintas herramientas como el blog, secciones de consejos y recomendaciones, programas a la carta…

En lo que que se refiere al modelado de los contenidos, el trabajo que nos tocó hacer fue el relacionado con adecuar el producto a las tipologías de usuario detectadas y a los resultados derivados del trabajo previo de investigación y benchmarking. Así las cosas, hubo que abordar un trabajo de redefinición del producto, o más bien de afinación del mismo, en relación con las diferentes tipologías de usuario que obtuvimos. Al tratarse de un trabajo de rediseño, no perdimos de vista que la plataforma ya disponía de un buen número de usuarios de edad más avanzada. Por tanto, debíamos incorporar nuevos elementos visuales y, al mismo tiempo, mantener un diseño muy práctico e intuitivo.

aomm-menu-antiguo-fin
Menú principal del catálogo de contenidos desde el que se inició el rediseño

El proyecto ha contado, desde la parte del estudio, con el trabajo de nuestro director de UX @torresburriel, además del mío. Como siempre, estaremos encantados de conocer vuestra opinión y comentarios al respecto del proyecto.

Algunos prototipos de trabajo de este proyecto:

aomm-home-fin
Fragmento del wireframe de trabajo del rediseño de Aomm.tv

aomm-buscador-fin
Fragmento del wireframe de trabajo del rediseño de los resultados de búsqueda del rediseño de Aomm.tv

aomm-programas-meditacion-fin
Fragmento de un wireframe de trabajo de la página del programa de meditación

aomm-programa-fin
Fragmento del wireframe de trabajo de un programa en el rediseño de aomm.tv

El proceso de onboarding en Cabify

El proceso de onboarding consiste, en términos generales, en diseñar los mecanismos y elementos que aumenten la probabilidad de que los nuevos usuarios de un servicio o un producto tengan éxito en la adopción del mismo. En otras palabras, consiste en diseñar el aseguramiento de que los usuarios no se pierden al empezar a utilizar un producto o un servicio.

Pongamos algunos ejemplos. ¿Qué hacemos cuando llegamos a un nuevo restaurante que acaba de abrir sus puertas? ¿Entramos (obvio) y nos sentamos? ¿O por contra esperamos a que alguien nos atienda? ¿Dejamos el abrigo sobre el respaldo de la silla, o lo colgamos en una percha? ¿Pedimos recomendación a la persona que nos atiende o tratamos de elegir en la carta?

Cabify
Imagen de la home de Cabify

Son preguntas que pueden ser obvias, seguro que alguna sí, pero un correcto diseño de todas esas etapas cuando un nuevo cliente entra al restaurante asegurará una experiencia extraordinaria, además de impedir la frustración, una mala primera toma de contacto o, en el peor de los casos, el abandono del local por parte del cliente.

En los productos, y servicios, digitales sucede exactamente lo mismo. Llega a la ciudad la más moderna aplicación web que va a hacer las delicias de los early adopters, que corren a registrarse. ¿Qué sucede cuando termina el proceso de registro? ¿Hay que hacer log-in de nuevo? ¿Nos llega algún email para decirnos algo? ¿Algún chat automático se muestra ante nosotros dándonos la bienvenida a la aplicación? ¿Algún tipo de onboarding screen se muestra ante nosotros para indicarnos cómo proceder?

El caso de Cabify, el servicio de vehículo con chófer que está triunfando en las dos principales ciudades españolas, es desde mi opinión un excelente modelo de proceso de onboarding, tanto en el plano digital como en el analógico.

Como digo, los procesos de onboarding se pueden, y deben, diseñar en los planos anteriormente citados. Y Cabify parece que lo sabe bien, pues presenta un modelo en la parte digital que no deja detalles sueltos o al azar, y planifica adecuadamente desde mi criterio lo que un usuario que acaba de llegar a la plataforma puede necesitar para:

  • Asegurar su registro correctamente
  • Informar acerca del qué es el servicio
  • Informar de qué es lo que el usuario puede obtener del servicio
  • Dar las indicaciones de uso del servicio

Y todo ello rueda perfectamente en desktop y en mobile.

Onboarding
Indicaciones de los procesos de usuario en Cabify

Así escrito no parece tan complicado, pero este es uno de los procesos más delicados, y que aportan más valor al usuario y a la propiedad digital. ¿Por qué? Pues porque, siguiendo la analogía del principio del post, es la puerta de entrada a un nuevo usuario/cliente que ha dejado sus datos, se ha suscrito al servicio o ha comprado el producto, y nuestra obligación es, cuando menos, proporcionarle todo lo necesario para que tanto la primera impresión como el disfrute sean óptimos.

La caja de herramientas que tenemos a nuestra disposición para abordar el diseño de un proceso de onboarding pasa, sin duda, por la selección de los canales a través de los que nos vamos a dirigir a los usuarios/clientes:

  • Screen: la pantalla de finalización del registro/compra
  • Email: el o los correos electrónicos que podemos enviar con las instrucciones o indicaciones necesarias.

Más allá de estos dos canales podemos desarrollar mucho más el proceso (por supuesto), pero asentar los mensajes en estos pilares básicos entiendo que es un primer paso ineludible.

En Torresburriel Estudio llevamos más de 3 años trabajando con clientes en procesos de onboarding de manera que cuidemos y apliquemos altas dosis de cariño al tratamiento y contacto con usuarios y clientes. Si quieres que en tu proyecto digital, o analógico, podamos analizar las posibilidades de optimizar o implementar un proceso de este tipo, no lo dudes y ponte en contacto con nosotros.