El diseño de Arc: análisis del navegador y los flujos de onboarding

Arc, caso de uso en detalle

En este artículo analizaré Arc, un nuevo navegador que cada vez tiene más adeptos: Hace mucho tiempo que oigo hablar de él y al final me ha picado la curiosidad.

Al final te dejo con el vídeo de la charla de Karla Mickens Cole y Nashilu Mouen Makoua en el Config 2024, donde explican cómo diseñaron la marca y cómo integran el storytelling.

En concreto:

  1. ¿Qué es Arc y para qué sirve?
    1. Las funcionalidades de Arc
    2. El modelo de negocio de Arc
  2. Análisis del flujo de onboarding
    1. Landing page
    2. El flujo de onboarding de Arc
  3. El diseño de interfaz en Arc
  4. Arc: qué sesgos y heurísticas explotan
    1. Efecto IKEA
    2. Heurísticas de Nielsen
    3. Gamificación
    4. Heurísticas de Tognazzini
  5. Conclusiones y vídeo

¿Te unes?

¿Qué es Arc y para qué sirve?

Arc es un nuevo navegador que pretende ser la alternativa de Chrome (el navegador que, según Statista, controla cerca del 65% del mercado).

Los fundadores definen Arc como “el sistema operativo para la web”. Este navegador está basado en Chromium y está desarrollado en Swift.

Landing page de la web del navegador Arc.

Revisando sus release notes podemos ver que la primera versión se lanzó el 21 de julio de 2023 y solo para dispositivos de Mac.

La empresa que hay detrás se llama The Browser Company, una empresa situada en Nueva York, fundada en 2022 por Josh Miller y Hursh Agrawal.

Las funcionalidades de Arc

En su documentación agrupan las funcionalidades en cuatro grupos, que a su vez incluyen muchas más. Sin pretender hacer una lista exhaustiva:

  1. Multitarea (multitask):
    • Vista dividida, para ver múltiples pestañas a la vez
    • Previsualización de las pestañas para no tener que dejar la pestaña actual
    • Reproductor de vídeo y música integrado, para escucharlo mientras navegas
  2. Crear (create)
    • Modo desarrollador
    • Facilidad para crear notas y capturar imágenes (easels)
    • Capacidad de compartir el contenido que creas en el navegador
    • Boosts (te hablo de ellos más adelante)
  3. Organizar (organize)
    • Pestañas con pin y favoritos
    • Biblioteca con tus descargas, pestañas archivadas, easels y más
    • Una función para auto-archivar pestañas
    • Carpetas para agrupar pestañas similares
    • Espacios diferentes, como si tuvieras dos navegadores en uno.
  4. Aceleración (rev up)
    • Integración con inteligencia artificial para facilitar la búsqueda, previsualización, generación de contenido, resumen de páginas web, etc.

El modelo de negocio de Arc

Hasta la fecha es todo gratuito, porque consideran que está en fase experimental.

Incluso las funcionalidades con inteligencia artificial, que sospecho que serán de pago pronto (más que nada por el coste de las licencias y que seguramente están pagando por cada prompt).

La Boost Gallery de Arc, que contiene modificaciones hechas por sus usuarios.

También existen los Boosts, que son personalizaciones diseñadas y desarrolladas por otros usuarios que puedes utilizar en tu instalación de Arc.

Por ejemplo, puedes literalmente cambiar el estilo completo de GMail, eliminar los shorts de YouTube, simplificar la interfaz de Twitter…

Análisis del flujo de onboarding

Voy a descargar y crear una cuenta con Arc desde cero. El objetivo es documentar cómo es su proceso de onboarding y qué recursos utilizan.

Landing page

  • La propuesta de valor es muy clara: “Arc es el reemplazo de Chrome que estaba buscando”. Firmado por The Verge, una reconocida publicación del sector tecnológico.
  • El mayor peso lo tienen los vídeos, con los que muestran rápidamente qué hace Arc.
Un detalle de cómo Arc utiliza vídeos para mostrar la interfaz.
  • En cuanto a la propia interfaz, Arc tiene un lenguaje visual muy característico: texturas, pequeñas animaciones con líneas ondulantes e iconos. Al contrario de muchas productos tecnológicos, optan por utilizar un azul vibrante en lugar del negro o blanco tradicionales.
  • Utilizan de forma muy clara el social-proof. La página incluye, al final, cuatro verbatims de usuarios reales.
Un ejemplo del social-proof que utilizan en Arc.

El flujo de onboarding de Arc

El primer mensaje es extremadamente claro y es toda una declaración de intenciones:

Primera pantalla del onboarding de Arc: "Meet the internet again".

El primer paso es crear una cuenta. En ocasiones puede parecer contraintuitivo, porque parece una barrera de cara al usuario, pero tiene dos ventajas claras:

  • Si dejan el proceso de onboarding a medias, ya tienen los datos para poder hacer remarketing
  • Aprovechan para mostrar el navegador y las funcionalidades
La parte aburrida del onboarding, el registro. Pero aprovechan para mostrar una demo del navegador en el lado derecho.

La primera parte del flujo de onboarding es la de hacer un poco de “limpieza”. Preguntan si quieres importar contenido de otros navegadores y qué aplicaciones quieres incluir en el navegador.

La pantalla del onboarding en la que seleccionar si quieres importar tus Favoritos de Brave, Chrome o Safari.
La pantalla del onboarding en la que seleccionar qué aplicaciones quieres que funcionen con Arc. Aparecen Twitter y Spotify, pero también Slack y Figma.

Llama la atención que Figma aparezca por defecto. Es una señal más de el público al que se dirigen: personas que trabajan en el sector tecnológico.

Aquí es donde se vuelve todo más divertido. Mediante una bonita interacción, puedes personalizar de qué color quieres que sea tu navegador:

Después siguen con la configuración “más aburrida”, pero aprovechan para comunicar los valores con el tono divertido que tiene la marca.

La pantalla del onboarding en la que puedes escoger si quieres que los anuncios te persigan por internet o no.
La pantalla del onboarding en la que puedes escoger si quieres que Arc sea tu navegador por defecto.

Y… ¡confetti! Con una simple pero efectiva animación celebran que ya has configurado tu cuenta.

La tarjeta que aparece a la derecha es tu “Arc Card”, que puedes generar, exportar y compartir.

Sí, estuve mucho rato haciendo clic… 😅

Esto último, lo de compartir, es una buena técnica para fomentar la viralidad: el proceso de onboarding es fluido, divertido, y es fácil que alguien quiera compartirlo. Incluso tiene el mensaje predefinido.

El popover para compartir la Arc card generada.

El diseño de interfaz en Arc

La primera vez que ves el navegador se convierte también en un momento de aprendizaje en el que mediante una sencilla animación te enseñan los cuatro conceptos básicos que tienes que conocer:

En general también incluyen pequeñas animaciones en los iconos y un lenguaje visual muy propio.

Arc: qué sesgos y heurísticas explotan

Si has ido leyendo los artículos que voy publicando en uiFromMars, seguro que ya has detectado alguno de los sesgos que utilizan.

Efecto IKEA

Uno de ellos es el efecto IKEA: está demostrado que si involucras al usuario en la creación o personalización del producto digital, serán más proclives a utlizarlo y no “churnear” (a falta de una palabra mejor).

Heurísticas de Nielsen

Si hablamos de heurísticas de Nielsen, utlizan por lo menos dos.

Dale al usuario el control y la libertad

Una vez has pasado por el flujo de onboarding, tienes total libertad para descubrir cómo funciona la interfaz. No contiene el típico tour de 15 pasos que te dice qué es qué.

El navegador de Arc, en el que el usuario tiene el control desde el inicio.

Flexibilidad y eficiencia de uso

En todo momento promueven el uso de atajos de teclado. Esto mejora el uso y la eficiencia del navegador, ya que el usuario también sentirá que es más veloz utilizándolo.

El navegador de Arc, con un listado de los atajos de teclado más comunes.

En algunas ocasiones estos atajos de teclado aparecen de forma contextual, por ejemplo cuando quiero cerrar el navegador:

Otro ejemplo con atajos de teclado, esta vez contextual. Aparece cuando quieres cerrar el navegador.

Gamificación

Arc también tiene pequeños detalles que podríamos considerar de gamificación (aunque se trate de un navegador y no sea muy común).

Cuando ves el navegador por primera vez, aparece una pequeña notificación abajo a la izquierda que te indica que has desbloqueado «un icono»:

El navegador de Arc, con el pequeño aviso de que has desbloqueado un nuevo icono (abajo a la izquierda).

Si haces clic se abre esta ventana, que esencialmente te dice que si quieres tener nuevos iconos (que equivale a personalización y a status, porque no todo el mundo los conseguirá) debes compartir Arc con varios amigos.

El navegador de Arc, con un modal en el que listan los iconos que puedes desbloquear si compartes el navegador con amigos.

Heurísticas de Tognazzini

Por supuesto, también hacen uso de algunas heurísticas de Tognazzini.

Eficiencia del usuario

Todas las interfaces de Arc son muy sencillas y claras. Los textos son fáciles de leer y de entender, característica que asegura que el usuario pueda conseguir su objetivo de forma rápida.Seguro que si lo piensas un poco, te vendrá a la cabeza algún producto digital que tiene más información de la necesaria…

Interfaces explorables

Queda claro que Arc está hecho para ser explorado. Dejando de lado las cuatro guías que hay al inicio, el resto está abierto para que cada cual lo explore como quiera. Sí se introducen ayudas contextuales y visuales poco intrusivas para guiar un poco y dar la información necesaria.

Ayuda contextual en Arc. Sutil y contextual.

Aprendizaje

Ligado a la heurística “Flexibilidad y eficiencia de uso” de Nielsen. Tognazzini afirma que los productos no deberían tener curva de aprendizaje.

Arc utiliza conceptos que ya comunicaron otros navegadores y productos, como el uso de carpetas, pestañas, vista dividida, etc. y lo empaquetan en un producto diferente.

Haciendo esto logran no tienen que enseñarte qué es una pestaña, por ejemplo.

Uso de metáforas

Hay varios elementos de la interfaz que permiten crear metáforas ligadas a un modelo conceptual. Por ejemplo, el icono de las “carpetas” y los que hay en la librería:

El navegador de Arc, con iconos que son metáforas y fáciles de entender.

Registro del estado

Independientemente de donde hagas clic, siempre sabes donde estás o donde has estado. Es fácil de ver y de identificar.

El navegador de Arc, con un diseño claro que siempre permite saber donde estás.

Navegación visible

La interfaz es lo más clara posible. Pese a que Arc significa un rediseño completo de como entendemos los navegadores hasta ahora, todo es muy claro y fácil de entender.

El navegador de Arc, con la web de Figma abierta.

Conclusiones

No debemos olvidar que Arc es un nuevo producto digital diseñado y desarrollado por profesionales que previamente han trabajado en grandes empresas tecnológicas (por eso aparecen Slack y Figma como aplicaciones que puedes seleccionar).

Esto significa que tienen el contexto y el conocimiento para diseñar y desarrollar un producto de estas características y que salga bien.

Está claro que el primer público objetivo al que se enfoca Arc es a quienes trabajamos en el sector tecnológico. Todo esto puede apreciarse solo con observar la propia interfaz, que utiliza animaciones, texturas y colores más vivos y que está llena de detalles.

A continuación te dejo con el vídeo que te describía al inicio de este artículo. Me gustó mucho ver esta charla en directo, y honestamente solo hizo que me gustara más el trabajo que hacen en The Browser Company:

Espero que te haya gustado este análisis de Arc (y si es así, ¡compártelo!). Si quieres más, o más en profundidad, escríbeme en Twitter o LinkedIn 🙂

¿Te ha gustado? ¡Compártelo! 🚀