右クリックで保存する代わりにダウンロードボタンを使用するようユーザーに指示する
システムの一部であるWebアプリケーションとして、画像ビューアがあります。以前は常にフル解像度の画像を表示していましたが、ページに合わせてCSSで縮小しました。パフォーマンス上の理由から、画像の下にボタンがあるフル解像度の画像をダウンロードするオプションを使用して、適切にスケーリングされたバージョンの画像を表示するようになりました。
ユーザーのワークフローの一部として、別のシステムに送信するために、このフル解像度の画像をダウンロードする必要がある場合があります。問題は、多くのユーザーが画像を右クリックして[名前を付けて画像を保存]をクリックすることです。以前は正常に機能していましたが、現在は低解像度の画像が提供されます。ユーザーはこれに気付かず、これは将来の問題を引き起こします。どうすればこの動作からユーザーを遠ざけることができますか？確かに、私たちは彼らにそれをしないように言うことができましたが、それは非常にスケーラブルに感じられません。私のこれまでのところ最も悪い考えは、ブラウザーでの右クリックをハイジャックすることですが、これはA）非常に優れたUIではなく、B）すべてのケースをカバーできるとは限りません。
簡単に言うと、低解像度のサムネイルを保存する代わりに、ダウンロードボタンをユーザーに使用させるにはどうすればよいでしょうか。
ユーザーが画像にカーソルを合わせたらすぐに、ダウンロードボタンを押すことができるオーバーレイを追加します。
これは単なる例であり、これをより微妙にすることができますが、ユーザーの現在の動作でうまく機能すると思います。画像にカーソルを合わせると「右クリックによる回避策」が開始され、ダウンロードオプションが表示されます。
安全のために、画像の上にマウスを置く必要なく、表示されるダウンロードボタンがまだあるはずです。
右クリックには何もしないでください。これはブラウザレベルで予想される動作です。右クリックを「ハイジャック」してはならず、ハイジャックと呼ばないでください。
ユーザーにより良いツールを提供します。
ユーザーが本質的にアプリの外で画像自体を保存している場合、アプリはそれらの画像の保存を支援してはなりません。誰も一度に画像を保存したくありません。
必要なすべての画像を選択し、すべての画像を一度にダウンロードする方法を提供します。ユーザーに優れたツールを提供し、最初の画像を保存する前に、それがどのように機能するかを示します。ダウンロードリストを提供し、画像を簡単に追加し、リストに画像を表示し、最後にすべてを1つのファイルに簡単にダウンロードできるようにします。
画像のファイル名をわかりやすくする
画像のファイル名をわかりやすくします。ファイル名でユーザーと通信できます。ファイル名に寸法を入れ、分類や、システム内での画像のサイズをユーザーに知らせるものを含めます。したがって、ユーザーが画像を右クリックすると、ファイル名はより適切なファイルがあることを示します。
Product-Name-thumbnail-small-cropped-low-resolution-400x400.jpg
Product-Name-site-example-image-not-for-saving.jpg
適切にダウンロードされたファイルには、別の名前を付けることができます。
ユーザーがダウンロードボタンを選択していないのには理由があり、その理由を判断するにはユーザビリティテストが最適です。ただし、ダウンロードボタンをユーザーが表示する可能性のある場所に配置するか、UIのどこかを非表示にする場合は、次のオプション/例が役立ちます。
- ダウンロードボタンの視覚的な手掛かりとなるダウンロードボタンオーバーレイ画像（右下隅）を追加できます。
フラットアイコンと Freepik によるアイコンとUnsplashからランダムに選択された画像。
- そして、ダウンロードに複数の解像度を追加したい場合は、Flickrが解像度のリストを含むポップオーバーを表示するのと同じようなアプローチを取ることができます（例：600x400、1200x600）ダウンロードボタンをクリックしたときにユーザーがダウンロードできるオプション。
Flickrのスクリーンショット。
専用の右クリック保存ユーザーとして、私は通常ダウンロードボタンに煩わされることはないと言うことができます。フルバージョンを保存したと思います（私が見つけなかった場合は、ウェブサイトで少しイライラします） ）。
ここには2つの問題があります。 1つ目は、画像がサムネイルとしてラベル付けされていない（または自分自身を識別できない）ことです。そうでない場合、私はそれが完全なイメージであることを期待します、そして私の期待は満たされません。悪いUX。
2つ目は、正しい修正は右クリックをハイジャックしないことです。それはさらに厄介です。
ホバー候補はここに最も近いです。これがサムネイルであることをユーザーに伝えてくださいおよび写真全体を表示またはダウンロード（あるいはその両方）する方法を提供します。
これを微妙に行うには、画像の隅にある半透明の親指記号またはブレークアウト矢印、「全画面表示」または全画面表示の記号を使用するか、画像をクリックして、両方の右クリックで画像全体の画像ビューをオーバーレイします。機能し、DLボタン。これを機能させるには多くの方法があり、多くのWebサイトで例示されています。
ウィキペディアでどのように行われているかを指摘したいと思います。
ウィキペディアで クリックして写真を拡大 すると、写真、その詳細、および控えめな「ダウンロード」ボタンが表示されます。
表示された写真を右クリックすると、「ダウンロード」ボタンが押され、「オリジナルファイルをダウンロードする」と表示されます。 
これは最善の方法ではありませんが、別のシナリオでの実行方法の例を示しています。
良い答えはたくさんありますが、ここにKISS答えがあります。ロードとレンダリングの時間と予想される動作という両方の利点を得ることができます。
<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>
説明：
- これは、サムネイルを背景画像として使用するため、サムネイルをダウンロードするためのコンテキストメニューは表示されません。
- 空のimgタグ（src =なし）は、指定された幅と高さを埋めます（すべて同じ寸法の場合は、代わりにcssを使用してもかまいません）。
- onmousedownイベントは、コンテキストメニューが表示される前にsrc属性をフルサイズの画像に設定するため、フルサイズの画像がロードされたかのように動作します。 （これは、ブラウザーのスケーリングとユーザーのスケーリングによっては、認識される画質に影響を与える可能性があることに注意してください）モバイルを処理するためにontouchstartイベントを追加しました。
noscriptタグは、JavaScriptが無効になっているユーザーが他のユーザーを煩わせることなく完全な画像を取得する方法を提供します。 （ MonkeyZeusの答え に触発されて）
編集：私は遅い接続のためにJavaScriptにビジーループを追加しました（試してみますか？）。しかし、使用しているライブラリに応じて待機するより良い方法があります。
現時点でフローがどのように見えるかという視覚的なコンテキストなしにこれに答えることは困難ですが、これを回避する1つの方法は、画像にズームイン機能を提供することです。ユーザーが画像にカーソルを合わせたら、ズームインカーソルを表示してユーザーを呼び出し、フル解像度の画像を表示します（オーバーレイ、新しいページ、または新しいタブの読み込み、これをテストしてください）。
これを実行するもう1つの方法は、画像にリンクオーバーレイを設定することです。これにカーソルを合わせると「画像のダウンロード」と表示され、リンクのダウンロード属性を使用してソース画像をダウンロードします。
<a href="/images/myimage.jpg" download="MyImage">
これがいくつかのアイデアに火をつけたことを願っています。そうでない場合は、おそらく現在の状況のコンテキストをさらに提供できます。
1つのオプションは、divのサイズをサムネイルと同じサイズにし、従来のbackground-imageタグを使用する代わりにCSSプロパティ<img>を使用して画像を提供することです。これにより、何もハイジャックしないと右クリックが不可能になります。
さらに、ダウンロードボタンを目立たせ、簡単にクリックできるようにします。
「おっと、ダウンロードボタンをクリックする必要があると思います。」ユーザーは、ダウンロードボタンを使用する必要があることを受け入れるようになります。
<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 -->
ダウンロードボタンの名前を変更して、ユーザーがより良いバージョンを入手できることをユーザーに知らせることができます。
- 「高解像度版をダウンロード」
- 「HD画像をダウンロード」
- 「フル解像度の画像をダウンロード」
- 「フルサイズの画像をダウンロード」
- 「元の画像をダウンロードしてください」（これは否定的な意味を持つかもしれませんが、調整前の画像であると考えるかもしれません）。
「フル解像度の画像をダウンロード（4000 x 3000ピクセル、5 MB）」のように、解像度や画像サイズを追加できます。
もちろん、ボタンは明確に見えるようにする必要があります（たとえば、ボタンを表示するためにスクロールする必要はありません）。
それでも不十分な場合は、現在表示されている画像のサイズを指定するオーバーレイを追加して、ユーザーに適切なものがあることを通知することができます。
プレビューサイズ：1600 x900。[フルサイズ（4000 x 3000）でダウンロード]
または
現在表示中：1600 x900。[フルサイズ（4000 x 3000）でダウンロード]
あなたがプログラムをダウンロードしたい場所に行ったウェブサイトはいくつありますか？クリックの餌になりすましている広告のために、実際のダウンロードボタンを見つけるのに少し時間がかかりましたか？
右クリック/画像の保存は、ほとんどすべてのブラウザーとWebサイトで共通であり、信頼性と信頼性の高い一連のアクションです。あなたが何を手に入れているのか知っているので、それは多くの人にとってデフォルトの選択です。
優れたUXは、ユーザーがUIを見たときにユーザーが期待するサービスを提供することで実現されます。
右クリック/画像の保存で同じ結果、つまり「十分な」結果が得られる場合、慣れている場合はそれを続けます。
右クリックのコンテキストメニューをブロックまたは破壊して期待を乗っ取っても、Webサイトに対する信頼が弱まるだけです。
あなたがしたいことは、彼らがあなたのボタンを押すために具体的な理由を提供するです。
「ダウンロード」とだけ書かれている場合、ユーザーの思考プロセスは「何をダウンロードしますか？気にしないで構いません右クリック/保存画像」
画像がサムネイルで、ダウンロードボタンにフル解像度のバージョンが表示されている場合は、「HD画像のダウンロード」または同様のテキストでそれをはっきりと目立つように示します。あなたのサイトを使用してください。
使いやすさの観点から、2つの最適な選択肢は次のとおりです。
- 画像をフル解像度に戻す、または
- 右クリックボタンをハイジャックします。
これらのオプションはどちらも、ユーザーの再トレーニングを必要としません。そして、ユーザーを再教育することが非現実的と不可能の間のどこかにある状況にいます。ほとんどの場合、ユーザーがダウンロードボタンをクリックする手間をかけたとしても、ユーザーは失敗することがあります。スリップアップはフラストレーションを引き起こすか、不十分な解像度の画像が保存される原因になります。
画像をダウンロードボタンとして扱うようにユーザーをトレーニングしました。これは、可能な限り最もわかりやすい場所にある巨大で便利なボタンです-画像自体。さらに、画像が後続のプロセスに必要な解像度であることを期待するようにユーザーをトレーニングしました。
ユーザーが画像の解像度について考えたいと思うことはほとんどありません。まして、画像の解像度については考えないでしょう。
ユーザーが解像度を下げた画像をダウンロードするシナリオを想像できますか？そうでない場合は、右クリックボタンをハイジャックしても、デフォルトで低解像度の画像をダウンロードするブラウザの機能が無効になります。
このアプリケーションをデスクトップアプリケーションとして作成している場合、どうしますか？この機能は、画像の左クリックイベントまたは画像の右クリックイベントのいずれかに実装します。
右クリックをハイジャックすることに引き続きフォールバックしますが、スタイリッシュです
画像を右クリックする訪問者/ユーザーは、これを抑制するために、実行するいくつかの複雑な機能を含むハイジャックではなく、単純に短い期間tooltip右クリックで「ダウンロードボタンをクリックする」ようにユーザーに指示すると、画像をダウンロードするためのこのボタンの使用をさらに促進するのに役立ちます。 
私の推奨事項は他のいくつかのものと似ています—eg120326 from 大胸筋 、—その点で半透明のオーバーレイを使用しています。
ただし、オーバーレイは、画像がクリックされたとき、またはポインター、カーソル、またはスタイラスが画像の上に置かれたときに表示されるポップアップではありません。
最初にページが読み込まれたときに、半透明のオーバーレイを表示します。
オーバーレイの背後はプレビューです。何らかの理由でオーバーレイを半透明にできない場合、オーバーレイは不透明になり、プレビューが部分的に見えなくなります。
オーバーレイには、次のボタンがあります。
- プレビューを表示
- フルサイズでダウンロード
各ボタンはhrefリンクを提供する必要があります。これにより、すべての右クリッカーに完全に対応できます。
これはあなたの規定を明白かつ最前線にするはずです。
コンテキストメニューが低解像度のサムネイルをダウンロードするため、フル解像度の画像をダウンロードするようにユーザーに指示する方法
a）ユーザーが低解像度のプレビューをダウンロードできるようにしますが、フル解像度の画像へのリンクを明確に表示します
+ ------------------------------- + | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXXXXXXXX画像XXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | + ----------------------------- -+ [フル解像度でダウンロード]
b）未経験のユーザーの場合：アイコンや記号は避けてください。テキストでわかりやすく、シンプルで直接的に。
アイコンと記号は普遍的に理解されていません。それらはインターフェースを学ぶのを難しくします。未経験のユーザーがあなたの意味を理解できるように、書かれた簡単な表現でリンクを作成し、キーワードを強調表示します。
非常に芸術的なデザインは、生産性と仕事に非常に悪影響を及ぼす可能性があります。ほとんどのコンテンツ指向のサイトには、最小限のインターフェースがあります。例として、stackoverflowを取り上げます。アイコンと記号がありますが、答えを読んだり、ナビゲートしたり、質問に答えたりするのに必要ではありません。
c）ユーザーが選択した場合にのみ、画像の上に表示される指示を制限することができます
ユーザーが画像を選択している場合にのみ、ダウンロードリンクを表示することを選択できます。ユーザーが見ている場所の近くに表示されるため、おそらくユーザーの注意を引くでしょう。これによりデザインがすっきりしますが、欠点は、ユーザーが画像を選択して、より高い解像度でダウンロードできることを確認する必要があることです。
正常
+ ------------------------------- + | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | + ------------------------------- +
マウスオーバー|マウスダウン|選択済み|触れた|フォーカス
+ ------------------------------- + | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXクリックして完全版をダウンロード| + ---------------------------- --- +
Coebergh で説明されているように、スマートフォンとタブレットには「オンマウスオーバー」がなく、ブラウザにはマウスとタッチスクリーンの異なるイベントセットがあることに注意してください。 onmousedown、pointerdown、touchstart、ondragstart、onfocusを使用すると、コンテキストメニューが表示される前にユーザーをキャッチできます。しかし、これがどれほど安定しているかはわかりません。私の仕事では小さな画面はオプションではないので、私はそれを実装しませんでした。
d）コンテキストメニューを上書きする
コンテキストメニューを上書きしないことをお勧めします。標準の閲覧インターフェースはユーザーにとって快適です。多くのユーザーが "muscle memory" のため、何も考えずにいくつかのアクションを自動的に実行できます。しかし、オプションです。画像のみに制限すると、ナビゲーションがあまり中断されない場合があります。
ユーザーが画像を右クリックしたとき、異なる解像度で画像をダウンロードするように促します。 通常右クリックをハイジャックすることは悪い考えですが、これは実際に良い考えである完璧な状況だと思います！
私の最も人気のあるStackOverflowの回答 から、この変更されたスニペットを提案したい（注：<a download>が機能するように、JSFiddle外でローカルに実行します）：
