Илья Бир­ман

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

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

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

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

Оглавление

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

Онлайн‑каль­ку­ля­торы кре­дит­ных пла­те­жей или тари­фов связи ино­гда делают в виде формы с чис­ло­выми полями и кноп­кой «Рас­счи­тать». Чело­век дол­жен отве­тить на несколько вопро­сов, пре­жде чем уви­деть результат.

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

Онлайн‑калькуляторы кредитных платежей или тарифов связи иногда делают в виде формы с числовыми полями и кнопкой «Рассчитать». Человек должен ответить на несколько вопросов, прежде чем увидеть результат.

Слово «калькулятор» направляет дизайнеров на ложный путь. На самом деле человеку нужно не рассчитать конкретное значение, а разобраться в многомерном мире вариантов, понять взаимосвязь величин, оценить влияние каждой на результат. Интерфейс с полями такой возможности не даёт.

Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)

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

Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)

Этот польский банк догадался использовать ползунки и пересчитывать результаты «на лету». Диапазоны допустимых значений одних величин меняются при изменении других — так человек может увидеть, что по условиям банка чем старше автомобиль, тем на меньшее число платежей можно разбить погашение кредита. Без мгновенной обратной связи увидеть это было бы сложно.

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

Ползунок превращается в поле при клике

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

Ползунок превращается в поле при клике

Интер­ак­тив­ная ста­тья в «Нью‑Йорк‑Таймсе» объ­яс­няет, когда выгод­нее поку­пать, а когда — арен­до­вать жильё.

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

Но это из рас­чёта, что жить в этом доме ты будешь 9 лет, ипо­теч­ная ставка 3,67 %, а цена дома, налоги и ком­му­наль­ные пла­тежи будут меняться так‑то.

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

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

Инфля­ция вли­яет на резуль­тат сла­бее, чем налог на имущество.

Если бы ста­тью сде­лали в виде тра­ди­ци­он­ной формы ввода, никто не дошёл бы до её конца. И при­чина не только в неже­ла­нии запол­нять такую про­стыню. Про­сто непо­нятно, как запол­нить «рост цены аренды» или ту же инфля­цию. Откуда ж я знаю, какая она будет!

Бла­го­даря пол­зун­кам ста­тья поз­во­ляет полу­чить объ­ём­ное пред­став­ле­ние о том, какие аспекты как вли­яют на резуль­тат, и при­нять осмыс­лен­ное решение.

На сайте «Нью‑Йорк‑Таймса»:
Лучше арендовать или купить?

Интерактивная статья в «Нью‑Йорк‑Таймсе» объясняет, когда выгоднее покупать, а когда — арендовать жильё.

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

Но это из расчёта, что жить в этом доме ты будешь 9 лет, ипотечная ставка 3,67 %, а цена дома, налоги и коммунальные платежи будут меняться так‑то.

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

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

Инфляция влияет на результат слабее, чем налог на имущество.

Если бы статью сделали в виде традиционной формы ввода, никто не дошёл бы до её конца. И причина не только в нежелании заполнять такую простыню. Просто непонятно, как заполнить «рост цены аренды» или ту же инфляцию. Откуда ж я знаю, какая она будет!

Благодаря ползункам статья позволяет получить объёмное представление о том, какие аспекты как влияют на результат, и принять осмысленное решение.

На сайте «Нью‑Йорк‑Таймса»:
Лучше арендовать или купить?

Памяти пер­вых моде­лей Айфона не хва­тало на хра­не­ние откры­той в бра­у­зере стра­ницы, и при про­крутке тре­бо­ва­лось время для про­ри­совки. Как пока­зы­вать стра­ницу приближённо?

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

Изоб­ра­же­ние появ­ля­лось через долю секунды.

Если бы дви­же­ния стра­ницы отста­вали от пальца на эту долю секуды, теле­фон казался бы тормозным.

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

Памяти первых моделей Айфона не хватало на хранение открытой в браузере страницы, и при прокрутке требовалось время для прорисовки. Как показывать страницу приближённо?

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

Изображение появлялось через долю секунды.

Если бы движения страницы отставали от пальца на эту долю секуды, телефон казался бы тормозным.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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