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

Didascalia sotto o sopra l'immagine ai fini della navigazione?

È già stato discusso qui che ai fini del layout, dove immagini e video appaiono su una pagina web, ordinario i sottotitoli sono probabilmente posizionati meglio sotto il grafico - in gran parte dovuto alla convenzione.

Voglio prendere queste considerazioni nella navigazione. Considera di atterrare su una pagina web di categoria, il cui unico scopo è di indirizzarti alla sottocategoria appropriata informandoti cosa c'è dentro ciascuna.

Senza immagini: sarebbe simile a questo:

Without images

Quindi, considera che ogni sottocategoria sarebbe probabilmente più chiara se avesse una foto pertinente per facilitare la navigazione. Ma dove dovrebbe essere collocato?

Il primo compito da affrontare è decidere se saranno le immagini o il testo che verranno utilizzati come spunto principale per un utente per determinare dove navigare. Ciò può dipendere dal sito Web. Ma anche quando ciò viene fatto, per entrambe le considerazioni, l'immagine o il testo dovrebbero essere visualizzati per primi? Che cosa implica? O sono più o meno equivalenti?

Esempi sotto.



Prima il testo:

enter image description here



Immagine prima:

enter image description here


Quale sarebbe meglio illustrare che ogni blocco (combinazione di immagini e testo) costituisce un collegamento di navigazione alla corrispondente sottocategoria?

10
Baumr

Risposta breve: Sottotitoli di seguito, titoli di cui sopra.

Se stai spiegando qualcosa per migliorare la comprensione di un'immagine, puoi pensarla come una didascalia (anche se è solo una parola) e posizionarla sotto.

Se è qualcosa che è necessario affinché l'immagine abbia un senso, allora pensala come un titolo e mettila sopra.

Il concetto generale è che non dovresti introdurre qualcosa che confonde gli utenti, quindi se un'immagine non è chiara senza una spiegazione di qualche tipo, assicurati di darla prima dell'immagine.

Modifica: se spesso ha senso includere sia un titolo che una didascalia, quindi non renderlo una o/o una domanda.

7
JohnGB

Come dice JohnGB - titoli sopra in questo tipo di scenario.

Ma sarei tentato di provare con il titolo sovrapposto le immagini per suggerire che puoi fare clic sul titolo o sull'immagine. Sì, anche la modifica del cursore dovrebbe essere un indizio, ma puoi usare un leggero oscuramento/schiarimento dello sfondo del titolo mentre passi con il mouse sull'immagine per dare un ulteriore suggerimento, almeno sui dispositivi guidati dal mouse.

Su schermi piccoli o dispositivi mobili, in genere si desidera prima anche il titolo, poiché esiste la possibilità che la parte inferiore dell'immagine sia fuori dallo schermo (in particolare l'orientamento orizzontale).

enter image description here

Sui dispositivi mobili in cui l'opacità potrebbe non essere supportata, puoi semplicemente lasciare un margine attorno al titolo. Ad esempio, come in questo mockup di seguito, l'obiettivo è garantire che il contenuto sia l'interfaccia

enter image description here

10
Roger Attrill