Figma – FigJam: sitemap, kártyarendezés és user flow

Cél

Ezen az alkalmon FigJamben megrajzolod az 5. házi feladat három fő elemét: a kártyarendezéssel ellenőrzött címkéket, a sitemapet és a fő feladat user flow-ját döntési pontokkal és kivételes állapotokkal. A gyakorlat végére a következő fejezetben wireframe-ekké alakítható szerkezeted lesz.

Diagramok a FigJamben

A FigJam alakzat- és összekötő-eszközei elegendők a sitemaphez és a flow-hoz. A legfontosabb szempont az olvashatóság: a diagram hasznos, ha valaki más első ránézésre megérti.

• Alakzatok: egy-egy alakzatban egy oldal (sitemap) vagy egy lépés (flow). Használd a standard jelöléseket: téglalap = lépés, rombusz = döntés, kerekített = kezdet/vég.
• Összekötők: a FigJam összekötői követik az alakzatot, ha mozgatod. A nyílra írhatsz feltételt („Igen”, „Hely betelt”).
• Szekciók és színek: a sitemapet és a flow-t külön szekcióba tedd. Egységes színkód segít: például zöld = sikeres vég, piros = hiba, szürke = külső rendszer.
• Igazítás és eloszlás: a FigJam segít egyenletesen elrendezni az elemeket; rendezett diagram megbízhatóbbnak látszik.

Feladat: az 5. házi feladat boardja

1. Tartalomleltár és kártyarendezés

1. Írd fel cetlikre a termék fő tartalmi elemeit és funkcióit (15–25 darab), egy elem egy cetli.
2. Kérj meg legalább három embert, hogy csoportosítsák ezeket (nyílt rendezés), és nevezzék el a csoportokat. Ezt megtehetik a boardon is, vagy papíron és te rögzíted.
3. Készíts összesítő szekciót: milyen csoportok ismétlődtek, milyen neveket használtak, mi lepett meg.

2. Sitemap

4. Rajzold meg a termék oldalainak hierarchiáját: egy kezdőlap, alatta a fő területek, alattuk a részoldalak.
5. Jelöld a belépési pontokat, és emeld ki a fő feladathoz vezető legrövidebb utat.
6. A címkék a kártyarendezés eredményére épüljenek; ahol eltértél, írd mellé, miért.

3. User flow

7. Rajzold meg a fő feladat flow-ját a felhasználói céltól a sikeres végig. Használd a rombuszt a döntési pontokhoz.
8. Minden döntési pontnál írd mellé a szükséges információt (egy kis cetlivel).
9. Adj hozzá legalább három kivételes ágat (például hiba, elfogyott hely, megszakítás), mindegyiknek legyen kimenete.
10. Jelöld színnel a sikeres és a hibás véget.

4. Záró lépések

11. Jelöld meg, mely képernyők lesznek a 6. házi feladat wireframe-jei (a fő feladat 3–5 képernyője).
12. Oszd meg a boardot az oktatóval.

Ellenőrzőlista

• A kártyarendezésnek legalább három résztvevője volt.
• A sitemap a fő feladat útját rövidre fogja.
• A flow kezdete cél, nem képernyő.
• Minden döntési ponthoz tartozik információ, minden kivételes ághoz kimenet.
• A diagram külön olvasatlanul is érthető.

Tanulási források

• Figma Learn – hivatalos súgó: keress rá a „FigJam flowchart”, „connectors” és „sections” kifejezésekre