Descifrando el onboarding de Tinder

Cayetano Iváñez

Growth Manager en Product Hackers

Descifrando el Onboarding de Tinder

Bienvenidos a Descifrando Onboardings, la sección de Product Hackers Go! en la que, una vez al mes, analizamos de arriba a abajo los onboardings de las principales apps del mercado.

¿Qué tal va todo amig@s del growth? ¿Parece que ya va haciendo frío no? Quizá se deba a la incipiente entrada del otoño y sus lluvias, o quizá se deba al onboarding bien fresco que os traemos hoy en Descifrando Onboardings. 

De hecho, es tan fresco que, según algunas estadísticas, el 44% de los usuarios que lo completan (y usan la app) han acabado encontrando a su pareja estable. Seguramente lo hayas leído en el título, pero por si quedaba alguna duda, efectivamente, estamos hablando de Tinder.

Acompáñanos en este análisis en dos partes (análisis del proceso de onboarding y la puntuación obtenida) para descubrir como un gigante del tamaño de Tinder consigue introducir a cerca de 21 millones de usuarios (2021) en lo que será la búsqueda de su media naranja.

¿Nos haces swipe a la derecha? ¡Vamos allá!
Análisis del proceso

Un largo camino de cuatro fases para conocer a tu media naranja

Lo primero que salta a la vista del proceso de onboarding de Tinder es su duración. Nos encontramos ante un onboarding compuesto de distintas fases que, en total, suma más de 20 pantallas. Durante todo este flujo pasaremos por distintos grupos de pantallas que tendrán un objetivo distinto.

Principalmente, podemos distinguir hasta 4 fases: Registro de datos básicos, bienvenida y mejores prácticas, registro de datos específicos y solicitud de permisos. Empecemos por la primera de ellas.
Registro de datos básicos

Tinder nos recibe con una pantalla completa rellena de los colores corporativos (un gradiente rojo anaranjado), su logotipo y una serie de mensajes en la parte inferior de la pantalla.

Para mi, la distribución que encontramos es muy efectiva, ya que resuelve de una tacada distintos inconvenientes que podríamos encontrarnos en este tipo de pantallas. "Crear cuenta" o "Iniciar sesión", fácil ¿verdad?.

En muchas ocasiones nos lanzamos a incluir los distintos métodos de registro en el primer paso para reducir la fricción que el usuario puede sentir al valorar como registrarse. Esto nos lleva muchas veces a otro problema: damos prioridad al nuevo usuario y nos olvidamos de la experiencia del usuario que ya tiene cuenta.

Como comentaba, Tinder solventa esto dando prioridad a la claridad (sencilla distinción entre "crear cuenta" e "iniciar sesión"), frente a la agilidad (API signup, email login en first page...).
Write your awesome label here.
Write your awesome label here.
También es ciertamente acertado el texto que podemos observar sobre ambos botones de inicio. Este, breve, pero útil texto nos dice que, tan solo iniciando el proceso, estamos aceptando los términos y condiciones de la app así como la política de cookies, algo que nos permitirá reducir un paso en el apartado de solicitud de permisos.

En este caso, vamos a crear una cuenta desde 0. Pulsamos y vemos que lo primero que nos solicita es nuestro número de teléfono. Como pasaba con Uber, lo primero que se nos solicite y tenga prioridad de verificación (como es este caso), generalmente, será nuestro Unique ID.

Ingresamos el número de teléfono, pulsamos en "Continuar" (bien situado según la ley de Fitts y respetando el espacio del teclado) y nos llevará a la pantalla de verificación. Recibiremos un código que, en iOS por lo menos, solo habrá que hacer click en la sugerencia de texto sobre el teclado y estaremos listos.

LEY DE FITTS

"El tiempo que se necesita para llegar a un objeto es proporcional a la distancia a la que se encuentra y su tamaño."

Esta ley se atribuye al psicólogo Paul Fitts, cuando demostró en 1954, tras examinar el sistema motor humano, que el tiempo necesario para desplazarse hasta un objetivo depende de la distancia a éste y de su tamaño. Según su ley, los movimientos rápidos y los objetivos pequeños conducen a tasas de error más altas, debido a la relación entre velocidad y precisión.

Podemos ver esta ley claramente aplicada en el onboarding de Tinder cuando los elementos destinados a avanzar ("continuar") durante el proceso tienen su área adaptada al ancho de la pantalla, reduciendo las posibilidades de error. Así mismo, se encuentra a la distancia y altura perfecta del dedo pulgar derecho, siendo el más fácilmente alcanzable.
Write your awesome label here.
Write your awesome label here.
Siguiente pantalla, nos toca introducir nuestro correo y nos encontramos con algo tan evidente que no creo que sea un error. El titulo de la página dice "¿Cuál es tu dirección de" y no finaliza la frase. Hay dos opciones, o han preferido tomar ese camino por algún motivo que desconozco, o han calculado mal el espacio de los distintos caracteres en pantalla (Disclaimer: el dispositivo en el que hemos hecho el onboarding es un iPhone 14 Pro Max, con lo que tiene una pantalla suficientemente grande como para que cupiera la palabra "correo"). En cualquier caso, @Tinder, echadle un vistazo a esta pantalla. ¿Qué opináis vosotros, error o a cosa hecha?

Introducido el email, tendremos la opción de aceptar en este momento si queremos recibir actualizaciones y ofertas de Tinder. Ubicación interesante para solicitar este permiso. En este momento el usuario ya ha verificado su número de teléfono, con lo que esta engaged en el proceso, pero todavía no ha tenido que pasar por las 15 pantallas que le esperan hasta llegar a la fase de permisos, con lo que no está muy "quemado". Estoy bastante convencido de que habrán realizado experimentos para validar esta breve hipótesis a la que estaba llegando. 

En cualquier caso, muy probablemente habrá un elevado número de usuarios que hagan click sin pensar si quiera en lo que es.

Llegamos a la última pantalla de este apartado. Cuando ya hemos añadido los datos anteriores, nos dice que vinculemos nuestro ID de Apple. Es una decisión curiosa la de solicitar esto en este punto. A mi, personalmente, me hizo sentir como si fuera a empezar de 0. Mi correo electrónico y número de teléfono son datos que fácilmente podrían obtener de mi Apple ID, pero claro, ya estarían siendo proporcionados por Apple y podríamos usar la función de "ocultar email" que ofrece la compañía de la manzana desde hace un par de versiones de iOS. Y como podremos imaginar, esto no le interesa a Tinder. Data is Power.

No obstante, encontramos por primera vez la opción de "Omitir". Algo que en mi caso hice.
Write your awesome label here.
Write your awesome label here.
Bienvenida y mejores prácticas

Te
rminado el proceso de registro de datos básicos, nos encontramos con la pantalla que nos da la bienvenida a Tinder.

Empecemos por ahí. Nos dan la "bienvenida" a Tinder. Vosotros, como usuarios, ¿qué esperaríais que pasara justo después? En mi caso, quizá entrar a la aplicación, curiosear un poco... probablemente una de las primeras cosas que querría hacer es completar mi perfil como más me guste para sentirme seguro a la hora de usar la app.

Apoyándose en este concepto, la app de citas aprovecha esta pantalla para dar la sensación de que lo que viene a continuación es parte de la experiencia de uso de Tinder, en lugar de un proceso de registro de más de 20 pantallas.

Sigamos. Nos dan la bienvenida y, justo debajo, nos piden por favor que sigamos las normas internas.

Estas normas, si nos fijamos, van a ir formuladas de forma que al leer el titular sientes que están hechas para protegerte a ti, cuando en realidad están hechas para proteger a los demás.

Me parece una forma realmente inteligente de formular este tipo de normas de conducta. En definitiva, la seguridad de una comunidad tan grande como la de Tinder debe partir de que cada uno/a trate a los demás como espera que le trataran a él/ella, como reza la tercera norma "Tómatelo con calma".

El único punto que echo en falta durante todo el onboarding, y que quizá encajaría en esta pantalla, es algún tipo de mención a las emociones que puede provocar Tinder en cierto tipo de usuarios. El mismo "Tómatelo con calma" podría ir dedicado a este apartado.

En los últimos años hemos podido ver como apps tremendamente adictivas como TikTok dedican espacios dentro de su feed para la "Desintoxicación Digital" cuando algún usuario pasa más de cierto tiempo seguido en la plataforma. Es una tendencia que, si bien a priori es el "anti-growth" más básico, denota interés por parte de las compañías en sus usuarios; algo que a la larga es muy positivo.

Para completar esta pantalla, tan solo tendremos que pulsar en "Aceptar". Lo cierto es que no hay otra opción, así que la elección es sencilla.
Write your awesome label here.
Write your awesome label here.
Registro de datos específico

¡Perfecto! Ya hemos aceptado las normas de la comunidad, vamos con nuestro ansiado perfil. Pero, primero, analicemos los elementos que nos encontramos, ya que nos acompañarán durante toda esta fase.

En la parte superior encontramos una barra de progreso que irá avanzando según completemos pasos. Justo debajo encontramos la típica cruz que nos dará la opción de salirnos del proceso. Opción que solo tendremos en esta pantalla, ya que justo después se transformará en una flecha con la función de retroceder en los pasos. Por último, encontraremos el "titular" de la pantalla, el cual, hablando en primera persona, nos indicará (de forma más o menos acertada) que información debemos de introducir.

Como primer apunte, diría que cualquier diseñador UI/UX sentiría un respingo al ver los espacios que hay entre la barra de progreso y la cruz o botón de retroceso. En mi opinión, hay espacio de sobra en pantalla como para disponer estos elementos tan apretados.

A nivel de diseño hay otra decisión tomada en lo que a la ubicación de botones se refiere. En los primeros pasos encontraremos el botón fijo en una posición superior, justo debajo del input-text. De esta forma evitamos que el teclado nos mueva estos botones al desplegarse. Por otra parte, cuando se trata de un selector, encontramos el botón de "Continuar" situado en la parte inferior. Solo hay una pantalla en la que encontramos, también, una disposición en la que el botón se mueve con el teclado. Curiosa decisión que los separa de una coherencia total en el diseño.

Dicho esto, empecemos a introducir datos. Primero escribiremos nuestro nombre. Para ello deberemos tener en cuenta que, una vez introducido, no podremos cambiarlo; algo que Tinder nos deja saber a través de un texto en gris justo debajo del input-text (decisión algo radical, pero que entiendo).

Write your awesome label here.
Write your awesome label here.
Seguidamente tendremos que indicar cuál es nuestra edad para llegar a, quizá, las tres pantallas con más peso para el usuario. En estas tendremos que escoger:

  • Con qué género nos identificamos


  • Con qué orientación sexual nos identificamos


  • Qué género/géneros queremos que Tinder nos muestre


En la primera pantalla podremos elegir entre "Hombre", "Mujer" y "Más", con esta última opción aumentamos las posibilidades de que el usuario se sienta representado. Tanto es así, que si pulsamos en "Más", de la parte inferior surgirá una pantalla que nos permitirá escribir con nuestras palabras el género con el que nos identificamos. Sencillo y abierto para los usuarios, complejo de categorizar en una base de datos.
Write your awesome label here.
Write your awesome label here.
Antes de pasar a la siguiente pantalla tendremos que decidir si queremos que esta información se muestre en nuestro perfil, propuesta, de nuevo, enfocada en hacer sentir cómodo y con confianza al usuario.

En la pantalla de orientación sexual nos encontraremos una amplia selección de opciones, de las que podremos elegir hasta 3, que se completa con la opción "Tengo dudas". Muy interesante opción que hará sentir cómodo/a a muchos usuarios. Nuevamente tendremos la opción de elegir si queremos que nuestra orientación aparezca en nuestro perfil. Por último, tendremos que decidir si queremos que Tinder nos muestre mujeres, hombres o "todos".
Write your awesome label here.
Write your awesome label here.
Una vez finalizada la parte destinada a las preferencias, orientaciones e identificación del usuario, se nos preguntará por nuestro centro de estudios, único momento en el que veremos el botón de continuar transformarse (antes de que pulsemos en el input) en "Saltar". Me preguntaba si esta pantalla era dependiente de la variable "edad" que se nos pide al inicio del proceso, así que volví a iniciar el proceso de onboarding. Spoiler: No lo es, nos solicita el centro de estudios con independencia de la edad, por eso es tan fácil saltarla.

Write your awesome label here.
Write your awesome label here.
¡Últimos pasos! Llegamos a la selección de intereses. Un mensaje debajo del titulo nos invita a contarle al mundo nuestros intereses, mensaje elevado que a mi, particularmente, me gusta bastante. Podremos escoger hasta 5 y los hay de lo más diversos. Oculto casi, en la parte superior derecha encontraremos la opción de "Saltar". No le interesa demasiado que nos saltemos esta parte. De nuevo, Data is Power.

Apostaría a que esta es de las últimas pantallas en las que han estado trabajando del proceso, si os fijais, es la única que tiene los espacios ajustados entre la barra de progreso, el título y el contenido.

¡Última pantalla! Es una pantalla bien importante desde luego. Tendremos que añadir ni más ni menos que nuestras mejores fotografías, con las que los demás usuarios nos conocerán. Nos pide 2 mínimo y, por si os lo estabais preguntando, para este análisis incluimos dos retratos generados por una inteligencia artificial.

Ahora sí, llegamos al final del proceso, la barra nos lo indica, ¿no?
LEY DE HICK

"El tiempo que lleva tomar una decisión aumenta con el número de alternativas y su complejidad."

La Ley de Hick data de 1952 y fue "descubierta" por William Edmund Heck y Ray Hyman. Esta pareja de psicólogos se propuso estudiar la relación entre el número de estímulos disponibles y el tiempo de reacción de un individuo ante un estímulo en particular. Como era de esperar, cuanto mayor era el número de estímulos, más tiempo se tardaba en elegir un estímulo específico con el que reaccionar.

Encontramos evidencias claras del uso de esta ley, sobre todo, en las pantallas de elección de identificación de genero y orientación sexual. En las primeras, tendremos 2 opciones, si queremos escoger otra tendremos que introducirla nosotros mismos. Seguidamente, podremos escoger hasta 3 orientaciones sexuales distintas, y haciendo una magnífica resolución de esta ley, añaden la opción "Tengo dudas". Por último, en la pantalla donde más tiempo podríamos dedicar a escoger como es la de los intereses, tendremos el límite de 5, para evitar que sea infinito, entre otras cosas.
Write your awesome label here.
Write your awesome label here.
Solicitud de permisos

Parece que no era el final del proceso... Bueno, vamos allá, unos pocos permisos más y podremos empezar a hacer swipe.

Empezamos con el acceso a la ubicación. Es de apreciar que nos lo solicite, pero lo cierto es que si queremos usar Tinder, no nos quedará otra opción que aceptar este permiso ya que como reza el mensaje debajo del titulo "Para usar Tinder tienes que habilitar tu ubicación". Como alternativa, podremos hacer click en la opción "QUIERO SABER MÁS...", donde nos informarán de la vitalidad de la ubicación como permiso para usar la app.
Write your awesome label here.
Write your awesome label here.
Confirmamos la ubicación y un modal nativo personalizado nos hará la pregunta definitiva. En esta ocasión, especifican que gracias a nuestra ubicación recibiremos recomendaciones personalizadas. Quizá habría sido más User Friendly comunicar este aspecto unos segundos antes.

Siguiente paso: notificaciones. En gris se nos informa de que estas notificaciones se emplearán para avisarnos de nuevos matches (usuarios con los que iniciar una conversación) y de nuevos mensajes. Este será el único permiso que, de forma clara, podremos denegar.
Write your awesome label here.
Llegamos a la última pantalla, esta vez de verdad. En esta ocasión nos encontramos con los permisos de privacidad, enfocados sobre todo en los datos empleados para analizar el comportamiento de los usuarios, así como segmentarlos para actividades comerciales. Tendremos la opción de aceptar todos estos permisos o de escoger personalmente cuales queremos conceder y cuáles no. Independientemente de nuestra elección, eso sí, justo al terminar el proceso, en el caso de los terminales Apple con sistema operativo superior a iOS14, recibiremos el ya típico modal que nos preguntará si queremos que la app que nos rastree.
Bonus Track

No se si es por TikTok, no se si es por Instagram, pero yo, usuario inocente y novato en Tinder, lo primero que hice cuando entré fue hacer swipe up (un simple scroll down vaya), como haríamos en cualquier otra red social, para seguir viendo perfiles.

Se que cuando lo pensamos fríamente, casi todo el mundo sabe que Tinder va de hacer swipe left / swipe right, pero si yo me encontré con este pequeño problema, seguramente a otros usuarios nuevos también les haya pasado.

De hecho, si pulsamos fuera de la imagen un pequeño tutorial aparecerá sobre la imagen del usuario que tengas en pantalla indicandote algunos de los gestos principales.

No obstante, sigo echando de menos un tool-tip que nos indique que hacia la derecha diremos que nos gusta, hacia la izquierda que no y que hacia arriba daremos un "super like".
Write your awesome label here.
Write your awesome label here.
Puntuación del onboarding

Pudiendo ser notable, se queda en suficiente

  • Duración: 7/10: Si observamos el onboarding de Tinder desde una perspectiva general, lo primero que pensaremos es que se trata de un proceso largo. Y es que tiene ni más ni menos que 20 pantallas, divididas en unas 4 fases distintas. Esta última distinción, las 4 fases, será la que consiga que el proceso no se sienta tan largo como a priori parecería. Distribuyendo muy bien el momento en el que se solicita la información, el usuario sentirá que está haciendo lo necesario para encontrar más "matches" y no adjuntando la información que Tinder precisa de él.


  • UX: 8/10: Podemos decir tranquilamente que se trata de un proceso bien trabajado en lo que a UX se refiere. Es cierto que encontramos algunos elementos (más a nivel de UI) que no tienen los píxeles suficientes de margen entre ellos, pero también es cierto que nos irán acompañando durante el proceso, haciéndonos entender porque es necesario cada input en cada momento, algo que tiene un efecto muy positivo. En ninguna pantalla se nos hace tomar más de 1 decisión, y si existen diversas opciones nos darán una opción sencilla para solventar dudas como "No estoy seguro" o introducir uno mismo la opción que desee.


  • Diseño: 4/10: Si no fuera por esos minúsculos espacios entre la barra de progreso, botón de retroceso y titular, quizá podría haber aprobado. Pero claro, también hay que sumarle que en la pantalla de solicitud del correo (por algún motivo) la frase "¿Cuál es tu dirección de" no se finaliza. Ya sean errores o hechos de forma intencional (algo que no entendería), no es algo que una empresa con 71 millones de descargas en 2021 pueda permitirse en términos de diseño. Con independencia de los "errores", nos encontramos ante un diseño bastante seco, con pocas ilustraciones y tan solo una animación en la primera de las pantallas del proceso.


  • Refuerzo positivo: 3/10: Si Tinder ha puntuado en este apartado es por la pantalla que tiene al finalizar la primera fase del proceso, dedicada a dar la bienvenida al usuario y transmitirle las normas de uso más importantes. Fuera de eso, no encontraremos ninguna pantalla dedicada a informarnos de lo que hemos conseguido añadiendo toda esta información (p. ej. "Te acabas de unir a 100 millones de personas que buscan divertirse y/o encontrar el amor... ¡eso son muchas medias naranjas!" o "Bienvenido a Tinder, hemos personalizado tu experiencia para que te diviertas aún más").


  • Didáctica: 6,5/10: Para ser justos, tendremos que valorar este punto partiendo desde la pantalla de descarga del App Store, donde la primera imagen del perfil nos dice "Swipe Right", esto ya nos da una leve visión de lo que tendremos que hacer una vez entremos. Dentro de la misma app, cuando terminamos el proceso, tienen de forma inteligente introducido el "módulo didáctico" en el que nos explica cada uno de los lugares en los que podemos hacer click y para que sirven. Digo de forma inteligente porque solo nos saldrá en unos determinados casos de interacción del usuario, si este acierta con el uso, podrá no visualizarlo. Lo único que echo en falta sería una breve animación haciendo referencia a los gestos más comunes que el usuario podría realizar.


  • Sign-up: 6,5/10: Tenemos que reconocer que la primera pantalla está bien organizada. Si ya tienes cuenta podrás usar API Sign-in para acceder con Google o Apple. Sin embargo, cuando te creas la cuenta tu única opción será introducir los datos manualmente y luego, por comodidad, vincularlo con tu Apple ID. Como comentaba en el análisis, soy mucho más partidario de empezar con esta conexión, obtener de ahí la información necesaria y completar la que falte, y no viceversa. No obstante, nos dan esta opción, con lo que les damos un 6,5 en este apartado.


  • Puntuación final: 5,8/10: Aprobado, con mucho margen de mejora. 

¡Comparte si te ha gustado!

Así que, según nuestro punto de vista, la puntuación del onboarding de Tinder es un 5,8 sobre 10. Si Tinder fuera nuestro alumno, y nosotros fuéramos los profesores, podríamos decir que nos encontramos ante el típico alumno que hace lo necesario para aprobar, pero que con muy poquito esfuerzo, podría ser un alumno de notable. Corrigiendo los temas de UI, añadiendo un poco de gracia a los mensajes reforzando positivamente al usuario y alguna que otra animación, podrían estar por encima del 7 perfectamente. Y tú, ¿qué opinas?