Иллюзия завершенности: что это и как этого избежать

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

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

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

Определение: иллюзия завершенности 

Иллюзия завершенности происходит, когда нам кажется, что мы видим весь контент на экране, но на самом деле за пределами видимой области находится еще информация. Этот термин ввел Брюс Тоньяццини (Bruce Tognazzini) в 1998 году. Эта иллюзия случается, когда визуальный дизайн не может провести человека к дополнительному контенту за рамками экрана. Думать, что увидел весь контент — когда есть еще — это серьезный юзабилити-фейл: благодаря ему юзеры не увидят релевантную информацию и могут не достичь желаемых целей. 

Nielsen Norman Group предостерегают дизайнеров от таких юзабилити-ошибок вот уже 18 лет, так зачем снова писать об этом сейчас? Да потому что сайты совершают эти же ошибки и в наши дни, и NNG наблюдает, как пользователи вновь и вновь натыкаются на иллюзии завершенности. Так давайте уже забьем последний гвоздь в крышку этого гроба, и наконец ликвидируем эту иллюзию с просторов всемирной паутины, чтобы не пришлось вновь возвращаться к этой проблеме в 2034 году.

Иллюзия завершенности в вертикальном измерении

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

Вот перечень стилевых ошибок, рождающих иллюзию завершенности: 

Графика и видео с крупными объектами. Этот свежий тренд заставил многие корпоративные сайты разместить визуально привлекательные штуковины в первом экране. Этот подход часто «выталкивает» важный контент за рамки экрана, вне поля зрения, и не предлагает явных намеков на необходимость прокрутки. 

Фальшпол Maple 

Maple.com, служба доставки еды в Нью-Йорке, имеет в первом экране автоматически проигрывающееся видео, занимающее всю площадь экрана. И на всех устройствах конец первого экрана совпадает с нижним краем дисплея. 

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

Мы попросили пользователей посетить этот сайт и сказать, какие услуги он предлагает. Шестеро из восьми испытуемых не поняли, что эту страницу можно прокрутить вниз. Из-за того, что больше никаких кнопок или призывов к действию не было на экране, все наши испытуемые выбрали кнопку Get Started (Начать) и их встретил ряд модальных окон, где нужно было ввести личные данные - и в итоге узнать, что этот сервис недоступен в их регионе. 75% испытуемых были расстроены и не только впустую потратили время и силы, вводя свои данные на сайте, но и не смогли понять, чем же все-таки занимается компания.

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

Фальшпол Virgin America 

На virginamerica.com есть горизонтальные линии во всю ширину страницы, которые разделяют блоки. Их можно истолковать как намек на то, что контента больше нет. 

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

Фальшпол Urban Outfitters 

Urbanoutfitters.com - красными тенями выделены блоки контента. Из-за больших разрывов они кажутся завершенными, хотя дополнительный контент существует на странице.

Разрывы в потоке контента. Рекламные блоки, собственные промо-баннера, кнопки «поделиться в соцсетях» могут заставить пользователей думать, что полезного для них контента на данной странице больше нет. Эффект усиливается, если реклама достаточно велика, и из-за этого сложно увидеть, что находится под ней — особенно на мобильных устройствах с небольшими экранами. К тому же, если рекламный баннер расположен в логичном для финала месте страницы (например, в конце статьи), это может убедить пользователей в том, что полезного контента здесь больше нет (хотя под рекламкой может находиться блок с комментариями или сопутствующий контент).

Фальшпол Salon 

Salon.com выводит крупные рекламные блоки в середине контактной страницы. Неясно, следует ли за рекламой продолжение статьи.

Иллюзия завершенности в горизонтальном измерении

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

Горизонтальный свайп Yahoo Digest 

При просмотре новостных статей в iOS-приложении Yahoo Digest человеку нужно совершить свайп, чтобы увидеть следующую статью. Этот жест очень похож на тот, которым убирают с колоды карт верхнюю карту, чтобы посмотреть, какая карта лежит под ней (и поэтому этот навигационный паттерн еще называют «колодой карт»). В этом случае на экране не хватает визуальных указателей возможности горизонтального свайпа.

На десктопах горизонтальная навигация чаще всего ассоциируется с каруселями. И для того, чтобы человек ясно понимал, как работает карусель и когда она кончается, нужны подсказки. 

Карусель Novartis 

Novartis.com - точки внизу являются слабыми подсказками для карусели: они незаметны, а стрелки становятся видны только при ховере. Но есть и плюсы: сайт успешно намекает на вертикальный скролл, показывая верхушки блоков (Corporate, Careers, News и Research) под каруселью. 

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

Горизонтальный скролл Second Story 

Secondstory.com использует горизонтальную структуру. Не совсем очевидно, что справа от видимой части экрана существует дополнительный контент. Для этого надо увидеть желтую стрелку справа и понять ее назначение, а это нелегко, поскольку она слабо заметна среди яркой графики. Ну, или ловко попасть курсором в скролл-бар.  

Убедитесь, что ваши страницы намекают на продолжение, а не на завершение

• Избегайте броского контента на весь экран. Когда используете яркие баннера, карусели или видео в первом экране, убедитесь, что следующий элемент контента виден хоть немного, чтобы пользователь скроллил дальше.
• Помните о контрастных линиях или обширных белых пространствах между блоками контента. Эти визуальные эффекты могут быть неправильно истолкованы - как завершение релевантного контента. 
• Будьте осторожны с разрывами блоков контента. Если вам нужно разорвать блоки рекламой или соцссылками, донесите до пользователей, что дальше на странице есть еще контент. 

Подсказка Delish 

Delish.com: реклама внутри статьи снабжена подсказкой («продолжение статьи - ниже»). Хотя текст подсказки мог бы быть более контрастным. 

Делайте прозрачные намеки, что горизонтальный свайп необходим. Важная информация не свойственна каруселям и прочим виджетами с горизонтальной прокруткой/свайпом. Ведь посетители иногда ложно интерпретируют даже очевидные и привычные указатели, плюс люди часто неуверен, чего ожидать от дополнительного контента.  Если вы все-таки используете карусель, убедитесь, что люди точно поймут, что дополнительный контент на странице существует: 

• Пусть он выглядывает под каруселью. 
• Выведите список заголовков, отражающий содержание/темы всех слайдов в карусели. 
• Пусть стрелки и/или radio buttons в вашей карусели будут очевидными и заметными. 

Карусель Netflix 

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

Тестируйте интерфейсы на разных устройствах, чтобы убедиться что они подходят для любой ширины экрана.