Илья Бирман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Одна из первых игр на Айфоне: нужно было докатить шарик до самой дальней дырки, не уронив в другие по пути

Непосредственное взаимодействие

Про­крутка на Айфоне даёт мгно­вен­ную и непре­рыв­ную обрат­ную связь. Но ещё она вос­про­из­во­дит физику из реаль­ной жизни: стра­ницы обла­дают инер­цией и даже «отпру­жи­ни­вают» у краёв. Созда­ётся иллю­зия непо­сред­ствен­ного вза­и­мо­дей­ствия с эле­мен­тами на экране. Поль­зо­ва­тель пере­стаёт вос­при­ни­мать экран как устрой­ство ввода, посред­ством кото­рого он даёт стра­нице команду про­кру­титься — он про­сто про­ма­ты­вает её пальцем.

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

Одна из первых игр на Айфоне: нужно было докатить шарик до самой дальней дырки, не уронив в другие по пути

Непосредственное взаимодействие

Про­крутка на Айфоне даёт мгно­вен­ную и непре­рыв­ную обрат­ную связь. Но ещё она вос­про­из­во­дит физику из реаль­ной жизни: стра­ницы обла­дают инер­цией и даже «отпру­жи­ни­вают» у краёв. Созда­ётся иллю­зия непо­сред­ствен­ного вза­и­мо­дей­ствия с эле­мен­тами на экране. Поль­зо­ва­тель пере­стаёт вос­при­ни­мать экран как устрой­ство ввода, посред­ством кото­рого он даёт стра­нице команду про­кру­титься — он про­сто про­ма­ты­вает её пальцем.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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