Desde sitios basura de clickbait hasta las publicaciones más augustas, los botones para compartir han sido omnipresentes en la web durante mucho tiempo. Y, sin embargo, es discutible que estos botones no sean necesarios. Todos los navegadores móviles (Firefox, Edge, Safari, Chrome, Opera Mini, UC Browser, Samsung Internet) facilitan compartir contenido directamente desde sus plataformas nativas. Todos cuentan con un botón incorporado para mostrar una “hoja para compartir”, un cuadro de diálogo nativo para compartir contenido. También puede resaltar texto para compartir un extracto junto con el enlace.
El omnipresente botón de compartir, como se ve en la BBC, Wired, BuzzFeed, PBS, The Wall Street Journal y otros lugares.
Dado que los usuarios pueden compartir de forma predeterminada, ¿los botones personalizados ocupan espacio innecesario y pueden distraer a los usuarios de acciones más importantes? ¿Y la gente realmente los usa?
Una encuesta (no científica) de 12,500 lectores de Programar Plusencontró que el 60% de sus lectores nunca usaron botones personalizados para compartir. Eso fue en 2014 y los métodos nativos para compartir solo han mejorado desde entonces. Una encuesta más reciente de Smashing Magazine encontró más o menos lo mismo.
¿Con qué frecuencia utiliza los botones para compartir en redes sociales en su dispositivo móvil?
— Revista Smashing (@smashingmag) 23 de agosto de 2019
Los usuarios vienen con diferentes habilidades tecnológicas. No todo el mundo conoce su propio teléfono móvil o navegador, lo que significa que algunos usuarios tendrían dificultades para encontrar el botón de compartir nativo. También vale la pena pensar en lo que sucede en el escritorio. Los navegadores de escritorio en general (con Safari como una excepción) no ofrecen una función integrada para compartir: los usuarios deben copiar y pegar el enlace en la red social que elijan.
Algunos datos sugieren que las tasas de clics son relativamente bajas. Sin embargo, las tasas de clics no son la mejor métrica. Para los usuarios con conocimientos técnicos que saben cómo compartir sin ayuda, los botones aún pueden actuar como un aviso, un recordatorio visual para compartir el contenido. Independientemente de cómo se comparta finalmente el enlace, un botón de compartir personalizado aún puede proporcionar una pista o un pequeño empujón para provocar el intercambio. Por esta razón, medir las tasas de clics en los botones en sí puede no ser del todo justo: las personas pueden ver el botón, sentirse animadas a compartir el contenido, pero luego usar el botón de compartir integrado en los navegadores. Una mejor métrica sería si las acciones aumentan después de agregar los botones para compartir, independientemente de cómo se compartan.
Hemos establecido que tener un botón para compartir probablemente sea útil. Los sitios web tradicionalmente han presentado botones separados para dos o tres de las redes sociales más populares. Con una API nueva, podemos hacerlo mejor. Si bien la compatibilidad con navegadores actualmente se limita a Chrome para Android y Safari, esos dos navegadores por sí solos constituyen la gran mayoría del tráfico web.
La API para compartir en la Web
La Web Share API ofrece una forma sencilla de abrir una hoja de uso compartido: la parte nativa de la interfaz de usuario que se usa para compartir. En lugar de ofrecer una lista estándar de redes sociales populares para compartir (de las que el usuario puede ser miembro o no), las opciones de la hoja para compartir se adaptan a la persona. Solo se mostrarán las aplicaciones que hayan instalado en su teléfono. En lugar de una lista uniforme, al usuario solo se le mostrará la opción de compartir en las redes que realmente usa, ya sea Twitter y Facebook o algo más esotérico.
No mostrar al usuario redes irrelevantes es obviamente algo bueno. Desafortunadamente, esto se ve contrarrestado por el hecho de que algunos usuarios visitan sitios web de redes sociales en lugar de descargarlos como aplicaciones. Si usa twitter.com, por ejemplo, pero no ha instalado la aplicación de Twitter de forma nativa, entonces Twitter no aparecerá como una opción para compartir. Actualmente, solo se enumeran las aplicaciones nativas, pero las PWA serán compatibles en el futuro.
websharebutton.addEventListener("click", function() {
navigator.share({
url: document.URL,
title: document.title,
text: "lorem ipsum..."
});
});La API requiere la interacción del usuario (como hacer clic en un botón como se muestra en el código anterior) para que aparezca la hoja para compartir. Esto significa que no puede hacer algo desagradable como abrir la hoja para compartir en la carga de la página.
El texto puede ser un breve extracto o un resumen de la página. El título se usa cuando se comparte por correo electrónico, pero se ignorará cuando se comparta en redes sociales.
Cuadro de diálogo de hoja de acciones nativa en Android (izquierda) e iOS (derecha). Las aplicaciones enumeradas aquí dependen de las aplicaciones que haya instalado en su dispositivo.
Compartir en el escritorio
Si bien estamos muy contentos con la API Web Share para dispositivos móviles, su implementación para computadoras de escritorio actualmente se limita a Safari y deja mucho que desear. (Chrome planea enviar soporte eventualmente, pero no hay una escala de tiempo clara).
Las opciones proporcionadas (Correo, Mensaje, Airdrop, Notas, Recordatorios) omiten las redes sociales. Las aplicaciones nativas para Twitter y Facebook son comunes en los teléfonos, pero raras en otros dispositivos.
En lugar de confiar en Web Share API para escritorio, es relativamente común tener un botón de compartir genérico que abre un modal que ofrece más opciones para compartir. Este es el enfoque adoptado por YouTube, Instagram y Pinterest, entre otros.
Instagram (izquierda) comparado con YouTube (derecha)
Facebook y Twitter representan la gran mayoría de los intercambios en línea, por lo que no parece necesario ofrecer una lista exhaustiva de redes sociales para elegir. (Una opción para Instagram sería ideal, pero actualmente no es técnicamente posible compartir en Instagram desde un sitio web). También es relativamente común incluir una opción de correo electrónico. Para cualquiera que use un cliente de correo electrónico basado en la web como gmail.com o Outlook.com en lugar de la aplicación de correo electrónico predeterminada del sistema operativo, esto es problemático.
Mucha gente hace uso de gmail.com o Outlook.com del cliente de correo electrónico basado en la web. Un botón de compartir por correo electrónico abrirá la aplicación de correo electrónico predeterminada del sistema operativo. Los usuarios serán recibidos con un aviso para configurar esto, lo cual es mucho más esfuerzo que simplemente copiar y pegar la URL. Por lo tanto, es recomendable omitir la opción de correo electrónico y en su lugar incluir un botón para copiar el enlace al portapapeles, que es solo infinitesimalmente más fácil que hacer una copia en la barra de direcciones con el teclado.
Un aviso para configurar la aplicación de correo electrónico predeterminada en Mac
Pedirle al usuario que configure una aplicación que nunca usa es mucho más esfuerzo que simplemente copiar y pegar una URL en mi cliente de correo electrónico preferido.
Elegir un icono de compartir
Ha habido muchos otros íconos de acciones a lo largo de los años.
No existe un icono universal estandarizado para compartir, ni mucho menos. Si bien es posible que el símbolo de Android no sea reconocible para los usuarios de iPhone a largo plazo, el ícono de iOS es problemático. Es idéntico al ícono de descarga, pero con la flecha en la dirección opuesta, lo que implicaría cargar, no compartir.
Donde trabajo en giffgaff, encuestamos a 69 de nuestros colegas sobre si reconocían el ícono actual de iOS o el ícono actual de Android como representación de compartir. El ícono de Android fue un abrumador ganador con 58 votos. Si bien nuestra muestra incluyó usuarios de iPhone, algunos usuarios de iPhone a largo plazo pueden no estar familiarizados con este símbolo (aunque ha sido adoptado por algunos sitios web). Luego está la flecha hacia adelante, un ícono que fue abandonado por Apple, pero adoptado en otros lugares. Con reminiscencias del ícono para reenviar un correo electrónico, este símbolo se ha vuelto reconocible por su uso en youtube.com. Microsoft adoptó el icono en 2017 después de que las pruebas A/B encontraran un alto nivel de familiaridad.
También es posible adoptar un enfoque contextual. Twitter cambiará el ícono utilizado dependiendo de la plataforma del usuario. Este enfoque también lo adopta la biblioteca de iconos Ionicons.
Android (izquierda) y Mac/iOS (derecha)
Dada la falta de un ícono universalmente entendido, este parece ser un buen enfoque. Alternativamente, asegúrese de incluir una etiqueta junto al icono para explicarle realmente las cosas al usuario.