Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

Дизай­неры рас­суж­дают так: раз чело­век не осо­знаёт состо­я­ние интер­фейса, сде­лаем его заметнее.

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

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

Дизайнеры рассуждают так: раз человек не осознаёт состояние интерфейса, сделаем его заметнее.

Покажем выбранный инструмент Фотошопа не только на панели инструментов сбоку, но курсором мыши. Он всегда будет виден ровно в том месте, куда смотрит пользователь.

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

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

Но эти при­меры — ком­про­мисс. Интер­фейс кри­чит поль­зо­ва­телю: «Смотри, в каком я состо­я­нии!» Фор­мально модаль­ность сни­жа­ется, но сни­жа­ется и эффек­тив­ность: мы пере­клю­чаем вни­ма­ние поль­зо­ва­теля с задачи на состо­я­ние интер­фейса, застав­ляя при­ни­мать реше­ние о необ­хо­ди­мо­сти пере­клю­че­ния, а это мешает выра­ба­ты­ваться привычке.

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

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

Но эти примеры — компромисс. Интерфейс кричит пользователю: «Смотри, в каком я состоянии!» Формально модальность снижается, но снижается и эффективность: мы переключаем внимание пользователя с задачи на состояние интерфейса, заставляя принимать решение о необходимости переключения, а это мешает вырабатываться привычке.

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

Разделить жесты

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

Для реше­ния про­блемы доста­точно раз­де­лить кнопки.

Разделить жесты

На Айфоне легко случайно включить запись видео, когда хочешь кого‑то сфотографировать, если был выбран режим видео.

Для решения проблемы достаточно разделить кнопки.

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

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

Яндекс.Карты, 2005

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

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

Яндекс.Карты, 2005

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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