Илья
7 июня 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как упростить попадание мышью или пальцем в элементы интерфейса?

Часть четвёртая


Ну и ещё пара соображений, связанных с закономи Фиттса и прицеливанием.

Движение и клик — один жест

Когда человек видит объект, он сначала перемещает к нему курсор, а затем нажимает кнопку мыши. Но фактически это один жест: человек не меняет принятое решение о клике по пути.

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


Какими были бы результаты эксперимента Фиттса, если бы поверх мишени иногда выезжала закрывающая её полочка?

Хуже только всплывающие панели, содержающие собственные кнопки и ссылки — почти невозможно не нажать на них.

Та же проблема с выпадающими меню на сайтах. Когда наводишь на ссылку «Переводы» в меню «Альфа-банка», из неё выпадает список типов перевода:

Жесты



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

Меню в операционной системе бывают многоуровневыми:


Увидев искомый пункт Color Balance в распахнувшемся подменю, пользователь ведёт к нему курсор по кратчайшему пути, не задумываясь о том, что на нём встречаются ненужные ему пункты Layer Mask и Vector Mask. Чтобы объехать эти пункты, пришлось бы делать «ход конём» — сначала сдвигать курсор горизонтально вправо, а уже потом вести вниз.

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

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

Когда Амазону потребовалось сделать двухуровневое меню, он повторил эту же логику, причём без ограничений по скорости движения курсора — как было на классическом Маке:

Влияние привычек

Разрешение противоречий без компромиссов

Когда у человека выработалась привычка попадать в определённую цель, он попадает быстрее, потому что вообще не тратит время на понимание того, где цель находится.

Если привычку вырабатывать десятилетиями, наступает магия:


Привычки

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

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

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

Углы экрана и закон Фиттса

P. S. Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Комментарии

Дмитрий Рыбин
7 июня 2016

Интересно услышать комментарий веб-мастеров, каким образом можно добиться такого поведения меню у веб-сайтов?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.





Недавно всплыло

1 Как создавался новый сайт бюро. Часть третья 1 Начальник считает, что перед встречей нужно обязательно разработать несколько вариантов предложений 6 4