Läheisyysperiaate Web-suunnittelussa
Recently I picked up an Äskettäin otin vanha design-kirja että en ollut koskettanut hetken aikaa, ja se muistutti minua suunnitteluperiaatteesta, jonka monet meistä toteutuivat luultavasti vain alitajuisesti, jos ollenkaan.
Kirjassa käsitellään painotuotteiden suunnittelua, mutta ajattelin, että se olisi hyvä aihe keskustella web-suunnittelun yhteydessä.
Läheisyysperiaate edellyttää, että asiaan liittyvät kohteet ryhmitellään visuaalisesti, mikä vähentää häiriöitä ja järjestelyjen järjestämistä. Toisiinsa liittymättömiä kohteita on syytä erottaa toisistaan ja korostaa heidän suhteensa puutetta.
Tarkoitan yksityiskohtia ja joitain tapoja, joilla tämä voidaan toteuttaa tehokkaasti, mutta tämän määritelmän pitäisi riittää siihen, mitä keskustelemme tässä artikkelissa.
Lähestymisen oikea käyttö yhdessä muiden suunnitteluperiaatteiden kanssa vaikuttaa suuresti käyttäjäkokemukseen ja viime kädessä verkkosivujen yleiseen menestykseen.
Älä pelkää valkoista tilaa
Ensimmäinen askel läheisyysperiaatteen toteuttamiseksi on ymmärtää valkoisen tilan merkitys suunnittelussa.
Valkoisen tilan puute on yleinen ongelma amatööri-malleissa. Suunnittelu on keino tiedon välittämiseen ja kun harrastajat pyrkivät välittämään viestin suunnittelun kautta, heidän luonnollinen taipumus on levittää sisältöä tasaisesti tilan täyttämiseksi ilman suurta harkintaa hyvin organisoidun valkoisen tilan mahdollisuuksista.
Valkoinen tila voi vaikuttaa käyttäjän käyttäytymiseen niin paljon, kuin ei enempää kuin sivun varsinaista sisältöä. Valkoinen tila ohjaa käyttäjän silmät suunnitellussa suunnassa, luo kontrastia ja tekee pysyvän vaikutelman.
Vaikka W3Avenen yllä mainitulla sivustolla on huomattava määrä sisältöä (artikkeleita lukuisissa luokissa, kuten mikä tahansa suunnittelupäiväkirja) ja sarjan sivupalkin mainoksia, se ei hämmästytä käyttäjää visuaalisesti.
Runsas huone otsikossa ja sopivasti sijoitetut sisällöt sisältö- ja sivupalkkialueilla edistävät tätä puhdasta ja järjestettyä ulkoasua. W3Avenue ei tee mitään erityisen ainutlaatuista sen sisällön suhteen, mutta sen suunnittelu luultavasti vaikuttaa siihen vahva liikenne se saa a lyhyen ajan .
Joten älä ole epävarmoja tyhjän tilan suunnittelussa. Hyvän valkotilan käyttäminen on ensimmäinen askel läheisyysperiaatteen toteuttamisessa ja siten mallin visuaalisen houkuttelevuuden lisääminen.
Visuaalisesti ryhmään liittyvät elementit
Valkoinen tila on kuitenkin vain yksi osa läheisyyden toteuttamista. Suunnittelussa voi olla runsaasti valkoista tilaa, mutta jos kohteita ei ole ryhmitelty oikein , valkoisella tilalla ei ole juurikaan vaikutusta, kuten kaksi käyntikorttia kuvaavat alla:
Vasemmanpuoleinen kortti ei ole täynnä; sillä on hieman valkoista tilaa. Mutta elementit eivät ole loogisesti ryhmiteltyinä, joten vaikutus on heikko.
Lukija joutuu skannaamaan kortin useita kertoja. Oikealla kortilla on kuitenkin miellyttävämpi visuaalinen vaikutus. Lukija yksinkertaisesti joutuu katsomaan sitä ottamaan tiedot (lisätietoja tästä myöhemmin).
Oikealla olevassa kortin elementtien ryhmittely on myös loogisempaa . Ensimmäisessä elementtisarjassa näemme yrityksen nimen suuressa kirjasimessa alla olevan sijainnin mukaan. Toinen sarja kertoo kuinka saada tietoja tarjotuista palveluista (esim. Puhelinnumero ja verkkosivujen osoite).
Tämä esimerkki havainnollistaa läheisyyden merkitystä tulostussuunnittelussa, ja samanlaista ajatusta voidaan käyttää web-suunnittelun elementteihin, kuten jäljempänä olevassa kuvakaappauksessa esitetään.
Vaikka Arora Designsin verkkosivusto ei ole monimutkainen tai informaation kannalta raskas, sen käyttäminen valkoisten tilojen ja ryhmitettyjen elementtien visuaalisen erottamisen kannalta on tehokasta. Tässä on huomattava, että "valkoisella tilalla" ei tarvitse olla valkoinen; se voi olla mikä tahansa tyhjä tila elementtien välillä, väristä riippumatta.
Arora Designsin tapauksessa, vaikka valkoisella tilalla on väri, se palvelee samaa tarkoitusta visuaalisesti erottamalla otsikko, navigointi ja sisältöalueet.
Visuaalisen hierarkian luominen
Käyttämällä valkoista tilaa tehokkaasti ja ryhmittämällä siihen liittyvät elementit ovat kriittisiä, jotta sivustosi on selkeä visuaalinen hierarkia. Tietenkin sivuston arkkitehtuuri ja tietovirta ovat tehokkaan läheisyyden perusta .
Hierarkia välitetään tavalla, jolla elementit on ryhmitelty ja ryhmitelty.
Tämä hierarkia auttaa käyttäjää ymmärtämään missä he ovat olleet ja mihin he haluavat mennä, ja siten auttaa ilmoittamaan verkkosivuston tarkoituksen. Luettelo on hyvä esimerkki elementistä, jolla on mahdollisuus kommunikoida visuaalisen hierarkian, kuten alla olevasta kuvasta käy ilmi:
Tarkastelemalla yllä mainittuja kahta luetteloa tarkastelemalla sisältöä näet, että vasemmalla olevassa luettelossa on selkeä visuaalinen hierarkia, jossa näkyy esineiden väliset suhteet (syvennetyt kohteet ovat ensisijaisten kohteiden alaluokkia).
Tämä hierarkia ei olisi mahdollista ilman valkoista tilaa (mukaan lukien makro ja mikro valkoinen tila). Oikealla oleva luettelo on vain satunnaisjoukko elementeistä, joilla ei ole näkyvää suhdetta tai hierarkiaa.
Tämän periaatteen toteuttaminen verkkosivustolla, jolla on jotain yksinkertaista kuin HTML-luettelo, on helppoa. Haasteena on käyttää tätä periaatetta ohjaavana tekijänä verkkosivujen rakentamisessa suunnittelusta ja rajausvaiheesta suunnittelun kautta.
Ulkoasut, jotka on helppo skannata ja lukea
Hierarkiaan organisoitu ja loogisesti ryhmitelty sisältö on helpompi lukea ja skannata .
Esimerkiksi otsakkeiden pitäisi antaa käyttäjälle mahdollisuus skannata selkeästi maininta pääkohdista. Tarpeettomasti sanottuna sisältö on suunniteltava lähdöstä, jotta heijastaisivat asianmukaista visuaalista hierarkiaa. yllä oleva luettelo syvennetyistä kohteista on huono esimerkki, koska sisältö ei vastaa visuaalista hierarkiaa.
Sivusto, joka käyttää läheisyyttä arkkitehtuurissaan ja muotoilussaan, ei tuhoa käyttäjää informaatiolla.
Joten, vaikka on suhteellisen helppo toteuttaa läheisyysperiaatteet verkkosivuilla, jotka ovat kevyitä sisältöä, läheisyys on paljon tärkeämpää sisällöllisesti rikas sivustot.
Uutissivustot ovat hyviä esimerkkejä tästä periaatteesta. Alla on vertailu Los Angeles Times ja Globe ja Mail .
Kaiken kaikkiaan LA Times -verkkosivustolla on miellyttävä muotoilu pääasiassa värivalinnan ja typografian vuoksi. Mutta sillä on myös puhdas ja selkeä ulkoasu, etenkin otsikkokohdassa.
Logo on iso ja erottuu, mikä vaikuttaa tehokkaasti verkkosivuston tuotemerkkeihin. Logon lähin kohde on alla oleva horisontaalinen navigointipalkki. Koska navigointipalkki on tumma, se on kontrasti logon kanssa.
Logon yläpuolella oleva tekstilinkki on siististi järjestetty, ja kahden osan välillä on runsaasti tilaa. Myös otsikon sisällön vasen sijoittelu edistää puhdasta ulkoasua.
Jokainen informaatio LA Times -otsakkeessa on ryhmitelty aiheeseen liittyvillä kohteilla lukuunottamatta logoa, joka on yksin. Mikään otsakkeessa ei hämmentä sinua tai saa sinut miettimään, missä se kuuluu.
Entä Globe and Mail -sivusto, joka näkyy alla?
Globe and Mail -sivustolla on monimutkainen otsikkokohta, joka ei toteuta läheisyysperiaatetta.
Ainoa merkittävä määrä valkoista tilaa on keskellä logon vieressä, joka ei tee mitään. Yläosassa näkyy kaksi mainosta, jotka vaikuttavat häiriöön. Mainokset voivat olla välttämättömiä taloudellisista syistä, joten ongelmat ovat ymmärrettäviä.
Suurin ongelma on sotkuinen jakso suuren bannerimainoksen yläpuolelle. Tässä jaksossa olevien elementtien välillä ei ole selkeää eroa.
Kolme pisteviivaista pystysuoraa linjaa yrittää erottaa alue neljään osaan, mutta ensimmäisellä erottimella ei ole mitään järkeä. Itse asiassa kyseinen osio näyttäisi ehkä houkuttelevammalta, jos nämä pisteviivat erotettiin.
Gridit auttavat läheisyydessä
Yksi tapa ryhmitellä kohteita ja käyttää valkoista tilaa sopivasti on aloittaa verkko .
LA Timesin ja Globe and Mail -verkkosivujen kohdalta katsottuna vain LA Times näyttäisi perustan suunnittelunsa verkkoon tai käytti ainakin verkkopohjaisia periaatteita suunnitteluvaiheessa. Globe and Mailin verkkosivuilla on vain vähän näyttöä verkkomuodosta.
Ristikkopohjainen asennus, jossa sopivat putkikokot, mahdollistaa runsaasti tilaa osioiden välillä, ja monissa tapauksissa se pakottaa suunnittelija toteuttamaan läheisyysperiaatteita ilman edes ajatella sitä.
Alla on kaksi verkkosivustoa, jotka ovat ottaneet käyttöön 960 -verkkojärjestelmä . Ne ovat molemmat melko yksinkertaisia (ts. Ei sisältöä raskasta kuin edellä mainitut uutissivustot), mutta ne osoittavat, että verkot tarjoavat sivun elementtejä hengähdyspaikalle, jolloin jokaiselle osalle on oma visuaalinen koti.
Johtavat käyttäjät oikealla tiellä
Toinen tärkeä etuna on, että se auttaa käyttäjiä navigoimaan verkkosivustossa ilman tarpeettomia viivästyksiä tai esteitä. Kun ensisijainen navigointi on selvästi erotettu sivun muista elementeistä, se löytyy heti ja on vähemmän todennäköisesti unohdettu.
Oikea visuaalinen hierarkia läheisyyden kautta auttaa käyttäjiä pieleen syvemmälle sivustoosi huolimatta siitä, missä he ovat olleet tai missä he ovat menossa.
He aina tuntevat olonsa mukavalta, ja he tulevat sivustosi tärkeimpiin osiin nopeasti ja tehokkaasti.
Web-suunnittelijat, joilla on vain vähän tai ei lainkaan kokemusta tulostussuunnittelusta, voisivat hyötyä suuresti periaatteista, jotka tulostussuunnittelijat ovat panneet käytäntöön jo vuosien ajan ennen web-boomia.
Läheisyys ei ole ainoa suunnitteluperiaate, joka auttaa sivustoa hyödyllisempää ja visuaalisesti miellyttävämpää, mutta se on tärkeä tekijä monien syiden vuoksi.
Lue lisää
- Suunnittelun perusteet: Läheisyysperiaate
- Miten CRAP on sivustosi suunnittelu?
- Käyttämällä ryhmittelyä Web-sivuasetteluissa
Tämä viesti kirjoitettiin yksinomaan Webdesigner Depotille, freelance-kirjailija ja web-kehittäjä Louis Lazaris. Louis juoksee Vaikuttavat webs , jossa hän lähettää artikkeleita ja tutoriaaleja web-suunnittelussa. Voit seurata Louisia Twitterissä tai ota yhteyttä häneen hänen verkkosivuillaan .