Илья Бир­ман

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

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

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

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

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

Илья Бир­ман

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

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бирман

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

Издательство Бюро Горбунова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

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

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Изда­тель­ство
Бюро Гор­бу­нова, 2017

Оглавление

    Принципы 4

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

    Язык 213

    Экраны 311

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Пользовательский интерфейс. —
М.: Изд‑во Бюро Горбунова, 2017
ISBN 978‑5‑9907024‑1‑7

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

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Издательство
Бюро Горбунова, 2017

Оглавление

    Принципы 4

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

    Язык 213

    Экраны 311

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

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

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

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

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

Джеф Раскин. Новые направления в проектировании компьютерных систем, Символ плюс, 2005

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

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

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

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

Джеф Раскин. Новые направления в проектировании компьютерных систем, Символ плюс, 2005

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

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

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

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

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

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

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

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

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

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

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

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

⌘Z

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

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

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

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

⌘Z

В отли­чие от Вин­до­уса, на Маке файлы уда­ля­ются без под­твер­жде­ния. Если нажать ⌘Z, файл сразу же воз­вра­ща­ется на место.

На слу­чай, если после уда­ле­ния поль­зо­ва­тель сде­лал ещё несколько дей­ствий и анду уже не сра­бо­тает, есть «Корзина».

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

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

В отличие от Виндоуса, на Маке файлы удаляются без подтверждения. Если нажать ⌘Z, файл сразу же возвращается на место.

На случай, если после удаления пользователь сделал ещё несколько действий и анду уже не сработает, есть «Корзина».

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

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

Фотошоп уполномочен заявить

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

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

К радо­сти поль­зо­ва­те­лей в вер­сии ЦС3 появился чек­бокс «Больше не показывать».

Но это нон­сенс. Раньше чело­век при­вы­кал сразу закры­вать окно и упус­кал содер­жа­щу­юся в нём инфор­ма­цию. А теперь Фото­шоп даже не попы­та­ется нам её сообщить.

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

Фотошоп уполномочен заявить

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

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

К радости пользователей в версии ЦС3 появился чекбокс «Больше не показывать».

Но это нонсенс. Раньше человек привыкал сразу закрывать окно и упускал содержащуюся в нём информацию. А теперь Фотошоп даже не попытается нам её сообщить.

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось