Jak pisać, żeby użytkownik nie zwariował

Tren­dy UX mówią o wzro­ście zna­cze­nia typo­gra­fii, któ­re jest więk­sze z roku na rok. Krój czcion­ki, jej wiel­kość to ide­al­ny spo­sób na wyróż­nie­nie nasze­go pro­duk­tu, jed­nak nie nale­ży zapo­mi­nać o uży­tecz­no­ści. W dzi­siej­szym arty­ku­le prze­ana­li­zu­je­my naj­częst­sze błę­dy typo­gra­ficz­ne popeł­nia­ne na stro­nach inter­ne­to­wych.

Gdzie popeł­nia­my błę­dy? 

• za mały tekst
• zbyt mała inter­li­nia
• za mały kon­trast mię­dzy czcion­ką a tłem
• nie­oczy­wi­ste lin­ki
• justo­wa­nie
• uży­wa­nie fon­tów, któ­re nie mają pol­skich zna­ków
• uży­wa­nie sze­ry­fo­wych fon­tów na stro­nach www

Za mały tekst

Znacz­na część użyt­kow­ni­ków nie jest w sta­nie prze­czy­tać drob­ne­go tek­stu. Tek­sty pisa­ne mniej­szą czcion­ką niż 14 są mało czy­tel­ne i mogą fru­stro­wać użyt­kow­ni­ków. Nale­ży pamię­tać, że oso­ba czy­ta­ją­ca nie powin­na być zmu­szo­na do powięk­sze­nia stro­ny w celu jej prze­czy­ta­nia, dla­te­go nale­ży sto­so­wać opty­mal­ną wiel­kość fon­tu ok. 14–16 px.

Czcion­ka Arial wiel­kość 13 i 16 pik­se­li

Zbyt mała inter­li­nia

Stan­dar­do­wa inter­li­nia w HTMLU jest zbyt mała. Zwiększ­my ją do 150%. W ten spo­sób para­gra­fy nie będą się zle­wać w sza­re blo­ki a sam tekst będzie wygod­niej­szy w czy­ta­niu.

Inter­li­nia stan­dar­do­wa 125% i powięk­szo­na 150%

Za mały kon­trast mię­dzy czcion­ką i tłem

Tek­sty na stro­nie powin­ny odróż­niać się od tła, ponie­waż za mały kon­trat pomię­dzy tymi ele­men­ta­mi powo­du­je nie­czy­tel­ność tek­stów. Przyj­mu­je się, że kon­trast powi­nien być w sto­sun­ku 4,5:1. Dodat­ko­wo tek­sty na stro­nie nie powin­ny być w kolo­rze czer­wo­nym i zie­lo­nym z uwa­gi na użyt­kow­ni­ków, któ­rzy cier­pią na śle­po­tę barw, np. dal­to­nizm.

Kon­trast czcion­ki i tła

Nie­oczy­wi­ste lin­ki

Kon­stru­ując tek­sty, w któ­rych zawar­te są lin­ki, nale­ży wyraź­nie wyróż­nić je  od pozo­sta­łe­go tek­stu, aby użyt­kow­nik wie­dział, że są to ele­men­ty aktyw­ne (kli­kal­ne). Powin­no się sto­so­wać jeden styl dla lin­ków w obrę­bie całej stro­ny, aby użyt­kow­nik mógł szyb­ko je iden­ty­fi­ko­wać.

Nie­oczy­wi­ste, mało widocz­ne lin­ki

Nie justuj tek­stu w wąskich kolum­nach

Dla wier­szy, w któ­rych jest 40–50 zna­ków, wyrów­na­nie do obu mar­gi­ne­sów jed­no­cze­śnie (wyju­sto­wa­nie) nie powin­no być sto­so­wa­ne. Wyju­sto­wy­wa­nie odby­wa się przez mody­fi­ka­cje odle­gło­ści mię­dzy­wy­ra­zo­wych. W nie­któ­rych wier­szach sta­wa­ły­by się bar­dzo duże, two­rząc olbrzy­mie dziu­ry w tek­ście.

Nie­pra­wi­dło­we justo­wa­nie

Uży­wa­nie fon­tów, któ­re nie mają pol­skich zna­ków

Przy wybo­rze fon­tu na naszą stro­nę nale­ży spraw­dzić czy jest on dosto­so­wa­ny do wer­sji języ­ka stro­ny. Jeśli zasto­su­je­my font, któ­ry nie zawie­ra pol­skich zna­ków, w naszym tek­ście mogą poja­wić się zna­ki, któ­re znacz­nie utrud­nią czy­tel­ność tek­stu, np. “###ty” zamiast “żół­ty”.

Uży­wa­nie sze­ry­fo­wych fon­tów na stro­nach www

Czcion­ki sze­ry­fo­we zazwy­czaj uży­wa się do nagłów­ków. Jed­nak do pozo­sta­łych tek­stów zale­ca się sto­so­wa­nie fon­tów bez­sze­ry­fo­wych, ponie­waż są lepiej czy­tel­ne na ekra­nach wyświe­tla­czy.

Źró­dła:

http://www.psychology.nottingham.ac.uk/staff/mxh/Papers/Dyson%20&%20Haselgrove%20%282001%29.pdf

http://www.slideshare.net/JustinSlack/typography-and-user-experience-ux-craft-2014

http://usabilitygeek.com/12-typography-guidelines-for-good-website-usability/

http://wcag20.widzialni.org/kontrast-minimalny,new,mg,165,172.html,71