Download - 137 Readability
![Page 1: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/1.jpg)
Readability
137 вебинар UX Russia
Мария Новикова, Юлия Слепова
29.09.2011
![Page 2: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/2.jpg)
Здороваемся
Мария Новикова Юлия Слепова
![Page 3: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/3.jpg)
Определение
• Readability
• Удобочитаемость
• Читабельность
– свойство текстового материала, характеризующее лёгкость восприятия его человеком. (Wikipedia)
![Page 4: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/4.jpg)
Для чего нужно это знать?
![Page 5: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/5.jpg)
Общий принцип удобочитаемости
• Если элемент можно убрать, его нужно убрать
![Page 6: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/6.jpg)
Контрастность
• Обеспечьте хорошую контрастность цветов текста и фона.
![Page 7: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/7.jpg)
Контрастность
![Page 8: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/8.jpg)
Контрастность
![Page 9: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/9.jpg)
Контрастность
• Если цвета шрифта и фона подобраны неправильно, сглаживание создаёт вокруг букв рамку
• Для подбора цветов пользуйтесь правилами цветовых гармоний
![Page 10: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/10.jpg)
Размещение на странице
• Не перегружайте страницу текстами
• Частое прокручивание отвлекает
• Разбивайте большие тексты на меньшие части на разных уровнях навигации
![Page 11: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/11.jpg)
Структура текстов
• Наглядная структура должна отражать внутреннюю структуру текстов
• Используйте:– подзаголовки,
– разбивочные полосы,
– дополнительные пробелы
– визуальные акценты и т.д.
![Page 12: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/12.jpg)
Блоки и параграфы
• Один параграф – один вопрос
• Первое предложение параграфа отражает его тему
Междустрочное расстояние
Расстояние между заголовком и текстовым блоком
Расстояние между разными абзацами
Расстояние между разными текстовыми блоками
![Page 13: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/13.jpg)
Кернинг и лидинг
• Не указывайте кернинг (межбуквенноерасстояние) или лидинг (межстрочное расстояние) меньше значений по умолчанию
• На веб страницах удобен лидинг 130%
• Чем длиннее строка, тем больше лидинг
![Page 14: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/14.jpg)
Длина строки и выравнивание
• Идеальная длина строки 9-10 слов (50-70 символов)
• Абзацы не начинаются с красной строки
• В интернете принято выравнивание по левому краю
![Page 15: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/15.jpg)
Создание списков
• Используйте списки при перечислении более 4 элементов
• Согласовывайте элементы списка в роде, числе и падеже
• Не переборщите:)
![Page 16: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/16.jpg)
Заголовки
• Заголовок и текст –единая смысловая группа
![Page 17: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/17.jpg)
Таблицы
• Сетка таблицы – типичный пример графического шума
1.
2.
![Page 18: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/18.jpg)
Таблицы
• Таблицы любят свободное пространство
3.
4.
![Page 19: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/19.jpg)
Размер шрифта
• Не более 3 размеров шрифта в основном тексте.
• Не используйте шрифты меньше 9pt.
• Для основного текста – не больше 12-14pt.
![Page 20: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/20.jpg)
Гарнитуры шрифта
• Наборные (текстовые, телесные, «хлебные»)
• Акцидентные (выразительные)
![Page 21: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/21.jpg)
Гарнитуры шрифта
• Шрифты:
– Рубленые
– С засечками
• В основном тексте страницы используйте рубленые шрифты
![Page 22: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/22.jpg)
Гарнитуры шрифта
• Не используйте моноширинныешрифты
• Один шрифт или несколько?
![Page 23: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/23.jpg)
Визуальные акценты
• Выделение цветом
• Подчёркивание
• Курсив
• Полужирное начертание
• Заглавные буквы
![Page 24: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/24.jpg)
Визуальные акценты
• И снова не переусердствуйте!:)
![Page 25: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/25.jpg)
Визуальные акценты
• И снова не переусердствуйте!:)
![Page 26: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/26.jpg)
Редактирование текстов
• Простота
– Используйте простые слова и повторяйте их
– Не используйте метафоры и деепричастные обороты
• Лаконичность
– В одном абзаце – не больше 5-6 предложений
![Page 27: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/27.jpg)
Редактирование текстов
• Краткость
– Используйте допустимые сокращения
• Персонализированность
– Используйте местоимения
![Page 28: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/28.jpg)
Редактирование текстов
• Понятность
– Не используйте иностранных слов, специальной терминологии, непонятных аббревиатур
• Нейтральность
– Не употребляйте жаргонных выражений
– Не используйте сарказма и клише
– Осторожнее с идиомами
![Page 29: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/29.jpg)
Редактирование текстов
• Конкретность
– Используйте активный залог
– Приводите примеры
• Грамотность
– Не забудьте проверить орфографию и пунктуацию
![Page 30: 137 Readability](https://reader033.vdocuments.pub/reader033/viewer/2022052223/559bbcb51a28abad1a8b46d6/html5/thumbnails/30.jpg)
Спасибо за внимание!
Вопросы?