it-swarm.com.de

Lassen Sie Benutzer den Download-Button verwenden, anstatt mit der rechten Maustaste auf Speichern zu klicken

Als Teil unseres Systems, einer Webanwendung, haben wir einen Bildbetrachter. Bisher haben wir immer das Bild in voller Auflösung angezeigt, es jedoch mit CSS verkleinert, um es an die Seite anzupassen. Aus Leistungsgründen zeigen wir jetzt eine richtig skalierte Version des Bildes mit der Option an, das Bild in voller Auflösung mit einer Schaltfläche unter dem Bild herunterzuladen.

Als Teil des Workflows der Benutzer müssen sie manchmal dieses Bild in voller Auflösung herunterladen, um es an ein anderes System zu senden. Das Problem ist, dass viele Benutzer einfach mit der rechten Maustaste auf das Bild klicken und auf "Bild speichern unter" klicken. Früher funktionierte dies einwandfrei, jetzt erhalten sie stattdessen ein Bild mit niedriger Auflösung. Die Benutzer bemerken dies nicht und dies verursacht später Probleme. Wie können wir Benutzer von diesem Verhalten abhalten? Sicher, wir könnten ihnen sagen, dass sie es nicht tun sollen, aber das fühlt sich nicht sehr skalierbar an. Meine bisher am wenigsten schlechte Idee ist es, den Rechtsklick im Browser zu entführen, aber dies ist A) keine super nette Benutzeroberfläche und B) nicht sicher, ob alle Fälle abgedeckt sind.

Kurz gesagt: Wie können wir Benutzer dazu bringen, den Download-Button zu verwenden, anstatt das Miniaturbild mit niedriger Auflösung zu speichern?

103
Zeta Two

Sobald der Benutzer mit der Maus über das Bild fährt, fügen Sie eine Überlagerung hinzu, mit der er auf die Download-Schaltfläche klicken kann.

(enter image description here

Dies ist nur ein Beispiel. Sie können dies subtiler gestalten, aber ich denke, es wird gut mit dem aktuellen Verhalten Ihrer Benutzer funktionieren. Da sie mit der Maus über das Bild fahren, um ihre "Rechtsklick-Problemumgehung" zu starten, wird die Download-Option angezeigt.

Sie sollten weiterhin einen Download-Button haben, der sichtbar ist, ohne aus Sicherheitsgründen über das Bild fahren zu müssen.

182

Machen Sie nichts mit dem Rechtsklick. Es ist ein erwartetes Verhalten auf Browserebene. Sie wissen, dass Sie den Rechtsklick nicht "entführen" sollten, oder Sie würden es nicht als Entführung bezeichnen.

Bieten Sie den Benutzern ein besseres Werkzeug.

Wenn Ihre Benutzer Bilder im Wesentlichen selbst außerhalb Ihrer App speichern, darf Ihre App ihnen nicht dabei helfen, diese Bilder zu speichern. Niemand möchte Bilder einzeln speichern.

Geben Sie ihnen die Möglichkeit, alle gewünschten Bilder auszuwählen und alle Bilder gleichzeitig herunterzuladen. Geben Sie den Benutzern ein gutes Werkzeug und zeigen Sie ihnen, wie es funktioniert, bevor sie das erste Bild speichern möchten. Geben Sie ihnen eine Download-Liste, machen Sie es einfach, Bilder hinzuzufügen, zeigen Sie ihnen ihre Bilder in der Liste und geben Sie ihnen eine einfache Möglichkeit, sie alle am Ende in einer Datei herunterzuladen.

Beschreiben Sie die Dateinamen des Bildes

Machen Sie die Bilddateinamen informativ. Sie können mit Benutzern im Dateinamen kommunizieren. Fügen Sie die Abmessungen in den Dateinamen ein und fügen Sie Kategorisierungen oder was auch immer hinzu, die dem Benutzer die Größe des Bildes in Ihrem System mitteilen. Wenn ein Benutzer mit der rechten Maustaste auf ein Bild klickt, zeigt der Dateiname an, dass es eine bessere Datei gibt.

Produktname-Miniaturbild-klein-beschnitten-niedrig-Auflösung-400x400.jpg

Produktname-Site-Beispiel-Bild-nicht-zum-Speichern.jpg

Die ordnungsgemäß heruntergeladenen Dateien können unterschiedlich benannt werden.

73
moot

Es gibt einen Grund, warum Ihr Benutzer die Download-Schaltfläche nicht auswählt, und Usability-Tests sind der beste Weg, um festzustellen, warum. Falls es jedoch darum geht, die Download-Schaltfläche an einer Stelle zu positionieren, an der ein Benutzer möglicherweise etwas versteckt in der Benutzeroberfläche sieht, können die folgenden Optionen/Beispiele hilfreich sein:

  • Sie können ein Overlay-Bild für die Download-Schaltfläche (in der unteren rechten Ecke) hinzufügen, das einen visuellen Hinweis für die Download-Schaltfläche bietet.

(enter image description here

Icon von Freepik via Flaticon und zufällig ausgewähltes Bild aus Unsplash.

  • Und wenn Sie mehrere Auflösungen zum Herunterladen hinzufügen möchten, können Sie einen ähnlichen Ansatz wie Flickr verwenden, um ein Popover mit einer Liste von Auflösungsoptionen (z. B. 600 x 400, 1200 x 600) anzuzeigen, die der Benutzer verwenden kann Download, wenn auf die Download-Schaltfläche geklickt wird.

(enter image description here Screenshot von Flickr.

46
truleighsyd

Als engagierter Benutzer mit Rechtsklick-Speicher kann ich sagen, dass ich mich normalerweise nicht mit einem Download-Button beschäftigen würde, und ich würde annehmen, dass ich die Vollversion gespeichert habe (und mich auf der Website leicht ärgern würde, wenn ich feststellen würde, dass ich es nicht getan habe ).

Hier gibt es zwei Probleme. Das erste ist, dass Ihr Bild nicht als Miniaturbild gekennzeichnet ist (oder sich nicht selbst identifiziert). Wenn dies nicht der Fall ist, werde ich erwarten, dass es sich um das vollständige Bild handelt, und meine Erwartung wird nicht erfüllt. Schlechte UX.

Das zweite ist, dass die richtige Lösung niemals darin besteht, mit der rechten Maustaste zu entführen. Das ist noch ärgerlicher.

Die Schwebevorschläge sind hier am nächsten. Sagen Sie dem Benutzer, dass dies eine Miniaturansicht ist. nd bieten eine Möglichkeit, das vollständige Bild anzuzeigen und/oder herunterzuladen (oder beides).

Sie können dies auf subtile Weise tun, indem Sie ein halbtransparentes Daumensymbol oder einen Breakout-Pfeil in der Bildecke, ein "Vollbild" - oder Vollbildsymbol verwenden oder indem Sie mit einem Rechtsklick auf das Bild eine Bildansicht des Vollbilds mit beiden Rechtsklicks überlagern Arbeiten und ein DL Button. Es gibt viele Möglichkeiten, um diese Arbeit zu machen, beispielhaft auf vielen Websites.

26
Stilez

Ich möchte darauf hinweisen, wie Wikipedia das macht.

Wenn Sie ein Foto durch Klicken vergrößern auf Wikipedia darauf klicken, werden Ihnen das Foto, einige Details dazu und ein unauffälliger "Download" -Button angezeigt.

Wenn Sie mit der rechten Maustaste auf das angezeigte Foto klicken, wird die Schaltfläche "Herunterladen" für Sie gedrückt und "Originaldatei herunterladen" angezeigt. (

Dies ist zwar nicht der beste Weg, zeigt jedoch ein Beispiel dafür, wie Sie es in einem anderen Szenario tun könnten.

22

Viele gute Antworten, aber hier ist eine Antwort KISS Antwort. Sie erhalten das Beste aus beiden Welten - schnelle Lade- und Renderzeiten und erwartetes Verhalten.

<div style='background-image:url("/path/01-thumb.jpg");display:inline-block;'>
  <img  width=99 height=99 onmousedown='load(this,"/path/01.jpg")' ontouchstart='load(this,"/path/01.jpg")'>
</div>
<noscript>
  <a href="/path/01.jpg">
    <img title="click to get full image" src="download-button.png">
  </a>
</noscript>

<script>
  function load(o,s){
    if (!o.src){
      o.src=s;
      /* todo: fix busy loop*/
      while (!o.complete) /* act busy */;
    }
  }
</script>

Erläuterung:

  • Dies verwendet ein Miniaturbild als Hintergrund Bild, das Ihnen kein Kontextmenü zum Herunterladen des Miniaturbilds bietet.
  • Das leere img-Tag (no src =) füllt die angegebene Breite und Höhe (verwenden Sie stattdessen CSS, wenn alle dieselbe Dimension haben).
  • Das Ereignis onmousedown Setzt das src-Attribut auf das Bild in voller Größe, bevor das Kontextmenü angezeigt wird, sodass es sich so verhält, als ob das Bild in voller Größe geladen wurde. (Beachten Sie, dass dies die wahrgenommene Bildqualität abhängig von der Skalierung des Browsers im Vergleich zu Ihrer beeinflussen kann.) Ich habe das Ereignis ontouchstart hinzugefügt, um Mobilgeräte zu verarbeiten.
  • Das Tag noscript bietet Benutzern mit deaktiviertem Javascript die Möglichkeit, das vollständige Bild zu erhalten, ohne andere Benutzer zu stören. (Inspiriert von MonkeyZeus 'Antwort )

    Bearbeiten: Ich habe dem Javascript eine Besetztschleife hinzugefügt, um langsame Verbindungen zu berücksichtigen (zu versuchen?), Aber es gibt viel bessere Möglichkeiten zu warten, je nachdem, welche Bibliotheken Sie verwenden.

7
technosaurus

Es ist schwierig, dies zu beantworten, ohne einen visuellen Kontext dafür zu haben, wie der Fluss im Moment aussieht. Eine Möglichkeit, dies zu umgehen, besteht darin, eine Zoomfunktion für Ihr Bild bereitzustellen. Wenn der Benutzer den Mauszeiger über das Bild bewegt, zeigen Sie den Vergrößerungscursor an, um den Benutzer aufzurufen, das Bild in voller Auflösung anzuzeigen (in einer Überlagerung eine neue Seite oder eine neue Registerkarte laden, dies möglicherweise testen).

Eine andere Möglichkeit, dies zu tun, besteht darin, ein Link-Overlay auf dem Bild zu erstellen, das beim Hover "Bild herunterladen" anzeigt, und das Download-Attribut des Links zu verwenden, um das Quellbild herunterzuladen:

<a href="/images/myimage.jpg" download="MyImage">

Ich hoffe, das hat einige Ideen ausgelöst. Wenn nicht, könnten Sie vielleicht einen weiteren Kontext für die aktuelle Situation bereitstellen.

6
kn03i

Eine Möglichkeit besteht darin, ein Div auf die gleiche Größe wie das Miniaturbild zu skalieren und die CSS-Eigenschaft background-image Zu verwenden, um das Bild bereitzustellen, anstatt das herkömmliche <img> - Tag zu verwenden. Dies macht ein Rechtsklick unmöglich, ohne etwas zu stehlen.

Machen Sie außerdem den Download-Button prominent und einfach anklickbar.

Nach ein paar Anfällen von "Whoops, denke ich muss auf den Download-Button klicken." Ihre Benutzer werden lernen zu akzeptieren, dass der Download-Button verwendet werden sollte.

<div style="width:272px; height:92px; background-image:url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');">
    <!-- pretend this is the thumbnail -->
</div>
<a href="#">Download full resolution image!</a> <!-- pretend this is a link to the full resolution image download -->

Beispiel: https://jsfiddle.net/jryd5ubf/3/

6
MonkeyZeus

Sie können versuchen, den Download-Button einfach in etwas umzubenennen, das den Benutzer darüber informiert, dass er eine bessere Version erhält:

  • "Hi-Res herunterladen"
  • "HD-Bild herunterladen"
  • "Bild in voller Auflösung herunterladen"
  • "Bild in voller Größe herunterladen"
  • "Originalbild herunterladen" (obwohl dieses möglicherweise eine negative Konnotation hat, denken sie möglicherweise, dass es das Bild vor den Anpassungen ist).

Sie können die Auflösung und/oder Bildgröße hinzufügen, z. B. "Bild in voller Auflösung herunterladen (4000 x 3000 Pixel, 5 MB)".

Natürlich muss die Schaltfläche deutlich sichtbar sein (d. H. Zum Beispiel muss nicht gescrollt werden, um sie zu sehen).

Wenn dies nicht ausreicht, können Sie eine Überlagerung hinzufügen, die die Größe des aktuell angezeigten Bilds angibt und den Benutzer darüber informiert, dass es ein besseres gibt:

Vorschaugröße: 1600 x 900. [Download in voller Größe (4000 x 3000)]

oder

Derzeit wird Folgendes angezeigt: 1600 x 900. [Download in voller Größe (4000 x 3000)]

6
jcaron

Wie viele Websites waren Sie auf Websites, auf denen Sie ein Programm herunterladen wollten, und mussten sich einen Moment Zeit nehmen, um den echten Download-Button zu finden, da Anzeigen ihn nachahmen, um Ihre Klicks zu ködern?

Rechtsklick/Bild speichern ist in fast allen Browsern und Websites gleich, es ist eine zuverlässige und vertrauenswürdige Vorgehensweise. Dies ist die Standardauswahl für viele Benutzer, da Sie genau wissen, was Sie erhalten.

Eine gute Benutzeroberfläche wird erreicht, indem der Dienst bereitgestellt wird, den der Benutzer erwartet, wenn er sich Ihre Benutzeroberfläche ansieht.

Wenn ein Rechtsklick/Bild speichern das gleiche Ergebnis oder ein "gut genug" Ergebnis erzielt, machen sie das weiter, wenn sie es gewohnt sind.

Das Entführen ihrer Erwartungen durch Blockieren oder Untergraben des Kontextmenüs mit der rechten Maustaste schwächt immer nur das Vertrauen in Ihre Website.
Was Sie tun möchten, ist geben Sie einen konkreten Grund an damit sie Ihren Knopf drücken.

Wenn nur "Download" angezeigt wird, lautet der Denkprozess des Benutzers "Download what? Egal, es ist mir egal, Rechtsklick/Bild speichern "

Wenn es sich bei Ihrem Bild um eine Miniaturansicht handelt und die Schaltfläche zum Herunterladen eine vollauflösende Version enthält, geben Sie dies mit "HD-Bild herunterladen" oder ähnlichem Text deutlich und deutlich an, da dies der einzige Grund ist, warum sich der Benutzer darum kümmern wird, wie Sie dies möchten Verwenden Sie Ihre Website.

5
Ruadhan2300

Aus Sicht der Benutzerfreundlichkeit sind Ihre beiden besten Optionen:

  • Stellen Sie sicher, dass die Bilder die volle Auflösung haben, oder
  • Entführen Sie die Rechtsklick-Schaltfläche.

Keine dieser Optionen erfordert eine Umschulung Ihrer Benutzer. Und Sie befinden sich in einer Situation, in der es zwischen unpraktisch und unmöglich ist, Ihre Benutzer neu zu schulen. Selbst wenn Sie Ihren Benutzern die Mühe machen, die meiste Zeit auf den Download-Button zu klicken, rutschen sie manchmal aus. Die Ausrutscher verursachen entweder Frustration oder das Speichern von Bildern mit unzureichender Auflösung.

Sie haben Ihre Benutzer geschult, das Bild als Download-Schaltfläche zu behandeln. Es ist ein riesiger, praktischer Knopf an der naheliegendsten Stelle - dem Bild selbst. Darüber hinaus haben Sie Ihre Benutzer darin geschult, zu erwarten, dass das Bild die für die nachfolgenden Prozesse erforderliche Auflösung aufweist.

Es ist unwahrscheinlich, dass Ihre Benutzer über die Bildauflösung nachdenken möchten, geschweige denn über die Bildauflösung.

Können Sie sich überhaupt ein Szenario vorstellen, in dem Ihre Benutzer das Bild mit reduzierter Auflösung herunterladen möchten? Wenn nicht, spielt es keine Rolle, dass das Entführen der Rechtsklick-Schaltfläche die Funktionalität des Browsers überschreibt, die standardmäßig das Bild mit reduzierter Auflösung herunterlädt.


Was würden Sie tun, wenn Sie diese Anwendung als Desktop-Anwendung schreiben würden? Sie würden diese Funktion entweder beim Linksklickereignis des Bildes oder beim Rechtsklickereignis des Bildes implementieren.

3
Jasper

Wir werden immer noch darauf zurückgreifen, den Rechtsklick zu entführen, aber mit Stil.

Ein Besucher/Benutzer, der mit der rechten Maustaste auf ein Bild klickt, möchte auf jeden Fall ein "Speichern unter" durchführen, um dies einzudämmen, anstatt eines Hijacks, bei dem eine komplexe Funktion ausgeführt werden muss, eine einfache kurze Dauer . Der Tooltip beim Klicken mit der rechten Maustaste, mit dem der Benutzer aufgefordert wird, auf die Schaltfläche "Herunterladen" zu klicken, trägt wesentlich dazu bei, die Verwendung dieser Schaltfläche zum Herunterladen von Bildern weiter zu fördern . enter image description here

2
Adedoyin Akande

Meine Empfehlung ähnelt einigen anderen - zB 120326 von Pectoralis Major , - darin Es wird eine halbtransparente Überlagerung verwendet.

Die Überlagerung ist jedoch kein Popup, das angezeigt wird, wenn auf das Bild geklickt wird oder wenn sich der Zeiger, Cursor oder Stift über dem Bild befindet:
Zeigen Sie zunächst die halbtransparente Überlagerung an, wenn die Seite zum ersten Mal geladen wird.
Hinter dem Overlay befindet sich die Vorschau. Wenn das Overlay nicht halbtransparent sein kann, ist es undurchsichtig und verdeckt teilweise die Vorschau.
Auf dem Overlay können Sie folgende Schaltflächen haben:

  • vorschau anzeigen
  • download in voller Größe

Jede Schaltfläche sollte einen href -Link enthalten, damit Sie alle Rechtsklicker vollständig aufnehmen können.

Dies sollte Ihre Bestimmungen klar und deutlich machen.

1
can-ned_food

So weisen Sie den Benutzer an, das Bild in voller Auflösung herunterzuladen, da das Kontextmenü das Miniaturbild mit niedriger Auflösung herunterlädt

a) Lassen Sie den Benutzer die Vorschau mit niedriger Auflösung herunterladen, stellen Sie jedoch einen klaren und sichtbaren Link zum Bild mit voller Auflösung bereit

 + ------------------------------- + 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXXXXXXXXX DAS BILD XXXXXXXXX | 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 + ----------------------------- - + 
 [volle Auflösung herunterladen] 

b) Für unerfahrene Benutzer: Vermeiden Sie Symbole und Symbole. Sei textuell, schlicht, einfach und direkt.

Symbole und Symbole werden nicht allgemein verstanden. Sie erschweren das Erlernen der Benutzeroberfläche. Damit der unerfahrene Benutzer versteht, was Sie meinen, stellen Sie einen Link mit einem geschriebenen einfachen Ausdruck her und markieren Sie die Schlüsselwörter.

Sehr künstlerische Designs können für Produktivität und Arbeit sehr schlecht sein. Die meisten inhaltsorientierten Websites haben eine minimalistische Oberfläche. Nehmen Sie als Beispiel den Stapelüberlauf: Es gibt Symbole und Symbole, die jedoch nicht zum Lesen der Antworten, Navigieren und Beantworten einer Frage benötigt werden.

c) Sie können die Anweisungen so einschränken, dass sie nur dann über dem Bild angezeigt werden, wenn der Benutzer dies auswählt

Sie können den Download-Link nur anzeigen, wenn der Benutzer das Bild auswählt. Da es nahe an der Stelle erscheint, an der der Benutzer hinschaut, wird es wahrscheinlich seine Aufmerksamkeit erregen. Dies mag zu einem saubereren Design führen, aber der Nachteil ist, dass der Benutzer das Bild auswählen muss, um zu wissen, dass es in höherer Auflösung heruntergeladen werden kann.

Normal

 + ------------------------------- + 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 + --------------------------- + 

mouseover | mousedown | ausgewählt | berührt | Fokus

 + ------------------------------- + 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXX Klicken Sie hier, um die vollständigen Dateien herunterzuladen | 
 + ---------------------------- --- + 

Denken Sie daran, dass Smartphones und Tablets kein "Onmouseover" haben und Browser unterschiedliche Ereignissätze für Maus und Touchscreen haben, wie von Coebergh beschrieben. Mit onmousedown, pointerdown, touchstart, ondragstart und onfocus werden Sie den Benutzer wahrscheinlich fangen, bevor er das Kontextmenü sieht. Aber ich weiß nicht, wie stabil das ist. Ich habe das nie implementiert, weil in meiner Arbeit kleine Bildschirme keine Option sind.

d) Überschreiben Sie das Kontextmenü

Ich würde Ihnen raten, das Kontextmenü nicht zu überschreiben. Eine Standard-Browsing-Oberfläche ist für den Benutzer komfortabel. Es ermöglicht vielen Benutzern, einige Aktionen automatisch auszuführen, ohne aufgrund von "Muskelgedächtnis" nachzudenken. Ist aber eine Option. Wenn Sie sich nur auf das Bild beschränken, wird die Navigation möglicherweise nicht zu stark unterbrochen.

1
Lucas

Wenn der Benutzer mit der rechten Maustaste auf das Bild klickt , fordert er ihn auf, das Bild in verschiedenen Auflösungen herunterzuladen. Während normalerweise das Entführen des rechten Klicks eine schlechte Idee ist, denke ich, dass dies die perfekte Situation ist, in der es tatsächlich eine gute Idee ist!

Von meine beliebteste StackOverflow-Antwort möchte ich vorschlagen dieses modifizierte Snippet (Hinweis : Führen Sie es lokal außerhalb von JSFiddle für das <a download> arbeiten):

(right click example

0