risposta-alla-domanda-sullo-sviluppo-web-bd.com

Chiedi agli utenti di utilizzare il pulsante di download anziché fare clic con il pulsante destro del mouse su Salva

Come parte del nostro sistema, un'applicazione web, abbiamo un visualizzatore di immagini. In precedenza abbiamo sempre visualizzato l'immagine a piena risoluzione ma ridimensionata con CSS per adattarla alla pagina. Per motivi di prestazioni, ora visualizziamo una versione correttamente ridimensionata dell'immagine con l'opzione per scaricare l'immagine a piena risoluzione con un pulsante sotto l'immagine.

Come parte del flusso di lavoro degli utenti, a volte devono scaricare questa immagine a piena risoluzione per inviare a un altro sistema. Il problema è che molti utenti fanno semplicemente clic con il tasto destro sull'immagine e premono "salva immagine con nome". In passato funzionava bene, ma ora fornirà invece un'immagine a bassa risoluzione. Gli utenti non se ne accorgono e ciò causa ulteriori problemi lungo la linea. Come possiamo costringere gli utenti ad allontanarsi da questo comportamento? Certo, potremmo dire loro di non farlo, ma ciò non sembra molto scalabile. La mia idea meno negativa finora è quella di dirottare il tasto destro del mouse nel browser, ma questa è A) non è una bella interfaccia utente e B) non è sicuro di coprire tutti i casi.

In breve: come possiamo indurre gli utenti a utilizzare il pulsante di download invece di salvare l'anteprima a bassa risoluzione?

103
Zeta Two

Non appena l'utente passa sopra l'immagine, aggiungi un overlay che gli consente di premere il pulsante di download.

enter image description here

Questo è solo un esempio, puoi renderlo più sottile ma penso che funzionerà bene con il comportamento attuale dei tuoi utenti. Dal momento che passeranno il mouse sull'immagine per iniziare la "soluzione del tasto destro del mouse" e vedranno l'opzione di download.

Dovresti comunque avere un pulsante di download che è visibile senza dover passare il mouse sopra l'immagine solo per sicurezza.

182
Pectoralis Major

Non fare nulla con il tasto destro. È un comportamento previsto a livello di browser. Sai che non dovresti "dirottare" il tasto destro del mouse o non lo chiameresti dirottamento.

Fornire agli utenti uno strumento migliore.

Se gli utenti stanno essenzialmente salvando le immagini stesse all'esterno dell'app, l'app non deve aiutarli a salvare quelle immagini. Nessuno vuole salvare le immagini una alla volta.

Offri loro un modo per selezionare tutte le immagini che desiderano e scaricare tutte le immagini contemporaneamente. Offri agli utenti un buon strumento e mostra loro come funziona prima di voler salvare la prima immagine. Fornisci loro un elenco di download, semplifica l'aggiunta di immagini, mostra loro le loro immagini nell'elenco e dai loro un modo semplice per scaricarle tutte in un file alla fine.

Rendi descrittivi i nomi dei file delle immagini

Rendi i nomi dei file di immagine informativi. Puoi comunicare con gli utenti nel nome file. Inserisci le dimensioni nel nome del file e includi le categorizzazioni o qualsiasi altra cosa che dica all'utente le dimensioni dell'immagine nel tuo sistema. Pertanto, se un utente fa clic con il pulsante destro del mouse su un'immagine, il nome file indicherà che esiste un file migliore.

Prodotto-Name-thumbnail-piccolo-cropped-bassa risoluzione-400x400.jpg

Prodotto-Nome-sito-esempio-image-not-for-saving.jpg

I file scaricati correttamente possono essere nominati in modo diverso.

73
moot

C'è un motivo per cui l'utente non sta selezionando il pulsante di download e il test di usabilità è il modo migliore per determinare il perché. Tuttavia, nel caso in cui si tratti di posizionare il pulsante di download in un punto in cui un utente potrebbe apparire o nascosto in qualche punto dell'interfaccia utente, le seguenti opzioni/esempi potrebbero essere d'aiuto:

  • È possibile aggiungere un'immagine di sovrapposizione del pulsante di download (nell'angolo in basso a destra) che fornirebbe un segnale visivo per il pulsante di download.

enter image description here

Icona di Freepik tramite Flaticon e immagine selezionata casualmente da Unsplash.

  • E se desideri aggiungere più risoluzioni per il download, potresti adottare un approccio simile a quello che Flickr mostra un popover con un elenco di risoluzioni ( ad es. 600x400, 1200x600) opzioni che l'utente può scaricare quando si fa clic sul pulsante di download.

enter image description here Schermata di Flickr.

46
truleighsyd

Come utente dedicato che fa clic con il pulsante destro del mouse, posso dire che non mi preoccuperei normalmente di un pulsante di download e presumo di aver salvato la versione completa (e sarei leggermente infastidito sul sito Web se trovassi che non avevo ).

Ci sono due problemi qui. Il primo è che la tua immagine non è etichettata (o non si identifica) come una miniatura. In caso contrario, mi aspetto che sia l'immagine completa e la mia aspettativa non sarà soddisfatta. Bad UX.

Il secondo è che la correzione corretta non è mai quella di dirottare il tasto destro del mouse. È ancora più fastidioso.

I suggerimenti al passaggio del mouse sono più vicini qui. Indica all'utente che si tratta di una miniatura, e fornisce un modo per visualizzare e/o scaricare (o entrambi) la foto completa.

Puoi farlo sottilmente, con un simbolo di pollice semitrasparente o una freccia di sblocco nell'angolo dell'immagine, un simbolo di "visualizzazione completa" o a schermo intero o facendo clic sull'immagine sovrapponendo una vista dell'immagine sull'immagine completa con entrambi i clic destro funzionante e un DL. Esistono molti modi per farlo funzionare, esemplificato su molti siti Web.

26
Stilez

Vorrei sottolineare come fa Wikipedia.

Quando ingrandisci una foto facendo clic su di essa su Wikipedia, ti viene presentata la foto, alcuni dettagli su di essa e un pulsante "download" discreto.

Quando fai clic con il tasto destro sulla foto visualizzata, il pulsante "download" viene premuto per te, mostrando "Scarica file originale".

Sebbene questo non sia il modo migliore per farlo, mostra un esempio di come potresti farlo in un altro scenario.

22

Molte buone risposte, ma ecco una KISS risposta. Ottieni il meglio da entrambi i mondi: tempi di caricamento e rendering rapidi e comportamento previsto.

<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>

Spiegazione:

  • Questo utilizzerà una miniatura come immagine sfondo che non ti darà un menu contestuale per scaricare la miniatura.
  • Il tag img vuoto (no src =) riempirà la larghezza e l'altezza specificate (sentiti libero di usare css invece se hanno tutte la stessa dimensione)
  • L'evento onmousedown imposta l'attributo src sull'immagine a dimensione intera prima che appaia il menu contestuale in modo che si comporti come se fosse caricata l'immagine a dimensione intera. (Nota che ciò potrebbe influire sulla qualità dell'immagine percepita in base al ridimensionamento del browser rispetto al tuo). Ho aggiunto l'evento ontouchstart per gestire i dispositivi mobili.
  • Il tag noscript consente agli utenti con javascript disabilitato di ottenere l'immagine completa senza disturbare gli altri utenti. (Ispirato da la risposta di MonkeyZeus )

    Modifica: ho aggiunto un ciclo occupato al javascript per (provare a?) Tenere conto delle connessioni lente, ma ci sono molti modi migliori di aspettare a seconda delle librerie che stai usando.

7
technosaurus

È difficile rispondere a questa domanda senza un contesto visivo di come si presenta il flusso in questo momento, ma un modo per aggirare il problema è fornire una funzione di zoom sulla tua immagine. Quando l'utente visualizza l'immagine, visualizza il cursore di ingrandimento per richiamare l'utente per visualizzare l'immagine a piena risoluzione (in un overlay, carica in una nuova pagina o in una nuova scheda, magari prova questo).

Un altro modo per fare ciò è avere un overlay di link sull'immagine, che al passaggio del mouse dice "download image" e utilizzare l'attributo download del link per scaricare l'immagine di origine:

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

Spero che questo abbia scatenato alcune idee. Altrimenti, forse potresti fornire un po 'più di contesto alla situazione attuale.

6
kn03i

Un'opzione consiste nel dimensionare un div della stessa dimensione della miniatura e utilizzare la proprietà CSS background-image per fornire l'immagine invece di utilizzare il tradizionale <img> tag. Ciò renderà impossibile fare clic con il tasto destro del mouse senza eseguire l'hi-jacking.

Inoltre, rendere il pulsante di download prominente e facilmente cliccabile.

Dopo alcuni attacchi di "Whoops, suppongo di dover fare clic sul pulsante di download". i tuoi utenti impareranno ad accettare che dovrebbe essere usato il pulsante di download.

<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 -->

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

6
MonkeyZeus

Potresti provare semplicemente a rinominare il pulsante di download in qualcosa che faccia sapere all'utente che otterrà una versione migliore:

  • "Scarica in alta risoluzione"
  • "Scarica immagine HD"
  • "Scarica immagine ad alta risoluzione"
  • "Scarica immagine a dimensione intera"
  • "Scarica immagine originale" (sebbene questa possa avere una connotazione negativa, potrebbero pensare che sia l'immagine prima delle regolazioni).

È possibile aggiungere la risoluzione e/o le dimensioni dell'immagine, ad esempio "Scarica immagine ad alta risoluzione (4000 x 3000 pixel, 5 MB)"

Naturalmente, il pulsante deve essere chiaramente visibile (ad esempio, non è necessario scorrere per vederlo, ad esempio).

Se ciò non bastasse, puoi aggiungere un overlay che specifica la dimensione dell'immagine attualmente mostrata e fa sapere all'utente che ce n'è una migliore:

Dimensioni anteprima: 1600 x 900. [Scarica full-size (4000 x 3000)]

o

Attualmente visualizzato: 1600 x 900. [Scarica full-size (4000 x 3000)]

6
jcaron

Quanti siti web sei stato dove volevi scaricare un programma e hai dovuto prendere un momento per trovare il vero pulsante di download a causa delle pubblicità che lo imitavano per attirare i tuoi clic?

Fare clic con il pulsante destro del mouse/salvare l'immagine è comune in quasi tutti i browser e siti Web, è un corso d'azione affidabile e affidabile. è la scelta predefinita per molte persone esplicitamente perché sai cosa stai ricevendo.

La buona UX si ottiene fornendo il servizio che l'utente si aspetta quando guarderà la tua UI.

Se il clic destro/salva immagine otterrà lo stesso risultato o un risultato "abbastanza buono", continueranno a farlo se è quello a cui sono abituati.

Dirottare le loro aspettative bloccando o sovvertendo il menu contestuale del tasto destro del mouse indebolirà la loro fiducia nel tuo sito web.
Quello che vuoi fare è fornire un motivo tangibile per loro di premere il pulsante.

Se dice semplicemente "Download", il processo di pensiero dell'utente è "Scarica cosa? Non importa, non mi interessa, Fai clic con il pulsante destro del mouse/salva immagine "

Se la tua immagine è una miniatura e il pulsante di download fornisce una versione ad alta risoluzione, indica chiaramente e in modo evidente con "Scarica immagine HD" o testo simile, poiché questa è l'unica ragione per cui l'utente si preoccuperà di come desideri usa il tuo sito.

5
Ruadhan2300

Dal punto di vista della facilità d'uso, le due migliori scelte sono:

  • Ripristina le immagini alla massima risoluzione, oppure
  • Dirottare il pulsante destro del mouse.

Nessuna di queste opzioni richiede la riqualificazione dei tuoi utenti. E ti trovi in ​​una situazione in cui è a metà tra impraticabile e impossibile riqualificare i tuoi utenti. Anche se metti i tuoi utenti nella difficoltà di fare clic sul pulsante di download per la maggior parte del tempo, a volte scivolano. Gli errori o causeranno frustrazione o causeranno il salvataggio di immagini con una risoluzione inadeguata.

Hai addestrato i tuoi utenti a trattare l'immagine come un pulsante di download. È un pulsante enorme e conveniente nella posizione più ovvia possibile: l'immagine stessa. Inoltre, hai addestrato i tuoi utenti ad aspettarsi che l'immagine sia la risoluzione necessaria per i processi successivi.

È improbabile che i tuoi utenti vogliano pensare alla risoluzione dell'immagine, per non parlare della risoluzione dell'immagine.

Riesci a immaginare uno scenario in cui i tuoi utenti vorrebbero scaricare l'immagine a risoluzione ridotta? In caso contrario, non importa che il dirottamento del pulsante destro del mouse abbia la precedenza sulla funzionalità del browser predefinita per il download dell'immagine a risoluzione ridotta.


Se scrivessi questa applicazione come applicazione desktop, cosa faresti? Dovresti implementare questa funzione sull'evento del clic sinistro dell'immagine o sull'evento del clic destro dell'immagine.

3
Jasper

Torneremo ancora a dirottare il tasto destro del mouse, ma con stile.

Un visitatore/utente che fa clic con il pulsante destro del mouse su un'immagine desidera sicuramente fare un "Salva con nome", per frenare questo, invece di un dirottamento che comporta l'esecuzione di alcune funzioni complesse, una breve durata tooltip facendo clic con il tasto destro del mouse, dicendo all'utente di "Fare clic sul pulsante Download" fa molto per incoraggiare ulteriormente l'uso di questo pulsante per il download di immagini . enter image description here

2
Adedoyin Akande

La mia raccomandazione è simile ad alcune altre - ad es. 120326 da Pettorale maggiore , - in quanto presenta una sovrapposizione semitrasparente.

Tuttavia, la sovrapposizione non è un popup mostrato quando si fa clic sull'immagine o quando il puntatore, il cursore o lo stilo si posiziona sopra l'immagine:
Mostra inizialmente la sovrapposizione semitrasparente al primo caricamento della pagina.
Dietro l'overlay c'è l'anteprima: se, in qualche modo, l'overlay non può essere semitrasparente, allora è opaco e oscura parzialmente l'anteprima.
Sull'overlay puoi avere questi pulsanti:

  • visualizza l'anteprima
  • scarica a grandezza naturale

Ogni pulsante dovrebbe offrire un link href, in modo da poter accogliere completamente qualsiasi clic con il tasto destro.

Ciò dovrebbe rendere le tue disposizioni ovvie e all'avanguardia.

1
can-ned_food

Come indirizzare l'utente a scaricare l'immagine ad alta risoluzione perché il menu di scelta rapida scarica l'anteprima a bassa risoluzione

a) Consentire all'utente di scaricare l'anteprima a bassa risoluzione, ma fornire un collegamento chiaro e visibile all'immagine a piena risoluzione

 + ------------------------------- + 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXXXXXXXXX L'IMMAGINE XXXXXXXXX | 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 + ----------------------------- - + 
 [scarica la risoluzione completa] 

b) Per utenti inesperti: evitare icone e simboli. Sii testuale, chiaro, semplice e diretto.

Icone e simboli non sono universalmente compresi. Rendono l'interfaccia più difficile da imparare. Per l'utente inesperto di capire cosa intendi, creare un collegamento con un'espressione semplice scritta ed evidenziare le parole chiave.

Disegni molto artistici possono essere molto dannosi per la produttività e il lavoro. La maggior parte dei siti orientati al contenuto ha un'interfaccia minimalista. Prendi ad esempio StackOverflow: ci sono icone e simboli, ma non sono necessari per leggere le risposte, navigare e rispondere a una domanda.

c) Puoi limitare le istruzioni a comparire sull'immagine solo quando l'utente seleziona

Puoi scegliere di mostrare il link per il download solo quando l'utente sta selezionando l'immagine. Dal momento che apparirà vicino a dove sta guardando l'utente, probabilmente attirerà la sua attenzione. Questo può rendere un design più pulito, ma il lato negativo è che l'utente deve selezionare l'immagine per sapere che può essere scaricato con una risoluzione più elevata.

Normale

 + ------------------------------- + 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | [.____] |. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |. [.____] + ------------------------------- + 

passaggio del mouse | mousedown | selezionato | toccato | messa a fuoco

 + ------------------------------- + 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | 
 | XXXX Fai clic per scaricare fullres | 
 + ---------------------------- --- + 

Ricorda che smartphone e tablet non hanno "onmouseover" e che i browser hanno diversi set di eventi per mouse e touchscreen come descritto da Coebergh . Usando onmousedown, pointerdown, touchstart, ondragstart e onfocus probabilmente catturerai l'utente prima che lui o lei veda il menu contestuale. Ma non so quanto sia stabile. Non l'ho mai implementato perché nella mia linea di lavoro i piccoli schermi non sono un'opzione.

d) sovrascrivere il menu di scelta rapida

Ti consiglierei di non scavalcare il menu contestuale. Un'interfaccia di navigazione standard è comoda per l'utente. Consente a molti utenti di eseguire alcune azioni automaticamente senza pensare a causa di "memoria muscolare" . Ma è un'opzione. Se si limita solo all'immagine, potrebbe non interrompere troppo la navigazione.

1
Lucas

Quando l'utente fa clic con il pulsante destro del mouse sull'immagine , richiedi loro di scaricare l'immagine con risoluzioni diverse. Mentre normalmente dirottare il clic destro è una cattiva idea, penso che questa sia la situazione perfetta in cui è in realtà una buona idea!

Da la mia risposta StackOverflow più popolare , vorrei suggerire questo frammento modificato (Nota : eseguilo localmente, fuori da JSFiddle per il <a download> lavorare):

right click example

0