Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Про­дви­ну­тый дизай­нер зажи­мает левой рукой целые аккорды. При этом ино­гда трудно объ­яс­нить дру­гому, что именно ты сделал.

⎇⌘⇧S в Фотошопе — сохранить для веба

Продвинутый дизайнер зажимает левой рукой целые аккорды. При этом иногда трудно объяснить другому, что именно ты сделал.

⎇⌘⇧S в Фотошопе — сохранить для веба

Тулбар почты на Маке

Изменить сценарий

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

В отли­чие от Фото­шопа, в почте нет инстру­мен­тов «уда­лить» и «отве­тить», кото­рыми нужно тыкать в письма. Нао­бо­рот, поль­зо­ва­тель выби­рает письмо, а потом уже нажи­мает «удалить».

Волшебная палочка НТ‑МДТ

В про­грамме обра­ботки изоб­ра­же­ний НТ‑МДТ толе­рант­ность вол­шеб­ной палочки изме­ня­ется после клика.

Хороший сценарий побеждает модальность

Тулбар почты на Маке

Изменить сценарий

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

В отличие от Фотошопа, в почте нет инструментов «удалить» и «ответить», которыми нужно тыкать в письма. Наоборот, пользователь выбирает письмо, а потом уже нажимает «удалить».

Волшебная палочка НТ‑МДТ

В программе обработки изображений НТ‑МДТ толерантность волшебной палочки изменяется после клика.

Хороший сценарий побеждает модальность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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