Илья Бир­ман

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

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

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

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

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

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

УДК 655.262
ББК 85.15

Оглавление

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

Тест

Подписи чекбоксов или радиокнопок в группе обязательно должны быть:

В одном падеже
Одной частью речи
Однородными членами предложения
Одной категории состояния
С одинаковым порядком слов

В синтаксисе элементов интерфейса чекбоксы и радиокнопки — второстепенные члены предложения. Если они объединены в группу, они должны быть однородными.

Выберите примеры с недостатками в тексте подписей элементов управления.

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

Как можно перевести кнопку Copy на русский?

Копируют
Скопировать
Скопировано
Копия (а не оригинал)
Копируемыми
Идёт копирование...

Функции кнопки — команда, статус и навигация. Из предложенных вариантов подходят «Скопировать» (команда, глагольное сказуемое) и «Копия» (статус, именное сказуемое), а остальные не подходят.

Как можно перевести чекбокс Copy на русский? Этот чекбокс — часть группы.

Скопировать
Скопировано
Копия (а не оригинал)
Копируемыми
Идёт копирование...

Функции чекбокса — выбор объекта или свойства и уточнение действия. Из предложенных вариантов подходят «Скопировать» (уточнение действия) и «Копия» (объект или свойство). Остальные не подходят.

Выберите наилучший вариант подписи к полю ввода города доставки.

Какой у вас город?
Введите город
Укажите город
Город?
Город
Мы доставим сюда

Функции поля ввода — это выбор, уточнение, ввод текста и чисел. Допустимы несколько вариантов, но нужно выбрать наилучший, и это вариант «Город». При такой подписи значение поля ввода будет приложением, отвечать на вопрос «Какой именно?», а вместе подпись и значение будут образовывать словосочетание, например «Город Москва». Другие варианты избыточны или просто некорректны.

Выберите верные утверждения.

На кнопке, используемой для отдачи команды, должен быть глагол совершенного вида в начальной форме: что сделать?
В подписях радиокнопок в одной группе могут быть разные части речи
Чекбокс должен отвечать на вопрос: да или нет?
Поле ввода может использоваться для ввода подлежащего
Если чекбокс по умолчанию выключен, то для соответствия этому состоянию рекомендуется использовать негативную формулировку
При выключении чекбокса хорошо заменять формулировку на противоположную
Среди предыдущих вариантов нет верного

Команда — это глагол совершенного вида в начальной форме: «Сохранить», «Закрыть», «Отправить». Радиокнопки в группе могут быть разными частями речи: «Город Москва / Питер / другой». В поле ввода может быть подлежащее, например поисковый запрос: музыка. Остальные утверждения неверны.

Как сделать пиктограммы из этого набора более различимыми?

Сделать их чёрно‑белыми
Взять каждую в рамку
Убрать мишек

Нужно убрать повторяющиеся части, мешающие различать пиктограммы, то есть мишек.

Выберите стоп‑слова в этом интерфейсе.

Пожалуйста
Данные учётной записи
Требуется
Перейдите

Все ответы правильные. «Пожалуйста» и «требуется» нужно заменить на объяснение в мире пользователя. «Данные учётной записи» — тяжеловесный технический термин. «Перейдите» — избыточно в тексте ссылки.

Сайт поздравляет пользователей с праздниками. Тех, чей пол он не знает, поздравляет вот так. Как улучшить это с точки зрения человечности и информационного стиля?

Спросить пол прямо в письме, сославшись на то, что это обязательное поле, и сразу после выбора поздравлять с подходящим праздником
Определять пол автоматически по имени, когда возможно
Если пол важен для какой‑то полезной функции сайта, спросить его, объяснив эту пользу, а с праздниками поздравлять только когда поздравление точно по адресу
Исправить орфографические ошибки

Вместо требования обязательно заполнить поле объясните его пользу. И пусть потеет машина: пол следует сначала попытаться определить по имени и фамилии автоматически. Даже если вы дизайнер, за орфографией нужно следить.

Какие причины появления языка роботов в интерфейсе перечислены автором?

Плохой перевод на русский
Механическое составление предложений
Использование неподходящего шаблона
Нарушение закона Фиттса
Технозависимость
Взгляд новичка

Закон Фиттса и взгляд новичка ни при чём, а остальное действительно ведёт к появлению языка роботов в интерфейсе.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Подписи чекбоксов или радиокнопок в группе обязательно должны быть:

В одном падеже
Одной частью речи
Однородными членами предложения
Одной категории состояния
С одинаковым порядком слов

В синтаксисе элементов интерфейса чекбоксы и радиокнопки — второстепенные члены предложения. Если они объединены в группу, они должны быть однородными.

Выберите примеры с недостатками в тексте подписей элементов управления.

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

Как можно перевести кнопку Copy на русский?

Копируют
Скопировать
Скопировано
Копия (а не оригинал)
Копируемыми
Идёт копирование...

Функции кнопки — команда, статус и навигация. Из предложенных вариантов подходят «Скопировать» (команда, глагольное сказуемое) и «Копия» (статус, именное сказуемое), а остальные не подходят.

Как можно перевести чекбокс Copy на русский? Этот чекбокс — часть группы.

Скопировать
Скопировано
Копия (а не оригинал)
Копируемыми
Идёт копирование...

Функции чекбокса — выбор объекта или свойства и уточнение действия. Из предложенных вариантов подходят «Скопировать» (уточнение действия) и «Копия» (объект или свойство). Остальные не подходят.

Выберите наилучший вариант подписи к полю ввода города доставки.

Какой у вас город?
Введите город
Укажите город
Город?
Город
Мы доставим сюда

Функции поля ввода — это выбор, уточнение, ввод текста и чисел. Допустимы несколько вариантов, но нужно выбрать наилучший, и это вариант «Город». При такой подписи значение поля ввода будет приложением, отвечать на вопрос «Какой именно?», а вместе подпись и значение будут образовывать словосочетание, например «Город Москва». Другие варианты избыточны или просто некорректны.

Выберите верные утверждения.

На кнопке, используемой для отдачи команды, должен быть глагол совершенного вида в начальной форме: что сделать?
В подписях радиокнопок в одной группе могут быть разные части речи
Чекбокс должен отвечать на вопрос: да или нет?
Поле ввода может использоваться для ввода подлежащего
Если чекбокс по умолчанию выключен, то для соответствия этому состоянию рекомендуется использовать негативную формулировку
При выключении чекбокса хорошо заменять формулировку на противоположную
Среди предыдущих вариантов нет верного

Команда — это глагол совершенного вида в начальной форме: «Сохранить», «Закрыть», «Отправить». Радиокнопки в группе могут быть разными частями речи: «Город Москва / Питер / другой». В поле ввода может быть подлежащее, например поисковый запрос: музыка. Остальные утверждения неверны.

Как сделать пиктограммы из этого набора более различимыми?

Сделать их чёрно‑белыми
Взять каждую в рамку
Убрать мишек

Нужно убрать повторяющиеся части, мешающие различать пиктограммы, то есть мишек.

Выберите стоп‑слова в этом интерфейсе.

Пожалуйста
Данные учётной записи
Требуется
Перейдите

Все ответы правильные. «Пожалуйста» и «требуется» нужно заменить на объяснение в мире пользователя. «Данные учётной записи» — тяжеловесный технический термин. «Перейдите» — избыточно в тексте ссылки.

Сайт поздравляет пользователей с праздниками. Тех, чей пол он не знает, поздравляет вот так. Как улучшить это с точки зрения человечности и информационного стиля?

Спросить пол прямо в письме, сославшись на то, что это обязательное поле, и сразу после выбора поздравлять с подходящим праздником
Определять пол автоматически по имени, когда возможно
Если пол важен для какой‑то полезной функции сайта, спросить его, объяснив эту пользу, а с праздниками поздравлять только когда поздравление точно по адресу
Исправить орфографические ошибки

Вместо требования обязательно заполнить поле объясните его пользу. И пусть потеет машина: пол следует сначала попытаться определить по имени и фамилии автоматически. Даже если вы дизайнер, за орфографией нужно следить.

Какие причины появления языка роботов в интерфейсе перечислены автором?

Плохой перевод на русский
Механическое составление предложений
Использование неподходящего шаблона
Нарушение закона Фиттса
Технозависимость
Взгляд новичка

Закон Фиттса и взгляд новичка ни при чём, а остальное действительно ведёт к появлению языка роботов в интерфейсе.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

4
Экраны

4
Экраны

Окна

В пер­вой вер­сии системы «Вин­доус», назва­ние кото­рой бук­вально зна­чит «окна», экран был раз­де­лён на непе­ре­кры­ва­ю­щи­еся части, в каж­дой из кото­рых могла выпол­няться своя про­грамма. Кон­фи­гу­ра­ция 2 × 2 даже стала осно­вой для лого­типа системы.

Обложка брошюры о Виндоусе, 1986
Скан Майкла Холли

Обложка брошюры о Виндоусе, 1986
Скан Майкла Холли

Окна

В первой версии системы «Виндоус», название которой буквально значит «окна», экран был разделён на неперекрывающиеся части, в каждой из которых могла выполняться своя программа. Конфигурация 2 × 2 даже стала основой для логотипа системы.

Перекрывающиеся окна в Виндоусе 3.11

Окно — само­сто­я­тель­ная область экрана с эле­мен­тами управ­ле­ния. В окне может выпол­няться отдель­ная про­грамма, оно может пред­став­лять отдель­ный доку­мент или само­сто­я­тель­ную функ­цию программы.

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

Про­стран­ство, по кото­рому пере­ме­ща­ются окна, назы­ва­ется «рабо­чим столом».

Перекрывающиеся окна в Виндоусе 3.11

Окно — самостоятельная область экрана с элементами управления. В окне может выполняться отдельная программа, оно может представлять отдельный документ или самостоятельную функцию программы.

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

Пространство, по которому перемещаются окна, называется «рабочим столом».

Про­граммы исполь­зуют окна по‑разному.

Многодокументный интерфейс

Однодокументный интерфейс

Неко­то­рые про­граммы содер­жат внутри сво­его окна несколько дру­гих окон с доку­мен­тами. Область пере­ме­ще­ния таких окон огра­ни­чена раз­ме­рами роди­тель­ского окна.

Дру­гие про­граммы предо­став­ляют каж­дому доку­менту неза­ви­си­мое окно на рабо­чем столе.

Пока­зан­ный здесь «Ворд» в раз­ных вер­сиях под­дер­жи­вал раз­ные подходы.

Программы используют окна по‑разному.

Многодокументный интерфейс

Некоторые программы содержат внутри своего окна несколько других окон с документами. Область перемещения таких окон ограничена размерами родительского окна.

Однодокументный интерфейс

Другие программы предоставляют каждому документу независимое окно на рабочем столе.

Показанный здесь «Ворд» в разных версиях поддерживал разные подходы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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