Interaktion & feedback

Varje klick förtjänar ett svar

En användare klickar på en knapp. Inget händer visuellt. Vad gör de?

De klickar igen. Och igen. Kanske dubbel- eller trippelklickar. Om det var ett formulär skickar de nu tre beställningar.

Det här är inte ett hypotetiskt scenario. Det händer varje dag på sidor som saknar interaktionsfeedback. Feedback är grundläggande kommunikation mellan gränssnitt och användare, och lika mycket en del av designen som typografin i förra delen. Sidan ska inte bara se trovärdig ut, den ska kännas trovärdig när man rör vid den.

States på interaktiva element

Varje interaktivt element, som en knapp, länk eller input, har flera states. De flesta stylar default och :hover, och glömmer resten. Det är begripligt: :focus och :active syns mer sällan och ger inte samma visuella effekt. Men det är precis de som avgör om sidan går att använda utan mus. Det som syns minst i din egen testning är avgörande för den som navigerar med tangentbord.

Default

Utgångsläget. Här sätter du grundutseendet, och ett löfte: cursor: pointer visar handen som säger “det här går att klicka på”. Webbläsaren gör det automatiskt för <a>, men inte för <button> och andra klickbara element, så sätt den själv.

.btn {
    background-color: #0057b8;
    color: white;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
}

:hover

Aktiveras när muspekaren vilar över elementet. Den vanligaste feedbacken, och en mörkare nyans räcker långt: den säger “jag hör dig”. Kom ihåg att hover inte finns på pekskärmar, så den får aldrig ensam bära viktig information.

.btn:hover {
    background-color: #004494;
}

:active

Aktiveras medan elementet hålls nedtryckt. En ännu mörkare nyans och en förflyttning på en enda pixel nedåt ger en fysisk tryckkänsla.

.btn:active {
    background-color: #003070;
    transform: translateY(1px);
}

:focus

Aktiveras när elementet har tangentbordsfokus. Det är den state som oftast glöms bort, och samtidigt den enda ledtråden om var på sidan en tangentbordsanvändare befinner sig. Den är så viktig att den får ett eget avsnitt.

:focus och :focus-visible

:focus aktiveras när ett element har tangentbordsfokus, det är den enda visuella ledtråden för tangentbordsanvändare om var de befinner sig på sidan.

:focus-visible är en modernare variant: den aktiveras bara när fokus kom via tangentbord, inte via musklick. Det gör att knappen inte får en synlig outline när du klickar på den med musen, men alltid visar den vid tangentbordsnavigering.

Den gamla metoden aktiveras alltid, även vid musklick:

.btn:focus {
    outline: 3px solid #0057b8;
}

Den moderna aktiveras bara vid tangentbordsfokus:

.btn:focus-visible {
    outline: 3px solid #0057b8;
    outline-offset: 3px;
}

Användbar kombo: nollställ webbläsarens standard och sätt ditt eget. Nollställningen får bara ske så här, i samma stund som ersättaren finns på plats:

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    outline: 3px solid #0057b8;
    outline-offset: 3px;
}

Transitions

transition gör att state-ändringar sker mjukt istället för abrupt. En knapp som byter bakgrundsfärg direkt kan upplevas som ett fel. En mjuk övergång kommunicerar avsikt.

.btn {
    background-color: #0057b8;
    transition: background-color 0.2s ease;
}

.btn:hover {
    background-color: #004494;
}

Raden läses: animera background-color, under 0.2 sekunder, med mjuk easing. När hover byter färgen sker övergången gradvis i stället för omedelbart.

Du kan animera flera egenskaper:

.btn {
    transition:
        background-color 0.2s ease,
        transform 0.1s ease;
}

Animations-etik

Animationer ska tjäna kommunikationen, inte stjäla uppmärksamheten. En 0.2s transition på background-color är subtil och naturlig. En 2s rotation på knappen är ett hinder.

Som minimum: respektera prefers-reduced-motion. Vissa användare mår illa av rörliga gränssnitt. Du känner kanske igen blocket från CSS-reset-delens utmaning:

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}