tentándote.com

Hay hitos que marcan puntos de inflexión en la Historia de la World Wide Web.

Tab Candy es uno de ellos

Por fin Mozilla está enseñando los dientes ante los apabullantes movimientos de sus competidores, especialmente de Chrome y de Opera, y su acelerado ritmo de desarrollo.

Y lo hace con estilo. Con una derrochadora muestra de creatividad, innovación, talento y diseño logrando que las novedades que presentan terceros navegadores parezcan no tener más que un carácter meramente anecdótico.

Tab Candy es mucho más que un simple add-on. Es el primer vistazo que nos permite echar Mozilla a lo que puede ser la base de la nueva generación de sistemas operativos que se nos vienen encima. Una generación de sistemas que se van a caracterizar por:

• Ser ubicuos: Podremos utilizarlos en cualquier momento, desde cualquier lugar con conexión a Internet. En lo que respecta a Firefox además de la versión para PCs, laptops y notebooks, está disponible para móviles la versión para Nokia, y en beta, para Android.
• La independencia de dispositivo: Podremos usarlos en, y con cualquier tipo de dispositivos, cada versión adaptada a las características del hardware correspondiente.
• Estar centrados en la Nube: Ser sistemas operativos nativos de, y concebidos para  la World Wide Web.
• Estar sincronizados y ofrecer escritorios virtuales: En el momento en que el dispositivo correspondiente tenga un punto de conexión con Internet la sincronización será automática y transparente para el usuario. Los documentos, las fotografías, las canciones, los libros se almacenarán en la nube en un espacio personal de cada individuo. Mozilla acaba de lanzar Firefox Home que permite sincronizar con el iPhone el historial, los bookmarks y las pestañas que estén abiertas en el ordenador o dispositivo de sobremesa. Por otra parte Sync, es un proyecto que se ha graduado en los Labs, que permite sincronizar toda la información personal entre navegadores instalados en diferentes equipos. En el momento actual y según declaran en la página del proyecto está sufriendo cambios de interfaz de usuario para su plena integración con Firefox 4.
• Ser la identidad digital. Lo estamos viendo en las últimas distribuciones de las diferentes versiones de Linux y lo vamos a ver en Firefox. El sistema operativo tiende a perder su carácter de sistema operativo (y por ende su nombre rémora de una época caracterizada por centrarse en el software y no en las personas) para convertirse en un sistema personal. El reto será gestionar la privacidad de la persona, su identidad digital, y aquí, Firefox tiene mucho que decir.
• Ser sociales:  Centralizarán la gestión de toda la actividad digital social de la persona. Una persona – un navegador – un mundo de relaciones sociales. Permitirán gestionar las redes sociales en las que estemos inscritos. En este sentido, insisto, es extraordinariamente excitante lo que puede llegar a surgir de una red social descentralizada, no controlada por nadie como puede llegar a ser Diaspora, y su posible y futura integración con Firefox. En el momento actual Mozilla está desarrollando Contacts, una extensión que permitirá gestionar los contactos personales de distintas redes sociales como Facebook o Yahoo.
• Herramientas de comunicación: Una de nuestras principales actividades como seres humanos que somos, es la comunicación. Los nuevos sistemas operativos tenderán a integrar de forma nativa y gestionar todos los servicios y herramientas de comunicaciones que usemos:
  • A corto plazo la comunicación que mantenemos a través de blogs, servicios de microblogging, correo electrónico, feeds, podcasts y vídeos.
  • A medio plazo: la comunicación con terceros mediante voz y vídeoconferencia, y la integración de servicios como la televisión o la radio.

  En este sentido, la apuesta de Mozilla para Firefox se llama Raindrop. Es un módulo que permitirá gestionar de manera conjunta el mail, los feeds y los servicios de microblogging como Twitter. Asimismo Thunderbird antes o después terminará igualmente integrándose en Firefox.

• Plataforma de Software como Servicio en un primer momento: Las aplicaciones ya no se instalarán ni en el dispositivo, ni en el sistema operativo. Las aplicaciones residirán en la nube. No obstante y de cara a cuando no haya conexión con Internet, es llamativo el desarrollo en el que desde hace ya unos cuantos años lleva trabajando Mozilla llamado Prism. Éste módulo permitirá idealmente utilizar las aplicaciones de la nube en local aun cuando no exista conexión con la Red.
• Herramientas de productividad en un segundo momento: Las aplicaciones como tales tenderán a evolucionar e integrarse de forma nativa e invisible con los navegadores. El futuro es Ubiquity. La barra de navegación se va a convertir en una línea de comandos o línea de lanzamiento de interacción. La barra de navegación pasará a ser el punto para comenzar a escribir un mail, buscar un libro, añadir un contacto a nuestra agenda, etc. Será una interfaz líquida que presentará una apariencia distinta de acuerdo al servicio invocado.  Lo que se venderá, o alquilará, o explotará mediante modelos freemiun basados en economía de escalas y en la Larga Cola serán servicios o funcionalidades. Para entender cuál puede ser el nuevo modelo de negocio que puede emerger es recomendable leer el artículo que publicó en su día Aza Raskin sobre la línea lingüística de comandos y el nuevo paradigma de interacción.
• Ser gratuitos. Los beneficios no vendrán del software como producto per-se. El software será un medio para la venta de productos físicos o de terceros productos: gagdets, ordenadores, etc, o vendrán derivados de la explotación y comercialización de funcionalidades concretas invocadas a través de la línea de interacción, de la explotación de datos estadísticos del uso de los mismos, de la explotación de los datos de las búsquedas que realicen los usuarios o, simplemente serán sistemas operativos basados en desarrollos de software libre u Open Source.

Firefox se está convirtiendo paulatinamente en un sistema operativo ubicuo y en la nube. Así, es interesante observar la evolución natural que está sufriendo su interfaz, comparándola con el sistema desktop por excelencia de hoy día: Windows.

Éste es el escritorio de Windows 7:

Ver imagen ampliada en Flickr

Esta, la interfaz de Firefox 4  Beta 3:

Llama la atención las similitudes que pueden establecerse. En Firefox 4 se está dando literalmente la vuelta a la interfaz de Windows 7. Quizá no de manera consciente e intencionada pero sí de forma natural conforme evoluciona el producto.

Tanto en el sistema operativo de Microsoft como en el navegador existe un botón principal que da acceso a las operaciones más comunes:

Botón de inicio de Windows 7

Windows tiene una versión centrada en el dispositivo de hardware local, en las herramientas de productividad (ofimáticas, tratamiento de imágenes, hojas de cálculo, etc) y en el ocio y entretenimiento local (mis imágenes almacenadas en mi disco duro, mis canciones almacenadas en mi disco duro… una concepción opuesta a la tendencia actual del mercado que es la de consumo del ocio bajo demanda -música, vídeos y películas- mediante streaming, y de la gestión de la identidad y de la vida digital centrada en la World Wide Web).

Por otro lado, no ha sido hasta la llegada de Vista cuando han incluido un box que facilita la búsqueda directa de programas y archivos en el ordenador local, o el lanzamiento de aplicaciones. No obstante no está integrado con la World Wide Web ni orientado a facilitar la búsqueda en la misma. Los resultados se abren en el explorador de Windows y no amplían el rango a la Web en caso de ser necesario o requerido por parte del usuario, algo que debería cambiar en próximas versiones de Windows.

En cuanto a Firefox 4 Beta 3 y a su botón de inicio, tiene una visión netcentrica orientada puramente a la gestión de las páginas web, del navegador y de la navegación realizada en una sesión concreta:

Botón de inicio de Firefox 4 Beta 3

Mozilla reserva estas funcionalidades para el botón de inicio mientras que planea una Home Tab o suerte de “escritorio” como pestaña que se abra al comenzar la sesión en Firefox y que contendrá accesos directos a las aplicaciones en la nube más utilizadas por el usuario, contactos, historial de navegación, etc.

Esta aproximación es similar a la de otro gran jugador que está por llegar a la vuelta de vacaciones, Chrome OS, aunque en este caso parece que el botón de inicio tendrá la misma apariencia que el resto de pestañas de aplicaciones en línea.

Llama la atención la imagen del avatar del usuario presente en la esquina inferior izquierda junto a su dirección de mail ¿nombre personal en el futuro?, y el botón para deslogarse o cerrar la sesión. Ello implica que en cualquier dispositivo sea nuestro o de terceros, en el que esté instalado Chrome OS podremos nada más logarnos, disfrutar de nuestro sistema operativo personalizado, documentos, música, etc.

No obstante y aun cuando constituyen avances significativos, con Tab Candy se está dando un nuevo paso en su conceptualización e interfaz:

Tab Candy es un metaescritorio. Algo parecido a los “Espacios” -Spaces- y al Expose de Leopard aunque no igual.

En su interior se crean lo que Aza denomina espacios de trabajo que no son sino agrupaciones o grupos de pestañas realizadas por el usuario de acuerdo a sus propias necesidades y a su forma de organizar y categorizar la información del mundo (cada uno, tenemos una visión particular y diferente que adquirimos en base a nuestras experiencias, nuestro conocimiento, vivencias cotidianas etc. El conocimiento que evoca un ítem en la mente de una persona y las asociaciones que realiza con otras entidades informativas son propias de cada uno y diferentes de las de los demás. Por ende, un buen sistema de recuperación de información debería facilitar la creación de forma natural de estas agrupaciones para cada usuario. Tab Candy lo hace).

Ver imagen ampliada en Flickr

La disposición espacial de los espacios de trabajo según quiera el usuario (puedo reordenarlos y asignarles la posición que quiera arrastrándolos donde le parezca oportuno) y la organización de las pestañas en los mismos, facilita su posterior búsqueda y acceso. Adicionalmente el usuario podrá nombrar los grupos como desee y, en el futuro, personalizar su apariencia, guardarlos, compartirlos con terceros, etc.

Por último, en la parte inferior tenemos disponible un acceso rápido a las últimas pestañas abiertas por el usuario.

Tab candy es un metaespacio informativo que va más allá de la metáfora actual de los escritorios de los actuales sistemas operativos y quizá lo más interesante, es que subsume en sí la World Wide Web. Es un prototipo funcional que convierte en realidad parte de la visión del Zoom World de Jef Raskin: una interfaz de zoom inmersivo cuyos únicos límites eran los de la World Wide Web.

Una posible, bellísima y potente visualización de la Red hipertextual de redes por excelencia, con un extraordinario potencial.

Tab Candy es algo nuevo y fresco. Firefox está tendiendo a convertirse en un sistema operativo personal, en la nube.

Por fin.

Y tenía que venir, como no, por parte de los chicos de Mozilla y de la innovación colectiva de los Concept Series. Bien por Aza y por el equipo de Experiencia de Usuario de Firefox y Mozilla Labs.

Con este post, esta casa cierra por vacaciones hasta septiembre. Disfrutar del verano, sed malos todo lo que podáis y a la vuelta queridos lectores, nos reencontramos.

Bueno, ya era algo que me empezaba a preocupar un poco ya que en las últimas nightly de Firefox no observaba ningún cambio, pero por lo que veo, la gente de @Mozilla como no podía ser de otra forma, en su cuidado obsesivo de los diseños al pixel, acaba de publicar una actualización de las maquetas de la interfaz de Firefox 4 para Mac de la próxima gran versión del navegador en la que empiezan a despejar las dudas.

Confieso que tenía franca curiosidad por ver cómo resolvían el tema en cuanto al diseño gráfico de los laterales de la barra de tabs. Mirar una captura de la nightly de hoy (16 de junio de 2010) de Firefox 4 para Windows 7 en la que los bordes por donde aparecen y desaparecen las tabs aparecen planos y sin una línea que los remarque:

Echarle un vistazo ahora a la maqueta del diseño gráfico de la interfaz que han publicado para Mac, concretamente a los puntos que marcan las flechas amarillas, los laterales de la “barra de tabs” por las que aparecen y desaparecen éstas (nota: a pesar de que se ven mal las imágenes en el blog porque aparecen por debajo del texto de la columna derecha, no he querido reducirlas para que se aprecien correctamente los detalles. Para ver bien cada imagen lo único que tenéis que hacer es posicionaros encima de ella, dar botón derecho del ratón y seleccionar la opción “Ver imagen” para verla a pantalla completa en el navegador sin que os moleste la barra lateral del blog):

Os pongo a continuación la maqueta sin las flechas amarillas para que podáis apreciar mejor el diseño gráfico de los bordes de la barra por los que aparecen y desaparecen las tabs:

Fijaros en cómo jerarquizan los elementos de la interfaz de mayor a menor importancia situándolos en diferentes capas de profundidad mediante el uso de las sombras para crear un efecto de oclusión (unos elementos delante de otros). Concretamente pueden distinguirse 4 capas de información o de elementos de la interfaz:

1. La capa de color amarilla: Tab activa que contiene los principales elementos de la interfaz del navegador:
   • Los botones de adelante y atrás para realizar las correspondientes operaciones a través del historial de páginas visualizadas.
   • La barra de navegación o “barra maravillosa” junto a los botones de recargar/parar que ahora han fusionado en uno, situados al final.
   • El box de búsqueda para ejecutar consultas contra los buscadores, que inexplicablemente, versión tras versión, siguen sin fusionarlo con la barra de navegación mientras que en Chrome ya sólo tenemos una única barra de navegación en la interfaz principal. ¿Las causas? ¿? supongo que será cuestión de dinero o que tengan especificado por contrato con los buscadores el hecho de que siga separada o no lo sé pero desde luego, debería tender a desaparecer y fusionarse con la barra de navegación principal en aras de mejorar la usabilidad y simplificar la interfaz principal. El referente en este aspecto es, como comento, Chrome.
   • El botón de los marcadores que posicionan en último lugar, a la derecha, otorgándole gran importancia de acuerdo al estudio que hicieron del uso de los menús y que se sumariza en el mapa de calor que generaron a partir de los datos obtenidos de los usuarios que tenían instalada su herramienta de testeo remoto Test Pilot (para más información, no dejéis de leer el post de Alex Faaborg al respecto). En el mapa de calor podéis observar cómo el menú bookmark y sus opciones son las más usadas (se indican mediante el color rojo). ¿Por qué posicionándolo en ese lugar le están otorgando una relevancia especial, en mi opinión por varias razones:
     • La mitad derecha de la pantalla es aquella en la que para los diestros, normalmente se suele encontrar con mayor frecuencia posicionado el cursor del ratón. Esta afirmación está basada en mi mera percepción por lo que debéis tomarla con pinzas (como todo lo que digo, por supuesto) hasta que no haya estudios formales que la corroboren.
     • Por tanto, es más rápidamente alcanzable por el cursor del ratón al tener que recorrer el mismo por término medio una distancia menor desde la posición original en la que se encuentre.
     • Está posicionado al final de la barra muy cerca del borde derecho de la pantalla. Cualquier cosa que esté situada cerca de los bordes de la pantalla va a poder ser alcanzada con mucha mayor rapidez por el cursor del ratón ya que el borde actúa como guía visual, límite, barrera y freno del cursor en su desplazamiento. El movimiento tiene que ser menos preciso y por tanto se ejecuta con mayor rapidez hasta alcanzar el objetivo -el botón del marcador-.
     • Esta situado en el lugar en el que termina el escaneado visual de la parte superior de la interfaz -la cabecera global del navegador- lo que significa un refuerzo cognitivo de su posición en nuestra memoria de corto plazo.
2. La capa de color rojo correspondiente al botón de la home, situada en segundo plano por detrás de la amarilla. Contiene el botón para volver a nuestra Home Tab o página que tengamos configurada por defecto en las preferencias. Se aprecia que está en una capa diferente de la amarilla por el borde inferior contínuo, negro, que lo separa de la misma (o la parte correspondiente del borde superior de la capa amarilla).
3. La capa marrón en la que están situados los controles de cerrar, minimizar y maximizar. El título de la tab activa centrado, los controles de desplazar a izquierda y derecha la barra de tabs, el control de nueva tab (el “+” situado a la derecha) y el control que despliega el menú con la lista de los títulos de las tabs abiertas en la barra de tabs. Todos estos controles están agrupados en la misma capa y aquí viene lo interesante porque… ¿cómo han resuelto el problema de la jerarquización de la capa de la barra de tabs respecto a las demás a través del diseño gráfico…¿?…pues aplicando una sombra en el lateral de la barra de tabs (lo que marcaba en la maqueta superior con las flechas amarillas). Ello crea el efecto de un bolsillo de un pantalón o de una página en la que con un cúter hiciéramos un corte y por el mismo pasásemos una tira de papel que pudierámos deslizar a uno u otro lado según nos conveniese. Vamos, exactamente el mismo efecto que aplicaba el equipo de UX de Monster para crear puntos focales de atención en su página, y concretamente, en cuanto a cómo diseñaban las tabs que daban acceso a los apartados de “Información personal”, “Experiencia”, “Formación”, y “Objetivos profesionales” (podéis leerlo bajando por el post, como al quinto pantallazo aproximadamente).Una solución de diseño gráfico la del equipo de UX de Firefox francamente inteligente.
4. La capa gris de la barra de tabs propiamente dicha que, con su diseño gráfico, se “introduce” y emerge de la capa marrón.
   

Por concluir, la jerarquización de los elementos de una interfaz no sólo se consigue mediante un buen uso de los colores (y remito nuevamente al post de Monster en el que hablaba de ello). Otro gran recurso además, que tenemos a nuestro alcance son las sombras que ayudan a crear un efecto de oclusión o superposición de los elementos de la interfaz y por ende, de capas de información.

Me encanta Firefox. En su equipo de diseño se respira y se vive la Experiencia de Usuario en mayúsculas. Y lo mejor, es que hay mucho de su trabajo cotidiano que hacen público para uso, disfrute y aprendizaje, de todos.