UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Что, если бы элементы графического интерфейса не были ограничены блоками?
Редакція
Редакція

Опубліковано

Что, если бы элементы графического интерфейса не были ограничены блоками?

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

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

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

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

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

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

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

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

Визуальное и функциональное представление графического пользовательского интерфейса с использованием блочной модели. Фото Marianne Krohn

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

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

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

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

Я пришел к следующему выводу:

В блочной модели точный тап / клик –единственное поведение пользовательского ввода, которое UI дизайнеры должны учитывать должным образом

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

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

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

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

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

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

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

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

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

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

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

Результаты

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

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

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

Вывод

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

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

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

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

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

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


Перевод статьи uxdesign.cc

Найновіші коментарі (0)