Илья Бир­ман

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

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

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

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

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

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бирман

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

Издательство Бюро Горбунова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Изда­тель­ство
Бюро Гор­бу­нова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Пользовательский интерфейс. —
М.: Изд‑во Бюро Горбунова, 2017
ISBN 978‑5‑9907024‑1‑7

Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Издательство
Бюро Горбунова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

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

Обрат­ная связь не должна вво­дить поль­зо­ва­теля в заблуж­де­ние. Ино­гда интер­фейс преж­де­вре­менно опти­ми­стично рапор­тует о выпол­не­нии команды.

Из‑за такой ошибки в интер­фейсе Изда­тель­ства Бюро Гор­бу­нова слу­чи­лась непри­ят­ная исто­рия. Один из чита­те­лей попро­сил пре­кра­тить его под­писку. Сотруд­ник изда­тель­ства нажал на кнопку «Отпи­сать», и про­грамма мгно­венно под­твер­дила. Но ока­за­лось, что в этот момент у него слу­чился пере­бой интер­нета и команда не дошла до сер­вера. При­ш­лось изви­няться перед чита­те­лем, когда в сле­ду­ю­щем месяце у него вновь спи­са­лись деньги.

В поч­то­вой про­грамме Айфона звук отправ­лен­ного письма сна­чала изда­вался, когда письмо в дей­стви­тель­но­сти ухо­дило. В одной из вер­сий это пове­де­ние изме­ни­лось: звук стал изда­ваться при нажа­тии кнопки «Отправить».

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

Обратная связь не должна вводить пользователя в заблуждение. Иногда интерфейс преждевременно оптимистично рапортует о выполнении команды.

Из‑за такой ошибки в интерфейсе Издательства Бюро Горбунова случилась неприятная история. Один из читателей попросил прекратить его подписку. Сотрудник издательства нажал на кнопку «Отписать», и программа мгновенно подтвердила. Но оказалось, что в этот момент у него случился перебой интернета и команда не дошла до сервера. Пришлось извиняться перед читателем, когда в следующем месяце у него вновь списались деньги.

В почтовой программе Айфона звук отправленного письма сначала издавался, когда письмо в действительности уходило. В одной из версий это поведение изменилось: звук стал издаваться при нажатии кнопки «Отправить».

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

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

Поэтому Эпл реко­мен­дует мгно­венно отве­чать «При­нято!», как бы раз­ре­шая чело­веку опу­стить руку и вер­нуться к своим делам. Если в итоге команду выпол­нить не удастся, часы сооб­щат об этом отдельно.

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

Мгновенно, но без обмана

Из презентации «Эпла»

Из презентации «Эпла»

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

Поэтому Эпл рекомендует мгновенно отвечать «Принято!», как бы разрешая человеку опустить руку и вернуться к своим делам. Если в итоге команду выполнить не удастся, часы сообщат об этом отдельно.

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

Мгновенно, но без обмана

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Непрерывность

Хоро­ший интер­фейс даёт мгно­вен­ную и непре­рыв­ную обрат­ную связь.

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

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

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Непрерывность

Хороший интерфейс даёт мгновенную и непрерывную обратную связь.

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

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

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

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

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

Если по мере дви­же­ния невоз­можно отоб­ра­жать точ­ный резуль­тат, пока­зы­вайте приближённый.

Перетаскивание окна в Виндоусе 3.1, 1990

Перетаскивание окна в Виндоусе 3.1, 1990

Требование непрерывности — более сильное, чем требование мгновенности. Непрерывная мгновенная обратная связь даётся не в момент окончательной установки значения параметра, а непосредственно и постоянно в процессе его изменения.

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

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

Если по мере движения невозможно отображать точный результат, показывайте приближённый.

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

Фото­шоп пока­зы­вает, как сра­бо­тает эффект, ещё до того, как отпу­стишь кнопку мыши, и тем более до того, как нажмёшь OK.

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

Прокрутка 182

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

Фотошоп показывает, как сработает эффект, ещё до того, как отпустишь кнопку мыши, и тем более до того, как нажмёшь OK.

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

Прокрутка 182

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось