Nawet najciekawszy tekst może nie zostać przeczytany, jeżeli sposób jego prezentacji nie będzię odpowiedni. Jak uniknąć takiej sytuacji? Jak poprawić doświadczenia użytkowników (user experience) na stronach? Poniżej kilka wskazówek, jak zwiększyć czytelność prezentowanych tekstów.
1. Paragrafy i wyróżnianie elementów
Obszerne bloki tekstowe mogą przytłaczać użytkowników. Zbyt długie linie tekstu, brak podziału na akapity, brak nagłówków i wyróżnienia kluczowych informacji to często spotykane błędy. Podział tekstu na akapity i nagłówki oraz wypunktowania i podkreślenia sprawiają, że tekst łatwiej przyswajalny. Użytkownik może od razu odnaleźć informację, której poszukuje.
2. Grupowanie wizualne i spójność
Chaotyczny układ zbyt różnorodnych elementów i brak grupowania wizualnego elementów utrudnia użytkownikom zorientowanie się, które części dotyczą aktualnie czytanego artykułu i do czego dokładnie się odnoszą. Odpowiednio zgrupowane i ujednolicone nagłówki i teksty poprawiają czytelność tekstu. Użytkownik nie ma wrażenia chaosu i nie musi się nadmiernie skupiać czytając lub skanując tekst.
3. Układ krzyżowy czy wyrównanie do lewej strony?
Krzyżowy układ tekstu utrudnia użytkownikom na skanowanie i zmusza ich do ciągłego przenoszenia wzroku z jednej strony na drugą. Czytamy od lewej do prawej, więc umieszczenie tekstu z lewej strony pozwala na szybkie przeszukiwanie zawartości.
4. Kroje i kolory fontów
Zbyt małe fonty o niejednolitych kolorach i krojach oraz zbyt niski kontrast pomiędzy tekstem, a tłem sprawiają, że treści są nieczytelne. Tekst spełniający wymogi WCAG 2.0 pod kątem kontrastu, wielkości i kroju fontów jest przyjemny w czytaniu. Ma to znaczenie nie tylko dla użytkowników z problemami ze wzrokiem, ale dla wszystkich użytkowników stron internetowych.
5. Układ tekstu na urządzeniach mobilnych
Zbyt duża wielkość fontów nagłówka, za mała interlinia oraz zbyt wąska kolumna z nieodpowiednio złamanym tekstem to częste błędy, które właściwie uniemożliwiają czytanie artykułu na urządzeniach z mniejszymi ekranami.
Dowiedz się więcej:
1. Nielsen Norman Group: Zigzag Image – Text Layouts Make Scanning Less Efficient by Kim Flaherty
3. Smashing Magazine: 10 Principles Of Readability And Web Typography by Matt Cronin
4. UX Planet: 10 Tips On Typography in Web Design by Nick Babich
5. UX Planet: Mobile UX – Great Typography Enables Clear Communication by Nick Babich
6. UX Planet: Mobile Typography – 8 Steps Toward Powerful UI by Tubik Studio
7. Design Shack: Web Design Best Practices – Minimalism & Typography by Jerry Cao
9. Muzli: Typography In Mobile Design – 15 Best Practices To Excellent UI by Trista liu