Aufbau eines guten Download... Buttons?

Die Semantik, die HTML-Elementen innewohnt, sagt uns, wofür wir sie verwenden sollen. Brauchen Sie eine Überschrift? Dann nehmen Sie ein Überschriftenelement. Wollen Sie einen Absatz? Unser treuer Freund <p> ist da, loyal wie eh und je. Brauchen Sie einen Download? Nun, Sie werden wollen... hm.

Was beschreibt einen Download am besten? Ist es eine ausgelöste Aktion und gehört daher in den Bereich des <button>-Elements? Oder ist es ein Ziel und wird daher am besten mit einem <a>-Element beschrieben?

Buttons tun Dinge, Links gehen Orte

Es scheint viel Verwirrung zu geben, wann man Buttons und wann man Links verwenden soll. Ähnlich wie bei Tabs versus Leerzeichen oder Pullover-Hoodies versus Reißverschluss-Hoodies, mag diese Debatte endlos wüten.

Der W3C gibt uns jedoch einen wichtigen Hinweis, wer Recht hat: das download-Attribut.

Was nun?

Das Internet, wie wir es kennen, könnte ohne Links nicht existieren. Sie bilden das semantische Web, den schrecklich wunderbaren, wunderbar schrecklichen, verhedderten Informationsball, der es Ihnen ermöglicht, diesen Artikel genau in diesem Moment zu lesen.

Wie alle anderen Elemente können Ankerlinks durch globale Attribute von HTML modifiziert werden. Ankerlinkelemente besitzen auch eine Reihe von eindeutigen Attributen, die steuern, wie sie mit anderen Dokumenten und Dateien verbunden werden.

Eines dieser Attribute heißt download. Es teilt dem Browser mit, dass das Ziel des Links auf Ihrem Gerät gespeichert werden soll, anstatt es aufzurufen. Sie "navigieren" immer noch zu der Datei, nur dass Sie anstatt sie anzusehen, eine Kopie für Ihren eigenen Gebrauch herunterladen.

Jede Art von Datei kann ein Download sein! Das schließt sogar HTML ein, etwas, das der Browser normalerweise anzeigen würde. Die Anwesenheit des Attributs ist im Grunde ein vom Menschen erstelltes Flag, das dem Browser sagt, er soll versuchen, etwas, das er abgerufen hat, nicht zu rendern, sondern einfach zu speichern.

<a download href="recipe.html">
  Download recipe
</a>

Das wirft einen sehr wichtigen Punkt auf: Wir können nicht die Gründe jedes Benutzers kennen, warum er unsere Website besucht, aber wir können die uns zur Verfügung stehenden Werkzeuge nutzen, um ihm auf seinem Weg zu helfen. Wenn das bedeutet, ein HTML-Dokument zur Offline-Nutzung zu speichern, sind wir in der Lage, das Erlebnis so einfach wie möglich zu gestalten.

Weitere Beweise

Immer noch nicht überzeugt? Hier sind noch ein paar Denkanstöße.

Progressive Enhancement

JavaScript ist zerbrechlicher als wir zugeben möchten. <a>-Elemente funktionieren auch dann, wenn JavaScript ausfällt. Wenn Sie Anker für Ihren Download verwenden, kann eine Person auf das zugreifen, was sie benötigt, selbst in suboptimalen Situationen.

Eine robuste Lösung ist immer die wünschenswerteste – in einer Krisenzeit kann sie sogar Leben retten. Das mag hyperbolisch klingen, aber eine stabile Kopie von etwas, das offline funktioniert, könnte in einer Zeit der Not den Unterschied ausmachen.

Semantik und Barrierefreiheit

Mein Freund Scott, der dafür bezahlt wird, solche Dinge zu wissen, sagt uns:

Die Debatte darüber, ob ein Button oder ein Link zum Herunterladen einer Datei verwendet werden sollte, ist etwas albern, da der gesamte Zweck eines Links schon immer darin bestand, Inhalte herunterzuladen. HTML ist eine Datei, und wie alle anderen Dateien muss sie von einem Server abgerufen und heruntergeladen werden, bevor sie einem Benutzer präsentiert werden kann.

Der Unterschied zwischen einer Photoshop-Datei, HTML und anderen verstandenen Mediendateien besteht darin, dass ein Browser die letzteren beiden automatisch anzeigt. Wenn man auf eine Photoshop .psd-Datei verlinken würde, würde der Browser einen Dokumentenwechsel einleiten, um die Datei zu rendern, und wahrscheinlich so etwas wie "lol wut?" sagen und dann einfach den OS-Download-Prompt starten.

Die Verwirrung scheint daher zu rühren, dass Entwickler zu wörtlich nehmen "Links gehen zu Orten, Buttons führen Aktionen aus." Ja, das stimmt, aber Links gehen tatsächlich nirgendwohin. Sie rufen Informationen ab und laden sie herunter. Buttons führen Aktionen aus, aber sie "holen" nicht von sich aus Dokumente. Während sie zum Abrufen von Daten verwendet werden können, dient dies oft dazu, den Zustand eines aktuellen Dokuments zu ändern, nicht ein neues abzurufen und zu rendern. Sie können Daten abrufen, in Bezug auf die Funktionalität von formular, aber dies geschieht weiterhin im Kontext der Aktualisierung eines Webdokuments, nicht des Herunterladens einer einzelnen Datei.

Kurz gesagt, das download-Attribut ist aus gutem Grund einzigartig für Ankerlinks. download erweitert die inhärente Funktionalität des Links zum Abrufen von Daten. Es umgeht den Versuch, die Datei im Browser zu rendern, und sagt stattdessen: „Wissen Sie was? Ich speichere das einfach für später…“

Danke, Scott!

Gestaltung eines guten Download-Links

Das Standarderlebnis beim Herunterladen einer Datei kann befremdlich sein – es ist normalerweise kein Teil unseres normalen Browserverhaltens. Der Benutzer muss sein mentales Modell vom schnellen Wechseln von Seite zu Seite und dem Ausfüllen von Formularen zum Navigieren in einem Dateisystem und zum Entpacken komprimierter Archive ändern. Für weniger technisch versierte Personen kann dies ein desorientierender und frustrierender Kontextwechsel sein.

Als verantwortungsbewusste Designer und Entwickler möchten wir das Erlebnis der Interaktion mit einem Download-Link so gut wie möglich gestalten. Da wir das Verhalten des Downloads im Browser selbst nicht ändern können, sollten wir das umgebende Benutzererlebnis so transparent und reibungslos wie möglich gestalten.

Sagen Sie mir, was mich erwartet

Geben Sie dem Benutzer so viele Informationen wie möglich, um ihn darüber zu informieren, was als Nächstes passieren wird. Das Antizipieren und Beantworten der folgenden Fragen kann helfen.

Was?

Verb plus Nomen ist die gewinnbringende Kombination. Beschreiben Sie, was der Link tut und was er Ihnen bringt.

<a download href="downloads/fonts.zip">
  Download Fonts
</a>

Für sich genommen würde das Verb Download nur signalisieren, welche Aktion ausgelöst wird, wenn der Link aktiviert wird. Die Einbeziehung des Nomens Fonts ist großartig, um die Mehrdeutigkeit darüber zu beseitigen, was Sie erhalten werden.

In Fällen, in denen es mehrere Download-Links auf einer Seite gibt, hilft die Anwesenheit des Nomens Benutzern, die mit einem Screenreader navigieren. Hier ist, wie es klingen würde, wenn Sie eine Seite durchsuchen würden, die acht wortlose Download-Links hat:

Wissen Sie, welcher dieser acht Links Ihnen das bringt, was Sie wollen? Nein? Das ist nicht gut. Ebenso wird die Anwesenheit des download-Attributs auf einem <a>-Element von Screenreadern nicht angekündigt, daher ist das Verb ebenso wichtig. Es ist wichtig, Kontext zu liefern!

Denken Sie daran, dass Offensichtliches immer gewinnt. Obwohl es möglich ist, Ihre Compliance-Prüfungen zu bestehen, indem Sie eine visuell versteckte CSS-Klasse verwenden, um den Nomen-Teil Ihres Downloads zu verbergen, belastet dies Ihre Benutzer kognitiv zusätzlich. Ein versteckter Nomen opfert auch Funktionalität wie die Suchfunktion auf der Seite des Browsers.

Wie lange?

KB, MB, GB, TB. Wir reden nicht von Kobe Beef, Mega Bloks, Ginkgo Biloba oder Tuberkulose. Wir reden von der Größe des Downloads und damit davon, wie lange der Download dauern wird.

Kennen Sie Ihre Zielgruppe. Eine Datei mit einer Größe von 128 KB wird viel schneller heruntergeladen als eine Datei mit einer Größe von 2 GB, obwohl ihre Zahl drastisch größer ist. Es sei denn, Ihre Zielgruppe ist mit der Terminologie zur Beschreibung von Dateigrößen vertraut, versteht sie möglicherweise nicht, worauf sie sich einlässt, wenn Sie ihr nur die Größe der Nutzdaten mitteilen.

Bei größeren Dateien kann die Wartezeit besonders problematisch sein. Ein Standard-Download ist eine Alles-oder-Nichts-Angelegenheit – Unterbrechungen können ihn beschädigen und unbrauchbar machen. Schlimmer noch, es kann wertvolle Daten auf einem datierten Datenplan verschwenden, ein leider nur allzu relevantes Problem.

Es ist auch unglaublich schwierig, die aktuelle Verbindungsgeschwindigkeit einer Person genau zu ermitteln. Während die Network Information API vielversprechend aussieht, ist die aktuelle Browserunterstützung nicht gerade berauschend.

Es gibt versteckte Nuancen in der Lücke zwischen gemeldeter und tatsächlicher Verbindung. Eine schnelle 5G-Verbindung kann im selben Moment abbrechen, in dem jemand in einen Tunnel einfährt oder zu einem Ort in seinem Haus geht, an dem die Abdeckung nicht gut ist. Das beginnt noch nicht einmal mit den Komplexitäten der Drosselung, einem leider nur allzu realen Problem.

Um diese Probleme zu lösen, wenden Sie ein wenig Microcopy an.

Siehe den Stift Download movie von Eric Bailey (@ericwbailey) auf CodePen.

Ihr Benutzer wird die Besonderheiten seiner Verbindungsqualität besser kennen als Sie es jemals tun werden. Jetzt hat er das, was er braucht, um eine fundierte Entscheidung zu treffen, mit ein wenig absichtlicher Mehrdeutigkeit, um die Erwartungen zu mäßigen.

Aber was ist mit Fortschrittsbalken?

Fortschrittsbalken sind UI-Elemente, die zeigen, wie nahe eine Rechenaufgabe am Abschluss ist. Für UX-Designer sind sie ein Grundnahrungsmittel (und eine Gelegenheit, mit der wahrgenommenen Leistung zu spielen). Ich bin jedoch vorsichtig, sie bei Downloads einzusetzen.

Im besten Fall sind sie redundant. Browser stellen bereits UI zur Verfügung, um anzuzeigen, wie der Download fortschreitet. Im schlimmsten Fall sind sie eine verwirrende Haftung. Das Hinzufügen von ihnen führt zu unnötigen Implementierungs- und Wartungskomplikationen – insbesondere in Kombination mit den oben genannten Problemen bei der Bestimmung von Verbindungsgeschwindigkeit und -qualität.

Warum?

Verkaufen Sie dem Benutzer, warum er sich darum kümmern sollte. Wird es Frustration beseitigen, indem ein bestehendes Problem behoben wird? Wird es die Freude steigern, indem eine neue Funktion hinzugefügt wird? Wird es Sicherheit geben, indem Dinge sicherer gemacht werden? Obwohl nicht jeder Download die Beantwortung der Frage "Warum?" benötigt, ist es gut, sie für Nutzdaten mit einem komplizierten oder esoterischen Zweck zu haben.

Wenn ich Router-Firmware herunterlade, verstehe ich vielleicht nicht (oder kümmere mich nicht um) die Details dessen, was das Update hinter den Kulissen tut. Eineige High-Level-Kommunikation darüber, warum ich das Unterfangen durchführen muss, wird jedoch viel bewirken.

Siehe den Stift Describe what the download does von Eric Bailey (@ericwbailey) auf CodePen.

Was als Nächstes?

Anweisungen, was nach Abschluss des Downloads zu tun ist, können nützlich sein. Wiederum ist das Wissen um Ihr Publikum entscheidend.

Bei unserem Router-Beispiel ist es durchaus möglich, dass weniger technisch versierte Personen auf der Produkt-Supportseite landen. Es ist auch sehr wahrscheinlich, dass sie sich in einem emotional belasteten Zustand befinden, wenn sie ankommen. Nachdem ein Download initiiert wurde, können Schritt-für-Schritt-Informationen zur Installation der neuen Firmware sowie Links zu relevanten Support-Ressourcen viel dazu beitragen, negative Gefühle zu lindern.

Das ist praktische Empathie. Das Antizipieren der Bedürfnisse und des emotionalen Zustands des Benutzers und das präventive Anbieten von Lösungen hat direkte Auswirkungen auf Dinge wie die Reduzierung kostspieliger Supportanrufe. Diese Einsparungen bedeuten, dass organisatorische Ressourcen für andere wichtige Unternehmungen umverteilt werden können.

Ab zum Code

Signal, dass es anders ist

Links verwenden Unterstreichungen.

Eine gute Praxis sowohl aus Sicht der Benutzerfreundlichkeit als auch der Barrierefreiheit ist es, eine Unterscheidung zwischen internen und externen Links zu schaffen. Das bedeutet, eine Anzeige zu erstellen, dass ein Link etwas anderes tut, als Sie an einen anderen Ort auf Ihrer Website oder Webanwendung zu bringen. Für Links, die von der Website wegführen, ist die Verwendung eines Pfeils, der aus einer Box ausbricht, eine De-facto-Standardpraxis. Für Downloads ist ein nach unten gerichteter Pfeil der De-facto-Standard.

Manche mögen der Meinung sein, dass die Anwesenheit des download-Attributs redundant ist, wenn es auf Links angewendet wird, die der Browser bereits kennt, um sie zu speichern. Ich widerspreche.

Neben dem unzweideutigen semantischen Marker im HTML kann das download-Attribut als einfacher und eleganter Styling-Haken dienen. CSS-Attributselektoren – Code, der es uns ermöglicht, Styling basierend auf den Eigenschaften zu erstellen, die HTML-Elemente beschreiben – erlauben es uns, jeden Link, der ein Download ist, anzusprechen und ihn zu stylen, ohne eine spezielle Klasse hinzufügen zu müssen.

a[download] {
  color: hsla(216, 70%, 53%, 1);
  text-decoration: underline;
}

a[download]::before {
  content: url('../icons/icon-download.svg');
  height: 1em;
  position: relative;
  top: 0.75em;
  right: 0.5em;
  width: 1em;
}

a[download]:hover,
a[download]:focus {
  text-decoration: none;
}

In Kombination mit dem Text, der den Download beschreibt, kommuniziert die Anwesenheit des Icons klar, dass beim Aktivieren dieses Links Download-Verhalten folgt. Es bietet auch eine zusätzliche Zielfläche, ideal für Touch-Geräte.

Die gezielte Ansprache sowohl der Anwesenheit des download-Attributs als auch der Dateierweiterung am Ende des Strings im href-Attribut ermöglicht es uns, noch ausgefeilter zu werden. Wir können die Kaskade nutzen, um eine konsistente Behandlung für alle Icons einzurichten, aber das Icon selbst pro Dateityp ändern. Das ist großartig für Situationen, in denen es mehrere Arten von herunterladbaren Elementen auf einer einzigen Seite gibt.

Siehe den Stift Download icons von Eric Bailey (@ericwbailey) auf CodePen.

Ich pflege eine Liste gängiger Dateitypen, falls Sie einen Ausgangspunkt suchen. Denken Sie daran, nur die benötigten Selektoren einzuschließen, um unnötige Bloat in Ihrem Produktions-CSS zu vermeiden. Wenn Ihre Website oder Webanwendung viele Icons und/oder viel komplexes Zustandsmanagement aufweist, sollten Sie stattdessen ein SVG-Iconsystem verwenden. Es verbessert die Leistung – denken Sie nur daran, es barrierefrei zu gestalten!

Nennen Sie die Nutzdaten

Das download-Attribut kann einen optionalen Wert annehmen, der es dem Autor ermöglicht, einen benutzerdefinierten, menschenfreundlichen Namen für die heruntergeladene Datei zu erstellen. In diesem Beispiel ändern wir den Namen einer Podcast-Episode in etwas, das bei der Übertragung auf das Gerät des Benutzers sinnvoll ist, während etwas, das für den Produzenten des Podcasts sinnvoll ist, beibehalten wird.

<a 
  download="Pod-People-Podcast-Episode-12-Feed-Me-Seymour.mp3"
  href="https://www.dropbox.com/s/txf5933cwxhv1so6/12-final-v5-RADIO-EDIT.m4a?dl=0">
  Download Episode 12
</a>

Für komplexe Websites ermöglicht uns dieses Attribut, Downloads zu erstellen, die für die Person, die sie anfordert, sinnvoll sind, und nutzt gleichzeitig Funktionen wie CDNs und dynamisch generierte Dateien. Keine komplizierte Backend-Magie hier, nur ein wenig Vorlagenlogik.

<a 
  href="https://s3-us-west-2.amazonaws.com/ky22o6s6g8be80bak577b17e34bb93cex3.pdf"
  download="{{ user.name | slugify }}-{{ 'now' | date: "%Y" }}-tax-return.pdf">
  Download your {{ 'now' | date: "%Y" }} Tax Return
</a>

Material Ehrlichkeit

Wenn Inhalte so aussehen und sich verhalten, wie die HTML-Elemente, die sie beschreiben, ist das großartig für die Verstärkung der externen Konsistenz. Extern konsistente Inhalte sind großartig, um sicherzustellen, dass die Leute Ihre Website oder Webanwendung nutzen können und werden. Nutzung ist großartig für Engagement, eine Metrik, die Geschäftsleute glücklich macht.

Und doch sind Link-ähnliche Buttons und Button-ähnliche Links überall.

Wir können die Schuld für diese semantische Drift eindeutig auf den Trend schieben. Designer und Entwickler, die begierig darauf sind, das Neueste und Beste auszuprobieren, laden Mehrdeutigkeit mit offenen Armen ein. Die Führung verfolgt wahrgenommenen Wert, um relevant zu bleiben.

Das muss nicht sein. Websites können sowohl schön als auch zugänglich sein. Semantik und aktuelle Frameworks/Ästhetik sind nicht gegenseitig ausschließend. Nehmen Sie sich ein wenig Zeit, um die Grundlagen zu überprüfen – Sie werden vielleicht etwas Einfaches entdecken, das jedem hilft, das zu bekommen, was er braucht, mit ein wenig weniger Aufwand.