Как многие интернет-магазины «убивают» удобство для пользователя тем, что стандартные элементы интерфейса оформлены неправильно.
Рассказывают эксперты из Baymard Institute.
Проблема вложенного скроллинга
Во время нашего тестирования ведущих интернет-магазинов, мы обнаружили, что одно из главных проблемных мест «юзабилити» — это вложенный скроллинг. Что имеется в виду: когда пользователь прокручивает содержимое страницы целиком – это обычный, стандартный скроллинг. Но когда внутри страницы есть отдельные элементы, которые прокручиваются («скроллятся») независимо от содержимого основной страницы – это вложенный скроллинг, и он доставляет массу проблем пользователям.
Дизайнеры интернет-магазинов обычно используют вложенный скроллинг в случаях, когда им нужно разместить много элементов в ограниченном пространстве.
Типичнейший пример – это колонка выбора параметров, так называемый «фильтр», в каталоге товаров. Как правило фильтр товаров располагается вертикально с левой стороны, хотя в некоторых случаях лучше использовать горизонтальный.
Дизайнеры интернет-магазинов часто используют вложенный скроллинг в фильтрах товаров. Мы обнаружили, что 26% топовых интернет-магазинов США его используют, и это большая ошибка.
Пользователи часто путаются в работе со вложенным скроллингом. Скроллинг внутри скроллинга – это слишком сложно! Более того, состояние одного скроллинга влияет на состояние другого. Например, в зависимости от того, насколько пользователь «проскроллил» всю страницу вниз часть вложенной области со своим отдельным скроллингом (фильтра товаров), может перестать быть видна.
Получается, что пользователям нужно иметь в виду их взаимосвязь, но это точно не упрощает работу со страницей. А все, что не упрощает – плохо для «юзабилити».
5 основных проблем взаимодействия с вложенным скроллингом
1. Недостаток обзора
При использовании вложенного скроллинга в фильтре товаров пользователь не видит целиком, какие опции выбора у него есть. Чтобы эффективно взаимодействовать с таким элементом, пользователь должен запомнить, что есть в этом элементе еще, но сейчас находится за пределами его видимости. Это сложно. Другой вариант – постоянно прокручивать эту вложенную область. Тоже непросто.
2. «Перехват» скроллинга
Вложенные области со скроллингом могут «перехватывать» управление скроллингом себе. Когда пользователь прокручивает всю страницу колесиком мыши, может возникнуть ситуация, когда курсор пользователя попадает в область со вложенным скроллингом, и эта область перехватит управление. Дальше прокручиваться будет вложенная область со скроллингом, а не вся страница.
И наоборот, когда пользователь намеренно прокручивает вложенную область, и она заканчивается, управление прокручиванием может перехватить сама страница, и прокручиваться будет уже страница целиком.
В наших тестах такое поведение скроллинга сильно раздражало пользователей, поскольку очевидно отличалось от того поведения, которое пользователи ждали.
Это же поведение характерно и для планшетов/смартфонов, управляющихся пальцем. Вот пользователь прокручивал страницу, но его палец попал в область со вложенным скроллингом, и вот уже прокручивается вложенная область, а не сама страница. Особенно это типично для виджетов с картами Google и им подобных.
3. «Невидимый скроллбар»
Типичное поведение по умолчанию для полосы прокручивания (так называемого «скроллбара») в iOS, Android и Mac OS X – это «спрятаться при неактивности». То есть, пока область со скроллингом или страница не прокручиваются, скроллбар будет невидим. И пользователь не сможет заранее увидеть, а где вообще на странице есть области с вложенным скроллингом.
Это часто ведет, во-первых, к неожиданному для пользователя поведению (он хотел прокрутить страницу, а прокрутил вложенную область). Во-вторых, это ограничивает для пользователя понимание полного спектра всех возможностей – он может видеть всего 20% вложенной области со скроллингом в фильтре товара, но не понимать, что ее можно прокрутить. У него складывается ощущение, что это все доступные возможности фильтра товаров.
4. Чрезмерно чувствительный скроллбар
В наших тестах многие пользователи предпочитали «схватить» курсором мыши индикатор положения в скроллбаре и, двигая его, осуществлять прокручивание. Это был их метод «борьбы» с неудобством вложенного скроллинга. С технической точки зрения – это вполне возможное поведение пользователя, но в реальности мы видели, что часто скроллбар является «сверхчувствительным», когда малейшее движение мышью приводит к значительному прокручиванию.
Часто это приводило к тому, что пользователи не могли выбрать нужную им опцию, которая прокручивалась таким образом слишком быстро.
5. Попытки пользователя «активировать» скроллбар
Несколько раз мы видели, как пользователи пытаются «активировать» скроллбар, то есть сделать его видимым, кликая во вложенную область. Таким образом они пытались «бороться» с проблемой невидимого скроллбара (см. п. 3). Но поскольку вложенная область – это фильтр товара, то клик в нее, как правило, приводил к выбору какого-то из условий фильтрации товара. Это, конечно же, изменяло показываемый список товаров, чем приводило пользователей в недоумение.
Решение проблемы: «сокращенные списки»
Использование сокращенных списков является предпочитаемым методом демонстрации большого количества параметров в условиях ограниченного места.
Посмотрите на примеры ниже – на сайтах BestBuy и NewEgg пользователь всегда видит весь фильтр целиком (никакого скроллинга внутри фильтра нет).
Поскольку все возможны значения фильтра не уместились на экране, используются «сокращенные списки», то есть списки параметров сокращены до самых популярных, либо требуемых в данном контексте, а остальные доступны под ссылками «See all (Увидеть все)» и «More (Еще)».
Использование сокращенных списков не решает одну из проблем, связанных с вложенным скроллингом, — скрывается часть параметров фильтра. Поэтому правильный дизайн сокращенных списков чрезвычайно важен.
6 принципов дизайна сокращенных списков
Хотя в нашем тестировании сокращенные списки показали себя гораздо лучше вложенного скроллинга, мы также увидели, что есть несколько важных моментов, которые положительно сказываются на удобстве для пользователя.
1. Показывайте до 10 видимых вариантов в каждом списке
Чем меньше у вас разных фильтров, тем больше значений в каждом фильтре вы можете показать до ссылки «Еще».
В наших тестах 6 значений, видимых до сокращения списка, работали относительно неплохо. Там, где значений было 10, пользователям было легче всего. Там, где значений в списке было 15 и более, пользователи испытывали трудности.
2. Используйте явно различимый визуальный стиль ссылки «Еще»
Пользователь должен четко видеть, что это ссылка, и что на нее можно кликнуть, и что клик на эту ссылку будет работать не так, как клик на какое-то значение фильтра. В идеале, ссылка «Еще» должна использовать тот же стиль ссылок, который применяется на всех ссылках вашего сайта по умолчанию. Также желательно, чтобы элементы фильтра использовали другой стиль, поскольку поведение обычной ссылки и элемента фильтра разное.
3. Правильный отступ от значений фильтра.
Ссылка «Еще» должна отстоять от значений фильтра чуть дальше, чем они отстоят друг от друга. Это покажет, что эта ссылка отличается от них. В то же время этот отступ не должен быть слишком большим, чтобы пользователь мог понять, что эта ссылка относится к этим значениям фильтра, а не является каким-то непонятным самостоятельным элементом.
4. Используйте дополнительный визуальный индикатор
Вы можете использовать символ перевернутого треугольника, направленной вниз стрелочки или символ «+». Средний пользователь уже «приучен» в плане интерфейса, что подобные элементы означают или выпадающий список, или раскрытие списка. Эти действия совпадают по смыслу с поведением кнопки «Еще».
5. Попробуйте прием «исчезающего» последнего значения
Эффект исчезающего последнего значения в сокращенном списке показывает пользователю, что это значение не последнее, и там есть другие. Этот эффект будет способствовать привлечению внимания к ссылке «Еще».
6. Не сокращайте последнее значение в фильтре
Если в вашем сокращенном списке есть возможность показать, скажем, 5 значений, а всего их 6, то нужно поменять логику сокращенного списка. Нет никакого смысла «прятать» последнее значение в списке, потому что кнопка «Еще» займет то место, которое могло занять на экране это последнее значение.
Помните: вложенный скроллинг сильно вредит «юзабилити» вашего интернет-магазина. Используйте вместо него сокращенные списки.
По материалам Baymard Institute: статья 1, статья 2
