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.

Estaba revisando mi timeline esta mañana cuando me he encontrado con un interesante tweet de Madhava sobre el último post que ha escrito a raíz de una charla que dió en el Mozilla Summit 2010 titulada “Diseñando para compartir”.

Os recomiendo leerla antes de continuar.

En ella cuenta cómo somos seres sociales, y cómo en las próximas versiones tanto de Fennec (Firefox móvil) y del propio Firefox, se ha de comenzar a poner el acento entre otras cosas en las herramientas de diálogo y compartición de la Web, como instrumentos socializadores y de comunicación que son.

A propósito del tema hace ya unos meses, para uno de los Mozconcept de Mozilla Labs que tenía por objeto presentar ideas para rediseñar la pestaña de inicio del navegador, hice una propuesta rápida acerca de cómo veo el futuro del navegador (está a continuación, un poco más abajo).

Conforme a lo que comenta Madhava en su charla, una interesante modificación para realizar en la propuesta sería, en el icono de “Personas” o “Gente”, además de los enlaces directos a las aplicaciones de redes sociales como Facebook o Tuenti, o de microbloging como Twitter, añadir iconos que representarían los principales grupos de personas con los que interactuamos en nuestro día a día, tanto de amigos como de profesionales. Al pulsar sobre los mismos se abriría una interfaz tipo bocadillo en la que podrían aparecer los avatares de todas las personas de dicho grupo. Pulsando sobre uno de ellos nos iríamos a una pestaña en el navegador en la que se presentaría el perfil de nuestro contacto generado a partir de los datos que el navegador obtendría de las APIs de las diferentes aplicaciones o, idealmente el día de mañana y si se llega a concretar en algo tangible, de redes sociales abiertas como Diaspora.

A partir de ahí, lo dejo a vuestra imaginación ;-)

Por cierto, en esta propuesta falta la barra de navegación: el box para introducir las URLs que a su vez, puede convertirse en el punto de partida para cualquier tipo de interacción. O dicho más claramente: Ubiquity vamos. La hice con prisas y se me olvidó ponerla.

Me encanta.

Me encanta el rediseño del logotipo de Spanair:

Dicen que es un avión cruzando el mundo aunque los propios empleados de la aerolínea comentan lo que ven, una sonrisa:

Algunos sostienen que se parece al logotipo de Sony Ericsson:

Aunque  yo me decanto más por el de Pepsi:

Parecido que otros asimismo establecen y sumarizan comentando de donde deriva el de Spanair:

Derivacion del logotipo de Spanair. De izquierda a derecha: Logotipo de Boeing + logotipo de Pepsi + logotipo de Expedia

Y es que el círculo es uno de los recursos más poderosos que como diseñadores tenemos a nuestro alcance para focalizar y atraer nuestra atención ya que en la naturaleza, pocas formas hay puramente circulares que podamos percibir cotidianamente, salvo aquella por excelencia de la que dependemos, nuestro astro rey:

…y que sirven junto a una correcta elección de los colores y estudio de las formas para construir marcas potentes que en momentos decisivos transmitan confianza y llamen a la acción para empujar al cambio:

Desde luego que toques de diseño emocional incorpora el logotipo de Spanair, ya que además de la sonrisa tiene un cierto toque retro que nos recuerda a algunos grandes iconos de nuestra juventud (y que marcaron en su momento todo un hito tecnológico):

Parecido que emerge y se hace evidente si invertimos sus colores utilizando alguna herramienta como Photoshop:

(Fijaros en el logotipo original en el detalle de cómo acentúan con un sutil degradado a naranjas más fuertes en donde estaría el comienzo de la boca y a claros en la versión negativa del logotipo)

Y es que aunque nuestra mente consciente no lo perciba, nuestro subconsciente es muy bueno detectando los patrones y mensajes que se ocultan detrás de las formas, recurso extraordinariamente potente que bien utilizado puede dar mucho juego y en cuyos principios se sustenta aquello que llamamos Arte (si no os habéis dado una vuelta por él, os recomiendo visitar el Museo Thyssen Bornemisza, y si no vivís en Madrid, echarle un vistazo a su exposición virtual de arte moderno).

Usados consciente e intencionadamente estos recursos de diseño  nos permiten hacer cosas realmente interesantes:

¿Qué valores quieres transmitir Google con sus terminales Android en contraposición al elitismo de los iPhones?

¿Es un androide rebelde? ¿Enfadado? …

¿y qué valores transmiten si invertimos los colores de la imagen y los espacios positivos pasan a ser negativos y los negativos positivos?

El efecto que provoca es el opuesto, amigabilidad, cercanía, calidez incluso un cierto aire de sumisión, observación, expectación…  ¿curiosidad?

El círculo es un poderoso atractor de la atención. Los bordes redondeados transmiten calidez y cercanía (de ahí que nos gusten tanto a los Diseñadores de Interacción y gráficos y que les gusten tan poco a los maquetadores por el trabajo que les dan hasta que llegue CSS3).

Si quieres crear un punto focal de atención en tu web usa los círculos

Si quieres que tu marca sea interesante, usa los círculos

Combinándolos con otros recursos semióticos de Diseño de Información (proporciones aúreas, superposición de elementos circulares en capas para crear movimiento, linealidad en torno a ejes espaciales en 3 dimensiones…) los resultados pueden ser francamente espectaculares ayudando a crear marcas tan potentes a nivel mundial como la de Pepsi.

Briefing creativo de cómo se gestó el diseño del logotipo de Pepsi (PDF) (vía blog de Alex Faaborg)

Rediseñando el logotipo de Firefox (vía blog de Alex Faaborg)

Simplicidad, armonía, equilibrio, calidez, cercanía, complicidad, ritmo, dinamismo, movimiento, credibilidad…

…en resumen y concluyendo, me encanta el logotipo y la nueva marca de Spanair.

Enhorabuena.



“Funciona porque observar a los usuarios le convierte en un mejor diseñador: Aunque términos como “Diseño Centrado en el Usuario” y “Experiencia de Usuario” se encuentran ahora en el vocabulario de la mayoría de gente que trabaja en los sitios web, relativamente pocos diseñadores, desarrolladores, partes interesadas y directores, que participan en el proceso de diseño, han dedicado tiempo a observar cómo la gente utiliza los sitios web. Por lo tanto, acabamos diseñando para nuestra idea abstracta de usuarios basada en su mayor parte en nosotros mismos.”

Steve Krug. Haz fácil lo imposible: La guía para detectar y determinar los problemas de usabilidad. Madrid: Anaya Multimedia, 2010, p. 42

El otro día tuve la fortuna de poder compartir charla y almuerzo con el equipo de Experiencia de Usuario de Oxxigeno que regularmente organiza pequeños encuentros con profesionales de nuestro ámbito para compartir conocimientos y conocer un poco más el día a día de nuestra profesión. Fue una charla particularmente amena y agradable (muchas gracias Carlos, Jose Ramón, Diego) en la que hablamos de muchas cosas y entre otras, de algo que siempre me he hecho como autocrítica y que he pensado casi casi desde que llevo trabajando como consultor:

Hacemos Diseño Centrado en el Usuario (DCU) sin el usuario

Podemos hablar de innovación, podemos hablar de Experiencia de Usuario, podemos montarnos entelequias sobre colores, filosofías de diseño o aspectos emocionales, podemos hacer y hacemos muchas cosas en nuestra día a día, pero paradójicamente una de las que no hacemos de forma habitual y cotidiana sea por lo que sea -no hay tiempo, no hay presupuesto, no lo hemos hecho nunca, nuestro cliente lo desconoce y no le da valor- es testear las cosas con usuarios de carne y hueso.

Creo que va siendo hora de cambiar

La usabilidad y la UX han evolucionado mucho en los últimos 10 años y hoy en día no podemos seguir haciendo las cosas como las hacíamos entonces porque como muy bien comentó el otro día Daniel P. Uriol en el evento organizado por UPA Madrid (enhorabuena por el mismo -Eusebio, Olga y demás compañeros-) ya no basta con unos simples wireframes, ahora es necesario que comencemos a dar más. Y entre esos factores de valor adicional como mínimo destacan dos:

1. La analítica web.
2. Los tests de usuario.

Leer en palabras de Krug lo que uno lleva años pensando es reconfortante. Testear con usuarios debería ser una parte más del proceso de diseño tan natural como la toma de requerimientos o la realización de prototipos.

Por cierto, y para terminar, creo en la evangelización y creo que ahora, más que nunca, sigue siendo fundamental y necesaria. Por eso escribo entre otras cosas este blog. Porque se diga lo que se diga, creo que al menos en España queda mucho camino por recorrer, tanto de cara a los que no nos conocen, como de cara a los que nos conocen pero siguen aplicando las mismas metodologías de hace 8 ó 10 años. Hoy la Web ha cambiado, las tecnologías son distintas, tenemos productos gratuitos o muy asequibles -Google Analytics, Usabilla, Crazy Egg, por citar tan sólo tres- que nos permiten hacer y conocer cosas que ni se nos habían pasado hace unos años por la cabeza. Tenemos una increible nueva cantidad de dispositivos que están llegando al mercado y que están redefiniendo una vez más las reglas de la Interacción Hombre-Ordenador que es cada vez menos Hombre-Ordenador y más Hombre-Dispositivo o incluso Hombre-Ambiente (entiéndase por ello la Internet de las Cosas u Objetos).

Al igual que su primer libro, este nuevo de Krug se me antoja una obra didáctica, ideal de iniciación para concienciar sobre la necesidad de hacer tests de usuarios.

Avalancha Alternativa nos propone un nuevo diseño para esas sillas tan 1.0 que inundan las aulas de nuestras universidades con el fin de darle un poco de energía a nuestros estudiantes universitarios. Como ellos mismos dicen, ya va siendo hora de empezar a introducir las Nuevas Tecnologías de la Información en las aulas para mejorar el aprendizaje y el conocimiento, sea con iPads, con netbooks, con portátiles… ¡¡o con sillas!!

¡¡Nuevas interficies educativas ya!!

Me encanta, de verdad, me encanta el prototipo… (y no sólo por la fantástica música)…

¡¡La compro!! :-D

Tony, Eva, Tomás, Boni, David, Menchu, compas… ¿para cuando renovamos la sillas de la facul? :-)

(un fuerte abrazo)

A propósito de la propuesta de Jennifer Boriss para rediseñar/suprimir la barra de estado del navegador en Firefox 4 se está montando una de esas bonitas discusiones antológicas que me hacen morir de envidia y en la que se aprende lo que no está escrito sobre usabilidad.

Abajo os pongo unas capturas de cómo lucen las interfaces de los navegadores principales hoy día para que veáis cómo aparece (o no) la barra de estado:

• Minefield de Mozilla (la alpha de Firefox 4) muestra la barra de estado como siempre en la parte inferior.
• Opera también la tiene aunque presenta un curioso diseño visual, cuando el cursor del ratón se pone encima de un enlace, se muestra la URL en la parte inferior pero en una capa gráficamente integrada y al mismo nivel jerárquico desde un punto de vista de Diseño de Información que el resto de las utilidades en la esquina inferior izquierda.
• Chrome no muestra la barra de estado pero cuando el cursor se pone sobre un enlace, se enseña su URL en la parte inferior, en una capa emergente de color azul, en la esquina inferior izquierda . De la URL sólo se muestran los 59 primeros caracteres incluidos el http:// seguidos de puntos suspensivos.
• Safari opta por la solución más radical (y en mi opinión la peor) no muestra ninguna barra de estado.

Me gustaría conocer vuestros puntos de vista y opiniones:

• ¿Barra de estado sí / barra de estado no? ¿por qué?
• Estos días estoy trabajando sobre SEO y URLs amigables en el trabajo y me estoy dando cuenta de que todavía hay que hacer mucho, mucho trabajo desde un punto de vista de los usuarios para mejorar las actuales URLs. Seguimos con un sistema de nombres y direcciones artificioso, extraño y ajeno para una persona normal, con una nomenclatura durísima (http, : , // , ftp …  -¿pero qué demonios es eso?-) heredada ni más ni menos que de hace 16 años. La pregunta es ¿Qué se puede hacer para mejorar las URLs y ayudar a los usuarios a formarse un constructo mental del espacio de información (sitio web) por el que están navegando? ¿Qué deberíamos hacer con el http:// ftp:// y otras “rarezas tecnológicas” del pleistoceno carentes de significado para las personas?

Fijaros además en las capturas de abajo en como se construye la jerarquía informativa de la interfaz del navegador en base a la jerarquía semántica del documento que, a la postre, es lo que le importa al usuario dado que la interfaz del browser realmente es cuando menos, secundaria:

• En el área de las pestañas o tabs, se muestra sólo parte del título del documento (página web) que está visualizando el usuario con el problema evidente asociado: se está sacrificando espacio en aras a ganar píxeles verticales para representar una mayor cantidad de contenido. ¿Cómo resolvemos este problema de no poder visualizar el título completo del documento cuando es la entidad semántica de mayor nivel que sumariza idealmente el mismo?
• Dado que el título no se visualiza por completo por el pequeño espacio horizontal disponible en cada pestaña, en el box de la barra de navegación que puede (y que debería) funcionar como línea de comando e interfaz adaptativa se muestra la URL del documento que no transmite de manera satisfactoria en un gran número de ocasiones (todas aquellas en las que no es amigable y aun con URLs amigables tenemos problemas):
  • De qué trata el documento.
  • La estructura del espacio de información o sitio web (muestra tan sólo una rama jerárquica en la que está clasificado, categorizado o facetado el documento, pero nada más). Llegados a este punto una mejora importante que se podría implementar en futuras evoluciones de la interfaces de los navegadores para ayudar a los usuarios a navegar, es deplegar de alguna manera un mapa o representación visual del sitio que idealmente… ¿se podría construir en base a los sitemaps.xml?
  • Una semántica comprensible para una persona. Las URLs no están codificadas en un lenguaje amigable al utilizar signos y nomenclaturas ajenas al código lingüístico que hablamos, escribimos y utilizamos, nuestra lengua madre, castellano o la que sea. En las URLs no se habla el lenguaje de los humanos, se habla usualmente el lenguaje de las máquinas :-( lo cual es un gran fallo desde el punto de vista de la usabilidad y un área en la que hay trabajar para subsanar este problema.
• Al estar situada la barra de estado en la parte inferior del navegador se está separando espacialmente y rompiendo la relación semántica que existe entre el enlace inserto en el documento y sobre el que se posiciona en un momento dado el cursor del ratón, y su URL que se muestra en la barra de estado en la parte inferior.

Firefox Minefield- Tooltip que se muestra cuando el cursor se posiciona sobre un enlace. Nótese como se visualiza el título especificado en el atributo title del enlace y cómo está espacialmente separado el tooltip de la URL que aparece en la barra de estado en la parte inferior rompiéndose la relación semántica entre ambos.

• Como propuesta de posible mejora para los navegadores se podría testear si la URL debería enseñarse como un tooltip. Si existe un title como atributo en el enlace entonces deberían mostrarse ambos, título y URL para ofrecer toda la información posible al usuario sobre el documento que se encuentra detrás del enlace y ayudarle a decidir si desea o le interesa hacer clic para visualizarlo o no. En cuanto al problema de la longitud de la URL podría considerarse si en lugar de enseñar toda se podría poner algún límite en el número de caracteres que se visualizarían a priori mostrando tan sólo parte más relevante (¿el nombre de la página junto al último directorio – subdirectorio de la misma?) o plantear algún tipo de capa que se desplegase a demanda del usuario de manera más o menos similar a como sucede con la barra de utilidades contextual de Word 2007:

Word 2007. Aspecto del cursor cuando está sobre una palabra

Word 2007. Aspecto de la barra de utilidades cuando se ha seleccionado una palabra. Nótese como se muestra de manera sútil y prácticamente transparente la barra contextual de utilidades con las que el usuario puede formatear el texto como mejor le parezca.

Word 2007. Barra de utilidades contextual que aparece cuando el usuario mueve el cursor hacia el contorno semitransparente (ver captura anterior) que la representa. De la misma forma para no mostrar toda la URL en el tooltip junto al title que se visualizaría cuando el usuario posicionase el cursor del ratón sobre un enlace, se podría considerar la posibilidad de mostrar tan sólo parte de la URL inicialmente y, a demanda del usuario con algún gesto sobre un área del tooltip, desplegar la URL completa si fuera necesario.

Hay mucho campo de investigación aquí y mucho espacio para las mejoras.

La pregunta es relevante ¿mostramos la barra de estado? ¿Sí? ¿No? ¿Que os parece la propuesta de Jennifer Boriss?

Os dejo con las capturas de los navegadores para que veáis como muestran actualmente las barras de estado (y las URLs):

Barra de estado en la parte inferior de la Minefield (Alpha) de Firefox 3.7

Barra de estado en la parte inferior en Chrome. Aparece sobre una pequeña capa azul cuando el usuario posiciona el cursor sobre un enlace y muestra hasta 59 caracteres de la URL incluidos el http://

Opera. Barra de estado en la parte inferior. Cuando el usuario posiciona el cursor sobre un enlace se amplia la pequeña capa con las utilidades de la esquina inferior izquierda permitiendo visualizar la URL

Pranav Mistri es quizá uno de los investigadores que más están haciendo por humanizar y revolucionar el modelo de interacción actual que mantenemos con los ordenadores y dispositivos tecnológicos.

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? :-)

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.

LA DE CAL:

Escenario de uso:

Un ciudadano quiere presentar su declaración de la renta. Va a la página web de la Agencia Tributaria y se descarga el programa de ayuda para hacer la renta PADRE 2009.

Se lo instala, lo ejecuta y accede a la pantalla de bienvenida donde comienzan los problemas:

¿Y ahora qué? se pregunta el ciudadano

¿?

El módulo central es pasado por alto completamente por su pinta de publicidad y por tener el fondo de color gris lo que parece que indica que tiene información que es más verborrea que otra cosa. El layout es de pena y la jerarquización de la información nula al tener los encabezados:

• “Dar de alta una nueva declaración”
• “Ayuda” y
• “Declaraciones recientes”

el mismo tamaño y tipografía que el inicial, inmediatamente debajo del logotipo de:

• “Programa de ayuda para la declaración del impuesto sobre la Renta de las Personas Físicas correspondiente al ejercicio 2009″

y que el teléfono de información a la derecha junto con el rótulo:

• 901 33 55 33
• “Información tributaria”

El punto de acción que interesa resaltar para que el usuario comience a realizar la declaración, el enlace “Modelo 100 IRPF” es obviado completamente por nuestro ciudadano quien se ve las caras de tarde en tarde con Hacienda y no termina de entender/saber del todo bien qué es eso del “Modelo 100 IRPF” (es que es un poco torpe, qué se le va ha hacer, ya se sabe lo de los usuarios de a pie de calle es que no dan para más… ) a pesar de haber presentado la declaración ya desde hace unos cuantos años.

Al final, después de un rato, escaneando visualmente la interfaz encuentra el icono superior izquierdo con pinta de documento y signo “+” al lado del icono de la puerta.

- ¡Ah! – piensa…

- que va a ser esto mira tú… -

y va y pone el cursor encima y lo deja unos momentos encima y ¡¡albricias!! le aparece un tooltip que le dice “Nueva declaración”

- jeje -

piensa nuestro confiado ciudadano que ufano acaba de encontrar la manera de comenzar a dar de alta su nueva declaración. Hace clic (menos mal que no sufre de parkinson y no se le va el cursor al icono de al lado porque si no lo de salirse de repente del programa, pufff… ) y…

- estoooooo… -

- estoooooooooooooo   ¿¿?? -

- ¿Y cómo doy de alta una nueva declaración? -

piensa nuestro ciudadano desconcertado.

¿Cómo se da de alta una nueva declaración?

Pensadlo unos momentos antes de continuar leyendo por favor.

¿?

• El ciudadano intenta hacer clic en el enlace azul subrayado que pone “Nueva declaración” dado que es un enlace con pinta de enlace de los que ve (o veía) antes habitualmente todos los días al navegar por la Web, y cuyo patrón de interacción tiene más que interiorizado. Hace clic sobre el enlace a pesar de estar un poco mosqueado ya que el icono de la izquierda que lo acompaña no tiene esa pinta gráfica con esos colores tan bonitos que tenía antes. Ahora, aparece como apagado, como desactivado, al igual que el resto de los iconos que acompañan los enlaces de “Abrir declaración” “Borrar” “Duplicar” y “Renombrar” pero es que el enlace azul con su azul es tan cautivador que…  nada, a hacer clic.¿Resultado?Nada, intenta hacer varios clics sobre el enlace y que aquello no va. Y no entiende por qué, porque pinta de enlace sobre el que se puede hacer clic, desde luego que tiene.Gran y severo fallo de usabilidad. La disonancia cognitiva es importante y rompe el modelo de interacción que conoce y tiene interiorizado el usuario. Por un lado tenemos un icono con apariencia de no activado y por otro un enlace azul con apariencia de activo.
• Como el único punto de interacción que hay en la pantalla aparte de los iconos de la barra de tareas en la que ahora, el icono de “Nueva declaración” aparece como desactivado, es el ¿¿box de búsqueda?? ¿¿?? debajo del rótulo de “Índice de declaraciones”, hace clic en el mismo y el puntero del cursor se pone parpadeante… y sigue sin suceder nada…
• Como ya no sabe que hacer, escribe una palabra en el teclado y…¡¡VAYAAA!!¡¡QUE AHORA SE ME ACTIVA POR FIN EL ICONO DE NUEVA DECLARACIÓN JUNTO A SU ENLACE!!

que por cierto… ¿y cómo es que hay dos iconos con la misma apariencia y el mismo nombre que supuestamente hacen lo mismo en dos posiciones diferentes de la pantalla, uno en la esquina superior izquierda y otro en el centro, a la derecha del box de ¿búsqueda? ¿de entrada de texto? ¿de…? ¿?

Resumiendo: Para comenzar a dar de alta una nueva declaración el proceso es:

• El usuario accede al programa y cierra el mensaje de bienvenida que le aparece.
• Hace clic en el enlace de “Modelo 100 IRPF” (rótulo que es de todo menos intuitivo para el usuario) o en el icono de “Nueva declaración” de la esquina superior izquierda.
• Se le presenta la segunda pantalla con el famoso campo input de texto.
• Hace clic en dicho campo y escribe el nombre que quiere dar a la nueva declaración para lograr que se le active el icono de “Nueva declaración” a la derecha del campo input.
• Pulsa sobre el enlace de la derecha, ahora sí, activo de “Nueva declaración”
• Comienza el proceso de crearla rellenando sus datos personales.

Pregunta:

¿Cuantos ciudadanos no habrán sido siquiera capaces de empezar a rellenar su declaración de la renta por no haber averiguado cómo crearla?

¿?

Me gustaría saber la respuesta pero creo que me voy a quedar con la duda.

Creo que para el año que viene, al menos este aspecto del programa PADRE se debería mejorar radicalmente rediseñando por completo esas dos pantallas, fusionándolas si es necesario, suprimiendo funcionalidades duplicadas y racionalizando la barra de tareas (si se desea plantear así) del programa.

Año tras año, la Agencia Tributaria hace un gran esfuerzo para mejorar las cosas y hacernos la vida un poco más fácil a los ciudadanos…

pero todavía le queda trabajo, algo normal y natural en cualquier proyecto, vamos.

LA DE ARENA:

• Mucho, muchísimo mejor el acceso al apartado de la información de la campaña de la Renta 2009 con dos módulos grandes bien destacados en la home de la Agencia, categorizados por perfiles: “Ciudadanos” y “Empresas y profesionales” y con el primer enlace rotulado como “Renta 2009″. Muy fácil de encontrar, muy bien situado.

• Aunque se puede trabajar más la landing page de la campaña de la Renta 2009, es bastante escaneable visualmente e incluye enlaces directos a las opciones más buscadas (programa PADRE, borrador de la declaración, cita previa, faqs, enlaces y manuales de ayuda y servicio de atención teléfonica). Orientada a las tareas. Cambiaría los rótulos de algunos contenidos o agruparía quizá la información de otra manera para evitar alguna duplicidad como los enlaces de “Datos fiscales” y “Borrador de la declaración” que aparecen con iguales literales en diferentes epígrafes lo cual puede dar lugar a algún equívoco, pero vamos, que la página es lo que tiene ser: útil.

• Y por último y para terminar, lo más importante, por primera vez en no se cuantos años que llevo haciendo la declaración, he podido entrar en el apartado de “Tramitación de los servicios de ayuda disponibles > Confirmación del borrador” que previamente me había mandado la Agencia sin el DNI electrónico. Sólo con el número de referencia que este año ponían más clarito en la carta que envían, no como en años pasados que no sabías que número te estaban pidiendo. A pesar de los problemas de visualización en Firefox tanto en Windows 7 como en Mac, he podido revisar el borrador más o menos con facilidad. Algunas cosas hay que cambiar como la gestión de pop-ups (¿veremos Ajax más adelante y procesos de edición contextualizados en lugar de abrir pop-ups en el futuro?). He podido comprobar que todo estaba correcto, dar al botón de confirmar y andando. Imprimirme la página resultante como comprobante y cumplir con mi obligación de buen ciudadano, etc, etc :-P :-P

Están haciendo un esfuerzo encomiable y en la buena dirección. Lo que hace falta es que sigan en ella y sigan invirtiendo y mejorando en la usabilidad tanto de la web, como del programa PADRE, que buena falta le hace.