Илья Бир­ман

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

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

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

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

Оглавление

1
Принципы

Что такое интерфейс

В начале своей книги Джеф Рас­кин пишет:

Интерфейс. Символ плюс, 2005

Мно­гие счи­та­ют, что тер­мин «поль­зо­ва­тель­ский интер­фейс» отно­сит­ся толь­ко к совре­мен­ным гра­фи­че­ским поль­зо­ва­тель­ским интер­фей­сам, осно­ван­ным на окнах и меню, управ­ля­е­мых с помо­щью мыши. В одной из ста­тей в жур­на­ле «Мобайл офис» было ска­за­но: «Уже неда­ле­ко то вре­мя, когда вам совсем не нуж­но будет заду­мы­вать­ся об интер­фей­се, вы буде­те про­сто раз­го­ва­ри­вать со сво­им ком­пью­те­ром». В ответ на это я мог бы заме­тить, что систе­мы, управ­ля­е­мые голо­сом, дей­стви­тель­но могут обхо­дить­ся без окон, но теле­фон­ные авто­от­вет­чи­ки их так­же не име­ют, и, тем не менее, их интер­фей­сы зача­стую ока­зы­ва­ют­ся чрез­вы­чай­но пло­хи­ми. Итак, спо­соб, кото­рым вы выпол­ня­е­те какую‑либо зада­чу с помо­щью како­го‑либо про­дук­та, а имен­но совер­ша­е­мые вами дей­ствия и то, что вы полу­ча­е­те в ответ, и явля­ет­ся интерфейсом.

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

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

Интерфейс — это правила игры...

1
Принципы

Что такое интерфейс

В начале своей книги Джеф Раскин пишет:

Многие счи­та­ют, что тер­мин «поль­зо­ва­тель­ский интер­фейс» отно­сит­ся толь­ко к совре­мен­ным гра­фи­че­ским поль­зо­ва­тель­ским интер­фей­сам, осно­ван­ным на окнах и меню, управ­ля­е­мых с помо­щью мыши. В одной из ста­тей в жур­на­ле «Мобайл офис» было ска­за­но: «Уже неда­ле­ко то вре­мя, когда вам совсем не нуж­но будет заду­мы­вать­ся об интер­фей­се, вы буде­те про­сто раз­го­ва­ри­вать со сво­им ком­пью­те­ром». В ответ на это я мог бы заме­тить, что систе­мы, управ­ля­е­мые голо­сом, дей­стви­тель­но могут обхо­дить­ся без окон, но теле­фон­ные авто­от­вет­чи­ки их так­же не име­ют, и, тем не менее, их интер­фей­сы зача­стую ока­зы­ва­ют­ся чрез­вы­чай­но пло­хи­ми. Итак, спо­соб, кото­рым вы выпол­ня­е­те какую‑либо зада­чу с помо­щью како­го‑либо про­дук­та, а имен­но совер­ша­е­мые вами дей­ствия и то, что вы полу­ча­е­те в ответ, и явля­ет­ся интерфейсом.

Интерфейс. Символ плюс, 2005

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

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

Интерфейс — это правила игры...

Но мало при­ду­мать пра­ви­ла, их нуж­но вопло­тить физи­че­ски. Это вопло­ще­ние — неотъ­ем­ле­мая часть интерфейса.

Вспом­ним азбу­ку Морзе. Совре­мен­ные еди­нич­ки и ноли­ки 101010 ничем не луч­ше точек и тире • — • — • —. Разни­ца в пра­ви­лах коди­ро­ва­ния сооб­ще­ний несу­ще­ствен­на в срав­не­нии с раз­ни­цей в про­пуск­ной способ­ности совре­мен­ных средств пере­да­чи инфор­ма­ции и телеграфа.

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

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

Матери­аль­ные сред­ства — физи­че­ский источ­ник потерь полез­но­го дей­ствия в интерфейсе.

Итак, интер­фейс — это набор пра­вил и мате­ри­аль­ные сред­ства, кото­рые обес­пе­чи­ва­ют вза­и­мо­дей­ствие по этим правилам.

...и их физическое воплощение

Но мало при­ду­мать пра­ви­ла, их нуж­но вопло­тить физи­че­ски. Это воплощение — неотъемлемая часть интерфейса.

Вспомним азбу­ку Морзе. Совре­мен­ные еди­нич­ки и ноли­ки 101010 ничем не луч­ше точек и тире • — • — • —. Разни­ца в пра­ви­лах коди­ро­ва­ния сооб­ще­ний несу­ще­ствен­на в срав­не­нии с раз­ни­цей в про­пуск­ной способ­ности совре­мен­ных средств пере­да­чи инфор­ма­ции и теле­гра­фа.

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

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

Матери­аль­ные сред­ства — физи­че­ский источ­ник потерь полез­но­го дей­ствия в интерфейсе.

Итак, интер­фейс — это набор пра­вил и мате­ри­аль­ные сред­ства, кото­рые обес­пе­чи­ва­ют вза­и­мо­дей­ствие по этим правилам.

...и их физическое воплощение

Человечность

Хоро­ший интер­фейс начи­на­ется с человечности.

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

Хоро­ший дизай­нер рас­по­ло­жит над­писи над, а не под кноп­ками, чтобы не заго­ра­жи­вать их пальцами.

Пульт телевизора
ББК

Пульт телевизора ББК

Человечность

Хороший интерфейс начинается с человечности.

Я забываю имена людей, дела и пропущенные звонки. Кто‑то путает лево и право. Люди постоянно ошибаются раскладкой клавиатуры. Человечность дизайна выражается в том, чтобы подстроить предмет дизайна под человека с его слабостями, а не заставлять человека подстраиваться под предмет.

Хороший дизайнер расположит надписи над, а не под кнопками, чтобы не загораживать их пальцами.

Поду­мает о том, где ока­жется адрес на сло­жен­ном бланке.

Не допу­стит появ­ле­ния сооб­ще­ния «Вы не запол­нили одно или несколько полей». Ком­пью­тер знает, какое или какие именно поля не запол­нены. Зачем застав­лять чело­века искать их взглядом?

Подумает о том, где окажется адрес на сложенном бланке.

Не допустит появления сообщения «Вы не заполнили одно или несколько полей». Компьютер знает, какое или какие именно поля не заполнены. Зачем заставлять человека искать их взглядом?

Центральный экран в «Опеле»

Пред­ло­жит найти бли­жай­шую заправку встро­ен­ным в машину навигатором.

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

Центральный экран в «Опеле»

Предложит найти ближайшую заправку встроенным в машину навигатором.

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

Типичная таблица размеров интернет‑магазина одежды

Выбор размера в интернет‑магазине джинсов «Гетвеар»

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

Каза­лось бы, поду­мали об удоб­стве, чтобы чело­век из любой страны мог заказать.

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

Для «Гет­ве­ара» мы сде­лали иначе — чело­век выби­рает раз­мер в при­выч­ной для него системе, не заду­мы­ва­ясь о переводе.

Пере­счёт в систему, по кото­рой будут делаться выкройки, про­ис­хо­дит за кулисами.

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

Принцип:
пусть потеет машина

Типичная таблица размеров интернет‑магазина одежды

Выбор размера в интернет‑магазине джинсов «Гетвеар»

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

Казалось бы, подумали об удобстве, чтобы человек из любой страны мог заказать.

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

Для «Гетвеара» мы сделали иначе — человек выбирает размер в привычной для него системе, не задумываясь о переводе.

Пересчёт в систему, по которой будут делаться выкройки, происходит за кулисами.

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

Принцип:
пусть потеет машина

Ино­гда машина думает, что поль­зо­ва­тель­ские дан­ные можно выбросить:

Онлайн‑кинотеатр «Амедиатека»

Эпл‑вотч

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

Спор­тив­ная про­грамма спра­ши­вает, сохра­нить ли резуль­таты тре­ни­ровки. Цена ошибки при ответе на этот вопрос — поте­рян­ные дан­ные. Нужно сохра­нять без вопро­сов и давать уда­лить при желании.

Ино­гда машина думает, что поль­зо­ва­тель­ские дан­ные можно выбросить:

Онлайн‑кинотеатр «Амедиатека»

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

Эпл‑вотч

Спор­тив­ная про­грамма спра­ши­вает, сохра­нить ли резуль­таты тре­ни­ровки. Цена ошибки при ответе на этот вопрос — поте­рян­ные дан­ные. Нужно сохра­нять без вопро­сов и давать уда­лить при желании.

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

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

На вопрос «Сохранить?» отвечайте «да» за пользователя

На вопрос «Сохранить?» отвечайте «да» за пользователя

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

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

Ещё хуже, когда машина без пре­ду­пре­жде­ния теряет дан­ные пользователя.

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

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

Принцип:
данные пользователя бесконечно ценны

Ещё хуже, когда машина без предупреждения теряет данные пользователя.

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

Достаточно пару раз так ошибиться, чтобы больше не доверять этой функции.

Принцип:
данные пользователя бесконечно ценны

Если стоит фла­жок «Сохра­нять пара­метр», то при вве­де­нии зна­че­ния в ячейку, настро­ен­ную на пара­метр, где стоит этот фла­жок, зна­че­ние этой ячейки во время сохра­не­ния зна­че­ний заме­нит собой зна­че­ние этого пара­метра на число, ука­зан­ное в настрой­ках этого пара­метра на эту ячейку. Если же фла­жок не стоит, то замена зна­че­ния во время сохра­не­ния зна­че­ний пара­мет­ров про­ис­хо­дить не будет

Автор неизвестен

Технозависимость

Эта цитата из доку­мен­та­ции была про­слав­лена на «Баше.орг». Всё, о чём тут напи­сано, заве­домо не имеет отно­ше­ния к задаче поль­зо­ва­теля. Текст выгля­дит как пере­вод Гугль‑транс­лей­том с про­грамм­ного кода на русский.

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

Технозависимость

Если стоит флажок «Сохранять параметр», то при введении значения в ячейку, настроенную на параметр, где стоит этот флажок, значение этой ячейки во время сохранения значений заменит собой значение этого параметра на число, указанное в настройках этого параметра на эту ячейку. Если же флажок не стоит, то замена значения во время сохранения значений параметров происходить не будет

Автор неизвестен

Эта цитата из документации была прославлена на «Баше.орг». Всё, о чём тут написано, заведомо не имеет отношения к задаче пользователя. Текст выглядит как перевод Гугль‑транслейтом с программного кода на русский.

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

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

Един­ствен­ная при­чина застав­лять чело­века запол­нять все эти поля — устрой­ство базы дан­ных. Из таких дан­ных про­грам­ми­сту легко соста­вить запрос.

Этот сайт прислали в рубрику «Советы» на сайте бюро. Человек должен выбрать регион, а потом корректно заполнить целый формуляр, чтобы машина соизволила найти мини‑отель.

Единственная причина заставлять человека заполнять все эти поля — устройство базы данных. Из таких данных программисту легко составить запрос.

Подсказка намекает: пиши как угодно

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

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

«Такого же, но с перламутровыми пуговицами». Фрагмент х/ф «Бриллиантовая рука». Мосфильм, 1969 ↓

Фильтры помогают улучшить результат

Принцип:
сначала данные, потом фильтры

Подсказка намекает: пиши как угодно

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

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

Фильтры помогают улучшить результат

Принцип:
сначала данные, потом фильтры

«Такого же, но с перламутровыми пуговицами». Фрагмент х/ф «Бриллиантовая рука». Мосфильм, 1969 ↓

Стартовый экран программы «Конверт». Выбор категории переводимых единиц

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

С точки зре­ния про­грам­ми­ста тут всё логично. Для пере­вода нужно знать исход­ную и целе­вую еди­ницу. Еди­ниц много, и не из любой в любую можно пере­ве­сти. Они рас­па­да­ются на кате­го­рии, внутри кото­рых пере­воды воз­можны. Кажется, что мир так и устроен.

Но посмот­рим на задачу поль­зо­ва­теля. Вы хотите пере­ве­сти 800 квад­рат­ных футов в квад­рат­ные метры. Про­грамма не даёт ничего похо­жего на то, что вам нужно, а застав­ляет думать о том, что нужно ей. Зачем эти иконки? Пока под­го­то­вите про­грамму к работе, уже забу­дете, что хотели перевести.

Стартовый экран программы «Конверт». Выбор категории переводимых единиц

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

С точки зрения программиста тут всё логично. Для перевода нужно знать исходную и целевую единицу. Единиц много, и не из любой в любую можно перевести. Они распадаются на категории, внутри которых переводы возможны. Кажется, что мир так и устроен.

Но посмотрим на задачу пользователя. Вы хотите перевести 800 квадратных футов в квадратные метры. Программа не даёт ничего похожего на то, что вам нужно, а заставляет думать о том, что нужно ей. Зачем эти иконки? Пока подготовите программу к работе, уже забудете, что хотели перевести.

Про­грамма «Анг­стрем» при запуске сразу пока­зы­вает циф­ро­вую и бук­вен­ную клавиатуры.

Чело­век вво­дит число 800, кото­рое у него в голове. По умол­ча­нию оно пере­во­дится между еди­ни­цами с про­шлого раза.

Когда чело­век допи­сал ф, ответ уже на экране.

Ангстрем
Авторы: Илья Бирман, Шурик Бабаев

Стартовый экран программы «Ангстрем»

Результат меняется по мере ввода

Нужный ответ — во второй строке

Стартовый экран программы «Ангстрем»

Результат меняется по мере ввода

Нужный ответ — во второй строке

Программа «Ангстрем» при запуске сразу показывает цифровую и буквенную клавиатуры.

Человек вводит число 800, которое у него в голове. По умолчанию оно переводится между единицами с прошлого раза.

Когда человек дописал ф, ответ уже на экране.

Ангстрем
Авторы: Илья Бирман, Шурик Бабаев

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

Это очень логично, но удобно только для компьютеров.

Для чело­века все места в фай­ло­вой системе выгля­дят оди­на­ково. В жизни мы запо­ми­наем поло­же­ние вещей по мно­же­ству при­зна­ков и ассоциаций.

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

Это очень логично, но удобно только для компьютеров.

Для человека все места в файловой системе выглядят одинаково. В жизни мы запоминаем положение вещей по множеству признаков и ассоциаций.

Можно сме­яться над теми, кто хра­нит сотню фай­лов «в бар­даке» на рабо­чем столе, но это совер­шенно есте­ственно. Рабо­чий стол — един­ствен­ное место, где файлы можно рас­по­ло­жить про­стран­ственно или объ­еди­нить в группы.

Рабочий стол здорового человека: файлы называются как попало, но разложены по кучкам

Рабочий стол здорового человека: файлы называются как попало, но разложены по кучкам

Можно смеяться над теми, кто хранит сотню файлов «в бардаке» на рабочем столе, но это совершенно естественно. Рабочий стол — единственное место, где файлы можно расположить пространственно или объединить в группы.

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

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

Примеры — программы «Е‑Фильм» и «Хром»

«Е‑Фильм»

«Хром»

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

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

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

Консоль управления Микрософта — конструктор безразличных к смыслу административных интерфейсов

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

Консоль управления Микрософта — конструктор безразличных к смыслу административных интерфейсов

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

Меню выгля­дит проще, чем дерево на преды­ду­щем раз­во­роте, но поль­зо­ваться им так же тяжело. На пер­вом уровне — все уста­нов­лен­ные при­ло­же­ния. Это как мини­мум несколько десятков.

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

В девя­той вер­сии Ай‑ОСа выби­ра­ется мак­си­маль­ное коли­че­ство уве­дом­ле­ний одного при­ло­же­ния в «Цен­тре уве­дом­ле­ний». Но это число лишено смысла. Если поста­вить пять, важ­ным может ока­заться шестое.

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

Список приложений

Параметры выбранного приложения

Параметры выбранного приложения

Список приложений

Параметры выбранного приложения

Параметры выбранного приложения

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

Меню выглядит проще, чем дерево на предыдущем развороте, но пользоваться им так же тяжело. На первом уровне — все установленные приложения. Это как минимум несколько десятков.

Для каждого приложения нужно решить, какую комбинацию параметров установить: где и в каком виде появится уведомление, каким будет сопровождаться звуком, скроется ли само или дождётся реакции пользователя. Процесс настройки чудовищно утомителен.

В девятой версии Ай‑ОСа выбирается максимальное количество уведомлений одного приложения в «Центре уведомлений». Но это число лишено смысла. Если поставить пять, важным может оказаться шестое.

Всё это далеко от того, что волнует пользователя. Было бы полезно получать уведомления от одних людей и не получать от других — независимо от приложения. Когда приходит раздражающее уведомление, была бы полезна кнопка «никогда такое не показывать». Если пришло во время встречи — «напомнить после встречи». Когда ставишь будильник — «и заодно отключить уведомления до утра».

Икона тех­но­за­ви­си­мо­сти — куар­код. Тут видно каж­дый бит, что наве­вает вос­по­ми­на­ния о моде­мах с их харак­тер­ным зву­ком соединения.

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

Технологии — под капот

Икона технозависимости — куаркод. Тут видно каждый бит, что навевает воспоминания о модемах с их характерным звуком соединения.

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

Технологии — под капот

Привычка

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

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

Без привычки

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

Внимательно, медленно

По привычке

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

Быстро, невнимательно

Привычка

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

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

Без привычки

Для маленького ребёнка надеть и зашнуровать ботинки — дело, полное сложностей. Нужно в правильной последовательности сделать пару десятков точных движений. Каждый шаг приходится обдумывать.

Внимательно, медленно

По привычке

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

Быстро, невнимательно

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

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

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

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

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

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

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

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

Удаление приложения на Айфоне

Фор­ми­ро­ва­нию при­вычки нельзя про­ти­во­сто­ять, она обра­зу­ется сама собой.

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

Удаление файла в Виндоусе

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

Удаление приложения на Айфоне

Формированию привычки нельзя противостоять, она образуется сама собой.

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

Удаление файла в Виндоусе

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

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

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

⌘Z

Подтверждение удаления домена
в «Мастерхосте»

Подтверждение удаления домена в «Мастерхосте»

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

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

⌘Z

В отли­чие от Вин­до­уса, на Маке файлы уда­ля­ются без под­твер­жде­ния. Если нажать ⌘Z, файл сразу же воз­вра­ща­ется на место.

На слу­чай, если после уда­ле­ния поль­зо­ва­тель сде­лал ещё несколько дей­ствий и анду уже не сра­бо­тает, есть «Корзина».

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

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

В отличие от Виндоуса, на Маке файлы удаляются без подтверждения. Если нажать ⌘Z, файл сразу же возвращается на место.

На случай, если после удаления пользователь сделал ещё несколько действий и анду уже не сработает, есть «Корзина».

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

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

Фотошоп уполномочен заявить

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

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

К радо­сти поль­зо­ва­те­лей в вер­сии ЦС3 появился чек­бокс «Больше не показывать».

Но это нон­сенс. Раньше чело­век при­вы­кал сразу закры­вать окно и упус­кал содер­жа­щу­юся в нём инфор­ма­цию. А теперь Фото­шоп даже не попы­та­ется нам её сообщить.

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

Фотошоп уполномочен заявить

Это хорошо знакомое дизайнерам диалоговое окно Фотошопа появляется, если выделить прозрачную часть слоя.

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

К радости пользователей в версии ЦС3 появился чекбокс «Больше не показывать».

Но это нонсенс. Раньше человек привыкал сразу закрывать окно и упускал содержащуюся в нём информацию. А теперь Фотошоп даже не попытается нам её сообщить.

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

Чтобы чело­век смог испра­вить ошибку, он дол­жен уви­деть, что допу­стил её. «Гмейл» при уда­ле­нии письма пока­зы­вает неболь­шое сооб­ще­ние и здесь же пред­ла­гает вер­нуть его.

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

В отли­чие от No pixels were selected, это сооб­ще­ние не нужно закры­вать для про­дол­же­ния работы. Зна­чит, не выра­ба­ты­ва­ется и при­вычка это делать. Бла­го­даря этому, шанс его про­чи­тать намного выше.

Если бы сооб­ще­ние Фото­шопа пока­зы­ва­лось так же спо­койно, оно было бы полез­нее и не потре­бо­вало бы «отклю­ча­ю­щей» галочки.

Чтобы человек смог исправить ошибку, он должен увидеть, что допустил её. «Гмейл» при удалении письма показывает небольшое сообщение и здесь же предлагает вернуть его.

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

В отличие от No pixels were selected, это сообщение не нужно закрывать для продолжения работы. Значит, не вырабатывается и привычка это делать. Благодаря этому, шанс его прочитать намного выше.

Если бы сообщение Фотошопа показывалось так же спокойно, оно было бы полезнее и не потребовало бы «отключающей» галочки.

Люди при­вы­кают к порядку кно­пок и не читают, что на них написано.

Одна­жды я долго настра­и­вал пара­метры сохра­не­ния доку­мента, а потом вме­сто кнопки «Сохра­нить» по ошибке нажал «Отмену». Обычно под­твер­жда­ю­щая кнопка в Вин­до­усе — слева, а на Маке — справа от отменяющей.

Дви­гая мышь в сто­рону кнопки, я даже успел оза­да­читься вопро­сом: «Почему кнопки идут не в том порядке?». Но это про­ис­хо­дило в дру­гой части мозга и не повли­яло на то, что я сде­лал на авто­пи­лоте. При­ш­лось настра­и­вать заново с осо­бой внимательностью.

Сохранение документа в ПДФ в старой версии «Индизайна». Расположить кнопки в обратном порядке — это почти как поменять местами газ и тормоз

Люди привыкают к порядку кнопок и не читают, что на них написано.

Однажды я долго настраивал параметры сохранения документа, а потом вместо кнопки «Сохранить» по ошибке нажал «Отмену». Обычно подтверждающая кнопка в Виндоусе — слева, а на Маке — справа от отменяющей.

Двигая мышь в сторону кнопки, я даже успел озадачиться вопросом: «Почему кнопки идут не в том порядке?». Но это происходило в другой части мозга и не повлияло на то, что я сделал на автопилоте. Пришлось настраивать заново с особой внимательностью.

Сохранение документа в ПДФ в старой версии «Индизайна». Расположить кнопки в обратном порядке — это почти как поменять местами газ и тормоз

Олег П. при­слал в «Советы» кар­тинку, где нари­со­вал диа­ло­го­вое окно Вин­до­уса по пра­ви­лам интер­фейса Мака. Он поме­нял местами кнопки и исполь­зо­вал «маков­ские» отступы и кегли шрифтов.

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

Айфон

Андроид

Чтобы при­вычка помо­гала чело­веку, интер­фейс при­ло­же­ния лучше про­ек­ти­ро­вать отдельно для каж­дой плат­формы и соблю­дать её тра­ди­ции. Срав­ните при­ло­же­ния Фейс­бука для Айфона и Андро­ида: внеш­ний вид поля поиска и рас­по­ло­же­ние «табов» соот­вет­ствуют при­ня­тым в системе.

Олег П. прислал в «Советы» картинку, где нарисовал диалоговое окно Виндоуса по правилам интерфейса Мака. Он поменял местами кнопки и использовал «маковские» отступы и кегли шрифтов.

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

Айфон

Андроид

Чтобы привычка помогала человеку, интерфейс приложения лучше проектировать отдельно для каждой платформы и соблюдать её традиции. Сравните приложения Фейсбука для Айфона и Андроида: внешний вид поля поиска и расположение «табов» соответствуют принятым в системе.

Не привыкнуть

Легко привыкнуть

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

Избран­ные диа­логи в «Скайпе» все­гда оста­ются на при­выч­ных местах.

Хоро­ший дизайн не про­ти­во­стоит чело­ве­че­ской натуре, а исполь­зует силу при­вычки для повы­ше­ния про­из­во­ди­тель­но­сти и умень­ше­ния коли­че­ства ошибок.

Не привыкнуть

К некоторым интерфейсам трудно привыкнуть из‑за их изменчивости. «Аймесседж» и «Телеграм» постоянно перемещают в начало списка диалог с последней репликой. Это одна из причин, по которой люди регулярно отправляют сообщения не тому, кому хотели.

Легко привыкнуть

Избранные диалоги в «Скайпе» всегда остаются на привычных местах.

Хороший дизайн не противостоит человеческой натуре, а использует силу привычки для повышения производительности и уменьшения количества ошибок.

Отмена отправки письма в «Гмейле»

Покупка в один клик на «Амазоне»

Прин­цип «Анду» рабо­тает даже с дей­стви­ями, кото­рые тех­ни­че­ски невоз­можно отменить.

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

При пер­вой покупке Ама­зон сохра­няет дан­ные бан­ков­ской карты и адрес доставки, и у всех това­ров появ­ля­ется кнопка «Купить в один клик». Товар сразу зака­зы­ва­ется с достав­кой по тому же адресу, а деньги спи­сы­ва­ются с той же карты. Если у поль­зо­ва­теля дрог­нет рука, и он слу­чайно зака­жет то, что не хотел, у него есть пол­часа, чтобы отме­нить заказ.

Отмена отправки письма в «Гмейле»

Принцип «Анду» работает даже с действиями, которые технически невозможно отменить.

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

Покупка в один клик на «Амазоне»

При первой покупке Амазон сохраняет данные банковской карты и адрес доставки, и у всех товаров появляется кнопка «Купить в один клик». Товар сразу заказывается с доставкой по тому же адресу, а деньги списываются с той же карты. Если у пользователя дрогнет рука, и он случайно закажет то, что не хотел, у него есть полчаса, чтобы отменить заказ.

Смена расширения файла

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

Когда появ­ля­лось это под­твер­жда­ю­щее окно, чело­век жал на синюю кнопку, говоря про себя «да‑да, давай уже!», но потом обна­ру­жи­вал, что рас­ши­ре­ние файла не сменилось.

В вер­сии 10.6, «Лео­парде», кнопки поста­вили на свои места. Но авторы не реши­лись сде­лать под­твер­жда­ю­щую кнопку кноп­кой по умол­ча­нию, и нажа­тие ↵ по преж­нему при­во­дило к пора­же­нию пользователя.

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

Смена расширения файла

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

Когда появлялось это подтверждающее окно, человек жал на синюю кнопку, говоря про себя «да‑да, давай уже!», но потом обнаруживал, что расширение файла не сменилось.

В версии 10.6, «Леопарде», кнопки поставили на свои места. Но авторы не решились сделать подтверждающую кнопку кнопкой по умолчанию, и нажатие ↵ по прежнему приводило к поражению пользователя.

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

На закреп­ле­ние при­вы­чек вли­яет встро­ен­ный в нерв­ную систему меха­низм воз­на­граж­де­ния. Он кор­рек­ти­рует наше пове­де­ние для выжи­ва­ния и про­дол­же­ния рода.

Ней­ро­фи­зио­ло­гия не помо­гает про­ек­ти­ро­вать интер­фейс, но даёт полез­ное при­клад­ное зна­ние: если интер­фейс награж­дает поль­зо­ва­теля за его дей­ствия, то при­вычка закреп­ля­ется скорее.

Поня­тие награды субьек­тивно. Она необя­за­тельно мате­ри­альна — доста­точно, чтобы чело­веку нравилось.

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

На закрепление привычек влияет встроенный в нервную систему механизм вознаграждения. Он корректирует наше поведение для выживания и продолжения рода.

Нейрофизиология не помогает проектировать интерфейс, но даёт полезное прикладное знание: если интерфейс награждает пользователя за его действия, то привычка закрепляется скорее.

Понятие награды субьективно. Она необязательно материальна — достаточно, чтобы человеку нравилось.

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

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

Чудес­ная реак­ция интер­фейса радует и застав­ляет повто­рять дей­ствия, вызы­вая ско­рей­шее привыкание.

На видео: подключение Эпл‑часов к Айфону

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

Чудесная реакция интерфейса радует и заставляет повторять действия, вызывая скорейшее привыкание.

На видео: подключение Эпл‑часов к Айфону

Телефоны Нокия 3310, Сименс C45 и Эрикссон T39

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

Артём Гор­бу­нов рас­ска­зы­вает, что раду­ется звуку, с кото­рым Мак отправ­ляет письма, а ино­гда даже изоб­ра­жает его сам: «Я под­со­зна­тельно люблю эту про­грамму, она мне при­вычна и ком­фортна, я ни за что с неё не слезу».

Телефоны Нокия 3310, Сименс C45 и Эрикссон T39

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

Артём Горбунов рассказывает, что радуется звуку, с которым Мак отправляет письма, а иногда даже изображает его сам: «Я подсознательно люблю эту программу, она мне привычна и комфортна, я ни за что с неё не слезу».

Телефоны Нокия 3310, Сименс C45 и Эрикссон T39

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

Подобно голу­бям Скин­нера мы про­ве­ряем почту и кру­тим ленту соц­сети: там награда — в виде новых писем, инте­рес­ных постов и лай­ков — тоже появ­ля­ется непред­ска­зу­емо. Из‑за этого руки так и тянутся зайти ещё раз; покру­тить ещё немного. А вдруг!

Примеры: Твитер, Фейсбук и Инстаграм

Непредсказуемость награды усиливает привыкание. В эксперименте Берреса Скиннера устройство выдавало голубям еду при нажатии на рычаг. Голуби быстро научились пользоваться рычагом, когда испытывали голод. Но потом он изменил устройство так, чтобы еда выдавалась лишь иногда. Голуби стали нажимать на рычаг намного чаще независимо от голода.

Подобно голубям Скиннера мы проверяем почту и крутим ленту соцсети: там награда — в виде новых писем, интересных постов и лайков — тоже появляется непредсказуемо. Из‑за этого руки так и тянутся зайти ещё раз; покрутить ещё немного. А вдруг!

Примеры: Твитер, Фейсбук и Инстаграм

Модальность

У моей бабушки теле­ви­зор ино­гда пере­стаёт пере­клю­чать каналы: «Жму пятый, а он не вклю­ча­ется!».

Она слу­чайно нажи­мает кнопку ‑‑, после чего теле­ви­зор вос­при­ни­мает только дву­знач­ные каналы. Чтобы вклю­чить пятый, нужно нажать 0, затем 5, но бабушка не знает.

Модальность

У моей бабушки телевизор иногда перестаёт переключать каналы: «Жму пятый, а он не включается!».

Она случайно нажимает кнопку ‑‑, после чего телевизор воспринимает только двузначные каналы. Чтобы включить пятый, нужно нажать 0, затем 5, но бабушка не знает.

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

Выбор режима работы микроволновой печи «Самсунг»

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

Выбор режима работы микроволновой печи «Самсунг»

Но есть интер­фейсы, кото­рые все­гда рабо­тают пред­ска­зу­емо. Кнопка «5» в лифте все­гда везёт на пятый этаж. Рычаг на уни­тазе все­гда спус­кает воду. Кла­виша ми‑бемоль на фор­те­пи­ано все­гда играет ми‑бемоль.

Нажа­тия кно­пок, рыча­гов и кла­виш — это при­меры жестов.

Но есть интерфейсы, которые всегда работают предсказуемо. Кнопка «5» в лифте всегда везёт на пятый этаж. Рычаг на унитазе всегда спускает воду. Клавиша ми‑бемоль на фортепиано всегда играет ми‑бемоль.

Нажатия кнопок, рычагов и клавиш — это примеры жестов.

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

Как завязать булинь. Руководство скаута, 1972. Матрос завязывает такой узел, не задумываясь

Жест — действие или последовательность действий, которые человек не разделяет на составляющие, а выполняет как бы единым движением. Для опытного пользователя ввод короткого слова с клавиатуры — один жест. Для начинающего отдельным жестом будет нажатие каждой клавиши.

Как завязать булинь. Руководство скаута, 1972. Матрос завязывает такой узел, не задумываясь

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

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

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

Модаль­ная ошибка при­вела к кру­ше­нию само­лёта рейса 214 «Ази­ана‑эйр­лайнс» в июле 2013 года. Пилот не осо­зна­вал, что в теку­щем режиме авто­пи­лота не рабо­тает авто­мат тяги, и про­дол­жал управ­лять само­лё­том, не следя за скоростью.

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

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

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

Модальная ошибка привела к крушению самолёта рейса 214 «Азиана‑эйрлайнс» в июле 2013 года. Пилот не осознавал, что в текущем режиме автопилота не работает автомат тяги, и продолжал управлять самолётом, не следя за скоростью.

Телефон

Браузер

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

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

Телефон

На Айфоне тап в левый нижний угол в приложении «Телефон» переключит в «Избранное», а в браузере — поведёт назад. Но хоть жест и один, исключено, чтобы человек ожидал открытия избранных номеров в браузере или наоборот. Внимание как раз занято одной из двух задач, с которыми связаны эти состояния.

Браузер

Модальные ошибки возникают только если человек не осознаёт состояние интерфейса во время выполнения жеста.

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

В слу­чае с теле­фо­ном и бра­у­зе­ром модаль­но­сти нет, а в слу­чае с домаш­ним экра­ном — есть.

А вот когда выходишь из приложения и нажимаешь в привычный «смс‑угол», случайно открываешь какой‑нибудь «Шазам», потому что вдруг оказался не на той странице домашнего экрана.

В случае с телефоном и браузером модальности нет, а в случае с домашним экраном — есть.

Раз­дра­жа­ю­щий вид модаль­но­сти — модаль­ные окна.

Модальный диалог в Сафари

Немодальный диалог в Хроме

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

В Хроме окно выгля­дит похоже, но модаль­ным не явля­ется: любые жесты на сай­тах рабо­тают как обычно.

Модальный диалог в Сафари

Немодальный диалог в Хроме

Раздражающий вид модальности — модальные окна.

Модальный диалог в Сафари

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

Немодальный диалог в Хроме

В Хроме окно выглядит похоже, но модальным не является: любые жесты на сайтах работают как обычно.

Модальное уведомление

Немодальное уведомление

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

Немо­даль­ные лишены такой проблемы.

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

Модальное уведомление

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

Немодальное уведомление

Немодальные лишены такой проблемы.

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

Это диджей­ский плеер ком­пакт‑дис­ков Пио­нер Сиди­джей‑1000. Пове­де­ние эле­мен­тов управ­ле­ния сильно зави­сит от состо­я­ния интер­фейса, однако модаль­ные ошибки неча­сты: состо­я­ние интер­фейса свя­зано с тем, что делает диджей, и оче­видно ему.

Когда трек играет, вра­ще­ние джога по часо­вой стрелке под­го­няет его, при­чём тем силь­нее, чем силь­нее кру­тишь; про­тив часо­вой стрелки — под­тор­ма­жи­вает. Кнопка CUE озна­чает «оста­но­вить трек и вер­нуться в начало», пока ника­кая точка трека не сохра­нена; «оста­но­вить трек и вер­нуться в сохра­нён­ную точку», когда точка сохранена.

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

Если трек оста­нов­лен (в начале или в сохра­нён­ной точке), то нажа­тие и удер­жи­ва­ние CUE его вос­про­из­во­дит. Когда кнопку отпус­ка­ешь, игла тут же воз­вра­ща­ется в сохра­нён­ную точку и трек замол­кает. Если нужно про­дол­жить вос­про­из­ве­де­ние, то перед отпус­ка­нием кнопки CUE нужно нажать PLAY/PAUSE.

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

Это диджейский плеер компакт‑дисков Пионер Сидиджей‑1000. Поведение элементов управления сильно зависит от состояния интерфейса, однако модальные ошибки нечасты: состояние интерфейса связано с тем, что делает диджей, и очевидно ему.

Когда трек играет, вращение джога по часовой стрелке подгоняет его, причём тем сильнее, чем сильнее крутишь; против часовой стрелки — подтормаживает. Кнопка CUE означает «остановить трек и вернуться в начало», пока никакая точка трека не сохранена; «остановить трек и вернуться в сохранённую точку», когда точка сохранена.

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

Если трек остановлен (в начале или в сохранённой точке), то нажатие и удерживание CUE его воспроизводит. Когда кнопку отпускаешь, игла тут же возвращается в сохранённую точку и трек замолкает. Если нужно продолжить воспроизведение, то перед отпусканием кнопки CUE нужно нажать PLAY/PAUSE.

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

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

Самое непри­ят­ное — когда состо­я­ние меня­ется помимо воли пользователя.

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

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

Модальность —
признак плохого интерфейса

Модальность — признак плохого интерфейса, а не, скажем, рассеянности пользователя. Совершенно естественно, что внимание человека направлено на его задачу, а не на состояние интерфейса.

Самое неприятное — когда состояние меняется помимо воли пользователя.

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

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

Модальность —
признак плохого интерфейса

Дизай­неры рас­суж­дают так: раз чело­век не осо­знаёт состо­я­ние интер­фейса, сде­лаем его заметнее.

Пока­жем выбран­ный инстру­мент Фото­шопа не только на панели инстру­мен­тов сбоку, но кур­со­ром мыши. Он все­гда будет виден ровно в том месте, куда смот­рит пользователь.

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

Дизайнеры рассуждают так: раз человек не осознаёт состояние интерфейса, сделаем его заметнее.

Покажем выбранный инструмент Фотошопа не только на панели инструментов сбоку, но курсором мыши. Он всегда будет виден ровно в том месте, куда смотрит пользователь.

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

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

Но эти при­меры — ком­про­мисс. Интер­фейс кри­чит поль­зо­ва­телю: «Смотри, в каком я состо­я­нии!» Фор­мально модаль­ность сни­жа­ется, но сни­жа­ется и эффек­тив­ность: мы пере­клю­чаем вни­ма­ние поль­зо­ва­теля с задачи на состо­я­ние интер­фейса, застав­ляя при­ни­мать реше­ние о необ­хо­ди­мо­сти пере­клю­че­ния, а это мешает выра­ба­ты­ваться привычке.

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

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

Но эти примеры — компромисс. Интерфейс кричит пользователю: «Смотри, в каком я состоянии!» Формально модальность снижается, но снижается и эффективность: мы переключаем внимание пользователя с задачи на состояние интерфейса, заставляя принимать решение о необходимости переключения, а это мешает вырабатываться привычке.

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

Разделить жесты

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

Для реше­ния про­блемы доста­точно раз­де­лить кнопки.

Разделить жесты

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

Для решения проблемы достаточно разделить кнопки.

В пер­во­быт­ных элек­трон­ных кар­тах нельзя было про­сто клик­нуть в дом, чтобы узнать, что в нём нахо­дится — нужно было сна­чала выбрать стрелку с вопро­си­ком. Для при­бли­же­ния и отда­ле­ния карты также были отдель­ные инстру­менты. Для пере­ме­ще­ния исполь­зо­ва­лись стрелки по углам.

Со вре­ме­нем при­ду­мали пере­ме­ще­ние с зажа­той кноп­кой и изме­не­ние мас­штаба коле­сом про­крутки. Клик в объ­ект стал все­гда пока­зы­вать инфор­ма­цию о нём. Так каж­дая функ­ция полу­чила свой жест.

Яндекс.Карты, 2005

В первобытных электронных картах нельзя было просто кликнуть в дом, чтобы узнать, что в нём находится — нужно было сначала выбрать стрелку с вопросиком. Для приближения и отдаления карты также были отдельные инструменты. Для перемещения использовались стрелки по углам.

Со временем придумали перемещение с зажатой кнопкой и изменение масштаба колесом прокрутки. Клик в объект стал всегда показывать информацию о нём. Так каждая функция получила свой жест.

Яндекс.Карты, 2005

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

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

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

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

Особенно неприятно такое поведение, когда карта является частью прокручиваемой страницы: крутишь страницу, а она останавливается и в ней начинает увеличиваться карта. Состояние интерфейса меняется против твоего желания.

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

Использовать «квазирежимы»

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

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

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

Педаль «Роллс ММ‑11». Удерживайте для отключения звука

Использовать «квазирежимы»

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

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

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

Педаль «Роллс ММ‑11». Удерживайте для отключения звука

Кнопка Капслок пере­клю­чает между режи­мами ввода строч­ных и про­пис­ных букв. Это при­во­дит к модаль­ным ошиб­кам: если забыть отклю­чить, по ошибке пишешь боль­шими буквами.

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

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

Клас­си­че­ский юник­со­вый тек­сто­вый редак­тор «Ви‑ай» (vi) рабо­тает в одном из двух режи­мов. В режиме ввода нажи­ма­е­мые буквы встав­ля­ются в текст, а в режиме ввода команд каж­дой букве соот­вет­ствует дей­ствие: пере­ме­ще­ние кур­сора, скрол­линг, поиск, замена.

В совре­мен­ном редак­торе буквы все­гда встав­ля­ются в текст, а команды выпол­ня­ются с удер­жа­нием кла­виш‑моди­фи­ка­то­ров: Контроль, Комманд, Альт.

Первым немодальным текстовым редактором был созданный Ларри Теслером «Джипси»

Кнопка Капслок переключает между режимами ввода строчных и прописных букв. Это приводит к модальным ошибкам: если забыть отключить, по ошибке пишешь большими буквами.

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

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

Классический юниксовый текстовый редактор «Ви‑ай» (vi) работает в одном из двух режимов. В режиме ввода нажимаемые буквы вставляются в текст, а в режиме ввода команд каждой букве соответствует действие: перемещение курсора, скроллинг, поиск, замена.

В современном редакторе буквы всегда вставляются в текст, а команды выполняются с удержанием клавиш‑модификаторов: Контроль, Комманд, Альт.

Первым немодальным текстовым редактором был созданный Ларри Теслером «Джипси»

При работе в Фото­шопе дизай­нер часто меняет мас­штаб и поло­же­ние хол­ста на экране. Без ква­зи­ре­жи­мов это долго: пере­клю­читься в инстру­мент «лупа» Z, изме­нить мас­штаб, пере­клю­читься в инстру­мент «рука» H, подви­нуть холст в нуж­ное место; вспом­нить, какой инстру­мент был выбран до этого; пере­клю­читься в него.

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

При работе в Фотошопе дизайнер часто меняет масштаб и положение холста на экране. Без квазирежимов это долго: переключиться в инструмент «лупа» Z, изменить масштаб, переключиться в инструмент «рука» H, подвинуть холст в нужное место; вспомнить, какой инструмент был выбран до этого; переключиться в него.

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

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

⎇⌘⇧S в Фотошопе — сохранить для веба

Продвинутый дизайнер зажимает левой рукой целые аккорды. При этом иногда трудно объяснить другому, что именно ты сделал.

⎇⌘⇧S в Фотошопе — сохранить для веба

Тулбар почты на Маке

Изменить сценарий

Когда раз­де­лить жесты или исполь­зо­вать ква­зи­ре­жим не полу­ча­ется, реше­ние ищут на уровне сце­на­рия: меняют, что и в каком порядке делает пользователь.

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

Волшебная палочка НТ‑МДТ

В про­грамме обра­ботки изоб­ра­же­ний НТ‑МДТ толе­рант­ность вол­шеб­ной палочки изме­ня­ется после клика.

Хороший сценарий побеждает модальность

Тулбар почты на Маке

Изменить сценарий

Когда разделить жесты или использовать квазирежим не получается, решение ищут на уровне сценария: меняют, что и в каком порядке делает пользователь.

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

Волшебная палочка НТ‑МДТ

В программе обработки изображений НТ‑МДТ толерантность волшебной палочки изменяется после клика.

Хороший сценарий побеждает модальность

Последовательное волшебство

Последовательное волшебство

Этот интер­фейс записи к врачу при­слала одна из сту­ден­ток Школы ста­жё­ров бюро.

Поле поиска ведёт себя непред­ска­зу­емо. Чело­век вво­дит запрос, нажи­мает на кнопку. Но вме­сто резуль­та­тов поиска под полем вдруг появ­ля­ются уточ­ня­ю­щие вопросы. Они воз­ни­кают «из ниот­куда» и исче­зают «в никуда». Потом на том же месте также неожи­данно появ­ля­ются рекомендации.

Другие странности:

  • 0:14  при появлении выпадайки календаря поле времени пропадает

  • 0:18  изменение значения поля в форме приводит к изменению его названия

  • 0:21  при нажатии ссылка исчезает

  • 0:38  после подтверждения номер телефона сбрасывается

Этот интерфейс записи к врачу прислала одна из студенток Школы стажёров бюро.

Поле поиска ведёт себя непредсказуемо. Человек вводит запрос, нажимает на кнопку. Но вместо результатов поиска под полем вдруг появляются уточняющие вопросы. Они возникают «из ниоткуда» и исчезают «в никуда». Потом на том же месте также неожиданно появляются рекомендации.

Другие странности:

  • 0:14  при появлении выпадайки календаря поле времени пропадает

  • 0:18  изменение значения поля в форме приводит к изменению его названия

  • 0:21  при нажатии ссылка исчезает

  • 0:38  после подтверждения номер телефона сбрасывается

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

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

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

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

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

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

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

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

Есть классический трюк, когда фокусник достаёт кролика из шляпы. Он сначала демонстрирует публике, что в шляпе ничего нет, потом опускает туда руку и достаёт кролика. Этого не может быть, но мы понимаем фокус.

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

«Звёздные войны. Скрытая угроза»
Лукасфильм, 1999

Мно­гие пред­меты из кино невоз­можны в реаль­но­сти. Cве­то­вой меч из «Звёзд­ных войн» — это ведь чушь: луч кон­ча­ется через пол­тора метра и про­хо­дит насквозь всё, кроме дру­гих таких же лучей.

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

«Звёздные войны. Скрытая угроза»
Лукасфильм, 1999

Многие предметы из кино невозможны в реальности. Cветовой меч из «Звёздных войн» — это ведь чушь: луч кончается через полтора метра и проходит насквозь всё, кроме других таких же лучей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плохо

Плохо

Хорошо

Хорошо

Хорошо

Хорошо

Плохо

Плохо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

О какой операции идёт речь?

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

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

Принцип:
каждый экран имеет смысл

О какой операции идёт речь?

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

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

Принцип:
каждый экран имеет смысл

Экран с един­ствен­ной фра­зой «Нажмите „Далее“, чтобы перейти к сле­ду­ю­щему шагу» не имеет смысла. Откуда перейти? Что будет на сле­ду­ю­щем шаге? Что вообще сей­час происходит?

Такие ошибки трудно заме­тить при тести­ро­ва­нии: при работе над интер­фей­сом дизай­нер пол­но­стью погру­жён в него и вос­при­ни­мает как еди­ное целое, а тести­ров­щик исполь­зует зара­нее напи­сан­ный сценарий.

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

Какой именно файл не найден?

Какая именно программа установлена?

Экран с единственной фразой «Нажмите „Далее“, чтобы перейти к следующему шагу» не имеет смысла. Откуда перейти? Что будет на следующем шаге? Что вообще сейчас происходит?

Такие ошибки трудно заметить при тестировании: при работе над интерфейсом дизайнер полностью погружён в него и воспринимает как единое целое, а тестировщик использует заранее написанный сценарий.

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

Какой именно файл не найден?

Какая именно программа установлена?

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

На пер­во­на­чаль­ном эскизе дизайна после ответа в окне оста­вался только выбран­ный вари­ант и ком­мен­та­рий к нему. Этих эле­мен­тов не хва­тало, чтобы «нови­чок» понял, что за окно перед ним — экран не имел смысла.

Дизайн при­ш­лось дора­бо­тать, вер­нув про­пав­шие вари­анты ответа.

Тест в журнале «Главбух»

Тест в журнале «Главбух»

Тест в журнале «Главбух»

Тест в журнале «Главбух»

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

На первоначальном эскизе дизайна после ответа в окне оставался только выбранный вариант и комментарий к нему. Этих элементов не хватало, чтобы «новичок» понял, что за окно перед ним — экран не имел смысла.

Дизайн пришлось доработать, вернув пропавшие варианты ответа.

Понятно

Непонятно

Понятно

Есть задачи

Нет задач

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

Но поня­тен ли интер­фейс в исход­ном состо­я­нии, когда этих эле­мен­тов нет?

Понятно

Есть задачи

Когда мы рисуем экран будущей программы, мы обычно начинаем с состояния, когда в программе жизнь бьёт ключом: в почтовике есть письма; в планировщике — задачи.

Непонятно

Понятно

Нет задач

Но понятен ли интерфейс в исходном состоянии, когда этих элементов нет?

Сервис «Договоры» компании «Актион»

Сервис «Договоры» компании «Актион»

Сервис «Договоры» компании «Актион»

Когда у юри­ста загру­жено много дого­во­ров, он видит их спи­сок слева, а откры­тый дого­вор — справа.

Как будет выгля­деть этот экран без дого­во­ров? Если спе­ци­ально об этом не поду­мать, то слева будет пустая жёл­тая панель, а справа — пустая белая.

В насто­я­щих «Дого­во­рах» новичка встре­чает экран, при­гла­ша­ю­щий загру­зить пер­вый договор.

Сервис «Договоры» компании «Актион»

Сервис «Договоры» компании «Актион»

Сервис «Договоры» компании «Актион»

Когда у юриста загружено много договоров, он видит их список слева, а открытый договор — справа.

Как будет выглядеть этот экран без договоров? Если специально об этом не подумать, то слева будет пустая жёлтая панель, а справа — пустая белая.

В настоящих «Договорах» новичка встречает экран, приглашающий загрузить первый договор.

Дизай­неры часто рисуют формы неза­пол­нен­ными. Опас­ность пред­став­ляют поля с назва­ни­ями внутри. Ком­пакт­ность таких полей — это плюс, осо­бенно зна­чи­мый на узких экра­нах телефонов.

Но если форму запол­нить, подпи­си уже не про­чи­тать, а зна­чит такое состо­я­ние ста­но­вится непо­нят­ным. Пред­ставьте, что вам нужно про­ве­рить, пра­вильно ли вы ввели бан­ков­ские рек­ви­зиты. Если бра­у­зер пред­за­пол­нил поля авто­ма­ти­че­ски, про­ве­рить пра­виль­ность ещё сложнее.

Отдельный вопрос — зачем «Аэрофлот» заставляет вводить данные, которые ему и так известны. Пассажир указывает всё это при покупке билета.

Регистрация на рейс «Аэрофлота»

Регистрация на рейс «Аэрофлота»

Регистрация на рейс «Аэрофлота»

Регистрация на рейс «Аэрофлота»

Дизайнеры часто рисуют формы незаполненными. Опасность представляют поля с названиями внутри. Компактность таких полей — это плюс, особенно значимый на узких экранах телефонов.

Но если форму заполнить, подписи уже не прочитать, а значит такое состояние становится непонятным. Представьте, что вам нужно проверить, правильно ли вы ввели банковские реквизиты. Если браузер предзаполнил поля автоматически, проверить правильность ещё сложнее.

Отдельный вопрос — зачем «Аэрофлот» заставляет вводить данные, которые ему и так известны. Пассажир указывает всё это при покупке билета.

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

Порой из глав­ной стра­ницы сайта неясно, чем зани­ма­ется компания.

«Ста­тьи, про­екты» — такие пункты меню могут быть на любом сайте.

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

Порой из главной страницы сайта неясно, чем занимается компания.

«Статьи, проекты» — такие пункты меню могут быть на любом сайте.

Эту рекламу трудно понять, даже если ты уже и стал­ки­вался с серией «Всё равно?!»

Челябинск,
2016

Эту рекламу трудно понять, даже если ты уже и сталкивался с серией «Всё равно?!»

Челябинск,
2016

Медуза (иноагент)

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

Медуза (иноагент)

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

Тест

Параметры съёмки фотоаппарата изменяются физическими ручками и кнопками, а не виртуальными элементами на экране. С какой точки зрения это хорошо?

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

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

Фотоаппарат «Фуджифильм X‑T1»

Что можно сказать об этом сообщении?

Оно слишком непривычно
Это модальное окно
Оно технозависимое
Это отличный пример того, как последовательное волшебство в интерфейсе позволяет эффективнее работать на компьютере
Не выдерживает взгляда новичка

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

Как сделать этот интерфейс человечнее?

Убрать пример
Понимать телефон в любом формате
Вывести сообщение об ошибке в окне
Здесь всё и так хорошо

Пример помогает понять, что надо вводить знак „+“ и код страны, и пользователю не приходится гадать. Но человечнее будет дать ввести номер и в любом другом формате, исправив его автоматически. А введение дополнительных окон этот интерфейс человечнее не сделает.

Выберите примеры действия принципа «Пусть потеет машина».

«Крутилка» показывает, что программа думает
Форма принимает дату в любом формате
Браузер автоматически переводит страницу с иностранного языка
В окне показаны в деталях все операции, выполняемые процессором
Программа попала в бесконечный цикл

«Крутилка» — это пример другой идеи: обратной связи. Автоматическое форматирование или перевод на другой язык усложнят программу, но упростят жизнь человеку. Принцип «Пусть потеет машина» не предполагает наблюдения за внутренней работой компьютера. Бесконечный цикл — это не пример работы, которую компьютер выполняет за человека.

Что не так с этой таблицей размеров в интернет‑магазине обуви?

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

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

Айтюнс не смог прочитать данные Айфона и предлагает сбросить его к заводским установкам. Какой принцип нарушен?

Сначала данные, потом фильтры
Привычность интерфейса: окно выглядит нестандартным для операционной системы
Данные пользователя бесконечно ценны
Принцип квазирежимов

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

Человек приехал забрать пылесос из пункта самовывоза. У него спрашивают номер заказа. С точки зрения человечности это:

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

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

Сайт находит тренинги по множеству критериев. Как бы вы предложили устроить интерфейс поиска?

Сделать «мастер»: на первом шаге одно поле поиска по всему, на втором — уточнить, в чём именно искать (специализациях, городах, темах), на третьем — показать результат
Сделать одно поле поиска по всему, в результатах вывести всё, что нашлось
Сделать три поля поиска: организатор, тема и аудитория, чтобы пользователь мог точно ввести, что ему нужно

Форма из нескольких шагов или нескольких полей — плохое решение, только отдаляющее от результатов поиска. Принцип «сначала данные, потом фильтры» предписывает как можно раньше показать хоть что‑то, а уже потом дать человеку инструменты для уточнения выдачи.

Интернет‑магазин предлагает выбор сортировки. Укажите проблемы этого интерфейса.

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

Слова «по названию», «цене», «новизне» оформлены как ссылки, но не являются ими, что противоречит привычкам. Интерфейс технозависим: вместо учёта реальных сценариев поиска дана сортировка по атрибутам базы данных. Скажем, зачем нужна сортировка по названию задом‑наперёд? Способов сортировки, конечно, можно придумать и ещё больше, но модальность тут ни при чём.

Предложите улучшения интерфейса из предыдущего вопроса.

Заменить названия вариантов сортировки на более человечные: «сначала дешёвые», «по алфавиту»
Добавить сортировку по цвету упаковки
Использовать более привычный элемент для выбора сортировки
Нарисовать синюю рамку вокруг заголовка, чтобы он не «висел» в воздухе

Дать более человечные названия способам сортировки и использовать более привычный элемент — хорошие идеи. Иногда удобно искать упаковку по цвету, но сортировка вряд ли поможет с этим: синий будет до или после красного? Синяя рамка заголовку не нужна.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Параметры съёмки фотоаппарата изменяются физическими ручками и кнопками, а не виртуальными элементами на экране. С какой точки зрения это хорошо?

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

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

Фотоаппарат «Фуджифильм X‑T1»

Что можно сказать об этом сообщении?

Оно слишком непривычно
Это модальное окно
Оно технозависимое
Это отличный пример того, как последовательное волшебство в интерфейсе позволяет эффективнее работать на компьютере
Не выдерживает взгляда новичка

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

Как сделать этот интерфейс человечнее?

Убрать пример
Понимать телефон в любом формате
Вывести сообщение об ошибке в окне
Здесь всё и так хорошо

Пример помогает понять, что надо вводить знак „+“ и код страны, и пользователю не приходится гадать. Но человечнее будет дать ввести номер и в любом другом формате, исправив его автоматически. А введение дополнительных окон этот интерфейс человечнее не сделает.

Выберите примеры действия принципа «Пусть потеет машина».

«Крутилка» показывает, что программа думает
Форма принимает дату в любом формате
Браузер автоматически переводит страницу с иностранного языка
В окне показаны в деталях все операции, выполняемые процессором
Программа попала в бесконечный цикл

«Крутилка» — это пример другой идеи: обратной связи. Автоматическое форматирование или перевод на другой язык усложнят программу, но упростят жизнь человеку. Принцип «Пусть потеет машина» не предполагает наблюдения за внутренней работой компьютера. Бесконечный цикл — это не пример работы, которую компьютер выполняет за человека.

Что не так с этой таблицей размеров в интернет‑магазине обуви?

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

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

Айтюнс не смог прочитать данные Айфона и предлагает сбросить его к заводским установкам. Какой принцип нарушен?

Сначала данные, потом фильтры
Привычность интерфейса: окно выглядит нестандартным для операционной системы
Данные пользователя бесконечно ценны
Принцип квазирежимов

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

Человек приехал забрать пылесос из пункта самовывоза. У него спрашивают номер заказа. С точки зрения человечности это:

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

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

Сайт находит тренинги по множеству критериев. Как бы вы предложили устроить интерфейс поиска?

Сделать «мастер»: на первом шаге одно поле поиска по всему, на втором — уточнить, в чём именно искать (специализациях, городах, темах), на третьем — показать результат
Сделать одно поле поиска по всему, в результатах вывести всё, что нашлось
Сделать три поля поиска: организатор, тема и аудитория, чтобы пользователь мог точно ввести, что ему нужно

Форма из нескольких шагов или нескольких полей — плохое решение, только отдаляющее от результатов поиска. Принцип «сначала данные, потом фильтры» предписывает как можно раньше показать хоть что‑то, а уже потом дать человеку инструменты для уточнения выдачи.

Интернет‑магазин предлагает выбор сортировки. Укажите проблемы этого интерфейса.

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

Слова «по названию», «цене», «новизне» оформлены как ссылки, но не являются ими, что противоречит привычкам. Интерфейс технозависим: вместо учёта реальных сценариев поиска дана сортировка по атрибутам базы данных. Скажем, зачем нужна сортировка по названию задом‑наперёд? Способов сортировки, конечно, можно придумать и ещё больше, но модальность тут ни при чём.

Предложите улучшения интерфейса из предыдущего вопроса.

Заменить названия вариантов сортировки на более человечные: «сначала дешёвые», «по алфавиту»
Добавить сортировку по цвету упаковки
Использовать более привычный элемент для выбора сортировки
Нарисовать синюю рамку вокруг заголовка, чтобы он не «висел» в воздухе

Дать более человечные названия способам сортировки и использовать более привычный элемент — хорошие идеи. Иногда удобно искать упаковку по цвету, но сортировка вряд ли поможет с этим: синий будет до или после красного? Синяя рамка заголовку не нужна.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

2
Вза­имодействие

2
Вза­имодействие

Близость

См. также:
Артём Горбунов. Эффекты гештальта

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

Мы заме­чаем объ­екты, обра­зу­ю­щие опре­де­лён­ную фигуру, име­ю­щие общий цвет или дви­га­ю­щи­еся в одном направлении.

Близость

Звёзды на небе расположены хаотично. Но мозг человека стремится выделить в наблюдаемой картине цельный образ — «гештальт». Так в нашей голове возникают созвездия.

Мы замечаем объекты, образующие определённую фигуру, имеющие общий цвет или двигающиеся в одном направлении.

См. также:
Артём Горбунов. Эффекты гештальта

Дизай­неры исполь­зуют осо­бен­но­сти чело­ве­че­ского вос­при­я­тия для пере­дачи смысла. Этот лого­тип — не мно­же­ство полос раз­ной длины, а три латин­ские буквы.

Дизайнеры используют особенности человеческого восприятия для передачи смысла. Этот логотип — не множество полос разной длины, а три латинские буквы.

Пер­вый и самый про­стой закон, кото­рый нужно знать — закон бли­зо­сти. Объ­екты, рас­по­ло­жен­ные рядом, вос­при­ни­ма­ются свя­зан­ными. Это кажется оче­вид­ным, но ошибки встре­ча­ются слиш­ком часто.

В интер­нет‑мага­зине «Ламода» невоз­можно понять, какие цены отно­сятся к каким това­рам — все рас­сто­я­ния одинаковы.

См. также:
Артемий Лебедев. Теория близости

Первый и самый простой закон, который нужно знать — закон близости. Объекты, расположенные рядом, воспринимаются связанными. Это кажется очевидным, но ошибки встречаются слишком часто.

В интернет‑магазине «Ламода» невозможно понять, какие цены относятся к каким товарам — все расстояния одинаковы.

См. также:
Артемий Лебедев. Теория близости

У «Гис­ме­тео» ноч­ная тем­пе­ра­тура отно­сится к днев­ной пик­то­грамме: +25 Ясно.

В «Вики­пе­дии» порт­рет Джимми Уэйлса на банере свя­зы­ва­ется с заго­лов­ком статьи.

У «Гисметео» ночная температура относится к дневной пиктограмме: +25 Ясно.

В «Википедии» портрет Джимми Уэйлса на банере связывается с заголовком статьи.

У «Кино­по­иска» белое поле ввода нахо­дится прямо под сло­вами «Войти на сайт». Кажется, что туда нужно вве­сти имя или пароль. А кнопка «Искать» отде­лена втрое боль­шим отступом.

Газете.ру, кажется, стоит ещё поис­кать спо­соб понра­виться муж­чине. Стре­лочки не спасают.

У «Кинопоиска» белое поле ввода находится прямо под словами «Войти на сайт». Кажется, что туда нужно ввести имя или пароль. А кнопка «Искать» отделена втрое большим отступом.

Газете.ру, кажется, стоит ещё поискать способ понравиться мужчине. Стрелочки не спасают.

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

Окно уста­новки «Ауди­шена» на пер­вый взгляд кажется абсурд­ным: в группе радиокно­пок выбрано сразу несколько вари­ан­тов. Кон­траст­ные гори­зон­таль­ные линии не спа­сают — бли­зость сильнее.

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

Окно установки «Аудишена» на первый взгляд кажется абсурдным: в группе радиокнопок выбрано сразу несколько вариантов. Контрастные горизонтальные линии не спасают — близость сильнее.

Группа радиокно­пок, или радио­группа — набор свя­зан­ных по смыслу эле­мен­тов, из кото­рых может быть выбран только один. Важно все­гда видеть их вме­сте, чтобы пони­мать, что выбрано и из чего.

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

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

Плохо

Хорошо

Тоже хорошо

Группа радиокнопок, или радиогруппа — набор связанных по смыслу элементов, из которых может быть выбран только один. Важно всегда видеть их вместе, чтобы понимать, что выбрано и из чего.

Поэтому классические радиокнопки должны стоять друг под другом. Иначе их отделяют друг от друга собственные названия.

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

Плохо

Хорошо

Тоже хорошо

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

Чек­бокс также дол­жен быть ближе к соб­ствен­ной подпи­си, чем к сосед­ним элементам.

Артём Горбунов. Типографика и вёрстка.
Глава «Правило внутреннего и внешнего»

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

Чекбокс также должен быть ближе к собственной подписи, чем к соседним элементам.

Артём Горбунов. Типографика и вёрстка.
Глава «Правило внутреннего и внешнего»

Плохо

Поля формы стоят на одинаковом расстоянии друг от друга

Лучше

Между связанными по смыслу полями расстояния меньше

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

Такая форма выгля­дит проще: вме­сто дюжины полей мы видим пять групп.

Плохо

Поля формы стоят на одинаковом расстоянии друг от друга

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

Лучше

Между связанными по смыслу полями расстояния меньше

Такая форма выглядит проще: вместо дюжины полей мы видим пять групп.

Плохо

Майя

Хорошо

Почта

Груп­пи­ровка помо­гает улуч­шить не только формы. В пло­хом тул­баре кнопки идут без­раз­лич­ной кучей. В хоро­шем — сгруп­пи­ро­ваны по смыслу.

→

Группируйте элементы интерфейса

Плохо

Майя

Хорошо

Почта

Группировка помогает улучшить не только формы. В плохом тулбаре кнопки идут безразличной кучей. В хорошем — сгруппированы по смыслу.

→

Группируйте элементы интерфейса

В при­ло­же­нии «Медузы» все вер­ти­каль­ные рас­сто­я­ния между бло­ками — одинаковые.

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

Дизай­нер попы­тался «спа­сти» дизайн, доба­вив на фото­гра­фиях белую стрелку снизу. Но такая стрелка — неесте­ствен­ный спо­соб свя­зы­вать объ­екты. Бли­зость силь­нее линеек и стрелок.

В приложении «Медузы» все вертикальные расстояния между блоками — одинаковые.

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

Дизайнер попытался «спасти» дизайн, добавив на фотографиях белую стрелку снизу. Но такая стрелка — неестественный способ связывать объекты. Близость сильнее линеек и стрелок.

Так выгля­дела форма входа с паро­лем в ста­ром Айтюнсе. Можно было войти не только по адресу, заре­ги­стри­ро­ван­ному в Эпле, но и по адресу в Аоле. Слева — выбор между этими вари­ан­тами. Им визу­ально соот­вет­ствуют два поля. У меня Эпл, я ввожу элек­трон­ную почту в пер­вое поле и нажи­маю ↵

Но справа от Аола вдруг появ­ля­ется крас­ная стрелка и ука­зы­вает мне на вто­рое поле: «Аол‑то сюда введи, э». Но у меня нет Аола! Ока­зы­ва­ется, вто­рое поле — это пароль от Эпла. Крас­ная стрелка ука­зы­вает на поле и не имеет отно­ше­ния к Аолу.

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

Если сло­мать сби­ва­ю­щие с толку связи, про­блема исче­зает. Теперь, правда, хочется пере­вер­стать всё окно, чтобы оно стало красивым.

Так выглядела форма входа с паролем в старом Айтюнсе. Можно было войти не только по адресу, зарегистрированному в Эпле, но и по адресу в Аоле. Слева — выбор между этими вариантами. Им визуально соответствуют два поля. У меня Эпл, я ввожу электронную почту в первое поле и нажимаю ↵

Но справа от Аола вдруг появляется красная стрелка и указывает мне на второе поле: «Аол‑то сюда введи, э». Но у меня нет Аола! Оказывается, второе поле — это пароль от Эпла. Красная стрелка указывает на поле и не имеет отношения к Аолу.

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

Если сломать сбивающие с толку связи, проблема исчезает. Теперь, правда, хочется переверстать всё окно, чтобы оно стало красивым.

Офисная мебель — по размеру офиса

Кабинеты — по производи­телям

Офисные кресла — по стоимости

А также у нас есть — мы нашли

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

Про­стое пра­вило хоро­шей вёрстки — не повто­рять ритм на сосед­них этажах.

Артём Горбунов. Типографика и вёрстка. Глава «Страницы»

  • Офисная мебель — по размеру офиса

  • Кабинеты — по производи­телям

  • Офисные кресла — по стоимости

  • А также у нас есть — мы нашли

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

Простое правило хорошей вёрстки — не повторять ритм на соседних этажах.

Артём Горбунов. Типографика и вёрстка. Глава «Страницы»

Бли­зость — это не только рас­сто­я­ние и выравнивание.

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

Пар­тия «Спра­вед­ли­вая Рос­сия», кажется, высту­пает за обман.

Близость — это не только расстояние и выравнивание.

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

Партия «Справедливая Россия», кажется, выступает за обман.

Из‑за похо­жих цвета и формы настройка уве­дом­ле­ний кажется свя­зан­ной с кноп­кой закры­тия окна.

Числа рет­ви­тов и лай­ков свя­за­лись в одно — 13 155. Ещё про­грам­ми­сты забыли о чело­веч­но­сти и поле­ни­лись про­скло­нять слово «лайки».

Из‑за похожих цвета и формы настройка уведомлений кажется связанной с кнопкой закрытия окна.

Числа ретвитов и лайков связались в одно — 13 155. Ещё программисты забыли о человечности и поленились просклонять слово «лайки».

Прицеливание

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

Время прицеливания =
k log₂ 
2 × расстояние
размер

Это и есть закон Фиттса. Он свя­зы­вает рас­сто­я­ние до объ­екта, раз­мер объ­екта и время при­це­ли­ва­ния в одно­мер­ном пространстве.

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

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

Пол Фиттс (1912⁠—1965) работал психологом в Университете штата Огайо, а затем в Мичиганском университете. Разработал и опубликовал в 1954 году модель быстрого прицельного движения человека. До работы в университете Фиттс служил в ВВС США. В конце второй мировой войны изучал человеческий фактор в авиации, и считается одним из пионеров в повышении безопасности

Прицеливание

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

Время прицеливания =
k log₂ 
2 × расстояние
размер

Это и есть закон Фиттса. Он связывает расстояние до объекта, размер объекта и время прицеливания в одномерном пространстве.

Нас интересует приложение закона к интерфейсам, где человек прицеливается к объектам на двухмерном экране. Форма объектов и тот факт, что человек движется к цели не по прямой, несколько усложняют закон, но для нас важно интуитивное определение: чем дальше объект, тем больше время прицеливания; чем больше объект, тем меньше время прицеливания.

Было установлено, что закон работает независимо от условий движения: выполняется ли оно непосредственно или с помощью манипулятора; рукой или ногой; ребёнком или стариком.

Пол Фиттс (1912⁠—1965) работал психологом в Университете штата Огайо, а затем в Мичиганском университете. Разработал и опубликовал в 1954 году модель быстрого прицельного движения человека. До работы в университете Фиттс служил в ВВС США. В конце второй мировой войны изучал человеческий фактор в авиации, и считается одним из пионеров в повышении безопасности

Раз­бе­рём след­ствия закона Фиттса.

Мелко

Достаточно

Опасно

Размеры и отступы объектов

В боль­шие кнопки легче попасть. Но слиш­ком боль­шие кнопки не очень полезны: зави­си­мость лога­риф­ми­че­ская, то есть чем больше уве­ли­чи­ваем, тем меньше эффект.

Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную

 

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

Разберём следствия закона Фиттса.

Мелко

Достаточно

Размеры и отступы объектов

В большие кнопки легче попасть. Но слишком большие кнопки не очень полезны: зависимость логарифмическая, то есть чем больше увеличиваем, тем меньше эффект.

Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную

Опасно

Хорошо отделять дополнительным расстоянием опасные кнопки и ссылки, иначе будет слишком легко попасть не в ту.

  • Перевод из кошелька

  • Предоплаченные
    пластиковые карты

  • Наличный перевод

  • Зачисление из других
    платёжных систем

  • Наличный платёж
    через терминал

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

Если рас­сто­я­ния уве­ли­чить сверх стан­дарт­ного интер­ли­ньяжа, реша­ются обе проблемы.

  • Перевод из кошелька

  • Предоплаченные
    пластиковые карты

  • Наличный перевод

  • Зачисление из других
    платёжных систем

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

Если расстояния увеличить сверх стандартного интерлиньяжа, решаются обе проблемы.

Размеры нажимаемых областей

Ино­гда жела­ние уве­ли­чить эле­мент всту­пает в про­ти­во­ре­чие с тре­бо­ва­нием занять им как можно меньше места на экране. Тогда доста­точно уве­ли­чить не сам объ­ект, а лишь область нажатия.

Чёр­ные точки 1 2 3 необ­хо­димо было сде­лать неболь­шими, чтобы они не закры­вали собой схему тор­го­вого цен­тра. Но их обла­сти нажа­тия больше и сораз­мерны пальцу:

Интерфейс электронного киоска в торговом центре «Мега», Москва

Интерфейс электронного киоска в торговом центре «Мега», Москва

Размеры нажимаемых областей

Иногда желание увеличить элемент вступает в противоречие с требованием занять им как можно меньше места на экране. Тогда достаточно увеличить не сам объект, а лишь область нажатия.

Чёрные точки 1 2 3 необходимо было сделать небольшими, чтобы они не закрывали собой схему торгового центра. Но их области нажатия больше и соразмерны пальцу:

Плохо

Хорошо

Плохо

Хорошо

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

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

Плохо

Хорошо

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

Плохо

Хорошо

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

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

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

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

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

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

Видео с сайта «Эпл», 2007

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

Видео с сайта «Эпл», 2007

В дизайне теле­фон­ной книжки Айфона есть проблема.

Плохо

Лучше

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

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

В дизайне телефонной книжки Айфона есть проблема.

Плохо

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

Лучше

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

Точка под курсором мыши

Это самая быст­ро­до­ступ­ная точка на экране, ведь рас­сто­я­ние до неё равно нулю. Именно в ней появ­ля­ется всплы­ва­ю­щее меню.

В хорошо орга­ни­зо­ван­ном всплы­ва­ю­щем меню самое важ­ное идёт сверху. В Вин­до­усе пер­вый пункт ока­зы­ва­ется прямо под кур­со­ром — Фиттс дово­лен. На Маке для попа­да­ния в пер­вый пункт при­хо­дится немного сдви­нуть кур­сор — уже не так хорошо.

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

Контекстное меню на Маке

Такие меню не прижились за пределами мира 3Д

Контекстное меню на Маке

Такие меню не прижились за пределами мира 3Д

Точка под курсором мыши

Это самая быстродоступная точка на экране, ведь расстояние до неё равно нулю. Именно в ней появляется всплывающее меню.

В хорошо организованном всплывающем меню самое важное идёт сверху. В Виндоусе первый пункт оказывается прямо под курсором — Фиттс доволен. На Маке для попадания в первый пункт приходится немного сдвинуть курсор — уже не так хорошо.

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

Углы экрана

Все пик­сели на экране одного раз­мера. Но когда кур­сор достиг угла, дви­же­ние мыши можно про­дол­жать, пока она не упа­дёт со стола — кур­сор будет пока­зы­вать в ту же точку. Поэтому для кур­сора раз­меры углов бес­ко­нечны: чтобы попасть, доста­точно реши­тельно дви­нуть мышь в нуж­ную сто­рону и нажать кнопку.

Попро­буйте попасть кур­со­ром в кру­жок в цен­тре, а потом — в любой из углов, и оце­ните, насколько это легче.

Углы экрана — сле­ду­ю­щие по лёг­ко­сти попа­да­ния точки после точки под кур­со­ром мыши.

Если вы чита­ете на сен­сор­ном экране, эффекта не будет: палец не «упрётся» в край серой обла­сти. Но исполь­зо­вать углы теле­фона и план­шета полезно с точки зре­ния при­вычки — об этом в конце главы. И, конечно, стоит пом­нить, что до эле­мен­тов в верх­ней части сен­сор­ного экрана трудно дотя­нуться пальцем.

Кружок имитирует поведение курсора мыши и не выходит за пределы экрана. Попробуйте на компьютере с мышью и с книгой на весь экран

Углы экрана

Все пиксели на экране одного размера. Но когда курсор достиг угла, движение мыши можно продолжать, пока она не упадёт со стола — курсор будет показывать в ту же точку. Поэтому для курсора размеры углов бесконечны: чтобы попасть, достаточно решительно двинуть мышь в нужную сторону и нажать кнопку.

Попробуйте попасть курсором в кружок в центре, а потом — в любой из углов, и оцените, насколько это легче.

Углы экрана — следующие по лёгкости попадания точки после точки под курсором мыши.

Если вы читаете на сенсорном экране, эффекта не будет: палец не «упрётся» в край серой области. Но использовать углы телефона и планшета полезно с точки зрения привычки — об этом в конце главы. И, конечно, стоит помнить, что до элементов в верхней части сенсорного экрана трудно дотянуться пальцем.

Кружок имитирует поведение курсора мыши и не выходит за пределы экрана. Попробуйте на компьютере с мышью и с книгой на весь экран

В Вин­до­усе 95 кнопка «Пуск» отсто­яла на один пик­сель от левого ниж­него угла, что сильно ослож­няло попа­да­ние в неё.

В одной из сле­ду­ю­щих вер­сий про­блему испра­вили, «забив» кнопку в самый угол. А вот кнопка закры­тия раз­вёр­ну­того на весь экран окна все­гда нахо­ди­лась в пра­вом верх­нем углу, и поль­зо­ва­тели Вин­до­уса знают, как легко в неё попасть.

На Маке настра­и­ва­ется функ­ция «Горя­чие углы». Наве­де­ние на углы экрана даже без клика вызы­вает выбран­ную команду.

В Виндоусе 95 кнопка «Пуск» отстояла на один пиксель от левого нижнего угла, что сильно осложняло попадание в неё.

В одной из следующих версий проблему исправили, «забив» кнопку в самый угол. А вот кнопка закрытия развёрнутого на весь экран окна всегда находилась в правом верхнем углу, и пользователи Виндоуса знают, как легко в неё попасть.

На Маке настраивается функция «Горячие углы». Наведение на углы экрана даже без клика вызывает выбранную команду.

Стороны экрана

Сле­ду­ю­щие по лёг­ко­сти попа­да­ния после углов экрана — его сто­роны. Объ­екты, при­жа­тые к краю, имеют бес­ко­неч­ный раз­мер в направ­ле­нии за гра­ницу экрана.

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

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


К сожа­ле­нию, после Вин­до­уса 7 кнопки на панели задач стали малень­кими, как в маков­ском доке.

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

Стороны экрана

Следующие по лёгкости попадания после углов экрана — его стороны. Объекты, прижатые к краю, имеют бесконечный размер в направлении за границу экрана.

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

В Виндоусе Икс‑Пи была хорошая панель задач. Кнопки программ были большой ширины и прижаты к низу экрана. Благодаря надписям, кнопки были информативнее — об этом подробнее в главе «Информативность».

К сожалению, после Виндоуса 7 кнопки на панели задач стали маленькими, как в маковском доке.

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

В боль­шин­стве про­грамм тул­бар раз­ме­щают под заго­лов­ком окна.

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

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ

В большинстве программ тулбар размещают под заголовком окна.

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

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ

«Психология» не должна быть ссылкой на рубрику

Заголовок комментария в «Живом журнале»

Один объект — одна ссылка

В экс­пе­ри­менте Фиттса понятно, куда целиться — в сплош­ной чёр­ный пря­мо­уголь­ник. Кнопка на экране — такая же оче­вид­ная цель.

Но ино­гда объ­ект на экране состоит из частей: заго­ловка, подпи­си, иконки, даты. Когда чело­век видит такое созвез­дие, воз­ни­кает вопрос: нажи­ма­ется ли оно цели­ком или есть звёзды‑исключения?

Если сде­лать назва­ние руб­рики «Пси­хо­ло­гия» под заго­лов­ком ссыл­кой на эту руб­рику, оши­бок не избе­жать. Заго­ло­вок вме­сте с под­пи­сью вос­при­ни­ма­ются как еди­ный объект.

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

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

Сле­дует оста­вить одну ссылку, потому что объ­ект — один.

«Психология» не должна быть ссылкой на рубрику

Заголовок комментария в «Живом журнале»

Один объект — одна ссылка

В эксперименте Фиттса понятно, куда целиться — в сплошной чёрный прямоугольник. Кнопка на экране — такая же очевидная цель.

Но иногда объект на экране состоит из частей: заголовка, подписи, иконки, даты. Когда человек видит такое созвездие, возникает вопрос: нажимается ли оно целиком или есть звёзды‑исключения?

Если сделать название рубрики «Психология» под заголовком ссылкой на эту рубрику, ошибок не избежать. Заголовок вместе с подписью воспринимаются как единый объект.

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

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

Следует оставить одну ссылку, потому что объект — один.

Почтовый клиент «Гмейл»

Част­ный слу­чай пра­вила «Один объ­ект — одна ссылка» — строка таб­лицы. В списке писем ссылка на имени могла бы вести на все письма от чело­века, тема письма — на письмо, а дата — на все письма за день. Это было бы логично.

Но если раз­де­лить строку на такие части, перед кли­ком при­хо­ди­лось бы заду­мы­ваться, и без оши­бок бы не обо­ш­лось. Одна строка — это один объект.

Почтовый клиент «Гмейл»

Почтовый клиент «Гмейл»

Частный случай правила «Один объект — одна ссылка» — строка таблицы. В списке писем ссылка на имени могла бы вести на все письма от человека, тема письма — на письмо, а дата — на все письма за день. Это было бы логично.

Но если разделить строку на такие части, перед кликом приходилось бы задумываться, и без ошибок бы не обошлось. Одна строка — это один объект.

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

В сле­ду­ю­щей вер­сии дизайна нажи­ма­ются и назва­ния пере­дач, и каналы. Пере­дачи ведут на стра­ницу пере­дач, а каналы — на стра­ницу канала. Насту­пила пута­ница — кли­ка­ешь в строчку с пере­да­чей, а попа­да­ешь на канал. Ещё и отсут­ствует логика в визу­аль­ном оформ­ле­нии: ссылки не под­чёрк­нуты, цвета не свя­заны с поведением.

2011

2016

2011

2016

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

В следующей версии дизайна нажимаются и названия передач, и каналы. Передачи ведут на страницу передач, а каналы — на страницу канала. Наступила путаница — кликаешь в строчку с передачей, а попадаешь на канал. Ещё и отсутствует логика в визуальном оформлении: ссылки не подчёркнуты, цвета не связаны с поведением.

Клас­си­че­ские форумы злостно нару­шали пра­вило «Один объ­ект — одна ссылка».

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

«Они отдали себя общению». Артём Горбунов о форумах

Классические форумы злостно нарушали правило «Один объект — одна ссылка».

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

«Они отдали себя общению». Артём Горбунов о форумах

С дырами

Уведомлять физлиц о налоге, который с них не удержали, надо по‑новому

Без дыр

Уведомлять физлиц о налоге, который с них не удержали, надо по‑новому

Связанная проблема — «дырявые» цели. Часто встречаются ссылки, разбитые на несколько строк, у которых клик между строк не срабатывает.

Пока браузеры сами не научились «склеивать» такие ссылки в единую область, это приходится делать веб‑разработчикам.

Прокрутите медленно вверх и вниз мимо ссылок

С дырами

Уведомлять физлиц
о налоге, который с них
не удержали, надо 
по‑новому

Без дыр

Уведомлять физлиц
о налоге, который с них
не удержали, надо 
по‑новому

Свя­зан­ная про­блема — «дыря­вые» цели. Часто встре­ча­ются ссылки, раз­би­тые на несколько строк, у кото­рых клик между строк не срабатывает.

Пока бра­у­зеры сами не научи­лись «скле­и­вать» такие ссылки в еди­ную область, это при­хо­дится делать веб‑разработчикам.

Прокрутите медленно вверх и вниз мимо ссылок

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

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

Движение и клик — один жест

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

Пред­по­ло­жим, вы хотите перейти по ссылке в «Теле­граме». Вы уже уви­дели её в тек­сте и начали дви­гать мышь к ней.

Но пока вы ведёте кур­сор, под ним вдруг ока­зы­ва­ется всплы­ва­ю­щая панель стикеров.

Даже если вы успе­ва­ете её заме­тить, рука про­дол­жает «по инер­ции» вести мышь до того места, где была ссылка. В итоге вы кли­ка­ете и отправ­ля­ете стикер.

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

Движение и клик — один жест

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

Предположим, вы хотите перейти по ссылке в «Телеграме». Вы уже увидели её в тексте и начали двигать мышь к ней.

Но пока вы ведёте курсор, под ним вдруг оказывается всплывающая панель стикеров.

Даже если вы успеваете её заметить, рука продолжает «по инерции» вести мышь до того места, где была ссылка. В итоге вы кликаете и отправляете стикер.

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

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

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

Интернет‑банк «Альфа‑клик»

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

После клика видишь, что выпало меню, но браузер уже загружает следующую страницу. Теперь уже кликать бесполезно — жди, пока загрузится страница.

Интернет‑банк «Альфа‑клик»

Меню в опе­ра­ци­он­ной системе бывают многоуровневыми.

Уви­дев иско­мый пункт Color Balance в рас­пах­нув­шемся под­меню, поль­зо­ва­тель ведёт к нему кур­сор по крат­чай­шему пути, не заду­мы­ва­ясь о том, что на нём встре­ча­ются ненуж­ные ему пункты Layer Mask и Vector Mask.

Чтобы объ­е­хать эти пункты, при­ш­лось бы делать «ход конём» — сна­чала сдви­гать кур­сор гори­зон­тально вправо, а уже потом вести вниз. Но Мак ана­ли­зи­рует дви­же­ние и кор­ректно опре­де­ляет наме­ре­ние поль­зо­ва­теля: если доста­точно быстро дви­нуть кур­сор по диа­го­нали, под­меню не закроется.

Меню в операционной системе бывают многоуровневыми.

Увидев искомый пункт Color Balance в распахнувшемся подменю, пользователь ведёт к нему курсор по кратчайшему пути, не задумываясь о том, что на нём встречаются ненужные ему пункты Layer Mask и Vector Mask.

Чтобы объехать эти пункты, пришлось бы делать «ход конём» — сначала сдвигать курсор горизонтально вправо, а уже потом вести вниз. Но Мак анализирует движение и корректно определяет намерение пользователя: если достаточно быстро двинуть курсор по диагонали, подменю не закроется.

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

Разработчики двухуровневого меню «Амазона» также учли направление движения курсора. Если вести курсор вправо внутри выделенного треугольника, переключение на соседние пункты меню не происходит.

Влияние привычки

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

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

 

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

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

Всему своё место

Влияние привычки

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

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

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

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

Всему своё место

Информативность

Уменьшению шума соответствует общий закон минимизации конструкции, а добавлению сигнала — закон максимизации полезного действия.

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

Инфор­ма­тив­ность — это доля смыс­ло­вой части в общей длине сообщения.

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

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

Информативность

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

Информативность — это доля смысловой части в общей длине сообщения.

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

Из определения вытекают два способа повысить информативность: уменьшить шум и добавить сигнал.

Уменьшению шума соответствует общий закон минимизации конструкции, а добавлению сигнала — закон максимизации полезного действия.

1994

Нетскейп‑навигатор

2017

Сафари

Убрать всё лишнее

Нач­нём с при­ё­мов умень­ше­ния шума.

Окна в пер­вых гра­фи­че­ских интер­фей­сах содер­жали мно­же­ство рамок и теней.


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

1994

Нетскейп‑навигатор

Убрать всё лишнее

Начнём с приёмов уменьшения шума.

Окна в первых графических интерфейсах содержали множество рамок и теней.

2017

Сафари

В современных окнах рамок нет, а полосы прокрутки и строка состояния появляются только когда они нужны.

Было

Стало

Интер­фейс Айфона в ходе эво­лю­ции изба­вился от тек­стур и бликов.

Интерфейс Айфона в ходе эволюции избавился от текстур и бликов.

Было

Стало

Было

Стало

Есть

Станет

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

Нуж­ный поса­доч­ный в почте не найти из‑за мусора в темах писем. Если оста­вить только важ­ные пас­са­жиру дан­ные, письма можно будет даже не открывать.

Было

Стало

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

Есть

Станет

Нужный посадочный в почте не найти из‑за мусора в темах писем. Если оставить только важные пассажиру данные, письма можно будет даже не открывать.

На сай­тах встре­ча­ется «гра­дус­ник» — строчка ссы­лок на роди­тель­ские разделы.

Ссылка «Валенки» в начале этой строки — лиш­няя: она уже есть в основ­ном меню.

Текст «Валенки „Вьюга“» в конце тоже лиш­ний — он уже есть в заго­ловке страницы.

Когда оста­нутся только «Клас­си­че­ские → Шер­стя­ные», при­дёт время спро­сить, почему на сайте такая слож­ная иерархия.

На сайтах встречается «градусник» — строчка ссылок на родительские разделы.

Ссылка «Валенки» в начале этой строки — лишняя: она уже есть в основном меню.

Текст «Валенки „Вьюга“» в конце тоже лишний — он уже есть в заголовке страницы.

Когда останутся только «Классические → Шерстяные», придёт время спросить, почему на сайте такая сложная иерархия.

Было

  • Типы переплёта

  • Элементы переплёта

  • Воздействие переплёта на себестоимость издания

  • Расчёт размеров переплёта

Аркадий Мильчин и Людмила Чельцова.
Справочник издателя и автора

Стало

Переплёт

  • типы

  • элементы

  • воздействие на себестоимость издания

  • расчёт размеров

Вынести за скобки

В книж­ном алфа­вит­ном ука­за­теле не повто­ряют одно и то же слово, даже если оно встре­ча­ется в раз­ных разделах.


В резуль­тате выне­се­ния заго­ловка «за скобки», он один стал выпол­нять функ­цию четы­рёх слов.

Было

  • Типы переплёта

  • Элементы переплёта

  • Воздействие переплёта на себестоимость издания

  • Расчёт размеров переплёта

Аркадий Мильчин и Людмила Чельцова.
Справочник издателя и автора

Вынести за скобки

В книжном алфавитном указателе не повторяют одно и то же слово, даже если оно встречается в разных разделах.

Стало

Переплёт

  • типы

  • элементы

  • воздействие на себестоимость издания

  • расчёт размеров

В результате вынесения заголовка «за скобки», он один стал выполнять функцию четырёх слов.

Нет

Да

За скобки выно­сится всё, что повто­ря­ется: место­име­ние «мой», тип доку­мента ПДФ.

Нет

Да

Нет

Да

За скобки выносится всё, что повторяется: местоимение «мой», тип документа ПДФ.

Нет

Да

В рас­пи­са­нии заня­тий в Школе ста­жё­ров выне­сен за скобку повто­ря­ю­щийся месяц в колонке дат.

Выне­се­ние за скобку — приём, кото­рый легко объ­яс­нить. Но он почему‑то с тру­дом даётся начи­на­ю­щим дизайнерам.

В расписании занятий в Школе стажёров вынесен за скобку повторяющийся месяц в колонке дат.

Вынесение за скобку — приём, который легко объяснить. Но он почему‑то с трудом даётся начинающим дизайнерам.

Соединить информационные функции

В сере­дине 2000‑х ско­ро­сти интер­нета стало хва­тать для музыки. На сай­тах появи­лись виджеты‑авто­маг­ни­толы на тех­но­ло­гии Флеш. Если пла­гин Флеша не был уста­нов­лен у поль­зо­ва­теля, на месте пле­ера была пустота. Эти виджеты выгля­дели сложно и тяже­ло­весно, неко­то­рые даже под­дер­жи­вали плейлисты.

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

В пле­ере обя­за­тельны назва­ние песни и кнопка воспроизведения.

Полез­ное дей­ствие пле­ера — в полу­че­нии тра­фика с сай­тов поль­зо­ва­те­лей, поэтому сде­лаем назва­ние песни ссыл­кой на её страницу.

Важно доба­вить инди­ка­тор поло­же­ния. Как сде­лать это, не добав­ляя новый эле­мент? У нас уже есть под­чёр­ки­ва­ние ссылки, исполь­зуем его.

Во время под­грузки песни на мед­лен­ном интер­нете сде­лаем линию волнистой.

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

Бла­го­даря ком­пакт­но­сти и строч­ному фор­мату появи­лась воз­мож­ность встав­лять виджет прямо в текст.

Тех­ни­че­ски виджет был реа­ли­зо­ван как скрипт, кото­рый один раз под­клю­чался в любой блог или на сайт и пре­вра­щал в пле­еры ссылки на песни «Вебо­рамы». Если у поль­зо­ва­теля не было Флеша, ссылки про­дол­жали рабо­тать стандартно.

Было

Стало

Стало

Стало

Стало

Стало

Стало

Стало

Было

Стало

Было

Стало

Было

Стало

Было

Стало

Было

Стало

Было

Стало

Было

Стало

Соединить информационные функции

В середине 2000‑х скорости интернета стало хватать для музыки. На сайтах появились виджеты‑автомагнитолы на технологии Флеш. Если плагин Флеша не был установлен у пользователя, на месте плеера была пустота. Эти виджеты выглядели сложно и тяжеловесно, некоторые даже поддерживали плейлисты.

В бюро проектировали музыкальный сервис «Веборама», в том числе — плеер для размещения на других сайтах. Мы начали с чистого листа и радикально упростили дизайн без ущерба для функциональности.

В плеере обязательны название песни и кнопка воспроизведения.

Полезное действие плеера — в получении трафика с сайтов пользователей, поэтому сделаем название песни ссылкой на её страницу.

Важно добавить индикатор положения. Как сделать это, не добавляя новый элемент? У нас уже есть подчёркивание ссылки, используем его.

Во время подгрузки песни на медленном интернете сделаем линию волнистой.

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

Благодаря компактности и строчному формату появилась возможность вставлять виджет прямо в текст.

Технически виджет был реализован как скрипт, который один раз подключался в любой блог или на сайт и превращал в плееры ссылки на песни «Веборамы». Если у пользователя не было Флеша, ссылки продолжали работать стандартно.

Все­гда стоит поду­мать, как наде­лить новой функ­цией суще­ству­ю­щий эле­мент, а не вво­дить новый.

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

Кадр презентации «Эпла», 2012

Всегда стоит подумать, как наделить новой функцией существующий элемент, а не вводить новый.

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

Кадр презентации «Эпла», 2012

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

В бра­у­зере Сафари были сов­ме­щены про­гресс­бар и адрес­ная строка.

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

В браузере Сафари были совмещены прогрессбар и адресная строка.

Прин­цип рабо­тает и за пре­де­лами поль­зо­ва­тель­ского интерфейса.

Плохо

Хорошо

В Ека­те­рин­бурге над све­то­фо­ром уста­нов­лена отдель­ная сек­ция для обрат­ного отсчёта.

В Челя­бин­ске время отсчи­ты­ва­ется в уже име­ю­щейся сек­ции крас­ного света.

Принцип работает и за пределами пользовательского интерфейса.

Плохо

В Екатеринбурге над светофором установлена отдельная секция для обратного отсчёта.

Хорошо

В Челябинске время отсчитывается в уже имеющейся секции красного света.

Здесь для ука­за­ния выхода исполь­зу­ется две пик­то­граммы: «вправо» и «вниз по лест­нице». При­чём на обеих есть стрелка вправо.

На двери «Ковор­кафе» стрелка и лест­ница собраны в один знак, одно­значно чита­ю­щийся как «налево и вниз по лестнице».

Здесь для указания выхода используется две пиктограммы: «вправо» и «вниз по лестнице». Причём на обеих есть стрелка вправо.

На двери «Коворкафе» стрелка и лестница собраны в один знак, однозначно читающийся как «налево и вниз по лестнице».

Добавить сигнал

Мы рас­смот­рели при­ёмы умень­ше­ния шума. Теперь о том, как доба­вить полез­ную инфор­ма­цию — «сиг­нал». Хоро­шая про­грамма не про­сто пред­ла­гает обно­виться, но и рас­ска­зы­вает, что изме­ни­лось в новой версии.


Цен­ник внутри кнопки «Купить» помо­гает при­нять реше­ние о покупке:

Иногда вообще достаточно цены без глагола

Добавить сигнал

Мы рассмотрели приёмы уменьшения шума. Теперь о том, как добавить полезную информацию — «сигнал». Хорошая программа не просто предлагает обновиться, но и рассказывает, что изменилось в новой версии.

Ценник внутри кнопки «Купить» помогает принять решение о покупке:

Иногда вообще достаточно цены без глагола

Дизай­нер Вла­ди­мир Зимин в каче­стве учеб­ного зада­ния сде­лал интер­фейс хра­ни­лища доку­мен­тов. Слева — спи­сок доку­мен­тов и их полей.

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

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

Дизайнер Владимир Зимин в качестве учебного задания сделал интерфейс хранилища документов. Слева — список документов и их полей.

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

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

Было

Стало

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

Такое «ожив­ле­ние» ико­нок — тоже при­мер повы­ше­ния информативности.

Было

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

Стало

Такое «оживление» иконок — тоже пример повышения информативности.

В конце стра­ницы резуль­та­тов поиска Яндекса когда‑то было три группы ссы­лок — на реги­оны, руб­рики и дру­гие поис­ко­вые системы.

Во время реди­зайна сна­чала «Поис­кать» вынесли за скобку.

А потом инфор­ма­тив­ность заго­ловка повы­сили добав­ле­нием сиг­нала — текст запроса «Пушкин».

В конце страницы результатов поиска Яндекса когда‑то было три группы ссылок — на регионы, рубрики и другие поисковые системы.

Во время редизайна сначала «Поискать» вынесли за скобку.

А потом информативность заголовка повысили добавлением сигнала — текст запроса «Пушкин».

2008

2010

2017

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

Насто­я­щие дан­ные ста­ра­ется пока­зы­вать в своих плит­ках Виндоус‑фон.

На Айфоне живые только часы и кален­дарь, при­чём часы научи­лись ходить только в Ай‑ОСе 7. Веро­ятно, исто­ри­че­ски это свя­зано с эко­но­мией вычис­ли­тель­ных ресур­сов и трафика.

2008

2010

2017

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

Настоящие данные старается показывать в своих плитках Виндоус‑фон.

На Айфоне живые только часы и календарь, причём часы научились ходить только в Ай‑ОСе 7. Вероятно, исторически это связано с экономией вычислительных ресурсов и трафика.

Миф о семи элементах

«Пра­вило семи эле­мен­тов» — заблуж­де­ние, воз­ник­шее из‑за непра­виль­ной интер­пре­та­ции работы аме­ри­кан­ского пси­хо­лога Джор­джа Мил­лера (1920⁠—2012).

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

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

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

В меню про­грамм «Мик­ро­софт‑офиса 2000» отоб­ра­жа­лось только несколько часто исполь­зу­е­мых пунк­тов, а осталь­ные можно было уви­деть только нажав на стре­лочки снизу.

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

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

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

Миф о семи элементах

«Правило семи элементов» — заблуждение, возникшее из‑за неправильной интерпретации работы американского психолога Джорджа Миллера (1920⁠—2012).

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

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

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

В меню программ «Микрософт‑офиса 2000» отображалось только несколько часто используемых пунктов, а остальные можно было увидеть только нажав на стрелочки снизу.

«Правило семи элементов» считалось чуть ли не аксиомой: проектировщики интерфейсов были уверены, что в любом меню должно быть не больше семи пунктов, в тулбаре — не больше семи кнопок. И для достижения этой цели объединяли пункты в один или просто прятали.

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

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

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

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

«Пра­вило семи эле­мен­тов» встаёт в один ряд с дру­гими «золо­тыми пра­ви­лами» юза­би­лити: пра­вило двух секунд, пра­вило трёх кли­ков, пра­вило 80/20.

Сам Джордж Мил­лер писал, что из его работы никак не выте­кает, что Мои­сею сле­до­вало бы убрать три запо­веди. А Эдвард Тафти у себя на сайте зада­ётся вопро­сом: «Как исполь­зо­вать „пра­вило семи эле­мен­тов“ в дизайне теле­фон­ного справочника?».

«Пра­вило семи эле­мен­тов» полезно только если в интер­фейсе вы вслед за Мил­ле­ром застав­ля­ете людей запо­ми­нать и повто­рять бессмыслицу.

О маленьких мотелях и других жертвах мифа — на сайте Эдварда Тафти: «Волшебное число семь: неприменимо к дизайну»

Участники экспериментов Миллера запоминали и повторяли белиберду. В реальной жизни специалисты работают с большими объёмами осмысленной и связанной информации.

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

«Правило семи элементов» встаёт в один ряд с другими «золотыми правилами» юзабилити: правило двух секунд, правило трёх кликов, правило 80/20.

Сам Джордж Миллер писал, что из его работы никак не вытекает, что Моисею следовало бы убрать три заповеди. А Эдвард Тафти у себя на сайте задаётся вопросом: «Как использовать „правило семи элементов“ в дизайне телефонного справочника?».

«Правило семи элементов» полезно только если в интерфейсе вы вслед за Миллером заставляете людей запоминать и повторять бессмыслицу.

О маленьких мотелях и других жертвах мифа — на сайте Эдварда Тафти: «Волшебное число семь: неприменимо к дизайну»

Тест

Перед вами фрагмент рубрикатора на сайте. Расстояние между некоторыми строками меньше стандартного. А как должно быть?

Расстояние между всеми строками должно быть одинаковым
Расстояние между всеми строками должно быть одинаковым, но допускается лишь сделать отступ между группами по начальным буквам: Н, О, П, Р
Здесь всё в порядке с расстояниями между строками

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

Что влияет на воспринимаемую человеком связь между элементами интерфейса?

Расстояние между элементами
Выравнивание элементов относительно друг друга
Цвет, размер и форма

Связанными кажутся элементы, стоящие рядом, выровненные друг с другом, одинакового цвета, размера и формы.

Какие проблемы видите в форме поиска?

Отступы между элементами слишком маленькие, Фиттс недоволен
Радиокнопки размещены в строку, а не в столбец
Радиокнопки кажутся связанными с чекбоксами под ними
Это пример технозависимости
Подписи чекбоксов должны находиться слева, а не справа от них

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

Выберите наилучший вариант компоновки формы входа.

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

Расположите области в порядке увеличения времени прицеливания при помощи мыши.

Точка под курсором, затем центр экрана, затем пункты выпадающего меню
Центр экрана, затем углы текущего окна, затем углы экрана
Точка под курсором, затем углы экрана, затем точки на его сторонах
Меню приложения, затем углы экрана, затем активное окно

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

Укажите на недостатки в этом интерфейсе настройки повторения событий в календаре.

Чекбоксы дней недели стоят ближе к чужим подписям‑буквам, чем к своим, из‑за чего не сразу понятно, какой день недели сейчас отмечен
Радиокнопка On находится на увеличенном расстоянии от предыдущих, из‑за чего может показаться, что она самостоятельна
Кнопки подтверждения и отмены слишком близко друг к другу. С точки зрения закона Фиттса, слишком легко случайно потерять введённые параметры
Слово Repeat используется четырежды, не вынесено за скобку

Тут плохо всё: чекбоксы стоят рядом с чужими подписями, радиокнопка On «отвалилась», итоговые кнопки слишком близки друг к другу, слово Repeat повторяется слишком часто.

У каждого товара в каталоге интернет‑магазина «Корзиночка» была указана цена и повторялась кнопка «Купить». При редизайне цену товара поставили на кнопку вместо слова «Купить». Как это сказалось на информативности?

Никак
Информативность снизилась, зато стало лучше с точки зрения эстетики
Информативность повысилась, но стало хуже с точки зрения «взгляда новичка»

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

Как повысить информативность таблицы истории заказов?

Показать сразу, какие товары входили в заказ
Сгруппировать заказы по статусу, чтобы не писать его у каждого
Убрать слова «Посмотреть», сделав ссылкой номер заказа
Убрать номер заказа

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

При наведении на сноску в Википедии всплывают такие пояснения. Какая тут проблема?

Никакой
Она гаснет сама при убирании мыши, а должна быть кнопка «Закрыть подсказку»
Всплывающий элемент помешает нажать на закрытые им ссылки

Всплывающий элемент помешает нажать на закрытые им ссылки. А если бы была ещё и кнопка «Закрыть подсказку», это было бы наказанием за неосторожные движения.

Что не так с «правилом семи элементов»?

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

Исследование Джорджа Миллера, из которого возник миф о семи элементов, не имеет отношения к дизайну интерфейса, о чём говорил и сам Миллер. Исследование не говорит о количестве пунктов меню, и его невозможно «соблюдать».

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Перед вами фрагмент рубрикатора на сайте. Расстояние между некоторыми строками меньше стандартного. А как должно быть?

Расстояние между всеми строками должно быть одинаковым
Расстояние между всеми строками должно быть одинаковым, но допускается лишь сделать отступ между группами по начальным буквам: Н, О, П, Р
Здесь всё в порядке с расстояниями между строками

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

Что влияет на воспринимаемую человеком связь между элементами интерфейса?

Расстояние между элементами
Выравнивание элементов относительно друг друга
Цвет, размер и форма

Связанными кажутся элементы, стоящие рядом, выровненные друг с другом, одинакового цвета, размера и формы.

Какие проблемы видите в форме поиска?

Отступы между элементами слишком маленькие, Фиттс недоволен
Радиокнопки размещены в строку, а не в столбец
Радиокнопки кажутся связанными с чекбоксами под ними
Это пример технозависимости
Подписи чекбоксов должны находиться слева, а не справа от них

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

Выберите наилучший вариант компоновки формы входа.

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

Расположите области в порядке увеличения времени прицеливания при помощи мыши.

Точка под курсором, затем центр экрана, затем пункты выпадающего меню
Центр экрана, затем углы текущего окна, затем углы экрана
Точка под курсором, затем углы экрана, затем точки на его сторонах
Меню приложения, затем углы экрана, затем активное окно

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

Укажите на недостатки в этом интерфейсе настройки повторения событий в календаре.

Чекбоксы дней недели стоят ближе к чужим подписям‑буквам, чем к своим, из‑за чего не сразу понятно, какой день недели сейчас отмечен
Радиокнопка On находится на увеличенном расстоянии от предыдущих, из‑за чего может показаться, что она самостоятельна
Кнопки подтверждения и отмены слишком близко друг к другу. С точки зрения закона Фиттса, слишком легко случайно потерять введённые параметры
Слово Repeat используется четырежды, не вынесено за скобку

Тут плохо всё: чекбоксы стоят рядом с чужими подписями, радиокнопка On «отвалилась», итоговые кнопки слишком близки друг к другу, слово Repeat повторяется слишком часто.

У каждого товара в каталоге интернет‑магазина «Корзиночка» была указана цена и повторялась кнопка «Купить». При редизайне цену товара поставили на кнопку вместо слова «Купить». Как это сказалось на информативности?

Никак
Информативность снизилась, зато стало лучше с точки зрения эстетики
Информативность повысилась, но стало хуже с точки зрения «взгляда новичка»

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

Как повысить информативность таблицы истории заказов?

Показать сразу, какие товары входили в заказ
Сгруппировать заказы по статусу, чтобы не писать его у каждого
Убрать слова «Посмотреть», сделав ссылкой номер заказа
Убрать номер заказа

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

При наведении на сноску в Википедии всплывают такие пояснения. Какая тут проблема?

Никакой
Она гаснет сама при убирании мыши, а должна быть кнопка «Закрыть подсказку»
Всплывающий элемент помешает нажать на закрытые им ссылки

Всплывающий элемент помешает нажать на закрытые им ссылки. А если бы была ещё и кнопка «Закрыть подсказку», это было бы наказанием за неосторожные движения.

Что не так с «правилом семи элементов»?

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

Исследование Джорджа Миллера, из которого возник миф о семи элементов, не имеет отношения к дизайну интерфейса, о чём говорил и сам Миллер. Исследование не говорит о количестве пунктов меню, и его невозможно «соблюдать».

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

Обратная связь

В челя­бин­ском поч­то­вом отде­ле­нии № 80 рабо­тает элек­трон­ная оче­редь. У входа стоит машинка с един­ствен­ной кноп­кой. Нажи­ма­ешь кнопку, и через две секунды на чеко­вой ленте печа­та­ется номерок.

Эти две секунды — целая веч­ность. Мно­гие решают, что кнопка не сра­бо­тала, и жмут ещё раз. Рядом с машин­кой все­гда валя­ются «лиш­ние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажа­тие — изда­вала звук или мигала лам­поч­кой — такой про­блемы бы не было.

Обратная связь

В челябинском почтовом отделении № 80 работает электронная очередь. У входа стоит машинка с единственной кнопкой. Нажимаешь кнопку, и через две секунды на чековой ленте печатается номерок.

Эти две секунды — целая вечность. Многие решают, что кнопка не сработала, и жмут ещё раз. Рядом с машинкой всегда валяются «лишние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажатие — издавала звук или мигала лампочкой — такой проблемы бы не было.

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

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

Ком­пью­тер заме­няет сим­волы пароля точками.

Чтобы скрыть пароль, доста­точно было бы про­сто ничего не выво­дить, как это про­ис­хо­дит в команд­ной строке.

Но появ­ля­ю­щи­еся по мере ввода точки гово­рят поль­зо­ва­телю, что сим­волы вво­дятся, про­грамма не зависла.

Обратная связь при вводе пароля

Нет обратной связи

Обратная связь при вводе пароля

Нет обратной связи

Действия пользователя должны вызывать в интерфейсе адекватную и заметную реакцию — обратную связь.

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

Компьютер заменяет символы пароля точками.

Чтобы скрыть пароль, достаточно было бы просто ничего не выводить, как это происходит в командной строке.

Но появляющиеся по мере ввода точки говорят пользователю, что символы вводятся, программа не зависла.

Интер­нет‑мага­зин «Сам­сунга» одним из пер­вых научился добав­лять товары в кор­зину без пере­за­грузки стра­ницы. Но если сде­лать это «молча», чело­век пару раз нажмёт кнопку, решит, что сайт не рабо­тает, и уйдёт, оста­вив в кор­зине два холодильника.

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

Интернет‑магазин «Самсунга» одним из первых научился добавлять товары в корзину без перезагрузки страницы. Но если сделать это «молча», человек пару раз нажмёт кнопку, решит, что сайт не работает, и уйдёт, оставив в корзине два холодильника.

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

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

В одно­за­дач­ной среде ани­ма­ция была частью цикла работы про­граммы. Если про­грамма висла, «вра­ще­ние» пре­кра­ща­лось, и поль­зо­ва­тель нажи­мал «Ресет».

С помощью анимации компьютер показывает, что работает. Без неё пользователь мог бы не дождаться завершения длительной операции, решив, что компьютер завис.

В однозадачной среде анимация была частью цикла работы программы. Если программа висла, «вращение» прекращалось, и пользователь нажимал «Ресет».

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

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

При загрузке Айфона ника­кой ани­ма­ции нет, про­сто в цен­тре экрана нари­со­вано яблоко:

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

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

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

При загрузке Айфона никакой анимации нет, просто в центре экрана нарисовано яблоко:

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

Виндоус 95

Для отоб­ра­же­ния сте­пени завер­шён­но­сти исполь­зуют про­гресс­бары.

В Вин­до­усе 95 про­гресс­бар был раз­де­лён на сег­менты. Если про­гресс надолго зами­рал на одном сег­менте, о дви­же­нии оста­ва­лось судить по анимации.

Макос Леопард, 2007

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

Полезно также пока­зать остав­ше­еся до конца про­цесса время.

Виндоус 95

Для отображения степени завершённости используют прогрессбары.

В Виндоусе 95 прогрессбар был разделён на сегменты. Если прогресс надолго замирал на одном сегменте, о движении оставалось судить по анимации.

Макос Леопард, 2007

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

Полезно также показать оставшееся до конца процесса время.

Айтюнс

Айфон

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

Айтюнс

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

Айфон

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

Это окно Фото­шопа, кото­рое мы обсуж­дали в главе «При­вычка», похоже на нака­за­ние. Доста­точно сооб­щить о про­изо­шед­шем в строке состо­я­ния, и не тре­бо­вать нажа­тия кнопки OK.

Обратная связь не должна быть слишком грубой. Если каждое добавление в корзину сопровождать появлением диалогового окна, покупателю это быстро надоест.

Это окно Фотошопа, которое мы обсуждали в главе «Привычка», похоже на наказание. Достаточно сообщить о произошедшем в строке состояния, и не требовать нажатия кнопки OK.

Когда поль­зо­ва­тель оши­ба­ется в пароле, Эгея не выво­дит сооб­ще­ние об ошибке, а про­сто «пока­чи­вает» полем ввода, как бы говоря «нет». Кур­сор оста­ётся в поле, испра­вить ошибку легко.

Движок блога «Эгея»

Когда пользователь ошибается в пароле, Эгея не выводит сообщение об ошибке, а просто «покачивает» полем ввода, как бы говоря «нет». Курсор остаётся в поле, исправить ошибку легко.

Движок блога «Эгея»

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

Вин­доус при невоз­мож­но­сти пере­тас­ки­ва­ния пока­зы­вает кукиш в виде зачёрк­ну­того курсора:

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

Виндоус при невозможности перетаскивания показывает кукиш в виде зачёркнутого курсора:

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

Возвращаться пока некуда

Делиться нечем —
файл не выбран

Если кнопка не может быть нажата по какой‑то при­чине, она должна быть отклю­чена. Веб‑стра­ница не должна содер­жать ссы­лок на саму себя.

Обратная связь иногда сводится к сообщению: «не вышло». Какой нежной её ни делай, она будет раздражать несвоевременностью: лишь после действия узнаёшь о его бессмысленности или ошибочности. Хороший интерфейс предотвращает такие действия.

Возвращаться пока некуда

Делиться нечем —
файл не выбран

Если кнопка не может быть нажата по какой‑то причине, она должна быть отключена. Веб‑страница не должна содержать ссылок на саму себя.

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

В про­стой форме доста­точно отклю­чать кнопку отправки до заполнения.

См. также:

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

В простой форме достаточно отключать кнопку отправки до заполнения.

См. также:

Заставка при загрузке редактора «Ворд»

Мгновенность

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

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

Заставка при загрузке редактора «Ворд»

Мгновенность

Люди не любят медленные программы. Но ощущение скорости зависит в первую очередь от качества обратной связи. Ускорить программу можно не всегда, но сделать, чтобы она казалась быстрее — почти всегда.

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

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

Работа студента‑дизайнера

Терминалу оплаты для выполнения команды нужно связаться с сервером по медленному интернету. Но он мгновенно отвечает на команду «Далее» хотя бы тем, что показывает индикатор загрузки.

Работа студента‑дизайнера

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

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

Инста­грам сна­чала пока­зы­вает цве­то­вые пятна фотографий.

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

Заглушка инфор­ма­тив­нее заставки: пока поль­зо­ва­тель смот­рит на неё, он пони­мает, как устроен экран и гото­вится к сле­ду­ю­щему действию.

Первым делом — обратная связь

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

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

Инстаграм сначала показывает цветовые пятна фотографий.

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

Заглушка информативнее заставки: пока пользователь смотрит на неё, он понимает, как устроен экран и готовится к следующему действию.

Первым делом — обратная связь

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

Из‑за такой ошибки в интер­фейсе Изда­тель­ства Бюро Гор­бу­нова слу­чи­лась непри­ят­ная исто­рия. Один из чита­те­лей попро­сил пре­кра­тить его под­писку. Сотруд­ник изда­тель­ства нажал на кнопку «Отпи­сать», и про­грамма мгно­венно под­твер­дила. Но ока­за­лось, что в этот момент у него слу­чился пере­бой интер­нета и команда не дошла до сер­вера. При­ш­лось изви­няться перед чита­те­лем, когда в сле­ду­ю­щем месяце у него вновь спи­са­лись деньги.

В поч­то­вой про­грамме Айфона звук отправ­лен­ного письма сна­чала изда­вался, когда письмо в дей­стви­тель­но­сти ухо­дило. В одной из вер­сий это пове­де­ние изме­ни­лось: звук стал изда­ваться при нажа­тии кнопки «Отправить».

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

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

Из‑за такой ошибки в интерфейсе Издательства Бюро Горбунова случилась неприятная история. Один из читателей попросил прекратить его подписку. Сотрудник издательства нажал на кнопку «Отписать», и программа мгновенно подтвердила. Но оказалось, что в этот момент у него случился перебой интернета и команда не дошла до сервера. Пришлось извиняться перед читателем, когда в следующем месяце у него вновь списались деньги.

В почтовой программе Айфона звук отправленного письма сначала издавался, когда письмо в действительности уходило. В одной из версий это поведение изменилось: звук стал издаваться при нажатии кнопки «Отправить».

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

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

Поэтому Эпл реко­мен­дует мгно­венно отве­чать «При­нято!», как бы раз­ре­шая чело­веку опу­стить руку и вер­нуться к своим делам. Если в итоге команду выпол­нить не удастся, часы сооб­щат об этом отдельно.

Подоб­ную инди­ка­цию можно реко­мен­до­вать везде, где дли­тель­ное смот­ре­ние на экран неудобно или неже­ла­тельно, ска­жем, в авто­мо­биль­ном навигаторе.

Мгновенно, но без обмана

Из презентации «Эпла»

Из презентации «Эпла»

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

Поэтому Эпл рекомендует мгновенно отвечать «Принято!», как бы разрешая человеку опустить руку и вернуться к своим делам. Если в итоге команду выполнить не удастся, часы сообщат об этом отдельно.

Подобную индикацию можно рекомендовать везде, где длительное смотрение на экран неудобно или нежелательно, скажем, в автомобильном навигаторе.

Мгновенно, но без обмана

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Непрерывность

Хоро­ший интер­фейс даёт мгно­вен­ную и непре­рыв­ную обрат­ную связь.

Для мас­шта­би­ро­ва­ния ста­рых раст­ро­вых карт Гугля исполь­зо­вался дис­крет­ный пол­зу­нок (слай­дер), но интер­фейс созда­вал иллю­зию плав­ного мас­шта­би­ро­ва­ния. Во‑пер­вых, плавно (хотя и с низ­ким каче­ством) мас­шта­би­ро­вался исход­ный кусок карты. Во‑вто­рых, самому пол­зунку было поз­во­лено дви­гаться плавно.

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

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Непрерывность

Хороший интерфейс даёт мгновенную и непрерывную обратную связь.

Для масштабирования старых растровых карт Гугля использовался дискретный ползунок (слайдер), но интерфейс создавал иллюзию плавного масштабирования. Во‑первых, плавно (хотя и с низким качеством) масштабировался исходный кусок карты. Во‑вторых, самому ползунку было позволено двигаться плавно.

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

Тре­бо­ва­ние непре­рыв­но­сти — более силь­ное, чем тре­бо­ва­ние мгно­вен­но­сти. Непре­рыв­ная мгно­вен­ная обрат­ная связь даётся не в момент окон­ча­тель­ной уста­новки зна­че­ния пара­метра, а непо­сред­ственно и посто­янно в про­цессе его изменения.

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

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

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

Перетаскивание окна в Виндоусе 3.1, 1990

Перетаскивание окна в Виндоусе 3.1, 1990

Требование непрерывности — более сильное, чем требование мгновенности. Непрерывная мгновенная обратная связь даётся не в момент окончательной установки значения параметра, а непосредственно и постоянно в процессе его изменения.

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

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

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

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

Фото­шоп пока­зы­вает, как сра­бо­тает эффект, ещё до того, как отпу­стишь кнопку мыши, и тем более до того, как нажмёшь OK.

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

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

Фотошоп показывает, как сработает эффект, ещё до того, как отпустишь кнопку мыши, и тем более до того, как нажмёшь OK.

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

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

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

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

Слово «калькулятор» направляет дизайнеров на ложный путь. На самом деле человеку нужно не рассчитать конкретное значение, а разобраться в многомерном мире вариантов, понять взаимосвязь величин, оценить влияние каждой на результат. Интерфейс с полями такой возможности не даёт.

Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)

Этот поль­ский банк дога­дался исполь­зо­вать пол­зунки и пере­счи­ты­вать резуль­таты «на лету». Диа­па­зоны допу­сти­мых зна­че­ний одних вели­чин меня­ются при изме­не­нии дру­гих — так чело­век может уви­деть, что по усло­виям банка чем старше авто­мо­биль, тем на мень­шее число пла­те­жей можно раз­бить пога­ше­ние кре­дита. Без мгно­вен­ной обрат­ной связи уви­деть это было бы сложно.

Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)

Этот польский банк догадался использовать ползунки и пересчитывать результаты «на лету». Диапазоны допустимых значений одних величин меняются при изменении других — так человек может увидеть, что по условиям банка чем старше автомобиль, тем на меньшее число платежей можно разбить погашение кредита. Без мгновенной обратной связи увидеть это было бы сложно.

Каль­ку­ля­тор вкла­дов «Связ­ного банка» соче­тает удоб­ство пол­зун­ков с точ­но­стью чис­ло­вых полей. Если кли­ент хочет рас­счи­тать ито­го­вую сумму кон­крет­ного вклада, он вво­дит пара­метры в тек­сто­вые поля, рас­по­ло­жен­ные «внутри» ползунков.

Ползунок превращается в поле при клике

Калькулятор вкладов «Связного банка» сочетает удобство ползунков с точностью числовых полей. Если клиент хочет рассчитать итоговую сумму конкретного вклада, он вводит параметры в текстовые поля, расположенные «внутри» ползунков.

Ползунок превращается в поле при клике

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

До 2016

С 2016

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

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

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

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

До 2016

С 2016

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

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

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

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

Подоб­ные арха­ич­ные листалки до сих пор встре­ча­ются в про­дви­ну­тых изда­ниях и интер­нет‑мага­зи­нах. «Арс‑тех­ника» раз­би­вает на стра­ницы длин­ные обзоры, «Ламода» — раз­делы ката­лога одежды.

Ламода

Осо­бая глу­пость — выбор того, по сколько эле­мен­тов на стра­нице показывать:

Подобные архаичные листалки до сих пор встречаются в продвинутых изданиях и интернет‑магазинах. «Арс‑техника» разбивает на страницы длинные обзоры, «Ламода» — разделы каталога одежды.

Ламода

Особая глупость — выбор того, по сколько элементов на странице показывать:

Необя­за­тельно, чтобы на всех стра­ни­цах было поровну элементов.

Пла­тья на сайте «Мэри Трю­фель» раз­де­лены по силуэтам.

Необязательно, чтобы на всех страницах было поровну элементов.

Платья на сайте «Мэри Трюфель» разделены по силуэтам.

При сор­ти­ровке по дате стоит и листать по датам.

Меня­ется сор­ти­ровка — меня­ется и листалка.

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

Напри­мер, даже если общий прин­цип листалки — по дням, но запи­сей всего три и сде­ланы они в раз­ные дни, их стоит выве­сти на одной странице.

При сортировке по дате стоит и листать по датам.

Меняется сортировка — меняется и листалка.

Хороший тон — обрабатывать случаи, когда для появления листалки недостаточно записей. Тогда интерфейс до упора «сопротивляется» появлению листалки.

Например, даже если общий принцип листалки — по дням, но записей всего три и сделаны они в разные дни, их стоит вывести на одной странице.

Как раз­де­лить на стра­ницы при­ло­же­ния на Айфоне — зави­сит от пользователя.

В ленте блога нет смыс­ло­вого деле­ния на стра­ницы и нуме­ра­ция бесполезна.

Как разделить на страницы приложения на Айфоне — зависит от пользователя.

В ленте блога нет смыслового деления на страницы и нумерация бесполезна.

Листалка фотографий в галерее КМ/Ч

Край­няя сте­пень деле­ния на стра­ницы по смыслу — по одному эле­менту информации.

Листалка по платьям «Мэри Трюфеля»

Под­хо­дит, когда эле­мент доста­точно само­сто­я­те­лен и объ­ё­мен, чтобы посвя­тить ему целый экран.

Тогда в листалке под­пи­сы­вают сами эле­менты. Мини­а­тюр­ные фото­гра­фии повы­шают информативность.

Листалка фотографий в галерее КМ/Ч

Крайняя степень деления на страницы по смыслу — по одному элементу информации.

Листалка по платьям «Мэри Трюфеля»

Подходит, когда элемент достаточно самостоятелен и объёмен, чтобы посвятить ему целый экран.

Тогда в листалке подписывают сами элементы. Миниатюрные фотографии повышают информативность.

Листалка по записям в блоге

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

Пользователь кликает на следующую фотографию в Фотораме

Фотографии перелистываются

Миниатюрные изображения сдвигаются, чтобы следующее оказалось под курсором

Пользователь кликает на следующую фотографию в Фотораме

Фотографии перелистываются

Фотографии перелистываются

Миниатюрные изображения сдвигаются, чтобы следующее оказалось под курсором

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

Часто листалку можно убрать, пока­зав всё содер­жи­мое на одном экране.

Пра­вила для поиска

…На стра­нице с резуль­та­тами поиска выво­дятся мини­мум 50 ссы­лок с кон­тек­стом или мини­мум 150 ссы­лок с одними заго­лов­ками. Листалки стра­ниц отме­ня­ются во всех слу­чаях, кроме сай­тов поис­ко­вых систем или ката­ло­гов, где прин­ци­пи­ально важно видеть все результаты.

При­мер: см. поиск на design.ru по запросу «дизайн».

Пра­вила для ново­стей и пресс‑релизов

На стра­нице с ново­стями выво­дятся или все ново­сти за исто­рию сайта, или все ново­сти за послед­ний год, или послед­ние 40 ново­стей раз­ме­ром в пару абзацев.

Раз­би­ва­ние ново­стей на месяцы и годы отме­ня­ется во всех слу­чаях, кроме новост­ных сайтов.

Артемий Лебедев. Квантование отменяется
Рассылка «Дизайн», 2005

Часто листалку можно убрать, показав всё содержимое на одном экране.

Правила для поиска

…На странице с результатами поиска выводятся минимум 50 ссылок с контекстом или минимум 150 ссылок с одними заголовками. Листалки страниц отменяются во всех случаях, кроме сайтов поисковых систем или каталогов, где принципиально важно видеть все результаты.

Пример: см. поиск на design.ru по запросу «дизайн».

Правила для новостей и пресс‑релизов

На странице с новостями выводятся или все новости за историю сайта, или все новости за последний год, или последние 40 новостей размером в пару абзацев.

Разбивание новостей на месяцы и годы отменяется во всех случаях, кроме новостных сайтов.

Артемий Лебедев. Квантование отменяется
Рассылка «Дизайн», 2005

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

Эле­мент управ­ле­ния про­крут­кой назы­ва­ется поло­сой про­крутки.

Здесь и ниже — кадры из исторического видео об элементах интерфейса

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

Элемент управления прокруткой называется полосой прокрутки.

Здесь и ниже — кадры из исторического видео об элементах интерфейса

Текстовый редактор «Браво»

Компьютер «Ксерокс Альто»

Полосы про­крутки при­ду­мали в 1974 году в цен­тре иссле­до­ва­ний Ксе­рокса. При под­ве­де­нии мыши к левому краю экрана, появ­лялся инди­ка­тор. Он пока­зы­вал, где в доку­менте нахо­дится пользователь.

Мышь была трёхкно­поч­ной. Левый клик в полосу про­крутки сдви­гал содер­жи­мое вверх, а пра­вый — вниз.

Раз­мер сдвига зави­сел от того, в какую часть полосы чело­век кли­кал. Клик в самый низ про­кру­чи­вал на целый экран, в сере­дину — на пол‑экрана, в самый верх — на одну строку.

Клик сред­ней кноп­кой мыши пере­ме­щал в область доку­мента, соот­вет­ству­ю­щую точке на самой полосе прокрутки.

Текстовый редактор «Браво»

Полосы прокрутки придумали в 1974 году в центре исследований Ксерокса. При подведении мыши к левому краю экрана, появлялся индикатор. Он показывал, где в документе находится пользователь.

Мышь была трёхкнопочной. Левый клик в полосу прокрутки сдвигал содержимое вверх, а правый — вниз.

Компьютер «Ксерокс Альто»

Размер сдвига зависел от того, в какую часть полосы человек кликал. Клик в самый низ прокручивал на целый экран, в середину — на пол‑экрана, в самый верх — на одну строку.

Клик средней кнопкой мыши перемещал в область документа, соответствующую точке на самой полосе прокрутки.

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

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

В Ксероксе отказались от разделения функций по левой и правой кнопкам мыши, заменив их на клики слева и справа от лифта, поэтому полоса прокрутки стала широкой

В Ксероксе отказались от разделения функций по левой и правой кнопкам мыши, заменив их на клики слева и справа от лифта, поэтому полоса прокрутки стала широкой

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

В Ксероксе придумали пропорциональные полосы прокрутки: доля, которую занимает на полосе прокрутки лифт, стала соответствовать доле, которую занимает видимая часть документа в общей его длине.

Система «Ксерокс‑Стар», 1981

Вправо полосы про­крутки пере­ехали в начале 80‑х.

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

Кнопки + и − пред­на­зна­ча­лись для листа­ния по страницам.

Система «Ксерокс‑Стар», 1981

Вправо полосы прокрутки переехали в начале 80‑х.

Для построчной прокрутки в сами полосы добавили кнопки‑стрелки. Верхняя мотала вверх, нижняя — вниз, как обычно. Но указывали они не направление движения пользователя по документу, а направление движения самого документа.

Кнопки + и − предназначались для листания по страницам.

В 1984 году Эпл в Макин­тоше пере­вер­нул стрелки и изба­вился от + и −, но забыл про про­пор­ци­о­наль­ный скрол­линг — лифт Макин­тоша был квад­рат­ным неза­ви­симо от длины документа.

Однако листа­ние оста­лось важ­ным част­ным слу­чаем про­крутки. На Макин­тоше для постра­нич­ного листа­ния исполь­зо­ва­лась шахта: клик в шахту над лиф­том при­во­дил к пере­ходу на стра­ницу вверх, под лиф­том — вниз.

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

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

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

Макинтош, 1984

Макинтош, 1984

В 1984 году Эпл в Макинтоше перевернул стрелки и избавился от + и −, но забыл про пропорциональный скроллинг — лифт Макинтоша был квадратным независимо от длины документа.

Однако листание осталось важным частным случаем прокрутки. На Макинтоше для постраничного листания использовалась шахта: клик в шахту над лифтом приводил к переходу на страницу вверх, под лифтом — вниз.

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

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

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

В «Нек­сте» в 1989 году полосы про­крутки стали про­пор­ци­о­наль­ными, снова ока­за­лись слева, а стрелки раз­ме­сти­лись рядом, а не на кон­цах полосы прокрутки.

Потом про­пор­ци­о­наль­ные полосы про­крутки появи­лись в Вин­до­усе 95.

На Маке про­пор­ци­о­наль­ные полосы появи­лись только в 2000 году, в системе ОС Х, осно­ван­ной на мно­гих тех­но­ло­гиях «Нек­ста». Опцию раз­ме­ще­ния стре­лок рядом Мак имел до тех пор, пока вообще пока­зы­вал эти стрелки. А при­ду­ман­ное в «Нек­сте» замед­лен­ное тас­ка­ние лифта с нажа­тым «Аль­том» рабо­тает на Маке и в 2017 году.

Но Мак уна­сле­до­вал не всё. Шахта «Нек­ста» рабо­тала иначе — клик в любое её место мгно­венно пере­ме­щал лифт туда. Для постра­нич­ного листа­ния нужно было кли­кать в стрелки с нажа­тым «Альтом».

Система «Опенстеп» компании «Некст». Компания основана Стивом Джобсом после увольнения из Эпла в 1985 году. Куплена Эплом в 1997‑м

В «Нексте» в 1989 году полосы прокрутки стали пропорциональными, снова оказались слева, а стрелки разместились рядом, а не на концах полосы прокрутки.

Потом пропорциональные полосы прокрутки появились в Виндоусе 95.

На Маке пропорциональные полосы появились только в 2000 году, в системе ОС Х, основанной на многих технологиях «Некста». Опцию размещения стрелок рядом Мак имел до тех пор, пока вообще показывал эти стрелки. А придуманное в «Нексте» замедленное таскание лифта с нажатым «Альтом» работает на Маке и в 2017 году.

Но Мак унаследовал не всё. Шахта «Некста» работала иначе — клик в любое её место мгновенно перемещал лифт туда. Для постраничного листания нужно было кликать в стрелки с нажатым «Альтом».

Система «Опенстеп» компании «Некст». Компания основана Стивом Джобсом после увольнения из Эпла в 1985 году. Куплена Эплом в 1997‑м

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

Если нажать и удерживать кнопку мыши

Если нажать и удерживать кнопку мыши

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

В системе «Опен‑лук» ком­па­нии «Сан» была реа­ли­зо­вана ещё более хит­рая логика. Если клик в шахте при­во­дил к тому, что лифт ока­зы­вался под кур­со­ром, кур­сор авто­ма­ти­че­ски пере­ме­щался ниже, чтобы сле­ду­ю­щий клик сра­бо­тал так же.

В системе «Опен‑лук» компании «Сан» была реализована ещё более хитрая логика. Если клик в шахте приводил к тому, что лифт оказывался под курсором, курсор автоматически перемещался ниже, чтобы следующий клик сработал так же.

Попу­ляр­ность Вин­до­уса поз­во­ляет счи­тать логику его полос про­крутки стан­дарт­ной: там она уста­ка­ни­лась и не меня­лась больше два­дцати лет. От вер­сии к вер­сии менялся лишь внеш­ний вид:

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

Кнопки‑стрелки прокручивают на одну строку. Они указывают в направлении движения лифта, а не содержания

Лифт пропорциональный, но не сжимается меньше квадрата, чтобы было легче попасть

Клики в шахту над и под лифтом листают постранично вверх и вниз соответственно. Если нажать в шахту и не отпускать, документ пролистается в соответствующем направлении до конца

Популярность Виндоуса позволяет считать логику его полос прокрутки стандартной: там она устаканилась и не менялась больше двадцати лет. От версии к версии менялся лишь внешний вид.

Кнопки‑стрелки прокручивают на одну строку. Они указывают в направлении движения лифта, а не содержания

Клики в шахту над и под лифтом листают постранично вверх и вниз соответственно. Если нажать в шахту и не отпускать, документ пролистается в соответствующем направлении до конца

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

Лифт пропорциональный, но не сжимается меньше квадрата, чтобы было легче попасть

Настройка рабочего стола Виндоуса 3.1, 1990

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

Настройка рабочего стола Виндоуса 3.1, 1990

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

Но чело­век изоб­рёл колесо.

Колесо управ­ляло дви­же­нием лифта в полосе про­крутки. При дви­же­нии вверх содер­жи­мое про­кру­чи­ва­лось вниз.

Бла­го­даря колесу люди стали всё реже исполь­зо­вать полосы про­крутки для про­крутки, однако на их дизайн это почти не влияло.

В 2000‑х в Эпле реа­ли­зо­вали про­крутку на трек­па­дах — нужно было про­во­дить по ним не одним, а двумя пальцами.

Про­крутка обрела новое каче­ство. Ока­за­лось, что про­крутка — спо­соб вза­и­мо­дей­ствия по важ­но­сти срав­ни­мый с кликом.

Микрософт Интеллимаус, 1996

Микрософт Интеллимаус, 1996

Но человек изобрёл колесо.

Колесо управляло движением лифта в полосе прокрутки. При движении вверх содержимое прокручивалось вниз.

Благодаря колесу люди стали всё реже использовать полосы прокрутки для прокрутки, однако на их дизайн это почти не влияло.

В 2000‑х в Эпле реализовали прокрутку на трекпадах — нужно было проводить по ним не одним, а двумя пальцами.

Прокрутка обрела новое качество. Оказалось, что прокрутка — способ взаимодействия по важности сравнимый с кликом.

Видео с презентации «Макворлд», 2007

В 2007 вышел Айфон. На малень­ком экране про­крутка нужна посто­янно. Вме­сто клас­си­че­ских полос про­крутки Айфон исполь­зо­вал всю пло­щадь экрана. Отпала необ­хо­ди­мость при­це­ли­ваться. Обрат­ная связь созда­вала ощу­ще­ние непо­сред­ствен­ного вза­и­мо­дей­ствия. Стив Джобс «про­сто брал палец — и прокручивал».

Видео с презентации «Макворлд», 2007

В 2007 вышел Айфон. На маленьком экране прокрутка нужна постоянно. Вместо классических полос прокрутки Айфон использовал всю площадь экрана. Отпала необходимость прицеливаться. Обратная связь создавала ощущение непосредственного взаимодействия. Стив Джобс «просто брал палец — и прокручивал».

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

«Скрол­леры» вме­сто клас­си­че­ских полос про­крутки стали стан­дар­том Мака к 2011 году. Тогда же на Мак при­шли инер­ция и пру­жи­ни­стость. А спу­стя несколько лет появи­лась и воз­мож­ность изме­нить направ­ле­ние про­крутки с обрат­ного на пря­мое, чтобы управ­лять дви­же­нием содер­жи­мого, а не лифта — как на Айфоне.

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

«Скроллеры» вместо классических полос прокрутки стали стандартом Мака к 2011 году. Тогда же на Мак пришли инерция и пружинистость. А спустя несколько лет появилась и возможность изменить направление прокрутки с обратного на прямое, чтобы управлять движением содержимого, а не лифта — как на Айфоне.

Лифт в шахте полосы про­крутки пока­зы­вает, какую долю доку­мента мы видим на экране. Полоса про­крутки — услов­ное пред­став­ле­ние длины документа.

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

Лифт в шахте полосы прокрутки показывает, какую долю документа мы видим на экране. Полоса прокрутки — условное представление длины документа.

«Инфоскроллер» повышает информативность полосы прокрутки, символически представляя ещё и содержимое документа: текст, заголовки, рисунки, таблицы.

В «Дого­во­рах» цвет­ные метки пока­зы­вают рис­ко­ван­ные формулировки.

В «Хроме» жёл­тые метки пока­зы­вают резуль­таты поиска.

Сервис «Договоры»

Хром

Сервис «Договоры»

Хром

В «Договорах» цветные метки показывают рискованные формулировки.

В «Хроме» жёлтые метки показывают результаты поиска.

В адрес­ной книге Айфона на месте лифта про­крутки — алфа­вит. Выво­дятся все буквы, даже если на какую‑то имён нет.

В адресной книге Айфона на месте лифта прокрутки — алфавит. Выводятся все буквы, даже если на какую‑то имён нет.

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

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

Редактор кода «Сублайм‑текст»

Предельный вариант реализации информативной полосы прокрутки — превратить её в уменьшенную копию самого документа.

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

Редактор кода «Сублайм‑текст»

Если сде­лать инфор­ма­тив­ную про­крутку ещё и двух­мер­ной, полу­чится нави­га­тор Фотошопа.

Если сделать информативную прокрутку ещё и двухмерной, получится навигатор Фотошопа.

При про­крутке отдель­ные эле­менты интер­фейса «закреп­ляют» на экране или видо­из­ме­няют в зави­си­мо­сти от поло­же­ния основ­ного содержимого.

В этой книге закладка и лупа оста­ются в поле зре­ния, когда текст в раз­во­роте про­кру­чи­ва­ется. Про­крут­кой управ­ля­ется трёх­мер­ная ани­ма­ция откры­тия этой книги.

Через раз­ную ско­рость про­крутки раз­ных эле­мен­тов пере­дают их рас­сто­я­ние от поль­зо­ва­теля, добав­ляя ощу­ще­ние объёма.

Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

При прокрутке отдельные элементы интерфейса «закрепляют» на экране или видоизменяют в зависимости от положения основного содержимого.

В этой книге закладка и лупа остаются в поле зрения, когда текст в развороте прокручивается. Прокруткой управляется трёхмерная анимация открытия этой книги.

Через разную скорость прокрутки разных элементов передают их расстояние от пользователя, добавляя ощущение объёма.

Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

На сайте пра­вил рус­ского языка впер­вые было реа­ли­зо­вано «ску­ко­жи­ва­ние» шапки: при про­крутке шапка закреп­ля­ется на экране, но при этом сильно умень­ша­ется в раз­мере, остав­ляя мак­си­мум места содержимому.

Сайт правил русского языка. При прокрутке шапка закрепляется и уменьшается в размере

Сайт правил русского языка. При прокрутке шапка закрепляется и уменьшается в размере

На сайте правил русского языка впервые было реализовано «скукоживание» шапки: при прокрутке шапка закрепляется на экране, но при этом сильно уменьшается в размере, оставляя максимум места содержимому.

Самое важ­ное при про­крутке — посто­ян­ная обрат­ная связь. Cтраш­ным пре­ступ­ле­нием явля­ется пере­хват жеста про­крутки и замена реак­ции на дис­крет­ное листа­ние при пре­одо­ле­нии поро­го­вых зна­че­ний. Рабо­тает это так: чело­век пыта­ется про­кру­чи­вать стра­ницу, но ничего не про­ис­хо­дит. А после про­хож­де­ния опре­де­лён­ной точки содер­жи­мое вдруг с соб­ствен­ной ско­ро­стью про­кру­чи­ва­ется ровно на один экран.

Страница «Мака Про» не прокручивается, а листается по вертикали

Страница «Мака Про» не прокручивается, а листается по вертикали

Самое важное при прокрутке — постоянная обратная связь. Cтрашным преступлением является перехват жеста прокрутки и замена реакции на дискретное листание при преодолении пороговых значений. Работает это так: человек пытается прокручивать страницу, но ничего не происходит. А после прохождения определённой точки содержимое вдруг с собственной скоростью прокручивается ровно на один экран.

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

Во‑пер­вых, важно, чтобы раз­мер лифта не пры­гал, иначе он пере­стаёт быть инди­ка­то­ром раз­мера содер­жи­мого. Если же содер­жи­мое без­раз­мерно, и про­смотр его цели­ком не имеет ника­кого смысла, полосы про­крутки лучше вообще скрыть.

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

Содержимое может подгружаться по мере прокрутки. Но хорошая реализация такой «бесконечной прокрутки» требует внимания.

Во‑первых, важно, чтобы размер лифта не прыгал, иначе он перестаёт быть индикатором размера содержимого. Если же содержимое безразмерно, и просмотр его целиком не имеет никакого смысла, полосы прокрутки лучше вообще скрыть.

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

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

В пер­вом Айфоне уже была реа­ли­зо­вана идея скры­тия эле­мен­тов интер­фейса при прокрутке.

Если в этом месте про­ве­сти паль­цем вверх, то вверх сдви­нется не только стра­ница, но за пре­делы экрана уедет и вся шапка окна. Сегодня такое пове­де­ние при­вычно, но для того вре­мени это было изоб­ре­те­нием. Обыч­ным реше­нием было бы добав­ле­ние кнопки «Перейти в пол­но­экран­ный режим».

Интерфейс прокрутки развивался, пока почти не исчез в Айфоне, превратившись в непосредственное взаимодействие с прокручиваемым содержимым. И дизайнеры стали думать в обратную сторону: как ещё использовать этот новый удобный жест.

В первом Айфоне уже была реализована идея скрытия элементов интерфейса при прокрутке.

Если в этом месте провести пальцем вверх, то вверх сдвинется не только страница, но за пределы экрана уедет и вся шапка окна. Сегодня такое поведение привычно, но для того времени это было изобретением. Обычным решением было бы добавление кнопки «Перейти в полноэкранный режим».

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

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

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

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

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

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

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

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

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

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

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

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

В при­ло­же­нии «Твити» Лорен Брих­тер при­ду­мал «оттяг» — жест, когда поль­зо­ва­тель про­кру­чи­вает ленту вниз дальше, чем в ней хва­тает содер­жи­мого, и тем самым ини­ци­и­рует его обновление.

Жест ока­зался настолько удач­ным, что через пару лет Эпл сде­лал его стан­дарт­ным для любых обнов­ля­е­мых спис­ков в Ай‑ОСе. Правда, реа­ли­за­ция Эпла нико­гда не была настолько же опрят­ной, как у Лорена.

В приложении «Твити» Лорен Брихтер придумал «оттяг» — жест, когда пользователь прокручивает ленту вниз дальше, чем в ней хватает содержимого, и тем самым инициирует его обновление.

Жест оказался настолько удачным, что через пару лет Эпл сделал его стандартным для любых обновляемых списков в Ай‑ОСе. Правда, реализация Эпла никогда не была настолько же опрятной, как у Лорена.

Содер­жи­мое может быть дис­крет­ным — состо­я­ние экрана теле­фона между фото­гра­фи­ями не имеет смысла. Да и вруч­ную про­кру­чи­вать фото­гра­фию так, чтобы она вста­вала ровно на экране, было бы неудобно. Поэтому фото­гра­фии в Айфоне листаются.

Но ино­гда дис­крет­ность вно­сят и искусственно.

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

Содержимое может быть дискретным — состояние экрана телефона между фотографиями не имеет смысла. Да и вручную прокручивать фотографию так, чтобы она вставала ровно на экране, было бы неудобно. Поэтому фотографии в Айфоне листаются.

Но иногда дискретность вносят и искусственно.

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

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

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

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

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

С клас­си­че­ской про­крут­кой поло­же­ние в длин­ном доку­менте слиш­ком шатко. При пере­за­грузке он оста­нется на месте только если пове­зёт. Запом­нить поло­же­ние невоз­можно, дать ссылку на нуж­ное место — тоже. Одно нелов­кое дви­же­ние коле­сом мыши — и не най­дёшь, где был.

Из‑за этих недо­стат­ков часто отка­зы­ва­ются от про­крутки в пользу листания.

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

Александр Пушкин. Капитанская дочка

Александр Пушкин. Капитанская дочка

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

В вебе при перезагрузке остаёшься на той же странице, можно сохранить или передать ссылку.

С классической прокруткой положение в длинном документе слишком шатко. При перезагрузке он останется на месте только если повезёт. Запомнить положение невозможно, дать ссылку на нужное место — тоже. Одно неловкое движение колесом мыши — и не найдёшь, где был.

Из‑за этих недостатков часто отказываются от прокрутки в пользу листания.

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

Эта книга объ­еди­няет листа­ние и про­крутку. Вся она — длин­ная про­кру­чи­ва­е­мая стра­ница, но в ней сохра­нены дис­крет­ность и ста­биль­ность, свой­ствен­ные листанию.

Дискретность

Книга раз­де­лена на смыс­ло­вые раз­во­роты. Это помо­гает читать само­до­ста­точ­ными пор­ци­ями. Нуж­ный раз­во­рот легко узнать по внеш­нему виду в оглав­ле­нии. Листать раз­во­роты можно стрел­ками на кла­ви­а­туре. Ино­гда раз­во­роты содер­жат несколько сме­ня­е­мых эле­мен­тов — в этом слу­чае при листа­нии посте­пенно пока­жутся они все.

Стабильность

Раз­во­роты про­ну­ме­ро­ваны как стра­ницы в книге. При пере­за­грузке откры­ва­ется тот же раз­во­рот. Адрес в адрес­ной строке дина­ми­че­ски меня­ется по мере чте­ния — если поде­литься ссыл­кой, её полу­ча­тель попа­дёт на тот же раз­во­рот. Нако­нец, чита­тель может сде­лать сколько угодно закладок.

Эта книга объединяет листание и прокрутку. Вся она — длинная прокручиваемая страница, но в ней сохранены дискретность и стабильность, свойственные листанию.

Дискретность

Книга разделена на смысловые развороты. Это помогает читать самодостаточными порциями. Нужный разворот легко узнать по внешнему виду в оглавлении. Листать развороты можно стрелками на клавиатуре. Иногда развороты содержат несколько сменяемых элементов — в этом случае при листании постепенно покажутся они все.

Стабильность

Развороты пронумерованы как страницы в книге. При перезагрузке открывается тот же разворот. Адрес в адресной строке динамически меняется по мере чтения — если поделиться ссылкой, её получатель попадёт на тот же разворот. Наконец, читатель может сделать сколько угодно закладок.

Тест

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

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

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

Какой должна быть обратная связь для эффекта непосредственного взаимодействия?

Нейтральной
Квазирежимной
Мгновенной
Непрерывной
Грубой
Физичной

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

После любого изменения в поле «адрес» форма перепроверяет, есть ли такой адрес, и, если нет, выводит окно с сообщением об ошибке. Что с этим не так и как исправить?

Здесь всё в порядке: это мгновенная обратная связь
Это слишком грубая обратная связь
Нарушен принцип «Без обмана»
Среди ответов нет правильного

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

Блок на сайте обычно подгружается около секунды. Выберите самый подходящий элемент для индикации ожидания.

Радиокнопка
Прогрессбар, разделённый на сегменты
«Крутилка» или подобная компактная анимация
Ползунок, потому что он гарантирует мгновенную и непрерывную обратную связь
Непрерывный прогрессбар с указанием процентов загрузки

Радиокнопка и ползунок — элементы управления, а не индикации. Прогрессбары — слишком «громкая» индикация для секундной загрузки. Лучше всего подойдёт компактная крутилка.

Хорошая обратная связь для кнопки «Оплатить» на экране подтверждения заказа в интернет‑магазине —

Продолжительный звуковой сигнал в мажорной тональности
Экран «Спасибо, деньги получены!» сразу после нажатия кнопки, даже если реальная отправка денег занимает пару секунд
Успешная покупка не требует обратной связи, поскольку дальнейшие действия пользователя не нужны. Следует давать обратную связь только в случае ошибки пользователя
Среди ответов нет правильного

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

Выберите примеры взаимодействия с непрерывной обратной связью.

Раздел «Обратная связь» на сайте, где сотрудники отвечают в течение часа
Онлайн‑чат службы поддержки
Превращение курсора мыши в руку над ссылками
Перетаскивание окна с помощью мыши на компьютере
Изменение уровня громкости с помощью круглой ручки
Изменение уровня громкости с помощью кнопок + и −, которые нужно удерживать, а потом отпускать ровно в тот момент, когда громкость достигнет желаемого уровня
Поворачивание колёс с помощью руля автомобиля

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

Назовите способы повышения информативности листалки.

Изменить нумерацию с прямой на обратную
Использовать римские цифры
Показать миниатюры страниц, на которые ведут ссылки из листалки
Показать общее число страниц
Дать выбор между листанием по 10, 20 и 50 элементов

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

Что думаете о такой листалке?

Подойдёт в интернет‑магазине
Подойдёт в панели управления интернет‑магазином
Подойдёт в базе данных интернет‑магазина
Чтобы листалка подошла в указанных случаях, следует выбор размера страницы сделать радиогруппой, а не выпадайкой (для выбора достаточно будет одного клика вместо двух)
Листалку следует упростить, сократив число нумерованных страниц до пяти, и тогда её можно будет использовать в большинстве задач
Листалка не годится

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

На сайте ресторана необходимо опубликовать длинное меню. Предложите хорошие решения для навигации.

Разбить на страницы по десять блюд, дать стрелки для листания
Дать ссылки для прямого перехода на каждую страницу меню: 1, 2, 3 и так далее.
Сгруппировать блюда по алфавиту: А...Д, Е...И, К...О и т. д.
Вывести всё меню одной страницей, без листалок
Предусмотреть переход на блюда по категориям: салаты, супы, десерт и т. д.

Десять блюд, номера страниц — числа с потолка, таким разделением навигации не поможешь. Группы по несколько букв максимально бесчеловечны. Лучше всего показать все блюда одной страницей. Если же их так много, что без деления на страницы никак, то делить нужно по смыслу, то есть по типам блюд.

Назовите способы улучшения прокрутки.

Сделать лифт пропорциональным
Отметить важные элементы документа
Показать места с результатами поиска на длинной странице
Убрать стрелки по краям, чтобы улучшить обратную связь
Реализовать непрерывную обратную связь
Открывать в том же месте при перезагрузке

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

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

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

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

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

Какой должна быть обратная связь для эффекта непосредственного взаимодействия?

Нейтральной
Квазирежимной
Мгновенной
Непрерывной
Грубой
Физичной

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

После любого изменения в поле «адрес» форма перепроверяет, есть ли такой адрес, и, если нет, выводит окно с сообщением об ошибке. Что с этим не так и как исправить?

Здесь всё в порядке: это мгновенная обратная связь
Это слишком грубая обратная связь
Нарушен принцип «Без обмана»
Среди ответов нет правильного

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

Блок на сайте обычно подгружается около секунды. Выберите самый подходящий элемент для индикации ожидания.

Радиокнопка
Прогрессбар, разделённый на сегменты
«Крутилка» или подобная компактная анимация
Ползунок, потому что он гарантирует мгновенную и непрерывную обратную связь
Непрерывный прогрессбар с указанием процентов загрузки

Радиокнопка и ползунок — элементы управления, а не индикации. Прогрессбары — слишком «громкая» индикация для секундной загрузки. Лучше всего подойдёт компактная крутилка.

Хорошая обратная связь для кнопки «Оплатить» на экране подтверждения заказа в интернет‑магазине —

Продолжительный звуковой сигнал в мажорной тональности
Экран «Спасибо, деньги получены!» сразу после нажатия кнопки, даже если реальная отправка денег занимает пару секунд
Успешная покупка не требует обратной связи, поскольку дальнейшие действия пользователя не нужны. Следует давать обратную связь только в случае ошибки пользователя
Среди ответов нет правильного

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

Выберите примеры взаимодействия с непрерывной обратной связью.

Раздел «Обратная связь» на сайте, где сотрудники отвечают в течение часа
Онлайн‑чат службы поддержки
Превращение курсора мыши в руку над ссылками
Перетаскивание окна с помощью мыши на компьютере
Изменение уровня громкости с помощью круглой ручки
Изменение уровня громкости с помощью кнопок + и −, которые нужно удерживать, а потом отпускать ровно в тот момент, когда громкость достигнет желаемого уровня
Поворачивание колёс с помощью руля автомобиля

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

Назовите способы повышения информативности листалки.

Изменить нумерацию с прямой на обратную
Использовать римские цифры
Показать миниатюры страниц, на которые ведут ссылки из листалки
Показать общее число страниц
Дать выбор между листанием по 10, 20 и 50 элементов

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

Что думаете о такой листалке?

Подойдёт в интернет‑магазине
Подойдёт в панели управления интернет‑магазином
Подойдёт в базе данных интернет‑магазина
Чтобы листалка подошла в указанных случаях, следует выбор размера страницы сделать радиогруппой, а не выпадайкой (для выбора достаточно будет одного клика вместо двух)
Листалку следует упростить, сократив число нумерованных страниц до пяти, и тогда её можно будет использовать в большинстве задач
Листалка не годится

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

На сайте ресторана необходимо опубликовать длинное меню. Предложите хорошие решения для навигации.

Разбить на страницы по десять блюд, дать стрелки для листания
Дать ссылки для прямого перехода на каждую страницу меню: 1, 2, 3 и так далее.
Сгруппировать блюда по алфавиту: А...Д, Е...И, К...О и т. д.
Вывести всё меню одной страницей, без листалок
Предусмотреть переход на блюда по категориям: салаты, супы, десерт и т. д.

Десять блюд, номера страниц — числа с потолка, таким разделением навигации не поможешь. Группы по несколько букв максимально бесчеловечны. Лучше всего показать все блюда одной страницей. Если же их так много, что без деления на страницы никак, то делить нужно по смыслу, то есть по типам блюд.

Назовите способы улучшения прокрутки.

Сделать лифт пропорциональным
Отметить важные элементы документа
Показать места с результатами поиска на длинной странице
Убрать стрелки по краям, чтобы улучшить обратную связь
Реализовать непрерывную обратную связь
Открывать в том же месте при перезагрузке

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

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

3
Язык

3
Язык

Синтаксис

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

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

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

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Форма подписки на издание по почте

Синтаксис

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

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

Иногда для того, чтобы человек правильно заполнил форму, дают подсказки: «нужное подчеркнуть», «указывать в таком‑то виде».

Первая форма в жизни большинства граждан России

Первая форма в жизни большинства граждан России

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

Первая форма в жизни большинства граждан России

Первая форма в жизни большинства граждан России

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

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

Японская таможенная декларация

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

Японская таможенная декларация

Новая заметка — Сохранить и посмотреть. Движок блога «Эгея»

Новая заметка — Сохранить и посмотреть. Движок блога «Эгея»

Новая заметка — Сохранить и посмотреть. Движок блога «Эгея»

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

Заго­ло­вок, как под­ле­жа­щее в пред­ло­же­нии, выра­жа­ется суще­стви­тель­ным в име­ни­тель­ном падеже.

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

Новая заметка — Сохранить и посмотреть. Движок блога «Эгея»

Новая заметка — Сохранить и посмотреть. Движок блога «Эгея»

Новая заметка — Сохранить и посмотреть. Движок блога «Эгея»

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

Заголовок, как подлежащее в предложении, выражается существительным в именительном падеже.

Кнопка, как сказуемое, выражается глаголом. Но поскольку это команда, а не повествовательное предложение, глагол на кнопке — в начальной форме.

Поля между заго­лов­ком и кноп­кой — это вто­ро­сте­пен­ные члены пред­ло­же­ния. Они отве­чают на вопросы: куда отпра­вить сооб­ще­ние? кому поста­вить задачу? при каких обстоятельствах?

Про­стая форма похожа на про­стое предложение.

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

Поля между заголовком и кнопкой — это второстепенные члены предложения. Они отвечают на вопросы: куда отправить сообщение? кому поставить задачу? при каких обстоятельствах?

Простая форма похожа на простое предложение.

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

Настройка филь­тров в почте «Яндекса» — при­мер слож­ной формы. Син­так­си­че­ски точно было бы в заго­ловке напи­сать «Фильтр», а на кнопке — «Сохранить».

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

Настройка фильтров в почте «Яндекса» — пример сложной формы. Синтаксически точно было бы в заголовке написать «Фильтр», а на кнопке — «Сохранить».

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

Избыточно

Достаточно

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

Если убрать лиш­ние слова, про­яв­ля­ется бес­тол­ко­вый заго­ло­вок «Товар». Оста­лось заме­нить его назва­нием этого товара.

Избыточно

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

Достаточно

Если убрать лишние слова, проявляется бестолковый заголовок «Товар». Осталось заменить его названием этого товара.

Нару­ше­ние син­так­сиса мешает одно­знач­ному пони­ма­нию интерфейса.

На сайте «Аэро­флота» был оран­же­вый эле­мент с при­зы­вом «Вер­ни­тесь к началу реги­стра­ции». Но как вер­нуться, да и зачем?

На кнопке дол­жен быть гла­гол совер­шен­ного вида в началь­ной форме: «Вер­нуться» (а лучше — «Сохра­нить место»).

Выбор места в салоне при регистрации на рейс «Аэрофлота»

Выбор места в салоне при регистрации на рейс «Аэрофлота»

Нарушение синтаксиса мешает однозначному пониманию интерфейса.

На сайте «Аэрофлота» был оранжевый элемент с призывом «Вернитесь к началу регистрации». Но как вернуться, да и зачем?

На кнопке должен быть глагол совершенного вида в начальной форме: «Вернуться» (а лучше — «Сохранить место»).

В Ай‑ОСе, нао­бо­рот, гла­гол совер­шен­ного вида в началь­ной форме стоит в заго­ловке экрана и в под­пи­сях тум­бле­ров. Как это понять? Когда я включу тум­блер, сохра­нятся настройки?

На самом деле не сохра­нятся, а будут сохра­няться, в дру­гой про­грамме и в дру­гое время.

Раз это настройка пове­де­ния, а не одно­крат­ное дей­ствие, сле­дует исполь­зо­вать гла­гол несо­вер­шен­ного вида: «Пом­нить настройки».

См. также о режимах камеры:

В Ай‑ОСе, наоборот, глагол совершенного вида в начальной форме стоит в заголовке экрана и в подписях тумблеров. Как это понять? Когда я включу тумблер, сохранятся настройки?

На самом деле не сохранятся, а будут сохраняться, в другой программе и в другое время.

Раз это настройка поведения, а не однократное действие, следует использовать глагол несовершенного вида: «Помнить настройки».

См. также о режимах камеры:

Из‑за слова «Можем» кажется, будто выби­раем не когда нам удобно полу­чить, а когда ком­па­ния может доста­вить. Пра­вильно: «День доставки».

Кажется, что можно отве­тить «И да, и нет». Пра­вильно было бы сде­лать один тум­блер: «Я уже посе­щал клинику».

Заго­ло­вок и зна­че­ние в поле несогласованны.

Из‑за слова «Можем» кажется, будто выбираем не когда нам удобно получить, а когда компания может доставить. Правильно: «День доставки».

Кажется, что можно ответить «И да, и нет». Правильно было бы сделать один тумблер: «Я уже посещал клинику».

Заголовок и значение в поле несогласованны.

Use a verb or verb phrase and title‑style capitalization for the title of a push button. The title should describe the action the button performs — Save, Close, Print, Delete, Change Password, and so on.

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

Но в англий­ском началь­ная форма и пове­ли­тель­ное накло­не­ние гла­гола не отли­ча­ются. А по‑рус­ски «Сохра­нить», «Сохрани» и «Сохра­ните» — раз­ные слова. Здесь речь только о кноп­ках, и только о тех, что отдают команды, а этот фраг­мент даже нельзя одно­значно пере­ве­сти на русский.

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

Идею о том, что интер­фейс под­чи­ня­ется син­так­сису языка, Артём Гор­бу­нов сфор­му­ли­ро­вал в 2007 году. Тогда же мы зада­лись целью систе­ма­ти­зи­ро­вать зна­ния о син­так­сисе в при­ло­же­нии к интерфейсу.

Use a verb or verb phrase and title‑style capitalization for the title of a push button. The title should describe the action the button performs — Save, Close, Print, Delete, Change Password, and so on.

В какой форме должны быть названия и подписи элементов интерфейса? Эта цитата — чуть ли не единственный кусок из гайдлайнов Мака, где затрагивается эта тема.

Но в английском начальная форма и повелительное наклонение глагола не отличаются. А по‑русски «Сохранить», «Сохрани» и «Сохраните» — разные слова. Здесь речь только о кнопках, и только о тех, что отдают команды, а этот фрагмент даже нельзя однозначно перевести на русский.

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

Идею о том, что интерфейс подчиняется синтаксису языка, Артём Горбунов сформулировал в 2007 году. Тогда же мы задались целью систематизировать знания о синтаксисе в приложении к интерфейсу.

Радиокнопки с наречиями,

прилагательными,

разными частями речи

и путаницей

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

Но радиокнопки отлично рабо­тают и с прилагательными.

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

Но как угодно тоже не напи­шешь — в послед­нем при­мере воз­ни­кает пута­ница. В чём же сек­рет порядка в пер­вых трёх примерах?

Радиокнопки с наречиями,

прилагательными,

разными частями речи

и путаницей

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

Но радиокнопки отлично работают и с прилагательными.

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

Но как угодно тоже не напишешь — в последнем примере возникает путаница. В чём же секрет порядка в первых трёх примерах?

Ответ нашёлся в книге Нины Вал­ги­ной «Совре­мен­ный рус­ский язык. Син­так­сис». В главе «Спо­собы выра­же­ния обсто­я­тельств» Вал­гина пишет:


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


Вот в чём дело: все радиокнопки в группе «Отоб­ра­жать участ­ни­ков» — обсто­я­тель­ства, ука­зы­вают на спо­соб совер­ше­ния дей­ствия, отве­чают на вопрос «как?»

Обстоятельства

Что попало

По‑рус­ски на вопрос «как?» можно отве­тить мно­гими частями речи, но не любым набо­ром слов, как в при­мере «Выбрать город».

Ответ нашёлся в книге Нины Валгиной «Современный русский язык. Синтаксис». В главе «Способы выражения обстоятельств» Валгина пишет:


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


Вот в чём дело: все радиокнопки в группе «Отображать участников» — обстоятельства, указывают на способ совершения действия, отвечают на вопрос «как?»

Обстоятельства

Что попало

По‑русски на вопрос «как?» можно ответить многими частями речи, но не любым набором слов, как в примере «Выбрать город».

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

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

Как дверь пред­по­ла­гает воз­мож­ность войти, так поле пред­по­ла­гает ввод, чек­бокс — вклю­че­ние, кнопка — выпол­не­ние команды при нажа­тии. Эле­менты своим видом под­ска­зы­вают, что с ними делать.

Максим Ильяхов. Информационный стиль и редактура текста. Идеальные члены предложения

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

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

Как дверь предполагает возможность войти, так поле предполагает ввод, чекбокс — включение, кнопка — выполнение команды при нажатии. Элементы своим видом подсказывают, что с ними делать.

Максим Ильяхов. Информационный стиль и редактура текста. Идеальные члены предложения

Разворот раздаточного материала курса «Пользовательский интерфейс и представление информации»

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

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

Дизайн интерфейса — это редактура

Разворот раздаточного материала курса «Пользовательский интерфейс и представление информации»

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

В этом учебнике мы впервые публикуем справочник по синтаксису элементов интерфейса для всех читателей.

Дизайн интерфейса — это редактура

Уголок учителя русского языка

Внимательные читатели заметят, что элемент в заголовке является объектом действия на кнопке. Пользователь или компьютер отправляют сообщение. Почему же в синтаксисе элементов интерфейса заголовок «Сообщение» выступает в роли подлежащего, а не дополнения?

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

Заголовок формы подобен подлежащему не только по роли, но и по форме. Мы его формулируем в именительном падеже (Жалоба — Отправить), а не винительном, как требовало бы дополнение (Отправить жалобу).

В учебнике Нины Валгиной приведён пример двусоставного предложения, то есть состоящего из подлежащего и сказуемого: «Чай готов». Несмотря на то, что с точки зрения вселенной чай не сам себя приготовил, в этом предложении он является субъектом, подлежащим. А страдательный залог в сказуемом разрешает это противоречие, делает чай главным грамматически.

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

  • Подлежащее в Лингвистическом энциклопедическом словаре

Уголок учителя русского языка

Внимательные читатели заметят, что элемент в заголовке является объектом действия на кнопке. Пользователь или компьютер отправляют сообщение. Почему же в синтаксисе элементов интерфейса заголовок «Сообщение» выступает в роли подлежащего, а не дополнения?

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

Заголовок формы подобен подлежащему не только по роли, но и по форме. Мы его формулируем в именительном падеже (Жалоба — Отправить), а не винительном, как требовало бы дополнение (Отправить жалобу).

В учебнике Нины Валгиной приведён пример двусоставного предложения, то есть состоящего из подлежащего и сказуемого: «Чай готов». Несмотря на то, что с точки зрения вселенной чай не сам себя приготовил, в этом предложении он является субъектом, подлежащим. А страдательный залог в сказуемом разрешает это противоречие, делает чай главным грамматически.

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

  • Подлежащее в Лингвистическом энциклопедическом словаре

Элементы управления

Эле­менты управ­ле­ния — син­так­си­че­ские еди­ницы языка интер­фейса. Раз­бе­рём, какими чле­нами пред­ло­же­ния высту­пают кнопки, ссылки, чек­боксы, поля и дру­гие элементы.

Радиокнопки в роли дополнения

Радиокнопки в роли дополнения

Радиокнопки в роли дополнения

Радиокнопки в роли дополнения

Элементы управления

Элементы управления — синтаксические единицы языка интерфейса. Разберём, какими членами предложения выступают кнопки, ссылки, чекбоксы, поля и другие элементы.

Кнопка

Команда

Сказуемое глагольное: Что сделать?

Глав­ная функ­ция кнопки — дать команду ком­пью­теру. В син­так­сисе эле­мен­тов интер­фейса это гла­голь­ное ска­зу­е­мое, отве­чает на вопрос «Что сде­лать?». Исполь­зу­ется гла­гол совер­шен­ного вида в началь­ной форме.

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

Шизо­фре­ния: непо­нятно, кто кем коман­дует. Сайт про­сит тебя вер­нуться? Или это ты, нажи­мая, про­сишь сайт вер­нуться? Пра­вильно — «Вернуться».

Кнопка

Команда

Сказуемое глагольное: Что сделать?

Главная функция кнопки — дать команду компьютеру. В синтаксисе элементов интерфейса это глагольное сказуемое, отвечает на вопрос «Что сделать?». Используется глагол совершенного вида в начальной форме.

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

Шизофрения: непонятно, кто кем командует. Сайт просит тебя вернуться? Или это ты, нажимая, просишь сайт вернуться? Правильно — «Вернуться».

Для команды ком­пью­теру не годятся кнопки, назван­ные существительными.

Кнопка «Регистрация» может подойти в навигации — об этом ниже

Для команды компьютеру не годятся кнопки, названные существительными.

Кнопка «Регистрация» может подойти в навигации — об этом ниже

Здесь син­так­си­че­ски пра­вильно было бы «Создать доку­мент». Но кнопки и пункты меню New исполь­зу­ются в раз­ных систе­мах и давно стали привычными.

В поч­то­вом кли­енте Мака с этим свя­зано недо­ра­зу­ме­ние: хотя в основ­ном меню напи­сано New Message, в меню в доке эта же команда уже назы­ва­ется Compose New Message. Из‑за отсут­ствия еди­но­об­ра­зия этот пункт слож­нее узнать — при­вычка не работает.

Дру­гой при­мер ошибки, став­шей стан­дар­том — рус­ский пере­вод пункта Print... меню File. Дру­гие гла­голы пере­вели гла­го­лами: открыть, закрыть, сохра­нить. А здесь про­изо­шёл сбой и вме­сто син­так­си­че­ски пра­виль­ного «Напе­ча­тать» стали писать «Печать».

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

New Message против Compose New Message

New Message против Compose New Message

Здесь синтаксически правильно было бы «Создать документ». Но кнопки и пункты меню New используются в разных системах и давно стали привычными.

В почтовом клиенте Мака с этим связано недоразумение: хотя в основном меню написано New Message, в меню в доке эта же команда уже называется Compose New Message. Из‑за отсутствия единообразия этот пункт сложнее узнать — привычка не работает.

Другой пример ошибки, ставшей стандартом — русский перевод пункта Print... меню File. Другие глаголы перевели глаголами: открыть, закрыть, сохранить. А здесь произошёл сбой и вместо синтаксически правильного «Напечатать» стали писать «Печать».

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

Статус

Сказуемое, отвечает на вопрос о подлежащем: Это что? какое? как?

Вто­рая функ­ция кнопки или пункта меню — изме­не­ние ста­туса или отно­ше­ния к объекту.

В син­так­сисе эле­мен­тов интер­фейса это тоже ска­зу­е­мое, чаще всего — имен­ное, отве­чает на вопрос о под­ле­жа­щем: это что? какое? Исполь­зу­ется суще­стви­тель­ное, при­ла­га­тель­ное, при­ча­стие, чис­ли­тель­ное: «Класс!», «Готово».

Ска­зу­е­мое может отве­чать на вопросы: как? когда? и выра­жаться наре­чием: «Позже».

Фор­му­ли­ровки с гла­го­лами‑коман­дами в таких слу­чаях избы­точны и мало­ин­фор­ма­тивны: «Отме­тить как…», «Пере­ве­сти в кате­го­рию…», «Оце­нить на…»

Статус

Сказуемое, отвечает на вопрос о подлежащем: Это что? какое? как?

Вторая функция кнопки или пункта меню — изменение статуса или отношения к объекту.

В синтаксисе элементов интерфейса это тоже сказуемое, чаще всего — именное, отвечает на вопрос о подлежащем: это что? какое? Используется существительное, прилагательное, причастие, числительное: «Класс!», «Готово».

Сказуемое может отвечать на вопросы: как? когда? и выражаться наречием: «Позже».

Формулировки с глаголами‑командами в таких случаях избыточны и малоинформативны: «Отметить как…», «Перевести в категорию…», «Оценить на…»

Статус

Сообщить о намерении

Записать факт в журнал

Пометить документ

Выразить мнение

Команда

Набрать номер прямо сейчас

Дать задание курьеру

Скрыть напоминание

Дать ход документу

Ста­тус и отно­ше­ние могут быть выра­жены гла­го­лами в лич­ной (а не началь­ной) форме.

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

Статус

Сообщить о намерении

Записать факт в журнал

Пометить документ

Выразить мнение

Статус и отношение могут быть выражены глаголами в личной (а не начальной) форме.

Команда

Набрать номер прямо сейчас

Дать задание курьеру

Скрыть напоминание

Дать ход документу

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

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

Пункты меню группы назы­ва­ются «Отпра­вили», «При­была», потому что при их выборе на самом деле группа не отправ­ля­ется и не при­бы­вает. Эти пункты про­сто запи­сы­вают отметки в жур­нал. Если напи­сать «Отпра­вить», опе­ра­тору будет казаться, что доста­точно нажать сюда, чтобы группа выехала. Но чтобы отпра­вить группу, с ней нужно свя­заться по рации.

В программе «Секьюридж» оператор охранной фирмы следит за сигналами, приходящими с охраняемых объектов, и руководит перемещением групп быстрого реагирования.

Пункты меню группы называются «Отправили», «Прибыла», потому что при их выборе на самом деле группа не отправляется и не прибывает. Эти пункты просто записывают отметки в журнал. Если написать «Отправить», оператору будет казаться, что достаточно нажать сюда, чтобы группа выехала. Но чтобы отправить группу, с ней нужно связаться по рации.

Навигация

Подлежащее: Что?

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

В син­так­сисе эле­мен­тов интер­фейса это под­ле­жа­щее, отве­чает на вопрос «Что?» (вызвать или открыть). Исполь­зу­ется суще­стви­тель­ное в име­ни­тель­ном падеже.

Как и в слу­чае с изме­не­нием ста­туса или отно­ше­ния, фор­му­ли­ровки в виде команды избы­точны («Перейти к…», «Открыть…»),

Навигация

Подлежащее: Что?

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

В синтаксисе элементов интерфейса это подлежащее, отвечает на вопрос «Что?» (вызвать или открыть). Используется существительное в именительном падеже.

Как и в случае с изменением статуса или отношения, формулировки в виде команды избыточны («Перейти к…», «Открыть…»),

Фор­му­ли­ровки с про­пу­щен­ным, но под­ра­зу­ме­ва­е­мым гла­го­лом тоже неудачны.

Если сде­лать сайт без реги­стра­ции не уда­лось, то про­сто «Регистрация».

Что там, в начале? «Новый пла­тёж». Ино­гда команда умест­нее: «Сыг­рать ещё», «Пройти тест заново».

Когда нави­га­ция свя­зана с направ­ле­нием в про­стран­стве или вре­мени, уместно отве­чать наре­чием вме­сто суще­стви­тель­ного: «Назад — Впе­рёд», «Ранее — Позд­нее». Но инфор­ма­тив­нее может быть про­сто поста­вить стрелки ← → Ещё лучше — назвать суще­стви­тель­ным то, куда именно назад («Адрес доставки»); то, что именно будет далее («Оплата»).

Наре­чия «Допол­ни­тельно», «Ещё» не несут инфор­ма­ции и редко годятся для назва­ния кнопок.

Формулировки с пропущенным, но подразумеваемым глаголом тоже неудачны.

Если сделать сайт без регистрации не удалось, то просто «Регистрация».

Что там, в начале? «Новый платёж». Иногда команда уместнее: «Сыграть ещё», «Пройти тест заново».

Когда навигация связана с направлением в пространстве или времени, уместно отвечать наречием вместо существительного: «Назад — Вперёд», «Ранее — Позднее». Но информативнее может быть просто поставить стрелки ← → Ещё лучше — назвать существительным то, куда именно назад («Адрес доставки»); то, что именно будет далее («Оплата»).

Наречия «Дополнительно», «Ещё» не несут информации и редко годятся для названия кнопок.

Use an ellipsis in the name of a menu item or button that produces a dialog. The ellipsis (…) indicates that the user must take further action to complete the task.

The commands About, Advanced, Help, Options, Properties, and Settings must display another window when clicked, but don’t require additional information from the user. Therefore they don’t need ellipses.

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

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

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

Use an ellipsis in the name of a menu item or button that produces a dialog. The ellipsis (…) indicates that the user must take further action to complete the task.

The commands About, Advanced, Help, Options, Properties, and Settings must display another window when clicked, but don’t require additional information from the user. Therefore they don’t need ellipses.

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

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

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

Компьютер сначала спросит адрес сервера

Компьютер сначала спросит имя файла

Мно­го­то­чие под­ска­зы­вает, что кнопка сра­бо­тает не сразу. То есть нужно про­чи­тать, что напи­сано. Если при нажа­тии на слово мгно­венно про­изой­дёт или откро­ется ровно то, что оно озна­чает, то мно­го­то­чие не нужно.

Этого пра­вила доста­точно для при­ня­тия реше­ния во всех случаях.

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

Компьютер сначала спросит адрес сервера

Многоточие подсказывает, что кнопка сработает не сразу. То есть нужно прочитать, что написано. Если при нажатии на слово мгновенно произойдёт или откроется ровно то, что оно означает, то многоточие не нужно.

Этого правила достаточно для принятия решения во всех случаях.

Компьютер сначала спросит имя файла

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

На необ­хо­ди­мость мно­го­то­чия вли­яет форма слова:

Фортепиано
настроится

Если мы видим кнопку без мно­го­то­чия, мы ожи­даем, что при её нажа­тии при­ло­же­ние или при­бор сразу же настроится.

Появится камертон
и инструменты

Если же мно­го­то­чие стоит, мы уже ожи­даем уви­деть окно с параметрами.

Появится камертон
и инструменты

Но стоит кнопку с гла­го­лом‑коман­дой сме­нить на нави­га­ци­он­ную с суще­стви­тель­ным, как мно­го­то­чие ста­но­вится избы­точ­ным, ведь при нажа­тии на кнопку мы сразу при­сту­пим к настройке (откроем ящик с инструментами).

Сначала надо будет выбрать фортепиано

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

На необходимость многоточия влияет форма слова:

Фортепиано настроится

Если мы видим кнопку без многоточия, мы ожидаем, что при её нажатии приложение или прибор сразу же настроится.

Появится камертон и инструменты

Если же многоточие стоит, мы уже ожидаем увидеть окно с параметрами.

Появится камертон и инструменты

Но стоит кнопку с глаголом‑командой сменить на навигационную с существительным, как многоточие становится избыточным, ведь при нажатии на кнопку мы сразу приступим к настройке (откроем ящик с инструментами).

Сначала надо будет выбрать фортепиано

Если многоточие добавить, то кажется, будто препятствие ожидает ещё до начала настройки.

Ссылка

Навигация

Подлежащее: Что?

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

Ссылка как само­сто­я­тель­ный эле­мент про­сто назы­вает стра­ницу, на кото­рую ведёт:

  • Магазин

  • Блог

  • Контакты

Почи­тайте февральскую статью о налогах

По ссылке — февральская статья о налогах

В про­дажу посту­пили новые Айфоны

По ссылке — что‑то про новые Айфоны

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

Ссылка

Навигация

Подлежащее: Что?

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

Ссылка как самостоятельный элемент просто называет страницу, на которую ведёт:

  • Магазин

  • Блог

  • Контакты

Почитайте февральскую статью о налогах

По ссылке — февральская статья о налогах

В продажу поступили новые Айфоны

По ссылке — что‑то про новые Айфоны

Ссылка в тексте — выделение. Человек видит её раньше остального текста, поэтому её слов должно хватать для понимания того, что будет по ссылке.

В 1953 году Дмит­рий Шоста­ко­вич напи­сал деся­тую симфонию

В 1953 году Дмит­рий Шоста­ко­вич напи­сал деся­тую симфонию

В 1953 году Дмит­рий Шоста­ко­вич напи­сал деся­тую симфонию

В 1953 году Дмит­рий Шоста­ко­вич напи­сал деся­тую симфонию

В 1953 году Дмит­рий Шоста­ко­вич напи­сал деся­тую симфонию

В 1953 году Дмит­рий Шоста­ко­вич напи­сал деся­тую симфонию

— Эсми­нец «Ком­по­зи­тор Юрий Шоста­ко­вич» будет где надо и вовремя!

В гипер­тек­сте ссыл­кой могут быть любые слова. Их выбор вли­яет на ожи­да­ния пользователя.

В этом при­мере по ссылке откроется:

  • что‑то про 1953 год;

  • о Шостаковиче;

  • о том, что он сим­фо­нию именно напи­сал, а не напел;

  • сама симфония;

  • неиз­вестно что.

Ссылка на вызы­ва­ю­щем вопросы слове под­ска­зы­вает, что по ней — ответ.

В 1953 году Дмитрий Шостакович написал десятую симфонию

В 1953 году Дмитрий Шостакович написал десятую симфонию

В 1953 году Дмитрий Шостакович написал десятую симфонию

В 1953 году Дмитрий Шостакович написал десятую симфонию

В 1953 году Дмитрий Шостакович написал десятую симфонию

В 1953 году Дмитрий Шостакович написал десятую симфонию

— Эсминец «Композитор Юрий Шостакович» будет где надо и вовремя!

В гипертексте ссылкой могут быть любые слова. Их выбор влияет на ожидания пользователя.

В этом примере по ссылке откроется:

  • что‑то про 1953 год;

  • о Шостаковиче;

  • о том, что он симфонию именно написал, а не напел;

  • сама симфония;

  • неизвестно что.

Ссылка на вызывающем вопросы слове подсказывает, что по ней — ответ.

Как сооб­щил в интер­вью «Ком­со­молке» руко­во­ди­тель отдела по борьбе с эко­но­ми­че­скими пре­ступ­ле­ни­ями по Москве Иван Пет­ров, пре­ступ­ник был обезврежен.

Как сооб­щил в интер­вью «Ком­со­молке» руко­во­ди­тель отдела по борьбе с эко­но­ми­че­скими пре­ступ­ле­ни­ями по Москве Иван Пет­ров, пре­ступ­ник был обезврежен.

Как сооб­щил в интер­вью «Ком­со­молке» руко­во­ди­тель отдела по борьбе с эко­но­ми­че­скими пре­ступ­ле­ни­ями по Москве Иван Пет­ров, пре­ступ­ник был обезврежен.

Руко­во­ди­тель отдела по борьбе с эко­но­ми­че­скими пре­ступ­ле­ни­ями по Москве Иван Пет­ров ска­зал в интер­вью, что пре­ступ­ник был обезврежен.

Опти­маль­ная длина ссылки — два‑три слова.

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

Если оста­вить ссыл­кой одно слово, полу­ча­ется, нао­бо­рот, слиш­ком коротко — и попасть сложно, и неин­фор­ма­тивно. Лучше вклю­чить в ссылку ещё слово.

Ещё лучше — отре­дак­ти­ро­вать текст для повы­ше­ния инфор­ма­тив­но­сти ссылки.

Как сообщил в интервью «Комсомолке» руководитель отдела по борьбе с экономическими преступлениями по Москве Иван Петров, преступник был обезврежен.

Как сообщил в интервью «Комсомолке» руководитель отдела по борьбе с экономическими преступлениями по Москве Иван Петров, преступник был обезврежен.

Как сообщил в интервью «Комсомолке» руководитель отдела по борьбе с экономическими преступлениями по Москве Иван Петров, преступник был обезврежен.

Руководитель отдела по борьбе с экономическими преступлениями по Москве Иван Петров сказал в интервью, что преступник был обезврежен.

Оптимальная длина ссылки — два‑три слова.

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

Если оставить ссылкой одно слово, получается, наоборот, слишком коротко — и попасть сложно, и неинформативно. Лучше включить в ссылку ещё слово.

Ещё лучше — отредактировать текст для повышения информативности ссылки.

Плохо

Перей­дите по ссылке, чтобы купить Айфон

Ссылки, гово­ря­щие сами о себе, бессмысленны.

Плохо

Подробнее

Столь же бес­смыс­ленны ссылки, не гово­ря­щие ни о чём.

Плохо

О нало­гах читайте здесь

Хорошо

Почи­тайте фев­раль­скую ста­тью о налогах

Текст не дол­жен терять смысла, если ссылку из него убрать.

Плохо

Перейдите по ссылке, чтобы купить Айфон

Ссылки, говорящие сами о себе, бессмысленны.

Плохо

Подробнее

Столь же бессмысленны ссылки, не говорящие ни о чём.

Плохо

О налогах читайте здесь

Хорошо

Почитайте февральскую статью о налогах

Текст не должен терять смысла, если ссылку из него убрать.

Ссылки не пред­на­зна­чены для отдачи команды:

Плохо

Сохранить

Плохо

В каталог

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

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

Ссылки не предназначены для отдачи команды:

Плохо

Сохранить

От ссылки пользователь ожидает перехода на другую страницу. Если под текстом будет стоять ссылка «Сохранить», на неё будет страшно нажать: что ни напиши, кажется, что текст потеряется. Нужна кнопка.

Плохо

В каталог

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

Иконка

Навигация

Подлежащее: Что?

Иконка может заме­нить или допол­нить под­пись мно­гих эле­мен­тов интерфейса.

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

«Лончпад» на Маке: иконки подписаны названиями приложений

Иконка

Навигация

Подлежащее: Что?

Иконка может заменить или дополнить подпись многих элементов интерфейса.

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

«Лончпад» на Маке: иконки подписаны названиями приложений

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

Здесь под­пись отве­чает на вопрос «Что?» и оста­ётся подлежащим.

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

Здесь подпись отвечает на вопрос «Что?» и остаётся подлежащим.

Вкладка

Вкладки в Виндоусе 95

Вкладки в Макосе Сьерре

Вкладки в Хроме

Навигация

Подлежащее: Что?

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

Осо­бую попу­ляр­ность вкладки при­об­рели в браузерах.

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

Вкладки в Виндоусе 95

Вкладки в Макосе Сьерре

Вкладки в Хроме

Вкладка

Вкладки в Виндоусе 95

Вкладки в Макосе Сьерре

Вкладки в Хроме

Навигация

Подлежащее: Что?

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

Особую популярность вкладки приобрели в браузерах.

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

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

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

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

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

Чекбокс

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

Чек­бокс — это инфор­ма­тив­ный эле­мент, кото­рый выби­рает объ­ект или уточ­няет дей­ствие, сооб­щает поль­зо­ва­телю о пове­де­нии интер­фейса. В интер­фейсе чек­бокс отве­чает не на вопрос «да или нет?», а на откры­тые вопросы: какой, что, кому, как, где, когда?

Чекбокс

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

Чекбокс — это информативный элемент, который выбирает объект или уточняет действие, сообщает пользователю о поведении интерфейса. В интерфейсе чекбокс отвечает не на вопрос «да или нет?», а на открытые вопросы: какой, что, кому, как, где, когда?

Отправить срочное сообщение

Отправить срочное сообщение

Отправить срочное сообщение, не подписываясь на ответ

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

Если чек­бокс выклю­чен, то его подпи­си как бы нет в предложении.

Выклю­чен­ный чек­бокс может также обо­зна­чать отри­ца­ние соб­ствен­ной подписи.

Отправить срочное сообщение

Отправить срочное сообщение

Отправить срочное сообщение, не подписываясь на ответ

Чекбокс означает часть предложения, которую можно добавить или убрать.

Если чекбокс выключен, то его подписи как бы нет в предложении.

Выключенный чекбокс может также обозначать отрицание собственной подписи.

Выбор объекта, свойства

Дополнение: использовать что? сделать с чем? кому?

Определение: Какой, чей, который?

Приложение: Кто или что именно?

Одна из функ­ций чек­бокса — выбор объ­екта. В син­так­сисе эле­мен­тов интер­фейса это допол­не­ние (исполь­зо­вать что? сде­лать с чем? кому?) или при­ло­же­ние (кто именно?). Исполь­зу­ются суще­стви­тель­ные, место­име­ния, причастия.

Выбор объекта, свойства

Дополнение: использовать что? сделать с чем? кому?

Определение: Какой, чей, который?

Приложение: Кто или что именно?

Одна из функций чекбокса — выбор объекта. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или приложение (кто именно?). Используются существительные, местоимения, причастия.

Чек­бок­сом можно выбрать не только объ­ект, но и его свой­ство или состо­я­ние. В син­так­сисе эле­мен­тов интер­фейса это опре­де­ле­ние (какой? чей? кото­рый?) или при­ло­же­ние (кто или что именно?). Исполь­зу­ются суще­стви­тель­ные и место­име­ния, при­ла­га­тель­ные, наре­чия, чис­ли­тель­ные, гла­голы в началь­ной форме.

Чекбоксом можно выбрать не только объект, но и его свойство или состояние. В синтаксисе элементов интерфейса это определение (какой? чей? который?) или приложение (кто или что именно?). Используются существительные и местоимения, прилагательные, наречия, числительные, глаголы в начальной форме.

Под­пись чек­бокса не может быть отве­том на вопрос в форме гла­го­лов, напри­мер «Под­твер­дить», или частиц «Да» и «Нет».

Гла­го­лом в началь­ной форме может выра­жаться свой­ство. Срав­ните с ролью гла­гола на кнопке.

Подпись чекбокса не может быть ответом на вопрос в форме глаголов, например «Подтвердить», или частиц «Да» и «Нет».

Глаголом в начальной форме может выражаться свойство. Сравните с ролью глагола на кнопке.

Дополнения

Обстоятельства

Уточнение действия

Дополнение: использовать что? сделать с чем? кому?

Обстоятельство: Сделать как? где? когда?

Вто­рая функ­ция чек­бокса — уточ­не­ние дей­ствия. В син­так­сисе эле­мен­тов интер­фейса это допол­не­ние (исполь­зо­вать что? сде­лать с чем? кому?) или обсто­я­тель­ство (сде­лать как? где? когда?).

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

Дополнения

Обстоятельства

Уточнение действия

Дополнение: использовать что? сделать с чем? кому?

Обстоятельство: Сделать как? где? когда?

Вторая функция чекбокса — уточнение действия. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или обстоятельство (сделать как? где? когда?).

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

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

Срав­ните: «Рас­кла­ды­вать по копиям» (при настройке прин­тера) и «Раз­ло­жить по копиям» (при печати).

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

Сравните: «Раскладывать по копиям» (при настройке принтера) и «Разложить по копиям» (при печати).

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

В этом при­мере гла­голы мас­ки­руют самые важ­ные слова: «рисунки», «видео», «реклама».

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

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

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

В этом примере глаголы маскируют самые важные слова: «рисунки», «видео», «реклама».

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

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

Лучше: ✓ Show next time

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

Услов­ные и усту­пи­тель­ные фор­му­ли­ровки ещё хуже: «Не пока­зы­вать, кроме...», «Скры­вать несмотря на...».

Не попробуешь — не узнаешь

Этот тум­блер вклю­чает или выклю­чает выклю­че­ние авто­ма­ти­че­ского выклю­че­ния подсветки.

Лучше: ✓ Show next time

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

Условные и уступительные формулировки ещё хуже: «Не показывать, кроме...», «Скрывать несмотря на...».

Не попробуешь — не узнаешь

Этот тумблер включает или выключает выключение автоматического выключения подсветки.

Настройка автозапуска приложений на Маке

Это окно настройки авто­за­пуска при­ло­же­ний на Маке.

В списке с под­пи­сью «Эти про­граммы запу­стятся авто­ма­ти­че­ски при входе с паро­лем» неко­то­рые про­граммы отме­чены чекбоксами.

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

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

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

Настройка автозапуска приложений на Маке

Это окно настройки автозапуска приложений на Маке.

В списке с подписью «Эти программы запустятся автоматически при входе с паролем» некоторые программы отмечены чекбоксами.

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

Оказывается, чтобы отключить автозапуск, программу надо удалить из списка, нажав на минус снизу. А чекбокс означает скрытие программы при запуске! Программа запустится, но её окна не будут отображаться, пока пользователь сам не перейдёт в неё.

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

Отри­ца­тель­ные фор­му­ли­ровки мешают не только в чекбоксах.

На вопрос из этого при­мера невоз­можно с уве­рен­но­стью отве­тить правильно.

Подтвердить? Вы уверены, что вы не хотите восстанавливать никакие проекты? Их нельзя будет восстановить позже. Да или нет?

Подтвердить? Вы уверены, что вы не хотите восстанавливать никакие проекты? Их нельзя будет восстановить позже. Да или нет?

Отрицательные формулировки мешают не только в чекбоксах.

На вопрос из этого примера невозможно с уверенностью ответить правильно.

Радиокнопки

Радиоприёмник «Альпинист РП‑224»
СССР, 1991

Радиокнопки — это группа кно­пок, из кото­рых может быть нажата только одна. Ещё их назы­вают радиогруппой.

Радиокнопки

Радиоприёмник «Альпинист РП‑224»
СССР, 1991

Радиокнопки — это группа кнопок, из которых может быть нажата только одна. Ещё их называют радиогруппой.

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

Для той же цели и с тем же син­так­си­сом исполь­зуют пере­клю­ча­тель, выпа­да­ю­щий список.

Радиокнопка и её синонимы

Радиокнопка и её синонимы

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

Для той же цели и с тем же синтаксисом используют переключатель, выпадающий список.

Радиокнопки функ­ци­о­нально и син­так­си­че­ски сов­па­дают с чекбоксами.

Выбор объекта, свойства

Дополнение: использовать что? сделать с чем? кому?

Определение: Какой, чей, который?

Приложение: Кто или что именно?

Одна из функ­ций радиокно­пок — выбор объ­екта. В син­так­сисе эле­мен­тов интер­фейса это допол­не­ние (исполь­зо­вать что? сде­лать с чем? кому?) или при­ло­же­ние (кто именно?). Исполь­зу­ются суще­стви­тель­ные, место­име­ния, причастия.

Радиокнопки функционально и синтаксически совпадают с чекбоксами.

Выбор объекта, свойства

Дополнение: использовать что? сделать с чем? кому?

Определение: Какой, чей, который?

Приложение: Кто или что именно?

Одна из функций радиокнопок — выбор объекта. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или приложение (кто именно?). Используются существительные, местоимения, причастия.

Погода какая?

Город какой именно?

Радиокноп­ками можно выбрать не только объ­ект, но и его свой­ство или состо­я­ние. В син­так­сисе эле­мен­тов интер­фейса это опре­де­ле­ние (какой? чей? кото­рый?) или при­ло­же­ние (кто или что именно?).

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

Погода какая?

Радиокнопками можно выбрать не только объект, но и его свойство или состояние. В синтаксисе элементов интерфейса это определение (какой? чей? который?) или приложение (кто или что именно?).

Город какой именно?

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

В отли­чие от чек­бок­сов, радиокнопки все­гда обра­зуют группы — выбор из един­ствен­ного вари­анта не имеет смысла.

Как и в слу­чае с чек­бок­сами, общие слова стоит выне­сти за скобку.

Но выно­сить пред­лог плохо: он нераз­рывно свя­зан со своим текстом.

Хоро­ший вари­ант — пока­зать пред­лог у пер­вого элемента.

В отличие от чекбоксов, радиокнопки всегда образуют группы — выбор из единственного варианта не имеет смысла.

Как и в случае с чекбоксами, общие слова стоит вынести за скобку.

Но выносить предлог плохо: он неразрывно связан со своим текстом.

Хороший вариант — показать предлог у первого элемента.

Под­пись радиокнопки не может быть отве­том на вопрос в форме гла­го­лов, напри­мер «Под­твер­дить», или частиц «Да» и «Нет».

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

Подпись радиокнопки не может быть ответом на вопрос в форме глаголов, например «Подтвердить», или частиц «Да» и «Нет».

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

Уточнение действия

Дополнение: использовать что? сделать с чем? кому?

Обстоятельство: Сделать как? где? когда?

Вто­рая функ­ция радиокно­пок — уточ­не­ние дей­ствия. В син­так­сисе эле­мен­тов интер­фейса это допол­не­ние (исполь­зо­вать что? сде­лать с чем? кому?) или обсто­я­тель­ство (сде­лать как? где? когда?).

В допол­не­ниях исполь­зу­ются суще­стви­тель­ные в кос­вен­ном падеже (в при­мере — вини­тель­ный). В обсто­я­тель­ствах исполь­зу­ются наре­чия, дее­при­ча­стия, суще­стви­тель­ные в тво­ри­тель­ном падеже и суще­стви­тель­ные в кос­вен­ном падеже с предлогом.

Дополнения

Обстоятельства

Уточнение действия

Дополнение: использовать что? сделать с чем? кому?

Обстоятельство: Сделать как? где? когда?

Вторая функция радиокнопок — уточнение действия. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или обстоятельство (сделать как? где? когда?).

В дополнениях используются существительные в косвенном падеже (в примере — винительный). В обстоятельствах используются наречия, деепричастия, существительные в творительном падеже и существительные в косвенном падеже с предлогом.

Дополнения

Обстоятельства

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

В при­мере радиокнопки отве­чают на вопрос «Как сле­дует завер­шить работу?»

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

В примере радиокнопки отвечают на вопрос «Как следует завершить работу?»

Определение: Какой, чей, который?

Приложение: Кто или что именно?

Дополнение: использовать что? сделать с чем? кому?

Обстоятельство: Сделать как? где? когда?

Подлежащее: Что?

Поле ввода

Выбор, уточнение, ввод текстовых и числовых данных

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

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

Поле ввода

Выбор, уточнение, ввод текстовых и числовых данных

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

В синтаксисе элементов интерфейса это любой член предложения, кроме сказуемого.

Определение: Какой, чей, который?

Приложение: Кто или что именно?

Дополнение: использовать что? сделать с чем? кому?

Обстоятельство: Сделать как? где? когда?

Подлежащее: Что?

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

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

В таких слу­чах можно сде­лать исклю­че­ние и всё‑таки исполь­зо­вать глагол.

Но лучше — найти фор­му­ли­ровку в син­так­си­че­ски пра­виль­ной форме.

Плохо

Хорошо

Так себе

Хорошо

Плохо

Хорошо

Так себе

Хорошо

В подписях элементов интерфейса не нужны глаголы в повелительном наклонении: «введите, укажите».

Здесь достаточно существительного. Но при вводе в свободной форме хочется подсказать пользователю — вдруг он не поймёт, просят ли ввести старый пароль или придумать новый.

В таких случах можно сделать исключение и всё‑таки использовать глагол.

Но лучше — найти формулировку в синтаксически правильной форме.

Указатель в штате Нью‑Мексико

Пиктограммы

Эта пик­то­грамма о чём‑то пре­ду­пре­ждает. Попро­буйте дога­даться, о чём именно.

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

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

Указатель в штате Нью‑Мексико

Пиктограммы

Эта пиктограмма о чём‑то предупреждает. Попробуйте догадаться, о чём именно.

Наскальный рисунок был найден перед крутой горной тропой. Он предупреждает всадников о том, что по тропе может взобраться только горный козёл, — лошади подъём не под силу.

Наскальный рисунок был найден перед крутой горной тропой. Он предупреждает всадников о том, что по тропе может взобраться только горный козёл, — лошади подъём не под силу.

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

Альта, Норвегия
Нашенал‑географик

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

Альта, Норвегия
Нашенал‑географик

Этрусская письменность. Каменная плита недалеко от Перуджи, Италия. Фото: Саилко

Глаголица. Башчанская плита, памятник хорватской письменности

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

Этрусская письменность. Каменная плита недалеко от Перуджи, Италия. Фото: Саилко

Глаголица. Башчанская плита, памятник хорватской письменности

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

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

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

Пиктограммы летних игр в Рио‑де‑Жанейро, 2016

На олим­пий­ских играх интер­на­ци­о­наль­ность пик­то­грамм имеет ско­рее идео­ло­ги­че­ское значение.

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

Пиктограммы летних игр в Рио‑де‑Жанейро, 2016

На олимпийских играх интернациональность пиктограмм имеет скорее идеологическое значение.

И на транспорте, и здесь пиктограммы изображают сам предмет, который обозначают. Успех пиктограммы зависит от того, знако́м ли предмет человеку и хорошо ли он изображён.

Когда пред­мет мало­узна­ваем или пик­то­граммы не озна­чают сам пред­мет, ста­но­вится непонятно.

Автор неизвестен

Автор неизвестен

Когда предмет малоузнаваем или пиктограммы не означают сам предмет, становится непонятно.

Пример набора пиктограмм, созданного методом «конструирования языка»

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

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

Пример набора пиктограмм, созданного методом «конструирования языка»

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

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

Все одинаковые

Все одинаковые

Классический тулбар «Ворда»

Слова понят­нее пик­то­грамм. Зато кар­тинку легче узнать.

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

В первую оче­редь мы вос­при­ни­маем рас­по­ло­же­ние, цвет и форму. Белое пятно слева — это новый доку­мент. Жёл­тое — открыть. Синие с белым — сохранить.

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

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

Классический тулбар «Ворда»

Слова понятнее пиктограмм. Зато картинку легче узнать.

Знакомая пиктограмма помогает быстро найти нужную команду. Когда речь о таких абстрактных понятиях, как база данных, сетевая папка или гиперссылка, трудно изобразить сам предмет. Объяснить их без слов невозможно.

В первую очередь мы воспринимаем расположение, цвет и форму. Белое пятно слева — это новый документ. Жёлтое — открыть. Синие с белым — сохранить.

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

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

Среди поль­зо­ва­те­лей Вин­до­уса были попу­лярны темы оформ­ле­ния опе­ра­ци­он­ной системы, кото­рые меняли обои рабо­чего стола, цвета интер­фейса, кур­соры мыши и систем­ные пик­то­граммы. В одной теме оформ­ле­ния все иконки могли стать цве­точ­ками, в дру­гой — пла­не­тами. Но поль­зо­ва­тели быстро запо­ми­нали, что Земля — это «Мой ком­пью­тер», а Юпи­тер — «Корзина».

Конечно, я не при­зы­ваю рисо­вать на пик­то­грам­мах бес­смыс­лицу. И дизай­неру, и поль­зо­ва­телю спо­кой­нее, когда нари­со­ва­ному есть объ­яс­не­ние. Но:

Пиктограмма для узнавания,
а не объяснения

Среди пользователей Виндоуса были популярны темы оформления операционной системы, которые меняли обои рабочего стола, цвета интерфейса, курсоры мыши и системные пиктограммы. В одной теме оформления все иконки могли стать цветочками, в другой — планетами. Но пользователи быстро запоминали, что Земля — это «Мой компьютер», а Юпитер — «Корзина».

Конечно, я не призываю рисовать на пиктограммах бессмыслицу. И дизайнеру, и пользователю спокойнее, когда нарисованому есть объяснение. Но:

Пиктограмма для узнавания, а не объяснения

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

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

Классический тулбар «Бата»

Эскиз нового набора пиктограмм

Пиктограммы в интерфейсе

В 2008 году в бюро спро­ек­ти­ро­вали интер­фейс новой вер­сии поч­то­вого кли­ента. В преды­ду­щей вер­сии основ­ные кнопки управ­ле­ния поч­той были слиш­ком похожи.

Для каж­дой был выбран цвет и при­ду­ман узна­ва­е­мый символ.

А потом их рас­кра­сили в соот­вет­ствии со сти­лем эпохи скео­мор­физма. Узна­ва­е­мость не постра­дает, если стиль поменять.

Классический тулбар «Бата»

Эскиз нового набора пиктограмм

Пиктограммы в интерфейсе

В 2008 году в бюро спроектировали интерфейс новой версии почтового клиента. В предыдущей версии основные кнопки управления почтой были слишком похожи.

Для каждой был выбран цвет и придуман узнаваемый символ.

А потом их раскрасили в соответствии со стилем эпохи скеоморфизма. Узнаваемость не пострадает, если стиль поменять.

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

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

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

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

Пиктограммы лифта и лестницы

Слова

Это моя люби­мая пик­то­грамма лифта из кол­лек­ции Артёма Горбунова.

Легко пред­ста­вить себе ход мысли дизай­нера: «Нари­сую‑ка я пас­са­жи­ров, да раз­ного пола, чтобы без дис­кри­ми­на­ции. Ой, полу­чился туа­лет. Надо, навер­ное, засу­нуть их в ящик, а ящик в шахту, чтобы было ясно, что лифт. Нет, чё‑то не лифт. Может, трос при­ри­со­вать? Да, кнопки на стене! Вот оно!»

А потом при­шёл заказ­чик и ска­зал: «Ох, давайте под икон­кой напи­шем ЛИФТ, а то непо­нятно как‑то».

Мно­го­ты­ся­че­лет­няя эво­лю­ция пик­то­грамм неда­ром при­вела к появ­ле­нию алфа­вита и слов.

Слова понятнее

Пиктограммы лифта и лестницы

Слова

Это моя любимая пиктограмма лифта из коллекции Артёма Горбунова.

Легко представить себе ход мысли дизайнера: «Нарисую‑ка я пассажиров, да разного пола, чтобы без дискриминации. Ой, получился туалет. Надо, наверное, засунуть их в ящик, а ящик в шахту, чтобы было ясно, что лифт. Нет, чё‑то не лифт. Может, трос пририсовать? Да, кнопки на стене! Вот оно!»

А потом пришёл заказчик и сказал: «Ох, давайте под иконкой напишем ЛИФТ, а то непонятно как‑то».

Многотысячелетняя эволюция пиктограмм недаром привела к появлению алфавита и слов.

Слова понятнее

Этот интер­фейс инфор­ма­ти­вен и не застав­ляет уга­ды­вать назна­че­ние эле­мен­тов — всё напи­сано пря­мым текстом.

Без единой пиктограммы. Нортон Командер

Без единой пиктограммы. Нортон Командер

Этот интерфейс информативен и не заставляет угадывать назначение элементов — всё написано прямым текстом.

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

Максим Ильяхов. Информационный стиль

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

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

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

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

Максим Ильяхов. Информационный стиль

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

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

Посмотрим, какие слова говорят о проблемах в интерфейсе, а какие — делают его однозначным, информативным и человечным.

Стоп‑слова

Плохо

Хорошо

основной, общий, базовый, главный

Основ­ной раздел

Общие настройки

Мебель

Рабо­чий стол

расши­ренный, дополнитель­ный

Рас­ши­рен­ные параметры

Дополни­тельно

Доступ и конфиден­циаль­ность

В нави­га­ции дизай­неры часто исполь­зуют деле­ние на «основ­ное» и «вто­ро­сте­пен­ное». Про­блема в том, что прин­цип деле­ния неиз­ве­стен — зача­стую и самому дизай­неру. Кон­крет­ный пара­метр, кото­рый ищет поль­зо­ва­тель — общий или частный?

«Допол­ни­тельно» — обычно свалка всего, чему дизай­нер не нашёл места.

В навигации дизайнеры часто используют деление на «основное» и «второстепенное». Проблема в том, что принцип деления неизвестен — зачастую и самому дизайнеру. Конкретный параметр, который ищет пользователь — общий или частный?

«Дополнительно» — обычно свалка всего, чему дизайнер не нашёл места.

Стоп‑слова

Плохо

Хорошо

основной, общий, базовый, главный

Основной раздел

Общие настройки

Мебель

Рабочий стол

расши­ренный, дополнитель­ный

Расширенные параметры

Дополни­тельно

Доступ и конфиден­циаль­ность

Стоп‑слова

Плохо

Хорошо

полезный, важный, справочный

Полез­ные ссылки

Книги о вёрстке

инфор­мация, сведения

Справочная инфор­мация

Как использовать маску слоя

Выде­ле­ние в нави­га­ции «полез­ного» озна­чает, что осталь­ное бес­по­лезно. Вме­сто кон­ста­та­ции пользы объ­яс­ните, в чём она состоит: «Советы начи­на­ю­щим сноубордистам».

Что из пред­став­лен­ного на сайте или в интер­фейсе не явля­ется инфор­ма­цией или сведениями?

Выделение в навигации «полезного» означает, что остальное бесполезно. Вместо констатации пользы объясните, в чём она состоит: «Советы начинающим сноубордистам».

Что из представленного на сайте или в интерфейсе не является информацией или сведениями?

Стоп‑слова

Плохо

Хорошо

полезный, важный, справочный

Полезные ссылки

Книги о вёрстке

инфор­мация, сведения

Справочная инфор­мация

Как использовать маску слоя

Стоп‑слова

Плохо

Хорошо

форма, страница, меню, навигация, шаг

Форма заказа

Пицца на дом

обязательно, необходимо, должен

Обя­за­тель­ное поле

Запол­ните, чтобы получить...

В пароле должны содер­жаться...

Рекомендуем изменить пароль...

пожалуйста, просим

Пожалуйста, укажите телефон

Перезвоним по этому номеру, когда будет готово

Слово «форма» озна­чает тип экрана — набор полей для запол­не­ния. Чело­век и так видит, что перед ним форма. Назо­вите со смыс­лом: «Покупка Айфона».

Вме­сто тре­бо­ва­ний и упра­ши­ва­ний объ­яс­няйте пользу от запол­не­ния в мире поль­зо­ва­теля: «Курьер позво­нит за час».

Слово «форма» означает тип экрана — набор полей для заполнения. Человек и так видит, что перед ним форма. Назовите со смыслом: «Покупка Айфона».

Вместо требований и упрашиваний объясняйте пользу от заполнения в мире пользователя: «Курьер позвонит за час».

Стоп‑слова

Плохо

Хорошо

форма, страница, меню, навигация, шаг

Форма заказа

Пицца на дом

обязательно, необходимо, должен

Обязательное поле

Заполните, чтобы получить...

В пароле должны содер­жаться...

Рекомендуем изменить пароль...

пожалуйста, просим

Пожалуйста, укажите телефон

Перезвоним по этому номеру, когда будет готово

Стоп‑слова

Плохо

Хорошо

список, каталог, сборник

Спи­сок литературы

Литература

Ката­лог обоев

Обои

Сбор­ник хитов

Хиты

Если слово про­сто обо­зна­чает мно­же­ство, убирайте его.

Если слово просто обозначает множество, убирайте его.

Стоп‑слова

Плохо

Хорошо

список, каталог, сборник

Список литературы

Литература

Каталог обоев

Обои

Сборник хитов

Хиты

Стоп‑слова

Плохо

Хорошо

ста­тья, мате­риал, пуб­ли­ка­ция, пост

Ста­тьи номера

О новых пра­ви­лах бухучёта

Све­жий пост

Только что в Москве

архив

Архив новостей

2007 год

Слова для клас­си­фи­ка­ции содер­жи­мого полезны в редак­ции, но для чита­теля они бес­смыс­ленны: в газете не бывает раз­дела «статьи».

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

Слова для классификации содержимого полезны в редакции, но для читателя они бессмысленны: в газете не бывает раздела «статьи».

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

Стоп‑слова

Плохо

Хорошо

статья, материал, публикация, пост

Статьи номера

О новых правилах бухучёта

Свежий пост

Только что в Москве

архив

Архив новостей

2007 год

Стоп‑слова

Плохо

Хорошо

здесь, сюда

введите, выберите, нажмите, перейдите

Клик­ните здесь

Перей­дите по ссылке

Вве­дите пароль

Выбе­рите оператора

Заказ такси

Квар­тиры посуточно

Пароль

Оператор

Эти слова ука­зы­вают на эле­менты управ­ле­ния или при­зы­вают ими воспользоваться.

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

О синтаксисе стандартных элементов:

Эти слова указывают на элементы управления или призывают ими воспользоваться.

Но стандартные элементы уже своим видом подсказывают, что с ними делать. Подпишите их в соответствии с их синтаксической ролью.

Стоп‑слова

Плохо

Хорошо

здесь, сюда

введите, выберите, нажмите, перейдите

Кликните здесь

Перейдите по ссылке

Введите пароль

Выберите оператора

Заказ такси

Квартиры посуточно

Пароль

Оператор

О синтаксисе стандартных элементов:

Стоп‑слова

Плохо

Хорошо

операция, процесс

Процесс не отвечает

Из-за ошибки программу нужно перезапустить

запрос, транзакция

Некорректный запрос

Сервер перегружен. Попробуйте через час

данные, формат

Укажите данные

Номер паспорта

модуль, функция

Модуль не установ­лен

Проверка орфографии — в платной версии

статус, состояние

Не удалось изменить статус

Наушники не добавлены в избранное, так как пропал интернет

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

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

Стоп‑слова

Плохо

Хорошо

операция, процесс

Процесс не отвечает

Из-за ошибки программу нужно перезапустить

запрос, транзакция

Некорректный запрос

Сервер перегружен. Попробуйте через час

данные, формат

Укажите данные

Номер паспорта

модуль, функция

Модуль не установ­лен

Проверка орфо­графии — в платной версии

статус, состояние

Не удалось изменить статус

Наушники не добавлены в избранное, так как пропал интернет

Стоп‑слова

Плохо

Хорошо

автори­зация, аутентифи­кация идентифи­кация

Для доступа авторизуй­тесь

Пароль

сессия, лимит

Время сессии истекло

Для безопас­ности введите пароль ещё раз

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

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

Стоп‑слова

Плохо

Хорошо

автори­зация, аутентифи­кация идентифи­кация

Для доступа авторизуй­тесь

Пароль

сессия, лимит

Время сессии истекло

Для безопас­ности введите пароль ещё раз

Стоп‑слова

Плохо

Хорошо

успешный

Опе­ра­ция успешно завершена

Новая вер­сия установлена

Если опе­ра­ция завер­шена без­успешно, она не завер­шена. Напи­шите, что сде­лано: «Деньги отправ­лены», «Заказ принят».

Стоп‑слова не обя­за­тельно уби­рать. Если вы пони­ма­ете, почему слово неудач­ное, но в вашем слу­чае оно под­хо­дит лучше всего, оставляйте.

Подроб­нее о редак­туре и стоп‑сло­вах — в учеб­нике Мак­сима Ильяхова.

Если операция завершена безуспешно, она не завершена. Напишите, что сделано: «Деньги отправлены», «Заказ принят».

Стоп‑слова

Плохо

Хорошо

успешный

Операция успешно завершена

Новая версия установлена

Стоп‑слова не обязательно убирать. Если вы понимаете, почему слово неудачное, но в вашем случае оно подходит лучше всего, оставляйте.

Подробнее о редактуре и стоп‑словах — в учебнике Максима Ильяхова.

Язык роботов

Представление (англ. view) — в базах данных виртуальная таблица, именованный запрос

Вот как на языке про­граммы «Аут­лук» будет «новых писем нет». В пустом списке выво­дится стан­дарт­ное сооб­ще­ние: «В этом пред­став­ле­нии отсут­ствуют эле­менты для отображения».

В про­грамме есть «пред­став­ле­ния», кото­рые умеют отоб­ра­жать любые «эле­менты», не зная ничего об их природе.

Такой машин­ный язык — побоч­ный эффект технозависимости.

Язык роботов

Вот как на языке программы «Аутлук» будет «новых писем нет». В пустом списке выводится стандартное сообщение: «В этом представлении отсутствуют элементы для отображения».

В программе есть «представления», которые умеют отображать любые «элементы», не зная ничего об их природе.

Такой машинный язык — побочный эффект технозависимости.

Представление (англ. view) — в базах данных виртуальная таблица, именованный запрос

Здесь име­ется в виду, что «Мне нра­вится» — это логи­че­ский атри­бут объ­екта (лайк или есть, или нет). И по каким‑то при­чи­нам изме­нить зна­че­ние этого атри­бута не полу­чи­лось. Живой чело­век нико­гда бы так это не сформулировал.

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

Здесь имеется в виду, что «Мне нравится» — это логический атрибут объекта (лайк или есть, или нет). И по каким‑то причинам изменить значение этого атрибута не получилось. Живой человек никогда бы так это не сформулировал.

Иногда на экран вываливают технический мусор, непонятный обычному человеку.

Вме­сто про­гресс­бара Вин­доус пока­зы­вает некие номера опе­ра­ций обнов­ле­ния и даже путь к ветке систем­ного реестра:

Вместо прогрессбара Виндоус показывает некие номера операций обновления и даже путь к ветке системного реестра:

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

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

Неразрешимое противоречие

Если проблему можно «проигнорировать», то почему компьютер не сделал этого сам?

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

Неразрешимое противоречие

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

Если проблему можно «проигнорировать», то почему компьютер не сделал этого сам?

Порой в интер­фейс про­ни­кают сооб­ще­ния, не име­ю­щие ника­кого смысла с точки зре­ния поль­зо­ва­теля. Страна Рос­сия — есть.

А это — вообще не адрес элек­трон­ной почты.

Порой в интерфейс проникают сообщения, не имеющие никакого смысла с точки зрения пользователя. Страна Россия — есть.

А это — вообще не адрес электронной почты.

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

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

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

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

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

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

Меха­ни­че­ская сборка фраз осо­бенно плохо рабо­тает с рус­ским язы­ком. Чтобы избе­жать скло­не­ния слов, авторы изоб­ре­тают про­ти­во­есте­ствен­ные кон­струк­ции — вме­сто «2 письма» и «5 писем» пишут «писем: 2».

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

На следующем языке: русский

На следующем языке: русский

Механическая сборка фраз особенно плохо работает с русским языком. Чтобы избежать склонения слов, авторы изобретают противоестественные конструкции — вместо «2 письма» и «5 писем» пишут «писем: 2».

Двоеточие в интерфейсе стало универсальным разделителем, почему‑то помогающим авторам смириться с нечеловечностью текста.

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

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

Ещё один источ­ник машин­ного языка — непреду­смот­рен­ные шаб­ло­ном случаи.

На карте стан­дар­тов теле­ве­ща­ния видно, что в Рос­сии — SECAM, в Аме­рике — NTSC, в Австра­лии — PAL. А вот в какой системе смот­рят теле­ви­де­ние пинг­вины — таких дан­ных у Вики­пе­дии будто бы нет. Здесь исполь­зо­ван шаб­лон Вики­пе­дии, гене­ри­ру­ю­щий карту из име­ю­щихся дан­ных. Где дан­ных нет, так и написано.

Если бы иллю­стра­цию делал чело­век, Антарк­тиду бы про­сто не рисо­вали, и в легенде бы не было квад­ра­тика «нет данных».

Википедия

Википедия

Ещё один источник машинного языка — непредусмотренные шаблоном случаи.

На карте стандартов телевещания видно, что в России — SECAM, в Америке — NTSC, в Австралии — PAL. А вот в какой системе смотрят телевидение пингвины — таких данных у Википедии будто бы нет. Здесь использован шаблон Википедии, генерирующий карту из имеющихся данных. Где данных нет, так и написано.

Если бы иллюстрацию делал человек, Антарктиду бы просто не рисовали, и в легенде бы не было квадратика «нет данных».

Спро­сить у поль­зо­ва­теля под­твер­жде­ние стан­дарт­ным диа­ло­го­вым окном Вин­до­уса — это одна строчка кода. Не нужно под­би­рать иконку, рас­по­ла­гать и под­пи­сы­вать кнопки — доста­точно пере­дать системе сам текст зада­ва­е­мого вопроса. Когда про­грам­мист забы­вает посмот­реть, что у него полу­чи­лось, слу­ча­ется курьёз.

Что нажи­мать? Когда я пока­зы­ваю этот при­мер на курсе, все хором гово­рят «Крестик!».

Спросить у пользователя подтверждение стандартным диалоговым окном Виндоуса — это одна строчка кода. Не нужно подбирать иконку, располагать и подписывать кнопки — достаточно передать системе сам текст задаваемого вопроса. Когда программист забывает посмотреть, что у него получилось, случается курьёз.

Что нажимать? Когда я показываю этот пример на курсе, все хором говорят «Крестик!».

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

А как отве­тить на вопрос «Чело­век ли вы?» Ответ «Да» неве­рен, сле­дует отве­тить LVccU.

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

А как ответить на вопрос «Человек ли вы?» Ответ «Да» неверен, следует ответить LVccU.

Подо­брать пра­виль­ный падеж суще­стви­тель­ного к чис­ли­тель­ному (2 ком­мен­та­рия, 5 ком­мен­та­риев) — это несколько строк кода. Не стоит лениться их писать. ВК умеет даже скло­нять имена людей, что намного сложнее.

Скоро поня­тие «язык робо­тов» поте­ряет смысл: роботы научатся гово­рить как люди и даже лучше.

Роботы как люди, а не наоборот

Подобрать правильный падеж существительного к числительному (2 комментария, 5 комментариев) — это несколько строк кода. Не стоит лениться их писать. ВК умеет даже склонять имена людей, что намного сложнее.

Скоро понятие «язык роботов» потеряет смысл: роботы научатся говорить как люди и даже лучше.

Роботы как люди, а не наоборот

Тест

Подписи чекбоксов или радиокнопок в группе обязательно должны быть:

В одном падеже
Одной частью речи
Однородными членами предложения
Одной категории состояния
С одинаковым порядком слов

В синтаксисе элементов интерфейса чекбоксы и радиокнопки — второстепенные члены предложения. Если они объединены в группу, они должны быть однородными.

Выберите примеры с недостатками в тексте подписей элементов управления.

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

Как можно перевести кнопку Copy на русский?

Копируют
Скопировать
Скопировано
Копия (а не оригинал)
Копируемыми
Идёт копирование...

Функции кнопки — команда, статус и навигация. Из предложенных вариантов подходят «Скопировать» (команда, глагольное сказуемое) и «Копия» (статус, именное сказуемое), а остальные не подходят.

Как можно перевести чекбокс Copy на русский? Этот чекбокс — часть группы.

Скопировать
Скопировано
Копия (а не оригинал)
Копируемыми
Идёт копирование...

Функции чекбокса — выбор объекта или свойства и уточнение действия. Из предложенных вариантов подходят «Скопировать» (уточнение действия) и «Копия» (объект или свойство). Остальные не подходят.

Выберите наилучший вариант подписи к полю ввода города доставки.

Какой у вас город?
Введите город
Укажите город
Город?
Город
Мы доставим сюда

Функции поля ввода — это выбор, уточнение, ввод текста и чисел. Допустимы несколько вариантов, но нужно выбрать наилучший, и это вариант «Город». При такой подписи значение поля ввода будет приложением, отвечать на вопрос «Какой именно?», а вместе подпись и значение будут образовывать словосочетание, например «Город Москва». Другие варианты избыточны или просто некорректны.

Выберите верные утверждения.

На кнопке, используемой для отдачи команды, должен быть глагол совершенного вида в начальной форме: что сделать?
В подписях радиокнопок в одной группе могут быть разные части речи
Чекбокс должен отвечать на вопрос: да или нет?
Поле ввода может использоваться для ввода подлежащего
Если чекбокс по умолчанию выключен, то для соответствия этому состоянию рекомендуется использовать негативную формулировку
При выключении чекбокса хорошо заменять формулировку на противоположную
Среди предыдущих вариантов нет верного

Команда — это глагол совершенного вида в начальной форме: «Сохранить», «Закрыть», «Отправить». Радиокнопки в группе могут быть разными частями речи: «Город Москва / Питер / другой». В поле ввода может быть подлежащее, например поисковый запрос: музыка. Остальные утверждения неверны.

Как сделать пиктограммы из этого набора более различимыми?

Сделать их чёрно‑белыми
Взять каждую в рамку
Убрать мишек

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

Выберите стоп‑слова в этом интерфейсе.

Пожалуйста
Данные учётной записи
Требуется
Перейдите

Все ответы правильные. «Пожалуйста» и «требуется» нужно заменить на объяснение в мире пользователя. «Данные учётной записи» — тяжеловесный технический термин. «Перейдите» — избыточно в тексте ссылки.

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

Спросить пол прямо в письме, сославшись на то, что это обязательное поле, и сразу после выбора поздравлять с подходящим праздником
Определять пол автоматически по имени, когда возможно
Если пол важен для какой‑то полезной функции сайта, спросить его, объяснив эту пользу, а с праздниками поздравлять только когда поздравление точно по адресу
Исправить орфографические ошибки

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

Какие причины появления языка роботов в интерфейсе перечислены автором?

Плохой перевод на русский
Механическое составление предложений
Использование неподходящего шаблона
Нарушение закона Фиттса
Технозависимость
Взгляд новичка

Закон Фиттса и взгляд новичка ни при чём, а остальное действительно ведёт к появлению языка роботов в интерфейсе.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Подписи чекбоксов или радиокнопок в группе обязательно должны быть:

В одном падеже
Одной частью речи
Однородными членами предложения
Одной категории состояния
С одинаковым порядком слов

В синтаксисе элементов интерфейса чекбоксы и радиокнопки — второстепенные члены предложения. Если они объединены в группу, они должны быть однородными.

Выберите примеры с недостатками в тексте подписей элементов управления.

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

Как можно перевести кнопку Copy на русский?

Копируют
Скопировать
Скопировано
Копия (а не оригинал)
Копируемыми
Идёт копирование...

Функции кнопки — команда, статус и навигация. Из предложенных вариантов подходят «Скопировать» (команда, глагольное сказуемое) и «Копия» (статус, именное сказуемое), а остальные не подходят.

Как можно перевести чекбокс Copy на русский? Этот чекбокс — часть группы.

Скопировать
Скопировано
Копия (а не оригинал)
Копируемыми
Идёт копирование...

Функции чекбокса — выбор объекта или свойства и уточнение действия. Из предложенных вариантов подходят «Скопировать» (уточнение действия) и «Копия» (объект или свойство). Остальные не подходят.

Выберите наилучший вариант подписи к полю ввода города доставки.

Какой у вас город?
Введите город
Укажите город
Город?
Город
Мы доставим сюда

Функции поля ввода — это выбор, уточнение, ввод текста и чисел. Допустимы несколько вариантов, но нужно выбрать наилучший, и это вариант «Город». При такой подписи значение поля ввода будет приложением, отвечать на вопрос «Какой именно?», а вместе подпись и значение будут образовывать словосочетание, например «Город Москва». Другие варианты избыточны или просто некорректны.

Выберите верные утверждения.

На кнопке, используемой для отдачи команды, должен быть глагол совершенного вида в начальной форме: что сделать?
В подписях радиокнопок в одной группе могут быть разные части речи
Чекбокс должен отвечать на вопрос: да или нет?
Поле ввода может использоваться для ввода подлежащего
Если чекбокс по умолчанию выключен, то для соответствия этому состоянию рекомендуется использовать негативную формулировку
При выключении чекбокса хорошо заменять формулировку на противоположную
Среди предыдущих вариантов нет верного

Команда — это глагол совершенного вида в начальной форме: «Сохранить», «Закрыть», «Отправить». Радиокнопки в группе могут быть разными частями речи: «Город Москва / Питер / другой». В поле ввода может быть подлежащее, например поисковый запрос: музыка. Остальные утверждения неверны.

Как сделать пиктограммы из этого набора более различимыми?

Сделать их чёрно‑белыми
Взять каждую в рамку
Убрать мишек

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

Выберите стоп‑слова в этом интерфейсе.

Пожалуйста
Данные учётной записи
Требуется
Перейдите

Все ответы правильные. «Пожалуйста» и «требуется» нужно заменить на объяснение в мире пользователя. «Данные учётной записи» — тяжеловесный технический термин. «Перейдите» — избыточно в тексте ссылки.

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

Спросить пол прямо в письме, сославшись на то, что это обязательное поле, и сразу после выбора поздравлять с подходящим праздником
Определять пол автоматически по имени, когда возможно
Если пол важен для какой‑то полезной функции сайта, спросить его, объяснив эту пользу, а с праздниками поздравлять только когда поздравление точно по адресу
Исправить орфографические ошибки

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

Какие причины появления языка роботов в интерфейсе перечислены автором?

Плохой перевод на русский
Механическое составление предложений
Использование неподходящего шаблона
Нарушение закона Фиттса
Технозависимость
Взгляд новичка

Закон Фиттса и взгляд новичка ни при чём, а остальное действительно ведёт к появлению языка роботов в интерфейсе.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

4
Экраны

4
Экраны

Окна

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

Обложка брошюры о Виндоусе, 1986
Скан Майкла Холли

Обложка брошюры о Виндоусе, 1986
Скан Майкла Холли

Окна

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

Перекрывающиеся окна в Виндоусе 3.11

Окно — само­сто­я­тель­ная область экрана с эле­мен­тами управ­ле­ния. В окне может выпол­няться отдель­ная про­грамма, оно может пред­став­лять отдель­ный доку­мент или само­сто­я­тель­ную функ­цию программы.

В 2017 году, когда мы гово­рим «окна», мы под­ра­зу­ме­ваем пере­кры­ва­ю­щи­еся окна, у кото­рых раз­мер и поло­же­ние можно выби­рать произвольно.

Про­стран­ство, по кото­рому пере­ме­ща­ются окна, назы­ва­ется «рабо­чим столом».

Перекрывающиеся окна в Виндоусе 3.11

Окно — самостоятельная область экрана с элементами управления. В окне может выполняться отдельная программа, оно может представлять отдельный документ или самостоятельную функцию программы.

В 2017 году, когда мы говорим «окна», мы подразумеваем перекрывающиеся окна, у которых размер и положение можно выбирать произвольно.

Пространство, по которому перемещаются окна, называется «рабочим столом».

Про­граммы исполь­зуют окна по‑разному.

Многодокументный интерфейс

Однодокументный интерфейс

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

Дру­гие про­граммы предо­став­ляют каж­дому доку­менту неза­ви­си­мое окно на рабо­чем столе.

Пока­зан­ный здесь «Ворд» в раз­ных вер­сиях под­дер­жи­вал раз­ные подходы.

Программы используют окна по‑разному.

Многодокументный интерфейс

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

Однодокументный интерфейс

Другие программы предоставляют каждому документу независимое окно на рабочем столе.

Показанный здесь «Ворд» в разных версиях поддерживал разные подходы.

Установка пароля в Макосе 9

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

Выбор цвета в Виндоусе 95

О вреде подтверждений:

О модальных окнах:

Установка пароля в Макосе 9

Выбор цвета в Виндоусе 95

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

О вреде подтверждений:

О модальных окнах:

Это диа­ло­го­вое окно рас­ска­зы­вает о программе.

А это — сооб­щает об ошибке. Такой спо­соб инфор­ми­ро­ва­ния поль­зо­ва­теля — при­мер гру­бой обрат­ной связи.

Это диалоговое окно рассказывает о программе.

А это — сообщает об ошибке. Такой способ информирования пользователя — пример грубой обратной связи.

Бывает, что про­грамма пока­зы­вает в окнах не доку­менты, а иконки функ­ций и дру­гие эле­менты управ­ле­ния. Такие окна ино­гда назы­вают «пане­лями инстру­мен­тов» или «палитрами».

«Палитры» Фотошопа

«Палитры» Фотошопа

Бывает, что программа показывает в окнах не документы, а иконки функций и другие элементы управления. Такие окна иногда называют «панелями инструментов» или «палитрами».

Страница и её исходный код

Страница, её исходный код, терминал

Страница, код, терминал, файлы

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

Страница и её исходный код

Страница, её исходный код, терминал

Страница, код, терминал, файлы

Окна помогают одновременной работе с несколькими программами или документами: сравнению текста, перемещению файлов между папками, фоновому слежению за новостями. Но удобное размещение окон требует от пользователя аккуратности и терпения — хорошо получится после нескольких проб и ошибок.

Раз­ра­бот­чики интер­фейса часто зло­упо­треб­ляют окнами, сва­ли­вая на поль­зо­ва­теля работу по рас­по­ло­же­нию частей интер­фейса. Это выда­ётся за заботу: «поль­зо­ва­тель рас­ста­вит, как ему удобно». Боль­шин­ство поль­зо­ва­те­лей не знают или не заду­мы­ва­ются над тем, как будет удоб­нее всего, и в резуль­тате у мно­гих — бардак.

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

О линейном представлении функций программы:

Среда разработки «Делфи 4». Три основных рабочих окна мешают друг другу, а если открыть все окна, на экране будет настоящий бардак

Среда разработки «Делфи 4». Три основных рабочих окна мешают друг другу, а если открыть все окна, на экране будет настоящий бардак

Разработчики интерфейса часто злоупотребляют окнами, сваливая на пользователя работу по расположению частей интерфейса. Это выдаётся за заботу: «пользователь расставит, как ему удобно». Большинство пользователей не знают или не задумываются над тем, как будет удобнее всего, и в результате у многих — бардак.

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

О линейном представлении функций программы:

Фотошоп Артёма Горбунова

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

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

Фотошоп Артёма Горбунова

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

Работа дизайнера — найти конфигурацию, при которой всё, что нужно, было бы перед глазами и не требовало «разгребания».

Дизайнер не поработал

Дизайнер поработал

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

Ста­биль­ная кон­фи­гу­ра­ция окна помо­гает выра­бо­тать привычку.

Воз­мож­ность рас­по­ла­гать окна как угодно стоит вво­дить в послед­нюю очередь.

Дизайнер не поработал

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

Дизайнер поработал

Стабильная конфигурация окна помогает выработать привычку.

Возможность располагать окна как угодно стоит вводить в последнюю очередь.

Ай‑си‑кью, 2000

Телеграм, 2017

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

Совре­мен­ный мес­сен­джер уме­ща­ется в одном окне. Спи­сок диа­ло­гов слева, откры­тый диа­лог справа. Файл пере­да­ётся прямо в тек­сте диалога.

Ай‑си‑кью, 2000

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

Телеграм, 2017

Современный мессенджер умещается в одном окне. Список диалогов слева, открытый диалог справа. Файл передаётся прямо в тексте диалога.

Кон­фи­гу­ра­ция «спи­сок — объ­ект» зна­кома по мно­гим про­грам­мам: почта, чат, заметки.

Создание презентации в «Кейноуте». Слева список слайдов, справа открытый слайд

Создание презентации в «Кейноуте». Слева список слайдов, справа открытый слайд

Конфигурация «список — объект» знакома по многим программам: почта, чат, заметки.

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

Почта. Всё умещается в одном окне, но при желании любое письмо можно открыть в отдельном

Почта. Всё умещается в одном окне, но при желании любое письмо можно открыть в отдельном

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

«Инспектор» в Скетче

Настройку и филь­тры можно собрать на акку­рат­ной панели справа, а не на мно­го­чис­лен­ных пла­ва­ю­щих палитрах.

«Инспектор» в Скетче

Настройку и фильтры можно собрать на аккуратной панели справа, а не на многочисленных плавающих палитрах.

Ещё один шаб­лон — «нави­га­ция снизу». Чаще всего при­ме­ня­ется для листа­ния фото­гра­фий, но подой­дёт для пере­ме­ще­ния по любой линей­ной после­до­ва­тель­но­сти. В «Лай­труме» этот шаб­лон сов­ме­щён с шаб­ло­нами «спи­сок — объ­ект» и «настройка справа».

Чем слож­нее деле­ние окна, тем слож­нее дога­даться о связи между зонами. Фото­гра­фии снизу — из кол­лек­ции, выбран­ной слева. А настройка отно­сится к выбран­ной фотографии.

Ещё один шаблон — «навигация снизу». Чаще всего применяется для листания фотографий, но подойдёт для перемещения по любой линейной последовательности. В «Лайтруме» этот шаблон совмещён с шаблонами «список — объект» и «настройка справа».

Чем сложнее деление окна, тем сложнее догадаться о связи между зонами. Фотографии снизу — из коллекции, выбранной слева. А настройка относится к выбранной фотографии.

Бра­у­зер «Опера» одним из пер­вых научился пока­зы­вать несколько стра­ниц в одном окне. Но сна­чала он исполь­зо­вал мно­го­до­ку­мент­ный интер­фейс, то есть окна внутри роди­тель­ского окна.

Такой дизайн не стал популярным.

Браузер «Опера» одним из первых научился показывать несколько страниц в одном окне. Но сначала он использовал многодокументный интерфейс, то есть окна внутри родительского окна.

Такой дизайн не стал популярным.

Потом раз­ра­бот­чики бра­у­зе­ров при­ду­мали объ­еди­нить стра­ницы в одно окно со вклад­ками, кото­рые посте­пенно стали стан­дар­том во всех браузерах.

Вкладки — ещё один спо­соб орга­ни­зо­вать про­стран­ство без умно­же­ния окон.

При необ­хо­ди­мо­сти любая вкладка «отры­ва­ется» и пре­вра­ща­ется в отдель­ное окно.

Потом разработчики браузеров придумали объединить страницы в одно окно со вкладками, которые постепенно стали стандартом во всех браузерах.

Вкладки — ещё один способ организовать пространство без умножения окон.

При необходимости любая вкладка «отрывается» и превращается в отдельное окно.

В режиме срав­не­ния вер­сий файла редак­тор кода «ВС Код» делит экран пополам.

Это не мешает откры­вать файлы в отдель­ных окнах, когда нужно.

В режиме сравнения версий файла редактор кода «ВС Код» делит экран пополам.

Это не мешает открывать файлы в отдельных окнах, когда нужно.

Клас­си­че­ский при­мер деле­ния попо­лам — Нор­тон Коман­дер. Две папки на диске пока­зы­ва­ются в оди­на­ко­вых пане­лях рав­ного размера.

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

Классический пример деления пополам — Нортон Командер. Две папки на диске показываются в одинаковых панелях равного размера.

В настройке программ встречается такой приём: в одной половине окна показывают доступные элементы, а в другой — выбранные пользователем, и дают перемещать элементы из списка в список. Пример — из «Ворда».

Деле­ние видов в про­грам­мах трёх­мер­ного моде­ли­ро­ва­ния напо­ми­нает рас­по­ло­же­ние про­ек­ций на чертежах.

3Д‑студия Макс. Фрагмент

3Д‑студия Макс. Фрагмент

Деление видов в программах трёхмерного моделирования напоминает расположение проекций на чертежах.

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

+

+

В видео­ре­дак­торе «Финал‑кат» слева сверху биб­лио­тека видео­за­пи­сей в фор­мате «спи­сок — объ­ект», справа сверху — зона про­смотра мон­ти­ру­е­мого видео с «настрой­кой справа», а «нави­га­ция снизу» — линия вре­мени, на кото­рой и идёт монтаж.

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

В видеоредакторе «Финал‑кат» слева сверху библиотека видеозаписей в формате «список — объект», справа сверху — зона просмотра монтируемого видео с «настройкой справа», а «навигация снизу» — линия времени, на которой и идёт монтаж.

+

+

В диджей­ской про­грамме «Трак­тор» сверху рас­по­ло­жена панель эффек­тов, а под ней — две деки. Рас­ста­вить зоны как угодно нельзя, но есть несколько типо­вых конфигураций.

Если вклю­чить встро­ен­ный мик­шер, деки сплю­щи­ва­ются и осво­бож­дают для него место — это напо­ми­нает рас­по­ло­же­ние при­бо­ров на диджей­ском столе.

При выборе трека меди­а­тека, обычно при­жа­тая к низу окна, раз­во­ра­чи­ва­ется, а деки схло­пы­ва­ются. Меди­а­тека орга­ни­зо­вана в фор­мате «спи­сок — объект».

Трактор. Две деки

Трактор. Две деки и пульт

Трактор. Выбор трека

Трактор. Две деки

Трактор. Две деки и пульт

Трактор. Выбор трека

В диджейской программе «Трактор» сверху расположена панель эффектов, а под ней — две деки. Расставить зоны как угодно нельзя, но есть несколько типовых конфигураций.

Если включить встроенный микшер, деки сплющиваются и освобождают для него место — это напоминает расположение приборов на диджейском столе.

При выборе трека медиатека, обычно прижатая к низу окна, разворачивается, а деки схлопываются. Медиатека организована в формате «список — объект».

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

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

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

Также к левой сто­роне экрана при­жата панель быст­рого поиска объ­екта по номеру, а к пра­вой — панель групп быст­рого реа­ги­ро­ва­ния, где опе­ра­тор выби­рает, кого отпра­вить на объект.

Опе­ра­тор во время работы видит всё, что нужно, и не тра­тит время на управ­ле­ние интерфейсом.

О пользе прижатия панелей к краям экрана:

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

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

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

Также к левой стороне экрана прижата панель быстрого поиска объекта по номеру, а к правой — панель групп быстрого реагирования, где оператор выбирает, кого отправить на объект.

Оператор во время работы видит всё, что нужно, и не тратит время на управление интерфейсом.

О пользе прижатия панелей к краям экрана:

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

На этом экране «Выс­шей школы глав­буха» орга­ни­за­тор теста про­смат­ри­вает резуль­таты участ­ни­ков. Воз­никла задача не про­сто пока­зать резуль­таты тестов, но и как участ­ник отве­тил на кон­крет­ные вопросы.

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

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

На этом экране «Высшей школы главбуха» организатор теста просматривает результаты участников. Возникла задача не просто показать результаты тестов, но и как участник ответил на конкретные вопросы.

Первое, что пришло в голову — сделать такой попап с подробностями. Но это плохое решение.

Теорема о попапах

Попап — самое тупое, что можно сделать

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

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

Теорема о попапах

Попап — самое тупое, что можно сделать

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

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

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

На экране уже есть спи­сок участ­ни­ков, а ответы участ­ника логи­че­ски ему под­чи­нены. Напра­ши­ва­ется кон­струк­ция «спи­сок — объ­ект», но справа от участ­ни­ков нет на это места.

Реше­ние — при клике сдви­нуть участ­ни­ков левее и пока­зать вло­жен­ность анимацией.

Внутри ответы сгруп­пи­ро­ваны по темам, кото­рые рас­па­хи­ва­ются снизу.

Ани­ма­ция делает при­ду­ман­ное про­стран­ствен­ное реше­ние нагляд­ным. Экран­ное вол­шеб­ство ста­но­вится последовательным.

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

На экране уже есть список участников, а ответы участника логически ему подчинены. Напрашивается конструкция «список — объект», но справа от участников нет на это места.

Решение — при клике сдвинуть участников левее и показать вложенность анимацией.

Внутри ответы сгруппированы по темам, которые распахиваются снизу.

Анимация делает придуманное пространственное решение наглядным. Экранное волшебство становится последовательным.

Вордпад

ВС Код

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

Более уда­чен дизайн, где поиск «вырас­тает» из верх­ней части окна в виде одно­строч­ной полоски.

Вордпад

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

ВС Код

Более удачен дизайн, где поиск «вырастает» из верхней части окна в виде однострочной полоски.

Обычно пароль спра­ши­вают в модаль­ном окне. При этом при­вычно видеть поле пароля под полем имени. Для «Секьюри­джа» такое реше­ние не подо­шло: даже во время пере­дачи поста дру­гому опе­ра­тору всё должно быть на виду.

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

Обычно пароль спрашивают в модальном окне. При этом привычно видеть поле пароля под полем имени. Для «Секьюриджа» такое решение не подошло: даже во время передачи поста другому оператору всё должно быть на виду.

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

У деле­ния окна на зоны тоже есть пре­дел. Когда окно про­граммы начи­нает напо­ми­нать кар­тину Мон­дри­ана, поль­зо­ва­тель пере­стаёт пони­мать, как свя­заны раз­ные зоны и что на что влияет.

Пит Мондриан. Композиция с большой красной плоскостью, жёлтым, чёрным, серым и синим, 1921

У деления окна на зоны тоже есть предел. Когда окно программы начинает напоминать картину Мондриана, пользователь перестаёт понимать, как связаны разные зоны и что на что влияет.

Пит Мондриан. Композиция с большой красной плоскостью, жёлтым, чёрным, серым и синим, 1921

Формы

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

С фор­мами жизнь на волоске. Дизай­нер Людвиг Быст­ро­нов­ский пишет: «Вече­ром стою у метро, смер­ка­ется, холодно, поку­паю через смарт­фон билет на эрже­деш­ном сайте. Тык‑тык‑тык. Вби­ваю дан­ные пас­порта, всё время пере­клю­ча­юсь между про­грам­мами, начи­наю нервничать.

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

Если без формы не полу­ча­ется, задача про­ек­ти­ров­щика — упро­стить чело­веку её запол­не­ние. На это вли­яет и кон­струк­ция, и пове­де­ние формы.

Формы

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

С формами жизнь на волоске. Дизайнер Людвиг Быстроновский пишет: «Вечером стою у метро, смеркается, холодно, покупаю через смартфон билет на эржедешном сайте. Тык‑тык‑тык. Вбиваю данные паспорта, всё время переключаюсь между программами, начинаю нервничать.

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

Если без формы не получается, задача проектировщика — упростить человеку её заполнение. На это влияет и конструкция, и поведение формы.

Было

Хоро­шая вёрстка формы вызы­вает дове­рие. Срав­ните эти две формы интер­фейса флю­о­ро­гра­фи­че­ского ком­плекса «Про­Скан». До реди­зайна поля кар­точки паци­ента сто­яли как попало и были какого попало раз­мера — ими про­сто замо­ща­лось про­стран­ство экрана.

Стало

После реди­зайна те же поля собра­лись в после­до­ва­тель­ность и стали зани­мать неболь­шую колонку в пра­вой части окна.

Было

Хорошая вёрстка формы вызывает доверие. Сравните эти две формы интерфейса флюорографического комплекса «ПроСкан». До редизайна поля карточки пациента стояли как попало и были какого попало размера — ими просто замощалось пространство экрана.

Стало

После редизайна те же поля собрались в последовательность и стали занимать небольшую колонку в правой части окна.

В этой форме нет пря­мого пути к цели. Такую вёрстку полей в бюро назы­вают «кир­пич­ной клад­кой». Запол­нять непри­ятно: всё время дума­ешь, не про­пу­стил ли что.

Лучше ста­вить поля друг под другом.

О расположении радиокнопок:

О подписях внутри полей:

В этой форме нет прямого пути к цели. Такую вёрстку полей в бюро называют «кирпичной кладкой». Заполнять неприятно: всё время думаешь, не пропустил ли что.

Лучше ставить поля друг под другом.

О расположении радиокнопок:

О подписях внутри полей:

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

Спи­сок при­ни­ма­е­мых карт тоже оформ­лен как одно из полей; имя с фами­лией раз­де­лены — это тоже удли­няет форму зря. Кнопка отмены не нужна — кто пере­ду­мает поку­пать билет, про­сто уйдёт.

О группировке полей:

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

Список принимаемых карт тоже оформлен как одно из полей; имя с фамилией разделены — это тоже удлиняет форму зря. Кнопка отмены не нужна — кто передумает покупать билет, просто уйдёт.

О группировке полей:

Хорошо

Плохо

Плохо

Хорошо

Хорошо

Под­пись и текст полей наби­рают одним шриф­том и ста­вят на общую базо­вую линию.

Длин­ная под­пись может пере­не­стись на две строки. Бывает, что она спол­зает вверх и вырав­ни­ва­ется вер­ти­кально с сере­ди­ной поля. Когда строк две, про­блемы можно не заме­тить, решив, что под­пись «как раз» срав­ня­лась по высоте с полем.

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

Пер­вая строка подпи­си должна все­гда оста­ваться на месте.

Тот же прин­цип с мно­го­строч­ными полями: под­пись стоит на базо­вой линии с пер­вой строкой.

Хорошо

Плохо

Плохо

Хорошо

Хорошо

Подпись и текст полей набирают одним шрифтом и ставят на общую базовую линию.

Длинная подпись может перенестись на две строки. Бывает, что она сползает вверх и выравнивается вертикально с серединой поля. Когда строк две, проблемы можно не заметить, решив, что подпись «как раз» сравнялась по высоте с полем.

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

Первая строка подписи должна всегда оставаться на месте.

Тот же принцип с многострочными полями: подпись стоит на базовой линии с первой строкой.

Криво

Ровно

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

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

Криво

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

Ровно

Эта форма имеет вид таблицы, поэтому подписи естественно выравнивать как боковик таблицы — по левому краю.

Если длин­ная под­пись поля «рас­пи­рает» форму, ото­дви­гая осталь­ные подпи­си от полей, то её стоит пере­не­сти или сократить.

Если длинная подпись поля «распирает» форму, отодвигая остальные подписи от полей, то её стоит перенести или сократить.

Если нет места на две колонки, подпи­си полей допу­стимо рас­по­ло­жить над полями. Но на широ­ких экра­нах лучше при­дер­жи­ваться «таб­лич­ной» ком­по­новки — с ней место рас­хо­ду­ется более равномерно.

Форма в движке блога «Эгея» на большом экране и на экране телефона

Форма в движке блога «Эгея» на большом экране и на экране телефона

Если нет места на две колонки, подписи полей допустимо расположить над полями. Но на широких экранах лучше придерживаться «табличной» компоновки — с ней место расходуется более равномерно.

Раз­мер полей под­ска­зы­вает поль­зо­ва­телю о том, чего от него ждут. Поле номера пас­порта должно быть раз­ме­ром с номер пас­порта. Поле адреса дома должно быть длин­ным, а адреса элек­трон­ной почты — коротким.

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

Размер полей подсказывает пользователю о том, чего от него ждут. Поле номера паспорта должно быть размером с номер паспорта. Поле адреса дома должно быть длинным, а адреса электронной почты — коротким.

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

Поря­док полей имеет боль­шое значение.

Все при­выкли, что пароль идёт сразу после имени поль­зо­ва­теля. Поэтому эта форма хостинг-провайдера «Мастер­хост» про­во­ци­рует вво­дить пароль в имя домена.

Имя, отче­ство и фами­лия; серия и номер пас­порта должны идти подряд.

Кнопка Таб должна вести по полям в том порядке, в кото­ром они сле­дуют на экране.

Порядок полей имеет большое значение.

Все привыкли, что пароль идёт сразу после имени пользователя. Поэтому эта форма хостинг-провайдера «Мастерхост» провоцирует вводить пароль в имя домена.

Имя, отчество и фамилия; серия и номер паспорта должны идти подряд.

Кнопка Таб должна вести по полям в том порядке, в котором они следуют на экране.

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

О нежной обратной связи:

Подсветка поля с ошибкой

Подсветка поля с ошибкой

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

О нежной обратной связи:

Сооб­ще­ние об ошибке должно помо­гать чело­веку её испра­вить, а не давать ему оценку и наказывать.

Что имеет в виду «Аэро­флот» в этой форме? Что надо сде­лать, если я отно­шусь сразу к несколь­ким «типам пассажиров»?

Сообщение об ошибке должно помогать человеку её исправить, а не давать ему оценку и наказывать.

Что имеет в виду «Аэрофлот» в этой форме? Что надо сделать, если я отношусь сразу к нескольким «типам пассажиров»?

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

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

Текст ошибки сле­дует выво­дить рядом с полем, в кото­ром она допущена.

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

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

Намного лучше зара­нее преду­смот­реть место для ошибок.

О модальных окнах:

Теорема о попапах:

Текст ошибки следует выводить рядом с полем, в котором она допущена.

При этом если показывать ошибки под полями, то они будут «распирать» форму, отодвигая поля друг от друга.

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

Намного лучше заранее предусмотреть место для ошибок.

О модальных окнах:

Теорема о попапах:

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

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

У всей строки очень низ­кая инфор­ма­тив­ность: слово «сумма» напи­сано три­жды, при­сут­ствуют стоп‑слова «вве­дите» и «подроб­нее», понят­ные из кон­тек­ста слова «пла­тёж» и «пере­вод», при этом мини­маль­ная допу­сти­мая сумма нигде не указана.

Ещё одна частая проблема — преждевременный вывод ошибок. Альфа‑банк начинает ругаться, как только я перевёл фокус в поле суммы.

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

У всей строки очень низкая информативность: слово «сумма» написано трижды, присутствуют стоп‑слова «введите» и «подробнее», понятные из контекста слова «платёж» и «перевод», при этом минимальная допустимая сумма нигде не указана.

Телеграм

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

Здесь всего одно поле, и выво­дить ошибку при потере фокуса не полу­чится — ско­рее всего, поль­зо­ва­тель уже нажмёт на кнопку Done. Но тре­бо­ва­ния к имени уже сфор­му­ли­ро­ваны в конце тек­ста — их можно сокра­тить, поста­вить под поле и под­све­чи­вать крас­ным только при попытке нажать Done, когда длины недостаёт.

Телеграм

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

Здесь всего одно поле, и выводить ошибку при потере фокуса не получится — скорее всего, пользователь уже нажмёт на кнопку Done. Но требования к имени уже сформулированы в конце текста — их можно сократить, поставить под поле и подсвечивать красным только при попытке нажать Done, когда длины недостаёт.

В иде­але, вме­сто того чтобы сооб­щать об ошибке поль­зо­ва­телю, нужно сде­лать её невоз­мож­ной или испра­вить молча.

Без ошибок

  • исполь­зо­вать маску для ввода;

  • авто­ма­ти­че­ски рас­став­лять про­белы и дефисы в номе­рах теле­фо­нов или документов;

  • исправ­лять кирил­лицу на лати­ницу и наоборот;

  • вме­сто про­стого поля ввода пред­ла­гать выбор из набора вариантов;

  • заблед­нять недо­ступ­ные даты в календаре.

В идеале, вместо того чтобы сообщать об ошибке пользователю, нужно сделать её невозможной или исправить молча.

Без ошибок

  • использовать маску для ввода;

  • автоматически расставлять пробелы и дефисы в номерах телефонов или документов;

  • исправлять кириллицу на латиницу и наоборот;

  • вместо простого поля ввода предлагать выбор из набора вариантов;

  • забледнять недоступные даты в календаре.

Неко­то­рые про­грам­ми­сты счи­тают ошиб­кой неза­пол­нен­ное обя­за­тель­ное поле. У них полу­ча­ются формы, в кото­рых доста­точно пройти по полям фоку­сом — и экран зали­вает кровью.

Форму можно запол­нять в любом порядке, захо­дить и выхо­дить из полей, и ника­кой ошибки в этом нет. Если чело­век не запол­нил обя­за­тель­ное поле, ска­зать об этом лучше при отправке.

Некоторые программисты считают ошибкой незаполненное обязательное поле. У них получаются формы, в которых достаточно пройти по полям фокусом — и экран заливает кровью.

Форму можно заполнять в любом порядке, заходить и выходить из полей, и никакой ошибки в этом нет. Если человек не заполнил обязательное поле, сказать об этом лучше при отправке.

Пло­хая при­вычка — поме­чать обя­за­тель­ные поля звёз­доч­ками. Это некра­сиво и технозависимо.

Звёз­дочки — изоб­ре­те­ние веба, в опе­ра­ци­он­ных систе­мах даже самые слож­ные окна обхо­дятся без них.

В боль­шин­стве форм все поля должны быть обя­за­тель­ными: если без поля можно обой­тись, его уби­рают, и тогда ничего не нужно спе­ци­ально помечать.

Если поле тех­ни­че­ски необя­за­тельно, но мы хотим, чтобы люди его запол­няли, можно пере­дать это подписью.

Ещё лучше — объ­яс­нить пользу в мире чело­века. Зачем ему запол­нять это поле?

Это каса­ется и обя­за­тель­ных полей. Если чело­век не будет пони­мать, почему поле тре­буют, а без него форма не отправ­ля­ется, он впи­шет мусор.

Нако­нец, необя­за­тель­ные поля лучше отде­лить от обязательных.

Плохая привычка — помечать обязательные поля звёздочками. Это некрасиво и технозависимо.

Звёздочки — изобретение веба, в операционных системах даже самые сложные окна обходятся без них.

В большинстве форм все поля должны быть обязательными: если без поля можно обойтись, его убирают, и тогда ничего не нужно специально помечать.

Если поле технически необязательно, но мы хотим, чтобы люди его заполняли, можно передать это подписью.

Ещё лучше — объяснить пользу в мире человека. Зачем ему заполнять это поле?

Это касается и обязательных полей. Если человек не будет понимать, почему поле требуют, а без него форма не отправляется, он впишет мусор.

Наконец, необязательные поля лучше отделить от обязательных.

В этом при­мере кнопка отправки отклю­чена, потому что поля не запол­нены. Это помо­гает избе­жать вывода бес­смыс­лен­ных сооб­ще­ний об ошиб­ках вроде «Чтобы оста­вить ком­мен­та­рий, ука­жите комментарий».

Но отклю­чать кнопки стоит осто­рожно. Так не стоит делать в фор­мах с един­ствен­ным полем поиска: из‑за отклю­чен­ной кнопки кажется, что вся форма недоступна:

Об отключении кнопок в форме:

В этом примере кнопка отправки отключена, потому что поля не заполнены. Это помогает избежать вывода бессмысленных сообщений об ошибках вроде «Чтобы оставить комментарий, укажите комментарий».

Но отключать кнопки стоит осторожно. Так не стоит делать в формах с единственным полем поиска: из‑за отключенной кнопки кажется, что вся форма недоступна:

Об отключении кнопок в форме:

Ещё один важ­ный слу­чай, когда отклю­че­ние кно­пок неже­ла­тельно — стра­ницы, где поль­зо­ва­тель при­ни­мает реше­ние о покупке. В инте­ре­сах биз­неса сде­лать всё, чтобы кнопка сра­бо­тала, раз уж чело­век её нажал.

На сайте авто­про­ката «Энви», создан­ном в бюро, кнопка «Арен­до­вать» нажи­ма­ется, даже если вдруг выбран­ная машина ока­за­лась занята на выбран­ные даты. Если кли­ент готов запла­тить, не стоит ему мешать. Если что, про­кат предо­ста­вит вза­мен авто­мо­биль более высо­кого класса, и кли­ент будет доволен.

Ещё один важный случай, когда отключение кнопок нежелательно — страницы, где пользователь принимает решение о покупке. В интересах бизнеса сделать всё, чтобы кнопка сработала, раз уж человек её нажал.

На сайте автопроката «Энви», созданном в бюро, кнопка «Арендовать» нажимается, даже если вдруг выбранная машина оказалась занята на выбранные даты. Если клиент готов заплатить, не стоит ему мешать. Если что, прокат предоставит взамен автомобиль более высокого класса, и клиент будет доволен.

Если отклю­чён­ная кнопка вызы­вает вопросы, можно её под­пи­сать, не дожи­да­ясь, пока чело­век попы­та­ется её нажать.

По мере запол­не­ния слож­ной формы под­пись под кноп­кой может меняться, под­ска­зы­вая, что оста­лось запол­нить. Пере­чис­лены неза­пол­нен­ные группы полей.

Теперь оста­лись отдель­ные поля. Каж­дое назва­ние — ссылка на поле. Кстати, можно сде­лать, чтобы клик по отклю­чён­ной кнопке также пере­во­дил фокус на пер­вое из неза­пол­нен­ных полей.

Оста­лось послед­нее поле.

Когда всё запол­нено, под кноп­кой полезно напи­сать, что будет дальше.

Нижняя часть формы получения электронной подписи в сервисе «Отчёты»

Нижняя часть формы получения электронной подписи в сервисе «Отчёты»

Если отключённая кнопка вызывает вопросы, можно её подписать, не дожидаясь, пока человек попытается её нажать.

По мере заполнения сложной формы подпись под кнопкой может меняться, подсказывая, что осталось заполнить. Перечислены незаполненные группы полей.

Теперь остались отдельные поля. Каждое название — ссылка на поле. Кстати, можно сделать, чтобы клик по отключённой кнопке также переводил фокус на первое из незаполненных полей.

Осталось последнее поле.

Когда всё заполнено, под кнопкой полезно написать, что будет дальше.

В длин­ной форме финаль­ную кнопку хорошо поста­вить на плашку. Это отде­лит её от дру­гих кно­пок формы и сде­лает оче­вид­нее путь к победе.

Если чек­бокс стоит на плашке вме­сте с кноп­кой, это пока­зы­вает, что без него она не сработает.

Форма получения кредитной карты в «Связном банке». Фрагмент

Форма получения кредитной карты в «Связном банке». Фрагмент

В длинной форме финальную кнопку хорошо поставить на плашку. Это отделит её от других кнопок формы и сделает очевиднее путь к победе.

Если чекбокс стоит на плашке вместе с кнопкой, это показывает, что без него она не сработает.

Навигация

В главе «Окна» мы рас­смот­рели, как ском­по­но­вать экраны. А теперь пого­во­рим о том, как между ними пере­ме­щаться — то есть о навигации.

Спо­собы нави­га­ции свя­заны со струк­ту­рой инфор­ма­ции: на иерар­хи­че­ском сайте может быть дре­во­вид­ное меню, а в про­грамме‑мастере — кнопки «Впе­рёд» и «Назад».

Но спо­соб нави­га­ции и струк­тура — не одно и то же: в дре­во­вид­ной фай­ло­вой системе тоже можно пере­ме­щаться кноп­ками «Впе­рёд» и «Назад», а в линей­ной книге может рабо­тать поиск.

Рас­смот­рим спо­собы нави­га­ции и их соче­та­ния в при­ло­же­ниях и на сайтах.

Навигация

В главе «Окна» мы рассмотрели, как скомпоновать экраны. А теперь поговорим о том, как между ними перемещаться — то есть о навигации.

Способы навигации связаны со структурой информации: на иерархическом сайте может быть древовидное меню, а в программе‑мастере — кнопки «Вперёд» и «Назад».

Но способ навигации и структура — не одно и то же: в древовидной файловой системе тоже можно перемещаться кнопками «Вперёд» и «Назад», а в линейной книге может работать поиск.

Рассмотрим способы навигации и их сочетания в приложениях и на сайтах.

Ссылка

Гиперс­сылка (далее — ссылка) появи­лась как эле­мент пря­мого пере­хода между доку­мен­тами в гипертексте.

Сегодня это основ­ной инстру­мент нави­га­ции в интер­нете. Ссылка поз­во­ляет мгно­венно теле­пор­ти­ро­ваться между про­из­воль­ными узлами любой инфор­ма­ци­он­ной структуры.

О синтаксисе:

Почи­тайте февральскую статью о налогах

Почитайте февральскую статью о налогах

Ссылка

Гиперссылка (далее — ссылка) появилась как элемент прямого перехода между документами в гипертексте.

Сегодня это основной инструмент навигации в интернете. Ссылка позволяет мгновенно телепортироваться между произвольными узлами любой информационной структуры.

О синтаксисе:

Панель управления Виндоусом

Вин­доус исполь­зует текст, похо­жий на ссылки, под­чёр­ки­вает его при наве­де­нии и меняет кур­сор на палец.

Но на самом деле это не ссылки. Их не открыть в новом окне, не сохра­нить в закладки, не ско­пи­ро­вать и не отпра­вить другу.

Панель управления Виндоусом

Виндоус использует текст, похожий на ссылки, подчёркивает его при наведении и меняет курсор на палец.

Но на самом деле это не ссылки. Их не открыть в новом окне, не сохранить в закладки, не скопировать и не отправить другу.

В при­ло­же­ниях для пря­мого пере­хода исполь­зуют кнопки, иконки, горя­чие клавиши.

Системные настройки Макоса

Системные настройки Макоса

В приложениях для прямого перехода используют кнопки, иконки, горячие клавиши.

Ссылка в почте на Айфоне

Мы при­выкли счи­тать ссылки частью веба, поэтому даже если мы встре­чаем ссылку в при­ло­же­нии, мы ожи­даем попасть на веб‑стра­ницу. Ссылка в письме не ведёт на дру­гой экран поч­то­вой про­граммы, а откры­вает статью.

Ссылка в почте на Айфоне

Мы привыкли считать ссылки частью веба, поэтому даже если мы встречаем ссылку в приложении, мы ожидаем попасть на веб‑страницу. Ссылка в письме не ведёт на другой экран почтовой программы, а открывает статью.

Важ­ней­шее свой­ство ссылки — нали­чие адреса, кото­рый можно сохра­нить или пере­слать. Мы рас­счи­ты­ваем, что по ссылке откро­ется одна и та же стра­ница в любой день и с любого ком­пью­тера, иначе мы вос­при­ни­маем ссылку сломанной.

Адрес ссылки — тех­ни­че­ская инфор­ма­ция, но поскольку люди его видят и исполь­зуют, к его виду стоит под­хо­дить внимательно.

В адре­сах часто видны назва­ния фай­лов на сер­вере, пере­мен­ные и дру­гие тех­ни­че­ские дан­ные — им там не место.

Адрес с чис­ло­вым иден­ти­фи­ка­то­ром стра­ницы невоз­можно запом­нить, и нельзя дога­даться, что за ним скрывается.

Сме­ши­вать тек­сто­вое назва­ние для чело­века и чис­ло­вой иден­ти­фи­ка­тор для машины — тоже пло­хая прак­тика. Всё, что не имеет смысла в мире поль­зо­ва­теля, не должно попа­дать в адрес.

Адрес пока­зы­вает, какое место в иерар­хии сайта зани­мает стра­ница. Поэтому мы ожи­даем, что, сте­рев фраг­мент адреса до послед­него слеша, мы попа­дём на роди­тель­скую страницу.

Часто пары «пара­метр‑зна­че­ние» можно пре­вра­тить в иерар­хию без ущерба для смысла. Без /by‑price квар­тиры отоб­ра­зятся в порядке по умолчанию.

Ино­гда раз­ра­бот­чики лишь ими­ти­руют иерар­хию таким обра­зом, а сти­ра­ние фраг­мента адреса до слеша при­во­дит вни­куда. Стра­ницы /post не про­сто не суще­ствует; этот адрес не имеет смысла — невоз­можно даже пред­по­ло­жить, что могло бы там находиться.

Остав­лять «голые» пере­мен­ные в адресе допу­стимо только на стра­ни­цах с филь­трами, когда их несколько, и они все имеют смысл для поль­зо­ва­теля. Но даже в этом слу­чае часто можно найти спо­соб пре­вра­тить адрес в иерархический.

Плохо

example.com​/index.php?page=home

Хорошо

example.com

Плохо

example.com​/index.php?page=43892

Хорошо

example.com​/interviews​/jobs

Плохо

example.com​/43892‑steve‑jobs‑interview

Хорошо

example.com​/interviews​/jobs

Хорошо

example.com​/maps​/world​/mercator

example.com​/maps​/world​/mercator

example.com​/maps​/world​/mercator

Плохо

example.com​/apartments?sort=price

Хорошо

example.com​/apartments​/by‑price

example.com​/apartments​/by‑price

Плохо

example.com​/post​/58

example.com​/post​/58

Допустимо

example.com​/apartments?​bedrooms=2​&furnished=yes​&district=central​&sort=price

Хорошо

example.com​/apartments​/2‑bedrooms​/central‑district​/furnished​/by‑price

Плохо

example.com​/index.php?page=home

Хорошо

example.com

Плохо

example.com​/index.php?page=43892

Хорошо

example.com​/interviews​/jobs

Плохо

example.com​/43892‑steve‑jobs‑interview

Хорошо

example.com​/interviews​/jobs

Хорошо

example.com​/maps​/world​/mercator

example.com​/maps​/world​/mercator

example.com​/maps​/world​/mercator

Плохо

example.com​/apartments?sort=price

Хорошо

example.com​/apartments​/by‑price

example.com​/apartments​/by‑price

Плохо

example.com​/post​/58

example.com​/post​/58

Допустимо

example.com​/apartments?​bedrooms=2​&furnished=yes​&district=central​&sort=price

Хорошо

example.com​/apartments​/2‑bedrooms​/central‑district​/furnished​/by‑price

Важнейшее свойство ссылки — наличие адреса, который можно сохранить или переслать. Мы рассчитываем, что по ссылке откроется одна и та же страница в любой день и с любого компьютера, иначе мы воспринимаем ссылку сломанной.

Адрес ссылки — техническая информация, но поскольку люди его видят и используют, к его виду стоит подходить внимательно.

В адресах часто видны названия файлов на сервере, переменные и другие технические данные — им там не место.

Адрес с числовым идентификатором страницы невозможно запомнить, и нельзя догадаться, что за ним скрывается.

Смешивать текстовое название для человека и числовой идентификатор для машины — тоже плохая практика. Всё, что не имеет смысла в мире пользователя, не должно попадать в адрес.

Адрес показывает, какое место в иерархии сайта занимает страница. Поэтому мы ожидаем, что, стерев фрагмент адреса до последнего слеша, мы попадём на родительскую страницу.

Часто пары «параметр‑значение» можно превратить в иерархию без ущерба для смысла. Без /by‑price квартиры отобразятся в порядке по умолчанию.

Иногда разработчики лишь имитируют иерархию таким образом, а стирание фрагмента адреса до слеша приводит вникуда. Страницы /post не просто не существует; этот адрес не имеет смысла — невозможно даже предположить, что могло бы там находиться.

Оставлять «голые» переменные в адресе допустимо только на страницах с фильтрами, когда их несколько, и они все имеют смысл для пользователя. Но даже в этом случае часто можно найти способ превратить адрес в иерархический.

Последовательность

Стра­ницы сайта или экраны при­ло­же­ния могут обра­зо­вы­вать после­до­ва­тель­ность. В допол­не­ние к кноп­кам линей­ного пере­ме­ще­ния впе­рёд и назад ино­гда исполь­зуют ссылки для пря­мого пере­хода к опре­де­лён­ному шагу.

Мастер установки программы «Микрософт Офис»

Последовательность

Страницы сайта или экраны приложения могут образовывать последовательность. В дополнение к кнопкам линейного перемещения вперёд и назад иногда используют ссылки для прямого перехода к определённому шагу.

Мастер установки программы «Микрософт Офис»

Поша­го­вый про­цесс добав­ляет порядка. Если слиш­ком длин­ную форму раз­бить на шаги, она может стать проще в гла­зах пользователя.

Но ино­гда дизай­неры без повода услож­няют интер­фейс нуме­ра­цией шагов. Напри­мер, так один из сту­ден­тов‑дизай­не­ров орга­ни­зо­вал тер­ми­нал покупки биле­тов на метро. У поль­зо­ва­теля скла­ды­ва­ется впе­чат­ле­ние, что ему пред­стоит целое путешествие.

Полу­че­ние биле­тов и сдачи раз­де­лять ни к чему: авто­мат может выдать всё сразу.

Но даже это странно счи­тать отдель­ным шагом. Это уже резуль­тат, поль­зо­ва­телю делать ничего не нужно.

Под­твер­жде­ние бес­смыс­ленно — это мы знаем из главы о привычках.

Выхо­дит, чтобы купить билеты, нужно их выбрать и оплатить.

Но это оче­видно, и явное деле­ние на шаги ни к чему.

О бесполезности подтверждений:

Сложная форма. Нумерация шагов помогает не заблудиться

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Сложная форма. Нумерация шагов помогает не заблудиться

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Пошаговый процесс добавляет порядка. Если слишком длинную форму разбить на шаги, она может стать проще в глазах пользователя.

Но иногда дизайнеры без повода усложняют интерфейс нумерацией шагов. Например, так один из студентов‑дизайнеров организовал терминал покупки билетов на метро. У пользователя складывается впечатление, что ему предстоит целое путешествие.

Получение билетов и сдачи разделять ни к чему: автомат может выдать всё сразу.

Но даже это странно считать отдельным шагом. Это уже результат, пользователю делать ничего не нужно.

Подтверждение бессмысленно — это мы знаем из главы о привычках.

Выходит, чтобы купить билеты, нужно их выбрать и оплатить.

Но это очевидно, и явное деление на шаги ни к чему.

О бесполезности подтверждений:

После­до­ва­тель­ная нави­га­ция исполь­зу­ется в вебе. Кнопки «Назад» и «Впе­рёд» можно счи­тать частью «силу­эта» бра­у­зера. Правда, пере­ме­щают они не по зара­нее создан­ной после­до­ва­тель­но­сти стра­ниц, а по исто­рии переходов.

Последовательная навигация используется в вебе. Кнопки «Назад» и «Вперёд» можно считать частью «силуэта» браузера. Правда, перемещают они не по заранее созданной последовательности страниц, а по истории переходов.

Иерархия

В функ­циях слож­ного про­дукта при­хо­дится наво­дить поря­док. Свя­зать всё про­стыми ссыл­ками невоз­можно — непо­нятно, где искать нуж­ную. После­до­ва­тель­ность тоже не под­хо­дит — полу­ча­ется слиш­ком длинной.

Функ­ции неиз­бежно соеди­ня­ются в группы, в них воз­ни­кают под­группы. Не то чтобы кто‑то решал «у нас будет иерар­хи­че­ская нави­га­ция», но в резуль­тате груп­пи­ровки она воз­ни­кает сама собой.

Иерархия

В функциях сложного продукта приходится наводить порядок. Связать всё простыми ссылками невозможно — непонятно, где искать нужную. Последовательность тоже не подходит — получается слишком длинной.

Функции неизбежно соединяются в группы, в них возникают подгруппы. Не то чтобы кто‑то решал «у нас будет иерархическая навигация», но в результате группировки она возникает сама собой.

Сайт «Биат­лон­тайм» с резуль­та­тами биат­лон­ных гонок устроен иерар­хи­че­ски. На пер­вом уровне — спор­тив­ные сезоны. Внутри каж­дого сезона — набор эта­пов кубка мира. Каж­дый этап состоит из несколь­ких гонок.

Сайт «Биатлонтайм» с результатами биатлонных гонок устроен иерархически. На первом уровне — спортивные сезоны. Внутри каждого сезона — набор этапов кубка мира. Каждый этап состоит из нескольких гонок.

На мно­гих сай­тах встре­ча­ется меню с подоб­ным набо­ром пунктов:

Ново­сти   Про­дукты   О ком­па­нии   Контакты

С одной сто­роны, это при­вычно: поль­зо­ва­тели вос­при­ни­мают слово «Кон­такты» как иеро­глиф и ищут по очер­та­нию в конце. «Ново­сти», нао­бо­рот, обычно в начале.

С дру­гой, такое меню неин­фор­ма­тивно: слова «про­дукты» и «услуги» не гово­рят о том, чем именно зани­ма­ется ком­па­ния. Меню видишь одним из пер­вых эле­мен­тов — хорошо вос­поль­зо­ваться им, чтобы рас­ска­зать о себе.

На многих сайтах встречается меню с подобным набором пунктов:

Новости   Продукты   О компании   Контакты

С одной стороны, это привычно: пользователи воспринимают слово «Контакты» как иероглиф и ищут по очертанию в конце. «Новости», наоборот, обычно в начале.

С другой, такое меню неинформативно: слова «продукты» и «услуги» не говорят о том, чем именно занимается компания. Меню видишь одним из первых элементов — хорошо воспользоваться им, чтобы рассказать о себе.

Тра­ди­ци­онно меню в настоль­ных про­грам­мах начи­на­ется с пунк­тов File, Edit и закан­чи­ва­ется пунк­тами Window, Help, но между ними могут быть любые пункты в зави­си­мо­сти от программы.

Имеет смысл так же делать и на сай­тах: остав­лять при­выч­ные пункты по краям, а осталь­ное место исполь­зо­вать для инфор­ма­тив­ных пунктов.

Традиционно меню в настольных программах начинается с пунктов File, Edit и заканчивается пунктами Window, Help, но между ними могут быть любые пункты в зависимости от программы.

Имеет смысл так же делать и на сайтах: оставлять привычные пункты по краям, а остальное место использовать для информативных пунктов.

Меню на сайте Т2

Неинформативно

Продукты

Информативно

Огонь, вода, медные трубы

Услуги

Подогрев, омовение, сушка

Вме­сто безы­мян­ных «про­дук­тов» и «услуг» лучше исполь­зо­вать назва­ния этих про­дук­тов и услуг. На сайте Т2 пер­вый пункт меню назы­ва­ется «Картриджи, бумага и плёнка».

Меню на сайте Т2

Вместо безымянных «продуктов» и «услуг» лучше использовать названия этих продуктов и услуг. На сайте Т2 первый пункт меню называется «Картриджи, бумага и плёнка».

Неинформативно

Продукты

Информативно

Огонь, вода, медные трубы

Услуги

Подогрев, омовение, сушка

Неинформативно

Мебель

Информативно

Кухня, гостиная, спальня, ванная, детская

Инвентарь

Лопаты, вилы, грабли, лейки, вёдра

На сайте «Икеи» меню пере­чис­ляет отделы магазина.

На сайте «Икеи» меню перечисляет отделы магазина.

Неинформативно

Мебель

Информативно

Кухня, гостиная, спальня, ванная, детская

Инвентарь

Лопаты, вилы, грабли, лейки, вёдра

Неинформативно

Продукты

Информативно

Кар­три­джи, бумага и плёнка

Услуги

Копи­ро­ва­ние и печать

Быто­вая техника

Сти­раль­ные машины, холодильники

Утюги, чай­ники, кофеварки

Когда в группе много эле­мен­тов, автор пыта­ется подыс­кать общее слово, кото­рое бы подо­шло для всего, что внутри. Так воз­ни­кают гипе­ро­нимы: «аксес­су­ары», «быто­вая химия», «бакалея».

В ком­пью­тер­ном интер­нет‑мага­зине невоз­можно найти флешку в меню. Она может быть и в «аксес­су­а­рах», и в «ком­плек­ту­ю­щих», и в «устрой­ствах хра­не­ния», и в «моду­лях памяти». Но если бы суще­ство­вал раз­дел «Память, флешки, диски», то чело­век нашёл бы там даже твёр­до­тель­ный нако­пи­тель: нам есте­ствен­нее про­дол­жить ряд по ана­ло­гии, чем рас­крыть абстракт­ные понятия.

Когда в группе много элементов, автор пытается подыскать общее слово, которое бы подошло для всего, что внутри. Так возникают гиперонимы: «аксессуары», «бытовая химия», «бакалея».

В компьютерном интернет‑магазине невозможно найти флешку в меню. Она может быть и в «аксессуарах», и в «комплектующих», и в «устройствах хранения», и в «модулях памяти». Но если бы существовал раздел «Память, флешки, диски», то человек нашёл бы там даже твёрдотельный накопитель: нам естественнее продолжить ряд по аналогии, чем раскрыть абстрактные понятия.

Неинформативно

Продукты

Информативно

Картриджи, бумага и плёнка

Услуги

Копирование и печать

Бытовая техника

Стиральные машины, холодильники

Утюги, чайники, кофеварки

Отбеливатель сопутствует колбасе

Чело­век, не рабо­та­ю­щий в супер­мар­кете, нико­гда не ска­жет, что ему нужны сопут­ству­ю­щие товары.

В мага­зине бес­тол­ко­вую таб­личку спа­сают сами полки с дез­одо­ран­тами, шам­пу­нями и зуб­ной пастой.

Отбеливатель сопутствует колбасе

Человек, не работающий в супермаркете, никогда не скажет, что ему нужны сопутствующие товары.

В магазине бестолковую табличку спасают сами полки с дезодорантами, шампунями и зубной пастой.

Какой бы про­ду­ман­ной ни была иерар­хия, её при­ду­мал кто‑то дру­гой. Поль­зо­ва­тель может пред­став­лять себе вза­и­мо­связь функ­ций или стра­ниц иначе, чем автор. Это при­во­дит к ошиб­кам, и чем больше в иерар­хии уров­ней, тем слож­нее что‑то найти. В отли­чие от после­до­ва­тель­но­сти, иерар­хия сопро­тив­ля­ется даже поиску перебором.

Чело­веку трудно удер­жать в голове, в каких вет­ках он уже был, и можно откло­ниться от пра­виль­ной дороги слиш­ком сильно. На сле­ду­ю­щем раз­во­роте — демон­стра­ция этого эффекта.

Какой бы продуманной ни была иерархия, её придумал кто‑то другой. Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор. Это приводит к ошибкам, и чем больше в иерархии уровней, тем сложнее что‑то найти. В отличие от последовательности, иерархия сопротивляется даже поиску перебором.

Человеку трудно удержать в голове, в каких ветках он уже был, и можно отклониться от правильной дороги слишком сильно. На следующем развороте — демонстрация этого эффекта.

Най­дите котика в трёх­до­мен­ной клас­си­фи­ка­ции био­ло­ги­че­ских видов.

Найдите котика в трёхдоменной классификации биологических видов.

Меню — не един­ствен­ный спо­соб нави­га­ции по иерархии.

Шаб­лон «спи­сок — объ­ект» из главы «Окна» — при­мер реа­ли­за­ции двух­уров­не­вой иерар­хии. В поч­то­вой про­грамме уров­ней уже больше: на пер­вом уровне поч­то­вые ящики, на вто­ром — спи­сок писем, на тре­тьем — отдель­ные письма. В Файн­дере на Маке уров­ней может быть сколько угодно — он умеет пока­зы­вать иерар­хию фай­ло­вой системы колонками.

Устро­ен­ные таким обра­зом при­ло­же­ния хорошо адап­ти­ру­ются к узким экра­нам — на мобиль­ном теле­фоне мы видим только одну колонку, но внут­рен­но­сти каж­дой из коло­нок устро­ены так же, как на компьютере.

Меню — не единственный способ навигации по иерархии.

Шаблон «список — объект» из главы «Окна» — пример реализации двухуровневой иерархии. В почтовой программе уровней уже больше: на первом уровне почтовые ящики, на втором — список писем, на третьем — отдельные письма. В Файндере на Маке уровней может быть сколько угодно — он умеет показывать иерархию файловой системы колонками.

Устроенные таким образом приложения хорошо адаптируются к узким экранам — на мобильном телефоне мы видим только одну колонку, но внутренности каждой из колонок устроены так же, как на компьютере.

В иерар­хи­че­ском при­ло­же­нии кнопка «Назад» может вести не на преды­ду­щий, а на роди­тель­ский экран. Когда в интер­фейсе соче­та­ется иерар­хи­че­ская и после­до­ва­тель­ная нави­га­ция, кно­пок «Назад» ста­но­вится две — как в левом верх­нем углу Айфона. Малень­кая чёр­ная кно­почка ведёт в преды­ду­щее при­ло­же­ние, из кото­рого я пере­шёл по ссылке. Боль­шая синяя — на роди­тель­ский экран этого при­ло­же­ния. К сожа­ле­нию, это порож­дает путаницу.

Кстати, кнопка «домой» при этом тоже ведёт назад по иерар­хии — на домаш­ний экран.

В иерархическом приложении кнопка «Назад» может вести не на предыдущий, а на родительский экран. Когда в интерфейсе сочетается иерархическая и последовательная навигация, кнопок «Назад» становится две — как в левом верхнем углу Айфона. Маленькая чёрная кнопочка ведёт в предыдущее приложение, из которого я перешёл по ссылке. Большая синяя — на родительский экран этого приложения. К сожалению, это порождает путаницу.

Кстати, кнопка «домой» при этом тоже ведёт назад по иерархии — на домашний экран.

Фильтры

Дан­ные обла­дают мно­же­ством «изме­ре­ний». Одежду можно клас­си­фи­ци­ро­вать по типу, бренду, отделу, стилю, сце­на­риям носки, полу, цвету, мате­ри­алу, раз­меру, цене. При этом одно­знач­ную иерар­хию постро­ить не полу­ча­ется: сви­тер «Напа­пийри» может жить и в раз­деле Зима → Свитеры → Напапийри, и в Мужчинам → Напапийри → Трикотаж.

Когда поль­зо­ва­телю нужно найти что‑то среди тысяч пред­ме­тов, помо­гут филь­тры. Вме­сто того, чтобы уга­ды­вать, какую иерар­хию заду­мал автор, чело­век настра­и­вает пара­метры независимо.

Фильтры
Яндекс.Маркета

Фильтры
Яндекс.Маркета

Фильтры

Данные обладают множеством «измерений». Одежду можно классифицировать по типу, бренду, отделу, стилю, сценариям носки, полу, цвету, материалу, размеру, цене. При этом однозначную иерархию построить не получается: свитер «Напапийри» может жить и в разделе Зима → Свитеры → Напапийри, и в Мужчинам → Напапийри → Трикотаж.

Когда пользователю нужно найти что‑то среди тысяч предметов, помогут фильтры. Вместо того, чтобы угадывать, какую иерархию задумал автор, человек настраивает параметры независимо.

Хоро­ший фильтр не выва­ли­вает на поль­зо­ва­теля пара­метры из базы дан­ных, а помо­гает решить задачу: подо­брать под­хо­дя­щее жильё по цене или найти инте­рес­ные кон­церты на опре­де­лён­ные даты.

Фильтр кар­ти­нок в «Гугле» помо­гает найти кар­тинки по раз­меру, цвету, пра­вам на исполь­зо­ва­ние. Для запроса «листья» даже добав­лен спе­ци­аль­ный фильтр по деревьям.

Хороший фильтр не вываливает на пользователя параметры из базы данных, а помогает решить задачу: подобрать подходящее жильё по цене или найти интересные концерты на определённые даты.

Фильтр картинок в «Гугле» помогает найти картинки по размеру, цвету, правам на использование. Для запроса «листья» даже добавлен специальный фильтр по деревьям.

Фильтр по цене

Сортировка по цене

При филь­тра­ции оста­ются только удо­вле­тво­ря­ю­щие усло­вию объ­екты. При сор­ти­ровке отоб­ра­жа­ются все объ­екты, но в выбран­ном порядке.

Для поль­зо­ва­теля филь­тра­ция и сор­ти­ровка часто рабо­тают похоже.

Сор­ти­ровка по цене — про­стой спо­соб уви­деть перед собой дешё­вые товары, не ука­зы­вая кон­крет­ную цену.

Ещё о фильтрах:

Фильтр по цене

При фильтрации остаются только удовлетворяющие условию объекты. При сортировке отображаются все объекты, но в выбранном порядке.

Для пользователя фильтрация и сортировка часто работают похоже.

Сортировка по цене

Сортировка по цене — простой способ увидеть перед собой дешёвые товары, не указывая конкретную цену.

Ещё о фильтрах:

Теги

Теги — слова, кото­рые как‑то опи­сы­вают стра­ницу или объ­ект. Обычно это тема: «кино», «музыка», «искус­ство» в жур­нале. Но теги могут отра­жать и дру­гие при­знаки, напри­мер в моём блоге любая заметка, где я задаю вопрос ауди­то­рии, полу­чает тег «вопрос». Если заметка будет полезна начи­на­ю­щим дизай­не­рам, я добав­ляю тег «студентам».

Само слово tag означает этикетку, бирку, ярлык — некую маленькую пометку, закреплённую за объектом. Care tag — это ярлык с информацией о стирке и глажке, а price tag — ценник.

Теги

Теги — слова, которые как‑то описывают страницу или объект. Обычно это тема: «кино», «музыка», «искусство» в журнале. Но теги могут отражать и другие признаки, например в моём блоге любая заметка, где я задаю вопрос аудитории, получает тег «вопрос». Если заметка будет полезна начинающим дизайнерам, я добавляю тег «студентам».

Само слово tag означает этикетку, бирку, ярлык — некую маленькую пометку, закреплённую за объектом. Care tag — это ярлык с информацией о стирке и глажке, а price tag — ценник.

В бес­по­рядке сила тегов: ими можно опи­сать любые свой­ства. Ска­жем, в ката­логе одежды есть стан­дарт­ные при­знаки: марка, цвет, раз­мер — на них легко постро­ить филь­тры. Но все воз­мож­ные пара­метры трудно зара­нее преду­смот­реть в базе дан­ных. А с помо­щью тегов пред­меты одежды можно в любой момент поме­тить: «на мол­нии», «со стра­зами», «глу­бо­кие карманы».

Конечно, такие свой­ства можно отра­зить и в опи­са­нии пред­мета. Но тег — мета­ин­фор­ма­ция и инстру­мент нави­га­ции. Тег «глу­бо­кие кар­маны» не только рас­ска­зы­вает о свой­ствах кон­крет­ных шта­нов; по нему ещё можно перейти и про­смот­реть все штаны с таким свойством.

Также теги объ­еди­няют раз­но­род­ные пред­меты: с глу­бо­кими кар­ма­нами могут быть не только штаны, но и куртки. На сайте дизай­нер­ского бюро по тегу «типо­гра­фика» могут най­тись ново­сти, книги, ста­тьи, работы в порт­фо­лио. На сайте о готовке по тегу «рыба» — и рецепты, и как раз­де­лы­вать, и как хра­нить, и где купить.

На основе сов­па­де­ния тегов сайты могут авто­ма­ти­че­ски созда­вать под­борки и давать рекомендации.

В беспорядке сила тегов: ими можно описать любые свойства. Скажем, в каталоге одежды есть стандартные признаки: марка, цвет, размер — на них легко построить фильтры. Но все возможные параметры трудно заранее предусмотреть в базе данных. А с помощью тегов предметы одежды можно в любой момент пометить: «на молнии», «со стразами», «глубокие карманы».

Конечно, такие свойства можно отразить и в описании предмета. Но тег — метаинформация и инструмент навигации. Тег «глубокие карманы» не только рассказывает о свойствах конкретных штанов; по нему ещё можно перейти и просмотреть все штаны с таким свойством.

Также теги объединяют разнородные предметы: с глубокими карманами могут быть не только штаны, но и куртки. На сайте дизайнерского бюро по тегу «типографика» могут найтись новости, книги, статьи, работы в портфолио. На сайте о готовке по тегу «рыба» — и рецепты, и как разделывать, и как хранить, и где купить.

На основе совпадения тегов сайты могут автоматически создавать подборки и давать рекомендации.

Теги под заметкой в блоге

Страница тега «Будущее»

Страница всех тегов

Тег в результатах поиска

Для нави­га­ции на стра­ни­цах или у объ­ек­тов пере­чис­ляют их теги.

Тег ведёт на стра­ницу со спис­ком всех свя­зан­ных с ним объектов.

Ино­гда делают стра­ницу с пол­ным спис­ком тегов — «облако тегов». В силу неор­га­ни­зо­ван­но­сти тегов, обычно неясно, что там искать.

Хорошо также, когда поиск знает теги.

Теги под заметкой в блоге

Страница тега «Будущее»

Страница всех тегов

Тег в результатах поиска

Для навигации на страницах или у объектов перечисляют их теги.

Тег ведёт на страницу со списком всех связанных с ним объектов.

Иногда делают страницу с полным списком тегов — «облако тегов». В силу неорганизованности тегов, обычно неясно, что там искать.

Хорошо также, когда поиск знает теги.

Теги коллекции примеров дизайна Ильи Бирмана

Теги коллекции примеров дизайна Ильи Бирмана

Обычно для ука­за­ния тегов в про­дук­тах выде­ляют отдель­ное поле.

«Лай­трум» пред­ла­гает веро­ят­ные теги для фото­гра­фии и даже поз­во­ляет созда­вать неза­ви­си­мые наборы тегов.

Теги сами по себе могут обра­зо­вы­вать иерар­хии или более слож­ные струк­туры. Если известно, что тег «авто­бус» дочер­ний по отно­ше­нию к тегу «транс­порт», то по послед­нему логично авто­ма­ти­че­ски пока­зы­вать все фото­гра­фии с пер­вым. К сожа­ле­нию, такие струк­туры сложно поддерживать.

Лучше, когда про­грамма сама пони­мает, какие теги свя­заны тес­нее. Если дизай­нер, опи­сы­вая кар­тинку, ста­вит тег «лого­тип», система может также пред­ло­жить ему теги «знак», «эмблема», «фирстиль».

Работа с тегами в «Лайтруме»

Работа с тегами в «Лайтруме»

Обычно для указания тегов в продуктах выделяют отдельное поле.

«Лайтрум» предлагает вероятные теги для фотографии и даже позволяет создавать независимые наборы тегов.

Теги сами по себе могут образовывать иерархии или более сложные структуры. Если известно, что тег «автобус» дочерний по отношению к тегу «транспорт», то по последнему логично автоматически показывать все фотографии с первым. К сожалению, такие структуры сложно поддерживать.

Лучше, когда программа сама понимает, какие теги связаны теснее. Если дизайнер, описывая картинку, ставит тег «логотип», система может также предложить ему теги «знак», «эмблема», «фирстиль».

Хештеги в твиттере

Во мно­гих соц­се­тях тегами ста­но­вятся любые слова из сооб­ще­ния, в начале кото­рых добав­лен знак #.

Когда у всех поль­зо­ва­те­лей общее про­стран­ство тегов, тоже воз­ни­кают про­блемы. Для дизай­нера интер­фейса и спортс­мена тег «форма» будет озна­чать разное.

Хештеги в твиттере

Во многих соцсетях тегами становятся любые слова из сообщения, в начале которых добавлен знак #.

Когда у всех пользователей общее пространство тегов, тоже возникают проблемы. Для дизайнера интерфейса и спортсмена тег «форма» будет означать разное.

Поиск

Поиск — иде­аль­ный спо­соб нави­га­ции для чело­века с кон­крет­ным поже­ла­нием. С хоро­шим поис­ком можно не думать, как устро­ена инфор­ма­ция, а про­сто сразу пере­хо­дить в нуж­ное место.

Поиск в Гугль‑картах

Поиск в Гугль‑картах

Поиск

Поиск — идеальный способ навигации для человека с конкретным пожеланием. С хорошим поиском можно не думать, как устроена информация, а просто сразу переходить в нужное место.

Офи­ци­аль­ные пра­вила рус­ского языка орга­ни­зо­ваны иерар­хи­че­ски. Но люди теря­ются при виде их оглавления.

Поэтому на сайте пра­вил рабо­тает умный поиск. К при­меру, если напи­сать «напри­мер», сайт най­дёт пра­вило, по кото­рому ста­вится запя­тая вокруг этого слова.

Официальные правила русского языка организованы иерархически. Но люди теряются при виде их оглавления.

Поэтому на сайте правил работает умный поиск. К примеру, если написать «например», сайт найдёт правило, по которому ставится запятая вокруг этого слова.

Форма поиска хоть и состоит всего из одного поля, но всё же состав­ляет пре­пят­ствие для поль­зо­ва­теля. В хоро­шем интер­фейсе всё орга­ни­зо­вано так, чтобы дойти до нуж­ного эле­мента полу­ча­лось и более «лени­выми» спо­со­бами. Напри­мер, в интер­нет‑мага­зине обя­за­тельно нужны под­борки, новинки, рекомендации.

И только когда речь идёт обо всей инфор­ма­ции в мире, в каче­стве пер­вого шага подой­дёт поиск и ничего больше.

Форма как препятствие:

Сначала данные, потом фильтры:

Форма поиска хоть и состоит всего из одного поля, но всё же составляет препятствие для пользователя. В хорошем интерфейсе всё организовано так, чтобы дойти до нужного элемента получалось и более «ленивыми» способами. Например, в интернет‑магазине обязательно нужны подборки, новинки, рекомендации.

И только когда речь идёт обо всей информации в мире, в качестве первого шага подойдёт поиск и ничего больше.

Форма как препятствие:

Сначала данные, потом фильтры:

Ино­гда важно, чтобы поиск не про­сто нахо­дил объ­ект, а ещё пока­зы­вал, где он нахо­дится в иерар­хии или дру­гой струк­туре. Поиск по меню на Маке огром­ной ани­ми­ро­ван­ной стрел­кой пока­зы­вает, где именно нашёлся нуж­ный пункт. В сле­ду­ю­щий раз можно идти к нему напря­мую, без клавиатуры.

А поиск при­ло­же­ний в Ай‑ОСе 11 не пока­зы­вает, в какой папке что нашлось, поэтому поте­ряв­ше­еся в пап­ках при­ло­же­ние при­хо­дится все­гда запус­кать через него.

Макос Сьерра

Иногда важно, чтобы поиск не просто находил объект, а ещё показывал, где он находится в иерархии или другой структуре. Поиск по меню на Маке огромной анимированной стрелкой показывает, где именно нашёлся нужный пункт. В следующий раз можно идти к нему напрямую, без клавиатуры.

А поиск приложений в Ай‑ОСе 11 не показывает, в какой папке что нашлось, поэтому потерявшееся в папках приложение приходится всегда запускать через него.

Макос Сьерра

Поиск в почте на Маке

Поиск раз­ви­ва­ется в сто­рону струк­ту­ри­за­ции. Отдель­ные смыс­ло­вые эле­менты запроса пре­вра­ща­ются в объ­екты, подоб­ные фильтрам.

Поиск в почте на Маке

Поиск развивается в сторону структуризации. Отдельные смысловые элементы запроса превращаются в объекты, подобные фильтрам.

Задача поиска давно пере­стала быть чисто нави­га­ци­он­ной. Поис­ко­вые системы отве­чают на типо­вые вопросы о погоде и кур­сах валют. С раз­ви­тием голо­со­вых асси­стен­тов и чат­бо­тов поиск научится лучше пони­мать кон­текст и заодно с выда­чей резуль­та­тов зада­вать встреч­ные вопросы, помо­гая чело­веку сфор­му­ли­ро­вать запрос:

— Найди брас­леты для часов.

— Есть метал­ли­че­ские, пла­сти­ко­вые, доро­гие и дешё­вые, раз­ных цве­тов. Ещё бывают кожа­ные и ней­ло­но­вые ремешки. Что именно вы ищете?

И не рас­те­ря­ется, если чело­век про­игно­ри­рует под­сказки и спро­сит что‑то своё:

— Как они крепятся?

— К часам или на руке?

Голосовая помощница Яндекса «Алиса»

Задача поиска давно перестала быть чисто навигационной. Поисковые системы отвечают на типовые вопросы о погоде и курсах валют. С развитием голосовых ассистентов и чатботов поиск научится лучше понимать контекст и заодно с выдачей результатов задавать встречные вопросы, помогая человеку сформулировать запрос:

— Найди браслеты для часов.

— Есть металлические, пластиковые, дорогие и дешёвые, разных цветов. Ещё бывают кожаные и нейлоновые ремешки. Что именно вы ищете?

И не растеряется, если человек проигнорирует подсказки и спросит что‑то своё:

— Как они крепятся?

— К часам или на руке?

Голосовая помощница Яндекса «Алиса»

⅟₁₂

⅜

⅟₁₂

⅜

⅟₁₂

Сетка

Боль­шин­ство интер­фей­сов визу­альны. Даже при голо­со­вом управ­ле­нии диа­лог, как пра­вило, отоб­ра­жа­ется на экране, допол­ня­ется кноп­ками и дру­гими гра­фи­че­скими эле­мен­тами. Чтобы уметь всё это ском­по­но­вать, дизай­нер интер­фейса дол­жен быть зна­ком с осно­вами вёрстки.

Уни­вер­саль­ный спо­соб наве­де­ния порядка в дизайне — сетка, то есть система отсту­пов и выравнивания.

Сетка

Большинство интерфейсов визуальны. Даже при голосовом управлении диалог, как правило, отображается на экране, дополняется кнопками и другими графическими элементами. Чтобы уметь всё это скомпоновать, дизайнер интерфейса должен быть знаком с основами вёрстки.

Универсальный способ наведения порядка в дизайне — сетка, то есть система отступов и выравнивания.

Пред­по­ло­жим, вы спро­ек­ти­ро­вали форму. Слева отвели место под подпи­си, а справа сде­лали все поля такого раз­мера, какого тре­бует смысл. Несмотря на то, что рас­по­ло­же­нию и раз­меру каж­дого эле­мента есть объ­яс­не­ние, форма выгля­дит неряшливой.

Если внед­рить сетку, будет опрят­нее. В дан­ном слу­чае мы про­сто округ­лили все раз­меры до крат­ных 20% ширины.

Предположим, вы спроектировали форму. Слева отвели место под подписи, а справа сделали все поля такого размера, какого требует смысл. Несмотря на то, что расположению и размеру каждого элемента есть объяснение, форма выглядит неряшливой.

Если внедрить сетку, будет опрятнее. В данном случае мы просто округлили все размеры до кратных 20% ширины.

Вер­ти­каль­ные отступы также тре­буют систематизации.

Из сооб­ра­же­ний бли­зо­сти мы ста­вим свя­зан­ные поля рядом, а несвя­зан­ные — раз­де­ляем боль­шим расстоянием.

При уве­ли­че­нии числа эле­мен­тов связи услож­ня­ются: чек­бокс и под­пись отно­сятся к кон­крет­ным полям, и их хочется сбли­зить силь­нее, чем сами поля. А группы хочется, нао­бо­рот, отде­лить бо́льшим расстоянием.

Если под­пись пере­не­сётся, то по пра­вилу внут­рен­него и внеш­него сле­дует её интер­ли­ньяж сде­лать меньше отступа от поля, и все рас­сто­я­ния «поплывут».

Как и в при­мере с про­шлого раз­во­рота, каж­дому отступу есть объ­яс­не­ние, но в целом они выгля­дят случайными.

Чтобы форма выгля­дела акку­рат­нее, упро­стим систему вер­ти­каль­ных отсту­пов, оста­вив только два размера.

Обой­тись двумя полу­чится не все­гда, но все­гда стоит попробовать.

Вертикальные отступы также требуют систематизации.

Из соображений близости мы ставим связанные поля рядом, а несвязанные — разделяем большим расстоянием.

При увеличении числа элементов связи усложняются: чекбокс и подпись относятся к конкретным полям, и их хочется сблизить сильнее, чем сами поля. А группы хочется, наоборот, отделить бо́льшим расстоянием.

Если подпись перенесётся, то по правилу внутреннего и внешнего следует её интерлиньяж сделать меньше отступа от поля, и все расстояния «поплывут».

Как и в примере с прошлого разворота, каждому отступу есть объяснение, но в целом они выглядят случайными.

Чтобы форма выглядела аккуратнее, упростим систему вертикальных отступов, оставив только два размера.

Обойтись двумя получится не всегда, но всегда стоит попробовать.

Обычно сетку вво­дят в конце, когда эле­менты рас­став­лены и оста­лось упо­ря­до­чить то, как они стоят. Но мини­маль­ный поря­док хочется под­дер­жи­вать и в про­цессе рас­ста­новки эле­мен­тов. Если выве­рять все рас­сто­я­ния вруч­ную, теря­ется много времени.

Один из спо­со­бов уско­рить работу — исполь­зо­вать частую сетку на этапе рисования.

Ска­жем, все раз­меры и отступы можно сде­лать крат­ными восьми пикселям.

Обычно сетку вводят в конце, когда элементы расставлены и осталось упорядочить то, как они стоят. Но минимальный порядок хочется поддерживать и в процессе расстановки элементов. Если выверять все расстояния вручную, теряется много времени.

Один из способов ускорить работу — использовать частую сетку на этапе рисования.

Скажем, все размеры и отступы можно сделать кратными восьми пикселям.

В про­грам­мах, рабо­та­ю­щих в тек­сто­вом режиме, сетка полу­ча­ется сама собой — про­сто тех­ни­че­ски невоз­можно поста­вить что‑то неровно. Это выгля­дит арха­ично, но и в совре­мен­ном интер­фейсе стоит попро­бо­вать добиться подоб­ного ощу­ще­ния. Что будет, если все отступы сде­лать крат­ными одной тек­сто­вой строке?

Турбо‑паскаль: безупречно ровно

Турбо‑паскаль: безупречно ровно

В программах, работающих в текстовом режиме, сетка получается сама собой — просто технически невозможно поставить что‑то неровно. Это выглядит архаично, но и в современном интерфейсе стоит попробовать добиться подобного ощущения. Что будет, если все отступы сделать кратными одной текстовой строке?

Вырав­ни­ва­ние нужно не только для акку­рат­но­сти. Оно также помо­гает поль­зо­ва­телю понять, как вза­и­мо­свя­заны элементы.

В про­грамме «Анг­стрем» чтобы пере­ве­сти число из одной еди­ницы изме­ре­ния в дру­гую, сна­чала нужно вве­сти число и исход­ную еди­ницу измерения.

Под­сказки вырав­ни­ва­ются с местом ввода слева, и чело­век пони­мает, что вари­анты отно­сятся именно к этому полю — не тре­бу­ется рисо­вать допол­ни­тель­ных рамок.

После этого чело­век выби­рает, в какую еди­ницу пере­во­дить. Связь между зна­че­нием и спис­ком снова оче­видна бла­го­даря выравниванию.

Выравнивание нужно не только для аккуратности. Оно также помогает пользователю понять, как взаимосвязаны элементы.

В программе «Ангстрем» чтобы перевести число из одной единицы измерения в другую, сначала нужно ввести число и исходную единицу измерения.

Подсказки выравниваются с местом ввода слева, и человек понимает, что варианты относятся именно к этому полю — не требуется рисовать дополнительных рамок.

После этого человек выбирает, в какую единицу переводить. Связь между значением и списком снова очевидна благодаря выравниванию.

Если фор­мально вырав­ни­вать несвя­зан­ные эле­менты, можно полу­чить обрат­ный эффект: чело­век поду­мает, что они как‑то свя­заны. На стра­нице оплаты Веб­мани валюты выров­нены кноп­ками. Если нужна валюта WMZ, невольно нажи­ма­ешь «Отка­заться», ведь кажется, что кнопка отно­сится к этой валюте.

См. также о выравнивании и смысловой связи:

Если формально выравнивать несвязанные элементы, можно получить обратный эффект: человек подумает, что они как‑то связаны. На странице оплаты Вебмани валюты выровнены кнопками. Если нужна валюта WMZ, невольно нажимаешь «Отказаться», ведь кажется, что кнопка относится к этой валюте.

См. также о выравнивании и смысловой связи:

Экран приложения в «Апсторе»

Текст — неотъ­ем­ле­мая часть интер­фейса. В про­стых слу­чаях уда­ётся обой­тись отдель­ными подпи­ся­ми к эле­мен­там, но часто в про­дук­тах встре­ча­ются боль­шие фраг­менты тек­ста — при­вет­ствен­ные экраны, опи­са­ния функ­ций, диа­логи с помощником.

На сле­ду­ю­щем раз­во­роте при­ве­дены крат­кие реко­мен­да­ции по вёрстке тек­сто­вых экранов.

Текст — неотъемлемая часть интерфейса. В простых случаях удаётся обойтись отдельными подписями к элементам, но часто в продуктах встречаются большие фрагменты текста — приветственные экраны, описания функций, диалоги с помощником.

На следующем развороте приведены краткие рекомендации по вёрстке текстовых экранов.

Экран приложения в «Апсторе»

Основной текст

Колонка основ­ного тек­ста зани­мает 60⁠—70% ширины окна на ком­пью­тере. Чтобы на боль­ших экра­нах строки не ста­но­ви­лись слиш­ком длин­ными, их ширину огра­ни­чи­вают. На мобиль­ных экра­нах основ­ному тек­сту отдают мак­си­маль­ную ширину.

Текст на экране вырав­ни­вают по левому краю, а не по ширине фор­мата. При вырав­ни­ва­нии по ширине между сло­вами воз­ни­кают огром­ные про­белы, и текст выгля­дит неряшливо.

Текст делится на абзацы. В экран­ной вёрстке абзацы обычно отде­ляют вер­ти­каль­ными отсту­пами, как в этом тексте.

Подзаголовки

Основ­ной текст дро­бится на части с помо­щью подзаголовков.

Заго­ловки вто­рого уровня обычно круп­нее основ­ного тек­ста. Под заго­лов­ком остав­ляют межа­б­зац­ный отступ, а над — в 2‑3 раза боль­ший. Так заго­ло­вок ока­зы­ва­ется ближе к «сво­ему» тек­сту, чем к «чужому».

Заголовки третьего уровня

Заго­ловки тре­тьего уровня удобно наби­рать полу­жир­ным шриф­том кегля основ­ного тек­ста и не отби­вать от после­ду­ю­щего тек­ста, как здесь. Бла­го­даря отсут­ствию лиш­него отступа, в самой системе отсту­пов проще наве­сти порядок.

Заго­ловки чет­вёр­того и сле­ду­ю­щих уров­ней — при­знак пло­хой редак­туры. Они оправ­даны только в слож­ных юри­ди­че­ских и тех­ни­че­ских документах.

Другие элементы текста

В тек­сте встре­ча­ются дру­гие эле­менты — цитаты, списки, таб­лицы, при­ме­ча­ния, фор­мулы, ссылки, иллю­стра­ции, кнопки, пик­то­граммы. Раз­меры и отступы вокруг этих эле­мен­тов также систе­ма­ти­зи­руют и при­во­дят в соот­вет­ствие с пара­мет­рами текста.

Как и в слу­чае с отсту­пами между эле­мен­тами, текст в интер­фейсе выиг­ры­вает от умень­ше­ния числа раз­ных кег­лей и стилей.

Более подробно — у Артёма Горбунова. Типографика и вёрстка

Основной текст

Колонка основного текста занимает 60⁠—70% ширины окна на компьютере. Чтобы на больших экранах строки не становились слишком длинными, их ширину ограничивают. На мобильных экранах основному тексту отдают максимальную ширину.

Текст на экране выравнивают по левому краю, а не по ширине формата. При выравнивании по ширине между словами возникают огромные пробелы, и текст выглядит неряшливо.

Текст делится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этом тексте.

Подзаголовки

Основной текст дробится на части с помощью подзаголовков.

Заголовки второго уровня обычно крупнее основного текста. Под заголовком оставляют межабзацный отступ, а над — в 2‑3 раза больший. Так заголовок оказывается ближе к «своему» тексту, чем к «чужому».

Заголовки третьего уровня

Заголовки третьего уровня удобно набирать полужирным шрифтом кегля основного текста и не отбивать от последующего текста, как здесь. Благодаря отсутствию лишнего отступа, в самой системе отступов проще навести порядок.

Заголовки четвёртого и следующих уровней — признак плохой редактуры. Они оправданы только в сложных юридических и технических документах.

Другие элементы текста

В тексте встречаются другие элементы — цитаты, списки, таблицы, примечания, формулы, ссылки, иллюстрации, кнопки, пиктограммы. Размеры и отступы вокруг этих элементов также систематизируют и приводят в соответствие с параметрами текста.

Как и в случае с отступами между элементами, текст в интерфейсе выигрывает от уменьшения числа разных кеглей и стилей.

Более подробно — у Артёма Горбунова. Типографика и вёрстка

При­ве­дён­ные выше реко­мен­да­ции о фор­мах и тек­сте помо­гут наве­сти поря­док в пре­де­лах отдель­ного экрана.

Но для про­дукта важны узна­ва­е­мость, при­вычка, ощу­ще­ние порядка и неслу­чай­но­сти. Для еди­но­об­ра­зия экра­нов созда­ются гайд­лай­ны, где систе­ма­ти­зи­ру­ются раз­меры и рас­сто­я­ния между элементами.

Пример типографических гайдлайнов для элементов управления

Приведённые выше рекомендации о формах и тексте помогут навести порядок в пределах отдельного экрана.

Но для продукта важны узнаваемость, привычка, ощущение порядка и неслучайности. Для единообразия экранов создаются гайдлайны, где систематизируются размеры и расстояния между элементами.

Пример типографических гайдлайнов для элементов управления

Исполь­зо­ва­ние еди­ной сетки не только улуч­шает вос­при­я­тие дизайна, но и помо­гает созда­вать слож­ные продукты.

Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного

Использование единой сетки не только улучшает восприятие дизайна, но и помогает создавать сложные продукты.

Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного

Рас­смот­рим сетку видже­тов спра­воч­ных систем «Актиона».

Сверху все­гда заго­ло­вок и блок ста­ти­стики. Снизу может быть поле поиска или спе­ци­аль­ный эле­мент типа кнопки или ссылки. В цен­траль­ной части чаще всего — спи­сок. В раз­ных видже­тах исполь­зу­ются раз­ные цвета и шрифты, но сетка сохраняется.

Если спе­ци­аль­ного эле­мента снизу нет, в списке на один пункт больше. Если списка нет, в цен­тре может нахо­диться таб­лица или гра­фик. В цен­тре виджета видео­се­ми­на­ров — кадр све­жего видео.

Эта сетка была при­ду­мана для вто­рой вер­сии «Системы Кадры» и позже рас­про­стра­ни­лась на новые вер­сии всех спра­воч­ных систем, полу­чив чуть больше сво­боды. Тогда виджет видео­се­ми­на­ров изба­вился от заголовка.

Новый виджет «Выс­шей школы глав­буха» отоб­ра­жает успехи в школе и моти­ви­рует учиться дальше. Виджет сер­виса «Отчёты» помо­гает отправ­лять отчёты в госорганы.

Виджет сер­виса «Дого­воры» пока­зы­вает и даёт найти нуж­ный дого­вор. Если каким‑то из сер­ви­сов чело­век не поль­зу­ется, то виджет умеет отоб­ра­жаться в «про­мо­ре­жиме» — про­сто рас­ска­зы­вает о сер­висе и при­гла­шает воспользоваться.

Для рекламы буду­щих про­дук­тов создан шаб­лон промовиджета.

Когда есть пра­вила и огра­ни­че­ния, сде­лать новый эле­мент — быст­рее и дешевле, и при этом он полу­ча­ется хорошо почти сам собой.

Рассмотрим сетку виджетов справочных систем «Актиона».

Сверху всегда заголовок и блок статистики. Снизу может быть поле поиска или специальный элемент типа кнопки или ссылки. В центральной части чаще всего — список. В разных виджетах используются разные цвета и шрифты, но сетка сохраняется.

Если специального элемента снизу нет, в списке на один пункт больше. Если списка нет, в центре может находиться таблица или график. В центре виджета видеосеминаров — кадр свежего видео.

Эта сетка была придумана для второй версии «Системы Кадры» и позже распространилась на новые версии всех справочных систем, получив чуть больше свободы. Тогда виджет видеосеминаров избавился от заголовка.

Новый виджет «Высшей школы главбуха» отображает успехи в школе и мотивирует учиться дальше. Виджет сервиса «Отчёты» помогает отправлять отчёты в госорганы.

Виджет сервиса «Договоры» показывает и даёт найти нужный договор. Если каким‑то из сервисов человек не пользуется, то виджет умеет отображаться в «проморежиме» — просто рассказывает о сервисе и приглашает воспользоваться.

Для рекламы будущих продуктов создан шаблон промовиджета.

Когда есть правила и ограничения, сделать новый элемент — быстрее и дешевле, и при этом он получается хорошо почти сам собой.

Система Главбух

Система Кадры

Система Юрист

Еди­ная сетка исполь­зу­ется во всей семье спра­воч­ных систем «Акти­она». Поэтому неко­то­рые виджеты, такие как «Пра­во­вая база», исполь­зу­ются в них без изменения.

Для при­да­ния систе­мам инди­ви­ду­аль­но­сти доста­точно фир­мен­ной цве­то­вой и шриф­то­вой схем.

Система Главбух

Единая сетка используется во всей семье справочных систем «Актиона». Поэтому некоторые виджеты, такие как «Правовая база», используются в них без изменения.

Система Кадры

Для придания системам индивидуальности достаточно фирменной цветовой и шрифтовой схем.

Система Юрист

Сле­ду­ю­щий уро­вень систе­ма­ти­за­ции — на уровне опе­ра­ци­он­ной системы. В Андро­иде регла­мен­ти­ро­ван набор исполь­зу­е­мых кег­лей и свя­зан­ных с ними интерлиньяжей.

Весь текст вырав­ни­ва­ется по четы­рёх­пик­сель­ной сетке базо­вых линий.

Следующий уровень систематизации — на уровне операционной системы. В Андроиде регламентирован набор используемых кеглей и связанных с ними интерлиньяжей.

Весь текст выравнивается по четырёхпиксельной сетке базовых линий.

Боко­вые поля у андро­ид­ных при­ло­же­ний — по 16 пк, а отступ слева до основ­ной колонки тек­ста — 72 пк.

Вер­ти­каль­ные раз­меры также регла­мен­ти­ро­ваны. Строка ста­туса имеет высоту 24 пк, тул­бар — 56 пк, заго­ло­вок и эле­менты списка — по 72 пк, под­за­го­ло­вок — 48 пк, отступ между груп­пами эле­мен­тов — 8 пк.

Раз­меры всех обла­стей кратны 8 пк.

Бла­го­даря после­до­ва­тель­ному исполь­зо­ва­нию этих раз­ме­ров в раз­ных про­грам­мах, про­граммы узна­ются как андроидные.

Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»

Боковые поля у андроидных приложений — по 16 пк, а отступ слева до основной колонки текста — 72 пк.

Вертикальные размеры также регламентированы. Строка статуса имеет высоту 24 пк, тулбар — 56 пк, заголовок и элементы списка — по 72 пк, подзаголовок — 48 пк, отступ между группами элементов — 8 пк.

Размеры всех областей кратны 8 пк.

Благодаря последовательному использованию этих размеров в разных программах, программы узнаются как андроидные.

Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»

Поддельный

Студенческая работа

Когда в опе­ра­ци­он­ной системе при­няты опре­де­лён­ные отступы, кегли, раз­меры ико­нок, а дизай­неры исполь­зуют соб­ствен­ные, интер­фейс кажется поддельным.

В сту­ден­че­ской работе непра­виль­ные отступы внутри и вокруг поля поиска, раз­меры верх­ней и ниж­ней панели. Да и сам теле­фон поддельный.

Настоящий

Приложение Эпла

Поддельный

Студенческая работа

Когда в операционной системе приняты определённые отступы, кегли, размеры иконок, а дизайнеры используют собственные, интерфейс кажется поддельным.

В студенческой работе неправильные отступы внутри и вокруг поля поиска, размеры верхней и нижней панели. Да и сам телефон поддельный.

Настоящий

Приложение Эпла

Тест

Вы создаёте интерфейс программы для управления светофорами в городе. Нужны три рабочих области: список всех светофоров города с фильтром, карта города со светофорами и панель управления выбранным светофором. Известно, что оператор использует компьютер с одним монитором. Какой вариант организации интерфейса программы выбрать, чтобы минимизировать управление самим интерфейсом?

Левый: дать каждой из трёх областей своё окно — пользователь сам расставит как ему удобнее
Средний: разместить в одном окне все три области: слева список, посередине карта, справа — выбранный светофор. Фильтром фильтровать светофоры и в списке, и на карте
Правый: дать переключаться между списком и управлением выбранным светофором с помощью табов, а карту открывать в отдельном окне по горячей клавише

Придумать компоновку окна — работа дизайнера, а не пользователя, так что левый вариант плохой. В среднем варианте дизайнер эту работу сделал. Правый вариант с табами вынуждает переключаться между списком и сфетофором, держать часть информации в голове, а не перед глазами.

В светофорной программе из предыдущего вопроса наконец‑то добавится функция просмотра видео с камеры на конкретном перекрёстке. Предполагается, что операторы будут ей постоянно пользоваться. Какой из вариантов интерфейса лучше всего?

При клике на светофор или перекрёсток на карте, открывать попап с предложением просмотреть видео с камеры
При клике на светофор или перекрёсток на карте, открывать попап сразу с видео с камеры
На панели управления светофором добавить кнопку «посмотреть видео с камеры» и открывать отдельное окно при клике на неё
На панели управления светофором добавить область, где будет показываться видео с камеры. Сделать панель изменяемой ширины, чтобы можно было сделать комфортный размер видео. Открывать на весь экран при клике на видео

Согласно теореме о попапах, попапы стоит рассматривать в последнюю очередь. Отдельное окно приведёт к тому, что пользователю придётся искать ему место, а это работа дизайнера. Выделенная область на панели управления — лучшее решение из перечисленных: видео выбранного светофора доступно в один клик, располагается в постоянном месте и не пропадает при перемещении карты.

Пользователь попал в форму и кликнул в поле электронной почты. Перечислите недостатки в дизайне формы.

Поле почты подписано по‑английски, хотя вся форма — на русском языке, причём по‑разному в двух местах
Поле электронной почты должно быть недоступно, пока пользователь не заполнил поле имени
Сообщение об ошибке выведено преждевременно
Сообщение об ошибке неинформативно
Некоторые подписи под полями низкоинформативны и малополезны

Подпись e‑mail надо перевести: «электронная почта» или «эл. почта». Конечно, поле должно быть доступно: пользователь может заполнять форму в любом порядке. Сообщение об ошибке выведено преждевременно: пользователь ещё даже не начал печатать. Сообщение неинформативно: если человек ошибётся при вводе адреса, оно не поможет понять, в чём именно ошибка. Приводить пример имени, тем более, дважды — полный абсурд.

Перечислите недостатки в дизайне формы.

Cрок действия придётся указывать в формате, отличном от используемого на карте
Подписи к полям выровнены по правому краю
Номер карты должен быть написан шрифтом с засечками, в отличие от остальной формы
В полях отсутствует внятная группировка
Кнопка стоит в нижней части формы, что непривычно для взгляда новичка

Cрок действия выглядит не так, как на обычной карте; это усложнит ввод данных с карты. Подписи к полям выровнены по правому краю; из‑за этого левый край ломается и выглядит неряшливо. Номер карты написан шрифтом без засечек, и нет никаких причин считать это недостатком. Расстояния между полями не помогают понять их взаимоотношения. Кнопки в большинстве случаев стоят в конце форм — это привычно.

Перечислите недостатки в дизайне формы.

Используется «кирпичная кладка»
Сетка визуально связывает несвязанные по смыслу элементы
У чекбоксов не вынесены за скобку общие части подписей
Слишком мало полей вопреки правилу семи элементов
Обязательные поля формально обозначены звёздочками без полезных пояснений

Чем меньше полей, тем лучше. А всё остальное — действительно недостатки.

Выберите элементы интерфейса, одна из функций которых — прямой переход на сайтах и в приложениях.

Ссылка
Чекбокс
Кнопка
Иконка
Фальшпедаль

Ссылки, кнопки и иконки — элементы навигации, их используют для перехода. Чекбоксы для этого не подходят, а фальшпедали вообще не являются элементами интерфейса.

В веб‑приложении — планировщике задач есть страница задачи. Какой адрес страницы наиболее удачен с точки зрения приведённых рекомендаций?

example.com/tasks.php?sessionID=83258425&taskID=523899
example.com/523899/Сверстать_каталог
example.com/tasks/Сверстать_каталог
example.com/task/Сверстать_каталог
example.com/modules/tasks.php?id=523899
example.com/task/523899
example.com/task=Сверстать_каталог
Все варианты равнозначны

Варианты с числовыми идентификаторами технозависимы, а без текстовой части ещё и неинформативны. Запись переменной через знак равенства следует превратить в иерархическую через слеш. Задач много, а не одна, поэтому родительской страницей должен быть tasks, а не task. Получается, что наилучший вариант — example.com/tasks/Сверстать_каталог

Перечислите недостатки иерархической навигации для пользователя.

Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор
Не существует хоть сколько‑то распространённых интерфейсных решений для такой навигации, приходится изобретать непонятные элементы
В иерархической системе найти что‑либо перебором труднее, чем в линейной: нужно держать в голове, в каких ветках ты уже был
Устроенные иерархически приложения невозможно адаптировать к мобильным экранам
Кнопка «Назад» двусмысленна: может означать и «на предыдущий экран», и «на родительский экран»

Для иерархической навигации полно привычных интерфейсных решений, в том числе работающих на мобильных экранах. А всё остальное — действительно проблемы.

Что из перечисленного поможет навести порядок в форме и соответствует приведённым рекомендациям по использованию сетки?

Выровнять поля левыми краями
Сделать ширину каждого поля равной ширине его подписи
Привести размеры и отступы между полями к кратным восьми пикселям
Сделать ширину каждого поля кратной общему для всей формы шагу ширины

Если поля выровнять левыми краями, они встанут по сетке, а последовательность заполнения станет очевиднее. Размеры полей нужно подбирать под размеры их содержимого, а зону подписей делать компактной. Восьмипиксельная сетка — действительно один из способов наведения порядка. Другой способ — сделать ширины полей кратными «модулю» — общему для всей формы шагу ширины.

Перед вами четыре скриншота постов в Фейсбуке. Два из них — настоящие, а два других — «поддельные», сделанные не по стандартной сетке Фейсбука. Изменены и вертикальные, и горизонтальные отступы. Выберите два настоящих скриншота.

Даже если вы незнакомы с сеткой Фейсбука, чтобы правильно ответить на вопрос, достаточно найти два варианта, свёрстанных одинаково. Это оба левых варианта. В правом верхнем варианте имя Трампа подпрыгнуло вверх, картинка слишком прилипла к тексту, поле комментария не дотянулось до правого края. В правом нижнем варианте имя Родиона «отвалилось» от фотографии, кнопки реакций разъехались, а поле комментария прилипло к низу.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Вы создаёте интерфейс программы для управления светофорами в городе. Нужны три рабочих области: список всех светофоров города с фильтром, карта города со светофорами и панель управления выбранным светофором. Известно, что оператор использует компьютер с одним монитором. Какой вариант организации интерфейса программы выбрать, чтобы минимизировать управление самим интерфейсом?

Левый: дать каждой из трёх областей своё окно — пользователь сам расставит как ему удобнее
Средний: разместить в одном окне все три области: слева список, посередине карта, справа — выбранный светофор. Фильтром фильтровать светофоры и в списке, и на карте
Правый: дать переключаться между списком и управлением выбранным светофором с помощью табов, а карту открывать в отдельном окне по горячей клавише

Придумать компоновку окна — работа дизайнера, а не пользователя, так что левый вариант плохой. В среднем варианте дизайнер эту работу сделал. Правый вариант с табами вынуждает переключаться между списком и сфетофором, держать часть информации в голове, а не перед глазами.

В светофорной программе из предыдущего вопроса наконец‑то добавится функция просмотра видео с камеры на конкретном перекрёстке. Предполагается, что операторы будут ей постоянно пользоваться. Какой из вариантов интерфейса лучше всего?

При клике на светофор или перекрёсток на карте, открывать попап с предложением просмотреть видео с камеры
При клике на светофор или перекрёсток на карте, открывать попап сразу с видео с камеры
На панели управления светофором добавить кнопку «посмотреть видео с камеры» и открывать отдельное окно при клике на неё
На панели управления светофором добавить область, где будет показываться видео с камеры. Сделать панель изменяемой ширины, чтобы можно было сделать комфортный размер видео. Открывать на весь экран при клике на видео

Согласно теореме о попапах, попапы стоит рассматривать в последнюю очередь. Отдельное окно приведёт к тому, что пользователю придётся искать ему место, а это работа дизайнера. Выделенная область на панели управления — лучшее решение из перечисленных: видео выбранного светофора доступно в один клик, располагается в постоянном месте и не пропадает при перемещении карты.

Пользователь попал в форму и кликнул в поле электронной почты. Перечислите недостатки в дизайне формы.

Поле почты подписано по‑английски, хотя вся форма — на русском языке, причём по‑разному в двух местах
Поле электронной почты должно быть недоступно, пока пользователь не заполнил поле имени
Сообщение об ошибке выведено преждевременно
Сообщение об ошибке неинформативно
Некоторые подписи под полями низкоинформативны и малополезны

Подпись e‑mail надо перевести: «электронная почта» или «эл. почта». Конечно, поле должно быть доступно: пользователь может заполнять форму в любом порядке. Сообщение об ошибке выведено преждевременно: пользователь ещё даже не начал печатать. Сообщение неинформативно: если человек ошибётся при вводе адреса, оно не поможет понять, в чём именно ошибка. Приводить пример имени, тем более, дважды — полный абсурд.

Перечислите недостатки в дизайне формы.

Cрок действия придётся указывать в формате, отличном от используемого на карте
Подписи к полям выровнены по правому краю
Номер карты должен быть написан шрифтом с засечками, в отличие от остальной формы
В полях отсутствует внятная группировка
Кнопка стоит в нижней части формы, что непривычно для взгляда новичка

Cрок действия выглядит не так, как на обычной карте; это усложнит ввод данных с карты. Подписи к полям выровнены по правому краю; из‑за этого левый край ломается и выглядит неряшливо. Номер карты написан шрифтом без засечек, и нет никаких причин считать это недостатком. Расстояния между полями не помогают понять их взаимоотношения. Кнопки в большинстве случаев стоят в конце форм — это привычно.

Перечислите недостатки в дизайне формы.

Используется «кирпичная кладка»
Сетка визуально связывает несвязанные по смыслу элементы
У чекбоксов не вынесены за скобку общие части подписей
Слишком мало полей вопреки правилу семи элементов
Обязательные поля формально обозначены звёздочками без полезных пояснений

Чем меньше полей, тем лучше. А всё остальное — действительно недостатки.

Выберите элементы интерфейса, одна из функций которых — прямой переход на сайтах и в приложениях.

Ссылка
Чекбокс
Кнопка
Иконка
Фальшпедаль

Ссылки, кнопки и иконки — элементы навигации, их используют для перехода. Чекбоксы для этого не подходят, а фальшпедали вообще не являются элементами интерфейса.

В веб‑приложении — планировщике задач есть страница задачи. Какой адрес страницы наиболее удачен с точки зрения приведённых рекомендаций?

example.com/tasks.php?sessionID=83258425&taskID=523899
example.com/523899/Сверстать_каталог
example.com/tasks/Сверстать_каталог
example.com/task/Сверстать_каталог
example.com/modules/tasks.php?id=523899
example.com/task/523899
example.com/task=Сверстать_каталог
Все варианты равнозначны

Варианты с числовыми идентификаторами технозависимы, а без текстовой части ещё и неинформативны. Запись переменной через знак равенства следует превратить в иерархическую через слеш. Задач много, а не одна, поэтому родительской страницей должен быть tasks, а не task. Получается, что наилучший вариант — example.com/tasks/Сверстать_каталог

Перечислите недостатки иерархической навигации для пользователя.

Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор
Не существует хоть сколько‑то распространённых интерфейсных решений для такой навигации, приходится изобретать непонятные элементы
В иерархической системе найти что‑либо перебором труднее, чем в линейной: нужно держать в голове, в каких ветках ты уже был
Устроенные иерархически приложения невозможно адаптировать к мобильным экранам
Кнопка «Назад» двусмысленна: может означать и «на предыдущий экран», и «на родительский экран»

Для иерархической навигации полно привычных интерфейсных решений, в том числе работающих на мобильных экранах. А всё остальное — действительно проблемы.

Что из перечисленного поможет навести порядок в форме и соответствует приведённым рекомендациям по использованию сетки?

Выровнять поля левыми краями
Сделать ширину каждого поля равной ширине его подписи
Привести размеры и отступы между полями к кратным восьми пикселям
Сделать ширину каждого поля кратной общему для всей формы шагу ширины

Если поля выровнять левыми краями, они встанут по сетке, а последовательность заполнения станет очевиднее. Размеры полей нужно подбирать под размеры их содержимого, а зону подписей делать компактной. Восьмипиксельная сетка — действительно один из способов наведения порядка. Другой способ — сделать ширины полей кратными «модулю» — общему для всей формы шагу ширины.

Перед вами четыре скриншота постов в Фейсбуке. Два из них — настоящие, а два других — «поддельные», сделанные не по стандартной сетке Фейсбука. Изменены и вертикальные, и горизонтальные отступы. Выберите два настоящих скриншота.

Даже если вы незнакомы с сеткой Фейсбука, чтобы правильно ответить на вопрос, достаточно найти два варианта, свёрстанных одинаково. Это оба левых варианта. В правом верхнем варианте имя Трампа подпрыгнуло вверх, картинка слишком прилипла к тексту, поле комментария не дотянулось до правого края. В правом нижнем варианте имя Родиона «отвалилось» от фотографии, кнопки реакций разъехались, а поле комментария прилипло к низу.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

Напоследок

В этой книге изло­жены фун­да­мен­таль­ные прин­ципы дизайна интер­фейса, но за её пре­де­лами оста­ётся целый мир зна­ний, нуж­ных про­ек­ти­ров­щику в работе.

Мы не обсуж­дали про­цесс про­ек­ти­ро­ва­ния и цикл раз­ра­ботки интер­фейса: пони­ма­ние задачи, сце­на­рии, пер­со­на­жей, интер­вью, ите­ра­ции, тести­ро­ва­ние, поли­ровку, внед­ре­ние, обу­че­ние поль­зо­ва­те­лей. Не каса­лись эрго­но­мики, физи­че­ских отли­чий взрос­лых и детей, осо­бен­но­стей людей с про­бле­мами зре­ния или мел­кой мото­рики. Не раз­би­рали, для каких задач лучше подой­дёт ком­пью­тер, план­шет, теле­фон, часы — и чем отли­ча­ются интер­фейсы на этих устройствах.

Тема вёрстки в гра­фи­че­ском интер­фейсе шире главы «Сетка» — важно пони­мать пра­вило внут­рен­него и внеш­него, пра­вило якор­ных объ­ек­тов; уметь соби­рать экраны из базо­вых эле­мен­тов, таких как точка, линия и пря­мо­уголь­ник. В главе «Пик­то­граммы» мы кос­ну­лись их функ­ции, но не гра­фи­че­ского дизайна.

Эсте­тика интер­фейса меня­ется — кнопки сегодня выгля­дят иначе, чем пять лет назад. Дизай­нер дол­жен раз­би­раться в тенях, бли­ках, гра­ди­ен­тах, скруг­ле­ниях и уметь доби­ваться нуж­ного вос­при­я­тия интер­фейса с их помо­щью. А ещё есть шрифт, цвет, звук, анимация.

Напоследок

В этой книге изложены фундаментальные принципы дизайна интерфейса, но за её пределами остаётся целый мир знаний, нужных проектировщику в работе.

Мы не обсуждали процесс проектирования и цикл разработки интерфейса: понимание задачи, сценарии, персонажей, интервью, итерации, тестирование, полировку, внедрение, обучение пользователей. Не касались эргономики, физических отличий взрослых и детей, особенностей людей с проблемами зрения или мелкой моторики. Не разбирали, для каких задач лучше подойдёт компьютер, планшет, телефон, часы — и чем отличаются интерфейсы на этих устройствах.

Тема вёрстки в графическом интерфейсе шире главы «Сетка» — важно понимать правило внутреннего и внешнего, правило якорных объектов; уметь собирать экраны из базовых элементов, таких как точка, линия и прямоугольник. В главе «Пиктограммы» мы коснулись их функции, но не графического дизайна.

Эстетика интерфейса меняется — кнопки сегодня выглядят иначе, чем пять лет назад. Дизайнер должен разбираться в тенях, бликах, градиентах, скруглениях и уметь добиваться нужного восприятия интерфейса с их помощью. А ещё есть шрифт, цвет, звук, анимация.

Ещё инте­рес­нее ста­но­вится, когда интер­фейс выхо­дит за экран, напри­мер для управ­ле­ния умным домом, дро­ном, подъ­ём­ным кра­ном или когда интер­фейс вли­яет на без­опас­ность людей. Каким дол­жен быть вид и форма физи­че­ских рыча­гов и педа­лей? Как улуч­шить голо­со­вые интер­фейсы сегодня и какими они ста­нут в буду­щем, когда тех­но­ло­гии разо­вьются? Как эффек­тивно исполь­зо­вать вир­ту­аль­ную реаль­ность для повсе­днев­ных задач?

У интер­фейса есть и ком­мер­че­ская задача. Воз­ни­кает вопрос не только о том, как сде­лать удобно, но и как пора­до­вать, при­учить, затя­нуть. Как моти­ви­ро­вать чело­века поль­зо­ваться сер­ви­сом чаще?

Десять лет назад про­ек­ти­ров­щики решали задачу «сде­лать удобно», а сегодня — задачу «улуч­шить жизнь»: зани­маться спор­том, регу­лярно учиться, разумно тра­тить деньги, сор­ти­ро­вать мусор. Как интер­фей­сом холо­диль­ника помочь чело­веку пра­вильно питаться?

Буду рад, если чита­телю эти вопросы пока­жутся инте­рес­ными, и он отпра­вится читать дру­гие книжки, раз­би­раться в новых обла­стях и писать свои учебники.

Ещё интереснее становится, когда интерфейс выходит за экран, например для управления умным домом, дроном, подъёмным краном или когда интерфейс влияет на безопасность людей. Каким должен быть вид и форма физических рычагов и педалей? Как улучшить голосовые интерфейсы сегодня и какими они станут в будущем, когда технологии разовьются? Как эффективно использовать виртуальную реальность для повседневных задач?

У интерфейса есть и коммерческая задача. Возникает вопрос не только о том, как сделать удобно, но и как порадовать, приучить, затянуть. Как мотивировать человека пользоваться сервисом чаще?

Десять лет назад проектировщики решали задачу «сделать удобно», а сегодня — задачу «улучшить жизнь»: заниматься спортом, регулярно учиться, разумно тратить деньги, сортировать мусор. Как интерфейсом холодильника помочь человеку правильно питаться?

Буду рад, если читателю эти вопросы покажутся интересными, и он отправится читать другие книжки, разбираться в новых областях и писать свои учебники.

Приложение: указатель синтаксиса элементов интерфейса

Элемент и функция
Член предложения
Часть речи и форма
Примеры хорошие
так себе и плохие
Уточнение

Чекбокс

Выбор объекта

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, причастие

  • В плей­ли­сте
    ☑ супер­хиты
    ☐ что‑ни­будь поме­ло­дич­нее
    ☑ неизданное

  • Зака­зать
    ☐ борщ
    ☑ кар­тошку
    ☑ салат

  • Город
    ☐ Москва
    ☐ Челябинск

  • ☑ Включить

  • ☐ Выключить

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Квар­тира
    ☐ хру­щёвка
    ☑ у метро
    ☐ посуточно

  • Глаза
    ☑ голу­бые
    ☑ боль­шого раз­мера
    ☐ навыкате

  • ☐ Из выде­лен­ного диапазона

  • ☐ Со встро­ен­ной камерой

  • Квар­тира
    ☐ Подо­брать хру­щёвку
    ☑ Рас­по­ло­же­ние: у метро
    ☐ Сниму посуточно

  • Искать у метро?
    ☐ Да

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Сыг­рать на фор­те­пи­ано
    ☐ громко
    ☑ не запи­на­ясь
    ☐ одной рукой
    ☑ по нотам

  • ☑ Печа­тать рисунки?

  • ☐ Если не...

  • ☐ Несмотря на...

  • ☑ Вклю­чите этот чек­бокс чтобы подыскать...

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • Настройка прин­тера
    ☑ Рас­кла­ды­вать по копиям

  • Печать
    ☑ Раз­ло­жить по копиям

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Печа­тать
    ☑ рисунки
    ☐ колонтитулы

  • Пара­метры печати
    ☐ Не печа­тать рисунки
    ☐ Отклю­чить колонтитулы

Радиокнопки, переключатель, выпадающий список

Выбор объекта

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, причастие

  • Купить
    🔘 Айфон
    ○ Андроид

  • Пла­тель­щик
    🔘 Част­ное лицо
    ○ Организация

  • Выбе­рите марку

  • Вы кто?

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Тема оформ­ле­ния
    🔘 клас­си­че­ская
    ○ совре­мен­ная
    ○ по умолчанию

  • При­шёл
    ○ по записи
    ○ в порядке оче­реди
    🔘 только спросить

  • Вы согласны?
    🔘 да
    ○ нет

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Опла­тить
    🔘 через Эпл‑пей
    ○ пере­дав деньги в конверте

  • Доста­вить
    🔘 быстро
    ○ Поч­той России

  • Нико­гда — Все­гда — При выделении

  • Обли­ва­ясь потом

  • Вто­рым процессором

  • Лице­вой стороной

  • В обрат­ном порядке

  • Облаками

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • Обнов­ле­ния
    ○ не про­ве­рять
    ○ про­ве­рять
    ○ только ска­чи­вать
    🔘 сразу устанавливать

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Раз­ре­шить
    ○ всем
    🔘 только модераторам

Ползунок, он же слайдер

Выбор свойства, состояния

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Бес­шум­ный ... Оглу­шить соседей

  • Низ­кая громкость

  • Высо­кая громкость

  • Сде­лать тише

  • Уве­личьте яркость с помо­щью дан­ного ползунка:

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Быстро ... Качественно

  • Ближе ... Дальше

  • С лёг­ко­стью ... Обли­ва­ясь потом

  • Голы­шом ... В пол­ном обмундировании

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • При нару­ше­нии:
    Выно­сить уст­ное пре­ду­пре­жде­ние ... Сажать на кол

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Пред­по­чи­тать:
    Малень­кий файл ... Высо­кое качество

  • Только мне ... Дру­зьям ... Всем

Поле ввода

Приложение: указатель синтаксиса элементов интерфейса

Элемент и функция

Член предложения

Часть речи и форма

Примеры хорошие

так себе и плохие

Уточнение

Чекбокс

Выбор объекта

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Существительное, местоимение, причастие

  • В плейлисте
    ☑ суперхиты
    ☐ что‑нибудь помелодичнее
    ☑ неизданное

  • Заказать
    ☐ борщ
    ☑ картошку
    ☑ салат

  • Город
    ☐ Москва
    ☐ Челябинск

  • ☑ Включить

  • ☐ Выключить

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Существительное, местоимение, прилагательное, наречие, числительное, глагол в начальной форме

  • Квартира
    ☐ хрущёвка
    ☑ у метро
    ☐ посуточно

  • Глаза
    ☑ голубые
    ☑ большого размера
    ☐ навыкате

  • ☐ Из выделенного диапазона

  • ☐ Со встроенной камерой

  • Квартира
    ☐ Подобрать хрущёвку
    ☑ Расположение: у метро
    ☐ Сниму посуточно

  • Искать у метро?
    ☐ Да

Уточнение действия

Обстоятельство:

  • Сделать как?

  • где?

  • когда?

  • Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом

  • Сыграть на фортепиано
    ☐ громко
    ☑ не запинаясь
    ☐ одной рукой
    ☑ по нотам

  • ☑ Печатать рисунки?

  • ☐ Если не...

  • ☐ Несмотря на...

  • ☑ Включите этот чекбокс чтобы подыскать...

  • Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)

  • Настройка принтера
    ☑ Раскладывать по копиям

  • Печать
    ☑ Разложить по копиям

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

  • Существительное в косвенном падеже

  • Печатать
    ☑ рисунки
    ☐ колонтитулы

  • Параметры печати
    ☐ Не печатать рисунки
    ☐ Отключить колонтитулы

Радиокнопки, переключатель, выпадающий список

Выбор объекта

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Существительное, местоимение, причастие

  • Купить
    🔘 Айфон
    ○ Андроид

  • Плательщик
    🔘 Частное лицо
    ○ Организация

  • Выберите марку

  • Вы кто?

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Существительное, местоимение, прилагательное, наречие, числительное, глагол в начальной форме

  • Тема оформления
    🔘 классическая
    ○ современная
    ○ по умолчанию

  • Пришёл
    ○ по записи
    ○ в порядке очереди
    🔘 только спросить

  • Вы согласны?
    🔘 да
    ○ нет

Уточнение действия

Обстоятельство:

  • Сделать как?

  • где?

  • когда?

  • Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом

  • Оплатить
    🔘 через Эпл‑пей
    ○ передав деньги в конверте

  • Доставить
    🔘 быстро
    ○ Почтой России

  • Никогда — Всегда — При выделении

  • Обливаясь потом

  • Вторым процессором

  • Лицевой стороной

  • В обратном порядке

  • Облаками

  • Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)

  • Обновления
    ○ не проверять
    ○ проверять
    ○ только скачивать
    🔘 сразу устанавливать

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

  • Существительное в косвенном падеже

  • Разрешить
    ○ всем
    🔘 только модераторам

Ползунок, он же слайдер

Выбор свойства, состояния

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Существительное, прилагательное, наречие, числительное, глагол в начальной форме

  • Бесшумный ... Оглушить соседей

  • Низкая громкость

  • Высокая громкость

  • Сделать тише

  • Увеличьте яркость с помощью данного ползунка:

Уточнение действия

Обстоятельство:

  • Сделать как?

  • где?

  • когда?

  • Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом

  • Быстро ... Качественно

  • Ближе ... Дальше

  • С лёгкостью ... Обливаясь потом

  • Голышом ... В полном обмундировании

  • Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)

  • При нарушении:
    Выносить устное предупреждение ... Сажать на кол

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

  • Существительное в косвенном падеже

  • Предпочитать:
    Маленький файл ... Высокое качество

  • Только мне ... Друзьям ... Всем

Поле ввода

Бир­ман Илья Борисович

Поль­зо­ва­тель­ский интерфейс

  • Арт‑дирек­тор и изда­тель Артём Горбунов

  • Дизай­нер обложки и фото­граф
    Вла­ди­мир Колпаков

  • Иллю­стра­тор Андрей Кокорин

  • Раз­ра­бот­чики Рустам Кул­ма­тов
    и Васи­лий Половнёв

  • Мет­ран­паж и тести­ров­щик Сер­гей Фролов

  • Помощ­ники Юрий Мазур­ский
    и Алек­сандра Шабалдина

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

Бирман Илья Борисович

Пользовательский интерфейс

  • Арт‑директор и издатель Артём Горбунов

  • Дизайнер обложки и фотограф
    Владимир Колпаков

  • Иллюстратор Андрей Кокорин

  • Разработчики Рустам Кулматов
    и Василий Половнёв

  • Метранпаж и тестировщик Сергей Фролов

  • Помощники Юрий Мазурский
    и Александра Шабалдина

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

Теперь питание компьютера
можно отключить

Теперь питание компьютера
можно отключить