A tervezési szakzsargon elmagyarázta: a Z-minta

Kép Karyn Christner jóvoltából, www.flickr.com/photos/toofarnorth/

Kép Karyn Christner jóvoltából, www.flickr.com/photos/toofarnorth/

Ban ben A tervezési szakzsargon elmagyarázta: az F-minta , megbeszéltük, hogyan szemkövetési vizsgálatok azt mutatják, hogy a felhasználók hasonló és kiszámítható módon vizsgálják a képernyőket.

Felhasználói felület-tervező számára ezek a beolvasási minták az elemek optimális elrendezését tárják fel bizonyos típusú webhelyekhez. Ez a hideg, kemény tudomány, ha megfelelően alkalmazzák, a felhasználóban varázslatos ismerős érzést kelt. A kezelőfelület intuitívnak és személyesnek tűnik, minden a maga helyén van.

Korábbi cikkünk e szkennelési minták egyikére, az F-mintára összpontosított, és ez egy másik, ugyanolyan fontos mintát: a Z-mintát tárja fel.

Az alábbiakban elmagyarázzuk, mi ez, hogyan kell alkalmazni, majd bemutatunk néhány valós példát arra, hogy ez jól sikerült.

A Z-mintával, az F-mintával és sok más vizuális web-tervezési technikával kapcsolatos további részletekért tekintse meg az ingyenes e-könyveket Web Design az emberi szem számára és Webes felhasználói felület legjobb gyakorlatok .

A Z-minta dekonstruálása

Míg az F-minta ideális szöveges vagy tartalmas webhelyekhez, a Z-minta jobban működik lazább, ritkább helyeken.

A minimalista helyszínek, vagy azok a helyek, amelyek többnyire egy vagy két fő elem körül helyezkednek el, képesek megvalósítani a Z-mintát az előrejelzés érdekében, és arra ösztönözhetik a felhasználókat, hogy kövessék ezt a természetes módszert.

Így a tervezők biztosíthatják, vagy legalábbis növelhetik annak valószínűségét, hogy a legfontosabb elemek láthatók legyenek.

A kép a Wunderlist jóvoltából

A kép a Wunderlist jóvoltából

Az F-mintához hasonlóan a nyugati kultúrákban is, amelyek balról jobbra és fentről lefelé olvasnak, a felhasználó szinte mindig a bal felső sarokban indul, és a tetején keresztül szkennel. A Z-minta megkülönböztető jellemzője a következő Z-forma. Ahelyett, hogy visszatérne balra, majd lefelé megy, a felhasználó látószöge egyszerre balra és lefelé halad, majd ismét egy vízszintes vonalat vizsgál balról jobbra.

A Z-minta érdekes - és hasznos - tudnivalója, hogy megismétlődik, néha végtelenül, ha a tartalom elég vonzó.

Ez egy végtelen cikk-cakk struktúrát hoz létre, amely lefelé nyúlik, amíg fel tudja hívni a felhasználó figyelmét, így ez a minta tökéletes vizuális narratívák létrehozásához hosszú görgetéssel, végtelen görgetéssel és parallaxis görgetéssel.

A kép a Wunderlist jóvoltából

A kép a Wunderlist jóvoltából

Ellentétben az F-mintával, amely jól működik azoknál a webhelyeknél, amelyek vizuális és szöveges tartalom keverékének szervezését igénylik, a Z-minta jól működik olyan webhelyek számára, amelyek világos és közvetlen napirenddel rendelkeznek (például egy nyitóoldal, ahol egy fő akció).

A Z-minta világos struktúrát és hierarchiát hoz létre, és ha jól csinálják, lendületet ad, és végső cselekvésre ösztönzéssel ér el.

Hátránya, hogy a sok tartalmú webhelyek számára zavaró lehet.

A Z-minta alkalmazása

A Z-minta általában könnyű tartalom soraiból áll, nagy grafikákkal vagy más figyelemfelkeltő tartalommal tarkítva.

A kép az UXPin jóvoltából a MailChimp segítségével

A kép az UXPin jóvoltából a MailChimp segítségével

A Z-minta ugyanúgy kezdődik, mint az F-minta, így a legfontosabb helyed a bal felső sarok (1. pont). Ez egyike azon kevés helyeknek a képernyőn, amelyet a felhasználó szinte biztosan megnéz, és mint ilyen általában a cég logóját viseli.

Ismét az F-mintához hasonlóan a felhasználó ezután valószínűleg balról jobbra szkennel az oldal tetején (2. pont). Ez két dolgot jelent a tervező számára.

  • Először is, ez a legfelső sor az elsődleges ingatlan, ezért általában vízszintes navigációs sáv tölti ki. Szinte azonnal a webhelyére való leszállás után a felhasználók tudják, hogy mely oldalak érhetők el, és hol találják meg őket.
  • Másodszor, ez azt jelenti, hogy a jobb felső sarok remek hely a cselekvésre ösztönzéshez, mivel a felhasználó látása egy pillanatra megáll, mielőtt továbblépne.

Kövesse a szemet

Ezután a felhasználó szeme lefelé esik középre. Itt talál egy nagy képet vagy néha értesítést. Egy másik stratégia az, hogy ezt a területet viszonylag üresen tartsuk: egy üres hely itt gyorsabban mozgatja a felhasználót és ösztönzi az ismétlődő transzsort.

Mindkét stratégiában az a fontos része a középnek, hogy nem vonja el a felhasználót, és nem tér el a Z-minta útvonalától. Ez azt jelenti, hogy nehéz vagy vizuálisan bonyolult helyőrzők nem ajánlottak.

A felhasználó látása ezután a bal alsó sarokba megy (3. pont), és ismét jobbra keres (4. pont). A képernyő alján általában vízszintesen orientált tartalmat talál, néha még egy sávmenüt is, amely a felsőt tükrözi.

Azt is észreveszi, hogy a jobb oldali sor végén lévő pontok, a 2. és a 4. pont a legalkalmasabbak a cselekvésre ösztönzéshez, például a példa 'Ingyenes regisztráció' gombjai. Gondoljon ezekre a pontokra, mint a célvonalak, ahol a szem megáll, mielőtt továbblépne.

A minta megismétlése

A 4. pont után a minta ismétlődik. Kiterjesztheti a Z mintát, ameddig csak akarja, ismételve vagy új cselekvésre ösztönzéseket vezetve be a jobboldali pontok mindegyikébe.

Általában a Z-minta lazább, mint az F-minta. Lehetővé teszi a légzési helyiséget és a sokoldalúságot - mind abban, hogy mennyi ideig tudja felhívni a felhasználó figyelmét, mind abban, hogy milyen szélesre teheti a réseket a közepén. Ez elősegíti a mesemondást vagy az értékesítési helyeket, de a sokféle tartalom szervezésében hatástalan.

Mivel a cselekvésre ösztönzésre helyezi a hangsúlyt, a Z-minta nem ritka a kezdőlapok és a céloldalak esetében, finoman befolyásolva a felhasználót, hogy merre kell tovább mennie. Népszerű elrendezés a különböző iparágakban, és gyakran felismerhető a felső és az alsó navigációs sávból. Íme néhány példa...

01. Az AirBnB Térkép oldala

Kép az Air BnB Map jóvoltából

Kép az Air BnB Map jóvoltából

Amint azt a Webtervezés az emberi szem számára (2. könyv) , a minta a jobb felső sarokban lévő hagyományos céges logónál kezdődik. Mivel nincs felső navigációs sáv, a szem valószínűleg egyenesen a jobb felső sarokba fog lőni, visszahívva az eredeti webhelyre a cselekvésre ösztönzést és a megosztási lehetőségeket, valamint egy hangvezérlési lehetőséget.

A szem ezután átvizsgálja a térképet - az oldal tényleges tartalmát, de egyelőre csak egy hátteret -, mielőtt letelepedne a bal alsó sarokban. Ezután a felhasználó látása követi az alsó navigációs menüt a jobb alsó sarokba, ahol az egyik legfontosabb vezérlő található: a zoom.

Amíg a releváns tartalom középen van, a felhasználók valószínűleg az egész oldalt átvizsgálják, mielőtt kapcsolatba lépnének. Azáltal, hogy mindent Z-mintába rendezett, az AirBnB segít abban, hogy a felhasználó az első pillanatokban megismerje az oldal vezérlőit és azok helyét, lehetővé téve számukra, hogy a legjobban kommunikáljanak az oldallal. A Z-minta elrendezése egyszerűen egyszerűsíti ezt a folyamatot.

02. brit légitársaság

A kép a British Airways jóvoltából

A kép a British Airways jóvoltából

Egy másik nagy vállalat, amely kihasználja a Z-mintát, a British Airways webhelye az új repülőgépek bemutatására. Előreláthatólag a cég logója a kiindulási ponton nyugszik, és az Airbnb-hez hasonlóan a felső navigációs menü hiánya azt jelenti, hogy a szem gyorsan a jobb sarokba kerül. Itt a vállalat csak a Galéria és az Útvonalak oldalak legfontosabb linkjeinek népszerűsítését választotta.

A szem ezután átmegy a nagy képen - gyönyörű nézni, de végső soron értelmetlen az interfész számára az esztétikán kívül. A felhasználó elolvashatja vagy figyelmen kívül hagyhatja az üdvözletet, az időtartamától függően, vagy ha tudja, hová érkezett.

Mivel a 3. pont a legkevésbé jelentős, a British Airways (és sok más társaság) úgy döntött, hogy ide írja jogi követelményét. De ez valójában stratégiai döntés - a vízszintes szövegsor itt arra ösztönzi a felhasználó webhelyét, hogy ugyanazon a síkon haladjon jobbra.

Amint azt a Webes felhasználói felület kialakítása az emberi szem számára (1. könyv) , a sorok Gestalt-elve azt mutatja, hogy a felhasználó webhelye világos vonalak mentén halad és lendületet kap. A jogi vonal ezen elhelyezése valóban támogatja a Z-mintát, és relevánsabb tartalomra irányítja a szemet ... és a 4. pontban található Megosztás gombra torkollik.

03. Irregulart

Kép Irregulart jóvoltából

Kép Irregulart jóvoltából

Irregulart a Z-mintát is használja, de egy fontos variációt mutat be, amelyre szeretnénk felhívni a figyelmet.

Amint az előző példában említettük, a 3. pont a legkevésbé fontos hely az oldalon. Ezért néhány tervező úgy dönt, hogy teljesen kihagyja a Z-mintából (mint az Irregulart csapata tette). A Z-minta továbbra is hatékony, azonban az alsó / középső lesz az új 3. pont. Ez csak egy hajszálnyival gyorsítja ezt a létfontosságú első pillantást, és az egyszerűbb és minimalista érzés érdekében hangolja a webhelyet.

Ne feledje, hogy a legtöbb tervezési elvhez hasonlóan a Z-minta is csak egy iránymutatás. Nem kell minden pontot betartania, de mindenképpen tartsa szem előtt az alapokat, és szükség esetén módosítsa.

Következtetés

A Z-mintával kapcsolatos fontos elvitel a szerkezete.

Növelheti az egyszerűsített oldalakat, de a néhány szerkezeti pont létfontosságú a hatékonyság szempontjából, ezért ne becsülje le őket. A szerkezet a Z-minta legnagyobb erőssége, ugyanakkor gyengesége is; a figyelemelterelő elem, amely nem a helyén van, kisiklja a felhasználó útját, és legyőzi az elrendezés teljes célját.

Szavak : Jerry Cao

Jerry Cao a tartalom stratégája UXPin - a drótváz-készítő és prototípus-készítő alkalmazás - ahol alkalmazáson belüli és online tartalmat fejleszt a drótvázas és prototípus-készítő platform számára. Ha meg szeretné tudni, hogy miként használhatók minden típusú és hűségű makettek, nézze meg Útmutató a makettekhez .

Mint ez? Olvassa el ezeket!