Overlays är ett övergripande samlingsnamn för alla olika typer av fönster som lägger sig ovanpå det innehåll du tittar på eller interagerar med. De används för att förenkla upplevelsen genom att visa mer information utan att användaren behöver lämna sidan och är ett effektivt sätt att fånga användarens uppmärksamhet. Vanliga typer av overlays inkluderar modals, dialoger, lightboxes, coachmarks, pop-ups, pop overs och alerts.
Anatomin hos Overlays
Strukturella Komponenter: Overlays består av flera nyckelelement som gör dem effektiva och användarvänliga:
Innehållsarea: Den del av overlayen som innehåller meddelandet, formuläret eller informationen som användaren behöver.
Bakgrund: En semitransparent mörkläggning som skiljer overlayen från det underliggande innehållet och drar fokus till overlayen.
Stängknapp: En tydlig knapp som gör det enkelt för användaren att stänga overlayen.
Interaktivitet: Möjligheten att stänga overlayen genom att klicka utanför den eller använda tangentbordet.
Interaktivitet & Flöde: Overlays bör vara utformade för att inte störa användarupplevelsen i onödan.
Användningsvillkor: Overlays ska bara visas när användaren har initierat en åtgärd, till exempel klickat på en knapp eller länk.
Storlek och placering: De bör inte täcka mer än halva ytan av det underliggande innehållet för att undvika att blockera för mycket av sidan.
Tillgänglighet: Overlays ska vara tangentbords-kompatibla och lätt stängbara för alla användare.
När man ska använda
Ytterligare information eller formulär: När användaren behöver mer information eller fylla i ett formulär utan att lämna den aktuella sidan.
Viktiga meddelanden: För att visa viktiga meddelanden eller varningar som användaren måste se och bekräfta.
Guidning och introduktioner: Coachmarks och introduktionspop-ups kan användas för att vägleda nya användare genom en webbplats eller app.
Tips för att lyckas med Overlays
Tips 1: Använd overlays sparsamt: För många overlays kan irritera användaren och förstöra upplevelsen. Använd dem endast när det är absolut nödvändigt.
Tips 2: Gör dem lätta att stänga: Inkludera en tydlig stängknapp och möjligheten att stänga overlayen genom att klicka utanför den.
Tips 3: Anpassa för mobil: Undvik overlays på mobila enheter där de kan täcka för mycket av skärmen och vara svåra att hantera. Använd istället andra metoder för att visa nödvändig information.
För- och nackdelar med Overlays
Fördelar:
Förenklad upplevelse: Ger användarna mer information eller interaktiva element utan att de behöver lämna sidan.
Fångar uppmärksamhet: Overlays drar omedelbart användarens uppmärksamhet till viktig information eller åtgärder.
Flexibilitet: Kan användas för en mängd olika ändamål, från formulär till varningar och guider.
Nackdelar:
Kan vara störande: Om de används för ofta eller på fel sätt kan overlays bli irriterande för användarna.
Blockerar innehåll: Om de täcker för mycket av sidan kan de blockera viktig information och påverka användarupplevelsen negativt.
Inte alltid mobilvänliga: Overlays kan vara svåra att hantera på små skärmar och kan blockera för mycket av innehållet.