Tres pantallas, ¿tres experiencias?

tres pantallas

Llevo unas semanas dándole muchas vueltas a las experiencias de usuario de nuestros sitios. Estamos lanzando los últimos elementos del diseño web que empezamos a introducir en Xataka hace X meses y que pronto iremos trasladando al resto de sitios. Y nos hemos puesto a pensar en móvil y en tablet. Aunque todavía el nivel de tráfico que tenemos es razonablemente moderado, es verdad que ha crecido muy significativamente durante el último año.

Antunez sigue al codigo

Siguiendo lo que comentaba el otro día José Luis Antúnez en Twitter: el código debe servir al diseño que debe servir al contenido, nos planteamos si estamos ante una única experiencia de usuario con distintas limitaciones de tamaño, o si, por el contrario, se trata de experiencias de usuario netamente distintas.

Por descontado tendremos tanto usuarios que entran en los sitios sólo vía web, como los que combinan dos o tres de estas opciones. Incluso puede que tengamos usuarios exclusivos de móvil o de ipad (aunque lo veo menos probable). Entonces, lo que buscan cuando acceden desde un dispositivo u otro ¿es lo mismo? ¿Quieren ver la misma portada o el mismo artículo pero en formato adaptado al dispositivo? ¿Quieren poder hacer las mismas cosas? ¿Quieren simplemente ver la versión web en cualquier formato y que les dejemos tranquilos?

Le hemos dado muchas vueltas y no tenemos una única respuesta. Quizás no exista. Pero tendemos a pensar que el modo de lectura, incluso el momento en el día y la predisposición, es distinta en uno u otro dispositivo. Y hemos optado por experiencias diferenciadas:

  • Máximas opciones en web
  • Experiencia touch muy visual y navegable en ipad/tablet
  • Experiencia más simple y rápida en móvil

Esto nos aleja de la tendencia/moda del responsive design. No vamos a una sóla página con tres versiones, sino a tres páginas distintas. Buscamos una experiencia mejor para el usuario, pero también corremos un cierto riesgo de que el usuario no se reconozca. O que prefiera la versión web sobre la adaptada al soporte.

Todo esto intentando que lo esencial esté en todos los dispositivos y también que la imagen de la marca sea fácilmente reconocible. Intentando que, al menos en las versiones finales, tanto la versión para móvil como la versión para ipad tengan todas las funcionalidades disponibles. Y además, integrando publicidad en los tres casos, intentando usar formatos que demandan los anunciantes, pero sin arruinar la experiencia de usuario.

Notareis que he pasado de puntillas sobre el debate de si apps o html5. Nos hemos decantado por lo segundo, aunque sin descartar a medio/largo las apps, aunque más pensando en una app única que te permita configurar qué leer que en el modelo de app por cabecera.

¿Cómo lo veis? ¿Preferís leer en modo flipboard en tablet y en experiencia adaptada para móviles o queréis en todos sitios la versión web? ¿Usáis muchas apps de medios en vuestros móviles o tablets? ¿En cuál de los tres dispositivos leéis más y cómo ha evolucionado últimamente? ¿Qué aplicaciones/agregadores usáis?



  • http://openid.blogs.es/rafaelsernav rafark

    Yo soy un lector que visita varios de los blogs desde iPhone un par de veces al dia, y si he sufrido una experiencia distinta en el dispositivo móvil. Por que no siempre entro a los sitios desde el móvil cuando estoy fuera de casa, sino tambien acostumbro a revisarlos por las noches para evitar un poco el PC, pero la experiencia no se compara con este último.

  • http://javipas.myopenid.com/ javipas

    Personalmente creo que el responsive design es una solución perfecta a medio y largo plazo que permite evitar el tener que mantener esas tres ediciones distintas, y que además unifica esa experiencia del lector.

    Por lo que he leído no es tan complicado adaptar ese diseño de forma que al usuario del smartphone o la tablet no se le presenten todas las opciones que pueda tener un lector en el PC o portátil, y el mejor ejemplo es The Boston Globe.

    Pero en ese modelo hay una complicación importante para los que trabajamos en medio: el tema del responsive advertising aún está en pañales, y ni siquiera en Google AdSense proponen una solución, aunque sí comentaron su interés por el tema. Hay formas de adaptar esa publi, pero dan trabajo y complican un poco la vida tanto al anunciante como al que ofrece el contenido en su diseño responsive.

    Con todo y con eso, creo que con la variedad de formatos que hay y que probablemente seguirán apareciendo un diseño adaptable y flexible es el camino más recomendable. Pero es una opinión, claro ;)

  • http://javipas.myopenid.com/ javipas

    Por cierto, Julio, creo que tienes la hora del WP adelantada un par de horas :)

  • http://www.merodeando.com/ Julio Alonso

    Rafark, ¿Qué cosas son las que echas de menos en la versión móvil? ¿Qué te gustaría que añadiéramos o modificáramos?

    Javi, sí conocemos el ejemplo del Boston Globe, lo hemos mirado a fondo. La cuestión es si en el modo lectura en ipad (recostado en un sofá o en la cama) la navegación vertical de un sitio web adaptado a tamaño ipad es la mejor, o si va mejor una experiencia de lectura tipo flipboard.

    Totalmente de acuerdo con el tema de la publicidad. Pero no ya sólo para responsive, incluso para cambio de orientación de la pantalla de horizontal a vertical.

    Gracias por lo de la hora. A ver si lo cambio.

  • http://jlantunez.myopenid.com/ jlantunez

    Dejando a un lado la publicidad, en lo que noto más disonancias es en el listado de posts de la home y páginas de archivos de cualquier medio con versiones diferentes.

    Sí a experiencias ad-hoc, pero que esas necesidades no generen disonancias cuando interactúas.

    Quizá se puede satisfacer las necesidades que tienen las 3 pantallas con una misma manera de presentar el contenido teniendo en cuenta que la tableta es más visual y necesita foto mayor y que el móvil es más básico.

    La primera interacción con el contenido es cómo llegas a él a través del enlace. ¿Cómo se presenta el enlace al contenido? Bien hecho puede hacer mucha marca.

    Me explico…

    Generalmente la versión completa de la home/archivo de cualquier medio tiene 4 accesos para ir a una misma noticia:

    - link en el título
    - link en la imagen
    - link en número de comentarios
    - y link del “leer más”.

    No soy SEO, pero creo que eso no es muy recomendable.

    ¿Y si se va llevando el touch a la web?

    ¿Y si el título de la noticia, extracto y foto del post estuvieran dentro de un mismo y único enlace?

    La validación html del W3C salta por los aires y no sé qué perjuicios tendría en SEO (unos dicen que tiene y otros que no), pero llevas la experiencia Flipboard a las 3 pantallas y unificas la experiencia de tu marca.

    Si meter un h2, la img y la p dentro de un mismo enlace no afecta a SEO es para pensarlo.

    Enlazar por bloques tiene otro plus. Generan más seguridad/confianza que el tener que dirigir/apuntar el cursor para clickar en el título noticia o el “leer más”.

  • http://www.merodeando.com/ Julio Alonso

    José Luis,

    Posiblemente en la versión móvil no muestres todos esos elementos y estoy de acuerdo en que unificas el click en un area en vez de tener 3 o 4 clicks separados. En versión móvil la portada es básicamente un listado de titulares ilustrados.

    En la versión ipad, con un lector en situación más reposada y dispuesto a ojear y dedicarte más tiempo, posiblemente quieres mostrar más elementos: titular, bastante texto (uno o dos párrafos mínimo), foto bastante más grande, autor… La idea es que el lector va a ir pasando página (haciendo swipe con el dedo y se parará a leer la entradilla de aquellas noticias que le interesen y pulsará en las que quiera seguir leyendo.

    La experiencia web tiene que ser completa, pero curiosamente el lector suele tener menos tiempo, quiere ir más al grano. No dispones de swipe, aunque haya quien lo emule con las flechas del cursor, y puedes hacer scroll vertical sin mayor problema.

  • http://openid.blogs.es/javiergalan Javier Galan

    Estoy totalmente de acuerdo contigo Julio. De hecho, me recuerda un poco, aunque es diferente, a las pantallas liquidas donde sobre el PW todo era ok y luego su manejo era muy costosos y bastante deficiente. De hecho en mi ecommerce de venta de material de oficina on line empezamos con diseño liquido y a los 12 meses lo tuvimos que quitar