Закон Фиттса в веб дизайне, или Размер имеет значение

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

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

Эксперименты Фиттса

Процесс достижения цели проходит несколько этапов.

• Локализация.
• Движение к цели.
• Торможение.
• Касание.

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

Закономерность

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

Коэффициенты a (локализация) и b (типичная скорость) - константы, показатели которых зависят от ситуации и индивидуальных особенностей человека.

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

Рассмотрим, как работает закон, на графике.

Пусть ось Х - это величина объекта, а У - время пользователя, которое он затрачивает на клик. До определенного момента незначительное увеличение размера цели значительно сокращает время ее достижения, а потом оно почти не меняется.

Интересная особенность

Если объект размещается в углу экрана или сбоку, то человек быстрее туда попадает. Навести курсор в ограниченное пространство проще, чем целиться в какую-то область экрана. Это понятие "бесконечности", о котором мы поговорим чуть ниже. Поэтому на компьютерах важная кнопка "Пуск" находится в правом нижнем углу.

Дизайн сайтов и закон Фиттса - как все это увязать?

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

Особенность веб

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

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

Несколько примеров

Нижняя панель в Windows спроектирована по закону Фиттса.

Главная кнопка взаимодействия с пользователем - "Пуск", она размещена слева в углу бесконечной зоны экрана. Человек попадает в нее всегда, практически не целясь, передвигая курсор с любой скоростью.

Вкладки приложений совпадают по ширине с нижней панелью - с любой позиции в них попасть очень просто

Преимущества бесконечной ширины экрана мы можем видеть практически на каждом сайте.

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

Рекомендации

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

• Не экономьте место и не делайте графические объекты слишком маленькими. Пользователь будет прилагать усилия и тратить время, чтобы кликнуть по ним.
• Угол экрана или его граница в разы повышают скорость достижения цели.
• Незначительное увеличение объекта увеличивает скорость достижения цели.
• После достижения определенного размера увеличение объекта практически не меняет скорость достижения цели.
• Вы можете определить оптимальные размеры других элементов, привлекая внимание к самым важным.
• Грамотное использование бесконечной ширины улучшает кликабельность элементов, при этом можно не увеличивать их размеры.
• Чем дальше размещен кликабельный объект от последнего нахождения курсора пользователя, чем меньше его размер, тем дольше человек будет до цели добираться.
• Для намеренного осложнения пути делайте нежелательные кнопки типа "Удалить" меньше и не размещайте их в бесконечных зонах или углах экрана.
• Иногда желание увеличить отдельный элемент вступает в противоречие с дизайном. Рекомендуется просто сделать больше область его нажатия.

Пользуйтесь выводами закона Фиттса при разработке дизайна сайтов, сокращайте расстояние до важных объектов, увеличивая их размеры, но помните о "золотой середине". Удачи!