Los Almuerzoxx se inauguraron de manera improvisada, compartiendo un café con Juan Leal en el bar de debajo de la oficina de Oxxigeno. Juan nos habló de su experiencia en Finlandia durante los últimos meses, donde ha estado diseñando interfaces para móvil con el equipo de Fjord para clientes como Nokia: plataformas móviles, resoluciones de pantalla, parques móviles y especialmente el cambio de los paradigmas de interacción que supone pasar de diseñar para web a diseñar para móvil. También comentó lo relevantes que habían sido durante su experiencia laboral los test de usuario. Para acabar, nos habló de su etapa de freelance actual y de algunos de sus sus proyectos actuales, entre los que destaca el interesantísimo Voota.

Una semana después comíamos en El Albur con César Astudillo, director de consultoría de DNX. César nos comentó su interés por “subir” en la cadena de diseño hacia posiciones más estratégicas y de innovación, y nos explicó algunas de las técnicas que utilizan en DNX para definir problemas y plantear soluciones de manera colaborativa con sus clientes.  El debate surgió en torno a la relación entre los equipos de UX y de desarrollo. Ante nuestra tozudez respecto a la necesidad de tener control sobre la implementación de los diseños propios, César resumió su postura con una frase: “es como el hijo que se hace mayor y al que tienes que dejar irse de casa”. Y continuando con citas para el recuerdo: “hacer un buen equipo de trabajo es como hacer una bechamel: añadir poco a poco los ingredientes y no dejar de remover”.

Por el camino charlamos de política, diseño, comics y terminamos el café con la presentación en primicia de la banda sonora en 8-bits que César acaba de componer para un videojuego de ¡Spectrum! , ante la mirada de desaprobación de la camarera del Albur.

La semana pasada Javier Cañada, de Vostok, compartía con nosotros la importancia de tener control sobre la fase de implementación. Nos explicó su postura respecto al diseño centrado en el usuario y hablamos de las polémicas respecto al design thinking que hemos podido seguir últimamente en su blog y en Interacciones. Resumió también el planteamiento de empresa de Vostok, sus proyectos y equipo actuales y nos invitó a conocer sus nuevas oficinas. Una vez más, la conversación acabó escapando del mundo del diseño de interaccción, esta vez hacia el mobiliario de oficina, Objectified, Apple vs. Braun, Otl Aicher y la Bauhaus.

Por ahora no podemos estar más contentos con el resultado de los Almuerzoxx. No solamente por poder charlar un rato con algunos de los mejores diseñadores de interacción que conocemos, sino también por comprobar lo diferente de sus enfoques y planteamientos. Nos hacen pensar que el sector está más vivo que nunca.

Esperamos continuar pronto, escríbenos si te apetece.

Se trata de un eCommerce de moda con una característica que lo hace único: los productos que se ofrecen en la tienda han aparecido en series o programas de televisión. Así, se puede buscar la ropa que ha aparecido en “Sé lo que hicisteis”, o la que ha vestido una presentadora de televisión o nuestro actor favorito. Por ahora El Armario tiene acuerdos comerciales con Antena 3, La Sexta y Cuatro, y con más de 50 marcas de moda.

El proyecto arrancó el pasado mes de Junio como una iniciativa de la consultora estratégica Bufete de Marketing, la empresa de estilismo TvisT y la agencia de publicidad DoubleYou. Oxxigeno fue seleccionado como proveedor tecnológico para la puesta en marcha del proyecto. Han sido unos meses de trabajo duro para llegar a las fechas previstas, pero estamos bastante satisfechos con el resultado.

Algunas de las tareas que hemos realizado en estos meses:

• En colaboración con DoubleYou, realizamos el diseño de interacción del sitio, tanto de la tienda como del backoffice.
• Diseño del proceso de compra.
• Maquetación XHTML/CSS.
• Definición de la arquitectura tecnológica.
• Desarrollo tecnológico completo de la plataforma.
• Implementación del backoffice y de los mecanismos de administración, métricas, gestión de contenidos, sincronización con socio logístico, pasarela de pagos, etc.
• Soporte técnico, monitorización del rendimiento de la plataforma.
• Mantenimiento correctivo y adaptativo.

Por ahora, la acogida de El Armario de la Tele ha sido estupenda. El proyecto aún está arrancando y le queda mucha vida por delante. En los próximos meses El Armario no dejará de crecer y mejorar, ¡estad atentos!

Se puede decir que el diseño de interacción es el momento en el cual nos ocupamos de definir cómo va a funcionar y comportarse una herramienta. En nuestro caso, generalmente, la interfaz de usuario de una aplicación.

Desde que, hace ya bastantes años, se llegó a la conclusión de que el diseño de la interfaz de usuario era pieza clave en un proceso de ingeniería del software y dependían directamente de los requisitos del cliente y las necesidades de los usuarios, han proliferado dentro de muchas empresas departamentos de experiencia de usuario, diseño de interacción, usabilidad (ya sabéis a que me refiero) así como empresas especializadas en esta parte crítica del proyecto.

Desde mi punto de vista, el gran problema de ambas aproximaciones es el “síndrome de la patata caliente” o, lo que es lo mismo, considerar el trabajo de diseño de interacción como un entregable, como un fin en sí mismo.

Independientemente de la habilidad y experiencia del diseñador, llegar a unos cuantos mapas de flujo, una buena colección de wireframes, empaquetarlos en un .zip y desentenderse del tema (ya sea porque pasa a otro departamento o a otra empresa) es estar condenado al fracaso.

En primer lugar, el diseño es uno. Vale que hay cosas que sirven para aportar un valor emocional y otras que sirven para aumentar la facilidad de uso pero, en el fondo, todos vamos a por el mismo objetivo: mejorar la experiencia del usuario. No se pueden ver como partes separadas, debe existir un equipo que respire igual, que tenga los mismos objetivos.

En segundo lugar, el diseño por sí solo no vale nada. Hasta que no es real, hasta que no funciona es una mera entelequia, un ejercicio intelectual. Entre muchas razones, porque no eres consciente de los condicionantes reales. Y tratar los condicionantes, los requerimientos, es tarea de un diseñador.

En Oxxigeno nunca hemos sido de departamentos cerrados, y cada vez lo somos menos, entre nosotros y en nuestra relación otras empresas en proyectos llevados a cabo por varios proveedores.

Un diseño de interacción no es nada hasta que no ves lo que tarda en cargar una capa, hasta que no haces clic “de verdad” en un botón, hasta que no bajas al taller y ayudas a arreglar lo que era imposible prever.

Olvídate de los departamentos, olvídate de la “patata caliente”, olvídate de los entregables. Bienvenido al mundo real.

El DIY se puede también asociar a menudo al ahorro de costes, y aunque esto puede ser así casi siempre , a veces es mas caro fabricarlo que comprar el producto en una tienda. Encontrar en la vida cotidiana elementos que aprovechar para tu nuevo artilugio es una buena forma de reciclaje y que por otro lado ayudan a ejercitar el ingenio.

“Cuéntame, y lo olvidaré.
Muéstrame y lo recordaré.
Envuélveme y lo entenderé”

Pensamientos de CONFUCIO ( 551- 479 A.C. )

Costes aparte, creo que realmente es la mejor forma de entender el funcionamiento de las cosas y de medir la diferencia real entre la calidad de los resultados de la versión casera y los de la versión comercial, que según el caso, se corresponde o no con la diferencia de precio. Por otro lado hacernos las cosas nosotros mismos nos permite personalizar al máximo el resultado e incluso añadir mejoras para su función.

En una compañía tecnológica como la nuestra, en la que se hace hoy en día prácticamente todo de forma virtual, también queda sitio para pequeños proyectos DIY que alegran la existencia. Estamos tan acostumbrados a comprar las cosas ya hechas, que nos perdemos el placer del artesano. Aquí os dejo algunos de los “hacks” que hemos realizado.

RÓTULA PARA HACER VISITAS VIRTUALES

Capio Sanidad, uno de nuestros mejores clientes, confió en nosotros para el desarrollo de las visitas virtuales de su hospital “Fundación Jiménez Díaz”, para lo que tuvimos que fabricamos una rótula especial para hacer las fotos panoramicas 360º que nos permitiese una alta calidad del resultado final debido a que corrige el punto de rotación habitual de los trípodes.

DISPARADOR MANUAL PARA CÁMARA DE FOTOS

En la realización de las panorámicas es imprescindible que la cámara no se mueva cuando realizamos cada foto para evitar desenfoques, pues en ciertas condiciones de luz hay que disparar a velocidades lentas. Para evitar este fallo fabricamos un disparador manual para la cámara fotográfica que nos permite también disparar a cierta distancia y evitar por ejemplo aparecer en la foto si hay cerca un espejo.

STEDICAM CASERO

Todos los veranos en Oxxigeno tenemos un día corporativo en el que nos vamos todos juntos a pasarlo bien. Solemos grabarlo todos los años desde hace 4, pero para el video del año pasado añadimos un estabilizador casero para evitar mucho movimiento al llevar la cámara de un lado a otro.

ROTULADORES LEDS

Para nuestra felicitación de año nuevo del 2007 hicimos un video a base de fotografías de larga exposición en las que pintábamos con luz, en lo que se llama “lightpainting”. Para pintar fabricamos unos cuantos “rotuleds” para que la gente de la oficina los pudiese usar como pincel en el video.

Si te interesa en DIY aquí tienes algunos enlaces interesantes por los que empezar:

• Instructables (Red social sobre como hacer cosas)
• Makezine (Revista dedicada al DIY)
• Make en Español (Versión en español del Blog de Makezine)
• Hacked Gadgets (Web dedicada al DIY)
• Evil Mad Scientifics (Científicos casi locos)
• Ikkaro (Blog y foro en español sobre DIY)
• Afrigadget (Solucionando problemas con ingenio africano)

Compartiremos programa con buenos amigos de Multiplica y T2O Media, empresas con las que hemos trabajado y con las que nos alineamos en una misma visión de la web.

Las jornadas son gratuitas y tendrán lugar en Barcelona el martes 16 de junio de 10 a 12:30 en el Hotel U232 y en Madrid el miércoles 17 de junio de 9 a 11:30 en el Hotel de la Letras.

Aún nos queda alguna plaza de última hora. Si estás interesado, contacta con nosotros en evento@oxxigeno.com

Sin embargo, la disciplina va mucho más allá. ¿Qué pasa si la cámara de video que ha pedido el usuario llega tres semanas tarde y es defectuosa? ¿O si cuando llama para reclamar no se recoge su llamada, o es atendida por alguien que no le resuelve el problema? Sigue siendo experiencia de usuario. Concretamente, pésima experiencia de usuario.

La experiencia de usuario engloba todas las interacciones que se presentan entre el usuario y el “sistema”, entendiendo como sistema toda la organización. La web es un elemento más. De los más importantes, sí, pero no el único.

Así, también son parte de la experiencia de usuario los siguientes factores (“touch points”):

• Emails y notificaciones recibidos por el usuario.
• Diseño de los procedimientos de atención al cliente en el call center, si lo hubiera.
• Envíos postales (físicos) al usuario de cartas o productos.
• Trato recibido en las oficinas.
• Prestación de otro tipo de servicios.
• Etc.

La experiencia del usuario que utiliza una aerolínea empieza en el momento en el que está buscando un billete en Internet y termina cuando llega a su destino. Incluye el diseño y tono de comunicación de los mails de confirmación de la reserva, la forma de hacer el check-in en el aeropuerto, la atención recibida en el avión, el tiempo de espera en la cinta de equipajes y el estado en el que llega la maleta.

Evidentemente, en la mayoría de los casos el control de la experiencia de usuario global es imposible, siendo necesaria una especialización, una definición de equipos por áreas, etc. Pero es conveniente que, al igual que se hace en otros ámbitos como el branding o la imagen corporativa, la experiencia de usuario sea íntegra, fluida y de la misma calidad a lo largo de todo el sistema.

Esta idea conecta directamente con el diseño de servicios, cuyo objetivo final es precisamente la mejora de los mismos desde la óptica del usuario. En el diseño de servicios a menudo hay que recurrir a equipos multidisciplinares que trabajan de manera coordinada para el diseño e implementación satisfactorios de lo que se ha identificado corporativamente como servicio.

Últimamente nos ha llamado la atención el diseño de un servicio en concreto: el registro en el Local Business Center de Google. Es un directorio de empresas localizadas geográficamente en Google Maps, de manera que Google ofrezca esos resultados tanto en las búsquedas web como a través de su servicio de mapas.

El diseño del servicio es brillante. Una vez completado el formulario de rigor, Google solicita una forma de comprobar que el teléfono introducido es el correcto:

Si indicamos “Por teléfono”, se nos informa que se va a proceder a realizar una llamada:

Si aceptamos, se informa que se está realizando la llamada, y se pasa a mostrar un aviso de espera. Prácticamente al instante suena el teléfono físico que hemos informado. Al descolgar, una voz pregrabada nos solicita la introducción a través del teclado del teléfono de un código que se nos ha facilitado por la web. En cuanto tecleamos en el teléfono los número del código, la pantalla web que estaba esperando se desbloquea y confirma el registro en Local Business.

Aún cuando entendamos la posibilidad técnica de realizar algo así, la experiencia es casi mágica. La sincronización de la tecnología web con la telefonía tradicional es perfecta y fluida. Y ya no solamente en su implementación, sino también en la forma de guiar al usuario, teniendo en cuenta que se trata de un procedimiento complejo que debe saltar del mundo virtual al físico a través de distintos dispositivos. Es un caso de diseño multidisciplinar de servicio y de experiencia de usuario perfecta y sin fisuras, aún a pesar de tener que usar distintos canales de comunicación.

Por otro lado, es un buen ejemplo del acercamiento progresivo entre Internet y el mundo físico. Ya sea a través de móviles, geoposicionamiento, interfaces táctiles o gestuales, proyecciones, RFID o tecnologías aún por venir, es inevitable que ocurra.

Una vez más (y no será la última): enhorabuena, señores de Google.

Muchas veces tendemos a buscar una solución programada a problemas que pueden ser resueltos fácil y rápidamente sin recurrir al actionscript. Preferimos buscar trozos de código en la web que muchas veces solo entendemos por encima en lugar de desarrollar efectos hechos por animación desde cero. En definitiva nos volvemos un poco ciegos a la alternativa animada y preferimos el engorro del código.

Si bien actionscript te permite realizar efectos espectaculares en tiempo real, esto muchas veces no es necesario y la utilización de código no esta justificada. Ademas siempre es mas fácil que otra persona entienda una linea de tiempo animada que un montón de lineas de código, por lo tanto un proyecto puede ser retomado mas fácilmente por diferentes personas.

Vamos a ver como animar un objeto que desprende una estela, utilizando únicamente las interpolaciones de movimiento, clips de película anidados y algún filtro.

1º Dibujamos el objeto que queremos animar. En mi ejemplo una bolita que dibujare utilizando la herramienta Óvalo.

Seleccionando el objeto y pulsando F8 lo convertimos en un clip de película (no me preguntéis del porque no un gráfico ya que es simplemente una preferencia personal).

2º Seleccionamos el clip y nuevamente lo convertimos en otro clip. Por lo que tendremos un clip anidado en otro. Al que encierra la forma de la bolita lo he llamado bola y al segundo que lo contiene lo he llamado anima bola.

3º Editamos anima bola y creamos la siguiente linea de tiempo

El primer y el ultimo fotograma clave tiene bola en la misma posición inicial y en el del medio desplazo bola. Después interpolo y ya tengo una animación en la que bola se desplaza y vuelve a su posición una y otra vez.

Para adornar un poco le doy aceleración 100 al primer fotograma clave y -100 al segundo. Y una rotación CW x3 en el primer fotograma clave y de CCW x3 en el segundo.

4º Volvemos a la escena, seleccionamos  ‘anima bola’ y pulsamos F8 para volver a anidarlo. Yo he llamo a mi nuevo clip estela bola. Así que tenemos el siguiente esquema:

5º Editamos estela bola y creamos la siguiente linea de tiempo:

Las capas llamadas estela son una copia del contenido de la capa llamada bola. Así tenemos el clip de película anima bola en 5 capas diferentes. En la última superior y el último fotograma he puesto un stop(). El único trozo de código de la animación.

En las capas llamadas estela selecciono el clip de película y le doy un Alfa del 30% y un filtro de desenfoque de 5px. en los ejes X e Y. Por lo que cada clip anima bola nos quedaría así:

6º Publicamos y ¡tachán!

Sin embargo, en nuestra ambición por fijarnos en los pequeños detalles, nos ha parecido interesante resaltar uno mínimo, ni tan siquiera ubicado en la aplicación principal sino en su página web: su gestión de invitaciones.

En principio, Spotify es un servicio que funciona con invitación. Por ello, los usuarios que ya están dentro pueden invitar a sus contactos a través de su correo electrónico.

Esto es algo bastante habitual. Incluso es corriente que se introduzcan sistemas para potenciar la viralidad (importaciones de contactos y demás), en ocasiones de manera bastante tosca.

Sin embargo, estos sistemas de invitaciones suelen estar muy volcados a “utilizar” al usuario para que mande el correo y poco más. Una vez cumplido el objetivo spameador, te abandonan miserablemente.

Por eso, nos ha sorprendido muy favorablemente cómo lo hace la gente de Spotify:

Por un lado, la posibilidad de crear una nueva invitación (bien indicado en segundo plano las invitaciones restantes)

Por otro, las enviadas y pendientes de aceptación. El detalle de tener un “identificador de invitación” puede parecer un poco freak, pero -creemos- da una excelente imagen de control.

Por último, las ya aceptadas. Asociando el código de invitación al nombre del nuevo usuario.

En definitiva, que en Spotify no sólo demuestran tener cariño por la música. Demuestran también tenerlo por el usuario. Y eso nos gusta.

Generalmente, a la hora de diseñar interfaces se recomienda no abusar de los menús o capas desplegables que se abran automáticamente al pasar con el puntero por encima del control correspondiente (enlace, icono), ya que esta acción no implica que el usuario quiera activarlo. Cuando se abusa de esta técnica, la página se convierte en un festival de capas que se abren, se cierran, se mueven y despliegan ante el simple movimiento del ratón, mareando y desorientando al usuario que está simplemente explorando la página.

La solución más habitual es esperar a que el usuario seleccione activamente el control correspondiente mediante un click: abrir, cerrar, desplegar, etc.  Se utilizará la activación automática solamente para las acciones principales del interfaz, como la navegación por el menú principal.

Sin embargo, hace poco tiempo descubrimos una técnica muy sutil que permite al usuario activar un control sin necesidad de click: introduciendo un retardo temporal antes de activar el mismo. Así, el control se activará únicamente si el puntero se coloca encima durante unas décimas de segundo. Evitamos activaciones no deseadas, pero agilizamos a la vez la interacción y reducimos el rozamiento.

Es una solución que nos parece bastante interesante, situada en el punto medio entre el despliegue automático y el activo. Sorprendentemente, no se suele citar en libros especializados ni en catálogos de patrones de diseño de interacción. Veamos un ejemplo.

Visitemos Amazon, la tienda de libros online por excelencia:

Podemos ver que al pasar el ratón sobre el menú de la izquierda se abre automáticamente el elemento, sin necesidad de hacer click. Es lógico: es la navegación principal del sitio, luego debe favorecerse su activación.

Sin embargo, en la parte superior de la página vemos otro menú de menos importancia: “Gift cards”, “Today’s deals”, etc. Si pasamos rápidamente sobre el control de despliegue que hay al lado de cada elemento vemos que no se despliega automáticamente: hay que colocar el puntero encima durante unas décimas de segundo.

Curiosamente, en el desplegable secundario que hay en la parte superior derecha (“Your lists”) el funcionamiento no es el mismo. Al estar colocado en un lugar apartado es difícil de activar involuntariamente, luego no es necesario introducir el retardo.

En definitiva: un pequeño truco que nos permite priorizar unos controles sobre a otros, intentando estorbar lo menos posible al usuario en su exploración pero sin penalizarle cuando decide actuar. Todo un ejemplo de atención al detalle durante la fase de diseño.

• Recordar lo que se está perdiendo el usuario al dejar de tener cuenta.
• Recalcar la posibilidad de volver a recuperar el registro, y facilitar la forma de hacerlo.
• Obtener feedback de por qué el usuario está abandonando nuestro sitio.
• Utilización del componente emocional en copys e imágenes de apoyo

En Oxxigeno recientemente tuvimos que diseñar una página de este tipo para uno de nuestros proyectos, optando por una combinación del tercer y cuarto punto. La página que diseñamos fue la siguiente:

Como se puede ver, introducimos una mejora adicional: si sabemos por qué el usuario se está yendo, propongámosle formas de corregir la situación, ofreciéndole enlaces directos a aquellas herramientas y funcionalidades de nuestro sitio que le permitan arreglar lo que no le gusta de su experiencia . Seguimos una estrategia preventiva (“proponer las soluciones antes de perderle”), informando que esas cosas que ve como inconvenientes tienen solución, y que dicha solución está en su mano.

Por supuesto, este formulario de baja no debería ser algo permanente. La tarea de revisar y analizar los motivos de baja informados por los usuarios es importante, pues nos permitirá corregir los errores de planteamiento de nuestro sitio. El formulario deberá ir incorporando los motivos más frecuentes, y ofrecer las nuevas formas de corregirlos. Asimismo, debería buscarse la integración de esta información con la solución de analítica web que se haya diseñado para el sitio, para obtener la foto completa del comportamiento de los usuarios.

Otro aspecto muy importante es que lo estamos consiguiendo de manera no intrusiva: el usuario no debe encontrar obstáculos en su operación, aunque ésta consista en la pérdida del usuario. Es habitual la ocultación o complicación de los procesos de baja en los sitios web. Sin embargo, es preferible perder a un usuario que se quede contento con su experiencia de baja a mantener sus datos pero que, frustrado por no conseguir su objetivo, deje de utilizar nuestro sitio y además se lleve una imagen negativa de nuestra marca.

En realidad, estas ideas podrían extenderse a todos aquellos puntos del sitio en los que el usuario solicita cortar los lazos con nuestra organización, como la baja de newsletters o avisos por email. Incluso deberían expandirse al diseño de servicios, de formularios en papel en oficinas físicas, procedimientos del callcenter, etc.

ACTUALIZACIÓN (19 Febrero 2009):

Vemos que, tras la polémica  con las condiciones de servicio de Facebook, la red social ha incorporado la técnica que comentamos para evitar la pérdida de usuario:

¡Gracias por el enlace, Missha!