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