Hace unos días conocí la existencia de Stylebot, una extensión para el navegador Chrome que permite manipular los CSS del sitio web que estemos visitando.
Yo suelo utilizar Firebug, un complemento para Firefox, con el cuál estoy bastante satisfecho. La cuestión es que Stylebot me llamó la atención por una ventaja que presentaba en cuanto a usabilidad.
La mayoría de nosotros solemos acceder a Internet para buscar información y así encontrar pistas que nos ayuden a tomar decisiones, ya sea escoger una universidad para estudiar o comprarnos un coche.
Por ello, tendremos unas necesidades específicas que satisfacer en relación con:
Son tres aspectos que podemos nombrar por separado pero que en la práctica están muy relacionados. Vamos a ver algunos ejemplos para entenderlo mejor.
El caso que cuenta el post Some Users Want Terrible User Interfaces es muy bueno para reflexionar sobre la importancia que tiene el conocer lo que el usuario quiere y lo que el usuario necesita.
El usuario (cuando es nuestro cliente) puede querer determinadas funciones para una aplicación o determinadas características en un diseño por motivos que contradicen una optimización del tiempo y del esfuerzo. Los motivos para esta preferencia hay que detectarlos porque deben ser los primeros en ser sacados a la luz para corregirlos. Si no, esos motivos arraigados pueden devastar cualquier argumentación sobre buenas prácticas o mejores recursos para su web ya que nosotros estaremos hablando de aspectos generales y el usuario tendrá en su cabeza el fantasma de la costumbre, la pereza u otros peores.
En su post, Lukas Mathis creo que aporta una buen motivo más para que nos preocupemos de tomar pleno contacto con la gente para la que trabajamos, conocer todo lo que piensa y lo que siente que tenga que ver con nuestro proyecto. Al fin y al cabo, un usuario tiene razones pero también emociones.
Hacía mucho que no escribía en mi blog ya que últimamente he estado más centrado en el blog de estudio WAB. Sin embargo, no quería perder la oportunidad de recomendaros este post interesantísimo sobre la usabilidad y el diseño en Boagworld.com. Es un claro caso de cómo se puede defender que son disciplinas que van juntas, no una detrás de otra.
Hay gente que se escurre en mitad del andén del metro a las 9h de la mañana y es capaz de levantarse sabiendo reirse de si misma.
Algo parecido ocurre cuando Firefox te da este mensaje. ¿Acaso te puede sentar mal? ¡Si parece que le importa más a él que a ti mismo!
De manual: los niveles de lectura, el icono, comunicar la problemática, ofrecer alternativas y posibles soluciones y presentar acciones claras… pero sobretodo ¡Chapó! Hay personas detrás de esto.
imagen del mensaje de problema en la recuperación de pestañas de Firefox
Hace unas semanas vimos para clase el siguiente vídeo de Joshua Porter para Webstock 09 “Designing Sign Up Screens & Flows”. Se trata de una conferencia sobre las mejores prácticas que se pueden llevar a cabo para crear un formulario lo más fácil y atractivo posible. De este modo, el usuario puede saltar este escollo (que siempre le resulta molesto o fastidioso) para comenzar a usar nuestra aplicación.
Entre los consejos que aportaba estaban el de ofrecer un alta inmediata u ofrecer el servicio sin ningún tipo de compromiso o el mínimo posible.
Joshua Porter at Webstock 09 from Webstock on Vimeo.
Curiosamente, he leído hace un rato un artículo que daba la razón a ese último punto. Se trata de “The $300 Million Button” de Jared M. Spool. Es un artículo muy interesante porque (además de tener el título como de una película) cuanta cómo la simple modificación de un botón puede mejorar drásticamente el funcionamiento de un formulario y por tanto el rendimiento y los resultados de una Web. La clave estaba en explicar al usuario y ofrecerle la posibilidad de escoger. ¡leerlo si podéis!
Para trabajar los copys del proyectos del postgrado, comencé sacándolos todos de sus respectivos wireframes. De tanto repasarlos, tenía la mirada fatigada y necesitaba trabajarlos sobre una superficie nueva. Una vez modificados, el último repaso tuvo lugar nuevamente en los wireframes según los actualizaba con mis últimos cambios.
En ese proceso intermedio, a medida que corregía y les daba una vuelta a los textos, surgían una serie de patrones o normas para unificar, simplificar y dar coherencia a todos los mensajes de la Web se fueron convirtiendo en una especie de guía de estilo para el proyecto en sí y unas pautas para próximas tareas similares.
A continuación las explico:
- Definir los interlocutores: Quién es el usuario y quién el que se dirige a él. Si es una voz impersonal o todo lo contrario. Si habla una jerga en concreto o es lo más generalista posible. Cómo y en qué momentos se refiere a cada uno de ellos. Definir el tono del diálogo.
- Cuando hay problemas: Del mismo modo que se forman gabinete de crisis, hay que definir cómo nos dirigimos al usuario en los momentos en que este va a estar más afectado o molesto en relación con nuestra Web (cuando hay problemas, cuando no funciona alguna página, etc). Hasta qué punto podemos dar determinados mensajes.
- Frases hechas y recursos: Las fórmulas expresivas, los recursos que se repiten para determinados tipos de mensajes hacen que este los reconozca mejor.
- Lenguaje lo más humano posible: Recordar que no están hablando máquinas entre si, sino personas que intercambian información o servicios.
- Corrección lingüística, gramatical, ortográfica: Un error de este estilo puede ser pasado por alto en el mejor de los casos por el usuario pero dice poco de nuestra seriedad.
- Concrección y evitar ambigüedades o confusiones: No digamos por decir ni lo digamos a medias.
- Economía del lenguaje pero sin pasarnos: El usuario puede ahorrarse palabras y nosotros debemos ser concisos, pero no convirtamos la comunicación en algo monótono o exento de calidez.
- Jerarquizar y unificar: procurar que no hubiera párrafos muy lineales y monótonos, destacando las partes más importantes. También procurar que todos los subapartados de un mismo apartado siguieran un mismo patrón común de titular, contenido de explicación, aviso, etc.
- Enlaces accesibles y reconocibles: Porque hacemos bien las cosas.
- Tiempos verbales: usar siempre infinitivos o formas simples verbales cuando sea posible, no marear al usuario.
- El diseño gráfico y los mensajes: El diseño y la comunicación deben ser el mismo, no comunicar ideas o mensajes diferentes.
Recuerdo cuando era pequeño jugando a la Nintendo cómo a la hora de empezar la partida podías escoger tres modos de juego: fácil, normal o difícil. Estos tres modos definían la complejidad de los retos que tenías que afrontar para poder “pasarte”el videojuego. Era común “pasártelo” primero en modo fácil y acabar “pasándotelo” (no siempre) en modo difícil.
Hace poco leí un artículo en boxesandarrows titulado Design for emotion and flow y escrito por Trevor van Gorp que me recordó mucho estos hechos.
El artículo habla de la experiencia de usuario desde un punto de vista psicológico, centrándose en el aspecto de la atención que el autor llama flow. Flow es la atención del usuario puesto sobre una tarea concreta en una interfaz y que se surge de la relación entre la complejidad de esa interfaz y sus habilidades para manejarse con este tipo de herramientas. Para que el usuario pueda cumplir con su tarea necesita que propiciemos esta atención y eliminemos los agentes distractores externos e internos.
Por otro lado, el desequilibrio entre estos factores puede desembocar en aburrimiento (demasiado fácil) o en ansiedad (demasiado difícil). Por tanto, lo que el autor propone es el diseño controlando estos aspectos para propiciar una experiencia óptima del usuario y ofrecer al propio usuario que decida cómo de compleja quiere / necesita que sea la interfaz.Hay que tener en cuenta que también influye el grado de importancia de esa tarea en concreto o la situación o contexto en que se encuentra el usuario.
Cuando tanto la complejidad como las habilidades son de un alto grado (un usuario experimentado en una interfaz compleja) este experimenta lo que el autor llama arousal. Este estado se caracteriza por su alto grado de concentración, pérdida de noción de paso del tiempo, sensación de control absoluto de la interacción, etc.
¡Dios mio! No recuerdo exactamente una web donde me haya ocurrido pero… ¿por qué videojuego podría empezar?
He encontrado esta imagen en la Web y no podía resistir el incluirla. Se trata del Legend of Zelda para Super Nintendo. Al comienzo del juego te familiarizabas con los botones y con el funcionamiento. A medida que ibas recorriendo cada pantalla, los obstáculos y las pruebas se hacían más difíciles pero seguías intentándolo porque cada vez tenías más destreza para manejarte con los controles. Era en estos casos en que puedo poner la mano en el fuego y afirmar que lo que pasaba por mi cabeza… en fin, decir que era arousal es poco.
Otro ejemplo es el Bubble Bobble. Parecía un juego tremendamente fácil pero en las últimas pantallas no había nadie que lo consiguiera.
Conclusión: Por una parte, apuntar los consejos que aporta el autor para manejarnos con este concepto del flow. Entre otros, propiciar que todos los elementos del diseño, de la arquitectura de la información, de la navegación, etc. hagan el uso lo más sencillo posible. Esto incluye aportar un continuo feedback al usuario de las tareas que va cumpliendo. Y también, saber jugar con cada tipo de usuario y sus habilidades para ofrecerle lo que necesita (de lo más sencillo a lo más complejo).
Por otra parte, todo este camino nos lleva una vez más a reflexionar la importancia de que el usuario pueda tener la capacidad de poder decidir y configurar su interacción con la aplicación o la web. Hemos hablado de ofrecer al usuario la posibilidad o incluso el potencial de decidir cómo quiere que sea la estética y la jerarquización de su perfil o su usuario y al mismo tiempo este está decidiendo cómo quiere que sea de sencilla o compleja esta para el visitante.
¿Te acuerdas cómo cuando jugabas a un videojuego podías escoger el modo de juego: fácil, normal o difícil? Este post está muy relacionado.
Hace poco leí un nuevo artículo de Boxes and Arrows. Se trataba de Design for emotion and flow de Trevor van Gorp. Me gustó mucho su análisis desde una perspectiva psicológica de la experiencia de usuario. Este análisis se centraba en dos conceptos principalmente: el flujo o flow y la exaltación o arousal (mi traducción es un poco libre porque creo que es más expresiva que “despertamiento” y un poco más humana que “activación”). Esta reflexión, además, partía de considerar dos tipos de factores que influían: la atención del propio usuario, un recurso escaso, y los objetivos del usuario para con la interfaz (el usuario siempre tiene en mente algún objetivo, ya sea comprar un artículo, mandar un mensaje o encontrar una información determinada).
El flujo es la experiencia de concentración absoluta y como consecuencia la sensación de abstracción de un usuario cuando entre en una interfaz. El flujo es el resultado del equilibrio entre los retos que la interfaz presenta al usuario y la puesta en marcha de sus habilidades del usuario para alzanzar su objetivo. El desequilibrio entre ambos puede derivar en aburrimiento en un caso o en ansiedad y frustración en el otro. Si no sabes a qué me refiero, piensa cuando de niño jugabas a un videojuego nuevo. Además, cuando el grado de habilidad y de desafío son “elevados”, el autor habla del concepto que mencionamos: la exaltación. Esta exaltación afecta a cómo percibimos a su vez las emociones que nos produce la interfaz o nuestra predisposición respecto a ella y es un elemento a tener en cuenta.
También hace relación a las posibles distracciones internas y externas que influyen en la interacción y que deben eliminarse o solventarse en lo posible. Es decir, una cuestión de accesibilidad para los casos en los que trabaja con presión, en circunstancias incómodas o situaciones adversas o complicadas.
Por todo ello, Gorp distingue entre dos tipos de usuarios para relacionar cómo debe ser la interfaz. Cuanta menos habilidad o más dificultad de la tarea a cumplir la interfaz debe ser más sencilla mientras que cuanto más experimentado es el usuario o su tarea menos trascedental (digamos navegar como entretenimiento) la interfaz puede ser más compleja.Es curioso cómo indica que si la tarea además es desagradable
En resumidas cuentas, la sencillez debe estar siempre servida para cualquier usuario y se encuentre este en la situación que esté independientemente de sus habilidades. Y partiendo de que hay mil grados de experiencia, lo mejor es permitir al usuario que defina cómo quiere que sea su interfaz de navegación o de trabajo. Creo que es una buena idea y además un hecho que ya está ocurriendo en el momento que el usuario, por ejemplo, puede instalar en su aplicación nuevos widgets a medida que su habilidad y conocimiento aumenta. El usuario crece, la interfaz también… pero juntos, y esa es una buena experiencia.
Todos los elementos de la web, desde la arquitectura de la información, la navegación, las imágenes, los colores y tipografías, etc. deben evitar la experiencia desagradable del usuario y propiciar este flujo mediante una navegación clara, un feedback constante para el usuario y un equilibrio entre su destreza y los retos que suponga la aplicación para que esta sea en definitiva atractiva.
No soy muy partidario de explicar los hechos únicamente basándome en una relación de causa y efecto ya que pueden influir muchos otros factores y circunstancias. Sin embargo, hay veces que las cosas sencillamente son así porque “todo efecto tiene una causa…” (principio de causalidad).
