Илья Бирман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Листание и прокрутка

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

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

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

До 2016

С 2016

Листание и прокрутка

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

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

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

До 2016

С 2016

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

Обрат­ная нуме­ра­ция стра­ниц не спол­зает, но слу­чай­ные боль­шие номера ещё менее понятны.

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

Обрат­ная нуме­ра­ция стра­ниц не спол­зает, но слу­чай­ные боль­шие номера ещё менее понятны.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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