Илья Бир­ман

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

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

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

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

Оглавление

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

А вот когда выхо­дишь из при­ло­же­ния и нажи­ма­ешь в при­выч­ный «смс‑угол», слу­чайно откры­ва­ешь какой‑ни­будь «Шазам», потому что вдруг ока­зался не на той стра­нице домаш­него экрана.

В слу­чае с теле­фо­ном и бра­у­зе­ром модаль­но­сти нет, а в слу­чае с домаш­ним экра­ном — есть.

А вот когда выходишь из приложения и нажимаешь в привычный «смс‑угол», случайно открываешь какой‑нибудь «Шазам», потому что вдруг оказался не на той странице домашнего экрана.

В случае с телефоном и браузером модальности нет, а в случае с домашним экраном — есть.

Раз­дра­жа­ю­щий вид модаль­но­сти — модаль­ные окна.

Модальный диалог в Сафари

Немодальный диалог в Хроме

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

В Хроме окно выгля­дит похоже, но модаль­ным не явля­ется: любые жесты на сай­тах рабо­тают как обычно.

Модальный диалог в Сафари

Немодальный диалог в Хроме

Раздражающий вид модальности — модальные окна.

Модальный диалог в Сафари

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

Немодальный диалог в Хроме

В Хроме окно выглядит похоже, но модальным не является: любые жесты на сайтах работают как обычно.

Модальное уведомление

Немодальное уведомление

На Айфоне есть два вида уве­дом­ле­ний: модаль­ные и немо­даль­ные. Пока модаль­ное на экране, оно отме­няет работу всех при­выч­ных жестов, вызы­вая раз­дра­же­ние и ошибки. Хочется закрыть не читая, чтобы вер­нуть «рабо­чий» режим.

Немо­даль­ные лишены такой проблемы.

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

Модальное уведомление

На Айфоне есть два вида уведомлений: модальные и немодальные. Пока модальное на экране, оно отменяет работу всех привычных жестов, вызывая раздражение и ошибки. Хочется закрыть не читая, чтобы вернуть «рабочий» режим.

Немодальное уведомление

Немодальные лишены такой проблемы.

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

Это диджей­ский плеер ком­пакт‑дис­ков Пио­нер Сиди­джей‑1000. Пове­де­ние эле­мен­тов управ­ле­ния сильно зави­сит от состо­я­ния интер­фейса, однако модаль­ные ошибки неча­сты: состо­я­ние интер­фейса свя­зано с тем, что делает диджей, и оче­видно ему.

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

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

Если трек оста­нов­лен (в начале или в сохра­нён­ной точке), то нажа­тие и удер­жи­ва­ние CUE его вос­про­из­во­дит. Когда кнопку отпус­ка­ешь, игла тут же воз­вра­ща­ется в сохра­нён­ную точку и трек замол­кает. Если нужно про­дол­жить вос­про­из­ве­де­ние, то перед отпус­ка­нием кнопки CUE нужно нажать PLAY/PAUSE.

Если сохра­нена точка прямо перед уда­ром бочки (как обычно и бывает), то кнопка CUE ста­но­вится бара­ба­ном: сколько раз жмёшь, столько она про­иг­ры­вает сам этот удар, при­чём тем боль­ший его фраг­мент, чем дольше держишь.

Это диджейский плеер компакт‑дисков Пионер Сидиджей‑1000. Поведение элементов управления сильно зависит от состояния интерфейса, однако модальные ошибки нечасты: состояние интерфейса связано с тем, что делает диджей, и очевидно ему.

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

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

Если трек остановлен (в начале или в сохранённой точке), то нажатие и удерживание CUE его воспроизводит. Когда кнопку отпускаешь, игла тут же возвращается в сохранённую точку и трек замолкает. Если нужно продолжить воспроизведение, то перед отпусканием кнопки CUE нужно нажать PLAY/PAUSE.

Если сохранена точка прямо перед ударом бочки (как обычно и бывает), то кнопка CUE становится барабаном: сколько раз жмёшь, столько она проигрывает сам этот удар, причём тем больший его фрагмент, чем дольше держишь.

Модаль­ность — при­знак пло­хого интер­фейса, а не, ска­жем, рас­се­ян­но­сти поль­зо­ва­теля. Совер­шенно есте­ственно, что вни­ма­ние чело­века направ­лено на его задачу, а не на состо­я­ние интерфейса.

Самое непри­ят­ное — когда состо­я­ние меня­ется помимо воли пользователя.

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

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

Модальность —
признак плохого интерфейса

Модальность — признак плохого интерфейса, а не, скажем, рассеянности пользователя. Совершенно естественно, что внимание человека направлено на его задачу, а не на состояние интерфейса.

Самое неприятное — когда состояние меняется помимо воли пользователя.

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

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

Модальность —
признак плохого интерфейса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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