Dlaczego czcionki mają znaczenie: wgląd w UX i typografię

Gdy użytkownicy odwiedzają Twoją witrynę, zwykle mają jakiś cel. Ten cel rzadko polega na zauważeniu wspaniałego projektu witryny i cieszeniu się jej zaawansowaną funkcjonalnością.

Użytkownicy najczęściej przychodzą po informacje, czy to dotyczące ogólnie niektórych aspektów życia, czy oferowanego przez Ciebie produktu. Tutaj wkracza typografia, która ma zapewnić jak najlepsze postrzeganie informacji na Twojej stronie. Dziś nadszedł czas, aby zagłębić się w zawiłe połączenie UX i typografii oraz prześledzić wpływ wybranych czcionek na ogólne wrażenia z przeglądania witryny.

Dlaczego typografia ma tak duże znaczenie dla UX?

Doniesiono, że ponad 95% informacji w Internecie znajduje się w formie tekstowej (język pisany). Informacje te mają być wchłaniane przez ludzi, którzy starają się przetworzyć jak najwięcej informacji. Tutaj typografia działa jak wspierający przyjaciel, który pomaga ludziom maksymalnie wykorzystać czas i wysiłek związany z przeglądaniem.

Dobra typografia jest często trudna do zauważenia. Ułatwia to proces czytania i nie zwracasz na to uwagi. Z drugiej strony złe wybory typograficzne mogą zrujnować wrażenia z przeglądania i ograniczyć do minimum szybkość percepcji czytania. Ponieważ nikt nie lubi tracić czasu, typografia staje się jedną z nieodłącznych dźwigni UX, która ma duży wpływ na ogólne wrażenia użytkownika na danej stronie internetowej.

Dostosowując typografię witryny, poprawiasz:

• czytelność tekstu;
• dostępność treści;
• użyteczność strony internetowej;
• i ogólny balans graficzny.

Tutaj omawiamy tylko związek UX i typografii, nie wspominając o roli typografii w kształtowaniu osobowości wizualnej strony, definiowaniu Twojej marki i przyciąganiu uwagi czytelnika. Sprawdź ten artykuł, aby dowiedzieć się więcej.

Wybór typografii dla tej strony kościoła nie tylko poprawia UX na stronie, ale także pomaga kształtować identyfikację wizualną marki).

Jak zwiększyć UX w swojej witrynie poprzez optymalizację typografii?

Istnieje wiele sposobów na poprawę UX w witrynie poprzez optymalizację typografii. Ponieważ UX i typografia są ze sobą ściśle powiązane, optymalizując typografię, optymalizujesz również czytelność tekstu, a tym samym zwiększasz ogólny UX w swojej witrynie. Zobaczmy, jakie są zasady optymalizacji typografii:

1: Zminimalizuj liczbę używanych czcionek

Jeśli chcesz, aby Twoja strona wyglądała spójnie i profesjonalnie, użyj maksymalnie trzech czcionek (nie więcej). Różne czcionki na jednej stronie kolidują ze sobą i odwracają uwagę użytkownika od czytania tekstu. Zastosowanie kilku podobnie wyglądających czcionek pomaga stworzyć spójność UX na wszystkich stronach witryny i uwalnia użytkowników od konieczności dostosowywania się do częstych zmian stylów.

Właśnie tego powinieneś unikać na swojej stronie internetowej.

Często wystarczy zastosowanie tylko jednej czcionki. Jeśli nadal uważasz, że potrzebujesz kilku czcionek, wybierz czcionki o tej samej szerokości znaków. W tym przypadku czcionki nie będą się zbytnio od siebie różnić i rozpraszać czytelnika.

Ta witryna przebudowy wykorzystuje niekonwencjonalną czcionkę Six Caps, aby poprawić identyfikację wizualną witryny. Ta czcionka jest połączona z Roboto Condensed, aby mieć dwie czcionki, których szerokości znaków są takie same.

Jeszcze jednym świetnym pomysłem na łączenie kilku czcionek jest połączenie czcionek imitujących pismo odręczne ze zwykłymi. Odręczna typografia nadaje osobisty charakter ogólnemu projektowi witryny i rozwija jej wizualny charakter.

Ta strona internetowa jest miękka i kobieca dzięki czcionce Caveat Handwriting.

2: Wybierz czcionki Sans Serif, aby poprawić czytelność

Szeryfy to małe linie na końcach kresek literowych. W typografii drukowanej szeryfy pomagają ludziom szybciej i skuteczniej rozpoznawać drukowane litery. Jednak na ekranie, zwłaszcza bez Retiny, szeryfy nie są tak dobrze zarysowane jak na papierze, co częściowo utrudnia czytanie.

Oprócz zapewnienia lepszej czytelności, czcionki bezszeryfowe przemawiają w odważniejszy, bardziej minimalistyczny sposób.

Tutaj nie twierdzę, że powinieneś całkowicie zrezygnować z czcionek szeryfowych. Lepszą radą byłoby być z nimi bardziej ostrożnym i używać tych, które są czyste i precyzyjne.

Na przykład ta witryna z kreatywnymi fotografiami wykorzystuje bezszeryfową czcionkę Open Sans, która pomaga stronie internetowej w odważnej, stylowej i zdecydowanej wypowiedzi.

3: Umysł przyzwoity rozmiar czcionki

Przestrzeń w Internecie jest nieograniczona. Dlatego nie ma potrzeby zapisywania go i wybierania małych rozmiarów czcionek, które dodatkowo męczą wzrok użytkowników. Czytelnicy z wadami wzroku mogą mieć trudności z odczytaniem małego tekstu, a nawet czytelnicy z dobrym wzrokiem odczuwają zmęczenie i muszą robić przerwy, aby dotrzeć do końca, powiedzmy, 10-punktowego tekstu.

Jeśli nie chcesz, aby użytkownicy mieli trudności z czytaniem prezentowanego tekstu lub powiększaniem go, wybierz rozmiar czcionki 16 punktów +. Takie rozmiary czcionek minimalizują zmęczenie oczu i pomagają użytkownikom osiągnąć cel w Twojej witrynie bez zmęczenia wizualnego.

Witryna Malcolmy używa czytelnej 16-punktowej typografii na swoich stronach domowych i blogach.

4: Przestrzegaj optymalnej długości linii

Na swojej stronie internetowej nie powinieneś wypełniać tekstu całą dostępną przestrzenią. Dbając o optymalną długość linii, trzymasz się wysokich standardów czytania. Jeśli linijki są zbyt krótkie, oczy czytelnika muszą poruszać się w przód iw tył podczas czytania tekstu, co dodatkowo męczy wzrok. Jeśli wiersze są zbyt długie, zbyt trudno jest skoncentrować się na dokładnie czytanym słowie i zbyt łatwo się zgubić.

Aby uniknąć obu niekorzystnych sytuacji, trzymaj się 60 znaków w linii (dla ekranów tabletów/komputerów).

Ten obraz ilustruje, że teksty ze zbyt krótkimi lub zbyt długimi wierszami są trudniejsze do odczytania niż teksty, które trzymają się „złotego środka” o długości ~ 60 pkt.

Optymalna długość linii dla urządzeń mobilnych (np. smartfonów) jest krótsza. Aby tekst był czytelny na małych ekranach, linia powinna zawierać około 30 – 40 znaków.

5: Wybierz kroje pisma, które działają dobrze w różnych rozmiarach

Jak wiesz, rozmiar liter w nagłówkach jest zwykle większy niż w tekście głównym. Nagłówki różnią się również rozmiarem, od najmniejszego do największego. Na swojej stronie będziesz musiał wybrać różne rozmiary czcionek dla różnych elementów (np. przycisków, podpisów, elementów nawigacyjnych itp.), a także różne grubości czcionek dla podkreślenia.

Aby zapewnić rozpoznawalność elementów witryny, wybierz czcionkę o różnych rozmiarach i gramaturach. Jeśli wybierzesz jedną ze standardowych czcionek, np. czcionkę Google Fonts Roboto, zobaczysz wszystkie jej odmiany. Niektóre czcionki występują w ponad 10 odmianach, inne mają tylko kilka. Wybierz czcionkę, która ma bogaty zestaw odmian, aby zapewnić zróżnicowaną reprezentację treści w Twojej witrynie.

Różne style czcionek czcionki Roboto Google.

6: Dokonuj inteligentnych wyborów kolorów

Czasy wielobarwnych, krzyczących stron internetowych minęły. Teraz czytelność i kontrast to siły decydujące o wyborze kolorów. Przede wszystkim treść powinna być czytelna, a połączeniem, które przez wiele lat uważano za najlepsze, jest czarny tekst na białym tle. Takie połączenie zapewnia maksymalny kontrast i sięga czasów klasycznej typografii.

Jednak ostatnio często mówi się, że czarny kolor bardziej męczy oczy niż ciemnoszary. Odcienie ciemnej szarości również dobrze kontrastują z białym tłem, ale są nieco mniej nasycone i zapewniają większy komfort czytania.

To odcienie szarości, które przewyższają czerń w zapewnieniu komfortu czytania.

Strona internetowa wykorzystująca ciemnoszary kolor tekstu suwaka.

Dokonując wyboru koloru, upewnij się, że przetestujesz go na różnych urządzeniach iw różnych środowiskach. Tekst, który dobrze się czyta w typowym środowisku biurowym, może być trudny do odróżnienia na smartfonie, zwłaszcza gdy jest używany na zewnątrz. Trudno jest uwzględnić wszystkie czynniki, ale Twoim celem powinno być uwzględnienie większości środowisk i zapewnienie różnym grupom użytkowników wygodnego przeglądania.

7: Nie eksperymentuj z wysokością linii

Minimalizowanie wysokości linii, aby zmieścić więcej treści, nie jest dobrą praktyką. Jeśli linie są zbyt blisko siebie, czytelnik jest bardziej skłonny do przeskoczenia do poprzedniej lub następnej linii i utknięcia. Odstęp między wierszami (wiodącymi) powinien być o 30% większy niż wysokość użytych znaków. Takie prowadzenie zapewnia najlepszą czytelność treści i jej wyraźny odbiór wizualny.

Kiedy wysokość linii jest mniejsza niż 1,3 wysokości znaku, tekst staje się trudny do odczytania.

8: Pozwól użytkownikom zdecydować

Korzystając z UX i typografii, ważne jest, aby pamiętać o docelowych odbiorcach i ich potrzebach. Dowiedz się, jakimi czytelnikami są goście Twojej witryny iw jakich typowych sytuacjach odkrywają treści Twojej witryny. Na przykład, jeśli kierujesz reklamy do młodzieży, zwróć większą uwagę na mobilny UX i odpowiednio dostosuj typografię.

Przeprowadź testy A/B dla wybranych typografii i zobacz, która z nich zmniejsza współczynnik odrzuceń i przynosi więcej konwersji. Bądź gotowy na ciągłe dostosowywanie typografii, aby stale się doskonalić i zapewniać użytkownikom jak najlepsze wrażenia.

Więcej informacji na temat testów A/B znajdziesz w tym artykule.

Wnioski

Zagłębienie się w związek między UX a typografią może zaowocować wieloma cennymi ulepszeniami doświadczenia użytkownika w Twojej witrynie. Jeśli zdecydujesz się na ulepszenia związane z typografią wymienione powyżej, z pewnością otrzymasz czytelną witrynę, której przeglądanie jest prawdziwą przyjemnością. Życzę powodzenia w tym przedsięwzięciu!

Czy coś przegapiłem? Daj mi znać w sekcji komentarzy poniżej. Twoje pytania związane z tematem są również mile widziane.

Czekać na dalsze informacje!