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