1233 подписчика
Продолжим про UX-законы, которые должен знать каждый дизайнер, работающий с интерфейсами. Сегодня речь пойдет про закон Фиттса.
Пол Фиттс был психологом, который в середине XX века вывел математическое уравнение на основе своих экспериментов. Суть экспериментов заключалась в следующем: испытуемый должен был поочередно касаться двух чувствительных вертикальных мишеней стилусом. Это нужно было делать как можно быстрее. Исследователь изменял габариты мишеней и расстояние между ними. В итоге удалось вывести зависимость между временем движения к цели, размером цели и расстоянием до нее. Итак, суть закона Фиттса в следующем:
Чем больше расстояние до цели, тем больше времени потребуется, чтобы переместиться к ней.
Чем больше цель, тем меньше время движения к ней.
При взаимодействии с интерфейсом пользователь так же прицеливается в определенные мишени – кнопки, ссылки и т.д.
И тут стоит упомянуть еще одно правило – двухкомпонентную модель физического движения Вудвортса, суть которой в следующем:
Любое движение, имеющее цель, можно разделить на два компонента:
1. Начальное движение – быстрое и неаккуратное, рука просто движется в сторону цели.
2. Заключительное движение – медленное и точное, рука направляется четко в цель.
Применение в дизайне:
1. Чем больше кнопка, тем легче в нее попасть.
Не забываем, что всему есть предел, но в целом пользователю должно быть удобно совершать какое-либо действие на странице, он не должен напрягаться и специально прицеливаться, это должно быть естественное легкое движение.
2. Не стоит ставить две кнопки слишком близко друг к другу, то есть у пользователя не должно быть шанса случайно промахнуться при выборе кнопки.
3. Если нельзя визуально увеличить кнопки (или ссылки), увеличьте их область нажатия. Так и дизайн будет выглядеть гармонично, и пользователю будет легко попасть в цель.
4. «Бесконечные» цели вдоль краев экрана.
В кнопки, расположенные по границе экрана, удобно и легко попадать, потому что не надо прицеливаться и притормаживать. Можно импульсивно отвести руку в самый край, где курсор сам находит цель. Однако это действует только при использовании мышки или тачпада. Если речь о сенсорных экранах, то кнопки по краям, наоборот, будут неудобными и сложными в попадании.
5. Связанные цели должны располагаться рядом.
Если мы заранее знаем путь пользователя (а обычно мы его предполагаем), мы можем располагать все элементы в определенном порядке. Например, при заполнении формы кнопка отправки должна быть расположена около последнего поля этой формы. Или в меню наиболее популярные пункты должны располагаться сверху. Мы должны максимально сократить расстояние между целями, чтобы уменьшить общее время выполнения действия.
6. Мобильные экраны.
Если речь идет о мобильных экранах, то и правила немного меняются.
Во-первых, пальцы намного больше, чем курсор мышки, поэтому все кнопки/ссылки должны быть крупнее и иметь большее расстояние между друг другом.
Во-вторых, смартфоны становятся все больше, а вот пальцы нет. В большинстве случаев пользователь держит смартфон одной рукой и все действия совершает большим пальцем, поэтому все интерактивные элементы должны располагаться в нижней или в средней части экрана. Донятуться одной рукой до верха экрана весьма сложно, а если пользователю будет неудобно или придется использовать и вторую руку, его удовлетворенность будет падать.
#длиннопост #закон_фиттса
2 минуты
5 августа 2024