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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

–O–

NOTA ADICIONAL

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

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

Asimismo han desarrollado un prototipo de ordenador flexible:

Aunque en el artículo del paperphone que van a presentar reconocen que todavía queda mucho trabajo por hacer para alcanzar el grado de usabilidad con el que cuentan actualmente las pantallas rígidas, manifiestan que el futuro pasa por interficies flexibles que nos permitan interactuar de una manera más próxima a la interacción que mantenemos con los documentos de papel (p. 2 del artículo) y que tienen entre otras ventajas el:

1. Ser muy delgadas y ligeras pero resistentes, lo que permite una portabilidad superior frente a la forma de cualquier ordenador móvil actual.
2. Tener múltiples formas. Esto facilita diferentes affordances físicos que se relacionan con funcionalidades específicas: leer un periódico responde a un propósito diferente que leer la etiqueta de un producto, e implica un estado físico o forma distinto.
3. Proporcionar un espacio de pantalla variable real en el que se enmarca el contexto actual de uso.
4. Tener muchas páginas físicas, cada una de ellas pertenece sólo a una tarea y a un contexto físico delimitado.
5. Usar gestos físicos con una gran respuesta cinestésica y táctil para una navegación eficiente.

Estos aspectos son algunos de los críticos (además de muchos otros) de los que adolecen los actuales libros electrónicos para su adopción y popularización masivas y esta investigación abre la vía comercial al desarrollo de dispositivos que permitan una interacción háptica más natural con nuestros objetos cotidianos.

Combinando estas investigaciones con las que parece que se están llevando a cabo en otros laboratorios como los de Nokia sobre el desarrollo de superficies capaces de adoptar texturas y formas de acuerdo a la interacción háptica que se mantenga con las mismas, se plantea un futuro de dispositivos ciertamente espectaculares:

¿Tendremos que comenzar a adoptar un enfoque más integral para el Diseño de Interacción e Información y la Experiencia de Usuario?

La respuesta es sí

Podéis descargaros los artículos del Paperphone y del Snaplet y ver la información original de la noticia en la nota de prensa publicada por el Human Media Lab de la Universidad de Queen o de los siguientes enlaces:

• Artículo científico del Paperphone para CHI 2011 (pdf)
• Artículo cientifico del Snaplet para CHI 2011 (pdf)

De los que conozco es el que más me gusta por lo rápido que actualiza el timeline,  por su capacidad para previsualizar imágenes y por la posibilidad de acortar URLs dentro del propio cliente. No obstante en cuanto a su interfaz, tiene algunas serias limitaciones que causan el que, día sí, día también, la interacción no sea lo que se dice eficiente provocando entre otros errores:

• Envío de tweets que tengo a medio redactar.
• Envío de tweets con erratas ortográficas que estoy corrigiendo cuando pulso accidentalmente el botón de envío.
• Envío de tweets con URLs incorrectas al tener que copiarlas a mano dado que el cliente de Twitter no es un navegador y no se puede obtener en el mismo la URL corta de una página web. Para ello si utilizamos el móvil, hay que acudir a un navegador externo ya sea el del propio Android u otro instalado por nosotros, entrar en la página, dirigirse al historial o a la barra de navegación si se utiliza Opera, seleccionar la URL, ir a Twidroyd, pegarla, pulsar sobre el botón de acortar URL, editar el resto del tweet y enviarlo. La alternativa a este despropósito es hacer las operaciones equivalentes en el ordenador -si se está delante de uno- obtener la URL corta en cualquier servicio que lo posibilite y escribirla a mano en el tweet que se está editando en Twidroyd asegurándose uno muy bien de que está correctamente escrita para no cometer errores.

Ésta es la interfaz de Twidroyd:

Figura 1. Interfaz de Twidroyd, un cliente de Twitter para Android

Algunos de sus elementos son:

1. Botón para escribir un tweet: Al pulsarlo despliega el teclado y el áera para escribir (3) y oculta el timeline.
2. Actualizar: Refresca el timeline y carga los últimos tweets.
3. Área de texto para escribir el tweet.
4. Acortador de URLs: al escribir una URL larga en el área de texto y pulsar sobre el mismo el cliente la acorta automáticamente.
5. Botón que permite adjuntar un enlace a un vídeo, hacer o seleccionar una foto de la galería de nuestro móvil y añadirla al tweet o insertar un vídeo que tengamos.
6. Botón de publicar el tweet.

Fijaros que entre los botones (1) y (2) no existe separación, están uno al lado de otro y entre el (4) (5) y (6) existe un espacio muy pequeño de separación.

Debajo de estos últimos hay otra barra justo encima del teclado un poco más oscura con más botones que corresponden de izquierda a derecha a:

1. Visualizar el timeline (lleva a la pantalla “home” de la aplicación).
2. Mostrar tweets enviados o que le mencionan a uno.
3. Mostrar la bandeja de entrada con los mensajes directos.
4. Buscar en Twitter.
5. Mostrar el resto de las funcionalidades de la aplicación: perfil, contactos, etc.

Este es el aspecto que tiene Twidroyd cuando se está redactando un tweet:

Figura 2. Interfaz de Twidroyd con texto en el área input. Obsérvese la proximidad entre el final del texto del tweet (la palabra “funciones”) y el botón de publicación del mismo, justo debajo.

Figura 3. Interfaz de Twidroyd. Áreas destino o sobre las que la yema del dedo hace clic
para pulsar el botón que corresponda

Uno de los principales problemas de usabilidad que tiene la interfaz de Twidroyd y que se puede extrapolar a otras aplicaciones móviles es el escaso espacio que suele existir entre los diferentes botones de acción de la aplicación lo que suele causar que, en ocasiones, se lance una función determinada que no es la que el usuario quiere, en lugar de la deseada.

En cuanto a la separación horizontal de botones un problema que tiene Twidroyd es que queriendo escribir un nuevo tweet se suele pulsar sin desearlo el botón de actualizar el timeline (A, figura 3) lo que refresca el mismo y muestra los últimos tweets. En este caso el error de usabilidad no tiene un mayor impacto.

Al estar tan próximos los botones, el área de interacción sobre ellos cuando se usa un dedo (que puede ser más o menos gordo), puede montarse ya que, aunque el punto de interacción se calcula como el punto medio del área sobre la que toca la yema, dicha superficie puede variar en función de la presión que se ejerza sobre la pantalla o de la precisión con la que se toque. Si uno está andando o se hace con un toque rápido a veces es difícil acertar pudiéndose llegar a pulsar el botón que no se quiere.

Figura 4. El punto de interacción donde se toca la pantalla se calcula en el punto medio
de la superficie de la yema del dedo que toca la misma.

El problema de la separación de botones se da tanto en horizontal como en vertical.

Esto es lo que sucede en el segundo gran problema de usabilidad que tiene Twidroyd.  Cuando se alcanza el final del área de texto en la que se está escribiendo el tweet, la última palabra queda muy próxima al botón de publicación (B, figura 3). Si como sucede muy habitualmente se ha escrito mal la palabra (el teclado virtual del Magic es muy pequeño por las dimensiones de la pantalla y da problemas) o si el sistema de autocorrección la sustituye por otra incorrecta (lo cual es también muy común) hay que pulsar sobre la pantalla para posicionar el cursor en la letra que se desea corregir. Al encontrarse la palabra al final del área de texto e intentar tocar ahí con el dedo, en buen número de ocasiones se pulsa el botón de envío que está debajo publicándose el tweet sin querer. A partir de entonces la experiencia de usuario queda totalmente machacada ya que:

• Hay que esperar a que Twidroyd publique el tweet lo que en ocasiones puede tardar bastante por la lentitud de la conexión 3G.
• Cuando se ha publicado hay que copiarlo al portapapeles si no se quiere tener que escribirlo nuevamente entero.
• Hay que borrar el tweet incorrecto.
• Hay que pegar el texto del portapapeles en un nuevo tweet y editarlo (y ojo con no equivocarse y  no pulsar accidentalmente donde no se debe no haya que empezar otra vez todo el proceso).
• Finalmente hay que publicarlo.

No he hecho el cálculo de cuanto tiempo puede llevar todo esto pero grosso modo, en torno a 4 minutos. Pensad lo que eso supone desde un punto de vista de Experiencia de Usuario y las consecuencias que tiene :-P

Resumiendo, un aspecto crítico para una buena usabilidad de las aplicaciones en móviles y más concretamente en Android es el tamaño y posicionamiento de los botones. Al respecto se han de tener en cuenta las siguientes directrices generales:

• El tamaño de los botones tiene que ser suficientemente grande y alto como para que puedan ser pulsados por un dedo sin problemas:
  • Apple establece que el área donde se toque la pantalla (área destino) ha de ser como mínimo de 44 x 44 píxeles 44×44 puntos y que los botones no han de estar demasiado juntos para evitar problemas al pulsarlos (página 95 de las Directrices de Interfaz Humana del iOS: Experiencia de Usuario).
  • Microsoft por su parte en la Guía de Interacción y de diseño de Interfaz de Usuario para Windows Phone 7, página 38, recomienda que el área destino no sea más pequeña de 9 milímetros o no inferior a 34 x 34 píxeles proporcionando además, y al menos, 2 milímetros u 8 píxeles de espacio entre botones.
• El tamaño de los botones tiene que ser asimismo suficientemente largo como para que puedan ser pulsados sin problemas: Haciéndolos más largos que altos se atenúa y disminuye el problema en cuanto al área de pulsar horizontal. No obstante hay que tener en cuenta también que hay que dejar una buena separación vertical.
• Por último, no se han de pegar los botones a los márgenes de la pantalla del dispositivo, especialmente en el caso de los móviles ya que se pulsan con mayor dificultad dado que, a menos que la pantalla esté al mismo nivel que los bordes del dispositivo, la yema del dedo puede quedar a caballo entre pantalla y borde del dispositivo y no terminar de pulsarse correctamente el botón.

ANALÍSIS DE CALENDARIOS

Una de las cosas que me llama particularmente la atención desde hace ya unos años y cuyas tendencias me gusta observar para ver cómo evolucionan, es el diseño, tanto desde un punto de vista gráfico como de interacción, de los calendarios de las páginas de compañías áreas, agencias de venta de billetes de vuelos, webs de aeropuertos, hoteles, alquiler de coches, transportes públicos o privados o cualesquiera otras de comercio electrónico que por una u otra razón de acuerdo a su negocio incluyan en su home calendarios para acotar el tiempo de estancia, viaje, desplazamiento o actividad similar del usuario.

Por citar tan sólo algunos a título de ejemplo de los miles que pueden encontrarse en la Web y tratar de extraer algunos patrones más o menos generales a día de hoy en cuanto a su diseño, pueden citarse los siguientes:

Calendario de BestWestern.com

El componente del calendario “Encontrar un hotel” de BestWestern.com tiene como elementos interesantes:

• Se despliega cuando el usuario hace clic directamente en el campo de la fecha de entrada.
• Aparece alineado con la línea base del campo de fecha de entrada, con la esquina izquierda.
• No incluye ninguna sombra para crear un efecto de oclusión y traerlo a primer plano lo que resulta en un diseño completamente plano. Esto supone un menoscabo de su usabilidad dado que por su diseño gráfico y los colores elegidos cuesta distinguirlo visualmente del fondo.
• Presenta como valor por defecto la fecha del día actual.
• Junto a los campos de entrada de las fechas muestra un icono de calendario cuyo diseño es más o menos estándar a lo largo de la Web reconociéndose sin problemas como tal.
• En la esquina superior derecha incluye un botón de cerrar que por su diseño y color pasa prácticamente desapercibido.
• Debajo de la barra de cabecera presenta un listado horizontal de los 12 meses siguientes al actual pudiendo el usuario seleccionar aquel que desee. Su utilidad es interesante aunque el horizonte de 12 meses de cara a realizar una reserva en un hotel puede ser excesivo. Habría que testear y ver estadísticamente cuáles son los rangos de fechas más comúnmente utilizados por los usuarios para limitar los meses que aparecen en esta barra a ellos.
• Por defecto en el calendario se muestra el mes en curso y al lado, en horizontal, el mes siguiente, ambos con su correspondiente encabezado identificativo del nombre abreviado y resaltado en negrita.
• Debajo se muestran los días de la semana. Aparecen en mayúsculas y con una sóla letra para identificar el nombre de cada día.
• A continuación se muestran los días del mes comenzando desde el primero y dejando en blanco los espacios correspondientes a los días del mes anterior (lo mismo sucede con los últimos días del mes que tampoco se muestran).
• Los días aparecen recuadrados. Los que están por venir con un borde azul, y los que han pasado con un borde gris claro. La presencia del borde recuadrándolos supone una ayuda visual adicional para marcar el área dónde se puede hacer clic para seleccionarlo. Esto mejora el foco pero añade un ruido excesivo desde un punto de vista visual que menoscaba la escaneabilidad de los números y la usabilidad general del calendario. Demasiada “tinta” superflua.
• El día actual se destaca en rojo.
• El día seleccionado como fecha de entrada (por defecto el siguiente al actual) se destaca con una cama de color azul, en negrita y con un borde azul oscuro para resaltarlo de los demás.

Calendario de HalcónViajes.com

Del calendario de HalcónViajes.com se pueden citar las siguientes características:

• El tamaño es muy superior a lo que suele ser habitual en el diseño de este tipo de componente, quizá demasiado lo que impacta en la correcta escaneabilidad de los días.
• Sólo muestra el mes en curso lo que disminuye la usabilidad.
• Desde un punto de vista gráfico presenta un ruido visual excesivo mostrando explícitamente una cuadrícula gris en cuyos recuadros encajan los números. Su gran tamaño los hace más difíciles de leer.
• Los días del mes que ya han pasado hasta la fecha actual se presentan en un estado atenuado en color gris claro. El día actual se presenta destacado en una cama de color gris más oscuro. Los días disponibles para hacer la reserva se presentan en un crema suave. El día seleccionado seleccionado se muestra en un calabaza, color que también se usa para el hover del ratón a medida que se va desplazando por encima de los días del mes.
• Incluye una leyenda de los colores en la parte inferior.
• Permite cambiar de mes haciendo clic en el botón amarillo junto al nombre del mes actual que sirve como minicabecera del calendario. El diseño de esta cabecera no es óptimo ya que tal y como está resuelta gráficamente parece a priori un campo de entrada de texto en el que se puede escribir, cuando no lo es. La única forma de cambiar de mes es haciendo clic en las flechas a derecha e izquierda del nombre del mes.
• El botón de cerrar tiene una forma y diseño llamativo, circular con una X. Está situado en la parte superior, a mano derecha y a la misma altura que el encabezado general del componente.
• Al desplegarse el calendario se tapa por completo el módulo inferior para la selección de la reserva y se presenta una capa semitransparente que oculta la página web de debajo lo que centra la atención en el mismo y no en otros elementos de la interfaz.
• El calendario se cierra al seleccionar una fecha en el mes o mediante el botón de cerrar.

Calendario de Hoteles.com

El calendario de Hoteles.com es quizá uno de los más limpios e interesantes de los que aquí se han analizado. De él se pueden reseñar las siguientes características:

• Se despliega con un efecto de rápida animación hacia la derecha al hacer clic en cualquiera de los campos de fecha de llegada o salida lo que a priori transmite al usuario un feedback de rápidez y eficacia de su funcionamiento asi como de la página.
• Incluyen un icono de calendario al lado de dichos campo que cuando se pulsa despliega asimismo el calendario.
• Incluyen al lado de los dos campos de fecha de llegada y salida el número de noches correspondiente a las fechas que el usuario ha escogido. Un buen detalle diferenciador que no se ve en otros sitios.
• Su diseño es minimalista utilizando un número muy reducido de colores en la escala de blancos y grises lo que impacta de forma positiva en su usabilidad al ser fácilmente escaneables todos los elementos que lo componen.
• Utiliza una sombra para crear un efecto de oclusión lo que ayuda a diferenciarlo del fondo, centra la atención en él y lo trae a primer plano.
• Utilizan una flecha sólida en la parte superior izquierda como elemento de diseño que rompe la linealidad del componente y lo conecta al campo de entrada algo que no suele ser habitual pero que constituye un diseño elegante en línea con las tendencias que se pueden observar en las últimas versiones de determinados elementos de interfaz de Firefox o  del sistema operativo Leopard de Apple.
• La tipografía utilizada es muy clara, limpia y legible así como los cuerpos de letra usados.
• No utilizan ninguna letra capital sino que ponen todas en minúsculas lo que mejora la escaneabilidad de los textos y los iguala jerarquicamente. Sería interesante ver si convendría destacar los meses poniendo su primera letra en mayúsculas para crear un punto adicional de tensión visual.
• El botón azul con la flecha blanca de la derecha para mostrar otros meses tiene un buen diseño percibiéndose como un elemento sobre el que se puede hacer clic.
• Presenta el mes en curso y el mes siguiente, en horizontal uno al lado del otro y separados por una fuerte línea gris al medio.
• En cada mes sólo muestra los días correspondientes al mismo, no los de antes ni los de después dejando los espacios en blanco.
• Los días del mes que han transcurrido desde el primer día hasta la fecha actual se presentan atenuados en color gris claro y no son seleccionables.
• El día de la fecha seleccionada de llegada se muestra destacado en una cama de color gris claro con el día en color inverso (blanco) para un óptimo contraste.
• El día de la fecha de salida se muestra en un patrón de color inverso – recuadrado en gris y fondo blanco. El período seleccionado no termina de quedar del todo claro al no guardar el día de entrada y el de salida el mismo color (ver captura algo más abajo). Puede suponer un problema de usabilidad ¿Hasta qué día está seleccionado realmente? ¿Hasta el 14 ó el 15?
• Por defecto cuando se despliega el calendario aparece seleccionado el día siguiente al actual, tanto en el campo de entrada sin haber desplegado el calendario como al mostrarse el mismo.
• Para cerrar el calendario basta con hacer clic en cualquier parte de la interfaz que no sea el propio calendario.

Período de días selecionados en Hoteles.com. Existe un problema de usabilidad entre el uso de los calendarios, la forma de destacar
el día de entrada y el de salida y los campos superiores para especificar las mismas.

Calendario de Expedia.com

El diseño del calendario de Expedia.com está muy en la línea del de Hoteles.com y es igualmente un diseño limpio. Como características interesantes caben citar:

• En el campo de entrada no figura la fecha del día actual sino expresada en formato dd/mm/aa. Lo positivo de expresarla así es que no entra en conflicto mental con la fecha o día que el usuario tiene en la cabeza en un primer momento al observar el elemento. Si su objetivo fuera por ejemplo seleccionar el período del 15 de diciembre al 18 de enero y se encuentra a priori como fecha de entrada la del día actual necesita un tiempo para darse cuenta de por qué está ahí esa fecha que no es la que quiere y no otra. Poner la fecha en formato de día, mes, año – dd – mm – aa tiene la desventaja de que al no ser una fecha real requiere un  esfuerzo cognitivo para interpretar que se refiere a una fecha y no a otra cosa, no obstante al ser una manera habitual de expresarla es preferible a priori que poner la fecha actual por defecto. No poner fecha tiene el inconveniente de cara a accesibilidad  de que los lectores de pantalla para invidentes se encontrarían con un campo vacío y sin ninguna indicación de cuál sería el formato que tendrían que usar para introducirla.
• No utilizan ningún icono de calendario junto a los campos de fecha de salida y vuelta. Con la fecha en formato dd/mm/aa y el rótulo de Salida / Vuelta encima de cada campo es suficiente indicio de qué tipo de dato se está pidiendo en el mismo.
• El calendario se despliega debajo del campo de entrada de fecha correspondiente, pegado al mismo, alineado en la esquina inferior izquierda.
• No tiene una sombra debajo pero solucionan el problema de la superposición de capas y su diferenciación del fondo mediante un borde de un píxel de un azul más saturado que el resto de azules de los demás elementos lo que lo singulariza y lo destaca frente a ellos.
• Tiene una cabecera muy clara y fácilmente distinguible que funciona como agrupadora de toda la información inferior. Dicha cabecera incluye el nombre del mes en curso y del siguiente mes, asi como una flecha a mano derecha que permite avanzar de mes a medida que se pulsa.
• El botón para avanzar de mes tiene un buen diseño percibiéndose como tal.
• Resuelven la doble cabecera de los nombres de los meses y los días de la semana poniendo estos últimos debajo de la cabecera superior pero en el mismo color que el de fondo de la cabecera con el nombre de los meses. Asimismo ponen las abreviaturas de los días de la semana en mayúsculas. Ello tiene dos efectos a) vincula semánticamente a través del código de color cabecera principal con el nombre de los meses y cabecera secundaria con las abreviaturas de los días y b) potencia estos últimos respecto al resto de elementos del calendario.
• El diseño es minimalista y no utilizan ningún tipo de cuadrícula ni enmarcado en los números de los días. No obstante emplean el recurso de ofrecer un recuadro de color beige claro amplio encuadrando el número del día a medida que el cursor se desplaza por encima de ellos lo que constituye una potente ayuda y feedback visual adicional junto al cambio de cursor en forma de mano, para ofrecer un feedback al usuario del área que es clickable.
• Utilizan un código de color para los números del calendario muy similar al de BestWestern.com. a) Para los días transcurridos del mes desde el primero hasta el actual usan un gris claro que los hace aparecer como atenuados o no seleccionables (cuando el cursor se posiciona sobre ellos no hay un efecto hover de recuadrado). b) El día actual lo ponen en negrita y en color rojo lo que lo hace destacar respecto a los demás. c) El resto de días del mes va en color negro y negrita. Quizá sería interesante ver una prueba de diseño de los números sin negrita para ver cómo quedan. d) El día seleccionado se muestra con una cama de color gris cuadrada de fondo y el día en negrita y negro para señalarlo como activo.

Calendario de ChoiceHotels.com

ChoiceHotels.com plantea un diseño del buscador diferente a lo que suele ser habitual (echarle un vistazo) que llama la atención. En lugar de ser un gran módulo vertical lo plantean en horizontal todo a lo largo de la pantalla lo que resulta en una menor usabilidad dado que a la distancia habitual a la que el usuario suele estar sentado respecto al monitor (en torno a aproximadamente a 60 centímetros – 1 metro) no se puede abarcar todos sus elementos con la mirada. El área sobre la que se centra nuestra mirada y nuestra atención es menor, en torno a unos 10 – 15 centímetros lo que resulta en que, para comprobar que todos los datos introducidos en el buscador se corresponden con los que desea, el usuario debe realizar constantes barridos con la mirada de izquierda a derecha y viceversa impactando de forma severa en la usabilidad. En cuanto al diseño de los elementos propios del calendario caben reseñar las siguientes características:

• Incorporan tanto en el campo de fecha de entrada como de salida una indicación de cómo debe escribirse (en el formato estándar -mm/dd/aa-).
• Al hacer clic en cualquiera de los campos se despliega la capa con el calendario de forma inmediata.
• El calendario está alineado con la línea base del campo correspondiente, con la esquina inferior izquierda y pegado al mismo sin dejar ni un pixel de separación lo que refuerza la relación entre campo y calendario.
• Su fondo es totalmente blanco con un tenue borde gris que lo recuadra y lo realza respecto a la imagen de fondo. Este borde además produce un curioso efecto:

El color gris del borde del calendario es el mismo para toda la capa pero se percibe de forma diferente en la parte superior y en la parte inferior:

En la parte superior, en los trozos en los que la capa coincide con los campos de fecha de entrada, de salida, habitaciones, número de adultos, niños y categoría de hotel el calendario se percibe con un efecto de hundido debido a que se da una interesante ilusión óptica por el contraste simultáneo de dos tonos de gris, el más claro de la parte inferior de los campos y el más oscuro del borde de la capa del calendario.

Por el contrario en la parte inferior se produce el efecto inverso, el gris oscuro del borde junto al blanco de fondo aislan la capa del calendario respecto a la imagen de fondo haciéndolo aparecer como en relieve. Un efecto llamativo que ayuda a realzar su usabilidad.

• La capa de calendario está “conectada” al campo de fecha de entrada sin dejar un sólo pixel de separación entre campo y capa.
• Llama la atención el diseño de la cabecera de los meses en la que se utiliza la Ley de cierre de la Gestalt para “dibujar” un rectángulo imaginario que sirve como agrupador, que va desde las esquinas de las flechas de avanzar – retroceder de mes y que incluye los nombres de cada mes.
• Este diseño de la cabecera de los meses “al aire” deja fluir la mirada por los elementos del calendario aportando una sensación de ligereza. La negrita refuerza los nombres de los meses como puntos de atención focal que asimismo aparecen con una fuente tipográfica un punto mayor que la utilizada para los nombres abreviados de los días de la semana. Estos aparecen igualmente en negrita y tanto nombres de meses como días de la semana tienen la primera letra en mayúsculas lo que crea en cada uno de ellos un punto focal que disminuye la legibilidad.
• Cómo en los diseños de otros sitios, dejan en blanco los espacios correspondientes a los días que no se corresponden con los del mes, tanto al principio como al final.
• Recuadran todos los días con dos tonos de grises. Para los transcurridos desde el primer día del mes utilizan un gris claro que los hace aparecer como atenuados o no seleccionables.
• El día actual lo recuadran con un borde gris más oscuro que los demás y con una cama de color gris claro sutil que lo destaca.
• El día seleccionado se muestra con una cama de color beige y con el número en negro para un óptimo contraste. No se utiliza negrita y el borde va en un naranja más fuerte el color sólido de fondo y que lo hace aparecer como activo. Es una combinación óptima de colores.
• Llama la atención el hecho de que alinean los días al borde derecho del recuadro que los enmarca lo que crea una sensación de movimiento del componente hacia la derecha.

Calendario de Hotwire.com

El calendario de Hotwire.com aporta un diseño que se sale igualmente de lo habitual:

• Dejando de lado características ya analizadas en los anteriores calendarios (formato de fecha de entrada, huecos en blanco para los días de la semana de principios y finales de mes, días atenuados en gris claro para los transcurridos desde el inicio del mes hasta el día actual y que no son seleccionables, día actual resaltado -en este caso con un recuadro gris claro, días del mes en negrita para que destaquen más… etc, la principal característica es que presenta los meses en vertical, uno encima de otro, lo que mejora la legibilidad y escaneabilidad de los mismos.
• No obstante tiene el inconveniente de que cada mes lleva una cabecera muy marcada en gris con su nombre, y debajo las abreviaturas en negrita de los días de la semana, sin cama de color. Esto interrumpe y “parte” el flujo natural de lectura de los días de un mes a otro menoscabando la usabilidad.
• Muestra una leyenda en la parte inferior con el color verde que usan para marcar los días de la fecha de entrada y salida.

Calendario de Hotwire.com con las fechas de entrada y salida seleccionadas

• Otro problema es que sólo marcan los días correspondientes a estas fechas (entrada y salida) y no el período completo de estancia de la persona en el hotel.
• Para cerrar el calendario no incorporan ningún botón. Haciendo clic en cualquier parte de la interfaz fuera del mismo desaparece.

Uno de los inconvenientes que presentan los benchmarkings es que aunque pueden ayudar a innovar mediante el estudio de las característics de los diseños de los competidores pueden suponer asimismo un marco restrictivo de cara a  la innovación dado que los clientes en muchas ocasiones se ciñen a lo que hace la competencia para evolucionar sus sitios. Por ello es interesante investigar soluciones de diseño de otros ámbitos. En este caso concreto, uno de los diseños más interesantes de calendario que he visto lo tiene Google Analytics:

Calendario de Google Analytics

• Frente a todos los anteriores, Google Analytics presenta un único punto de interacción para desplegar el calendario (campo con las fecchas o flecha a mano derecha del mismo)  y para seleccionar tanto la fecha de inicio como la de final en el mismo sin necesidad de desplegar dos distintos, uno para la fecha y otro para la de salida, como sucede en todos los demás diseños.

• Presentan tres meses por defecto para la selección de las fechas.
• Tienen una doble cabecera compuesta por los nombres de los meses, que lleva una cama de color gris y el nombre del mes con la primera letra mayúscula. Además van sin negrita.
• A mano izquierda y derecha de esta cabecera muestran flechas que permiten mostrar los meses siguientes o los anteriores. Destaca el hecho de que, al igual que en el diseño de Hotwire.com, ponen las dos flechas desde el principio aunque en un primer momento no podemos ir más hacia el futuro que el mes actual. En este caso debería presentarse la flecha como deshabilitada para dar a entender que en ese punto no se puede interactuar con ella.
• Los meses están separados entre sí visualmente y a mano izquierda de cada uno de ellos aparecen medios círculos en las filas de cada semana. Haciendo clic en estos medios círculos se selecciona la semana entera. Aunque esta característica puede tener sentido en una herramienta como Analytics no interesa tanto en los calendarios de páginas de comercio electrónico dado que la diversidad de períodos no suele ceñirse a una semana concreta.
• Incorporan un enlace rotulado como “Cancelar” que tiene un funcionamiento que puede dar lugar a dudas. Por defecto las fechas que aparecen seleccionadas cuando se entra en una cuenta específica de Analytics van desde el día actual hasta justo un mes antes. Si el usuario hace otra selección se pierden dichas fechas. Al contrario de lo que podría pensarse al estar al lado del botón de “Aceptar” el enlace de “Cancelar” no cierra el calendario desplegado y cancela la selección de fechas realizada sino que borra la selección hecha por el usuario y pone la que el sistema da por defecto.
• Al contrario que el resto de calendarios en el de Google Analytics no se dejan espacios o huecos en blanco al inicio o final de los meses. Se ponen los días del siguiente mes o del anterior pero en un gris muy claro, como atenuados.
• Para seleccionar un período el patrón de interacción es el siguiente:
  • El usuario puede escribir directamente la fecha de inicio y la fecha de fin en los box de los campos rotulados como “intervalo” o hacer clic directamente en un día del calendario. Este primer clic marca la fecha de inicio y el segundo la fecha final.
  • Una vez marcada una fecha como de inicio todos los días anteriores a él se muestran en gris claro y no son seleccionables.
  • Cuando el usuario marca a continuación la fecha de fin el período completo seleccionado se muestra con una cama de color azul para resaltarlo de forma inequívoca de los demás.
  • En el período seleccionado utilizan dos tipos de azules, uno fuerte para marcar los días del mes seleccionado y otro más clarito para marcar aquellos que corresponden al mes siguiente. El diseño en este punto es confuso.

PROPUESTA DE DISEÑO DE CALENDARIO

En base a las características analizadas se plantea la siguiente propuesta de diseño para mejorar la usabilidad de los calendarios de páginas de comercio electrónico. Como ejemplo se tomará una página de reserva de hoteles:

1. El usuario accede al sitio web y observa el módulo para buscar hoteles y reservar habitaciones.
2. Hace clic en el campo de “Fecha de entrada – Fecha de salida” y se despliega el calendario.
   • Éste tiene una sombra para crear un efecto de oclusión que lo trae a primer plano y lo singulariza del fondo. Con ello se centra la atención en el calendario respecto al resto de elementos de la página y se mejora su usabilidad.
   • El campo de las fechas está vacío a priori dado que el funcionamiento que se desea en este punto es el de desplegar lo más rápidamente posible el calendario. Al aparecer vacío el usuario no tiene que pensar un segundo analizando qué puede significar un valor como dd/mm/aaaa.
   • Cuando se hace clic en el campo de fechas el calendario que se despliega se vincula a al mismo por medio de una flecha a mano izquierda que apunta al medio del box (ver paso 3)
   • El hecho de que exista un único punto para desplegar el calendario como sucede en Google Analytics es una mejora importante de usabilidad. Uno de los principales problemas que tiene el actual modelo de interacción que se tomar como un estándar a lo largo de la web para seleccionar las fechas es que el proceso de seleccionar un período se divide en dos partes: a) selección de la fecha de entrada y b) selección de la fecha de salida, cuando ambas deberían seleccionarse actuando sobre un único calendario tanto por economía de clics como para facilitar la correcta visualización del período seleccionado.
3. El calendario tiene en la esquina superior derecha un enlace y botón de cerrar por accesibilidad. A continuación y por defecto, el cursor se encuentra en el box del campo de “Fecha de entrada” que aparece bordeado de color naranja para indicar su estado activo.
   • Ahora sí, como valores por defecto tanto en el campo de fecha de entrada como en el de salida aparece la fecha en formato estándar pero sin seleccionar ningún día concreto: día, mes, año -dd/mm/aaaa-.
   • Para especificar el año se utilizan cuatro dígitos con el objetivo de distinguirlo de forma únivoca tanto de los días como de los meses aunque ello suponga dos pulsaciones más de teclado para introducir los datos. A la hora de maquetar el componente será necesario controlar correctamente el orden del foco del cursor al pulsar el tabulador para garantizar una usabilidad y accesibilidad óptimas.
   • El usuario puede optar por escribir las fechas directamente en los campos correspondientes  o seleccionar la fecha de entrada y de salida con el cursor del ratón haciendo clic sobre los días correspondientes.
   • Por defecto se presentan hasta 3 meses incluyendo el actual, no obstante habría que monitorizar cuál es el tiempo medio que los usuarios eligen como periódo para ver si se pueden mostrar tan sólo dos. Mostrar un mes menos simplifica el diseño y lo hace más fácil para el usuario.
   • Los meses se muestran en vertical, unos encima de otros, de forma similar a como se hace en Hotwire.com lo que supone asimismo una mejora importante de usabilidad ya que facilita el escaneado visual de los días, no interrumpe el flujo visual al separar en diferentes áreas los meses, suprime la necesidad de que haya espacios en blanco tanto al principio como al final de cada mes y mejora la densidad informativa del calendario.
   • Para distinguir dónde comienza y dónde finaliza cada mes se utiliza una línea gris clara punteada que marca  tanto el inicio como el final de cada mes. La línea quebrada en el primer día del mes supone un punto de ruptura visual actuando como foco de atención lo que ayuda a mejorar la escaneabilidad de la información. Los días de los 3 meses fluyen de forma natural unos detrás de otros sin interrupción visual alguna.
   • Estas líneas que separan los días correspondientes a cada mes se conectan a mano izquierda con el nombre de cada mes que va en un rectángulo sólido de color gris más fuerte, con los nombres de los meses en minúsculas y la primera letra en mayúscula para actuar como atractor visual sutil. Se ha hecho la prueba de centrar el rectángulo conforme al punto medio de la línea pero la conexión queda más clara alineando la parte inferior del rectángulo con dicha línea en la esquina inferior derecha.
   • Encima de los nombres de los meses, dos flechas permiten ir avanzando en el tiempo o retrocediendo para mostrar los meses anteriores o siguientes. A priori se muestra el mes actual y los dos siguientes. Dado que no tiene sentido retrocer más allá de la fecha actual para realizar una reserva, en un primer momento la flecha de ver meses anteriores se encuentra desactivada y aparece en un color más claro.
   • Los días transcurridos desde el primero del mes hasta el actual aparecen en un color gris más claro, atenuados y no son seleccionables.
   • El día actual no se resalta de ninguna forma. El cambio de color entre los días anteriores al actual y el día presente es suficiente para dar un feedback al usuario de cual es la fecha actual. No tiene sentido destacar la fecha actual ya que al usuario lo que le interesa es seleccionar los días en los que quiere hacer su reserva.
   • Cierra el componente un botón de “Aceptar” que sirve para confirmar las fechas seleccionadas o escritas en los campos correspondientes y cerrar el calendario. El color es naranja para transmitir acción y dar sentido de transición.
4. El usuario escribe la fecha de entrada en el campo superior correspondiente o selecciona directamente el día que desee haciendo clic sobre el mismo. El día se marca con una cama de color naranja, el mismo color que el campo activo y que el botón para establecer una relación semántica entre todos los elementos.
5. Una vez escrita la fecha de entrada el foco pasa al campo de fecha de salida que aparece resaltado, bordeado en naranja, para indicar su estado activo.
6. El usuario escribe la fecha de salida en el campo correspondiente o selecciona el día que desee en el calendario. La fecha se muestra en el campo y el período seleccionado se muestra de color naranja para marcar de forma clara e inequívoca los días escogidos. Como posible mejora se podría valorar la posibilidad de, al igual que realiza Hoteles.com mostrar el número de noches escogidas a la derecha aunque en principio es un dato secundario.
   • Para modificar las fechas se pueden escribir directamente en los campos superiores o, con el ratón. En este caso cuando ya hay un período seleccionado, para cambiar las fechas, al hacer clic en cualquier nuevo día, el período seleccionado desaparece y el día sobre el que se ha hecho clic pasa a ser el de fecha de entrada.
   • A continuación el usuario hace clic en otro día para la fecha de salida mostrándose el nuevo período resaltado.
   • También se pueden modificar las fechas de entrada y salida escribiéndolas directamente en los campos superiores.
7. El usuario pulsa sobre el botón de “Aceptar” y se muestran las fechas de entrada y salida en el campo del componente principal. Para modificarlas el usuario hace clic sobre ellas desplegando el calendario.

Esta propuesta está incompleta dado que le faltan los colores. Lo que aquí se presentan son tan sólo prototipos. El diseño gráfico es crítico y condiciona de manera crítica y fundamental la usabilidad así que si algún diseñador gráfico se anima a ponerle color aunque sea tan sólo a un par de pasos (el 5 y el 6 estarían majos) sería estupendo ;)

¿Conocéis algún calendario distinto de los analizados con algún patrón interesante?

ACTUALIZACIÓN (28/12/2010):

Una actualización del diseño del calendario de acuerdo a los comentarios del post de Álvaro y a las propuestas de más que HTML y RoninRojo:

1. En la gran pestaña superior de “Hoteles” se suprime la línea divisoria con el módulo inferior relacionándose mejor ambos elementos.
2. Se añade un icono de calendario en el campo de “Para las fechas… – Fecha de entrada – Fecha de salida” del formulario para que sirva como pista visual para indicar al usuario que se va a desplegar el mismo al hacer clic sobre el box.
3. Se deja únicamente el botón de cerrar y se suprime la palabra “Cerrar”.
4. La flecha en la parte inferior izquierda del calendario para avanzar de meses se pone en naranja para denotar estado activo mientras que la superior para ver meses anteriores en un primer momento permanece en gris, en un estado inactivo.
5. Se suprimen las camas de color de los meses. Se alarga la línea divisoria de los meses hacia la izquierda y se posiciona el nombre debajo de ella lo que delimita mejor dónde empieza y acaba cada mes.
6. Se añade un enlace de “Borrar” en la parte inferior del calendario cerca del botón de “Aceptar” para borrar la selección de los días hecha por el usuario si lo necesita.

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

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

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

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

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

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

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

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

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

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

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

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

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

¿Cómo?

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

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

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

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

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

• Download Android UI gallery for Microsoft Visio (435.kb)

• Belén Pena & Susana Heredia: Download Android UI gallery for Omnigraffle (.gstencil 372 kb)

• Download Android UI gallery for Omnigraffle (.vdx 370 kb)

• Download PDF of Android UI gallery for paper prototyping (434 kb)

Enjoy!  ;-)

]]> http://www.tentandote.com/2010/03/02/gallery-for-prototyping-android-applications-en-galeria-para-prototipar-aplicaciones-de-android-es/feed/ 15 http://www.tentandote.com/2010/02/16/controles-de-interfaz-y-estados-de-interaccion-febrero-2010/ http://www.tentandote.com/2010/02/16/controles-de-interfaz-y-estados-de-interaccion-febrero-2010/#comments Tue, 16 Feb 2010 09:49:26 +0000 tentandote http://www.tentandote.com/?p=475 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?

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

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

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

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

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

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

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

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

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

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

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

Home de la consultora de UX inglesa Clearleft.com

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

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

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

Equipo de trabajo de Clearleft.com

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

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