tentándote.com

Estos son dos de los controles de interfaz que me han llamado la atención últimamente. Ambos pertenecen a la suite de Google Docs.

El primero se encuentra en el gestor de archivos que aparece nada más acceder a Docs. Es un control que permite seleccionar los elementos del listado de elementos que se está viendo. A continuación se muestra tal cual aparece nada más acceder a Google Docs, sin haber hecho clic en el control:

En lugar de utilizar el clásico checkbox incluido en la cabecera de tabla alineado con los checkbox inferiores que permite, activándolo o desactivándolo, seleccionar todos los elementos de una sola vez en lugar de hacerlo uno por uno (ver estados de interacción a continuación en AOL Mail y el Explorador de Windows Vista):

en Google Docs, al hacer clic sobre el mismo aparece un menú desplegable con dos opciones:

• Seleccionar todos los elementos (nº elementos)
• No seleccionar ninguno

que permiten realizar las mismas opciones pero explicitándolas haciendo que sea más predecible el funcionamiento del componente.

Una cosa que no termina de convencerme es que, en el diseño del control, estén o no estén los elementos inferiores seleccionados, el checkbox aparece siempe como seleccionado.

También me llama mucho la atención el uso del color que se hace en el gestor de Google Docs. Tal ycomo está ahora mismo, por defecto, todos los elementos del listado aparecen con un color de fondo que es un azul muy claro que indica un estado inactivo:

Cuando se seleccionan uno o varios elementos el color de fondo cambia a uno más claro indicando el estado activo:

Es justo el patrón contrario que se ha seguido hasta ahora en todos los sistemas operativos Windows, Mac, Linux y aplicaciones web (ver por ejemplo la captura del explorador de Windows Vista más arriba para observarlo), color claro para estado sin seleccionar, color más oscuro para elementos seleccionados.

El otro control de interfaz que me ha llamado la atención es el que aparece en la paleta de colores de Spreadsheet de Google Docs. Concretamente el diseño del recuadro de color cuando se ha seleccionado en la paleta. A continuación el aspecto que tiene en Spreadsheet de Google Docs:

Además de resaltar sutilmente con un borde que da aspecto de botón hundido el color seleccionado, le ponen una marca de check al mismo para distinguirlo claramente.

El mismo control en Excel con un color seleccionado (recuadro sombreado en rojo):

¿Qué os parecen los controles? ¿Opiniones sobre los distintos estados de interacción / diseños gráficos?

Llevo unos días leyéndome el libro de Joshua Porter: Designing for the Social Web lo que me ha llevado a toparme con una reflexión en las páginas 14 y 15 que Porter sumariza en un estupendo gráfico de esta última.

En concreto la reflexión viene en torno a la evolución de la comunicación que ha tenido lugar en la World Wide Web.

• Desde los primeros años de su aparición hasta aproximadamente 1998, la comunicación que se daba era fundamentalmente unidireccional, de los sitios de las empresas a las personas. El contenido era estático, los sitios eran estáticos, las tecnologías inmaduras y el potencial de la Web como canal, medio y espacio social no se había desarrollado todavía. La Usabilidad y la Experiencia de Usuario no se habían formalizado.
• Desde 1998 la evolución de las redes de telecomunicaciones, del hardware y del software (especialmente con los hitos históricos que supusieron la aparición de Windows 95, 98 y XP en el 2001 con sus interfaces gráficas) unidos a la extraordinaria mejora de la facilidad de uso de los sistemas operativos, de los navegadores y de la aparición de tarifas planas para navegar, popularizaron definitivamente la Web. Las tecnologías web permitieron desarrollar las primeras aplicaciones en línea. La Interacción (en mayúsculas) comenzó a tomar fuerza en la Red de redes  y con ella, la Arquitectura de Información. La comunicación comenzó a ser bidireccional aunque muy limitada todavía, entre aplicaciones y personas.
• En torno a 2001 se da un punto de inflexión. La Web comienza a volverse más semántica. En 1999 se publica la primera especificación del RSS y aparece el cliente de mensajería instantánea Messenger de Microsoft. Google, fundado en 1998, comienza a tomar fuerza. Las tecnologías web maduran. La comunicación bidireccional empieza a tomar realmente fuerza y a fluir entre aplicaciones y personas. Eran los inicios de la Web 2.0 y de la comunicación de “n” a “n” o de muchos a muchos, entre individuos.
• A finales de 2003 – 2004 “estalla” la Web Social. O’Reilly populariza el término de Web 2.0 en su famosa conferencia. En 2003 aparecen MySpace, Linkedin y XING (hasta 2006 llamada OpenBC). Un año más tarde, en 2004 surge Facebook, y en 2006 Tuenti. Las interfaces empieza a volverse más líquidas y las aplicaciones y la interacción, ricas, con la constante evolución de las tecnologías. La plataforma estaba preparada. La potencia del hardware y la evolución del software y del diseño de las interfaces comienza a ser suficiente para dar lugar a una interacción mucho más fluida, sincrónica (simultánea en el tiempo) y asincrónica entre las personas, los sitios y las aplicaciones web.

Esta trayectoria se recoge y sumariza en el gráfico original de Joshua Porter publicado  en la página 15 de Designing for the Social Web que me he permitido traducir y adaptar para mejorar su comprensión:

En la actualidad estamos viviendo otro profundo cambio en el modelo de comunicación que gira en torno a los siguientes paradigmas:

• el declive del papel como principal soporte informativo, que está siendo reemplazado por la aparición de dispositivos digitales como el iPad y los tablet que permiten una conexión permanente con la Web.
• La tendencia de las aplicaciones a migrarse a la nube lo que implica que la información pueda ser accedida en cualquier momento, desde cualquier lugar y por múltiples tipos de dispositivos más allá de los PCs y portátiles (particularmente los teléfonos inteligentes o smartphones como el iPhone o los basados en el sistema operativo Android).
• La aparición de nuevos dispositivos que extienden la interacción háptica o táctil al mundo digital.
• La mejora de las redes de telecomunicaciones y especialmente la introducción del 4G que en breve permitirá comunicaciones entre 100 Mbps y 1 Gbps, incluso en dispositivos móviles.

Las tecnologías existen y están bastante maduras. Se ha avanzado extraordinariamente en los 15 últimos años en lo que a Usabilidad, Arquitectura de Información y Diseño de Interacción se refiere.

Ahora es cuando los aparatos y las interfaces comienzan a diluirse y hacerse verdaderamente invisibles para centrarse en los humanos y cuando la comunicación comienza a ser realmente natural y multimodal. Una comunicación humana centrada en los humanos y para los humanos, no para usuarios que sufren la tecnología.

Dos de las mejores cosas que tiene el escribir un blog son el esfuerzo que exige para mantenerte al día si quieres publicar algo mínimamente decente, y los comentarios que hacéis, con los que en ocasiones uno aprende mucho, y más, que lo que ofrece. El otro día a partir de uno de esos comentarios que hizo Sergio Ortega Santamaría fuí a dar con un estupendo post de su blog titulado:

¿El paraguas será la Experiencia de Usuario?

sumamente interesante que ha inspirado dos breves notas Thinkepi. Una, la tenéis un poco más abajo. Le he pedido permiso a Sergio y a Daniel Torres Burriel para reproducir íntegramente su post y comentarios, para publicarlos como una sóla unidad documental en el próximo anuario Thinkepi en papel y en este blog, así como para distribuirlos en la lista de Información y Documentación Iwetel

A ambos, muchas gracias.

La otra, posiblemente vea la luz la semana que viene. Os dejo con el post de Sergio y el Thinkepi:

–0–

¿EL PARAGUAS SERÁ LA EXPERIENCIA DE USUARIO?

SERGIO ORTEGA SANTAMARÍA. Post publicado el 28 dic. 2009

–0–

Recogiendo la metáfora del paraguas de UXnet que describíamos en el Informe APEI, Thomas Memmel reflexiona sobre la integración de roles y disciplinas bajo el concepto Experiencia de Usuario (UX).

Lo curioso es que el autor no duda en augurar para el 2010 la desaparición de la Arquitectura de Información (IA), disciplina que sería absorbida por el Diseño de Interacción (IxD):

“La Arquitectura de Información se ha asociado especialmente con la definición de estructuras de contenido y navegación estáticas. Hoy día, las tecnologías como Silverlight, AJAX y Flash han convertido a la Web en un medio altamente interactivo. Debido a que el diseño de estos sistemas interactivos es conocido con el término de Diseño de Interacción (IxD) ésta absorberá a la AI como disciplina. Naturalmente, esto vendrá acompañado de una necesidad creciente de Arquitectos de Información que extiendan sus capacidades de diseño y su conocimiento más allá de las formas estáticas de representación del contenido”.

“IA was especially associated with an expertise in building content and navigation structures that rather had a static form. Today, technologies like Silverlight, AJAX and Flash turn the web into a highly interactive media. Because the design of interactive systems is headlined with the term interaction design (IxD), it will absorb IA as a discipline. Naturally, this comes with an increasing need for IAs to enhance their knowledge and design capabilities beyond static forms of content representation”.

No estoy tan de acuerdo con estas afirmaciones ya que se está reduciendo en exceso la IA  sin valorar su importancia en otros contextos y entornos de desarrollo.

Por esa y otras muchas razones prefiero pensar en el 2010 como el año en el que descubrimos el verdadero sentido de un enfoque multidisplinar donde puedan surgir nuevas actividades profesionales, nuevos roles y nuevas formas de trabajo que sirvan para aunar esfuerzos. Si la UX nos ayuda a encontrar el nexo de unión, bienvenida sea.

Pero creo que la clave no está en remover la terminología que está en la superficie como en llegar a una mayor y profunda comprensión de cada disciplina y de de la tarea y la responsabilidad que cada uno debemos asumir en el trabajo conjunto.

En ese sentido me parece muy apropiado el Dilema de Branzi y los últimos párrafos de esa lectura profunda y reflexiva de Buchanan (PDF, 52Kb), recordada por Ghost in the Pixel, y tan adecuada para estos últimos días de año:

“No hay razón para sentirse infeliz con la pluralidad de las exploraciones del diseño en el mundo contemporáneo mientras no nos hagan caer en ideologías, y cada uno de nosotros podamos elegir nuestro propio camino dentro de unos razonables límites de responsabilidad, basada en discusiones meditadas acerca de lo que es bueno, oportuno, útil o placentero.
Podemos preocuparnos por el trabajo que vemos hoy día en torno al diseño gráfico o industrial y estar encantados por una amplia gama de otros trabajos.
El Diseño es muy joven y todavía tiene mucho camino por recorrer en la exploración de su rol en la cultura. Para muchos de nosotros esto significa una comprensión más profunda de las disciplinas del pensamiento del diseño, no simplemente cambios en el estilo y en el tratamiento de su superficie. Esperamos que la calidad de la discusión continúe avanzando y que los diseñadores no se preocupen porque sus ideas y su trabajo sea sometido a un debate más amplio y en profundidad que en el pasado. Tenemos mucho que aprender viviendo en una cultura que no es fija ni inmutable, y esta es, a la vez nuestro placer y nuestra responsabilidad”.

“There is no reason to be unhappy with the pluralism of design explorations in the contemporary world, so long as these explorations are not entrapped in ideology and each of us may pursue our own paths in design within the reasonable bounds of responsibility, based on informed discussions of what is good, just, useful, and pleasurable.
We may be distressed by some of the work that we see in graphic and industrial design today and delighted by a wide range of other work.
Design is very young and has far to go in the exploration of its role in culture. For many of us, this means better understanding of the disciplines of design thinking, not merely changes in style and surface treatment. Our hope that the quality of discussion about design continues to improve and that designers do not become afraid of having their ideas and work subjected to wider and more insightful discussion than in the past. We all have much to learn about living together in a culture that is not fixed and changeless, and this is both our pleasure and our responsibility”.

COMENTARIOS:

torresburriel dice:

Precisamente hoy estaba pensando, en el transcurso de una sesión de trabajo, que la estrategia de diseño basada en la simplicidad por la vía de la priorización hace que la arquitectura de información parezca dejar de tener sentido.

Entiendo que eso sólo sería posible si realmente los proyectos redujeran al máximo su alcance (en cuanto a información, contenidos, funcionalidad), cosa poco probable hoy día, salvo en contados ejemplos: twitter o la versión lite de facebook, por poner dos ejemplos (http://ow.ly/PNDe).

Pero fíjate que aun perdiendo predominancia en algunos proyectos, tal y como señalas, creo que la arquitectura no deja de ser una parte muy importante que siempre esta presente, que no podemos obviar, aunque no hayamos pensado en ella (seguramente porque otro lo ha hecho por nosotros).

De esta manera, desde una perspectiva sistémica, las “propiedades emergentes” de un sistema (equilibrio, funcionalidad, placer de uso… ) no las vamos a encontrar en la arquitectura, en el diseño de la interfaz,en el diseño de interacciones… Creo que dichas propiedades surgen cuando todas esas partes actúan. De ahí la insistencia de valorar la responsabilidad y la tarea de cada actividad profesional en el conjunto.

–0–

THINKEPI: ARQUITECTURA DE INFORMACIÓN Y DISEÑO DE INTERACCIÓN, DOS DISCIPLINAS DIFERENCIADAS EN EL MARCO DE LA EXPERIENCIA DE USUARIO

En mi opinión, la Arquitectura de Información (AI) no desaparecerá. Creo que el Diseño de Interacción es una cosa y la AI es otra. Ambas a su vez, conforman efectivamente, una parte importante de la Experiencia de Usuario  que veo como marco global. Ahora bien, la AI es la vertiente más “documental” del diseño de espacios de información y una parte imprescindible e insoslayable de dicho diseño por lo que no creo ni que desaparezca, ni que pueda ser obviada ni asumida por terceras disciplinas.

El Diseño de Interacción tiene unos objetivos específicos que no son precisamente los de sistematizar el espacio de información, ni plantear una adecuada navegación, ni facilitar que los elementos o unidades informativas del sitio estén correctamente descritos, de que exista una metaestructura informativa adecuada, de que el contenido sea adecuado, de que se puedan indexar correctamente sus elementos constituyentes, de que se puedan compartir y difundir (vía sindicación de contenidos o terceros medios) o de que puedan ser correcta y fácilmente encontrados y recuperados por parte de los usuarios y gestores de los mismos (o lo que es lo mismo, que sean “findables”). Esas tareas no entran dentro de lo que se entiende como Diseño de Interacción y sí dentro de lo que se entiende como Arquitectura de Información.

El Diseño de Interacción se centra principalmente en el diseño de la interfaz y de los elementos con los que interactúa el usuario, en la identificación y análisis de los objetivos y tareas que se dan en un espacio de información, y en el análisis del diseño de los flujos y procesos de interacción en el mismo.

AI y Diseño de Interacción son complementarias. El hecho de que como sintetiza perfectamente Torres Burriel “la estrategia de diseño basada en la simplicidad por la vía de la priorización [haga] que la arquitectura de información parezca dejar de tener sentido” y de que ambas disciplinas las lleve a cabo habitualmente la misma persona o profesional de forma recurrente (aunque algún compañero conozco que en algún proyecto ha actuado y actúa exclusiva y únicamente como Arquitecto de Información puro y duro -lo que no es lo usual-) no implica que puedan y deban diferenciarse, ni que la primera vaya a desaparecer absorbida por la segunda. Conviven en el marco de la Experiencia de Usuario.

En cuanto a la denominación de la persona que las ejerce, si se quiere buscar un título común quizá se pueda hablar como se hace ya desde hace algún tiempo de Arquitectos de Experiencia de Usuario en lugar de Arquitectos de Información o de Diseñadores de Interacción. Ahora bien, cada cual que use el nombre que más le convenga o con el que más cómodo se encuentre. El debate está abierto y creo que es precisamente una consecuencia natural de la evolución de estas disciplinas en los últimos años, lo que por otro lado es una buena muestra de su dinamismo, pertinencia y vigencia, y de que están madurando.

BIBLIOGRAFÍA:

• Ortega Santamaría, Sergio. ¿El paraguas será la Experiencia de Usuario? [en línea]. Sortega: Comunicación, usabilidad, diseño e interacción. 28 dic. 2009. http://www.sortega.com/blog/%C2%BFel-paraguas-sera-la-experiencia-de-usuario/#comments [Consulta: 06 ene. 2010]
• Torres Burriel, Daniel. Weblog: Torresburriel.com [en línea] http://www.torresburriel.com/weblog [Consulta: 7 ene. 2010]
• UXNet: The User Experience Network [en línea] http://www.uxnet.org/
• Tosete Herranz, Francisco. La rueda de la Experiencia de Usuario [en línea]. Imaginas.net. http://www.imaginas.net/esquemas
• Hassan Montero, Yussef, Ortega Santamaría, Sergio. Informe APEI sobre Usabilidad [en línea] no solo usabilidad. http://www.nosolousabilidad.com/manual/1.htm [Consulta: 6 ene. 2001]
• Memmel Zuerich, Thomas. Under the umbrella of User Experience – Usability Engineering and Interaction Design in 2010 [en línea] The usability architect. http://www.usability-architect.com/2009/12/under-umbrella-of-user-experience.html  [Consulta: 6 ene. 2001]
• Buchanan, Richard. Branzi’s Dilemma: Design in Contemporary
  Culture [en línea] http://mitpress.mit.edu/journals/DESI/Buchanan.pdf [Consulta: 6 ene. 2001]
• Gajendar, Uday. What it all comes down to [en línea] Ghost in the pixel. http://www.ghostinthepixel.com/?p=295

Algunos controles de interfaz y páginas web que me han llamado la atención navegando:

En Boo.com me he encontrado un curioso filtro. En la home se puede observar junto al box de búsqueda por ciudad o nombre de hotel un deslizador que permite restringir los resultados a los hoteles de “n” estrellas. El uso del deslizador permite establecer un rango de las categorías de hoteles que nos gustaría consultar: entre ninguna y 3 estrellas, entre 2 y 5 estrellas..

Lograr el mismo comportamiento sin utilizar el deslizador y con controles “más estándares” es complicado y menos usable. Un posible diseño sería disponer de dos combos desplegables, uno rotulado como “hoteles desde…” y cuyos valores fueran desde ninguna estrella hasta 5, separando ambos combos la palabra “hasta” y otro combo rotulado como “hoteles hasta…” con valores que deberían variar en función de la selección que hiciera el usuario en el primer combo.

Muy complejo. Mejor el deslizador aunque habría que chequear su uso de cara a accesibilidad para asegurarnos de que no da ningún problema.

Por cierto, la forma en que se ha resuelto el diseño gráfico de las pestañas en ese módulo de búsqueda es francamente mala cuesta muchísimo percibirlas como tales y establecer la correcta asociación entre la pestaña que está activa y la parte inferior.

Cuando se ha hecho una búsqueda cualquiera me ha llamado también la forma en que han resuelto el sistema de navegación más allá de la propia home:

Boo.com Barra de navegadión con filtros (combos desplegables) en segundo nivel de navegación

En el segundo nivel de navegación, situados a la izquierda, los dos combos desplegables permiten escoger el país y la ciudad y en función de la selección realizada, el resto de opciones de segundo nivel de navegación que a su vez actúan como filtros, se actualizan. Algo similar al sistema de navegación de Idealista.com u 11870.com. Quizá, lo mejor de ello sea lo compacto que queda, y la fuerte jerarquía y relación horizontal que se establece. Normalmente los filtros solemos verlos en una columna situada a la derecha y cuyos elementos se jerarquizan de arriba a abajo. Esta es otra opción de navegación. Me gusta.

Cambiando de sitio, navegando he ido a dar con una consultora inglesa cuyo diseño del sitio me parece francamente majo: Clearleft.com

Un diseño muy limpio, una escala de colores muy cálida, cercana, verde lima, con todos los valores positivos que se le asocian. En la home dejan bien claro lo que hacen, sus fortalezas, lo que quieren y la forma de contacto todo por encima del pliegue de pantalla y haciendo scroll vertical, desplegando el resto de información importante en tres bloques adicionales “Web design & Consultancy”, “Clearleft news” y “What next” resaltados fuertemente gráficamente sobre un rectángulo de fondo marrón con un borde de 1px blanco que lo potencia respecto del fondo y que funciona como conector entre las camas de color de los cuatro bloques en los que está separada la home, el primero situado por encima del pliegue de pantalla y los tres restantes citados.

La retícula en tres columnas al 33% con sus medianiles y que rompen en el primer módulo (el pliegue de pantalla) en el que se entra al 100% de ancho  y el último “What next” en el que las columnas se distribuyen al 66% y 33% respectivamente dan fuerza, ritmo e interés al diseño.

Se utiliza una jerarquía tipográfica muy clara jugando con los tamaños y con los cuerpos en negrita para centrar la atención donde interesa. Se hace un uso muy comedido de la imagen y con excepción del tercer módulo, se cuida bastante la carga textual de cada bloque.

Home de la consultora de UX inglesa Clearleft.com

Me gusta el detalle de las pestañas superiores y como crean una fuerte tensión visual rompiendo la linealidad del bloque de la cabecera con las opciones de navegación, y la pestaña activa que conecta la cabecera con el módulo inferior al desbordar sus límites. Utilizan además una sombra creando un efecto de oclusión o 3D sutil, para resaltarla. Asimismo, me gusta también el efecto de hover en el que se establece claramente el estado de transición antes de hacer clic en la pestaña sobre la que se encuentra situado el cursor:

Estado de transición de las pestañas de la navegación principal. Cuando el cursor se posiciona encima de una (en este caso "What we do") se resalta ligeramente por debajo de las demás pero no tanto como la actual seleccionada, y su cuerpo cambia de color a gris oscuro

Por último, como comentaba, se hace un buen uso de la imagen. En la captura, la página del equipo. Muy buen detalle el romper la linealidad recta del diseño alabeando ligeramente a izquierda y derecha las fotos de los miembros y superponiéndo las esquinas unas encima de otras como si las tuviéramos encima de una mesa y no enfrente de nosotros:

Equipo de trabajo de Clearleft.com

Por cierto, no tengo absolutamente nada que ver con ellos, ni les conozco ni pienso irme a trabajar a Inglaterra. Simplemente, me gusta el diseño de su site. Por estos lares también tenemos muy buenos ejemplos, y por latinoamérica también.

Si vendes consultoría de Experiencia de Usuario hay que predicar con el ejemplo. Si tu web tiene más de 4 años quizá sea hora de ir dándola una vuelta y actualizándola. Al fin y al cabo, la Web, es un organismo mutable y vivo, extremadamente dinámico. Y una de las mejores tarjetas de presentación de tu trabajo es el site de tu consultora. Yo no confiaría en alguién cuya imagen no refleja un mínimo de calidad, pero lo mismo es que soy un poco de Marte, quién sabe :-)

Qué importante es el uso del color como elemento para separar capas de información, centrar la atención donde hay que centrarla, mejorar la usabilidad de una aplicación y, en este caso concreto, incrementar el número de descargas del navegador.

Una captura de la página de de Apple para la descarga de Safari 4.0:

Fijaros cómo se utilliza el color azul degradado para el botón de la descarga y el naranja en el rectángulo superior de la página para crear un punto focal de atención. Al igual que podemos establecer jerarquías de información durante el diseño de un componente con sus correspondientes elementos, podemos establecer jerarquías de información basadas en colores.

En este diseño creo que el uso del color no es óptimo y se puede mejorar. Como me comentaba un compañero el otro día, Fernando, para los botones en tiendas de comercio electrónico funciona mejor el color naranja-calabaza que el azul. Generalizando más, también para las descargas y las llamadas a la acción.

Fijaros en la diferencia entre la pantalla de arriba y la de abajo con el código de color del botón y del rectángulo de la esquina invertido:

Habría que testarlo pero apuesto a que este segundo tendría un ratio de número de clics mayor que con el actual botón azul. La jerarquía de color es óptima (el más cálido y llamativo es el elemento más importante en el que se quiere crear el punto focal de atención -el botón de la descarga-) y el azul para el otro elemento que crea un punto focal de atención secundario en la página tanto por su color característico frente al gris y al blanco que lo rodea, como por su forma triangular que rompe con todas las líneas rectas y bordes redondeados del diseño.

AOL, por ejemplo, también usa el naranja-calabaza para el botón de buscar del buscador de su home:

Botón de buscar del buscador principal en la home de AOL

Curiosamente en la pantalla de logado del webmail invierten el patrón y centran la atención en el botón de registrarse y crear cuenta frente al de logarse:

Botón de logado de color azul en AOL y naranja para el de registrarse y crear nueva cuenta

Yahoo España y Yahoo internacional siguen el mismo patrón de colores para los botones del buscador y de acción:

Botones de color calabaza en Yahoo España, del buscador y de quedarse en la versión local de la página del usuario

En Amazon.com usan el naranja como color para el botón de “Mostrar todos los departamentos” y el botón para lanzar la búsqueda con el rótulo “Go” que además lo hacen circular para convertirlo en un punto focal de atención por su forma (el círculo es un elemento que añade una fuerte tensión visual e interés a cualquier diseño):

Botones de color naranja de "Mostrar todos los departamentos" y ejecutar búsqueda de Amazon

En lugar del naranja-calabaza, Firefox utiliza un color verde para el botón de descarga, también admisible. Originalmente el verde que utilizaban era muy oscuro y con el paso del tiempo se ha ido aclarando mucho. Además incorporan la palabra “Free” al rótulo principal con lo que han conseguido, como comenta Yusef (no encuentro el enlace, si localizo la presentación donde lo ví lo pongo) incrementar el número de descargas del navegador.

En este caso particular es posible que la elección del color verde para el botón sea plenamente consciente e intencionada para potenciar el logotipo de Firefox y no robarle protagonismo. Los colores naranja, calabaza y amarillo otorgan gran predominancia al logotipo junto al hecho de que sea redondo frente al resto de elementos de líneas rectangulares (con excepción de las palomas, no entiendo el motivo de que figuren ahí al igual que el ¿altavoz? ¿biberón? de la cañería) convierténdolo en un punto focal de atención muy fuerte. En la página creo que hay demasiado ruido por el uso de la imagen de fondo lo que va en detrimento de la usabilidad de la tarea principal a la que está enfocada la página -la descarga del navegador- si la quitasen o planteasen otro diseño mucho más limpio como el de Apple posiblemente obtendrían un mayor número de descargas:

Botón verde de descarga de Firefox

El uso de los colores es un aspecto crítico para las webs.

Es necesario conocer los fundamentos básicos de la teoría del color para poder juzgar de manera mínimamente objetiva y con razones y argumentos de peso por qué funcionan unos diseños y otros no. De nuevo, queda pendiente publicar un post (otro) sobre colores y usabilidad. El tema es realmente fascinante y mucho más complejo de lo que uno podría pensar a priori, y lo más llamativo, es un aspecto al que prácticamente hasta hace muy poco no se le ha comenzado a prestar atención más allá de la pura faceta estética o emocional cuando en realidad, es un aspecto fundamental para la usabilidad de cualquier interfaz.

Cuando desde la Fundación Mozilla se afirma que no están interesados en desarrollar o convertir Firefox en un Sistema Operativo están siendo literalmente sinceros…

…porque no están desarrollando un Sistema Operativo. Lo que están desarrollando es una Interfaz Humana.

O lo que es lo mismo están evolucionando el concepto de los actuales sistemas operativos que están tendiendo a converger en la nube, a ser multidispositivos y multimodales.

Intento explicarlo de forma breve.

Me estoy terminando de leer “The Humane Interface: New directions for designing interactive systems” de Jef Raskin, el padre de Aza, jefe de Experiencia de Usuario de Mozilla Labs. El título es literal y lo dice todo acerca de lo que están haciendo los ingenieros de la Fundación Mozilla:

“La Interfaz Humana: Nuevas direcciones para diseñar sistemas interactivos”

Han transcurrido 34 años desde que apareciera la primera versión de la interfaz gráfica de Macintosh que fue desarrollada por Steve Jobs y Jef Raskin, y 34 desde la aparición de la primera versión de Windows.

Y aún a pesar de que han transcurrido tres décadas, los sistemas operativos siguen siendo tan duros, tan extraños y ajenos para los usuarios como un transbordador espacial.

Un sistema operativo no está centrado en las personas, en los humanos, lo está sobre todo en las máquinas y en un modelo de interacción artificial y extraño a cómo pensamos y funcionamos. El Diseño de Interacción está centrado literalmente en la Interfaz Gráfica de Usuario (GUI) cuando debería estar centrado en el usuario, en la persona, en lo que quiere hacer, en dar respuesta a sus necesidades, sus objetivos y sus tareas.

Sí, los actuales Sistemas Operativos lo hacen, pero están anclados en un modelo conceptual que, para más pecado, está centrado en el paradigma de la metáfora del escritorio (desktop) local y en un modelo de interacción basado en un periférico, el ratón que va siendo hora de que sea superado. En cuanto a los periféricos de entrada Apple acaba de dar el primer tímido paso para ir más allá de la tremenda limitación que supone interactuar con una interfaz virtual a través de un dispositivo tan extremadamente limitado como el ratón. Una herramienta que no sólo NO amplifica las capacidades humanas (la función de nuestras manos) sino que además las está limitando tremendamente y por ende anclando el diseño, la evolución de las nuevas interfaces humanas y el Diseño de Interacción.

Hay que dar otro paso. El ecosistema social y tecnológico está preparado. Tenemos la tecnología hardware y software necesaria para llevar a buen puerto tal empresa y comenzar a hacer que los ordenadores sean menos máquinas y más humanos y que la interacción que mantenemos con ellos se parezca más a las de las personas y menos a las de los robots basadas en la asimilación de conductas y patrones de interacción “artificiales” inventados como metáforas del mundo real por los Diseñadores de Interacción.

El objetivo de la Fundación Mozilla es ambicioso. Está desarrollando la primera Interfaz Humana. Es una apuesta ganadora porque no rompe con lo anterior y con lo que está funcionando actualmente, sino que no es ni más ni menos que  una nueva capa inteligente que permite un diálogo y una interacción más fluidas entre la persona y las interfaces gráficas de los actuales sistemas operativos (Windows, OS X, Ubuntu, Gnome, Android…) buscadores y World Wide Web.

Lo más interesante, además y aquí no sé si en la Fundación Mozilla son plenamente conscientes de esta circunstancia, es que el día de mañana si quisieran, dicha interfaz podría ser independiente incluso del navegador utilizado por el usuario: Firefox, Internet Explorer, Chrome, Opera o cualquier otro…

…ya que lo único que hace falta es una línea de texto, un campo input en el que introducir texto u órdenes ya sea mediante el teclado físico o virtual o mediante la voz y un área en la que apareciese la interfaz ad-hoc pertinente con la que interaccionar o dicho de otra forma, menos críptica y más tangible: Ubiquity o evolucionar como están evolucionando las actuales barras de navegación de los navegadores hacia barras de interacción con un lenguaje o formas más humanos.

La de Mozilla es una apuesta ganadora porque además va a fusionar otra interfaz todavía más revolucionaria de una forma totalmente transparente y natural para el usuario: la interfaz de Google. Imita la exitosa estrategia de neg0cio del buscador basada en la Larga Cola y los modelos freemiun con suma brillantez y lógica naturalidad evolutiva desde un punto de vista tecnológico.

Al nuevo modelo de interacción que ofrece Ubiquity -abierto a su desarrollo y evolución por parte de la comunidad de programadores y con la iniciativa de JetPack, abierto también a usuarios sin conocimiento de programación- se da una tremenda y potente solución a algo que ha sido el talón de aquiles de la moderna Biblioteconomía y Documentación desde sus orígenes hace cien años y algo crítico para las personas y su actividad diaria: la Findability o cualidad de poder navegar por un sistema de información digital y recuperar los documentos o la información puntual que necesiten en cualquier momento.

En el contexto tecnológico en el que nos encontramos, este “sistema de información digital” es la World Wide Web, y al centrar el desarrollo tecnológico en ella, el Ordenador Personal -Personal Computer- se desvanece surgiendo la Identidad Digital -Digital Identity- o Espacio Personal -Personal Space- centralizada en esa Interfaz Humana “navegador”, que son precisamente los ejes en los que está trabajando Mozilla.

En Firefox se va a fusionar Ubiquity, Google ¿Bing? Wikipedia, etc, etc… y se va ha hacer totalmente transparente el sistema operativo que corra por debajo. No interesa la herramienta tecnológica, interesa el servicio y la funcionalidad que presta.

Al integrar Google en la nueva Interfaz Humana, Mozilla se asegura a futuro la percepción de su principal fuente de ingresos incorporando automáticamente todas las mejoras que desarrolle el Buscador, mientras que ellos se centran en evolucionar la capa crítica en cuanto a la interacción con los usuarios y la Experiencia de Usuario se refiere.

Y por supuesto, al desarrollar Firefox como proyecto de código abierto, multiplataforma y multidispositivo creando y dinamizando una comunidad social y de usuarios se asegura su éxito a futuro.

Es un modelo de negocio ganador. Y lo más paradójico es que es bueno para todas las partes implicadas en el ecosistema tecnológico: Google, Microsoft, Apple… todos ganan con esta nueva Interfaz Humana por dos razones fundamentales:

• porque la base que sostiene sus modelo de negocio -los usuarios- van a seguir necesitando, al menos de momento, los actuales sistemas operativos comercializados,
• y porque el tiempo que los usuarios van a dedicar tanto en su trabajo como en su ocio, se va a incrementar y perpetuar sea la dirección que sea en la que evolucionen sus herramientas tecnológicas.

Todo está convergiendo en la World Wide Web y en la nube.

Después de treinta años por fin estamos superando el paradigma del Sistema Operativo, del Ordenador Personal y de sus periféricos tradicionales.

Por fin se está desarrollando la Interfaz Humana.

Os recomiendo que os leáis “The Humane Interface: New directions for designing interactive systems” de Jef Raskin. Es una nueva concepción de Sistema Operativo que creo que está tomando una dirección insospechada a albur del actual desarrollo tecnológico.

En cuanto a la gestión de identidades en Firefox podéis echar un vistazo a la última maqueta publicada por Alex Faaborg sobre ello o a la de la navegación por los bookmarks y etiquetas. Tengo muchas ganas de ver la nueva interfaz de Firefox 3.7.

pues el caso es que el otro día le había echado un vistazo rápido al vídeo y lo que había visto, para variar, me había dejado alucinado… pero no lo había visto entero y con calma…

Cómo dice Jorge, y como dice Mistry al final, Open Source.

Alucino.

Vía: Findability.org (por cierto, en enero llega el nuevo libro de Morville y Callender: Search Patterns)

Juan Leal y otros nombres relevantes acaban de lanzar nuevo proyecto web.

Voota permite votar y opinar sobre aquellos que toman las decisiones que indirectamente afectan a tu día a día. Acaba de comenzar su camino pero me pregunto si se convertirá en un observatorio de primera mano para tomarle el pulso a la actualidad política española.

De todas las que tiene hay una cosa que especialmente me encanta: su diseño.

Muy Craiglist, muy Tufteano, un diseño hecho con mucha cabeza para lo que pretende ser en el futuro. Me encanta.

Enhorabuena.

Pd. Estos días ando liado en un proyecto (no es mío) tengo poco tiempo para postear.

Estos días ando entretenido con un proyecto bastante interesante. El caso es que en el mismo se ha planteado la necesidad de hacer un buscador que permita acotar las búsquedas en distintos universos. Por ejemplo, en Flickr, el buscador de la derecha permite acotar las consultas a los siguientes ámbitos:

• Las fotos y vídeos de todos
• De tus contactos
• De tus amigos
• Tu galería
• Grupos
• Miembros de Flickr
• Un lugar
• Aplicaciones

Haciendo un pequeño estudio de los box de búsqueda de algunos de los sitios más conocidos me ha llamado la atención la forma en que están diseñados:

Usabilidad de buscadores. Construyendo jerarquías funcionales

El diseño impone la jerarquía de funcionalidades del componente y por ende, definirá la forma en la que el usuario interactuará con el mismo. En los presentes ejemplos se observa que:

• En Flickr la jerarquía funcional es: a) introducir cadena de búsqueda, b) ejecutar búsqueda c) seleccionar universo de búsqueda. Este último se intuye como opcional debido a la línea vertical discontinua que separa el botón/enlace de “Buscar” de la flecha, y que despliega el menú de los ámbitos de búsqueda. Si la línea fuera contínua el carácter de opcional desaparecería indicando un paso más a llevar a cabo en la ejecución de la búsqueda. La línea discontinua vertical parece indicar permeabilidad, elección.
• En el box de búsqueda de Microsoft Office Online se observa el mismo patrón con la excepción de que la línea que separa el botón de búsqueda de la flecha que despliega el menú con los universos de búsqueda es continua. Se percibe como una llamada a la acción más fuerte y no tanto como algo opcional.
• En el sitio de los Addons de Mozilla el buscador tiene gran predominancia. La jerarquía funcional existente es: a) introducir cadena de búsqueda, b) seleccionar universo de búsqueda, c) seleccionar opciones avanzadas, d) ejecutar búsqueda. En este buscador se ordenan lógicamente el flujo de acciones que el usuario debería llevar a cabo para ejecutar con éxito una consulta. Se define claramente el acceso a los universos de búsqueda a través del menú desplegable y las letras “dentro de”, que conectan el box y el menú desplegable de los universos. Las opciones avanzadas se perciben como opcionales al estar ocultas detrás de una capa desplegable que se abre cuando el usuario pulsa en la pestaña. La adición de este componente al buscador añade complejidad extra al mismo. Lo correcto es, como se hace, que dichas opciones estén ocultas por defecto y mostrarlas tan sólo a demanda del usuario, o si no son verdaderamente necesarias, no añadirlas.
• En Zoho Invoice la jerarquía funcional es: a) seleccionar universo de búsqueda, b) introducir cadena de búsqueda y c) ejecutar búsqueda. A priori choca con el modelo mental del usuario y con la finalidad para la que está diseñado el buscador. Cuando el usuario escanea la página para localizar un buscador espera encontrarlo y realizar inmediatamente una consulta. Con el diseño de Zoho Invoice estamos forzando en primer lugar al usuario a pensar qué universo de búsqueda debe seleccionar y luego a escribir la cadena y pulsar el botón de búsqueda. Rompe su locus de atención. Después de haberse distraido pensando qué universo de búsqueda es el adecuado tiene que volver a recordar la cadena de búsqueda que quería introducir. No es un diseño óptimo.

De las opciones y en función de lo que se quiera potenciar, las más correctas me parecen las de Mozilla Addons, Office Online y Flickr:

• La de Mozilla Addons porque los universos o ámbitos de búsqueda están explícitamente definidos mediante las palabras “dentro de” y el menú desplegable con la opción por defecto de “todos los complementos”. La interpretación del elemento es inmediata y directa. El usuario no tiene que hacer click en una flecha para desplegar un menú y descubrir para qué sirve el elemento. El problema que tiene es el gran espacio que ocupa. No siempre disponemos de tanto. Por otro lado, la pestaña de “Avanzado” añade complejidad al buscador.
• La de Office Online porque ordena de manera lógica la cadena de acciones a llevar a cabo. No obstante y por ello mismo es un poco más complejo que el componente de Flickr ya que al estar la elección de los universos de búsqueda antes que el botón de buscar se condiciona al usuario para que elija uno y luego ejecute la consulta.
• El buscador de Flickr me parece el más correcto a pesar de que para descubrir los universos de búsqueda el usuario debe desplegarlos antes mediante la flecha. Creo que es la opción más correcta ya que posicionándolos en último lugar después del botón de buscar aparecen como opcionales. La existencia de los universos de búsqueda está explícitamente definida mediante la leyenda en gris dentro del propio box de búsqueda “Buscar en tu galería”. En este buscador el usuario escribe directamente la cadena y pulsa el botón de buscar ejecutando la consulta, que es la opción que mayor número de veces se llevará a cabo.  Sólo si el usuario quiere modificar el universo de búsqueda actuará desplegando el menú. Creo que es lo más óptimo.

Llaman la atención asimismo dos pequeñas microinteracciones que tienen lugar en el botón de buscar en Flickr. Cuando el usuario posiciona el cursor en el área del botón éste presenta una pequeña animación que lo muestra como un botón en 3d que “emerge” lo que refuerza la llamada a la acción -a realizar click- por parte del usuario, además, la palabra buscar en azul, se subraya presentando una apariencia directa de enlace:

Microinteracciones del botón de buscar de Flickr. La palabra buscar se subraya centrando la atención y el botón toma una apariencia de 3d lo que refuerza la llamada a la acción -a realizar click- por parte del usuario

Por otro lado, como me comentaba el otro día un compañero -Fernando-, a partir de distintos estudios de tiendas de comercio electrónico se desprendía el hecho de que los botones de color naranja tienen mayor número de clicks que los de otros colores. Pensando a qué podría deberse, se me ocurre que las razones pudieran ser:

• Es un color cálido. Su longitud de onda es menor y su frecuencia mayor lo que hace que, desde un punto de vista psicofísico se perciba como más cercano -en primer plano, frente a otros en planos secundarios- y por tanto, mejor que otros colores.
• En occidente puede asociarse a los 3 estados que se dan en un semáforo: rojo: stop, parar, naranja: atención, transición, verde: acción, adelante. Aunque el color verde es asumible para el botón, el naranja es mejor al reflejar ese estado de transición entre dos momentos.

De acuerdo a esto, un diseño óptimo del buscador cuando se tiene poco espacio podría ser como cualquiera de las dos siguientes opciones (quizá la última sea la más sutil y adecuada):

Buscadores. Microinteracciones (estados) del botón buscar

Por cierto, acabo de fijarme en el botón de “Guardar” del cuadro de diálogo de Microsoft Visio. Fijaros en los tres estados y el diseño del botón:

• Cuando se abre el cuadro de diálogo el botón gris aparece resaltado con un borde azulado para centrar la atención y constituir el foco de acción.
• Cuando el cursor se posiciona sobre el mismo el color cambia sutilmente volviéndose azul y el bordeado disminuye su grosor y se oscurece.
• Cuando se despliegan las opciones (que funcionan análogamente a los ámbitos de búsqueda en el buscador) el azulado del botón se torna más fuerte para dar retroalimentación de que se está actuando sobre el botón.

Aspecto del botón "Guardar" del cuadro de diálogo "Guardar cómo" de Microsoft Visio cuando el cursor no está encima del botón

Aspecto del botón cuando el cursor se posiciona sobre el mismo

Aspecto del botón cuando el usuario está interactuando con el mismo

Las microinteracciones son todo un mundo. Bill Scot y Theresa Neil les dedican todo un capítulo al hablar del “Drag & drop” en su estupendo y recomendable libro Designing Web Interfaces.

El mercado de los móviles está que arde.

La movilidad es un área estratégica para cualquiera de los grandes actores tecnológicos dado que es una de las áreas de mayor crecimiento actual y futuro, de mayor rotación de dispositivos, y que mayor demanda tiene ahora mismo por los usuarios tanto personales como corporativos.

El mundo se “movil-iza”.

Apple dió el primer paso con el lanzamiento del iPhone que ha supuesto un auténtico revulsivo para el mercado haciendo tambalearse incluso a Nokia (y al resto de grandes compañías de producción de móviles) quienes están redefiniendo sus productos y su estrategia rápidamente.

La respuesta de Nokia ha sido tajante, acaba de abrir recientemente Symbian y está apostando además muy fuerte por un nuevo SO, Maemo. El éxito futuro dependerá de la comunidad y la plataforma de desarrolladores que logre aglutinar.

Para completar la escena, ahora Google acaba de lanzar el tercer golpe en el combate, y en mi opinión, creo que va a tener mucho calado. Aun teniendo todavía caliente la actualización del sistema operativo a la versión 1.6, ya podemos ver una preview de algunas de las novedades que nos traerá Android 2.0 en algún momento del próximo año.

Me alucina literalmente lo del uso del bluetooth para poder sincronizar más de un dispositivo Android y visualizar información compartida e interactuar al mismo tiempo en las pantallas de ambos. Espero que en algún momento dentro de ya, podamos ver lo mismo funcionando en ordenadores portátiles o de sobremesa. El resto de novedades igualmente importantes. En Read Write Web se puede leer un breve análisis de las nuevas características.

Seguiré muy de cerca la evolución de este sistema operativo. Tengo un especial interés en lo que concierne a todo el área de movilidad. Lo comentaba hace medio año y lo vuelvo a reiterar, si tienes una consultora es primordial que formes ya a gente en este campo. Va a ser una de las que mayor demanda tenga en 2010 y años venideros.