Илья Бирман

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

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

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

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

Оглавление

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

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

Пере­клю­чая фото­гра­фии, мы ощу­щаем пере­ме­ще­ние в сто­роны; пред­став­ляем, что неко­то­рая фото­гра­фия «далеко» справа. Хоро­шая ани­ма­ция уси­ли­вает иллюзию.

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

Пере­клю­чая фото­гра­фии, мы ощу­щаем пере­ме­ще­ние в сто­роны; пред­став­ляем, что неко­то­рая фото­гра­фия «далеко» справа. Хоро­шая ани­ма­ция уси­ли­вает иллюзию.

В вол­шеб­ном мире интер­фейса мы судим о пове­де­нии эле­мен­тов по их внеш­нему виду. Поэтому выбор оформ­ле­ния тоже дол­жен быть последовательным.

Чтобы отпра­вить файл с Айфона на Мак, исполь­зу­ется функ­ция «Эйр­дроп». Она выгля­дит как папка в «Файн­дере». Но после отправки файл появится не в этой папке, а в папке Downloads. «Эйр­дроп» выгля­дит как папка, но ведёт себя по‑другому.

В вол­шеб­ном мире интер­фейса мы судим о пове­де­нии эле­мен­тов по их внеш­нему виду. Поэтому выбор оформ­ле­ния тоже дол­жен быть последовательным.

Чтобы отпра­вить файл с Айфона на Мак, исполь­зу­ется функ­ция «Эйр­дроп». Она выгля­дит как папка в «Файн­дере». Но после отправки файл появится не в этой папке, а в папке Downloads. «Эйр­дроп» выгля­дит как папка, но ведёт себя по‑другому.

Сайт «Авито» допи­сы­вает в поле поиска слова, кото­рые начал наби­рать поль­зо­ва­тель. Блед­ный текст в поле «не по‑насто­я­щему» и непо­нятно, как при­нять пред­ло­жен­ный вари­ант. В одной из вер­сий сайта при нажа­тии ничего не находилось.

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

Поскольку пред­ло­жен­ное окон­ча­ние уже есть в поле, при нажа­тии исполь­зу­ется пол­ное слово. А если нажать , вари­ант оста­нется в поле, но кур­сор пере­ме­стится в конец допол­нен­ной части, и можно будет допи­сать что‑то ещё.

Такую реак­цию допи­сан­ного тек­ста не нужно было спе­ци­ально про­грам­ми­ро­вать — тек­сто­вое выде­ле­ние само собой рабо­тает так. Чело­веку не при­хо­дится спе­ци­ально учиться поль­зо­ваться этой функцией.

К сожа­ле­нию, бывают не очень каче­ствен­ные реа­ли­за­ции. В бра­у­зере Сафари если сте­реть пред­ло­жен­ный текст, он тут же вста­вится обратно. Это непо­сле­до­ва­тельно — обычно выде­ле­ние так не работает.

Плохо

Плохо

Хорошо

Хорошо

Хорошо

Хорошо

Плохо

Плохо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Сайт «Авито» допи­сы­вает в поле поиска слова, кото­рые начал наби­рать поль­зо­ва­тель. Блед­ный текст в поле «не по‑насто­я­щему» и непо­нятно, как при­нять пред­ло­жен­ный вари­ант. В одной из вер­сий сайта при нажа­тии ничего не находилось.

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

Поскольку пред­ло­жен­ное окон­ча­ние уже есть в поле, при нажа­тии исполь­зу­ется пол­ное слово. А если нажать , вари­ант оста­нется в поле, но кур­сор пере­ме­стится в конец допол­нен­ной части, и можно будет допи­сать что‑то ещё.

Такую реак­цию допи­сан­ного тек­ста не нужно было спе­ци­ально про­грам­ми­ро­вать — тек­сто­вое выде­ле­ние само собой рабо­тает так. Чело­веку не при­хо­дится спе­ци­ально учиться поль­зо­ваться этой функцией.

К сожа­ле­нию, бывают не очень каче­ствен­ные реа­ли­за­ции. В бра­у­зере Сафари если сте­реть пред­ло­жен­ный текст, он тут же вста­вится обратно. Это непо­сле­до­ва­тельно — обычно выде­ле­ние так не работает.

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

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

Видео «Альфа‑банка» (фрагмент)

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

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

Видео «Альфа‑банка» (фрагмент)

Взгляд новичка

Экран­ный интер­фейс дина­ми­чен, он изме­ня­ется во вре­мени. Дизай­нер про­ду­мы­вает пере­ходы с экрана на экран, из состо­я­ния в состо­я­ние. Это похоже на работу сце­на­ри­ста кино. Но в отли­чие от сце­на­ри­ста, дизай­нер не может счи­тать, что чело­век прой­дёт все при­ду­ман­ные состо­я­ния в заду­ман­ном порядке, ни на что не отвлекаясь.

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

Взгляд новичка

Экран­ный интер­фейс дина­ми­чен, он изме­ня­ется во вре­мени. Дизай­нер про­ду­мы­вает пере­ходы с экрана на экран, из состо­я­ния в состо­я­ние. Это похоже на работу сце­на­ри­ста кино. Но в отли­чие от сце­на­ри­ста, дизай­нер не может счи­тать, что чело­век прой­дёт все при­ду­ман­ные состо­я­ния в заду­ман­ном порядке, ни на что не отвлекаясь.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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