Улучшение удобства и доступности сайта при помощи закона Фиттса

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

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

Тогда, в 1954 году, теорию Фиттса нельзя было применить к компьютерным технологиям; но сейчас, современный дизайнер без труда поймет тот глубокий смысл, который стоит за этой формулой в контексте пользовательского интерфейса.  

Именно поэтому закон Фиттса стал не только основой такого понятия, как «взаимодействие человека и компьютера», но и одним из признанных принципов в индустрии.

Закон Фиттса, в простейшем понимании, это здравый смысл. Чем больше объект и чем ближе он к нам, тем проще выйти (попасть) на него.

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

С финансовой точки зрения правильное проектирование и размещение интерактивных кнопок на коммерческих сайтах (таких кнопок как «Добавить в корзину») тоже выгодно. Например, исследование, проведенное на коммерческом сайте, показало, что конверсия выросла на 34% только из-за того, что кнопку «Добавить в корзину» переместили в левое навигационное меню. Закон Фиттса можно также использовать для расчета оптимального размера и грамотного расположения элементов интерфейса.

Как работает закон Фиттса

Собственно весь закон сосредоточен в одном математическом уравнении. Оно вычисляет время, необходимое для того, чтобы достичь целевого объекта. Целевым объектом, в данном случае,  можно считать любой интерактивный элемент, такой как кнопка отправки, гиперссылка, или поле ввода веб-формы. Т.е. идея такова: чем быстрее найдут целевой объект, тем проще и удобнее этот объект  использовать.

Рассмотрим уравнение Фиттса:

Пояснения к уравнению:

• время Т – это время, необходимое для совершения действия(для того, чтобы достигнуть целевой объект);
• a  и b – это коэффициенты регрессии, определяемые опытным путем;
• D (расстояние) – это длина целевого объекта;
• W – ширина целевого объекта.

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

Закон Фиттса за один раз может применяться только к одной переменной (ширина/высота), однако в интерфейсе пользователя важно учитывать и ширину и высоту объекта.

Больше не значит лучше

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

Фактически закон Фиттса – это двоичный алгоритм, у которого зависимость предсказанных результатов улучшения удобства использования объекта выражается через кривую, а не прямую линию. В веб-дизайне это означает, что увеличение размера очень маленького объекта на 20 % значительно облегчит его использование, в то время как точно такое же увеличение очень большого объекта не даст аналогичного высокого показателя.

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

Если бы девиз «больше – всегда лучше» действовал, и кнопка «Добавить в корзину» заняла львиную долю экрана, это бы бесспорно повысило удобство и простоту использование сайта. Но вот эффективны ли подобные методы? Сомневаюсь, и Вы в глубине души, думаю, тоже.

Движения и расстояния

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

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

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

Обратите внимание на то, как хорошо такой метод работает на сайте FreshBooks.

Более того, чем короче расстояние между похожими элементами, тем проще ими пользоваться.

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

Что такое главный пиксель?

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

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

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

В программном обеспечении достаточно часто используют преимущество этой концепции. К примеру, в Windows, куда бы Вы ни кликнули, контекстное меню откроется так, что его опорной точкой будет главный пиксель.

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

Но не стоит отчаиваться, ведь на сайте обязательно найдутся фиксированные интерактивные объекты (такие как кнопки отправки и гиперссылки).  Можно ведь следить за количеством кликов или просто зависанием мыши над определенным фиксированным объектом, используя JavaScript. А значит, можно сделать кое-какие предположения относительно  того, где будет указатель мыши  при загрузке новой страницы.

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

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

Преодоление дефицита «волшебного пикселя»

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

Вы можете заметить, остальные четыре пикселя приходятся на углы монитора:

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

На самом же деле углы и стороны экрана играют непоследнюю роль в законе Фиттса, потому что именно эти элементы создают границы, на самом деле не существующие.

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

Т.к. сайт не может пользоваться возможностью «удобных углов»(ведь он открывается в браузере и до углов, как таковых, даже не доходит), то углы превращаются из наиболее ценных пикселей в наименее ценные. Они являются точками, наиболее удаленными от главного пикселя.

Если считать центр экрана главным пикселем

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

Большинство людей, просматривающие веб-страницы на широкоэкранных дисплеях с уверенностью скажут Вам, что предпочитают сайты с содержимым, расположенным в центре странице, а не с левого края (см. пример ниже).

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

Группирование элементов

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

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

В заключении

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

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