12 причин, почему маркетологи не получают финансирование
Previous
выбрать за меня
9 примеров отличного контента от онлайн-ритейла
Next
мобильный интерфейс, слайдеры, юзабилити
Юзабилити

Мобильный интерфейс и слайдеры – насколько они совместимы?

Автор: Денис Давыдов20.11.2015

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

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

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

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

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

Слайдеры и точность

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

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

Слайдеры, мобильный интерфейс, юзабилити

Приложение Delectable

Приложение Delectable создано для того, чтобы пользователи могли оценивать вино различных сортов и марок, выставляя ему оценки. Идея, безусловно, интересная, однако реализация оставляет желать лучшего. Во-первых, не совсем понятно, чем руководствовались разработчики, выбирая оценочную шкалу с диапазоном от 6 до 10. Во-вторых, оценка разбивается до десятых частей балла – к примеру, пользователь может выставить 6,5 или 7,8 баллов. Не говоря о том, что такое дробление не слишком рационально, шкалой с таким диапазоном сложно пользоваться, так как выставить точную оценку действительно очень сложно.

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

Слайдеры, мобильный интерфейс, юзабилити

Приложение Amazon

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

Слайдеры и большой палец

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

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

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

Слайдеры, мобильный интерфейс, юзабилити

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
200%
не уверен
0%
скучно
100%
где автор?
100%
Денис Давыдов
Всем привет! Я Денис Давыдов – автор статей о юзабилити, интерфейсах и интернет-маркетинге. Будучи энтузиастом в сфере электронной коммерции и UX, сотрудничаю с различными российскими компаниями, предоставляя качественный контент и публицистику для веб-проектов. Изучаю актуальную культуру и политику, пишу очерки по мотивам наиболее острых и любопытных феноменов современности.
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.