UX/UI tervezés
A tárgy a felhasználóközpontú digitális termékek tervezésének teljes folyamatát mutatja be egyetlen, féléven át fejlesztett projekt példáján: a felhasználói kutatástól és a problémafeltárástól az információarchitektúrán, a drótvázakon és a prototípuson át a használhatósági tesztelésig, az iterációig és a portfólió-prezentációig.
A félév során a hallgatók megismerik a UX és a UI kapcsolatát, a kutatási módszereket (interjú, megfigyelés, persona, user journey), a használhatóság és az akadálymentesség alapelveit, valamint a tervezési döntések bizonyítékokkal történő megalapozását. Az elméleti ismeretek gyakorlati alkalmazása a Figma és a FigJam eszközeivel történik: a hallgatók affinity mapet, sitemapet és user flow-t készítenek, wireframe-eket és interaktív prototípust építenek, végül komponensekből álló mini design systemet alakítanak ki.
UX, UI és termékgondolkodás
Ebben a fejezetben tisztázzuk, mi az élmény, mi a felület, és miért nem ugyanaz a kettő. Megnézzük, hogyan ütközik a felhasználó, a szervezet és a technikai környezet célja, majd megtanulunk egy hétköznapi digitális helyzetből tervezhető, mérhető problémát fogalmazni. A fejezet végén egy FigJam-boardon rögzíted a saját projektötleted kiindulópontját.
Felhasználói kutatás
Mielőtt megoldást tervezünk, meg kell értenünk az emberek helyzetét, célját és jelenlegi kerülőútjait. A fejezet megmutatja, hogyan alakítható a tervezési bizonytalanság kutatási kérdéssé, hogyan vezethető etikus és nem sugalmazó interjú, és hogyan lesz a nyers jegyzetekből bizonyítékokra épülő insight, persona és user journey. A gyakorlati lecke a FigJam-ben rendezett kutatási anyag elkészítését segíti.
Használhatóság és akadálymentesség
Érthető, hibabíró és inkluzív felületek tervezése: a fő feladat akkor jó, ha eltérő helyzetben és képességekkel is végigvihető. A fejezet a használhatósági alapelveket (Nielsen heurisztikái), a WCAG szempontjait és a visszajelzések, hibák és állapotok szerepét kapcsolja össze. A gyakorlati lecke megmutatja, hogyan készíthető egy rövid, annotált használhatósági és akadálymentességi audit.
Projektindítás és problémafeltárás
A féléves projekt hatókörének rögzítése: mi a megoldandó feladat, kiket érint, és miből lesz látható a siker. A fejezet a projektbrief, az érintettek, a célfelhasználó és a user story kapcsolatát tárgyalja, majd a kutatás eredményét problémaállítássá, „How Might We” kérdésekké és priorizált megoldási irányokká alakítja. A gyakorlati lecke a FigJam-ben elkészíti a prioritási mátrixot.
A tartalom és a navigáció szervezése abból indul ki, ahogyan a felhasználó gondolkodik és dönt. A fejezet a tartalom, a címkézés, a kártyarendezés és a sitemap, majd a navigáció és a keresés, végül a feladatfolyamok és a kivételes állapotok összefüggéseit tárgyalja. A gyakorlati lecke FigJamben megrajzolja a sitemapet és a fő user flow-t.
Wireframe és vizuális hierarchia
Gyors, olcsó képernyővázlatokkal tesszük vitathatóvá a szerkezetet, mielőtt a látvány részletei elterelnék a figyelmet. A fejezet bemutatja, hogyan lesz a user flow-ból wireframe, hogyan irányítja a figyelmet a hierarchia, az elrendezés és a szöveg, és hogyan viselkednek a komponensek és a reszponzív nézetek. A gyakorlati lecke a Figma felületét és az Auto Layoutot tanítja a wireframe építéséhez.
Interakció és prototípus
A prototípus a feladatfolyam próbálható modellje, nem a kész termék utánzata. A fejezet az interakciós mintákat és az affordanciát, a prototípushűséget és a forgatókönyveket, valamint a mikrointerakciókat és az átmeneteket kapcsolja össze. A gyakorlati lecke a wireframe-eket kattintható Figma-prototípussá alakítja.
Használhatósági tesztelés
Kis számú, jól vezetett tesztből is tanulhatunk, ha megfigyelést gyűjtünk a feladatvégzésről, nem ízléskérdéseket szavaztatunk meg. A fejezet a tesztcélok, a résztvevők, az etika, a feladatok, a moderálás, a mérőszámok és az eredmények súlyosság szerinti priorizálásának szempontjait tárgyalja. A gyakorlati lecke a finomított felületek következetes vizuális nyelvét, a mini UI-irányelvet építi fel Figmában.
Iteráció és validáció
A teszt eredménye nem hibajegyzék: bizonyíték, amely alapján hipotéziseket, kompromisszumokat és javításokat kezelünk. A fejezet a hipotézisek és a döntési napló, a javítási ciklusok és kompromisszumok, valamint az eredmények és a következő lépések kapcsolatát mutatja be. A gyakorlati lecke az ismétlődő felületi elemeket komponensekké, variánsokká és mini design systemmé rendezi Figmában.
Projektprezentáció és portfólió
A jó bemutató nem a képernyők felsorolása, hanem egy ellenőrizhető design story: helyzet, bizonyíték, döntés, eredmény és tanulság. A fejezet a bizonyítékok, a bemutató szerkezete és vizuális narratívája, a portfólióeset és a reflexió szerepét mutatja be a projekt bemutatásában. A gyakorlati lecke megmutatja, hogyan állítható össze és adható elő a prezentáció Figmában vagy FigJamben.
UX/UI tervezés
A tárgy a felhasználóközpontú digitális termékek tervezésének teljes folyamatát mutatja be egyetlen, féléven át fejlesztett projekt példáján: a felhasználói kutatástól és a problémafeltárástól az információarchitektúrán, a drótvázakon és a prototípuson át a használhatósági tesztelésig, az iterációig és a portfólió-prezentációig.
A félév során a hallgatók megismerik a UX és a UI kapcsolatát, a kutatási módszereket (interjú, megfigyelés, persona, user journey), a használhatóság és az akadálymentesség alapelveit, valamint a tervezési döntések bizonyítékokkal történő megalapozását. Az elméleti ismeretek gyakorlati alkalmazása a Figma és a FigJam eszközeivel történik: a hallgatók affinity mapet, sitemapet és user flow-t készítenek, wireframe-eket és interaktív prototípust építenek, végül komponensekből álló mini design systemet alakítanak ki.
UX, UI és termékgondolkodás
Ebben a fejezetben tisztázzuk, mi az élmény, mi a felület, és miért nem ugyanaz a kettő. Megnézzük, hogyan ütközik a felhasználó, a szervezet és a technikai környezet célja, majd megtanulunk egy hétköznapi digitális helyzetből tervezhető, mérhető problémát fogalmazni. A fejezet végén egy FigJam-boardon rögzíted a saját projektötleted kiindulópontját.
Felhasználói kutatás
Mielőtt megoldást tervezünk, meg kell értenünk az emberek helyzetét, célját és jelenlegi kerülőútjait. A fejezet megmutatja, hogyan alakítható a tervezési bizonytalanság kutatási kérdéssé, hogyan vezethető etikus és nem sugalmazó interjú, és hogyan lesz a nyers jegyzetekből bizonyítékokra épülő insight, persona és user journey. A gyakorlati lecke a FigJam-ben rendezett kutatási anyag elkészítését segíti.
Használhatóság és akadálymentesség
Érthető, hibabíró és inkluzív felületek tervezése: a fő feladat akkor jó, ha eltérő helyzetben és képességekkel is végigvihető. A fejezet a használhatósági alapelveket (Nielsen heurisztikái), a WCAG szempontjait és a visszajelzések, hibák és állapotok szerepét kapcsolja össze. A gyakorlati lecke megmutatja, hogyan készíthető egy rövid, annotált használhatósági és akadálymentességi audit.
Projektindítás és problémafeltárás
A féléves projekt hatókörének rögzítése: mi a megoldandó feladat, kiket érint, és miből lesz látható a siker. A fejezet a projektbrief, az érintettek, a célfelhasználó és a user story kapcsolatát tárgyalja, majd a kutatás eredményét problémaállítássá, „How Might We” kérdésekké és priorizált megoldási irányokká alakítja. A gyakorlati lecke a FigJam-ben elkészíti a prioritási mátrixot.
Információarchitektúra és feladatfolyamok
A tartalom és a navigáció szervezése abból indul ki, ahogyan a felhasználó gondolkodik és dönt. A fejezet a tartalom, a címkézés, a kártyarendezés és a sitemap, majd a navigáció és a keresés, végül a feladatfolyamok és a kivételes állapotok összefüggéseit tárgyalja. A gyakorlati lecke FigJamben megrajzolja a sitemapet és a fő user flow-t.
Wireframe és vizuális hierarchia
Gyors, olcsó képernyővázlatokkal tesszük vitathatóvá a szerkezetet, mielőtt a látvány részletei elterelnék a figyelmet. A fejezet bemutatja, hogyan lesz a user flow-ból wireframe, hogyan irányítja a figyelmet a hierarchia, az elrendezés és a szöveg, és hogyan viselkednek a komponensek és a reszponzív nézetek. A gyakorlati lecke a Figma felületét és az Auto Layoutot tanítja a wireframe építéséhez.
Interakció és prototípus
A prototípus a feladatfolyam próbálható modellje, nem a kész termék utánzata. A fejezet az interakciós mintákat és az affordanciát, a prototípushűséget és a forgatókönyveket, valamint a mikrointerakciókat és az átmeneteket kapcsolja össze. A gyakorlati lecke a wireframe-eket kattintható Figma-prototípussá alakítja.
Használhatósági tesztelés
Kis számú, jól vezetett tesztből is tanulhatunk, ha megfigyelést gyűjtünk a feladatvégzésről, nem ízléskérdéseket szavaztatunk meg. A fejezet a tesztcélok, a résztvevők, az etika, a feladatok, a moderálás, a mérőszámok és az eredmények súlyosság szerinti priorizálásának szempontjait tárgyalja. A gyakorlati lecke a finomított felületek következetes vizuális nyelvét, a mini UI-irányelvet építi fel Figmában.
Iteráció és validáció
A teszt eredménye nem hibajegyzék: bizonyíték, amely alapján hipotéziseket, kompromisszumokat és javításokat kezelünk. A fejezet a hipotézisek és a döntési napló, a javítási ciklusok és kompromisszumok, valamint az eredmények és a következő lépések kapcsolatát mutatja be. A gyakorlati lecke az ismétlődő felületi elemeket komponensekké, variánsokká és mini design systemmé rendezi Figmában.
Projektprezentáció és portfólió
A jó bemutató nem a képernyők felsorolása, hanem egy ellenőrizhető design story: helyzet, bizonyíték, döntés, eredmény és tanulság. A fejezet a bizonyítékok, a bemutató szerkezete és vizuális narratívája, a portfólióeset és a reflexió szerepét mutatja be a projekt bemutatásában. A gyakorlati lecke megmutatja, hogyan állítható össze és adható elő a prezentáció Figmában vagy FigJamben.