🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 4
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 4
Язык 213
Экраны 311
Близость
Прицеливание
Информативность
Обратная связь
Листание и прокрутка
Близость
Прицеливание
Информативность
Обратная связь
Листание и прокрутка
Фиттс провёл эксперимент. На доске размещены две чувствительные полоски — мишени. При касании специальным пером одной из этих полосок фиксируется «попадание в цель». Участник эксперимента быстро поочерёдно касается пером то одной, то второй полоски. Изменяя расстояние между полосками и ширину каждой из них и замеряя время, Фиттс вывел зависимость:
Это и есть закон Фиттса. Он связывает расстояние до объекта, размер объекта и время прицеливания в одномерном пространстве.
Нас интересует приложение закона к интерфейсам, где человек прицеливается к объектам на двухмерном экране. Форма объектов и тот факт, что человек движется к цели не по прямой, несколько усложняют закон, но для нас важно интуитивное определение: чем дальше объект, тем больше время прицеливания; чем больше объект, тем меньше время прицеливания.
Было установлено, что закон работает независимо от условий движения: выполняется ли оно непосредственно или с помощью манипулятора; рукой или ногой; ребёнком или стариком.
Пол Фиттс (1912—1965) работал психологом в Университете штата Огайо, а затем в Мичиганском университете. Разработал и опубликовал в 1954 году модель быстрого прицельного движения человека. До работы в университете Фиттс служил в ВВС США. В конце второй мировой войны изучал человеческий фактор в авиации, и считается одним из пионеров в повышении безопасности
Фиттс провёл эксперимент. На доске размещены две чувствительные полоски — мишени. При касании специальным пером одной из этих полосок фиксируется «попадание в цель». Участник эксперимента быстро поочерёдно касается пером то одной, то второй полоски. Изменяя расстояние между полосками и ширину каждой из них и замеряя время, Фиттс вывел зависимость:
Это и есть закон Фиттса. Он связывает расстояние до объекта, размер объекта и время прицеливания в одномерном пространстве.
Нас интересует приложение закона к интерфейсам, где человек прицеливается к объектам на двухмерном экране. Форма объектов и тот факт, что человек движется к цели не по прямой, несколько усложняют закон, но для нас важно интуитивное определение: чем дальше объект, тем больше время прицеливания; чем больше объект, тем меньше время прицеливания.
Было установлено, что закон работает независимо от условий движения: выполняется ли оно непосредственно или с помощью манипулятора; рукой или ногой; ребёнком или стариком.
Пол Фиттс (1912—1965) работал психологом в Университете штата Огайо, а затем в Мичиганском университете. Разработал и опубликовал в 1954 году модель быстрого прицельного движения человека. До работы в университете Фиттс служил в ВВС США. В конце второй мировой войны изучал человеческий фактор в авиации, и считается одним из пионеров в повышении безопасности
Разберём следствия закона Фиттса.
Мелко
Достаточно
Опасно
В большие кнопки легче попасть. Но слишком большие кнопки не очень полезны: зависимость логарифмическая, то есть чем больше увеличиваем, тем меньше эффект.
Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную
Хорошо отделять дополнительным расстоянием опасные кнопки и ссылки, иначе будет слишком легко попасть не в ту.
Разберём следствия закона Фиттса.
Мелко
Достаточно
В большие кнопки легче попасть. Но слишком большие кнопки не очень полезны: зависимость логарифмическая, то есть чем больше увеличиваем, тем меньше эффект.
Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную
Опасно
Хорошо отделять дополнительным расстоянием опасные кнопки и ссылки, иначе будет слишком легко попасть не в ту.
Перевод из кошелька
Предоплаченные
пластиковые карты
Наличный перевод
Зачисление из других
платёжных систем
Наличный платёж
через терминал
Когда ссылки в списке не отделены расстоянием, легко случайно промахнуться. Кроме того, список трудно читать.
Если расстояния увеличить сверх стандартного интерлиньяжа, решаются обе проблемы.
Перевод из кошелька
Предоплаченные
пластиковые карты
Наличный перевод
Зачисление из других
платёжных систем
Наличный платёж
через терминал
Когда ссылки в списке не отделены расстоянием, легко случайно промахнуться. Кроме того, список трудно читать.
Если расстояния увеличить сверх стандартного интерлиньяжа, решаются обе проблемы.
Иногда желание увеличить элемент вступает в противоречие с требованием занять им как можно меньше места на экране. Тогда достаточно увеличить не сам объект, а лишь область нажатия.
Чёрные точки
Интерфейс электронного киоска в торговом центре «Мега», Москва
Интерфейс электронного киоска в торговом центре «Мега», Москва
Иногда желание увеличить элемент вступает в противоречие с требованием занять им как можно меньше места на экране. Тогда достаточно увеличить не сам объект, а лишь область нажатия.
Чёрные точки
Плохо
Хорошо
Плохо
Хорошо
Пункты меню операционных систем нажимаются на всей ширине строки, в том числе там, где уже нет текста. Полезно повторять то же поведение в меню на сайтах. Обратная связь в виде подсветки дополнительно помогает прицеливанию.
На сайтах приходится отдельно заботиться о том, чтобы нажималась подпись к радиокнопке или чекбоксу, а не только они сами.
Плохо
Хорошо
Пункты меню операционных систем нажимаются на всей ширине строки, в том числе там, где уже нет текста. Полезно повторять то же поведение в меню на сайтах. Обратная связь в виде подсветки дополнительно помогает прицеливанию.
Плохо
Хорошо
На сайтах приходится отдельно заботиться о том, чтобы нажималась подпись к радиокнопке или чекбоксу, а не только они сами.
Айфон увеличивает области нажатия ссылок в браузере. Если открыть неадаптированную к мобильному экрану страницу, нажатие микроскопической ссылки среди текста работает безотказно.
Даже если несколько мелких ссылок оказываются рядом, чаще всего удаётся попасть в нужную с первого раза. По всей видимости, области нажатия смещаются так, чтобы быть соразмерными пальцу и не пересекаться.
Айфон увеличивает области нажатия ссылок в браузере. Если открыть неадаптированную к мобильному экрану страницу, нажатие микроскопической ссылки среди текста работает безотказно.
Даже если несколько мелких ссылок оказываются рядом, чаще всего удаётся попасть в нужную с первого раза. По всей видимости, области нажатия смещаются так, чтобы быть соразмерными пальцу и не пересекаться.
Клавиатура Айфона динамически подстраивает размеры кнопок на клавиатуре так, чтобы было легче написать существующее слово, чем сделать опечатку. Внешне клавиатура при этом не изменяется.
Видео с сайта «Эпл», 2007
Клавиатура Айфона динамически подстраивает размеры кнопок на клавиатуре так, чтобы было легче написать существующее слово, чем сделать опечатку. Внешне клавиатура при этом не изменяется.
Видео с сайта «Эпл», 2007
В дизайне телефонной книжки Айфона есть проблема.
Плохо
Лучше
Фейстайм — функция звонков через интернет. В строке справа две мелких иконки: камера означает видеозвонок, а трубка — голосовой. Нажатие во всю остальную строку тоже означает видеозвонок как функцию по умолчанию.
К сожалению, если нажать в правый край строки, начнётся видеозвонок, потому что область нажатия трубки ограничена размерами иконки. Лучше расширить область на всю правую часть строки.
В дизайне телефонной книжки Айфона есть проблема.
Плохо
Фейстайм — функция звонков через интернет. В строке справа две мелких иконки: камера означает видеозвонок, а трубка — голосовой. Нажатие во всю остальную строку тоже означает видеозвонок как функцию по умолчанию.
Лучше
К сожалению, если нажать в правый край строки, начнётся видеозвонок, потому что область нажатия трубки ограничена размерами иконки. Лучше расширить область на всю правую часть строки.
Это самая быстродоступная точка на экране, ведь расстояние до неё равно нулю. Именно в ней появляется всплывающее меню.
В хорошо организованном всплывающем меню самое важное идёт сверху. В Виндоусе первый пункт оказывается прямо под курсором — Фиттс доволен. На Маке для попадания в первый пункт приходится немного сдвинуть курсор — уже не так хорошо.
В программах трёхмерного моделирования популярны «грозди»: несколько меню появляются с разных сторон от курсора. Идея в том, чтобы максимально близко к курсору оказалось побольше полезных функций.
Контекстное меню на Маке
Такие меню не прижились за пределами мира 3Д
Контекстное меню на Маке
Такие меню не прижились за пределами мира 3Д
Это самая быстродоступная точка на экране, ведь расстояние до неё равно нулю. Именно в ней появляется всплывающее меню.
В хорошо организованном всплывающем меню самое важное идёт сверху. В Виндоусе первый пункт оказывается прямо под курсором — Фиттс доволен. На Маке для попадания в первый пункт приходится немного сдвинуть курсор — уже не так хорошо.
В программах трёхмерного моделирования популярны «грозди»: несколько меню появляются с разных сторон от курсора. Идея в том, чтобы максимально близко к курсору оказалось побольше полезных функций.
Все пиксели на экране одного размера. Но когда курсор достиг угла, движение мыши можно продолжать, пока она не упадёт со стола — курсор будет показывать в ту же точку. Поэтому для курсора размеры углов бесконечны: чтобы попасть, достаточно решительно двинуть мышь в нужную сторону и нажать кнопку.
Попробуйте попасть курсором в кружок в центре, а потом — в любой из углов, и оцените, насколько это легче.
Углы экрана — следующие по лёгкости попадания точки после точки под курсором мыши.
Если вы читаете на сенсорном экране, эффекта не будет: палец не «упрётся» в край серой области. Но использовать углы телефона и планшета полезно с точки зрения привычки — об этом в конце главы. И, конечно, стоит помнить, что до элементов в верхней части сенсорного экрана трудно дотянуться пальцем.
Кружок имитирует поведение курсора мыши и не выходит за пределы экрана. Попробуйте на компьютере с мышью и с книгой на весь экран
Все пиксели на экране одного размера. Но когда курсор достиг угла, движение мыши можно продолжать, пока она не упадёт со стола — курсор будет показывать в ту же точку. Поэтому для курсора размеры углов бесконечны: чтобы попасть, достаточно решительно двинуть мышь в нужную сторону и нажать кнопку.
Попробуйте попасть курсором в кружок в центре, а потом — в любой из углов, и оцените, насколько это легче.
Углы экрана — следующие по лёгкости попадания точки после точки под курсором мыши.
Если вы читаете на сенсорном экране, эффекта не будет: палец не «упрётся» в край серой области. Но использовать углы телефона и планшета полезно с точки зрения привычки — об этом в конце главы. И, конечно, стоит помнить, что до элементов в верхней части сенсорного экрана трудно дотянуться пальцем.
Кружок имитирует поведение курсора мыши и не выходит за пределы экрана. Попробуйте на компьютере с мышью и с книгой на весь экран
В Виндоусе 95 кнопка «Пуск» отстояла на один пиксель от левого нижнего угла, что сильно осложняло попадание в неё.
В одной из следующих версий проблему исправили, «забив» кнопку в самый угол. А вот кнопка закрытия развёрнутого на весь экран окна всегда находилась в правом верхнем углу, и пользователи Виндоуса знают, как легко в неё попасть.
На Маке настраивается функция «Горячие углы». Наведение на углы экрана даже без клика вызывает выбранную команду.
В Виндоусе 95 кнопка «Пуск» отстояла на один пиксель от левого нижнего угла, что сильно осложняло попадание в неё.
В одной из следующих версий проблему исправили, «забив» кнопку в самый угол. А вот кнопка закрытия развёрнутого на весь экран окна всегда находилась в правом верхнем углу, и пользователи Виндоуса знают, как легко в неё попасть.
На Маке настраивается функция «Горячие углы». Наведение на углы экрана даже без клика вызывает выбранную команду.
Следующие по лёгкости попадания после углов экрана — его стороны. Объекты, прижатые к краю, имеют бесконечный размер в направлении за границу экрана.
Меню на Маке закреплено наверху экрана независимо от положения окна текущего приложения. Попадать в него гораздо легче, чем в меню программ Виндоуса внутри отдельных окон.
В Виндоусе Икс‑Пи была хорошая панель задач. Кнопки программ были большой ширины и прижаты к низу экрана. Благодаря надписям, кнопки были информативнее — об этом подробнее в главе «Информативность».
К сожалению, после Виндоуса 7 кнопки на панели задач стали маленькими, как в маковском доке.
Развёрнутое на весь экран окно Ворда или другой программы прижималось полосой прокрутки к правому краю, чтобы в неё было легче попасть. А когда появилась мышь с колесом прокрутки, необходимость целиться и вовсе отпала.
Информативность
Следующие по лёгкости попадания после углов экрана — его стороны. Объекты, прижатые к краю, имеют бесконечный размер в направлении за границу экрана.
Меню на Маке закреплено наверху экрана независимо от положения окна текущего приложения. Попадать в него гораздо легче, чем в меню программ Виндоуса внутри отдельных окон.
В Виндоусе Икс‑Пи была хорошая панель задач. Кнопки программ были большой ширины и прижаты к низу экрана. Благодаря надписям, кнопки были информативнее — об этом подробнее в главе «Информативность».
К сожалению, после Виндоуса 7 кнопки на панели задач стали маленькими, как в маковском доке.
Развёрнутое на весь экран окно Ворда или другой программы прижималось полосой прокрутки к правому краю, чтобы в неё было легче попасть. А когда появилась мышь с колесом прокрутки, необходимость целиться и вовсе отпала.
Информативность
В большинстве программ тулбар размещают под заголовком окна.
Здесь тулбар размещён слева «под обрез». Когда окно открыто на весь экран, кнопки тулбара получают бесконечную ширину. Полосы прокрутки справа прижаты к краю из этих же соображений.
В большинстве программ тулбар размещают под заголовком окна.
Здесь тулбар размещён слева «под обрез». Когда окно открыто на весь экран, кнопки тулбара получают бесконечную ширину. Полосы прокрутки справа прижаты к краю из этих же соображений.
Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ
Заголовок комментария в «Живом журнале»
В эксперименте Фиттса понятно, куда целиться — в сплошной чёрный прямоугольник. Кнопка на экране — такая же очевидная цель.
Но иногда объект на экране состоит из частей: заголовка, подписи, иконки, даты. Когда человек видит такое созвездие, возникает вопрос: нажимается ли оно целиком или есть звёзды‑исключения?
Но иногда объект на экране состоит из частей: заголовка, подписи, иконки, даты. Когда человек видит такое созвездие, возникает вопрос: нажимается ли оно целиком или есть звёзды‑исключения?
Если сделать название рубрики «Психология» под заголовком ссылкой на эту рубрику, ошибок не избежать. Заголовок вместе с подписью воспринимаются как единый объект.
В заголовке комментария ссылка «без темы» ведёт на страницу самого комментария, иконка человечка — на профиль автора комментария, а имя пользователя — на его блог. Но строчка из синих ссылок воспринимается как один объект. Человек кликает в него, не разбираясь во внутреннем устройстве. Попадание на одну из трёх возможных страниц непредсказуемо.
Даже если запомнить, где что, доверять этой строчке нельзя. Каждый раз приходится раскладывать объект на части, и принимать решение о том, куда целиться.
Следует оставить одну ссылку, потому что объект — один.
Заголовок комментария в «Живом журнале»
В эксперименте Фиттса понятно, куда целиться — в сплошной чёрный прямоугольник. Кнопка на экране — такая же очевидная цель.
Но иногда объект на экране состоит из частей: заголовка, подписи, иконки, даты. Когда человек видит такое созвездие, возникает вопрос: нажимается ли оно целиком или есть звёзды‑исключения?
Но иногда объект на экране состоит из частей: заголовка, подписи, иконки, даты. Когда человек видит такое созвездие, возникает вопрос: нажимается ли оно целиком или есть звёзды‑исключения?
Если сделать название рубрики «Психология» под заголовком ссылкой на эту рубрику, ошибок не избежать. Заголовок вместе с подписью воспринимаются как единый объект.
В заголовке комментария ссылка «без темы» ведёт на страницу самого комментария, иконка человечка — на профиль автора комментария, а имя пользователя — на его блог. Но строчка из синих ссылок воспринимается как один объект. Человек кликает в него, не разбираясь во внутреннем устройстве. Попадание на одну из трёх возможных страниц непредсказуемо.
Даже если запомнить, где что, доверять этой строчке нельзя. Каждый раз приходится раскладывать объект на части, и принимать решение о том, куда целиться.
Следует оставить одну ссылку, потому что объект — один.
Почтовый клиент «Гмейл»
Частный случай правила «Один объект — одна ссылка» — строка таблицы. В списке писем ссылка на имени могла бы вести на все письма от человека, тема письма — на письмо, а дата — на все письма за день. Это было бы логично.
Но если разделить строку на такие части, перед кликом приходилось бы задумываться, и без ошибок бы не обошлось. Одна строка — это один объект.
Почтовый клиент «Гмейл»
Почтовый клиент «Гмейл»
Частный случай правила «Один объект — одна ссылка» — строка таблицы. В списке писем ссылка на имени могла бы вести на все письма от человека, тема письма — на письмо, а дата — на все письма за день. Это было бы логично.
Но если разделить строку на такие части, перед кликом приходилось бы задумываться, и без ошибок бы не обошлось. Одна строка — это один объект.
В старом дизайне телепрограммы Яндекса в каждой строке стояла передача. Название служило ссылкой на её страницу, что было очевидно благодаря подчёркиванию.
В следующей версии дизайна нажимаются и названия передач, и каналы. Передачи ведут на страницу передач, а каналы — на страницу канала. Наступила путаница — кликаешь в строчку с передачей, а попадаешь на канал. Ещё и отсутствует логика в визуальном оформлении: ссылки не подчёркнуты, цвета не связаны с поведением.
2011
2016
2011
2016
В старом дизайне телепрограммы Яндекса в каждой строке стояла передача. Название служило ссылкой на её страницу, что было очевидно благодаря подчёркиванию.
В следующей версии дизайна нажимаются и названия передач, и каналы. Передачи ведут на страницу передач, а каналы — на страницу канала. Наступила путаница — кликаешь в строчку с передачей, а попадаешь на канал. Ещё и отсутствует логика в визуальном оформлении: ссылки не подчёркнуты, цвета не связаны с поведением.
Классические форумы злостно нарушали правило «Один объект — одна ссылка».
Представьте себе усложнённый эксперимент Фиттса, где чёрных полос очень много, но попадать нужно строго в определённые. Похожим испытаниям разработчики форумов подвергали своих пользователей в интерфейсе.
«Они отдали себя общению». Артём Горбунов о форумах
Классические форумы злостно нарушали правило «Один объект — одна ссылка».
Представьте себе усложнённый эксперимент Фиттса, где чёрных полос очень много, но попадать нужно строго в определённые. Похожим испытаниям разработчики форумов подвергали своих пользователей в интерфейсе.
«Они отдали себя общению». Артём Горбунов о форумах
С дырами
Уведомлять физлиц
о налоге, который с них
не удержали, надо
по‑новому
Без дыр
Уведомлять физлиц
о налоге, который с них
не удержали, надо
по‑новому
Связанная проблема — «дырявые» цели. Часто встречаются ссылки, разбитые на несколько строк, у которых клик между строк не срабатывает.
Пока браузеры сами не научились «склеивать» такие ссылки в единую область, это приходится делать веб‑разработчикам.
Прокрутите медленно вверх и вниз мимо ссылок
С дырами
Уведомлять физлиц
о налоге, который с них
не удержали, надо
по‑новому
Без дыр
Уведомлять физлиц
о налоге, который с них
не удержали, надо
по‑новому
Связанная проблема — «дырявые» цели. Часто встречаются ссылки, разбитые на несколько строк, у которых клик между строк не срабатывает.
Пока браузеры сами не научились «склеивать» такие ссылки в единую область, это приходится делать веб‑разработчикам.
Прокрутите медленно вверх и вниз мимо ссылок
Если ссылка относится к расположенной рядом картинке, они должны образовывать общую нажимаемую область.
Если ссылка относится к расположенной рядом картинке, они должны образовывать общую нажимаемую область.
Проекты на сайте Ильи Бирмана