Figma – Annotált használhatósági audit

Cél

Ezen az alkalmon FigJamben vagy Figmában elkészíted a 3. házi feladat auditját: képernyőképekre annotációkat helyezel, amelyek megmutatják, melyik alapelv sérül, mi a következmény, és milyen javítás lehetséges. Közben gyakorlod a Figma alapfelületét is (képek beillesztése, nagyítás, rétegek), amelyre a 6. fejezetben építünk.

Mire jó az annotált audit?

Egy audit eredménye akkor használható, ha a lelet ott van, ahol a probléma. Egy külön dokumentumban felsorolt „kontraszt alacsony a 3. oldalon” helyett a képernyőképre rajzolt jelölés és a mellé írt megjegyzés azonnal érthető. Az annotáció három összetevőből áll: hol (jelölés a képen), mi (megfigyelés) és miért baj (alapelv és következmény).

Feladat: hat annotált lelet

1. Válassz egy szolgáltatást és egy feladatot (például időpontfoglalás vagy jegyvásárlás), és járd végig a feladatot. Közben készíts képernyőképeket a kulcsmomentumokról (kezdés, döntés, hiba, visszaigazolás).
2. Hozz létre egy új FigJam- vagy Figma-fájlt, és illeszd be a képernyőképeket egymás mellé, a feladat sorrendjében. Adj minden képernyőnek címet.
3. Jelöld meg a problémákat a képen téglalappal vagy nyíllal. Egy jelölés egy problémát mutasson; a jelöléseket számozd.
4. Írd meg a leleteket egy mellé tett cetlin vagy szövegdobozban, ebben a szerkezetben:
   • Megfigyelés: mit látsz (nem vélemény).
   • Alapelv: melyik heurisztika vagy WCAG elv érintett.
   • Következmény: mit okoz a felhasználónak (a persona szempontjából).
   • Javítási irány: mit változtatnál, és miért.
5. Végezz kézi akadálymentességi próbát: a böngészőben a Tab billentyűvel járd végig a feladatot, és jegyezd fel, ha elvész a fókusz, vagy ha egy elem nem érhető el. Egy leletet ebből készíts.
6. Ellenőrizd a kontrasztot: válassz egy szöveget és egy felületi elemet, mérd meg a kontrasztarányukat (kontrasztellenőrző eszközzel), és írd fel az eredményt. Ha a szám az AA szint alatt van, az lelet.
7. Készíts állapotlistát egy külön szekcióban: normál, betöltő, üres, hiba, siker, tiltott. Mindegyikhez írd: megtaláltad-e, és ha igen, milyen minőségű.
8. Rendezd súlyosság szerint: jelöld, melyik lelet a legnagyobb hatású (a súlyossági skála részletesebben a 8. fejezetben szerepel; most elég a „nagy / közepes / kicsi” besorolás indoklással).
9. Frissítsd a persona-t, ha az audit új kockázatot mutatott, és jelöld, mi változott.
10. Oszd meg a fájlt az oktatóval.

Ellenőrzőlista

• Hat lelet van, mindegyik alapelvhez kötve és következménnyel.
• Legalább két lelet akadálymentességi.
• A leletek megfigyelések, nem „nem szép” típusú vélemények.
• A javítási irányok nem csak „szebb” megoldást javasolnak.
• Az állapotlista teljes.

Tanulási források

• Nielsen Norman Group – 10 Usability Heuristics (angol)
• W3C – WCAG 2.2 gyorsreferencia (angol)
• Figma Learn – hivatalos súgó: képek beillesztése és megjegyzések