Школа
Интерфейс

Смена иллюстраций при переключении абзацев в книгах издательства бюро

Здравствуйте, Илья!

Скролл страниц в книгах Бюро периодически превращается в переключение абзацев (либо другого элемента, но в качестве примера будет абзац) в пределах одного разворота. Одновременно со сменой абзаца часто меняется иллюстрация. Я, как читатель, заметил за собой два типичных сценария в такой ситуации:
1. Прочитал абзац и сразу переключил интерфейс к следующему. То есть во время чтения абзаца я вижу соответствующую ему иллюстрацию. Но когда вдруг последний абзац не выделяется, потому что для него не предусмотрена иллюстрация, я случайно открываю следующий разворот, а я не хотел этого делать не дочитав.

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

Внизу есть точки‑индикаторы. Также разворот слегка поднимается вверх, намекая на следующий. Но это всё не помогает избегать ошибок. Приходится держать в голове состояние интерфейса, а не задачу.

Можно ли назвать это модальностью? И все ошибки, которые я совершаю в первом и втором сценарии — модальными? Если да, то как это можно исправить?

Денис Данилов
9 июля 2019
👁 4695   🗩6
Интерфейс

Смена иллюстраций при переключении абзацев в книгах издательства бюро

Здравствуйте, Илья!

Скролл страниц в книгах Бюро периодически превращается в переключение абзацев (либо другого элемента, но в качестве примера будет абзац) в пределах одного разворота. Одновременно со сменой абзаца часто меняется иллюстрация. Я, как читатель, заметил за собой два типичных сценария в такой ситуации:
1. Прочитал абзац и сразу переключил интерфейс к следующему. То есть во время чтения абзаца я вижу соответствующую ему иллюстрацию. Но когда вдруг последний абзац не выделяется, потому что для него не предусмотрена иллюстрация, я случайно открываю следующий разворот, а я не хотел этого делать не дочитав.

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

Внизу есть точки‑индикаторы. Также разворот слегка поднимается вверх, намекая на следующий. Но это всё не помогает избегать ошибок. Приходится держать в голове состояние интерфейса, а не задачу.

Можно ли назвать это модальностью? И все ошибки, которые я совершаю в первом и втором сценарии — модальными? Если да, то как это можно исправить?

Денис Данилов
9 июля 2019
👁 4695   🗩6
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
 13
13
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

Такие развороты мы называем разворотами с «якорями»:

При прокрутке такого разворота сменяющие друг друга картинки иллюстрируют последовательно выделяющиеся фрагменты текста.

С якорями действительно есть проблемы. С выхода первой книги мы сделали несколько улучшений, в том числе добавили точки‑индикаторы, о которых вы пишете, но всё равно встречаются развороты, которые могут сбить с толку. Идеального решения мы пока не нашли, так что если уважаемые советчики предложат что‑то дельное, мы с радостью рассмотрим.

Различное поведение разворотов с якорями и без можно назвать модальностью в том смысле, что один и тот же жест, нажатие ↓, иногда вызывает переход к следующему якорю, а иногда — переключение разворотов. И конечно, если вы привычно жмёте ↓, ожидая переключения картинки, а вас перематывает на следующий разворот, это модальная ошибка.

Важная идея, заложенная в книжный движок — линейное непрерывное чтение: независимо от того, прокручивает ли читатель развороты или листает стрелкой ↓, он должен последовательно увидеть всё, о чём пишет автор. Для нас жест ↓ — это команда «дальше», и она всегда переключает на то, что дальше. Если выбрать отдельный жест для листания якорей, например стрелки ← в стороны →, читатели начнут вообще пропускать какие‑то примеры, потому что не обратят внимания на наличие этих якорей. И модальность проявится уже иначе: иногда, чтобы читать дальше, надо нажимать ↓, а иногда →.

Мы стараемся быть внимательными на уровне редактуры: иногда можно объединить или разделить абзацы или переформулировать что‑то так, чтобы связь между текстом и картинкой была очевидной. Если у вас есть конкретные развороты, на которых поведение якорей стало для вас сюрпризом, поделитесь, мы подумаем, как улучшить.

ИнтерфейсПрокрутка и листалка
Полезно
 13
13
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Может просто снимать выделение с предыдущего абзаца, если у следующего абзаца нет иллюстрации? Это будет индикатором, что всё работает. Не будет ощущения, что что‑то сломалось, так как нажатие ↓ подкрепится сменой состояния выделенного абзаца. Следующее нажатие ↓ перелистнёт страницу, а через несколько абзацев сформируется привычка.

Два варианта:

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

  2. текст, который связан с изображениями, иного цвета — например, серый, а не чёрный. Когда он прочитывается (вместе с изображением) — становится чёрным. Таким образом, понятно, что если впереди один серый абзац и один чёрный, то первое нажатие клавиши вниз приведёт к появлению новой картинки (и серый абзац почернеет), а второй нажатие перелистнёт страницу (так как второй абзац и так был чёрным, а значит, картинки за ним не стоит). При этом, если человек просто хочет прочитать всю страницу взглядом, без учёта изображений, он может это сделать — текст уже весь виден.

Часто сталкивался с непредвиденным перелистыванием страницы при нажатии на стрелку. Может быть попробовать назначить на стрелку все абзацы? Таким образом можно избавиться от непредвиденного перелистывания страницы, а если на абзаце нет никакого экшена, ничего страшного. Картинка меняется — глаз видит. Не меняется — читаешь дальше и точно видишь, в какой момент перейдешь на другую страницу.

Мне кажется, не нужно торопиться переключать читателя на следующий разворот. Например, перед переходом к нему как‑то намекнуть, что дальнейшее нажатие «↓» покажет следующий разворот.

Кроме того, неприятно, когда, случайно перейдя на следующий разворот и нажав клавишу «↑», возвращаешься не к предыдущей позиции, а к началу разворота. Это тоже контринтуитивно и неудобно.

Можно символизировать наличие иллюстрации или примера самим абзацем или каким‑то элементом возле него.

Если текст, на котором сосредоточено всё внимание во время чтения, будет сам подсказывать, что для него есть иллюстрация или пример, то читатель будет узнавать об этом самым естественным путём — дочитав до выделенного фрагмента.

Можно в начале абзаца с примером поставить иконку или добавить второе состояние фрагмента с примером — неактивное. Получится три состояния: обычный текст, текст с примером и текст с примером, который сейчас на экране. Грязновато получается, правда.

Или просто перенести точки‑индикаторы к абзацам. Самый удачный вариант, как мне кажется.

Оказывается, картинку из комментария нельзя увеличить. Поэтому вот картинка, которую увеличивать не нужно:

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы