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