6.5 Brukeropplevelse og brukbarhetstesting

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

God: Tydeleg 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årleg: Irreversible handlingar

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

God: Stadfesting før farlege handlingar

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

Dårleg: Inkonsistent navigasjon
Tilbake-knapp øvst venstre på nokre sider, nedst høgre på andre.

God: Konsistent plassering
Same navigasjonsstruktur på alle sider.

HTML:

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

Problem funne:

1. Brot på heuristikk #9 (Feilmeldingar):
- Inga validering eller feilmeldingar
- Alvorsgrad: 3/4 (stor)
- Forslag: Vis tydelege feilmeldingar

2. Brot på heuristikk #2 (Match verkelegheit):
- Input-felt manglar labels (kva skal skrivast inn?)
- Knapp seier berre "OK" (ikkje skildrande)
- Alvorsgrad: 3/4
- Forslag: Legg til labels og tydeleg knapp-tekst

3. Brot på heuristikk #5 (Førebygging):
- Passord-felt er type="text", ikkje type="password"
- Alvorsgrad: 4/4 (kritisk tryggleiksproblem)
- Forslag: Bruk rett input-type

Forbetra 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>

Oppgåve til brukar:
"Du skal kjøpe ei bok til 299 kr. Legg ho i handlekorga og fullfør kjøpet. Tenk høgt medan du gjer det."

Observasjonar:

Brukar 1 (Kari, 28 år):
- Fann "Legg i kurv"-knappen straks (00:05)
- Usikker på om produktet vart lagt til (manglande feedback)
- Leita etter handlekorg-ikon i 12 sekund
- Klikka "Kjøp nå" ved eit uhell, ville berre sjå korga
- Kommentar: "Eg vil berre sjå kva som ligg i korga utan å kjøpe no"

Brukar 2 (Ola, 45 år):
- Klikka "Legg i kurv" (00:08)
- Sa høgt: "Skjedde det noko? Eg veit ikkje om det fungerte"
- Scrolla ned for å leite etter korg
- Gav opp etter 20 sekund, klikka på logo for å starte på nytt

Identifiserte problem:
1. Inga visuell feedback når produkt blir lagt i korg (kritisk)
2. Handlekorg-ikon er vanskeleg å finne
3. Forvirrande knappar ("Kjøp nå" vs "Se kurv")

Tilrådde forbetringar:

// 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>

Problem:
- <div> som knapp - ikkje tastaturnavigasjon, ingen semantikk
- Bilete utan alt-tekst - skjermlesarar veit ikkje kva det er
- Dårleg fargekontrast - vanskeleg å lese

God - Tilgjengeleg:

<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-attributt (for skjermlesarar):

<!-- 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 tilgjenge:
- Prøv å navigere med berre TAB-tasten
- Slå av CSS - er innhaldet framleis forståeleg?
- Bruk skjermlesar (NVDA for Windows, VoiceOver for Mac)
- Bruk verktøy som Lighthouse i Chrome DevTools