1. # 1 Нарис шрифтів
2. # 2 Розміри шрифтів
3. # 3 Різноманітність шрифтів
4. # 4 Вирівнювання тексту
5. # 5 Не використовуйте великі букви
6. # 6 Довжина рядків
7. # 7 Контрастність тексту
8. # 8 Тексти посилань
9. # 9 Підкреслення в тексті
10. # 10 Фоновий колір і графіка

При підтримці: Сервіс зберігання резервних копій від 1 $ і до 500Gb. Промо-код: BACKUP99 - знижка 99% на перший місяць. Топ-1 на zapili.net!

Поки відпочивав на Балі, дочитав книгу Тіма Еша, яку рекомендував Дмитро Сатін на ашмановской конференції - Landing Page Optimization в російській перекладі видавництва Манн, Іванов і Фербер. Переклад трохи корявий, але загальні думки, які хоче донести до читача Тім, зрозумілі і скажено цікаві. Поступово буду публікувати в розділ юзабіліті сайтів цікаві фрагменти книги у вигляді тез в моїй інтерпретації.

Сьогодні пост з оформлення тексту для максимального зручність його прочитання (читабельності).

# 1 Нарис шрифтів

Використовуйте шрифти без зарубок (ще їх називають Sans Serif або рубані). Класичними прикладами є Arial, Verdana, Tahoma і інші. На екранах моніторів, що мають набагато менший дозвіл, ніж друковані матеріали, зарубки на краях букв заважають читання. Класичний шрифт із зарубками, який погіршує читабельність - Times New Roman.

# 2 Розміри шрифтів

У переважній більшості випадків зручніше за все читаються кеглі 10-12. Шрифти більшого або дрібнішого розміру уповільнюють читання і тому підвищують стомлюваність користувачів. Виняток можуть становити сайти для літніх людей. Вони володіють слабким зором, тому для ресурсів з подібною аудиторією варто збільшити розмір до шрифту до 12-14, а також переконатися, що рядки розділяє достатній інтервал.

# 3 Різноманітність шрифтів

Не рекомендується використовувати велику різноманітність накреслень, кольорів і розмірів шрифтів. Це дратує користувачів. Погляньте, наприклад, на шрифти на сайті Сергія Мавроді:

Чи не правда рясніє в очах і інформація сприймається погано? Сайт - це не новорічна ялинка, не потрібно його прикрашати. Якщо хочеться виділити якісь фрази, тези або абзаци в тексті, то можна використовувати жирний шрифт, курсив або будь-який інший єдиний стиль для виділення.

# 4 Вирівнювання тексту

Рекомендується вирівнювати тексти тільки по лівому краю. Дослідження показують, що нерівні праві краї колонок тексту допомагають людям фіксувати погляд, збільшують швидкість читання і покращують сприйняття тексту. Тому не варто вирівнювати абзаци по обох краях, роблячи все рядки однакової довжини. Ще гірший варіант - вирівнювання тексту по центру. Особливо, це стосується рядків різної довжини.

За прикладами далеко ходити не треба, погляньте на тексти газетних інтернет-видань:

Вже вони то знають толк в читабельності. У всіх контент вирівнюються тільки по лівому краю!

# 5 Не використовуйте великі букви

Уникайте абзаців тексту у верхньому регістрі. Дослідження показують, що читати його важче. Та й виглядає це так, як ніби ви кричите в очі своїм користувачам.

# 6 Довжина рядків

Колонки тексту, що мають ширину більш 50-70 символів читати важко. Не дарма газетярі не роблять рядки довгими і друкують тексти в кілька колонок.

Також варто передбачити можливість верстки, що перешкоджає довільному подовженню рядків тексту на широких моніторах.

# 7 Контрастність тексту

Висока контрастність тексту і фону збільшує читабельність. Для відбивають світло поверхонь, таких як папір, найкращим є поєднання чорного тексту і білого тла. Для випромінюючих світло поверхонь, якими є екрани комп'ютерних моніторів, навпаки, кращий варіант - світлий текст і темний фон. У зворотному випадку світло, що випромінюється світлим фоном, заважає оці фіксувати погляд на темних ділянках тексту. Однак, світ друку створив таку інерцію, що темний текст на світлому тлі став фактично стандартом і для комп'ютерного світу, так що практично завжди доводиться йти за цією традицією. Крім того, існує думка, що темні сайти, незважаючи на більш контрастний текст, мають меншу конверсією, оскільки похмурі тони відштовхують користувачів. Це ще один додатковий голос за темний текст і світлий фон.

# 8 Тексти посилань

Блакитний підкреслений текст є стандартом для зображення посилань. Постарайтеся не міняти цього правила без вагомих причин.

# 9 Підкреслення в тексті

Не використовуйте підкреслення в звичайному тексті. Як вже говорилося вище воно «заброньовано» за гіперпосиланнями. Підкреслений текст буде вводити в оману користувачів, вони захочуть клікнути по ньому. Для виділення тексту краще використовувати інші методи (виділення жирним, курсивом).

# 10 Фоновий колір і графіка

Не використовуйте в якості фону для тексту висококонтрастні зображення. Вони ускладнюють читання і відволікають увагу.

Сайт нашого клієнта компанії Світ Шапок зроблений настільки ж нестандартно з точки зору дизайну, наскільки він незручний для користувача:

Правда це не заважає йому перебувати на перших позиціях в пошуку по профільних запитах.

******
Перед публікацією поста перевірив тексти на блозі на предмет читабельності з цього списку і виявив, що як мінімум 3 пункту (під номерами 4, 6 і 7) у мене не виконані. Є до чого прагнути.

А у вас як йдуть справи з легкість для читання тексту?

PS: На днях мій блог зламали і опублікували спамний пост від мого імені. Поспішаю принести всім читачам вибачення, якщо цей пост потрапив в їх RSS стрічку. Надалі команда Сео Прес постарається не допускати цього.

PPS Та й ще тема з спектральної домішкою , Коли один і той же сайт два рази присутній в ТОП 10 за рахунок попадання в Спектр за некомерційним ІНТЕНТ, схоже виявилася звичайним глюко-багом Яндекса. По крайней мере, такої картини у видачі вже не спостерігається.