Юзабилити чтения: о ширине текстовой области

Пост о том, как сделать чтение своего ресурса более удобным с помощью уменьшения ширины активной текстовой области.

Теория

Месяц назад я открыл для себя скорочтение. Штука оказалась нереально полезной и приятной — рекомендую абсолютно всем. Для обучения не нужны никакие курсы, с головой хватает теоретических книг и живых текстов для практики.

Многие из книг начинаются с типирования и объяснения механизмов чтения. Для большинства людей характерно обычное построчное чтение, при котором каждая из строк читается последовательными областями, по которым «прыгает» взгляд при движении глаз слева направо:

Отсюда можно вывести два весомых преимущества нешироких строк текста:

1. Экономия времени при возвращении и концентрации на начале следующей строки.

2. Строка воспринимается лучше и быстрее при меньшем числе «прыжков». Связанно это с тем, что при трёх-четырёх прыжках строка находится в поле периферического зрения, и мозг сохраняет относительную навигацию по всему тексту.

Практика

На практике возникает проблема с чтением резиновых сайтов — текст через весь экран, размером в 100 символов в ширину, читается с большим трудом. Приходится сужать страницу до половины экрана, что не всегда удобно, так как под окном браузера часто открыты другие программы.

Что бы такого неудобства не возникало, при вёрстке страниц нужно воспользоваться следующими вариантами:

1. Ограничивать размер текстового блока по заданной максимальной ширине и центрировать его. При этом появляется много пустого места слева/справа, однако для чтения это даже хорошо — с поля зрения пропадают отвлекающие элементы.

2. На больших разрешениях можно увеличивать размер шрифта, ведь для восприятия важна не абсолютная ширина строки, а её соотношение к шрифту.

3. Если возможно, сверстать текст в две колонки. Данный приём позволит сделать строки удобочитаемыми при полном использовании пространства.

Скорость и удобство чтения важны намного больше, чем веб-два-нольность ваших (или чужих) иконок и кнопок. Жаль, что мало кто это понимает.


Комментарии:

Сергей М.
Ну, на максимальную ширину колонки много что влияет, кроме количества символов (читай – размер шрифта, разреженность и фактическая ширина), например, междустрочное. Но в вебе не принято верстать в две колонки (да и получается это даже неудобнее, если текста больше, чем экран – хотя в случае промо-текстов может иногда работать). Собственно, выход давно найден и пользуется половиной верстальщиков – минимаксовая резина, которая сочетает преимущества простой резины и фиксированной верстки.

Batonoman
Сергей, реально не видел ни одного адекватного ограничения по ширине, которое было бы сделано именно для удобного чтения (грубо говоря до 600 пикселей для текстовой части при стандартном размере шрифта). Все они намного больше и используются для того, что бы на Full HD мониторах при их 1920 пикселях в ширину страница имела хоть какой-нибудь приемлемый вид.

Сергей М.
“половиной” = “лишь некоторыми”. что-то заговорился. конечно, большая часть “дизайнеров” в типографике не смыслят, оттого и минимакс неправильно пользуют.

Sombra
согласна. разбивать на колонки необходимо.
гораздо легче читать.
но на картинке справа внизу выравнивание Justify.
justify-justify, а растяни-ка мне пробелы до воооот такой ширины!
(с) Бизнес-линч
пробелы больше, чем слова. гораздо труднее читать.
мне кажется, лучше уж выравнивание Left, зато одинаковые пробелы.

Sombra
кстати, чтоб отправить комментарий, надо нажать кнопку “оставить”.
в заголовке “оставить свой комментарий” все нормально.
когда я увидела кнопку оставить, я задумалась.
звучит, как “отменить”, “оставить это дело”.
советую изменить на “отправить” или что-то в этом духе, вы лучше меня разбираетесь в психологии слов.

Batonoman
Sombra, всё просто. Выравнивая текст по левому краю в левой колонке, получим справа рваный край, что недопустимо, потому что есть еще и правая колонка, левый край которой должен графически с этим краем стыковаться.

Сами же колонки настолько узкие, что растягивать до «вооот такой ширины» просто не получится. И вообще, если бы это действительно было не удобно, то печатные журналы вряд ли полюбили бы такой формат.

Насчёт «Оставить», приведу некий контр-аргумент. Человек сначала читает «Оставить свой комментарий», тогда при чтении кнопки «Оставить!» у него возникает ассоциация с тем, что он только что видел, а именно, оставить комментарий. А значит всё хорошо) На самом же деле, данный вопрос относится к вещам уж очень малого порядка.

Sombra
Да, Джастифай очень широко используется.
Он очень удобен.
Огромные пробелы очень мешают, но есть прекрасное средство избавления от них – переносы, которыми иногда забывают пользоваться.

Человек сначала читает “Оставить свой комментарий”, потом думает, что написать, долго перечитывает свой пост, уже забывает о заголовке, а потом видит надпись “Оставить”. “Я это все так долго писал и перечитывал, чтобы оставить?” Потом доходит, что оставит стоит в значении “отправить”, но след недоумения остается.

Но это все мелочи. Никаких претензий не имею. Сайт отличный, вы молодец.

Batonoman
Есть очень хорошая умная цитата по этому поводу: «Нельзя заставлять посетителя думать, но также недопустимо считать посетителя слабоумным».

Если человек решил оставить комментарий — он его оставит. Тем более, что кнопка «Оставить!» просматривается непосредственно перед публикацией, когда комментарий уже написан.

Sombra
Ок. Согласна.

KnavishKola
С “Оставить” никакой проблемы не вижу :)

pongo
А какая ширина рекомендуется? Сколько слов должно быть в строке? Посмотрите, пожалуйста, мой жж (в ссылке), может мне его поуже сделать?

Batonoman
pongo, за каждый скачок взгляд схватывает в среднем два слова (предлоги, приставки не в счёт). Лучше всего иметь по 3-4 скачка на строку — это около 6-8 слов в строке. Например, на Батоноблоге сейчас в среднем получается слов 10, и я планирую это число уменьшить.

у вас в ЖЖ ширину можно спокойно уменьшить на одно слово (пикселей 70), тем более, что этому не мешает никакое визуальное разбиение страницы на блоки.

kruglov
А подскажите, где почитать как ограничить макимальную ширину. Это делается через CSS?

Batonoman
kruglov, да, через CSS, свойство max-width. Почитать, например, здесь

kruglov
Спасибо за подсказку!

KA_Ginri
Много итересного на вашем блоге , буду заходить почаще.

Дима
Вот и попал сюда, чтобы узнать, каким атрибутом хтмла делают максимальную ширину? уже 10 лет работаю с ним и только сейчас задумался :)

Другие посты по этой теме: