Илья Бир­ман

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

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

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

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

Оглавление

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

Тулбар почты на Маке

Изменить сценарий

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

В отли­чие от Фото­шопа, в почте нет инстру­мен­тов «уда­лить» и «отве­тить», кото­рыми нужно тыкать в письма. Нао­бо­рот, поль­зо­ва­тель выби­рает письмо, а потом уже нажи­мает «удалить».

Волшебная палочка НТ‑МДТ

В про­грамме обра­ботки изоб­ра­же­ний НТ‑МДТ толе­рант­ность вол­шеб­ной палочки изме­ня­ется после клика.

Хороший сценарий побеждает модальность

Тулбар почты на Маке

Изменить сценарий

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

В отличие от Фотошопа, в почте нет инструментов «удалить» и «ответить», которыми нужно тыкать в письма. Наоборот, пользователь выбирает письмо, а потом уже нажимает «удалить».

Волшебная палочка НТ‑МДТ

В программе обработки изображений НТ‑МДТ толерантность волшебной палочки изменяется после клика.

Хороший сценарий побеждает модальность

Последовательное волшебство

Последовательное волшебство

Этот интер­фейс записи к врачу при­слала одна из сту­ден­ток Школы ста­жё­ров бюро.

Поле поиска ведёт себя непред­ска­зу­емо. Чело­век вво­дит запрос, нажи­мает на кнопку. Но вме­сто резуль­та­тов поиска под полем вдруг появ­ля­ются уточ­ня­ю­щие вопросы. Они воз­ни­кают «из ниот­куда» и исче­зают «в никуда». Потом на том же месте также неожи­данно появ­ля­ются рекомендации.

Другие странности:

  • 0:14  при появлении выпадайки календаря поле времени пропадает

  • 0:18  изменение значения поля в форме приводит к изменению его названия

  • 0:21  при нажатии ссылка исчезает

  • 0:38  после подтверждения номер телефона сбрасывается

Этот интерфейс записи к врачу прислала одна из студенток Школы стажёров бюро.

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

Другие странности:

  • 0:14  при появлении выпадайки календаря поле времени пропадает

  • 0:18  изменение значения поля в форме приводит к изменению его названия

  • 0:21  при нажатии ссылка исчезает

  • 0:38  после подтверждения номер телефона сбрасывается

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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