Come indicare che un'immagine è anche un collegamento?
Nel mio sito web ho una sezione chiamata "Techonology" che non fa parte del contenuto principale in cui inserisco i loghi di ogni tecnologia utilizzata nel sito Web (PHP, MySQL, Bootstrap, ecc.). Ma sto cercando un modo per indicare all'utente che anche le immagini sono collegamenti.
Esiste una tecnica per indicare che un'immagine è un collegamento quando questo non può essere troppo ovvio?
Ci sono alcune pratiche comuni da considerare:
- Rendi l'immagine simile a un pulsante dandole un aspetto rialzato con ombre. Questo aiuta a suggerire che il pulsante può essere premuto.
- In alternativa, crea l'effetto pulsante incorniciando l'immagine in un bordo (questo può essere difficile da esteticamente)
- Assicurati che l'immagine abbia uno stato al passaggio del mouse che implica che possa essere interagita. Alzarlo ulteriormente dalla pagina o applicare/colorare il bordo può fare miracoli.
La cosa importante, tuttavia, è che è chiaro quando un'immagine è e non è un collegamento. Se gli utenti non vedono differenze tra elementi statici e interattivi fino a quando non fanno clic, genererai confusione e frustrazione e impedirai agli utenti di fare clic in futuro.
Se come nella tua domanda vuoi avere un link MySQL con il logo MySQL, potresti fare di peggio di quello che Stack Overflow fa con la sua schermata di accesso:
A seconda del contesto, non mi preoccuperei troppo di una distinzione visiva. Come già detto tajmo, la migliore indicazione è il cambio di stato del mouse.
In molti test utente noto come appaiono le lancette e non devono nemmeno fare clic sull'elemento. Ancora meno utenti tecnici differiscono tra elementi cliccabili e non cliccabili perché inconsciamente notano una manina che appare quando passano il mouse su un link.
Un approccio a questo problema potrebbe essere quello di pensare a ciò che rende qualsiasi elemento "cliccabile". Testo? Sottolineatura/bordo? Effetti al passaggio del mouse? Colori? Schede? Aspetto sollevato con le ombre? Un testo che lo indica e dice "CLICCA!"? Isolamento/spaziatura?
Ecco alcuni modi in cui altri lo fanno:
Ad esempio, i collegamenti sul tuo sito sono blu e diventano rossi quando si passa con il mouse. Quindi, per mostrare che anche le immagini sono collegamenti, dovresti dare loro un bordo blu con qualche pixel di riempimento. Se l'utente passa con il mouse su quell'immagine, vedrà la mano anziché il cursore a forma di freccia e il bordo dovrebbe essere cambiato in rosso (come nei collegamenti) per indicare che anche l'immagine è un collegamento.