Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

Привычка

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

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

Без привычки

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

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

По привычке

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

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

Привычка

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

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

Без привычки

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

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

По привычке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

⌘Z

Подтверждение удаления домена
в «Мастерхосте»

Подтверждение удаления домена
в «Мастерхосте»

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

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

⌘Z

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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