Закон Фиттса: до кнопки должно быть легко дотянуться

Урок 9.2 · Интерфейсы и сайты с нуля · Модуль 9. Законы восприятия: почему это работает · По подписке

Цель урока: Понять, почему размер и расстояние до цели решают удобство, и довести кнопки до 44 px, зазора 8 px и отдельного опасного действия.

Нужно знать заранее: Урок 8.6 «Кнопка, которая ведёт себя как кнопка»

Объяснение

Зачем это нужно: Кнопка может быть красивой и всё равно неудобной: если в неё трудно попасть, человек раздражается и ошибается. Это не про вкус — это про моторику руки. Закон Фиттса описывает, сколько времени нужно, чтобы добраться до цели, и из него получаются конкретные числа: 44 px, зазор 8 px, опасное действие отдельно.

Как это работает: Формулировка простая: время дотягивания до цели растёт с расстоянием и падает с её размером. Точная запись — T = a + b · log2(1 + D/W), где D — расстояние до цели, W — её ширина. Логарифм значит, что увеличить маленькую цель полезнее, чем большую. Что из этого следует на практике: — частые и важные действия делают крупными и близкими; — редкие могут быть мельче, но не меньше предела; — на телефоне минимальная цель — 44 × 44 px (то же рекомендуют Apple и Google); — между соседними целями нужен зазор: промах по соседней кнопке хуже, чем промах в пустоту; — опасное действие нельзя ставить вплотную к безопасному: «Удалить» рядом с «Сохранить» — это случайные удаления.

Уроки модуля 9

• 9.1 Гештальт: глаз сам собирает группы (бесплатно)
• 9.2 Закон Фиттса: до кнопки должно быть легко дотянуться — вы здесь (по подписке)
• 9.3 Закон Хика: меньше выбора — быстрее решение (по подписке)
• 9.4 Закон Якоба: человек ищет там, где привык (по подписке)
• 9.5 Закон Миллера: почему «семь пунктов» — миф (по подписке)
• 9.6 Общая судьба: движение, которое читается как одно (по подписке)
• 9.7 Проект: экран, который ведёт за руку (по подписке)
• 9.8 Разбор экрана по законам восприятия (по подписке)