Suggerimento vs. Scheda a comparsa
Un tooltip dà un' breve etichetta o suggerimento. Una hover card mostra un'anteprima più ricca di una persona, un elemento o un link.
Usa un tooltip quando poche parole sono sufficienti. Usa una scheda hover quando un'anteprima può evitare di andare in un'altra pagina. Deve funzionare anche con tastiera e touch.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Suggerimento
Un tooltip è una breve nota su un controllo. Si apre quando il mouse ci passa sopra o la tastiera lo seleziona. Le persone non possono usarlo come un pulsante.
role="tooltip"Quando un pulsante icona riceve il focus da tastiera, appare “Copia link”. Il focus resta sul pulsante.
- Usalo quando
- Usalo per spiegare brevemente un’etichetta di controllo sia al passaggio del mouse sia al focus della tastiera.
- Non usarlo quando
- Non mettere mai azioni, istruzioni da leggere assolutamente o contenuti lunghi all'interno di un tooltip.
- Nome usato nel codice
role="tooltip"
Scheda al passaggio del mouse
Una hover card è un'anteprima ricca. Si apre quando si passa il mouse o si fa焦点 su un riferimento, senza bloccare la pagina.
HoverCardPassa il mouse sopra il nome di un autore per vedere una breve biografia e il numero di follower. Il profilo completo rimane chiuso.
- Usalo quando
- Usalo per dettagli di anteprima opzionali che aiutano le persone a scegliere dove andare dopo.
- Non usarlo quando
- Non nascondere mai informazioni obbligatorie dietro un hover perché i dispositivi touch potrebbero non aprirle in modo affidabile.
- Nome usato nel codice
HoverCard
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| SuggerimentoTooltip | Usalo per spiegare brevemente un’etichetta di controllo sia al passaggio del mouse sia al focus della tastiera. | Non mettere mai azioni, istruzioni da leggere assolutamente o contenuti lunghi all'interno di un tooltip. | role="tooltip" |
| Scheda al passaggio del mouseHover Card | Usalo per dettagli di anteprima opzionali che aiutano le persone a scegliere dove andare dopo. | Non nascondere mai informazioni obbligatorie dietro un hover perché i dispositivi touch potrebbero non aprirle in modo affidabile. | HoverCard |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Suggerimento (Tooltip), Scheda al passaggio del mouse (Hover Card) per il nostro reale flusso utente. Usa questa regola: Un tooltip dà un' breve etichetta o suggerimento. Una hover card mostra un'anteprima più ricca di una persona, un elemento o un link. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.