web-dev-qa-db-ja.com

画像が実際にアニメーションGIFであることをユーザーに知らせる方法

背景情報-現在、特に年齢層が高い(50歳以上)eコマースの衣料品サイトに取り組んでいます。歴史的に、同社は常にサイト全体に製品画像を表示するためにフラットjpgを使用してきました。

私たちは最近、GIFを使用して製品を表示する調査を開始しました。

問題は次のとおりですこれをユーザーに伝えるにはどうすればよいですか? PDP(製品の説明ページ)の画像に標準の再生ボタンアイコンを重ねるという簡単なアイデアがありました。これは音声付きのビデオではなく、(例として)回転している製品の3秒のGIFのみです。一部の人々はGIFが何であるかわからない可能性があるため、文字通り「GIF利用可能」と言わずに、PLP(製品リスターページ)で表示できるGIFが利用可能であることをユーザーに伝えたいと思います。

46
sclarke

それがGIFであるという事実は、実際には技術的な詳細であり、ほとんどのユーザーには関係がありません(または理解しにくいほどです)。彼らに伝える必要があるのは、より多くのデータが利用可能であることです。技術的には、アニメーションのサイズと内容によっては、GIFではなく実際のビデオを使用する方が理にかなっています。

実際の1つのオプションは、「再生」ボタン(右向きの三角形)をオーバーレイすることです。これは、ほとんどの人がビデオがあることを示すために使用します。

別のオプションとして、実際にビデオ/ GIFがオブジェクトの回転を示している場合、これを伝えるには、たとえば、次のようなアイコンを使用します。

rotate glyph3D glyph360 glyph

もちろん、「機能」の種類が異なる場合、アイコンはその違いを反映している必要があります。正確なアイコンの選択は、アニメーションではなく、コントロールがないという事実も反映する必要があります。そのため、たとえばポインターや手を含むアイコンは避けてください。

しかし、私にとっては、これは商品リストページ(ホバー時にアニメーションを開始することさえできる)にのみ当てはまるはずです。商品ページでメイン画像の場合は、すぐにアニメーションを開始してください。

96
jcaron

はい、あなたの解決策は優れていて機能しますが、いつかあなたのサイトにビデオを紹介すると問題が生じます。

また、再生ボタンが表示された場合、通常は音と質の高いビデオ(gifより長い)を期待します。

これにはFacebookスタイルのアプローチを使用できます。

enter image description here

ユーザーにわかりやすくしたい場合は、「GIF」だけではなく「GIFを再生」を使用できます。

この方法では、ビデオを区別するため、ビデオを追加し始めても問題は発生しません。

ユーザーがすでにこれらのパターンを知っているので、facebookの使用のようなパターンサイトを使用することはほとんどが良いです。

39

非技術的なユーザーの観点から、それはビデオです。音がなくてもそれは変わりません。違いを説明する必要はありません。ボタンを押すとビデオが再生されるとだけ言ってください。

34
rackandboneman

「GIF」の代わりに「アニメーション」のようなより広い用語を使用することをお勧めします。これは、特にターゲットユーザーベースに対して、専門的すぎて不必要に具体的である可能性があります。

見た目はあなたが望むものに依存すると思います。おそらくマウスホバーでGIFを自動的に再生するか、製品の写真の隅に小さな「アニメーションを再生」ラベルを付けます。

17

この特定のケースでは、短いが説明のテキストSee 3Dが横に/キャプションとして付いた回転アイコンを使用します。具体的には、プレイすると何が起こるかを「言います」。誰も気にしないファイル形式を説明しても意味がありません。

2
wscourge

まだ誰も言及していないので、

ビデオを自動再生することも検討できますが、マウスをホバーした場合のみ、これにより、常にすべてを自動再生するという問題が解消され、ユーザーとそのデバイス/帯域幅リソースの目の刺激が過負荷になります。

肯定的な点として、ユーザーは一目でアイテムの詳細が必要なときに、アイコンに指示されることなく、それに慣れ、この機能を直感的に期待できます。これはまた、技術的な適応力の低い人々による問題を根絶します。たとえば、ターゲットの視聴者が(GIF)に圧倒されたり混乱したりすることや、販売中のアイテムのビジュアルを不明瞭にする再生ボタンアイコンなどです。

編集:これは、アイテムグリッドの提案として意図されたもので、同じページにそれらが多すぎます(OPがサイト全体でこれを実行することを提案しているため)。単一の製品ページ(難読化の問題を回避するために画像が拡大されて表示される)の場合、gifの上にオーバーレイされた再生ボタンは依然として有効な選択肢です。

1
Leon

ユーザーの操作を待つのではなく、gifの自動再生を検討しましたか?人々は物事を動かすことに魅了されているため、顧客満足度が向上する可能性があります(gifがユーザーが探しているものに関連している限り)。この提案は主にデスクトップに関連しています。GIFは比較的データを大量に消費するためです。

ユーザーの操作を待つ場合は、gifの右下隅に再生ボタンを配置することをお勧めします。ほとんどの場合、ユーザーに「静止画」の完全な画像を取得してほしいため、画像の中央に配置することは控えます。ターゲットオーディエンスを考慮して、シンプルな「再生」アイコンをお勧めします。このようなもの 

1
Marius

画像内に小さなキャプションを追加して、消費者に何か他のことが起こっていることを知らせます。 See product in Action!などの小さなツールチップ/テキストを含めます。これは、製品を紹介することだけに関心があり、GIFを埋め込むスキルを示さないためです。

1
Jimenemex