Статья для начинающих UX/UI дизайнеров, исследователей и аналитиков. Этот закон помогает определить оптимальные размеры и места расположения элементов на сайте для упрощения и ускорения взаимодействия пользователей с ними.
Американский психолог Пол Фиттс (Paul Morris Fitts) работавший в университете штата Огайо, в 1954 году провел эксперимент, описывающий движение человека при достижении цели в двумерном пространстве.
Суть эксперимента была в следующем: на доске размещены две чувствительных полоски — мишени (черные полоски, на изображении ниже). При касании специальным пером (аналог современного стилуса) одной из этих полосок фиксируется «попадание в цель».
Задача испытуемого: как можно быстрее поочерёдно касаться пером то одной, то второй полоски. При этом расстояние между полосками и ширина каждой из них периодически изменялись.
Отслеживая время касаний, Фиттс вывел зависимость: чем больше расстояние от одной цели до другой цели и чем меньше размер самой цели, тем больше времени требуется для её достижения. И соответственно наоборот, чем меньше расстояние от одной цели до другой цели и чем больше размер цели, тем меньше времени требуется для её достижения. Это и есть закон Фиттса (Fitts’s law).
Вроде всё логично, по крупной цели можно проще прицелиться и быстрее попасть. Но есть интересная деталь: до определенного момента даже небольшое увеличение размера дает существенное сокращение времени. Но после определенного этапа увеличение цели практически не отражается на скорости ее достижения.
Объясняются эти выводы логарифмической зависимостью между переменными. Для наглядности, на изображении ниже график функции, который описывает зависимость между размером цели и временем ее достижения при неизменной дистанции. Например, при увеличении размера с 0,5 до 1 время сокращается с 0,45 до 0,3, т.е. примерно на 30% (слева на изображении).
Но чем больше увеличивается размер, тем незначительнее сокращается время достижения цели. Обратите внимание, что при увеличении размера с 8 до 10 время достижения уже почти не меняется (справа на изображении). Проще говоря, желательно делать важные объекты в интерфейсе крупнее и ближе, но не стоит делать их огромными, так как это не принесет значительного улучшения.
Математически закон записывается как:
Где:
- T — среднее время, затрачиваемое на совершение действия.
- a — среднее время запуска/остановки движения.
- b — величина, зависящая от типичной скорости движения.
- D — дистанция от точки старта до центра цели.
- W — ширина цели, измеренная вдоль оси движения.
Применение закона Фиттса в дизайне сайтов
Аналогично закон Фиттса применим и к дизайну сайтов или интерфейсов. Например: чем дальше кнопка (от последнего клика мыши) и чем меньше её размер, тем больше времени необходимо пользователю для клика по ней.
Также закон Фиттса можно использовать для намеренного осложнения пути пользователя, например сделав меньше кнопку «Удалить» пользователи реже будут кликать по ней случайно. Вместо кнопки может быть любой другой объект или цель на странице.
В ряде случаев желание увеличить какой-то из элементов может вступать в противоречие с общим дизайном страницы. В таких случаях достаточно увеличить не сам объект, а лишь область нажатия.
Так, например, на сайте «М.Видео» (изображение ниже) зона нажатия в раздел «Войти» (изображена красным пунктирным квадратом) в два раза больше, чем сама иконка с человечком и подписью «Войти». Таким образом область нажатия больше, за счет чего клик по ней происходит быстрее и удобнее (особенно на мобильных устройствах). Но при этом дизайн сайта не пострадал.
Данный подход применим не только к кнопкам. Ниже другой пример того, как увеличена область нажатия, а не сам объект. В данном случае — это текстовые пункты меню в каталоге маркетплейса Ozon. Здесь зона нажатия больше, чем видимое текстовое название самого раздела каталога.
Вывод
Помните о законе Фиттса при проектировании и дизайне страниц. По возможности, сокращайте расстояние до важных целей и увеличивайте размер самих целей (но не делайте их слишком большими). Для того чтобы данный подход не противоречил с дизайном других элементов на странице, используйте кликабельную область элемента больше чем видимую.
В данной статье очень кратко разобран лишь один закон для улучшения пользовательского опыта. Если вы хотите узнать больше о UX дизайне на основе психологии и UX исследований, то специально для вас мы составили электронный учебник Конверсия на стероидах, в котором собрано множество подобных точек роста конверсии.
А потом пришел заказчик и сказал — "Так не хочу. Вот так хочу" 😄
Если серьезно — интересный и познавательный материал, спасибо! 👍
Если заказчик вменяемый, то можно убедить, рассказав как раз про это исследование с формулой. А если дурак - то так ему и надо, сделаем, как он хочет.
Материал хороший)
Я: пишу Математическое описание закона Фиттса
Заказчик:
Ход вашей мысли правильный. У Стивена Хокинга в книге "Краткая история времени" есть такие слова:
"Мне сказали, что каждая включенная в книгу формула вдвое уменьшит число покупателей. Тогда я решил вообще обходиться без формул. Правда, в конце я все-таки написал одно уравнение — знаменитое уравнение Эйнштейна Е=mc^2. Надеюсь, оно не отпугнет половину моих потенциальных читателей."
Также и в случае с данной статьей, я включил только одну формулу (хотя есть и другие) и сделал это скорее для "внутреннего" пользования, для UX исследователей и UX аналитиков. А заказчику достаточно отправить ссылку на данную статью, где всё подробно изложено с наглядными изображениями. Возможно это не убедит на 100%, но точно поможет в убеждении.
если вы не умеете разговаривать с заказчиком, это беда.
не совсем понял, за что минусы. Проекция старых фейлов?))
Тут точно сайт айтишников и предпринимателей, или клуб сложных пубертатов?)
Друг это не хабр, тут карма ни на что не влияет.
А как же вера в человеческий разум?)
надо говорить с заказчиком языком выгоды, а не высшей математики. Акценты правильно расставьте, на выгоду, а не на то, какой вы умный.
А это математическое обоснование - крутой аргумент, независимо от того, разбирается ли заказчик в высшей математике.
Знаете это как в разговоре с человеком, который ни когда не учил языки кроме родного, вдруг резко переключиться на иностранный язык-говорит о не воспитанности. Тут аналогично) поэтому с вами согласен, с каждым нужно говорить на "родном" языке) с дизайнерами на одном, с разрабом на другом)
Это задача продакта)
С языка сорвали про помощь в убеждении заказчика :)
Спасибо за обратную связь
И попросим доплату за правки ;3
это уж на каком этапе проекта разговор.
Данная статья как раз может помочь убедить заказчика. Почему вариант предлагаемый дизайнером лучше, чем вариант который хочет заказчик. Спасибо за отзыв!
"чем больше расстояние от одной цели до другой цели и чем меньше размер самой цели, тем больше времени требуется для её достижения. И соответственно наоборот, чем меньше расстояние от одной цели до другой цели и чем больше размер цели, тем меньше времени требуется для её достижения. Это и есть закон Фиттса (Fitts’s law)."
Это не закон Фиттса, это закон Капитана Очевидность))
Просто Фитс был быстрее чем капитан)
Как-то статья ни о чем. "Делайте кликабельные зоны нормального размера" и всё.
Вы не понимаете, одно дело интуитивно делать правильные решения, а другое это играть словами перед клиентом объясняя свой выбор и защищая свою точку зрения. Мало того просто делать хорошие и удобные интерфейсы, нужно еще это уметь продавать.
Если отбросить сарказм, то в сухом остатке так и есть: недостаточно просто делать интерфейс, необходимо обосновывать принятые решения. Хорошо это или плохо? На мой взгляд хорошо, потому что делать "интуитивно правильные решения" очень уж размытое и субъективное понятие. Например, начинающий дизайнер может подумать, что делать маленькие кнопки - это красиво и минималистично. Но заказчику и пользователям использовать их может быть неудобно. И в подобных случаях, законы вроде описанного в данной статье, помогают дизайнерам принимать более взвешенные решения (отталкиваясь от результатов экспериментов и исследований) и как бонус обосновывать их перед заказчиком.
С таким подходом можно обобщить и обесценить что угодно. Даже великое произведение Льва Толстого «Война и мир» состоящее из двух томов можно свести к:
«Как-то роман ни о чем, всю дорогу про любовь, а в конце наши победили» и всё.
Критиковать всегда проще, чем создавать. Но если почитать повнимательнее, то в статье можно найти ответы на ряд актуальных вопросов:
1. Почему стоит делать важные объекты крупнее.
2. На сколько крупнее делать объекты (как высчитать).
3. Почему не стоит делать слишком крупные объекты.
4. Почему стоит располагать объекты ближе.
5. Где уместно намеренно уменьшать размеры объектов.
6. Как применять данный подход в веб-дизайне.
7. Как добиться увеличения объекта без ущерба визуальной части (компромисс UX и UI).
А в комментариях под этой статьей, вы сможете увидеть, что проблема донесения этой информации от дизайнера к заказчику весьма актуальна. И данная статья, в том числе, помогает решить эту проблему.
У меня такая же проблема, кнопка не работает. Статья интересная, но вводную можно было сократить
Вводную и так сократили, вся статья читается за 3 минуты, абзацы короткие. Просто есть вещи, которые нужно оставить. Например лид (первый абзац) кратко раскрывает суть статьи, чтобы человек прочитав первый абзац понял читать дальше или нет. Второй абзац об авторе, чтобы понимать кто автор эксперимента в честь которого назван закон. Третий абзац - описание эксперимента, чтобы пояснить как были выявлены закономерности. Кто-то знает часть информации, а кто-то нет, вот вводная и уравнивает знания всех читателей. Но спасибо за обратную связь, попробуем сократить в след. статьях.
Малюсенький пример того что наш мозг делает играючи и нам кажется это очевидным.
Вот да. И таких примеров - масса!
Парни, если все так круто в конверсиях, то почему я по клику на "Получить доступ" на вашем сайте ничего не получаю кроме полупрозрачной панели в верхней части экрана?
стероидная конверсия чего угодно ниразу еще хорошо не заканчивалась
А вот это смешно :)
Подскажите, какая у вас ОС или какой смартфон, потому что на iOS кнопка кликабельна. И спасибо за неравнодушие к нашему сайту, исправим. А если есть что добавить по теме статьи - велкам, ваш внимательный взгляд поможет сделать её лучше.
MIUI 12.0.2 (Android), браузер Chrome
Комментарий недоступен
Тяжело вам, наверное, живется в этом неидеальном мире.
Комментарий недоступен
Возможно тяжело потому, что вы невнимательно прочитали статью. У меня нет другого объяснения тому, что вы всё перевернули и перепутали:
1) Я не называю себя дизайнером (графическим);
2) Я не размышляю в данной статье о гармонии мира;
3) Закон Фиттса совсем не про симметрию (более того, математическая симметрия это вообще про другое);
4) UX дизайн это не про эстетику, а про удобство и эффективность пользовательского опыта и надпись на лбу на эти показатели не влияет.
Поймите меня правильно, я без негатива. Надпись на лбу никак не относится к данной статье. Надпись вышла по недоразумению, на одной из платформ, так как уследить за всеми не всегда возможно. Я увидел это, поблагодарил за подсказку, исправим и всё. Но когда приходят в комментарии люди, которые начинают выплескивать свой негатив не по теме, вроде "терпеть не могу надписи на лбу". Не лучше ли направить свою энергию в продуктивное русло? Например, дополнить данную статью своим опытом или размышлениями по теме статьи. Это принесет больше пользы всем (автору, комментатору, читателям). Но если извлечь пользу в ваши планы не входит, то можно просто пройти мимо. К чему этот негатив не по теме, непонятно.
Комментарий недоступен
Это не про ux история. Это история о том, как фрустрирующий юноша нашел, до чего дое*ься)
Как раз пилю сайт с отвратительным дизайном, а клиент хочет удерживать на нем людей максимально) Спасибо с идеей про кнопки!!!
А помните дизайны сайтов 15 лет назад?
Помним, вебархив есть, там же некоторые недосеошники, смотрящие дом2 идеи черпают. Вам пострадавшим от ЕГ только сочувствую, раз про такую мелочь не по курсу.
М-Видео предлагает войти в стиральную машину. А OZON торгует губами, глазами и бровями. Очень сложно понять к чему относится "лицо", к бытовой технике или детским товарам. И какая разница сколько времени уходит на понимание всего этого бреда.
Комментарий
Ответ на комментарий :)
Судя по комментариям тут дизайнеры, напрямую без продактов, работают.
Дизайнер сказал делаем вот так, потому что закон Фиттса Эзенхаузера и Хопкинса. Продакт кивнул и отбил не конструктивную критику заказчика. Все изи. Зачем усложнять?)
Возможно я не правильно понял ваш вопрос. Но если есть проверенные и доказанные инструменты и подходы которые работают, упрощают и ускоряют взаимодействие пользователя с сайтом, то почему бы их не использовать дизайнеру? Или задача продакта и заказчика в том, чтобы всё переделать и усложнить?
Забавно, как все приводят эту формулу, но как по ней считать никто не показывает, просто формулы красиво смотрятся. Вот посчитайте мне кто-то по ней:
- есть две кнопки 40px/160px, и какой точный отступ должен быть между ними по горизонтали?
Эдуард, это очередная ЗАЧЁТНАЯ статья об ux/ui. Подписываюсь на вас, вы пишете об интересных и полезных вещах! Но свой собственный сайт, плиз, доработайте!!! Он у вас таки на тильде, а не самопис, там все просто!
Ну Алексей)))
Навел смуту в комментариях под другой моей статьей, где теперь много негатива, а сюда пришел хвалить :)))