Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

Порой из глав­ной стра­ницы сайта неясно, чем зани­ма­ется компания.

«Ста­тьи, про­екты» — такие пункты меню могут быть на любом сайте.

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

Порой из главной страницы сайта неясно, чем занимается компания.

«Статьи, проекты» — такие пункты меню могут быть на любом сайте.

Эту рекламу трудно понять, даже если ты уже и стал­ки­вался с серией «Всё равно?!»

Челябинск,
2016

Эту рекламу трудно понять, даже если ты уже и сталкивался с серией «Всё равно?!»

Челябинск,
2016

Медуза (иноагент)

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

Медуза (иноагент)

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

Тест

Параметры съёмки фотоаппарата изменяются физическими ручками и кнопками, а не виртуальными элементами на экране. С какой точки зрения это хорошо?

Ни с какой, такой подход устарел и не соответствует идее человечности
Благодаря постоянному расположению вырабатывается привычка, пользователь изменяет настройки не глядя
Интерфейс лишён модальности
Новичку сразу всё понятно

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

Фотоаппарат «Фуджифильм X‑T1»

Что можно сказать об этом сообщении?

Оно слишком непривычно
Это модальное окно
Оно технозависимое
Это отличный пример того, как последовательное волшебство в интерфейсе позволяет эффективнее работать на компьютере
Не выдерживает взгляда новичка

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

Как сделать этот интерфейс человечнее?

Убрать пример
Понимать телефон в любом формате
Вывести сообщение об ошибке в окне
Здесь всё и так хорошо

Пример помогает понять, что надо вводить знак „+“ и код страны, и пользователю не приходится гадать. Но человечнее будет дать ввести номер и в любом другом формате, исправив его автоматически. А введение дополнительных окон этот интерфейс человечнее не сделает.

Выберите примеры действия принципа «Пусть потеет машина».

«Крутилка» показывает, что программа думает
Форма принимает дату в любом формате
Браузер автоматически переводит страницу с иностранного языка
В окне показаны в деталях все операции, выполняемые процессором
Программа попала в бесконечный цикл

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

Что не так с этой таблицей размеров в интернет‑магазине обуви?

В таблице использовано недостаточно цветов
Таблица заставляет человека делать то, что могла бы сделать машина
Таблица повышает вероятность ошибки при заказе
Размеры даны в дюймах, хотя таблица предназначена для американской аудитории

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

Айтюнс не смог прочитать данные Айфона и предлагает сбросить его к заводским установкам. Какой принцип нарушен?

Сначала данные, потом фильтры
Привычность интерфейса: окно выглядит нестандартным для операционной системы
Данные пользователя бесконечно ценны
Принцип квазирежимов

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

Человек приехал забрать пылесос из пункта самовывоза. У него спрашивают номер заказа. С точки зрения человечности это:

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

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

Сайт находит тренинги по множеству критериев. Как бы вы предложили устроить интерфейс поиска?

Сделать «мастер»: на первом шаге одно поле поиска по всему, на втором — уточнить, в чём именно искать (специализациях, городах, темах), на третьем — показать результат
Сделать одно поле поиска по всему, в результатах вывести всё, что нашлось
Сделать три поля поиска: организатор, тема и аудитория, чтобы пользователь мог точно ввести, что ему нужно

Форма из нескольких шагов или нескольких полей — плохое решение, только отдаляющее от результатов поиска. Принцип «сначала данные, потом фильтры» предписывает как можно раньше показать хоть что‑то, а уже потом дать человеку инструменты для уточнения выдачи.

Интернет‑магазин предлагает выбор сортировки. Укажите проблемы этого интерфейса.

Модальность: здесь недостаточно способов сортировки, чтобы найти шампунь
Технозависимость: человеку предлагается сконструировать запрос к базе данных
Непривычность: элемент выбора сортировки одновременно похож и на набор ссылок, и на набор выпадающих списков

Слова «по названию», «цене», «новизне» оформлены как ссылки, но не являются ими, что противоречит привычкам. Интерфейс технозависим: вместо учёта реальных сценариев поиска дана сортировка по атрибутам базы данных. Скажем, зачем нужна сортировка по названию задом‑наперёд? Способов сортировки, конечно, можно придумать и ещё больше, но модальность тут ни при чём.

Предложите улучшения интерфейса из предыдущего вопроса.

Заменить названия вариантов сортировки на более человечные: «сначала дешёвые», «по алфавиту»
Добавить сортировку по цвету упаковки
Использовать более привычный элемент для выбора сортировки
Нарисовать синюю рамку вокруг заголовка, чтобы он не «висел» в воздухе

Дать более человечные названия способам сортировки и использовать более привычный элемент — хорошие идеи. Иногда удобно искать упаковку по цвету, но сортировка вряд ли поможет с этим: синий будет до или после красного? Синяя рамка заголовку не нужна.

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

Тест

Параметры съёмки фотоаппарата изменяются физическими ручками и кнопками, а не виртуальными элементами на экране. С какой точки зрения это хорошо?

Ни с какой, такой подход устарел и не соответствует идее человечности
Благодаря постоянному расположению вырабатывается привычка, пользователь изменяет настройки не глядя
Интерфейс лишён модальности
Новичку сразу всё понятно

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

Фотоаппарат «Фуджифильм X‑T1»

Что можно сказать об этом сообщении?

Оно слишком непривычно
Это модальное окно
Оно технозависимое
Это отличный пример того, как последовательное волшебство в интерфейсе позволяет эффективнее работать на компьютере
Не выдерживает взгляда новичка

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

Как сделать этот интерфейс человечнее?

Убрать пример
Понимать телефон в любом формате
Вывести сообщение об ошибке в окне
Здесь всё и так хорошо

Пример помогает понять, что надо вводить знак „+“ и код страны, и пользователю не приходится гадать. Но человечнее будет дать ввести номер и в любом другом формате, исправив его автоматически. А введение дополнительных окон этот интерфейс человечнее не сделает.

Выберите примеры действия принципа «Пусть потеет машина».

«Крутилка» показывает, что программа думает
Форма принимает дату в любом формате
Браузер автоматически переводит страницу с иностранного языка
В окне показаны в деталях все операции, выполняемые процессором
Программа попала в бесконечный цикл

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

Что не так с этой таблицей размеров в интернет‑магазине обуви?

В таблице использовано недостаточно цветов
Таблица заставляет человека делать то, что могла бы сделать машина
Таблица повышает вероятность ошибки при заказе
Размеры даны в дюймах, хотя таблица предназначена для американской аудитории

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

Айтюнс не смог прочитать данные Айфона и предлагает сбросить его к заводским установкам. Какой принцип нарушен?

Сначала данные, потом фильтры
Привычность интерфейса: окно выглядит нестандартным для операционной системы
Данные пользователя бесконечно ценны
Принцип квазирежимов

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

Человек приехал забрать пылесос из пункта самовывоза. У него спрашивают номер заказа. С точки зрения человечности это:

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

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

Сайт находит тренинги по множеству критериев. Как бы вы предложили устроить интерфейс поиска?

Сделать «мастер»: на первом шаге одно поле поиска по всему, на втором — уточнить, в чём именно искать (специализациях, городах, темах), на третьем — показать результат
Сделать одно поле поиска по всему, в результатах вывести всё, что нашлось
Сделать три поля поиска: организатор, тема и аудитория, чтобы пользователь мог точно ввести, что ему нужно

Форма из нескольких шагов или нескольких полей — плохое решение, только отдаляющее от результатов поиска. Принцип «сначала данные, потом фильтры» предписывает как можно раньше показать хоть что‑то, а уже потом дать человеку инструменты для уточнения выдачи.

Интернет‑магазин предлагает выбор сортировки. Укажите проблемы этого интерфейса.

Модальность: здесь недостаточно способов сортировки, чтобы найти шампунь
Технозависимость: человеку предлагается сконструировать запрос к базе данных
Непривычность: элемент выбора сортировки одновременно похож и на набор ссылок, и на набор выпадающих списков

Слова «по названию», «цене», «новизне» оформлены как ссылки, но не являются ими, что противоречит привычкам. Интерфейс технозависим: вместо учёта реальных сценариев поиска дана сортировка по атрибутам базы данных. Скажем, зачем нужна сортировка по названию задом‑наперёд? Способов сортировки, конечно, можно придумать и ещё больше, но модальность тут ни при чём.

Предложите улучшения интерфейса из предыдущего вопроса.

Заменить названия вариантов сортировки на более человечные: «сначала дешёвые», «по алфавиту»
Добавить сортировку по цвету упаковки
Использовать более привычный элемент для выбора сортировки
Нарисовать синюю рамку вокруг заголовка, чтобы он не «висел» в воздухе

Дать более человечные названия способам сортировки и использовать более привычный элемент — хорошие идеи. Иногда удобно искать упаковку по цвету, но сортировка вряд ли поможет с этим: синий будет до или после красного? Синяя рамка заголовку не нужна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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