Нестандартное мышление в дизайне графического интерфейса.

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

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

Разбивая коробку на две части

Во-первых, мы замечаем, что сегодня элементы графического интерфейса имеют два выровненных представления:

  1. Визуальный: "внешний вид", например зеленая кнопка размером 120 на 35 пикселей.
  2. Функциональные. Поле, определяющее активную область экрана кнопки. Щелчки / прикосновения в этом поле запускают кнопку.

В этой «блочной модели» визуальные и функциональные представления выровнены: вы запускаете кнопку, нажимая на ее визуальные элементы. Фигура визуализирует это выравнивание.

Эта согласованная коробочная модель настолько фундаментальна, что сегодня она используется почти повсюду, например, на веб-сайтах и в графических интерфейсах для приложений iOS и Android. Это просто и полезно, но, как будет рассмотрено далее, оно также ограничивает возможности.

Как блочная модель ограничивает дизайнеров пользовательского интерфейса и пользователей

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

  • Поле не является адекватной моделью для чего-либо, кроме щелчка / касания. Тест «точка-в-поле» может обнаружить, что пользователь нажал кнопку. А как насчет слайдера? Что, если пользователь телефона проведет пальцем вправо, но чуть ниже визуальных элементов слайдера? Ничего не произошло. Блочная модель статична и не может адекватно обрабатывать изменчивость, жесты или общий ввод, который разворачивается с течением времени.
  • Боксовая модель предполагает двоичную обработку событий: щелчок / касание либо внутри, либо вне поля. Что делать, если пользователь едва не промахивается по кнопке? Ничего не произошло. Нет понятия неопределенности, которое можно было бы использовать, например, для запуска наиболее вероятного действия или для запроса у пользователя разъяснений.
  • Блочная модель предполагает отображение 1: 1 элементов графического интерфейса и поведения пользователя при вводе данных. Каждый элемент графического интерфейса может иметь только одно поле. Таким образом, пользователи могут запускать каждый элемент только одним определенным способом. Например, в то время как большинство пользователей могут нажимать кнопку в приложении, люди с тремором рук могут предпочесть жест (например, пересечение, окружение). Коробочная модель этого не учитывает. Таким образом, это затрудняет проектирование для обеспечения доступности и, как правило, для более индивидуального поведения ввода.

Мой вывод из этого исследования был следующим:

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

Изучение альтернатив коробочной модели

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

Конкретно, здесь мы исследуем замену ящиков на модели вероятностной последовательности. Без технических подробностей мы можем думать об этом как о назначении набора распознавателей жестов каждому элементу графического интерфейса. Я реализовал эту идею в экспериментальной среде для Android под названием ProbUI в рамках своего исследования.

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

Этот подход устраняет три ограничения блочной модели и приводит к следующим улучшениям:

  • Вероятностная обработка событий: дизайнеры и разработчики пользовательского интерфейса получают вероятность того, что пользователь намеревался поразить цель, для каждой цели, обновляемую с каждым входящим событием касания. Это открывает новые возможности дизайна: например, приложение может запросить у пользователя пояснения, если он нажал между двумя кнопками. Или приложение все еще может запускать кнопку, если пользователь ее едва пропустил.
  • Каждый элемент графического интерфейса может реагировать на несколько режимов ввода: вместо одного поля дизайнеры и разработчики пользовательского интерфейса могут указать любое количество вариантов поведения ввода для одного и того же элемента графического интерфейса. Например, мы могли бы разработать кнопку, которая реагирует как на обычное нажатие, так и на обводку ее пальцем. Это поддерживает специальные возможности и индивидуальные предпочтения и стили ввода.
  • Лучшая модель жестов. Последовательные модели лучше обрабатывают жесты, поскольку моделируют поведение во времени. Мы можем грубо думать о таких моделях как о цепочках экранных областей, а не о едином прямоугольнике. Например, «слайд для разблокировки» - это жест, который начинается с левого края ползунка и затем перемещается вправо. С такой моделью ползунок остается отзывчивым, даже если палец пользователя немного пошевелится, не заходит на ползунок или оставляет визуальные элементы ползунка на своем пути.

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

Далее мы рассмотрим три примера таких новых элементов графического интерфейса в действии.

Примеры: виджеты пользовательского интерфейса, которые адаптируются к положению рук.

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

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

Выводы

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

Если вы дизайнер пользовательского интерфейса / взаимодействия, вы можете мыслить нестандартно, рассмотрев следующие идеи:

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

Заключение

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

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

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

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

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

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