Тому, кто занимается или интересуется пользовательскими интерфейсами, наверняка известен закон Фиттса. Его суть пердельно проста: чем больше элемент и чем ближе он к курсору, тем легче на него кликнуть. Это очень классно иллюстрирует Кевин Хэйл (KevinHale) в своей статье «Визуализация закона Фиттса».
Чтобы спасти вас от утомительного чтения, привожу укороченную версию закона Фиттса:
Располагайте наиболее важные элементы интерфейса по краям экрана. Там на них легче кликнуть, потому что курсор автоматически останавливается на границе экрана.
Делайте кликабельные области как можно больше. Чем больше элемент — тем легче попасть по нему курсором.
Звучит просто. Даже слишком просто. Но давайте развлечемся и мысленно решим несколько упражнений. Представьте, что вам необходимо кликнуть на:
- Область размером 1х1 пиксель в произвольном месте экрана
- Область размером 5х5 пикселей в произвольном месте экрана
- Более существенную область — 50х50 пикселей
- Область размером 5х5 пикселей в углу экрана
- Область 1х100 пикселей, которая находится на нижней границе экрана
Закон Фиттса несет в себе колоссальный эффект и широко используется в среде проектировщиков пользовательского интерфейса, но иногда не так фанатично, как должен был бы. Но еще реже проектировщики учитывают обратное следствие закона Фиттса, которое не менее важно.
Понятно, что элементы, от которых требуется, чтобы пользователь нажал на них, должны располагаться по краям или в углах экрана и быть большими. Но что же делать с теми элементами, на которые пользователь не должен кликнуть случайно? Например, с кнопкой «Удалить всю мою работу»?
Алан Купер пишет в своей книге «Об интерфейсе. Основы проектирования взаимодействия»:
В кабине каждого истребителя есть ярко окрашенный рычажок. Если за него потянуть, небольшой реактивный двигатель под сиденьем пилота сработает и вытолкнет пилота вместе с сиденьем из самолета, после чего раскроется парашют — и пилот благополучно спустится на землю. Рычажок катапульты можно использовать только один раз, а последствия его использования значительны и необратимы.
Программы должны иметь «катапульты», чтобы пользователи могли время от времени перемещать внутри интерфейса стабильные объекты или существенно менять функциональность либо поведение приложения. Единственное, что никогда не должно случаться, — так это непреднамеренное катапультирование.
opposite-fitts-1.pngПри проектировании интерфейса следует убедиться в том, что пользователь не сможет нечаянно катапультироваться, когда ему требуется лишь слегка подкрутить настройки программы.
Я с ходу могу назвать несколько примеров приложений, используемых мной ежедневно, в которых кнопка катапультирования пилота располагается рядом с кнопкой освещения кабины.
Давайте, к примеру, посмотрим на нашего друга Gmail:
Курсор находится между двумя кнопками и вы спросите: «Он хочет отослать письмо или сохранить его в черновиках?». Честно говоря, к тому времени, как я дописал это послание, полное ненависти, я уже успел остыть. Ничего, что я нечаянно отправил его адресату, вместо того, чтобы сохранить, мы всегда можем просто отменить отправленное письмо. Погодите-ка, мы ведь не можем! В данном случае кресло пилота было выброшено из кабины самолета.
Встречаются ситуации похуже. Например, когда я отправляю письма в архив:
В прошлом примере между кнопками было по крайней мере 10 пикселей, здесь же их целых… 3! Раз в пару дней я случайно отмечаю как спам то, что должно было быть заархивировано. Спасибо Google, что он предлагает простой и очевидный способ отменить такой случайный клик. Но я до сих пор не могу понять, неужели две кнопки, поддерживающие абсолютно различные функции, обязаны находиться рядом друг с другом?
Никто не оспаривает эффективность кнопки «Отменить», но было бы гораздо лучше, если бы мне вообще не приходилось нажимать эту кнопку. Может, было бы лучше разместить ее в другом месте и уменьшить? Взгляните на редактор постов для блога в WordPress:
Главным акцентом здесь является кнопка «Update» («Внести изменения») — ее легко заметить и по ней легко кликнуть. Менее важная кнопка «Переместить в корзину» представлена в виде гиперссылки и расположена на расстоянии от кнопки превалирующего действия.
В следующий раз, когда вы будете проектировать пользовательский интерфейс, обязательно следуйте закону Фиттса. Но не забывайте также про его обратное следствие: по редко используемым или «опасным» элементам должно быть сложно кликнуть.
Оригинал материала: The Opposite of Fitts' Law