Hover è stato usato sui siti Web per anni come un modo per fornire uno snippet di informazioni ai visitatori senza innescare un'azione. Con smartphone e tablet che stanno gradualmente prendendo il controllo di Internet, dobbiamo prestare maggiore attenzione durante la progettazione di un sito Web. Poiché i touchscreen non sono in grado di gestire il passaggio del mouse, dobbiamo esaminare le alternative agli effetti al passaggio del mouse. Se stai configurando il tuo sito web o non hai le risorse per assumere un web designer professionista, questo tutorial è per te.

Puoi gestire gli effetti hover con i touchscreen ma può essere un po 'imbarazzante. Potresti stare meglio progettandoli del tutto e usando completamente qualcos'altro. Se hai intenzione di usarli sul tuo sito desktop, in genere hai tre alternative agli effetti al passaggio del mouse sui siti Web mobili:

  1. Rimuovili del tutto e sostituiscili con l'azione principale. Aggiungi un menu secondario in cui puoi toccare una volta per l'effetto hover e ancora una volta per l'azione primaria. Posiziona le informazioni al passaggio del mouse sulla propria pagina.

Tutto funzionerà bene su touchscreen e desktop ma richiederà alcune modifiche di progettazione da implementare all'interno di un progetto esistente. Puoi aggirare il problema con JavaScript o il codice jQuery intelligente anche se hai le competenze, ma se stai provando a immaginarlo tutto da solo, potresti fare meglio a usare alternative di progettazione rispetto al codice. Se vuoi esplorare alternative di codice per gli effetti al passaggio del mouse, visita questa pagina.

Rimuovi gli effetti hover dal tuo design

A meno che tu non possa impiegare un web designer freelance per aiutarti, potresti essere meglio rimuovere del tutto gli effetti hover. Sicuramente sembrano puliti e possono offrire utili informazioni supplementari ma ci sono sempre altri modi per ottenere lo stesso effetto.

È possibile conservare l'azione del menu come azione principale e includere le informazioni supplementari altrove nella pagina. Puoi utilizzare riquadri, popup, aumentare il contenuto del descrittore per il punto che stai cercando di fare o qualcos'altro. Se non hai le competenze per implementare jQuery, questa è probabilmente l'opzione più semplice.

Aggiungi un menu secondario

Un menu secondario include il primo tocco che simulerebbe un effetto hover. È possibile includere le informazioni all'interno del menu e mostrare un secondo menu all'interno dello stesso elemento. Quel secondo menu funge da selezione effettiva come accadrebbe su un desktop. La prima pressione simula il passaggio del mouse e la seconda pressione simula l'utente che esegue l'azione principale.

Questa è una valida alternativa agli effetti al passaggio del mouse, ma è limitata dalle dimensioni dello schermo e limita la quantità di informazioni che è possibile aggiungere all'effetto. Gli effetti al passaggio del mouse sono limitati dalla loro natura, ma sono più limitati sui dispositivi mobili dallo schermo immobiliare con cui hai a che fare. Se vuoi davvero includere dati supplementari in un modo non standard, potrebbe essere questo.

Posizionare le informazioni al passaggio del mouse sulla propria pagina

Forse un'opzione più semplice sarebbe quella di includere le informazioni al passaggio del mouse all'interno della propria pagina con un collegamento di testo. Questo semplifica il tuo menu e mantiene la navigazione semplice. Il collegamento ipertestuale funziona su tutti i dispositivi e ottieni una pagina aggiuntiva per dimensioni del sito e SEO. L'aspetto negativo è che dovrai aumentare il contenuto supplementare di almeno 300 parole o giù di lì per farlo funzionare.

Finché puoi riempire le informazioni con sufficiente attenzione in modo che leggano bene e aggiungano valore al lettore, penso personalmente che questa sia la migliore alternativa. Decidere dove posizionare tali collegamenti ai dati supplementari dipende da te e dipenderà dal tuo design, ma le pagine extra ti daranno un'ulteriore opportunità di aggiungere inviti all'azione, aggiungere il tuo numero di telefono, indirizzo e-mail e qualsiasi informazione aggiuntiva che potrebbe essere utilizzata fare una vendita.

Stare con il mouse

Se desideri utilizzare un qualche tipo di effetto hover sul tuo sito Web principale, dovrai utilizzarlo sul tuo sito mobile o almeno sulla versione mobile. Esistono opzioni di menu a levetta o soluzioni JavaScript ma richiedono l'implementazione di un esperto. Questa pagina illustra le tue alternative se desideri esplorarle ulteriormente.

Una delle trappole più facili da cogliere quando inizi da solo o costruisci il tuo primo sito Web è progettare per te e non per il tuo pubblico. Devi certamente progettare qualcosa che ti piace, ma quando consideri l'usabilità devi dare la priorità al pubblico. Devi anche tener conto dei dispositivi che utilizzeranno e del modo in cui è più probabile che interagiscano meglio con il tuo sito web.

Se il tuo pubblico è giovane, utilizzerà il cellulare. Se utilizzano dispositivi mobili, gli effetti al passaggio del mouse e altre opzioni di progettazione come questa non sono l'opzione migliore.