Илья
20 сентября 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Расскажите об обратной связи в интерфейсе.

(Часть третья)


Сегодня разберём мгновенность, непрерывность и физичность обратной связи, а так же роль обратной связи в восприятии скорости интерфейса.

Мгновенность и непрерывность

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



Детали проявляются чуть позже, после загрузки:



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

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

Immediate feedback when data is unavailable

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

О модальности, возникающей из-за использования прокрутки для масштабирования, и способе её преодоления

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


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

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

Калькуляторы

Онлайн-калькуляторы кредитных платежей, тарифов связи, пластиковых окон иногда делают в виде формы с числовыми полями и кнопкой «Рассчитать»:



Человек должен ответить на несколько сложных вопросов, прежде чем увидеть результат. Хотя такое и называют «калькуляторами», на самом деле человеку нужно не посчитать, а разобраться в многомерном мире вариантов.

Польский «Всеобщий кредитный дом» одним из первых догадался перейти на слайдеры и пересчитывать результаты «на лету». Калькулятор автокредита:

Вспомните, насколько неудобно настраивать яркость или громкость кнопками − и +



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

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

Живой флеш-сайт в «Вебархиве» за 2004 г. (на польском)



Интерактивная статья в «Нью-Йорк-Таймсе» объясняет, когда выгоднее покупать, а когда — арендовать жильё:









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

Любую из переменных можно менять, и одновременно будет меняться пороговая цена аренды. Инфляция:


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

Если бы это сделали в виде традиционной формы, никто не дошёл бы до её конца. И причина не только в нежелании заполнять такую простыню. Просто непонятно, как заполнить «рост цены аренды» или ту же инфляцию. Откуда ж я знаю, какая она будет!

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

Восприятие скорости

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

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

Памяти первых моделей не хватало на хранение открытой в браузере страницы, и при прокрутке требовалось время для прорисовки. Здесь даже непонятно, как показывать страницу приближённо! Оказалось, можно буквально «никак»:



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

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

Непосредственное взаимодействие

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

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

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


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

Об информативности

P. S. Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.





Недавно всплыло

1 1 5 Собеседница психует и кидает трубку. Причём до этого дама была вполне адекватной, и мы нормально работали 1