Брюс Тоньяццини (Bruce Tognazzini), бывший сотрудник Apple, еще в далеком 1999 году разработал замечательный тест на знание закона Фиттса. Несмотря на то, что с того времени прошло уже 14 лет, сам тест не теряет своей актуальности (стоит только вспомнить, что свой закон Пол Фиттс разработал в 1954 году).

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

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

Обзор вопросов

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

Никаких ловушек в тесте нет. Все ответы основаны на реальных исследованиях.

1. Большинство операционных систем предлагает пользователю возможность отображения текстовой подписи под каждой пиктограммой на рабочем столе (ярлыки, файлы, папки). Назовите как минимум одну причину, по которой пиктограммы с подписями являются более доступными. (Допустим, пользователь знает, что обозначает каждый графический элемент на рабочем столе и не нуждается в подписи для идентификации).
2. Представьте стандартный графический редактор (Paint, Photoshop). Вдоль левого края приложения располагается панель основных инструментов редактирования изображения. Она представляет собой матрицу 2х8 (2 колонки и 8 рядов) из пиктограмм размером 16х16 пикселей. Какие шаги можно предпринять, чтобы ускорить время перехода к каждому из инструментов, не перемещая панель инструментов из левой части экрана и не изменяя размер иконок?
3. Известно, что курсор мыши пользователя находится в центре экрана разрешением 1600х1200 пикселей. Нам необходимо, чтобы пользователь кликнул по цели размером 1х1 пиксель. Перечислите пять позиций для размещения целевой точки, по которым пользователь может кликнуть быстрее других. Дополнительно: учитывая, что пользователь — правша, перечислите позиции по порядку скорости доступа к ним.
4. Панель задач Microsoft может быть расположена на любой из четырех границ экрана. Также есть возможность отображать ее либо постоянно, либо только при наведении курсора. Опишите, по крайней мере, 2 причины, по которым решение с появлением скрытой панели задач при наведении курсора является крайне неэффективным.
5. Объясните, почему к строке меню в Macintosh можно получить доступ как минимум в 5 раз быстрее, чем к типичной строке меню в окне Windows. Дополнительно: предположите 2 причины, по которым Microsoft воплотил такое глупое решение.
6. Назовите хотя бы одно преимущество радиального всплывающего меню над стандартным, линейным всплывающим меню.
7. Что бы вы сделали, чтобы сбалансировать скорость доступа к тем пунктам выпадающего или всплывающего меню, которые находятся на  втором уровне и глубже?
8. Промышленные дизайнеры Apple сократили размеры клавиатуры Mac на целых полкнопки, «обрезав» функциональные клавиши ровно наполовину, соответственно. Почему это было неправильным решением?
9. Что является общим решением для всех заданных вопросов?

Если вы не можете ответить на последний вопрос, то со всеми остальными у вас точно возникнут сложности. Не бойтесь, вы не одиноки в этом, потому что никто в Microsoft и все меньше и меньше людей в Apple могут пройти этот тест.

Ответы

Давайте начнем с ответа на вопрос 9 — общим решением является закон Фиттса.

Закон Фиттса: время, требуемое для позиционирования на какой-либо элемент есть функция от расстояния до этого элемента и от его размера.

Как вы видите, закон Фиттса прост и абсолютен. Тем не менее, несмотря на такую очевидность, дизайнеры очень часто игнорируют его. Давайте посмотрим правильные ответы на остальные вопросы:

Вопрос 1

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

Я вижу две причины (у вас их может быть и больше).

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

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

Когда иконки расположены на расстоянии друг от друга, между ними существует некоторая «буферная зона», нечаянный клик в которой не приведет ни к каким последствиям.

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

Вопрос 2

• Представьте стандартный графический редактор (Paint, Photoshop). Вдоль левого края приложения располагается панель основных инструментов редактирования изображения. Она представляет собой матрицу 2х8 (2 колонки и 8 рядов) из пиктограмм размером 16х16 пикселей. Какие шаги можно предпринять, чтобы ускорить время перехода к каждому из инструментов, не перемещая панель инструментов из левой части экрана и не изменяя размер иконок?

В этот интерфейс можно внести две корректировки. Обе очень важны.

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

Вопрос 3

• Известно, что курсор мыши пользователя находится в центре экрана разрешением 1600х1200 пикселей. Нам необходимо, чтобы пользователь кликнул по цели размером 1х1 пиксель. Перечислите пять позиций для размещения целевой точки, по которым пользователь может кликнуть быстрее других. Дополнительно: учитывая, что пользователь — правша, перечислите позиции по порядку скорости доступа к ним.

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

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

Остальные четыре позиции находятся настолько далеко от курсора, насколько это возможно. Это четыре угла экрана и расстояние до них компенсируется их размером, бесконечным в двух измерениях. Спорим, что если вы толкнете мышь достаточно сильно, в подавляющем большинстве случаев курсор окажется в одном из четырех углов экрана?

Ключ к дополнительному вопросу — то, что пользователь является правшой и кликает по целевым пикселям в порядке возрастания сложности доступа к ним. Начнет он, разумеется, с пикселя под курсором. Дальнейший его путь будет выглядеть так:

• Правый нижний угол
• Верхний левый угол
• Правый верхний угол
• Левый нижний угол

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

Вопрос 4

• Панель задач Microsoft может быть расположена на любой из четырех границ экрана. Также есть возможность отображать ее либо постоянно, либо только при наведении курсора. Опишите, по крайней мере, 2 причины, по которым решение с появлением скрытой панели задач при наведении курсора является крайне неэффективным.

После первых трех заданий, этот вопрос уже не должен представлять сложности.

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

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

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

Вопрос 5

• Объясните, почему к строке меню в Macintosh можно получить доступ как минимум в 5 раз быстрее, чем к типичной строке меню в окне Windows. Дополнительно: предположите 2 причины, по которым Microsoft воплотил такое глупое решение.

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

Оставим первый пункт юристам, а сами разберемся со вторым. Почему меню Apple гораздо быстрее? Потому что оно лежит на верхней границе экрана и, следовательно, имеет бесконечную высоту. В результате, пользователи Mac могут просто «бросить» курсор в верхнюю часть экрана, с уверенностью, что тот остановится в пределах верхнего меню.

Однажды я провел тест. Я расположил один монитор Apple поверх другого. На нижнем из них был стандартный Mac-интерфейс и строка меню, как обычно, располагалась вдоль верхней границы экрана. Секрет теста был в том, что курсор, проскочив меню нижнего монитора, мог попасть на верхний монитор.

Затем я попросил обычных пользователей Mac перейти в один из пунктов меню на нижнем мониторе. В начале теста их курсор «вылетал» на верхний монитор где-то на 22 сантиметра, только потому, что они не боялись сильно толкать мышь. Затем они поняли, что должны замедлять курсор перед приближением к строке меню. К тому времени, как они достигли успеха, скорость их доступа к пунктам меню стала примерно равной скорости доступа к аналогичному меню в Microsoft.

Вопрос 6

• Назовите хотя бы одно преимущество кругового всплывающего меню над стандартным, линейным всплывающим меню.

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

Есть и еще одно преимущество: направление информации в вашей двигательной памяти. В конце 80-х в Apple был проведен эксперимент Fabrik, в котором исследовалось взаимодействие пользователей с радиальным меню. Когда исследуемые пользователи запомнили простые жесты (для печати необходимо перевести курсор вниз и влево, для отправки факса — вниз и вправо и т. д.), им даже не понадобилось отображение самого меню.

Вопрос 7

• Что бы вы сделали, чтобы сбалансировать скорость доступа к тем пунктам выпадающего или всплывающего меню, которые находятся на  втором уровне и глубже?

Виктор Замбрано (Victor Zambrano) предложил следующую технику: центрировать меню второго уровня, как это показано на картинке. В таком случае максимальное возможное расстояние между курсором и пунктом меню равно количеству всех пунктов меню, поделенному на 2.

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

Вопрос 8

• Промышленные дизайнеры Apple сократили размеры клавиатуры Mac на целых полкнопки, «обрезав» функциональные клавиши ровно наполовину, соответственно. Почему это было неправильным решением?

Чем дальше цель, тем она должна быть больше: лишь так мы можем добиться высокой скорости доступа. Но дизайнеры Apple не просто уменьшили размер целей, они уменьшили размер наиболее дальних целей. Глупо, глупо и еще раз глупо. Как можно решить эту проблему? Можно было бы просто изогнуть заднюю часть клавиатуры вверх. Таким образом, подняв палец всего на несколько миллиметров, можно нажать на кнопки с цифрами и функциональные клавиши, обеспечивая высокую точность и скорость набора.

Вопрос 9

• Что является общим решением для всех заданных вопросов?

Теперь вы знаете, что это закон Фиттса. И вы можете использовать его в повседневном дизайне, будь то разработка новой операционной системы или создание веб-страницы. Например, не забывайте поставить несколько пробелов слева и справа от стандартной кнопки «ОК», ведь в ней всего две буквы. Если вы разрабатываете графический редактор, то убедитесь, что пользователь может выбрать инструмент, кликнув по самому краю экрана. Если в интерфейсе можно организовать панель меню в верхней части экрана, используйте это!

В общем, все, что от вас требуется — это уяснить изученный материал и научиться использовать его на практике.

Оригинал материала: A Quiz Designed to Give You Fitts