Илья Бир­ман

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

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

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

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

Оглавление

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

При­ло­же­ния на Айфоне пока­зы­вают уве­дом­ле­ния: при­шло письмо, скоро встреча или кому‑то понра­ви­лась ваша фото­гра­фия. Часто мало­зна­чи­тель­ные уве­дом­ле­ния отвле­кают от дела, но порой важно полу­чить их вовремя. Айфон не знает, какие уве­дом­ле­ния важ­ные, а какие — нет, поэтому чело­веку предо­став­ля­ется спе­ци­аль­ное меню для их настройки.

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

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

В девя­той вер­сии Ай‑ОСа выби­ра­ется мак­си­маль­ное коли­че­ство уве­дом­ле­ний одного при­ло­же­ния в «Цен­тре уве­дом­ле­ний». Но это число лишено смысла. Если поста­вить пять, важ­ным может ока­заться шестое.

Всё это далеко от того, что вол­нует поль­зо­ва­теля. Было бы полезно полу­чать уве­дом­ле­ния от одних людей и не полу­чать от дру­гих — неза­ви­симо от при­ло­же­ния. Когда при­хо­дит раз­дра­жа­ю­щее уве­дом­ле­ние, была бы полезна кнопка «нико­гда такое не пока­зы­вать». Если при­шло во время встречи — «напом­нить после встречи». Когда ста­вишь будиль­ник — «и заодно отклю­чить уве­дом­ле­ния до утра».

Список приложений

Параметры выбранного приложения

Параметры выбранного приложения

Список приложений

Параметры выбранного приложения

Параметры выбранного приложения

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

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

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

В девятой версии Ай‑ОСа выбирается максимальное количество уведомлений одного приложения в «Центре уведомлений». Но это число лишено смысла. Если поставить пять, важным может оказаться шестое.

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

Икона тех­но­за­ви­си­мо­сти — куар­код. Тут видно каж­дый бит, что наве­вает вос­по­ми­на­ния о моде­мах с их харак­тер­ным зву­ком соединения.

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

Технологии — под капот

Икона технозависимости — куаркод. Тут видно каждый бит, что навевает воспоминания о модемах с их характерным звуком соединения.

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

Технологии — под капот

Привычка

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

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

Без привычки

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

Внимательно, медленно

По привычке

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

Быстро, невнимательно

Привычка

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

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

Без привычки

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

Внимательно, медленно

По привычке

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

Быстро, невнимательно

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

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

Неко­то­рые вещи невоз­можно сде­лать без при­вычки. Чтобы сде­лать трой­ной тулуп, нужно долго тре­ни­ро­ваться, доводя дей­ствия до авто­ма­тизма. А если попы­таться обду­мы­вать дви­же­ния, неиз­бежно упадёшь.

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

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

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

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

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

Удаление приложения на Айфоне

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

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

Удаление файла в Виндоусе

Ком­пью­тер пыта­ется удо­сто­ве­риться, что поль­зо­ва­тель хочет уда­лить файл. А поль­зо­ва­тель при­вы­кает вме­сто Del нажи­мать Del, ↵.

Удаление приложения на Айфоне

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

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

Удаление файла в Виндоусе

Компьютер пытается удостовериться, что пользователь хочет удалить файл. А пользователь привыкает вместо Del нажимать Del, ↵.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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