Kuinka silmien skannaus vaikuttaa näköhierarkiaan UX-suunnittelussa
Vuosituhannen taiteen, kreikkalaisista maljakoista italialaisiin kappeleihin, on muokattu ymmärrystä siitä, mikä kauneus on, silmätarkkuuden takana oleva verrattain viimeaikainen tekniikka tuo uutta dynaamista dynamiikkaa siihen, miten visuaalisesti tunnemme maailmasta. Lisää järkeä, tämä jännittävä uusi tiede auttaa meitä paremmin ymmärtämään - ja paremmin muotoilemaan - tehokkaita ja esteettisiä verkkosivustoja.
Verkkosuunnittelu (kuten kuvataide) noudattaa monia samoja sääntöjä kuin perinteisemmät taidemuodot. Tässä artikkelissa esitellään lyhyesti visuaalisen organisaation merkitys ja kerrotaan, miten silmäseurannan tulokset voivat parantaa web-rajapintojen ulkoasua.
Visuaalisen organisaation luominen
Ei ole mikään yllätys, miten verkkosivusto näyttää vaikuttaa sen menestykseen, mutta on tärkeää selvittää syyt miksi. Paperissaan Viestintä visuaalisen hierarkian kanssa , Kirjailija Luke Wroblewski, Yahoo!: N tuotesuunnittelun päällikkö, kertoo, että web-käyttöliittymän visuaalinen esitys on välttämätön:
opastus
Hyvin tehty käyttöliittymä voi ohjata käyttäjiä yhdestä toiminnosta seuraavaan ilman, että hän tuntee itsensä epäröivältä. Riippumatta siitä, mitä ajattelet heidän liiketoimintatavoitteistaan, ei ole epäilystäkään siitä uber on esimerkki uskomattoman sileästä mutta rakenteellisesta verkkosivustosta. Arvolupaukset ovat rullan yläosassa, jota seuraa hauska liukusäädin, josta voi oppia erilaisista autonvaihtoehdoista, ja lopettaa looginen seuraava vaihe ratsastusten löytämisestä kaupungissa.
viestintä
Muulla tavoin kuin toisin kuin tiedot, a UI voi muodostaa linkkejä käyttäjän mieleen, viestien viestien sanomatta mitään. Katso suosittu design-verkkosivusto Abduzeedo : laajat luokitukset ovat yläreunassa, varustellun sisällön keskellä ja alaotsikoiden yksityiskohtaiset luokat.
Henkisen vaikutuksen luominen
Älä tee virheen ajattelemalla sivustosi on yksinkertaisesti koneellinen työkalu. Verkkosivustolla on mahdollisuuksia tehdä emotionaalisia yhteyksiä, ja jos sinä ei, kilpailijasi haluavat. Itse asiassa ihmiset saattavat olla todennäköisemmin alttiita antamaan anteeksi käyttöliittymän puutteet, jos tuotet positiivista tunteellinen vastaus . MailChimp on täydellinen esimerkki sivustosta, jolla on käyttöliittymä, helppokäyttöinen ja todella helppokäyttöinen käyttöliittymä.
Ennustettavissa oleva ihmissilmä
Joskus näyttää siltä, että silmäsi ovat omiaan. Vuosien kehitys on antanut meille vaistot havaita esineitä ja liikkeitä, joita pidämme tärkeitä, onko joku seksikäs kävellä kadun yli, tai pehmoinen sarjakuva karhu mainonta hunajaa. Vaikka suhteellinen paino, joka on tärkeä, voi vaihdella henkilöstä toiseen, yksi vakio on mekanismeja, joihin he käyttäytyvät. Suuressa osassa suurin osa ihmisistä seuraa samoja trendejä verkkosivujen katselun yhteydessä.
Näistä suuntauksista on kaksi, joista keskustelemme yksityiskohtaisesti. An artikkeli visuaalisista periaatteista , Alex Bigman, Design Writer for 99Designs, kertoo, että näiden kahden mallin kääntäjät, jotka ovat lukeneet vasemmalta oikealle, ovat yleisimpiä ja hyödyllisimpiä verkkosivuston ulkoasun suunnittelussa.
Ensimmäistä, F-mallia käytetään pääasiassa tekstiä varten (mutta sitä voidaan muokata muuhun tarkoitukseen). Toista Z-mallia voidaan käyttää mihin tahansa visuaaliseen asetteluun. Selitämme eri edut ja haitat jokaiselle alla.
F-malli
F-kuvio on näkyvyys, joka näkyy sivuilla, jotka ovat raskaasti kuormitettuja tekstiä, tyypillisesti blogeja, uutislähteitä, artikkeleita jne.
Useat lukijat käsittelevät tekstin vasemmalla puolella olevaa pystysuoraa viivaa, kun etsitään avainsanoja tai kiinnostavampia kohtia kappaleen alkuperäisissä lauseissa. Lopulta lukija löytää jotain, jota he pitävät ja alkaa lukea normaalisti muodostaen vaakasuoria viivoja. Lopputulos on jotain, joka näyttää kirjaimilta F tai E.
Nielson Norman -ryhmän Jakob Nielson teki luettavuustutkimuksen, joka perustuu 232 käyttäjään, jotka skannataan tuhansia verkkosivustoja. Hänen tutkimuksestaan hän kirjasi, mitä hän uskoo käytännön vaikutukset F-mallista:
- Käyttäjät lukevat harvoin tekstinne jokainen sana.
- Kaksi ensimmäistä kappaletta ovat tärkeimmät, ja niiden tulisi sisältää koukku.
- Aloita kappaleet, alaotsakkeet ja luettelomerkit houkuttelevilla avainsanoilla.
Kuten aina, vasemmassa yläkulmassa on tärkein asia, sillä kaikki vasemmanpuoleiset lukuviljelmät alkavat. Käyttäjä lukee yleensä vaakatasossa otsikon yli, joten tässä on hyvä paikka navigointipalkille ja / tai toimintamuodolle. Sitten käyttäjä skannaa pystysuunnassa vasemmalle sivulle, kunnes he kohtaavat sisältöä, joka kiinnostaa heitä. Lopuksi käyttäjä päätyy sivun oikeaan puolelle, hyvä paikka, jossa on toiminto tai mainos. Älä anna sivupalkin ohittaa sisältöä.
Mutta F-malli ei ole malli - tosiasiassa se ei ole tarkka käytäntö vaan enemmän löysä opas, joka on koottu useimpien käyttäjien trendeistä. Pidä tämä mielessä, koska F-malli menettää tehokkuutensa F: n ylimmäisten rivien jälkeen.
Kickstarter käyttää korttisuunnittelua ominaisuusprojektien näyttämiseen eikä visuaalisesti tylsää ensimmäisen 500 pikselin jälkeen.
Toisaalta, iZettle ottaa perinteisen lähestymistavan F-kuvioon kotisivuillaan. He kuitenkin pystyvät välttämään mallinnettua ulkoasua peittelemällä ensisijaista kopiota ("Kasvata yrityksesi iZettle") ja kutsumalla toimintaan suurella taustakuvalla. Olimme sitä mieltä, että tämä vähäinen vähimmäismäärä tämän lukemamallin mukauttamiseksi käyttöliittymäsuunnitteluun.
Z-Pattern
Lisäksi Z-malli on yksinkertaisin ja yleismaailmallinen malli, jota käytetään yleisesti millä tahansa verkkosivulla, joka perustuu tekstiin. Lukija skannaa ensin vaakatasossa ylhäältä, juoksee alas ja takaisin vasemmalle puolelle, ja sitten skannaa vaakasuoraan pohjan alapuolella.
On tärkeää ymmärtää monipuolinen Z-malli , sillä siinä käsitellään ydinliiketoiminnan vaatimuksia, kuten hierarkiaa, brändäystä ja toimintapyyntöjä. Sen kauneus on sen yksinkertaisuus ja ihanteellinen asettelu kohteille, jotka keskittyvät puhelun toimintaan. Monimutkaisemman tai liiallisen sisällön osalta Z-malli voi kuitenkin olla liian yksinkertainen.
Ajattele, että Z-malli on oikein sivullesi? Tässä on muutamia parhaita käytäntöjä, jotka optimoivat edut:
- Tausta - Pidä tausta missä se kuuluu: taustalla. Et halua häiritä lukijaasi.
- Kohta # 1 - Lähtökohtana tämä on yleensä paikka, jossa haluat sijoittaa logon.
- Kohta # 2 - Vaikka tärkein toimintamalli tulisi tulla myöhemmin, tässä on hyvä paikka toissijaiselle toimintamuodolle, joka korvaa vaakasuoran navigointipalkin. (Mukava graafinen tai kuva-liukusäädin auttaa erottamaan sivun yläosan ja alaosan kannustaen lukijaa pysymään Z-mallin ennustettavissa olevassa polussa.)
- Kohta # 3 - Tämä on mukava paikka kiinnittää huomiota muihin linkkeihin tai vaihtoehtoisesti johtaa käyttäjän näkökyky lopputulokseen: Kohta # 4.
- Kohta # 4 - "Maalirajaksi" tämä on täydellinen paikka pääkäyttäjälle.
Ensimmäinen asia mitä haluat tehdä on priorisoida elementtejä sivullasi itsellesi, jotta tiedät kaikkein vähiten tärkeät. Sieltä on vain yksinkertaista asiaa jakaa ne asianmukaisiin "kuumiin paikkoihin".
Lisäksi Z-kuvio voidaan toistaa ja laajentaa koko sivun koko. Katsokaa vain miten Evernote siksakseja alaspäin soittopyyntöjen ja myyntipisteiden kautta.
Dropbox vie visuaalisesti yksinkertaisempi lähestymistapa tähän siksak-kuvioon poistamalla taustakuvat. Sen sijaan lisää layout-toimintoa on lisätty, koska "Learn More" -toiminto-toiminto auttaa liittämään käämityskuvion jokaisen osan silmän tielle alaspäin. Tämä auttaa myös lukeneita lukijoille napsauttamalla seuraavaan asiaan liittyvää sivua tarvitsematta lukea ensin kaikki kopiot.
Nähdä ennakoinnissa
Suuri käyttöliittymäsuunnittelu olisi kuin näkymättömä käsi, joka ohjaa lukijoita pitkin ajatuksen nopeutta. F-Pattern- ja Z-Pattern-trendien tärkeä takeaaja on, että voit sijoittaa tärkeimmän sisällön, jossa lukija "kompastuu" luonnollisesti, eikä yrittää pakottaa heitä katsomaan niitä.
Subtlety on suuri etu mille tahansa sivun asettelulle, ja nämä mallit voivat tehdä eron ehdottaa jotain lukijalle tai työntää sitä alas kurkkuunsa.
Esittävä kuva, käyttö ihmisen silmän kuva kautta Shutterstock.