Archivo de Categoría «Diseño de Interfaces»

Captura de pantalla de una vista de Mailchimp

Patrones de interacción y trends

Diseño de Interacción, Diseño de Interfaces, Usabilidad

Hace unos días leía en «8 habits of veteran UX designers» en The Next Web, un párrafo que me llamó la atención. Se trata de la importante distinción entre patrones de interacción y tendencias.

(…) it can be difficult to discern a trend sneaking into mainstream design when it becomes ubiquitous. Overtime, popular trends have potential to morph into established patterns, but that isn’t always the case.

8 habits of veteran UX designers

La diferencia entre patrones de interacción y tendencias es clave. No distinguirlos correctamente puede ser el origen de importantes problemas en la usabilidad de un sitio o sistema.

La diferencia entre patrones de interacción y tendencias

Un  patrón de interacción es una solución comprobada —no sólo por uso, sino por observación, comprobación y documentación—, para un problema común en la interacción entre un usuario y una interfaz. Se puede tratar de un patrón para una interacción simple —como el menú de rastros— o de una interacción compleja —como la reserva de vuelos u hoteles.

Una tendencia —o trend— es una moda, una práctica relativamente extendida, que no necesariamente resuelve un problema, pero que es adoptada por razones estéticas, por disponibilidad —es de fácil acceso— o por la creencia, no necesariamente justificada, de que resuelve un problema —¿carrusel, me escuchas?

La adopción irreflexiva de tendencias puede introducir nuevos problemas, en lugar de resolverlos, pero también es posible que una tendencia que resuelve problemas reales se convierta en un patrón.

En general, existe coincidencia en las ventajas del uso de patrones de interacción, así como muchos patrones documentados y librerías, pero eso no es garantía de que estén libres de tendencias que aún no se han consolidado como patrones.

Lo recomendable, finalmente, es tomar cada uno de estos elementos —patrones y tendencias— con una pausa para distinguir cuál es el problema que buscan resolver y, en lo posible, probar con usuarios si efectivamente los resuelven.

(Imagen principal: patrones de interacción de MailChimp)

Breve reseña del concepto Experiencia de Usuario

Arquitectura de Información, Diseño de Interacción, Diseño de Interfaces, Experiencia de Usuario, Usabilidad

Comencemos por lo primero: ¿qué es Experiencia de Usuario? Aunque se puede definir desde diferentes perspectivas, podemos decir que se trata de un enfoque en el diseño de productos —en gran medida digitales, aunque no restringido a ellos— que se basa en la investigación de las necesidades y comportamiento de los usuarios para crear productos que, a la vez de ser funcionales, generan satisfacción en sus usuarios.

El concepto de Experiencia de Usuario —o User Experience, en inglés—, es relativamente nuevo. Digo relativamente, porque su uso extendido se observa recién desde los últimos 10 años.

El término, sin embargo, tiene una historia más extensa. Ya a mediados de los ’90 Donald Norman, mencionaba la «Experiencia de Usuario» y la describía como la forma en que

(…) cover some of the critical aspects of human interface research and application.

cubrimos algunas de los aspectos críticos de la investigación y aplicación de la interfaz humana.

What You See, Some of What’s in the Future, And How We Go About Doing It, Don Norman, Jim Miller, Austin Henderson

Esto como parte de los debates de CHI ’95 y en relación a su trabajo en Apple.

Otro hito relevante es la publicación en 2002 de «The elements of user experience» —Los elementos de la experiencia de usuario—, de Jesse James Garrett, que ordena la serie de disciplinas que se relacionan con la experiencia de usuario y lo visualiza en un conocido diagrama (PDF).

elements-of-user-experience

Pero no fue sino en 2005 cuando el concepto de User Experience comienza a tomar vuelo por sí mismo. El contexto era el rebote luego del desastre de las «.com» y la emergencia de la llamada «Web 2.0».

De hecho, en 2005 Garrett acuña el concepto de «Ajax», parte central de la web 2.0 y Adaptive Path —de la que Garrett es co-fundador— organiza la primera UX Week. De ahí en adelante, la UX fue mainstream.

IMG_1312

UX week de 2005, foto © Jared Spool

Quizá la señal más potente de lo que el concepto UX traía a la industria, fue el reconocimiento de la Usability Professionals Association —UPA—, una de las organizaciones profesionales con un perfil más académico, que en 2012, luego de una extensa y compleja discusión extensa, cambia su nombre a User Experience Professionals Association, UXPA.

Esto fue polémico y causó la irritación de las otras asociaciones y disciplinas profesionales, que acusaron a la UXPA de oportunismo, de monopolizar un concepto que incluía también a los profesionales de la Arquitectura de Información o el Diseño de Interacción.

Hubo reacciones indignadas de notables miembros de la comunidad, como Louis Rosenfeld, con su respuesta a la «Carta abierta a la comunidad de Experiencia de Usuario», con que Rich Gunther, Presidente de UPA a la fecha, anunciaba el cambio a UXPA.

Pero el concepto continuó extendiéndose, al punto que hoy es un concepto establecido y parte de la descripción laboral de muchos profesionales y equipos.

Al día de hoy, ya es un nombre establecido, difundido y, hasta cierto punto, comprendido por practicantes y clientes.

La pregunta de rigor es: ¿por qué «User Experience» se impuso por sobre las etiquetas previamente existentes? Creo que son dos las razones principales:

  • La facilidad de comprender un proceso más completo, en el que convergen diferentes disciplinas, con un concepto unificador;
  • Desde una perspectiva comercial, la facilidad de comunicar un concepto claro, con resultados concretos.

Un proceso unificado

Hasta antes de asimilar masivamente el concepto de UX, hablábamos de usabilidad, arquitectura de información, diseño de interacción, diseño de interfaces, diseño visual, etc. Si bien existen diferencias entre las diferentes disciplinas, el tener una visión unificada del resultado, y una cierta visión sobre el proceso, tiene ventajas. Ha contribuido a entender que cada disciplina aporta al resultado, y que el resultado es mucho más que sólo la suma de las disciplinas.

Un término fácil de comunicar

Hasta antes de que se acuñara y se asimilara la UX como concepto, abundaban los nombres para describir procesos y resultados similares. Pero la confusión para los clientes era grande. Y el esfuerzo para intentar explicar lo que proponías a un cliente, era mayor.

De hecho, las etiquetas para las descripciones laborales reflejaban esa confusión: podías ser un Arquitecto de Información, Experto en Usabilidad o Diseñador de Interacciones, pero en la práctica hacías lo mismo, o cosas muy similares. O las hacías todas en diferentes momentos.

En suma, el concepto de Experiencia de Usuario ha venido a resolver un clásico problema de significante y significado, en el que teníamos un contenido —las disciplinas, métodos y procesos—, pero no había un denominador que facilitara su comunicación.

UX ha facilitado eso. Claro, ahora surgen otros problemas, como la de-significación del concepto —ya se quejaba de ello Norman en 2007 en una entrevista con Peter Merholz— o la trivialización de la práctica, pero esas son otras batallas.

Diseño de Formularios para el Web

Diseño de Interfaces, Usabilidad

Este era un libro que venía esperando desde hace ya tiempo, y apenas estuvo disponible compré la versión electrónica. Se trata de Web Form Design: Filling In the Blanks, de Luke Wroblewski. La calidad del libro cubre las expectativas, pero lo que me parece particularmente notable es la apuesta de la casa de publicación de Louis RosenfeldRosenfeld Media: el libro fue publicado en formato papel y en digital. Pero la versión digital no es cualquiera, es una versión especialmente preparada para ser leída en pantalla. Otro aspecto destacable, es que todas las ilustraciones y capturas de pantalla del libro están disponibles vía Flickr.

Hechas ya las notas respectivas, no me queda sino invitarlos a leer Web Form Design. Los formularios electrónicos del mundo te lo agradecerán.

La Evolución de una Idea

Diseño de Interfaces

Una de las cosas que me apasiona en el diseño de interfaces es observar el proceso de evolución de una idea. Acabo de ver en Signals vs. Noise un post sobre el desarrollo de una idea que están incorporando a uno de sus productos estrella, Basecamp.

Se trata de una idea simple, pero que cualquiera que haya usado alguna de las aplicaciones de gestión de proyectos en línea valora: mientras estás editando una tarea o trabajando en un proyecto, no siempre es fácil cambiar a un proyecto diferente. Normalmente requiere ir a la sección de proyectos o al dashboard para seleccionar el proyecto. Pues bien, lo que están haciendo los chicos de 37Signals es agregar un menú que permite desde cualquier página cambiar al detalle de otro proyecto.

Claro, esto que parece simple, puede no serlo tanto al momento de diseñarlo. El proceso de desarrollo de esa idea es lo que nos muestran en el post Design Decisions: Basecamp Project Switcher. Con fotos y video.

Pizarras Muro a Muro

Diseño de Interacción, Diseño de Interfaces, Experiencia de Usuario

Una de las cosas más útiles cuando uno está trabajando en equipo boceteando diagramas o realizando cualquier actividad de arquitectura de información o diseño de interacción, es una buena pizarra. Pero en la medida que las cosas se van complicando, y los diagramas crecen, las clásicas pizarras se hacen pequeñas. Por eso, desde hace tiempo que soñaba conpizarras gigantes, y eso es lo que armamos en la nueva oficina de Amable en Santiago. Son paneles de fibra de madera aglomerada de alta densidad con una cubierta lacada blanca, en dimensiones de 2,44 x 1,52 metros. Los invito a ver los resultados:

pizarra-01

Incluso una pizarra así de grande se hace pequeña a veces. Este es un panel completo adosado a la pared.

pizarra-02

Esta es una pizarra de dos paneles… y también está llena.

Además de lo simple, estos paneles son muy baratos, así que la única excusa para no armar algo así, es no tener suficiente espacio.

Diseño de Información y Disonancia Cognitiva

Diseño de Interfaces

Hace unos días en casa compramos un hervidor eléctrico de agua. El aparato funciona bien, hace lo que se supone que tiene que hacer: hervir agua. Sin embargo, cuando quise calentar agua para dos tazas grandes de té, algo así como 500ml, me llevé una sorpresa.

hervidor-02

El hervidor eléctrico en cuestión.

El hervidor tiene una zona translúcida que permite ver el nivel de llenado, y al costado, en vertical, tiene una serie de íconos pequeños de tazas con un número en su interior. Evidentemente es una escala que indica algo. El problema es que lo que indica es completamente ambiguo, porque existe una disonancia entre el ícono y la informaciónque busca entregar.

hervidor-01

Detalle del hervidor, donde se aprecia la escala que indica el nivel de llenado.

Desde abajo hacia arriba, hay 3 íconos de tazas con indicadores numéricos: 0,5 (MIN), 1,0 y 1,7 (MAX). Supuse que lo que se informa es la cantidad de tazas que corresponden al nivel de llenado. Pero la cantidad de agua para una taza era evidentemente demasiada. Lo que realmente busca informar es la cantidad de agua en litros.

El problema se origina en que el ícono de las tazas conduce a pensar una cosa, en circunstancias que se trata de otra. Si veo una taza asociada a un número, pienso que me indica cuántas tazas de agua contiene el hervidor. Este es un caso típico en que los íconos están siendo usados como elemento decorativo antes que informativo.

Esto es lo que en psicología se conoce como disonancia cognitiva. Según Wikipedia,disonancia cognitiva es:

(…) la tensión o desarmonía interna del sistema de ideas, creencias, emociones y actitudes (cogniciones) que percibe una persona al mantener al mismo tiempo dos pensamientos que están en conflicto (…)

En concreto, un sistema de información, los íconos que representan las tazas dispuestos verticalmente como una escala, indican tanto una forma de graduar (1, 1,7), así como uncontenedor (una taza de agua). En tanto el volumen de agua contradice la información aparente: lo que se indica como una taza, es claramente más que el contenido de una taza de agua. Lo que obtengo, entonces, es una información que contradice a otra, por lo que tengo que resolver la tensión en un acto consciente

Este ejemplo es algo simple y uno puede resolver la ambigüedad rápidamente, luego de un momento de atención. A lo peor, va a terminar con más o menos agua caliente de lo que se necesita. Pero cuando vemos este tipo de conflictos en sistemas más sensibles, como por ejemplo flujos de pago, procesos de compra o transferencias de dinero, la situación cambia.

La moraleja de todo esto es: los mensajes ambiguos o contradictorios pueden ser un elemento negativo e incluso provocar problemas serios en interfaces para procesos complejos, por lo tanto hay que cuidar que la información sea directa, precisa y sin ambigüedades.

El Valor de los Menús de Rastros

Diseño de Interfaces, Usabilidad

Hace casi dos años documenté un patrón de navegación secundaria que aunque tiene un uso menor, es de gran utilidad para quienes lo conocen: el menú de rastros.

Pues bien, el último alertbox de Nielsen trata sobre este elemento, conocido también comobreadcrumbs. Básicamente Nielsen promueve su uso y señala que aunque es utilizado por pocos usuarios, su presencia no perturba a quienes lo ignoran. Es más, indica que la tendencia observada es que los usuarios lo utilizan cada vez con más frecuencia. Y que dado que utilizan un espacio muy pequeño, los beneficios de usarlo son mayores que los argumentos para no hacerlo.

Los invito a refrescar este interrumpido (aunque no eternamente) intento de documentar patrones de interacción: Menú de Rastros.

Semáforos con Botones: Placebos Mecánicos

Diseño de Interfaces, Experiencia de Usuario

¿Alguna vez te has sentido como Locke en Lost, presionando el botón de los semáforos sin saber si eso realmente sirve para algo? ¿Cambiará más rápido la luz del semáforo?

ep202_19b_360x240

Locke, el personaje de Lost, ingresa el código numérico cada 108 minutos sin saber qué pasará cuando no lo haga… (foto de ABC)

Pues sucede que en muchos casos el botón no hace nada realmente. Funcionan como placebos mecánicos. El efecto que producen los botones de los semáforos es reducir la ansiedad de la espera y entregar, de paso, la ilusión de control.

El 2004 The New York Times publicó un artículo en el que contaba cómo los botones de los semáforos, que alguna vez fueron realmente funcionales, fueron desactivados con la implementación de sistemas de control de tráfico computarizados. El artículo explica los detalles y la historia de estos botones junto con las impresiones de los peatones que se enfrentan a ellos. Sobre el mismo tema, el Honolulu Advertiser también publicó un artículo poco tiempo después.

No deja de ser curioso que algo que ocurrió casualmente (el que los botones dejaran de funcionar y permanecieran instalados) continúa hasta hoy haciendo creer a muchos que existe un efecto real. La lógica de esto es que si el botón está ahí, existe alguna posibilidad de que funcione, y como es poco probable que el presionarlo cause algún problema, lo presionamos por si acaso. Aunque esto no tenga ningún efecto real, se reduce la percepción del tiempo de espera. Incluso si el tiempo es el mismo.

Todo esto se basa, naturalmente, en que algunos botones en semáforos sí funcionan, o en que alguna vez funcionaron. Esto le da credibilidad a todo el sistema y permite que nos engañemos pensando que todos funcionan. O al menos a que lo consideremos una posibilidad.

334213_spanish_traffic_light_green

El tiempo de espera para que cambie la luz del semáforo puede causar impaciencia en los peatones. El botón que existe en algunos semáforos no siempre funciona (casualmente o por diseño), pero crea una percepción de disminución de la espera y de aparente control (foto en stock.xchng, por pixman).

¿Podría utilizarse el efecto placebo en el diseño de interacción? Se me ocurre un ejemplo en que se utiliza un efecto similar: las animaciones que utilizamos para representar la carga de un elemento. Me refiero a las animaciones en Flash o en Ajax, en que no se indica el porcentaje de avance, sino solamente que está ocurriendo algo. No se está informando cuánto tiempo falta, solamente que debe esperar. Sin embargo ayuda a disminuir lapercepción de espera, en la medida en que el tiempo que transcurra sea breve. Evidentemente si la espera es demasiado larga, ninguna animación será efectiva y el usuario terminará frustrado. El efecto es parecido, aunque en realidad no ocurre una interacción real con el usuario.

Pero no saltemos rápidamente a conclusiones. No podemos pensar que intencionalmente podríamos utilizar este tipo de efecto placebo en un sistema interactivo sin consecuencias. En el caso de los semáforos, los usuarios tienen una duda razonable sobre la utilidad del botón, pero lo utilizan porque no hay un daño o perjuicio al presionarlo. Esta duda, no obstante, es un lujo que no podemos permitirnos fácilmente. Uno de los atributos más difíciles de lograr y muy frágil como para jugar con él es la confianza. Si juego con la credibilidad de los usuarios, las consecuencias pueden ser demasiado caras.

En el blog History of the Button hay una nota interesante sobre los botones de los semáforos, y si no lo has visto antes, es un sitio obligatorio para todos los interesados en el diseño de interfaces.