Недостатки слайдера и правило большого пальца

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

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

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

9 «серийных убийц» коэффициента конверсии посадочных страниц

Случайное сотрудничество

Что такое ползунок (UI slider)? Это элемент управления, с передвигаемым горизонтально роликом либо рычажком, разрешающий поменять такие параметры, как громкость музыки, цена товара, яркость экрана и т. д.

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

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

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

В приложении Kayak употребляется пара слайдеров для фильтра полетов по времени отправления. Слайдеры «прилёта» и «отправления» просят указать конкретный час, а вот слайдер «длительность полета» заставляет пользователей выбирать время с точностью до 60 секунд.

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

какое количество упрочнений им придется для этого приложить?

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

  • Остерегайтесь горизонтальной имитации и прокрутки управления жестами для десктопов

Вправду ли принципиально важно правильное значение?

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

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

Чем шире шкала выбора на ползунке, тем сложнее ввести правильное значение.

Приложение Delectable предлагает пользователям оценить вино по шкале от 6 до 10 с точностью до долей. Кроме того, что людей может смутить сама предложенная шкала — осуществить выбор желаемой оценки (9,3 либо 9,5, к примеру) не так-то легко. Кто-то может заявить, что для пользователя отличие между 9,3 и 9,5 не имеет особенного значения, но для чего тогда задавать подобный ход? Из-за чего не применять стандартную шкалу от 1 до 5?

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

Weightbot, приложение для отслеживания веса, совершает двойную неточность: 1 — предлагает воспользоваться ползунком для определения чрезмерно правильного параметра; 2 — шкала весьма мелкого размера. Помимо этого, начальное значение выбрано совсем случайно: если вы весите 55 либо 95 килограмм, вам будет весьма сложно указать это посредством данного элемента интерфейса.

  • Примеры юзабилити интерфейса пользователя

Правило громадного пальца

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

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

Слева: на BrilliantEarth.com значения шкалы расположены прямо под ползунком, где пользователь может их не подметить. Справа: на AirBnB.com значения размещены верно — сверху, и видны в течение всего сотрудничества.

  • Как оптимизировать юзабилити иконок интерфейса?

Вместо заключения

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

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

Высоких вам конверсий!

По данным: nngroup.comimage source katsrcool

Случайные статьи:

Артроз суставов: лечение артроза большого пальца руки


Подборка похожих статей:

riasevastopol