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 предложений

Редактирование текстов

• Краткость

– Используйте допустимые сокращения

• Персонализированность

– Используйте местоимения

Редактирование текстов

• Понятность

– Не используйте иностранных слов, специальной терминологии, непонятных аббревиатур

• Нейтральность

– Не употребляйте жаргонных выражений

– Не используйте сарказма и клише

– Осторожнее с идиомами

Редактирование текстов

• Конкретность

– Используйте активный залог

– Приводите примеры

• Грамотность

– Не забудьте проверить орфографию и пунктуацию

Спасибо за внимание!

Вопросы?