Anyagtervezés és a rejtélyes hús-navigációs probléma

2016 márciusában a Google frissítette az Anyagtervezést, hogy az alsó navigációs sávokat hozzáadja a felhasználói felület könyvtárához. Ez az új sáv egy alkalmazás alján helyezkedik el, és 3-5 ikont tartalmaz, amelyek lehetővé teszik a felhasználók számára, hogy az alkalmazás felső szintű nézetei között navigáljanak.

Ismerős? Ez azért van, mert az alsó navigációs sávok évek óta az iOS felhasználói felületének részei (ezeket iOS-ben tabulátoroknak hívják).

Az alsó navigációs sávok jobb alternatívát jelentenek a hamburger menünél, ezért jó hírnek kell lenniük az Anyagtervezésbe való felvételüknek. De az alsó navigációs sávok Google verziójának komoly problémája van: a rejtélyes hús navigációja .

Akár Android-felhasználó, -tervező vagy -fejlesztő vagy, ez gondot okozhat neked.

Mi a rejtélyes húsnavigáció, és miért olyan rossz?

A rejtélyhús-navigáció egy olyan kifejezés, amelyet 1998-ban talált ki Vincent Flanders a híres Web Pages That Suck weboldalról. Olyan gombokra vagy linkekre utal, amelyek nem magyarázzák el, hogy mit csinálnak. Ehelyett rájuk kell kattintania, hogy megtudja.

(A „rejtélyhús” kifejezés az amerikai állami iskolai büfékben felszolgált húsból származik, amelyet annyira feldolgoztak, hogy az állat típusa, amelyből származnak, már nem észlelhető.)

A rejtélyes hús navigáció a formatervek jellemzője, amelyek a formát helyezik előtérbe a funkció helyett. Rossz UX tervezés, mert az esztétikát hangsúlyozza a felhasználói élmény árán. Kognitív terhelést jelent a navigációs feladatokban, mivel a felhasználóknak meg kell találniuk, hogy mit csinál a gomb. És ha a felhasználóknak találgatniuk kell, akkor rosszul csinálod.

Nem szeretne rejtélyhúst enni - hasonlóképpen a felhasználók nem akarnak rákattintani a rejtélygombokra.

1. sztrájk: Az Android Lollipop navigációs sávja

A Material Design első nagy rejtélyes hús-navigációs problémája 2014-ben történt az Android Lollipop segítségével.

Az Android Lollipop ugyanezen a konferencián mutatkozott be, amely debütált az Material Design alkalmazással, és a Google új tervezési nyelvéhez igazodóan átalakított felhasználói felületet használ.

Az egyik új felhasználói felület eleme a navigációs sáv volt, az Android operációs rendszer alján található állandó sáv, amely navigációs vezérlést biztosít a Back, Home és Menu hardver gomb nélküli telefonokhoz.

Az Android Lollipop alkalmazásban a navigációs sáv erre lett átalakítva:

Látja a problémát?

Míg az előző kialakítás kevésbé esztétikus, mégis többé-kevésbé egyszerű. A Vissza és Otthon ikonok szöveges címkék nélkül is érthetők. A 3. ikon kissé rejtélyes hús, de összességében a régi navigációs sáv UX-je nem volt túl rossz.

Az új bár viszont rendkívül csinos. Az egyenlő oldalú háromszög, kör és négyzet a geometriai tökéletesség szimbóluma. De rendkívül felhasználóbarát is . Absztrakt - és a navigációs vezérlőknek soha nem szabad elvontnak lenniük. Ez teljes rejtély hús navigáció.

A háromszög ikon hasonlíthat egy „Vissza” nyílra, de mit jelent egy kör és egy négyzet a navigációs vezérléshez képest?

2. sztrájk: lebegő akciógombok

A lebegő műveletgombok olyan speciális gombok, amelyek az alkalmazás más felhasználói felületének elemei felett jelennek meg. Ideális esetben az alkalmazás elsődleges műveletének népszerűsítésére használják őket.

A lebegő akciógombok szintén szenvednek a rejtélyes hús-navigációs problémától. Tervezés szerint a lebegő műveletgomb egy kör, amely ikont tartalmaz. Ez egy tiszta ikon gomb, ahol nincs hely szöveges címkék számára.

Az igazság az, hogy az ikonokat hihetetlenül nehéz megérteni, mert annyira nyitottak az értelmezésre. Kultúránk és múltbeli tapasztalataink tájékoztatják az ikonok értelmezését. Sajnos a tervezők (különösen, úgy tűnik, az Anyagtervezők) nehezen néznek szembe ezzel az igazsággal.

Bizonyítékra van szüksége, hogy a csak ikonokat tartalmazó gombok rossz ötlet? Játsszunk találgatásokat.

Az alábbiakban felsoroljuk, hogy az anyagtervezési irányelvek szerint mik az elfogadható ikonok a lebegő műveleti gombokhoz. Kitalálhatja, hogy az egyes gombok mit csinálnak?

Ok, ez egyszerű, hogy melegítsen. Az „Irányokat” képviseli.

Mit szólsz ehhez? Ha iOS vagy Mac használ, akkor azt mondhatja, hogy „Safari”. Valójában a „Felfedezést” jelenti.

A dolgok most szórakoztatóak (vagy frusztrálóak)! Lehet, hogy ez „Megnyitás a névjegyekben”? "Segítség, valaki követ engem"? Talán ez egy gomb a „Telefon egy barátnak” mentőövéhez.

Várjon, ez a gomb a „Megnyitás a névjegyekben” gombra. Jobb? Vagy ez a „Pletyka egy barátról”, mivel az illető beszédbuborékban van?

Készen áll az utolsó fordulóra? Itt van a legrosszabb (és a legtöbbet használt) ikon:

Azt gondolhatja, hogy a „+” gomb meglehetősen egyszerűen érthető - nyilvánvalóan ez a gomb az „Add” művelethez. De mit adjunk hozzá ?

Mit tegyen hozzá: ez a probléma ott. Ha egy felhasználónak fel kell tennie ezt a kérdést, akkor a gombja hivatalosan rejtélyes hús. Sajnos úgy tűnik, hogy az Material Design alkalmazások fejlesztői és tervezői szeretik a „+” lebegő műveletgombot.

Pontosan azért, mert a „+” gomb olyan könnyen érthetőnek tűnik , a lebegő műveletgombok végén ez a leginkább visszaélt ikon. Gondoljon arra, hogy a Google saját Inbox alkalmazása hogyan jelenít meg további gombokat, amikor megérinti a „+” lebegő gombot, ami nem egy felhasználó elvárása:

A helyzetet tovább rontja, hogy ugyanazoknak az ikonoknak különböző jelentése van a különböző alkalmazásokban. A Google a ceruza ikont használta a „Levélírás” kifejezésre az Inboxban és a Gmailben, de a „Szerkesztés” kifejezésre a Snapseed fotóalkalmazásban.

A lebegő művelet gomb nagyszerű módja volt annak, hogy a felhasználók hozzáférjenek az elsődleges műveletekhez. Kivéve, hogy nem az, mert a csak ikonokat tartalmazó gombok általában rejtélyes húsok.

További információ a lebegő műveleti gombokról:

Anyagterv:

Miért rossz a lebegő akció gomb UX-ben

Az Material Design egy olyan formatervezési nyelv, amelyet a Google egy évvel ezelőtt vezetett be, és a vállalat merész próbálkozását jelenti a… medium.com oldalon

3. sztrájk: Az új alsó navigációs sáv

Ezzel elérkeztünk a 2016 márciusában bevezetett alsó navigációs sávhoz.

A 3 nézettel rendelkező alsó navigációs sávok esetében a Google irányelvei előírják, hogy az ikonokat és a szöveges címkéket egyaránt meg kell jeleníteni. Eddig nagyon jó: nincs rejtély hús itt.

De a 4 vagy 5 nézettel rendelkező alsó navigációs sávok esetében a Google meghatározza, hogy az inaktív nézetek csak ikonként jelenjenek meg .

Emlékszel, milyen nehéz volt kitalálni, mit jelentenek a lebegő művelet gomb ikonjai? Most próbálja kitalálni az alkalmazásban való navigáláshoz használt ikonok sorát.

Ez csak rossz UX tervezés. Valójában a Nielsen Norman Group azt állítja, hogy az ikonokhoz szöveges címke szükséges , különösen a navigációs ikonok (kiemelés az övék):

"Annak érdekében, hogy legyőzze a kétértelműséget, amellyel szinte az összes ikon szembesül, szöveges címkének kell lennie egy ikon mellett, hogy tisztázza annak jelentését az adott kontextusban.… A navigációs ikonok esetében a címkék különösen kritikusak."

Ez a Material Design legújabb felhasználói felületének eleme a rejtélyes húsban való navigációt nemcsak frusztráló, de furcsa is. Miért kell a szöveges címkéket megjeleníteni, ha 3 nézet van, de elrejtve, ha 4–5 nézet van?

Nyilvánvaló válasz a helyszűke.

Az iOS fülsávjai kivételével 5 ikon található, és mindegyikhez továbbra is megjelenik az ikon és a szövegcímke. Tehát a helyszűke nem indokolt.

A Google vagy úgy döntött, hogy az ikonok kellően reprezentálhatják a navigációs műveleteket (ami rossz), vagy úgy döntöttek, hogy az esztétikai tisztaság fontosabb, mint a használhatóság (ami rosszabb). Akárhogy is, döntésük rontotta az Android-felhasználók millióinak UX-jét.

Anyagterv és forma a funkció felett

Amikor az Anyagtervezés 2014-ben elindult, nagy rajongás volt. Merész, és továbbhalad (és egyszeri) a lapos kivitelben. Az élénk színek és animációk párosítása szépvé teszi.

De talán egy kicsit túl szép. Talán az Anyagtervezés közben a tervezők kissé elragadtatták magukat.

Úgy tűnik, hogy a Google fontos gombokra és sávokra vonatkozó irányelvei újra és újra előtérbe helyezik az űrlapot a funkció helyett. A geometriai csinosságot választották az Android navigációs sávjának felismerhetősége helyett. Az esztétikai egyszerűség elősegítette a lebegő akciógombokat, amelyek során rejtvényekké alakították őket. Végül a vizuális tisztaságot fontosabbnak tartották, mint az alsó navigációs sávokban található értelmes címkéket.

Ez nem azt jelenti, hogy a rejtélyes hús-navigáció csak a Google számára jelent problémát. Persze, az iOS alkalmazásokban is megtalálhatunk titokzatos húsokat. De általában nem jelennek meg a kritikus navigációs vezérlőkben és a kiemelt gombokban. Ezeket a tervezési irányelveket nem is nevezik kifejezetten misztikus húsnak.

Ha a Google tervezői időt és erőfeszítést fordíthatnának az animációk sebességgrafikonjainak elkészítésére, akkor talán egy kis időt eltölthetnének annak biztosítására, hogy a terveik ne legyenek rejtélyes húsok.

Végül is az animált rejtélygomb még mindig kevésbé kellemes, mint egy statikus, de egyértelműen feliratozott gomb.