Suunnittelupuhe selitti: Z-malli

Kuva: Karyn Christner, www.flickr.com/photos/toofarnorth/

Kuva: Karyn Christner, www.flickr.com/photos/toofarnorth/

Sisään Suunnittelupuhe selitti: F-malli , puhuimme miten silmänseurantatutkimukset osoittavat, että käyttäjät skannaavat näyttöjä samalla tavoin ja ennustettavasti.



Käyttöliittymäsuunnittelijalle nämä skannausmallit paljastavat elementtien optimaalisen asettelun tietyntyyppisille sivustoille. Oikein sovellettuna tämä kylmä, kova tiede luo käyttäjälle maagisen tuntemuksen tunteen. Käyttöliittymä näyttää intuitiiviselta ja henkilökohtaiselta, kaikki on oikealla paikalla.



Aikaisempi artikkelimme keskittyi yhteen näistä skannauskuvioista, F-kuvioon, ja tässä tutkitaan toista, yhtä tärkeää: Z-kuviota.

Seuraavassa selitämme, mikä tämä on, miten sitä käytetään, ja näytämme sitten todellisia esimerkkejä siitä, miten se onnistuu hyvin.



Saat lisätietoja Z-kuviosta, F-kuviosta ja monista muista visuaalisista verkkosuunnittelutekniikoista tutustumalla ilmaisiin e-kirjoihin Web-suunnittelu ihmissilmälle ja Verkkokäyttöliittymän parhaat käytännöt .

Z-kuvion purkaminen

Vaikka F-kuvio on ihanteellinen teksti- tai sisältöpainoisille sivustoille, Z-kuvio toimii paremmin löyhemmille, harvemmille sivustoille.

Minimalistiset sivustot tai sivustot, jotka keskittyvät enimmäkseen yhden tai kahden pääelementin ympärille, voivat toteuttaa Z-mallin ennakoida ja kannustaa käyttäjiä seuraamaan tätä luonnollista menetelmää.



Tällä tavalla suunnittelijat voivat varmistaa tai ainakin lisätä todennäköisyyttä, että tärkeimmät elementit näkyvät.

Kuva Wunderlistiltä

Kuva Wunderlistiltä

Kuten F-kuvion kohdalla, länsimaissa kulttuureissa, jotka lukevat vasemmalta oikealle ja ylöspäin, käyttäjä melkein aina alkaa vasemmassa yläkulmassa ja skannaa ylhäältä. Z-kuvion erottava piirre on Z-muoto, jota se seuraa seuraavaksi. Sen sijaan, että palaisit vasemmalle ja menisit sitten alas, käyttäjän näky kulkee samanaikaisesti vasemmalle ja alas ja skannaa sitten taas vaakasuoran viivan vasemmalta oikealle.

Mielenkiintoinen - ja hyödyllinen - asia tietää Z-mallista on, että se toistuu, joskus loputtomasti, jos sisältö on tarpeeksi kiinnostavaa.

Tämä luo loputtoman siksak-rakenteen, joka ulottuu alaspäin niin kauan kuin voit pitää käyttäjän huomion, mikä tekee tästä mallista täydellisen visuaalisten kertomusten luomiseen pitkällä vierityksellä, äärettömällä vierityksellä ja parallaksirullauksella.

kuinka piirtää leijona aloittelijoille

Kuva Wunderlistiltä

Kuva Wunderlistiltä

Toisin kuin F-malli, joka toimii hyvin sivustoissa, jotka edellyttävät visuaalisen ja tekstisisällön yhdistelmän järjestämistä, Z-malli toimii hyvin sivustoilla, joilla on selkeä ja suora asialista (esimerkiksi aloitussivu, jolla on yksi pääkutsut toiminta).

Z-malli luo selkeän rakenteen ja hierarkian, ja jos se tehdään oikein, se saa aikaan vauhtia, joka huipentuu lopulliseen toimintakehotukseen.

Haittapuoli on, että se voi hämmentää sivustoja, joissa on paljon sisältöä.

Z-kuvion käyttäminen

Z-kuvio koostuu yleensä kevyistä riveistä, joissa on suuria grafiikoita tai muuta huomiota herättävää sisältöä.

Kuva UXPiniltä MailChimpin kautta

Kuva UXPiniltä MailChimpin kautta

Z-kuvio alkaa aivan kuten F-kuvio, joten tärkein kohta on vasen yläkulma (kohta # 1). Tämä on yksi harvoista paikoista ruudulla, jota käyttäjä on melkein varma katsomaan, ja sellaisenaan sillä on yleensä yrityksen logo.

Jälleen F-mallin tavoin käyttäjä skannaa todennäköisesti vasemmalta oikealle sivun yläosassa (kohta # 2). Tämä tarkoittaa suunnittelijalle kahta asiaa.

  • Ensinnäkin tämä ylärivi on tärkein kiinteistö, minkä vuoksi se on yleensä täynnä vaakasuuntaista siirtymispalkkia. Lähes heti sivustoosi laskeutumisen jälkeen käyttäjät tietävät, mitkä sivut ovat käytettävissä ja mistä ne löytyvät.
  • Toiseksi se tarkoittaa, että oikea oikea yläkulma on loistava paikka toimintakehotukselle, koska käyttäjän näkö pysähtyy hetkeksi ennen kuin hän jatkaa eteenpäin.

Seuraa silmää

Käyttäjän silmä putoaa sitten alaspäin keskelle. Täältä löydät suuren kuvan tai joskus ilmoituksen. Toinen strategia on pitää tämä alue suhteellisen tyhjänä: tyhjä tila täällä siirtää käyttäjän eteenpäin nopeammin ja kannustaa toistuvaan transsiin.

Kummassakin strategiassa tärkeä osa keskiosaa on, että se ei häiritse käyttäjää eikä poikkea Z-mallin polusta. Tämä tarkoittaa, että raskaita tai visuaalisesti monimutkaisia ​​paikkamerkkejä ei suositella.

Käyttäjän näky menee sitten vasempaan alakulmaan (kohta # 3) ja skannaa taas oikealle (kohta # 4). Ruudun alareunasta löydät tyypillisesti vaakasuuntaisen sisällön, joskus jopa palkin valikon, joka peilaa yläosassa olevaa.

Huomaa myös, että oikeanpuoleisen rivin lopussa olevat pisteet, pisteet 2 ja 4, ovat parhaita toimintakehotuksia varten, kuten esimerkin 'Rekisteröidy ilmaiseksi' -painikkeet. Ajattele näitä kohtia, kuten maaliviivoja, joissa silmä pysähtyy ennen kuin jatkat eteenpäin.

Toistetaan mallia

Pisteen # 4 jälkeen kuvio jatkuu. Voit pidentää Z-mallia niin kauan kuin haluat, toistamalla tai ottamalla käyttöön uusia toimintakehotuksia jokaisessa oikeanpuoleisessa pisteessä.

Yleensä Z-kuvio on rennompi kuin F-kuvio. Se antaa hengitystilaa ja monipuolisuutta - sekä kuinka kauan se voi pitää käyttäjän huomion että kuinka leveänä voit tehdä aukot keskelle. Tämä tekee siitä tarinankerrontaa tai myyntipaikkoja, mutta tehotonta monipuolisen sisällön järjestämisessä.

Koska toimintakehotukset korostuvat, Z-malli ei ole harvinaista kotisivuilla ja aloitussivuilla, mikä vaikuttaa käyttäjään hienovaraisesti siihen, mihin heidän pitäisi mennä seuraavaksi. Se on suosittu ulkoasu eri toimialoilla, ja voit usein tunnistaa sen ylä- ja alareunan navigointipalkkeistaan. Tässä on joitain esimerkkejä ...

01. AirBnB: n karttasivu

Kuva: Air BnB Map

Kuva: Air BnB Map

Kuten on kuvattu Web-suunnittelu ihmissilmälle (kirja 2) , kuvio alkaa perinteisestä yrityksen logosta oikeassa yläkulmassa. Koska yläosassa olevaa navigointipalkkia ei ole, silmä todennäköisesti ampuu suoraan oikeaan yläkulmaan, toimintakehotukset takaisin alkuperäiselle sivustolle ja jakamisvaihtoehdot sekä äänen hallinnan vaihtoehto.

Silmä skannaa sitten kartan - sivun todellisen sisällön, mutta toistaiseksi vain taustan - ennen asettumistaan ​​vasempaan alakulmaan. Käyttäjän näky seuraa sitten alakulman alavalikkoa oikeaan alakulmaan, jossa sijaitsee yksi tärkeimmistä säätimistä: zoomaus.

Kun asiaankuuluva sisältö on keskellä, käyttäjät todennäköisesti skannaa koko sivun ennen vuorovaikutusta. Asettamalla kaiken Z-malliksi AirBnB auttaa varmistamaan, että käyttäjä näkee sivun säätimet ja niiden sijainnit ensimmäisinä hetkinä, jolloin he voivat parhaiten olla vuorovaikutuksessa sivun kanssa. Z-kuvion asettelu yksinkertaistaa yksinkertaisesti tätä prosessia.

02. British Airways

Kuva: British Airways

Kuva: British Airways

Toinen suuri yritys, joka hyödyntää Z-mallia, on British Airwaysin sivusto uusien koneiden esittelyyn. Ennakoitavasti yrityksen logo on lähtökohdassa, ja kuten Airbnb, ylemmän navigointivalikon puuttuminen tarkoittaa, että silmä menee nopeasti oikeaan kulmaan. Täällä yritys päätti mainostaa vain tärkeimpiä linkkejä Galleria- ja Reitit-sivuille.

Silmä kulkee sitten suuren kuvan läpi - upea katsella, mutta lopulta merkityksetön estetiikan ulkopuolella olevalle käyttöliittymälle. Käyttäjä voi lukea tervehdyksen tai jättää sen huomiotta, riippuen aikataulustaan ​​tai jos hän tietää missä laskeutui.

Koska kohta 3 on vähiten merkittävä, British Airways (ja monet muut yritykset) päätti asettaa lakisääteisen vaatimuksensa tähän. Mutta tämä on itse asiassa strateginen päätös - vaakasuora tekstiviiva kannustaa käyttäjän sivustoa liikkumaan oikealle samaa tasoa pitkin.

rogue one star wars -elokuvajuliste

Kuten selitettiin Ihmissilmän web-käyttöliittymäsuunnittelu (kirja 1) , Gestalt-linjaperiaate osoittaa, että käyttäjän sivusto kulkee selkeitä viivoja pitkin ja saa vauhtia samalla tavalla. Tämä laillisen viivan sijoittelu todella tukee Z-mallia ja ohjaa silmän asiaankuuluvaan sisältöön ... joka huipentuu Jaa-painikkeeseen kohdassa 4.

03. Irregulart

Kuva Irregulartilta

Kuva Irregulartilta

Irregulart käyttää myös Z-mallia, mutta osoittaa tärkeän muunnelman, jonka haluaisimme huomauttaa.

Kuten edellisessä esimerkissä mainitsimme, kohta 3 on vähiten tärkeä sijainti sivulla. Siksi jotkut suunnittelijat päättävät jättää sen kokonaan pois Z-mallista (kuten Irregulartin tiimi teki). Z-kuvio on edelleen tehokas, mutta alemmasta / keskimmäisestä tulee uusi piste 3. Tämä tekee elintärkeästä ensisilmäyksestä vain hiukset nopeamman ja virittää sivuston yksinkertaisemmaksi ja minimalistisemmaksi.

Muista, että kuten useimmat suunnitteluperiaatteet, Z-malli on vain ohjeellinen. Sinun ei tarvitse noudattaa kaikkia kohtia, mutta pidä ehdottomasti mielessäsi perusteet ja säädä tarvittaessa.

Johtopäätös

Tärkeä nouto Z-kuvion kanssa on sen rakenne.

Se voi parantaa yksinkertaistettuja sivustoja, mutta harvat rakenteelliset kohdat ovat elintärkeitä sen tehokkuudelle, joten älä aliarvioi niitä. Rakenne on Z-mallin suurin vahvuus, mutta se on myös sen heikkous; häiritsevä elementti, joka ei ole paikallaan, raitaa käyttäjän polun raiteilta ja voittaa asettelun koko tarkoituksen.

Sanat : Jerry Cao

Jerry Cao on sisällön strategi UXPin - lankakehys- ja prototyyppisovellus - jossa hän kehittää sovelluksen sisäistä ja online-sisältöä langankehitys- ja prototyyppialustalle. Jos haluat oppia käyttämään kaikenlaisia ​​ja uskollisia maketteja, tutustu Mockups-opas .

Kuten tämä? Lue nämä!