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

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

Что такое закон Фиттса?

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

Закон Фиттса устанавливает, что чем далее находится цель и чем меньше ее размер, тем больше времени требуется юзеру для ее заслуги. Большие цели, находящиеся рядом, имеют самую низкую стоимость взаимодействия, в то время как мелкие цели, находящиеся далековато, имеют самую высшую стоимость взаимодействия. Но что такое стоимость взаимодействия?

Издержки на взаимодействие

Nielsen Norman Group описывает стоимость взаимодействия как «сумму усилий – интеллектуальных и физических – которые юзеры должны затратить на взаимодействие с веб-сайтом, чтоб достигнуть собственных целей». Таковым образом, если юзер может отыскать ответ на интересующий его вопросец без необходимости прокрутки, касания либо исследования веб-сайта, то он сталкивается с нулевой стоимостью взаимодействия. Если же юзеру приходится отыскивать меню, прокручивать наиболее 10-ка вариантов и жать небольшую клавишу, чтоб заполнить форму, то стоимость взаимодействия будет выше.

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

Уравнение закона Фиттса

Закон Фиттса говорит, что время, нужное для захвата цели, зависит от размера цели и расстояния до нее.

Вот уравнение:

MT = a + b * log₂ (2D/W).

Давайте разложим это на части:

MT – это время, нужное для выбора цели.

a + b – константы, задаваемые типом устройства

D – расстояние от исходной точки до цели

W – ширина цели вдоль оси движения

Обычные внедрения закона Фиттса

Хотя эти внедрения могут показаться здравым смыслом, на их принципиально направить внимание. Почему? Поэтому что закон Фиттса – один из самых игнорируемых психических принципов дизайна! Вот несколько примеров его использования:

1. Клавиша для окончания деяния, расположенная близко к активным элементам.
2. Принципиальные элементы делаются крупнее, чтоб их было легче избрать.
3. Интерактивные списки, которые как можно короче
4. Кратчайший путь к хотимому CTA
5. Меню находятся в верхних углах экрана на настольных компах и в нижней части экрана на мобильных устройствах

Как закон Фиттса применим к дизайну пользовательского интерфейса?

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

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

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

Если вы заинтересованы в исследовании UI-дизайна, то мы советуем для вас направить свое внимание на курс от образовательной платформы Skillbox «Профессия UX/UI-дизайнер». На данном курсе вы научитесь проектировать интерфейсы, проводить UX-исследования, работать в Figma, облагораживать опыт юзера, также поймёте, как рассматривать метрики продукта: распознавать препядствия и отыскивать точки роста.

Концепции закона Фиттса для дизайна пользовательского интерфейса

Размер: большие цели обычно лучше. Попытайтесь большие элементы, которые имеют точные границы и вполне кликабельны.

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

Усилия: используйте прайм-пиксели и чудесные пиксели. Сделайте ваши интерактивные элементы легкими для нажатия и легкими для поиска.

Что такое прайм-пиксель?

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

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

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

1. Строчка поиска Гугл постоянно размещена в центре экрана, а клавиша поиска – конкретно рядом с ней
2. Логины обычно размещаются в правом верхнем углу навигации сайта
3. Формы обычно находятся прямо в центре странички с большенный клавишей «выслать» в конце формы

Что такое чудесные пиксели?

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

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

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

Как учить дизайн пользовательского интерфейса

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

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

Заключительные мысли

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

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