Desafíos de la experiencia de usuario (UX) en IoT

Como ya comentamos en nuestro post de tendencias para 2016, los dispositivos ponibles (o wearables, de cuya metodología de diseño hablamos hace unas semanas) o la Internet de las cosas (IoT, Internet of Things) están de moda.

En pocos años, hemos pasado de un entorno donde la interacción humano-ordenador (HCI, por sus siglas en inglés) era un asunto más técnico, a un mundo en que hay que una amplia gama donde aplicar principios de experiencia de usuario: tabletas, móviles, dispositivos conectados inteligentes, sensores…

Todos esos aparatos tienen una nueva gama de gestos, interacciones e interfaces que son muy diferentes a un ordenador de escritorio y esto obligará a muchos servicios a adaptarse. Por ejemplo, las televisiones ya tienen sus contenidos estarán disponibles “a la carta” desde diferentes dispositivos; al menos, escritorio, tableta/móvil y en televisiones inteligentes. Incluso ponen en marcha servicios específicos para televisiones inteligentes como el caso de Botón Rojo de RTVE, adaptado a la interfaz de estos dispositivos.

Resumiendo, el Internet de las cosas incluye una serie de aparatos entre los que estarían:

  • Dispositivos wearables: relojes inteligentes, pulseras de actividad/deporte, monitorización de sueño, por ejemplo.
  • Dispositivos médicos: básculas, medidores de presión, etc.
  • Tecnologia de domótica inteligente: termostatos conectados, luces, etc.
  • Coches conectados: que tendrán acceso a apps de smartphones, conexión con el seguro/accidentes en caso de accidente, diagnósticos del sistema.
  • Sistemas urbanos: sensores de calidad del aire, estaciones meteorológicas, sistemas de bicis, parquímetros inteligentes, etc.
  • Sistemas de vigilancia de cosechas o ganado inteligentes.

Las posibilidades son ilimitadas, y solo estamos al principio del camino. En todas ellas, será fundamental la experiencia de usuario y, por tanto, es indispensable hacer un buen trabajo preliminar con tests e investigación de usuarios debido a las limitaciones de la tecnología actual, aprovechando todo el conocimiento disponible. Algunos gobiernos se están anticipando y, como el caso del Gobierno británico, están dedicando fondos públicos a elaborar diferentes estudios, como éste de usabilidad sobre los termostatos inteligentes.

Desafíos de UX en el ecosistema de dispositivos conectados (IoT)

Sobre los desafíos en experiencia de usuario en este entorno hiperconectado, Armen Ghazaryan ha escrito un articulo para DesignmodoInternet of Things (IoT): The UX Challenges” (El internet de las cosas: Los desafíos de UX en castellano), que recoge algunas ideas interesantes:

  • Problemas de conectividad: IoT, como su propio nombre indica, tiene una dependencia completa de la conexión de red. En un ordenador o un móvil podemos tolerar problemas de conectividad, pero en otro tipo de aparatos no es posible. Por ejemplo, si indicamos a un sensor que se apague la luz, esperamos que lo haga -casi- inmediatamente. Los problemas de conexión tienen un gran impacto en la experiencia de usuario, y es un gran desafío técnico.
  • Problemas con múltiples interfaces: otro de los problemas de este ecosistema de sensores y dispositivos conectados, es la amalgama de interfaces para controlarlos. Si tenemos varios aparatos conectados, es habitual que cada uno se controle mediante una aplicación diferente. Para solucionar esto algunas empresas se han unido en AllSeen Alliance y el Open Interconnect Consortium (la primera, de electrodomésticos inteligentes y la segunda, de IoT generalista), para avanzar en la estandarización.
  • Problemas de usabilidad: Lo más probable es que los usuarios tendrán que aprender y memorizar nuevos gestos, iconos e interfaces. Podríamos decir que la IoT actual es poco usable. Si hiciéramos una evaluación heurística de los dispositivos actuales, probablemente no nos gustarían los resultados. Nuestro conocimiento y práctica de usabilidad no son directamente aplicables a la IoT.

En definitiva, la Internet de las Cosas tendrá éxito en la medida que se convierta en la Internet de las Personas (o incluso la Internet de tí mismo), creando experiencias de usuario muy personalizadas que se integren entre sí y sean relevantes para cada consumidor de forma única.

Como diseñadores de UX, es muy probable que tengamos que enfrentarnos a este tipo de desafíos en breve. Será nuestro trabajo investigar la experiencia de los usuarios finales con estos nuevos dispositivos y optimizarla en consecuencia. A buen seguro descubriremos muchos puntos débiles de UX que deben ser corregidos.

Proyecto: Made in Zaragoza (I): rediseño de UX para una comunidad híperlocal

Aunque habitualmente hablamos de proyectos ya terminados, hoy os traemos un proyecto que tenemos en marcha. Se trata del rediseño de Made in Zaragoza, un proyecto del Ayuntamiento de Zaragoza para crear una red de comercios creativos en Zaragoza generando impacto económico, social y/o cultural en la ciudad.

Valores diferenciadores de Made In Zaragoza

Por temas de confidencialidad de cliente, no siempre tenemos la oportunidad de documentar aquí el proceso de trabajo que seguimos en un proyecto. Por ese motivo, tenemos que agradecer al equipo de proyecto del cliente la predisposición a contar (casi) en directo este proyecto del estudio.

Este proyecto quiere ser también la marca que ponga en valor el trabajo de estas pymes y profesionales en el ámbito de la economía creativa, que constituyen el cimiento de la identidad cultural de Zaragoza, dinamizan y consolidando los barrios y representan además una importante industria híperlocal generadora de riqueza y empleo. En sus propias palabras: “Un espacio compartido donde potenciar lo colaborativo frente a lo competitivo, lo artesano frente a los estándar, lo próximo frente a lo deslocalizado, lo meditado frente a lo acelerado.”

Objetivos del proyecto Made In Zaragoza

El objetivo final del proyecto es el rediseño del sitio web de Made in Zaragoza, trabajando desde su conceptualización. Para ello, nos contactó la persona encargada de la coordinación del proyecto para hacer una serie de workshops conjuntos, que permitieran alinear los objetivos del proyecto con las necesidades de los usuarios.

Hasta el momento hemos tenido dos workshops de trabajo, donde hemos puesto en común esos objetivos y hemos reunidos a los distintos stakeholders (funcionarios, blogueros, comercios, creativos) que colaboran en el proyecto, con el objetivo de conocer sus intereses y unificar criterios, porque siempre existen intereses contrapuestos entre los distintos implicados.

Primer workshop: focus group con usuarios

El objetivo del primer workshop con Made In Zaragoza fue reunir a una representación de de 10 stakeholders de los diferentes ámbitos que tiene el proyecto, para realizar un focus group.

Se trataba de hacer sesiones de trabajo con el equipo de proyecto, donde se trabajara en enfocar completamente el proyecto desde una etapa temprana, utilizando diversas técnicas y facilitando la conversación entre los diferentes stakeholders.

Hubo blogueros, comerciantes de los barrios de la Madalena y las Armas, responsables del proyecto en Zaragoza Activa y gente de nuestro equipo Torresburriel Estudio.   Cada uno de ellos contó su visión y necesidades del proyecto y conseguir alinear todas lo máximo posible y sacar unos objetivos conjuntos que aplicar al rediseño de la web de Made In Zaragoza.

Algunas conclusiones a las que llegamos:

  • Probablemente, la estética de la web se ha quedado anticuada.
  • Es necesario potenciar la web fuera del blog (comercios, lugares, córner MIZ, MIZ). En resumen, lograr que la web sea algo más que un blog sobre sitios creativos y fomentar la expansión, logrando que más comercios se unan a la red MIZ.
  • Crear un directorio donde aparezcan todas las personas y colectivos que participan de una u otra manera en la red de Made In Zaragoza, divididos por perfiles o tipo de participación en esa red.
  • Eliminar la sensación de que son un proyecto del Casco Antiguo (barrio donde nacieron), ya que su trabajo abarca todo el ámbito de Zaragoza.
  • Actualizar los criterios de la red (siguen siendo los mismo, pero es conveniente expresarlos de forma diferente).

A continuación incluimos un storify donde hemos recopilado algunas fotos y tuits de los participantes en ese primer workshop con Made In Zaragoza:

Segundo workshop: conceptualización y diseño

Una vez alcanzado un diagnóstico sobre objetivos y necesidades de los usuarios, entramos en el terreno de la experiencia de usuario propiamente dicha.

En este segundo workshop, avanzamos en la conceptualización del sitio. Para ello, nos centramos en aplicar esa investigación de la primera fase en el diseño y desarrollo de mockups de baja fidelidad primero, y alta fidelidad más adelante.

Nos hicieron una serie de apreciaciones sobre lo que les presentamos:

  • Repensar el calendario de eventos, ya que no hay seguridad de continuidad ni si habrá contenidos suficientes para llenar en todos los eventos.
  • Diferenciar los tipos de miembros: tiendas, e-commerce, artesanos.
  • Incluir un CTA (call-to-action, llamada a la acción) para que se añadan nuevos miembros a la red.
  • Cambiar el foco de la página de eventos a los miembros de la red Made In Zaragoza.

En este momento, estamos trabajando en plasmar esas propuestas de mejora en los wireframes, para optimizar esa experiencia de uso.

En breve, os seguiremos contando más cosas de este proyecto. Continuará…

Desarrollo de producto: del MVP a la UX

Henrik Kniberg (Agile/Lean coach en Spotify y Lego) ha escrito un interesante post donde contrapone el concepto de Producto Mínimamente Viable (MVP por sus siglas en inglés) al de Producto Rápidamente Testable/Usable/Estimable (Earliest Testable/Usable/Lovable, en inglés).

Kniberg usa como ejemplo este gráfico, elaborado por él mismo:

 

En la parte superior, vemos el enfoque erróneo del MVP: el usuario está frustrado/descontento hasta que terminamos el proceso de diseño de producto y está acabado. En la parte de abajo, el usuario consigue un producto completamente funcional desde la primera iteración, que se acerca al producto final con el enfoque incremental de mejora propios de las metodologías ágiles, hasta que el producto final satisface plenamente las necesidades del usuario.

Las fases serían:

  • El monopatín
  • El patinete
  • La bicicleta
  • La motocicleta
  • El automóvil

Cada fase serían una representación de cada una de las iteraciones (o estadios) del desarrollo de producto.

El monopatín

  • No intentamos hacer feliz al cliente en esta fase. Nuestro objetivo en esta fase es simplemente aprender, cuanto más rápido mejor..
  • Nos centramos en descubrir la necesidades ocultas del usuario.
  • Si la necesidad es “Ir de A a B rápidamente”, el automóvil es una de las posibles soluciones, aunque no la única.
  • Nuestro objetivo será fabricar un coche pero, mientras tanto, toma esto. Pruébalo y danos feedback.
  • La pregunta clave de esta etapa es: ¿Cuál es la manera más rápida y barata de empezar a aprender?

El patinete

  • ¿Está el cliente feliz con el patinete? No, realmente, sigue queriendo un coche.
  • Pero en el intermedio está usando tu producto y dándonos feedback

La bicicleta

  • La bicicleta podría volverse un producto mejor que el automóvil originalmente imaginado.
  • No importa cuánto hayas planificado o estimado, te sorprenderás cuando pones la primera versión real en las manos del usuario.

La motocicleta

  • Puede que el cliente sea feliz con la motocicleta y, acabemos el proyecto antes de lo que habíamos planeado.
  • El acercamiento iterativo es una manera de lanzar productos más ajustados, y encontrar la manera más simple y más barata de resolver los problemas del cliente.

El automóvil

  • Podemos terminar teniendo el mismo coche que habíamos imaginado. Aunque lo más habitual será que hayamos ganado conocimientos en el proceso y acabemos con algo diferente.

A muchos clientes el concepto MVP les suena igual que “cacharro mínimamente lanzable”. Parece que será algo que no será usable porque ha sido lanzado antes de tiempo.

Desarrollo de Producto: Del MVP a el concepto de “Producto Testado/Usable/Estimable Rápidamente”

Queremos llegar a las nubes pero vayamos en pequeños pasos. Gráfico de Henrik Kniberg

 

  • Producto Testado Rápidamente (Earliest Testable Product): siguiendo el ejemplo anterior, sería el monopatín. La primera versión con la que los usuarios pueden hacer algo.
  • Producto Usable Rápidamente (Early Usable Product): probablemente, sería la bicicleta. La primera versión que los usuarios tempranos usarán voluntariamente.
  • Producto Estimable Rápidamente (Early Lovable Product): probablemente, sería, la motocicleta. La primera versión que los clientes amarán, hablarán con sus amigos de ella y estarán dispuestos a pagar por ella porque cumple con los objetivos mínimos planteados (“ir de A a B rápidamente”).

La viabilidad de un proyecto puede ser contrastada con un MVP, pero a la hora de diseñarlo debemos tener muy presente el diseño centrado en el usuario. No olvidemos que la experiencia de usuario (UX) indica el nivel de satisfacción total del usuario con el producto/servicio. Como diseñadores de UX debemos ser capaz de ver tanto los árboles como el bosque en su conjunto, es decir, desde la mínima usabilidad a cubrir  todos sus objetivos y sus expectativas.

Nuevo diseño del menú de navegación de El País: una apuesta valiente

Hace tiempo que no comentamos los cambios visibles en medios de comunicación como el rediseño completo de The New York Times (2013), el rediseño de El Mundo (2009) o los cambios en la web de elpais.es (allá por 2006, hace casi diez años).

Menú de noticia sin desplegar y debajo el menú desplegado al hacer clic. 

Hoy traemos un pequeño (gran) cambio que ha realizado el diario El País, que creemos que tendrá mucho impacto. Sin apenas hacer ruido, El País ha rediseñado su menú de navegación desde la página de una noticia, con una apuesta muy valiente (ver ejemplo).

La apuesta es valiente, con una clara tendencia hacia un diseño con varias columnas, minimalista y muy visual. Parece que vamos perdiendo la inercia de los medios online a la hora de replicar y desplegar funcionalidades.

Tenemos que decir que nos ha gustado que está siempre accesible un enorme menú desplegable de navegación, que facilita el acceso a la mayor parte de secciones del diario. La propuesta utiliza el icono del menú hamburguesa, junto al logotipo del diario. Quizá la mayor pega que hemos encontrado es colocar este icono del menú de navegación junto al logotipo, ya que puede entenderse como parte del logotipo (al igual que ocurre con la personalización especial del 40 aniversario). En ese sentido, sería preferible separar visualmente ambas entidades.

La versión para dispositivos móviles, es similar a este cambio, aunque con algunas diferencias de disposición para que el menú sea vertical y no apaisado.

Por un lado, dan más relevancia a las ediciones locales y los sitios temáticos, dejando dos listas laterales para las secciones habituales y apartados destacados. Esta relevancia no es casual: El País refuerza la presencia de las información más localizada (¿recuerdan el periodismo hiperlocal?) y de sus suplementos, como espacios idóneos para la especialización y los contenidos de calidad.

Es decir, el valor está en superar el hecho informativo, aportando contexto y explicando al lector por qué se producen las cosas y qué consecuencias tendrán. La estrategia de contenidos es la nueva arquitectura de la información, como decíamos en nuestra reseña de  “The Content Strategy Toolkit”.

Modo alto contraste de El País

Por otro, se incluye un modo de alto contraste que mejora la accesibilidad del sitio para personas con dificultades de visión, pero que también facilita la legibilidad al usuario medio. Otros medios lo han incorporado (como el NYT en su versión móvil, que denomina “Night Mode”), pero sigue siendo un enfoque bastante disruptivo. Y, sin embargo, parece necesario si tenemos en cuenta que la media de edad del lector de prensa digital se sitúa en 44 años, siguiendo una tendencia creciente (según el Libro Blanco de la Prensa 2015).

De momento, lo han aplicado únicamente a las páginas de cada noticia, mientras que mantiene el menú de navegación en portada y en otras secciones de su sitio. Puede ser una muestra de cambios a pequeña escala para comprobar cómo funciona y qué impacto tienen estos cambios en la experiencia de sus usuarios. Es más que probable que haya otros cambios importantes como consecuencia de la celebración del 40 aniversario de la fundación del diario.

Otra muestra más de la necesidad de apostar por los contenidos de calidad y una mejor experiencia de usuario en los medios online.

UX móvil: buenas prácticas al utilizar el menú con icono hamburguesa

Con el auge de Material Design y otros frameworks de diseño web adaptable, se ha generalizado el uso del icono de menú hamburguesa (icono con tres rayas horizontales), que indica que tras ese botón hay un menú con opciones. Este icono normalmente se ha generalizado en el diseño de interfaces móviles o adaptables para ahorrar espacio. Incluso, a veces, se usa fuera de ese contexto móvil.

Icono de menú hamburguesa. La foto de la hamburguesa es de Ruocaled

Sus ventajas son claras: puedes incluir una gran cantidad de información y, al mismo tiempo, ofrecer una forma coherente de encontrar opciones adicionales. Además, se trata de un estándar de facto, que los usuarios han aprendido a reconocer, y muchos frameworks de diseño adaptable ya llevan integrada esta solución, lo que facilita el despliegue y ese reconocimiento de los usuarios.

Sin embargo, ya comentamos en la entrada sobre tendencias de UX en 2016 que este menú tiene muchos detractores. Parece los usuarios se están acostumbrando al botón hamburguesa, aunque lentamente.

Sin ánimo de ser dogmáticos, desde Torresburriel Estudio os vamos a dar unas pautas y buenas prácticas al utilizar este menú, de forma que incremente o no limite la experiencia de usuario de vuestros productos digitales:

  • Preferentemente, utilizar el menú hamburguesa para interfaces para dispositivos móviles. Este icono fue diseñado para interfaces de baja resolución a principios de los 80 (GUI de Xerox Star) para indicar que había algunas opciones no visibles, pero dejó de usarse hasta que reapareció a finales de los 90 en las interfaces de dispositivos móviles.
    Cualquier dispositivo de escritorio actual tiene suficiente resolución como para hacer innecesario su uso, a no ser que pretendas replicar tu interfaz en el escritorio y dispositivos móviles, como hace Google con Chrome.
  • Al trabajar tu arquitectura de información, este menú no es recomendable para esconder menús con pocas opciones: si tu menú tiene pocas opciones (entre 3 y 5) es mejor no esconderlo tras el icono, porque lo haces invisible. En su lugar, es preferible una lista desordenada con enlaces a cada una de las páginas, porque es mucho más claro y evitamos crear confusión al usuario. Con dos o menos opciones, de ninguna manera deberías usar un menú hamburguesa. Además, debes tener en cuenta que este tipo de menús suelen estar desarrollados con Javascript. En este caso, incumplen una norma básica de accesibilidad, ya que al desactivarlo impide la correcta navegación.
  • Comprueba que el botón se pueda distinguir del fondo, en muchas plantillas de WordPress (por poner un ejemplo muy usual) el botón hamburguesa va en la cabecera incrustado y al modificarlas el fondo y el botón pueden ser del mismo color sin darnos cuenta, por lo cual el menú hamburguesa es indistinguible y hace que nuestros usuarios no entiendan del todo nuestra interfaz, al no ver ningún sitio donde hacer clic. Lo que siempre decimos aquí es la mejor solución, prueba, prueba, prueba y en cuantos más entornos diferentes mejor todavía 😉
  • Finalmente, y somos muy pesados con esto, pero haz pruebas de usuario para averiguar si los usuarios lo comprenden en el contexto de tu interfaz. Siempre es saludable hacer tests A/B de interfaz, pero con el menú hamburguesa hay que tener cierta atención porque puede generar confusión al usuario. Haz un test A/B entre un icono hamburguesa y una opción “Menú”para incluirlo en tu interfaz. Si tu entorno de usuarios es Android y Google (ya sea de Chrome o de sus aplicaciones), probablemente tendrás un elevado porcentaje de reconocimiento porque son elementos usuales en los interfaces de Google y Android.

Ya sabes, en diseño de interacción es más que conveniente hacer pruebas de usuario para descubrir debilidades del diseño y encontrar propuestas de solución. A veces, los resultados de los tests son sorprendentes y, aquello que pensamos que se entiende sin problemas, genera más confusión en nuestros usuarios. No hay una solución aplicable a todos los casos.

Si quieres que te ayudemos con las pruebas de usuario de tu producto o servicio digital, ya sabes dónde encontrarnos. ¡Cuéntanos tu proyecto! :-)

El auge del sector fintech: Mobile-Only, diseño y UX

Fintech es un término anglosajón, que une los términos finance (finanzas) y technology (tecnología). Ambos sectores siempre han estado muy unidos, desde la aparición de los mainframes de IBM en los años 50, pasando por las terminales y los mini-ordenadores en los 60 y 70, a los primeros usos prácticos de la informática personal con el PC y el Macintosh y otros Apple aplicados a los negocios con la hoja de cálculo Visicalc que facilitaba hacer cálculos y contabilidades a empresas de todo tipo.

Otro ejemplo de fintech famoso es Bloomberg y su terminales de información, que permitían ver información de la bolsa instantáneamente en pantalla y hacer operaciones con ella fácilmente de forma integrada con su teclado adaptado al entorno de trabajo. Os recomendamos ver el video del enlace anterior.


Vídeo promocional de los terminales de Bloomberg

Nadie discute que la tecnología ha provocado, especialmente en los últimos años, cambios de calado en los comportamientos y las expectativas de los consumidores. Dicen los expertos que, en cinco años, al menos tres de cada cuatro interacciones de los consumidores serán online o a través de dispositivos móviles. Más que una tendencia, será una realidad aplastante.

Quizá el reto que encaran los bancos es que los gigantes tecnológicos como Apple, Google, Amazon o Facebook dan sus primeros pasos en los servicios financieros. Y vienen pisando fuerte, pero también lo hacen compañías más pequeñas como Fintonic o Kantox, que vienen a cubrir los huecos que la banca tradicional ha ido dejando. Como suele decirse, de la misma forma que las compañías de streaming cambiaron para siempre el panorama de la distribución musical, las empresas fintech tienen el potencial para hacer lo mismo en el sector financiero.

El éxito de las aplicaciones fintech es multidimensional. Sin duda, buena parte de su éxito es la funcionalidad móvil que te permiten disponer de información en tu terminal, y realizar todo tipo de transacciones de forma inmediata. Toda la información que antes manejaba tu banco, está ahora a pocos clics de distancia de forma transparente: en qué gasto mi dinero, cuánto suponen mis facturas, qué recibos tengo pendientes, vencimientos, dónde podría ahorrar, son preguntas que cualquier usuario puede  responder de forma sencilla.

Como no podía de ser de otro modo, la piedra de toque será la experiencia de usuario. En un banco fintech el usuario dispondrá de los mismos servicios que en un banco tradicional, aunque parte de estos servicios puedan estar ofrecidos por terceros vía APIs abiertas. Cada vez serán más importantes los estudios de usabilidad y los tests con usuarios. Hablamos de dinero, y el dinero es emoción. Parece razonable que las empresas de este sector inviertan más recursos en esta dirección, para asegurarse una experiencia de usuario óptima.

Por otro lado, la cantidad de datos disponibles es asombrosa. Como profesionales de UX, nos enfrentaremos al reto de traducir esos datos financieros a los usuarios de una manera que sea clara, relevante y útil. Eso exigirá, en primer lugar, entender bien el negocio de los servicios fintech que ofrezca nuestro cliente. Debemos asegurarnos de descubrir y entender las expectativas de los distintos usuarios, analizar sus necesidades y problemáticas, pensar en la mejor solución para esos usuarios y, finalmente, crear prototipos y construir.

Finalmente, otro aspecto determinante en este contexto es el diseño visual, y por experiencia sabemos que un mal diseño visual puede arruinar un buen trabajo de UX. Decía Don Norman que “las cosas estéticamente atractivas funcionan mejor”. Y la explicación a esta afirmación es que la mejora de usabilidad de una interfaz es inherente al buen diseño visual. Las personas confían más en interfaces que resulten atractivas, y no nos olvidemos que diseñamos para las personas.

Aún más, desde un punto de vista de negocios fintech, deben ser capaces de ofrecer productos sofisticados y diferenciales, que no puedan ser fácilmente copiados o sustituidos por los bancos y, a la vez, resulten atractivos y útiles a los usuarios. Y, en ese sentido, tanto el diseño visual como la experiencia de usuario son fundamentales si quieren diferenciarse y sobrevivir. En ello también juega un papel clave una buena y atractiva visualización de datos.

En este contexto, es evidente que jugarán un papel cada vez mayor los usuarios Mobile-Only y, por ese motivo, es fundamental la carrera en que están todos los bancos por conseguir atraer clientes de servicios financieros digitales a su negocio tradicional. La banca tradicional también tiene mucho que decir en el desarrollo de la tecnología financiera en España. Están empezando a abrazar el fenómeno fintech, bien comprando startups o copiando algunos aspectos parte de su modelo de negocio.

Hoy os traemos tres proyectos fintech de entidades financieras: la estrategia Mobile-Only de BBVA, el banco Mobile-Only de La Caixa (ImaginBank) y Twyp, la aplicación de pago móvil de ING.

La estrategia Mobile-Only de BBVA

BBVA siempre ha sido una entidad pionera en la modernización tecnológica (fueron de los primeros en tener tarjetas de crédito en los 80, por ejemplo). Está llevando una política de modernización digital del banco, debido entre otros factores a que su actual presidente, Francisco González, fue programador informático antes de introducirse al sector financiero, uno de los pocos casos en este sector que tan necesitado está de hacer digitales sus procesos y de  modernizarse con la competencia tan fuerte que va a venir de pequeñas, medianas o grandes compañías de fintech.

BBVA ha lanzado una estrategia de Mobile-Only que llaman “la revolución de las pequeñas cosas”. A través de una mejora de las apps para móvil y tableta han actualizado la funcionalidades a todo un abanico de opciones que hace casi innecesario acudir a la oficina en muchos casos, salvo para grandes operaciones o pedir un préstamo.

Tenéis un análisis de los servicios de BBVA móvil en Hipertextual.

Twyp: aplicación de pagos entre móviles de ING

Otro banco que tiene una clara estrategia hacia lo digital es ING. La entidad holandesa ha lanzado en los Países Bajos y España, una aplicación de pago entre móviles similares a los que son usuales en países en vías de desarrollo de África.

Twyp es una aplicación con un funcionamiento similar a Paypal, un monedero donde metes dinero desde una cuenta y lo pasas a otro monedero. Tiene un límite de 1.000€ anuales, pero puede ser suficiente para realizar pequeños pagos, lo que sin duda puede facilitar su curva de adopción.

Tiene una interfaz muy sencilla, la podéis ver en iTunes o en Google Play. Chats para enviar dinero a tus contactos (esa es la utilidad de Twyp), rellenar o retirar dinero de tu cuenta Twyp. Por lo que hemos podido ver es una aplicación bien pensada y sencilla, similar a otras aplicaciones de pagos de países del norte de Europa, como la luxemburguesa Digicash.

ImaginBank, la apuesta Mobile-Only de La Caixa

La Caixa, otra de las pioneras de la banca electrónica en España, ha lanzado Imagin Bank, “la banca para millennials” o “el movimiento de La Caixa para luchar contra Apple o Google” por algunos titulares cuando salió el servicio.

Básicamente es un servicio bancario vinculado a una cuenta ya existente y gestionado mediante una aplicación móvil. Es más un servicio de pagos móvil, que un banco propiamente dicho, ya que no están todos los servicios de un banco, ni se crea una cuenta bancaria asociada al servicio.

No es un servicio dirigido a todos los perfiles. Está bien pensado hacia un segmento muy determinado como los millennials, jóvenes de 18 a 25 años que no necesitan otros servicios bancarios más avanzados como créditos o hipotecas y son un perfil Mobile-Only.

Tenéis un análisis de ImaginBank en Xataka Móvil.

Algunas conclusiones

El fintech será en 2016 una de las cuestiones que marcará el año. Las entidades bancarias y las startups tecnológicas tienen por delante un año interesante de cambios, donde la experiencia de usuario en las aplicaciones y productos digitales serán claves para conseguir fidelizar a los clientes y marcar diferencias, ofreciendo mejores servicios a precios competitivos.

Las startups fintech que quieran competir con los bancos tendrán que cuidar mucho la experiencia de usuario y el diseño visual, porque es lo que aportará valor diferencial.

En Torresburriel Estudio hemos trabajado con entidades financieras y startups fintech en adaptar/reorientar su negocio a estos cambios en el comportamiento de los usuarios: mayor uso de dispositivos móviles, usabilidad en sus aplicaciones móviles, mejora de los procesos de pago, tests con usuarios, o análisis y prototipado de su producto/servicio digital.
Si estás interesado en contarnos tu proyecto, contáctanos ;-).

Visualización de datos electorales en sitios de medios de comunicación

Desde un tiempo a esta parte, es evidente que ha aumentado la presencia de la visualización de datos y la infografía en medios de comunicación. La visualización de datos goza de buena salud, y parece que solo acaba de despegar.

Gráfico de la web oficial de resultados

Gráfico de la web oficial de resultados del Ministerio del Interior

Hasta hace poco tiempo, era un sector que apenas preocupaba salvo para gente de sistemas o de ambientes económicos. La prensa normalmente acudía a gráficos simples,  debido a lo costoso de imprimir gráficos con calidad en rotativa y a la falta de infraestructura informática con capacidad de elaborarlos. Recordemos que, hasta la llegada del iMac, los costes de la informática gráfica eran casi inasumibles para la calidad que daban.

En este post queremos hacer una revisión del proceso de visualización de datos de un proceso de plena actualidad, los resultados electorales y sus consiguientes pactos.

Para ello, vamos a escoger dos periódicos consolidados de tirada nacional, como son El País y El Mundo, y dos periódicos digitales donde la visualización de datos ha sido un activo desde su inicio. Para completar esta comparativa, usaremos de base la web oficial del Ministerio del Interior. Por otro lado, mostraremos también un par de ejemplos de ámbito internacionales, The Guardian y The New York Times, para ver cómo se están haciendo las cosas en periódicos punteros en la visualización de gráficos.

Web oficial del Ministerio del Interior

La web oficial de resultados electorales del Ministerio del Interior propone una visualización de datos conservadora, presentando estos datos en gráficos de tarta -con una forma característica de hemiciclo- según el número de diputados y diferenciando cada partido con el color característico de la formación con algunas excepciones, ERC es naranja claro (color de Compromís) en lugar de amarillo, IU-UP es granate, en lugar de rojo pero tampoco supone una diferencia abismal con la visualización esperada por el usuario.

Conviene destacar que el gráfico de la web oficial no tiene ningún tipo de forma, aparte del color, que permita diferenciar a cada formación. Esto puede ser admisible en un medio de comunicación, pero no lo es una web oficial que debería cumplir los máximos estándares de accesibilidad. Hay colores adyacentes que causan confusión visual, como son el rosa y el naranja. En estos detalles se debe poner especial cuidado, puesto que esta información tiene un alcance masivo, y no debemos perder de vista el objetivo de facilitar a cualquier ciudadano cómo interpretar información.

El País

Gráfico de resultados de El País

Gráfico de resultados de El País

En la página de resultados de las Elecciones Generales 2015 en El País proponen una visualización de datos similar a la oficial. La principal diferencia es que sólo conservan los colores distintivos de los partidos para los cuatro partidos mayoritarios (PP, PSOE, Podemos y Ciudadanos).

Su propuesta principal de visualización es un gráfico clásico en la visualización electoral, con forma de tarta representando un hemiciclo, que se complementa con un mapa de España con los vencedores de la provincia con su color. El mapa es clicable por provincias para acceder a información de detalle en una nueva página, pero no es interactivo.

Por otro lado, El País añade una gráfico de barras apiladas que muestra el número de votos. Este gráfico es pequeño y la información es difícil de leer y no aporta una gran información, salvo para analizar el volumen de votos de partidos como IU-UP en perspectiva (o UPyD, en elecciones anteriores), que tienen una correspondencia anormal entre número de votos y escaños. Un gráfico de barras facilita las comparaciones visuales, aprovechando nuestra capacidad innata para comparar con precisión longitudes que están una al lado de la otra. Pero un tamaño tan pequeño dificulta una visualización clara, ya que sólo se leen correctamente los cuatro partidos mayoritarios y carece de proporcionalidad (la proporcionalidad es por número de escaños, no de votos).

El Mundo

Gráfico de resultados de El Mundo

Gráfico de resultados de El Mundo

Los dos grandes diarios apuestan por gráficas similares. En este caso, El Mundo siempre ha sido más innovador que El País, y así podemos verlo en su web de resultados de Elecciones Generales 2015.

También muestran un mapa clicable por provincias para acceder a información de detalle aunque, en este caso, muestran una pequeña ventana emergente con el resumen electoral para la provincia y un botón de acceso a los datos de detalle.

Otro tema mejorable es que utilizan siglas en el caso de todos los partidos, sin información contextual. Esto dificulta la comprensión de información con las nuevas formaciones políticas. Por ejemplo, DL hace referencia a Democràcia i Llibertat, algo que el lector medio no tiene por qué conocer si no se trata de un partido de zona geográfica.

En este caso, en lugar de gráficas piladas para el número de votos, han apostado por una lectura en torno a una de las consecuencias más destacadas del panorama de las recientes Elecciones Generales: el descenso de voto del tradicional bipartidismo (votos de PP y PSOE). Para ello, han recurrido a un gráfico apilado horizontal con una comparativa del número de escaños a PP y PSOE en 2011 y 2015, permitiendo un análisis sencillo del progresivo descenso en escaños obtenidos por ambos partidos.

La información de votos y porcentajes está tabuladas, permitiendo una mejor lectura que en el caso de El País. Además, han elegido unos colores más reconocibles por el usuario para cada partido lo que, sin duda, mejora la experiencia visual.

Eldiario.es

Gráfico de resultados de Eldiario.es

Gráfico de resultados de Eldiario.es

Eldiario.es es un medio digital que, desde su fundación, ha apostado por el periodismo de datos una de sus estandartes.

La visualización de datos electorales que propone ElDiario es más parecido a un gráfico de un periódico anglosajón, donde se recoge toda la información de un vistazo. En ella se pueden ver los escaños de la confluencias (tanto las de Podemos como las de IU-UP). Además, no utilizan en el gráfico de tarta los partidos con menos del 3% de voto a nivel estatal, lo que mejora sensiblemente la claridad y legibilidad del gráfico. Para no perder esta información, los incluye en una leyenda.

Otro tema destacable es que coloca un gráfico de posibles mayorías, es decir, un gráfico que aporta contexto al resultado electoral.  Puesto que ningún partido puede gobernar en solitario, analizan las principales opciones de pacto que serían factibles, con un análisis de mayorías parlamentarias. Más abajo, de forma tabulada, relacionan todas las candidaturas presentadas, su número y porcentaje de votos y la tendencia (creciente/decreciente en votos y escaños) respecto a las anteriores elecciones.

El Español

Gráfico de resultados de El Español

Gráfico de resultados de El Español

El Español es otro periódico digital que apuesta por el periodismo de datos como activo de diferenciación frente a los medios tradicionales. En su visualización de datos electorales, se puede ver una presentación muy cuidada, con una gran apuesta por la visualización de datos unida a la interactividad.

En la parte superior,hacen una distribución horizontal de los escaños obtenidos en el nuevo Congreso. Sobre todo destaca que, para el desglose de datos del Congreso, apuestan por un mapa nacional interactivo, que colorea las localidades con el color de la fuerza más votada. Un trabajo bien conseguido y muy visual, que permite navegar sobre la misma zona de pantalla.  En este caso, la visualización de datos se replica en el Senado.

Además, El Español apuesta por una información de contexto más periodística, incluyendo una sección “Resumen” que analiza, entre otras cosas, los posibles escenarios en la investidura del nuevo Presidente del Gobierno, la caída del bipartidismo y la creciente presencia de mujeres en el Congreso. También recoge una comparativa con las encuestas publicadas antes del 20-D, algo que se suele obviar pero que es de gran interés para valorar la dificultad y calidad del trabajo demoscópico.

Otras propuesta de visualización de datos electorales en medios internacionales

Comparemos ahora la visualización de datos en España con las propuestas de otros medios internacionales en distintas elecciones. Por la calidad de sus trabajos de visualización de datos e infografías, hemos seleccionado The Guardian y New York Times.

The Guardian – Elecciones 2015

Gráfico de resultados de The Guardian

Gráfico de resultados de las elecciones británicas de The Guardian

Comparemos ahora la visualización de datos en España con las propuestas de otros medios internacionales en distintas elecciones. El equipo de visualización de datos de The Guardian siempre ha sido muy admirado, y ocurre lo mismo con su versión digital.

Su gráfico de las elecciones británicas de 2015 (con el código disponible en Github) ha sido muy citado e incluso hecho meme (por el parecido con Maggie Simpson de la versión impresa).

Los gráficos usados son claros y sencillos, de un vistazo se entiende el panorama del nuevo parlamento (con una ordenación por ideología) , así como la composición del mapa electoral regional. Recordemos que el sistema electoral británico tiene la peculiaridad que gana el escaño el partido más votado en cada condado, de ahí la importancia de este gráfico.

New York Times – Elección a Congresistas y Senadores 2014

Gráfico de resultados de The New York Times

Gráfico de resultados de The New York Times

Los gráficos y tablas del New York Times también destacan por su experiencia de usuario. Son legendarias la alta calidad y claridad de las tablas de resultados de su sección deportiva o de la bolsa.

Los gráficos de la elección a Congreso y Senado 2014 son similares a la visualización en The Guardian, con la excepción que incluyen tooltips que explican los candidatos de cada distrito y la distribución de votos obtenidos en cada uno de ellos. A veces, los distritos coinciden con la demarcación del estado (caso de los estados de Montana y North Dakota, por ejemplo) y otras veces el estado se divide en varios distritos (como el caso de California, con más de 50 distritos diferentes). Haciendo clic en cada distrito puedes acceder a una visualización más local de la información, con un desglose por ciudades.

La disposición es la misma, arriba línea de división de la distribución total de voto; en medio mapa de división coloreado por el partido ganador en cada distritos y,más abajo, la visualización de datos numéricos tabulados. En el caso de NYT, esas tablas de resultados se dividen en: (1) distritos claramente de uno de los dos partidos (demócratas y republicanos), (2) distritos ganados por la mínima por los demócratas y (3) distritos casi empatados.

Actualización: Hoy el New York Times, ha sacado un gráfico de gran calidad de los dos caucus de Iowa.

AMP Project: mejorando la experiencia de usuario de los medios online

Con el progresivo aumento de la complejidad de las páginas web (cada vez queremos que hagan más cosas y esto requiere más recursos) y el uso creciente de dispositivos móviles, la experiencia de usuario en estos dispositivos llega a ser frustrante. Ya sea porque los sitios web utilizan demasiados recursos, los dispositivos tienen una potencia insuficiente, o las aplicaciones de terceros ralentizan los tiempos de carga, la navegación en dispositivos móviles puede convertirse en una tortura.

Portada de AMP Project

Detalle de la portada de la web de Accelerated Mobile Pages Project

Hace tiempo, los expertos aconsejaban diseñar los sitios web con dispositivos con al menos dos años de antigüedad en vez de con la última tecnología, para evitar todos estos inconvenientes. Todo cambia tan deprisa que un móvil con menos de 1 GB de memoria es casi incapaz de ejecutar una web que no esté optimizada para móvil, por no decir que muchas webs no estaban preparadas para dispositivos móviles hasta hace poco tiempo.

En Torresburriel Estudio recomendamos que, si debes afrontar un rediseño de una web, debes hacerlo pensando en los objetivos de ese sitio y no tanto en los dispositivos que se utilizarán. En los objetivos a corto, pero también en los objetivos a largo plazo. Salvo que el proyecto se conciba para un dispositivo concreto -en un entorno muy controlado-, un sitio web debería poder utilizarse desde cualquier dispositivo.

Hoy, os comentamos un proyecto muy interesante, que muy pronto dará que hablar. Accelerated Mobile Pages (AMP o páginas móviles aceleradas), es un proyecto de código abierto que une a compañías tecnológicas de primer orden como Google, Twitter, Pinterest, Linkedin o WordPress, con compañías de medios como Asahi, Hearst, Condé Nast, News Corp. y casi todos los grandes medios de calidad como El País, Financial Times, BBC, The Guardian, Frankfurter Allgemeine, La Stampa, New York Times o el Wall Street Journal.

El proyecto pretende mejorar la rapidez de carga e inmediatez de los contenidos y, por extensión, la experiencia del usuario de dispositivos móviles. Todo ello sin dejar de lado la tendencia a monetizar esos contenidos de alguna manera. Es decir, parecerse a Instant Articles de Facebook, pero estandarizado mediante un framework y para la web móvil. Está por ver si también introducirá mejoras para las aplicaciones móviles, algo que no se ha desvelado.

Además, este proyecto nos muestra dos tendencias. Por un lado, indica hacia dónde dirigen sus pasos algunos de los sitios de Internet con mejores contenidos, algo que ningún medio online debería perder de vista. Como explica la web del proyecto, “insertar anuncios o analíticas a menudo implica perder el control de lo que sucede en la página debido al JavaScript que se inyecta. AMP HTML no permitirá esto.”.

Por otro lado, AMP apuesta por modelos de negocio basados en subscripción o barreras de pago (paywalls). Se percibe un cierto tono de mea culpa de la industria de contenidos porque, en muchos casos, había ido defenestrando la experiencia de usuario por una carrera desesperada por monetizar sus contenidos online.

De momento el proyecto está en un estadio muy inicial, más allá de explicar el proyecto en una FAQ, un GitHub de código y una documentación básica. Se trata de un framework escrito en Javascript basado en NodeJS y Gulp. Tiene elementos predefinidos para imagen, videos, anuncio y pixel de estadísticas. Documentación toda ella para programadores y gente de sistemas, mayoritariamente.

Pero viendo las compañías están detrás y siendo un proyecto naciente, estaremos atentos a su desarrollo. Veremos cómo va mejorando y evolucionando y si llega a convertirse en algo maduro y completo, un estándar de facto para mejorar la experiencia de usuario de los medios online.

Como siempre podéis comentar cualquier cosa relacionada con AMP en los comentarios.

Si sois una empresa de contenidos y queréis asesoramiento para un futuro rediseño de vuestro sitio web pensando en todo lo que contamos, nos podéis contactar mediante el formulario de Contacto.

U.S. Web Design Standards: unificando la experiencia de usuario de los servicios públicos estadounidenses

El Servicio Digital estadounidense U.S. Digital Service es un pequeño equipo de expertos que trabaja con las diversas agencias gubernamentales, para eliminar las barreras que impidan una prestación de servicios y, al mismo tiempo, ayudar a “rehacer” la experiencia digital que las personas y empresas tienen con su gobierno.

Su misión es integrar las mejores prácticas del sector público y privado con el fin de ayudar a los distintos organismos del Estado a ofrecer una mejor experiencia de usuario en los servicios públicos. Se podría decir que es el equivalente al Goverment Digital Service (GDS) del Gobierno británico.

Este Servicio Digital, junto el equipo técnico 18F, encargado de renovar la imagen digital del gobierno estadounidense, han lanzado la versión alfa de los U.S. Web Design Standards, es decir, los nuevos estándares de diseño web de Estados Unidos).

Portada de U.S. Web Design Standards

Detalle de la portada de la web

Se trata de una serie de patrones de UI (interfaz de usuario) y una guía de estilo para unificar los diseños y el aspecto de todos los sitios webs del gobierno estadounidense, que hasta ahora mantenían diseños visuales muy heterogéneos.

Claramente, la apuesta es por un diseño muy versátil, que garantice la legibilidad y el impacto visual, asegurando que cumple los estándares de accesibilidad de la sección 508. En el blog de 18F ofrecen más detalles sobre sus prioridades y cómo ha sido el proceso de creación de estos estándares.

Como podéis comprobar en su guía de estilo, se han decidido por un diseño que podríamos calificar como conservador. Por un lado, se han decantado por el uso de colores primarios bastante neutros, asociados a tonos azules y grises que transmitan confianza, transparencia y serenidad, valores que cualquier agencia pública debe tener por principio. La apuesta también es por la accesibilidad del texto, reforzando el contraste necesario para los usuarios con deficiencias visuales.

Paleta primaria de colores

Paleta primaria de colores de la guía de estilo de U.S. Web Design Standards

Por otro lado, el resto de componentes del diseño visual (tipografías, tablas, botones, listas, desplegables, formularios, etc…) mantienen esa misma misma línea conservadora. De hecho, en la sección de Formularios podemos ver cómo prácticamente han replicado el diseño de un formulario gubernamental en papel al trasladarlo a al entorno digital.

Ejemplo de formulario

Formulario de dirección en la guía de estilo, muy similar a uno de papel

Os recomendamos que visitéis las secciones de la guía de estilo porque es magnífica, aunque esté en versión alfa 😉 No es una guía disruptiva en su concepción, pero es una buena base de trabajo si queréis optar por un diseño neutro pero elegante, o necesitáis trabajar en una proyecto nuevo donde sirva de base.

Como véis, tanto la administración Obama como el gobierno británico, tienen una estrategia digital muy bien definida y avanzan con pasos de gigante en su apuesta por modernizar sus servicios digitales y unificar la experiencia de usuario de sus respectivas webs gubernamentales. Algo que se echa de menos por estas tierras. :-)

Lectura recomendada: Otro magnífico trabajo de U.S. Digital Services es Digital Service Playbook, un sitio web que sintetiza sus mejores prácticas para la creación de servicios digitales eficaces como aplicaciones web y móviles. Muy interesante porque aporta una guía práctica, con listas de chequeo y preguntas clave que debes hacerte en cada ámbito.

Proyecto: UX de ternascodearagon.es

Trabajar en proyectos en los que el objeto del mismo es algo de comer es, para mi, un auténtico placer. Porque, amigas y amigos, no es lo mismo trabajar para mejorar la UX de una fábrica de tornillos que hacerlo para contar las excelencias de un producto tan absolutamente maravilloso como es el ternasco de Aragón.

Detalle de la página principal

Detalle de la página principal

Vale que para quienes o bien no comen carne o bien no les gusta el ternasco mis palabras pueden sonar un poco exageradas. Ok, compro. No son público objetivo del primer párrafo.

En lo que tiene que ver con el proyecto, y ya hablando en serio, se trata de una de esas propuestas que vinieron en la etapa estival de 2015 y que después de muchos meses de trabajo por fin ha visto la luz. Es de un proyecto en el que desde el estudio hemos participado tanto en la etapa inicial de planteamiento del mismo como en la definición del diseño y la experiencia de usuario.

Todos los proyectos, todos, tienen particularidades que hay que salvar de la mejor manera posible en la fase de arquitectura de la información (o diseño de la información). Este no fue una excepción y tengo que decir que en esa fase es donde más nos tuvimos que esforzar para seducir a nuestros interlocutores, ya que la complejidad que en el medio y largo plazo podía tener el contenido, hacía por nuestra parte que tuviésemos que plantear el necesario (y honesto) ejercicio de imaginar el proyecto a largo plazo, con el objetivo de alargar la vida útil del diseño.

Por lo demás, nos hemos centrado en proporcionar a nivel de interfaz y de diseño de información los elementos necesarios para satisfacer de la mejor manera posible los objetivos del proyecto. Las dos herramientas principales que hemos utilizado para abordar nuestra colaboración en el proyecto han sido los workshops tanto con el cliente como con el product owner (Lucas Aísa) y el wireframing. Además, por supuesto, de la estrecha colaboración con el resto de perfiles que han trabajado en el mismo: Cristobal Lopez (SEO), José Luis Lizano (visual) y Guillermo Latorre (front).

Detalle de una página de establecimiento

Detalle de una página de establecimiento

Wireframe de trabajo de la página principal

Wireframe de trabajo de la página principal

Wireframe de trabajo de la pantalla de recetas

Wireframe de trabajo de la pantalla de recetas

Wireframe de trabajo del detalle de un establecimiento

Wireframe de trabajo del detalle de un establecimiento

Como siempre, y aunque no seamos los owners del asunto, todo el feedback será bienvenido (y correspondientemente trasladado).