Podstawą skutecznie zaprojektowanej strony internetowej jest typografia. Większość informacji, jakie strona internetowa przekazuje swoim odbiorcom, jest właśnie w postaci tekstu.
Owszem, ładnie dobrana grafika czy świetnie wykonane elementy graficzne poszczególnych sekcji strony są atrakcyjne po względem wizualnym. Jednak to właśnie tekst przekazuje informacje, wpływa na czytelność i odbiór strony. Zmienia sposób, w jaki użytkownicy przetwarzają informacje zawarte na stronie. Tekst przede wszystkim potrafi angażować użytkownika i motywować do podjęcia określonej akcji. Dlatego w ostatecznej ocenie dobrze stworzonej strony internetowej trzeba rozpatrywać nie tylko aspekt wizualny, ale również kwestie typografii.
Błędy mogą przytrafić się każdemu. W typografii również. Zebrałem więc kilka najczęściej popełnianych błędów typograficznych, jakie można znaleźć na stronie produktu sklepu internetowego. Unikanie ich pozwoli na poprawę wyglądu podstrony, jak i również może przyczynić się do zwiększenia konwersji w e-sklepie.
Zaczynamy!
Błędy typograficzne na stronie produktu – 8 kwestii
1. Używanie zbyt wielu czcionek.
Prawdopodobnie najczęściej popełniane błędy typograficzne na stronie produktu dotyczą fontów. Używanie nadmiernej ilości czcionek jest bolączką wielu witryn. Powoduje to swego rodzaju chaos na stronie oraz pogarsza jej odbiór.
Ogólnie rzecz biorąc, zazwyczaj wystarczy jeden bądź dwa rodzaje czcionek na Twojej stronie internetowej. Większa liczba nie powinna być stosowana. Dwie czcionki mogą ze sobą współgrać z powodzeniem. Jeden krój można stosować do wszelkich nagłówków na stronie. Drugi z kolei jako pozostałą treść strony produktu.
Z każdorazowym dołożeniem kolejnego kroju czcionki powodujemy coraz większy nieład i brak spójności, który nie jest dobrym kierunkiem w drodze do sukcesu.
Podobnie sprawa wygląda z grubością czcionki. Pogrubione elementy z pewnością przykuwają uwagę odbiorcy i pozwalają lepiej zeskanować tekst bez jego dokładnego przeczytania. Jednak łatwo tutaj przesadzić, jeśli będziemy stosować kilka rodzajów pogrubień, chcąc uzyskać lepszy efekt.
W rzeczywistości efekt będzie zupełnie odwrotny, a stosowanie kilku rodzajów grubości pogorszy czytelność podstrony, co może odbić się na liczbie zamówień Twojego produktu.
Nagłówek, akapit tekstu oraz wypunktowana lista. Trzy różne czcionki. Na pierwszy rzut oka jest wszystko ok, jednak stosowanie aż tylu różnych czcionek zaburza spójność.
2. Zbyt duży nacisk na nieistotne elementy.
Właściciele sklepów internetowych często kładą duży nacisk na to, aby wyeksponować każdy pojedynczy element do granic możliwości. Stosują pochylenia tekstu, pogrubienia, piszą wielkimi literami, podkreślają ważne dla nich słowa, podświetlają tekst czy nadają mu inny kolor.
Oczywiście, wszystkie wymienione „triki” przyciągają i skupiają uwagę. Jednak stosowanie ich wszystkich naraz pogarsza skutecznie czytelność opisu produktu oraz rozprasza uwagę.
Najlepszym rozwiązaniem jest więc skupienie się na jednym bądź dwóch elementach, które uwydatnią tekst. Stosowanie wszystkich jednocześnie nie jest zalecane.
3. Zła kolorystyka tekstu.
Błędy typograficzne popełniane na stronie produktu dotyczą również doboru kolorów na stronie. Jeśli podstrona ma białe tło, to raczej trudno będzie dobrać zły kolor tekstu.
Problem pojawia się na podstronach z kolorowym tłem. Wtedy można nieodpowiednio dopasować kolor tekstu, przez co wszystko może stać się nieczytelne.
4. Niedopasowany kontrast.
Kontrast to kolejny element, na który należy zwrócić uwagę. Jeśli o niego nie zadbamy, może na tym ucierpieć czytelność podstrony produktu.
Najważniejsze jest to, aby tekst odpowiednio odcinał się od tła, na którym jest zamieszczony oraz aby współgrał z resztą kompozycji. Ważne jest również trzymanie się stylu. Nagłówki powinny mieć taki sam styl, odstępy powinny być zawsze takie same oraz ich kolor również. Raz obrana koncepcja powinna być spójna.
5. Pominięcie struktury tekstu.
Kolejne błędy typograficzne to umieszczanie długich bloków tekstu bez jakiegokolwiek przełamywania. Jednolity blok tekstu jest mało estetyczny i, co gorsza, mało czytelny. Użytkownik, zamiast przeczytać informacje o produkcie i dowiedzieć się czegoś więcej o nim, nie dowie się niczego. Mało komu będzie się chciało czytać blok tekstu, nawet jeśli będzie zawierał wybitną treść.
Dlatego powinno się dać możliwość zeskanowania tekstu, żeby odbiorca wyczytał tylko to, co go najbardziej interesuje.
Nieczytelny blok tekstu. Ciężko się to czyta. Zdecydowanie brakuje nagłówka, wypunktowania lub innego elementu przełamującego tekst.
6. Zaniedbanie rozlokowania tekstu.
Dobrze ułożony i rozlokowany tekst pomoże użytkownikom w jego zrozumieniu i łatwiejszej nawigacji po nim. Dzięki temu zapozna się on z materiałem i dowie się wszystkich informacji o produkcie, które chcesz przekazać.
Błędy typograficzne, jakie można popełnić w złym rozplanowaniu tekstu, to:
- Za długi wiersz tekstu. Im linijka tekstu jest dłuższa, tym trudniej się ją czyta.
- Nadmierne centrowanie tekstu. Właściwie wycentrowane powinny być ewentualnie same nagłówki. Z kolei akapity z tekstem przy centrowaniu powodują powstawanie nierównej długości linii, co przekłada się na negatywny odbiór treści.
- Za długi akapit. To jest to, o czym wspomniałem w powyższym punkcie.
- Za małe odstępy pomiędzy kolejnymi liniami tekstu. Zwiększenie interlinii w wielu przypadkach może poprawić czytelność tekstu. Jednak tutaj należy uważać, bo łatwo przesadzić i tekst będzie „rozlazły”.
7. Niedopasowanie czcionki do charakteru strony.
Każdy sklep oferuje inne produkty z różnych dziedzin. Ważne jest więc to, aby krój czcionki współgrał z charakterem sprzedawanego produktu. Sklep oferujący artykuły dziecięce nie będzie dobrze wyglądał w eleganckich, czysto biznesowych czcionkach. Z kolei sklep z eleganckimi i gustownymi zegarkami nie powinien być dekorowany czcionkami z typowo dziecięcym stylem.
8. Stosowanie wyjustowania.
To jedna z ważniejszych kwestii dotyczących typografii. Trzeba sobie zdać sprawę z tego, że justowanie na stronie internetowej nie ma racji bytu.
W pierwszej kolejności można pomyśleć, że przez wyjustowanie tekst jest bardziej estetyczny, z klasą oraz łatwiej jest go czytać. W rzeczywistości taki tekst jest po pierwsze nudny, a po drugie wcale lepiej się go nie czyta. Mało tego, przy stosowaniu tego formatowania tworzą się nieregularne odstępy pomiędzy wyrazami, co powoduje powstawanie swoistych dziur.
Wyjustowany tekst nadaje się dobrze do pracy magisterskiej lub do książki, nie zaś na stronę internetową.
Jest jeszcze jedna kwestia justowania – responsywność. Dopasowanie układu strony do szerokości urządzenia mobilnego nie sprzyja justowaniu. Może się zdarzyć, że w danej linijce zostanie tylko jeden lub dwa wyrazy i całość zostanie rozciągnięta, co brzydko wygląda.
Tak więc justowanie nie jest dobrym pomysłem na naszych stronach.
Podsumowanie błędów typograficznych
„Człowiek uczy się na błędach” – w tym powiedzeniu jest wiele prawdy. Ważne, aby z popełnionych błędów wyciągać wnioski, co zaowocuje w przyszłości.
Wbrew pozorom typografia na stronie potrafi wnieść wiele nowego. Nadać nowy blask stronie i poprawić jej czytelność. Warto przejrzeć powyższą listę błędów i skonfrontować je z własną witryną. Tym bardziej że wszystkie z nich są dość łatwe w poprawie i nie wymagają specjalistycznej wiedzy, tylko uwagi i wyczucia.
Sprawdź zatem własną stronę pod kątem błędów typograficznych!
—
Bardzo dziękujemy Krzysztofowi za zwrócenie uwagi w kwestii słynnego już „font, nie czcionka”. Jednakże oba słowa stosujemy w naszych wpisach zamiennie – po prostu na zasadzie synonimów. Wszystko dlatego, że pojęcie „czcionki” na tyle silnie utarło się w polszczyźnie, że jest po prostu bardziej powszechne od słowa „font”. W przypadku gdy znamy prawdziwe znaczenia obu słów, nie uważamy, aby stosowanie formy „czcionka” było błędne. Uznalibyśmy to za niewłaściwe, gdybyśmy mieli do czynienia z niewiedzą, nie zaś z celowością.
Ciekawy wpis! Sam często popełniam błędy związane z typografią, ale myślę, że teraz będzie lepiej 🙂
No właśnie justowanie, a ja ostatnio dostałam uwagę że powinnam bardziej zadbać o justowanie tekstu. Ty piszesz żeby tego nie robić i bądź tu człowieku madry 🙂
Absolutnie nie słuchaj się takich „porad”. 😉
Justowanie w dobie responsywności to jeden z największych grzechów, jakie można popełnić. Dlaczego? Odpowiedź jest prosta: strony dostosowują się płynnie do okien urządzeń, na których są przeglądane. Dzięki temu słowa „przeskakują” tak, aby przylegały do obu krawędzie pola, w których się znajdują. Dzięki temu spacje, które powstają wewnątrz, są bardzo nieregularne. Czasem może się zdarzyć nawet sytuacja, w której na komórce w jednej linice będziemy mieli np. tylko dwa słowa z mega wielką przerwą pomiędzy nimi. Typograficzny koszmar.
Justowanie tekstu jest bardzo dobrym zabiegiem tylko wtedy, jeżeli ma się jakiś patent (czyli, tak naprawdę, odpowiedni skrypt) na łamanie słów poprzez przenoszenie ich części do kolejnej linijki. W przeciwnym wypadku stanowi ono niestety tylko błędne przeświadczenie o poprawie czytelności, podczas gdy tak naprawdę dzieje się zupełnie odwrotnie.
Dodatkowa, nieco szersza lektura na ten temat:
– Never Justify Type on the Web
– Why is justified text on websites a bad idea?
FONT a nie czcionka
Rafale, na samym końcu wpisu znajduje się wyjaśnienie, dlaczego w naszych wpisach stosujemy podwójną nomenklaturę.