2. előadás UI/UX - User Interface, User Experience
Ergonómia
Tervezésben
Test és lélk sajátosságait figyelembe véve
Kivitelezésben
A használó testét és lelkét nem károsító
Használhatóság - Usability
GUI
UI tervezés
Toast notifications
- Felugró értesítések - Toast
Breadcrumbs
- "Zsemlemorzsa", a nyomok hátrahagyásának metaforája.
Radio button
- Az összes gomb közül csak egyet tudunk választani.
Slider
- Csúszka
- pl. növelni/csökenteni hangerőt.
Carousel
- Körbe-körbe megy (ciklikusan akár)
Accordion
- Lenyitható, menü
Tabs
- Oldalak logikai elválasztója, indikátora
Switch
- True/False
User Experience (UX)
User experience, don't make me think
- Don Norman
UX tervezés
- Drótvázterv
- A/B tesztek
- A felhasználók egyik felével egy A megoldást tesztelünk, másik felével egy B megoldást, majd a kettőt összehasonlítjuk
- Termék, vagy szolgáltatás felépítése
- Tartalomfejlesztés
- Versenytársak figyelése és követése
- Trendek követése
UX aspektusai
- Hasznosság
- A tartalom legyen informatív
- Használhatóság
- Egy jó termék megjelenésének utalnia kell a rendeltetés szerű használatra
- Affordancia
- A tárgyak észlelésének olyan eleme, amely a használati tulajdonságokat kapcsolja hozzá az észlelt jellemzőhöz
- pl.: Megfelelő nyilak, és alakzatok átméretezésnél
- Megtalálhatóság
- SEM (Seach Engine Marketing)
- SEO (Searck engine Optimization)
- Hitelesség
- Vonzóság
- Videók/ képek minőságe
- Tipográfia
- Hozzáférhetőség
- Érték
Jellemző UX hibák
- Túlságosan erős jelszó kérése
- Hosszú űrlap rosszul elhelyezett törlés gombbal
Használhatósági faktorok
- Megtanulhatóság
- Mennyi idő elsajátítani a használatot
- Hatékonyság
- Megfelelő ismerettel mennyire hatékony
- Megjegyezhetőség
- Korábban megszerzett tudással mennyire könnyű újra megtanulni
- Hibák
- Milyen módon jut a felhasználóhoz a hibaüzenet
- Hogyan tudja elkerülni a lehetséges hibákat
Vizsgálati módszerek
- Analitikus módszerek
- Empirikus módszerek
Heurisztika 10 eleme
- Rendszer állapotának láthatósága
- Rendszer és a felhasználó világa találkozik
- Megfelelő nyelvezet használata
- Felhasználói szabadság és irányítás
- Vissza gomb, helyes navigáció
- Következetesség és konvenciók
- Egységes szó és jelentés használat
- Platformspecifikus minták követése
- Hibamegelőzés
- Megfelelő és jól időzített figyelmeztetések
- Felidézés helyett felismerés
- Ismert minták, összehasonlítások
- Rugalmas és hatékony használat
- Esztétikus és minimalista dezign
- Hiba esetén a megértéshez és megoldáshoz segítség
- Van súgó, dokumentáció
Kotlin kiegészítés - Dark patterns
Olyan UI/UX elemek, amik tudatosan befolyásolják a felhasználó viselkedését, jellemzően az érdekei ellen
Ilyen minták láthatóak a regisztráció törlésének nehezen elérhető menüjével, kirívóan agresszív színek és formák, amik bűntudatot keltenek a felhasználóban.
Kerülendő minta, de számtalan cég használja (btw. Törvényellenes...)