Concretamente os recomiendo echarle un vistazo a las galerías de Interfaces y Móviles.

Aunque son muchos los vídeos, destacar dos que me han llamado la atención:

En el concepto de interfaz flexible investigadores de la universidad de Osaka conceptualizan la misma como un material flexible que se estira o contrae cuando el usuario presiona sobre un punto de la pantalla y arrastra el dedo en una dirección. De esta forma pueden conseguir ver el punto de partida desde el cual se ha arrancado, el punto final al que se llega y el contenido intermedio (aunque sea con un cierto grado de distorsión). El usuario puede además decidir si desea hacer efectivamente el scroll, hacer una suerte de zoom interactivo -apoyándose en un dedo adicional extra para abarcar el área desde el punto de toque de inicio al punto de toque final- o recuperar la forma inicial de la interfaz después de haber examinado el contenido circundante en una dirección.

Desde un punto de vista de interacción humana esté “comportamiento” de la interfaz es mucho más cercano al de los materiales físicos con los que interactuamos cotidianamente tales como el papel, y tiene la particularidad de que aporta una affordance extra que mejora el modelo de interacción que mantenemos con las interfaces a través de pantallas táctiles y gestos de la mano.

El vídeo viene al caso para reflexionar sobre la problemática que Donald Norman exponía recientemente en su artículo la “Guerra de gestos” (enlace vía: @Usolab) acerca de la convivencia del actual modelo de interacción mediante el ratón y el cambio de paradigma que está imponiendo la introducción de los nuevos periféricos como el Trackpad de Apple o el Magic Mouse junto al nuevo conjunto de gestos para interaccionar con pantallas táctiles. A saber:

Cualquier interfaz física como por ejemplo el papel impone unas limitaciones espaciales a la representación de la información: en ella no se puede representar o contener más información de la que puede inscribirse en su superficie.

En los dispositivos digitales esta limitación está igualmente vigente pero presentan la gran diferencia de que al ser la pantalla digital (ya sea de un ordenador ya de un móvil) y al ser la información digital y líquida podemos presentar y “desplegar” información más allá de los límites físicos de la pantalla -de sus bordes-.

Desde las primeras interfaces gráficas de usuario de los ordenadores, el control por excelencia que se ha utilizado para indicar que existía más lienzo con más información que desbordaba la pantalla, ha sido el ascensor que aparecía en el lado derecho de la misma. Cuando el usuario interactuaba sobre dicho control el efecto que percibía era el de un marco estático -la pantalla del dispositivo- a través del cual visualizaba el contenido en un lienzo que se iba moviendo.

Con la introducción de la rueda del ratón, el estándar que se adoptó como modelo de interacción era:

• Al desplazar la rueda del ratón hacia arriba, el ascensor vertical sube y el contenido baja.
• Al desplazar la rueda del ratón hacia abajo, el ascensor vertical baja y el contenido sube.

Un posible modelo mental del usuario para describir este funcionamiento podría equivaler al de una persona que está parada y que acciona una polea:

• La vista del usuario -el marco o pantalla- permanece estático.
• La parte interior de la cuerda -el lienzo- asciende cuando el usuario tira de la cuerda exterior hacia abajo (con lo cual el control del ascensor desciende) y viceversa.

Con la llegada de las pantallas táctiles y de nuevos periféricos de entrada del ordenador tales como el Magic Mouse o el Trackpad de Apple se está consolidando un modelo de interacción basado en gestos que al ejecutarse tienen una respuesta directa y equivalente a la interacción que tenemos con los materiales físicos.

Así, Apple ha decidido cambiar el funcionamiento por defecto de la rueda del ratón invirtiendo el patrón al que estamos acostumbrados.

La confusión desde un punto de vista cognitivo se produce cuando el usuario se encuentra con un control físico -una rueda- y unos controles digitales -un lienzo con el contenido- y una cuerda exterior -el control del ascensor- cuyo funcionamiento debería corresponderse con los de un modelo físico, el del hombre que acciona una polea, pero que sin embargo no se corresponde.

En la figura (a) se puede observar una representación esquemática del funcionamiento actual de la rueda del ratón en un plano horizontal. Al accionar la rueda ésta ejerce tracción sobre el lienzo (contenido) y lo desplaza hacia atrás.

En la figura (b) se observa el cambio de funcionamiento que ha aplicado Apple y la ruptura del modelo físico. La rueda del ratón ya no funciona como una polea sino que el movimiento de la  mano es como si se deslizara desde la rueda al lienzo (contenido) para  empujarlo hacia adelante, de ahí deriva la confusión cognitiva.

En la figura (c) se complementa el modelo mental del funcionamiento actual de la rueda del ratón. El gráfico se gira 90º a la derecha para ponerlo en vertical (al igual que el monitor de un ordenador) y se añade en color naranja, el marco o ventana a través del cual el ojo observa el contenido o lienzo.

En la figura (d) se expone el cambio de modelo que ha aplicado Apple.

¿Por qué ha tomado Apple esta decisión entonces?

La respuesta puede ser porque esté pensando prescindir de ahora en adelante de la rueda del ratón (y quizá del ratón mismo) en favor de un modelo de interacción que se ejecute directamente con los dedos sobre una superficie plana como la del Trackpad.

En esta superficie no existen ruedas para desplazar el contenido con lo que no hay confusión posible. La respuesta a la acción que ejecuta la mano es directa: Si los dedos se desplazan sobre la superficie del Trackpad hacia arriba el lienzo con el contenido se desplaza hacia arriba. Igual que en el mundo físico donde si los dedos presionan sobre un folio y ejercen presión hacia el lado de la mesa más alejado del usuario- el folio se desplaza en dicha dirección.

¿Qué es lo que llama la atención y lo que me gusta del vídeo de las interfaces flexibles?

Pues que añaden una affordance extra que hasta ahora no se ha considerado en el mundo digital aportando un indicio cognitivo adicional para mejorar la interacción con las interfaces digitales:

Hasta ahora el lienzo siempre se ha considerado como una superficie rígida. Sin embargo los investigadores del proyecto consideran el lienzo del contenido cómo una superficie flexible que se puede doblar y distorsionar. Justo igual que sucede en el mundo físico dado que en función de la rugosidad de la superficie por la que se desplace el material (por ejemplo un folio), de su adherencia o de cómo lo cojamos, ésta puede presentar mayor o menor resistencia lo que puede suponer que el material se arrugue más o menos.

Esta affordance junto a la supresión del actual modelo de funcionamiento de la rueda del ratón en favor de una interacción a través de una superficie plana como la del Trackpad de Apple, ofrece una respuesta más cercana y consistente a la interacción física que mantenemos con los objetos que nos rodean.

Un pequeño paso más en la evolución hacia una interacción más humana con los ordenadores personales y dispositivos móviles.

En cuanto al otro vídeo, hace alusión a la concepción del teléfono móvil como un dispositivo extensible al que se le pueden añadir todo tipo de complementos para dotarlo de funcionalidades adicionales y a cómo se puede combinar con el software para, literalmente, aumentar nuestra percepción de la realidad: tanto visual, como háptica o sonora.

–O–

NOTA ADICIONAL

Las metáforas y los posibles modelos mentales de usuario que se pueden concebir para describir el funcionamiento de la rueda del ratón y su respuesta en el desplazamiento del contenido de la pantalla son múltiples dado que dependen de diversos factores entre los que se encuentra el punto de referencia que se tome por parte del observador, el movimiento del mismo (si se encuentra parado o no)  si la percepción del objeto que se mueve viene dada por el ojo que sigue con la mirada al objeto, etc. Al respecto, un par de documentos introductorios sobre la percepción psicológica del movimiento:

• Percepción del movimiento
• Percepción visual del movimiento (PDF)

Si quieres estar al tanto de lo último que van haciendo descárgate la Canary Build de Chrome escribe about:flag en la barra de navegación y experimenta con los últimos cambios que van a añadiendo los ingenieros de desarrollo y UX de Google. En concreto, están evaluando la posibilidad de ocultar la barra de navegación para dar aun más espacio a la visualización del contenido. Esta sólo se mostraría al hacer clic sobre la tab. Un cambio extremadamente relevante en la interfaz y en cuanto a la usabilidad del navegador. Estoy ansioso por ver si lo implementan en la versión estable o pasará como un experimento de interfaz más.

¿Opiniones al respecto? ¿Mejor o peor usabilidad?

Información vía: Genbeta

Vía: Alt1040

Bola extra:

Justo después de publicar la entrada acabo de encontrar éste otro vídeo de cómo se puede controlar Windows 7 con Kinect:

Vía: Microsiervos

Después de trabajar en su proyecto del Sexto Sentido, ahora, Mistri, acaba de anunciar uno nuevo, el ratón invisible:

De momento el periférico que nos sirve de “dedo digital” se diluye y desaparece quedando sólo lo que tiene que quedar para llevar a cabo una interacción natural: nuestra mano.

La pregunta es: ¿Cuando sucederá lo mismo con el ordenador? ¿Para qué necesitamos un pesado monitor o un pesado equipo portátil, o neetbok, o tablet cuando el día de mañana podremos tener proyectores holográficos que hagan las veces de los mismos y que podamos llevar en un bolsillo?

Esa es la nueva visión de futuro, a mi entender, en la que debería comenzar a trabajarse. Y no creo ni que esté desvariando ni que sea ciencia ficción ¿o acaso no existen ya prototipos de televisiones en 3D?

Pros de la propuesta de Mistri de hacer invisible el ratón: pues eso mismo, el más importante, interactuamos contra el dispositivo con nuestra mano.

Contras: habrá que ver cómo impacta en el uso del ordenador si algún día Mistri lo comercializa dado que, desde un punto de vista ergonómico y para preveer posibles enfermedades profesionales como la del metacarpio, el diseño de algunos ratones es el óptimo para las jornadas laborales cotidianas.

En cualquier caso seguimos atados por el paradigma del cursor único para interactuar con la interficie cuando tenemos 10 dedos y dos palmas, dos brazos, un pecho, dos piernas y una cabeza que podrían hacer lo mismo (¿para cuando una aplicación de Kinect profesional más allá de los videojuegos?). Me encantaría trabajar en proyectos de innovación en este campo. A buen seguro que sería excitante conceptualizar lo que serían los próximos sistemas operativos: los sistemas de interfaz humana (literalmente) :-)

Sea como sea, la visión de futuro que Microsoft preconizaba en su serie “Envisioning” comienza a hacerse realidad tan sólo año y medio después de que lanzaran los vídeos:

• En el minuto 1.20 podéis observar cómo cualquier superficie transparente se convierte en una potencial interficie sobre la que proyectar la interfaz.
• En el minuto 1.30 vemos la interacción gestual con la mano.

Lo dicho, el próximo paso de la visión: conceptualizar cómo podemos interactuar con objetos holográficos. De momento, algunos ya están trabajando experimentalmente en ello desde hace tiempo:

…y un gadget que para nosotros se ha vuelto tan cotidiano e imprescindible como ese que nos acompaña permanentemente en el bolsillo, el móvil, todavía tiene que dar muchas sorpresas dado que además de miniordenador, puede ser perfectamente un proyector, y al incorporar cámara puede detectar el movimiento de nuestras manos y por ende, podríamos interactuar con objetos holográficos que proyectase.

Las posibilidades son excitantes en cuanto a lo que a Interacción se refiere y las nuevas fronteras de la tecnología, como siempre, sorprendentes.

¿Acaso podía ser de otra forma? :-)

El primero es la concepción y funcionamiento del buscador de la home. Me gusta cómo lo han planteado. Permiten búsquedas en base a cuatro criterios principales:

• Nombre de ciudad
• Punto de referencia
• Nombre de hotel
• Dirección de hotel

La faceta de “Punto de referencia” no es común ni habitual. Cuando menos me resulta curiosa y una buena idea si tu necesidad de información como consumidor no está predefinida y es más bien exploratoria. Si sabes la ciudad a la que quieres ir, el hecho de que te sugieran lugares con encanto o especiales de la misma se me antoja un valor añadido. Una forma de facetar la información que detrás tiene una reflexión pausada y una definición de un modelo mental de usuario que no suele ser muy habitual que se dé en los diseños de las webs.

Dicha faceta se ve bastante bien en la categorización que hacen en las autosugerencias. La forma en que están diseñadas comienza a ser un patrón de interacción estándar que se está imponiendo desde hace unos meses a ahora.

Facetas de información en las autosugerencias del buscador de Hoteles.com. Se observan cuatro tipos de facetas: Ciudades/Zonas, Puntos de referencia, Aeropuertos y Hoteles. Obsérvese la inconsistencia entre lo declarado encima del box y las facetas ofrecidas, las de "Zonas" y "Aeropuertos" no aparecen descritas encima del box de búsqueda

La idea es, cargar la inteligencia y el trabajo pesado de desarrollo en el background tecnológico y devanarse un poco los sesos pensando en las maneras en que podemos facetar nuestros contenidos para ayudar a los usuarios en sus búsquedas de información. Va siendo hora de comenzar a hacer un poco de trabajo de valor añadido en cuanto a la findability se refiere, definiendo unas buenas taxonomías de contenido y comenzando a enriquecer un área espacial interesantísima, la de las autosugerencias que se despliegan al introducir en el box una cadena o unos caracteres de texto, más allá del mero hecho de ofrecer como viene siendo común, las habituales palabras clave o ocurrencias coincidentes.

Otro componente que me gusta bastante y por lo que veo, que es más bien un estándar en las webs de hoteles, es el calendario:

Diseño del calendario desplegable en el buscador de Hoteles.com

Me gusta el diseño gráfico. El alto contraste con el fondo lo que focaliza la atención en el mismo. La adicción de una sombra para crear un efecto de oclusión y traerlo a primer plano respecto al resto de elementos de la interfaz, el hecho de mostrar dos meses en lugar de uno algo, que no termino de entender cómo no se establece ya de una vez y se generaliza como un estándar en todas las webs de reserva de hoteles, venta de billetes, etc. Dos meses considero que es lo mínimo que se debería plantear en un calendario de este tipo y creo que sería más que interesante y habría que medir el impacto en la venta de billetes o reservas, el hecho de mostrar incluso tres meses en lugar de dos.

Si queréis ver más diseños de calendarios podéis hacerlo en el album de calendarios que tengo en mi página de Flickr.

Tres pequeños detalles más en el calendario:

• Dado que no distinguen gráficamente con una tipografía superior el nombre de cada mes, pondría al menos la primera letra en mayúscula lo que ya sería suficiente para ofrecer una tensión visual elevada junto a su posición encima de las abreviaturas de los días. Tal y como está, cuesta distinguir el nombre del mes, lo que reduce la usabilidad. Curiosamente en el diseño de la versión estadounidense sí se observa que ponen en mayúscula el nombre de cada mes, fijaros en la diferencia entre utilizarla y no, aunque también se ve que siguiendo el mismo criterio, ponen también en mayúsculas la primera de la abreviatura de cada día lo que disminuye la legibilidad de los mismos e impacta asimismo en la usabilidad :-P

Diseño del calendario de la web estadounidense Hoteles.com. Llama la atención como frente a la española, ponen la primera letra del nombre del mes en mayúscula lo que redunda en una mejor escaneabilidad, focaliza sutilmente la atención en el nombre y mejora la usabilidad del calendario. No obstante, ponen igualmente en mayúscula la primera letra de la abreviatura de cada día lo cual supone una merma de esta.

• Me encanta la forma en que se ve el componente en Mac, con la flecha apuntando al box de texto resaltado en azul en lugar de la típica capa alineada con el borde izquierdo del campo de texto. Mucho más clara de esta forma y menos equívoca la relación que se establece entre el calendario y el campo. Fijaros por ejemplo en el calendario de Xpedia:

Calendario de Xpedia.com. la capa de los meses se alinea con el borde izquierdo del campo de introducción de la fecha lo cual suele ser un estándar común. El problema es que los únicos elementos que el usuario tiene para relacionar dicha capa con el primer campo, y no con el segundo, son el foco azul de la fecha cuyo efecto se pierde por ser el color predominante de fondo en la web, y el hecho de estar exactamente alineada con el borde izquierdo del campo. El diseño del calendario en Hoteles.com con la flecha apuntando el campo y la ligera separación respecto a la parte inferior del mismo es mejor desde un punto de vista de usabilidad ya que la relación que se establece es inmediata e inequívoca.

• No incluyen un botón de cerrar en la capa. ¿Mejora o empeora la usabilidad del componente éste hecho? Por un lado se observa que la capa permanece abierta hasta que el usuario hace clic en un día seleccionándolo momento en el que se cierra, o hace clic en cualquier otra parte fuera de la misma, hecho que igualmente la cierra. El único “pero” es que si el usuario se ha equivocado de día tiene que volver a pulsar sobre el campo para abrirla.
  Si se incluye un punto de interacción o botón de cerrar el usuario se verá más movido a desplazar el cursor hacia dicho botón para ocultar la capa con el consiguiente coste de tiempo y esfuerzo para llevar el puntero del cursor a dicho elemento y hacer clic en el mismo.
  ¿Lo incluimos entonces o lo quitamos? Google Maps por ejemplo incluye el botón de cerrar en los bocadillos aunque este desaparece igualmente si el usuario hace clic en cualquier otro punto del mapa que no sea el bocadillo abierto. El buscador de Google en su último rediseño de las autosugerencias elimino el enlace de cerrar que estaba en la parte inferior derecha. ¿Lo quitamos o lo dejamos? Particularmente yo sería de la opinión de quitarlo, el diseño queda mucho más limpio y el comportamiento es perfectamente predecible en cuanto el usuario lo utilice un par de veces.

Me gusta también el diseño visual del elemento de número de habitaciones. Un diseño gráfico muy limpio y muy visual. Eso sí, se les junta el “Mayores de 18″ con el otro rango de edad “0-17″ años lo que parece que es mayor de 180 años :-) En el diseño americano es mucho más claro –> “Ages 18+” y “0-17″:

Diseño visual del elemento para agregar habitaciones y especificar el número de ocupantes de las mismas

Por último me llaman la atención los filtros que hay mano derecha en la página de resultados:

Concretamente:

• Me resulta curiosísimo el diseño del deslizador para especificar el rango de precios de las habitaciones del hotel. Es la primera vez que veo uno así, demasiado recargado pero tiene algún detalle majo como el uso de líneas verticales más largas y otras más cortas para establecer cinco subrangos de precios.
• Me gusta mucho cómo han planteado el tema de las estrellas del hotel (toda vez que utilizar las estrellas fuera de un contexto específico como este y para otra cosa que no sean los favoritos puede dar lugar a un problema de usabilidad como apuntaba Diego Cano en otro caso en el que también hablábamos de deslizadores y estrellas en una web de viajes.
• Me encanta el detalle de la inclusión de la taza del desayuno en el filtro de “Servicios o comidas incluidas”, buenísimo.

Hay más cosas pero de momento, lo dejo ahí.

Para registrarse tan sólo es necesario que el usuario proporcione su cuenta de correo electrónico, que explícite cual va a ser su contraseña y que la confirme.

Y de momento nada más. Tan sólo se le requiere la información mínima e imprescindible. Simple, rápido y sencillo.

Uno de los aspectos críticos a tener en cuenta al lanzar una aplicación web, y especialmente en el contexto móvil, es reducir la fricción durante el registro de los usuarios. Joshua Porter le dedica un capítulo entero en su libro al tema. Y es que como comenta “tenemos alrededor de ocho segundos para realizar la conexión [con el usuario]” (capítulo 4, p. 65).

No creo que la cosa sea tan radical y que el tiempo sea tan corto, pero en cualquier caso, es muy muy reducido, al igual que la atención que se le presta al sitio en un momento dado.

Reducir la fricción para que se registren y prueben nuestra aplicación es vital dado que:

• Hay millones de aplicaciones y de sitios web a los que llegamos o descubrimos cotidinamente y que en un momento puntual puede interesarnos probar.
• Si llegamos a ellos porque estamos realizando una búsqueda estaremos más motivados para intentar registrarnos. Si los descubrimos por casualidad es posible que los guardemos para revisarlos posteriormente con tranquilidad y ver si merece la pena registrarnos o no. En ambos casos el tiempo y la atención que le dedicamos a un sitio o aplicación nueva es muy muy limitado.
• No malgastamos nuestro tiempo en aquello que no consideramos que sea de nuestro interés o que no nos vaya a ser útil o relevante.
• No damos a la ligera nuestra información personal, y mucho  menos en un sitio desconocido.
• En aplicaciones de móviles, cada carácter escrito cuesta, y mucho. Cada campo extra reduce las posibilidades de que los usuarios se registren o al menos que se lo piensen.

Cuanto más fácil lo tenga el usuario para registrarse más posibilidades existen de que se cree una cuenta y de que pruebe nuestro servicio para ver si le convence o no, que es de lo que se trata.

Con posterioridad, una vez que se ha registrado con unos datos mínimos, que ha utilizado la aplicación o el sitio, que le ha gustado y que le hemos conseguido fidelizar, ya habrá tiempo de que complete si es necesario su perfil.

Aunque no comulgo especialmente con las siguientes prácticas, comento cómo lo hacen algunos.

En LinkEdin por ejemplo cada paso adicional que el usuario da para completar su perfil le otorga un porcentaje extra hasta llegar al 100%. A nadie le gusta dejar las cosas a medio hacer, ni mucho menos tener un porcentaje bajo en su perfil profesional, circunstancias ambas que le impelen a completarlo con posterioridad en el momento en que mejor le convenga.

En Monster.com en lugar de utilizar un porcentaje otorgan una valoración al perfil del candidato en función de que esté más o menos completo. Cuanto más datos aporte mayor es la “Calidad del perfil”.

Por igual circunstancia que en LinkEdin, el usuario se encuentra incitado a completar la información de su perfil cuanto antes con el fin de aumentar la calidad del mismo.

Para terminar, existen más formas para reducir aún más la fricción durante el primer contacto del usuario con la aplicación y lograr que al menos la pruebe.

¿Cómo?

Una de las maneras más comunes es utilizando APIs de terceros para gestionar la identidad digital, por ejemplo la de Google o la de Facebook tal y como hacen en Ideeli.com (esta es una captura antigua, en estos momentos tienen cerrado el registro)

Otra es permitir directamente al usuario acceder a la aplicación y cuando desee realizar determinadas acciones, como publicar un mensaje (caso de Twitter) o votar (Digg, Menéame) por citar dos ejemplos, pedirle que se registre. En este caso es recomendable una vez que el usuario se ha registrado, devolverle al punto en el que comenzó el proceso.

Por cierto, un par de cosas que podrían mejorarse tanto en ZML.com como en Ideeli.com. En la primera se le podría pintar un rostro al icono del usuario. Los usuarios son personas y nos sentimos mucho más identificados con una persona que con “algo” que no tiene cara. El impacto emocional es importante. En cuanto al segundo, prefiero pedir la cuenta de correo electrónico antes que el nombre de usuario:

• La cuenta de correo electrónico no suele variar y es más fácil de recordar.
• Con los nombres de usuario existe el riesgo de que el usuario introduzca uno cualquiera para registrarse y probar el sitio o curiosear, y que posteriormente no recuerde el mismo con lo cual si luego se le pide como requisito para logarse, estaremos poco más que perdiéndolo.
• En cualquier caso, es una buena práctica

¿Se os ocurren más buenas prácticas, recomendaciones o consideraciones a tener en cuenta en cuanto al registro o el logado?

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.

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.

En un post reciente publicado en CNET titulado “Por qué Microsoft debería abrir el código fuente de Internet Explorer” (“Why Microsoft should open-source Internet Explorer”), Matt Assay comenta que:

“Bien, he aquí una sugerencia para Microsoft como una buena forma de responder: Ofrece Internet Explorer como open-source.

Combate al Zorro de Fuego (NT. por Firefox, el navegador, juego de palabras) con fuego.

Olvida Office. Olvida  Windows. Olvida todas la otras fuentes que generan millones de dólares de efectivo. Microsoft no tiene ingresos directamente vinculados a Internet Explorer, pero IE es la puerta de entrada a la siguiente fase de su crecimiento. Ofrécelo como open-source“.

“So, here’s a suggestion for Microsoft as just one good way to respond: open-source Internet Explorer.

Fight Firefox with fire

Forget Office. Forget Windows. Forget all those other billion-dollar cash cows. Microsoft has no revenue directly tied to Internet Explorer, but IE is the gateway to the next phase of Microsoft’s growth. Open-source it”.

Esto es algo que llevo pensando desde hace mucho mucho tiempo. Microsoft debería abrir el código fuente de Windows y de Internet Explorer ya, y ya que estamos, Apple debería hacer lo propio con el de Snow Leopard y el iPhone OS. Coincido con el análisis de Mat Assay a medias por las siguientes razones (y por favor, que nadie me ponga la etiqueta de a este no le gusta tal…   o cual… empresa, en Thinkepi nos dedicamos precisamente a hacer esto, prospectiva de información):

• Hay una fuerte tendencia a nivel mundial a consumir y utilizar software de código abierto. Contra el código abierto y en lo que se refiere a grandes paquetes ofimáticos o herramientas como los sistemas operativos, es muy muy difícil luchar. Es una cuestión de economía de escalas, por muchos programadores que se tenga contratados, por mucho que se tenga a gente brillante y auténticos genios en nómina, nunca se podrá tener a más voluntarios ni a un mayor número de personas, ni de genios trabajando a la vez, que en un proyecto de código abierto.
• El trabajo colaborativo incentiva la creatividad y la innovación. Compartir el conocimiento y reutilizarlo produce la alquimia de las multitudes. El trabajo colaborativo genera sinergias imposibles de obtener mediante el actual modelo de trabajo basado en el individualismo y la competitividad. Los proyectos open-source son colaborativos y su trabajo abierto y libremente difundido. No es necesario que todos los que participan en ellos sean genios. Hasta el más mediocre puede tener en algún momento una chispa de genialidad que puede ser aprovechada o llevada a la práctica si es documentada y libremente compartida a través de plataformas abiertas.
  
• La Investigación, el Desarrollo y la Innovación cuestan mucho si eres un único jugador, y muy poco si tus potenciales desarrolladores y colaboradores son miles o cientos de miles de voluntarios.
  
• La motivación en un trabajo por mucho que te incentiven y en un proyecto open-source es completamente diferente. En un trabajo remunerado eres un trabajador, en el otro eres un voluntario que participa en el desarrollo de un producto por muchas razones entre las que, el dinero, no siempre es la más importante.
  
• Google está transformando el mundo. Literalmente. Y lo está transformando entre otras razones porque es una empresa tecnológica mundial y sus productos son ubicuos. Y como empresa tecnológica ha nacido en y está centrada en la World Wide Web, que es la plataforma, el canal, el medio y la herramienta en torno a la cual se están articulando las nuevas y emergentes Sociedades de la Información. El capital del siglo XXI es la Información (con mayúsculas), la Findability, la comunicación y la socialización. Está transformando la economía desmontando el concepto de empresa opaca, cerrada, echando abajo sus proxys y cortafuegos, y de trabajo entre cuatro muros que ha imperado desde la primera revolución industrial hasta nuestros días. Está deslocalizando las empresas, está haciendo emerger nuevas formas de relacionarse socialmente y de vivir gracias a, y a través de la tecnología. Está echando abajo las fronteras y el concepto físico de nación y las nacionalidades. Esta derribando las barreras lingüísticas facilitando por primera vez en la Historia una comunicación entre las personas en tiempo real, sincrónica y/o asincrónica de diferentes naciones. Está transformando las sociedades y el mundo. Y lo está haciendo desarrollando proyectos y software open-source y creando comunidades sociales de desarrolladores. Aportando herramientas y plataformas para que sean los usuarios quienes desarrollen y mejoren sus productos, creando la masa crítica de usuarios para que los productos echen a rodar sólos.
  
• El próximo sistema operativo de Google -Chrome- es open-source y está plenamente centrado en la World Wide Web, no es un sistema operativo al uso, tampoco es un navegador. Es una mezcla de ambos. Microsoft debería centrar ya Windows en la Red, evolucionándolo radicalmente y cambiar su modelo de negocio basado en la venta de software en cajas empaquetadas hacia uno centrado en el navegador -sistema operativo-. Sea con Gazelle, sea con Internet Explorer sea con…  ¿? integrando Azure, Office Live, Messenger y Bing en un escritorio virtual manejado por Explorer o ese otro nuevo navegador/Windows/sistema operativo. Tiene un año o menos. El tiempo que tarde Google en lanzar al mercado Chrome OS. A partir de ahí el punto de inflexión para Google va a ser tremendo y explosivo. Ya lo está siendo con las aplicaciones ofimáticas en la nube que está desarrollando. Es pura cuestión de tiempo que éstas comiencen a tener un grado de usabilidad que permita comenzar a competir en igualdad de condiciones con Microsoft Office.
  
• El crecimiento del SO de Google va a ser explosivo porque aporta servicios de una utilidad tremenda y de una calidad desde un punto de vista de la usabilidad, excepcional (para muestra, dos botones, Google Maps Navigation y Google Goggles y el resto de aplicaciones nativas de la Web) combinado con un factor clave, sus servicios son gratuitos para los usuarios ya que sus principales modelos de negocio (entre los que se encuentra la publicidad) están basados en el Freemiun.
• Hoy día el ordenador personal local no tiene sentido sin una conexión a la Red. Sí, puedes no estar conectado a la Red pero te estarás perdiendo el principal leit motiv para tener y pagar por el coste de un ordenador: Tener una identidad digital y acceder a la mayor biblioteca y fuente de conocimiento del Mundo. La World Wide Web es canal, producto, plataforma y red, profesional, social y personal y la puerta para acceder a la World Wide Web es el “navegador”.
  
• Los productos que se desarrollen para los usuarios deben estar en la Red, accesibles en todo momento, sometidos a un proceso continuo de evaluación, mejora y rediseño evolutivo de la interfaz que sea transparente para los usuarios. El modelo de creación y distribución del software ha cambiado. No tiene sentido seguir manteniendo un modelo de negocio basado en la venta de licencias de productos empaquetados en cajas y desactualizados desde el mismo momento en que se crean, no tiene sentido hacer pasar al usuario por el trámite de tener que instalar en su casa el software que ha comprado que viene en una caja cerrada y en un soporte obsoleto, un CD o un DVD, de tener que sufrir incompatibilidades de hardware, de tener que actualizar drivers (si es capaz de actualizarlos), de sufrir ralentizaciones en el proceso de su trabajo, de tener que descargarse megas y megas y gigas y gigas de constantes y continuas actualizaciones (de seguridad, mejoras, etc), de tener que reiniciar el ordenador día sí y día también para actualizar cuatro parches, de tener que entender cómo funciona una máquina cuando debería ser a la inversa, que la máquina le entendiera a él, a sus necesidades, que le auxiliara constantemente en sus tareas, en sus búsquedas, que le asistiese para brindarle aquella información que necesita en el momento en el que la necesita. No. Ya va siendo hora de superar todo eso. Se tiene que poner el acento donde se tiene que poner, en el usuario y en sus necesidades. La capa tecnológica debe ser tal que el ordenador se vuelva invisible porque al usuario no le importa lo más mínimo y para eso, el desktop tradicional se tiene que empezar a diluir y a fusionarse con la World Wide Web. Ya no hay barreras ni razones para mantenerlas. El “navegador” es la clave de la próxima generación de los sistemas operativos y su desarrollo debe de ser social, abierto y basado en estándares abiertos. Ya no hay razones para que no sea así. Lo contrario conlleva sufrir un lento declive en el mercado.
  

Microsoft y Apple deberían abrir ya sus sistemas operativos y centrarlos en la World Wide Web. Microsoft debería abrir el código fuente de Internet Explorer. El ecosistema es flexible y todos los actores se retroalimentan. Cada uno encuentra su parcela antes o después pero ahora mismo, el navegador es casi la capa tecnológica con la que más tiempo pasa el usuario interactuando durante su jornada laboral y fuera de ella. Y todavía lo va a ser más cuando las aplicaciones se trasladen masivamente a la nube. Es hora de abrir navegadores y software y evolucionar los modelos de negocio hacia modelos freemiun, basados en suscripciones, en micropagos y en venta de servicios. Y por supuesto, diluyendo la máquina y centrándose en la persona, no en los ingresos por venta de software.

El punto de partida para Microsoft, como concluye Asay, debe ser abrir el código fuente de Internet Explorer y comenzar a pensar en cómo evolucionarlo y fusionarlo con el futuro sistema operativo Windows.

(*) Noticia publicada en Genbeta: IDC sugiere que Windows 7 podría ser el último sistema operativo en local. Vía: 9to5Mac

…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.