🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
Пользовательский интерфейс
Пользовательский интерфейс
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Движение и клик — один жест
Когда мы видим объект, мы перемещаем к нему курсор, а затем нажимаем кнопку мыши. Но это один жест: мы не меняем принятое решение о клике по пути. Поэтому плохи элементы, появляющиеся при наведении и закрывающие собою цель: человек нажимает не туда, куда хотел.
Предположим, вы хотите перейти по ссылке в «Телеграме». Вы уже увидели её в тексте и начали двигать мышь к ней.
Но пока вы ведёте курсор, под ним вдруг оказывается всплывающая панель стикеров.
Даже если вы успеваете её заметить, рука продолжает «по инерции» вести мышь до того места, где была ссылка. В итоге вы кликаете и отправляете стикер.
Какими были бы результаты эксперимента Фиттса, если бы поверх мишени иногда выезжала закрывающая её полочка?
Движение и клик — один жест
Когда мы видим объект, мы перемещаем к нему курсор, а затем нажимаем кнопку мыши. Но это один жест: мы не меняем принятое решение о клике по пути. Поэтому плохи элементы, появляющиеся при наведении и закрывающие собою цель: человек нажимает не туда, куда хотел.
Предположим, вы хотите перейти по ссылке в «Телеграме». Вы уже увидели её в тексте и начали двигать мышь к ней.
Но пока вы ведёте курсор, под ним вдруг оказывается всплывающая панель стикеров.
Даже если вы успеваете её заметить, рука продолжает «по инерции» вести мышь до того места, где была ссылка. В итоге вы кликаете и отправляете стикер.
Какими были бы результаты эксперимента Фиттса, если бы поверх мишени иногда выезжала закрывающая её полочка?
Выпадающие меню на сайтах не учитывают, что движение и клик — один жест. Когда наводишь на пункт главного меню, из него выпадает подменю. Заранее о таком не догадаться — элемент не типичен для интернета, да и выглядит как обычная строка ссылок.
После клика видишь, что выпало меню, но браузер уже загружает следующую страницу. Теперь уже кликать бесполезно — жди, пока загрузится страница.
Интернет‑банк «Альфа‑клик»
Выпадающие меню на сайтах не учитывают, что движение и клик — один жест. Когда наводишь на пункт главного меню, из него выпадает подменю. Заранее о таком не догадаться — элемент не типичен для интернета, да и выглядит как обычная строка ссылок.
После клика видишь, что выпало меню, но браузер уже загружает следующую страницу. Теперь уже кликать бесполезно — жди, пока загрузится страница.
Интернет‑банк «Альфа‑клик»
Меню в операционной системе бывают многоуровневыми.
Увидев искомый пункт Color Balance в распахнувшемся подменю, пользователь ведёт к нему курсор по кратчайшему пути, не задумываясь о том, что на нём встречаются ненужные ему пункты Layer Mask и Vector Mask.
Чтобы объехать эти пункты, пришлось бы делать «ход конём» — сначала сдвигать курсор горизонтально вправо, а уже потом вести вниз. Но Мак анализирует движение и корректно определяет намерение пользователя: если достаточно быстро двинуть курсор по диагонали, подменю не закроется.
Меню в операционной системе бывают многоуровневыми.
Увидев искомый пункт Color Balance в распахнувшемся подменю, пользователь ведёт к нему курсор по кратчайшему пути, не задумываясь о том, что на нём встречаются ненужные ему пункты Layer Mask и Vector Mask.
Чтобы объехать эти пункты, пришлось бы делать «ход конём» — сначала сдвигать курсор горизонтально вправо, а уже потом вести вниз. Но Мак анализирует движение и корректно определяет намерение пользователя: если достаточно быстро двинуть курсор по диагонали, подменю не закроется.
Разработчики двухуровневого меню «Амазона» также учли направление движения курсора. Если вести курсор вправо внутри выделенного треугольника, переключение на соседние пункты меню не происходит.
Разработчики двухуровневого меню «Амазона» также учли направление движения курсора. Если вести курсор вправо внутри выделенного треугольника, переключение на соседние пункты меню не происходит.
Влияние привычки
При повторении человек привыкает попадать в определённую цель всё быстрее. На понимание того, где цель, совсем не уходит времени, а на само прицеливание уходит намного меньше, чем раньше. Проще привыкнуть попадать в цели, которые не меняют своего расположения.
Пользователи «Ворда» знают, что «Сохранить» — это третья иконка в тулбаре. Если в зависимости от состояний интерфейса расположение иконки меняется, люди тратят время на то, чтобы её найти. Поэтому важные элементы не должны перемещаться.
Кто владеет слепым набором, нажимает клавиши почти мгновенно. Продвинутые пользователи любят горячие клавиши и стремятся, где возможно, использовать клавиатуру, а не мышь.
Углы сенсорных экранов не обладают бесконечной физической площадью, как углы на экране компьютера. Но человек, привыкший держать устройство в руках, нащупает их с закрытыми глазами, почти как кнопку на клавиатуре. Поэтому использовать углы важно в любом интерфейсе.
Всему своё место
Влияние привычки
При повторении человек привыкает попадать в определённую цель всё быстрее. На понимание того, где цель, совсем не уходит времени, а на само прицеливание уходит намного меньше, чем раньше. Проще привыкнуть попадать в цели, которые не меняют своего расположения.
Пользователи «Ворда» знают, что «Сохранить» — это третья иконка в тулбаре. Если в зависимости от состояний интерфейса расположение иконки меняется, люди тратят время на то, чтобы её найти. Поэтому важные элементы не должны перемещаться.
Кто владеет слепым набором, нажимает клавиши почти мгновенно. Продвинутые пользователи любят горячие клавиши и стремятся, где возможно, использовать клавиатуру, а не мышь.
Углы сенсорных экранов не обладают бесконечной физической площадью, как углы на экране компьютера. Но человек, привыкший держать устройство в руках, нащупает их с закрытыми глазами, почти как кнопку на клавиатуре. Поэтому использовать углы важно в любом интерфейсе.
Всему своё место
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015