Ответ
Логический конец: как избежать ошибок в UX дизайне Опции темы
Старый 21.03.2016, 21:22
  #1
Nataly
 
Регистрация: 30.07.2014
Сообщений: 474

Логический конец: как избежать ошибок в UX дизайне
Ошибки в UX часто остаются незамеченными, потому что они неявные в отличие от, например, не открывающегося изображения, ошибок в слове, неработающей формы. Нет, UX ошибки – основа всего.

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

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

Что такое «False Bottom»?

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

Обычно когда говорится о False Bottom, имеется в виду вертикальное прокручивание. Ведь, в конце концов, термин содержит слово «дно». В связи с ростом объемов мобильного трафика, горизонтальная прокрутка теперь также актуальна. Сейчас возможно наличие контента справа или слева от видимого экрана. По этой причине мы будем использовать термин «логическое завершение».

Насколько распространен логический конец?

Вопреки распространенному мнению, посетители любят прокручивать страницу. Это их вторая натура, ожидаемая часть их онлайн опыта. В исследовании, основанном на 25 млн сеансов по всему миру, ChartBeat обнаружил, что более 70% посетителей начинают прокручивать страницу еще до того, как она загрузилась...





Huge обнаружил, что почти все посетители прокручивают страницу, вне зависимости от имеющегося на сайте направления прокрутки...





Rebecca Gordon, участница исследовательской группы в Huge, сделала вывод, что посетители делают прокрутку страниц, но контекстуальные сигналы по-прежнему важны:

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

Дизайнеры должны выбрать подсказки для скроллинга на основе контента, категории бизнеса и общего дизайна. Содержит ли контент блок с текстом, изображениями или видео? Это сайт для электронной коммерции, публикации статей или новостей? Как визуальные подсказки сочетаются с существующими элементами дизайна? Все эти переменные влияют на оптимальное размещение и эффективность стимулов для прокрутки».


Когда встает вопрос о направляющих сигналах, вы должны учитывать два фактора:

1. Насколько мотивирован посетитель?

2. Насколько хорошо посетитель знаком с вашим продуктом/услугой/компанией?

Чем более они мотивированы, чем дальше стоят в воронке продаж, тем меньше вероятность того, что они будут скроллить. Почему? Потому что им не нужна дополнительная информация, у них достаточно мотивации, и они знают, чего хотят. Они, вероятно, сразу же нажмут «Pricing», «Demo» или «Products» или зайдут в свою электронную почту без прокрутки.

Аналогично, чем лучше посетители знакомы с вашим продуктом/услугой/компанией, тем меньше требуется исследований. Скорее всего, домашнюю страницу сайта будет прокручивать тот, кто слышит о вас впервые.

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

Я готов поспорить, что число тех, кто достигает «конца страницы» гораздо ниже. Почему? Потому что логический конец может быть не только на первом экране. Можно наполовину прокрутить страницу и испытать опыт логического конца.

По словам Zoltan Gocza из UX Myths: «Чтобы убедиться, что люди будут скроллить, необходимо следовать определенным принципам дизайна и предоставлять контент, который будет заинтересовывать посетителей».

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





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

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

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

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

Josh Schwartz из Chartbeat демонстрирует это, показывая, что посетители, которые прокручивают страницу, более вовлечены на втором экране:

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





9 наиболее распространенных примеров логического конца

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

1. Огромные фото героя

Этот случай, пожалуй, наиболее распространен, особенно среди технических стартапов. Огромные фото занимают всю область первого экрана. Как правило, они включают в себя краткий заголовок и кнопку с призывом к действию или форму для захвата email адреса. Ниже вы видите пример главной страницы Mapbox...





При одном взгляде на нее, могли бы вы предположить, что на втором экране имеется какой-то контент? Наверное, нет. Но он там, конечно, есть. Чтобы быть точнее 9 блоков с контентом.





Неужели весь этот контент не важен для того, кто хочет начать пользоваться продуктом? Если нет, то почему он скрыт ниже логического конца?

2. Слишком много пустого пространства

Если имеется слишком много пустого пространства вокруг блока с контентом, несложно предположить, что ниже или справа/слева от него ничего нет. Тенденции в сторону минималистского дизайна сделали упор на включение белого пространства в дизайн.

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





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





Простота дизайна в данном случае работает против юзабилити. Белое пространство может быть полезно, но вы также можете зайти слишком далеко в неправильном направлении. Обратите внимание, что мне пришлось уменьшить масштаб страницы до 50%, чтобы сделать скриншоты.

3. Объявления, призывы к действию и знакомые «выводы»

Если вы регулярно читаете ConversionXL, вы рассматриваете блок с био автора, как «вывод». Это сигнал о том, что статья окончена. На других сайтах в качестве подобного «вывода» может выступать набор объявлений или текстовый призыв к действию или рекомендованные статьи. А теперь представьте, что блок с био автора помещен в середине статьи. Вот случайно выбранная статьи с сайта Forbes...





В середине статьи появляется слайдер «Recommended by Forbes». Обычно это должно происходить в конце статьи. После того, как я закончил читать, сайт должен показать мне некоторые другие статьи, которые мне бы хотелось прочитать, основываясь на той статье, которую я только что прочитал.

В данном случае этот общепринятый «вывод» вовсе не является таковым. Так как часть статьи остается непрочитанной. Cosmo делает нечто подобное...





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

Да, Cosmo идет на шаг дальше, чем Forbes, добавляя фразу «ADVERTISEMENT – CONTINUE READING BELOW» выше рекламы. Но все равно, она едва различима и может быть проигнорирована.

4. Горизонтальные линии

Горизонтальная линия, которая распространяется на весь экран, сигнализирует о логическом конце. Хотя они часто используются для того, чтобы сигнализировать о конце раздела, нетрудно представить, что посетитель может интерпретировать это как конец самой страницы. Различные цветные блоки контента являются лучшим решением. Вот как выглядит нижняя часть первого экрана Undullify...





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





Интересно, что метод горизонтальной линии не используется снова. Вместо этого, фон блоков контента раскрашивается в разные цвета, применяется белое пространство и др.

5. Стрелка «вернуться к началу»

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

Если вы регулярно читаете ConversionXL, вы знакомы со стрелкой «К началу», которая следует за вами, как вы читаете...





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

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

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

Теперь посмотрите, как Semplice использует стрелку «вернуться к началу» на главной странице...





Можете ли вы найти ее? Она есть, но из-за темного фона, ее не видно. При прокрутке страницы, вы видите, как она появляется...





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

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

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

Katie Sherwin из Nielsen Norman Group объясняет:

«Несмотря на то, что горизонтальная прокрутка приемлема в некоторых ситуациях, ее следует применять с осторожностью. Знайте: горизонтальная прокрутка на ПК - одно из немногих взаимодействий с сайтом, которые постоянно генерируют негативные отзывы пользователей».

Существует четыре примера горизонтальной прокрутки: карусели, страницы с ценами, личные портфолио и отказ от проведения контроля качества (QA).

6. Карусели

Peep написал статью под названием «Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad» пару лет назад. К сожалению, эта «фишка» укоренилась.

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

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





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

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

7. Страницы с ценами

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

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

Большинство людей не ищут горизонтальную прокрутку, поэтому им легко ее пропустить. Если вы посылаете 9000-120000 писем в месяц, у SendinBlue для вас есть четыре разных тарифных плана...





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





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

8. Личное портфолио

Личные портфолио - место для дизайнеров и фотографов, где они показывают свои творческие способности. Часто это предполагает «нарушение формы» и горизонтальную прокрутку. Вот страница портфолио дизайнера и разработчика Dean Oakley...





Вы не можете прокручивать вверх или вниз. Я пытался прокручивать горизонтально нажатием на изображение справа. Вместо этого, я был перенаправлен на новую страницу. Затем, я заметил кнопки «My Work» и «Contact». Я нажал на «My Work» и страница автоматически прокрутилась к этому разделу. Тогда я нажал один раз и был переведен к другим примерам данной работы...





Возможность добраться до страницы «Contact» исчезла. Чтобы вернуться к главному экрану, мне нужно постоянно нажимать кнопку «Назад», чтобы дойти до этой страницы. И Dean обладает десятком работ в портфолио, так что это требует довольно много усилий. Неплохая задумка, но UX явно страдает.

9. Отказ от проведения контроля качества

Согласно Conversion Rate Experts, горизонтальный логический конец постоянно возникает потому, что маркетологи не в состоянии контролировать качество...

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

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

1. Зайдите в Google Analytics за подсказкой.

Какие наиболее популярные устройства/браузеры/разрешения имеют удивительно низкий коэффициент конверсии?

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

3. Проведите пользовательское тестирование, если вы не в состоянии идентифицировать проблемы.

4. Теперь исследуйте работу сайта на других браузерах и устройствах. Только потому, что вы не используете устаревшие версии IE, это не значит, что никто из пользователей также этого не делает.

Возможно, стрелка справа видна вам, но не видна 5% посетителей, использующих меньший размер экрана. Проведение контроля качества гарантирует, что у вас не возникнет подобных проблем. Для эвристического анализа можно использовать процесс Chrome Inspect Element, описанный здесь.

Как стимулировать продолжение действий на сайте

Начните с оценки текущего состояния прокрутки с помощью карты скроллинга (можно использовать специальный инструмент или даже Диспетчер тегов Google).

Спросите себя...

• Где по идее прокручивание должно остановиться?

• Какой блок контента расположен в этом месте?

• Совпадает ли это с логическим концом?

• Почему?

• Что можно сделать, чтобы исправить это?

• Скроллят ли вообще посетители по горизонтали?

• Пытаются ли они сделать это?

• Кликают ли они на кнопки горизонтальной прокрутки, на карусели?

Теперь, когда вы знаете, с чем нужно работать, вы можете начать оптимизировать.

1. Используйте сильные направляющие сигналы

Направляющие сигналы являются довольно распространенными. Вы могли часто видеть стрелку или «Подробнее» на главной странице. К сожалению, не все управляющие сигналы одинаковы. Использования их не достаточно... вы должны использовать сильные направляющие сигналы. Взгляните на этот пример от Nielsen Norman Group...





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

• Есть ли контент ниже или рядом с этой точкой?

• Будет ли данный контент интересным/ценным для меня?

• Как долго я могу прокручивать страницу?

Вот домашняя страница Exploding Kittens...





Вы видите начало стрелки, верно? Вот остальная часть страницы...





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

2. Изучите UX прототипы

UX прототипы есть везде. Когда в последний раз вы посещали сайт электронной коммерции, и корзина была не в верхнем правом углу? Поиск рабочих прототипов в отрасли – ваша ответственность. Далее, сделайте все возможное, чтобы соответствовать им.

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





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





После того, как я первый раз нашел этот сайт, я вернулся на него спустя 12 часов. Я был в не меньшем замешательстве в отношении прокрутки, чем 12 часов назад. Вот что случается, когда вы думаете, что посетители быстро «схватят» то, что не соответствует прототипу. В отличие от этого, вот история Snapchat...





Поскольку это Snapchat, я знаю, что могу кликнуть, чтобы просмотреть следующий элемент. Контекст и прототип делают UX простым даже без направляющих сигналов. Что я не знаю, как пользователь Snapchat, так это как читать саму статью, поэтому слово «READ» появляется под изображением стрелки «Наверх».

Когда я провел пальцем вверх, я получил это...





Чем больше вы будете знать о прототипах, тем более интуитивно понятным станет UX и тем меньше логических концов будет случайно создано.

3. Попробуйте использовать «Cut-Off Look»

Если вы используете Netflix или iTunes, вы должны быть знакомы с «Cut-Off Look». Его смысл заключается в том, что если элемент отображается «обрезанным» - это указание для прокрутки.

Согласно Conversion Rate Experts, это работает на уровне интуиции. По их мнению, если элемент захватывает нижнюю линию страницы, это дает сигнал пользователю о том, что ниже есть продолжение. Взглянем на то, как iTunes делает это...





Вы видите, что обложки альбомов ниже «New and Noteworthy» обрезаны, как и баннеры слева и справа от баннерной рекламы The Struts. Так как все эти элементы явно не целостны, очевидно, что требуется горизонтальная прокрутка.

4. Разработайте паттерн/цикл

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





Иконка, заголовок выделен желтым цветом, 3-4 строки описания. Повторение.

Вывод

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

1. Оцените то, как скроллят и кликают посетители на данный момент с помощью специальных инструментов.

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

3. Оцените пустое пространство вокруг блоков контента. Возможно, что его там так много, что посетитель предположит, что достиг конца страницы?

4. У вас есть «общеизвестные выводы», например, реклама, призывы к действию, статьи, рекомендации и др. в середине страницы? Удалите их.

5. Если у вас есть карусель или слайдер, убедитесь, что их легко распознать, и ограничьте объем усилий, необходимых для использования данных элементов. Как вариант, удалить их полностью.

6. Проведите анализ качества, чтобы убедиться, что сайт отображается должным образом на каждом устройстве/браузере/разрешении.

7. Не забывайте о UX прототипах. Выявите те, которые имеют отношение к вам и сделайте все возможное, чтобы соответствовать им.

8. Если есть горизонтальная прокрутка, попробуйте использовать «обрезанные» изображения или направляющую стрелку.

9. Разработайте визуальный паттерн/ритм, чтобы улавливать ожидания.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как настроить Wunderlist для отслеживания ошибок Nataly Статьи 0 25.02.2015 09:50
Как избежать 9 грубейших SMM ошибок annasty Статьи 0 24.09.2014 11:44
Вот и пришел конец эпохи Winamp Ребиллер Сервисы 16 20.12.2013 22:21
15 распространённых ошибок пользователей WordPress stomatolog Хостинг 6 02.02.2013 12:45
Как избежать падение позиций сайта в поисковиках? dangerous Статьи 0 31.03.2012 02:06

Метки
false bottom, ux дизайн, логический конец, прокрутка, сайт, скроллинг, юзабилити


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 00:16. Часовой пояс GMT +3.