Mobil felhasználói felület (mobile UI): definíciója és tervezési alapelvei

A digitális világban, ahol az okostelefonok és tabletek váltak a legtöbb ember elsődleges internetezési eszközévé, a mobil felhasználói felület (mobile UI) tervezése kulcsfontosságúvá vált. Ez nem csupán egy technikai kifejezés, hanem a felhasználói élmény egyik legmeghatározóbb eleme, amely közvetlenül befolyásolja egy alkalmazás vagy weboldal sikerét. A mobil UI az a vizuális és interaktív tér, amellyel a felhasználók érintkeznek, amikor okoseszközükön keresztül kommunikálnak egy digitális szolgáltatással.

A mobil felhasználói felület magában foglalja mindazokat az elemeket, amelyeket a felhasználó lát és amivel interakcióba lép: gombok, ikonok, szövegek, képek, animációk, beviteli mezők, navigációs menük és minden más vizuális komponens. Célja, hogy a felhasználói interakció a lehető legintuitívabb, leghatékonyabb és legkellemesebb legyen, figyelembe véve a mobil eszközök sajátosságait, mint például a kisebb képernyőméret, az érintőképernyős vezérlés és a változó használati környezet.

Egy jól megtervezett mobil UI nemcsak esztétikailag vonzó, hanem funkcionálisan is kiváló. Segít a felhasználóknak gyorsan megtalálni, amit keresnek, könnyedén végrehajtani a kívánt műveleteket, és élvezetesebbé teszi az alkalmazás használatát. Ezzel szemben egy rosszul kivitelezett felület frusztrációt okozhat, elriaszthatja a felhasználókat, és végső soron alááshatja egy egyébként ígéretes termék sikerét.

A mobil felhasználói felület (mobile UI) definíciója

A mobil felhasználói felület (mobile UI) a digitális termékek azon része, amely lehetővé teszi a felhasználók számára, hogy interakcióba lépjenek egy mobilalkalmazással vagy weboldallal okostelefonon vagy táblagépen keresztül. Ez a felület magában foglalja az összes vizuális elemet, mint például a gombokat, ikonokat, képeket, szövegeket, betűtípusokat és színsémákat, valamint az interaktív komponenseket, mint a navigációs menüket, űrlapokat és animációkat.

A mobile UI elsődleges célja, hogy a felhasználói élmény (UX) minél gördülékenyebb és hatékonyabb legyen a mobil eszközök korlátozott képernyőmérete és az érintésalapú interakció sajátosságai mellett. Ez eltér a hagyományos asztali UI tervezésétől, ahol a nagyobb képernyőterület és az egér-billentyűzet kombinációja más tervezési megközelítést tesz lehetővé.

A mobil UI tervezés során a fókusz az egyszerűségen, az egyértelműségen és a hatékonyságon van. A tervezőknek figyelembe kell venniük a felhasználók kontextusát – gyakran úton vannak, korlátozott figyelmük van, és gyorsan szeretnének információhoz jutni vagy feladatokat elvégezni. Ezért a minimálisra csökkentett kognitív terhelés és az azonnali visszajelzés kiemelten fontos.

A felhasználói felület és a felhasználói élmény (UX) fogalmai gyakran összefonódnak, de különbséget kell tenni közöttük. A UX a teljes felhasználói utat és érzést írja le egy termékkel kapcsolatban, beleértve a használhatóságot, a hozzáférhetőséget és az élvezetet. A UI ezzel szemben a UX egyik konkrét, vizuális és interaktív aspektusa. Mondhatni, a UI az a „ruha”, amit a UX „visel”. Egy gyönyörű UI önmagában nem garantálja a jó UX-et, ha a mögöttes funkcionalitás zavaros vagy hibás. Azonban egy jól megtervezett UI jelentősen hozzájárulhat a pozitív UX-hez.

A mobil felhasználói felület tervezése nem csupán esztétikai kérdés, hanem stratégiai döntés, amely közvetlenül befolyásolja a felhasználói elkötelezettséget és a digitális termék sikerét.

A modern mobil UI tervezés alapja a felhasználó-központú megközelítés. Ez azt jelenti, hogy a tervezési folyamat középpontjában a célközönség igényei, viselkedése és korlátai állnak. Empátiával kell közelíteni a felhasználókhoz, megérteni a problémáikat és olyan megoldásokat kínálni, amelyek zökkenőmentesen illeszkednek a mindennapi életükbe.

A mobil UI evolúciója: a kezdetektől napjainkig

A mobil felhasználói felületek története messze visszanyúlik, egészen a mobiltelefonok megjelenéséig. A kezdeti időkben a UI-t a fizikai gombok és a monokróm, karakteres kijelzők uralták. Ezek a felületek rendkívül egyszerűek voltak, funkcióik is korlátozottak voltak, leginkább hívások kezdeményezésére és SMS-ek küldésére szolgáltak. A menürendszerek jellemzően listákból álltak, navigációjuk pedig a fizikai fel/le gombokkal történt.

A 2000-es évek elején megjelentek a színes kijelzők és a WAP (Wireless Application Protocol) böngészők, amelyek némi grafikai fejlődést hoztak. Ekkoriban kezdtek megjelenni az első egyszerű játékok és alapvető internetes szolgáltatások. A UI még mindig nagyon korlátozott volt, a navigáció továbbra is főleg gombokkal történt, de már megjelentek az első ikonok és egyszerű animációk. A Java ME platform lehetővé tette az első komplexebb alkalmazások fejlesztését, de ezek UI-ja még mindig a fizikai gombokra volt optimalizálva.

A valódi forradalmat az okostelefonok megjelenése hozta el, különösen az Apple iPhone 2007-es bemutatkozása. Az érintőképernyő és a multi-touch gesztusok alapjaiban változtatták meg a mobil UI paradigmáját. A fizikai gombok háttérbe szorultak, helyüket átvették a virtuális gombok és az intuitív gesztusok, mint a pöccintés (swipe), csíptetés (pinch) és koppintás (tap). Ez a váltás soha nem látott szabadságot biztosított a tervezőknek, és megnyitotta az utat a gazdag, vizuálisan vonzó és interaktív felületek előtt.

Az iOS és az Android operációs rendszerek megjelenésével és fejlődésével a mobil UI tervezés szabványosabbá vált, de egyben differenciáltabbá is. Mindkét platform kialakította a saját tervezési irányelveit (Apple Human Interface Guidelines, Google Material Design), amelyek útmutatóul szolgálnak a fejlesztőknek és tervezőknek a konzisztens és felhasználóbarát alkalmazások létrehozásában. Ezek az irányelvek nemcsak a vizuális stílust határozzák meg, hanem az interakciós mintákat, a navigációs struktúrákat és az akadálymentességi szempontokat is.

Napjainkban a mobil UI folyamatosan fejlődik. Az AI és a gépi tanulás integrációja, a hangvezérlés, az AR (kiterjesztett valóság) és a VR (virtuális valóság) elemek megjelenése új dimenziókat nyit meg. Az összecsukható telefonok és a hordható okoseszközök (smartwatch) új kihívásokat és lehetőségeket teremtenek a tervezők számára, akiknek alkalmazkodniuk kell a változó képernyőméretekhez és interakciós módokhoz.

Ez az evolúció rávilágít arra, hogy a mobil UI nem statikus, hanem dinamikus terület, amely folyamatosan alkalmazkodik a technológiai fejlődéshez és a felhasználói elvárások változásához. A jövőben valószínűleg még intuitívabb, személyre szabottabb és kontextusfüggőbb felületekkel találkozunk majd.

Alapvető tervezési elvek a sikeres mobil UI-hoz

A sikeres mobil felhasználói felület nem a véletlen műve, hanem gondos tervezés és a bevált alapelvek alkalmazásának eredménye. Ezek az elvek segítenek abban, hogy az alkalmazások és weboldalak ne csak jól nézzenek ki, hanem hatékonyan és élvezetesen használhatóak legyenek a mobil eszközökön. Lássuk a legfontosabbakat.

Egyszerűség és minimalizmus

A mobil UI tervezés egyik alappillére az egyszerűség. A kisebb képernyőméret miatt minden felesleges elem csak zavarja a felhasználót. A minimalista megközelítés azt jelenti, hogy csak a leglényegesebb információkat és funkciókat jelenítjük meg, tiszta, átlátható elrendezésben. Ez segít a felhasználóknak gyorsan feldolgozni a tartalmat és fókuszálni a fő feladatra.

A vizuális zaj csökkentése érdekében a tervezők gyakran alkalmaznak bőséges üres területet (whitespace), ami segít elkülöníteni az elemeket és javítja az olvashatóságot. A funkciók számát is érdemes minimalizálni egy adott képernyőn, és a kevésbé fontos opciókat elrejteni egy menüben vagy egy másodlagos képernyőn.

„A jó design annyira kevés, amennyire csak lehetséges.” – Dieter Rams

Ez az idézet különösen igaz a mobil UI-ra, ahol a korlátozott hely miatt minden pixelnek jelentősége van. Az egyszerűség nem jelenti a funkcionalitás hiányát, hanem annak okos és átgondolt elrendezését.

Konzisztencia

A konzisztencia kulcsfontosságú a felhasználói tanulási görbe szempontjából. Ha egy felhasználó megtanulja, hogyan működik egy bizonyos elem vagy interakció az alkalmazás egyik részén, elvárja, hogy az máshol is hasonlóan viselkedjen. Ez vonatkozik a vizuális elemekre (színek, betűtípusok, ikonok), az interakciós mintákra (gombok elhelyezkedése, navigáció) és a nyelvezetre is.

A konzisztencia két szinten értelmezhető:

• Belső konzisztencia: Az alkalmazáson vagy weboldalon belül mindenhol azonos elemek és minták használata.
• Külső konzisztencia: Az iparági szabványoknak és az operációs rendszer (iOS, Android) tervezési irányelveinek betartása, hogy a felhasználók számára ismerős legyen a felület.

A konzisztens design csökkenti a kognitív terhelést és növeli a felhasználói bizalmat.

Felhasználó-központúság és akadálymentesség

A felhasználó-központú tervezés azt jelenti, hogy a felhasználó áll a tervezési folyamat középpontjában. Ez magában foglalja a célközönség alapos megértését, a felhasználói kutatást, a prototípusok tesztelését és az iteratív fejlesztést. A tervezőknek empátiával kell közelíteniük a felhasználókhoz, megérteniük a problémáikat, céljaikat és a mobil eszközök használatának kontextusát.

Az akadálymentesség (accessibility) biztosítja, hogy az alkalmazás mindenki számára használható legyen, beleértve a fogyatékkal élő felhasználókat is. Ez magában foglalja a megfelelő színkontrasztot, a szövegméretezési lehetőségeket, a képernyőolvasók támogatását és a billentyűzetes navigációt (bár ez mobil UI-ban kevésbé releváns, de a navigációs sorrend fontos). Az akadálymentes design nem csak jogi kötelezettség lehet, hanem etikai elv is, amely szélesebb közönséget tesz elérhetővé.

Visszajelzés (feedback)

A felhasználók azonnali visszajelzést várnak minden interakciójukra. Amikor megérintenek egy gombot, elvárják, hogy lássák, hallják vagy érezzék, hogy az alkalmazás reagált. Ez a visszajelzés lehet vizuális (gomb színe változik, animáció indul), haptikus (rezgés) vagy audió (hangjelzés). A visszajelzés hiánya bizonytalanságot és frusztrációt okozhat.

A visszajelzés nem csak az interakciókra vonatkozik, hanem a folyamatok állapotára is. Például, ha egy alkalmazás adatokat tölt be, egy betöltésjelző (spinner, progress bar) tájékoztatja a felhasználót arról, hogy a rendszer dolgozik, és nem fagyott le. Hibaüzenetek esetén is fontos a világos és segítőkész visszajelzés, amely iránymutatást ad a probléma megoldásához.

Hatékonyság és időmegtakarítás

A mobil felhasználók gyakran úton vannak, korlátozott idejük és figyelmük van. Ezért a mobil UI-nak a lehető leghatékonyabbnak kell lennie. Ez azt jelenti, hogy minimalizálni kell a szükséges lépéseket egy feladat elvégzéséhez, és optimalizálni kell a beviteli folyamatokat. Például, ha lehetséges, automatikusan ki kell tölteni az űrlapmezőket, vagy emlékezni kell a felhasználó preferenciáira.

A gesztusok okos használata szintén hozzájárulhat a hatékonysághoz, lehetővé téve a gyorsabb interakciókat. Például egy e-mail alkalmazásban a pöccintés (swipe) egy üzeneten balra vagy jobbra azonnali archiválást vagy törlést tehet lehetővé, anélkül, hogy be kellene lépni az üzenetbe.

Reszponzivitás és adaptivitás

A mobil eszközök piaca rendkívül fragmentált, ami a képernyőméreteket és felbontásokat illeti. Egy jól megtervezett mobil UI-nak képesnek kell lennie alkalmazkodni ezekhez a különbségekhez. A reszponzív design azt jelenti, hogy a tartalom és az elrendezés automatikusan alkalmazkodik a rendelkezésre álló képernyőterülethez, míg az adaptív design előre definiált elrendezéseket kínál különböző képernyőméretekhez.

A lényeg, hogy a felhasználói élmény optimalizált legyen, függetlenül attól, hogy milyen eszközön nézik az alkalmazást vagy weboldalt. Ez magában foglalja a képek optimalizálását, a rugalmas rácsszerkezeteket és a médialekérdezéseket (media queries) a CSS-ben.

Navigáció a mobil UI-ban: útvonalak a felhasználó számára

A mobil felhasználói felület egyik legkritikusabb eleme a navigáció. Egy jól megtervezett navigációs rendszer segít a felhasználóknak abban, hogy könnyedén és intuitívan mozogjanak az alkalmazásban, megtalálják a kívánt tartalmat és elvégezzék a feladataikat. A rossz navigáció ezzel szemben frusztrációt okozhat, és elriaszthatja a felhasználókat.

A navigációs minták típusai

Számos navigációs minta létezik, amelyek közül a tervezők választhatnak a mobil UI-ban, mindegyiknek megvannak a maga előnyei és hátrányai:

• Lap alatti navigáció (Tab Bar): Ez az egyik legnépszerűbb és leginkább bevált minta, különösen iOS-en. A képernyő alján rögzített ikonok és szöveges címkék sorakoznak, amelyek a legfontosabb funkciókhoz vagy szakaszokhoz vezetnek. Előnye az állandó láthatóság és a könnyű hozzáférhetőség. Ideális, ha 3-5 fő kategória van.
• Hamburger menü (Navigation Drawer): Gyakran használt Androidon, de iOS-en is elterjedt. Egy ikon (általában három vízszintes vonal) elrejt egy menüt, amely a képernyő széléről csúszik be. Előnye, hogy sok elemet képes elrejteni, és helyet takarít meg a képernyőn. Hátránya, hogy a menü tartalmát nem látja azonnal a felhasználó, ami felfedezhetőségi problémákat okozhat.
• Görgethető lapok (Scrollable Tabs/Pills): Főleg tartalom kategóriák közötti váltásra használatos, gyakran a képernyő tetején. A felhasználó vízszintesen görgetve választhat a kategóriák közül. Jól működik, ha sok kategória van, de mindegyik viszonylag egyenrangú.
• Műveleti gombok (Floating Action Button – FAB): Anyagtervezés (Material Design) sajátossága. Egy kiemelkedő, lebegő gomb, amely a legfontosabb vagy leggyakoribb műveletet kínálja az adott képernyőn (pl. új e-mail írása, poszt létrehozása).
• Lépcsőzetes navigáció (Breadcrumbs): Bár asztali környezetben elterjedtebb, mobil weboldalakon is előfordulhat, hogy a felhasználó láthassa, hol tart a hierarchiában. Alkalmazásokban kevésbé jellemző.

A navigáció tervezésének alapelvei

A hatékony mobil navigáció megtervezéséhez az alábbi alapelveket érdemes figyelembe venni:

• Láthatóság és felfedezhetőség: A felhasználóknak azonnal tudniuk kell, hol vannak, és hogyan juthatnak el a kívánt helyre. A navigációs elemeknek jól láthatóaknak és felismerhetőeknek kell lenniük.
• Egyszerűség: A navigációs struktúra legyen logikus és könnyen érthető. Kerüljük a túl sok réteget vagy a bonyolult útvonalakat.
• Konzisztencia: A navigációs elemek elhelyezkedése, stílusa és viselkedése legyen egységes az egész alkalmazásban.
• Hozzáérési célterület (Tap Target Size): A gomboknak és interaktív elemeknek elég nagynak kell lenniük ahhoz, hogy a felhasználók könnyen megérinthessék őket ujjukkal, anélkül, hogy véletlenül mást érintenének meg. Az ajánlott méret legalább 48×48 dp (density-independent pixel).
• Prioritás: A legfontosabb funkciókat vagy tartalmakat tegyük a legkönnyebben elérhetővé.
• Kontextus: A navigációt alakítsuk az adott képernyő vagy feladat kontextusához. Néha a globális navigációt ki lehet egészíteni kontextuális menükkel.

A navigáció tervezésekor mindig gondoljunk a felhasználói útra (user journey). Milyen feladatokat szeretne elvégezni a felhasználó? Melyek a leggyakoribb útvonalak? A válaszok segítenek kiválasztani a legmegfelelőbb navigációs mintákat és optimalizálni az elrendezést.

Tipográfia és olvashatóság a mobil UI-ban

A tipográfia a szöveges tartalom vizuális megjelenítését jelenti, és kritikus szerepet játszik a mobil felhasználói felület olvashatóságában és esztétikájában. Egy rosszul megválasztott betűtípus, méret vagy kontraszt komolyan ronthatja a felhasználói élményt, még akkor is, ha a funkcionalitás egyébként hibátlan.

Betűtípus kiválasztása

A mobil UI-ban a betűtípus kiválasztásakor a legfontosabb szempont az olvashatóság. Általában a sans-serif betűtípusok (pl. Roboto, Open Sans, Lato, San Francisco) jobban olvashatóak digitális képernyőn, különösen kisebb méretben, mint a serif (talpas) betűtípusok. Kerüljük a túl díszes, bonyolult vagy túl sok különböző betűtípus használatát, mert ez zavaró és professzionálatlanná teheti a felületet. A konzisztencia itt is kulcsfontosságú.

Érdemes olyan betűtípust választani, amelynek több vastagsága és stílusa (light, regular, medium, bold) is elérhető, így rugalmasan használhatjuk a vizuális hierarchia kialakításához.

Betűméret és sorköz

A betűméret a mobil UI-ban kritikus. Túl kicsi betűk olvasása megerőltető, túl nagy betűk pedig feleslegesen sok helyet foglalnak el. Az iparági szabványok és a platformok (iOS, Android) ajánlásai általában a 16pt (vagy 16dp) körüli alap betűméretet javasolják a törzsszöveghez. A címsorok és alcímek természetesen nagyobbak, a segítő szövegek (pl. feliratok) kisebbek lehetnek.

A sorköz (line height) is befolyásolja az olvashatóságot. Túl kicsi sorköz esetén a sorok egymásba folynak, túl nagy sorköz esetén pedig a szöveg széttöredezettnek tűnik. Általában a betűméret 1.2-1.5-szerese ideális sorköznek tekinthető a mobil UI-ban.

Kontraszt és színek

A színkontraszt alapvető fontosságú a szöveg olvashatósága szempontjából, különösen kültéri fényviszonyok között vagy gyengénlátó felhasználók számára. A WCAG (Web Content Accessibility Guidelines) ajánlásai szerint a szöveg és a háttér között legalább 4.5:1 arányú kontrasztnak kell lennie a normál szövegeknél, és 3:1 arányúnak a nagyobb szövegeknél (18pt vagy 14pt vastagon szedve). Számos online eszköz létezik a kontrasztarányok ellenőrzésére.

A színek használata a tipográfiában nem csak a kontrasztot jelenti, hanem a vizuális hierarchia és az érzelmi hatás kialakítását is. A fő tartalom általában sötét szöveggel világos háttéren (vagy fordítva) jelenik meg, míg a kiegészítő információk vagy a hibaüzenetek más színt kaphatnak (pl. piros a hibákra, szürke a segítő szövegekre).

Szöveg igazítása és tördelése

A mobil UI-ban általában a balra igazított szöveg a legolvashatóbb. A középre igazítás jól mutathat címsoroknál vagy rövid szövegeknél, de hosszabb bekezdéseknél nehezen követhetővé teszi a szöveget. A sorkizárt szöveg (amikor mindkét oldalon egyenes a szél) a mobil eszközökön gyakran indokolatlanul nagy szóközöket eredményez, ezért kerülendő.

A szöveg tördelése is fontos. Kerüljük a túl hosszú sorokat, amelyek nehezen olvashatóak. Egy mobil képernyőn általában 40-60 karakter szélességű sorok ideálisak. A bekezdések legyenek rövidek, 2-3 mondatosak, és használjunk elegendő bekezdésközt a vizuális elkülönítéshez.

A megfelelő tipográfia nem csak a szöveg átadásának módja, hanem a felhasználói élmény alapvető része, amely befolyásolja az alkalmazás professzionalizmusát és használhatóságát.

Színek és vizuális hierarchia a mobil UI-ban

A színek és a vizuális hierarchia kulcsfontosságú elemek a mobil felhasználói felület tervezésében. Nem csupán esztétikai szerepük van, hanem segítenek a felhasználóknak abban, hogy gyorsan feldolgozzák az információt, megértsék az elemek közötti kapcsolatokat és hatékonyan navigáljanak az alkalmazásban.

A színek szerepe a mobil UI-ban

A színek számos funkciót töltenek be a mobil UI-ban:

• Márkaépítés és identitás: A színek azonnal felismerhetővé teszik a márkát. Egy jól megválasztott színpaletta erősíti a brand identitást és egységes megjelenést biztosít.
• Érzelmi hatás: A különböző színek különböző érzelmeket és asszociációkat váltanak ki. Például a kék a bizalmat és a stabilitást, a zöld a természetet és a nyugalmat, a piros a figyelmet és az energiát jelképezheti. A célközönség és az alkalmazás jellege határozza meg a megfelelő színválasztást.
• Vizuális hierarchia: A színek segítségével kiemelhetjük a fontos elemeket, és elrejthetjük a kevésbé lényegeseket. Egy élénkebb színű gomb például azonnal magára vonzza a tekintetet, jelezve, hogy az egy elsődleges művelet.
• Visszajelzés és állapot: A színekkel jelölhetjük az interaktív elemek állapotát (pl. kattintás utáni színváltozás), a sikeres műveleteket (zöld), a hibákat (piros) vagy a figyelmeztetéseket (sárga).
• Olvashatóság: Ahogy a tipográfiánál is említettük, a megfelelő színkontraszt elengedhetetlen a szövegek olvashatóságához.

A színpaletta kialakításakor érdemes egy elsődleges, egy másodlagos és néhány kiegészítő színt választani. Fontos a színek harmonikus kombinációja és a túlzsúfoltság elkerülése. A Material Design és az iOS Human Interface Guidelines is részletes útmutatót ad a színhasználathoz.

Vizuális hierarchia létrehozása

A vizuális hierarchia azt a módot jelenti, ahogyan az elemeket úgy rendezzük el a képernyőn, hogy a felhasználó tekintete természetes módon vezettetve legyen a legfontosabb információtól a kevésbé fontosak felé. Ez segít a felhasználóknak gyorsan megérteni a tartalom szerkezetét és a fő üzenetet.

A vizuális hierarchia kialakításához számos eszközt használhatunk:

• Méret: A nagyobb elemek általában fontosabbnak tűnnek. Egy fő cím nagyobb betűmérettel jelenik meg, mint a törzsszöveg.
• Szín és kontraszt: Az élénkebb színek vagy a nagyobb kontrasztú elemek kiemelkednek a háttérből. A fő cselekvési gombok (Call to Action) gyakran élénk, kontrasztos színt kapnak.
• Elhelyezkedés: A képernyő tetején vagy a középpontjában elhelyezkedő elemek általában több figyelmet kapnak. A F-minta és a Z-minta a webes és mobil olvasási mintázatokra utal, ahol a szem balról jobbra, majd lefelé mozog.
• Üres terület (Whitespace): A bőséges üres terület segít elkülöníteni az elemeket és fókuszálni a tartalomra. A fontos elemek körüli üres tér növeli azok vizuális súlyát.
• Vastagság és súly: A félkövér (bold) vagy vastagabb betűtípusok kiemelnek szavakat vagy mondatokat.
• Ismétlődés és ritmus: A hasonló elemek ismétlődő mintázata (pl. kártyás elrendezés) rendet és kiszámíthatóságot teremt, ami megkönnyíti a feldolgozást.

A vizuális hierarchia célja, hogy a felhasználóknak ne kelljen gondolkodniuk azon, hova nézzenek először. A designnak intuitívan kell vezetnie a tekintetüket, segítve őket a feladatok gyors és hatékony elvégzésében. Egy jól megtervezett vizuális hierarchia növeli a használhatóságot és javítja az alkalmazás esztétikai értékét.

Interakció és gesztusok a mobil UI-ban

A mobil felhasználói felület egyik legmeghatározóbb aspektusa az interakció módja. Az érintőképernyős eszközök elterjedésével a gesztusok váltak a fő kommunikációs eszközzé a felhasználó és az alkalmazás között. A jól megtervezett interakciók és gesztusok intuitívvá és élvezetessé teszik a használatot, míg a rosszul kivitelezettek frusztrációt okozhatnak.

Alapvető érintésalapú gesztusok

Számos alapvető gesztus létezik, amelyeket a mobil felhasználók széles körben ismernek és használnak. Ezeket a tervezőknek a lehető legkonzisztensebben kell alkalmazniuk:

• Koppintás (Tap): A leggyakoribb gesztus, amely egy gombra kattintásnak felel meg. Ezzel választunk ki elemeket, indítunk műveleteket.
• Dupla koppintás (Double Tap): Képek nagyítására vagy szöveg kijelölésére használatos.
• Hosszú koppintás (Long Press): Egy elem lenyomva tartása, amely gyakran kontextuális menüt nyit meg, vagy lehetővé teszi az elemek átrendezését.
• Pöccintés (Swipe/Flick): Egy ujjal történő gyors húzás valamilyen irányba. Használható lapok közötti váltásra, elemek törlésére listákból, vagy tartalom görgetésére.
• Görgetés (Scroll): Lassabb, folyamatos húzás az ujjal, általában függőlegesen, a tartalom megtekintéséhez.
• Csíptetés (Pinch): Két ujjal történő mozdulat, amely általában a nagyítást (pinch open) vagy kicsinyítést (pinch close) eredményezi.
• Húzás és ejtés (Drag and Drop): Egy elem lenyomva tartása, majd áthúzása egy másik helyre, például fájlok átrendezése.

Gesztusok tervezésének alapelvei

A gesztusok tervezésekor az alábbi elveket érdemes figyelembe venni:

• Felfedezhetőség: A felhasználóknak tudniuk kell, hogy léteznek gesztusok, és hogyan használhatják őket. A rejtett gesztusok, amelyekre nincs vizuális jelzés, ritkán fedezhetők fel. Lehetőség szerint használjunk vizuális tippeket vagy animációkat.
• Konzisztencia: A gesztusok viselkedése legyen egységes az alkalmazáson belül, és lehetőség szerint kövesse az operációs rendszer szabványait.
• Visszajelzés: Minden gesztusra legyen vizuális, haptikus (rezgés) vagy audió visszajelzés, hogy a felhasználó tudja, a rendszer reagált.
• Célterület mérete: Az érintési célpontok legyenek elég nagyok ahhoz, hogy a felhasználók könnyen eltalálhassák őket ujjukkal.
• Megtanulhatóság: A gesztusok legyenek intuitívak és könnyen megtanulhatók. Kerüljük a túl bonyolult vagy többujjas gesztusokat, hacsak nem indokolt.
• Megbocsáthatóság: A felhasználók néha hibáznak. Biztosítsunk lehetőséget a visszavonásra vagy a hibás gesztusok helyreállítására.

A gesztus alapú interakciók különösen hatékonyak lehetnek a mobil UI-ban, mivel természetesebbé és gyorsabbá teszik a használatot. Gondoljunk csak arra, hogy egy gyors pöccintéssel el lehet utasítani egy hívást vagy archiválni egy e-mailt. Azonban fontos az egyensúly megtartása, és nem szabad túlzásba vinni a rejtett gesztusokat, amelyek zavarossá tehetik a felületet.

A tervezőknek folyamatosan tesztelniük kell a gesztusok használatát a valódi felhasználókkal, hogy megbizonyosodjanak azok hatékonyságáról és intuitivitásáról. A felhasználói visszajelzések alapján történő iteráció kulcsfontosságú a sikeres mobil interakciók megvalósításában.

Platformspecifikus tervezési irányelvek: iOS és Android

A mobil felhasználói felület tervezésekor elengedhetetlen figyelembe venni a két domináns operációs rendszer, az Apple iOS és a Google Android által meghatározott platformspecifikus irányelveket. Bár sok alapelv megegyezik, mindkét platformnak megvannak a maga egyedi tervezési filozófiái, vizuális nyelvezete és interakciós mintái, amelyeket érdemes követni a natív érzés megteremtése érdekében.

Apple Human Interface Guidelines (HIG)

Az Apple Human Interface Guidelines (HIG) az iOS alkalmazások tervezésének alapvető szabálygyűjteménye. Az Apple a letisztult, elegáns és intuitív felhasználói élményre fókuszál. Főbb jellemzői:

• Minimalizmus és letisztultság: Tiszta, rendezett elrendezések, bőséges üres területtel. A hangsúly a tartalmon van.
• Folyékonyság és reszponzivitás: Sima animációk, gyors reagálás az érintésre, zökkenőmentes átmenetek.
• Konzisztencia: Az egész rendszerre kiterjedő vizuális és interakciós konzisztencia.
• Navigáció: Gyakran használt a lap alatti navigáció (tab bar) a fő kategóriákhoz, és a navigációs sáv (navigation bar) a képernyő tetején a címsorral és a vissza gombbal.
• Betűtípus: A San Francisco (SF Pro) betűtípus a rendszer alapértelmezettje, amelyet erősen ajánlott használni.
• Gesztusok: A gesztusok intuitív és következetes használata, mint a pöccintés, csíptetés.
• Visszajelzés: Világos vizuális és haptikus visszajelzés minden interakcióra.

Az iOS design filozófiája a tartalom elsődlegessége és a felhasználó számára láthatatlan, mégis hatékony interfész megteremtése. Az Apple nagy hangsúlyt fektet a részletekre és a finom animációkra, amelyek prémium érzetet keltenek.

Google Material Design

A Google Material Design egy átfogó tervezési nyelv és irányelvrendszer, amelyet a Google hozott létre. Célja, hogy egységes és adaptív felhasználói élményt nyújtson az Android platformon és a Google termékekben. Főbb jellemzői:

• Anyagszerűség (Material Metaphor): A felület elemei valós fizikai tulajdonságokkal rendelkeznek – árnyékokat vetnek, felemelkedhetnek és süllyedhetnek, mintha papírlapok lennének.
• Hierarchia és mélység: Az árnyékok és a Z-tengely (mélység) használata vizuális hierarchiát teremt, segítve a felhasználókat a fontos elemek azonosításában.
• Élénk színek és tipográfia: A Material Design gyakran használ élénk színeket és a Roboto betűtípust a tiszta, modern megjelenés érdekében.
• Műveleti gombok (FAB): A lebegő műveleti gomb (Floating Action Button) a legfontosabb műveletet emeli ki egy adott képernyőn.
• Navigáció: Gyakran használja a navigációs fiókot (navigation drawer/hamburger menü) a fő navigációhoz, valamint a görgethető lapokat (tabs) a kategóriák közötti váltáshoz.
• Animációk: Funkcionális és értelmes animációk, amelyek segítik a felhasználót a rendszer állapotának megértésében.

A Material Design egy kiterjedt rendszer, amely nemcsak a vizuális elemekre, hanem az interakciókra, mozgásra és a platformok közötti adaptációra is kiterjed. Célja, hogy egy koherens és intuitív élményt nyújtson a felhasználóknak, függetlenül az eszköz típusától.

Keresztplatformos megfontolások

Sok fejlesztő és tervező keresztplatformos alkalmazásokat hoz létre, amelyek mind iOS-en, mind Androidon futnak. Ilyenkor kihívást jelenthet a platformspecifikus irányelvek betartása. Két fő megközelítés létezik:

• Natív érzés megőrzése: Az alkalmazás UI-ja a platformnak megfelelően változik (pl. iOS-en tab bar, Androidon navigation drawer). Ez a legjobb felhasználói élményt nyújtja, de több fejlesztési munkát igényel.
• Egységes design: Egyetlen UI design létrehozása, amely mindkét platformon azonos. Ez egyszerűsíti a fejlesztést, de előfordulhat, hogy nem érződik teljesen natívnak egyik platformon sem. Sok esetben a Material Design elemeket adaptálják iOS-re is, mivel az átfogóbb.

A legjobb megközelítés általában a kettő kombinációja: egy alapvető, egységes vizuális nyelvezet kialakítása, de bizonyos kulcsfontosságú elemek (pl. navigáció, gombok) platformspecifikus adaptálása. Ez biztosítja a felismerhetőséget és a kényelmes használatot mindkét rendszeren.

Tesztelés és iteráció a mobil UI tervezésben

A mobil felhasználói felület tervezése nem egy egyszeri feladat, hanem egy folyamatos, iteratív folyamat, amely magában foglalja a tesztelést és a visszajelzések alapján történő finomítást. Egy alkalmazás vagy weboldal csak akkor lehet igazán sikeres, ha a felhasználók igényeit folyamatosan figyelembe veszik és a design ennek megfelelően fejlődik.

Felhasználói tesztelés (User Testing)

A felhasználói tesztelés során valódi felhasználókat kérünk fel, hogy próbálják ki az alkalmazást vagy weboldalt, miközben megfigyeljük őket, és visszajelzéseket gyűjtünk. Ez az egyik leghatékonyabb módszer a UI problémáinak azonosítására, mielőtt azok széles körben elterjednének. A tesztelés történhet laboratóriumi körülmények között, távolról moderálva, vagy akár moderálás nélkül is, ahol a felhasználók saját környezetükben tesztelnek.

A felhasználói tesztelés célja, hogy feltárja:

• Milyen nehézségekbe ütköznek a felhasználók a feladatok elvégzése során?
• Hol van szükség tisztázásra a navigációban vagy a tartalom megjelenítésében?
• Milyen interakciós minták működnek jól, és melyek okoznak zavart?
• Milyen érzelmeket vált ki a design a felhasználókból?

A tesztelést már a tervezési folyamat korai szakaszában érdemes elkezdeni, akár papír alapú prototípusokkal vagy alacsony hűségű wireframe-ekkel, majd a fejlesztés előrehaladtával egyre részletesebb prototípusokkal és végül a kész termékkel folytatni.

A/B tesztelés

Az A/B tesztelés egy kvantitatív módszer, amelynek során két (vagy több) különböző verziót mutatunk be a felhasználók egy-egy csoportjának, majd mérjük, hogy melyik teljesít jobban egy előre meghatározott metrika (pl. konverziós ráta, kattintási arány) szempontjából. Ez a módszer különösen hasznos kisebb UI elemek, például gombok színe, szövege, elhelyezkedése vagy navigációs elemek összehasonlítására.

Az A/B tesztelés segít objektíven eldönteni, hogy melyik design változat a hatékonyabb, és minimalizálja a szubjektív véleményekre alapozott döntéseket. Fontos, hogy egyszerre csak egy változót teszteljünk, hogy egyértelműen azonosítani tudjuk a változás hatását.

Analitika és hőtérképek

Az alkalmazásanalitikai eszközök (pl. Google Analytics, Firebase) és a mobil hőtérképek (heatmaps) értékes adatokat szolgáltatnak arról, hogyan használják a felhasználók az alkalmazást a valóságban. Ezek az eszközök rögzítik a kattintásokat, görgetéseket, a felhasználói utakat, a képernyőn eltöltött időt és egyéb viselkedési mintákat.

Az analitikai adatok segítségével azonosíthatók a „drop-off” pontok, ahol a felhasználók elhagyják az alkalmazást, vagy a „bottleneck” (szűk keresztmetszet) területek, ahol elakadnak. A hőtérképek vizuálisan megjelenítik, hogy a felhasználók hol érintik meg a képernyőt, hol görgetnek, és hol töltik a legtöbb időt, rávilágítva a népszerű és a problémás területekre.

Iteratív fejlesztés

A tesztelés és az adatelemzés eredményei alapján a tervezők és fejlesztők finomítják és javítják a felhasználói felületet. Ez az iteratív fejlesztési ciklus a következő lépésekből áll:

1. Tervezés: Új funkciók vagy UI elemek tervezése.
2. Fejlesztés: A design implementálása.
3. Tesztelés: A felhasználói viselkedés és a design hatékonyságának mérése.
4. Elemzés: Az adatok és visszajelzések kiértékelése.
5. Finomítás (Iteráció): A design módosítása az elemzések alapján.

Ez a folyamatos ciklus biztosítja, hogy a mobil UI mindig releváns, hatékony és felhasználóbarát maradjon, alkalmazkodva a változó igényekhez és technológiai trendekhez. A sikeres mobil termék mögött mindig egy erős, adatvezérelt és felhasználó-központú iteratív tervezési folyamat áll.

Gyakori mobil UI minták és komponensek

A mobil felhasználói felület tervezése során a tervezők gyakran használnak bevált, úgynevezett UI mintákat (UI patterns) és standard komponenseket. Ezek a minták és komponensek segítenek a konzisztencia fenntartásában, felgyorsítják a tervezési és fejlesztési folyamatot, és ami a legfontosabb, ismerős és intuitív élményt nyújtanak a felhasználóknak.

Navigációs minták

Ezekről már részletesebben szó esett, de érdemes megismételni a legfontosabbakat:

• Lap alatti navigáció (Tab Bar): A képernyő alján rögzített ikonok és címkék a fő szakaszokhoz.
• Hamburger menü (Navigation Drawer): Elrejtett menü, amely a képernyő széléről csúszik be.
• Görgethető lapok (Scrollable Tabs): Vízszintesen görgethető kategóriák a tartalom szűréséhez.
• Vissza gomb és Navigációs sáv: A rendszer-szintű vissza gomb (Android) és az alkalmazás-szintű navigációs sáv (iOS) a hierarchikus navigációhoz.

Adatbevitel és űrlapok

A mobil eszközökön az adatbevitel gyakran kihívást jelent a kisebb billentyűzet és a korlátozott képernyőterület miatt. Ezért az űrlapok tervezésekor különösen fontos az egyszerűség és a hatékonyság:

• Egyértelmű címkék és helyőrzők: Minden beviteli mezőnek legyen világos címkéje vagy helyőrző szövege, amely jelzi, mit kell beírni.
• Megfelelő billentyűzet típus: Használjuk a megfelelő billentyűzetet az adatbevitelhez (pl. szám billentyűzet telefonszámhoz, e-mail billentyűzet e-mail címhez).
• Automatikus kitöltés és előre feltöltött adatok: Ha lehetséges, használjuk az automatikus kitöltést vagy töltsük előre az adatokat a felhasználó profiljából.
• Hibakezelés és visszajelzés: Világos hibaüzenetek és vizuális jelzések, ha a bevitel helytelen.
• Progresszív felfedés: Ne kérjünk túl sok információt egyszerre. Bontsuk fel az űrlapokat kisebb, kezelhető lépésekre.

Listák és kártyák

A listák és kártyák a tartalom megjelenítésének gyakori módjai a mobil UI-ban:

• Listák: Ideálisak homogén adatok (pl. e-mailek, névjegyek, beállítások) megjelenítésére. Fontos a tiszta elválasztás, a megfelelő távolság és a releváns információk kiemelése.
• Kártyák: Önálló, téglalap alakú konténerek, amelyek különböző típusú, de kapcsolódó információkat tartalmaznak (pl. termékek, hírek, események). A kártyák jól elkülönülnek egymástól, és rugalmasan rendezhetők.

Visszajelző és állapotjelző komponensek

Ezek a komponensek tájékoztatják a felhasználót a rendszer állapotáról vagy a műveletek eredményéről:

• Betöltésjelzők (Loaders/Spinners): Animációk, amelyek jelzik, hogy a rendszer dolgozik.
• Folyamatjelző sávok (Progress Bars): A folyamat előrehaladását mutatják.
• Értesítések és toast üzenetek: Rövid, nem tolakodó üzenetek, amelyek a képernyőn jelennek meg, majd eltűnnek (pl. „Sikeresen elmentve”).
• Riasztások (Alerts) és párbeszédpanelek (Dialogs): Fontos információk vagy döntések igénylése a felhasználótól, amelyek megállítják az aktuális folyamatot.

Képek és média

A képek és videók használata a mobil UI-ban javítja az esztétikát és a felhasználói élményt, de optimalizálni kell őket a mobil eszközökre:

• Optimalizált fájlméret: A képek és videók legyenek optimalizálva a gyors betöltés érdekében.
• Reszponzív képek: Különböző képméretek biztosítása a különböző képernyőfelbontásokhoz.
• Galériák és karusszelek: Képek csoportos megjelenítése, görgethető formában.

Ezen minták és komponensek ismerete és helyes alkalmazása alapvető a hatékony és felhasználóbarát mobil UI tervezéséhez. Segítenek a tervezőknek a bevált gyakorlatok követésében, miközben elegendő rugalmasságot biztosítanak az egyedi igényekhez való alkalmazkodáshoz.

A mobil UI jövője: trendek és innovációk

A mobil felhasználói felület tervezése sosem áll meg, folyamatosan fejlődik a technológiai innovációk és a felhasználói elvárások változásával. Az elmúlt években számos új trend és technológia jelent meg, amelyek alapjaiban formálják át a mobil UI jövőjét.

Hangvezérlés és beszélgetés alapú UI (Conversational UI)

Az AI-alapú hangvezérlés (pl. Siri, Google Assistant, Alexa) térnyerésével a hangalapú interakciók egyre inkább beépülnek a mobil UI-ba. A felhasználók már nem csak gombokkal és gesztusokkal, hanem hangutasításokkal is irányíthatják az alkalmazásokat. Ez a trend a beszélgetés alapú UI (Conversational UI) felé mutat, ahol a felhasználók természetes nyelven kommunikálnak az alkalmazással, mintha egy emberrel beszélnének. Ez különösen hasznos lehet vezetés közben, vagy amikor a felhasználó kezei foglaltak.

Kiterjesztett valóság (Augmented Reality – AR)

Az AR technológia lehetővé teszi a digitális információk valós idejű, valós környezetbe történő integrálását. A mobil UI-ban ez azt jelenti, hogy a kamerán keresztül látott világra vetíthetők digitális elemek, információk vagy interaktív objektumok. Gondoljunk csak az IKEA Place alkalmazására, amely lehetővé teszi a bútorok elhelyezését a lakásban virtuálisan, vagy a térképes alkalmazásokra, amelyek az utcán mutatják az útvonalat. Az AR új dimenziókat nyit meg a vizuális interakcióban és a felhasználói élményben.

Összecsukható (Foldable) eszközök és adaptív felületek

Az összecsukható okostelefonok megjelenése új kihívásokat és lehetőségeket teremt a mobil UI tervezésében. Ezek az eszközök képesek váltani a kisebb, telefonos és a nagyobb, tablet-szerű képernyőméret között. A UI-nak zökkenőmentesen kell alkalmazkodnia ehhez a váltáshoz, fenntartva a funkcionalitást és az olvashatóságot mindkét módban. Ez a folyékonyabb, adaptívabb design felé mutat, ahol a felület nem csak reszponzív, hanem dinamikusan változtatja elrendezését és interakciós mintáit a képernyőállapotnak megfelelően.

Haptikus visszajelzés és fejlett szenzorok

A fejlett haptikus visszajelzés (rezgések) egyre kifinomultabbá válik, és gazdagabb, tapinthatóbb élményt nyújt. Ahelyett, hogy csak egy egyszerű rezgést éreznénk, az alkalmazások finom, differenciált rezgésmintákkal tájékoztathatnak minket az interakciókról, például egy virtuális kapcsoló „kattanásáról” vagy egy gomb megnyomásának érzetéről. Emellett a mobil eszközökbe épített egyre több szenzor (pl. giroszkóp, gyorsulásmérő, barométer) új interakciós lehetőségeket kínál, mint a telefon döntésével vagy rázásával történő vezérlés.

Személyre szabás és AI-alapú adaptáció

A jövő mobil UI-ja még személyre szabottabb és kontextusfüggőbb lesz. Az AI és a gépi tanulás segítségével az alkalmazások képesek lesznek tanulni a felhasználók viselkedéséből, preferenciáiból és a környezeti tényezőkből (pl. napszak, tartózkodási hely), és ennek megfelelően dinamikusan adaptálják a felületet, a tartalmat és a funkciók prioritását. Ez azt jelenti, hogy a UI nem csak statikus design, hanem egy intelligens, folyamatosan fejlődő felület, amely a felhasználó egyéni igényeihez igazodik.

Ezek a trendek azt mutatják, hogy a mobil UI tervezése egyre komplexebbé, de egyben izgalmasabbá is válik. A cél továbbra is a felhasználói élmény optimalizálása, de a technológia egyre kifinomultabb eszközöket biztosít ennek eléréséhez, lehetővé téve a tervezők számára, hogy még intuitívabb, magával ragadóbb és személyre szabottabb digitális élményeket hozzanak létre.

Etikus design és hozzáférhetőség a mobil UI-ban

A modern mobil felhasználói felület tervezésében nem csupán az esztétika és a funkcionalitás a mérvadó, hanem egyre nagyobb hangsúlyt kap az etikus design és a hozzáférhetőség (accessibility) is. Egy igazán magas színvonalú UI mindenki számára használható, inkluzív és tiszteletben tartja a felhasználók jólétét.

Etikus design alapelvei

Az etikus design azt jelenti, hogy a tervezők figyelembe veszik döntéseik szélesebb körű hatásait a felhasználókra és a társadalomra. Ez magában foglalja a következőket:

• Átláthatóság: Legyen világos, hogyan működik az alkalmazás, hogyan kezelik az adatokat, és milyen következményekkel járnak a felhasználó döntései. Kerüljük a rejtett költségeket vagy a megtévesztő információkat.
• Felhasználói autonómia: Támogassuk a felhasználók kontrollját saját élményeik felett. Kerüljük azokat a design elemeket, amelyek manipulálják, kényszerítik vagy függővé teszik a felhasználókat (pl. dark patterns).
• Jóllét: Tervezzünk olyan felületeket, amelyek elősegítik a felhasználók mentális és fizikai jólétét. Ez magában foglalhatja az értesítések korlátozását, a digitális detox funkciókat vagy a képernyőidő-követést.
• Adatvédelem: Az adatvédelem legyen beépítve a designba (privacy by design). Adjuk meg a felhasználóknak a lehetőséget, hogy könnyen kezeljék és ellenőrizzék személyes adataikat.
• Részrehajlás elkerülése: Törekedjünk arra, hogy a design ne erősítsen meg sztereotípiákat, és ne zárjon ki senkit. Legyen inkluzív a képek, nyelvezet és funkciók tekintetében.

Az etikus design nem egy extra funkció, hanem egy alapvető gondolkodásmód, amely a tervezési folyamat minden szakaszában jelen van.

Hozzáférhetőség a mobil UI-ban

A hozzáférhetőség (accessibility) biztosítja, hogy a mobil UI mindenki számára használható legyen, beleértve a fogyatékkal élő felhasználókat is. Ez nem csak egy jogi előírás, hanem egy morális kötelesség és egyben üzleti előny is, hiszen szélesebb felhasználói kört ér el. A mobil UI-ban a hozzáférhetőség a következőket foglalja magában:

• Színkontraszt: Megfelelő kontrasztarány a szöveg és a háttér között a gyengénlátók számára (WCAG szabványok).
• Betűméret és skálázhatóság: A szövegméret állítható legyen a rendszer beállításaiban, és az UI elemek alkalmazkodjanak ehhez.
• Képernyőolvasó támogatás: Az UI elemek legyenek megfelelően címkézve és strukturálva, hogy a képernyőolvasók (pl. VoiceOver iOS-en, TalkBack Androidon) pontosan fel tudják olvasni a tartalmat és az interaktív elemeket.
• Érintési célterületek mérete: Az interaktív elemek (gombok, ikonok) legyenek elég nagyok ahhoz, hogy a motoros nehézségekkel küzdők is könnyen megérinthessék őket. Az ajánlott méret legalább 48×48 dp.
• Alternatív szövegek (Alt Text) képekhez: A képekhez adjunk leíró alternatív szöveget, amelyet a képernyőolvasók felolvashatnak.
• Világos visszajelzés: Az állapotváltozásokról és hibákról adjunk vizuális és audió visszajelzést is, ne csak színnel jelöljük.
• Egyszerű és kiszámítható navigáció: A navigáció legyen logikus és könnyen érthető, lehetőleg billentyűzettel (külső billentyűzet esetén) vagy más alternatív beviteli móddal is működjön.

Az akadálymentes design nemcsak a fogyatékkal élő felhasználóknak segít, hanem mindenki számára javítja a felhasználói élményt. Például a jó kontraszt hasznos erős napfényben, a nagyobb érintési célterületek pedig kényelmesebbé teszik a használatot vezetés közben vagy sietve.

Az etikus és hozzáférhető mobil UI tervezés a felelősségteljes és inkluzív digitális termékek létrehozásának alapja. Ezen elvek beépítése a tervezési folyamatba hosszú távon növeli a felhasználói elégedettséget és a termék értékét.