Продолжаем изучать UX-теорию и на очереди закон Фиттса, который гласит, что время обнаружения цели зависит от расстояния до цели и ее размера.Из этого вытекает несколько положений: 1. Цели касания должны быть достаточно большими, чтобы пользователи могли их точно выбрать.
2. Между объектами касания должно быть достаточно места.
3. Сенсорные цели следует размещать в тех областях интерфейса, которые позволяют легко их обнаружить.Следовательно, проектируя интерфейс мы должны уделять особое внимание размеру кнопок и других кликабельных элементов, ведь чем больше они будут и чем меньше до них нужно будет тянуться, тем проще пользователю будет взаимодействовать с интерфейсом. А довольный пользователь = хорошие продажи. Итого дизайн, который делает свою работу.
История
Пол Фиттс был одним из первых психологов, которые поняли, что человеческие ошибки связаны с плохим дизайном, а не просто с человеческим заблуждением. Он изучал конструкцию кабины самолета во время Второй мировой войны и утверждал, что многие потери, приписываемые человеческим ошибкам, на самом деле были вызваны плохой конструкцией.
В 1950-х годах на него повлияла знаменитая теория информации Шеннона . Подобно Джорджу Миллеру, который применил концепцию пропускной способности каналов к человеческой памяти и в процессе придумал знаменитое магическое число 7 как пропускную способность человеческой кратковременной памяти , Фиттс стремился определить пропускную способность человеческого движения — сколько повторяющиеся движения могли выполняться в заданный интервал времени. Он провел несколько экспериментов с такими повторяющимися движениями и в результате пришел к закону Фиттса, одному из самых известных законов взаимодействия человека и компьютера.
Коротко, все расчёты Фиттса можно описать в двух положениях:
- Чем больше расстояние до цели, тем больше времени потребуется указателю, чтобы переместиться к ней. Другими словами, более близкие цели можно обнаружить быстрее.
- Чем крупнее цель, тем меньше время движения к ней. Другими словами, чем больше цели, тем лучше.
Закон Фиттса гласит, что время достижения цели А короче, чем время достижения любой другой цели. Хотя цели A и B имеют одинаковый размер, расстояние от курсора до A (D1) короче, чем расстояние до B (D2), поэтому движение к A будет быстрее. Цель C размещается на том же расстоянии (D1) от курсора, что и Цель A, но она меньше, поэтому перемещение курсора к ней займет больше времени, чем к A.
Время растет не линейно с параметрами, а более медленными темпами. Итак, если что-то находится в два раза дальше, то чтобы добраться до него, потребуется больше времени, но не в два раза дольше. Это связано с тем, что движение сначала ускоряется, а затем замедляется (как описано в следующем разделе), а это означает, что вы можете перемещать указатель с более высокой скоростью в течение части времени перемещения, когда расстояние больше, а затем медленнее по мере приближения.
Именно в этом и заключается суть описанной ниже двухкомпонентной модели.
Двухкомпонентная модель
Задолго до Фиттса, в конце XIX века, один из пионеров исследования движений человека Р. С. Вудворт представил свою двухкомпонентную модель физического движения верхних конечностей. В модели говорится, что любое целенаправленное движение (например, выполняемое для достижения цели, а не, скажем, постукивание в ритме музыки) можно разложить на два компонента (отсюда и название):
- начальное движение , быстрое и относительно грубое, предназначенное для перемещения указателя в направлении цели
- последнее движение , которое более медленное и предназначено для обеспечения точности (например, для обеспечения правильного захвата цели)
Первая фаза во многом определяется расстоянием до цели — движение будет направлено на то, чтобы указатель переместился в направлении цели как можно быстрее. Однако вторая фаза движения в основном зависит от размера цели — указателю необходимо замедлиться, чтобы не промахнуться и не щелкнуть за пределами цели . Чем меньше цель, тем больше времени обычно тратится на второй фазе.
Приложения к UX
Последствия закона Фиттса можно сгруппировать в две отдельные категории, соответствующие двум переменным, которые влияют на время движения: размер цели и расстояние до цели.
Оптимизация целевого размера
Чем больше, тем лучше
Самый очевидный вывод из закона Фиттса: делайте цели большими. Закон Фиттса ясно говорит, что люди будут быстрее щелкать, касаться или наводить курсор на более крупные цели. Мало того, частота ошибок снижается по мере увеличения размера цели. Рекомендации по размеру цели обычно создаются путем определения частоты ошибок для различных размеров цели и определения размера, при котором частота ошибок стабилизируется.
Иконки плюс лейблы
Мы много раз говорили, что значкам нужны метки . Текстовая метка не только уменьшает двусмысленность значков и облегчает их понимание, но также сокращает время движения к конкретной цели. Почему? Все просто: любая цель, состоящая из значка и метки, будет больше, чем просто значок, и, следовательно, согласно закону Фиттса, ее будет легче приобрести. (Это, конечно, предполагает, что вы сделаете всю область кликабельной и избежите ошибки проектирования, когда активной целью станет только сам значок.)
Целевая область для значка будет меньше целевой области для этого значка плюс текстовая метка.
Бесконечные цели по краям экрана
В двухкомпонентной модели компонент конечного движения можно значительно уменьшить, если цель очень велика или даже бесконечна. При бесконечной цели можно не беспокоиться, что вы пролетите мимо, поскольку не имеет значения, где указатель остановит свое движение (конечно, при условии, что целевая область достигнута).
При бесконечной цели нет опасности промахнуться: пользователям не нужно замедляться при приближении к цели, поэтому время движения невелико.
В этот момент вы можете спросить: где в реальном дизайне интерфейса мы имеем бесконечные цели? Ответ кроется в краях экрана, если взаимодействие осуществляется с помощью мыши . Действительно, края экрана действуют как естественные стены для курсора — как только указатель достигает края, он не может выйти за его пределы, независимо от скорости, с которой эта стена ударилась.
Таким образом, технически, чтобы достичь цели, расположенной на краю экрана, пользователю не нужно замедляться так сильно, как если бы цель находилась в середине экрана, поскольку нет опасности промахнуться – указатель будет автоматически останавливаться при достижении края экрана.
Разработчики операционных систем воспользовались этим следствием закона Фиттса. В MacOS меню приложений отображаются в самом верху экрана, по горизонтальному краю. Это позволяет пользователю очень легко добраться до этой области. В Windows (по крайней мере, до Windows 8) кнопка «Пуск» располагалась в левом нижнем углу экрана. В обеих операционных системах значки различных часто используемых приложений расположены в нижней части экрана.
В MacOS меню приложений расположено у верхнего края экрана, который действует как бесконечный край. Такое размещение оптимизирует время перемещения к этой часто посещаемой области, поскольку параметры в меню становятся бесконечными целями, и пользователям не нужно замедляться, чтобы точно поразить их.
Однако обратите внимание, что хотя размещение по краям дает преимущество в пользовательских интерфейсах, управляемых мышью или трекболом, оно не дает преимуществ для сенсорных экранов. Фактически, исследование Дэниела Авраами показало, что для устройств с сенсорным экраном на самом деле требуется больше времени, чтобы поразить цели, расположенные по краям, возможно, потому, что для сенсорных экранов можно промахнуться и попасть за край экрана.
Не приближайте цели
Если вы разместите цели слишком близко друг к другу, существует риск того, что люди случайно промахнутся и случайно активируют не ту цель. Обратите внимание, что это особенно вероятно, если цели небольшие.
Прокладки недостаточно
Иногда дизайнеры дополняют определенные цели, тем самым увеличивая эффективную целевую зону. Однако помните, что хотя дополнение поможет предотвратить некоторые ошибки превышения, если люди не осознают, что цель дополнена, они все равно могут осторожно замедляться больше, чем необходимо, по мере приближения к цели, чтобы убедиться, что они будут не выходить за пределы целевой зоны.
Оптимизация расстояния до цели
Дизайн меню
Тип меню, используемого для отображения списка элементов, будет играть роль во времени перехода к любому из этих элементов. Чтобы понять почему, давайте рассмотрим три разных меню: линейное меню, прямоугольное меню (также известное как мегаменю) и круговое меню.
Предположим, что когда меню открыто, указатель находится на дескрипторе или метке меню. (Это реалистичное предположение для интерфейсов на основе мыши. Несмотря на то, что люди иногда используют клавиши доступа к клавиатуре , чтобы открыть меню, более распространенным сценарием является то, что меню открывается с помощью мыши.)
Среднее расстояние от дескриптора меню до элемента меню зависит от типа меню: линейные меню менее эффективны, чем прямоугольные меню, которые, в свою очередь, менее эффективны, чем круговые меню.
В линейном меню вы можете видеть, что расстояние от маркера меню до первого элемента меню самое короткое, а расстояние до последнего элемента меню самое длинное. Таким образом, с помощью такого меню вы можете упорядочить элементы в соответствии с частотой их использования (наиболее часто используемые элементы находятся вверху).
В прямоугольном меню элементы расположены как по горизонтали, так и по вертикали, поэтому среднее расстояние до пункта меню меньше, чем если бы меню было линейным.
Наконец, в круговом меню все элементы меню располагаются по кругу вокруг маркера и, таким образом, находятся на одинаковом расстоянии от маркера. В результате время достижения любого из этих вариантов будет одинаковым. (Несмотря на огромное преимущество круговых меню, они до сих пор относительно не используются в дизайне пользовательского интерфейса и поэтому незнакомы пользователям.)
Даже для скромного линейного меню, если доступ ко всем элементам осуществляется относительно одинаково, среднее время перемещения можно улучшить, совместив ручку с серединой меню так, чтобы самые дальние элементы были первыми и последними, а ближайший — тот, что в середина.
Среднее время перемещения в линейном меню можно улучшить, совместив заголовок меню с серединой меню.
На мобильных устройствах в некоторых контекстных меню соответствующие параметры отображаются на нижнем листе, который отображается далеко от метки меню. Такая конструкция неоптимальна, поскольку вынуждает пользователей тратить время на передвижение. В идеале параметры должны располагаться рядом с меткой.
Слева: Gmail для iOS разместил параметры, связанные с контекстным меню с многоточием, на нижнем листе, далеко от дескриптора меню. Чтобы выбрать пункт меню, пользователям придется провести пальцем на относительно большое расстояние от маркера меню до пунктов меню. Справа: в «Почте для iOS» контекстное меню, связанное со значком «Удалить », появилось сразу рядом с этим значком, что минимизировало время перемещения.
Размещайте связанные цели близко друг к другу
Если вы знаете, что набор элементов управления будет нажиматься в определенном порядке, разместите их близко друг к другу (но не слишком близко — см. рекомендации выше), чтобы минимизировать расстояние между ними и оптимизировать общее время выполнения задачи.
Например, кнопку «Отправить» в форме следует разместить рядом с последним полем формы. Мобильный дизайн, в котором кнопка «Отправить» находится в самом верху страницы , в заголовке страницы, не только противоречит естественному направлению рабочего процесса пользователя сверху вниз, но также приводит к неоптимальному времени перемещения, поскольку пользователю необходимо двигаться. пальцем от последнего поля формы, расположенного внизу экрана, до самого верха экрана.
Слева: Sephora для iPhone размещает кнопку «Сохранить» в правом верхнем углу экрана. Палец пользователя должен пройти относительно длинный путь от последнего поля формы до кнопки «Сохранить» . Справа: напротив, Taxa 4x35, датское приложение для заказа такси, размещает основной призыв к действию в самом низу формы, рядом с последним полем формы.
Заключение
Закон Фиттса гласит, что время перемещения к цели зависит от того, насколько она велика и насколько далеко она находится. Создавая новый дизайн пользовательского интерфейса, подумайте об оптимизации обеих этих переменных, создав хорошо разнесенные большие цели и расположив их так, чтобы они были ближе к наиболее вероятному предыдущему местоположению пользователя.
Текст написан на основе двух классных статей с lawsofux и nngroup. Другие мои статьи на тему принципов юзабилити можно почитать здесь, на DSGNERS или в моём блоге в тг. Впереди ещё 18 принципов UX, не переключайтесь ❤️
