Von schrottigen Clickbait-Seiten bis zu den ehrwürdigsten Publikationen sind Share-Buttons im Web allgegenwärtig. Und doch lässt sich argumentieren, dass diese Buttons nicht benötigt werden. Alle mobilen Browser – Firefox, Edge, Safari, Chrome, Opera Mini, UC Browser, Samsung Internet – erleichtern das Teilen von Inhalten direkt von ihren nativen Plattformen aus. Sie alle verfügen über eine integrierte Schaltfläche, um ein „Share Sheet“ aufzurufen – ein natives Dialogfeld zum Teilen von Inhalten. Sie können auch Text hervorheben, um einen Auszug zusammen mit dem Link zu teilen.
Da Benutzer standardmäßig teilen können, nehmen benutzerdefinierte Schaltflächen unnötigen Platz ein und lenken Benutzer möglicherweise von wichtigeren Aktionen ab? Und nutzen die Leute sie tatsächlich?
Eine (unwissenschaftliche) Umfrage unter 12.500 CSS-Tricks-Lesern ergab, dass 60 % der Leser niemals benutzerdefinierte Share-Buttons verwendeten. Das war im Jahr 2014, und die nativen Methoden zum Teilen haben sich seitdem nur verbessert. Eine aktuellere Umfrage von Smashing Magazine ergab im Wesentlichen dasselbe.
Wie oft verwenden Sie soziale Share-Buttons auf Ihrem Mobilgerät?
— Smashing Magazine (@smashingmag) 23. August 2019
Benutzer haben unterschiedliche technologische Kenntnisse. Nicht jeder kennt sich auf seinem eigenen Mobiltelefon oder Browser aus, was bedeutet, dass einige Benutzer Schwierigkeiten hätten, die native Share-Schaltfläche zu finden. Es lohnt sich auch, darüber nachzudenken, was auf dem Desktop passiert. Desktop-Browser bieten im Allgemeinen (mit Safari als einer Ausnahme) keine integrierte Freigabefunktion – Benutzer müssen den Link kopieren und in ihr bevorzugtes soziales Netzwerk einfügen.
Einige Daten deuten darauf hin, dass Click-Through-Raten relativ niedrig sind. Click-Through-Raten sind jedoch keine gute Metrik. Für technisch versierte Benutzer, die wissen, wie sie ohne Hilfe teilen können, können die Schaltflächen immer noch als Aufforderung dienen – eine visuelle Erinnerung, den Inhalt zu teilen. Unabhängig davon, wie der Link letztendlich geteilt wird, kann ein benutzerdefinierter Share-Button immer noch einen Hinweis oder einen kleinen Anstoß geben, um das Teilen zu bewirken. Aus diesem Grund ist die Messung von Klickraten auf den Schaltflächen selbst möglicherweise nicht ganz fair – Leute sehen vielleicht die Schaltfläche, fühlen sich ermutigt, den Inhalt zu teilen, verwenden dann aber die integrierte Share-Schaltfläche des Browsers. Eine bessere Metrik wäre, ob die Shares nach dem Hinzufügen von Share-Buttons zunehmen, unabhängig davon, wie sie geteilt werden.
Wir haben festgestellt, dass eine Share-Schaltfläche wahrscheinlich nützlich ist. Websites hatten traditionell separate Schaltflächen für zwei oder drei der beliebtesten sozialen Netzwerke. Mit einer neuartigen API können wir es besser machen. Während die Browserunterstützung derzeit auf Chrome für Android und Safari beschränkt ist, machen diese beiden Browser allein den Großteil des Webverkehrs aus.
Die Web Share API
Die Web Share API bietet eine einfache Möglichkeit, ein Share Sheet aufzurufen – das native UI-Element, das zum Teilen verwendet wird. Anstatt eine Standardliste beliebter sozialer Netzwerke zum Teilen anzubieten (in denen der Benutzer möglicherweise Mitglied ist oder nicht), sind die Optionen des Share Sheets auf den Einzelnen zugeschnitten. Nur die auf seinem Telefon installierten Anwendungen werden angezeigt. Anstelle einer einheitlichen Liste wird dem Benutzer nur die Option angezeigt, in Netzwerken zu teilen, die er tatsächlich nutzt – sei es Twitter und Facebook oder etwas Ausgefalleneres.
Dem Benutzer keine irrelevanten Netzwerke anzuzeigen, ist offensichtlich eine gute Sache. Leider wird dies dadurch ausgeglichen, dass einige Benutzer soziale Medien-Websites besuchen, anstatt sie als Apps herunterzuladen. Wenn Sie beispielsweise twitter.com nutzen, aber die Twitter-Anwendung nicht nativ installiert haben, wird Twitter nicht als Sharing-Option aufgeführt. Derzeit werden nur native Apps aufgeführt, aber PWAs werden zukünftig unterstützt.
websharebutton.addEventListener("click", function() {
navigator.share({
url: document.URL,
title: document.title,
text: "lorem ipsum..."
});
});Die API erfordert Benutzerinteraktion (z. B. einen Schaltflächenklick, wie im obigen Code gezeigt), um das Share Sheet aufzurufen. Das bedeutet, dass Sie nichts Anstößiges tun können, wie z. B. das Share Sheet beim Laden der Seite aufzurufen.
Der Text kann ein kurzer Auszug oder eine Zusammenfassung der Seite sein. Der Titel wird beim Teilen per E-Mail verwendet, ignoriert jedoch beim Teilen in sozialen Netzwerken.
Teilen auf dem Desktop
Obwohl wir mit der Web Share API für Mobilgeräte ziemlich zufrieden sind, ist ihre Implementierung für den Desktop derzeit auf Safari beschränkt und lässt zu wünschen übrig. (Chrome plant, die Unterstützung irgendwann zu integrieren, aber es gibt keinen klaren Zeitplan.)
Die angebotenen Optionen – Mail, Nachricht, Airdrop, Notizen, Erinnerungen – lassen soziale Netzwerke aus. Native Apps für Twitter und Facebook sind auf Handys üblich, aber auf anderen Geräten selten.
Anstatt sich für den Desktop auf die Web Share API zu verlassen, ist es relativ üblich, eine generische Share-Schaltfläche zu haben, die ein Modal öffnet, das mehr verschiedene Sharing-Optionen bietet. Diesen Ansatz verfolgen unter anderem YouTube, Instagram und Pinterest.
Facebook und Twitter machen den Großteil des Online-Sharings aus, daher scheint eine erschöpfende Liste sozialer Netzwerke zur Auswahl nicht notwendig zu sein. (Eine Option für Instagram wäre ideal, aber es ist derzeit technisch nicht möglich, von einer Website auf Instagram zu teilen.) Es ist auch relativ üblich, eine E-Mail-Option einzuschließen. Für alle, die einen webbasierten E-Mail-Client wie gmail.com oder outlook.com anstelle der standardmäßigen E-Mail-Anwendung des Betriebssystems verwenden, ist dies problematisch.
Viele Leute nutzen webbasierte E-Mail-Clients wie gmail.com oder outlook.com. Eine Schaltfläche zum Teilen per E-Mail öffnet die standardmäßige E-Mail-Anwendung des Betriebssystems. Benutzer erhalten eine Aufforderung zur Einrichtung, was viel mehr Aufwand ist, als einfach die URL zu kopieren und einzufügen. Daher ist es ratsam, die E-Mail-Option wegzulassen und stattdessen eine Schaltfläche zum Kopieren des Links in die Zwischenablage aufzunehmen, was nur unmerklich einfacher ist, als mit der Tastatur in der Adressleiste zu kopieren.
Die Aufforderung zur Einrichtung einer Anwendung, die ich nie benutze, ist viel mehr Aufwand, als einfach eine URL in meinen bevorzugten E-Mail-Client zu kopieren und einzufügen.
Auswahl eines Share-Icons
Es gibt kein universell standardisiertes Share-Icon – weit gefehlt. Während das Android-Symbol für langjährige iPhone-Benutzer möglicherweise nicht erkennbar ist, ist das iOS-Symbol problematisch. Es ist identisch mit dem Download-Icon – nur mit dem Pfeil in entgegengesetzter Richtung, was Hochladen und nicht Teilen bedeuten würde.
Bei giffgaff, wo ich arbeite, haben wir 69 unserer Kollegen befragt, ob sie das aktuelle iOS-Icon oder das aktuelle Android-Icon als Sharing bezeichnen. Das Android-Icon war mit 58 Stimmen ein überwältigender Gewinner. Obwohl unsere Stichprobe iPhone-Benutzer enthielt, sind einige langjährige iPhone-Benutzer mit diesem Symbol möglicherweise nicht vertraut (auch wenn es von einigen Websites übernommen wurde). Dann gibt es den Vorwärtspfeil, ein Icon, das von Apple aufgegeben wurde, aber anderswo übernommen wurde. Dieses Symbol erinnert an das Icon zum Weiterleiten einer E-Mail und wurde durch seine Verwendung auf youtube.com wiedererkennbar gemacht. Das Icon wurde 2017 von Microsoft übernommen, nachdem A/B-Tests ein hohes Maß an Vertrautheit ergaben.
Es ist auch möglich, einen kontextbezogenen Ansatz zu wählen. Twitter ändert das verwendete Icon je nach Plattform des Benutzers. Diesen Ansatz verfolgt auch die Icon-Bibliothek Ionicons.
Angesichts des Mangels an einem universell verständlichen Icon scheint dies ein guter Ansatz zu sein. Alternativ sollten Sie sicherstellen, dass neben dem Icon eine Beschriftung angebracht ist, um dem Benutzer alles klar zu erklären.