Илья Бир­ман

Пользовательский интерфейс

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

Пользовательский интерфейс

Илья Бир­ман

Пользовательский интерфейс

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бирман

Пользовательский интерфейс

Издательство Бюро Горбунова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Изда­тель­ство
Бюро Гор­бу­нова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Пользовательский интерфейс. —
М.: Изд‑во Бюро Горбунова, 2017
ISBN 978‑5‑9907024‑1‑7

Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Издательство
Бюро Горбунова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

Скрыто 73 разворота

Экран с един­ствен­ной фра­зой «Нажмите „Далее“, чтобы перейти к сле­ду­ю­щему шагу» не имеет смысла. Откуда перейти? Что будет на сле­ду­ю­щем шаге? Что вообще сей­час происходит?

Такие ошибки трудно заме­тить при тести­ро­ва­нии: при работе над интер­фей­сом дизай­нер пол­но­стью погру­жён в него и вос­при­ни­мает как еди­ное целое, а тести­ров­щик исполь­зует зара­нее напи­сан­ный сценарий.

Поэтому каж­дое состо­я­ние интер­фейса должно пройти про­верку «взгля­дом новичка». Нужно посмот­реть на него, как будто люди в чёр­ном вам стёрли память. Если вопро­сов нет — всё хорошо, если есть — нужно испра­вить экран.

Какой именно файл не найден?

Какая именно программа установлена?

Экран с единственной фразой «Нажмите „Далее“, чтобы перейти к следующему шагу» не имеет смысла. Откуда перейти? Что будет на следующем шаге? Что вообще сейчас происходит?

Такие ошибки трудно заметить при тестировании: при работе над интерфейсом дизайнер полностью погружён в него и воспринимает как единое целое, а тестировщик использует заранее написанный сценарий.

Поэтому каждое состояние интерфейса должно пройти проверку «взглядом новичка». Нужно посмотреть на него, как будто люди в чёрном вам стёрли память. Если вопросов нет — всё хорошо, если есть — нужно исправить экран.

Какой именно файл не найден?

Какая именно программа установлена?

В изда­ниях «Акти­она» у неко­то­рых ста­тей есть тесты. С помо­щью них чита­тель убеж­да­ется, что пра­вильно понял статью.

На пер­во­на­чаль­ном эскизе дизайна после ответа в окне оста­вался только выбран­ный вари­ант и ком­мен­та­рий к нему. Этих эле­мен­тов не хва­тало, чтобы «нови­чок» понял, что за окно перед ним — экран не имел смысла.

Дизайн при­ш­лось дора­бо­тать, вер­нув про­пав­шие вари­анты ответа.

Тест в журнале «Главбух»

Тест в журнале «Главбух»

Тест в журнале «Главбух»

Тест в журнале «Главбух»

В изданиях «Актиона» у некоторых статей есть тесты. С помощью них читатель убеждается, что правильно понял статью.

На первоначальном эскизе дизайна после ответа в окне оставался только выбранный вариант и комментарий к нему. Этих элементов не хватало, чтобы «новичок» понял, что за окно перед ним — экран не имел смысла.

Дизайн пришлось доработать, вернув пропавшие варианты ответа.

Понятно

Непонятно

Понятно

Есть задачи

Нет задач

Когда мы рисуем экран буду­щей про­граммы, мы обычно начи­наем с состо­я­ния, когда в про­грамме жизнь бьёт клю­чом: в поч­то­вике есть письма; в пла­ни­ров­щике — задачи.

Но поня­тен ли интер­фейс в исход­ном состо­я­нии, когда этих эле­мен­тов нет?

Понятно

Есть задачи

Когда мы рисуем экран будущей программы, мы обычно начинаем с состояния, когда в программе жизнь бьёт ключом: в почтовике есть письма; в планировщике — задачи.

Непонятно

Понятно

Нет задач

Но понятен ли интерфейс в исходном состоянии, когда этих элементов нет?

Сервис «Договоры» компании «Актион»

Сервис «Договоры» компании «Актион»

Сервис «Договоры» компании «Актион»

Когда у юри­ста загру­жено много дого­во­ров, он видит их спи­сок слева, а откры­тый дого­вор — справа.

Как будет выгля­деть этот экран без дого­во­ров? Если спе­ци­ально об этом не поду­мать, то слева будет пустая жёл­тая панель, а справа — пустая белая.

В насто­я­щих «Дого­во­рах» новичка встре­чает экран, при­гла­ша­ю­щий загру­зить пер­вый договор.

Сервис «Договоры» компании «Актион»

Сервис «Договоры» компании «Актион»

Сервис «Договоры» компании «Актион»

Когда у юриста загружено много договоров, он видит их список слева, а открытый договор — справа.

Как будет выглядеть этот экран без договоров? Если специально об этом не подумать, то слева будет пустая жёлтая панель, а справа — пустая белая.

В настоящих «Договорах» новичка встречает экран, приглашающий загрузить первый договор.

Дизай­неры часто рисуют формы неза­пол­нен­ными. Опас­ность пред­став­ляют поля с назва­ни­ями внутри. Ком­пакт­ность таких полей — это плюс, осо­бенно зна­чи­мый на узких экра­нах телефонов.

Но если форму запол­нить, подпи­си уже не про­чи­тать, а зна­чит такое состо­я­ние ста­но­вится непо­нят­ным. Пред­ставьте, что вам нужно про­ве­рить, пра­вильно ли вы ввели бан­ков­ские рек­ви­зиты. Если бра­у­зер пред­за­пол­нил поля авто­ма­ти­че­ски, про­ве­рить пра­виль­ность ещё сложнее.

Отдельный вопрос — зачем «Аэрофлот» заставляет вводить данные, которые ему и так известны. Пассажир указывает всё это при покупке билета.

Регистрация на рейс «Аэрофлота»

Регистрация на рейс «Аэрофлота»

Регистрация на рейс «Аэрофлота»

Регистрация на рейс «Аэрофлота»

Дизайнеры часто рисуют формы незаполненными. Опасность представляют поля с названиями внутри. Компактность таких полей — это плюс, особенно значимый на узких экранах телефонов.

Но если форму заполнить, подписи уже не прочитать, а значит такое состояние становится непонятным. Представьте, что вам нужно проверить, правильно ли вы ввели банковские реквизиты. Если браузер предзаполнил поля автоматически, проверить правильность ещё сложнее.

Отдельный вопрос — зачем «Аэрофлот» заставляет вводить данные, которые ему и так известны. Пассажир указывает всё это при покупке билета.

Скрыто 338 разворотов

Бир­ман Илья Борисович

Поль­зо­ва­тель­ский интерфейс

  • Арт‑дирек­тор и изда­тель Артём Горбунов

  • Дизай­нер обложки и фото­граф
    Вла­ди­мир Колпаков

  • Иллю­стра­тор Андрей Кокорин

  • Раз­ра­бот­чики Рустам Кул­ма­тов
    и Васи­лий Половнёв

  • Мет­ран­паж и тести­ров­щик Сер­гей Фролов

  • Помощ­ники Юрий Мазур­ский
    и Алек­сандра Шабалдина

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

  • bureau.ru

Бирман Илья Борисович

Пользовательский интерфейс

  • Арт‑директор и издатель Артём Горбунов

  • Дизайнер обложки и фотограф
    Владимир Колпаков

  • Иллюстратор Андрей Кокорин

  • Разработчики Рустам Кулматов
    и Василий Половнёв

  • Метранпаж и тестировщик Сергей Фролов

  • Помощники Юрий Мазурский
    и Александра Шабалдина

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось