Илья Бир­ман

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

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

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

 
между важными местами
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

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

О какой операции идёт речь?

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

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

Принцип:
каждый экран имеет смысл

О какой операции идёт речь?

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

Компьютер одновременно держит в уме много задач и легко переключается между ними. А человек при переключении мучительно вспоминает, на чём остановился и что собирался делать дальше. Если вернуться к аналогии с кино — тяжело продолжить смотреть кино с середины. В сериалах, где перерывы между сериями неизбежны, напоминают содержание предыдущих серий.

Принцип:
каждый экран имеет смысл

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Понятно

Непонятно

Понятно

Есть задачи

Нет задач

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

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

Понятно

Есть задачи

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

Непонятно

Понятно

Нет задач

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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