Menu che si apre, pannello laterale, fade al scroll: le interazioni rendono il sito vivo, ma mal usate rallentano e confondono. Nel builder Martini puoi collegare trigger e pannelli senza scrivere JavaScript a mano — l’importante è sapere quando fermarsi.
Trigger e pannello: concetto base
Un elemento (bottone, icona hamburger) è il trigger; al click apre un pannello (menu mobile, modale, drawer). Stesso modello usato su siti professionali moderni, documentato anche per il runtime pubblico del progetto.
Animazioni che aiutano la UX
- Transizione breve (200–350 ms) su apertura menu
- Feedback hover su bottoni principali
- Reveal leggero su sezioni chiave (non su ogni paragrafo)
Quando evitarle
- Animazioni lunghe che ritardano la lettura
- Effetti su ogni blocco che competono tra loro
- Popup aggressivi prima che l’utente abbia capito il sito
Accessibilità
Il focus deve restare gestibile: chi usa tastiera deve aprire e chiudere menu e pannelli. Testa Tab e Esc. Rispetta anche prefers-reduced-motion dove possibile — meno movimento per chi lo richiede a livello di sistema.
Performance
Animazioni CSS leggere battono librerie pesanti. Su mobile 4G, una home con troppi effetti scroll-linked può scattare: privilegia semplicità.
Coerenza con il brand
Stesso easing e durata su tutto il sito. Salva sezioni con interazioni come componenti per non riconfigurare ogni volta.
Secondo click e chiusura
Comportamento atteso: secondo tap sul trigger chiude il pannello. Verifica in anteprima prima del publish insieme alla checklist go-live.
Prossimi passi
Prova su un progetto demo: registrati, aggiungi un menu mobile con pannello, pubblica in staging e testa su telefono reale. Per struttura pagine: multi pagina.
