Valószínűleg már jártál ott. Hogyan válasszunk aközött, hogy egy modált mutassunk a felhasználóknak, és mikor navigáljuk őket egy külön, új oldalra? És számít egyáltalán? Tulajdonképpen igen. A döntés befolyásolja a felhasználók áramlását, kontextusát, a részletek felkutatásának képességét, és ezzel együtt a hibagyakoriságot és a feladatok elvégzését. Mindkét lehetőség zavaró és frusztráló lehet – rossz időben és rossz helyen. Tehát jobb, ha rendbe tesszük. Nos, lássuk, hogyan kell ezt megtenni. Modálok vs. párbeszédpanelek vs. fedvények vs. átvilágítódobozok Míg gyakran beszélünk egyetlen modális UI komponensről, gyakran figyelmen kívül hagyjuk a különböző típusú modálisok finom, bonyolult árnyalatait. Valójában nem minden mód egyforma. Modálok, párbeszédpanelek, átfedések és átvilágítódobozok – mindegyik hasonlóan hangzik, de valójában egészen más:
Dialog A „beszélgetés” általános kifejezése (felhasználói ↔ rendszer). OverlayEgy oldal tetején megjelenő kis tartalompanel. A ModalUsernek interakcióba kell lépnie az overlay + háttér letiltásával. A NonmodalUsernek interakcióba kell lépnie a fedvény + háttérrel. VilágítódobozHompított háttér, hogy a figyelmet a modálisra irányítsa.
Ahogy Anna Kaley kiemeli, a legtöbb fedvény rosszkor jelenik meg, megszakítja a felhasználókat a kritikus feladatok során, rossz nyelvet használ, és megszakítja a felhasználók áramlását. Természetükből adódóan megszakítóak, és jellemzően nagyfokú súlyosságúak, anélkül, hogy erre erős szükség lenne.
Természetesen a felhasználókat le kell lassítani és meg kell szakítani, ha cselekvésük következményei nagy hatással vannak, de a legtöbb esetben a nem modális megoldások sokkal finomabbak és barátságosabbak, hogy felhívják a felhasználó figyelmét valamire. Ha valami, akkor mindig azt javaslom, hogy legyen alapértelmezett. Modálok → Egyedi, önálló feladatokhoz Tervezőként gyakran elutasítjuk a modálisokat, mint irrelevánsokat és bosszantóakat – és gyakran azok is! — mégis megvan az értékük. Nagyon hasznosak lehetnek a felhasználók figyelmeztetésében az esetleges hibákra, vagy segítenek elkerülni az adatvesztést. Segíthetnek a kapcsolódó műveletek végrehajtásában vagy részletekbe menően anélkül, hogy megszakítanák az oldal aktuális állapotát. De a modálok legnagyobb előnye, hogy segítenek a felhasználóknak megőrizni az aktuális képernyő kontextusát. Ez nem csak a felhasználói felületet jelenti, hanem a szerkesztett bevitelt, a görgetési pozíciót, a harmonikák állapotát, a szűrők kiválasztását, a rendezést és így tovább.
Időnként a felhasználóknak gyorsan meg kell erősíteniük a kijelölést (például a fent látható szűrőket), majd azonnal tovább kell lépniük onnan. Az automatikus mentés természetesen ugyanezt érheti el, de nem mindig van rá szükség vagy kívánatos. A felhasználói felület blokkolása pedig gyakran nem jó ötlet. A modálokat azonban semmilyen feladathoz nem használják. Általában egyedi, önálló feladatokhoz használjuk őket, ahol a felhasználóknak be kell ugrani, végrehajtani egy feladatot, majd vissza kell térniük oda, ahol voltak. Nem meglepő módon jól működnek magas prioritású, rövid interakciók esetén (pl. riasztások, romboló akciók, gyors megerősítések). Amikor a modálisok segítenek: 🚫 A modálok gyakran zavaróak, invazívak és zavaróak.🚫 Megnehezítik az összehasonlítást és a másolást-beillesztést.✅ A modálisok azonban lehetővé teszik a felhasználók számára, hogy több kontextust tartsanak fenn.✅ Hasznos a visszafordíthatatlan hibák és adatvesztés megelőzésére.✅ Hasznos, ha a felhasználók új oldalra küldése zavaró lenne. ✅ Csak akkor jelenítsen meg modált, ha a felhasználók értékelni fogják a zavarást.✅ Alapértelmezés szerint részesítse előnyben a nem blokkoló párbeszédpaneleket („nem modálisakat”).✅ Lehetővé teszi a felhasználók számára a párbeszédpanel későbbi kicsinyítését, elrejtését vagy visszaállítását.✅ Használjon modált a felhasználók lelassításához, például ellenőrizze az összetett bevitelt.✅ Adjon kiutat a „Bezárás” billentyűvel, vagy kattintson az ESC mezőn kívülre. Oldalak → Összetett, többlépcsős munkafolyamatokhoz A varázslók vagy a füles navigáció a modálisokon belül még az összetett vállalati termékekben sem működnek túl jól – ott az oldalpanelek vagy fiókok általában jobban működnek. A problémák akkor kezdődnek, amikor a felhasználóknak össze kell hasonlítaniuk vagy hivatkozniuk kell az adatpontokra – a modálisok azonban blokkolják ezt a viselkedést, ezért ehelyett több lapon újra megnyitják ugyanazt az oldalt.
Bonyolultabb folyamatokhoz és többlépéses folyamatokhoz az önálló oldalak működnek a legjobban. Az oldalak akkor is jobban működnek, ha a felhasználó teljes figyelmét megkövetelik, és az előző képernyőre való hivatkozás nem túl hasznos. A fiókok pedig olyan részfeladatoknál működnek, amelyek túl bonyolultak egy egyszerű modálishoz, de nincs szükségük teljes oldalas navigációra. Mikor érdemes elkerülni a modálisokat: 🚫 Kerülje a modálisokat a hibaüzenetekhez.🚫 Kerülje a modálisokat a funkciókról szóló értesítéseknél.🚫 Kerülje a modálisokat a beépítési élményért.🚫 Kerülje a modálisokat az összetett, hosszadalmas, többlépcsős feladatokhoz.🚫 Kerülje a több egymásba ágyazott módot, és használja helyette az előző/következő A feltétlenül szükséges autostriggert.🚫 Kerülje el mindkettőtIsmételt feladatokhoz Számos összetett, sok feladatot igénylő termékben a felhasználók azon kapják magukat, hogy újra és újra ugyanazokat a feladatokat hajtják végre. Itt mind a modális, mind az új oldalnavigáció növeli a súrlódást, mert megszakítják az áramlást, vagy arra kényszerítik a felhasználókat, hogy a hiányzó adatokat gyűjtsék össze a különböző lapok vagy nézetek között. A felhasználók túl gyakran megromlott élményben szenvednek, tele véget nem érő megerősítésekkel, túlzó figyelmeztetésekkel, bőbeszédű utasításokkal vagy egyszerűen hiányzó referenciapontokkal. Ahogy Saulius Stebulis említette, ezekben a forgatókönyvekben a bővíthető szakaszok vagy a helyben történő szerkesztés gyakran jobban működnek – ezek a feladatot az aktuális képernyőhöz rögzítik. A gyakorlatban sok esetben a felhasználók nem elszigetelten végzik el feladataikat. Meg kell keresniük az adatokat, másolni-beilleszteni az értékeket, finomítaniuk kell a bejegyzéseket különböző helyeken, vagy csak át kell tekinteniük a hasonló rekordokat, miközben a feladataikat végzik. Az átfedések és fiókok sokkal hasznosabbak a háttéradatokhoz való hozzáférés fenntartásában a feladat során. Ennek eredményeként a kontextus mindig a helyén marad, elérhető hivatkozásra vagy másolásra. Mentse el a módokat és az oldalnavigációt azokra a pillanatokra, amikor a megszakítás valóban hozzáadott értéket jelent – különösen a kritikus hibák elkerülése érdekében. Modálok kontra oldalak: döntési fa Nemrég Ryan Neufeld nagyon hasznos útmutatót állított össze, hogy segítsen a tervezőknek választani a módok és az oldalak között. Tartozik hozzá egy praktikus PNG-cheatsheet és egy Google-dokumentum-sablon, amely kérdéseket 7 részre bontva tartalmaz. Hosszú, rendkívül alapos, de nagyon könnyen követhető:
Lehet, hogy ijesztőnek tűnik, de ez egy meglehetősen egyszerű, 4 lépésből álló folyamat:
A képernyő kontextusa.Először is ellenőrizzük, hogy a felhasználóknak fenn kell tartaniuk a mögöttes képernyő kontextusát. A feladat összetettsége és időtartama. Az egyszerűbb, koncentrált, nem zavaró feladatokhoz modális is lehet, de a hosszú, összetett folyamatokhoz egy oldalra van szükség. Hivatkozás a mögöttes oldalra.Ezután ellenőrizzük, hogy a felhasználóknak gyakran kell-e hivatkozniuk a háttérben lévő adatokra, vagy a feladat egy egyszerű megerősítés vagy kiválasztás. A megfelelő átfedés kiválasztása. Végül, ha egy fedvény valóban jó választás, akkor elvezet minket a modális vagy a nem modális (nem modális felé hajló) közötti választáshoz.
Becsomagolás Amikor csak lehetséges, kerülje a teljes felhasználói felület blokkolását. Lebegő párbeszédpanel legyen, amely részben lefedi a felhasználói felületet, de lehetővé teszi a navigációt, a görgetést és a másolást. Vagy mutassa meg a modál tartalmát oldalfiókként. Vagy használjon helyette függőleges harmonikát. Vagy hozza a felhasználókat egy külön oldalra, ha sok részletet kell bemutatnia. De ha növelni szeretné a felhasználók hatékonyságát és sebességét, mindenáron kerülje a módozatokat. Használja őket a felhasználók lassítására, a figyelmük lekötésére, a hibák megelőzésére. Amint Therese Fessenden megjegyezte, senki sem szereti, ha megzavarják, de ha muszáj, győződjön meg róla, hogy teljesen megéri az árát. Ismerje meg az „intelligens interfész-tervezési mintákat” Egy egész szakaszt találhat a modálisokról és az alternatívákról a Smart Interface Design Patterns-ben, amely 15 órás videó tanfolyamunk 100 gyakorlati példát tartalmaz valós projektekből – egy élő UX képzéssel az év későbbi szakaszában. Minden a mega-legördülő listáktól az összetett vállalati táblákig – minden évben 5 új szegmenssel. Ugrás az ingyenes előnézethez. A BIRDIE kóddal 15% kedvezményt takaríthat meg. Ismerje meg az Intelligens felülettervezési mintákat, a felülettervezésről és UX-ről szóló videotanfolyamunkat.
Videó + UX képzés, csak videó Videó + UX képzés 495,00 USD 699,00 USD
Szerezzen be videót + UX képzés 25 videóleckét (15 óra) + élő UX képzést. 100 napos pénz-visszafizetési garancia. Csak videó 300,00 395,00 USD
Szerezd meg a videó tanfolyamot 40 videó óra (15 óra). Évente frissítik. UX csomagként is elérhető 2 videó tanfolyammal.
Hasznos források
Különböző típusú felugró ablakok, Anna Kaley UI modálok tervezésének legjobb gyakorlatai, Uxcel Túl sok átkozott modált használunk: UX útmutatók, Adrian Egger Modális és nem modális párbeszédek, Therese Fessenden Modern vállalati felhasználói felület tervezése: Modal Dialogs, James Jacobs Modálok a tervezési rendszerekben
