{"id":9478,"title":"\u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0440\u0430\u0442\u0438\u0448\u044c, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0430\u043a\u043e\u043f\u0438\u0448\u044c","url":"\/redirect?component=advertising&id=9478&url=https:\/\/vc.ru\/promo\/317067-korotko-nakopitelnyy-schet-stavka-po-kotoromu-zavisit-ot-summy-trat&placeBit=1&hash=d207611bc9f0e6594fdffbb28a750052a6fdd69fcd26c1c4f03600bcfe768326","isPaidAndBannersEnabled":false}

UX дизайн: Закон Фиттса — для определения оптимальных размеров и расположения элементов на сайте

Статья для начинающих UX/UI дизайнеров, исследователей и аналитиков. Этот закон помогает определить оптимальные размеры и места расположения элементов на сайте для упрощения и ускорения взаимодействия пользователей с ними.

Американский психолог Пол Фиттс (Paul Morris Fitts) работавший в университете штата Огайо, в 1954 году провел эксперимент, описывающий движение человека при достижении цели в двумерном пространстве.

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

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

Отслеживая время касаний, Фиттс вывел зависимость: чем больше расстояние от одной цели до другой цели и чем меньше размер самой цели, тем больше времени требуется для её достижения. И соответственно наоборот, чем меньше расстояние от одной цели до другой цели и чем больше размер цели, тем меньше времени требуется для её достижения. Это и есть закон Фиттса (Fitts’s law).

Слева: Пол Фиттс. Справа: эксперимент Фиттса. wikipedia.org, yorku.ca

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

Объясняются эти выводы логарифмической зависимостью между переменными. Для наглядности, на изображении ниже график функции, который описывает зависимость между размером цели и временем ее достижения при неизменной дистанции. Например, при увеличении размера с 0,5 до 1 время сокращается с 0,45 до 0,3, т.е. примерно на 30% (слева на изображении).

Слева: небольшое увеличение размера дает существенное сокращение времени. Справа: увеличение цели практически не отражается на скорости ее достижения. График askusers.ru (с нашей доработкой)

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

Математически закон записывается как:

Математическое описание закона Фиттса wikipedia.org

Где:

  • T — среднее время, затрачиваемое на совершение действия.
  • a — среднее время запуска/остановки движения.
  • b — величина, зависящая от типичной скорости движения.
  • D — дистанция от точки старта до центра цели.
  • W — ширина цели, измеренная вдоль оси движения.

Применение закона Фиттса в дизайне сайтов

Аналогично закон Фиттса применим и к дизайну сайтов или интерфейсов. Например: чем дальше кнопка (от последнего клика мыши) и чем меньше её размер, тем больше времени необходимо пользователю для клика по ней.

Также закон Фиттса можно использовать для намеренного осложнения пути пользователя, например сделав меньше кнопку «Удалить» пользователи реже будут кликать по ней случайно. Вместо кнопки может быть любой другой объект или цель на странице.

Слева: кнопка меньшего размера и клик по ней занимает больше времени у пользователя. Справа: кнопка большего размера и клик по ней занимает меньше времени у пользователя struto.co.uk

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

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

Область нажатия в 2 раза больше иконки "Войти" mvideo.ru

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

Область нажатия в 2 раза больше текстового заголовка "Красота и здоровье" ozon.ru

Вывод

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

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

#ux

0
46 комментариев
Популярные
По порядку
Написать комментарий...
Сергей Михайленко

А потом пришел заказчик и сказал — "Так не хочу. Вот так хочу" 😄
Если серьезно — интересный и познавательный материал, спасибо! 👍

Ответить
13
Развернуть ветку
Андрей Крамарь

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

Материал хороший)

Ответить
6
Развернуть ветку
Anton Reut

Я: пишу Математическое описание закона Фиттса
Заказчик: 

Ответить
17
Развернуть ветку
Эдуард Файзуллин

Ход вашей мысли правильный. У Стивена Хокинга в книге "Краткая история времени" есть  такие слова:

"Мне сказали, что каждая включенная в книгу формула вдвое уменьшит число покупателей. Тогда я решил вообще обходиться без формул. Правда, в конце я все-таки написал одно уравнение — знаменитое уравнение Эйнштейна Е=mc^2. Надеюсь, оно не отпугнет половину моих потенциальных читателей."

Также и в случае с данной статьей, я включил только одну формулу (хотя есть и другие) и сделал это скорее для "внутреннего" пользования, для UX исследователей и UX аналитиков. А заказчику достаточно отправить ссылку на данную статью, где всё подробно изложено с наглядными изображениями. Возможно это не убедит на 100%, но точно поможет в убеждении.

Ответить
11
Развернуть ветку
Андрей Крамарь

если вы не умеете разговаривать с заказчиком, это беда.

Ответить
1
Развернуть ветку
Андрей Крамарь

не совсем понял, за что минусы. Проекция старых фейлов?))
Тут точно сайт айтишников и предпринимателей, или клуб сложных пубертатов?)

Ответить
4
Развернуть ветку
Игорь Алентьев

Друг это не хабр, тут карма ни на что не влияет.

Ответить
2
Развернуть ветку
Андрей Крамарь

А как же вера в человеческий разум?)

Ответить
0
Развернуть ветку
Андрей Крамарь

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

Ответить
4
Развернуть ветку
Михаил Бакаев

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

Ответить
0
Развернуть ветку
Эдуард Файзуллин

С языка сорвали про помощь в убеждении заказчика :)
Спасибо за обратную связь

Ответить
2
Развернуть ветку
Kite Catt

И попросим доплату за правки ;3

Ответить
1
Развернуть ветку
Андрей Крамарь

это уж на каком этапе проекта разговор.

Ответить
0
Развернуть ветку
Эдуард Файзуллин

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

Ответить
3
Развернуть ветку
Andrey Krestovnikov

"чем больше расстояние от одной цели до другой цели и чем меньше размер самой цели, тем больше времени требуется для её достижения. И соответственно наоборот, чем меньше расстояние от одной цели до другой цели и чем больше размер цели, тем меньше времени требуется для её достижения. Это и есть закон Фиттса (Fitts’s law)."
Это не закон Фиттса, это закон Капитана Очевидность))

Ответить
3
Развернуть ветку
Михаил Бакаев

Просто Фитс был быстрее чем капитан)

Ответить
0
Развернуть ветку
DV

Как-то статья ни о чем. "Делайте кликабельные зоны нормального размера" и всё. 

Ответить
2
Развернуть ветку
Эдуард Файзуллин

С таким подходом можно обобщить и обесценить что угодно. Даже великое произведение Льва Толстого «Война и мир» состоящее из двух томов можно свести к:

«Как-то роман ни о чем, всю дорогу про любовь, а в конце наши победили» и всё.

Критиковать всегда проще, чем создавать. Но если почитать повнимательнее, то в статье можно найти ответы на ряд актуальных вопросов:
1. Почему стоит делать важные объекты крупнее.
2. На сколько крупнее делать объекты (как высчитать).
3. Почему не стоит делать слишком крупные объекты.
4. Почему стоит располагать объекты ближе.
5. Где уместно намеренно уменьшать размеры объектов.
6. Как применять данный подход в веб-дизайне.
7. Как добиться увеличения объекта без ущерба визуальной части (компромисс UX и UI).

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

Ответить
2
Развернуть ветку
Kostya Koremin

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

Ответить
3
Развернуть ветку
Эдуард Файзуллин

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

Ответить
1
Развернуть ветку
St3.14 St3.14

У меня такая же проблема, кнопка не работает. Статья интересная, но вводную можно было сократить

Ответить
2
Развернуть ветку
Эдуард Файзуллин

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

Ответить
2
Развернуть ветку
Winter Buddha

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

Ответить
2
Развернуть ветку
Андрей Крамарь

Вот да. И таких примеров - масса!

Ответить
0
Развернуть ветку
Артем Головачев

Парни, если все так круто в конверсиях, то почему я по клику на "Получить доступ" на вашем сайте ничего не получаю кроме полупрозрачной панели в верхней части экрана?

Ответить
1
Развернуть ветку
Andrew Freez

стероидная конверсия чего угодно ниразу еще хорошо не заканчивалась

Ответить
3
Развернуть ветку
Эдуард Файзуллин

А вот это смешно :)

Ответить
1
Развернуть ветку
Эдуард Файзуллин

Подскажите, какая у вас ОС или какой смартфон, потому что на iOS кнопка кликабельна. И спасибо за неравнодушие к нашему сайту, исправим. А если есть что добавить по теме статьи - велкам, ваш внимательный взгляд поможет сделать её лучше.

Ответить
1
Развернуть ветку
Артем Головачев

MIUI 12.0.2 (Android), браузер Chrome

Ответить
0
Развернуть ветку
Sergey Khohlachev

Терпеть не могу «надписи на лбу».

Ответить
0
Развернуть ветку
Эдуард Файзуллин

Тяжело вам, наверное, живется в этом неидеальном мире.

Ответить
0
Развернуть ветку
Sergey Khohlachev

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

Ответить
2
Развернуть ветку
Эдуард Файзуллин

Возможно тяжело потому, что вы невнимательно прочитали статью. У меня нет другого объяснения тому, что вы всё перевернули и перепутали:

1) Я не называю себя дизайнером (графическим);
2) Я не размышляю в данной статье о гармонии мира;
3) Закон Фиттса совсем не про симметрию (более того, математическая симметрия это вообще про другое);
4) UX дизайн это не про эстетику, а про удобство и эффективность пользовательского опыта и надпись на лбу на эти показатели не влияет.

Поймите меня правильно, я без негатива. Надпись на лбу никак не относится к данной статье. Надпись вышла по недоразумению, на одной из платформ, так как уследить за всеми не всегда возможно. Я увидел это, поблагодарил за подсказку, исправим и всё. Но когда приходят в комментарии люди, которые начинают выплескивать свой негатив не по теме, вроде "терпеть не могу надписи на лбу". Не лучше ли направить свою энергию в продуктивное русло? Например, дополнить данную статью своим опытом или размышлениями по теме статьи. Это принесет больше пользы всем (автору, комментатору, читателям). Но если извлечь пользу в ваши планы не входит, то можно просто пройти мимо. К чему этот негатив не по теме, непонятно.

Ответить
1
Развернуть ветку
Sergey Khohlachev

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

Ответить
1
Развернуть ветку
Андрей Крамарь

Это не про ux история. Это история о том, как фрустрирующий юноша нашел, до чего дое*ься)

Ответить
0
Развернуть ветку
Святослав Драгунов

Как раз пилю сайт с отвратительным дизайном, а клиент хочет удерживать на нем людей максимально) Спасибо с идеей про кнопки!!!

Ответить
1
Развернуть ветку
Roman Kozachenko

А помните дизайны сайтов 15 лет назад? 

Ответить
0
Развернуть ветку
Bruce Pain

Помним, вебархив есть, там же некоторые недосеошники, смотрящие дом2 идеи черпают. Вам пострадавшим от ЕГ только сочувствую, раз про такую мелочь не по курсу.

Ответить
0
Развернуть ветку
Denis Zaika

М-Видео предлагает войти в стиральную машину. А OZON торгует губами, глазами и бровями. Очень сложно понять к чему относится "лицо", к бытовой технике или детским товарам. И какая разница сколько времени уходит на понимание всего этого бреда.

Ответить
0
Развернуть ветку
Anton Balakin

Комментарий

Ответить
0
Развернуть ветку
Эдуард Файзуллин

Ответ на комментарий :)

Ответить
0
Развернуть ветку
Михаил Бакаев

Судя по комментариям тут дизайнеры, напрямую без продактов, работают.
Дизайнер сказал делаем вот так, потому что закон Фиттса Эзенхаузера и Хопкинса. Продакт кивнул и отбил не конструктивную критику заказчика. Все изи. Зачем усложнять?)

Ответить
0
Развернуть ветку
Эдуард Файзуллин

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

Ответить
0
Развернуть ветку
Иван Белов

Забавно, как все приводят эту формулу, но как по ней считать никто не показывает, просто формулы красиво смотрятся. Вот посчитайте мне кто-то по ней:
- есть две кнопки 40px/160px, и какой точный отступ должен быть между ними по горизонтали?

Ответить
0
Развернуть ветку
Алексей Медведев

Эдуард, это очередная ЗАЧЁТНАЯ статья об ux/ui. Подписываюсь на вас, вы пишете об интересных и полезных вещах! Но свой собственный сайт, плиз, доработайте!!! Он у вас таки на тильде, а не самопис, там все просто! 

Ответить
0
Развернуть ветку
Эдуард Файзуллин

Ну Алексей)))
Навел смуту в комментариях под другой моей статьей, где теперь много негатива, а сюда пришел хвалить :)))

Ответить
0
Развернуть ветку
Читать все 46 комментариев
Увлечение самолётами, которое переросло в бизнес

Предприниматель из Волгограда производит и продаёт по всему миру симуляторы дополненной реальности.

Мечтает ли Мастер кампаний «Яндекса» об электроовцах? Алгоритмы «Директа» заменят агентства. Мы станем водителями такси

Испытали новую волшебную таблетку «Яндекс.Директа» — «Мастер кампаний» в e-com, мебели и недвижимости. Дешевые лиды в три клика в сверхконкурентных нишах.

Ozon запустил встроенный в маркетплейс онлайн-кошелёк «Ozon Счёт» Статьи редакции

Им можно оплачивать заказы только на Ozon, пользователям доступен кешбэк.

«Газпромбанк» взял семь номинаций на двух премиях

Редко удается получить сразу несколько наград, а ещё реже получается это сделать на двух премиях сразу. Тем не менее, у нас получилось: стали лауреатами Digital Leaders и «Время инноваций»!

Досудебная претензия к Эльдорадо

Начало сей чудной истории:

Несвободный фриланс: сложности продуктов для проектных исполнителей

Хоть количество фрилансеров в России растет, на рынке все еще сложно создать продукт с F2B или P2P-моделью.

Фото: Unsplash
DiDi впервые показал в России электромобиль для водителей такси

Его представили 7 декабря на форуме «Открытые инновации» в Сколково.

Что такое контент-план для соцсетей и как с ним работать

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

Как и чем сейчас живут московские рестораны, отмеченные гидом «Мишлен»

Узнали и рассказываем, как повлиял звездный статус на рестораны «Деликатессен» и «Паризьен», и за что их сотрудники получают повышенные чаевые.

Какие тренды мобильного банкинга актуальны в 2021 году: главное из отчета Go Banking

7 декабря digital-агентство Go Mobile выпустило ежегодный отчет о мобильном банкинге в России. Эксперты оценили 35 банков и выявили основные тренды, в рамках которых развивались их мобильные приложения.

null