Илья Бир­ман

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

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

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

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

Оглавление

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

Машина вре­мени из «Назад в буду­щее» раз­го­ня­ется до 88 миль в час, и Марти Мак­флай пере­ме­ща­ется на 30 лет в прошлое.

Прин­цип дей­ствия машины вре­мени фан­та­сти­чен, но поня­тен. Если бы нам самим дали эту машину вре­мени, мы бы знали, что делать: вво­дишь на панели дату, раз­го­ня­ешься до 88 — и ты пере­ме­стился во времени.

Интерфейс машины времени
«Назад в будущее». Юнивёрсал, 1985

Интерфейс машины времени
«Назад в будущее». Юнивёрсал, 1985

Машина времени из «Назад в будущее» разгоняется до 88 миль в час, и Марти Макфлай перемещается на 30 лет в прошлое.

Принцип действия машины времени фантастичен, но понятен. Если бы нам самим дали эту машину времени, мы бы знали, что делать: вводишь на панели дату, разгоняешься до 88 — и ты переместился во времени.

Реаль­ность вос­при­ни­ма­ется после­до­ва­тель­ной, потому что в её основе лежат законы физики. Чело­век откры­вает их через свой опыт вза­и­мо­дей­ствия с миром.

Одна из пер­вых вещей, с кото­рой при­хо­дится учиться иметь дело — гра­ви­та­ция. Чело­век узнаёт, что всё падает, учится бороться с этим, когда это неже­ла­тельно. Откры­вает поня­тия «верх» и «низ». Тро­гает окру­жа­ю­щие пред­меты: дерево, камень, воду. Обна­ру­жи­вает, что камень и дерево — твёр­дые, а вода — мок­рая. Камень тонет в воде, а дерево нет. Сам чело­век тонет в воде, но если дви­гаться опре­де­лён­ным обра­зом, то плы­вёт. Дерево хоть и твёр­дое, но мягче камня: с помо­щью камня можно сде­лать что‑то из дерева. Если сма­сте­рить плот, то можно оста­ваться на плаву и, напри­мер, ловить рыбу. Мокрое дерево не горит, а сухое — горит. Камень не горит никогда.

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

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

Только в интер­фейсе изна­чально ника­ких зако­нов нет: можно при­ду­мать что угодно.

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

Реальность воспринимается последовательной, потому что в её основе лежат законы физики. Человек открывает их через свой опыт взаимодействия с миром.

Одна из первых вещей, с которой приходится учиться иметь дело — гравитация. Человек узнаёт, что всё падает, учится бороться с этим, когда это нежелательно. Открывает понятия «верх» и «низ». Трогает окружающие предметы: дерево, камень, воду. Обнаруживает, что камень и дерево — твёрдые, а вода — мокрая. Камень тонет в воде, а дерево нет. Сам человек тонет в воде, но если двигаться определённым образом, то плывёт. Дерево хоть и твёрдое, но мягче камня: с помощью камня можно сделать что‑то из дерева. Если смастерить плот, то можно оставаться на плаву и, например, ловить рыбу. Мокрое дерево не горит, а сухое — горит. Камень не горит никогда.

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

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

Только в интерфейсе изначально никаких законов нет: можно придумать что угодно.

Дизайнер интерфейса — бог воображаемого мира, который он создаёт. И поскольку реальная физика часто оказывается неподходящей для его задачи, он придумывает свою. Когда много сценариев, элементов, состояний — появляются нестыковки. Приходится искусственно «достраивать» физику, чтобы интерфейс воспринимался последовательным.

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

Есть домаш­ний экран с икон­ками при­ло­же­ний. Нажа­тие на иконку запус­кает при­ло­же­ние, при­чём при­ло­же­ние «вырас­тает» прямо из иконки; фак­ти­че­ски, она и есть при­ло­же­ние. Нажа­тие круг­лой кнопки воз­вра­щает на домаш­ний экран.

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

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

Домашний экран первого Айфона

Домашний экран первого Айфона

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

Есть домашний экран с иконками приложений. Нажатие на иконку запускает приложение, причём приложение «вырастает» прямо из иконки; фактически, она и есть приложение. Нажатие круглой кнопки возвращает на домашний экран.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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