Figma – Prototípus és interakciók

Cél

Alakítsd a statikus wireframe-eket bejárható prototípussá, és készítsd elő az első kipróbálásra. A prototípus célja nem az, hogy fejlesztett terméknek tűnjön, hanem hogy kipróbálható legyen egy konkrét felhasználói feladat és az ahhoz tartozó visszajelzés. A gyakorlat végére elkészül a 7. házi feladat prototípusa.

Hogyan működik a Figma-prototípus?

A Figma Prototype fülén a frame-ek közötti kapcsolatokat definiálod. Egy kapcsolat három részből áll:

• Trigger (kiváltó esemény): ami elindítja a változást, például kattintás (On click), rámutatás (While hovering), húzás (On drag) vagy késleltetés (After delay).
• Akció (action): mi történik. Leggyakoribb a Navigate to (átlépés egy másik frame-re), de van Open overlay (felugró réteg), Swap (elem cseréje), Back (vissza).
• Átmenet (transition): hogyan történik. Például Instant (azonnal), Dissolve (átfedés), Move in (becsúszik), Smart animate (a közös elemek mozgása folytonos). Az átmenetekről a 7. fejezet mikrointerakciós leckéjében tanultunk; itt a Figma kínálatából választasz.

A kiindulópont (starting point) az a frame, ahonnan a prototípus indul; ezt jelölni kell, különben a kipróbáló nem tudja, hol kezdjen. A flow a Figmában egy induló pont által meghatározott útvonal; több flow-t is létrehozhatsz egy fájlban (például a fő út és a hibaút).

Mit érdemes interaktívvá tenni?

Nem kell mindent. Az, ami a tesztelt feladathoz kell:

• a fő flow lépései (kattintás → következő képernyő);
• a döntési pont (kiválasztás, szűrés);
• legalább egy kivételes állapot (hiba vagy elfogyott hely), úgy, hogy elérhető legyen a prototípusban;
• a sikerállapot (visszaigazolás).

Amit nem kell: a nem tesztelt funkciók, a másodlagos menüpontok (ezeknél elég egy üzenet: „Ez a prototípusban nem érhető el”). A korlátokat dokumentáld.

Feladat: a 7. házi feladat prototípusa

1. Összekötés

1. Nyisd meg a 6. házi wireframe-jét, és lépj a Prototype fülre.
2. Állítsd be a kiindulópontot a flow első frame-jén (Flow starting point).
3. Kösd össze az interaktív elemeket: válaszd ki a gombot vagy kártyát, húzd a kapcsolatot a célframe-re. Állítsd be: On click → Navigate to.
4. Válassz átmenetet: a legtöbb lépéshez Instant vagy Dissolve elég; hozz létre egy Smart animate átmenetet ott, ahol két frame közös elemei folytonosan mozdulnak.
5. Adj hozzá visszalépést: a vissza gomb Back akcióval működjön.
6. Készíts egy kivételes ágat: a hibás űrlapból (például üres kötelező mező) a hibaállapot frame-re vezess, és onnan vissza a javításhoz.

2. Bejárás és javítás

7. Futtasd le (Present mód), és járd végig a fő flow-t. Ha elakadsz, javíts: hiányzó kapcsolat, rossz irány, félreérthető átmenet.
8. Nézd át a jelzőket: a kattintható elemek úgy néznek ki, mintha kattinthatók lennének? Ha nem, módosítsd a wireframe-et (lásd az affordanciáról szóló leckét).
9. Ellenőrizd a hűséget: elég valódi a szöveg a tesztelendő kérdéshez?

3. Előkészítés a próbára

10. Írj forgatókönyvet és feladatot (a 7. fejezet forgatókönyv-leckéje szerint), amely nem árulja el a megoldást. Írj hozzá kezdőpontot és sikerkritériumot.
11. Jegyezd fel a prototípus korlátait a fájl „Jegyzetek” oldalán.
12. Oszd meg a prototípus-linket megtekintési joggal, és ellenőrizd, hogy a link új ablakban (nem szerkesztőként) elindítja a prototípust.
13. Próbáld ki legalább egy másik hallgatóval: add át a forgatókönyvet és a linket, és ne magyarázd a megoldást. Jegyezd fel a megfigyeléseket (idézet, megfigyelés, értelmezés).

Ellenőrzőlista

• Van egyértelmű kezdőképernyő és sikerállapot.
• A fő flow végigvihető, legalább egy kivételes állapot elérhető.
• A kattintható elemek úgy néznek ki, mint amik azok.
• A korlátok dokumentálva vannak.
• A próbáról van legalább három megfigyelés.

Tanulási források

• Guide to prototyping in Figma – Figma Learn