Илья Бир­ман

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

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

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

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

Оглавление

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

Тест

В начале главы об обратной связи — пример с машинкой из почтового отделения. Сформулируйте, в чём именно проблема с её интерфейсом.

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

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

Какой должна быть обратная связь для эффекта непосредственного взаимодействия?

Нейтральной
Квазирежимной
Мгновенной
Непрерывной
Грубой
Физичной

Обратная связь должна быть мгновенной, непрерывной и физичной.

После любого изменения в поле «адрес» форма перепроверяет, есть ли такой адрес, и, если нет, выводит окно с сообщением об ошибке. Что с этим не так и как исправить?

Здесь всё в порядке: это мгновенная обратная связь
Это слишком грубая обратная связь
Нарушен принцип «Без обмана»
Среди ответов нет правильного

Даже если окно выводится мгновенно, сообщать об ошибке таким окном — это слишком грубо. А обман тут ни при чём.

Блок на сайте обычно подгружается около секунды. Выберите самый подходящий элемент для индикации ожидания.

Радиокнопка
Прогрессбар, разделённый на сегменты
«Крутилка» или подобная компактная анимация
Ползунок, потому что он гарантирует мгновенную и непрерывную обратную связь
Непрерывный прогрессбар с указанием процентов загрузки

Радиокнопка и ползунок — элементы управления, а не индикации. Прогрессбары — слишком «громкая» индикация для секундной загрузки. Лучше всего подойдёт компактная крутилка.

Хорошая обратная связь для кнопки «Оплатить» на экране подтверждения заказа в интернет‑магазине —

Продолжительный звуковой сигнал в мажорной тональности
Экран «Спасибо, деньги получены!» сразу после нажатия кнопки, даже если реальная отправка денег занимает пару секунд
Успешная покупка не требует обратной связи, поскольку дальнейшие действия пользователя не нужны. Следует давать обратную связь только в случае ошибки пользователя
Среди ответов нет правильного

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

Выберите примеры взаимодействия с непрерывной обратной связью.

Раздел «Обратная связь» на сайте, где сотрудники отвечают в течение часа
Онлайн‑чат службы поддержки
Превращение курсора мыши в руку над ссылками
Перетаскивание окна с помощью мыши на компьютере
Изменение уровня громкости с помощью круглой ручки
Изменение уровня громкости с помощью кнопок + и −, которые нужно удерживать, а потом отпускать ровно в тот момент, когда громкость достигнет желаемого уровня
Поворачивание колёс с помощью руля автомобиля

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

Назовите способы повышения информативности листалки.

Изменить нумерацию с прямой на обратную
Использовать римские цифры
Показать миниатюры страниц, на которые ведут ссылки из листалки
Показать общее число страниц
Дать выбор между листанием по 10, 20 и 50 элементов

Чтобы повысить информативность, нужно или уменьшить шум, или добавить сигнал. Ни один из приведённых способов не уменьшает шум. Добавляют сигнал миниатюры и общее число страниц — и то, и другое помогает принять решение о том, стоит ли листать и в каком направлении.

Что думаете о такой листалке?

Подойдёт в интернет‑магазине
Подойдёт в панели управления интернет‑магазином
Подойдёт в базе данных интернет‑магазина
Чтобы листалка подошла в указанных случаях, следует выбор размера страницы сделать радиогруппой, а не выпадайкой (для выбора достаточно будет одного клика вместо двух)
Листалку следует упростить, сократив число нумерованных страниц до пяти, и тогда её можно будет использовать в большинстве задач
Листалка не годится

Листалка с механическим разделением содержимого на равные порции не помогает сориентироваться и найти нужную страницу, не важно где. Замена выпадайки на радиогруппу или уменьшение числа страниц тут не помогут.

На сайте ресторана необходимо опубликовать длинное меню. Предложите хорошие решения для навигации.

Разбить на страницы по десять блюд, дать стрелки для листания
Дать ссылки для прямого перехода на каждую страницу меню: 1, 2, 3 и так далее.
Сгруппировать блюда по алфавиту: А...Д, Е...И, К...О и т. д.
Вывести всё меню одной страницей, без листалок
Предусмотреть переход на блюда по категориям: салаты, супы, десерт и т. д.

Десять блюд, номера страниц — числа с потолка, таким разделением навигации не поможешь. Группы по несколько букв максимально бесчеловечны. Лучше всего показать все блюда одной страницей. Если же их так много, что без деления на страницы никак, то делить нужно по смыслу, то есть по типам блюд.

Назовите способы улучшения прокрутки.

Сделать лифт пропорциональным
Отметить важные элементы документа
Показать места с результатами поиска на длинной странице
Убрать стрелки по краям, чтобы улучшить обратную связь
Реализовать непрерывную обратную связь
Открывать в том же месте при перезагрузке

В некоторых случаях стрелки по краям можно убрать, но это никак не улучшит обратную связь. Остальные перечисленные способы улучшают прокрутку.

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

Тест

В начале главы об обратной связи — пример с машинкой из почтового отделения. Сформулируйте, в чём именно проблема с её интерфейсом.

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

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

Какой должна быть обратная связь для эффекта непосредственного взаимодействия?

Нейтральной
Квазирежимной
Мгновенной
Непрерывной
Грубой
Физичной

Обратная связь должна быть мгновенной, непрерывной и физичной.

После любого изменения в поле «адрес» форма перепроверяет, есть ли такой адрес, и, если нет, выводит окно с сообщением об ошибке. Что с этим не так и как исправить?

Здесь всё в порядке: это мгновенная обратная связь
Это слишком грубая обратная связь
Нарушен принцип «Без обмана»
Среди ответов нет правильного

Даже если окно выводится мгновенно, сообщать об ошибке таким окном — это слишком грубо. А обман тут ни при чём.

Блок на сайте обычно подгружается около секунды. Выберите самый подходящий элемент для индикации ожидания.

Радиокнопка
Прогрессбар, разделённый на сегменты
«Крутилка» или подобная компактная анимация
Ползунок, потому что он гарантирует мгновенную и непрерывную обратную связь
Непрерывный прогрессбар с указанием процентов загрузки

Радиокнопка и ползунок — элементы управления, а не индикации. Прогрессбары — слишком «громкая» индикация для секундной загрузки. Лучше всего подойдёт компактная крутилка.

Хорошая обратная связь для кнопки «Оплатить» на экране подтверждения заказа в интернет‑магазине —

Продолжительный звуковой сигнал в мажорной тональности
Экран «Спасибо, деньги получены!» сразу после нажатия кнопки, даже если реальная отправка денег занимает пару секунд
Успешная покупка не требует обратной связи, поскольку дальнейшие действия пользователя не нужны. Следует давать обратную связь только в случае ошибки пользователя
Среди ответов нет правильного

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

Выберите примеры взаимодействия с непрерывной обратной связью.

Раздел «Обратная связь» на сайте, где сотрудники отвечают в течение часа
Онлайн‑чат службы поддержки
Превращение курсора мыши в руку над ссылками
Перетаскивание окна с помощью мыши на компьютере
Изменение уровня громкости с помощью круглой ручки
Изменение уровня громкости с помощью кнопок + и −, которые нужно удерживать, а потом отпускать ровно в тот момент, когда громкость достигнет желаемого уровня
Поворачивание колёс с помощью руля автомобиля

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

Назовите способы повышения информативности листалки.

Изменить нумерацию с прямой на обратную
Использовать римские цифры
Показать миниатюры страниц, на которые ведут ссылки из листалки
Показать общее число страниц
Дать выбор между листанием по 10, 20 и 50 элементов

Чтобы повысить информативность, нужно или уменьшить шум, или добавить сигнал. Ни один из приведённых способов не уменьшает шум. Добавляют сигнал миниатюры и общее число страниц — и то, и другое помогает принять решение о том, стоит ли листать и в каком направлении.

Что думаете о такой листалке?

Подойдёт в интернет‑магазине
Подойдёт в панели управления интернет‑магазином
Подойдёт в базе данных интернет‑магазина
Чтобы листалка подошла в указанных случаях, следует выбор размера страницы сделать радиогруппой, а не выпадайкой (для выбора достаточно будет одного клика вместо двух)
Листалку следует упростить, сократив число нумерованных страниц до пяти, и тогда её можно будет использовать в большинстве задач
Листалка не годится

Листалка с механическим разделением содержимого на равные порции не помогает сориентироваться и найти нужную страницу, не важно где. Замена выпадайки на радиогруппу или уменьшение числа страниц тут не помогут.

На сайте ресторана необходимо опубликовать длинное меню. Предложите хорошие решения для навигации.

Разбить на страницы по десять блюд, дать стрелки для листания
Дать ссылки для прямого перехода на каждую страницу меню: 1, 2, 3 и так далее.
Сгруппировать блюда по алфавиту: А...Д, Е...И, К...О и т. д.
Вывести всё меню одной страницей, без листалок
Предусмотреть переход на блюда по категориям: салаты, супы, десерт и т. д.

Десять блюд, номера страниц — числа с потолка, таким разделением навигации не поможешь. Группы по несколько букв максимально бесчеловечны. Лучше всего показать все блюда одной страницей. Если же их так много, что без деления на страницы никак, то делить нужно по смыслу, то есть по типам блюд.

Назовите способы улучшения прокрутки.

Сделать лифт пропорциональным
Отметить важные элементы документа
Показать места с результатами поиска на длинной странице
Убрать стрелки по краям, чтобы улучшить обратную связь
Реализовать непрерывную обратную связь
Открывать в том же месте при перезагрузке

В некоторых случаях стрелки по краям можно убрать, но это никак не улучшит обратную связь. Остальные перечисленные способы улучшают прокрутку.

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

3
Язык

3
Язык

Синтаксис

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

Вид полей ука­зы­вает на то, как их запол­нять. Здесь есть радиокнопки, одно­строч­ные и мно­го­строч­ные поля ввода, чекбоксы.

Ино­гда для того, чтобы чело­век пра­вильно запол­нил форму, дают под­сказки: «нуж­ное под­черк­нуть», «ука­зы­вать в таком‑то виде».

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Синтаксис

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

Вид полей указывает на то, как их заполнять. Здесь есть радиокнопки, однострочные и многострочные поля ввода, чекбоксы.

Иногда для того, чтобы человек правильно заполнил форму, дают подсказки: «нужное подчеркнуть», «указывать в таком‑то виде».

Первая форма в жизни большинства граждан России

Первая форма в жизни большинства граждан России

Хорошо состав­лен­ная форма, анкета или бланк после запол­не­ния скла­ды­ва­ются в связ­ный текст. Поэтому мы пред­ла­гаем смот­реть на форму как на предложение.

Первая форма в жизни большинства граждан России

Первая форма в жизни большинства граждан России

Хорошо составленная форма, анкета или бланк после заполнения складываются в связный текст. Поэтому мы предлагаем смотреть на форму как на предложение.

Текст на форме может быть пред­став­лен не только пред­ло­же­нием, но и спис­ком или таб­ли­цей. Редак­тор может изме­нить пред­став­ле­ние для удоб­ства запол­не­ния и чте­ния. Но и в этом слу­чае син­так­си­че­ские отно­ше­ния между эле­мен­тами стро­ятся, как в обыч­ном предложении.

Японская таможенная декларация

Текст на форме может быть представлен не только предложением, но и списком или таблицей. Редактор может изменить представление для удобства заполнения и чтения. Но и в этом случае синтаксические отношения между элементами строятся, как в обычном предложении.

Японская таможенная декларация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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