137 вебинар UX Russia, посвященный проблеме Readability. Мария Новикова и Юлия Суворова (ранее - Слепова) рассказывают о том, как сделать текст на сайте удобным и приятным для чтения

1. Readability
137 вебинар UX Russia
Мария Новикова, Юлия Слепова
29.09.2011

2. Здороваемся
Мария Новикова Юлия Слепова

3. Определение
• Readability
• Удобочитаемость
• Читабельность
– свойство текстового материала,
характеризующее лёгкость
восприятия его человеком. (Wikipedia)

4. Для чего нужно это знать?

5. Общий принцип удобочитаемости
• Если элемент
можно убрать, его
нужно убрать

6. Контрастность
• Обеспечьте
хорошую
контрастность
цветов текста
и фона.

7. Контрастность

8. Контрастность

9. Контрастность
• Если цвета шрифта и
фона подобраны
неправильно,
сглаживание
создаёт вокруг букв
рамку
• Для подбора цветов
пользуйтесь
правилами
цветовых гармоний

10. Размещение на странице
• Не перегружайте
страницу текстами
• Частое
прокручивание
отвлекает
• Разбивайте большие
тексты на меньшие
части на разных
уровнях навигации

11. Структура текстов
• Наглядная структура
должна отражать
внутреннюю
структуру текстов
• Используйте:
– подзаголовки,
– разбивочные полосы,
– дополнительные пробелы
– визуальные акценты и т.д.

12. Блоки и параграфы
Расстояние между разными текстовыми
блоками
Расстояние между заголовком и
текстовым блоком
Расстояние между разными
абзацами
Междустрочное расстояние
• Один параграф – один вопрос
• Первое предложение параграфа отражает
его тему

13. Кернинг и лидинг
• Не указывайте кернинг (межбуквенное
расстояние) или лидинг (межстрочное
расстояние) меньше значений по умолчанию
• На веб страницах удобен лидинг 130%
• Чем длиннее строка, тем больше лидинг

14. Длина строки и выравнивание
• Идеальная длина
строки 9-10 слов (50-
70 символов)
• Абзацы не
начинаются с
красной строки
• В интернете принято
выравнивание по
левому краю

15. Создание списков
• Используйте списки
при перечислении
более 4 элементов
• Согласовывайте
элементы списка в
роде, числе и
падеже
• Не переборщите:)

16. Заголовки
• Заголовок и текст –
единая смысловая
группа

17. Таблицы
• Сетка таблицы – типичный
пример графического шума
1.
2.

18. Таблицы
• Таблицы любят свободное
пространство
3.
4.

19. Размер шрифта
• Не более 3 размеров
шрифта в основном
тексте.
• Не используйте шрифты
меньше 9pt.
• Для основного текста – не
больше 12-14pt.

20. Гарнитуры шрифта
• Наборные
(текстовые,
телесные,
«хлебные»)
• Акцидентные
(выразительные)

21. Гарнитуры шрифта
• Шрифты:
– Рубленые
– С засечками
• В основном тексте
страницы
используйте
рубленые шрифты

22. Гарнитуры шрифта
• Не используйте
моноширинные
шрифты
• Один шрифт или
несколько?

23. Визуальные акценты
• Выделение цветом
• Подчёркивание
• Курсив
• Полужирное
начертание
• Заглавные буквы

24. Визуальные акценты
• И снова не переусердствуйте!:)

25. Визуальные акценты
• И снова не переусердствуйте!:)

26. Редактирование текстов
• Простота
– Используйте простые
слова и повторяйте их
– Не используйте метафоры
и деепричастные обороты
• Лаконичность
– В одном абзаце – не
больше 5-6 предложений

27. Редактирование текстов
• Краткость
– Используйте допустимые
сокращения
• Персонализированность
– Используйте местоимения

28. Редактирование текстов
• Понятность
– Не используйте
иностранных слов,
специальной терминологии,
непонятных аббревиатур
• Нейтральность
– Не употребляйте жаргонных
выражений
– Не используйте сарказма и
клише
– Осторожнее с идиомами

29. Редактирование текстов
• Конкретность
– Используйте активный
залог
– Приводите примеры
• Грамотность
– Не забудьте проверить
орфографию и
пунктуацию

30. Спасибо за внимание!
Вопросы?