Процесс создания сайта «Fitts' law»

Начал с изучения публикаций по закону Фиттса. Не то чтобы был не знаком с ним, напротив, частенько пользовался при проектировании интерфейсов. Но освежить память не помешает.

Рисую эскз:

Пишу прототип:

Пробовал разные библиотеки для drag’n’drop и рисования линий между индикаторами. В итоге остановился на коде из «Волшебства», он древний, даже комментарии написаны на непонятном яызке, но справляется лучше современных.

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

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

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

После загрузки картинки от интерфейса оставляю только необходимое: название файла, управления масштабом и цветом. Остальной интерфейс доступен по скроллу.

В целом очень скучно. Будто аспирант какого-н. института делал. А что если пронзить формулу вертикальными линиями, на одной стороне которых пояснение, а на другой поле для изменения параметра?

И обыграть индикатор в оформлении — цветной можно перемещать, а серые нет:

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

Упрощаю интерфейс:

«Пидорить» буду уже во время верстки. Стартовый экран:

Идея перенести индикаторы внутрь предложения нравится:

Выключка по центру совсем не то...

Хочется что-то на фоне, чтобы не скучно было... Например паттерн? И подсвечивать его при наведении курсора над кнопкой?:

Не очень... Может формулу на фоне? Чтобы побуждала загрузить файл и увидеть что будет после:

Гуд. Белый цвет?:

В белом не смотрится. Нужно добавить целостности всем элементам и «Then» с большой буквы, а то пытаюсь прочесть как одно предложение «...target must be then move...»:

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

Для проверки использовал «Вольфрам Альфа», он получил W без использования MT:

Причем потребовал денег чтобы узнать как именно эта ошибка у него получилась. Продукт от Майкрософт справился лучше:

Работая над функцией смены цвета маркеров открыл для себя что HEX коды поддерживают полупрозрачность. Коды цветов хранятся в дата-атрибутах селекторов и передаются в функцию которая меняет цвет маркеров:

Но у маркера цели (прямоугольник) фон должен быть полупрозрачным, причем прозрачность необходимо задать цветом через RGBa, а не CSS атрибутом. Потому, что внутри маркера находится блок со значениями его размера, который не должен наследовать прозрачность («opacity» у потомка складывается с родительской). Конечно, можно написать конвертер HEX в RGB и добавить прозрачность или внести в селекторы готовый RGBa, но это добавит лишний код и сопровождать RGBa не так удобно как HEX.

В конце HEX кода можно добавить два символа прозрачности в шестнадцатеричной системе счисления. 99% = 255 = #FF, 50% = 128 = #80, 25% = 64 = #40 и т.д. чтобы получился восьмизначный код. Например код черного цвета с 50% прозрачностью: #00000080; белого с 25%: #FFFFFF40.

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

Появлялась проблема, переставал работать псевдокласс :hover т.е. после ошибки эти элементы не реагировали на наведение курсора. Проблема из-за того, что JS дописывает стили внутрь HTML и такая запись имеет приоритет над CSS, если не использован указатель «!important». Но с этим указателем появляется другая проблема: JS уже не сможет поменять цвет фона. Решение в изменении класса элемента, а не его параметров:

Древний код с перетаскиванием объектов заменил на jQuery UI т.к. его пришлось бы переписывать для добавления fixed позиции элементам. Получилось куда проще, да еще и события доступны «из коробки»:

При переключении типа измерений появился баг: время всегда считалось почти в два раза меньше. Например было время 1000 мс, а при переключении становилось 470 мс. Оказалось, что недосмотрел порядок вычислений при округлении, код сначала умножал произведение в скобках на 10, потом добавлял «А» и делил полученное на десять. Впредь буду записывать округления и другие математические функции отдельной строчкой. Так нагляднее, меньше возни с грудой скобок, да еще и отключить округление можно закомментировав одну строку:

Для инпутов формы хотел сделать, и даже сделал, защиту от дурака: чтобы в них нельзя было вводить ничего кроме цифр. Мучился с разными кодами клавиш, разным поведением в браузерах, решил выкинуть. Тебе не нужна защита от дурака если твои пользователи не дураки. В самом деле, если ввел в поле «время» значение «abc», то программе его проще проигнорировать, чем предупреждать. Конечно, теряется возможность обновлять формулу «на лету», во время ввода значений, но это разумная жертва отсутствию лишнего кода и возможных ошибок. Более того, полноценно отловить все коды клавиш невозможно, хотя бы потому, что в некоторых раскладках, например французской, цифры вводятся с зажатым Shift.

Порадовал комментарий на Stack Overflow:

Привет из 2022, у нас до сих пор нет этой функции (ладно, существует, но бесполезна как компас на магнитной фабрике).

Все работает, формула считает и время и размеры цели. Но если попытаться изменить, например, «A» или «B» в инпутах формы, то функция расчета времени выдает запредельные значения. При этом расчет размеров все еще работает как надо. Пример расчета из стандартных величин и введенных пользователем тех же самых значений:

При сложении fittsA с результатом (fittsB * fittsID) получается запредельно большое число. Долго не мог понять почему складывая 435 и 570 получается не 1005, а 570435. Разгадка явно в обработке введенных пользователем значений, но все же не ясно откуда берутся лишние сотни тысяч. Хотя погодите-ка, что-то это число уж больно подозрительно выглядит...

Ладно, виноват, не привел введенные пользователем данные к Integer, но у меня другой вопрос: почему эти данные проходят проверку на !isNaN?

Программа сначала проверяет и заключает, что пользователь ввел число (!isNaN == true), но после обрабатывает его в сложении, где второе слагаемое Integer, как строку. Какая-то неправильная магия.

— Эй, Ява скрипт, это число?
— Число.
— Складываем с другим числом?
— Складываем.
— Что получилось?
— Слово.

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

Было бы не честно сделать этот сайт и не показать хотя бы одну из них:

Выглядит как некролог... Да и переверстать придется стартовый экран. Может добавить его фото как пасхалку? Меня раздражает, что его имя набрано желтым цветом, будто на него можно нажать. Почему бы не показать его фото после пяти нажатий на имя? И не на стартовом экране, а перекрасить экран с формулой и на нем в углу:

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

Под конец занялся приятными мелочами: между маркерами проходит не одна, а десяток линий, потому что никто не ведет курсор мыши строго по прямой:

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