Илья Бир­ман

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плохо

Плохо

Хорошо

Хорошо

Хорошо

Хорошо

Плохо

Плохо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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