Ismeretlen tartalomra tervezés
Day 15 of 30 · The Playbook 2026 – Mesterkurzus Designereknek
Megtanulod, hogyan tartsd meg a struktúrát ismeretlen vagy változó tartalomhossz mellett.
Tanulási cél
- Placeholder és üres állapot szabályok.
- Változó címhossz, többnyelvűség kezelése (wrap/truncate).
- Folyamatos terhelés: skeleton vs spinner.
- Dokumentált minták kártyára, listára, táblázatra.
Miért fontos
- Valódi adat eltér a mocktól.
- Folyamatosság: betöltéskor se törjön a layout.
- Többnyelvű szöveg nyúlhat.
Magyarázat
- Szövegkezelés: wrap 2 sorig, utána truncate + tooltip/link.
- Üres állapot: ikon + rövid üzenet + CTA.
- Skeleton: stabil méret, ne ugráljon.
Példák
Rossz: Hosszú cím kilóg, törik az elrendezés.
Jó: Max. 2 sor, utána ellipszis + tooltip; üres állapot definiálva.
Gyakorlat (vezetett, 10-15 perc)
- Készíts szövegkezelési szabályt (wrap/truncate) kártyára és listára.
- Definiáld az üres állapot komponensét (ikon, szöveg, CTA).
- Írj szabályt skeleton használatra.
Gyakorlat (önálló, 5-10 perc)
Alkalmazd egy többnyelvű tartalomra (pl. hosszabb német/angol), screenshotold.
Önellenőrzés
- Wrap/truncate szabályok léteznek.
- Üres állapot komponens dokumentálva.
- Skeleton szabály megvan.
Opcionális mélyítés
- Empty states: https://www.nngroup.com/articles/empty-state/
- Skeleton best practices: https://uxdesign.cc/skeleton-screens-what-to-use-instead-of-the-loading-spinner-2fd0f5f4bd2e