Гайд по дизайну вводных степперов


03.07.2019 Время чтения - 10 минут 41

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

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

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

Пример степперов: горизонтальный (слева) и вертикальный (справа)

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

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

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

Преимущества вводных степперов

Отсутствие клавиатуры

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

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

Интуитивно понятно

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

В iOS изменение системного языка вправо-влево, например, на арабском (слева), отменяет размещение степпер-сегмента (уменьшение справа и увеличение слева) в отличие от английской версии (справа).

Меньшее количество взаимодействий

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

Эти 3скриншота показывают 3 разных подхода к вводу цифр. American Airlines (слева) использовали выпадающий список для выбора количества пассажиров. Для этого элемента управления потребовалось несколько жестов (выберите поле, прокрутите и выберите число, затем нажмите «Готово»). “Treadmill Run Tracker” (в центре) использовали текстовое поле для ввода расстояния; пользователь должен был выбрать поле, ввести желаемую цифру, затем нажать кнопку «Сохранить» или выбрать другое поле. Напротив, усилия для изменения количества пассажиров от 1 до 2 в мобильном приложении «Delta Airlines» (справа) состояли из одного нажатия. (Тем не менее, профит степпера был бы намного выше, если бы пользователь хотел увеличить число от 1 до 10; это увеличило бы затраты больших отклонений от значения по умолчанию, что является основным недостатком использования степперов.)

Относительный контроль, когда пользователи не знают точных значений

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

Тем не менее, они определенно знают, что текущий текст слишком мал или (редко) слишком велик, поэтому легко использовать операцию с степпером наподобие CTRL-plus или CTRL-минус, чтобы сделать текст на одну позицию больше или меньше (конечно, при условии, что они знакомы с этими командами браузера).

Недостатки вводных степперов

Трудно овладеть.

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

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

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

Не для больших настроек по умолчанию

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

Руководства по дизайну степперов

Исходя из вышеизложенных соображений, приведены некоторые общие рекомендации по проектированию входных степперов:

  • Используйте степперы для числовых полей ввода с явными, наиболее часто выбираемыми значениеми. Степперы хорошо работают для полей ввода, которые имеют одно часто вводимое значение, и для большинства других входных значений, немного отклоняющихся от часто вводимых значений. Если в диапазоне значений, которые часто вводятся пользователем для поля (например, для указания возраста или даты рождения), существует много переменных, то степпер не подходит.
  • Установите наиболее часто выбираемые значения в качестве шага по умолчанию. Это руководство является прямым следствием первого. Например, «1» обычно является числом пассажиров по умолчанию для бронирования билетов или по умолчанию для добавления товара в корзину, тогда как 2 может быть числом посетителей по умолчанию для бронирования столика в ресторане.
  • Избегайте степпинга для непрерывных величин. В дизайне шаговые поля могут принимать только дискретные значения, т. е. кратные шагу добавления. (Вы не можете указать 1,5 элемента для количественного степпера.) Иногда имеет смысл преобразовать непрерывные переменные в дискретные (например, мы обычно рассматриваем возраст как дискретную переменную, отсчитываемую в годах). Однако во многих ситуациях преобразование непрерывной переменной (например, цен или расстояний) в дискретную с неправильным шагом может быть раздражающим или неуместным для пользовательской задачи.
    Например, если вы хотите купить дом, прибавка $ 100K для ценового поля будет слишком ограничительной, так как некоторые пользователи могут захотеть ввести значение, которое не кратно $100К, и округление его в большую или меньшую сторону может не привести к одним и тем же результатам. Лучше всего разрешить пользователям вводить такие непрерывные значения, а не принуждать их использовать степпер с фиксированным шагом.
  • Четко покажите, какое поле контролируется степпером. Четко укажите содержание формы, к которой относится степпер. Например, если для изменения времени и даты используется шаговый элемент управления, часть времени или даты, которая должна быть скорректирована, должна быть четко выделена, чтобы пользователи точно знали, что они меняют.
Ns.nl, голландский железнодорожный оператор, использовал степперы для ввода времени и даты. Секция, в которой были произведены изменения, была выделена темно-синим подчеркиванием.

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

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

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

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

StackExchange (слева) использовал вертикальные степперы (выделены красным). Мобильное приложение Airbnb (справа) использовало горизонтальные степперы для настройки количества гостей при бронировании. Горизонтальное размещение с разделенными кнопками создает достаточное пространство между входами, чтобы помочь пользователям избежать случайных прикосновений. С другой стороны, метафора «вверх / вниз» больше подходит для степпера StackExchange (который указывает, сколько людей проголосовало «за» или «против»).
  • Используйте +/- или стрелку вверх / вниз в качестве кнопки визуализации. Для горизонтальных степперов знаки «плюс» и «минус» обычно работают лучше всего как метки для сегментов шага. Для вертикальных степперов (с сегментами выше и ниже значения) вы также можете использовать кнопки со стрелками вверх и вниз, часто изображаемые как шевроны.
    Кнопки со стрелками влево / вправо могут существовать для горизонтальных степперов, но их редко рекомендуют, поскольку они имеют меньшую прямую связь с концепцией создания чего-то большего или меньшего.
  • Добавьте дополнительные методы ввода. В дополнение к хорошо спроектированному степперу, вы можете захотеть добавить альтернативные методы ввода, чтобы дать пользователям контроль и гибкость, особенно когда значение ввода сложно или непредсказуемо. Вот несколько дополнительных методов ввода, которые можно комбинировать со степперами, чтобы сделать ввод более эффективным:
  1. Степпер текстового поля — это компонент UI, который позволяет быстро вводить число, для регулировки, используя текстовое поле вместе с кнопками шагового регулятора по бокам. Пользователи могут либо напрямую ввести точное значение, либо использовать шаговый регулятор для настройки значения по умолчанию, если оно близко к желаемому значению, и для его изменения требуется всего несколько нажатий. Это было бы уместно для нашего примера бронирования ресторанов с размером таблицы по умолчанию в 2 обеденных: степпер можно легко использовать для указания одиночных посетителей ресторана или семьи из 4 человек, тогда как группы из 10 человек лучше сделать прямой ввод текста.
  2. Разрешить длительное нажатие или клики на кнопки для более быстрого непрерывного увеличения или уменьшения.
  3. (Для десктопной версии) позволять пользователям использовать стрелки клавиатуры для увеличения или уменьшения: вверх и вниз, влево и вправо должны соответствовать расположению кнопок на экране.

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

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

Когда использовать вводные степперы

Использовать вводные степперы, когда:

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

Не использовать входные степперы, когда:

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

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

Читайте также: Долг UX: Как определять, расставлять приоритеты и решать.