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

Come far sapere a un utente che un'immagine è in realtà una GIF animata

Un po 'di background - Attualmente sto lavorando su un sito di abbigliamento e-commerce in particolare con una fascia di età superiore (50+). Storicamente la società ha sempre usato jpg piatti per visualizzare le immagini dei prodotti su tutto il sito.

Di recente abbiamo iniziato a studiare l'uso delle GIF per visualizzare i prodotti.

La domanda è: come posso comunicare meglio all'utente? Ho avuto la semplice idea di avere un'icona del pulsante di riproduzione standard che si sovrappone all'immagine su un PDP (pagina di descrizione del prodotto). Questo non sarà un video con audio, solo una GIF di 3 secondi del prodotto che gira (ad esempio). Voglio essere in grado di comunicare all'utente che un prodotto ha una GIF disponibile per la visualizzazione sul PLP (pagina di elenco dei prodotti) senza letteralmente dire "GIF disponibile" poiché alcune persone potrebbero non sapere cos'è una GIF.

46
sclarke

Il fatto che sia una GIF è davvero un dettaglio tecnico e non pertinente (o persino comprensibile) per la maggior parte degli utenti. Quello che devi comunicare a loro è che ci sono più dati disponibili. Tecnicamente, probabilmente avrebbe anche più senso usare video reali piuttosto che GIF, a seconda delle dimensioni e del contenuto dell'animazione.

Un'opzione è infatti quella di sovrapporre un pulsante "play" (triangolo che punta a destra), che la maggior parte delle persone prenderà per un'indicazione che c'è un video.

Un'altra opzione, se davvero il video/GIF mostra l'oggetto che viene ruotato, è quella di trasmettere questo, usando un'icona come una di queste ad esempio:

rotate glyph3D glyph360 glyph

Naturalmente, se esistono diversi tipi di "funzionalità", l'icona dovrebbe riflettere le differenze. La scelta dell'icona esatta dovrebbe anche riflettere il fatto che non esiste alcun controllo, solo un'animazione, quindi evita le icone che includono un puntatore o una mano, ad esempio.

Ma per me, questo dovrebbe essere il caso solo nelle pagine di elenco dei prodotti (dove potresti persino avviare l'animazione al passaggio del mouse), solo per evitare che troppe cose si spostino dappertutto. Nella pagina di un prodotto, se è l'immagine principale, probabilmente dovresti iniziare subito l'animazione.

96
jcaron

Sì, la tua soluzione è valida e funzionerà, ma diventa problematica se un giorno introducerai dei video sul tuo sito.

Inoltre, se le persone vedono il pulsante di riproduzione, si aspettano un video (più lungo di una gif) che di solito fornisce anche audio e qualità migliore.

Per questo potresti usare un approccio in stile Facebook.

enter image description here

Se vuoi che sia più ovvio per il tuo utente, puoi usare solo "Riproduci GIF" anziché "GIF".

In questo modo non avrai problemi se inizi ad aggiungere video poiché ti differenzia.

L'uso di schemi come i siti di Facebook è utile soprattutto perché gli utenti conoscono già questi schemi.

39
Pectoralis Major

Dal punto di vista degli utenti non tecnici, è un video. La mancanza di suono non cambia questo. Non c'è bisogno di spiegare la differenza: basta dire che riprodurrà un video quando si preme il pulsante.

34
rackandboneman

Consiglierei di usare un termine più ampio come "animazione" anziché "GIF", che potrebbe essere troppo tecnico e inutilmente specifico, soprattutto per la tua base di utenti target.

Penso che l'aspetto dipenderà da quello che vuoi. Magari riproduci automaticamente la GIF al passaggio del mouse o disponi di una piccola etichetta "riproduci animazione" in un angolo dell'immagine del prodotto.

17

In questo caso specifico, sceglierei un'icona di rotazione con un testo breve ma descrittivo See 3D accanto/come didascalia. In particolare "dice" cosa accadrà giocando. Inutile spiegare il formato del file, a chi importa.

2
wscourge

Dal momento che nessuno lo ha ancora menzionato,

puoi anche prendere in considerazione la riproduzione automatica del video, ma solo al passaggio del mouse, questo elimina anche il problema della riproduzione automatica di tutto ciò che finisce per sovraccaricare la stimolazione degli occhi dell'utente e delle sue risorse di dispositivo/larghezza di banda.

Tra i lati positivi, l'utente può abituarsi e aspettarsi questa funzione in modo intuitivo senza essere istruito da un'icona, quando ha bisogno di maggiori dettagli di un oggetto a colpo d'occhio. Ciò sradica anche il problema con le persone meno adattate tecnologicamente, come il pubblico di destinazione qui essere sopraffatto o confuso da (GIF) o icone dei pulsanti di riproduzione che offuscano anche la grafica dell'oggetto in vendita.

EDIT: questo era inteso come una proposta per le griglie degli articoli, in cui ce ne sono troppe nella stessa pagina (dal momento che OP ha suggerito di voler eseguire questo nel loro sito). Per le pagine di singoli prodotti (in cui le immagini vengono comunque ingrandite per evitare problemi di offuscamento), un pulsante di riproduzione sovrapposto alla gif è ancora una scelta valida.

1
Leon

Hai preso in considerazione la riproduzione automatica delle gif, piuttosto che aspettare l'interazione dell'utente? Le persone sono attratte dalle cose in movimento, quindi potrebbe aumentare la soddisfazione del cliente (a condizione che le gif siano pertinenti a ciò che gli utenti stanno cercando). Questo suggerimento si riferisce al desktop principalmente perché le gif sono relativamente ad alta intensità di dati.

Se vuoi aspettare l'interazione dell'utente, ti suggerisco di mettere un pulsante di riproduzione nell'angolo in basso a destra della gif. Mi asterrei dal metterlo al centro dell'immagine, poiché molto probabilmente vorrai che i tuoi utenti ottengano l'immagine completa dell '"immagine fissa". Considerando il tuo pubblico di riferimento, suggerisco una semplice icona di "riproduzione". Qualcosa come questo 

1
Marius

Aggiungerei una piccola didascalia all'interno dell'immagine che induce il consumatore a sapere che sta succedendo qualcos'altro. Includi un piccolo suggerimento/testo che dice, See product in Action! o qualcosa del genere poiché siamo preoccupati solo di mostrare il tuo prodotto e non mostrare le tue capacità di incorporare un GIF.

1
Jimenemex