Upload
maria-novikova
View
201
Download
0
Embed Size (px)
DESCRIPTION
137 вебинар UX Russia, посвященный проблеме Readability. Мария Новикова и Юлия Суворова (ранее - Слепова) рассказывают о том, как сделать текст на сайте удобным и приятным для чтения
Citation preview
Readability
137 вебинар UX Russia
Мария Новикова, Юлия Слепова
29.09.2011
Здороваемся
Мария Новикова Юлия Слепова
Определение
• Readability
• Удобочитаемость
• Читабельность
– свойство текстового материала, характеризующее лёгкость восприятия его человеком. (Wikipedia)
Для чего нужно это знать?
Общий принцип удобочитаемости
• Если элемент можно убрать, его нужно убрать
Контрастность
• Обеспечьте хорошую контрастность цветов текста и фона.
Контрастность
Контрастность
Контрастность
• Если цвета шрифта и фона подобраны неправильно, сглаживание создаёт вокруг букв рамку
• Для подбора цветов пользуйтесь правилами цветовых гармоний
Размещение на странице
• Не перегружайте страницу текстами
• Частое прокручивание отвлекает
• Разбивайте большие тексты на меньшие части на разных уровнях навигации
Структура текстов
• Наглядная структура должна отражать внутреннюю структуру текстов
• Используйте:– подзаголовки,
– разбивочные полосы,
– дополнительные пробелы
– визуальные акценты и т.д.
Блоки и параграфы
• Один параграф – один вопрос
• Первое предложение параграфа отражает его тему
Междустрочное расстояние
Расстояние между заголовком и текстовым блоком
Расстояние между разными абзацами
Расстояние между разными текстовыми блоками
Кернинг и лидинг
• Не указывайте кернинг (межбуквенноерасстояние) или лидинг (межстрочное расстояние) меньше значений по умолчанию
• На веб страницах удобен лидинг 130%
• Чем длиннее строка, тем больше лидинг
Длина строки и выравнивание
• Идеальная длина строки 9-10 слов (50-70 символов)
• Абзацы не начинаются с красной строки
• В интернете принято выравнивание по левому краю
Создание списков
• Используйте списки при перечислении более 4 элементов
• Согласовывайте элементы списка в роде, числе и падеже
• Не переборщите:)
Заголовки
• Заголовок и текст –единая смысловая группа
Таблицы
• Сетка таблицы – типичный пример графического шума
1.
2.
Таблицы
• Таблицы любят свободное пространство
3.
4.
Размер шрифта
• Не более 3 размеров шрифта в основном тексте.
• Не используйте шрифты меньше 9pt.
• Для основного текста – не больше 12-14pt.
Гарнитуры шрифта
• Наборные (текстовые, телесные, «хлебные»)
• Акцидентные (выразительные)
Гарнитуры шрифта
• Шрифты:
– Рубленые
– С засечками
• В основном тексте страницы используйте рубленые шрифты
Гарнитуры шрифта
• Не используйте моноширинныешрифты
• Один шрифт или несколько?
Визуальные акценты
• Выделение цветом
• Подчёркивание
• Курсив
• Полужирное начертание
• Заглавные буквы
Визуальные акценты
• И снова не переусердствуйте!:)
Визуальные акценты
• И снова не переусердствуйте!:)
Редактирование текстов
• Простота
– Используйте простые слова и повторяйте их
– Не используйте метафоры и деепричастные обороты
• Лаконичность
– В одном абзаце – не больше 5-6 предложений
Редактирование текстов
• Краткость
– Используйте допустимые сокращения
• Персонализированность
– Используйте местоимения
Редактирование текстов
• Понятность
– Не используйте иностранных слов, специальной терминологии, непонятных аббревиатур
• Нейтральность
– Не употребляйте жаргонных выражений
– Не используйте сарказма и клише
– Осторожнее с идиомами
Редактирование текстов
• Конкретность
– Используйте активный залог
– Приводите примеры
• Грамотность
– Не забудьте проверить орфографию и пунктуацию
Спасибо за внимание!
Вопросы?