CategoríaUsabilidad

Decálogo rudo del usuario para todos los humanos que quieren diseñar interfaces

Los otros días, Diego Serebrisky – mi ex vecino de México e inversor en proyectos digitales – me compartió el post “14 Hard Truths About Users” by Robert Hoekman y me pareció tan simpático que decidí traducirlo y resumirlo como si fueran máximas.

Aquí va ;)

  1. Los usuarios son más inteligentes de lo que tú crees; simplemente no les interesa aprender tu sistema.
  2. Los usuarios tienen otras cosas que hacer; su objetivo no es pasar su tiempo en tu web.
  3. Los usuarios hacen las cosas de un modo automático, como si condujeran un automóvil. No van leyendo tu web.
  4. Los usuarios – en la mayoría de los casos – se dan por satisfechos con lo mínimo que puedan aprender.
  5. Los usuarios no usarán la plataforma de la forma en que tú la diseñaste.
  6. Los usuarios se guían por los patrones para comprender de antemano cómo hacer las cosas en un nuevo sitio y para calcular cuánto tiempo les llevará aprenderlo.
  7. La atención de los usuarios compite con un millón de cosas. Forzarlos a seguir una secuencia serial y clara, ayuda a concentrarlos y que terminen la tarea.
  8. Los usuarios sólo ven lo que hay en la pantalla, no adivinan lo que el diseñador no puso dándolo por sabido.
  9. Los usuarios mienten si les preguntan qué hicieron o qué percibieron.
  10. Los usuarios no saben contestar si les preguntan cómo solucionar algo digital.
  11. Cambiar de app les requiere un esfuerzo tal, que debe valer la pena para que lo hagan. Si la solución no es una solución real, a los usuarios no les interesará el racional del diseñador; sino que volverán a resolver las cosas como las hacían antes.
  12. Los usuarios tienen preguntas y si no son resueltas de forma clara, fácil y contundente, muy posiblemente abandonarán tu web.
  13. Cuando los usuarios no comprenden o no logran hacer algo (por culpa del diseñador) se culpan a sí mismos y la experiencia es nefasta.
  14. La experiencia del usuario se articula a partir de una sumatoria de elementos: interacciones, sentimientos, dudas, etc. El escenario completo y holístico es el que impacta al usuario.

Todo punto que deseen añadir, siempre es más que bienvenido ;)

Los invito a leer más de Robert Hoekman en su web, donde incluye artículos y libros publicados sobre el mundo digital y UX.

;)

 

Videos de diseño de interacción hechos por Luke Wroblewski

Este hombre – Luke Wroblewski – creo que es la máxima figura en el mundo del diseño de interacción.

Y no sólo es un mega archi experto, sino que pareciera que ama enseñar.

Los videos duran menos de 5 minutos cada uno y estos son algunos de los títulos.

  • How to Jump Right Into Input
  • How to Reduce E-Mail Input Errors
  • How to Communicate Primary Actions
  • How to Make Use of Radio Groups
  • How to Communicate Hidden Gestures
  • How to Increase form conversion
  • How to Reduce Errors in Forms
  • How to Simplify Payment Forms

Aquí los pueden ver :)

 

5 recursos de Material Design para diseñadores UX

Buenas ;) aquí les dejo links que creo que pueden ayudar a los diseñadores de interacción que están empezando a zambullirse en el mundo de Material Design.

  1. La guía base donde se explica didácticamente  cada mínimo detalle (los componentes, dónde y cuándo ubicar los botones, las cards, cómo armar los tabs, cómo mejor utilizar el lenguaje, animaciones, profundidades y absolutamente todo): Material Design Guidelines
  2. Empresas reconocidas por Google por haber aplicado el nuevo lenguaje, donde se puede ver cómo se puede mantener e incluso resaltar el propio brandingMaterial Design Awards
  3. Un sitio para jugar y visualizar la paleta de colores: Paleta de colores
  4. Un espacio donde distintos diseñadores suben cosas que hacen o que escribenMaterial Up
  5. Y – aunque autorreferencial! – una mini presentación introductoria que creo que los puede ayudar: Qué es Material Design (en español)

Aquí les dejo dos videos para que se inspiren ;)

P/D: gracias al genio de Yemel Jardi que fue mi mentor en Design Thinking definitivamente ;)

 

 

Pruebas de usabilidad [video]

Los muñecos que se mueven atrás me generan mil cosas.

Allá va ;)

What is Material Design?

Buenas!

Les comparto la presentación que di recién en Puerto Madero, Buenos Aires; basada en la mentoría de Melisa Powel de Google.

“Material design is a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. It was inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic”. Fuente: Material design by Google

“Elimine la mitad de las palabras en todas las páginas” libro: Don´t make me think ;)

Hoy @moniconejo me pasó la cita del libro “Don´t make me think“.

“Elimine la mitad de las palabras en todas las páginas y después prescinda de la mitad de lo que haya quedado”.

Creo que Steave Krug no capta el dolor existencial que genera la pérdida de simplificar algo ;)

Creo ;)

Visa Argentina y el impacto de su web no optimizada

El viernes viajo a Colombia y necesito avisarle a VISA.

  • Lo fantástico de VISA Argentina es que sólo permite informar los viajes a través de la web. Hablé con dos operadoras esta mañana y no me lo permitieron hacer por teléfono.
  • Lo increíble de la web es que cuando quiero crear un usuario, me muestra un cartel rojo diciendo que debo comunicarme con “un administrador” (aunque tampoco explica de qué forma llamar a un administrador).

¿Cómo podemos interpretar a Visa Argentina? ¿Ignorancia en cuestiones digitales? ¿Ausencia de un buen equipo de User Experience?  ¿Ausencia de un buen head?

¿Qué pasaría si fuera mi mamá la que viajara? ¿También la obligarían a hacer el trámite a través de esa web que no está optimizada?

Cuando tenga un tiempito libre voy a llamar y decir que soy ciega, a ver qué me contestan.

Hoy me acordaba cuando decíamos que la accesibilidad web es un derecho y en algún punto, habría que repensar si ofrecer un sitio inaccesible a clientes que son cautivos, no es un acto de profunda discriminación. 

P/D: Acabo de hablar con el área de reclamos de Visa Argentina para poder dejar esto asentado, la operadora no me entendió cuando le comenté que el sitio no estaba optimizado y me volvió a decir que el trámite sólo se puede hacer a través de “Visa Home”.

Gracias Visa.

 

Día Mundial de la Usabilidad en Monterrey

Qué vergüenza, de casualidad encontré este video en Youtube. Es una charla que di en el año 2013 en Monterrey (!) dentro del Día Mundial de la Usabilidad.

Necesito aclarar que se trataba de un público jóven/adolescente; por eso (creo!) estoy tan maestra ciruela ;)

Hangout sobre usabilidad con Daniel Torres Burriel y Rebeca Ramirez ;)

Aquí va el HangoutON en el que participamos con Daniel Torres Burriel y Rebeca Martinez, organizado por Yolanda Corral y Antonio Postigio.

Mil gracias por la invitación :)

Esto de las palabras distintas en el mundo hispanohablante ;)

Algo que aprendí viajando, es la diferencia absoluta de palabras que usamos entre todos los países hispanoparlantes de Iberoamérica.

  • Me pasó en Madrid, presentar un prototipo en un banco que decía por todos lados “COSTO”. Allá el costo es un cigarro de hachís (la resina del cannabis). Se utiliza “coste” cuando se intenta hablar de precios. Lo increíble es que los economistas me miraban como diciendo: “Obvio que sabés lo que estás diciendo”. Imposible para un argentino, hasta que no pisa el suelo de Amsterdam.
  • También en Pamplona yo insistía con llamar al botón de login: “INGRESAR”.  Allá sólo se ingresa a los hospitales. Se utiliza “Entrar” cuando se habla de sitios web.
  • En reuniones en España siempre me pasaba que yo decía: “¿Y si SACÁRAMOS tal cosa de la página?”. “Sacar” allá significa “mostrar”, no “eliminar” como lo usaríamos en Argentina. Y en todas las reuniones la gente entendía lo inverso a lo que yo quería decir, hasta que una madrileña con la que yo pasaba tiempo, advirtió por qué devenía la confusión y logré modificarlo cada vez que hablaba (!)
  • Hace un tiempo vi en Mercado Libre México algo que preguntaba: “¿Estás acá?”. (Lo capturé para enviárselos a los chicos y lo perdí en el caos de mis imágenes). “¿Estás acá?” en México significa: “¡¿Estás drogado, amigo?!”.  Sería “Estás aquí” para ser más pertinentes ;)
  • Me contaban los otros días en un Call Center de DF que cuando la gente de Mérida llama y dice: “¡Es que busco, busco y no busco!”,  los operadores jóvenes de DF contestan: “¡Pero busque, señora!”. El tema es que para los yucatecos, el verbo “buscar”, también quiere decir “encontrar”.  Entonces, el tercer “busco”, quiere decir “encuentro”. El significado completo de la oración sería: “Es que busco, busco y no encuentro” ;)
  • Anoche Bibiana Nunes contaba que en el e-commerce de Adidas México decía: “CHAQUETA” para referirse a las chamarras; lo que en Argentina llamaríamos “campera”. El detalle es que en México, la palabra “chaqueta” se utiliza específicamente para la masturbación y en las oficinas centrales de USA no lo saben.
  • Y anoche un amigo mexicano me contaba que un argentino usó tres veces la palabra “PROLIJO” para referirse a un proyecto. Como esa palabra no se conoce en las tierras de Frida, lo googleó y aparecieron estas tres acepciones:
    • Largo, dilatado con exceso.
    • Cuidadoso o esmerado
    • Impertinente, pesado, molesto.

Esto de la tropicalización – cuando hablamos de encontrabilidad – es un pequeño detalle ;)

Técnicas y Mejores Prácticas de Investigación de Usuarios vía Multiplicalab

Cualquier comentario o aporte, es más que bienvenido ;)

Formularios para personas o bases de datos por Luke Wroblewski

Amo a este hombre.

Ejemplo de usabilidad en Dolce Gusto

Por Zeus, miren esto.

Lo digo igual con mucho dolor, porque es lo que está pasando en Argentina :/

10 detalles para ayudar a tu agencia digital a hacer UX

Buenas!

Armé esto para un amigo que trabaja en una organización que necesita recibir donaciones y acaba de contratar una agencia digital.

Él quiere asegurarse que “hagan UX” y le armé este mini listado para verificar que el proceso esté contemplando a los usuarios ;)

1. Que definan las personas-profiles y los escenarios antes de empezar a diseñar

Esto sirve para:

  • Que los diseñadores no hagan diseño autorreferencial
  • Que todos piensen el la misma imagen cuando hablen del “usuario”

Ejemplo (ultra mejorable):

Mariana tiene 26 años, es mexicana, estudió arquitectura y trabaja como decoradora de interiores. Vive en Polanco junto a su marido abogado y ambos suelen apartar parte de su sueldo todos los meses para contribuir a proyectos humanitarios vinculados con niños. Mariana suele buscar la mejor forma de donar desde su iPad, cuando vuelve a su casa por la tarde. Como parte de su educación fue en USA, está muy acostumbrada a realizar pagos online; en interfaces simples y fáciles de usar.

2. Que analicen las dudas de los usuarios que llaman al Call Center

  • Que analicen las métricas de los motivos de llamados, mensajes, redes sociales, etc.
  • Que hagan entrevistas y/o focus groups con los chicos que atienden las llamadas; así se empapan con la realidad de la problemática ;)

3. Que definan la estrategia de UX antes de plantear las funcionalidades

  • Una vez que hicieron la recopilación de la info, que te listen:
  • Cuál es la experiencia de usuario que quieren generar
  • Cuáles son los retos
  • Cuál es la estrategia para generar esa experiencia
  • Cuáles serán las funcionalidades

4. Que te permitan recibir feedback de los usuarios a través del mismo sitio

Por ejemplo:

  • Que las preguntas frecuentes sean un panel colaborativo; o al menos, que cada ítem cuente con un formulario básico: ¿Te ha sido útil la respuesta? ¿Sí, no? ¿Por qué?
  • Que el sitio incluya una mini encuesta de opinión sobre la facilidad de uso del sitio (los usuarios pocas veces llegar a decir el error específico, pero al menos pueden dar pistas).

5. Que estén pensando en darle una vuelta inteligente al proceso de registro

Que se pregunten:

  • ¿Es necesario un registro?
  • Si es necesario: ¿cómo se puede disfrazar – o dar vuelta – para que los usuarios no se encuentren con la tediosa tarea de registrarse al inicio del proceso?
  • ¿Tienen experiencia “solapando” registros? ¿Cómo lo han resuelto en otros proyectos?

6. Que estén centrados en minimizar los formularios

  • Que cuestionen cada campo
  • Que sepan que cada campo disminuye la conversión

7. Que presenten primero los wireframes y luego recién el diseño visual

Esto es esencial:

  • Primero deben hacer el sketching, o sea, los borradores del flujo
  • Segundo, los wireframes, o sea, los esqueletos de las pantallas en blanco y negro: con esto empezarán a hacer las pruebas de usabilidad
  • Tercero, recién después pensar en el diseño visual

8. Que diseñen por flujo, no por pantalla; basándose en los objetivos que el usuario tiene que lograr

  • Que listen todos los objetivos que los usuarios deben lograr
  • Que analicen los casos de uso
  • Que preparen las pantallas para contemplar todos los casos

9. Lo FUNDAMENTAL: ayudarlos a que hagan pruebas de usabilidad Think Aloud

Que hagan pruebas – desde los prototipos en papel – para verificar la comprensión de los usuarios rápido y a bajo costo.

  • El guión de la prueba de usabilidad (o sea, los objetivos que los usuarios deben poder lograr) es lo que va a enfocar al equipo de diseño
  • Las pruebas son individuales
  • Los usuarios no pueden ser programadores ni diseñadores
  • Ustedes los pueden ayudar consiguiéndoles gente
  • Sería ideal darles un regalito por participar

10. Que te entreguen el manual de elementos interactivos

Te va a servir para:

  • Que definan los “estados” de cada elemento interactivo: Ej: cuando el usuario pasa el mouse por encima por un link, cuando hace click, cuando ya lo visitó, etc.
  • Que diferencien los links de los textos: esencial
  • Que diferencien los botones principales de los secundarios: importantísimo
  • Que guarden consistencia

Estos son detalles ultra básicos en el mundo UX; pero creo que son esenciales para saber si están centrados en la usabilidad y la comprensión de los usuarios ;)

Presentación del Curso UX Design en la Escuela IT

Buenas!
Les paso el video de presentación del curso que di – para la Escuela IT el último fin de semana de junio – junto al texto que mega amablemente la gente de DesarrolloWeb.com transcribió.

Qué es UX

UX significa Diseño de Experiencia de Usuario y es un concepto que a menudo se confunde con diseño de interfaces. UX es el trabajo conceptual que se realiza previamente donde uno define qué quiere generar en el usuario antes de bajar a la tierra de las ideas, antes de bajar a la interfaz. En otras palabras, es fijar los objetivos estratégicos “queremos generar esto en tal tipo de persona”. Eso es el diseño de la experiencia y después uno se mete en la práctica, que sería la interfaz.

Qué es usabilidad

Usabilidad es la característica de un elemento que es fácil de usar. La pregunta es ¿Qué es fácil de usar y para quién? Está vinculado con la curva de aprendizaje, con la comprensión, con la ergonomía, con la operabilidad de un elemento… y lo más importante es que la usabilidad no lo puede decidir uno solo. No es el diseñador el que dice si algo es usable o no, sino que en realidad uno tiene que observar a alguien usando el elemento para, a partir de la observación, entender esa curva de aprendizaje. No es un auto-informe que puedas hacer sentado en tu escritorio para decidir si algo es fácil de usar o no, es agarrar una persona, pedirle que resuelva algo y comprobar si es comprensible o no, y entender por qué.

Tampoco sirve preguntarle a alguien “¿te resultó fácil de usar?” porque la persona va a decir “sí” y no importa tanto su percepción sino nuestra observación de esa persona aprendiendo. En definitiva, la usabilidad tiene que ver con técnicas de observación y no de escucha.

¿Cómo se realiza la Investigación en usuarios?

Se trata de indicar técnicas cuantitativas y cualitativas. Cualitativas para introducirnos en la profundidad de la fenomenología, saber o deducir lo que qué pasa cuando una persona no entiende parte de un proceso. Lo que obtienes gracias a esas técnicas cualitativas son hipótesis, pero luego las tienes que comprobar con analítica (técnicas cuantitativas), en producción. Pero una cosa se compensa con la otra, porque Analytics no te va a decir “por qué”. Te va a decir que una persona se cae en una parte del proceso. Para saber el “por qué” tienes que ir a la parte cualitativa y deducir el motivo de un comportamiento. Realizas un cambio mínimo y vuelves a cuantificar para ver cómo repercute.

En fin, es un juego entre lo “cuanti” y lo “quali”.

¿Qué es el diseño de interacción?

El diseño de interacción humano/computadora o persona/ordenador no es diseño gráfico, es algo distinto. Es una construcción de un diálogo entre un humano, con toda su complejidad y una máquina. Lo que se está analizando es el vínculo que se genera entre una máquina y la persona. Todas las técnicas apuntan a analizar ese vínculo, pero no la interfaz como un elemento gráfico, como un elemento de “print”, sino el elemento de interacción y el diálogo generado.

¿Para quién está indicado el Taller de UX Design?

El diseño de UX es relativo a cualquier persona que trabaje en el mundo digital. Puede ser cualquier sector, desde marketing, desarrollo, diseño… unos estarán más metidos en el mundo de la experiencia de usuario y otros más ajenos, pero a todos les interesa tomar esta formación para entender lo que es. Lo importante es que una vez que comprendes la UX experimentarás y entenderás que el flujo de trabajo cambia.

UX afecta a los que escriben código, a los diseñadores, a la gente de marketing, en todo momento del proceso de creación de un sistema que relacione humanos y máquinas.

Aquí está el video, con estas mismas palabras y mis pelos parados ;)

Ejemplo de paper prototyping

Para los que no se imaginan esto del paper prototyping aquí va un mini-video que encontré en LA internet.

;)

Destacar el botón principal, ubicarlo pensando en el trayecto de la mano e incluir un feedback comprensible, visible y humano

Hoy estaba mirando un diario argentino, me ultra emocioné cuando vi un acceso que decía: “Danos tu opinión sobre el nuevo sitio” y al hacer click me encontré con este formulario:

¿Llegan a ver dónde están ubicados los botones: “Enviar” y “Cerrar”?

Para los que se quedaron con dudas: ¿qué se podría mejorar exactamente?

  • Nos conviene distinguir o sea, diferenciar visualmente el botón principal del secundario, para que el usuario no tenga la necesidad de leer qué corneta dice la etiqueta del botón y que simplemente “viendo casi sin mirar” pueda enviar el bendito formulario y siga haciendo sus cosas. Lo viví en Alemania y en Francia donde no entendía lo más mínimo de los textos y sin embargo me podía manejar en sus sitios por el diseño de los botones.
  • Intentemos siempre ubicar los elementos interactivos pensando en minimizar el trayecto del mouse y que el usuario llegue directo al call to action – el botón principal – perdiendo el menor tiempo posible. La vista y la mano del usuario no tiene que hacer una viborita. Ir y volver: NO.
  • Dado que estamos creando un diálogo humano-ordenador – eso es básicamente lo que hacemos: crear una conversación de un sujeto emocional con una plataforma binaria – nos conviene que cada acción que genere el usuario provoque una reacción, una respuesta. Por ejemplo un overlay o algo que diga: “Perfecto, gracias por tu opinión”. Como si quisiéramos replicar a una mujer que nos atiende en un call center y acaba de escuchar nuestro reclamo. No se queda muda, no nos corta sorpresivamente el teléfono: nos responde para calmar nuestra ansiedad y hacernos sentir escuchados ;)

¿Quién es el mejor autor que escribe sobre diseño de interacción para formularios?

A mi entender, el MEJOR autor es Luke Wroblewski.

  • Lo pueden seguir en twitter como @lukew
  • Pueden revisar TODOS su posts en www.lukew.com
  • Tiene varios vídeos en Youtube que pueden buscar cual buenos stalkers
  • Y aquí les dejo uno de sus artículos que escribió sobre formularios Web Application Form Design

;)

Cómo hacer encuestas de usabilidad online con Usabilla.com

Buenas!

Escribo este post por si a alguno está usando Usabilla.com

Justo un ex ex ex compañero de trabajo me escribió para preguntarme si recomendaba la plataforma (la conocen?) y le contesté lo siguiente:

(si tienen algún comment es más que bienvenido ;)

“Es un juego que te sirve para ver el acierto y la localización de los elementos en la pantalla.

Te puede ayudar a “terminar” de definir las posiciones y los colores de las cosas.

Pero siempre hay que verlo como un juego porque no es un escenario real.

Seguir leyendo

Curva de aprendizaje con el teléfono

Compartido por @perse79
Me MATA ver la curva de aprendizaje hasta que lo resuelven – o casi –

“The age of features is dead. We are living in the age of experiences”, Aral Balkan

Buenas!

Les comparto esta charla de Aral Balkan que publicó ayer Guido Vilariño, quien es project manager de DemocracyOS y me pareció más que interesante.

Habla de cómo los monopolios de Internet (Google, Apple) cuentan con toda nuestra información y logran obtenerla de nosotros, porque están centrados en controlar la experiencia de los usuarios.

Por el contrario, muchas organizaciones independientes – que sí respetan los derechos de “privacidad” – se mantienen aún centradas en las funcionalidades y pierden así la posibilidad de crear engagement.

“The age of features is dead. We are living in the age of experiences”.

Aral Balkan propone crear una nueva categoría de tecnología – Free and Open Technology – llamada Indie Tech:

“Indie Tech: Beatifully-designed and easy to use free and open consumer products that empower people to own their own tools and data.

  • Design-led
  • Free and open
  • Independent”

Les recomiendo mirarlo ;)