tentándote.com

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.

Apple acaba de publicar las Directrices para el diseño de Interfaz Humana del iPad y de elementos de interfaz de usuario de sus aplicaciones.

The Astonishing Tribe, más conocida como TAT, es una compañía sueca de la que ya hemos hablado antes por estos lares . Sus aplicaciones e interfaces no dejan indiferente a nadie y en buena medida, con cada una de ellas que lanzan introducen nuevos conceptos y patrones de interacción.

En esta ocasión acaban de presentar varios widgets para Android en los que la cinestesia (movimiento, animación) y los efectos “orgánicos” (por llamarlos de alguna forma) están a la orden del día. En mi opinión creo que incluso se está comenzando a abusar demasiado de ellos, pero bueno. Al fin y al cabo es un recurso -la animación- nuevo que tenemos y que estamos aprendiendo a utilizar.

Lo mejor que tiene el espacio digital es que es maleable lo que significa que podemos retorcerlo y hacer con él lo que nos dé la gana.

¿Qué hay detrás de una interfaz plana como la pantalla de un monitor?

Pues un espacio literalmente n-dimensional que podemos conceptualizar como queramos. La imaginación es el límite y propuestas como la de TAT para Android son precursoras de los nuevos patrones de interacción que están viniendo en las nuevas interfaces:

¿Dónde se pueden encontrar más fuentes de inspiración para nuevos modelos de interacción y espectaculares efectos de cinestesia…?

Pues en la naturaleza, por supuesto, que para algo ya ha hecho por nosotros un estupendo trabajo de diseño evolutivo desde hace millones de años  ;-)

Cambiando de tercio, ojeando sus otras propuestas veo que acaban de presentar asimismo una aplicación con una interfaz ya más pulida de su aplicación de realidad aumentada para el reconocimiento facial:

Ojalá tuviera proyectos en el que pudiera diseñar cosas como estas.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Actualización 19/12/2009 (*):

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

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

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

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

Intento explicarlo de forma breve.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Por fin se está desarrollando la Interfaz Humana.

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

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

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

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

Alucino.

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

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

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

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

Usabilidad de buscadores. Construyendo jerarquías funcionales

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

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

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

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

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

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

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

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

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

Buscadores. Microinteracciones (estados) del botón buscar

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

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

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

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

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

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

Echarle un vistazo a Yandex.

Es un buscador ruso que está haciendo las cosas muy bien.

Os paso la versión traducida al castellano de una búsqueda cualquiera. Cuando hagáis clic en el enlace fijaros abajo, en el diseño de la paginación. Probad a navegar página adelante, página atrás.

Cómodo, muy cómodo.

Las ventajas de presentarlo así:

• Existe una jerarquía de información marcada frente a la disposición que se hace normalmente de la paginación en los buscadores más conocidos y en gran parte de los sitios web. Primero aparecen los enlaces de < anterior  -  siguiente >  y debajo de ellos las páginas con los números.
• Al separar los distintos elementos del componente paginación diferencian funcionalidades. Aunque son similares no son equivalentes. Los enlaces de < anterior  – siguiente > permiten avanzar o retroceder de página en página. Los números posibilitan seguir un orden no lineal, vamos directamente a la página de resultados que queramos.
• La funcionalidad más utilizada en la paginación es la de  < anterior  -  siguiente >    Lo más normal suele ser que examinemos los resultados en el orden de aparición que nos ofrece el buscador (o lo que es lo mismo, de mayor a menor relevancia según su algoritmo) y de ahí, el acierto de que se encuentre separada de los números de páginas.

Este diseño de la paginación incrementa la usabilidad.

Estaba haciendo prueba con distintos diseños y la verdad es que salen cosas interesantes.

Alineación de los componentes de la paginación y box de búsqueda a la izquierda:

Alineación de los componentes mixta. Enlace de < anterior  continuar > y números de páginas de resultados alineados a la derecha y box de búsqueda a la izquierda:

Alineación a la derecha de los componentes de la paginación y del box de búsqueda:

Ventajas de la alineación a la izquierda:

• Componentes alineados con borde izquierdo de la pantalla y por ende, fácilmente alcanzables con el cursor del ratón. El borde sirve de “tope” parando el cursor, en su caso cuando se desplaza a la izquierda completamente.
• El comienzo de todos los elementos coincide con el comienzo de los bloques textuales de cada resultado. El borde izquierdo de la pantalla sirve como guía al escaneo haciendo más fácil encontrar el comienzo de los elementos.
• Más fácil posicionar el cursor al principio del box de búsqueda o en un punto intermedio de la cadena de búsqueda.
• Más fácil alcanzar el enlace de < anterior.
• Más fácil alcanzar el primer número de las páginas de resultados mostradas (en este caso 1).

Desventajas de la la alineación a la izquierda:

• Es más difícil alcanzar el enlace de siguiente > frente al de < anterior por hallarse más lejano del borde izquierdo y requerir mayor destreza para alcanzarlo. Normalmente hacemos clic en el enlace de siguiente > si estamos examinando resultados de una búsqueda. Navegamos hacia delante y en un número reducido de ocasiones volvemos atrás a revisar nuevamente los resultados.

Ventajas de la alineación mixta:

• Los componentes de la paginación son más fáciles de alcanzar y la distancia teórica con el cursor (asumiendo que está a la derecha la mayor parte del tiempo) es menor.
• Es más fácil alcanzar el enlace de siguiente > lo cual es lo mejor funcionalmente para continuar la navegación.
• Se separan claramente componentes funcionales distintos del pie: por un lado la paginación y por otro, el box de búsqueda.

Desventajas de la alineación mixta:

• Rompe fuertemente el patrón de escaneo izquierdo para ir primero a la derecha y luego volver a la izquierda hacia el box de búsqueda.

Ventajas de la alineación a la derecha:

• Los componentes de la paginación son más fáciles de alcanzar y la distancia teórica con el cursor (asumiendo que está a la derecha la mayor parte del tiempo) es menor.
• Es más fácil alcanzar el enlace de continuar > lo cual es lo mejor funcionalmente para continuar la navegación.
• Es más fácil y más rápido posicionar el cursor en el box de búsqueda y al final de la cadena de búsqueda introducida en él.
• Es más fácil presionar el botón de buscar.

Desventajas de la alineación mixta:

• Rompe el patrón de escaneo izquierdo impuesto por la alineación en este margen de los bloques textuales de los resultados.
• No se separan espacialmente componentes distintos de la paginación: enlaces de navegación < anterior  continuar > del box de búsqueda.
• Leemos de izquierda a derecha. Se crea un escalón entre los enlaces de < anterior continuar >, los números de las páginas de resultados y el comienzo del box de búsqueda estéticamente feo.
• Es complicado encontrar el comienzo de los componentes frente al caso de la alineación a la izquierda de todos ellos.

Visto lo visto casi me quedo con la alineación a la derecha de los componentes. El principal “pero” es que no es un patrón estándar y los usuarios no están acostumbrados a él con lo cual, de momento, no queda otra que ir a la alineación izquierda o al centro (qué se le va ha hacer).

Google llega a un compromiso intermedio centrando todos los elementos pero separando los enlaces de < anterior continuar > por los números lo cual empeora, pienso, la usabilidad de la paginación pero… la marca es la marca y el logotipo con las ooooooooooo y su funcionalidad de enlaces han de figurar.

Me gusta más la paginación de Yandex.

¿Opiniones?