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!