Использование закона Фиттса: принципы проектирования пользовательского интерфейса для электронной коммерции

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

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

Закон Фиттса дает количественную оценку соотношения скорости и точности: чем точнее должно быть выполнение задачи, тем больше времени потребуется для ее выполнения. В переводе на дизайн пользовательского интерфейса это означает, что чем дальше цель — например, кнопка «Добавить в корзину» — находится от курсора или пальца пользователя, тем больше должна быть цель. Таким образом, акт достижения цели не требует большой точности и может быть выполнен быстро.

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

Нарушение формулы закона Фиттса

Математическое уравнение, которое написал Фиттс, имеет вид t = a + b log2 (2 d/w) , где:

• t равно времени.
• a и b представляют собой коэффициенты регрессии, полученные в результате наблюдения за тестами.
• d — расстояние между начальной точкой и целью.
• w - ширина цели.
• log2 указывает, что формула является логарифмической, а log2 (2 d/w) дает индекс сложности (ID), измерение, которое количественно определяет, насколько сложно достичь цели.

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

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

Закон Фиттса и дизайн пользовательского интерфейса для электронной коммерции: идеальное сочетание

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

Дизайн для эффективного поиска продукта

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

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

Оптимизируйте меню электронной коммерции

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

Увеличьте площадь поверхности кнопок призыва к действию

Очевидное место для применения закона Фиттса — кнопка CTA, которая инициирует покупку. Сделайте кнопку крупной, чтобы она выделялась и на нее было легко нажимать; захват более крупной цели требует меньшей точности. Кроме того, сделайте кнопку заметной, разместив ее над сгибом, применив доступный контраст и разместив ее достаточно далеко от других компонентов, чтобы пользователи не нажимали не на тот элемент. T0 еще больше повышает уверенность пользователей в принятии решений, гарантирует, что микротекст на кнопке будет четким и информативным.

Также рассмотрите возможность размещения кнопки CTA вдоль края экрана, чтобы максимально использовать так называемые магические пиксели, области экрана, где пользователь может перемещаться быстро и неточно, по-прежнему поражая цель.

Сделайте некоторые действия сложнее, чем другие

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

Закон Фиттса для мобильных устройств

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

Пальцы — это курсоры

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

Мобильное использование часто осуществляется одной рукой

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

Учитывайте предостережения

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

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

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

Следуйте закону Фиттса для успеха электронной коммерции

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

Дальнейшее чтение в блоге Toptal:

• Прокладывая путь к покупке — лучшие практики UX для электронной коммерции
• Рекомендации по использованию целевых страниц (с инфографикой)
• Как создавать целевые страницы, которые конвертируют
• Создание и масштабирование дизайн-системы в Figma: пример из практики