Закон Фиттса или как его использовать

Здравствуйте, хабровчане!

На сегодняшний день в веб-проектировании такое понятие, как Usability, является главенствующим. Существует множество подходов увеличения эффективности взаимодействия пользователя с меню. В этой публикации я приведу пример работы с паркетным меню, но в более упрощенном стиле, не похожем на меню Windows 8.

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

Формула:
T = a + b * log ( D / W + 1 ),

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

Для большего понимания представим расчетную схему:


Рисунок — Расчетная схема закона Фиттса.

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

Рассчитаем среднее время для паркетного меню с параметрами: p1=120 px, p2=160 px, d=10 px, n=6, где n – количество пунктов меню.
Получим таблицу, в которой указаны параметры Wi, Di, Ti.

i Wi Di Ti
1 143.323 193.484 329.433
2 131.39 152.678 316.512
3 143.323 193.484 329.433
4 143.323 193.484 329.433
5 131.39 152.678 316.512
6 143.323 193.484 329.433
Среднее значение 115.458 147.634 324.657


Результаты таблицы показывают, что для повышения эффективности взаимодействия пользователя с паркетным меню наиболее часто выбираемые элементы должны быть расположены под №2 и №5.

В качестве практического примера рассмотрим такую задачу: необходимо построить паркетное меню, которое будет состоять из 6-ти элементов с определенными наименованиями, а именно — Моя страница, Мои партнеры, Мои заказы, Сообщения, Мои компании, Люди. Приведем таблицу вероятности выбора каждого пункта меню.

1. Моя страница 0.25
2. Мои партнеры 0.17
3. Мои заказы 0.15
4. Сообщения 0.13
5. Мои компании 0.1
6. Люди 0.2


В данном примере условием для расчета является не равновероятный выбор произвольного пункта меню, таким образом, расчет D и W будет изменен с учетом вероятности.

Расположим пункты меню в двух вариантах последовательно, как показано на расчетной схеме:

Первый вариант: Моя страница -> Сообщения -> Мои заказы -> Люди -> Мои компании -> Мои партнеры
Второй вариант: Сообщения -> Моя страница -> Мои заказы -> Мои компании -> Люди -> Мои партнеры

Результаты для первого варианта: D = 184.098 px, W = 140.578 px, T = 326.744 мс
Результаты для второго варианта: D = 175.121 px, W = 137.953 px, T = 324.026 мс

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

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

Спасибо за внимание!

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

Список литературы


1. Статья Википедии / Usability / goo.gl/DJM3OP
2. Статья Википедии / Закон Фиттса / goo.gl/worZ3z
3. Губко М.В., Даниленко А.И Математическая модель оптимизации структуры иерархического меню // Проблемы управления. — 2010. — №4. — С.49-58.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 14

    0
    Это прекрасно. Просто прекрасный пост. Тем более утром 3 января.
      0
      Вдохновение на его написание пришли именно тогда, извините, если что не так.
        0
        Я без злой иронии. Правда прекрасно, хоть и на грани точки кретинизма. После этого поста мозг сразу перестроился на работу после прошлогодних салатов. Спасибо умный человек что заморочился. Раньше в этом направлении применяли только элементарные человечески домыслы и предчувствие. Да и то для линейных меню.
          +2
          Раньше — это когда? // Фиттс свою модель опубликовал в 1954 году, если что. У того же Раскина подобные расчеты почти на каждой странице.
      0
      Результаты таблицы показывают, что для повышения эффективности взаимодействия пользователя с паркетным меню наиболее часто выбираемые элементы должны быть расположены под №2 и №4.


      Простите, а разве не 2 и 5? Это я чего-то не понял, или опечатались?
        0
        Ой и правда, в скором времени исправлю — эту опечатку.
        +1
        Извините, что значит «паркетное меню»? Интуитивно я понял, о чем вы говорите, но чтобы так это называли — слышу впервые.
          0
          Здравствуйте! В статье я написал, что это некое подобие меню в стиле Metro UI, то есть то которое использует Windows 8 и Windows Phone, но в более упрощенном варианте.
          0
          Интересно было бы добавить этот опыт взаимодействия на различные продукты и посмотреть что получится, поскольку конкретный продукт может внести свои отпечатки на конечный результат.

          Так, например, какой-нибудь из пунктов может быть труднодоступен для пальцев. В таких случаях придется накладывать некоторый параметр удобства использования из реальных физических ограничений поверх этих данных и усложнять формулу. А это ещё интереснее и круче!

          Спасибо за ваш опыт!
            0
            Здравствуйте! Вы несомненно правы.
            В дальнейшем я хочу использовать и провести анализ на реальных людях, сделать эксперименты и вывести некий возможно коэффициент поправки для закона Фиттса, если таковой будет.
            И так же хочется опробовать другие виды меню.
            +1
            Сферическое меню в вакууме. Со стороны не понятно, есть ли какой-нибудь порядок пунктов, априори ожидаемый пользователями.
            Если пользователь с опытом использования этого меню может что-то выиграть от этой микрооптимизации (нужно ещё смотреть, как часто оно используется, и если часто — то почему), то новичок скорее всего будет искать нужный пункт слева-направо сверху-вниз и не получит ничего от ваших расчётов. В каких пропорциях учесть интересы тех и других — отдельный вопрос.

            Ещё одно странное место в рассуждениях: зачем считать время от одного пункта меню до другого? Это означает, что пользователь переключается между ними как между вкладками, не уводя курсор/палец далеко? Но плиточное меню обычно на отдельном экране помещается. Иначе, это не тот элемент интерфейса. Плюс, выбирая какой-либо раздел, пользователь скорее всего в нём задержится для выполнения каких-либо задач, и в следующий раз придётся считать время от произвольного места рабочей области до пункта меню.
              0
              Порядок пунктов: я привожу пример с порядком пунктов, когда включаю в формулы вероятность. Тем самым, показывая в чем суть закона Фиттса.

              Время подсчета от одного до другого пункта меню: нужно для того чтобы рассчитать среднее время затраченное на использование данного меню в целом ( нижняя строчка первой таблицы ). Таким образом я перебираю все возможные варианты передвижения курсора. Мои подсчеты не идеальны и вы правильно подметили, что некоторые вещи я не учитываю, пользователь действительно может вести курсор допустим по кривой, тогда показатели будут другими, но я беру идеальный вариант.

              Про опыт: опыт имеет два показателя, а точнее в формуле Фиттса — это играет не малую роль, а именно есть целых два коэффициента a и b, которые характеризуют опыт пользования данным меню пользователя и опыт пользования устройством на котором работает в целом.

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

              Если у Вас будут еще вопросы я обязательно отвечу, если я не до конца вам все объяснил — я объясню.
                +2
                Порядок пунктов:
                Я про другое. Вероятность использования пункта и ожидание пользователя найти такой пункт в определённом месте — это разные вещи.
                Увлекшись вероятностями и частотами использования можно запросто наступить на те же грабли, что и Microsoft, когда они сделали автоматическое сокрытие пунктов меню в Office 2003.

                > может вести курсор допустим по кривой
                Не просто по кривой. Пример: Пользователь открыл Сообщения, читал их, отвечал, удалял. И теперь, когда ему надо попасть в Свою страницу, время от пункта меню «Сообщения» до пункта меню «Моя страница» абсолютно не релевантно. В расчётах придётся выйти за пределы меню, и, как минимум, добавить большой прямоугольник «Рабочая область».

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

                «Теория без практики — мертва, практика без теории — слепа». Экспериментируйте :)
                  0
                  После вашего комментария, я пересмотрю некоторые вещи и явно их учту. Спасибо!

            Only users with full accounts can post comments. Log in, please.