10 IDEAS PARA SOBREVIVIR AL DISEÑO "RESPONSIVE". EL EJEMPLO DE SOYSUPER

Aún con el eco de todo el ruído de la semana pasada con el lanzamiento de la beta de Soysuper.com, me atrevo a soltar algunas conclusiones e ideas sobre la experiencia de implementar un diseño «responsive» (la palabra de moda del 2013, no olvidar).

En primer lugar decir que estamos francamente sorprendidos con el feedback recibido. Tenemos un montón de ideas y detalles que afinar y mejorar pero, en general, estamos muy contentos con las aportaciones recibidas, tanto por la forma como por el fondo: desde la UX, hasta la velocidad, la navegación o el copy. Y empezar así de verdad que es para quitarse el sombrero.

Bueno, al lío: ¿Qué hemos aprendido de un proceso de diseño responsive? Varias ideas sin orden ni concierto, fruto de lo que hemos vivido estos meses:

1. Lo primero: que esto no es diseñar una app. Hay un montón de cosas que, sólo cuando bajas al detalle reparas en ellas. La primera fue probablemente abordar el tema del navegador en móvil. Un extra de espacio que tienes que resolver como es debido para que no te consuma un espacio fundamental.

2. La idea inicial fue definir una app móvil, pero con el tiempo nos dimos cuenta de que, con «un poco de esfuerzo» podríamos tener algo que se pudiera ver dignamente en más dispositivos. Así que cuando ya teníamos bastante avanzada la app decidimos dar ese salto, definir la versión desktop y «browsizar» la versión móvil. Todo un desafío. Probablemente fueron los momentos más duros de todo el proceso del parto.

3. Esta decisión supuso un cambio de paradigma bastante importante: el trabajo se multiplicó justo por dos. Cada pantalla que definíamos teníamos que ver cómo respondería tanto en móvil como en desktop. Lo bueno: que aprendes rápido a convivir con ello. El proceso de definición y diseño no es demasiado complejo una vez definido «lo gordo».

4. La estructura: al final conseguimos llegar a una estructura de fondo, que soportaría Soysuper independientemente del dispositivo. Dar con esta estructura tuvo su historia y, cuando la tuvimos estuvimos varios días tratando de conocerla bien. La tecla aquí está en definir la estructura para desktop y luego ver cómo la escondes a través de ciertos comportamientos en móvil, es sólo cuestión que decidir qué es lo que quieres ocultar y por qué. La foto que ilustra el post es la estructura final acordamos (top secret).

5. Dedo vs cursor: al tener que definir dos versiones en paralelo tienes que olvidarte del efecto rollover para enseñar cosas en desktop, en móvil no existe esta opción y es casi más sencillo pensar en otra solución que sea uniforme para ambos casos.

6. Casi sin darnos cuenta, ya tenemos diseñada en la cabeza la versión para tablet. Como la estructura es la misma en cualquier dispositivo, para tablet sólo tendremos que decir qué enseñamos y qué ocultamos. Y qué elementos de interacción usamos, si móvil o desktop, o los dos a la vez. Ya veremos de todas formas, que aquí estoy yo hablando sin haberlo visto.

7. Me gusta la idea de que hayamos destruído un gran muro: el de evitar la descarga de la app para empezar a usar Soysuper.com. Tampoco es necesario descargarse ninguna actualización, todo sobre la marcha. Lo malo, que de momento no funciona offline, aquí si no tienes conexión a Internet no hay experiencia de uso por ningún lado. Y en una lista de la compra tiene todo el sentido. ¡Dadnos tiempo!

8. La buena noticia es que haberlo hecho bien nos permite a medio plazo poder crear una app Android/iPhone sin comernos demasiado la cabeza. Y eso será genial.

9. No tiene mucho que ver con el responsive pero creo que es importante comentarlo: la importancia del copy está siendo aquí un plus a nuestro favor. Hemos recibido algún feedback de que nos estamos pasando un pelín en determinados puntos (2-3 personas), pero todos los demás se sienten muy a gusto, genera empatía y ganas de seguir usando la herramienta.

10. Tratar de usar pocos estilos para enlaces, texto y botones ayuda muchísimo a transmitir sensación de simplicidad y te quita quebraderos de cabeza para las distintas versiones que tienes. Es un ejercicio que cuesta y que tienes que ir controlando cada cierto tiempo. Es muy fácil bajar un enlace 10 píxeles si no te entra a 12 píxeles, pero si te obligas a usar siempre 12 píxeles, sin excepciones, te obligas a repensar mucho más el problema que tienes delante. Una buena interfaz no se soluciona bajando el tamaño del texto.

Y bueno, para acabar, y aunque ya se haya dicho y suene a topicazo, que es fundamental tener a un equipo que pilote de lo suyo en cada campo. Y que es un gustazo trabajar así. Brindo porque este proyecto dure muchos muchos años!

Showing 4 comments
  • Dani Santi
    Responder

    Buenas!Muy interesante los 10 puntos que planteas. Hace poco me leí «Mobile Usability» de Jakob Nielsen, y si te vale los 10 puntos que planteas van en consonancia con sus estudios de UX realizados y explicados en el libro.
    Destacar que el Copy, si es importante en responsive, más de lo que consideramos, y usar la regla «Menos es más» casi siempre funciona.
    Por el resto destacar que realmente es mejor una web para cada tamaño, pero que a falta de presupuesto misma web bien pensada es la mejor solución en relación calidad/precio.
    Último dato que encontré en el libro: la gente compra por tableta y sobremesa, apenas compra por móvil, creo que se debe a la baja UX y bajo contexto que ofrece una pantalla tan pequeña. Pero espero que os funcione.
    Saludos!

  • Guirao
    Responder

    Hola!
    Enhorabuena por el desarrollo de la web responsive, creo que está muy conseguida, y, efectivamente, no puedo estar más de acuerdo en que será uno de los términos del 2013 🙂

    El otro día vi los datos de evolución de consumo de contenidos de medios de Prisa, y, aunque su app ha sido super-premiada, no ha crecido apenas en dispositivos móviles y tablets, en cambio, el consumo a través de estos dispositivos a través de la web ha sido espectacular, es increíble, efectivamente, somos muy vagos, y si podemos ahorrarnos descargar la app, mejor.

    La app podrá ser complementaria y ofrecer algo diferente, que el que lo quiera, ya se preocupará de descargarla.

    Muchas felicidades, te sigo en tu blog desde hoy!
    Álvaro Guirao.
    CEO Solofeeling.
    Tecnología de comunicación emocional en el mundo real
    http://www.solofeeling.com
    :))))))) Compra tu entrada con un 66% descuento en http://zincshower.com/web/entradas/ con el código descuento shower49 gracias a @SoloFeeling #ZincShower

  • Responder

    […] 10 ideas para sobrevivir al diseño “responsive”. El ejemplo de Soysuper (Juan Leal, 11/feb/2012) […]

  • Miguel Caetón
    Responder

    Responsive debe ser la opción para sitios de contenido…
    Pero para web apps ahora mismo, por lo que leo y veo, todo desarrollo se orienta ahora a ofrecer experiencias diferentes. Además de que es una aberración hacer cargar todo ese HTML para después ocultar y mostrar partes, cargando además todo el javascript y contenidos de unas partes que no se verán.

    Para sitios que requieren bastante interacción, como parece que es vuestro caso, creo que deberíais haber optado por una web adaptada a móvil/tablet y esa si hacerla responsive,no por el mismo diseño responsive para desktop/móvil y tablet.

    Pero claro es mi opinión….

TU COMENTARIO

<font size="2"> Al continuar usando esta web, estás de acuerdo con el empleo de Cookies.</font> Más detalles

En esta página encontrarás información sobre nuestra Política de recogida y tratamiento de Cookies. ¿Qué son las cookies y para que se utilizan? Las cookies son ficheros o archivos que se descargan en el ordenador/smartphone/Tablet del Usuario cuando éste accede a determinadas páginas web. Permiten almacenar ciertos datos sobre el dispositivo del Usuario o sobre la navegación del mismo. La mayoría de las cookies se asocian a un usuario, ordenador y dispositivo no identificable en el sentido de que no proporcionan referencias que permitan conocer datos personales. ¿Cómo puedes administrar las cookies? Puedes administrar las cookies en la configuración del navegador. La configuración de los navegadores puede variar un poco; así que, para administrar las cookies tienes consultar la configuración correspondiente dentro de su navegador. Gracias por entender estos molestos mensajes que la ley nos obliga a incluir.

Cerrar