Закон Фиттса

Есть в дизайне интерфейсов один очень важный закон... стоп. Разве не было сказано, что в дизайне нет и не может быть никаких законов? Ну, знаете, это зависит от того, что подразумевать под дизайном и под законом. Да и категорически воспринимать любое утверждение тоже не стоит. Итак, закон Фиттса.

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

T — среднее время, необходимое для перемещения курсора,
a и b — константы, устанавливаемые опытным путем и представляющие время отклика и скорость устройства ввода,
D — дистанция, а W — ширина элемента управления, измеренная по линии движения курсора.

Без формул

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

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

05 Казалось бы, что с того? Неужели кто-то об этом заботится? Пожалуй, осознанно это делает только Эппл. Микрософт следует этому принципу, но вечно что-то забывает. Гугол заботливо применил закон в своем браузере Хром. Что касается продуктов остальных компаний... порой все очень запущено.

Виндоусы

06 Давайте взглянем на эволюцию интерфейса всем известной операционной системы Виндоус. Как известно, первая версия Виндоуса, завоевавшая значительную популярность, вышла в 1992 году и носила название Windows 3.1.

Windows 3.1

07 Тогда еще у винды не было её главного элемента интерфейса — кнопки Пуск, — а была только жалкая пародия на рабочий стол и оконный менеджер. Даже кнопка закрытия окна была не крестиком, а полоской, и была расположена слева. Однако, если подвести мышь в левый верхний угол экрана до упора, эта кнопка нажимается!

08 Говорят, самый большой рывок в развитии интерфейса Виндоуса совершила версия 95. Именно в ней впервые появилась кнопка Пуск, а также были в корне переработаны рабочий стол и проводник. Кнопки управления окном приняли узнаваемый вид и расположение.

Windows 95

09 Обратите внимание: и кнопка Пуск, и кнопка Закрыть имеют небольшие зазоры от краев экрана и не соприкасаются с ними вплотную, как это было в 3.1. А если увести мышь в угол до упора, то можно обнаружить, что кнопка Закрыть реагирует на нажатие в углу, а кнопка Пуск — нет. Либо Микрософт забыли про свою главную кнопку, либо поведение кнопки Закрыть — какая-то внутреняя особенность операционной системы.

10 Недочет с Пуском просуществовал долгое время и присутствовал во всех версиях винды вплоть до ХР. Новоиспеченная ОС получила новый дизайн и исправила множество ошибок в интерфейсе.

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

12 Исправив одно, разработчики забыли про другое. Многие пользователи выдвигают панель задач на две позиции вверх, и кнопка Пуск при этом не учитывает правило Фиттса. Надуманно? Может быть, однако в Висте и Виндоусе 7 исправлен и этот недочет.

Windows 7

13 А еще, начиная с Висты, значок выделяется областью, и в него в разы легче попасть. Тут тоже есть нюанс: в Висте значок компьютера пристыкован областью к обеим границам экрана, а в Семерке — только к левой. Каким образом так вышло — сложно представить, но это явная ошибка Виндоуса 7, мешающая жить.

Windows Vista и Windows 7

14 Стоит также отметить кнопку сворачивания окон — она в 7 перекочевала в правый нижний угол и подчиняется Фиттсу сполна: на системах с двумя мониторами система вообще не пускает мышь на второй монитор, если вести курсор вдоль панели задач. Таким образом, даже на системах с несколькими мониторами кнопку «Свернуть все окна» можно нажать вслепую.

Мак ОС

15 Теперь давайте взглянем на Макинтош. В Мак ОС закон Фиттса учтен совершенно осмысленно. О многих тонкостях её интерфейса рассказывает Джефри Раскин в своей книге «Интерфейс» («The Human Interface»).

Mac OS X Leopard

16 Меню Мак ОС намеренно приклеено к верхней границе экрана. В пункты такого меню гораздо проще попасть курсором. Вследствие этого, правда, сложнее попасть в кнопку закрытия окна, но она используется гораздо реже.

Браузеры

17 Отдельной истории заслуживают табы в браузерах. Первым вынести их в заголовок окна догадался Хром.

Google Chrome 4

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

19 Хром хорошо сэкономил места, вынеся табы в заголовок. Его примеру немедленно последовали конкуренты. Сначала мы увидели этот прием в Опере, а затем и в Фаерфоксе.

Opera 10.5, Firefox 4b5

20 Увы, но авторы этих браузеров не учли того, что учел Гугол. В Опере над табами присутствует двухпиксельный отступ, видимо, отданный на откуп двойному щелчку. Авторы же Фаерфокса не только забыли про закон, а загубили всю идею и впустую растратили кучу места (в финальной версии исправлено).

Закон Фиттса в Википедии

Июль 2010
Андрей Маркелов
Библиотека