Привет!
Слышали ли вы о законе Фиттса или нет, вы определенно видели его примеры в реальной жизни. От педалей в вашем автомобиле до кнопок в операционной системе вашего iPhone – вы наверняка прикасались к чему-то, на что повлияли принципы Фиттса.
Закон Фиттса – это предсказательная модель человеческого поведения, и она повсюду вокруг нас. От веб-сайтов до мобильных приложений, от пользовательских интерфейсов до физических приборных панелей и почти в каждом материальном продукте, с которым мы ежедневно взаимодействуем.
Как только вы начнете замечать эти, казалось бы, очевидные концепции, вы уже не сможете перестать их замечать.
Что такое закон Фиттса?
В 1954 году психолог по имени Пол Фиттс создал прогностическую модель, которая описывает, как быстро люди могут выбрать цель. Цель – это то, с чем пользователь пытается взаимодействовать. Это может быть кнопка, которую нужно нажать, или поле формы, на которое нужно кликнуть. Эта модель широко используется при взаимодействии человека и компьютера.
Закон Фиттса устанавливает, что чем дальше находится цель и чем меньше ее размер, тем больше времени требуется пользователю для ее достижения. Крупные цели, находящиеся рядом, имеют самую низкую стоимость взаимодействия, в то время как маленькие цели, находящиеся далеко, имеют самую высокую стоимость взаимодействия.
Но что такое цена взаимодействия?
Затраты на взаимодействие
Nielsen Norman Group определяет стоимость взаимодействия как «сумму усилий – умственных и физических – которые пользователи должны затратить на взаимодействие с сайтом, чтобы достичь своих целей».
Таким образом, если пользователь может найти ответ на интересующий его вопрос без необходимости прокрутки, касания или изучения сайта, то он сталкивается с нулевой стоимостью взаимодействия.
Если же пользователю приходится находить меню, прокручивать более десятка вариантов и нажимать маленькую кнопку, чтобы заполнить форму, то стоимость взаимодействия будет выше.
В идеале дизайнеры UX и UI стремятся сделать эти затраты как можно более низкими. Чем ниже стоимость взаимодействия, тем выше удобство использования приложения.
Дизайнеры могут минимизировать стоимость взаимодействия, следуя закону Фиттса и сводя к минимуму чтение, прокрутку, нажатия, ввод текста, ожидание загрузки страниц, переключение внимания, загрузку памяти и поиск нужной информации.
Уравнение закона Фиттса
Закон Фиттса гласит, что время, необходимое для захвата цели, зависит от размера цели и расстояния до нее.
Вот уравнение:
MT = a + b * log₂ (2D/W).
Давайте разложим это на части:
MT – это время, необходимое для выбора цели.
a + b – константы, задаваемые типом устройства
D – расстояние от начальной точки до цели
W – ширина цели вдоль оси движения
Типичные применения закона Фиттса
Хотя эти применения могут показаться здравым смыслом, на них важно обратить внимание. Почему? Потому что закон Фиттса – один из самых игнорируемых психологических принципов дизайна!
Вот несколько примеров его использования:
- Кнопка для завершения действия, расположенная близко к активным элементам.
- Важные элементы делаются крупнее, чтобы их было легче выбрать.
- Интерактивные списки, которые как можно короче
- Кратчайший путь к желаемому CTA
- Меню находятся в верхних углах экрана на настольных компьютерах и в нижней части экрана на мобильных устройствах
Как закон Фиттса применим к дизайну пользовательского интерфейса?
По сути, этот принцип можно заметить в любом интерфейсе, который предполагает использование мыши или пальцев. Он используется в дизайне пользовательского интерфейса для определения правильных размеров интерактивных элементов, их наилучшего расположения, а также для выявления потенциальных проблем с удобством использования. Закон Фиттса объединяет безопасность, удобство и практичность в дизайне пользовательского интерфейса.
Рассмотрим меры безопасности для тяжелого оборудования: кнопка выключения почти всегда большая, красная, и ее легче нажать, чем кнопку запуска. Удобство мобильных приложений заключается в том, что кнопки входа в систему помещаются в зоне большого пальца.
Закон Фиттса – причина того, что кнопки на веб-сайтах большие, а меню обычно располагаются в верхних углах экрана. Дизайнеры пользовательского интерфейса могут подсказать людям, что нужно делать, разместив значимые призывы к действию рядом с соответствующими формами или заголовками.
Именно там пользователи ожидают их увидеть и могут легко нажать на них без особых усилий.
Если вы заинтересованы в изучении UI-дизайна, то мы рекомендуем вам обратить свое внимание на курс от образовательной платформы Skillbox «Профессия UX/UI-дизайнер».
На данном курсе вы научитесь проектировать интерфейсы, проводить UX-исследования, работать в Figma, улучшать опыт пользователя, а также поймёте, как анализировать метрики продукта: распознавать проблемы и находить точки роста.
Концепции закона Фиттса для дизайна пользовательского интерфейса
Размер: крупные цели обычно лучше. Попробуйте крупные элементы, которые имеют четкие границы и полностью кликабельны.
Расстояние: минимизируйте движение. Подумайте о пространстве между кнопками, расположите важные действия по зонам «прайм-пикселя» и большого пальца, и уменьшите расстояние между элементами с аналогичной функцией. Это похоже на гештальт-принцип близости.
Усилия: используйте прайм-пиксели и волшебные пиксели. Сделайте ваши интерактивные элементы легкими для нажатия и легкими для поиска.
Что такое прайм-пиксель?
Прайм-пиксель – это место, где находится курсор пользователя на экране, когда он открывает веб-сайт или приложение. Это точка, из которой пользователь будет выполнять все свои задачи.
Именно поэтому существуют меню, вызываемые правой кнопкой мыши – они естественным образом находятся ближе всего к первому пикселю.
На мобильных устройствах прайм-пиксель – это область, на которой естественным образом зависают большие пальцы. Они также известны как зоны большого пальца. Вы можете заметить, что меню на iPhone обычно располагаются в нижней части экрана, где находятся большие пальцы.
В идеале дизайнеры должны сделать все свои призывы к действию как можно ближе к этой точке. Однако «прайм-пиксель» не является полностью предсказуемым, поскольку отправная точка пользователя обычно каждый раз разная.
Хотя предсказать точный прайм-пиксель практически невозможно, можно предсказать вероятный прайм-пиксель, основываясь на действиях пользователя во время использования вашего приложения.
Вот три примера:
- Строка поиска Google всегда расположена в центре экрана, а кнопка поиска – непосредственно рядом с ней
- Логины обычно располагаются в правом верхнем углу навигации веб-сайта
- Формы обычно находятся прямо посередине страницы с большой кнопкой «отправить» в конце формы
Что такое волшебные пиксели?
Волшебные пиксели – это четыре угла экрана, верхний край и нижний край экрана. Магические пиксели создают границы. Ваш курсор не может перемещаться за пределы этих точек. Они почти всегда находятся дальше всего от основного пикселя.
Дизайнеры используют такие условности, как центр экрана, углы и зоны большого пальца на мобильных устройствах, в качестве ориентиров для оптимального размещения, поскольку они не могут предсказать основной пиксель.
Наличие стандартизированного сайта, удобного для навигации, не менее важно, чем близость к CTA, как вы узнаете, используя такие приемы, как правило третей. Поскольку они находятся так далеко от основного пикселя, волшебные пиксели обычно отводятся под стандартные функции. Вы заметите, что кнопки выхода, минимизации, управления учетной записью, входа в систему и полноэкранного режима находятся в верхних углах экрана.
Несмотря на то, что они обычно не расположены близко к основному пикселю, углы и края экрана всегда находятся в одном и том же месте, и вы не можете пройти мимо них. Поэтому до них легко быстро добраться.
Веб-дизайнеры не смогут использовать углы экрана так эффективно, как это может сделать пользовательский интерфейс. Поэтому они полагаются на следующую лучшую зону магии – центр экрана.
Как изучать дизайн пользовательского интерфейса
Как вы можете видеть на этих примерах, открытие принципов дизайна, лежащих в основе повседневного взаимодействия, – это лишь одна из радостей изучения дизайна пользовательского интерфейса.
Первые шаги к его изучению – это знакомство не только с принципами, но и с примерами плохого дизайна пользовательского интерфейса, чтобы вы знали, чего следует избегать!
Окунуться в эту область с помощью бесплатного краткого курса или онлайн-учебника – отличный способ понять, подходит вам это или нет.
После того, как вы почувствуете, что это такое, начните планировать свой путь к тому, чтобы стать дизайнером пользовательского интерфейса, изучая программы обучения дизайну пользовательского интерфейса или программы смены профессии, чтобы найти то, что вам подходит.
Заключительные мысли
Хотя закон Фиттса является отличной отправной точкой для разработки рекомендаций по юзабилити, он не всегда верен. Данные всегда покажут больше, чем теория. Лучший способ узнать, удобен ли ваш дизайн, – это протестировать его на реальных пользователях.
Всегда полезно задавать вопросы и искать более глубокое понимание того, почему все работает. Используйте теорию в качестве отправной точки, а затем подумайте о том, как применить ее в реальном мире.
Подобные «законы» – это просто рекомендации, которые нужно учитывать, а не слепо следовать им. Подумайте о том, как вы располагаете кнопки, где можно ограничить стоимость взаимодействия и как вы размещаете призывы к действию на вашем сайте или в приложении.
До новых встреч!
