21. Y ahora, el tiempo

En este episodio Víctor Correal entrevista a Jordi Manuel, el diseñador jefe de GuideDoc, para repasar todas las decisiones de diseño de la app para iPhone y iPad. Cómo escapar de la homogeneidad de las apps tipo Netflix, qué hay detrás del menú por deslizamiento y por qué las imágenes en horizontal cambian la experiencia de la Home. Un episodio para mirar con el link de Dribbble abierto en la otra mano.

Jordi Manuel se convierte además en el primer repetidor de No es Asunto Vuestro, y Víctor aprovecha para adelantar que pronto pedirá a los oyentes que participen en la primera beta de GuideDoc.

Lo que vas a escuchar

• La teoria de Eagleman sobre el tiempo: por qué el tiempo pasa más rápido de adultos y qué podemos hacer al respecto.
• El diseño de la Home de GuideDoc: la decision de huir de los posters pequeños y apostar por imágenes en horizontal de cada documental.
• El menú por deslizamiento: cómo se navega entre filtros (New, Continue, My List, Watched, Rated, Settings) sin el típico menú hamburguesa.
• Los botones de acción: el icono de añadir a lista (que se transforma en check) y el ojo para marcar como visto y valorar.
• La pantalla DocDetail: el protagonismo de la carátula, el overview, el equipo y la idea de añadir un clip en bucle de fondo.
• La modal de valoración: cómo funciona el sistema de estrellas y por qué aparece desde arriba.
• La app para iPad: misma logica, más contenido en pantalla y navegacion simplificada.
• El futuro: Apple TV, el primer reto de Jordi Manuel en esa plataforma.

El episodio Premium de esta semana

Esta semana el contenido Premium profundiza en los proyectos y decisiones que Víctor no desarrolla en el episodio normal. Si quieres seguir el día a día de GuideDoc, las decisiones de producto y las reflexiones que no caben en abierto, el Premium es el sitio:

• Las decisiones de negocio y producto que quedan fuera del episodio público.
• El contexto real detrás de cada nueva funcionalidad de GuideDoc.
• Las reflexiones sin filtro de Víctor sobre emprendimiento y proyectos propios.

→ Apúntate a No es Asunto Vuestro Premium para acceder a todo el contenido exclusivo.

Transcripción del episodio

[00:00:00] La teoria de Eagleman: por qué el tiempo se acelera

El tiempo pasa cada vez más rápido. Cuando éramos pequeños, un curso se nos hacía eterno y un verano, una vida entera. Pero de mayores, cada año que pasa se esfuma más rápidamente. Hay diversas teorías neurocientíficas y psicológicas que intentan dar explicación a esta percepción del paso del tiempo según la edad. Mi preferida es la teoría de Eagleman.

David Eagleman es un neurocientífico americano que dirige el laboratorio de la percepción del tiempo en el Baylor College of Medicine de Houston. Él explica que esta sensación de aceleración del tiempo a medida que sumamos años la provoca el gasto energético del cerebro cuando procesamos información. Cuando estamos viviendo cosas que nunca antes hemos vivido, nuestro cerebro gasta más energía y produce la sensación de que el tiempo transcurre más lento. Prestamos más atención, registramos más detalles, y el cerebro trabaja más que cuando vivimos cada día lo mismo.

[00:01:22] Experiencias nuevas: el truco para que el tiempo rinda más

Este esfuerzo mental nos produce la sensación de que el tiempo transcurrido en esa acción concreta es mayor. Cuando somos pequeños, todo lo que sucede a nuestro alrededor es nuevo. Pero no hace falta ser pequeño para repetir esa sensación. Si vas 15 días a algún país lejano, o incluso un fin de semana a Londres, cuando llega el domingo por la tarde y piensas en el viernes que cogiste el primer avión, te queda lejísimos.

Esta teoría es genial porque significa que, aunque siempre hemos pensado lo contrario, el control del tiempo está en nuestras manos. Si no queremos que la vida se esfume delante de nuestros ojos, ya sabemos lo que tenemos que hacer: cambiar siempre que podamos, salir de nuestra zona de confort, probar cosas nuevas, viajar, arriesgarnos, huir del trabajo monótono, no hacer lo mismo que el resto de la gente, improvisar y, en definitiva, intentar que la propia vida sea original.

Siempre pienso lo mismo: si tuviera que escoger una sola palabra para definir, al final de mis días, cómo me gustaría que hubiera sido mi vida, diría «original». Haber tenido una vida original querrá decir que habré hecho un montón de cosas distintas y que, por lo tanto, el tiempo me habrá cundido muchísimo más.

[00:02:54] Presentacion del episodio: Jordi Manuel, primer repetidor de No es Asunto Vuestro

En el capítulo de hoy, para variar, una entrevista. El invitado es Jordi Manuel, el diseñador jefe de GuideDoc. Y que sepa que es el primer repetidor de No es Asunto Vuestro.

Jordi: Pues mira, no había repetido nunca en el cole.

Víctor: Pues por la pinta que haces, pensaba que sí. Los diseñadores, precisamente, os metéis a diseñadores porque sois los típicos repetidores.

Jordi: Somos los que dibujamos bien en clase y entonces, venga, va.

Víctor: Ya me estoy buscando muchos amigos. Y además tenemos muchos oyentes diseñadores. Bueno, vamos a hablar hoy del diseño de la aplicación de GuideDoc. Estoy muy contento con el resultado. Hoy hablaremos de la del iPhone y la del iPad. La del Apple TV de momento la dejamos en standby.

[00:03:51] El alias JM y el arranque de la entrevista

Víctor: Antes de meternos en materia, quería comentarte una cosa: el otro día hablando con los developers me enteré de que te llaman JM.

Jordi: Bueno, porque uno de los de Veropes también se llama Jordi y, supongo que para abreviar y trabajar más rápido…

Víctor: ¡Pero esto no me lo habías dicho! Mola mucho más JM que Jordi Manuel. Imagínate cómo hubiera subido la calidad del podcast si yo hubiera dicho «el diseñador se llama JM». Esto parece que seamos el Equipo A.

Jordi: Si dices JM de 2P entonces ya lo petamos.

Víctor: ¿Te puedo llamar JM?

Jordi: Sí, a ver… yo te llamaría WC.

Víctor: Lo dejamos en Jordi. Venga, va, comenzamos por la Home.

[00:04:44] La Home: huir de los posters pequeños al estilo Netflix

Víctor: Hay dos cosas básicas que hablamos tú y yo largo y tendido antes de ponernos a diseñar la aplicación de iPhone de GuideDoc. La primera era que observamos todas las aplicaciones del rollo Netflix, esas en las que puedes ver películas y series, y todas eran iguales. En la Home siempre encontrabas todos los posters en pequeñito. Y entonces dijimos: vamos a ver cómo podemos huir de esto, vamos a intentar innovar. Antes de continuar, en las notas del programa pondremos los links al Dribbble de Jordi Manuel. Jordi, explica qué es Dribbble.

Jordi: Dribbble es una web donde diseñadores gráficos, web y móvil suben sus trabajos para que la gente los revise y dé su opinión. Lo bueno es que es una red social que solo puedes entrar por invitación, con lo cual el nivel de calidad ya es bastante alto. No puede subir cualquiera cosas, lo cual es un punto a favor.

Víctor: Vamos a dejar los links de Dribbble para que podáis seguirnos visualmente también. Entonces, ¿cómo hemos evitado lo de los posters pequeñitos?

Jordi: En la web de GuideDoc, en los detalles de cada doc, tienes la carátula y después tienes de fondo una imagen destacada de ese documental. Lo que hemos hecho es coger esa imagen y ponerla como la imagen asociada a cada documental en la app.

Víctor: Entonces, lo que vemos en la Home, al entrar en la aplicación, en vez de posters pequeñitos, son unas imágenes en horizontal, en formato paisaje, con el título del documental y unos botones que luego explicaremos.

[00:07:27] El menú por deslizamiento: adiós al burger menu

Víctor: Otra cosa que también innovamos, y fue absolutamente idea de Jordi Manuel, fue el menú. ¿Qué menú tenemos?

Jordi: Veníamos pensando en un menú que se llama «burger», que son las típicas tres rayitas arriba a la izquierda, que cuando pulsas te abre una ventana hacia la derecha.

Víctor: O sea, cuando le das a esas tres rayitas, toda la Home se desliza hacia la derecha y te aparece un listado de opciones a la izquierda de la pantalla.

Jordi: La Home de GuideDoc está ordenada en diferentes pantallas, que son como filtros. La inicial, la que siempre encontraremos al entrar en la app, es la de New, con las novedades de documentales. Deslizando el dedo hacia la izquierda, pasamos al filtro de Continue: los docs que has empezado a ver pero aún no has acabado. Y así puedes seguir navegando por el resto de filtros: My List, Watched, Rated.

Víctor: O sea, arriba ves el menú con el nombre de cada sección: New, Continue, My List, Watch It, etc. Para pasar de uno a otro puedes pulsar directamente la palabra o deslizar con el dedo hacia la izquierda, y ese menú pasa al siguiente filtro. Muy difícil de explicar sin verlo. Mejor que le den al link.

Jordi: Bueno, cuando empecemos a explicarlo, esperamos cinco segundos a que los oyentes pulsen el link de Dribbble y lo sigan. Un poco interactivo, como el «elige tu propia aventura».

[00:09:21] Los botones de acción: añadir a lista y marcar como visto

Víctor: Además de eso, en la pantalla principal, sobre cada uno de los documentales, encontramos la nota doc, la valoración que todos los usuarios le han puesto, y dos botones. Cuéntanos.

Jordi: Hay un botón para añadir a tu lista. Es un símbolo de más, y cuando le das hace un pequeño efecto y se transforma en un check, un visto, indicando que se ha añadido a My List. Y al lado hay otro icono con un ojo: sirve para marcar que ese documental lo has visto. Cuando pulsas ese icono cambia de color a verde, y si lo vuelves a pulsar puedes valorar el documental, porque no podrás valorar si no lo has marcado como visto.

Víctor: Entonces, a nivel de secciones: al entrar en la app siempre encontrarás las últimas novedades. Luego Continue, para los documentales que te has dejado a medias. Luego My List, donde te aparecen todos los que has guardado con el más. Luego Watched, los que ya has visto. Rated, los que has valorado. Y Settings.

Jordi: En Settings tenemos la parte de notificaciones, la opción de personalizar si quieres que la app te notifique o no, la gestión de la suscripción del usuario, el tipo de suscripción que tendrá, y después los típicos links de valorar la aplicación, contacta con nosotros, términos y condiciones y una «botas». Lo típico.

[00:11:23] La beta: feedback de los oyentes

Víctor: Cuando el equipo principal y algunos amigos cercanos hayamos hecho las primeras pruebas con la primera beta, tengo pensado pedir a todos los oyentes de No es Asunto Vuestro que estén interesados en recibirla y que nos den su opinión. Que la puedan tocar y nos cuenten si entienden los botones, si la distribución les parece confusa o no, etcétera.

Jordi: Sí, pero bueno, al final el testing es el que decidirá. El testing es el testing y no hay otra.

[00:12:11] DocDetail: la pantalla de detalle del documental

Víctor: Vamos a la DocDetail, la pantalla a la que vas cuando pulsas sobre uno de los documentales de la Home.

Jordi: En DocDetail lo que quería destacar sobre todo era la carátula. En la pantalla principal no la vemos, porque allí usamos la imagen panorámica, pero muchas veces los documentales se identifican precisamente con esa carátula. Así que en esta pantalla la carátula tiene el protagonismo principal: es lo primero que ve el usuario, en grande, con las proporciones que corresponden. También se da mucha importancia a la valoración del doc, al título, y a partir de ahí está todo el contenido necesario para conocer de qué va el documental: un Overview, quién lo ha hecho, si hay un casting o equipo técnico, las productoras, y las mismas acciones que tenemos en la Home: añadir a lista, marcar como visto, etc.

[00:13:21] La imagen de fondo en movimiento: clip en bucle

Víctor: Y aquí hay una cosa que estamos probando, que fue idea tuya, y de momento los developers no nos han llevado la contraria: que la imagen debajo de la carátula sea un clip de video en movimiento.

Jordi: Exacto. La imagen de fondo, en principio, iba a ser la misma que la que el usuario ve en la Home. Pero para darle más vida a estas pantallas y que no parezcan presentaciones de PowerPoint, la idea es poder tener dos o cinco segundos de ese documental que vayan en bucle. No es una preview ni un trailer, pero te da una idea de cómo está rodado, o puedes destacar una escena especialmente chula.

Víctor: Te da una idea de cómo está rodado, o puedes destacar una escena que sea especialmente chula. Me parece muy bien.

[00:14:03] La modal de valoración

Víctor: Y finalmente vamos a colgar tres capturas, las dos que acabamos de explicar y otra más que es la de valoración. Explícala tú, Jordi.

Jordi: Lo que hace la app cuando has marcado un documental como visto y vuelves a pulsar el icono en verde es abrir una pantalla que en el argot de las apps se llama modal. Son esas pantallas que te aparecen desde abajo, o en este caso desde arriba, que es más chulo. Aquí vemos la carátula en grande para que sepas a qué doc vas a valorar, las estrellas en gris, le das al número de estrellas que quieras de un total de diez, te aparecerá el dígito del total que has marcado, un botón de confirmar por si te has equivocado, y ya está: habrás valorado ese documental.

Víctor: Por eso Superman siempre aparece por arriba.

[00:15:20] Petición a los oyentes: feedback en Dribbble

Víctor: Tengo muchas ganas de que los oyentes se lo miren con atención. Por favor, sacad unos segundos, dadle al link de Dribbble y decidnos qué os parece. Sed benévolos. Los oyentes de No es Asunto Vuestro son muy benévolos. Y a través de Dribbble podéis poneros en contacto con Jordi Manuel directamente para las cosas malas que se las digan a él.

Jordi: Sí, hay un botón de cosas malas.

Víctor: Escribidnos al mail a través de victorcorreal.com o a través de Dribbble a Jordi Manuel, JM. Lo primero que queríamos era huir de las portadas típicas, innovar un poco en el menú, y además intentaremos añadir algunas animaciones para dar un toque de vida a la aplicación. Cuando te mueves por la app y hay esos pequeños detalles, te sientes más cómodo. Estoy muy, muy contento y me gustaría mucho oír vuestra opinión.

[00:16:55] La app para iPad

Víctor: También tenemos ya diseñada la aplicación de iPad. No difiere mucho de lo que acabamos de explicar. ¿Tienes algo que comentar?

Jordi: La gracia del iPad es que es perfecto para este tipo de aplicaciones. El iPhone es un pelín más pequeño y aunque para ver videos se puede usar, sobre todo con los modelos Plus, el iPad es ideal. La navegación se simplifica mucho más: todos esos filtros de la Home los tienes en la misma pantalla, tienes los Settings a mano, el buscador también. Es la misma idea pero un poco más adaptada al iPad. Y además ves más contenido en pantalla: en iPhone ves 2 o 3 documentales en la Home, y en iPad ves casi 9.

Víctor: Evidentemente veremos qué hacen nuestros usuarios, pero supongo que esta será una aplicación que se consumirá mayoritariamente en el iPad y en Apple TV. Aunque tiene mucho sentido hacer también la app de iPhone: los iPhones ya son grandes, hay mucha gente que consume en iPhone, y además siempre tenemos la función de AirPlay para enviar desde el iPhone a donde sea. Y también tiene sentido como aplicación de consulta: miras las novedades de GuideDoc de esa semana, te marcas lo que quieres en el Watchlist, y luego lo encuentras en tu iPad o en tu Apple TV.

[00:19:05] El proximo reto: Apple TV

Víctor: Otro día haremos un capítulo hablando también sobre el diseño de Apple TV, que para ti está siendo un reto porque es tu primera aplicación para esa plataforma, ¿verdad?

Jordi: Sí. Lo bueno de Apple TV es que la nueva interfaz que ha creado Apple y la nueva interacción mejora mucho la que había antes. Hay una serie de efectos y filtros que utilizan que son preciosos, y para una aplicación de este estilo, de videos y carátulas con imágenes grandes, quedará muy bien. La verdad es que lucirá mucho.

Víctor: ¿Has comenzado algo ya?

Jordi: Lo tengo todo en la cabeza. De aquí a cinco minutos ya me pongo.

[00:19:53] Cierre: animando a Jordi a hacer un podcast de diseño

Víctor: Siempre ha sido un placer hablar contigo en este podcast. Te lo agradezco un montón, porque además del trabajo que te doy, que estés abierto a hacer estas cosas es de agradecer. Dejaremos en las notas del programa el contacto de Dribbble y todo lo tuyo para que si la gente te quiere contratar pueda encontrarte. Y bueno, te animo a que hagas un podcast de diseño, que no lo hay. Sé que por ejemplo Álvaro Bernal, un gran diseñador de Madrid, antes tenía uno, pero yo te animo a que hagas uno.

Jordi: Igual hago alguno y te invito a que vengas un día a hablar de GuideDoc.

Víctor: Si no sé nada… Bueno, Jordi, muchísimas gracias. Diseño del Apple TV, ¿de acuerdo? Venga. Un abrazo.

Jordi: Chao.

Menciones y recursos del episodio

• Jordi Manuel (JM): diseñador jefe de GuideDoc. Contacto a través de Dribbble.
• GuideDoc: la plataforma de documentales de Víctor Correal.
• Dribbble: red social de diseñadores por invitación donde se han publicado las capturas del diseño de la app.
• David Eagleman: neurocientífico americano, director del laboratorio de la percepción del tiempo en el Baylor College of Medicine de Houston. Teoria sobre la percepción del tiempo según la edad.
• Netflix: mencionada como referencia de diseño de apps de video que GuideDoc quería evitar replicar.
• Apple TV: plataforma para la que se está diseñando la proxima version de la app de GuideDoc.
• AirPlay: función de Apple mencionada como caso de uso de la app de iPhone.
• Álvaro Bernal: diseñador de Madrid, oyente del podcast, mencionado como referencia en el mundo del diseño y los podcasts.
• victorcorreal.com: mail de contacto de Víctor.