Илья Бир­ман

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

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

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

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

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

Про­то­ти­пом «рабо­чего стола» пер­вого Мака был насто­я­щий рабо­чий стол: доку­менты, папки, будиль­ник, кален­дарь. Этим функ­циям соот­вет­ствуют иконки, кото­рые можно пере­ме­щать. При откры­тии любой иконки появ­ля­ется её «окно». Окна тоже можно пере­ме­щать, но нельзя ута­щить выше меню наверху экрана. Объ­екты реаль­ного мира так себя не ведут, но мета­фора помо­гает обучению.

Те же окна и иконки оста­ются на рабо­чем столе Мака в 2017‑м.

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

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

Прототипом «рабочего стола» первого Мака был настоящий рабочий стол: документы, папки, будильник, календарь. Этим функциям соответствуют иконки, которые можно перемещать. При открытии любой иконки появляется её «окно». Окна тоже можно перемещать, но нельзя утащить выше меню наверху экрана. Объекты реального мира так себя не ведут, но метафора помогает обучению.

Те же окна и иконки остаются на рабочем столе Мака в 2017‑м.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плохо

Плохо

Хорошо

Хорошо

Хорошо

Хорошо

Плохо

Плохо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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