A mobilmenüt a fő feladatok szerint építse fel, használjon szöveges elnevezéseket és kiszámítható hierarchiát, és valós eszközökön tesztelje a megnyitást, a fókuszt, a visszalépést és az út végigjárását.
A mobilnavigációnak kis helyen kell elérhetővé tennie a legfontosabb útvonalakat anélkül, hogy a felhasználónak ismernie kellene a cég szervezeti felépítését. A menüikon, a logó és néhány gyorslink nem elég, ha a felhasználó konkrét szolgáltatást, árat, kapcsolatot vagy folyamatban lévő feladatot keres. A gyenge menü zsákutcákat hoz létre, és arra kényszeríti a látogatót, hogy újra és újra nyissa és zárja a rétegeket.
A jó terv ötvözi a tartalom prioritását, az egyértelmű elnevezést, a stabil viselkedést és az akadálymentes megvalósítást. Működnie kell érintéssel, billentyűzettel, nagyított szöveggel és a tájolás megváltozásakor is. Nincs univerzális elemszám, sem kötelező minta. A választást valós feladatokon és eszközökön kell ellenőrizni, nem csupán egy statikus képen.
A menü prioritásai a feladatokból indulnak ki, nem a belső részlegekből
Gyűjtse össze a leggyakoribb célokat a felhasználói kutatásból, a belső keresésből, az ügyfélszolgálatból és az analitikából. Különböztesse meg az elsődleges feladatokat, a kiegészítő információkat és a rendszerlinkeket. A főnavigációnak nem kell minden oldalt tartalmaznia. A mélyebb tartalmat kontextuális menü, keresés és lábléc is elérhetővé teheti, ha a felhasználó mindig érti, hol jár.
A menüpontok nevét a közönség szókincsével írja meg. Az olyan homályos megjelölések, mint a „megoldások” vagy a „továbbiak”, kontextust igényelnek, különösen, ha eltérő szolgáltatásokat takarnak. A pontokat a döntéshozatal szerint rendezze, ne ábécérendben, hacsak nincs rá egyértelmű ok. Minden ponthoz jegyezze fel a céloldalt és azt a kérdést, amelyre a kattintás után válaszolnia kell.
- fő szolgáltatás vagy felhasználói feladat
- elérhetőség és rendelkezésre állás a megfelelő kontextusban
- bejelentkezés vagy fiók, összetéveszthetetlenül a kínálattal
- keresés terjedelmesebb tartalom esetén
A vezérlőelemnek a nevét és az állapotát is közölnie kell
Használjon valódi gombot hozzáférhető névvel, ne kattintható képet vagy általános div elemet. A nyitott állapotnak programozottan elérhetőnek és vizuálisan egyértelműnek kell lennie. A három vonalból álló ikon önmagában nem mindenki számára egyértelmű; a „Menü” felirat csökkentheti a bizonytalanságot. A logóra kattintásnak kiszámíthatóan a kezdőlapra kell vezetnie, és megfelelő névvel kell rendelkeznie.
Megnyitáskor állítsa a fókuszt egy logikus helyre, bezáráskor pedig adja vissza az indító gombnak. Az Escape billentyűnek be kell zárnia a menüt, ha az fedőrétegként viselkedik. A modális réteg mögötti tartalom nem maradhat véletlenül kezelhető. Egy egyszerű lenyíló panelnél viszont ne implementáljon feleslegesen bonyolult, alkalmazásmenükhöz szánt billentyűzetmodellt.
A hierarchia több szint esetén is átlátható marad
A lenyíló menüpontot különítse el a szülőoldalra mutató linktől. Ha egyetlen elem mindkét funkciót ellátja, az érintéses viselkedés gyakran nem egyértelmű. Fontolja meg egy külön link és egy külön kibontó gomb használatát. Az aktuális szakaszt szöveggel, állapottal vagy olyan stílussal jelölje, amely nem kizárólag a színre támaszkodik. A felhasználónak tudnia kell, mi változott.
Mély struktúra esetén fontolja meg a fokozatosan egymásba ágyazott paneleket egyértelmű vissza gombbal és az aktuális szint megnevezésével. Visszalépéskor őrizze meg a görgetési pozíciót és a megnyitott ágat, ha ez segíti a feladatot. Az animáció nem takarhatja el a tartalmat, és tiszteletben kell tartania a csökkentett mozgásra vonatkozó beállítást. Az egyszerűbb hierarchia gyakran jobb a látványos átmenetnél.
- egyértelmű különbség a hivatkozás és a kibontás között
- az aktuális szint látható neve
- kiszámítható visszalépés egy szinttel feljebb
- nem kizárólag színtől vagy ikontól függő állapotjelzés
Az érintési felület, a nagyítás és a tájolás megváltoztatja a valós viselkedést
A vezérlőelemeknek elég nagynak és egymástól elkülönültnek kell lenniük, hogy a felhasználó ne aktiválja véletlenül a szomszédos elemet. A menüt tesztelje egy kézzel, nagyított szöveggel és fekvő tájolásban is. A rögzített fejléc nem foglalhatja el a képernyő nagy részét, és nem takarhatja el a célt horgonyra ugrás után. Az eszköz biztonságos margóit vegye figyelembe a CSS-ben.
A menü megnyitásakor tudatosan döntse el, hogy a háttér görgethető-e. Az átfedés alatti véletlen görgetés a bezárás után más helyre vezet. Az átméretezés vagy elforgatás nem hagyhatja rejtve az oldal törzsét, és nem okozhat hibás állapotot. Ha a JavaScript meghibásodik, az alapvető hivatkozásoknak progresszív fejlesztés révén elérhetőnek kell maradniuk.
A tesztelés az út végigjárását vizsgálja, nem csak a menü megnyitását
Készítsen elő olyan feladatokat, mint egy konkrét szolgáltatás megtalálása, a lehetőségek összehasonlítása, egy fiókiroda felhívása vagy a fiókban való folytatás. Figyelje meg, hol keres a felhasználó, mit tekint hivatkozásnak, és vissza tud-e lépni. Teszteljen érintéssel, billentyűzettel, képernyőolvasóval, nagyítással és különböző szélességű eszközök kombinációjával.
Az analitikában mérhető a menü megnyitása és egy elem kiválasztása, de az esemény önmagában nem magyarázza meg az okot. Kapcsolja össze a feladat befejezésével, a visszajelzésekkel és a hibanaplóval, felesleges személyes adatok gyűjtése nélkül. Ha a felhasználók a keresővel kerülik meg a menüt, vizsgálja felül az elnevezéseket és a struktúrát, mielőtt újabb szintet adna hozzá.
Gyakori kérdések
Minden mobilos weboldalhoz megfelelő a hamburger ikon?
Nem automatikusan. Helyet takarít meg, de elrejti a lehetőségeket. Néhány fontos cél esetén megfelelő lehet egy látható alsó vagy felső navigáció egyértelmű elnevezésekkel.
Hány szintje lehet a mobilmenünek?
Nincs fix korlát. Minden szint azonban növeli az erőfeszítést és a kontextus elvesztésének kockázatát. A mély struktúrát valós feladatokon ellenőrizze.
Bezáródjon-e magától a menü egy hivatkozásra kattintás után?
Új célpontra való átlépéskor általában igen. Ha ugyanazon az oldalon lévő tartalmat vezérli, a változást jelezni kell, és a fókuszt logikusan kell elhelyezni.
Források és további olvasnivaló
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
