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

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

между важными местами

Shift

между
разворотами

Илья Бирман

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

Издательство Бюро Горбунова

2017

Илья Бирман

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

Издательство Бюро Горбунова

2017

удк 655.262

ббк 85.15

Б64

Бирман И. Б.

Б64

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

М.: Изд‑во Бюро Горбунова, 2017

ISBN 978‑5‑9907024‑1‑7

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

УДК 655.262

ББК 85.15

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

УДК 655.262

ББК 85.15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Челябинск,
2016

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

Челябинск,
2016

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

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

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

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

Тест

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

Ни с какой, такой подход устарел и не соответствует идее человечности

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

Интерфейс лишён модальности

Новичку сразу всё понятно

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

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

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

Оно слишком непривычно

Это модальное окно

Оно технозависимое

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

Не выдерживает взгляда новичка

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

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

Убрать пример

Понимать телефон в любом формате

Вывести сообщение об ошибке в окне

Здесь всё и так хорошо

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

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

«Крутилка» показывает, что программа думает

Форма принимает дату в любом формате

Браузер автоматически переводит страницу с иностранного языка

В окне показаны в деталях все операции, выполняемые процессором

Программа попала в бесконечный цикл

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

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

В таблице использовано недостаточно цветов

Таблица заставляет человека делать то, что могла бы сделать машина

Таблица повышает вероятность ошибки при заказе

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

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

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

Сначала данные, потом фильтры

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

Данные пользователя бесконечно ценны

Принцип квазирежимов

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

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

Хорошо: гарантирует, что заказ не достанется другому

Плохо: это заставляет держать в голове бессмысленное число

Хорошо: создаёт одинаковый для всех порядок получения заказов, что вырабатывает привычку и ускоряет процесс для всех

Плохо: соседи в очереди узнают номер заказа, а это частная информация

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

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

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

Сделать одно поле поиска по всему, в результатах вывести всё, что нашлось

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

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

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

Модальность: здесь недостаточно способов сортировки, чтобы найти шампунь

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

Непривычность: элемент выбора сортировки одновременно похож и на набор ссылок, и на набор выпадающих списков

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

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

Заменить названия вариантов сортировки на более человечные: «сначала дешёвые», «по алфавиту»

Добавить сортировку по цвету упаковки

Использовать более привычный элемент для выбора сортировки

Нарисовать синюю рамку вокруг заголовка, чтобы он не «висел» в воздухе

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

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

Результат

↺ Пересдать