Илья Бирман

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

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

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

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