Закон Фіттса в ігрових інтерфейсах

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

Є банальні речі, на які ми не звертаємо увагу або вирішуємо їх іншим шляхом. Але якщо правильно підійти, то це може вплинути на ефективність (або, як люблять казати фінансово налаштовані люди, — конверсію). Все, до чого ми звикли і користуємось, досліджувалося та обиралось поміж іншого.

Здавалося б, елементарна дія — посунути курсор в бік потрібного елемента. Однак і ця дія була елементом теоретично-інформаційного дослідження в другій половині 50-х років. Спочатку як психологічного та математичного, а згодом, як практичного елемента взаємодії людини з компʼютером. Його проводив американський психолог Пол Фіттс, який також досліджував інженерію людських факторів руху. Він розробив модель людського руху, яка стала називатись Законом Фіттса.

Що пояснює Закон Фіттса

Не вдаючись в подробиці (а їх не мало та ще й із формулами, посилання будуть в кінці), то це час, який потрібен для досягнення цілі, що залежить від відстані та розміру цілі (я трохи перефразував визначення Брюса Тогнацци, проектувальника софта в Apple впродовж 30 років).

Але є нюан: закон Фіттса розглядав лише прямолінійний рух від обʼєкта до цілі. Однак його ідею розвинули в HCI (Human-Computer Interaction) у дослідженні, що вивчало взаємодію компʼютерних систем та людини.

До головного — а яке відношення це має до ігор та інтерфейсу загалом? Завдяки таким законам та дослідженням, ми зараз маємо інструменти впливу на якість UX та UI. Речі, які ми сприймаємо як те, що було завжди, насправді мають історію та вплив. Взяти хоча б те, що завдяки цьому закону Xerox вирішили використовувати саме мишу у своїх інтерфейсах.

Прості приклади: це такі випадки, коли потрібно курсором (у грі це може бути будь-який поінтер) досягти мети в найкоротший проміжок часу: меню чи панель інвентарю, які знаходяться в одному й тому самому місці, найкоротша відстань до кнопки (привіт магазинам в іграх та батлпасам!), радіальні меню. Так, в це важко повірити, але це має свої правила та закони, засновані на дослідженнях.

Що ще повʼязано з цим законом? Не знаю, чи звертали ви увагу (я ні, до цього моменту), що рух курсора від старту до цілі складається з двох етапів: як тільки ви рушите поінтер в бік цілі, ви робите блискавичний спрямований рух, але він не точний 🙃, а друга частина руху уповільнюється, щоби точніше влучити в ціль.

Несподівано? Спробуйте в шутері одним рухом навести поінтер-приціл, та хоча б, на нерухомий обʼєкт, або просто навести курсор на кнопку в браузері. Тут починає діяти закон Фіттса — чим більший обʼєкт, тим менше часу буде витрачено на його досягнення, чим більший обʼєкт, тим легше на нього клацнути, поцілити, натиснути.

А хочете ще здивуватись? Тепер повторіть те саме фізично, наприклад, на планшеті, проводячи пальцем від точки А в точку В, або олівцем на папері, чи навіть від родимки до родимки на руці. Дослідження показують, що в фізичному світі ми більш точні, ніж у віртуальному.

Ігрові аналогії закону Фіттса

Окремо хочу, мабуть, більш для себе, визначити саме ігрові аналогії закону Фіттса.

Радіальні меню. Тип 1. На мою думку, це таке меню, яке по затисканню відповідної кнопки зʼявляється посеред екрана, де є перелік доступного обладнання чи зброї та навіть вміння персонажа.

Тип 2. Це меню закріплене за d-pad, або, як я казав в дитинстві з друзями, — хрестовина. Це навіть швидше за тип 1, бо тут взаємодія миттєва.

Крайові меню або Правило нескінченних ребер. Такі панелі, що завжди розміщені на краях екрана. Таким чином вони однаково доступні в будь-який час, тому займають менше часу, ніж якщо вони були б розміщені довільно і не постійно будь-де на екрані.

Кутові меню. Коли цілі розміщені в кутах, то це створює умовно нескінченно великі та помітні цілі. І як би юзер не вів курсор, і у незалежності від швидкості руху, курсор все-одно досягне кута. Це меню по типу Пуска в Windows (хоча в 11-й версії його вже перемістили на середину) або 🍏 на Мас. В іграх щось не дуже можу пригадати приклади, може не зустрічав ще.

Як на практиці можна це застосувати або де воно вже застосовується? Чесно, я не знаю, чи наступні приклади були засновані на законі Фіттса, але вони точно працюють саме так. З ними я стикався особисто, тому для мене було здивуванням дізнатись про існування закону. Наведу перші чотири приклади з віртуального та реального світу.

Перший це так зване Quad pad menu в програмі 3ds max (таке меню було навіть в 2002–2003 роках версії програми), яке складалось з 4-х меню і нагадувало плитку з курсором по центру.

Другий приклад також із 3d редактора, але тепер це Blender та його меню Pie menu, яке має вигляд довільно підвішених пунктів по колу (схоже на радіальне меню).

Наступні два це фізичні приклади, що змішані з віртуальним відповідником — це Express menu на графічних планшетах Wacom Pro, де є радіальне фізичне меню (спрощене) та Click wheel на Apple IPod (попередні моделі).

Ну, а в іграх приклади такі: це радіальне меню вибору зброї, панелі доступу до обладнання що нерухомо прикріплені до країв екранів.

Приклади радіальних меню:

Крайові мені (нескінченні ребра):

Кутові меню + крайові:

Кілька прикладів, як на мене, не дуже вдалих. На першому прикладі збільшується час досягнення крайніх елементів за допомогою D-pad, а на другому не дуже вдале розміщення карток внизу в куті та хрестоподібне меню в правому куті:

На мій погляд, мабуть, найефективніше меню — це квадро-меню. Це коли за кліком чи натисканням зʼявляється меню з чотирьох плиток з курсором-поінтером в самісенькому центрі, і 4 опції для вибору стають рівнодоступними.

Висновок

Я не хочу, аби здавалося, що цей закон чи будь-який інший є непорушним правилом. Цей диванний 🤓 аналіз я провів для себе та обережно використовуватиму у майбутніх проєктах.

Мій ТГ-канал про ігрові інтерфейси — t.me/uxtaui

Матеріали, що використовував:

Закон Фіттса — en.wikipedia.org/wiki/Fitts’s_law

Закон кермування/управління — en.wikipedia.org/wiki/Steering_law

Розмір та час вибору — mindhacks.com/...lection-times-fittss-law<

Фіттсів закон — web.archive.org/...ves/2004/08/19/fitts_law

Візуалізація закону Фіттса — www.particletree.com/...s/visualizing-fittss-law

Невидимі деталі дизайну взаємодії — rauno.me/craft/interaction-design