Sviluppa effetti al passaggio del mouse che non siano invasivi sui dispositivi touch.
Il passaggio del mouse dovrebbe essere utilizzato solo per effetti supplementari: le azioni principali rimangono visibili, gli stati di focus vengono trattati allo stesso modo e gli effetti sono limitati ai dispositivi con una vera funzionalità di passaggio del mouse.
Per gli sviluppatori front-end e i web designer, "Progettare effetti di passaggio del mouse per mouse e touch" illustra la differenza tra "valore aggiunto" e "funzionalità di input". Uno "stato persistente" è il tipico segnale di avvertimento.
Pubblicato: 3 minuti di lettura · Autore: Sebastian Geier
Come si progetta un feedback al passaggio del mouse che non causi problemi di usabilità sui dispositivi touch?
Gli effetti di passaggio del mouse vengono attivati solo se il dispositivo di input supporta in modo affidabile il passaggio del mouse. Il contenuto e il funzionamento rimangono completamente accessibili tramite tastiera, touch e stati predefiniti visibili.
Stato persistente
Stato persistente Un tocco attiva il passaggio del mouse e blocca il primo clic previsto.
Azione invisibile Il pulsante o l'etichetta appaiono solo al passaggio del mouse e rimangono non rilevabili per l'input da tastiera e touch.
Interruzione del movimento Le animazioni di grandi dimensioni spostano gli elementi o ignorano i movimenti ridotti.
Valore aggiunto
Criterio di test
Valore aggiunto
Senza passare il mouse sopra la schermata, non si perdono né informazioni né funzioni; etichette e azioni principali rimangono sempre visibili e utilizzabili.
Criterio di test
Capacità di input
Le query multimediali verificano la funzionalità di hover e puntatore anziché un tipo di dispositivo presunto.
Uguaglianza del focus Il focus da tastiera rende visibile lo stesso stato rilevante e mantiene un contrasto chiaro indipendentemente dal dispositivo di puntamento.
Uguaglianza del focus
Interazioni il cui contenuto o azione è accessibile solo al passaggio del mouse.
Tocchi errati e doppi tocchi su dispositivi touch per elementi con effetto hover.
Capacità di input
Tutti gli stati di hover sono classificati come informazione, azione e puro feedback.
I contenuti essenziali sono accessibili in modo permanente o selezionabile; al passaggio del mouse rimane un elemento aggiuntivo.
Il tocco, la tastiera, il mouse e la riduzione del movimento vengono testati sugli stessi componenti.
Test di caduta: "Stato persistente"
Una scheda prodotto evidenzia visivamente il link quando si muove il mouse, ma il titolo e il prezzo rimangono visualizzati in modo permanente. Al tocco, il primo tocco porta direttamente al link; la stessa evidenziazione appare quando la tastiera è attiva, senza nascondere alcuna informazione aggiuntiva.
Quali domande relative a "Progettazione di effetti al passaggio del mouse per mouse e touch" attivano ulteriori test?
Strutturare le variabili CSS in più aree e marchi Amplia il punto di test "Valore aggiunto". La domanda guida è: Come si adatta un sistema di variabili CSS a diverse aree e marchi?
Viene offerta una prospettiva complementare Verificare sistematicamente la coerenza tra desktop, tablet e dispositivi mobiliLei risponde alla domanda: "Come si verifica sistematicamente la coerenza tra desktop, tablet e dispositivi mobili? "
Se desideri implementare concretamente la "progettazione di effetti al passaggio del mouse e al tocco", puoi trovare maggiori informazioni su. . . Sistemi web robusti a cui fare riferimento in seguito. Lì, l'attenzione si concentra su "stati di interazione e qualità visiva" e "valore aggiunto".
Conclusione: Progettazione di effetti al passaggio del mouse per mouse e touch
Il passaggio del mouse è un segnale di feedback opzionale, non un requisito per il funzionamento. Percorsi di focus e touch equivalenti garantiscono la robustezza del componente.
Fonti e ulteriori informazioni
La classificazione di "Progettazione di effetti al passaggio del mouse e tramite tocco" si basa sulla seguente documentazione e sugli standard ufficiali.
Linee guida per l'accessibilità dei contenuti web 2.2 – W3CLa raccomandazione normativa del W3C contiene requisiti verificabili per tastiera, funzionamento del puntatore, focus e contenuti in movimento.
Media Queries Livello 5 – W3CLa specifica definisce, tra le altre cose, le query relative a puntatore, passaggio del mouse, pressione e preferenze di movimento per le interfacce adattive.
Tesi chiave
Il passaggio del mouse funge solo da feedback aggiuntivo ed è collegato alle funzionalità di input appropriate tramite una media query. Le stesse informazioni e azioni devono essere accessibili anche senza passare il mouse, tramite focus, clic o visualizzazione persistente.
Cosa non riguarda
Il passaggio del mouse non deve né nascondere informazioni necessarie né essere l'unico modo per attivare un'azione.
Di cosa si tratta
Lo stato integra il feedback visivo su dispositivi di puntamento idonei; focus, clic e visualizzazione persistente hanno lo stesso significato.
Architettura Frontend e CSS
Rimuovere in modo sicuro gli stili obsoleti invece di limitarsi a confrontare le dimensioni dei file
La progettazione degli effetti al passaggio del mouse e del tocco richiede una checklist separata: quali prove sono necessarie prima di eliminare CSS apparentemente inutilizzati?
Architettura Frontend e CSS
Pianificare le visualizzazioni di stampa e la riduzione del movimento come parte del frontend
Integrare "Progettazione degli effetti al passaggio del mouse e del tocco" con una decisione separata: quali regole del frontend garantiscono una buona visualizzazione di stampa e un rendering con riduzione del movimento?
Panoramica degli Insight
Tutti gli Insight di VELUNO in sintesi
Ulteriori analisi sui sistemi web, la visibilità digitale e modelli di lavoro robusti.
Funzionalità di input: il percorso verso il test
Un inventario delle interazioni inizia con gli elementi che presentano contenuti nascosti o un primo tocco ritardato. Questi casi possono quindi essere suddivisi in stati persistenti e specifici per dispositivo.