Илья Бирман

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

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

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

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

Оглавление

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

Эта книга объ­еди­няет листа­ние и про­крутку. Вся она — длин­ная про­кру­чи­ва­е­мая стра­ница, но в ней сохра­нены дис­крет­ность и ста­биль­ность, свой­ствен­ные листанию.

Дискретность

Книга раз­де­лена на смыс­ло­вые раз­во­роты. Это помо­гает читать само­до­ста­точ­ными пор­ци­ями. Нуж­ный раз­во­рот легко узнать по внеш­нему виду в оглав­ле­нии. Листать раз­во­роты можно стрел­ками на кла­ви­а­туре. Ино­гда раз­во­роты содер­жат несколько сме­ня­е­мых эле­мен­тов — в этом слу­чае при листа­нии посте­пенно пока­жутся они все.

Стабильность

Раз­во­роты про­ну­ме­ро­ваны как стра­ницы в книге. При пере­за­грузке откры­ва­ется тот же раз­во­рот. Адрес в адрес­ной строке дина­ми­че­ски меня­ется по мере чте­ния — если поде­литься ссыл­кой, её полу­ча­тель попа­дёт на тот же раз­во­рот. Нако­нец, чита­тель может сде­лать сколько угодно закладок.

Эта книга объ­еди­няет листа­ние и про­крутку. Вся она — длин­ная про­кру­чи­ва­е­мая стра­ница, но в ней сохра­нены дис­крет­ность и ста­биль­ность, свой­ствен­ные листанию.

Дискретность

Книга раз­де­лена на смыс­ло­вые раз­во­роты. Это помо­гает читать само­до­ста­точ­ными пор­ци­ями. Нуж­ный раз­во­рот легко узнать по внеш­нему виду в оглав­ле­нии. Листать раз­во­роты можно стрел­ками на кла­ви­а­туре. Ино­гда раз­во­роты содер­жат несколько сме­ня­е­мых эле­мен­тов — в этом слу­чае при листа­нии посте­пенно пока­жутся они все.

Стабильность

Раз­во­роты про­ну­ме­ро­ваны как стра­ницы в книге. При пере­за­грузке откры­ва­ется тот же раз­во­рот. Адрес в адрес­ной строке дина­ми­че­ски меня­ется по мере чте­ния — если поде­литься ссыл­кой, её полу­ча­тель попа­дёт на тот же раз­во­рот. Нако­нец, чита­тель может сде­лать сколько угодно закладок.

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3
Язык

3
Язык

Синтаксис

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

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

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

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

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

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

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

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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