Armario Adolescente

Leyendo este artículo: Consejos para el Diseño de un Buen Menú de Navegación Web tengo algunos peros.

Como no me caben en twitter, muy rápido:

1. El menú es reflejo de Arquitectura de Información y modelo de navegación que conlleva un proceso de análisis mucho más profundo que el que sugiere el artículo y debe tener en cuenta la escalabilidad futura, el equilibrio, la consistencia en todas las ramas... 

2. No soy de contar clicks, como ya he dicho más veces en este blog: las cosas a dos clicks tenían sentido cuando la conexión era lenta. Las cosas tienen que estar BIEN organizadas de forma que el usuario no perciba los clicks que le llevaron hasta el contenido que buscaba

3. No estoy nada de acuerdo con sus sugerencias para ordenar menús de segundo nivel

4. Creo que olvida la legibilidad en favor de lo "bonito" con la particularidad de que lo legible es medible mientras que lo bonito es opinable. Por ejemplo, a mi el menú horizontal de las bodegas que se pone como ejemplo, me parece feo. Y es dificilmente legible al tener un pattern (las webs las usan, además de treintañeros con vista de lince otro tipo de usuarios con más dificultades en los que también hay que pensar)

No entro en accesibilidad y multidispositivo porque entiendo que el artículo no trata de entrar en esos temas.

Tengo a medias un post con un poco más de análisis. Pero mientras saco tiempo sigo navegando y encontrándome cosas.

¿Cómo convertir un banner informativo en uno alarmante que preocupa sin necesidad al usuario?

La Caixa tiene la clave:

Me pregunto qué tiene de malo poner un fondo azul y un icono estándar de información y reservar este naranja y la señal de turno para cuando de verdad pase algo...

Preguntaba ayer @manuese en twitter sobre el tema. Yo prometí una lista de lecturas o webs como punto de partida. Aquí están mis aportaciones.

De los creadores del famoso argumento "por usabilidad", que antes desarrollaron el inefable "por consistencia", llega ahora a sus pantallas: "es un estándar". 

Sobre el eterno debate del mejor orden para los botones aceptar y cancelar, leo esta mañana en UX Movement este interesante artículo.

Llevamos toda la vida hablando de esto. Igual que llevamos toda la vida con el orden preferido de lectura de formularios en columnas.

Cuando rehacíamos la aplicación de Contact Center para el Banco Santander en Brasil, las normas de usabilidad del banco obligaban a poner el botón "Aceptar" a la derecha. Los trabajadores del Contact Center de Brasil estaban acostumbrados al botón de "aceptar" a la izquierda. 

El cambio de orden de los dichosos botones pasó a ser un tema crítico y yo me vi envuelta en una guerra de argumentos-contraargumentos.

Al final ganó el estándar de la casa. No pasó nada. Alguien me contó entonces que habían vivido un caso a la inversa en otro banco. Y tampoco pasó nada.

Hay dos cosas que me ponen muy nerviosa de mi profesión:

1. Cualquiera cree que puede hacerla en cualquier circunstancia sin tener ningún conocimiento. 
2. Nosotros mismos provocamos esa sensación de "aleatoriedad" intentando argumentar sin argumentos. Saben eso de "por usabilidad" o "por consistencia"? Yo a esos argumentos los llamo Argumentos L´oreal: "porque yo lo valgo".

No creo que haya nada de malo en decir no sé, no lo tengo claro, depende. O incluso más, y llámenme hereje "da igual".

El orden de los botones no me parece tan importante siempre que se elija un criterio y se mantenga invariable en el sitio. Ningún argumento en un sentido o en otro me resulta definitivo. Ninguno de los dos equipos me convence por completo y los dos tienen razón.

En todo aquel debate de Brasil un compañero desarrollador me preguntó en privado: tú qué crees? Y yo le respondí: "que estoy hasta el gorro de hablar de esto mientras tenemos una tabla con filas clicables que no parece una tabla con filas clicables y que es el principio de la interacción. Cinco o seis pasos antes de tener que pulsar ningún botón de aceptar o cancelar."

Creo que cualquier persona con dos dedos de frente puede hacer mi trabajo. Sólo tiene que formarse. Aprender. Estar dispuesto a seguir aprendiendo siempre, a cambiar de opinión porque trabajamos en un entorno que evoluciona deprisa. Sólo tiene que tener la suficiente confianza en lo que hace como para ser capaz de decir "no lo sé" y "eso es lo de menos".

Porque así, cuando le dices a un desarrollador "esto es importante arreglarlo" tienes alguna posibilidad de que te haga caso y no piense "ya están los vendehumos con sus chorradas".

Así lo veo. Cada vez más, además. 

El lanzamiento de su tienda online ha sido la novedad de la temporada.
Yo, particularmente, he sufrido una gran decepción.
Es mucho peor que sus dos principales competidoras, lo que es aun más grave si tenemos en cuenta que ha tenido más tiempo y la impagable oportunidad de aprender de los errores de la competencia.

El diseño me parece estéticamente bonito, pero desde el punto de vista que nos ocupa, poco adecuado.
Entiendo que venden moda, tendencia. Todo eso. Pero no al precio de que las cosas no parezcan lo que son y parezcan lo que no son: uno siente que tiene que escribir donde debería clicar, o que no debe clicar en cosas que resultan ser enlaces.
La suscripción a la newsletter es particularmente sangrante.
Aunque no se queda atrás la selección de la parte de hombre.  O el literal “universe” en tierra de nadie dentro de la cabecera y que resulta que lleva a la home igual que el logo.

Como curiosidad dos de las veces que entré en la página para hacer el ejercicio pensé que me encontraba en la versión en inglés, porque muchos de los literales y textos están en ese idioma a veces de forma innecesaria (“summer dresses” “Catch the train”…)

Localizar la sección que buscamos implica comprender que el menú de la tienda es el de todas las letras mayúsculas frente al menú de la web que es el de las minúsculas cursivas, aunque también es el de las minúsculas regulares ubicado al pie. Todo esto dependiendo de criterios opacos.

Una vez comprendido todo esto y localizada la sección (vestidos para mi ejemplo) vemos el típico mosaico con las fotos de las prendas. Muy bonito.
Pero desgraciadamente no hay filtrado por características, tampoco una indicación del total de vestidos que están a la venta. Hay un enlace “ver más” que no lleva a ningún sitio (lo que no deja de ser irónico porque uniendo lo  ambiguo de su texto con lo ambiguo de su ubicación era imposible apostar cuál sería su función. La función parece ser ninguna)

Tampoco es posible agregar las cosas a la cesta desde la pantalla de resultados. Es una funcionalidad interesante para la tienda, al favorecer el impulso, e interesante para el cliente que puede estar mirando vestidos de varias páginas y entrar a comprar “a tiro hecho” por lo que cualquier cosa que facilite la localización y adquisición del producto será muy de agradecer.

Además, cuando estamos viendo la segunda línea del mosaico perdemos de vista la cesta con los productos que ya hemos elegido.

Una vez dentro de la ficha hay dos comportamientos particularmente molestos: otra vez el zoom se ubica en un sitio que el usuario nunca esperaría y ocupa el espacio de la información de la prenda.
El efecto me resulta estéticamente muy bonito (queda la ficha compacta, limpia y ordenada) pero desde el punto de vista de la experiencia de compra del usuario, me parece un error, agravado porque ocurre simplemente con deslizar el ratón por la imagen

1. La necesidad de elegir 
2. La forma de elegir (se hace clicando en el recuadro que muestra el color)

Los formularios me han resultado caóticos. No respetan los estándares más aceptados  y hacen las validaciones de una en una, por lo que si cometemos varios errores  tendremos que pulsar varias veces el botón de continuar. Corregir el primer error. Continuar. Corregir el segundo. Continuar. O rendirnos.
Lo que primero pase.

Mientras tanto, Mango, ha resuelto algunos de los problemas que señalaba mi anterior post: ahora es posible volver a la página en la que te encontrabas desde un detalle y han incorporado el módulo "otros clientes también compraron".

-------
Prometo solemnemente no volver a hablar de tiendas de ropa online. Que al final va a parecer que lo de "armario adolescente" es por la ropa.
Y no. Pero no podía dejar pasar la oportunidad de reutilizar un ejercicio que venía tan al caso

Me pregunto cómo puede ser que el rediseño de la tienda online de Mango haya conseguido empeorar a la de su competencia.
Antes, comprar en Mango online era, por comparación con Zara, una maravilla.
Ahora pasa al revés y me parece inexplicable.

Los problemas más graves con los que me he encontrado y que sí resuelve la competencia:

1. Es imposible encontrar la guía de tallas. Antes era fácil, porque aparecía un enlace en la ficha de producto. Ahora es difícil porque está en las preguntas frecuentes. Ese cajón desastre.
   
2. Cuando queremos volver de un detalle de producto a la lista con nuestros filtros no es posible volver a la página en la que estábamos: ni a través del rastro de migas ni siquiera con el botón "volver" del navegador (ambos vuelven a la primera página de nuestra selección)
   
3. La funcionalidad "vista rápida" no es demasiado clara. La ventana da problemas en monitores pequeños porque se posiciona por encima del scroll si estamos navegando por los resultados situados en la parte inferior de la página. Algo parecido pasa con el zoom.
   
4. Han perdido la ocasión de usar las sinergias de las fichas de producto. No hay recomendaciones, complementos que combinan con la prenda, etc.

Como punto positivo: tienen una ayuda virtual. En 5 min Georgina me ha informado de donde está la guía de tallas.

Me pregunto cuántos potenciales compradores se habrán rendido y cuantos héroes, habrán resistido viendo 15 veces la primera página de resultados, teniendo que recordar por cuál iban cada vez que entraban a un detalle, y habrán dedicado 10 minutos a  buscar la guía de tallas y otros 5 a esperar impacientes la respuesta de Georgina.
Intuyo que ninguno.

En tiendas de ropa on line ASOS sigue siendo mi favorita. No es bonita. No es moderna. Pero nunca echo nada en falta, nunca pasa nada que no me espere y todo está donde lo busco.
La guía de tallas al lado del selector de tallas. Por ejemplo.

1. Estudiar y conocer a tus usuarios: qué buscan, qué esperan, qué necesitan, qué problemas tienen con tu sitio

2. Sencillez

3. Cuidado por los detalles

4. Sentido común.

Parece fácil, ¿verdad?

En el mismo OME me hablan de un evento formativo, voy a preinscribirme y cuando le doy al botón de enviar aparece esta pantalla (si pinchas sobre la imagen la verás más grande):

Es de sentido común que cuando alguien envía un formulario de preinscripción a un curso