Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

Исполь­зо­ва­ние про­крутки для изме­не­ния мас­штаба решило про­блему модаль­но­сти внутри карты, но создало модаль­ность на уровне интер­фейса в целом: колесо про­крутки стало ино­гда про­кру­чи­вать, а ино­гда — менять масштаб.

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

Насто­я­щим реше­нием стало изоб­ре­те­ние «двух­паль­це­вого» зума, кото­рый Стив Джобс пока­зал на пре­зен­та­ции Айфона.

Использование прокрутки для изменения масштаба решило проблему модальности внутри карты, но создало модальность на уровне интерфейса в целом: колесо прокрутки стало иногда прокручивать, а иногда — менять масштаб.

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

Настоящим решением стало изобретение «двухпальцевого» зума, который Стив Джобс показал на презентации Айфона.

Использовать «квазирежимы»

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

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

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

Педаль «Роллс ММ‑11». Удерживайте для отключения звука

Использовать «квазирежимы»

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

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

В симплексной рации держат кнопку, пока говорят. Для переключения передач выжимают сцепление. Во время перетаскивания файла удерживают нажатой кнопку мыши.

Педаль «Роллс ММ‑11». Удерживайте для отключения звука

Кнопка Капслок пере­клю­чает между режи­мами ввода строч­ных и про­пис­ных букв. Это при­во­дит к модаль­ным ошиб­кам: если забыть отклю­чить, по ошибке пишешь боль­шими буквами.

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

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

Клас­си­че­ский юник­со­вый тек­сто­вый редак­тор «Ви‑ай» (vi) рабо­тает в одном из двух режи­мов. В режиме ввода нажи­ма­е­мые буквы встав­ля­ются в текст, а в режиме ввода команд каж­дой букве соот­вет­ствует дей­ствие: пере­ме­ще­ние кур­сора, скрол­линг, поиск, замена.

В совре­мен­ном редак­торе буквы все­гда встав­ля­ются в текст, а команды выпол­ня­ются с удер­жа­нием кла­виш‑моди­фи­ка­то­ров: Контроль, Комманд, Альт.

Первым немодальным текстовым редактором был созданный Ларри Теслером «Джипси»

Кнопка Капслок переключает между режимами ввода строчных и прописных букв. Это приводит к модальным ошибкам: если забыть отключить, по ошибке пишешь большими буквами.

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

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

Классический юниксовый текстовый редактор «Ви‑ай» (vi) работает в одном из двух режимов. В режиме ввода нажимаемые буквы вставляются в текст, а в режиме ввода команд каждой букве соответствует действие: перемещение курсора, скроллинг, поиск, замена.

В современном редакторе буквы всегда вставляются в текст, а команды выполняются с удержанием клавиш‑модификаторов: Контроль, Комманд, Альт.

Первым немодальным текстовым редактором был созданный Ларри Теслером «Джипси»

При работе в Фото­шопе дизай­нер часто меняет мас­штаб и поло­же­ние хол­ста на экране. Без ква­зи­ре­жи­мов это долго: пере­клю­читься в инстру­мент «лупа» Z, изме­нить мас­штаб, пере­клю­читься в инстру­мент «рука» H, подви­нуть холст в нуж­ное место; вспом­нить, какой инстру­мент был выбран до этого; пере­клю­читься в него.

Если знать, что ква­зи­ре­жим лупы — это Пробел + ⌘, а ква­зи­ре­жим руки — Пробел, всё выхо­дит быст­рее, а вспо­ми­нать вообще ничего не надо: при отпус­ка­нии этих кла­виш исход­ный инстру­мент воз­вра­ща­ется автоматически.

При работе в Фотошопе дизайнер часто меняет масштаб и положение холста на экране. Без квазирежимов это долго: переключиться в инструмент «лупа» Z, изменить масштаб, переключиться в инструмент «рука» H, подвинуть холст в нужное место; вспомнить, какой инструмент был выбран до этого; переключиться в него.

Если знать, что квазирежим лупы — это Пробел + ⌘, а квазирежим руки — Пробел, всё выходит быстрее, а вспоминать вообще ничего не надо: при отпускании этих клавиш исходный инструмент возвращается автоматически.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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