6.5 Brukeropplevelse og brukbarhetstesting

// Ingen feedback når data sendes
button.addEventListener('click', async () => {
    await sendData();
    // Brukeren vet ikke om noe skjedde
});

God: Tydelig feedback

button.addEventListener('click', async () => {
    button.disabled = true;
    button.textContent = 'Sender...';

    try {
        await sendData();
        button.textContent = 'Sendt!';
        setTimeout(() => {
            button.disabled = false;
            button.textContent = 'Send';
        }, 2000);
    } catch (error) {
        alert('Feil: ' + error.message);
        button.disabled = false;
        button.textContent = 'Send';
    }
});

Dårlig: Irreversible handlinger

<button onclick="slettAlt()">Slett</button>

God: Bekreftelse før farlige handlinger

function slettMedBekreftelse() {
    if (confirm('Er du sikker på at du vil slette alt? Dette kan ikke angres.')) {
        slettAlt();
    }
}

Dårlig: Inkonsistent navigasjon
Tilbake-knapp øverst venstre på noen sider, nederst høyre på andre.

God: Konsistent plassering
Samme navigasjonsstruktur på alle sider.

HTML:

<form>
    <input type="text" name="user">
    <input type="text" name="pass">
    <button>OK</button>
</form>

Problemer funnet:

1. Brudd på heuristikk #9 (Feilmeldinger):
- Ingen validering eller feilmeldinger
- Alvorlighet: 3/4 (stor)
- Forslag: Vis tydelige feilmeldinger

2. Brudd på heuristikk #2 (Match virkelighet):
- Input-felter mangler labels (hva skal skrives inn?)
- Knapp sier bare "OK" (ikke beskrivende)
- Alvorlighet: 3/4
- Forslag: Legg til labels og tydelig knapp-tekst

3. Brudd på heuristikk #5 (Forebygging):
- Passord-felt er type="text", ikke type="password"
- Alvorlighet: 4/4 (kritisk sikkerhetsproblem)
- Forslag: Bruk riktig input-type

Forbedret versjon:

<form id="loginForm">
    <label for="brukernavn">Brukernavn:</label>
    <input type="text" id="brukernavn" name="brukernavn" required>

    <label for="passord">Passord:</label>
    <input type="password" id="passord" name="passord" required>

    <button type="submit">Logg inn</button>
    <div id="feilmelding" style="color:red;"></div>
</form>

Oppgave til bruker:
"Du skal kjøpe en bok til 299 kr. Legg den i handlekurven og fullfør kjøpet. Tenk høyt mens du gjør det."

Observasjoner:

Bruker 1 (Kari, 28 år):
- Fant "Legg i kurv"-knappen umiddelbart (00:05)
- Usikker på om produktet ble lagt til (manglende feedback)
- Lette etter handlekurv-ikon i 12 sekunder
- Klikket "Kjøp nå" ved et uhell, ville bare se kurven
- Kommentar: "Jeg vil bare se hva som ligger i kurven uten å kjøpe nå"

Bruker 2 (Ola, 45 år):
- Klikket "Legg i kurv" (00:08)
- Sa høyt: "Skjedde det noe? Jeg vet ikke om det fungerte"
- Scrollet ned for å lete etter kurv
- Ga opp etter 20 sekunder, klikket på logo for å starte på nytt

Identifiserte problemer:
1. Ingen visuell feedback når produkt legges i kurv (kritisk)
2. Handlekurv-ikon er vanskelig å finne
3. Forvirrende knapper ("Kjøp nå" vs "Se kurv")

Anbefalte forbedringer:

// Vis tydelig feedback når produkt legges til
function leggIKurv(produkt) {
    // Legg til i kurv
    handlekurv.push(produkt);

    // Vis toast-melding
    visMelding(`${produkt.navn} lagt i handlekurven!`);

    // Oppdater antall i kurv-ikon
    oppdaterKurvAntall();

    // Animasjon på kurv-ikon
    kurvIkon.classList.add('bounce');
}

<div onclick="submit()">Send</div>
<img src="logo.png">
<span style="color: #777; background: #999;">Viktig melding</span>

Problemer:
- <div> som knapp - ikke tastaturnavigasjon, ingen semantikk
- Bilde uten alt-tekst - skjermlesere vet ikke hva det er
- Dårlig fargekontrast - vanskelig å lese

God - Tilgjengelig:

<button type="submit" onclick="submit()">Send skjema</button>
<img src="logo.png" alt="Firmaets logo">
<p style="color: #000; background: #fff;" role="alert" aria-live="polite">
    Viktig melding
</p>

Tastaturnavigasjon:

<nav>
    <a href="#hovedinnhold">Hopp til hovedinnhold</a>
</nav>

<main id="hovedinnhold" tabindex="-1">
    <!-- Innhold -->
</main>

ARIA-attributter (for skjermlesere):

<!-- Ekspanderbar seksjon -->
<button
    aria-expanded="false"
    aria-controls="innhold"
    onclick="toggle()">
    Vis mer
</button>
<div id="innhold" hidden>
    Skjult innhold...
</div>

<!-- Loading-indikator -->
<div role="status" aria-live="polite">
    <span aria-busy="true">Laster data...</span>
</div>

Test tilgjengelighet:
- Prøv å navigere med bare TAB-tasten
- Slå av CSS - er innholdet fortsatt forståelig?
- Bruk skjermleser (NVDA for Windows, VoiceOver for Mac)
- Bruk verktøy som Lighthouse i Chrome DevTools