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 l'hover, è necessario esaminare le alternative agli effetti hover. 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 per passare il mouse sugli effetti sui siti Web mobili:
- Rimuovili del tutto e sostituiscili con l'azione primaria.
- Aggiungi un menu secondario in cui puoi toccare una volta per l'effetto hover e un'altra per l'azione principale.
- Posizionare 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 aggirarlo con JavaScript o il codice jQuery intelligente anche se hai le competenze, ma se stai cercando di capirlo da solo, potresti essere meglio usando alternative di progettazione che 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 usare 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 su un mouse e la seconda pressione simula l'utente che esegue l'azione principale.
Questa è una valida alternativa agli effetti hover, ma è limitata dalle dimensioni dello schermo e limita la quantità di informazioni che puoi aggiungere al tuo 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 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 affrontare quando inizi da solo o costruisci il tuo primo sito Web è la progettazione 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 usano dispositivi mobili, gli effetti al passaggio del mouse e altre opzioni di progettazione come questa non sono l'opzione migliore.
