Experiencia de usuario en avisos de cookies

Traemos hoy un tema al blog del estudio que no se suele tratar en nuestra disciplina: los avisos de cookies que deben colocarse por ley en los sitios web para avisar al usuario de que se guardan datos por parte del sitio web para la navegación u otro.

3m-cookies
Aviso de cookies en 3M

En su página, la Comisión Europea proporciona un kit mínimo para cumplir la directiva (hace falta ser usuario registrado 😉 ), que es el que aplican la mayoría de los plugins disponibles para los usuarios finales al implementarlo en un sitio web.

Todos los avisos de cookies son prácticamente iguales, incluso en sitios de marcas o empresas reconocidas.

Os ponemos algunos ejemplos:

ft-cookies-fin
Aviso de cookies en el Financial Times

iberdrola-cookies
Aviso de cookies de Iberdrola

telefonica-cookies
Aviso de cookies de Telefonica

nestle-cookiees
Aviso de cookies de Nestlé España

Como podéis ver los avisos habituales se convierten en un puro trámite, con mensajes monótonos que se limitan a cumplir la ley europea avisando de la instalación de cookies. Y suelen tener una opción para cerrarlos, sea un icono en la esquina superior derecha o en el texto, como el caso de Nestlé..

En nuestra opinión, un aviso de cookies debería tener, como mínimo, un botón que indique que se aceptan las cookies.  Lo que se suele denominar un consentimiento informado. Entre los ejemplos anteriores, Telefónica y 3M son quiénes cumple este requerimiento.

A continuación os vamos a mostrar un par de ejemplos de avisos de cookies con buena experiencia de usuario, uno camuflado bajo un aviso de cookies habitual y otro más cuidado desde el aviso inicial.

Aviso de cookies de Danone

danonees-cookies
Aviso de cookies de Danone España

A primera vista el aviso de cookies de Danone puede parecer otro mensaje anodino totalmente estándar. Pero si lo leemos con atención y hacemos clic en el enlace de configurar las cookies, nos lleva a esta pantalla de configuración:

danonees-cookies-conf
Pop up de configuración del aviso de cookies de Danone España

En un vistazo podemos ver los tipos de cookies que usan en Danone (junto con una explicación corta de cada tipo) y podemos decidir si queremos activarlas o desactivarlas.

El trabajo de experiencia de usuario de Danone con esta pantalla es de una calidad altísima, difícilmente mejorable. En la opinión del que escribe el aviso de cookies y el de configuración sería mejor que estuvieran en un solo aviso, pero podemos suponer que esa opción ha sido barajada y Danone ha preferido tener más datos con los que mejorar su sitio que muchos usuarios desactivando todas las opciones, por miedo a que su privacidad sea invadida.

La opción usada por Danone mejora notablemente la usabilidad, porque da derechos a los usuarios informados para modificar su privacidad, a la vez que no alarma al resto de usuarios.

Aviso de cookies de Oracle e IBM

Las grandes empresas de informática siempre son pioneras en muchos temas, ya que normalmente crean soluciones propias que luego pueden exportar o aplicar a sus clientes. El caso de las cookies es uno de ellos.

Oracle e IBM implementan el mismo tipo de aviso (que parece ser una solución estándar creada por eTrust, una autoridad de certificación de seguridad, aunque no hemos encontrado más información sobre este servicio en su web) que ambas empresas implementan de maneras ligeramente diferentes.

Entre todos los avisos analizados, el aviso de cookies de Oracle e IBM son los que mejor experiencia de usuario tienen. Además, permiten balancear entre la privacidad del usuario y las necesidades de la empresa.

El mecanismo del aviso es:

  1. Pop up de aviso
  2. El usuario puede aceptar las cookies o entrar en la pantalla de configuración.
  3. En la pantalla de configuración se le muestran los tres niveles de privacidad y el usuario elige cuál quiere y los cambios se aplican al guardar.
  4. Se le muestra una pantalla de confirmación del cambio en sus preferencias.

Incluimos algunas capturas de pantalla de los cinco procesos (pop up de aviso, las pantallas de los 3 niveles de privacidad y la de preferencias guardadas). Como se puede ver, ambos procesos son muy similares.

El de Oracle está mejor implementado por su uso de CTAs en lugar de botones similares que utiliza IBM, que confunden al usuario. Especialmente en privacidad baja, Oracle ofrece mejores explicaciones de qué opciones se guardan, dando al usuario más información de qué datos exactamente se guardan con las cookies.

Además, ambos procesos están auditados por una autoridad de certificación reconocida, lo que ofrece mejores garantías al usuario final.

Pop up de aviso

oracle-cookies
Pop up de aviso de Oracle

ibm-cookies
Pop up de aviso de IBM

Privacidad baja

oracle-cookies-conf
Opciones de privacidad baja en Oracle

ibm-cookies-conf
Opciones de privacidad baja en IBM

Privacidad media

oracle-cookies-conf2
Opciones de privacidad media en Oracle

ibm-cookies-conf2
Opciones de privacidad media en IBM

Privacidad alta

oracle-cookies-conf3
Opciones de privacidad alta en Oracle

ibm-cookies-conf3
Opciones de privacidad alta en IBM

Preferencias guardadas

oracle-cookies-pref
Aviso de preferencias guardadas en Oracle

ibm-cookies-pref
Aviso de preferencias guardadas en IBM

Conclusiones

Los avisos de cookies son obligatorios por la legislación europea, y como hemos visto tienden a ser homogéneos. Esto hace que los usuarios los ignoren a no ser que sean usuarios informados a quienes preocupe especialmente su privacidad.

Sin embargo, también hay ejemplos que se toman en serio la experiencia de usuario de estos avisos, demostrando interés en que los usuarios se sientan más seguros y puedan saber qué hace la empresa con sus datos de navegación. En definitiva, generar confianza como base para obtener una relación fuerte con los clientes.

Como siempre si conocéis algún otro sitio que haga una buena implementación de estos avisos, podéis incluirlo en los comentarios.

En Torresburriel Estudio realizamos proyectos de consultoría en diseño de experiencia de usuario para tu producto digital, aplicando metodologías de diseño centrado en el usuario. Contacta con nosotros ahora, y cuéntanos tu proyecto.

Transformar la organización desde el diseño y la UX

El diseño en entornos corporativos ha sido un tema candente en el negocio desde hace más de una década. Sobre todo, desde que David Kelley (IDEO) puso en boga el concepto de ‘design thinking’ o pensamiento de diseño.

Hoy en día, las empresas se esfuerzan por entender cómo abordar e integrar aspectos como la experiencia del usuario (UX), la experiencia del cliente (CX), el diseño de servicios digitales o las prácticas innovadoras. Eso que Jesse James Garrett denominó “la gran convergencia”.

UX Brighton Career Clinic 2014
Equipo en un workshop del UX Brighton. Foto de Danny Hope

Más aún, en los últimos años el interés del mundo empresarial en el diseño se ha intensificado. Empresas como General Electric o IBM están haciendo inversiones importantes en el diseño como elemento estratégico de diferenciación. Como explicaba Jared Spool en su artículo “Making Companies Competitive By Expanding Design’s Role”, estas organizaciones impulsan un cambio sustancial en su sector, ayudando a sus clientes a ofrecer mejores experiencias en sus productos y servicios.

¿Cómo debería ser una organización guiada por el diseño?

La realidad en la mayoría de organizaciones es muy diferente a este escenario donde el diseño es el catalizador del cambio. Muchos equipos UX están todavía obstaculizados sin saber el papel que la experiencia de usuario puede o debe jugar en sus organizaciones.

En una charla en UX London, la analista de Forrester Leah Buley compartió su investigación sobre las diferencias entre una organización que usa el diseño como recurso (o low-impact UX) y una organización guiada por el diseño de UX (lo que denomina high-impact UX).

Una organización donde la experiencia de usuario tiene bajo impacto presenta unas características determinadas, donde UX no juega un papel determinante:

  • Es probable que el equipo de UX no tenga entidad por sí misma y que esté integrado en el equipo de TI, marketing o desarrollo de producto.
  • El trabajo de UX se centra principalmente en los sitios web, marketing y herramientas internas, y se aplica únicamente en canales digitales.
  • Tal vez se hace algo de trabajo de investigación y estrategia, o tal vez no.
  • La UX tiene poco impacto en los requisitos y normas.
  • Los ratios entre diseñadores de UX e ingeniería están por encima de 1:20. Es decir, hay 20 o más ingenieros por cada diseñador de UX.
  • El objetivo de trabajar el área de UX es,  principalmente, reducir costes.

Por contra, una organización de alto impacto, que utiliza el diseño de la experiencia de usuario como catalizador del cambio, tiene unas características bien diferentes:

  • La UX tiene un equipo con entidad propia, y tiene influencia de forma transversal en el diseño y desarrollo de productos y servicios.
  • La UX apoya canales digitales, pero también el diseño de servicios.
  • La investigación y la estrategia son piezas estándar del proceso de experiencia de usuario.
  • La UX resulta determinante a la hora de definir estándares de toma de requisitos, planificación y normas de calidad.
  • Los ratios entre diseñadores de UX e ingeniería están entre 1:3 y 1:10. Es decir, hay un diseñador de UX por cada 3-10 ingenieros.
  • El objetivo de trabajar el área de UX es crear clientes más satisfechos, porque los clientes felices generarán mejores resultados en el negocio.

Para resumir estos niveles de madurez en cuanto a la adopción del diseño en general, y la UX en particular, habla de organizaciones fuera de juego (outdated), que progresan (progressing) y organizaciones consolidadas (modern):

Tipos de organizaciones según su acercamiento al derecho
Estados de madurez de las organizaciones en la adopción del diseño. Diapositiva de Leah Buley. 

Atendiendo a los datos recogidos por Buley solo el 14% de los profesionales de UX consideran que su organización está aprovechando el potencial estratégico que la experiencia de usuario y el diseño podrían tener para su negocio.

Buley defiende que aún queda mucho por hacer para que todos los profesionales de la experiencia del usuario den un paso adelante y aprovechen la oportunidad de liderar esta transición. La mayor parte de los problemas de UX para liderar este proceso son la falta de entendimiento del trabajo de UX en las organizaciones y la implementación parcial de las técnicas de UX en el proceso de diseño de productos y servicios.

Si queréis ver una charla completa de Leah Buley en Interaction15 sobre este tema, podéis verla aquí:

Como explicaba Jared Spool en su artículo, no es suficiente con deleitar a tus clientes directos. Hay que conseguir deleitar a tus empleados, proveedores y clientes directos, pero también a los clientes de tus clientes. Tus métodos de investigación del usuario, casos de uso y escenarios deben ir más allá de tu producto o servicio. En esencia, todos las metodologías y técnicas que utilizas deben ser cuestionadas para adaptarse a esta nueva forma de entender el negocio.

Por tanto, el objetivo no debe ser transformar las organizaciones, sino cambiar de forma sistémica la forma en que todos los equipos (marketing, producto, diseño, ventas) piensan acerca de la creación de sus productos y servicios.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital, con un proyecto de consultoría y acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros ahora, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Proyecto: Campus SEAS (workshops)

Una de las motivaciones de muchos clientes que han repetido con nosotros en el estudio suele estar determinada por la experiencia previa. Queda poco humilde contarlo nada más empezar un post, pero a decir verdad es lo que nos transmiten. No, no pasa siempre, pero cuando pasa nos gusta mucho y nos ponemos muy contentos. La verdad es esa. Toda (la verdad).

En ese sentido hoy os contamos un proyecto en el que hemos colaborado en la fase inicial de conceptualización, y que desde hace unos meses, pocos, está ya en producción y accesible para todo el mundo. Se trata de la web de Campus SEAS.

campus-seas-homeCaptura de pantalla de la web de Campus SEAS

Campus SEAS es un sitio web que tiene un objetivo presente desde el primer momento en el que se visita el mismo: comunicación comercial de tú a tú con un posible cliente (alumno), que es la persona que está visualizando la web. Un sitio en el que se habla de tú a los usuarios y en el que las frases que conducen la navegación se dirigen explícitamente al usuario. Es como si la web hablara en primera persona al usuario.

Más allá del contenido comercial de la web, que no es de lo que os quiero hablar, nuestra participación en el resultado final que se puede ver en www.campusseas.com se encuentra más bien en los inicios. En cómo desde la idea de generar una herramienta que aclare y resuelva las dudas que un potencial alumno de SEAS pueda tener, llevemos a cabo un proceso que nos ayude a perfilar el producto digital.

Así las cosas lo que hicimos cuando se nos planteó el proyecto fue empezar por acotar el alcance del mismo y establecer una pauta metodológica que nos ayudara a descubrir:

  • Cuáles han de ser los contenidos del site
  • Cómo podemos identificar el contenido de valor que hay en la organización
  • Cómo podemos priorizar el contenido de valor que hay en la organización
  • A través de qué discurso vamos a concatenar los contenidos de valor
  • Cómo vamos a decidir el formato de los contenidos

workshop-campus-seas-1Una de las sesiones de trabajo con el equipo

Como veis se trata de un proyecto, con lo que estoy contando (obviamente hay muchos más detalles que no debo comentar), que tiene un punto de complejidad no menor ya que pretende obtener información de valor de una organización y, a través de la implicación de las personas de la misma, pretende realizar esos descubrimientos y tomar decisiones a la hora de establecer las prioridades.

La técnica que desde el estudio propusimos y ejecutamos fue la de desplegar workshops con las personas responsables del proyecto, de áreas y de ámbitos concretos de responsabilidad en el cliente, y a través de procesos de design thinking, co-creación y diseño colaborativo empezamos a visibilizar, ordenar, priorizar y tomar decisiones respecto del discurso o la historia que tenía que contar el producto digital.

workshop-campus-seas-3Una de las sesiones de trabajo con el equipo

Es un proceso que no es corto ni es poco denso. Todo lo contrario: se necesita de la máxima implicación de las personas afectadas por el proyecto para poder visibilizar la información de valor que existe en la organización. Y se necesita, además de la implicación, del compromiso de todas estas personas para poder tomar decisiones que afectarán al producto digital, especialmente en lo relacionado con la priorización.

En cualquier caso el proceso de trabajo nos llevó a diferentes estadios en los que la información de valor fue organizada en torno a los 12 puntos que guían al usuario en la web de Campus SEAS. Y dentro de cada uno de esos 12 estadios, a priorizar, determinar y visibilizar el tipo y formato de información idóneo para cada una.

workshop-campus-seas-2Una de las sesiones de trabajo con el equipo

El resultado final de nuestra participación en el proyecto lo materializamos en prototipos, que fueron desarrollados por otra agencia.

En Torresburriel Estudio trabajamos los procesos de diseño de producto digital para lograr los objetivos definidos junto con nuestros clientes. Si quieres que exploremos la posibilidad de optimizar tu producto digital contacta ahora mismo con nosotros y nos pondremos en contacto para conocer tu proyecto.

Cómo hacer un onboarding eficaz en dispositivos móviles

Una de las microinteracciones que se están imponiendo son las referidas a los procesos de onboarding o de acompañamiento en móviles. La mayoría de estas aplicaciones disponen actualmente de un tutorial que muestra en un overlay y presenta al usuario las principales funcionalidades antes de ver la aplicación, pero ya vimos que puede confundir al usuario si no se implementa correctamente.

Onboarding

Un buen onboarding es esencial en una aplicación móvil, dado su elevado índice de abandono (recordemos que el 95% de la aplicaciones se abandonan o desinstalan después del primer uso). Es decir, el proceso de onboarding incide directamente en que nuestra base de usuarios crezca y los usuarios nos recomienden, o por el contrario nuestra aplicación se ahogue en el mar de aplicaciones de Apple Store o Google Play.

Para ello, os proponemos una serie de recomendaciones con los que mejorar el proceso de onboarding de vuestra aplicación móvil. El listado original está extraído de un artículo de Kishan Gupta, y lo completamos con nuestra experiencia:

  1. Da la bienvenida al usuario: Ser amable con el usuario es importante, ten en cuenta que debes conectar con él lo más rápido posible. Humaniza la primera pantalla de bienvenida para generar complicidad.
  2. Usa un tono de conversación: Intenta usar un tono de conversación cercano y explicativo, pero siempre adecuado al contexto. No es lo mismo un tutorial de onboarding de una app para jóvenes que el de una app de una banca privada.
  3. Muestra los beneficios, no interfaces y funcionalidades: en el onboarding normalmente se tiende a explicar las funcionalidades, “una app con brújula y cuentakilómetros”, en lugar de centrarlo en lo que el usuario ganará con tu aplicación. Por ejemplo, “con esta app no te perderás nunca y sabrás siempre la distancia recorrida”. Los usuarios piensan en el descanso (beneficio), no en la cama (interfaz) que usan para ello.
  4. Simplifica el proceso de registro y pide los datos cuando sea necesario: El proceso de registro o login es uno de los procesos que más se descuida. Simplifícalo al máximo, y hazlo en el momento idóneo. Si eres una app nueva este proceso es esencial.
  5. Muestra una idea por pantalla: si quieres mostrar varias partes de la app o varios procesos que se pueden hacer en ella, muestra uno por pantalla. Lo mismo si quieres mostrar los beneficios.
  6. Muestra explícitamente el avance del usuario: si es un proceso por fases, es fundamental indicar el paso en el que se encuentra o una barra de progreso y el porcentaje de datos. En general, es menos confuso “Paso 2 de 5” que “Has completado el 40% del proceso”. El usuario en el primer caso sabe que le quedan 3 pantallas para acabar, en el segundo tiene que recordar cuántas ha completado y después calcular las restantes.
  7. Haz un onboarding progresivo: muchas aplicaciones quieren enseñar todo al usuario en una sola pantalla para que lo entienda, pero lo mejor es desglosarlo en varias pantallas que vayan mostrando ayuda en función de sus acciones, mostrando las funcionalidades poco a poco.
  8. Permite a los usuarios omitir el proceso de onboarding: muchos usuarios detestan estos procesos, así que permite siempre  omitir el acompañamiento. Un botón “Skip” o “Saltar este paso” es una buena idea.
  9. Utiliza imágenes mejor que texto: si puedes usar una imagen para ilustrar las pantallas o mostrar las funcionalidades, úsala. El cerebro procesa las imágenes antes que los textos.
  10. Elimina los tooltips cuando sea posible: es mejor que las pantallas sean autoexplicativas, así que elimina los tooltips dentro de lo posible en el onboarding.
  11. Personaliza el acompañamiento donde sea posible: es positivo colocar su avatar y su nombre después de que el usuario se haya registrado, dejarle elegir idioma del tutorial, etc.
  12. Permite a los usuarios volver al acompañamiento en cualquier momento: los usuarios que han omitido el onboarding, pueden querer aprender funcionalidades que no han descubierto en el primer uso. Permite volver al tutorial desde algún sitio.
  13. Ofrece a los usuarios ganancias inmediatas: a veces no hace falta mucha explicación cuando se trata de un proceso conocido o una app asentada. Lo importante es que los usuarios consigan lo que quieren en el menor tiempo posible. En la app de Youtube, por ejemplo, los usuarios pueden buscar y ver vídeos nada más empezar.
  14. Integración con herramientas sociales: esto es un arma de doble filo, así que os recomendamos lo utilicéis con cautela. Se trata de poner datos de número de usuarios y descargas de la app y de encontrar amigos que utilicen la app. En principio puede parecer una buena idea, pero corres el riesgo de frustrar al usuario si ninguno de sus amigos o conocidos usa la app.
  15. No muestres los fallos del usuario: unido al punto anterior, para evitar frustrar al usuario hay que evitar mostrar los fallos. Mensajes como “No tienes ningún amigo” no son una buena idea. Utiliza, en cambio, mensajes en positivo como “Invita a tus amigos a conocer la app”.
  16. Contacta con los usuarios proactivamente: otro arma de doble filo, Hay que tener cuidado con el abuso, porque contactar continuamente con el usuario para que utilice tu app puede dar sensación de pesadez. Cuando contactes con los usuarios, la mejor opción suele ser enviar un correo de periodicidad semanal o quincenal, con la actividad de sus contactos.
  17. Explica de manera interactiva: En una app móvil la mejor manera de enseñar a usar una app es mediante la interacción. Explicar con la acción, mejor que poniendo tooltips en los botones. Un ejemplo clásico es la pantalla de desbloqueo de iPhone, con un botón deslizante marcado con “Desliza para desbloquear”.
  18. Estados vacíos: Los estados vacíos los debemos tomar como un desafío y no dejar una pantalla en blanco o con un marcado descuidado diciendo que no hay elementos. Sé creativo y piensa cómo sorprender y agradar al usuario en los estados vacíos.
  19. Contextualiza antes de pedir permiso: si tienes que pedir permiso para algo, intenta antes poner una explicación de las razones. Por ejemplo, la forma de pedir permisos en iPhone acompañado de un buen marcado ayuda a tener una mejor información para que el usuario haga lo que necesitamos.
  20. Felicita a los usuarios por sus logros: una buena manera de motivar a tus usuarios a usar la aplicación, es felicitarlos cuando consigan hacer las primeras acciones. Es decir, gamificar la app. También debes evitar ser repetitivo, cambiando los mensajes para que el usuario no se canse de recibirlos.
  21. Utiliza estadísticas visuales para hacer tests y mejorar: no olvides los tests de usuario. Por ejemplo, en un test que hicimos en el estudio se presentaba un tutorial de onboarding puesto en overlay y prácticamente todos los usuarios lo omitieron sin leerlo. Lo mejor es hacer tests con usuarios de la app, incluyendo también el proceso de onboarding. El mejor test con usuarios para tener datos fiables es el eye tracking, que presenta mapas de calor para saber en qué puntos se fijan los usuarios y con qué intensidad.

Gupta sugiere utilizar estos 21 puntos como una checklist de comprobación, aunque nosotros os recomendamos que es mejor verlo como una lista de recomendaciones porque no todas las aplicaciones para dispositivos móviles deben verificar todos los puntos.

Hemos visto la importancia capital del proceso de onboarding. No sólo a la primera impresión y al tutorial de introducción, sino al resto de acciones en todo el uso habitual de la app. En definitiva, nuestro trabajo de UX es asegurar un acompañamiento completo que ayude al usuario a hacer más usable y más amable la transición en el uso continuo de la aplicación.

En Torresburriel Estudio estamos especializados en diseñar experiencias centradas en los usuarios con independencia del dispositivo. Si trabajas con interfaces móviles podemos ayudarte en la conceptualización o rediseño de tu aplicación. Contacta hoy con nosotros y cuéntanos tu proyecto.

Estrategias multicanal en medios de comunicación

Los cambios tecnológicos en los medios de comunicación es un tema recurrente en los últimos 15 años. Empezó siendo un cierto temor a la desaparición del papel pero el tránsito de lo analógico a la convivencia natural con lo digital, e incluso a lo exclusivamente digital, es ya una realidad tangible. El último caso sonado ha sido The Independent.

New Yorker
Captura de la web del New Yorker

Por supuesto, esa transformación no se explica únicamente desde la tecnología. Fundamentalmente, los medios se están transformando a marchas forzadas porque las audiencias lo hacen y lo piden. Las audiencias van por delante, y se han adaptado al cambio de paradigma tecnológico con más rapidez que los propios medios.

En ese contexto, conseguir una experiencia de usuario homogénea en todos los canales es un asunto capital, porque facilita conseguir el objetivo de que el usuario sea recurrente y se genere un hábito de visita que permita la supervivencia del medio.

Para la gran mayoría de los medios de comunicación, la estrategia multicanal ha sido un tema poco planificado. Se han ido incorporando canales por oleadas, sin una estrategia definida de actuación.  Sin embargo,  las nuevas oportunidades que ofrece la tecnología han permitido a los medios reaccionar para convertir una hipotética amenaza en una gran oportunidad . Una oportunidad, para acercar más contenidos a sus lectores, aumentar la especialización, ser más competitivos en el conocimiento del usuario y dotarles de capacidad para hacerles participar desde diferentes canales.

Dos ejemplos de estrategias multicanal exitosas: BBC y The New Yorker

El mejor ejemplo de multicanalidad es BBC. Con canales de radio, televisión, noticias, servicios en varios idiomas o aplicaciones para dispositivos móviles cubren todo el espectro imaginable. Es un buen ejemplo de estrategia multicanal, pero no muy fácil de emular por su presupuesto. Por ejemplo, solo la versión online de bbc.com tiene un presupuesto anual de 201 millones de libras esterlinas (unos 260 millones de euros). Aún así, puede servir de ejemplo de inspiración para webs de noticias que trabajen audio, video y noticias escritas por su buen hacer.

Otro ejemplo de estrategia multicanal bien interpretada es The New Yorker, el semanario de cultura y actualidad americano por excelencia. Se trata de un medio que, teniendo una edición impresa muy sólida, ha apostado también por adaptarse al medio digital y acercar sus contenidos de calidad a otros lectores. Además también fue pionero en generar ingresos de otras formas como vendiendo portadas y viñetas en la tienda de la web.

Disponen de edición digital e impresa. La edición digital del New Yorker es Mobile Only, se adapta a todo tipo de pantallas. En móvil tiene menú hamburguesa y en tableta y desktop utiliza un menú horizontal donde priorizan las categorías. Un trabajo excelente con 11 categorías principales, además del logo y la caja de búsqueda.

Saben bien que su producto son los contenidos, así que han optado por un diseño muy limpia y sin distracciones, que se puede ver en cualquier dispositivo correctamente. En la web además han incluido contenido adicional y blogs de actualidad con video y audio para seguir de cerca la actualidad. También han producido un programa de radio semanal, “New Yorker Radio Hour”. Esto hace ahora una experiencia que antes era bidimensional y plana se transforme en una experiencia de usuario completa que involucra a varios sentidos.

The New Yorker se ha transformado en los últimos años enormemente y ha dejado de ser una venerable revista para convertirse en un medio de comunicación multicanal. Esta entrevista sobre la transformación digital en The New Yorker con el responsable de su web hace dos años, cuenta cosas que ahora ya son realidad.

Consejos para diseñar una buena estrategia multicanal en medios

Para obtener una buena experiencia multicanal en un medios de comunicación os vamos a dar unas pautas para que podáis mejorar la experiencia:

  • Céntrate en el producto: en un medio de comunicación el contenido es el producto: haz el mejor contenido que puedas y, al final, la reputación y las visitas vendrán solas. Los usuarios saben valorar los buenos contenidos. Si eres un medio de información generalista actualizar la web a lo largo del día ayuda a fidelizar a tus usuarios. Recuerda que el contenido sigue siendo el rey.
  • Lo que hagas, hazlo bien:  Muchos medios de comunicación gastan dinero en apps móviles propias, cuando como ya dijimos en el artículo sobre interfaces conversacionales “ el 95% de las apps se dejan de usar al mes de su descarga y, básicamente, el 75% del tiempo de nuestro uso se limita a cuatro o cinco aplicaciones móviles”. Normalmente es mejor tener una buena web móvil que funcione bien en todas las plataformas, que una web y una app y que ninguna de las dos funcione al 100%. Lo mismo es aplicable a redes sociales, es necesario buscar nuevas formas de conectar con tus usuarios a través de ellas. Avanza poco a poco y utiliza las redes donde estén tus usuarios potenciales.Nada mejor que mirar los referers de analítica, para tener información de primera mano.
  • Cuida a tus lectores: si tus lectores son los que traen ingresos, molestarlos con publicidad intrusica no parece la mejor idea porque les impide leer el contenido.  Además, abusar de anuncios con audio sin avisar o los vídeos autorreproducibles en webs para móvil, no consiguen una buena experiencia de usuario ni conseguirán más tráfico. Busca maneras de rentabilizar tu sitio sin que tus usuarios se sientan incómodos. Crear una buena experiencia en el usuario es fundamental para que vuelva y siga consumiendo tus contenidos. Los usuarios de dispositivos móviles consumen más contenidos, según un estudio propio que cita el presidente del New York Times.
  • Construye una experiencia homogénea: una buena manera de construir una buena experiencia de usuario en multicanal es combinar y equilibrar los canales de una manera correcta. Si eres un periódico e imprimes una noticia en papel, pero dispones de información adicional sobre ella (una galería de fotos, la entrevista completa que la has tenido que recortar, vídeos o audios sobre ella), pon un código QR y un enlace corto con la url donde esté el contenido en tu web para que tus usuarios puedan visitarla y tener esa información estén en un dispositivo móvil o en el escritorio.
    Si eres un programa de televisión, no olvides anunciar la URL donde cuelgas los programas completos o el hashtag con el que quieres que tuiteen el programa. Todo esto te ayudará a conseguir nuevos espectadores o saber el alcance que ha tenido el programa y las opiniones de tus usuarios en directo. Piensa en formar de combinar los diferentes canales de manera que se genere una experiencia placentera que conecte con el usuario.
  • Cumple tu estrategia de contenidos: un medio de comunicación tiene que tener una estrategia global de contenidos y cómo se debe aplicar en cada caso. En el caso de los medios escritos es el libro de estilo. En contextos digitales también debe haber una estrategia de contenidos coherente con el resto de canales.
  • Piensa en los vídeos y en su contexto: si elaboras vídeos, hazlos bien.  Si van dirigidos a redes sociales, subtitula o pon frases cortas que expliquen lo resuman lo que están viendo. Por supuesto, cuánto más cortos mejor. Según un estudio el 85% de los vídeos se reproducen en silencio en Facebook. Por tanto, piensa en el contexto. Capta la atención de los usuarios en los primeros segundos. Inspírate en el cine mudo si hace falta.
  • Haz productos con tu marca: si eres un medio consolidado, una manera de mejorar los ingresos es diseñar nuevos productos. Si eres un periódico centenario, una buena manera de hacer esto es hacer reproducciones de la portada del día de nacimiento para regalar. También puedes elaborar merchandising con tu marca, de manera que la gente haga publicidad de tu marca. Otra buena estrategia es hacer especiales en papel con contenidos que no estén en digital como hace Jot Down.

En Torresburriel Estudio te ayudamos a elaborar una experiencia de usuario homogénea y adecuada a tus usuarios en diferentes canales. Ponte en contacto con nosotros, cuéntanos tu proyecto y hablamos.

Patrones y plantillas en fases tempranas de diseño

Cuando estamos en una etapa temprana del diseño y desarrollo de un producto digital, los cambios se suceden con rapidez. Los motivos pueden ser diversos. Es muy común que las prioridades cambien porque la investigación de usuarios y el uso de datos de uso, nos hagan modificar nuestra idea inicial. Por ejemplo, si pretendes diseñar una app para iPhone y al investigar te das cuenta que la mayor parte de tus usuarios potenciales utilizan Android. Otro motivo puede ser la continua evolución del mercado, que nos obliga a adaptar los nuevos proyectos a esos cambios.

Tipologías de usuarios
Plantilla para hacer tipologías de usuarios

Durante estas etapas tempranas de desarrollo de un producto o servicio digital, en el estudio recomendamos utilizar prototipos en papel. Tienen una serie de ventajas que ya hemos comentado anteriormente. Facilitan una rápida iteración, cuesta muy poco diseñarlos y desecharlos, y permite una mayor libertad a los diseñadores. Por supuesto, la curva de aprendizaje es mucho menor que las herramientas software de prototipado, porque podemos diseñar en muy poco tiempo.

Sin embargo, en muchas ocasiones el prototipado en papel no es una opción. A veces, porque el cliente tiene una metodología de trabajo donde es reacio a utilizarlas. En otras ocasiones, porque el proyecto tiene un ámbito de aplicación amplio que hace al prototipado en papel muy poco adecuado. Pensemos, por ejemplo, en un proyecto que tenga una parte de diseño para web, y aplicaciones para iPhone, iPad y Android. En esas condiciones, existe tanta variabilidad en el proyecto que debemos utilizar otros recursos.

Usando patrones y plantillas de presentación

En los casos donde el prototipado en papel no es una opción, recomendamos usar patrones de diseño y plantillas para presentaciones. El objetivo sigue siendo presentar nuestro trabajo de la forma más eficaz posible.

Un patrón describe una situación que ocurre de forma recurrente en nuestro contexto, y propone una solución de diseño a ese problema. De esa forma, esa solución puede ser usada múltiples veces.

Hemos hablado en otras ocasiones del uso de patrones en diseño de interacción, de modelos de patrones de pantalla, de librerías de patrones como el caso de Yahoo

Hay cientos de librerías de patrones de diseño que pueden ayudarnos en nuestro trabajo de experiencia de usuario. Desde librerías de diseño de interacción para diferentes plataformas a librerías especializadas en patrones de diseño para dispositivos móviles. Con estas plantillas, el cliente consigue una visión mucho más alineada con el producto final, más cercana a la realidad que los prototipos en papel.

Por poner un ejemplo que puede sustituir de forma eficaz al prototipado en papel en muchas ocasiones, en Keynotopia han publicado una serie de plantillas Keynote y Powerpoint que para armar propuestas de diseño para productos digitales. Incluyen prácticamente todos los sistemas operativos disponibles y formatos (iPad, iPhone, Android, Blackberry, OS X, Windows, Web, jQuery…). Incluso permiten realizar el trabajo puro de diseño de UX, con la elaboración de perfiles de personas, describir tipologías de usuario, diseñar user journeys y otras técnicas.

El proceso para la realización de prototipos puede ser una tarea compleja si no tenemos las herramientas adecuadas, pero un paquete de plantillas puede acelerar ese proceso de diseño. Nos permiten prototipar de forma rápida y barata como en papel, pero evitamos aprender el uso de aplicaciones de diseño más complejas.

Todo esto ayuda a realizar presentaciones más eficaces y convertir esas mismas presentaciones en entregables. Entregables que se puede enviar al cliente una vez finalizada una sesión de trabajo o al equipo de proyecto para que puedan opinar y puedan hacer cambios o sugerir mejoras.

Como veis, mejoramos la eficacia de nuestro trabajo porque nos ayuda a evitar trabajo duplicado, a la que que realizar iteraciones rápidas y avanzar a la siguiente fase del trabajo, con todas las mejoras y el feedback del equipo de trabajo del proyecto al completo. Además, el diseñador de UX consigue una gran ventaja: la preparación e implementación de sus propios patrones a partir de librerías permite sistematizar tu proceso de trabajo.

Por supuesto, como recomendación general, es muy conveniente no asimilar las pautas de diseño de cada plataforma como dogma de fe. Como diseñadores de UX, nuestro trabajo es interpretar esas pautas y presentar un diseño que resuelva un problema específico en un contexto determinado. No hay soluciones estándar… y está bien que así sea.

En Torresburriel Estudio trabajamos para mejorar el diseño de experiencia de usuario de tu producto digital y ayudarte a aplicar metodologías de diseño centrado en el usuario. Si quieres trabajar con nosotros, contáctanos ahora, cuéntanos tu proyecto y te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Players de plataformas de vídeo

Las plataformas de vídeo son actualmente una de los productos digitales más demandados. Plataformas como Youtube o Vimeo, se han convertido en sitios donde los creadores promocionan o venden (ambos ya han puesto contenidos de pago) contenidos audiovisuales.

En una plataforma de vídeo la experiencia de usuario es algo crítico. Los usuarios esperan que un vídeo se reproduzca sin parones en toda su extensión. A nivel de sistemas y de CPDs (Centro de Procesamiento de Datos), las plataformas de contenidos multimedia, ya sea un servicio de streaming de audio, una plataforma de vídeos o similares es uno de los sistemas más complejos posibles junto con los de las compañías de transporte de viajeros o los grandes bancos.

A nivel de conexión de red, la disponibilidad y el uso de ancho de banda es un reto importante. Si una película de 2 horas en una calidad no muy buena, ocupa unos 800 MB, un vídeo en HD como los que hay en Youtube para promoción musical de artistas por los millones de visionados, necesitan unas infraestructuras gigantes, casi inconcebibles incluso para gente que trabajamos en el ámbito tecnológico.

Dentro de las plataformas de vídeo, además de Youtube y Vimeo, podemos encontrar otras especializadas en contenidos para adultos como Pornhub, Xhamster o Youporn.

Las plataformas de vídeo son muy celosas acerca de dar datos sobre los sistemas que usan, los usos de ancho de banda, etc. y a este respecto la única información que conocemos es una charla de Youporn.

Os detallo alguno de los datos que ellos aportaban:

  • 100 millones de páginas vistas al día en 2008
  • 300.000 peticiones por segundo
  • 100 Gb/s de ancho de banda
  • 8-15 GB de logs con los datos de conexión por hora

A mí me parecen espectaculares. La charla es de 2012, por lo que los datos actuales entendemos que serán superiores.

Unos sistemas de calidad son la base de una buena UX, siempre. Los sistemas suelen ser un apartado que siempre se olvida para obtener una buena experiencia de usuario, salvo en aplicaciones críticas.

Vamos a comparar los reproductores de las diferentes plataformas. Hemos elegido las dos plataformas generalistas (Youtube y Vimeo) y tres plataformas de contenido para adultos (Youporn, Pornhub y Xhamster).

Reproductor de Youtube

youtube
Reproductor de Youtube

Youtube es la plataforma de vídeo más conocida de todas. Tiene un reproductor muy sencillo:

  • Un botón de Play/Pause
  • un botón de siguiente elemento si es una lista
  • un botón para regular el sonido
  • Tiempo actual/Duración del vídeo
  • si hay subtítulos un botón que pone CC (no es el caso)
  • un botón de ajustes del vídeo donde podemos elegir:
    • la calidad
    • si se muestran o no las anotaciones,
    • tipo de reproducción
  • un botón en el que se elige entre Modo Cine/Vista predeterminada
  • el botón de Pantalla Completa.

El reproductor es minimalista con las opciones justas y necesarias, usando iconos altamente reconocibles por todo el mundo, salvo posiblemente los de cambiar el Modo y el de pantalla completa.

Youtube saca todo lo accesorio del reproductor, las opciones  de compartir e insertar están debajo del reproductor. Tienen una visión concreta de su reproductor ideal, que sólo sirva para ver vídeos y que sea entendible por todo el mundo. Cualquiera, por el éxito que tiene Youtube, sabe que esto es cierto.

Reproductor de Vimeo

vimeo
Reproductor de Vimeo

Vimeo es una plataforma que va más dirigida a creadores profesionales y a vídeo de calidad. Es generalista pero se diferencia de Youtube desde sus inicios.

Vimeo integra más opciones en el reproductor que Youtube. Vimeo tiene 5 botones en la barra del reproductor:

  • Play/Pause
  • Barra del tiempo
  • Volúmen de sonido
  • Calidad del Vídeo
  • Pantalla Completa

Optan por una barra de reproducción minimalista y que contraste, lo cual ha contribuido a que Vimeo tenga una buena experiencia de usuario. Además en Vimeo, al estar dirigido a un mercado profesional, la calidad de los vídeos suele ser mayor y sus sistemas van en consonancia. En Vimeo si tienes una conexión buena la experiencia de usuario suele ser muy satisfactoria.

Vimeo añade 3 botones al reproductor: el de decir Me gusta, el de Reproducir más tarde y el de Compartir. Esto le aporta un componente de fidelización, ya que provoca que el usuario pueda realizar las opciones más usuales de la plataforma sin salir del reproductor.

Reproductor de Youporn

youporn
Reproductor de Youporn

Youporn es la plataforma de vídeos para adultos que hemos comentado al principio. El reproductor es casi igual al de Youtube (con los mismos botones en el mismo orden) salvo la opción Menú que es propia de las plataformas de adultos.

Youporn ha intentado trasladar la experiencia de Youtube a las plataformas de vídeo para adultos y que el usuario no tenga que pensar, sepa usar la plataforma al instante porque ya tiene unos hábitos hechos de ver Youtube y no los modifica.

youporn-menu
Menu del reproductor de Youporn

Me voy a centrar en el menú que es algo propio de los reproductores de vídeo para adultos y que es algo interesante, porque crea un ecosistema propio. Las tres plataformas para adultos lo tienen.

El menú muestra vídeos divididos en 4 tipos: Related (relacionados), Top rated (mejor valorados), Most Viewed (más vistos), More From This User (más de este usuario).

Pensemos un poco: un usuario de una plataforma de vídeos para adultos suele tener unos gustos (los que sean) que se reflejan en las búsquedas de vídeos, por lo que mostrarle vídeos relacionados tiene mucho sentido, y además puede querer ver los vídeos que mejor estén valorados y los vídeos más vistos por los usuarios de Youporn.

Las pestaña “Más de este usuario” puede despistar pero si pensamos un poco, hay usuarios ya sean estas personas o productoras de contenidos para adultos que suben contenidos para Youporn. Los usuarios sean del tipo que sean se suelen especializar en un tipo de vídeo para adultos, por lo que ver más vídeos del mismo usuario, muestra o vídeos de una determinada productora o de un usuario, de tal forma que si le ha gustado el vídeo que ha visto o está viendo, probablemente haya un alto grado de posibilidad de que el resto también le guste y por lo tanto se mejore de ese modo la satisfacción del usuario.

En definitiva, el menú ayuda a los usuarios a encontrar más contenido que les pueda interesar sin tener que pensar en nuevas búsquedas, lo cual mejora la experiencia de usuario de Youporn, y sirve para fidelizar a los usuarios.

Reproductor de Pornhub

 

pornhub
Reproductor de Pornhub

pornhub-menu
Menú del reproductor de Pornhub

El reproductor de Youporn y Pornhub es el mismo, salvo por el botón Compartir, que constituye la misma diferencia entre Youtube y Vimeo.

Al pulsar el botón compartir se muestra una capa con las opciones sociales disponibles para el usuario, colocadas de una manera similar a Youtube, como se puede ver en la imagen de abajo:

pornhub-share
Menú Share(Compartir) del reproductor de Pornhub

Las redes sociales son: Twitter, Reddit, Tumblr, Google Plus, Stumble Upon y Blogger.

Reproductor de Xhamster

xhamster
Reproductor de Xhamster

La barra del reproductor de Xhamster es igual a las de Youporn y Pornhub. Le han añadido dos botones de compartir en Twitter y en Reddit, y otro de compartir en redes sociales que lleva al usuario a un overlay como este:

xhamster-share
Menú Share(Compartir) del reproductor de Xhamster

En esta pantalla se puede compartir la url del vídeo (incluyendo la posibilidad de que se inicie la reproducción desde un punto en concreto). Las redes sociales en las que se puede compartir son las mismas que en Pornhub: Reddit, Twitter, Google Plus, Blogger, StumbleUpon, Tumblr. Añaden a esas 6, Delicious.

xhamster-menu
Menú del reproductor de Xhamster

Las 3 pestañas que aparecen al pulsar en menú son Top Rated (Mejor Valorados), More From This User (Más de este usuario), Related (Relacionado). Estas tres pestañas muestran a los usuarios contenidos sin tener que hacer búsquedas, lo cual hace a las plataformas de vídeo para adultos más compasivas que las plataforma de vídeo generalistas, porque normalmente los usuarios de este tipo de plataformas tienen unas necesidades que necesitan saciar de forma rápida. Además al lado les aparece la pestaña Share (Compartir) que ayuda a los usuarios a compartir fácilmente los contenidos que les gustan.

Conclusiones

Las plataformas de vídeo generalistas tienen unos reproductores cuya finalidad es tener el mejor reproductor disponible y que sea entendido por todo el mundo.

Las plataformas de vídeo para adultos además de tener esos objetivos, también quieren crear una necesidad en el usuario de que vuelva a entrar en la plataforma. La manera que tienen de generar un hábito en ellos, es intentando que los usuarios permanezcan en el sitio viendo vídeos el mayor tiempo posible, lo cual en el caso de contenidos para adultos no suele ser un tiempo extenso, unos 9 minutos y 20 segundos y 9 paginas de media según Pornhub Insights.

En el caso de las plataformas de vídeo para adultos, se ayudan del diseño compasivo para ayudar a sus usuarios a conseguir saciar sus necesidades cuando entran al sitio.

El que escribe esto piensa que, más allá de repudiar a las plataformas de vídeos para adultos, hay que fijarse en lo que hacen bien, es decir cumplir los objetivos que sus usuarios buscan y saciar sus necesidades, que en definitiva deberían ser los objetivos de cualquier proyecto de experiencia de usuario.

En Torresburriel Estudio diseñamos todo tipo de productos digitales con la metodología del diseño centrado en el usuario. Contáctanos ahora, cuéntanos tu proyecto y te enviaremos una propuesta adaptada a tus necesidades.

Investigación etnográfica de cine

Hoy vamos a a hacer otra investigación etnográfica. En este caso sobre cine, no relativamente lejos del estudio tenemos dos cines: el Palafox y el Cervantes, pertenecientes ambos a Cines Palafox, que también gestiona los cines de Aragonia.

Cartelera de la web de Cines Palafox
Cartelera en la web de cines Palafox

En ambos puedes comprar la entrada tanto por internet como en taquilla. En los Palafox además hay dos máquinas de venta de entradas donde puedes comprarlas sin pasar por taquilla pagando con tarjeta. Dejando la taquilla para la gente que ni tiene tarjeta ni internet.

El Cervantes tiene películas minoritarias, cine de autor y en versión original por lo que no suele haber muchas colas para entrar a no ser minutos antes de la sesión. También estrenan óperas en directo y en diferido, que tienen bastante público fiel que va a la sala para verlas.

El Palafox es un multicine generalista que un día de afluencia como puede ser un viernes o un sábado por la noche o el día del espectador por la tarde puede tener cola tanto en la taquilla, como en las dos máquinas de venta de tarjetas. Llegando a solaparse la cola de la taquilla, la de entrada a los cines y la de las máquinas y saturando la parte delantera del recinto.

Vamos a hacer unos arquetipos y unos user journeys (itinerarios de los usuarios) con lo que hemos observado de unas visitas a los cines.

Arquetipos y user journeys de los usuarios

Arquetipos

Los arquetipos (personas) de los usuarios que hemos elaborado son muy simples (por no extender el post demasiado), pero se pueden complicar y añadir más datos de tipo demográfico y una foto, que suele ser lo habitual en un proceso de investigación con usuarios en el que se usen personas y user journeys.

Usuario 1

Ana. 32 años. Usuaria ocasional del cine. Va al cine una vez al mes, cuando le recomiendan una película. Compra la entrada por internet.

Usuario 2

Pepe. 67 años. Usuario fiel del cine. Va todas las semanas, ya que está jubilado y con una buena pensión que permite ir varias veces al cine. Compra la entrada siempre en la máquina de venta de entradas con su tarjeta de débito, ya que le sale al mismo precio que comprarla por internet  y así no tiene que decirle a su hija que se las compre, ya que él no se fía de meter la tarjeta en internet.

Usuario 3

María. 17 años. Usuaria ocasional del cine. Va con sus amigos a ver alguna película una vez al mes. No tiene tarjeta ni ella ni sus amigos así que van siempre a la taquilla.

Usuario 4

Mariano. 52 años. Usuario ocasional del cine. Mariano es un cinéfilo, aunque por tiempo no va mucho al cine, ya que es autónomo y trabaja bastante, además es abonado a una plataforma de pago con canales de cine y se alquila pelis en streaming en su casa. Sólo va a ver películas no muy comerciales, porque las comerciales las puede conseguir ver por otros canales.

Escenarios

Hemos elaborado 2 escenarios diferentes y cuál sería el itinerario de los usuarios en cada uno de ellos.

Escenario 1

Día del espectador (miércoles). 20h. Cine con bastante público.

Usuario 1

Ana ha comprado su entrada de cine por internet. Ya que sabe, que quiere ver “Dos buenos tipos” porque se la ha recomendado una amiga que le gustó y como el día del espectador sabe que suele haber cola en el Palafox la compra en la web. Entra en la web de los cines, mira la cartelera y elige la sesión del Palafox, compra la entrada con comodidad, ya que no hace falta registrarse como en otra webs, sólo meter los datos de la tarjeta y te envían al correo el código QR con el que enseñas el móvil y te lo pasan por el lector a la entrada. Como es el día del espectador y Ana ha llegado con poca antelación, le toca esperar un poco de cola. Como va sola, mira las redes sociales en su móvil mientras espera.

Usuario 2

Pepe quiere ir a ver  “Rumbos”, una peli española que se estrena esta semana. Como va a ir con un amigo a verla y no les gusta esperar en la máquina se van una hora antes, compran las entradas en la máquina y después se van a tomar algo, para llegar con 15 minutos de antelación a la entrada y no esperar mucho en la cola.

Usuario 3

María va a ver Warcraft con sus amigos el día del espectador para que les salga más barato. Ya que no pueden comprar la entrada ni por internet ni en la máquina del cine al no tener ninguno tarjeta. Quedan media hora antes en la puerta del cine, pero alguno llega tarde y tienen que esperar bastante fila en la taquilla, ya que hay mucha gente para comprar la entrada aunque desde que han puesto las máquinas e internet suele ir más rápido que hace dos años cuando empezó a ir al cine con 15. Tienen que esperar bastante fila para entrar al cine, pero como van juntos no les importan las colas ya que van hablando sin parar de Warcraft y de sus batallas en World of Warcraft al que juegan por internet en grupo. Mientras esperan tiene que salir personal de la sala a ordenar las colas, ya que se han juntado, la de taquilla con la de entrada al cine.

Usuario 4

Mariano va a ir al Cervantes a ver la peli francesa que ponen esta semana “Un doctor en la campiña”, que ha leído muy buenas críticas sobre ella, en revistas de cine y por internet. Como sabe que en el Cervantes no hay máquina, ni suele haber mucha gente, va a la taquilla media hora antes, después de esperar a las dos personas que tiene delante, compra su entrada. Como en el Cervantes va todo el mundo con entrada salvo alguno que la compra por internet, si hay cola suele ir rápido en cuanto abren las puertas para entrar. En este caso tenía 8 personas delante y ha esperado unos 4 minutos.

Escenario 2

Martes. 17h. Cine con poca afluencia.

Usuario 1

Ana hace lo mismo que en el escenario 1 para comprar la entrada por internet, ya que siempre la compra por internet, no espera cola para entrar ya que en la primera sesión de un martes no hay casi nadie en el cine.

Usuario 2

Pepe queda con su amigo a echar un café a las 16h. Veinte minutos antes de la sesión se acercan a comprar su entrada para “Rumbos”, como es martes no hay cola en la máquina y la compran. Entran sin dificultades en el cine y mientras empieza la película comentan que el menú de la máquina para elegir película es demasiado largo ya que salen todos los carteles de las películas y tiene varias páginas por ello, y ellos no se manejan muy bien con las pantallas táctiles no como los jóvenes que llegan y lo hacen enseguida, preferirían una pantalla menos visual pero con todo en una pantalla solamente.

Usuario 3

María no iría un martes al cine porque es demasiado caro para lo que se puede permitir con su paga semanal, al igual que sus amigos. Siempre van el día del espectador para que le salga más barato.

Usuario 4

Mariano al ser martes y un día que en el Palafox no hay mucha gente como un miércoles o el fin de semana, decide que esta semana va a ir allí, ya que hoy ha acabado antes de trabajar y quiere relajarse yendo al cine. Mira la cartelera en el periódico mientras come y ve que está todavía “Idol”, la peli que cuenta la historia de un muchacho palestino que cantó en la versión árabe de Operación Triunfo después de escaparse de Gaza, que cree le gustará por el trailer que ha visto en otras sesiones. Así que va a la máquina, 15 minutos antes, compra su entrada con su tarjeta, encuentra dificultades para ver la película que quiere entre tantas películas, pero la compra al final y se dirige a la entrada. No hay mucha cola, dos personas, por lo que entra sin dificultades.

Comentarios del observador

Al usar la compra de entradas por internet el proceso de compra es bastante fácil y sencillo por el uso de CTAs, además tiene la ventaja de ser más barato que por taquilla y no hace falta registrarse como usuario para comprar entradas. La página de cartelera de los cines puede confundir por el color negro y la falta de separación entre una película y otra a los usuarios no habituados a ella. La web que usa es Reservaentradas.

La máquinas de venta de los Palafox para elegir película, tienes que navegar por varias pantallas hasta que encuentras la que quieres, ya que lo muestran de una manera visual en lugar de una tabla con las películas ordenadas alfabéticamente, lo que confunde a los usuarios hasta que consigue darse cuenta de que va por páginas y hay que darle a la flechas para navegar por ellas.

Esto es otro ejercicio de investigación etnográfica, de otro tipo que el de los kioscos electrónicos, en el que lo observado lo pasamos a unos usuarios arquetipo (personas) y elaboramos unos user journeys (itinerario del usuario) que nos ayude a comprender la experiencia que éste tiene al usar un servicio. Este ejercicio es muy bueno para comprender las frustraciones de los usuarios y los problemas reales (las colas que se forman en un cine) y ver cómo se pueden solucionar y mejorar la experiencia de usuario del cliente en un medio como un cine donde se juntan varios canales: venta online, venta mediante kioscos electrónicos y venta en taquilla.

En Torresburriel Estudio hacemos investigación con usuarios, entre las que se incluyen técnicas como la creación de personas, los user journeys, la investigación etnográfica y las entrevistas. Si quieres que te ayudemos a elaborar un proceso de investigación de usuarios para el lanzamiento de un producto digital o para mejorar uno ya existente, contáctanos y cuéntanos tu proyecto y los objetivos que quieres conseguir con la investigación de usuarios, y te mandaremos una propuesta adaptada a tus necesidades.

Susan Kare, la diseñadora de iconos y de tipografías del primer Macintosh

Seguimos con la serie de diseñadores, hoy os vamos a traer un artículo sobre una mujer diseñadora que a pesar de su excelente trabajo en casi todos sistemas operativos (ha hecho cosas en Mac OS, Windows y Linux), es muy poco conocida en el ámbito hispano (salvo para los maqueros de toda la vida y algún diseñador de interfaces). Su nombre es Susan Kare. En el ámbito anglosajón del diseño por suerte, es conocida más ampliamente por sus iconos para el Macintosh y los diseños de las cartas del Solitario de Windows 3.11 (que fueron las mismas hasta Windows XP) y han estado expuestos sus iconos en el MoMA.

Welcome to Macintosh
Pantalla de inicio de Macintosh con tipografía Chicago

¿Quién no ha usado un Macintosh de los primeros? ¿Quién no dio sus primeros pasos en la informática con Windows 3.11? ¿Quién no ha jugado al Solitario o usado el Bloc de Notas en Windows? A pesar de haber hecho un trabajo excelente y usado por millones de personas en todo el mundo, a pesar de ser la que introdujo la tipografía y el diseño humanizado en el Macintosh y en Windows, es desconocida para el gran público. Por todo ello, le dedicamos hoy un artículo, para visualizar a las mujeres que hacen un gran trabajo de diseño y han contribuido a la mejora de la informática para poder ser usada por todas las personas y Susan Kare es una de las pioneras en el diseño centrado en el usuario en el diseño de interfaces de usuario.

Susan Kare nació en 1954, es diseñadora gráfica y de tipografías, y entró a trabajar en Apple cuando le llamó un antiguo compañero. Para el primer Macintosh diseñó los iconos y las tipografías como Chicago (un excelente trabajo que posteriormente sería usado en las primeras versiones del iPod cuando necesitaban una fuente pixelada de alta legibilidad). Iconos como el Mac Feliz, la bomba para indicar que había un fallo grave del sistema, el perro-vaca (DogCow en inglés).

Susan usaba un método tan sencillo como efectivo para diseñar los iconos, se hacía cuadrículas de 32×32 en papel cuadriculado, las pintaba de negro (u otro color) y luego las pasaba al ordenador el diseño que había hecho en papel. Si quieres ejemplos, en esta noticia sobre la adquisición de sus bocetos para el Macintosh por el MoMA de Nueva York tienes varios ejemplos de sus prototipos en papel de los iconos.

Muchas veces se cita también el ejemplo de Steve Jobs en su charla a estudiantes de Stanford como ejemplo de cómo Apple triunfó en el mundo del diseño gráfico y las artes gráficas por su superioridad en el uso de tipografías, pero obviando que alguien tuvo que implementar las ideas de Jobs en forma de diseños, en este caso diseños tipográficos. Y ahí la gran olvidada es Susan Kare que se encargó de diseñar varias tipografías con nombres de ciudades: Chicago, Geneva, San Francisco, Monaco, New York… Con varios estilos, con remate y sin él, serios o desenfadados, e incluso una tipografía sólo de iconos. Susan Kare permitió a Apple tener un set de fuentes con el que demostrar que el Macintosh podía ser un ordenador para las artes gráficas y abrirse paso en un mercado que fue su nicho principal (y principal mercado) hasta el lanzamiento del primer iMac y el primer iPod.

Después de Apple, se fue con Jobs a NeXT donde trabajó de jefa de diseño en los primeros tiempos de la empresa, y posteriormente se estableció como diseñadora gráfica por su cuenta trabajando para todo tipo de corporaciones como IBM o Microsoft.

Kare trabajó para Microsoft diseñando la baraja del Solitario y los iconos del Bloc de Notas. Casi todo el mundo que ha aprendido a usar un ordenador con Windows en los años 90, lo primero que se le enseñaba para que aprendiesen los movimientos del ratón (especialmente arrastrar y soltar) era a jugar al solitario, por lo que los diseños de Kare han servido para acercar la informática a un gran número de personas, aunque ellas ni supieran de Susan Kare. El Bloc de Notas de Windows ha permanecido casi invariable desde que Susan hizo sus diseños hasta Windows XP, por lo que seguro lo has usado en alguna ocasión.

Kare siempre ha tratado de humanizar los ordenadores y las interfaces de usuario (el actual icono del Finder es un homenaje a ella y a sus iconos). Para Linux ha trabajado haciendo para Eazel los iconos del navegador de archivos Nautilus, uno de los mejores para este sistema operativo que posteriormente fue liberado y forma parte del sistema Gnome.

Hace unos meses, fue contratada por Pinterest para su equipo de diseño. Por lo que seguro seguirá aportando un toque humano a los productos digitales y a los iconos de Pinterest.

Para acabar os dejamos con algunos vídeos, desafortunadamente todos en inglés :( y su página donde podéis ver todo su trabajo.

Vídeos de Susan Kare


Conferencia de Susan Kare donde resume su carrera y sus intentos de humanizar los ordenadores en 20 minutos


Susan Kare en una entrevista en 1984 en Computer Chronicles, un programa sobre ordenadores personales en la PBS estadounidense. Va junto a un Diseñador de Producto de Apple 😉 El programa entero es muy interesante, trata de interacción computador-persona y de ergonomía, las bases de nuestra disciplina, pero la reproducción empieza en la entrevista.

Anuncio de Apple del primer Macintosh con Susan Kare vendiendo las bondades para los diseñadores que tenía.

Entrevista en CNN sobre los primeros iconos del Macintosh

La web electoral con la mejor UX edición 26J

Llegan unas nuevas elecciones y volvemos a analizar las webs de los 5 grandes partidos que analicemos en diciembre de 2015. Para ello vamos a usar los mismos métodos que en diciembre y la misma baremación, para poder hacer una comparativa de qué partidos han mejorado y cuáles no.

Analizaremos las 5 webs de diciembre porque aunque dos de los partidos están en la misma coalición (Podemos e Izquierda Unida están en Unidos Podemos), no hay una web única de la coalición, si no dos diferentes, así que las analizaremos por separado cada una.

Mesa electoral
Foto de SCCALP

Metodología

Usamos la misma que en el de diciembre de 2015 para poder comparar resultados al final:

Hemos analizado tres cosas: un test de usuario simplificado donde se le dan unas tareas de usuario y se ve el resultado que un usuario tendría en la web al hacerlas (si es que se pueden hacer), cómo se ve la web en diferentes dispositivos (lo que se llama ahora una web responsive) y la ordenación de contenidos de la web (la arquitectura de la información clásica).

Las tareas propuestas son:

  1. Busca el candidato de la provincia de Zaragoza.
  2. Busca la lista completa de la provincia de Zaragoza.
  3. Descarga el programa completo de la formación.
  4. Busca la parte de empleo del programa de la formación en la web.
  5. Busca los actos de la formación en los próximos días.
  6. Eres un usuario de Cataluña, Valencia, Baleares, Galicia, Euskadi o Navarra que habla una lengua co-oficial en tu comunidad y quieres consultar el programa, la web o la agenda en tu idioma.
  7. Quiero acceder a las redes sociales del partido o de los candidatos desde la web.
  8. Calidad del buscador de la web, si lo hay.

Para evaluar si la web es responsive, hemos usado una web (http://www.responsinator.com) que te muestra la web como se vería en varios dispositivos y en posición horizontal y vertical, incluyendo los dispositivos móviles más usuales y con varias resoluciones (incluyendo los dispositivos Android de baja resolución y bajo coste que usa mucha gente todavía y de los cuales a veces nos olvidamos), además de permitir una mínima interacción que te permita ver la web en cada dispositivo.

Para la ordenación de contenidos, hemos mirado si la web es coherente y son fácilmente accesibles las cuatro cosas básicas (candidaturas, programa, agenda y las redes sociales) y si hay una coherencia en la ordenación del programa o de la ordenación territorial.

En total, hemos dado un punto a cada tarea, dos puntos a cada una de las dos partes, en total 12 puntos.

Web electoral del PP

Web

Partido Popular (PP). Tareas

Puntos

1 – Busca el candidato de la provincia de Zaragoza

1

2 – Busca la lista completa de la provincia de Zaragoza

1

3 – Descarga el programa completo de la formación

1

4 – Busca la parte de empleo del programa de la formación en la web

1

5 – Busca los actos de la formación en los próximos días

0

6 – Eres un usuario de Cataluña, Valencia, Baleares, Galicia, Euskadi o Navarra que habla una lengua co-oficial en tu comunidad y quieres consultar el programa, la web o la agenda en tu idioma

0

7 – Quiero acceder a las redes sociales del partido o de los candidatos desde la web

1

8 – Calidad del buscador de la web, si lo hay

0,25

 

Comentarios

Tarea 8: Se pone 0,25 porque tiene buscador pero sólo en la zona de candidatos que permite encontrar fácilmente al candidato por provincia o por nombre.

Puntuación total de tareas: 5,25 puntos

Web responsive

1,75 puntos. Se ve correctamente en todos los dispositivos, salvo el menú desplegable que se ve incompleto en los dispositivos Android más antiguos.

Arquitectura de la información

1,5 puntos. Los contenidos están bien ordenados y son accesibles fácilmente pero falta la agenda. Las candidaturas están ordenadas por provincias y el programa está organizado por áreas temáticas.

Puntuación total

8,5 puntos

Web electoral del PSOE

Web

Partido Socialista Obrero Español (PSOE). Tareas

Puntos

1 – Busca el candidato de la provincia de Zaragoza

0

2 – Busca la lista completa de la provincia de Zaragoza

0

3 – Descarga el programa completo de la formación

1

4 – Busca la parte de empleo del programa de la formación en la web

1

5 – Busca los actos de la formación en los próximos días

0,5

6 – Eres un usuario de Cataluña, Valencia, Baleares, Galicia, Euskadi o Navarra que habla una lengua co-oficial en tu comunidad y quieres consultar el programa, la web o la agenda en tu idioma

0

7 – Quiero acceder a las redes sociales del partido o de los candidatos desde la web

1

8 – Calidad del buscador de la web, si lo hay

0

 

Comentarios

Tarea 5: Sólo se pueden ver los actos en la web de Pedro Sánchez y sólo los actos del candidato.

Puntuación total de tareas: 3,50 puntos

Web responsive

1 punto. Se ve correctamente pero es una web limitada, con menos contenidos que la versión de escritorio. En tabletas se ve igual que en escritorio, pero no así en móviles.

Arquitectura de la información

1,25 puntos. Buena pero le falta información y en móvil no se da la misma información que en el escritorio, y ahí está ahora buena parte de la población joven. Por el contrario tiene opciones como un programa de lectura fácil que mejoran el acceso a la información a la gente mayor o con problemas cognitivos.

Puntuación total

5,75 puntos

Web electoral de Ciudadanos

Web

Ciudadanos (C’s). Tareas

Puntos

1 – Busca el candidato de la provincia de Zaragoza

0

2 – Busca la lista completa de la provincia de Zaragoza

0

3 – Descarga el programa completo de la formación

0,5

4 – Busca la parte de empleo del programa de la formación en la web

0

5 – Busca los actos de la formación en los próximos días

0

6 – Eres un usuario de Cataluña, Valencia, Baleares, Galicia, Euskadi o Navarra que habla una lengua co-oficial en tu comunidad y quieres consultar el programa, la web o la agenda en tu idioma

0,75

7 – Quiero acceder a las redes sociales del partido o de los candidatos desde la web

1

8 – Calidad del buscador de la web, si lo hay

0

 

Comentarios

Tarea 3: Está el programa completo pero no se puede descargar más que la parte económica en PDF, el resto sólo en la web, de ahí el 0,5.

Tarea 5: Es cero porque la agenda es la agenda de apariciones en medios, no la de actos electorales.

Tarea 6: Está en varias lenguas cooficiales, pero no distingue valenciano y catalán y no están traducidos al 100%.

Puntuación total de tareas: 2,25 puntos

Web responsive

1,5 puntos. Se ve bien en móviles y tabletas modernos, pero en móviles antiguos con la pantalla de baja resolución hay que hacer scroll lateral, cosa muy molesta para los usuarios.

Arquitectura de la información

0,5 puntos. Le falta mucho trabajo, sobre todo en la parte del programa que está sin categorizar, no hay buscador y están las 350 medidas divididas en bloques sin mucha lógica.

Puntuación total

4,25 puntos

Web electoral de Podemos – Unidos Podemos

Web

Podemos (Unidos Podemos). Tareas

Puntos

1 – Busca el candidato de la provincia de Zaragoza

1

2 – Busca la lista completa de la provincia de Zaragoza

0

3 – Descarga el programa completo de la formación

1

4 – Busca la parte de empleo del programa de la formación en la web

1

5 – Busca los actos de la formación en los próximos días

1

6 – Eres un usuario de Cataluña, Valencia, Baleares, Galicia, Euskadi o Navarra que habla una lengua co-oficial en tu comunidad y quieres consultar el programa, la web o la agenda en tu idioma

1

7 – Quiero acceder a las redes sociales del partido o de los candidatos desde la web

1

8 – Calidad del buscador de la web, si lo hay

0,5

 

Comentarios

Tarea 8: Hay buscador en varias partes de la web, pero falta por ejemplo en la sección de noticias o en la web en general.

Puntuación total de tareas: 6,50 puntos

Web responsive

1,75 puntos. Se ve correctamente en todos los dispositivos, salvo el menú desplegable que se ve incompleto en los dispositivos Android más antiguos.

Arquitectura de la información

1,75 puntos. La ordenación de la información y su acceso no son perfectos pero es la web más cuidada en este sentido. Teniendo opciones como un programa de lectura fácil, buscador en casi todas las partes, el programa ordenado por temas y pudiendo buscar dentro de él los puntos, teniendo la web en las lenguas cooficiales y en inglés coherentes en todos los idiomas.

Puntuación total

10 puntos

Web electoral de Izquierda Unida – Unidos Podemos

Web

Izquierda Unida (Unidos Podemos). Tareas

Puntos

1 – Busca el candidato de la provincia de Zaragoza

0

2 – Busca la lista completa de la provincia de Zaragoza

0

3 – Descarga el programa completo de la formación

0,5

4 – Busca la parte de empleo del programa de la formación en la web

0

5 – Busca los actos de la formación en los próximos días

0,5

6 – Eres un usuario de Cataluña, Valencia, Baleares, Galicia, Euskadi o Navarra que habla una lengua co-oficial en tu comunidad y quieres consultar el programa, la web o la agenda en tu idioma

0

7 – Quiero acceder a las redes sociales del partido o de los candidatos desde la web

1

8 – Calidad del buscador de la web, si lo hay

0

 

Comentarios

Tarea 3: Está el programa completo en la web, pero no se puede descargar fácilmente ya que es un embebido del documento, de ahí el 0,5.

Tarea 5: Hay actos pero se muestran de una manera visual, no escrita salvo fecha y localización, lo que impide conocer a todos los datos.

Puntuación total de tareas: 2 puntos

Web responsive

1,25 puntos. Se nota que es una web hecha a un ancho mínimo, porque si es menor de 320 pixeles deja de ser responsive, eso incluye a casi todos los dispositivos, además el menú desplegable se puede ver completo ya que si haces scroll, se ve el resto del menú, lo cual hace el menú usable en casi todos los dispositivos, cosa que en otras webs no pasa.

Arquitectura de la información

1 punto. La arquitectura es muy buena pero no va acompañada de un buen acceso a la información. Casi todo está fácilmente encontrable y el menú tiene las opciones justas, pero en el test se ha visto que falta mucha de la información básica que busca un usuario de una web electoral o no se puede acceder correctamente.

Puntuación total

4,25 puntos

Ranking 26J

  1. Podemos 10 puntos
  2. Partido Popular 8,5 puntos
  3. PSOE 5,75 puntos
  4. Ciudadanos 4,25 puntos
  5. IU 4,25 puntos

Como pasó en diciembre hay dos claros ganadores (PP y Podemos), diferenciados del resto. En todos los casos las puntuaciones han sido menores que en diciembre (ver el ranking del 20D abajo), pero en este caso la diferencia se ha agrandado. Se nota que en los ajustes de presupuesto para la nueva campaña, la web se ha visto afectada, ya que se ha mantenido la calidad de las dos ganadoras en diciembre pero las 3 de la franja inferior su calidad se empeorado.

Comparativa 20D – 26J

Ranking 20D

  1.  Podemos 10,25 puntos
  2.  PP 9 puntos
  3.  Ciudadanos 8 puntos
  4.  Unidad Popular/IU 7,5 puntos
  5.  PSOE 7 puntos

La que más ha empeorado en estas nuevas elecciones, si comparamos números absolutos ha sido Ciudadanos. La web de Ciudadanos ha perdido mucha información que ahora no es la correcta, por lo que ha bajado casi 4 puntos y del tercer puesto al último ya que ahora la web de IU-Unidos Podemos y la de Ciudadanos empatan a puntos.

Accesibilidad

En esta parte puedo citar lo de diciembre sin problemas, ya que sigue igual, incluso los dos partidos que incluyen programas de lectura fácil:

Aparte de lo habitual queremos tratar este tema, ya que ninguna de las webs tratada pone por ningún sitio que cumpla las normas WAI-ARIA o WCAG del W3C, pues casi un millón de personas en España sufren algún tipo de deficiencia visual, siendo unas 60.000 personas ciegas totales según el informe sobre la ceguera en España que saca los datos del INE y de la afiliación a la ONCE.

Desde el estudio consideramos muy grave que no se haya hecho un esfuerzo en este sentido en ninguno de los casos, ya que las personas con deficiencias visuales son electores como cualquier otro y por ello deben poder acceder a las webs electorales de los partidos como cualquier otro ciudadano, pues votan como cualquiera y ya bastantes dificultades tienen para votar (tienen que pedir papeletas especiales por adelantado).

Mención aparte favorable le damos al PSOE y a Podemos, al incluir los dos una versión de fácil lectura del programa electoral, para personas analfabetas funcionales o con dificultades de entendimiento.

Para no repetir todo pongo un ranking hecho con Examinator de las 5 webs que hace un test del 1 al 10 en el cumplimiento del WCAG 2 (Ciudadanos no se incluye, ya que da error porque usa HTTPS):

  1. Podemos 5,6 puntos
  2. PP 4,8 puntos
  3. PSOE 4,7 puntos
  4. IU 3,5 puntos

Como podéis ver incluso la mejor tiene un aprobado muy justo en el cumplimiento de las directivas de accesibilidad del W3C.

En Torresburriel Estudio hacemos estudios heurísticos de usabilidad y de accesibilidad web, comprobando que las webs cumplen unos mínimos estándares de usabilidad y accesibilidad como los WCAG y WAI-ARIA del W3C, para las web de empresas y organismos públicos que tienen que cumplir obligatoriamente con los estándares mínimos de las normas AENOR con nivel AA o AAA puedar obtener la certificación. Contáctanos, cuéntanos qué es lo que buscas y te mandaremos una propuesta adaptada a tus necesidades.