Kujundusžargoon selgitas: Z-muster

Pilt viisakalt Karyn Christneri poolt, www.flickr.com/photos/toofarnorth/

Pilt viisakalt Karyn Christneri poolt, www.flickr.com/photos/toofarnorth/

Sisse Kujundusžargoon selgitas: F-muster , rääkisime kuidas silmade jälgimise uuringud näitavad, et kasutajad skannivad ekraane sarnasel ja prognoositaval viisil.

Kasutajaliidese disaineri jaoks näitavad need skannimismustrid teatud tüüpi saitide jaoks optimaalset elementide paigutust. See külm ja kõva teadus, kui seda õigesti rakendada, loob kasutajale maagilise tuttavlikkuse tunde. Liides tundub intuitiivne ja isikupärane, kõik on õiges kohas.

Meie eelmine artikkel keskendus ühele neist skannimismustritest, F-mustrist, ja see uurib teist, sama olulist mustrit: Z-mustrit.

Allpool selgitame, mis see on, kuidas seda rakendada, ja näitame siis reaalseid näiteid selle kohta, kuidas see hästi õnnestub.

Lisateavet Z-mustri, F-mustri ja paljude muude visuaalse veebidisaini tehnikate kohta leiate tasuta e-raamatutest Veebikujundus inimsilmale ja Veebiliidese parimad tavad .

Z-mustri dekonstrueerimine

Kui F-muster sobib ideaalselt teksti- või sisutihedate saitide jaoks, siis Z-muster sobib paremini vabamate ja hõredamate saitide jaoks.

Minimalistlikud saidid või saidid, mis keskenduvad enamasti ühe või kahe põhielemendi ümber, võivad rakendada Z-mustrit ennetamiseks ja julgustada kasutajaid seda looduslikku meetodit järgima.

Nii saavad disainerid tagada või vähemalt suurendada tõenäosust, et nähakse kõige olulisemaid elemente.

Pilt viisakalt Wunderlist

Pilt viisakalt Wunderlist

Nagu F-mustri puhul, nii lääne kultuurides, kus loetakse vasakult paremale ja üles-alla, alustab kasutaja peaaegu alati vasakus ülanurgas ja skannib ülalt. Z-mustri eristavaks tunnuseks on Z-kuju, mis järgneb järgmisele. Selle asemel, et naasta vasakule ja minna siis alla, läheb kasutaja nägemine korraga vasakule ja alla ning skaneerib seejärel uuesti horisontaalset joont vasakult paremale.

Z-mustri kohta on huvitav - ja kasulik - teada, et see kordub, mõnikord ka lõpmatult, kui sisu on piisavalt haarav.

See loob lõputu siksakilise struktuuri, mis ulatub allapoole nii kaua, kuni saate kasutaja tähelepanu hoida, muutes selle mustri ideaalseks visuaalsete narratiivide loomiseks pika kerimise, lõpmatu kerimise ja parallaksi kerimisega.

Pilt viisakalt Wunderlist

Pilt viisakalt Wunderlist

Erinevalt F-mustrist, mis sobib hästi saitidele, mis nõuavad visuaalse ja tekstisisalduse kombinatsiooni korraldamist, töötab Z-muster selge ja otsese päevakavaga saitide jaoks (näiteks ühe peamise üleskutsega maandumisleht) tegevus).

Z-muster loob selge struktuuri ja hierarhia ning kui seda õigesti teha, saab hoogu, mis kulmineerub lõpliku tegevusele kutsumisega.

Negatiivne külg on see, et suure sisuga saitide jaoks võib see olla häiriv.

Z-mustri rakendamine

Z-muster koosneb tavaliselt kergetest sisulistest ridadest, millele on vahele pandud suur graafika või muu tähelepanu köitev sisu.

Pilt viisakalt UXPinilt MailChimpi kaudu

Pilt viisakalt UXPinilt MailChimpi kaudu

Z-muster algab täpselt nagu F-muster, seega on teie kõige olulisem koht vasakus ülanurgas (punkt nr 1). See on üks väheseid kohti ekraanil, mida teie kasutaja peaaegu kindlasti vaatab ja millel on tavaliselt ettevõtte logo.

Jällegi nagu F-muster, skannib kasutaja tõenäoliselt lehe ülaservast vasakult paremale (punkt nr 2). See tähendab disainerile kahte asja.

  • Esiteks on see ülemine rida peamine kinnisvara, mistõttu on see tavaliselt täidetud horisontaalse navigeerimisribaga. Peaaegu kohe pärast saidile jõudmist teavad kasutajad, millised lehed on saadaval ja kust neid leida.
  • Teiseks tähendab see, et paremas ülanurgas on suurepärane koht tegevusele kutsumiseks, kuna kasutaja vaatepilt peatub enne edasiliikumist hetkeks.

Jälgi silma

Seejärel langeb kasutaja silm allapoole keskele. Siit leiate suure graafika või mõnikord teatise. Teine strateegia on hoida seda piirkonda suhteliselt tühjana: siin asuv tühi koht viib kasutaja kiiremini edasi ja soodustab korduvat transsi.

Mõlemas strateegias on keskosa oluline osa see, et see ei häiri kasutaja tähelepanu ega kaldu Z-mustri rajalt kõrvale. See tähendab, et raskeid või visuaalselt keerulisi kohatäite ei soovitata.

Kasutaja vaatepilt läheb seejärel vasakusse alanurka (punkt # 3) ja skaneerib uuesti paremale (punkt # 4). Ekraani allservast leiate tavaliselt horisontaalselt orienteeritud sisu, mõnikord isegi riba menüü, mis peegeldab ülemist.

Samuti märkate, et paremal oleva rea ​​lõpus olevad punktid punktid 2 ja 4 on parimad tegevusele kutsumiseks, näiteks näites olevad nupud 'Registreeru tasuta'. Mõelge nendele punktidele nagu finišijoontele, kus silm peatub enne edasiliikumist.

Mustri kordamine

Pärast punkti 4 jätkab muster kordumist. Võite laiendada Z-mustrit nii kaua kui soovite, korrates või lisades uusi paralleelsetes punktides kutseid tegevusele.

Üldiselt on Z-muster lõdvem kui F-muster. See võimaldab hingamisruumi ja mitmekülgsust - nii selles, kui kaua see kasutaja tähelepanu suudab hoida, kui ka selles, kui laialdaselt saate keskel olevaid tühimikke teha. See muudab selle lugude jutustamiseks või müügikohtadeks soodsaks, kuid mitmekülgse sisu korraldamisel ebaefektiivseks.

Kuna rõhutatakse tegevusele kutsumist, pole Z-muster kodulehtede ja sihtlehtede jaoks haruldane, mõjutades kasutajat peenelt, kuhu nad peaksid edasi minema. See on populaarne paigutus erinevates tööstusharudes ja selle saate sageli ära tunda selle ülemisest ja alumisest navigeerimisribalt. Siin on mõned näidised...

01. AirBnB kaardi leht

Pildi viisakalt Air BnB Map

Pildi viisakalt Air BnB Map

Nagu on kirjeldatud artiklis Inimsilma veebidisain (2. raamat) , muster algab tavapärasest ettevõtte logost paremas ülanurgas. Kuna ülemist navigeerimisriba pole, laseb silm tõenäoliselt otse paremasse ülanurka, kutsudes tegevusele tagasi algsele saidile ja jagamisvalikutega, lisaks heli juhtimise suvand.

Seejärel skaneerib silm kaarti - lehe tegelikku sisu, kuid praegu ainult tausta - enne asumist vasakusse alanurka. Seejärel järgib kasutaja vaatepilt alumist navigeerimismenüüd paremasse alanurka, kus asub üks olulisemaid juhtnuppe: suum.

Kuigi asjakohane sisu on keskel, skannivad kasutajad enne suhtlemist tõenäoliselt tervet lehte. Paigutades kõik Z-kujuliselt, aitab AirBnB tagada, et kasutaja näeks lehe juhtnuppe ja nende asukohti esimestel hetkedel, võimaldades neil lehega kõige paremini suhelda. Z-mustri paigutus lihtsustab seda protsessi lihtsalt.

02. British Airways

Pildi viisakalt British Airways

Pildi viisakalt British Airways

Teine suurettevõte, kes Z-mustrit ära kasutab, on British Airwaysi sait oma uute lennukite tutvustamiseks. Ettearvatavalt seisab ettevõtte logo lähtepunktis ja nagu ka Airbnb, tähendab ka ülemise navigeerimismenüü puudumine, et silm läheb kiiresti paremasse nurka. Siin otsustas ettevõte reklaamida ainult oma kõige olulisemaid linke lehe Galerii ja Marsruudid jaoks.

Seejärel läheb silm läbi suure pildi - imeilus vaadata, kuid on esteetikavälise liidese jaoks lõppkokkuvõttes mõttetu. Kasutaja saab tervitust lugeda või ignoreerida, olenevalt ajakavast või kui ta teab, kuhu ta maandus.

Kuna punkt 3 on kõige vähem märkimisväärne, otsustas British Airways (ja paljud teised ettevõtted) seada oma juriidilise nõude siia. Kuid see on tegelikult strateegiline otsus - siinne horisontaalne tekstijoon julgustab kasutaja saiti liikuma sama tasapinda mööda paremale.

Nagu on selgitatud Veebiliidese disain inimsilmale (1. raamat) , näitab Gestalti joonte põhimõte, et kasutaja sait liigub mööda selgeid jooni ja saab sellega hoogu juurde. See juriidilise joone paigutus toetab tegelikult Z-mustrit ja suunab pilgu asjakohasemale sisule ... tipnes punktis 4 nupuga Jaga.

03. Irregulart

Pildi viisakalt Irregulart

Pildi viisakalt Irregulart

Irregulart kasutab ka Z-mustrit, kuid demonstreerib olulist variatsiooni, millele tahaksime tähelepanu juhtida.

Nagu eelmises näites mainisime, on punkt 3 lehel kõige vähem oluline asukoht. Sellepärast otsustavad mõned disainerid selle Z-mustrist täielikult välja jätta (nagu Irregularti meeskond tegi). Z-muster on endiselt efektiivne, kuid alumisest / keskmisest saab uus punkt 3. See muudab selle elulise esmapilgul vaid juuksekarva kiiremaks ja häälestab saidi lihtsamaks ja minimalistlikumaks.

Pidage meeles, et nagu enamik kujunduspõhimõtteid, on ka Z-muster vaid suunis. Teil pole vaja järgida kõiki punkte, kuid peate kindlasti silmas põhialuseid ja näpistama vastavalt vajadusele.

Järeldus

Z-mustriga on oluline kaasa võtta selle struktuur.

See võib täiustada lihtsustatud saite, kuid vähesed struktuuripunktid on selle tõhususe jaoks üliolulised, nii et ärge alahinnake neid. Struktuur on Z-mustri suurim tugevus, kuid see on ka selle nõrkus; häiriv element, mis ei ole paigas, viib kasutaja raja rööpast välja ja alistab paigutuse kogu eesmärgi.

Sõnad : Jerry Cao

Jerry Cao on sisustrateeg UXPin - juhtmeta raamistamise ja prototüüpimise rakendus - kus ta arendab juhtmekaadri ja prototüüpimise platvormi jaoks rakendusesisest ja veebisisu. Kui soovite teada saada, kuidas kasutada igat tüüpi ja usaldusväärseid makette, vaadake lehte Makettide juhend .

Nagu nii? Loe neid!