Статті
UI-эксперимент: двумерный слайдер как новый
элемент интерфейса
6 лютого, 2018
avatar
Никита Абраменков
Руководитель отдела дизайна в Thorgate
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

Никита Абраменков, руководитель отдела дизайна в Thorgate, решил поэкспериментировать с элементами интерфейса и найти новое применение слайдеру. Насколько он облегчит или затруднит задачу взаимодействия пользователя с взаимосвязанными или составными величинами? Об этом в его колонке для Telegraf.


1+1=2

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

Выбор подопытного для эксперимента

Есть много составных числовых значений, с использованием которых пользователи сталкиваются ежедневно. Самые простые и распространённые из них – это дата и время. Время 11:45 состоит из двух параметров: час и минута. Дата 15.01.2018 аж из трёх: день, месяц и год. Было бы логично возразить, что не совсем корректно рассматривать составляющие значения времени как два отдельных параметра. Ведь время последовательно. Значит, визуально может быть отображено прямой, где каждое последующее значение больше предыдущего.

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

Любой современный человек вынужден пользоваться будильником. А его неотъемлемым элементом интерфейса является таймпикер. Именно поэтому этот раздел приложений является идеальной площадкой для моего эксперимента.

Цель эксперимента

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

Основная гипотеза

Поскольку экран позволяет одновременно использовать два измерения, час и минута времени можно настроить одним движением.

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

Первые наброски и прототип

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

Тестирование

На разных этапах прототип проходил тестирование на небольшой группе людей численностью около 30 человек. В группу входили люди с разной технической подготовкой, уровнем образования, разных полов и возрастов. Основной задачей для тест-группы была установка конкретного времени будильника, а именно 11:45 AM.

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

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

Тестируемые, которые взаимодействуют с прототипом впервые:

  1. Совершенно не справились с задачей: 0-5%
  2. Потребовалось менее от 5 до 10 секунд для решения: 30-35%
  3. Потребовалось менее от 3 до 5 секунд для решения: 45-50%
  4. Потребовалось менее 3 секунд для решения: 5-10%

Повторное тестирование:

  1. Совершенно не справились с задачей: 0-5%
  2. Потребовалось менее от 5 до 10 секунд для решения: 0-5%
  3. Потребовалось от 3 до 5 секунд для решения:0-5%
  4. Потребовалось менее 3 секунд для решения: 80-85%

Обратная связь

Большинство комментариев были положительными. Многие подчеркивали, что пользовались бы подобным решением для решения повседневных задач. Часть людей отмечала: со временем они смогли бы справляться с выбором времени еще быстрее, поскольку визуально помнили бы, где на плоскости находится то или иное значение. Также отмечали, что подобное решение чересчур необычное. Некоторые тестируемые сказали, что не видят значительного улучшения относительно привычных таймпикеров.

Выводы

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

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

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

 

 

Изображения предоставлены автором. 

avatar
Никита Абраменков
Руководитель отдела дизайна в Thorgate
Колонка

У нас є ще дещо для вас

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: