Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
Вза­имодействие

2
Вза­имодействие

Близость

См. также:
Артём Горбунов. Эффекты гештальта

Звёзды на небе рас­по­ло­жены хао­тично. Но мозг чело­века стре­мится выде­лить в наблю­да­е­мой кар­тине цель­ный образ — «гештальт». Так в нашей голове воз­ни­кают созвездия.

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

Близость

Звёзды на небе расположены хаотично. Но мозг человека стремится выделить в наблюдаемой картине цельный образ — «гештальт». Так в нашей голове возникают созвездия.

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

См. также:
Артём Горбунов. Эффекты гештальта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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