Design = Emotions + Usability
Vaikka kuvataide on subjektiivinen ala, graafinen muotoilu on sen kaavamaisempi. Tehokkaan suunnittelun pitäisi saada ihmiset tuntemaan tietynlaista tapaa ja ryhtyä tiettyihin toimiin . Tässä artikkelissa haluaisin jakaa Gravity Switchin web design periaatteet ja ajattelumme takana.
Nämä säännöt ovat: määritellä tavoitteet ensin; keskittyä käyttäjien toiseksi; suunnitelma tunneille; noudattaa visuaalisen suunnittelun sääntöjä; rakentaa selkeä visuaalinen hierarkia; ole johdonmukainen; rikkoa sääntöjä (tarvittaessa); älä liioittele kouruja; ja lopuksi testata, mitata ja parantaa.
1. Määritä tavoitteet ensin
Luulen, että ajattelit sanoa "keskittyä ensin käyttäjiin", niin suurin osaihmisetsanoa. Unohda, aloitetaan tavoitteesi. Aloita jokaisen sivuston suunnitteluprojekti aivoriihiistunnolla, jossa kuvataan selkeitä ja realistisia verkkosivujen tavoitteita, jotka vahvistavat yrityksesi tavoitteet.
Tarkemmin havainnollistamaan tätä katsotaan Amazonille. Tavoitteena on maksimoida tuotemyynti. "Upselling" ja "cross-selling" kautta ne voivat maksimoida kunkin käyttäjän ostovoiman, mutta menestyksekkäästi he hidastavat ostoprosessia. Toisin kuin monet heidän kilpailijoistaan, Amazon ei ole "buy now" -painiketta hakutuloksissaan. Käyttäjien on käynnettävä vielä yksi sivu (mahdollisilla upsellsillä) ennen ostoksen tekemistä. Tämä on täydellinen esimerkki siitä, miten sivuston suunnittelu voi täyttää selkeät liiketoimintatavoitteet.
Useimmat nykyaikaiset verkkokauppasivustot ovat poistaneet hakutuloksensa "osta nyt" -painikkeen, vaikka jotkut tiili- ja laastinostimet ovat vielä siinä.
2. Keskity käyttäjätunnille toiseen
Sinun selkeiden tavoitteiden vuoksi on tärkeää määritellä ja priorisoida käyttäjät . Ole mahdollisimman tarkka. Joitakin esimerkkejä kysymyksiin ovat:
- Mies vs. naaras hajoaminen?
- Koulutustaso?
- Paikat maassa?
- Aiheeseen liittyvät harrastukset?
- Tuottojakauma?
- Kuka vie lasten tuotteita? Lapset? Vanhemmat? Isovanhemmat?
Tärkeintä on, että suunnittelijoiden tulisi olla tietoisia käyttäjistä, jotta he voivat varmistaa, etteivät heidän mallinsa estä keskeisiä käyttöreittejä.
3. Design tunteille
Varmista, että ymmärrät, mitä tunteita tuotemerkillesi tulisi välittää. Aivoriihi. Kysy kysymyksiä. Hanki sopimus. Ja ehkä tärkeintä, keskity näihin tunteisiin, kun esität asiakkaille. Älä koskaan kysy, onko asiakas "tykkää" suunnittelusta. Kun toimitat malleja, sinun pitäisi sen sijaan esittää kysymyksiä, kuten "Mikä näistä tekee sinusta tuntuu ammattimaiselta?" Tai "Kun vertaat näitä kahta mallia, näet, että tämä on nykyaikaisempaa, kun taas tämä on dynaamisempi. Nämä olivat molemmat tunteita, jotka olivat tärkeitä sinulle, nyt kun näet niitä visuaalisesti, mitkä mielestänne on tärkein tunne, jonka voit esitellä kohdeyleisillesi? "
Kumpi näistä organisaatioista on hauskaa? Rentouttava? Innovatiivinen? Kiireinen? Todellinen? (Mallit @ JessicaShiner ja Christine Mark)
4. Noudata visuaalisen suunnittelun sääntöjä
Sivustokäyttäjät käyttävät tietoisesti ja alitajuisesti monia pieniä elementtejä, jotka päättävät, haluavatko he luottaa verkkosivustoon. Tärkeimpiä ovat:
- Rajaus: valokuvien valinnassa on vain puolet taistelusta, rajaus valokuvista tekee sivun asettelun tai katkaisee sen.
- Negatiivinen tila: marginaalien, pehmusteiden ja viivan korkeuden tarkkaavaisuus on ero New York Timesin ja lukion uutiskirjeen välissä.
- Fontit: jokainen rakastaa fonttien valitsemista, mutta loistava suunnittelija voi etsiä ammattimaisen fontin nopeasti ja pitää rajoittaa pitämään sivuston fonttien lukumäärän 1-2: een (ei lasketa logoa, joka on usein oma fontti).
- Värit: värit ovat yksi vaikeimmista asioista, joita suunnittelijat voivat käyttää tehokkaasti. On olemassa niin monia sääntöjä, jotka pohtivat hyvää väripalettia, ja vaikka se on houkuttelevaa käyttää verkossa väripaletin generaattorit , vietät aikaa suunnitella oma värivalikoimaasi.
- Asettelu: luo hyvä visuaalinen sivu "virtaus" niin, että käyttäjän silmät menevät sinne, missä he haluavat mennä sivulle ilman muita elementtejä, jotka heijastavat visuaalisesti tavoitteitasi.
5. Rakenna selkeä visuaalinen hierarkia
Verkkosivuston kävijät kuorivat. He eivät lue. Tartu heidän huomionsa ja saata ne tärkeimpiin tietoihin selkeästi määritellyllä, harkitulla visuaalisella hierarkialla . Hyväksytty suunnittelu - sivusto> sivu> -osio - johtaa käyttäjää sivun kautta haluamallasi tavalla. Käyttäjien pitäisi pystyä näkemään sivusi ja ymmärtämään sen sekunnissa.
Katso seuraavaa esimerkkiä artikkelista ja huomaa kuinka silmäsi on vaikea kertoa, mistä sivusta on kyse tai mistä artikkeli alkaa!
Alla on mockup, jonka tein muuttamalla kymmenkertaisia CSS-rivejä luomalla selkeämpi visuaalinen hierarkia tällä sivulla seuraavilla tavoilla:
- Artikkelin otsikon pitäisi olla sivun näkyvin elementti. Se on tällä hetkellä pienempi fontin koko kuin otsikko alaspäin sivulle! Niinpä kasvatin artikkelin otsikon kokoa ja pieneni otsikoiden kokoa.
- Sivulta alaspäin irrotettu otsikko irtoaa myös sisällöstä visuaalisesti, joten kiristin myös otsikon alapuolella olevan välin, mutta jätin tilaa otsikon yläpuolelle, jotta käyttäjät saisivat tietää, että se on sen alla olevan kappaleen otsikko. .
- Siirin myös pienen kuvan otsikon oikealla puolella vasemmalle sijasta niin, että kun käyttäjä skannaa sivun vasemman sivun suuntaamaan itseään, artikkelin otsikko on heidän näkemyksessään.
- Poistin raja- ja taustoluokat sinisellä punaisella, joten se ei enää kilpaile otsikon kanssa ja poisti ylimmän marginaalin. Jo olemassa oleva luokka oli harmaata, mikä toimii hyvin tässä tapauksessa.
- Olen myös poistanut häiritsevän tekstin ja kuvan, joka korostaa, että tämä on uusintapainos sekä muutamia tyhjiä kohtia ja
tunnisteita.
Jätin tarkoituksellisesti kaikki mainokset, koska ne alunperin koodattiin, olettaen, että tämä on kriittinen osa tätä sivua.
6. Olkaa johdonmukaisia
Älä sekoita käyttäjiäsi. Linkkien tulee olla johdonmukaisia ja erillisiä. Jos päätät käyttää kuvakkeita, valokuvia ja kuvituksia kaikkialla, varmista, että ne näyttävät ja tuntuvat kuuluviksi yhtenäiseksi joukoksi. Epäonnistumiset häiritsevät käyttäjän ja hämärtävät viestisi. Älä käytä yli 3 fonttia - on parasta, jos ne ovat kaikki samassa perheessä. Rajoita itsesi 5-6 väriä (Huomaa: logo voi olla eri fontti ja usein pitäisi olla).
7. Riko sääntöjä (tarvittaessa)
Jos on jotain erityisen ainutlaatuista tai tärkeää, että sinun on korostettava, saatat joutua "rikkomaan sääntöjä". Voit käyttää elementtiä erottelemalla yksi tai kaksi kontrastia värejä. Esimerkiksi Yhdistyneen kuningaskunnan verkkosivut korostavat veroprosenttia tekemällä tästä suuremman elementin pop-värillä.
Kun ihmiset käyvät tietosivulla Alv-vero, GOV.UK: n suunnittelijat varmistavat, että useimmat ihmiset tarvitsevat tiedot ovat etupuolella ja keskellä.
8. Älä ylikäytä kipuja
Tee suunnittelu hauska, mutta varmista, että nämä elementit tukevat sitä, mitä yrität saavuttaa sivustossa. Esimerkiksi Inze sivusto on kaunista katsella ja upea mobiililaitteella, mutta kun kävin sen työpöytätietokoneessani, minua menetettiin. On selvää, että navigointi on piilotettu, kunnes aloitat vierityksen, joka valitettavasti otti silmäni sivun alareunaan. Tämän seurauksena en edes huomannut, että hienoinen navigaatio esiintyy yläosassa. Olen rullannut suurimman osan matkaa pohjaan ennen kuin edes ymmärsin, että yläreunassa oli (lopulta) navigointi. Piilotettu navigointi on siisti vaikutus, mutta "muotoilu" estää minua tekemästä toivottua toimintaa. Lopulta se aiheuttaa hämmentävää, likaista tuotekuvaa.
Vertaa Inze, mitä tässä artikkelissa tapahtuu oikein Web Designer Depot kun siirrät pöytätietokoneesi linkin. Meillä on siisti vaikutus, mutta se ei luo käyttäjille "estettä" pokerin vuoksi. Se myös heikkenee gracefully, joten se ei murtaudu mobiili tai vanhemmat selaimet.
9. Testaa. Mitata. Parantaa
Verkkosivustot kehittyvät. Suunnittelu joustavuudesta ja sopeutumiskyvystä. Nykyisten testitietojen keruu ja analysointi edistävät jatkuvaa parantamista. Muista, että kyse on suunnitelman luomisesta, joka täyttää tavoitteet.
Tarkistamalla huolellisesti sarjan pieniä muutoksia alkuperäiseen aloitussivulle (vasemmalla) tulimme uudella mallilla (oikealla), mikä lisäsi rekisteröintien prosenttiosuutta 60 prosentilla!
Muistaa
Tehokas graafinen muotoilu on emotionaalisesti kytkettävä käyttäjä brändiin samalla kun saa heidät tekemään mitä haluat. Se voidaan tehdä.
Oletteko samaa mieltä näiden sääntöjen kanssa suunnittelusta? Lisisitkö lisää? Kerro meille mielipiteesi kommentteihin.