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

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

Часть третья


Закон Фиттса основан на чётком понимании человеком границ цели: чёрный прямоугольник не оставляет сомнений. Стандартная кнопка тоже.

Однако часто объекты на экране составляются из частей. Когда человек видит такое созвездие, возникает вопрос: нажимается ли оно целиком или есть звёзды-исключения?

Один объект — одна ссылка

Когда клик в разные части одного объекта имеет разный смысл, интерфейсом становится сложно пользоваться:


В заголовке комментария в ЖЖ ссылка «без темы» ведёт на страницу самого комментария, иконка человечка — на профиль автора комментария, а имя пользователя — на его блог. Но строчка из синих ссылок воспринимается как один объект. Человек кликает в него, не разбираясь во внутреннем устройстве. Попадание на одну из трёх возможных страниц кажется непредсказуемым.

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

Ещё пример — из Школы стажёров:


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

*В некоторых почтовых программах письма показываются таблицей из имени, темы письма и других параметров. Клик по теме открывает письмо. Есть соблазн сделать, чтобы клик по имени открывал историю переписки с человеком. Но строка таблицы воспринимается целиком. При таком дизайне люди будут постоянно попадать не туда, куда хотели.

Частный случай правила — строка таблицы:

Яндекс, 2011

2016



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

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

Ещё в новом дизайне названия программ не влезают, хотя телепрограмма занимает в полтора раза больше площади

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

О дизайне олдскульного форума

Без дыр

Связанная проблема — «дырявые» цели. Часто встречаются ссылки, разбитые на несколько строк, у которых клик между строк не срабатывает (попробуйте):

Плохо

Что нужно для признания иностранного гражданина высококвалифицированным специалистом

Хорошо

Что нужно для признания иностранного гражданина высококвалифицированным специалистом

Если ссылка относится к расположенной рядом картинке, они тоже должны образовывать общую нажимаемую область:

Совет Артёма Поликарпова о латании дыр



Самая удивительная дырявость на свете — работа «Файндера» на Маке. Он пропускает клики в прозрачных областях иконок. Двойной клик в середину этой иконки на рабочем столе не откроет Гугль-драйв:


ilyabirman.ru

Продолжение

P. S. Я проведу практический курс «Пользовательский интерфейс и представление информации» 22, 23, 24 и 26 апреля в Москве

 

Запись открыта до ВС 16 апр


Поделиться

Комментарии

Денис Мариан
31 мая 2016

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


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

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

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

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





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

Столкнулся с проблемой, когда долго общаешься с клиентом, и потом выясняется, что его не устраивает порядок цен. Часть 1 2 У меня остаётся ощущение, что я идиот, «рассыпала бобы», но на конкретных ошибках не могу себя поймать 3 Расскажите об обратной связи в интерфейсе 1 4