Kuinka käyttää typografiaa ja suunnittelua käyttäjäkokemuksen parantamiseen

Mikä tekee verkkosivustosta tai sähköpostista houkuttelevan ja helpon silmille? Ennen kuin alat lukea oppaita aloitussivun luomiseen tai täydellisen sähköpostin luomiseen, sinun pitäisi ehkä ajatella yksinkertaisella ja minimaalisella tavalla muutosta.

Joten mikä tekee sellaisesta, ihanan? Onko se visuaalisuus, värit, kopio… Vai jotain muuta?

No, kaikki nämä ovat hienoja ja hyvin, varsinkin kopio (silmänisku! ), mutta jokin asia saa käyttäjän kiinnittämään todella huomiota: typografia.

Typografia on painotuotteiden tyyli ja ulkonäkö hyvän vanhan ystäväni Googlen mukaan. On sanomattakin selvää, että tämä on taiteen laji yksinään.

Ja typografia on perusta, jolle kaikki ja kaikenlaiset kirjoitettuun sanaan liittyvät mallit luodaan. Tämä tarkoittaa, että löydät sen kaikkialta: kirjoista, pakkauksista, jopa – ja mikä tärkeintä, meille verkkosivustoilta, sähköposteista ja aloitussivuilta.

Olipa taiteellista tai ei, typografia on jotain, jonka on tarjottava käyttäjille hyvä kokemus, aivan kuten kaikki työkalut. Ja kursiivikirjaimet voivat olla niin kauniita, mutta ovatko ne käyttökelpoisia?

Katsotaan, kuinka voimme parantaa käyttökokemusta ja itse käyttöliittymää käyttämällä oikeaa typografiaa.

Aluksi siellä on Fontti

Kuvittele, kuinka blaa ja välinpitämättömältä verkkosivustosi näyttäisi ja kuinka paljon se veisi käyttäjäkokemuksesta, jos fonttisi ei vastaisi yrityksen pyhää kolminaisuutta: kohdeyleisöäsi, brändisi sävyä ja tavoitteitasi.

Oikean fontin valitseminen on vähän kuin huoneeseen sopivien verhojen valitseminen. Tahmeat verhot osoittavat huonoa makua, ja fontti, joka ei vain täsmää, voi saada projektisi näyttämään parhaimmillaan tahmealta ja pahimmillaan roskapostilta.

Fontti on yhtä tärkeä kuin visuaaliset materiaalit itse, luomaan vaikutelman ja paikantamaan ne asiat, jotka sinun on määritettävä sekä verkkosivustossa että sähköpostissa, mikä optimoi käyttökokemuksesi.

Tarvitset lihavointia lihavoituihin lauseisiin, kursiivisia kirjaimia ja intensiivistä kalligrafiaa asioihin, jotka ovat tyylikkäitä ja eivät liian tärkeitä. Alla olevan kaltaiset yhdistelmät ovat pakollisia:

merkkien kirjasinparit

Minun on kuitenkin pakko varoittaa sinua jostakin: Liian monet kirjasimet saavat sinut menemään pelin. Sinulla voi olla korkeintaan kahdenlaisia ​​kirjasimia, ja sinun on varmistettava, että niitä käytetään yllä olevan esimerkin mukaisesti: Lihavoitumpi ja tiukempi otsikossa, tarkempi kopion rungossa.

Ja muista seuraavat asiat: Jos puhumme verkkosivustostasi emmekä aloitussivusta tai sähköpostista, sinun pitäisi ehkä harkita standardoidun kirjasimen käyttöä.

Katsos, kursiivi voi joskus olla vaikea lukea ja liian taiteellinen tulos voi olla kaunis, mutta sitä ei ole helppo lukea ja ymmärtää. Nykypäivän kiireisille asiakkaille, jotka ovat taitavia skannaamaan tekstilohkoja ja löytämään tarkalleen sen, mitä heidän tarvitsee tietää, ajan säästämiseksi jokin standardoimaton voi näyttää aivan liian suurelta vaivalla.

Yleisösi tuntee paremmin esimerkiksi Times New Romanin. He voivat jopa kertoa sinulle, missä sitä tulisi käyttää, ja ne ovat helppoja selata läpi.

Lisäksi se voi aiheuttaa todellisen sisältöongelman siinä mielessä, että taiteellisempi fontti ja muoto voisi viedä huomion pois sisällön sitoutumisesta.

Fontin erikoiselementit:

Fontti koostuu useista elementeistä, jotka voivat aiheuttaa tai häiritä sen käyttöä. Sinulla on erilaisia ​​tyylejä, painoja, töitä! Joten mennään katsomaan mistä tässä on kyse:

Sinulla on ensinnäkin kirjasinperheesi . Kirjasinperhe (tai kirjasintyyppi) on melko suuri luokka, joka sisältää saman tyylisiä fontteja.

Toiseksi sinulla on fontin paino, eli kunkin merkin leveys. Tämä elementti erottaa, mitä fonttia käytetään otsikon luomiseen ja mikä päätyy leipätekstiin.

Kolmanneksi menee kerning, eli kuvio, jota merkit seuraavat, eli kahden kirjaimen väli, mikä on välttämätöntä, koska silmäsi noudattavat täsmälleen tätä kaavaa.

Tämä väli ja marginaalit määrittelevät viimeisen, erittäin tärkeän elementin:

Merkkien määrä riviä kohden. Liian monta merkkiä riviä kohden ja teksti näyttää sekavalta, mikä johtaa melko huonoon käyttökokemukseen.

Liian vähän ja kestää kauemmin ennen kuin silmä saavuttaa seuraavan kappaleen, jolloin saadaan täsmälleen sama tulos, jonka mainin yllä.

Pituutta rajoittamalla parannat tekstisi luettavuutta. Jos rivi on liian pitkä, se ei näy kunnolla laitteessa, mikä tarkoittaa, että lukija ei pysty lukemaan sitä kunnolla, mikä johtaa sotkuun CRO:n (Conversion Rate Optimization) kannalta.

Sinun on löydettävä sinulle sopiva kultainen leikkaus ja muista, että kultaisen leikkauksen on oltava 60 merkkiä riviä kohden.

Ja pieni vihje tähän: Sinun on myös kiinnitettävä huomiota rivien väliin, koska on yksinkertaisesti liian helppoa joko lukea rivi uudelleen tai jättää se kokonaan pois. Mikä ei ole koskaan hyvä käytäntö, etenkään tänä aikana, jolloin kuluttajilla on niin monia vaihtoehtoja.

Fonttikoko ja muut painajaiset

Kuinka monta kertaa olet nähnyt tekstin isoilla kirjaimilla ja ajatellut, että kirjoittaja haluaa huutaa vihaisesti? Lyön vetoa, että vastaus on ”monta kertaa”.

Fonttikoot voivat toimia aivan kuten puhutun sanan sävy: kursivoitu voi olla matkivaa, lihavoitu fontti voi olla vaativaa, isot kirjaimet voivat herättää huomiota ja niin edelleen.

Siksi suunnittelijan on oltava varovainen valitessaan kirjasinta ja tyyliä, varsinkin jos hänellä on monipuolinen yleisö, jolle ”puhua”.

Jos et usko minua, avaa vain romaani ja tarkista fontti. Avaa sitten lastenkirja ja tee sama asia.

Kaikki tiivistyy siihen, mitä mainitsin alussa: Sinun on vedottava kohdeyleisösi typografian sekä itse kopion ja visuaalien avulla.

Mutta koolla ei ole väliä. Koska puhumme digitaalisesta, typografian on oltava moitteeton kaikissa laitteissa. Sinun on optimoitava mobiililaitteille, tableteille ja pöytäkoneille, jotta käyttäjä ei hämmentyisi ja hylkää sisältöäsi kokonaan.

Muista, että korkeus on yhtä tärkeä. Hyvin pitkä tai lyhyt teksti, joka näyttää hyvältä työpöytänäkymää testattaessa, ei välttämättä toimi hyvin mobiililaitteella.

Ehkä suurin painajainen kaikista on tekstin kohdistus. Länsimaisessa kulttuurissa ihmiset ovat tottuneet lukemaan vasemmalta oikealle, joten sinun tulee olla tietoinen siitä ja toimia sen mukaisesti.

Käytä vasemmalle tasausta matkimaan tapaa, jolla ihmiset lukevat painettuja tekstejä, ja olet valmis.

Sama ei toimi kohdeyleisöllesi, jos tämä sijaitsee jossain idässä, jossa lukeminen tapahtuu oikealta vasemmalle. Joten jälleen kerran, kohdeyleisösi on ensimmäinen asia, joka on otettava huomioon ennen päätöksen tekemistä.

Trendit ovat ystäviäsi

Tiedätkö, että parhaat käytännöt eivät kestä typografiaa ja suunnittelua, eikö niin?

Voit käyttää parhaita kirjasimia, kohdistuksesi voi olla moitteeton, mutta ilman suunnittelutrendejä käyttämättä sähköpostisi, verkkosivustosi, aloitussivusi, mitä tahansa luotkin, voivat silti pysyä yhtenä parhaiten varjeltuista salaisuuksistasi.

Lihavoitu on joskus kaunista

Ajattele esimerkiksi MACia. Kauneusbrändi käyttää mielellään lihavoitua tekstiä ja äärimmäistä kontrastia elementtinä:

MAC Kosmetiikka

Tämä on brändin tunnuslause ja se on ollut ikuisesti. Se on dramaattista, etkä voi missata sitä. Sama koskee heidän uutiskirjeensä sankarikuvaa:

MAC Cosmetics -uutiskirje

Tervehdys on vain… Siellä! Jos meidän pitäisi luoda henkilö sankarikuvasta, se olisi erittäin tyylikäs henkilö, joka olisi erittäin iloinen nähdessään sinut kävelemässä kadulla.

Harkitse myös seuraavaa: Lihavoitujen kirjainten käyttämisen lisäksi voit myös korostaa tekstiä suunnittelussasi.

Vähän niin kuin teimme lapsena kirjoissamme olevalla tussillamme. Muistatko kuinka paljon huomiota tämä herätti?

Nämä ovat kaksi tapaa, joilla voit määrittää hierarkian suunnittelussa.

Piristä tekstiä!

Tekstilohkot ovat hienoja, kun kohdistat ne ja ihmiset voivat lukea ne edes yrittämättä, mutta mitä tapahtuu, kun haluat erottua joukosta ja piristää asioita?

Yritä sekoittaa asioita otsikoiden suhteen tekstillä, joka alkaa vaakasuuntaisesti, kääntyy pystysuoraksi, muuttuu hajallaan kirjaimille…

Tärkeintä tässä on vierailijan houkutteleminen. Ja mikä olisikaan parempi tapa saada heidät mukaan kuin olla leikkisä ja saada heidät varomaan näitä pieniä elementtejä, jotka saavat heidät leikkimään.

Magic People Voodoo People

Yllä oleva kuva on täydellinen visualisointi pisteestä, jonka yritän tehdä, koska minun piti kääntää päätäni kerran tai kahdesti eksymättä. Voit nähdä, että vasen kohdistusperiaate on edelleen ilmeinen täällä, koska et voi lukea nimeä väärin, ellei se ole tarkoituksellista ja tarvitset luovuuden harjoittelua!

Sisällön palasia

Mitä tahansa teetkin, sinun tulee aina pitää mielessä, että sisältö on sitä, mitä työskentelet, ja sisältö on kuningas. Aina.

Varmista, että laatu vastaa näkemystäsi ja lähetystiheyttä, jolla lähetät, lataat tai lähetät sähköposteja.

Toiseksi, varmista, että suunnittelusi ei vie huomiota pois sisällöstä. Esimerkiksi toimintakehotuspainikkeen tulee olla lihavoitu ja kontrastivärinen, mutta ei siinä määrin, että vastaanottaja ei lue viestiä, jota yrität välittää.

Mene eteenpäin ja lue sisältö, vietä aikaa sen kanssa ja tutustu siihen. Jos julkaiset paljon uutta, niiden on oltava ajankohtaisia, osuvia ja herättäviä.

Visualisoi, mitä haluat sanoa. Lue tekstisi ääneen ja varmista, että luot kuvan, joka sinulla oli päässäsi, kun katsoit luonnoksia.

Ja vielä yksi tielle

Ole erittäin tietoinen käyttämistäsi väreistä. Väripsykologian ja sen vaikutuksen käyttäjään lisäksi sinun on oltava varovainen parin muun asian suhteen:

Numero yksi, värisokeus. Älä käytä liikaa punaisia ​​tai vihreitä, kun haluat korostaa tärkeitä tietoja.

Värisokeus on melko yleinen sairaus, ja punainen ja vihreä värisokeus ovat kaksi yleisintä tapausta. Joten mitä tulee toimintakehotuksiin ja asioihin, jotka sinun pitäisi tietää, kuten esimerkiksi käyttöehdot, pysy mustissa ja suurikontrastisissa.

Numero kaksi, vilkkuvat kuvat ja teksti. Vilkkuvat kuvat voivat aiheuttaa ahdistusta, ne voivat häiritä käyttäjää ja ne ovat tavallaan ärsyttäviä. Mutta nämä eivät ole tärkeimmät syyt, miksi sinun pitäisi välttää niitä.

Vilkkuvat kuvat voivat aiheuttaa epileptisiä kohtauksia.

Tiivistettynä

Vielä on paljon sanomatta, mitä tulee typografiaan, web-suunnitteluun ja käyttäjän omaan kokemukseen, mutta mielestäni olemme käsitelleet tässä perusasiat.

Muista vain ajatella laatikon ulkopuolella ja olla merkityksellinen olematta sama kuin kaikki. Kaltaisesi luova yksilö löytää varmasti tavan ajatella laatikon ulkopuolella!

Ja älä unohda jättää kommenttia palautteesi kanssa tähän julkaisuun!