🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Что такое интерфейс
Человечность
Технозависимость
Привычка
Модальность
Последовательное волшебство
Взгляд новичка
В начале своей книги Джеф Раскин пишет:
Интерфейс. Символ плюс, 2005
Многие считают, что термин «пользовательский интерфейс» относится только к современным графическим пользовательским интерфейсам, основанным на окнах и меню, управляемых с помощью мыши. В одной из статей в журнале «Мобайл офис» было сказано: «Уже недалеко то время, когда вам совсем не нужно будет задумываться об интерфейсе, вы будете просто разговаривать со своим компьютером». В ответ на это я мог бы заметить, что системы, управляемые голосом, действительно могут обходиться без окон, но телефонные автоответчики их также не имеют, и, тем не менее, их интерфейсы зачастую оказываются чрезвычайно плохими. Итак, способ, которым вы выполняете какую‑либо задачу с помощью какого‑либо продукта, а именно совершаемые вами действия и то, что вы получаете в ответ, и является интерфейсом.
Конечно, интерфейс бывает не только пользовательским. Если обобщить это определение, можно сказать, что интерфейс — это набор правил взаимодействия: человека с программой, человека с устройством, устройства с устройством, программы с программой.
Слова «способ», «правило» — очень важные в этих определениях. Проектировщик интерфейса в первую очередь придумывает правило, сценарий, уменьшая количество необходимых жестов и сообщений.
Интерфейс — это правила игры...
Что такое интерфейс
Человечность
Технозависимость
Привычка
Модальность
Последовательное волшебство
Взгляд новичка
В начале своей книги Джеф Раскин пишет:
Многие считают, что термин «пользовательский интерфейс» относится только к современным графическим пользовательским интерфейсам, основанным на окнах и меню, управляемых с помощью мыши. В одной из статей в журнале «Мобайл офис» было сказано: «Уже недалеко то время, когда вам совсем не нужно будет задумываться об интерфейсе, вы будете просто разговаривать со своим компьютером». В ответ на это я мог бы заметить, что системы, управляемые голосом, действительно могут обходиться без окон, но телефонные автоответчики их также не имеют, и, тем не менее, их интерфейсы зачастую оказываются чрезвычайно плохими. Итак, способ, которым вы выполняете какую‑либо задачу с помощью какого‑либо продукта, а именно совершаемые вами действия и то, что вы получаете в ответ, и является интерфейсом.
Интерфейс. Символ плюс, 2005
Конечно, интерфейс бывает не только пользовательским. Если обобщить это определение, можно сказать, что интерфейс — это набор правил взаимодействия: человека с программой, человека с устройством, устройства с устройством, программы с программой.
Слова «способ», «правило» — очень важные в этих определениях. Проектировщик интерфейса в первую очередь придумывает правило, сценарий, уменьшая количество необходимых жестов и сообщений.
Интерфейс — это правила игры...
Но мало придумать правила, их нужно воплотить физически. Это воплощение — неотъемлемая часть интерфейса.
Вспомним азбуку Морзе. Современные единички и нолики
Что же делает азбуку Морзе неэффективной? Конечно, материальные средства: телеграфный ключ и радисты, которым приходится кодировать и раскодировать сообщения, полагаясь на память.
Интерфейс всегда материален. Всегда есть то, благодаря чему его правила выполняются.
Материальные средства — физический источник потерь полезного действия в интерфейсе.
Итак, интерфейс — это набор правил и материальные средства, которые обеспечивают взаимодействие по этим правилам.
...и их физическое воплощение
Но мало придумать правила, их нужно воплотить физически. Это воплощение — неотъемлемая часть интерфейса.
Вспомним азбуку Морзе. Современные единички и нолики
Что же делает азбуку Морзе неэффективной? Конечно, материальные средства: телеграфный ключ и радисты, которым приходится кодировать и раскодировать сообщения, полагаясь на память.
Интерфейс всегда материален. Всегда есть то, благодаря чему его правила выполняются.
Материальные средства — физический источник потерь полезного действия в интерфейсе.
Итак, интерфейс — это набор правил и материальные средства, которые обеспечивают взаимодействие по этим правилам.
...и их физическое воплощение
Хороший интерфейс начинается с человечности.
Я забываю имена людей, дела и пропущенные звонки. Кто‑то путает лево и право. Люди постоянно ошибаются раскладкой клавиатуры. Человечность дизайна выражается в том, чтобы подстроить предмет дизайна под человека с его слабостями, а не заставлять человека подстраиваться под предмет.
Хороший дизайнер расположит надписи над, а не под кнопками, чтобы не загораживать их пальцами.
Пульт телевизора
ББК
Пульт телевизора ББК
Хороший интерфейс начинается с человечности.
Я забываю имена людей, дела и пропущенные звонки. Кто‑то путает лево и право. Люди постоянно ошибаются раскладкой клавиатуры. Человечность дизайна выражается в том, чтобы подстроить предмет дизайна под человека с его слабостями, а не заставлять человека подстраиваться под предмет.
Хороший дизайнер расположит надписи над, а не под кнопками, чтобы не загораживать их пальцами.
Подумает о том, где окажется адрес на сложенном бланке.
Не допустит появления сообщения «Вы не заполнили одно или несколько полей». Компьютер знает, какое или какие именно поля не заполнены. Зачем заставлять человека искать их взглядом?
Подумает о том, где окажется адрес на сложенном бланке.
Не допустит появления сообщения «Вы не заполнили одно или несколько полей». Компьютер знает, какое или какие именно поля не заполнены. Зачем заставлять человека искать их взглядом?
Центральный экран в «Опеле»
Предложит найти ближайшую заправку встроенным в машину навигатором.
Не станет заставлять человека подбирать значения в процентах так, чтобы в сумме получилось сто.
Центральный экран в «Опеле»
Предложит найти ближайшую заправку встроенным в машину навигатором.
Не станет заставлять человека подбирать значения в процентах так, чтобы в сумме получилось сто.
Типичная таблица размеров интернет‑магазина одежды
Выбор размера в интернет‑магазине джинсов «Гетвеар»
В разных странах используются разные системы размеров одежды. Международные интернет‑магазины публикуют таблицы соответствия, по которым покупатели переводят привычные им размеры в принятые на сайте.
Казалось бы, подумали об удобстве, чтобы человек из любой страны мог заказать.
Но человек должен держать в голове и сопоставлять цифры, не имеющие отношения к его задаче. Легко сделать ошибку, ещё и сам же окажешься виноват. Это не говоря о том, что в таблице даже нигде не сказано, какая система принята на сайте.
Для «Гетвеара» мы сделали иначе — человек выбирает размер в привычной для него системе, не задумываясь о переводе.
Пересчёт в систему, по которой будут делаться выкройки, происходит за кулисами.
Хороший интерфейс не заставляет человека делать то, что он делает плохо: считать в уме, запоминать путь к файлу или сверять с бумажкой пятнадцатизначный код.
Принцип:
пусть потеет машина
Типичная таблица размеров интернет‑магазина одежды
Выбор размера в интернет‑магазине джинсов «Гетвеар»
В разных странах используются разные системы размеров одежды. Международные интернет‑магазины публикуют таблицы соответствия, по которым покупатели переводят привычные им размеры в принятые на сайте.
Казалось бы, подумали об удобстве, чтобы человек из любой страны мог заказать.
Но человек должен держать в голове и сопоставлять цифры, не имеющие отношения к его задаче. Легко сделать ошибку, ещё и сам же окажешься виноват. Это не говоря о том, что в таблице даже нигде не сказано, какая система принята на сайте.
Для «Гетвеара» мы сделали иначе — человек выбирает размер в привычной для него системе, не задумываясь о переводе.
Пересчёт в систему, по которой будут делаться выкройки, происходит за кулисами.
Хороший интерфейс не заставляет человека делать то, что он делает плохо: считать в уме, запоминать путь к файлу или сверять с бумажкой пятнадцатизначный код.
Принцип:
пусть потеет машина
Иногда машина думает, что пользовательские данные можно выбросить:
Онлайн‑кинотеатр «Амедиатека»
Эпл‑вотч
Видеоплеер предлагает начать просмотр с начала и забыть, докуда вы досмотрели кино в прошлый раз. Но отмотать в начало легко и вручную, а если по ошибке согласиться, найти последнее место будет трудно.
Спортивная программа спрашивает, сохранить ли результаты тренировки. Цена ошибки при ответе на этот вопрос — потерянные данные. Нужно сохранять без вопросов и давать удалить при желании.
Иногда машина думает, что пользовательские данные можно выбросить:
Онлайн‑кинотеатр «Амедиатека»
Видеоплеер предлагает начать просмотр с начала и забыть, докуда вы досмотрели кино в прошлый раз. Но отмотать в начало легко и вручную, а если по ошибке согласиться, найти последнее место будет трудно.
Эпл‑вотч
Спортивная программа спрашивает, сохранить ли результаты тренировки. Цена ошибки при ответе на этот вопрос — потерянные данные. Нужно сохранять без вопросов и давать удалить при желании.
Графический редактор предлагает «закрыться быстрее», выбросив содержимое буфера обмена.
Чтобы закрыться быстрее, разумно не задавать таких вопросов. Люди ожидают, что данные в буфере обмена останутся, пока их не заменят другими.
На вопрос «Сохранить?» отвечайте «да» за пользователя
На вопрос «Сохранить?» отвечайте «да» за пользователя
Графический редактор предлагает «закрыться быстрее», выбросив содержимое буфера обмена.
Чтобы закрыться быстрее, разумно не задавать таких вопросов. Люди ожидают, что данные в буфере обмена останутся, пока их не заменят другими.
Ещё хуже, когда машина без предупреждения теряет данные пользователя.
На Айфоне можно ответить на сообщение, не открывая приложения. Но если случайно нажать в область под полем ввода, поле уедет с экрана, и набранное сообщение нигде не сохранится.
Достаточно пару раз так ошибиться, чтобы больше не доверять этой функции.
Принцип:
данные пользователя бесконечно ценны
Ещё хуже, когда машина без предупреждения теряет данные пользователя.
На Айфоне можно ответить на сообщение, не открывая приложения. Но если случайно нажать в область под полем ввода, поле уедет с экрана, и набранное сообщение нигде не сохранится.
Достаточно пару раз так ошибиться, чтобы больше не доверять этой функции.
Принцип:
данные пользователя бесконечно ценны
Если стоит флажок «Сохранять параметр», то при введении значения в ячейку, настроенную на параметр, где стоит этот флажок, значение этой ячейки во время сохранения значений заменит собой значение этого параметра на число, указанное в настройках этого параметра на эту ячейку. Если же флажок не стоит, то замена значения во время сохранения значений параметров происходить не будет
Автор неизвестен
Эта цитата из документации была прославлена на «Баше.орг». Всё, о чём тут написано, заведомо не имеет отношения к задаче пользователя. Текст выглядит как перевод Гугль‑транслейтом с программного кода на русский.
Когда интерфейс продиктован внутренней архитектурой и системными понятиями, он превращается в неподдающуюся пониманию китайскую головоломку. С ним можно обращаться только посредством заученных ритуалов.
Если стоит флажок «Сохранять параметр», то при введении значения в ячейку, настроенную на параметр, где стоит этот флажок, значение этой ячейки во время сохранения значений заменит собой значение этого параметра на число, указанное в настройках этого параметра на эту ячейку. Если же флажок не стоит, то замена значения во время сохранения значений параметров происходить не будет
Автор неизвестен
Эта цитата из документации была прославлена на «Баше.орг». Всё, о чём тут написано, заведомо не имеет отношения к задаче пользователя. Текст выглядит как перевод Гугль‑транслейтом с программного кода на русский.
Когда интерфейс продиктован внутренней архитектурой и системными понятиями, он превращается в неподдающуюся пониманию китайскую головоломку. С ним можно обращаться только посредством заученных ритуалов.
Этот сайт прислали в рубрику «Советы» на сайте бюро. Человек должен выбрать регион, а потом корректно заполнить целый формуляр, чтобы машина соизволила найти мини‑отель.
Единственная причина заставлять человека заполнять все эти поля — устройство базы данных. Из таких данных программисту легко составить запрос.
Этот сайт прислали в рубрику «Советы» на сайте бюро. Человек должен выбрать регион, а потом корректно заполнить целый формуляр, чтобы машина соизволила найти мини‑отель.
Единственная причина заставлять человека заполнять все эти поля — устройство базы данных. Из таких данных программисту легко составить запрос.
Подсказка намекает: пиши как угодно
Когда человек обращается к программе, он думает о своей задаче, а не готовит данные для формы в нужном порядке и формате. Намного удобнее одно поле, куда можно ввести всё, что есть в голове. И уточнить пожелания позже, если предложенные варианты не подойдут.
Ещё проще сформулировать, что хочешь, когда видишь, что бывает. Поэтому естественный следующий шаг — показать популярные отели ещё до того, как человек воспользовался поиском.
«Такого же, но с перламутровыми пуговицами». Фрагмент
Фильтры помогают улучшить результат
Принцип:
сначала данные, потом фильтры
Подсказка намекает: пиши как угодно
Когда человек обращается к программе, он думает о своей задаче, а не готовит данные для формы в нужном порядке и формате. Намного удобнее одно поле, куда можно ввести всё, что есть в голове. И уточнить пожелания позже, если предложенные варианты не подойдут.
Ещё проще сформулировать, что хочешь, когда видишь, что бывает. Поэтому естественный следующий шаг — показать популярные отели ещё до того, как человек воспользовался поиском.
Фильтры помогают улучшить результат
Принцип:
сначала данные, потом фильтры
«Такого же, но с перламутровыми пуговицами». Фрагмент
Стартовый экран программы «Конверт». Выбор категории переводимых единиц
Технозависимостью страдают многочисленные конвертеры единиц. Пользователя встречает меню категорий. После выбора категории нужно указать исходную единицу измерения. Потом — единицу, в которую переводить. Наконец, в конце — само переводимое число.
С точки зрения программиста тут всё логично. Для перевода нужно знать исходную и целевую единицу. Единиц много, и не из любой в любую можно перевести. Они распадаются на категории, внутри которых переводы возможны. Кажется, что мир так и устроен.
Но посмотрим на задачу пользователя. Вы хотите перевести 800 квадратных футов в квадратные метры. Программа не даёт ничего похожего на то, что вам нужно, а заставляет думать о том, что нужно ей. Зачем эти иконки? Пока подготовите программу к работе, уже забудете, что хотели перевести.
Стартовый экран программы «Конверт». Выбор категории переводимых единиц
Технозависимостью страдают многочисленные конвертеры единиц. Пользователя встречает меню категорий. После выбора категории нужно указать исходную единицу измерения. Потом — единицу, в которую переводить. Наконец, в конце — само переводимое число.
С точки зрения программиста тут всё логично. Для перевода нужно знать исходную и целевую единицу. Единиц много, и не из любой в любую можно перевести. Они распадаются на категории, внутри которых переводы возможны. Кажется, что мир так и устроен.
Но посмотрим на задачу пользователя. Вы хотите перевести 800 квадратных футов в квадратные метры. Программа не даёт ничего похожего на то, что вам нужно, а заставляет думать о том, что нужно ей. Зачем эти иконки? Пока подготовите программу к работе, уже забудете, что хотели перевести.
Программа «Ангстрем» при запуске сразу показывает цифровую и буквенную клавиатуры.
Человек вводит число 800, которое у него в голове. По умолчанию оно переводится между единицами с прошлого раза.
Когда человек дописал ф, ответ уже на экране.
Ангстрем
Авторы: Илья Бирман, Шурик Бабаев
Стартовый экран программы «Ангстрем»
Результат меняется по мере ввода
Нужный ответ — во второй строке
Стартовый экран программы «Ангстрем»
Результат меняется по мере ввода
Нужный ответ — во второй строке
Программа «Ангстрем» при запуске сразу показывает цифровую и буквенную клавиатуры.
Человек вводит число 800, которое у него в голове. По умолчанию оно переводится между единицами с прошлого раза.
Когда человек дописал ф, ответ уже на экране.
Ангстрем
Авторы: Илья Бирман, Шурик Бабаев
В операционных системах компьютеров данные хранятся в файлах. Чтобы сохранить информацию, пользователь придумывает название и место файла в иерархии. Чтобы вернуться к сохранённому, нужно вспомнить эти признаки.
Это очень логично, но удобно только для компьютеров.
Для человека все места в файловой системе выглядят одинаково. В жизни мы запоминаем положение вещей по множеству признаков и ассоциаций.
В операционных системах компьютеров данные хранятся в файлах. Чтобы сохранить информацию, пользователь придумывает название и место файла в иерархии. Чтобы вернуться к сохранённому, нужно вспомнить эти признаки.
Это очень логично, но удобно только для компьютеров.
Для человека все места в файловой системе выглядят одинаково. В жизни мы запоминаем положение вещей по множеству признаков и ассоциаций.
Можно смеяться над теми, кто хранит сотню файлов «в бардаке» на рабочем столе, но это совершенно естественно. Рабочий стол — единственное место, где файлы можно расположить пространственно или объединить в группы.
Рабочий стол здорового человека: файлы называются как попало, но разложены по кучкам
Рабочий стол здорового человека: файлы называются как попало, но разложены по кучкам
Можно смеяться над теми, кто хранит сотню файлов «в бардаке» на рабочем столе, но это совершенно естественно. Рабочий стол — единственное место, где файлы можно расположить пространственно или объединить в группы.
Двухмерность компьютерного дисплея провоцирует программиста на упрощённое, «линейное» представление функций. Когда у программы появляется новая функция, нужно просто добавить кнопку в конец тулбара. За объединением кнопок в тулбары следует объединение самих тулбаров в слоёные пироги.
При этом теряются логические связи между функциями, которые могут иметь сложную многомерную структуру, по‑разному использоваться в зависимости от сценария, решать разные задачи.
Примеры — программы «Е‑Фильм» и «Хром»
«Е‑Фильм»
«Хром»
Двухмерность компьютерного дисплея провоцирует программиста на упрощённое, «линейное» представление функций. Когда у программы появляется новая функция, нужно просто добавить кнопку в конец тулбара. За объединением кнопок в тулбары следует объединение самих тулбаров в слоёные пироги.
При этом теряются логические связи между функциями, которые могут иметь сложную многомерную структуру, по‑разному использоваться в зависимости от сценария, решать разные задачи.
Ничем не лучше механическая упаковка всех функций и элементов программы без разбора в единое древовидное меню. Формальная структура дерева удобна
Консоль управления Микрософта — конструктор безразличных к смыслу административных интерфейсов
Ничем не лучше механическая упаковка всех функций и элементов программы без разбора в единое древовидное меню. Формальная структура дерева удобна
Консоль управления Микрософта — конструктор безразличных к смыслу административных интерфейсов
Приложения на Айфоне показывают уведомления: пришло письмо, скоро встреча или кому‑то понравилась ваша фотография. Часто малозначительные уведомления отвлекают от дела, но порой важно получить их вовремя. Айфон не знает, какие уведомления важные, а какие — нет, поэтому человеку предоставляется специальное меню для их настройки.
Меню выглядит проще, чем дерево на предыдущем развороте, но пользоваться им так же тяжело. На первом уровне — все установленные приложения. Это как минимум несколько десятков.
Для каждого приложения нужно решить, какую комбинацию параметров установить: где и в каком виде появится уведомление, каким будет сопровождаться звуком, скроется ли само или дождётся реакции пользователя. Процесс настройки чудовищно утомителен.
В девятой версии Ай‑ОСа выбирается максимальное количество уведомлений одного приложения в «Центре уведомлений». Но это число лишено смысла. Если поставить пять, важным может оказаться шестое.
Всё это далеко от того, что волнует пользователя. Было бы полезно получать уведомления от одних людей и не получать от других — независимо от приложения. Когда приходит раздражающее уведомление, была бы полезна кнопка «никогда такое не показывать». Если пришло во время встречи — «напомнить после встречи». Когда ставишь будильник — «и заодно отключить уведомления до утра».
Список приложений
Параметры выбранного приложения
Параметры выбранного приложения
Список приложений
Параметры выбранного приложения
Параметры выбранного приложения
Приложения на Айфоне показывают уведомления: пришло письмо, скоро встреча или кому‑то понравилась ваша фотография. Часто малозначительные уведомления отвлекают от дела, но порой важно получить их вовремя. Айфон не знает, какие уведомления важные, а какие — нет, поэтому человеку предоставляется специальное меню для их настройки.
Меню выглядит проще, чем дерево на предыдущем развороте, но пользоваться им так же тяжело. На первом уровне — все установленные приложения. Это как минимум несколько десятков.
Для каждого приложения нужно решить, какую комбинацию параметров установить: где и в каком виде появится уведомление, каким будет сопровождаться звуком, скроется ли само или дождётся реакции пользователя. Процесс настройки чудовищно утомителен.
В девятой версии Ай‑ОСа выбирается максимальное количество уведомлений одного приложения в «Центре уведомлений». Но это число лишено смысла. Если поставить пять, важным может оказаться шестое.
Всё это далеко от того, что волнует пользователя. Было бы полезно получать уведомления от одних людей и не получать от других — независимо от приложения. Когда приходит раздражающее уведомление, была бы полезна кнопка «никогда такое не показывать». Если пришло во время встречи — «напомнить после встречи». Когда ставишь будильник — «и заодно отключить уведомления до утра».
Икона технозависимости — куаркод. Тут видно каждый бит, что навевает воспоминания о модемах с их характерным звуком соединения.
Когда можно прочитать всё о картине в музее, просто наведя на неё телефон — это волшебство. Но если наводить нужно не на картину, а на расположенный рядом чёрно‑белый квадрат, то волшебство теряется.
Технологии — под капот
Икона технозависимости — куаркод. Тут видно каждый бит, что навевает воспоминания о модемах с их характерным звуком соединения.
Когда можно прочитать всё о картине в музее, просто наведя на неё телефон — это волшебство. Но если наводить нужно не на картину, а на расположенный рядом чёрно‑белый квадрат, то волшебство теряется.
Технологии — под капот
Дизайнеры придумывают, что написать на кнопке или что нарисовать на пиктограмме, чтобы сделать интерфейс удобнее и понятнее. Но те, кто понимают силу привычек, знают, как на самом деле работает интерфейс. Часто конкретные текст или картинка не имеют значения.
С формированием привычки отдельные осознанные действия объединяются в неделимые и автоматические. Движения выполняются сами собой, сознание свободно для другого.
Для маленького ребёнка надеть и зашнуровать ботинки — дело, полное сложностей. Нужно в правильной последовательности сделать пару десятков точных движений. Каждый шаг приходится обдумывать.
Внимательно, медленно
Взрослый человек обувается, не прерывая разговор с товарищем. Не раскладывает этот процесс на отдельные движения, а делает автоматически целиком.
Быстро, невнимательно
Дизайнеры придумывают, что написать на кнопке или что нарисовать на пиктограмме, чтобы сделать интерфейс удобнее и понятнее. Но те, кто понимают силу привычек, знают, как на самом деле работает интерфейс. Часто конкретные текст или картинка не имеют значения.
С формированием привычки отдельные осознанные действия объединяются в неделимые и автоматические. Движения выполняются сами собой, сознание свободно для другого.
Для маленького ребёнка надеть и зашнуровать ботинки — дело, полное сложностей. Нужно в правильной последовательности сделать пару десятков точных движений. Каждый шаг приходится обдумывать.
Внимательно, медленно
Взрослый человек обувается, не прерывая разговор с товарищем. Не раскладывает этот процесс на отдельные движения, а делает автоматически целиком.
Быстро, невнимательно
Когда пять дней подряд ездишь на работу одной дорогой, перестаёшь думать, где куда повернуть. Привычка вырабатывается, если действия линейные, по «алгоритму» без ветвления. Она закрепляется с каждым повторением и срабатывает без участия сознания. Поэтому по пути на дачу в субботу можно случайно оказаться у стоянки перед закрытым офисом.
Для иллюстрации силы привычки Джеф Раскин приводит в пример автомобиль, где поменяли местами педали газа и тормоза. Чтобы водитель не забыл, сверху поставили красное мигающее табло, предупреждающее, что педали расположены наоборот. Вероятно, собранному человеку удастся проехать квартал или два, но как только собака выбежит на дорогу, мозг отреагирует привычно: водитель нажмёт на тормоз, который окажется газом.
Некоторые вещи невозможно сделать без привычки. Чтобы сделать тройной тулуп, нужно долго тренироваться, доводя действия до автоматизма. А если попытаться обдумывать движения, неизбежно упадёшь.
Формирование привычки — естественный механизм. Когда умение входит в привычку, «думающая» часть мозга освобождается для осмысленной обработки новой информации и постепенного приобретения новых умений. Так рутина перестаёт занимать мозг, что помогает человеку не сойти с ума от чистки зубов и мытья посуды.
Джеф Раскин. Новые направления в проектировании компьютерных систем, Символ плюс, 2005
Когда пять дней подряд ездишь на работу одной дорогой, перестаёшь думать, где куда повернуть. Привычка вырабатывается, если действия линейные, по «алгоритму» без ветвления. Она закрепляется с каждым повторением и срабатывает без участия сознания. Поэтому по пути на дачу в субботу можно случайно оказаться у стоянки перед закрытым офисом.
Для иллюстрации силы привычки Джеф Раскин приводит в пример автомобиль, где поменяли местами педали газа и тормоза. Чтобы водитель не забыл, сверху поставили красное мигающее табло, предупреждающее, что педали расположены наоборот. Вероятно, собранному человеку удастся проехать квартал или два, но как только собака выбежит на дорогу, мозг отреагирует привычно: водитель нажмёт на тормоз, который окажется газом.
Некоторые вещи невозможно сделать без привычки. Чтобы сделать тройной тулуп, нужно долго тренироваться, доводя действия до автоматизма. А если попытаться обдумывать движения, неизбежно упадёшь.
Формирование привычки — естественный механизм. Когда умение входит в привычку, «думающая» часть мозга освобождается для осмысленной обработки новой информации и постепенного приобретения новых умений. Так рутина перестаёт занимать мозг, что помогает человеку не сойти с ума от чистки зубов и мытья посуды.
Джеф Раскин. Новые направления в проектировании компьютерных систем, Символ плюс, 2005
Удаление приложения на Айфоне
Формированию привычки нельзя противостоять, она образуется сама собой.
Поэтому бесполезны подтверждающие диалоговые окна: человек привыкает подтверждать, не читая.
Удаление файла в Виндоусе
Компьютер пытается удостовериться, что пользователь хочет удалить файл. А пользователь привыкает вместо 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
Непредсказуемость награды усиливает привыкание. В эксперименте Берреса Скиннера устройство выдавало голубям еду при нажатии на рычаг. Голуби быстро научились пользоваться рычагом, когда испытывали голод. Но потом он изменил устройство так, чтобы еда выдавалась лишь иногда. Голуби стали нажимать на рычаг намного чаще независимо от голода.
Подобно голубям Скиннера мы проверяем почту и крутим ленту соцсети: там награда — в виде новых писем, интересных постов и лайков — тоже появляется непредсказуемо. Из‑за этого руки так и тянутся зайти ещё раз; покрутить ещё немного. А вдруг!
Примеры: Твитер, Фейсбук и Инстаграм
Непредсказуемость награды усиливает привыкание. В эксперименте Берреса Скиннера устройство выдавало голубям еду при нажатии на рычаг. Голуби быстро научились пользоваться рычагом, когда испытывали голод. Но потом он изменил устройство так, чтобы еда выдавалась лишь иногда. Голуби стали нажимать на рычаг намного чаще независимо от голода.
Подобно голубям Скиннера мы проверяем почту и крутим ленту соцсети: там награда — в виде новых писем, интересных постов и лайков — тоже появляется непредсказуемо. Из‑за этого руки так и тянутся зайти ещё раз; покрутить ещё немного. А вдруг!
Примеры: Твитер, Фейсбук и Инстаграм
У моей бабушки телевизор иногда перестаёт переключать каналы: «Жму пятый, а он не включается!».
Она случайно нажимает кнопку
У моей бабушки телевизор иногда перестаёт переключать каналы: «Жму пятый, а он не включается!».
Она случайно нажимает кнопку
Бывает, чёртова микроволновка за пять минут так и не разогреет суп, потому что с прошлого раза стояла на разморозке.
Выбор режима работы микроволновой печи «Самсунг»
Бывает, чёртова микроволновка за пять минут так и не разогреет суп, потому что с прошлого раза стояла на разморозке.
Выбор режима работы микроволновой печи «Самсунг»
Но есть интерфейсы, которые всегда работают предсказуемо. Кнопка «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»
Что можно сказать об этом сообщении?
Это привычное пользователям модальное окно Виндоуса. Но технозависимая формулировка лишь отражает особенности реализации программы. Если отвлёкшийся человек посмотрит на него, смысла он не поймёт — то есть окно не пройдёт проверку «взглядом новичка». Так что об эффективности работы говорить не приходится.
Как сделать этот интерфейс человечнее?
Пример помогает понять, что надо вводить знак „+“ и код страны, и пользователю не приходится гадать. Но человечнее будет дать ввести номер и в любом другом формате, исправив его автоматически. А введение дополнительных окон этот интерфейс человечнее не сделает.
Выберите примеры действия принципа «Пусть потеет машина».
«Крутилка» — это пример другой идеи: обратной связи. Автоматическое форматирование или перевод на другой язык усложнят программу, но упростят жизнь человеку. Принцип «Пусть потеет машина» не предполагает наблюдения за внутренней работой компьютера. Бесконечный цикл — это не пример работы, которую компьютер выполняет за человека.
Что не так с этой таблицей размеров в интернет‑магазине обуви?
Американцы и так используют дюймы, а с разноцветностью уже перебор. Пересчитывать размеры следует компьютеру, а не человеку, который может запутаться и в итоге заказать неподходящую вещь.
Айтюнс не смог прочитать данные Айфона и предлагает сбросить его к заводским установкам. Какой принцип нарушен?
Данные, фильтры и квазирежимы ни при чём, а окно с сообщением — стандартное. Проблема в том, что Айтюнс предлагает пользователю удалить все данные, как будто они не имеют никакой ценности.
Человек приехал забрать пылесос из пункта самовывоза. У него спрашивают номер заказа. С точки зрения человечности это:
Номер заказа ничего не гарантирует: я могу его перепутать или просто забыть — его трудно держать в голове. Конечно, частной информацией номера заказов считать нельзя: готовность заказов по номерам часто показывают на общественных телевизорах. Вряд ли использование номера ускоряет процесс, но даже если так, к человечности это не имеет отношения.
Сайт находит тренинги по множеству критериев. Как бы вы предложили устроить интерфейс поиска?
Форма из нескольких шагов или нескольких полей — плохое решение, только отдаляющее от результатов поиска. Принцип «сначала данные, потом фильтры» предписывает как можно раньше показать хоть что‑то, а уже потом дать человеку инструменты для уточнения выдачи.
Интернет‑магазин предлагает выбор сортировки. Укажите проблемы этого интерфейса.
Слова «по названию», «цене», «новизне» оформлены как ссылки, но не являются ими, что противоречит привычкам. Интерфейс технозависим: вместо учёта реальных сценариев поиска дана сортировка по атрибутам базы данных. Скажем, зачем нужна сортировка по названию задом‑наперёд? Способов сортировки, конечно, можно придумать и ещё больше, но модальность тут ни при чём.
Предложите улучшения интерфейса из предыдущего вопроса.
Дать более человечные названия способам сортировки и использовать более привычный элемент — хорошие идеи. Иногда удобно искать упаковку по цвету, но сортировка вряд ли поможет с этим: синий будет до или после красного? Синяя рамка заголовку не нужна.
Близость
Прицеливание
Информативность
Обратная связь
Листание и прокрутка
Близость
Прицеливание
Информативность
Обратная связь
Листание и прокрутка
См. также:
Артём Горбунов. Эффекты гештальта
Звёзды на небе расположены хаотично. Но мозг человека стремится выделить в наблюдаемой картине цельный образ — «гештальт». Так в нашей голове возникают созвездия.
Мы замечаем объекты, образующие определённую фигуру, имеющие общий цвет или двигающиеся в одном направлении.
Звёзды на небе расположены хаотично. Но мозг человека стремится выделить в наблюдаемой картине цельный образ — «гештальт». Так в нашей голове возникают созвездия.
Мы замечаем объекты, образующие определённую фигуру, имеющие общий цвет или двигающиеся в одном направлении.
См. также:
Артём Горбунов. Эффекты гештальта
Дизайнеры используют особенности человеческого восприятия для передачи смысла. Этот логотип — не множество полос разной длины, а три латинские буквы.
Дизайнеры используют особенности человеческого восприятия для передачи смысла. Этот логотип — не множество полос разной длины, а три латинские буквы.
Первый и самый простой закон, который нужно знать — закон близости. Объекты, расположенные рядом, воспринимаются связанными. Это кажется очевидным, но ошибки встречаются слишком часто.
В интернет‑магазине «Ламода» невозможно понять, какие цены относятся к каким товарам — все расстояния одинаковы.
См. также:
Артемий Лебедев. Теория близости
Первый и самый простой закон, который нужно знать — закон близости. Объекты, расположенные рядом, воспринимаются связанными. Это кажется очевидным, но ошибки встречаются слишком часто.
В интернет‑магазине «Ламода» невозможно понять, какие цены относятся к каким товарам — все расстояния одинаковы.
См. также:
Артемий Лебедев. Теория близости
У «Гисметео» ночная температура относится к дневной пиктограмме: +25 Ясно.
В «Википедии» портрет Джимми Уэйлса на банере связывается с заголовком статьи.
У «Гисметео» ночная температура относится к дневной пиктограмме: +25 Ясно.
В «Википедии» портрет Джимми Уэйлса на банере связывается с заголовком статьи.
У «Кинопоиска» белое поле ввода находится прямо под словами «Войти на сайт». Кажется, что туда нужно ввести имя или пароль. А кнопка «Искать» отделена втрое большим отступом.
Газете.ру, кажется, стоит ещё поискать способ понравиться мужчине.
У «Кинопоиска» белое поле ввода находится прямо под словами «Войти на сайт». Кажется, что туда нужно ввести имя или пароль. А кнопка «Искать» отделена втрое большим отступом.
Газете.ру, кажется, стоит ещё поискать способ понравиться мужчине.
Проблемы с близостью часто встречаются при использовании радиокнопок. В приглашении оценить отель радиокнопки ближе друг к другу по вертикали, чем по горизонтали. Кажется, что нужно выбрать, что именно в отеле было хорошо: персонал, уборка или расположение.
Окно установки «Аудишена» на первый взгляд кажется абсурдным: в группе радиокнопок выбрано сразу несколько вариантов. Контрастные горизонтальные линии не спасают — близость сильнее.
Проблемы с близостью часто встречаются при использовании радиокнопок. В приглашении оценить отель радиокнопки ближе друг к другу по вертикали, чем по горизонтали. Кажется, что нужно выбрать, что именно в отеле было хорошо: персонал, уборка или расположение.
Окно установки «Аудишена» на первый взгляд кажется абсурдным: в группе радиокнопок выбрано сразу несколько вариантов. Контрастные горизонтальные линии не спасают — близость сильнее.
Группа радиокнопок, или радиогруппа — набор связанных по смыслу элементов, из которых может быть выбран только один. Важно всегда видеть их вместе, чтобы понимать, что выбрано и из чего.
Поэтому классические радиокнопки должны стоять друг под другом. Иначе их отделяют друг от друга собственные названия.
Если хочется поставить радиокнопки в строку, то вместо кружков стоит использовать горизонтальный переключатель.
Плохо
Хорошо
Тоже хорошо
Группа радиокнопок, или радиогруппа — набор связанных по смыслу элементов, из которых может быть выбран только один. Важно всегда видеть их вместе, чтобы понимать, что выбрано и из чего.
Поэтому классические радиокнопки должны стоять друг под другом. Иначе их отделяют друг от друга собственные названия.
Если хочется поставить радиокнопки в строку, то вместо кружков стоит использовать горизонтальный переключатель.
Плохо
Хорошо
Тоже хорошо
Кружки радиокнопок должны стоять близко друг другу, потому что радиокнопки образуют группу. Но подписи должны стоять ещё ближе к своим кружкам: кружок и подпись — это один элемент.
Чекбокс также должен быть ближе к собственной подписи, чем к соседним элементам.
Артём Горбунов. Типографика и вёрстка.
Глава «Правило внутреннего и внешнего»
Кружки радиокнопок должны стоять близко друг другу, потому что радиокнопки образуют группу. Но подписи должны стоять ещё ближе к своим кружкам: кружок и подпись — это один элемент.
Чекбокс также должен быть ближе к собственной подписи, чем к соседним элементам.
Артём Горбунов. Типографика и вёрстка.
Глава «Правило внутреннего и внешнего»
Плохо
Поля формы стоят на одинаковом расстоянии друг от друга
Лучше
Между связанными по смыслу полями расстояния меньше
Близость — самый естественный способ показать связь. В формах следует группировать связанные поля, размещая их ближе друг к другу.
Такая форма выглядит проще: вместо дюжины полей мы видим пять групп.
Плохо
Поля формы стоят на одинаковом расстоянии друг от друга
Близость — самый естественный способ показать связь. В формах следует группировать связанные поля, размещая их ближе друг к другу.
Лучше
Между связанными по смыслу полями расстояния меньше
Такая форма выглядит проще: вместо дюжины полей мы видим пять групп.
Плохо
Майя
Хорошо
Почта
Группировка помогает улучшить не только формы. В плохом тулбаре кнопки идут безразличной кучей. В хорошем — сгруппированы по смыслу.
→
Группируйте элементы интерфейса
Плохо
Майя
Хорошо
Почта
Группировка помогает улучшить не только формы. В плохом тулбаре кнопки идут безразличной кучей. В хорошем — сгруппированы по смыслу.
→
Группируйте элементы интерфейса
В приложении «Медузы» все вертикальные расстояния между блоками — одинаковые.
Новость о Путине оказалась зажата между двумя массивными плашками — «Нападение» и с женщиной, хотя не относится ни к одной из них. Плашка «Нападение» относится к новости над ней, а фотография женщины — к новости под ней. В том, как организованы элементы, нет порядка.
Дизайнер попытался «спасти» дизайн, добавив на фотографиях белую стрелку снизу. Но такая стрелка — неестественный способ связывать объекты. Близость сильнее линеек и стрелок.
В приложении «Медузы» все вертикальные расстояния между блоками — одинаковые.
Новость о Путине оказалась зажата между двумя массивными плашками — «Нападение» и с женщиной, хотя не относится ни к одной из них. Плашка «Нападение» относится к новости над ней, а фотография женщины — к новости под ней. В том, как организованы элементы, нет порядка.
Дизайнер попытался «спасти» дизайн, добавив на фотографиях белую стрелку снизу. Но такая стрелка — неестественный способ связывать объекты. Близость сильнее линеек и стрелок.
Так выглядела форма входа с паролем в старом Айтюнсе. Можно было войти не только по адресу, зарегистрированному в Эпле, но и по адресу в Аоле. Слева — выбор между этими вариантами. Им визуально соответствуют два поля. У меня Эпл, я ввожу электронную почту в первое поле и нажимаю ↵
Но справа от Аола вдруг появляется красная стрелка и указывает мне на второе поле: «Аол‑то сюда введи, э». Но у меня нет Аола! Оказывается, второе поле — это пароль от Эпла. Красная стрелка указывает на поле и не имеет отношения к Аолу.
В следующей версии радиогруппу отодвинули подальше от полей. Пароль стал ближе к электронной почте, чем к Аолу, но ощущение соответствия полей радиокнопкам осталось из‑за горизонтального выравнивания.
Если сломать сбивающие с толку связи, проблема исчезает. Теперь, правда, хочется переверстать всё окно, чтобы оно стало красивым.
Так выглядела форма входа с паролем в старом Айтюнсе. Можно было войти не только по адресу, зарегистрированному в Эпле, но и по адресу в Аоле. Слева — выбор между этими вариантами. Им визуально соответствуют два поля. У меня Эпл, я ввожу электронную почту в первое поле и нажимаю ↵
Но справа от Аола вдруг появляется красная стрелка и указывает мне на второе поле: «Аол‑то сюда введи, э». Но у меня нет Аола! Оказывается, второе поле — это пароль от Эпла. Красная стрелка указывает на поле и не имеет отношения к Аолу.
В следующей версии радиогруппу отодвинули подальше от полей. Пароль стал ближе к электронной почте, чем к Аолу, но ощущение соответствия полей радиокнопкам осталось из‑за горизонтального выравнивания.
Если сломать сбивающие с толку связи, проблема исчезает. Теперь, правда, хочется переверстать всё окно, чтобы оно стало красивым.
Офисная мебель — по размеру офиса
Кабинеты — по производителям
Офисные кресла — по стоимости
А также у нас есть — мы нашли
Бездумное подчинение сетке приводит к проблемам со смыслом. Когда соседние этажи выровнены по колонкам, читатель пытается их сопоставить.
Простое правило хорошей вёрстки — не повторять ритм на соседних этажах.
Артём Горбунов. Типографика и вёрстка. Глава «Страницы»
Офисная мебель — по размеру офиса
Кабинеты — по производителям
Офисные кресла — по стоимости
А также у нас есть — мы нашли
Бездумное подчинение сетке приводит к проблемам со смыслом. Когда соседние этажи выровнены по колонкам, читатель пытается их сопоставить.
Простое правило хорошей вёрстки — не повторять ритм на соседних этажах.
Артём Горбунов. Типографика и вёрстка. Глава «Страницы»
Близость — это не только расстояние и выравнивание.
В нашем восприятии «притягиваются» объекты с большой визуальной массой. На трассе
Партия «Справедливая Россия», кажется, выступает за обман.
Близость — это не только расстояние и выравнивание.
В нашем восприятии «притягиваются» объекты с большой визуальной массой. На трассе
Партия «Справедливая Россия», кажется, выступает за обман.
Из‑за похожих цвета и формы настройка уведомлений кажется связанной с кнопкой закрытия окна.
Числа ретвитов и лайков связались в одно —
Из‑за похожих цвета и формы настройка уведомлений кажется связанной с кнопкой закрытия окна.
Числа ретвитов и лайков связались в одно —
Фиттс провёл эксперимент. На доске размещены две чувствительные полоски — мишени. При касании специальным пером одной из этих полосок фиксируется «попадание в цель». Участник эксперимента быстро поочерёдно касается пером то одной, то второй полоски. Изменяя расстояние между полосками и ширину каждой из них и замеряя время, Фиттс вывел зависимость:
Это и есть закон Фиттса. Он связывает расстояние до объекта, размер объекта и время прицеливания в одномерном пространстве.
Нас интересует приложение закона к интерфейсам, где человек прицеливается к объектам на двухмерном экране. Форма объектов и тот факт, что человек движется к цели не по прямой, несколько усложняют закон, но для нас важно интуитивное определение: чем дальше объект, тем больше время прицеливания; чем больше объект, тем меньше время прицеливания.
Было установлено, что закон работает независимо от условий движения: выполняется ли оно непосредственно или с помощью манипулятора; рукой или ногой; ребёнком или стариком.
Пол Фиттс (1912—1965) работал психологом в Университете штата Огайо, а затем в Мичиганском университете. Разработал и опубликовал в 1954 году модель быстрого прицельного движения человека. До работы в университете Фиттс служил в ВВС США. В конце второй мировой войны изучал человеческий фактор в авиации, и считается одним из пионеров в повышении безопасности
Фиттс провёл эксперимент. На доске размещены две чувствительные полоски — мишени. При касании специальным пером одной из этих полосок фиксируется «попадание в цель». Участник эксперимента быстро поочерёдно касается пером то одной, то второй полоски. Изменяя расстояние между полосками и ширину каждой из них и замеряя время, Фиттс вывел зависимость:
Это и есть закон Фиттса. Он связывает расстояние до объекта, размер объекта и время прицеливания в одномерном пространстве.
Нас интересует приложение закона к интерфейсам, где человек прицеливается к объектам на двухмерном экране. Форма объектов и тот факт, что человек движется к цели не по прямой, несколько усложняют закон, но для нас важно интуитивное определение: чем дальше объект, тем больше время прицеливания; чем больше объект, тем меньше время прицеливания.
Было установлено, что закон работает независимо от условий движения: выполняется ли оно непосредственно или с помощью манипулятора; рукой или ногой; ребёнком или стариком.
Пол Фиттс (1912—1965) работал психологом в Университете штата Огайо, а затем в Мичиганском университете. Разработал и опубликовал в 1954 году модель быстрого прицельного движения человека. До работы в университете Фиттс служил в ВВС США. В конце второй мировой войны изучал человеческий фактор в авиации, и считается одним из пионеров в повышении безопасности
Разберём следствия закона Фиттса.
Мелко
Достаточно
Опасно
В большие кнопки легче попасть. Но слишком большие кнопки не очень полезны: зависимость логарифмическая, то есть чем больше увеличиваем, тем меньше эффект.
Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную
Хорошо отделять дополнительным расстоянием опасные кнопки и ссылки, иначе будет слишком легко попасть не в ту.
Разберём следствия закона Фиттса.
Мелко
Достаточно
В большие кнопки легче попасть. Но слишком большие кнопки не очень полезны: зависимость логарифмическая, то есть чем больше увеличиваем, тем меньше эффект.
Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную
Опасно
Хорошо отделять дополнительным расстоянием опасные кнопки и ссылки, иначе будет слишком легко попасть не в ту.
Перевод из кошелька
Предоплаченные
пластиковые карты
Наличный перевод
Зачисление из других
платёжных систем
Наличный платёж
через терминал
Когда ссылки в списке не отделены расстоянием, легко случайно промахнуться. Кроме того, список трудно читать.
Если расстояния увеличить сверх стандартного интерлиньяжа, решаются обе проблемы.
Перевод из кошелька
Предоплаченные
пластиковые карты
Наличный перевод
Зачисление из других
платёжных систем
Когда ссылки в списке не отделены расстоянием, легко случайно промахнуться. Кроме того, список трудно читать.
Если расстояния увеличить сверх стандартного интерлиньяжа, решаются обе проблемы.
Иногда желание увеличить элемент вступает в противоречие с требованием занять им как можно меньше места на экране. Тогда достаточно увеличить не сам объект, а лишь область нажатия.
Чёрные точки
Интерфейс электронного киоска в торговом центре «Мега», Москва
Интерфейс электронного киоска в торговом центре «Мега», Москва
Иногда желание увеличить элемент вступает в противоречие с требованием занять им как можно меньше места на экране. Тогда достаточно увеличить не сам объект, а лишь область нажатия.
Чёрные точки
Плохо
Хорошо
Плохо
Хорошо
Пункты меню операционных систем нажимаются на всей ширине строки, в том числе там, где уже нет текста. Полезно повторять то же поведение в меню на сайтах. Обратная связь в виде подсветки дополнительно помогает прицеливанию.
На сайтах приходится отдельно заботиться о том, чтобы нажималась подпись к радиокнопке или чекбоксу, а не только они сами.
Плохо
Хорошо
Пункты меню операционных систем нажимаются на всей ширине строки, в том числе там, где уже нет текста. Полезно повторять то же поведение в меню на сайтах. Обратная связь в виде подсветки дополнительно помогает прицеливанию.
Плохо
Хорошо
На сайтах приходится отдельно заботиться о том, чтобы нажималась подпись к радиокнопке или чекбоксу, а не только они сами.
Айфон увеличивает области нажатия ссылок в браузере. Если открыть неадаптированную к мобильному экрану страницу, нажатие микроскопической ссылки среди текста работает безотказно.
Даже если несколько мелких ссылок оказываются рядом, чаще всего удаётся попасть в нужную с первого раза. По всей видимости, области нажатия смещаются так, чтобы быть соразмерными пальцу и не пересекаться.
Айфон увеличивает области нажатия ссылок в браузере. Если открыть неадаптированную к мобильному экрану страницу, нажатие микроскопической ссылки среди текста работает безотказно.
Даже если несколько мелких ссылок оказываются рядом, чаще всего удаётся попасть в нужную с первого раза. По всей видимости, области нажатия смещаются так, чтобы быть соразмерными пальцу и не пересекаться.
Клавиатура Айфона динамически подстраивает размеры кнопок на клавиатуре так, чтобы было легче написать существующее слово, чем сделать опечатку. Внешне клавиатура при этом не изменяется.
Видео с сайта «Эпл», 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 повторяется слишком часто.
У каждого товара в каталоге интернет‑магазина «Корзиночка» была указана цена и повторялась кнопка «Купить». При редизайне цену товара поставили на кнопку вместо слова «Купить». Как это сказалось на информативности?
Информативность повысилась, ведь теперь название кнопки сообщает полезную информацию, а то, что кнопка с ценой означает «Купить», пользователь, скорее всего, догадается. Но новичок может и не догадаться!
Как повысить информативность таблицы истории заказов?
Эта таблица неинформативна: все заказы на одно лицо, и чтобы хоть что‑то узнать, их нужно открывать. Информативность понизится, если убрать номер, ведь это хоть какая‑то информация. Надо показать содержимое заказов и убрать все повторы: перенести ссылку на номер и вынести за скобки статус.
При наведении на сноску в Википедии всплывают такие пояснения. Какая тут проблема?
Всплывающий элемент помешает нажать на закрытые им ссылки. А если бы была ещё и кнопка «Закрыть подсказку», это было бы наказанием за неосторожные движения.
Что не так с «правилом семи элементов»?
Исследование Джорджа Миллера, из которого возник миф о семи элементов, не имеет отношения к дизайну интерфейса, о чём говорил и сам Миллер. Исследование не говорит о количестве пунктов меню, и его невозможно «соблюдать».
В челябинском почтовом отделении № 80 работает электронная очередь. У входа стоит машинка с единственной кнопкой. Нажимаешь кнопку, и через две секунды на чековой ленте печатается номерок.
Эти две секунды — целая вечность. Многие решают, что кнопка не сработала, и жмут ещё раз. Рядом с машинкой всегда валяются «лишние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажатие — издавала звук или мигала лампочкой — такой проблемы бы не было.
В челябинском почтовом отделении № 80 работает электронная очередь. У входа стоит машинка с единственной кнопкой. Нажимаешь кнопку, и через две секунды на чековой ленте печатается номерок.
Эти две секунды — целая вечность. Многие решают, что кнопка не сработала, и жмут ещё раз. Рядом с машинкой всегда валяются «лишние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажатие — издавала звук или мигала лампочкой — такой проблемы бы не было.
Действия пользователя должны вызывать в интерфейсе адекватную и заметную реакцию — обратную связь.
Кнопка на экране нажимается при клике. Курсор мыши при наведении на ссылку превращается
,
Компьютер заменяет символы пароля точками.
Чтобы скрыть пароль, достаточно было бы просто ничего не выводить, как это происходит в командной строке.
Но появляющиеся по мере ввода точки говорят пользователю, что символы вводятся, программа не зависла.
Обратная связь при вводе пароля
Нет обратной связи
Обратная связь при вводе пароля
Нет обратной связи
Действия пользователя должны вызывать в интерфейсе адекватную и заметную реакцию — обратную связь.
Кнопка на экране нажимается при клике. Курсор мыши при наведении на ссылку превращается
,
Компьютер заменяет символы пароля точками.
Чтобы скрыть пароль, достаточно было бы просто ничего не выводить, как это происходит в командной строке.
Но появляющиеся по мере ввода точки говорят пользователю, что символы вводятся, программа не зависла.
Интернет‑магазин «Самсунга» одним из первых научился добавлять товары в корзину без перезагрузки страницы. Но если сделать это «молча», человек пару раз нажмёт кнопку, решит, что сайт не работает, и уйдёт, оставив в корзине два холодильника.
Обратная связь помогает убедиться, что кнопка сработала. Поэтому добавление сопровождалось реакцией со стороны кнопки и изменением подписи.
Интернет‑магазин «Самсунга» одним из первых научился добавлять товары в корзину без перезагрузки страницы. Но если сделать это «молча», человек пару раз нажмёт кнопку, решит, что сайт не работает, и уйдёт, оставив в корзине два холодильника.
Обратная связь помогает убедиться, что кнопка сработала. Поэтому добавление сопровождалось реакцией со стороны кнопки и изменением подписи.
С помощью анимации компьютер показывает, что работает. Без неё пользователь мог бы не дождаться завершения длительной операции, решив, что компьютер завис.
В однозадачной среде анимация была частью цикла работы программы. Если программа висла, «вращение» прекращалось, и пользователь нажимал «Ресет».
С помощью анимации компьютер показывает, что работает. Без неё пользователь мог бы не дождаться завершения длительной операции, решив, что компьютер завис.
В однозадачной среде анимация была частью цикла работы программы. Если программа висла, «вращение» прекращалось, и пользователь нажимал «Ресет».
Крутилку используют, когда невозможно показать степень завершённости процесса или он достаточно короткий, и более детальное представление не имеет смысла.
В современных системах за анимацию отвечает отдельный, параллельно выполняемый код. Анимация может продолжаться, когда реальный процесс уже завис. Но информация о зависании — лишь побочная функция. Главное, она говорит: «подожди».
При загрузке Айфона никакой анимации нет, просто в центре экрана нарисовано яблоко:
Вероятно, Эпл позволил себе такое решение, потому что исправный телефон загружается за стандартное время, да и пользователь всё равно никак не может вмешаться в этот процесс. Но это противоречит требованию обратной связи в интерфейсе.
Крутилку используют, когда невозможно показать степень завершённости процесса или он достаточно короткий, и более детальное представление не имеет смысла.
В современных системах за анимацию отвечает отдельный, параллельно выполняемый код. Анимация может продолжаться, когда реальный процесс уже завис. Но информация о зависании — лишь побочная функция. Главное, она говорит: «подожди».
При загрузке Айфона никакой анимации нет, просто в центре экрана нарисовано яблоко:
Вероятно, Эпл позволил себе такое решение, потому что исправный телефон загружается за стандартное время, да и пользователь всё равно никак не может вмешаться в этот процесс. Но это противоречит требованию обратной связи в интерфейсе.
Виндоус 95
Для отображения степени завершённости используют прогрессбары.
В Виндоусе 95 прогрессбар был разделён на сегменты. Если прогресс надолго замирал на одном сегменте, о движении оставалось судить по анимации.
Макос Леопард, 2007
Движение непрерывного заливающегося прогрессбара проще заметить — не нужно дожидаться, пока прогресса хватит на очередной сегмент. Но в случае особой медлительности о прогрессе помогает судить «водичка». Приятная деталь: она течёт налево, и при взгляде на неподвижный правый край залитой части, кажется, что она сдвигается.
Полезно также показать оставшееся до конца процесса время.
Виндоус 95
Для отображения степени завершённости используют прогрессбары.
В Виндоусе 95 прогрессбар был разделён на сегменты. Если прогресс надолго замирал на одном сегменте, о движении оставалось судить по анимации.
Макос Леопард, 2007
Движение непрерывного заливающегося прогрессбара проще заметить — не нужно дожидаться, пока прогресса хватит на очередной сегмент. Но в случае особой медлительности о прогрессе помогает судить «водичка». Приятная деталь: она течёт налево, и при взгляде на неподвижный правый край залитой части, кажется, что она сдвигается.
Полезно также показать оставшееся до конца процесса время.
Айтюнс
Айфон
Компактный родственник прогрессбара — закрашивающаяся окружность или круг. Айтюнс так показывает скачивание песен, Айфон — установку приложений.
Айтюнс
Компактный родственник прогрессбара — закрашивающаяся окружность или круг. Айтюнс так показывает скачивание песен, Айфон — установку приложений.
Айфон
Обратная связь не должна быть слишком грубой. Если каждое добавление в корзину сопровождать появлением диалогового окна, покупателю это быстро надоест.
Это окно Фотошопа, которое мы обсуждали в главе «Привычка», похоже на наказание. Достаточно сообщить о произошедшем в строке состояния, и не требовать нажатия кнопки OK.
Привычка 25
Обратная связь не должна быть слишком грубой. Если каждое добавление в корзину сопровождать появлением диалогового окна, покупателю это быстро надоест.
Это окно Фотошопа, которое мы обсуждали в главе «Привычка», похоже на наказание. Достаточно сообщить о произошедшем в строке состояния, и не требовать нажатия кнопки OK.
Привычка 25
Когда пользователь ошибается в пароле, Эгея не выводит сообщение об ошибке, а просто «покачивает» полем ввода, как бы говоря «нет». Курсор остаётся в поле, исправить ошибку легко.
Движок блога «Эгея»
Когда пользователь ошибается в пароле, Эгея не выводит сообщение об ошибке, а просто «покачивает» полем ввода, как бы говоря «нет». Курсор остаётся в поле, исправить ошибку легко.
Движок блога «Эгея»
При перетаскивании мышью Мак выделяет области, в которых можно «бросить» объект. Отсутствие выделения означает невозможность перетаскивания в текущую точку.
Виндоус при невозможности перетаскивания показывает кукиш в виде зачёркнутого курсора:
При перетаскивании мышью Мак выделяет области, в которых можно «бросить» объект. Отсутствие выделения означает невозможность перетаскивания в текущую точку.
Виндоус при невозможности перетаскивания показывает кукиш в виде зачёркнутого курсора:
Обратная связь иногда сводится к сообщению: «не вышло». Какой нежной её ни делай, она будет раздражать несвоевременностью: лишь после действия узнаёшь о его бессмысленности или ошибочности. Хороший интерфейс предотвращает такие действия.
Если кнопка не может быть нажата по какой‑то причине, она должна быть отключена. Веб‑страница не должна содержать ссылок на саму себя.
Обратная связь иногда сводится к сообщению: «не вышло». Какой нежной её ни делай, она будет раздражать несвоевременностью: лишь после действия узнаёшь о его бессмысленности или ошибочности. Хороший интерфейс предотвращает такие действия.
Если кнопка не может быть нажата по какой‑то причине, она должна быть отключена. Веб‑страница не должна содержать ссылок на саму себя.
Обычно когда в отправляемой форме не заполнены обязательные поля, выводят сообщение об ошибке.
В простой форме достаточно отключать кнопку отправки до заполнения.
См. также:
Формы 341
Обычно когда в отправляемой форме не заполнены обязательные поля, выводят сообщение об ошибке.
В простой форме достаточно отключать кнопку отправки до заполнения.
См. также:
Формы 341
Заставка при загрузке редактора «Ворд»
Люди не любят медленные программы. Но ощущение скорости зависит в первую очередь от качества обратной связи. Ускорить программу можно не всегда, но сделать, чтобы она казалась быстрее — почти всегда.
Если нельзя загрузить программу сразу, нужно показать хоть что‑нибудь. В простейшем случае это может быть заставка.
Заставка при загрузке редактора «Ворд»
Люди не любят медленные программы. Но ощущение скорости зависит в первую очередь от качества обратной связи. Ускорить программу можно не всегда, но сделать, чтобы она казалась быстрее — почти всегда.
Если нельзя загрузить программу сразу, нужно показать хоть что‑нибудь. В простейшем случае это может быть заставка.
Терминалу оплаты для выполнения команды нужно связаться с сервером по медленному интернету. Но он мгновенно отвечает на команду «Далее» хотя бы тем, что показывает индикатор загрузки.
Работа студента‑дизайнера
Терминалу оплаты для выполнения команды нужно связаться с сервером по медленному интернету. Но он мгновенно отвечает на команду «Далее» хотя бы тем, что показывает индикатор загрузки.
Работа студента‑дизайнера
Заставки и индикаторы загрузки дают мгновенную обратную связь, но заостряют внимание на ожидании. Чтобы сделать программу ещё быстрее в глазах пользователя, покажите заглушку.
Фейсбук показывает экран схематично, пока настоящие данные не подгрузились.
Инстаграм сначала показывает цветовые пятна фотографий.
При запуске приложения Айфон мгновенно показывал заранее заготовленный скриншот, а после загрузки заменял его на «живой» интерфейс. Казалось, что приложение открывалось без задержки.
Заглушка информативнее заставки: пока пользователь смотрит на неё, он понимает, как устроен экран и готовится к следующему действию.
Первым делом — обратная связь
Заставки и индикаторы загрузки дают мгновенную обратную связь, но заостряют внимание на ожидании. Чтобы сделать программу ещё быстрее в глазах пользователя, покажите заглушку.
Фейсбук показывает экран схематично, пока настоящие данные не подгрузились.
Инстаграм сначала показывает цветовые пятна фотографий.
При запуске приложения Айфон мгновенно показывал заранее заготовленный скриншот, а после загрузки заменял его на «живой» интерфейс. Казалось, что приложение открывалось без задержки.
Заглушка информативнее заставки: пока пользователь смотрит на неё, он понимает, как устроен экран и готовится к следующему действию.
Первым делом — обратная связь
Обратная связь не должна вводить пользователя в заблуждение. Иногда интерфейс преждевременно оптимистично рапортует о выполнении команды.
Из‑за такой ошибки в интерфейсе Издательства Бюро Горбунова случилась неприятная история. Один из читателей попросил прекратить его подписку. Сотрудник издательства нажал на кнопку «Отписать», и программа мгновенно подтвердила. Но оказалось, что в этот момент у него случился перебой интернета и команда не дошла до сервера. Пришлось извиняться перед читателем, когда в следующем месяце у него вновь списались деньги.
В почтовой программе Айфона звук отправленного письма сначала издавался, когда письмо в действительности уходило. В одной из версий это поведение изменилось: звук стал издаваться при нажатии кнопки «Отправить».
Стремление отреагировать на команду сразу совершенно верно, однако в этих случаях адекватной реакцией было бы отображение индикатора ожидания.
Обратная связь не должна вводить пользователя в заблуждение. Иногда интерфейс преждевременно оптимистично рапортует о выполнении команды.
Из‑за такой ошибки в интерфейсе Издательства Бюро Горбунова случилась неприятная история. Один из читателей попросил прекратить его подписку. Сотрудник издательства нажал на кнопку «Отписать», и программа мгновенно подтвердила. Но оказалось, что в этот момент у него случился перебой интернета и команда не дошла до сервера. Пришлось извиняться перед читателем, когда в следующем месяце у него вновь списались деньги.
В почтовой программе Айфона звук отправленного письма сначала издавался, когда письмо в действительности уходило. В одной из версий это поведение изменилось: звук стал издаваться при нажатии кнопки «Отправить».
Стремление отреагировать на команду сразу совершенно верно, однако в этих случаях адекватной реакцией было бы отображение индикатора ожидания.
Если команда только принята, но ещё не выполнена, разумно показывать индикатор загрузки. Но на часах такой индикатор вынуждает человека держать руку в подвешенном положении.
Поэтому Эпл рекомендует мгновенно отвечать «Принято!», как бы разрешая человеку опустить руку и вернуться к своим делам. Если в итоге команду выполнить не удастся, часы сообщат об этом отдельно.
Подобную индикацию можно рекомендовать везде, где длительное смотрение на экран неудобно или нежелательно, скажем, в автомобильном навигаторе.
Мгновенно, но без обмана
Из презентации «Эпла»
Из презентации «Эпла»
Если команда только принята, но ещё не выполнена, разумно показывать индикатор загрузки. Но на часах такой индикатор вынуждает человека держать руку в подвешенном положении.
Поэтому Эпл рекомендует мгновенно отвечать «Принято!», как бы разрешая человеку опустить руку и вернуться к своим делам. Если в итоге команду выполнить не удастся, часы сообщат об этом отдельно.
Подобную индикацию можно рекомендовать везде, где длительное смотрение на экран неудобно или нежелательно, скажем, в автомобильном навигаторе.
Мгновенно, но без обмана
Иллюзия плавного масштабирования в старой версии карт Гугля
Иллюзия плавного масштабирования в старой версии карт Гугля
Иллюзия плавного масштабирования в старой версии карт Гугля
Иллюзия плавного масштабирования в старой версии карт Гугля
Хороший интерфейс даёт мгновенную и непрерывную обратную связь.
Для масштабирования старых растровых карт Гугля использовался дискретный ползунок (слайдер), но интерфейс создавал иллюзию плавного масштабирования. Во‑первых, плавно (хотя и с низким качеством) масштабировался исходный кусок карты. Во‑вторых, самому ползунку было позволено двигаться плавно.
Когда пользователь отпускал ползунок, тот прибивался к ближайшей риске. Пользователь этого не замечал, потому что ориентировался не на ползунок, а на масштабируемую — мгновенно и непрерывно — картинку. Если бы карта не масштабировалась на лету, приходилось бы вслепую угадывать нужную риску и получать непредсказуемый результат.
Иллюзия плавного масштабирования в старой версии карт Гугля
Иллюзия плавного масштабирования в старой версии карт Гугля
Иллюзия плавного масштабирования в старой версии карт Гугля
Иллюзия плавного масштабирования в старой версии карт Гугля
Хороший интерфейс даёт мгновенную и непрерывную обратную связь.
Для масштабирования старых растровых карт Гугля использовался дискретный ползунок (слайдер), но интерфейс создавал иллюзию плавного масштабирования. Во‑первых, плавно (хотя и с низким качеством) масштабировался исходный кусок карты. Во‑вторых, самому ползунку было позволено двигаться плавно.
Когда пользователь отпускал ползунок, тот прибивался к ближайшей риске. Пользователь этого не замечал, потому что ориентировался не на ползунок, а на масштабируемую — мгновенно и непрерывно — картинку. Если бы карта не масштабировалась на лету, приходилось бы вслепую угадывать нужную риску и получать непредсказуемый результат.
Требование непрерывности — более сильное, чем требование мгновенности. Непрерывная мгновенная обратная связь даётся не в момент окончательной установки значения параметра, а непосредственно и постоянно в процессе его изменения.
Старым компьютерам не хватало скорости, чтобы непрерывно перерисовывать окно во время его перетаскивания. Чтобы пользователь видел, где окно окажется после отпускания кнопки мыши, операционные системы двигали только рамку.
Обратите внимание, что пиксели рамки становятся красными над голубым блокнотом и синими над жёлтым телефоном. Инверсия пикселей экономила память: не нужно было никуда сохранять пиксели, закрытые рамкой. Заодно рамка оказывалась гарантированно видимой на любом фоне. А благодаря размещению пикселей в шахматном порядке создавалось ощущение прозрачности этой рамки.
Если по мере движения невозможно отображать точный результат, показывайте приближённый.
Перетаскивание окна в Виндоусе 3.1, 1990
Перетаскивание окна в Виндоусе 3.1, 1990
Требование непрерывности — более сильное, чем требование мгновенности. Непрерывная мгновенная обратная связь даётся не в момент окончательной установки значения параметра, а непосредственно и постоянно в процессе его изменения.
Старым компьютерам не хватало скорости, чтобы непрерывно перерисовывать окно во время его перетаскивания. Чтобы пользователь видел, где окно окажется после отпускания кнопки мыши, операционные системы двигали только рамку.
Обратите внимание, что пиксели рамки становятся красными над голубым блокнотом и синими над жёлтым телефоном. Инверсия пикселей экономила память: не нужно было никуда сохранять пиксели, закрытые рамкой. Заодно рамка оказывалась гарантированно видимой на любом фоне. А благодаря размещению пикселей в шахматном порядке создавалось ощущение прозрачности этой рамки.
Если по мере движения невозможно отображать точный результат, показывайте приближённый.
Ползунок — универсальный элемент, который даёт мгновенную и непрерывную обратную связь. Двигая ползунок, человек в реальном времени наблюдает за изменениями.
Фотошоп показывает, как сработает эффект, ещё до того, как отпустишь кнопку мыши, и тем более до того, как нажмёшь OK.
Ползунок особенно хорош, когда есть диапазон значений — масштаба, громкости, цены — для подбора. С точки зрения обратной связи полоса прокрутки — тоже ползунок; требования мгновенности и непрерывности к ней те же.
Прокрутка 182
Ползунок — универсальный элемент, который даёт мгновенную и непрерывную обратную связь. Двигая ползунок, человек в реальном времени наблюдает за изменениями.
Фотошоп показывает, как сработает эффект, ещё до того, как отпустишь кнопку мыши, и тем более до того, как нажмёшь OK.
Ползунок особенно хорош, когда есть диапазон значений — масштаба, громкости, цены — для подбора. С точки зрения обратной связи полоса прокрутки — тоже ползунок; требования мгновенности и непрерывности к ней те же.
Прокрутка 182
Онлайн‑калькуляторы кредитных платежей или тарифов связи иногда делают в виде формы с числовыми полями и кнопкой «Рассчитать». Человек должен ответить на несколько вопросов, прежде чем увидеть результат.
Слово «калькулятор» направляет дизайнеров на ложный путь. На самом деле человеку нужно не рассчитать конкретное значение, а разобраться в многомерном мире вариантов, понять взаимосвязь величин, оценить влияние каждой на результат. Интерфейс с полями такой возможности не даёт.
Онлайн‑калькуляторы кредитных платежей или тарифов связи иногда делают в виде формы с числовыми полями и кнопкой «Рассчитать». Человек должен ответить на несколько вопросов, прежде чем увидеть результат.
Слово «калькулятор» направляет дизайнеров на ложный путь. На самом деле человеку нужно не рассчитать конкретное значение, а разобраться в многомерном мире вариантов, понять взаимосвязь величин, оценить влияние каждой на результат. Интерфейс с полями такой возможности не даёт.
Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)
Этот польский банк догадался использовать ползунки и пересчитывать результаты «на лету». Диапазоны допустимых значений одних величин меняются при изменении других — так человек может увидеть, что по условиям банка чем старше автомобиль, тем на меньшее число платежей можно разбить погашение кредита. Без мгновенной обратной связи увидеть это было бы сложно.
Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)
Этот польский банк догадался использовать ползунки и пересчитывать результаты «на лету». Диапазоны допустимых значений одних величин меняются при изменении других — так человек может увидеть, что по условиям банка чем старше автомобиль, тем на меньшее число платежей можно разбить погашение кредита. Без мгновенной обратной связи увидеть это было бы сложно.
Калькулятор вкладов «Связного банка» сочетает удобство ползунков с точностью числовых полей. Если клиент хочет рассчитать итоговую сумму конкретного вклада, он вводит параметры в текстовые поля, расположенные «внутри» ползунков.
Ползунок превращается в поле при клике
Калькулятор вкладов «Связного банка» сочетает удобство ползунков с точностью числовых полей. Если клиент хочет рассчитать итоговую сумму конкретного вклада, он вводит параметры в текстовые поля, расположенные «внутри» ползунков.
Ползунок превращается в поле при клике
Интерактивная статья в «Нью‑Йорк‑Таймсе» объясняет, когда выгоднее покупать, а когда — арендовать жильё.
Читатель выбирает стоимость дома, в котором хочет жить — скажем, 250 тысяч долларов. Справа отображается максимальная стоимость аренды — 884 доллара в месяц. Если аренда дороже, то выгоднее купить.
Но это из расчёта, что жить в этом доме ты будешь 9 лет, ипотечная ставка 3,67 %, а цена дома, налоги и коммунальные платежи будут меняться так‑то.
Любую из переменных можно менять, и одновременно будет меняться максимальная цена аренды.
Информативность каждого ползунка увеличена наложением на него диаграммы значений максимальной арендной ставки, которые будут получаться при его перемещении.
Инфляция влияет на результат слабее, чем налог на имущество.
Информативность 126
Если бы статью сделали в виде традиционной формы ввода, никто не дошёл бы до её конца. И причина не только в нежелании заполнять такую простыню. Просто непонятно, как заполнить «рост цены аренды» или ту же инфляцию. Откуда ж я знаю, какая она будет!
Благодаря ползункам статья позволяет получить объёмное представление о том, какие аспекты как влияют на результат, и принять осмысленное решение.
На сайте «Нью‑Йорк‑Таймса»:
Лучше арендовать или купить?
Интерактивная статья в «Нью‑Йорк‑Таймсе» объясняет, когда выгоднее покупать, а когда — арендовать жильё.
Читатель выбирает стоимость дома, в котором хочет жить — скажем, 250 тысяч долларов. Справа отображается максимальная стоимость аренды — 884 доллара в месяц. Если аренда дороже, то выгоднее купить.
Но это из расчёта, что жить в этом доме ты будешь 9 лет, ипотечная ставка 3,67 %, а цена дома, налоги и коммунальные платежи будут меняться так‑то.
Любую из переменных можно менять, и одновременно будет меняться максимальная цена аренды.
Информативность каждого ползунка увеличена наложением на него диаграммы значений максимальной арендной ставки, которые будут получаться при его перемещении.
Инфляция влияет на результат слабее, чем налог на имущество.
Информативность 126
Если бы статью сделали в виде традиционной формы ввода, никто не дошёл бы до её конца. И причина не только в нежелании заполнять такую простыню. Просто непонятно, как заполнить «рост цены аренды» или ту же инфляцию. Откуда ж я знаю, какая она будет!
Благодаря ползункам статья позволяет получить объёмное представление о том, какие аспекты как влияют на результат, и принять осмысленное решение.
На сайте «Нью‑Йорк‑Таймса»:
Лучше арендовать или купить?
Памяти первых моделей Айфона не хватало на хранение открытой в браузере страницы, и при прокрутке требовалось время для прорисовки. Как показывать страницу приближённо?
Оказалось, можно буквально «никак». Непрорисованная часть страницы отображалась шахматным узором, как прозрачность в Фотошопе, но приезжала точно в соответствии с движением пальца пользователя.
Изображение появлялось через долю секунды.
Если бы движения страницы отставали от пальца на эту долю секуды, телефон казался бы тормозным.
Непрерывная интерфейсная реакция на действия пользователя имеет наивысший приоритет. Этот принцип составлял решающую разницу между Айфоном и остальными устройствами, и это было одним из главных прорывов в его интерфейсе.
Памяти первых моделей Айфона не хватало на хранение открытой в браузере страницы, и при прокрутке требовалось время для прорисовки. Как показывать страницу приближённо?
Оказалось, можно буквально «никак». Непрорисованная часть страницы отображалась шахматным узором, как прозрачность в Фотошопе, но приезжала точно в соответствии с движением пальца пользователя.
Изображение появлялось через долю секунды.
Если бы движения страницы отставали от пальца на эту долю секуды, телефон казался бы тормозным.
Непрерывная интерфейсная реакция на действия пользователя имеет наивысший приоритет. Этот принцип составлял решающую разницу между Айфоном и остальными устройствами, и это было одним из главных прорывов в его интерфейсе.
Одна из первых игр на Айфоне: нужно было докатить шарик до самой дальней дырки, не уронив в другие по пути
Прокрутка на Айфоне даёт мгновенную и непрерывную обратную связь. Но ещё она воспроизводит физику из реальной жизни: страницы обладают инерцией и даже «отпружинивают» у краёв. Создаётся иллюзия непосредственного взаимодействия с элементами на экране. Пользователь перестаёт воспринимать экран как устройство ввода, посредством которого он даёт странице команду прокрутиться — он просто проматывает её пальцем.
Игра с катанием шарика по лабиринту производила на всех большое впечатление, несмотря на посредственную графику. Ты не управлял игрой, наклоняя телефон в разные стороны, а просто катал шарик по лабиринту.
Одна из первых игр на Айфоне: нужно было докатить шарик до самой дальней дырки, не уронив в другие по пути
Прокрутка на Айфоне даёт мгновенную и непрерывную обратную связь. Но ещё она воспроизводит физику из реальной жизни: страницы обладают инерцией и даже «отпружинивают» у краёв. Создаётся иллюзия непосредственного взаимодействия с элементами на экране. Пользователь перестаёт воспринимать экран как устройство ввода, посредством которого он даёт странице команду прокрутиться — он просто проматывает её пальцем.
Игра с катанием шарика по лабиринту производила на всех большое впечатление, несмотря на посредственную графику. Ты не управлял игрой, наклоняя телефон в разные стороны, а просто катал шарик по лабиринту.
При листании содержимое разбивают на страницы и перемещаются между ними с помощью специальных жестов или экранных элементов. Такие элементы называют листалками.
В классической листалке результатов поиска Яндекса каждый отдельный номер малоинформативен, но вместе они дают представление о количестве результатов. Многоточие показывает, что страниц больше десяти.
В современной версии непонятно, куда поведёт «дальше» — на вторую или шестую страницу. Но цифры имеют большие области нажатия, что хорошо с точки зрения закона Фиттса.
До 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 году. Тогда же на Мак пришли инерция и пружинистость. А спустя несколько лет появилась и возможность изменить направление прокрутки с обратного на прямое, чтобы управлять движением содержимого, а не лифта — как на Айфоне.
Лифт в шахте полосы прокрутки показывает, какую долю документа мы видим на экране. Полоса прокрутки — условное представление длины документа.
«Инфоскроллер» повышает информативность полосы прокрутки, символически представляя ещё и содержимое документа: текст, заголовки, рисунки, таблицы.
Информативность 126
Лифт в шахте полосы прокрутки показывает, какую долю документа мы видим на экране. Полоса прокрутки — условное представление длины документа.
«Инфоскроллер» повышает информативность полосы прокрутки, символически представляя ещё и содержимое документа: текст, заголовки, рисунки, таблицы.
Информативность 126
В «Договорах» цветные метки показывают рискованные формулировки.
В «Хроме» жёлтые метки показывают результаты поиска.
Сервис «Договоры»
Хром
Сервис «Договоры»
Хром
В «Договорах» цветные метки показывают рискованные формулировки.
В «Хроме» жёлтые метки показывают результаты поиска.
В адресной книге Айфона на месте лифта прокрутки — алфавит. Выводятся все буквы, даже если на какую‑то имён нет.
В адресной книге Айфона на месте лифта прокрутки — алфавит. Выводятся все буквы, даже если на какую‑то имён нет.
Предельный вариант реализации информативной полосы прокрутки — превратить её в уменьшенную копию самого документа.
Здесь сама зона с уменьшенным документом тоже прокручивается, но медленнее основной области.
Редактор кода «Сублайм‑текст»
Предельный вариант реализации информативной полосы прокрутки — превратить её в уменьшенную копию самого документа.
Здесь сама зона с уменьшенным документом тоже прокручивается, но медленнее основной области.
Редактор кода «Сублайм‑текст»
Если сделать информативную прокрутку ещё и двухмерной, получится навигатор Фотошопа.
Если сделать информативную прокрутку ещё и двухмерной, получится навигатор Фотошопа.
При прокрутке отдельные элементы интерфейса «закрепляют» на экране или видоизменяют в зависимости от положения основного содержимого.
В этой книге закладка и лупа остаются в поле зрения, когда текст в развороте прокручивается. Прокруткой управляется трёхмерная анимация открытия этой книги.
Через разную скорость прокрутки разных элементов передают их расстояние от пользователя, добавляя ощущение объёма.
Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.
При прокрутке отдельные элементы интерфейса «закрепляют» на экране или видоизменяют в зависимости от положения основного содержимого.
В этой книге закладка и лупа остаются в поле зрения, когда текст в развороте прокручивается. Прокруткой управляется трёхмерная анимация открытия этой книги.
Через разную скорость прокрутки разных элементов передают их расстояние от пользователя, добавляя ощущение объёма.
Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.
На сайте правил русского языка впервые было реализовано «скукоживание» шапки: при прокрутке шапка закрепляется на экране, но при этом сильно уменьшается в размере, оставляя максимум места содержимому.
Сайт правил русского языка. При прокрутке шапка закрепляется и уменьшается в размере
Сайт правил русского языка. При прокрутке шапка закрепляется и уменьшается в размере
На сайте правил русского языка впервые было реализовано «скукоживание» шапки: при прокрутке шапка закрепляется на экране, но при этом сильно уменьшается в размере, оставляя максимум места содержимому.
Самое важное при прокрутке — постоянная обратная связь. Cтрашным преступлением является перехват жеста прокрутки и замена реакции на дискретное листание при преодолении пороговых значений. Работает это так: человек пытается прокручивать страницу, но ничего не происходит. А после прохождения определённой точки содержимое вдруг с собственной скоростью прокручивается ровно на один экран.
Страница «Мака Про» не прокручивается, а листается по вертикали
Страница «Мака Про» не прокручивается, а листается по вертикали
Самое важное при прокрутке — постоянная обратная связь. Cтрашным преступлением является перехват жеста прокрутки и замена реакции на дискретное листание при преодолении пороговых значений. Работает это так: человек пытается прокручивать страницу, но ничего не происходит. А после прохождения определённой точки содержимое вдруг с собственной скоростью прокручивается ровно на один экран.
Содержимое может подгружаться по мере прокрутки. Но хорошая реализация такой «бесконечной прокрутки» требует внимания.
Во‑первых, важно, чтобы размер лифта не прыгал, иначе он перестаёт быть индикатором размера содержимого. Если же содержимое безразмерно, и просмотр его целиком не имеет никакого смысла, полосы прокрутки лучше вообще скрыть.
Во‑вторых, новое содержимое надо подгружать не тогда, когда пользователь уже «упёрся» в нижнюю часть страницы, а несколько раньше, чтобы при нормальной скорости чтения содержимое «ждало читателя».
Содержимое может подгружаться по мере прокрутки. Но хорошая реализация такой «бесконечной прокрутки» требует внимания.
Во‑первых, важно, чтобы размер лифта не прыгал, иначе он перестаёт быть индикатором размера содержимого. Если же содержимое безразмерно, и просмотр его целиком не имеет никакого смысла, полосы прокрутки лучше вообще скрыть.
Во‑вторых, новое содержимое надо подгружать не тогда, когда пользователь уже «упёрся» в нижнюю часть страницы, а несколько раньше, чтобы при нормальной скорости чтения содержимое «ждало читателя».
Интерфейс прокрутки развивался, пока почти не исчез в Айфоне, превратившись в непосредственное взаимодействие с прокручиваемым содержимым. И дизайнеры стали думать в обратную сторону: как ещё использовать этот новый удобный жест.
В первом Айфоне уже была реализована идея скрытия элементов интерфейса при прокрутке.
Если в этом месте провести пальцем вверх, то вверх сдвинется не только страница, но за пределы экрана уедет и вся шапка окна. Сегодня такое поведение привычно, но для того времени это было изобретением. Обычным решением было бы добавление кнопки «Перейти в полноэкранный режим».
Интерфейс прокрутки развивался, пока почти не исчез в Айфоне, превратившись в непосредственное взаимодействие с прокручиваемым содержимым. И дизайнеры стали думать в обратную сторону: как ещё использовать этот новый удобный жест.
В первом Айфоне уже была реализована идея скрытия элементов интерфейса при прокрутке.
Если в этом месте провести пальцем вверх, то вверх сдвинется не только страница, но за пределы экрана уедет и вся шапка окна. Сегодня такое поведение привычно, но для того времени это было изобретением. Обычным решением было бы добавление кнопки «Перейти в полноэкранный режим».
В Айфоне листание реализовано как частный случай прокрутки. Когда вы листаете фотографии или страницы домашнего экрана, происходит то же, что при прокрутке — но с одним исключением: после отпускания пальца, содержимое «примагничивается» к дискретной позиции.
Поскольку пользователь ожидает, что достаточно быстрое движение и отпускание пальца сработает как прокрутка ровно на один экран, жест получается другим, чем если бы он стремился прокрутить ровно на один экран вручную. Такой жест называют «смахиванием».
Важно, что при смахивании обратная связь ни в какой момент не исчезает: пока я двигаю фотографию пальцем, она непрерывно следует за ним.
В последнее время распространилось ещё одно использование смахивания. Когда фотография открыта на весь экран, чтобы её закрыть, достаточно смахнуть её в любую сторону. При обычном прикосновении палец нужно отпустить в том же месте, где приложил, то есть жест требует хоть какой‑то аккуратности и прицельности. Смахивание проще.
В Айфоне листание реализовано как частный случай прокрутки. Когда вы листаете фотографии или страницы домашнего экрана, происходит то же, что при прокрутке — но с одним исключением: после отпускания пальца, содержимое «примагничивается» к дискретной позиции.
Поскольку пользователь ожидает, что достаточно быстрое движение и отпускание пальца сработает как прокрутка ровно на один экран, жест получается другим, чем если бы он стремился прокрутить ровно на один экран вручную. Такой жест называют «смахиванием».
Важно, что при смахивании обратная связь ни в какой момент не исчезает: пока я двигаю фотографию пальцем, она непрерывно следует за ним.
В последнее время распространилось ещё одно использование смахивания. Когда фотография открыта на весь экран, чтобы её закрыть, достаточно смахнуть её в любую сторону. При обычном прикосновении палец нужно отпустить в том же месте, где приложил, то есть жест требует хоть какой‑то аккуратности и прицельности. Смахивание проще.
Для прокрутки в часах Эпл кроме пальца используется колёсико, и это часто оказывается удобнее: во‑первых, не загораживаешь сам себе маленький экран, а во‑вторых физически ощущаешь движение.
Как и на Айфоне, листание здесь реализовано как частный случай прокрутки — с «примагничиванием» и постоянной обратной связью.
Для прокрутки в часах Эпл кроме пальца используется колёсико, и это часто оказывается удобнее: во‑первых, не загораживаешь сам себе маленький экран, а во‑вторых физически ощущаешь движение.
Как и на Айфоне, листание здесь реализовано как частный случай прокрутки — с «примагничиванием» и постоянной обратной связью.
В приложении «Твити» Лорен Брихтер придумал «оттяг» — жест, когда пользователь прокручивает ленту вниз дальше, чем в ней хватает содержимого, и тем самым инициирует его обновление.
Жест оказался настолько удачным, что через пару лет Эпл сделал его стандартным для любых обновляемых списков в Ай‑ОСе. Правда, реализация Эпла никогда не была настолько же опрятной, как у Лорена.
В приложении «Твити» Лорен Брихтер придумал «оттяг» — жест, когда пользователь прокручивает ленту вниз дальше, чем в ней хватает содержимого, и тем самым инициирует его обновление.
Жест оказался настолько удачным, что через пару лет Эпл сделал его стандартным для любых обновляемых списков в Ай‑ОСе. Правда, реализация Эпла никогда не была настолько же опрятной, как у Лорена.
Содержимое может быть дискретным — состояние экрана телефона между фотографиями не имеет смысла. Да и вручную прокручивать фотографию так, чтобы она вставала ровно на экране, было бы неудобно. Поэтому фотографии в Айфоне листаются.
Но иногда дискретность вносят и искусственно.
Страницы домашнего экрана Айфона листаются — благодаря этому человек запоминает расположение иконок на конкретном экране, что помогает вырабатыванию привычки.
Привычка 25
Содержимое может быть дискретным — состояние экрана телефона между фотографиями не имеет смысла. Да и вручную прокручивать фотографию так, чтобы она вставала ровно на экране, было бы неудобно. Поэтому фотографии в Айфоне листаются.
Но иногда дискретность вносят и искусственно.
Страницы домашнего экрана Айфона листаются — благодаря этому человек запоминает расположение иконок на конкретном экране, что помогает вырабатыванию привычки.
Привычка 25
В некоторых изданиях очередная статья появляется, когда докрутили до конца текущей. Здесь дискретность вообще вводится лишь на визуальном уровне, с точки же зрения управления это чистая прокрутка.
Листание обладает стабильностью: человек понимает, где он, и чувствует уверенность, что не окажется случайно в другом месте. В книгу удобно положить закладку, можно назвать собеседнику номер страницы.
В вебе при перезагрузке остаёшься на той же странице, можно сохранить или передать ссылку.
С классической прокруткой положение в длинном документе слишком шатко. При перезагрузке он останется на месте только если повезёт. Запомнить положение невозможно, дать ссылку на нужное место — тоже. Одно неловкое движение колесом мыши — и не найдёшь, где был.
Из‑за этих недостатков часто отказываются от прокрутки в пользу листания.
Но это не проблема прокрутки как способа взаимодействия, а недостатки её реализации. Их можно исправлять.
Александр Пушкин. Капитанская дочка
Александр Пушкин. Капитанская дочка
Листание обладает стабильностью: человек понимает, где он, и чувствует уверенность, что не окажется случайно в другом месте. В книгу удобно положить закладку, можно назвать собеседнику номер страницы.
В вебе при перезагрузке остаёшься на той же странице, можно сохранить или передать ссылку.
С классической прокруткой положение в длинном документе слишком шатко. При перезагрузке он останется на месте только если повезёт. Запомнить положение невозможно, дать ссылку на нужное место — тоже. Одно неловкое движение колесом мыши — и не найдёшь, где был.
Из‑за этих недостатков часто отказываются от прокрутки в пользу листания.
Но это не проблема прокрутки как способа взаимодействия, а недостатки её реализации. Их можно исправлять.
Эта книга объединяет листание и прокрутку. Вся она — длинная прокручиваемая страница, но в ней сохранены дискретность и стабильность, свойственные листанию.
Дискретность
Книга разделена на смысловые развороты. Это помогает читать самодостаточными порциями. Нужный разворот легко узнать по внешнему виду в оглавлении. Листать развороты можно стрелками на клавиатуре. Иногда развороты содержат несколько сменяемых элементов — в этом случае при листании постепенно покажутся они все.
Стабильность
Развороты пронумерованы как страницы в книге. При перезагрузке открывается тот же разворот. Адрес в адресной строке динамически меняется по мере чтения — если поделиться ссылкой, её получатель попадёт на тот же разворот. Наконец, читатель может сделать сколько угодно закладок.
Эта книга объединяет листание и прокрутку. Вся она — длинная прокручиваемая страница, но в ней сохранены дискретность и стабильность, свойственные листанию.
Дискретность
Книга разделена на смысловые развороты. Это помогает читать самодостаточными порциями. Нужный разворот легко узнать по внешнему виду в оглавлении. Листать развороты можно стрелками на клавиатуре. Иногда развороты содержат несколько сменяемых элементов — в этом случае при листании постепенно покажутся они все.
Стабильность
Развороты пронумерованы как страницы в книге. При перезагрузке открывается тот же разворот. Адрес в адресной строке динамически меняется по мере чтения — если поделиться ссылкой, её получатель попадёт на тот же разворот. Наконец, читатель может сделать сколько угодно закладок.
В начале главы об обратной связи — пример с машинкой из почтового отделения. Сформулируйте, в чём именно проблема с её интерфейсом.
Обратную связь нужно давать в первую очередь. А здесь понять, что кнопка сработала и команда принята, можно не сразу, а только когда распечатается номерок. Грубость — это избыток обратной связи, а тут проблема в её недостатке.
Какой должна быть обратная связь для эффекта непосредственного взаимодействия?
Обратная связь должна быть мгновенной, непрерывной и физичной.
После любого изменения в поле «адрес» форма перепроверяет, есть ли такой адрес, и, если нет, выводит окно с сообщением об ошибке. Что с этим не так и как исправить?
Даже если окно выводится мгновенно, сообщать об ошибке таким окном — это слишком грубо. А обман тут ни при чём.
Блок на сайте обычно подгружается около секунды. Выберите самый подходящий элемент для индикации ожидания.
Радиокнопка и ползунок — элементы управления, а не индикации. Прогрессбары — слишком «громкая» индикация для секундной загрузки. Лучше всего подойдёт компактная крутилка.
Хорошая обратная связь для кнопки «Оплатить» на экране подтверждения заказа в интернет‑магазине —
Обратную связь нужно давать независимо от того, нужны ли дальнейшие действия. Но звук или целый информационный экран — слишком грубая обратная связь для сайта. Кроме того, сразу появляющийся экран нарушает принцип «мгновенно, но без обмана». Так что среди ответов нет правильного.
Выберите примеры взаимодействия с непрерывной обратной связью.
Непрерывная обратная связь — это реакция, которую интерфейс даёт непосредственно и постоянно в процессе изменения значения параметра. Подходящие примеры — перетаскивание окна, когда окно двигается, повторяя движения мыши по столу; управление громкостью, когда она меняется прямо по мере вращения ручки; поворачивание колёс, когда положения руля впрямую влияет на их положение.
Назовите способы повышения информативности листалки.
Чтобы повысить информативность, нужно или уменьшить шум, или добавить сигнал. Ни один из приведённых способов не уменьшает шум. Добавляют сигнал миниатюры и общее число страниц — и то, и другое помогает принять решение о том, стоит ли листать и в каком направлении.
Что думаете о такой листалке?
Листалка с механическим разделением содержимого на равные порции не помогает сориентироваться и найти нужную страницу, не важно где. Замена выпадайки на радиогруппу или уменьшение числа страниц тут не помогут.
На сайте ресторана необходимо опубликовать длинное меню. Предложите хорошие решения для навигации.
Десять блюд, номера страниц — числа с потолка, таким разделением навигации не поможешь. Группы по несколько букв максимально бесчеловечны. Лучше всего показать все блюда одной страницей. Если же их так много, что без деления на страницы никак, то делить нужно по смыслу, то есть по типам блюд.
Назовите способы улучшения прокрутки.
В некоторых случаях стрелки по краям можно убрать, но это никак не улучшит обратную связь. Остальные перечисленные способы улучшают прокрутку.
В начале главы об обратной связи — пример с машинкой из почтового отделения. Сформулируйте, в чём именно проблема с её интерфейсом.
Обратную связь нужно давать в первую очередь. А здесь понять, что кнопка сработала и команда принята, можно не сразу, а только когда распечатается номерок. Грубость — это избыток обратной связи, а тут проблема в её недостатке.
Какой должна быть обратная связь для эффекта непосредственного взаимодействия?
Обратная связь должна быть мгновенной, непрерывной и физичной.
После любого изменения в поле «адрес» форма перепроверяет, есть ли такой адрес, и, если нет, выводит окно с сообщением об ошибке. Что с этим не так и как исправить?
Даже если окно выводится мгновенно, сообщать об ошибке таким окном — это слишком грубо. А обман тут ни при чём.
Блок на сайте обычно подгружается около секунды. Выберите самый подходящий элемент для индикации ожидания.
Радиокнопка и ползунок — элементы управления, а не индикации. Прогрессбары — слишком «громкая» индикация для секундной загрузки. Лучше всего подойдёт компактная крутилка.
Хорошая обратная связь для кнопки «Оплатить» на экране подтверждения заказа в интернет‑магазине —
Обратную связь нужно давать независимо от того, нужны ли дальнейшие действия. Но звук или целый информационный экран — слишком грубая обратная связь для сайта. Кроме того, сразу появляющийся экран нарушает принцип «мгновенно, но без обмана». Так что среди ответов нет правильного.
Выберите примеры взаимодействия с непрерывной обратной связью.
Непрерывная обратная связь — это реакция, которую интерфейс даёт непосредственно и постоянно в процессе изменения значения параметра. Подходящие примеры — перетаскивание окна, когда окно двигается, повторяя движения мыши по столу; управление громкостью, когда она меняется прямо по мере вращения ручки; поворачивание колёс, когда положения руля впрямую влияет на их положение.
Назовите способы повышения информативности листалки.
Чтобы повысить информативность, нужно или уменьшить шум, или добавить сигнал. Ни один из приведённых способов не уменьшает шум. Добавляют сигнал миниатюры и общее число страниц — и то, и другое помогает принять решение о том, стоит ли листать и в каком направлении.
Что думаете о такой листалке?
Листалка с механическим разделением содержимого на равные порции не помогает сориентироваться и найти нужную страницу, не важно где. Замена выпадайки на радиогруппу или уменьшение числа страниц тут не помогут.
На сайте ресторана необходимо опубликовать длинное меню. Предложите хорошие решения для навигации.
Десять блюд, номера страниц — числа с потолка, таким разделением навигации не поможешь. Группы по несколько букв максимально бесчеловечны. Лучше всего показать все блюда одной страницей. Если же их так много, что без деления на страницы никак, то делить нужно по смыслу, то есть по типам блюд.
Назовите способы улучшения прокрутки.
В некоторых случаях стрелки по краям можно убрать, но это никак не улучшит обратную связь. Остальные перечисленные способы улучшают прокрутку.
Синтаксис
Элементы управления
Пиктограммы
Слова
Язык роботов
Синтаксис
Элементы управления
Пиктограммы
Слова
Язык роботов
Можно подумать, что экранные формы — изобретение компьютерной эпохи. Но на самом деле они наследуют графический язык бумажных форм.
Вид полей указывает на то, как их заполнять. Здесь есть радиокнопки, однострочные и многострочные поля ввода, чекбоксы.
Иногда для того, чтобы человек правильно заполнил форму, дают подсказки: «нужное подчеркнуть», «указывать в таком‑то виде».
Форма подписки на издание по почте
Форма подписки на издание по почте
Форма подписки на издание по почте
Форма подписки на издание по почте
Форма подписки на издание по почте
Форма подписки на издание по почте
Форма подписки на издание по почте
Форма подписки на издание по почте
Можно подумать, что экранные формы — изобретение компьютерной эпохи. Но на самом деле они наследуют графический язык бумажных форм.
Вид полей указывает на то, как их заполнять. Здесь есть радиокнопки, однострочные и многострочные поля ввода, чекбоксы.
Иногда для того, чтобы человек правильно заполнил форму, дают подсказки: «нужное подчеркнуть», «указывать в таком‑то виде».
Первая форма в жизни большинства граждан России
Первая форма в жизни большинства граждан России
Хорошо составленная форма, анкета или бланк после заполнения складываются в связный текст. Поэтому мы предлагаем смотреть на форму как на предложение.
Первая форма в жизни большинства граждан России
Первая форма в жизни большинства граждан России
Хорошо составленная форма, анкета или бланк после заполнения складываются в связный текст. Поэтому мы предлагаем смотреть на форму как на предложение.
Текст на форме может быть представлен не только предложением, но и списком или таблицей. Редактор может изменить представление для удобства заполнения и чтения. Но и в этом случае синтаксические отношения между элементами строятся, как в обычном предложении.
Японская таможенная декларация
Текст на форме может быть представлен не только предложением, но и списком или таблицей. Редактор может изменить представление для удобства заполнения и чтения. Но и в этом случае синтаксические отношения между элементами строятся, как в обычном предложении.
Японская таможенная декларация
Подобно тому, как в предложении есть главные члены — подлежащее и сказуемое, у формы главные члены — это её заголовок и кнопка.
Заголовок, как подлежащее в предложении, выражается существительным в именительном падеже.
Кнопка, как сказуемое, выражается глаголом. Но поскольку это команда, а не повествовательное предложение, глагол на кнопке — в начальной форме.
Подобно тому, как в предложении есть главные члены — подлежащее и сказуемое, у формы главные члены — это её заголовок и кнопка.
Заголовок, как подлежащее в предложении, выражается существительным в именительном падеже.
Кнопка, как сказуемое, выражается глаголом. Но поскольку это команда, а не повествовательное предложение, глагол на кнопке — в начальной форме.
Поля между заголовком и кнопкой — это второстепенные члены предложения. Они отвечают на вопросы: куда отправить сообщение? кому поставить задачу? при каких обстоятельствах?
Простая форма похожа на простое предложение.
Как и предложения, формы могут быть сложными, то есть содержащими несколько самостоятельных групп элементов.
Поля между заголовком и кнопкой — это второстепенные члены предложения. Они отвечают на вопросы: куда отправить сообщение? кому поставить задачу? при каких обстоятельствах?
Простая форма похожа на простое предложение.
Как и предложения, формы могут быть сложными, то есть содержащими несколько самостоятельных групп элементов.
Настройка фильтров в почте «Яндекса» — пример сложной формы. Синтаксически точно было бы в заголовке написать «Фильтр», а на кнопке — «Сохранить».
Но здесь форма слишком длинная, заголовок и кнопка не попадут одновременно в поле зрения на большинстве экранов. Поэтому заголовок и кнопку сделали более
Настройка фильтров в почте «Яндекса» — пример сложной формы. Синтаксически точно было бы в заголовке написать «Фильтр», а на кнопке — «Сохранить».
Но здесь форма слишком длинная, заголовок и кнопка не попадут одновременно в поле зрения на большинстве экранов. Поэтому заголовок и кнопку сделали более
Избыточно
Достаточно
В обычных случаях стоит избегать повторений, оставляя в заголовке подлежащее, а в кнопке — сказуемое. Обилие слов часто маскирует проблемы с
Если убрать лишние слова, проявляется бестолковый заголовок «Товар». Осталось заменить его названием этого товара.
Избыточно
В обычных случаях стоит избегать повторений, оставляя в заголовке подлежащее, а в кнопке — сказуемое. Обилие слов часто маскирует проблемы с
Достаточно
Если убрать лишние слова, проявляется бестолковый заголовок «Товар». Осталось заменить его названием этого товара.
Нарушение синтаксиса мешает однозначному пониманию интерфейса.
На сайте «Аэрофлота» был оранжевый элемент с призывом «Вернитесь к началу регистрации». Но как вернуться, да и зачем?
На кнопке должен быть глагол совершенного вида в начальной форме: «Вернуться» (а лучше — «Сохранить место»).
Выбор места в салоне при регистрации на рейс «Аэрофлота»
Выбор места в салоне при регистрации на рейс «Аэрофлота»
Нарушение синтаксиса мешает однозначному пониманию интерфейса.
На сайте «Аэрофлота» был оранжевый элемент с призывом «Вернитесь к началу регистрации». Но как вернуться, да и зачем?
На кнопке должен быть глагол совершенного вида в начальной форме: «Вернуться» (а лучше — «Сохранить место»).
В Ай‑ОСе, наоборот, глагол совершенного вида в начальной форме стоит в заголовке экрана и в подписях тумблеров. Как это понять? Когда я включу тумблер, сохранятся настройки?
На самом деле не сохранятся, а будут сохраняться, в другой программе и в другое время.
Раз это настройка поведения, а не однократное действие, следует использовать глагол несовершенного вида: «Помнить настройки».
См. также о режимах камеры:
Модальность 54
В Ай‑ОСе, наоборот, глагол совершенного вида в начальной форме стоит в заголовке экрана и в подписях тумблеров. Как это понять? Когда я включу тумблер, сохранятся настройки?
На самом деле не сохранятся, а будут сохраняться, в другой программе и в другое время.
Раз это настройка поведения, а не однократное действие, следует использовать глагол несовершенного вида: «Помнить настройки».
См. также о режимах камеры:
Модальность 54
Из‑за слова «Можем» кажется, будто выбираем не когда нам удобно получить, а когда компания может доставить. Правильно: «День доставки».
Кажется, что можно ответить «И да, и нет». Правильно было бы сделать один тумблер: «Я уже посещал клинику».
Заголовок и значение в поле несогласованны.
Из‑за слова «Можем» кажется, будто выбираем не когда нам удобно получить, а когда компания может доставить. Правильно: «День доставки».
Кажется, что можно ответить «И да, и нет». Правильно было бы сделать один тумблер: «Я уже посещал клинику».
Заголовок и значение в поле несогласованны.
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. Другие глаголы перевели глаголами: открыть, закрыть, сохранить. А здесь произошёл сбой и вместо синтаксически правильного «Напечатать» стали писать «Печать».
Эти термины привычны в операционных системах. Человек ищет глазами знакомое слово по очертанию и расположению, и лучше ему не мешать. Но если вы делаете новый интерфейс, где нет таких привычек, рекомендуем соблюдать синтаксис и писать «Создать», «Напечатать».
Привычка 25
New Message против Compose New Message
New Message против Compose New Message
Здесь синтаксически правильно было бы «Создать документ». Но кнопки и пункты меню New используются в разных системах и давно стали привычными.
В почтовом клиенте Мака с этим связано недоразумение: хотя в основном меню написано New Message, в меню в доке эта же команда уже называется Compose New Message. Из‑за отсутствия единообразия этот пункт сложнее узнать — привычка не работает.
Другой пример ошибки, ставшей стандартом — русский перевод пункта Print... меню File. Другие глаголы перевели глаголами: открыть, закрыть, сохранить. А здесь произошёл сбой и вместо синтаксически правильного «Напечатать» стали писать «Печать».
Эти термины привычны в операционных системах. Человек ищет глазами знакомое слово по очертанию и расположению, и лучше ему не мешать. Но если вы делаете новый интерфейс, где нет таких привычек, рекомендуем соблюдать синтаксис и писать «Создать», «Напечатать».
Привычка 25
Сказуемое, отвечает на вопрос о подлежащем:
Вторая функция кнопки или пункта меню — изменение статуса или отношения к объекту.
В синтаксисе элементов интерфейса это тоже
Сказуемое может отвечать на вопросы: как? когда? и выражаться наречием: «Позже».
Формулировки с глаголами‑командами в таких случаях избыточны и малоинформативны: «Отметить как…», «Перевести в категорию…», «Оценить на…»
Сказуемое, отвечает на вопрос о подлежащем:
Вторая функция кнопки или пункта меню — изменение статуса или отношения к объекту.
В синтаксисе элементов интерфейса это тоже
Сказуемое может отвечать на вопросы: как? когда? и выражаться наречием: «Позже».
Формулировки с глаголами‑командами в таких случаях избыточны и малоинформативны: «Отметить как…», «Перевести в категорию…», «Оценить на…»
Статус
Сообщить о намерении
Записать факт в журнал
Пометить документ
Выразить мнение
Команда
Набрать номер прямо сейчас
Дать задание курьеру
Скрыть напоминание
Дать ход документу
Статус и отношение могут быть выражены глаголами в личной (а не начальной) форме.
Выбор формы глагола меняет смысл и ожидаемый результат от нажатия кнопки.
Статус
Сообщить о намерении
Записать факт в журнал
Пометить документ
Выразить мнение
Статус и отношение могут быть выражены глаголами в личной (а не начальной) форме.
Команда
Набрать номер прямо сейчас
Дать задание курьеру
Скрыть напоминание
Дать ход документу
Выбор формы глагола меняет смысл и ожидаемый результат от нажатия кнопки.
В программе «Секьюридж» оператор охранной фирмы следит за сигналами, приходящими с охраняемых объектов, и руководит перемещением групп быстрого реагирования.
Пункты меню группы называются «Отправили», «Прибыла», потому что при их выборе на самом деле группа не отправляется и не прибывает. Эти пункты просто записывают отметки в журнал. Если написать «Отправить», оператору будет казаться, что достаточно нажать сюда, чтобы группа выехала. Но чтобы отправить группу, с ней нужно связаться по рации.
В программе «Секьюридж» оператор охранной фирмы следит за сигналами, приходящими с охраняемых объектов, и руководит перемещением групп быстрого реагирования.
Пункты меню группы называются «Отправили», «Прибыла», потому что при их выборе на самом деле группа не отправляется и не прибывает. Эти пункты просто записывают отметки в журнал. Если написать «Отправить», оператору будет казаться, что достаточно нажать сюда, чтобы группа выехала. Но чтобы отправить группу, с ней нужно связаться по рации.
Подлежащее: Что?
Третья функция кнопки или пункта меню — навигация. При нажатии не выполняется никакого действия, но заменяется показанный экран, открывается окно, запускается приложение.
В синтаксисе элементов интерфейса это подлежащее, отвечает на вопрос «Что?» (вызвать или открыть). Используется существительное в именительном падеже.
Как и в случае с изменением статуса или отношения, формулировки в виде команды избыточны («Перейти к…», «Открыть…»),
Подлежащее: Что?
Третья функция кнопки или пункта меню — навигация. При нажатии не выполняется никакого действия, но заменяется показанный экран, открывается окно, запускается приложение.
В синтаксисе элементов интерфейса это подлежащее, отвечает на вопрос «Что?» (вызвать или открыть). Используется существительное в именительном падеже.
Как и в случае с изменением статуса или отношения, формулировки в виде команды избыточны («Перейти к…», «Открыть…»),
Формулировки с пропущенным, но подразумеваемым глаголом тоже неудачны.
Если сделать сайт без регистрации не удалось, то просто «Регистрация».
Что там, в начале? «Новый платёж». Иногда команда уместнее: «Сыграть ещё», «Пройти тест заново».
Когда навигация связана с направлением в пространстве или времени, уместно отвечать наречием вместо существительного: «Назад — Вперёд», «Ранее — Позднее». Но информативнее может быть просто поставить стрелки ← → Ещё лучше — назвать существительным то, куда именно назад («Адрес доставки»); то, что именно будет далее («Оплата»).
Наречия «Дополнительно», «Ещё» не несут информации и редко годятся для названия кнопок.
Формулировки с пропущенным, но подразумеваемым глаголом тоже неудачны.
Если сделать сайт без регистрации не удалось, то просто «Регистрация».
Что там, в начале? «Новый платёж». Иногда команда уместнее: «Сыграть ещё», «Пройти тест заново».
Когда навигация связана с направлением в пространстве или времени, уместно отвечать наречием вместо существительного: «Назад — Вперёд», «Ранее — Позднее». Но информативнее может быть просто поставить стрелки ← → Ещё лучше — назвать существительным то, куда именно назад («Адрес доставки»); то, что именно будет далее («Оплата»).
Наречия «Дополнительно», «Ещё» не несут информации и редко годятся для названия кнопок.
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
Вкладки в Макосе Сьерре
Вкладки в Хроме
Подлежащее: Что?
Вкладки — способ организации окна, когда на одной площади пользователь переключается между разными формами или документами.
Особую популярность вкладки приобрели в браузерах.
Как любые навигационные элементы, вкладки просто называют ту область, которая за ними спрятана, то есть это подлежащие.
Иногда вкладки встречаются в качестве элемента выбора в форме. Это ошибка: вкладка — элемент навигации, а не выбора. Если у вас две вкладки, это значит, что у вас есть и то, и другое, но вы просто сейчас смотрите на что‑то одно.
Для выбора используйте радиокнопки или их аналог — горизонтальный переключатель, даже если от этого выбора зависит набор полей ниже.
Иногда вкладки встречаются в качестве элемента выбора в форме. Это ошибка: вкладка — элемент навигации, а не выбора. Если у вас две вкладки, это значит, что у вас есть и то, и другое, но вы просто сейчас смотрите на что‑то одно.
Для выбора используйте радиокнопки или их аналог — горизонтальный переключатель, даже если от этого выбора зависит набор полей ниже.
Начинающие дизайнеры интерфейса воспринимают чекбокс как логическую переменную, имеющую значения «истина» или «ложь». Из‑за этого в интерфейсе появляются чекбоксы с неинформативными
Чекбокс — это информативный элемент, который выбирает объект или уточняет действие, сообщает пользователю о поведении интерфейса. В интерфейсе чекбокс отвечает не на вопрос «да или нет?», а на открытые вопросы: какой, что, кому, как, где, когда?
Начинающие дизайнеры интерфейса воспринимают чекбокс как логическую переменную, имеющую значения «истина» или «ложь». Из‑за этого в интерфейсе появляются чекбоксы с неинформативными
Чекбокс — это информативный элемент, который выбирает объект или уточняет действие, сообщает пользователю о поведении интерфейса. В интерфейсе чекбокс отвечает не на вопрос «да или нет?», а на открытые вопросы: какой, что, кому, как, где, когда?
Чекбокс означает часть предложения, которую можно добавить или убрать.
Если чекбокс выключен, то его подписи как бы нет в предложении.
Выключенный чекбокс может также обозначать отрицание собственной подписи.
Чекбокс означает часть предложения, которую можно добавить или убрать.
Если чекбокс выключен, то его подписи как бы нет в предложении.
Выключенный чекбокс может также обозначать отрицание собственной подписи.
Дополнение: использовать что? сделать с чем? кому?
Определение: Какой, чей, который?
Приложение: Кто или что именно?
Одна из функций чекбокса — выбор объекта. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или приложение (кто именно?). Используются существительные, местоимения, причастия.
Дополнение: использовать что? сделать с чем? кому?
Определение: Какой, чей, который?
Приложение: Кто или что именно?
Одна из функций чекбокса — выбор объекта. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или приложение (кто именно?). Используются существительные, местоимения, причастия.
Чекбоксом можно выбрать не только объект, но и его свойство или состояние. В синтаксисе элементов интерфейса это определение (какой? чей? который?) или приложение (кто или что именно?). Используются существительные и местоимения, прилагательные, наречия, числительные, глаголы в начальной форме.
Чекбоксом можно выбрать не только объект, но и его свойство или состояние. В синтаксисе элементов интерфейса это определение (какой? чей? который?) или приложение (кто или что именно?). Используются существительные и местоимения, прилагательные, наречия, числительные, глаголы в начальной форме.
Подпись чекбокса не может быть ответом на вопрос в форме глаголов, например «Подтвердить», или частиц «Да» и «Нет».
Глаголом в начальной форме может выражаться свойство. Сравните с ролью глагола на кнопке.
Подпись чекбокса не может быть ответом на вопрос в форме глаголов, например «Подтвердить», или частиц «Да» и «Нет».
Глаголом в начальной форме может выражаться свойство. Сравните с ролью глагола на кнопке.
Дополнения
Обстоятельства
Дополнение: использовать что? сделать с чем? кому?
Обстоятельство: Сделать как? где? когда?
Вторая функция чекбокса — уточнение действия. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или обстоятельство (сделать как? где? когда?).
В дополнениях используются существительные в косвенном падеже. В обстоятельствах используются наречия, деепричастия, существительные в творительном падеже и существительные в косвенном падеже с предлогом.
Дополнения
Обстоятельства
Дополнение: использовать что? сделать с чем? кому?
Обстоятельство: Сделать как? где? когда?
Вторая функция чекбокса — уточнение действия. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или обстоятельство (сделать как? где? когда?).
В дополнениях используются существительные в косвенном падеже. В обстоятельствах используются наречия, деепричастия, существительные в творительном падеже и существительные в косвенном падеже с предлогом.
Обстоятельственную функцию может приобретать и глагол в начальной форме — это часто используется при настройке. Причём при настройке поведения используется глагол несовершенного, а при настройке разового действия — совершенного вида.
Сравните: «Раскладывать по копиям» (при настройке принтера) и «Разложить по копиям» (при печати).
Обстоятельственную функцию может приобретать и глагол в начальной форме — это часто используется при настройке. Причём при настройке поведения используется глагол несовершенного, а при настройке разового действия — совершенного вида.
Сравните: «Раскладывать по копиям» (при настройке принтера) и «Разложить по копиям» (при печати).
Общие слова нескольких связанных по смыслу чекбоксов стоит вынести за скобку — в заголовок группы, всей формы или на кнопку.
В этом примере глаголы маскируют самые важные слова: «рисунки», «видео», «реклама».
Если найти подходящий для всех трёх чекбоксов глагол, его можно вынести за скобку — обстоятельством станет вся группа. Сами чекбоксы при этом станут дополнениями внутри группы.
Следующий шаг — вообще избавиться от обстоятельства и сформулировать предложение проще. Чекбоксы стали дополнениями, относящимися к сказуемому на кнопке.
Информативность 126
Общие слова нескольких связанных по смыслу чекбоксов стоит вынести за скобку — в заголовок группы, всей формы или на кнопку.
В этом примере глаголы маскируют самые важные слова: «рисунки», «видео», «реклама».
Если найти подходящий для всех трёх чекбоксов глагол, его можно вынести за скобку — обстоятельством станет вся группа. Сами чекбоксы при этом станут дополнениями внутри группы.
Следующий шаг — вообще избавиться от обстоятельства и сформулировать предложение проще. Чекбоксы стали дополнениями, относящимися к сказуемому на кнопке.
Информативность 126
Лучше: ✓ Show next time
В чекбоксах лучше использовать положительные формулировки, иначе пользователь вынужден решать логическую задачку.
Условные и уступительные формулировки ещё хуже: «Не показывать, кроме...», «Скрывать несмотря на...».
Не попробуешь — не узнаешь
Этот тумблер включает или выключает выключение автоматического выключения подсветки.
Лучше: ✓ Show next time
В чекбоксах лучше использовать положительные формулировки, иначе пользователь вынужден решать логическую задачку.
Условные и уступительные формулировки ещё хуже: «Не показывать, кроме...», «Скрывать несмотря на...».
Не попробуешь — не узнаешь
Этот тумблер включает или выключает выключение автоматического выключения подсветки.
Настройка автозапуска приложений на Маке
Это окно настройки автозапуска приложений на Маке.
В списке с подписью «Эти программы запустятся автоматически при входе с паролем» некоторые программы отмечены чекбоксами.
Когда мне впервые понадобилось отключить автозапуск, я зашёл в это окно и снял чекбокс у ненужной программы. Но после перезапуска компьютера программа снова запустилась. Я ещё раз зашёл в окно, убедился, что чекбокс снят. Видимо программа жульничает и запускается как‑то в обход стандартного механизма? Я стал искать в интернете, как с этим бороться — и только тогда понял, как работает это окно.
Оказывается, чтобы отключить автозапуск, программу надо удалить из списка, нажав на минус снизу. А чекбокс означает скрытие программы при запуске! Программа запустится, но её окна не будут отображаться, пока пользователь сам не перейдёт в неё.
Подпись Hide невозможно заметить, потому что она далеко от чекбоксов. Но даже когда ты её уже заметил, настройка остаётся излишне сложной из‑за отрицательной формулировки. Намного естественнее ставить галочку напротив того, что ты хочешь видеть, а не не видеть.
Близость 86
Настройка автозапуска приложений на Маке
Это окно настройки автозапуска приложений на Маке.
В списке с подписью «Эти программы запустятся автоматически при входе с паролем» некоторые программы отмечены чекбоксами.
Когда мне впервые понадобилось отключить автозапуск, я зашёл в это окно и снял чекбокс у ненужной программы. Но после перезапуска компьютера программа снова запустилась. Я ещё раз зашёл в окно, убедился, что чекбокс снят. Видимо программа жульничает и запускается как‑то в обход стандартного механизма? Я стал искать в интернете, как с этим бороться — и только тогда понял, как работает это окно.
Оказывается, чтобы отключить автозапуск, программу надо удалить из списка, нажав на минус снизу. А чекбокс означает скрытие программы при запуске! Программа запустится, но её окна не будут отображаться, пока пользователь сам не перейдёт в неё.
Подпись Hide невозможно заметить, потому что она далеко от чекбоксов. Но даже когда ты её уже заметил, настройка остаётся излишне сложной из‑за отрицательной формулировки. Намного естественнее ставить галочку напротив того, что ты хочешь видеть, а не не видеть.
Близость 86
Отрицательные формулировки мешают не только в чекбоксах.
На вопрос из этого примера невозможно с уверенностью ответить правильно.
Подтвердить? Вы уверены, что вы не хотите восстанавливать никакие проекты? Их нельзя будет восстановить позже. Да или нет?
Подтвердить? Вы уверены, что вы не хотите восстанавливать никакие проекты? Их нельзя будет восстановить позже. Да или нет?
Отрицательные формулировки мешают не только в чекбоксах.
На вопрос из этого примера невозможно с уверенностью ответить правильно.
Радиоприёмник «Альпинист РП‑224»
СССР, 1991
Радиокнопки — это группа кнопок, из которых может быть нажата только одна. Ещё их называют радиогруппой.
Радиоприёмник «Альпинист РП‑224»
СССР, 1991
Радиокнопки — это группа кнопок, из которых может быть нажата только одна. Ещё их называют радиогруппой.
В форме‑предложении радиокнопки представляют собой однородные члены, но каждый раз мы читаем только выбранный, а остальные игнорируем.
Для той же цели и с тем же синтаксисом используют переключатель, выпадающий список.
Радиокнопка и её синонимы
Радиокнопка и её синонимы
В форме‑предложении радиокнопки представляют собой однородные члены, но каждый раз мы читаем только выбранный, а остальные игнорируем.
Для той же цели и с тем же синтаксисом используют переключатель, выпадающий список.
Радиокнопки функционально и синтаксически совпадают с чекбоксами.
Дополнение: использовать что? сделать с чем? кому?
Определение: Какой, чей, который?
Приложение: Кто или что именно?
Одна из функций радиокнопок — выбор объекта. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или приложение (кто именно?). Используются существительные, местоимения, причастия.
Радиокнопки функционально и синтаксически совпадают с чекбоксами.
Дополнение: использовать что? сделать с чем? кому?
Определение: Какой, чей, который?
Приложение: Кто или что именно?
Одна из функций радиокнопок — выбор объекта. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или приложение (кто именно?). Используются существительные, местоимения, причастия.
Погода какая?
Город какой именно?
Радиокнопками можно выбрать не только объект, но и его свойство или состояние. В синтаксисе элементов интерфейса это определение (какой? чей? который?) или приложение (кто или что именно?).
Используются существительные и местоимения, прилагательные, наречия, числительные, глаголы в начальной форме.
Погода какая?
Радиокнопками можно выбрать не только объект, но и его свойство или состояние. В синтаксисе элементов интерфейса это определение (какой? чей? который?) или приложение (кто или что именно?).
Город какой именно?
Используются существительные и местоимения, прилагательные, наречия, числительные, глаголы в начальной форме.
В отличие от чекбоксов, радиокнопки всегда образуют группы — выбор из единственного варианта не имеет смысла.
Как и в случае с чекбоксами, общие слова стоит вынести за скобку.
Но выносить предлог плохо: он неразрывно связан со своим текстом.
Хороший вариант — показать предлог у первого элемента.
Информативность 126
В отличие от чекбоксов, радиокнопки всегда образуют группы — выбор из единственного варианта не имеет смысла.
Как и в случае с чекбоксами, общие слова стоит вынести за скобку.
Но выносить предлог плохо: он неразрывно связан со своим текстом.
Хороший вариант — показать предлог у первого элемента.
Информативность 126
Подпись радиокнопки не может быть ответом на вопрос в форме глаголов, например «Подтвердить», или частиц «Да» и «Нет».
При выборе из двух вариантов, один из которых является отрицанием другого, используйте чекбокс с положительной формулировкой.
Подпись радиокнопки не может быть ответом на вопрос в форме глаголов, например «Подтвердить», или частиц «Да» и «Нет».
При выборе из двух вариантов, один из которых является отрицанием другого, используйте чекбокс с положительной формулировкой.
Дополнение: использовать что? сделать с чем? кому?
Обстоятельство: Сделать как? где? когда?
Вторая функция радиокнопок — уточнение действия. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или обстоятельство (сделать как? где? когда?).
В дополнениях используются существительные в косвенном падеже (в примере — винительный). В обстоятельствах используются наречия, деепричастия, существительные в творительном падеже и существительные в косвенном падеже с предлогом.
Дополнения
Обстоятельства
Дополнение: использовать что? сделать с чем? кому?
Обстоятельство: Сделать как? где? когда?
Вторая функция радиокнопок — уточнение действия. В синтаксисе элементов интерфейса это дополнение (использовать что? сделать с чем? кому?) или обстоятельство (сделать как? где? когда?).
В дополнениях используются существительные в косвенном падеже (в примере — винительный). В обстоятельствах используются наречия, деепричастия, существительные в творительном падеже и существительные в косвенном падеже с предлогом.
Дополнения
Обстоятельства
Обстоятельственную функцию может приобретать и глагол в начальной форме — это часто используется при настройке. Причём при настройке поведения используется глагол несовершенного, а при настройке разового действия — совершенного вида.
В примере радиокнопки отвечают на вопрос «Как следует завершить работу?»
Обстоятельственную функцию может приобретать и глагол в начальной форме — это часто используется при настройке. Причём при настройке поведения используется глагол несовершенного, а при настройке разового действия — совершенного вида.
В примере радиокнопки отвечают на вопрос «Как следует завершить работу?»
Определение: Какой, чей, который?
Приложение: Кто или что именно?
Дополнение: использовать что? сделать с чем? кому?
Обстоятельство: Сделать как? где? когда?
Подлежащее: Что?
Поле ввода означает часть предложения, которую пользователь должен вписать сам, а не выбрать из предложенных вариантов. При этом поле может помогать себя заполнить (автодополнение, маска, комбобокс).
В синтаксисе элементов интерфейса это любой член предложения, кроме сказуемого.
Поле ввода означает часть предложения, которую пользователь должен вписать сам, а не выбрать из предложенных вариантов. При этом поле может помогать себя заполнить (автодополнение, маска, комбобокс).
В синтаксисе элементов интерфейса это любой член предложения, кроме сказуемого.
Определение: Какой, чей, который?
Приложение: Кто или что именно?
Дополнение: использовать что? сделать с чем? кому?
Обстоятельство: Сделать как? где? когда?
Подлежащее: Что?
В подписях элементов интерфейса не нужны глаголы в повелительном наклонении: «введите, укажите».
Здесь достаточно существительного. Но при вводе в свободной форме хочется подсказать пользователю — вдруг он не поймёт, просят ли ввести старый пароль или придумать новый.
В таких случах можно сделать исключение и всё‑таки использовать глагол.
Но лучше — найти формулировку в синтаксически правильной форме.
Плохо
Хорошо
Так себе
Хорошо
Плохо
Хорошо
Так себе
Хорошо
В подписях элементов интерфейса не нужны глаголы в повелительном наклонении: «введите, укажите».
Здесь достаточно существительного. Но при вводе в свободной форме хочется подсказать пользователю — вдруг он не поймёт, просят ли ввести старый пароль или придумать новый.
В таких случах можно сделать исключение и всё‑таки использовать глагол.
Но лучше — найти формулировку в синтаксически правильной форме.
Указатель в штате Нью‑Мексико
Эта пиктограмма о чём‑то предупреждает. Попробуйте догадаться, о чём именно.
Наскальный рисунок был найден перед крутой горной тропой. Он предупреждает всадников о том, что по тропе может взобраться только горный козёл, — лошади подъём не под силу.
Наскальный рисунок был найден перед крутой горной тропой. Он предупреждает всадников о том, что по тропе может взобраться только горный козёл, — лошади подъём не под силу.
Указатель в штате Нью‑Мексико
Эта пиктограмма о чём‑то предупреждает. Попробуйте догадаться, о чём именно.
Наскальный рисунок был найден перед крутой горной тропой. Он предупреждает всадников о том, что по тропе может взобраться только горный козёл, — лошади подъём не под силу.
Наскальный рисунок был найден перед крутой горной тропой. Он предупреждает всадников о том, что по тропе может взобраться только горный козёл, — лошади подъём не под силу.
Когда человек ещё не умел изъясняться словами, но желание сохранять и передавать знания уже появилось, возникли пиктограммы. На них изображали людей, животных, предметы, явления природы.
Альта, Норвегия
Нашенал‑географик
Когда человек ещё не умел изъясняться словами, но желание сохранять и передавать знания уже появилось, возникли пиктограммы. На них изображали людей, животных, предметы, явления природы.
Альта, Норвегия
Нашенал‑географик
Этрусская письменность. Каменная плита недалеко от Перуджи, Италия. Фото: Саилко
Глаголица. Башчанская плита, памятник хорватской письменности
Пиктографические изображения постепенно упрощались, пока полностью не утратили сходство со своими прообразами. За тысячелетия из них произошли буквы, которыми мы сегодня пишем слова.
Этрусская письменность. Каменная плита недалеко от Перуджи, Италия. Фото: Саилко
Глаголица. Башчанская плита, памятник хорватской письменности
Пиктографические изображения постепенно упрощались, пока полностью не утратили сходство со своими прообразами. За тысячелетия из них произошли буквы, которыми мы сегодня пишем слова.
Пиктограммы полезны в среде, где невозможно полностью полагаться на язык. На крупных транспортных узлах пересекаются представители разных стран и культур, но конвертик, самолётик или чашку узнает любой.
Пиктограммы полезны в среде, где невозможно полностью полагаться на язык. На крупных транспортных узлах пересекаются представители разных стран и культур, но конвертик, самолётик или чашку узнает любой.
Пиктограммы летних игр в Рио‑де‑Жанейро, 2016
На олимпийских играх интернациональность пиктограмм имеет скорее идеологическое значение.
И на транспорте, и здесь пиктограммы изображают сам предмет, который обозначают. Успех пиктограммы зависит от того, знако́м ли предмет человеку и хорошо ли он изображён.
Пиктограммы летних игр в Рио‑де‑Жанейро, 2016
На олимпийских играх интернациональность пиктограмм имеет скорее идеологическое значение.
И на транспорте, и здесь пиктограммы изображают сам предмет, который обозначают. Успех пиктограммы зависит от того, знако́м ли предмет человеку и хорошо ли он изображён.
Когда предмет малоузнаваем или пиктограммы не означают сам предмет, становится непонятно.
Автор неизвестен
Автор неизвестен
Когда предмет малоузнаваем или пиктограммы не означают сам предмет, становится непонятно.
Пример набора пиктограмм, созданного методом «конструирования языка»
Дизайнеры ищут способ создания понятных интерфейсных пиктограмм. Авторы метода «конструирования языка пиктограмм» предлагают описать все объекты, действия, определения и обстоятельства, встречающиеся в программе, затем придумать обозначение для каждого, а потом комбинировать их для получения пиктограмм для чего угодно.
В результате вместо того, чтобы сделать интерфейс понятнее, дизайнеры вынуждают пользователя разгадывать ребус. Кроме того, все пиктограммы в таком наборе выглядят одинаковыми.
Пример набора пиктограмм, созданного методом «конструирования языка»
Дизайнеры ищут способ создания понятных интерфейсных пиктограмм. Авторы метода «конструирования языка пиктограмм» предлагают описать все объекты, действия, определения и обстоятельства, встречающиеся в программе, затем придумать обозначение для каждого, а потом комбинировать их для получения пиктограмм для чего угодно.
В результате вместо того, чтобы сделать интерфейс понятнее, дизайнеры вынуждают пользователя разгадывать ребус. Кроме того, все пиктограммы в таком наборе выглядят одинаковыми.
Все одинаковые
Все одинаковые
Классический тулбар «Ворда»
Слова понятнее пиктограмм. Зато картинку легче узнать.
Знакомая пиктограмма помогает быстро найти нужную команду. Когда речь о таких абстрактных понятиях, как база данных, сетевая папка или гиперссылка, трудно изобразить сам предмет. Объяснить их без слов невозможно.
В первую очередь мы воспринимаем расположение, цвет и форму. Белое пятно слева — это новый документ. Жёлтое — открыть. Синие с белым — сохранить.
Расположение особенно важно, потому что влияет не только на узнаваемость, но и на формирование привычки. Если поменять порядок кнопок в этом тулбаре, найти нужную будет намного труднее.
А что именно изображено на пиктограмме, не имеет практического значения. Папка в равной степени связана с открытием и сохранением, а настоящую дискету многие и не видели. И о том, что цепь и земной шар означают гиперссылку, догадаться невозможно, это можно только знать.
Классический тулбар «Ворда»
Слова понятнее пиктограмм. Зато картинку легче узнать.
Знакомая пиктограмма помогает быстро найти нужную команду. Когда речь о таких абстрактных понятиях, как база данных, сетевая папка или гиперссылка, трудно изобразить сам предмет. Объяснить их без слов невозможно.
В первую очередь мы воспринимаем расположение, цвет и форму. Белое пятно слева — это новый документ. Жёлтое — открыть. Синие с белым — сохранить.
Расположение особенно важно, потому что влияет не только на узнаваемость, но и на формирование привычки. Если поменять порядок кнопок в этом тулбаре, найти нужную будет намного труднее.
А что именно изображено на пиктограмме, не имеет практического значения. Папка в равной степени связана с открытием и сохранением, а настоящую дискету многие и не видели. И о том, что цепь и земной шар означают гиперссылку, догадаться невозможно, это можно только знать.
Среди пользователей Виндоуса были популярны темы оформления операционной системы, которые меняли обои рабочего стола, цвета интерфейса, курсоры мыши и системные пиктограммы. В одной теме оформления все иконки могли стать цветочками, в другой — планетами. Но пользователи быстро запоминали, что Земля — это «Мой компьютер», а Юпитер — «Корзина».
Конечно, я не призываю рисовать на пиктограммах бессмыслицу. И дизайнеру, и пользователю спокойнее, когда нарисованому есть объяснение. Но:
Пиктограмма для узнавания,
а не объяснения
Среди пользователей Виндоуса были популярны темы оформления операционной системы, которые меняли обои рабочего стола, цвета интерфейса, курсоры мыши и системные пиктограммы. В одной теме оформления все иконки могли стать цветочками, в другой — планетами. Но пользователи быстро запоминали, что Земля — это «Мой компьютер», а Юпитер — «Корзина».
Конечно, я не призываю рисовать на пиктограммах бессмыслицу. И дизайнеру, и пользователю спокойнее, когда нарисованому есть объяснение. Но:
Пиктограмма для узнавания, а не объяснения
Чтобы иконки было легче отличать, у них нужно убирать повторяющиеся части. Эти предметы следует вынуть из коробок.
Чтобы иконки было легче отличать, у них нужно убирать повторяющиеся части. Эти предметы следует вынуть из коробок.
Классический тулбар «Бата»
Эскиз нового набора пиктограмм
Пиктограммы в интерфейсе
В 2008 году в бюро спроектировали интерфейс новой версии почтового клиента. В предыдущей версии основные кнопки управления почтой были слишком похожи.
Для каждой был выбран цвет и придуман узнаваемый символ.
А потом их раскрасили в соответствии со стилем эпохи скеоморфизма. Узнаваемость не пострадает, если стиль поменять.
Классический тулбар «Бата»
Эскиз нового набора пиктограмм
Пиктограммы в интерфейсе
В 2008 году в бюро спроектировали интерфейс новой версии почтового клиента. В предыдущей версии основные кнопки управления почтой были слишком похожи.
Для каждой был выбран цвет и придуман узнаваемый символ.
А потом их раскрасили в соответствии со стилем эпохи скеоморфизма. Узнаваемость не пострадает, если стиль поменять.
Важно, чтобы пиктограммы хорошо отличались. Но в одном наборе они должны выглядеть однородно. Эти пиктограммы сильно отличаются по цвету и форме, но имеют общий ракурс и характерные блики.
Чем больше ограничений накладывает среда, тем сложнее сделать пиктограммы. Когда нет цвета, разнообразие формы ещё важнее.
Важно, чтобы пиктограммы хорошо отличались. Но в одном наборе они должны выглядеть однородно. Эти пиктограммы сильно отличаются по цвету и форме, но имеют общий ракурс и характерные блики.
Чем больше ограничений накладывает среда, тем сложнее сделать пиктограммы. Когда нет цвета, разнообразие формы ещё важнее.
Пиктограммы лифта и лестницы
Это моя любимая пиктограмма лифта из коллекции Артёма Горбунова.
Легко представить себе ход мысли дизайнера: «Нарисую‑ка я пассажиров, да разного пола, чтобы без дискриминации. Ой, получился туалет. Надо, наверное, засунуть их в ящик, а ящик в шахту, чтобы было ясно, что лифт. Нет, чё‑то не лифт. Может, трос пририсовать? Да, кнопки на стене! Вот оно!»
А потом пришёл заказчик и сказал: «Ох, давайте под иконкой напишем ЛИФТ, а то непонятно как‑то».
Многотысячелетняя эволюция пиктограмм недаром привела к появлению алфавита и слов.
Слова понятнее
Пиктограммы лифта и лестницы
Это моя любимая пиктограмма лифта из коллекции Артёма Горбунова.
Легко представить себе ход мысли дизайнера: «Нарисую‑ка я пассажиров, да разного пола, чтобы без дискриминации. Ой, получился туалет. Надо, наверное, засунуть их в ящик, а ящик в шахту, чтобы было ясно, что лифт. Нет, чё‑то не лифт. Может, трос пририсовать? Да, кнопки на стене! Вот оно!»
А потом пришёл заказчик и сказал: «Ох, давайте под иконкой напишем ЛИФТ, а то непонятно как‑то».
Многотысячелетняя эволюция пиктограмм недаром привела к появлению алфавита и слов.
Слова понятнее
Этот интерфейс информативен и не заставляет угадывать назначение элементов — всё написано прямым текстом.
Без единой пиктограммы. Нортон Командер
Без единой пиктограммы. Нортон Командер
Этот интерфейс информативен и не заставляет угадывать назначение элементов — всё написано прямым текстом.
Мы предположили, что в языке есть слова, которые предсказуемо удаляются из текста без потери смысла. Если их удалить, то, скорее всего, текст станет яснее, информативнее и проще для чтения. Мы назвали такие слова стоп‑словами.
Максим Ильяхов. Информационный стиль
Не всегда есть возможность привлечь редактора к разработке интерфейса, поэтому хорошие дизайнеры владеют основами редактуры и информационного стиля.
Проектировщику интерфейса приходится подбирать слова для элементов управления и навигации. Основы редактуры удобно начинать изучать со стоп‑слов — мусорных слов, которые можно удалить или заменить информативными.
Посмотрим, какие слова говорят о проблемах в интерфейсе, а какие — делают его однозначным, информативным и человечным.
Мы предположили, что в языке есть слова, которые предсказуемо удаляются из текста без потери смысла. Если их удалить, то, скорее всего, текст станет яснее, информативнее и проще для чтения. Мы назвали такие слова стоп‑словами.
Максим Ильяхов. Информационный стиль
Не всегда есть возможность привлечь редактора к разработке интерфейса, поэтому хорошие дизайнеры владеют основами редактуры и информационного стиля.
Проектировщику интерфейса приходится подбирать слова для элементов управления и навигации. Основы редактуры удобно начинать изучать со стоп‑слов — мусорных слов, которые можно удалить или заменить информативными.
Посмотрим, какие слова говорят о проблемах в интерфейсе, а какие — делают его однозначным, информативным и человечным.
Основной раздел
Общие настройки
Мебель
Рабочий стол
Расширенные параметры
В навигации дизайнеры часто используют деление на «основное» и «второстепенное». Проблема в том, что принцип деления неизвестен — зачастую и самому дизайнеру. Конкретный параметр, который ищет пользователь — общий или частный?
«Дополнительно» — обычно свалка всего, чему дизайнер не нашёл места.
В навигации дизайнеры часто используют деление на «основное» и «второстепенное». Проблема в том, что принцип деления неизвестен — зачастую и самому дизайнеру. Конкретный параметр, который ищет пользователь — общий или частный?
«Дополнительно» — обычно свалка всего, чему дизайнер не нашёл места.
Основной раздел
Общие настройки
Мебель
Рабочий стол
Расширенные параметры
Полезные ссылки
Книги о вёрстке
Выделение в навигации «полезного» означает, что остальное бесполезно. Вместо констатации пользы объясните, в чём она состоит: «Советы начинающим сноубордистам».
Что из представленного на сайте или в интерфейсе не является информацией или сведениями?
Выделение в навигации «полезного» означает, что остальное бесполезно. Вместо констатации пользы объясните, в чём она состоит: «Советы начинающим сноубордистам».
Что из представленного на сайте или в интерфейсе не является информацией или сведениями?
Полезные ссылки
Книги о вёрстке
Форма заказа
Пицца на дом
Обязательное поле
Заполните, чтобы получить...
Слово «форма» означает тип экрана — набор полей для заполнения. Человек и так видит, что перед ним форма. Назовите со смыслом: «Покупка Айфона».
Вместо требований и упрашиваний объясняйте пользу от заполнения в мире пользователя: «Курьер позвонит за час».
Слово «форма» означает тип экрана — набор полей для заполнения. Человек и так видит, что перед ним форма. Назовите со смыслом: «Покупка Айфона».
Вместо требований и упрашиваний объясняйте пользу от заполнения в мире пользователя: «Курьер позвонит за час».
Форма заказа
Пицца на дом
Обязательное поле
Заполните, чтобы получить...
Список литературы
Литература
Каталог обоев
Обои
Сборник хитов
Хиты
Если слово просто обозначает множество,
Если слово просто обозначает множество,
Список литературы
Литература
Каталог обоев
Обои
Сборник хитов
Хиты
статья, материал, публикация, пост
Статьи номера
О новых правилах бухучёта
Свежий пост
Только что в Москве
архив
Архив новостей
2007 год
Слова для классификации содержимого полезны в редакции, но для читателя они бессмысленны: в газете не бывает раздела «статьи».
Если мне нужна новость за прошлую неделю, мне в «архив» или ещё нет? В физическом мире есть архив, потому что документы занимают место. В электронном виде информация, в том числе старая, легко доступна. Вместо архива организуйте новости по времени, месту и теме.
Слова для классификации содержимого полезны в редакции, но для читателя они бессмысленны: в газете не бывает раздела «статьи».
Если мне нужна новость за прошлую неделю, мне в «архив» или ещё нет? В физическом мире есть архив, потому что документы занимают место. В электронном виде информация, в том числе старая, легко доступна. Вместо архива организуйте новости по времени, месту и теме.
статья, материал, публикация, пост
Статьи номера
О новых правилах бухучёта
Свежий пост
Только что в Москве
архив
Архив новостей
2007 год
здесь, сюда
Кликните здесь
Перейдите по ссылке
Введите пароль
Выберите оператора
Заказ такси
Квартиры посуточно
Пароль
Оператор
Эти слова указывают на элементы управления или призывают ими воспользоваться.
Но стандартные элементы уже своим видом подсказывают, что с ними делать. Подпишите их в соответствии с их синтаксической ролью.
О синтаксисе стандартных элементов:
Элементы управления 230
Эти слова указывают на элементы управления или призывают ими воспользоваться.
Но стандартные элементы уже своим видом подсказывают, что с ними делать. Подпишите их в соответствии с их синтаксической ролью.
здесь, сюда
Кликните здесь
Перейдите по ссылке
Введите пароль
Выберите оператора
Заказ такси
Квартиры посуточно
Пароль
Оператор
О синтаксисе стандартных элементов:
Элементы управления 230
Технические слова обычно встречаются в интерфейсе, когда пользователю уже и так нелегко. Сформулируйте по‑человечески.
Технозависимость 13
Язык роботов 297
Технические слова обычно встречаются в интерфейсе, когда пользователю уже и так нелегко. Сформулируйте по‑человечески.
Технозависимость 13
Язык роботов 297
Даже не все программисты знают, чем авторизация отличается от аутентификации. Используйте слово «вход», а если нужно уточнить — «вход с паролем».
Даже не все программисты знают, чем авторизация отличается от аутентификации. Используйте слово «вход», а если нужно уточнить — «вход с паролем».
успешный
Операция успешно завершена
Новая версия установлена
Если операция завершена безуспешно, она не завершена. Напишите, что сделано: «Деньги отправлены», «Заказ принят».
Стоп‑слова не обязательно убирать. Если вы понимаете, почему слово неудачное, но в вашем случае оно подходит лучше всего, оставляйте.
Подробнее о редактуре и стоп‑словах — в учебнике Максима Ильяхова.
Максим Ильяхов. Информационный стиль и редактура текста
Если операция завершена безуспешно, она не завершена. Напишите, что сделано: «Деньги отправлены», «Заказ принят».
успешный
Операция успешно завершена
Новая версия установлена
Стоп‑слова не обязательно убирать. Если вы понимаете, почему слово неудачное, но в вашем случае оно подходит лучше всего, оставляйте.
Подробнее о редактуре и стоп‑словах — в учебнике Максима Ильяхова.
Максим Ильяхов. Информационный стиль и редактура текста
Технозависимость 13
Представление (англ. view) — в базах данных виртуальная таблица, именованный запрос
Вот как на языке программы «Аутлук» будет «новых писем нет». В пустом списке выводится стандартное сообщение: «В этом представлении отсутствуют элементы для отображения».
В программе есть «представления», которые умеют отображать любые «элементы», не зная ничего об их природе.
Такой машинный язык — побочный эффект технозависимости.
Вот как на языке программы «Аутлук» будет «новых писем нет». В пустом списке выводится стандартное сообщение: «В этом представлении отсутствуют элементы для отображения».
В программе есть «представления», которые умеют отображать любые «элементы», не зная ничего об их природе.
Такой машинный язык — побочный эффект технозависимости.
Технозависимость 13
Представление (англ. view) — в базах данных виртуальная таблица, именованный запрос
Здесь имеется в виду, что «Мне нравится» — это логический атрибут объекта (лайк или есть, или нет). И по каким‑то причинам изменить значение этого атрибута не получилось. Живой человек никогда бы так это не сформулировал.
Иногда на экран вываливают технический мусор, непонятный обычному человеку.
Здесь имеется в виду, что «Мне нравится» — это логический атрибут объекта (лайк или есть, или нет). И по каким‑то причинам изменить значение этого атрибута не получилось. Живой человек никогда бы так это не сформулировал.
Иногда на экран вываливают технический мусор, непонятный обычному человеку.
Вместо прогрессбара Виндоус показывает некие номера операций обновления и даже путь к ветке системного реестра:
Вместо прогрессбара Виндоус показывает некие номера операций обновления и даже путь к ветке системного реестра:
Приложение Альфа‑банка после оплаты говорит «оплата зарегистрирована», что бы это ни значило. А в другом случае — использует технический термин «сессия».
Приложение Альфа‑банка после оплаты говорит «оплата зарегистрирована», что бы это ни значило. А в другом случае — использует технический термин «сессия».
Неразрешимое противоречие
Если проблему можно «проигнорировать», то почему компьютер не сделал этого сам?
И ладно ещё, когда глупое сообщение можно просто закрыть. Хуже, когда человека подобное окно вынуждает сделать выбор.
Неразрешимое противоречие
И ладно ещё, когда глупое сообщение можно просто закрыть. Хуже, когда человека подобное окно вынуждает сделать выбор.
Если проблему можно «проигнорировать», то почему компьютер не сделал этого сам?
Порой в интерфейс проникают сообщения, не имеющие никакого смысла с точки зрения пользователя. Страна Россия — есть.
А это — вообще не адрес электронной почты.
Порой в интерфейс проникают сообщения, не имеющие никакого смысла с точки зрения пользователя. Страна Россия — есть.
А это — вообще не адрес электронной почты.
Язык роботов получается при механическом составлении предложений.
Не все даже сразу поймут, что не так с заголовком: компьютеры нас приучили расшифровывать подобные конструкции, а должно быть наоборот.
Этот заголовок — набор слов, разделённых случайно расставленными знаками препинания. Его даже невозможно прочитать вслух.
Язык роботов получается при механическом составлении предложений.
Не все даже сразу поймут, что не так с заголовком: компьютеры нас приучили расшифровывать подобные конструкции, а должно быть наоборот.
Этот заголовок — набор слов, разделённых случайно расставленными знаками препинания. Его даже невозможно прочитать вслух.
Механическая сборка фраз особенно плохо работает с русским языком. Чтобы избежать склонения слов, авторы изобретают противоестественные конструкции — вместо «2 письма» и «5 писем» пишут «писем: 2».
Двоеточие в интерфейсе стало универсальным разделителем, почему‑то помогающим авторам смириться с нечеловечностью текста.
Артемий Лебедев.
Здравствуйте, с вами говорит робот
На следующем языке: русский
На следующем языке: русский
Механическая сборка фраз особенно плохо работает с русским языком. Чтобы избежать склонения слов, авторы изобретают противоестественные конструкции — вместо «2 письма» и «5 писем» пишут «писем: 2».
Двоеточие в интерфейсе стало универсальным разделителем, почему‑то помогающим авторам смириться с нечеловечностью текста.
Артемий Лебедев.
Здравствуйте, с вами говорит робот
Иногда кажется, что создатели сами ни разу даже не посмотрели на интерфейс, который сделали. Иначе чем можно объяснить такое окно?
Иногда кажется, что создатели сами ни разу даже не посмотрели на интерфейс, который сделали. Иначе чем можно объяснить такое окно?
Ещё один источник машинного языка — непредусмотренные шаблоном случаи.
На карте стандартов телевещания видно, что в России — SECAM, в Америке — NTSC, в Австралии — PAL. А вот в какой системе смотрят телевидение пингвины — таких данных у Википедии будто бы нет. Здесь использован шаблон Википедии, генерирующий карту из имеющихся данных. Где данных нет, так и написано.
Если бы иллюстрацию делал человек, Антарктиду бы просто не рисовали, и в легенде бы не было квадратика «нет данных».
Википедия
Википедия
Ещё один источник машинного языка — непредусмотренные шаблоном случаи.
На карте стандартов телевещания видно, что в России — SECAM, в Америке — NTSC, в Австралии — PAL. А вот в какой системе смотрят телевидение пингвины — таких данных у Википедии будто бы нет. Здесь использован шаблон Википедии, генерирующий карту из имеющихся данных. Где данных нет, так и написано.
Если бы иллюстрацию делал человек, Антарктиду бы просто не рисовали, и в легенде бы не было квадратика «нет данных».
Спросить у пользователя подтверждение стандартным диалоговым окном Виндоуса — это одна строчка кода. Не нужно подбирать иконку, располагать и подписывать кнопки — достаточно передать системе сам текст задаваемого вопроса. Когда программист забывает посмотреть, что у него получилось, случается курьёз.
Что нажимать? Когда я показываю этот пример на курсе, все хором говорят «Крестик!».
Спросить у пользователя подтверждение стандартным диалоговым окном Виндоуса — это одна строчка кода. Не нужно подбирать иконку, располагать и подписывать кнопки — достаточно передать системе сам текст задаваемого вопроса. Когда программист забывает посмотреть, что у него получилось, случается курьёз.
Что нажимать? Когда я показываю этот пример на курсе, все хором говорят «Крестик!».
Компьютеры приучают людей не только понимать язык роботов, но и самих говорить на нём. Пользователи Фейсбука пишут имена друг друга в именительном падеже, чтобы Фейсбук опознал имя и сделал его ссылкой.
А как ответить на вопрос «Человек ли вы?» Ответ «Да» неверен, следует ответить LVccU.
Компьютеры приучают людей не только понимать язык роботов, но и самих говорить на нём. Пользователи Фейсбука пишут имена друг друга в именительном падеже, чтобы Фейсбук опознал имя и сделал его ссылкой.
А как ответить на вопрос «Человек ли вы?» Ответ «Да» неверен, следует ответить LVccU.
Подобрать правильный падеж существительного к числительному (2 комментария, 5 комментариев) — это несколько строк кода. Не стоит лениться их писать. ВК умеет даже склонять имена людей, что намного сложнее.
Скоро понятие «язык роботов» потеряет смысл: роботы научатся говорить как люди и даже лучше.
Роботы как люди, а не наоборот
Подобрать правильный падеж существительного к числительному (2 комментария, 5 комментариев) — это несколько строк кода. Не стоит лениться их писать. ВК умеет даже склонять имена людей, что намного сложнее.
Скоро понятие «язык роботов» потеряет смысл: роботы научатся говорить как люди и даже лучше.
Роботы как люди, а не наоборот
Подписи чекбоксов или радиокнопок в группе обязательно должны быть:
В синтаксисе элементов интерфейса чекбоксы и радиокнопки — второстепенные члены предложения. Если они объединены в группу, они должны быть однородными.
Выберите примеры с недостатками в тексте подписей элементов управления.
Конструкции вроде «нажмите, если» избыточны — достаточно подписать кнопки «Да» и «Нет». Ссылка «сюда» неинформативна. Кнопка «Повторите попытку» подписана в повелительном наклонении, причём это повеление обращено не к компьютеру, а к пользователю. А вот пример с кнопкой «Проверить» — хороший: её подпись безупречно сочетается с заголовком окна.
Как можно перевести кнопку Copy на русский?
Функции кнопки — команда, статус и навигация. Из предложенных вариантов подходят «Скопировать» (команда, глагольное сказуемое) и «Копия» (статус, именное сказуемое), а остальные не подходят.
Как можно перевести чекбокс Copy на русский? Этот чекбокс — часть группы.
Функции чекбокса — выбор объекта или свойства и уточнение действия. Из предложенных вариантов подходят «Скопировать» (уточнение действия) и «Копия» (объект или свойство). Остальные не подходят.
Выберите наилучший вариант подписи к полю ввода города доставки.
Функции поля ввода — это выбор, уточнение, ввод текста и чисел. Допустимы несколько вариантов, но нужно выбрать наилучший, и это вариант «Город». При такой подписи значение поля ввода будет приложением, отвечать на вопрос «Какой именно?», а вместе подпись и значение будут образовывать словосочетание, например «Город Москва». Другие варианты избыточны или просто некорректны.
Выберите верные утверждения.
Команда — это глагол совершенного вида в начальной форме: «Сохранить», «Закрыть», «Отправить». Радиокнопки в группе могут быть разными частями речи: «Город Москва / Питер / другой». В поле ввода может быть подлежащее, например поисковый запрос: музыка. Остальные утверждения неверны.
Как сделать пиктограммы из этого набора более различимыми?
Нужно убрать повторяющиеся части, мешающие различать пиктограммы, то есть мишек.
Выберите стоп‑слова в этом интерфейсе.
Все ответы правильные. «Пожалуйста» и «требуется» нужно заменить на объяснение в мире пользователя. «Данные учётной записи» — тяжеловесный технический термин. «Перейдите» — избыточно в тексте ссылки.
Сайт поздравляет пользователей с праздниками. Тех, чей пол он не знает, поздравляет вот так. Как улучшить это с точки зрения человечности и информационного стиля?
Вместо требования обязательно заполнить поле объясните его пользу. И пусть потеет машина: пол следует сначала попытаться определить по имени и фамилии автоматически. Даже если вы дизайнер, за орфографией нужно следить.
Какие причины появления языка роботов в интерфейсе перечислены автором?
Закон Фиттса и взгляд новичка ни при чём, а остальное действительно ведёт к появлению языка роботов в интерфейсе.
Подписи чекбоксов или радиокнопок в группе обязательно должны быть:
В синтаксисе элементов интерфейса чекбоксы и радиокнопки — второстепенные члены предложения. Если они объединены в группу, они должны быть однородными.
Выберите примеры с недостатками в тексте подписей элементов управления.
Конструкции вроде «нажмите, если» избыточны — достаточно подписать кнопки «Да» и «Нет». Ссылка «сюда» неинформативна. Кнопка «Повторите попытку» подписана в повелительном наклонении, причём это повеление обращено не к компьютеру, а к пользователю. А вот пример с кнопкой «Проверить» — хороший: её подпись безупречно сочетается с заголовком окна.
Как можно перевести кнопку Copy на русский?
Функции кнопки — команда, статус и навигация. Из предложенных вариантов подходят «Скопировать» (команда, глагольное сказуемое) и «Копия» (статус, именное сказуемое), а остальные не подходят.
Как можно перевести чекбокс Copy на русский? Этот чекбокс — часть группы.
Функции чекбокса — выбор объекта или свойства и уточнение действия. Из предложенных вариантов подходят «Скопировать» (уточнение действия) и «Копия» (объект или свойство). Остальные не подходят.
Выберите наилучший вариант подписи к полю ввода города доставки.
Функции поля ввода — это выбор, уточнение, ввод текста и чисел. Допустимы несколько вариантов, но нужно выбрать наилучший, и это вариант «Город». При такой подписи значение поля ввода будет приложением, отвечать на вопрос «Какой именно?», а вместе подпись и значение будут образовывать словосочетание, например «Город Москва». Другие варианты избыточны или просто некорректны.
Выберите верные утверждения.
Команда — это глагол совершенного вида в начальной форме: «Сохранить», «Закрыть», «Отправить». Радиокнопки в группе могут быть разными частями речи: «Город Москва / Питер / другой». В поле ввода может быть подлежащее, например поисковый запрос: музыка. Остальные утверждения неверны.
Как сделать пиктограммы из этого набора более различимыми?
Нужно убрать повторяющиеся части, мешающие различать пиктограммы, то есть мишек.
Выберите стоп‑слова в этом интерфейсе.
Все ответы правильные. «Пожалуйста» и «требуется» нужно заменить на объяснение в мире пользователя. «Данные учётной записи» — тяжеловесный технический термин. «Перейдите» — избыточно в тексте ссылки.
Сайт поздравляет пользователей с праздниками. Тех, чей пол он не знает, поздравляет вот так. Как улучшить это с точки зрения человечности и информационного стиля?
Вместо требования обязательно заполнить поле объясните его пользу. И пусть потеет машина: пол следует сначала попытаться определить по имени и фамилии автоматически. Даже если вы дизайнер, за орфографией нужно следить.
Какие причины появления языка роботов в интерфейсе перечислены автором?
Закон Фиттса и взгляд новичка ни при чём, а остальное действительно ведёт к появлению языка роботов в интерфейсе.
Окна
Формы
Навигация
Сетка
Окна
Формы
Навигация
Сетка
В первой версии системы «Виндоус», название которой буквально значит «окна», экран был разделён на неперекрывающиеся части, в каждой из которых могла выполняться своя программа. Конфигурация 2 × 2 даже стала основой для логотипа системы.
Обложка брошюры о Виндоусе, 1986
Скан Майкла Холли
Обложка брошюры о Виндоусе, 1986
Скан Майкла Холли
В первой версии системы «Виндоус», название которой буквально значит «окна», экран был разделён на неперекрывающиеся части, в каждой из которых могла выполняться своя программа. Конфигурация 2 × 2 даже стала основой для логотипа системы.
Окно — самостоятельная область экрана с элементами управления. В окне может выполняться отдельная программа, оно может представлять отдельный документ или самостоятельную функцию программы.
В 2017 году, когда мы говорим «окна», мы подразумеваем перекрывающиеся окна, у которых размер и положение можно выбирать произвольно.
Пространство, по которому перемещаются окна, называется «рабочим столом».
Окно — самостоятельная область экрана с элементами управления. В окне может выполняться отдельная программа, оно может представлять отдельный документ или самостоятельную функцию программы.
В 2017 году, когда мы говорим «окна», мы подразумеваем перекрывающиеся окна, у которых размер и положение можно выбирать произвольно.
Пространство, по которому перемещаются окна, называется «рабочим столом».
Программы используют окна по‑разному.
Многодокументный интерфейс
Однодокументный интерфейс
Некоторые программы содержат внутри своего окна несколько других окон с документами. Область перемещения таких окон ограничена размерами родительского окна.
Другие программы предоставляют каждому документу независимое окно на рабочем столе.
Показанный здесь «Ворд» в разных версиях поддерживал разные подходы.
Программы используют окна по‑разному.
Многодокументный интерфейс
Некоторые программы содержат внутри своего окна несколько других окон с документами. Область перемещения таких окон ограничена размерами родительского окна.
Однодокументный интерфейс
Другие программы предоставляют каждому документу независимое окно на рабочем столе.
Показанный здесь «Ворд» в разных версиях поддерживал разные подходы.
Установка пароля в Макосе 9
Когда нужно сообщить пользователю информацию, попросить его ввести дополнительные данные, выбрать объект действия или ответить на вопрос, программы показывают диалоговое окно. Диалоговые окна обычно модальные и небольшого размера.
Выбор цвета в Виндоусе 95
О вреде подтверждений:
Привычка 25
О модальных окнах:
Модальность 41
Установка пароля в Макосе 9
Выбор цвета в Виндоусе 95
Когда нужно сообщить пользователю информацию, попросить его ввести дополнительные данные, выбрать объект действия или ответить на вопрос, программы показывают диалоговое окно. Диалоговые окна обычно модальные и небольшого размера.
О вреде подтверждений:
Привычка 25
О модальных окнах:
Модальность 41
Это диалоговое окно рассказывает о программе.
А это — сообщает об ошибке. Такой способ информирования пользователя — пример грубой обратной связи.
Обратная связь 147
Это диалоговое окно рассказывает о программе.
А это — сообщает об ошибке. Такой способ информирования пользователя — пример грубой обратной связи.
Обратная связь 147
Бывает, что программа показывает в окнах не документы, а иконки функций и другие элементы управления. Такие окна иногда называют «панелями инструментов» или «палитрами».
«Палитры» Фотошопа
«Палитры» Фотошопа
Бывает, что программа показывает в окнах не документы, а иконки функций и другие элементы управления. Такие окна иногда называют «панелями инструментов» или «палитрами».
Страница и её исходный код
Страница, её исходный код, терминал
Страница, код, терминал, файлы
Окна помогают одновременной работе с несколькими программами или документами: сравнению текста, перемещению файлов между папками, фоновому слежению за новостями. Но удобное размещение окон требует от пользователя аккуратности и терпения — хорошо получится после нескольких проб и ошибок.
Страница и её исходный код
Страница, её исходный код, терминал
Страница, код, терминал, файлы
Окна помогают одновременной работе с несколькими программами или документами: сравнению текста, перемещению файлов между папками, фоновому слежению за новостями. Но удобное размещение окон требует от пользователя аккуратности и терпения — хорошо получится после нескольких проб и ошибок.
Разработчики интерфейса часто злоупотребляют окнами, сваливая на пользователя работу по расположению частей интерфейса. Это выдаётся за заботу: «пользователь расставит, как ему удобно». Большинство пользователей не знают или не задумываются над тем, как будет удобнее всего, и в результате у многих — бардак.
Бездумное использование отдельных окон для каждой функции — такая же технозависимость, как линейные тулбары.
О линейном представлении функций программы:
Технозависимость 21
Среда разработки «Делфи 4». Три основных рабочих окна мешают друг другу, а если открыть все окна, на экране будет настоящий бардак
Среда разработки «Делфи 4». Три основных рабочих окна мешают друг другу, а если открыть все окна, на экране будет настоящий бардак
Разработчики интерфейса часто злоупотребляют окнами, сваливая на пользователя работу по расположению частей интерфейса. Это выдаётся за заботу: «пользователь расставит, как ему удобно». Большинство пользователей не знают или не задумываются над тем, как будет удобнее всего, и в результате у многих — бардак.
Бездумное использование отдельных окон для каждой функции — такая же технозависимость, как линейные тулбары.
О линейном представлении функций программы:
Технозависимость 21
Фотошоп Артёма Горбунова
Управление окнами не относится к задаче пользователя. В программах с несколькими окнами пользователи вынуждены раздвигать их туда‑сюда, чтобы добраться до нужного или увидеть то, что они ищут. Это борьба с интерфейсом.
Работа дизайнера — найти конфигурацию, при которой всё, что нужно, было бы перед глазами и не требовало «разгребания».
Фотошоп Артёма Горбунова
Управление окнами не относится к задаче пользователя. В программах с несколькими окнами пользователи вынуждены раздвигать их туда‑сюда, чтобы добраться до нужного или увидеть то, что они ищут. Это борьба с интерфейсом.
Работа дизайнера — найти конфигурацию, при которой всё, что нужно, было бы перед глазами и не требовало «разгребания».
Дизайнер не поработал
Дизайнер поработал
Не стоит рассчитывать, что пользователь сам сделает хорошо. Придумать удобную компоновку главного окна программы — работа дизайнера. Если компоновка зависит от данных, автоматически выбирать подходящую. Если возможны разные сценарии, предусмотреть две‑три удобные схемы на выбор.
Стабильная конфигурация окна помогает выработать привычку.
Возможность располагать окна как угодно стоит вводить в последнюю очередь.
Привычка 25
Дизайнер не поработал
Не стоит рассчитывать, что пользователь сам сделает хорошо. Придумать удобную компоновку главного окна программы — работа дизайнера. Если компоновка зависит от данных, автоматически выбирать подходящую. Если возможны разные сценарии, предусмотреть две‑три удобные схемы на выбор.
Дизайнер поработал
Стабильная конфигурация окна помогает выработать привычку.
Возможность располагать окна как угодно стоит вводить в последнюю очередь.
Привычка 25
Ай‑си‑кью, 2000
Телеграм, 2017
В старых мессенджерах были отдельные окна для списка контактов и для каждого чата. Если кто‑то передавал файл, появлялось отдельное окно для отслеживания прогресса.
Современный мессенджер умещается в одном окне. Список диалогов слева, открытый диалог справа. Файл передаётся прямо в тексте диалога.
Ай‑си‑кью, 2000
В старых мессенджерах были отдельные окна для списка контактов и для каждого чата. Если кто‑то передавал файл, появлялось отдельное окно для отслеживания прогресса.
Телеграм, 2017
Современный мессенджер умещается в одном окне. Список диалогов слева, открытый диалог справа. Файл передаётся прямо в тексте диалога.
Конфигурация «список — объект» знакома по многим программам: почта, чат, заметки.
Создание презентации в «Кейноуте». Слева список слайдов, справа открытый слайд
Создание презентации в «Кейноуте». Слева список слайдов, справа открытый слайд
Конфигурация «список — объект» знакома по многим программам: почта, чат, заметки.
Иногда имеет смысл одновременная работа с несколькими элементами — письмами, диалогами, заметками. Тогда пригодится возможность открыть их в отдельных окнах — обычно для этого используют двойной клик. Без необходимости окна не плодятся.
Почта. Всё умещается в одном окне, но при желании любое письмо можно открыть в отдельном
Почта. Всё умещается в одном окне, но при желании любое письмо можно открыть в отдельном
Иногда имеет смысл одновременная работа с несколькими элементами — письмами, диалогами, заметками. Тогда пригодится возможность открыть их в отдельных окнах — обычно для этого используют двойной клик. Без необходимости окна не плодятся.
«Инспектор» в Скетче
Настройку и фильтры можно собрать на аккуратной панели справа, а не на многочисленных плавающих палитрах.
«Инспектор» в Скетче
Настройку и фильтры можно собрать на аккуратной панели справа, а не на многочисленных плавающих палитрах.
Ещё один шаблон — «навигация снизу». Чаще всего применяется для листания фотографий, но подойдёт для перемещения по любой линейной последовательности. В «Лайтруме» этот шаблон совмещён с шаблонами «список — объект» и «настройка справа».
Чем сложнее деление окна, тем сложнее догадаться о связи между зонами. Фотографии снизу — из коллекции, выбранной слева. А настройка относится к выбранной фотографии.
Ещё один шаблон — «навигация снизу». Чаще всего применяется для листания фотографий, но подойдёт для перемещения по любой линейной последовательности. В «Лайтруме» этот шаблон совмещён с шаблонами «список — объект» и «настройка справа».
Чем сложнее деление окна, тем сложнее догадаться о связи между зонами. Фотографии снизу — из коллекции, выбранной слева. А настройка относится к выбранной фотографии.
Браузер «Опера» одним из первых научился показывать несколько страниц в одном окне. Но сначала он использовал многодокументный интерфейс, то есть окна внутри родительского окна.
Такой дизайн не стал популярным.
Браузер «Опера» одним из первых научился показывать несколько страниц в одном окне. Но сначала он использовал многодокументный интерфейс, то есть окна внутри родительского окна.
Такой дизайн не стал популярным.
Потом разработчики браузеров придумали объединить страницы в одно окно со вкладками, которые постепенно стали стандартом во всех браузерах.
Вкладки — ещё один способ организовать пространство без умножения окон.
При необходимости любая вкладка «отрывается» и превращается в отдельное окно.
Потом разработчики браузеров придумали объединить страницы в одно окно со вкладками, которые постепенно стали стандартом во всех браузерах.
Вкладки — ещё один способ организовать пространство без умножения окон.
При необходимости любая вкладка «отрывается» и превращается в отдельное окно.
В режиме сравнения версий файла редактор кода «ВС Код» делит экран пополам.
Это не мешает открывать файлы в отдельных окнах, когда нужно.
В режиме сравнения версий файла редактор кода «ВС Код» делит экран пополам.
Это не мешает открывать файлы в отдельных окнах, когда нужно.
Классический пример деления пополам — Нортон Командер. Две папки на диске показываются в одинаковых панелях равного размера.
В настройке программ встречается такой приём: в одной половине окна показывают доступные элементы, а в другой — выбранные пользователем, и дают перемещать элементы из списка в список. Пример — из «Ворда».
Классический пример деления пополам — Нортон Командер. Две папки на диске показываются в одинаковых панелях равного размера.
В настройке программ встречается такой приём: в одной половине окна показывают доступные элементы, а в другой — выбранные пользователем, и дают перемещать элементы из списка в список. Пример — из «Ворда».
Деление видов в программах трёхмерного моделирования напоминает расположение проекций на чертежах.
3Д‑студия Макс. Фрагмент
3Д‑студия Макс. Фрагмент
Деление видов в программах трёхмерного моделирования напоминает расположение проекций на чертежах.
В зависимости от программы и даже текущей задачи, конфигурация зон внутри окна может быть сложнее.
+
+
В видеоредакторе «Финал‑кат» слева сверху библиотека видеозаписей в формате «список — объект», справа сверху — зона просмотра монтируемого видео с «настройкой справа», а «навигация снизу» — линия времени, на которой и идёт монтаж.
В зависимости от программы и даже текущей задачи, конфигурация зон внутри окна может быть сложнее.
В видеоредакторе «Финал‑кат» слева сверху библиотека видеозаписей в формате «список — объект», справа сверху — зона просмотра монтируемого видео с «настройкой справа», а «навигация снизу» — линия времени, на которой и идёт монтаж.
+
+
В диджейской программе «Трактор» сверху расположена панель эффектов, а под ней — две деки. Расставить зоны как угодно нельзя, но есть несколько типовых конфигураций.
Если включить встроенный микшер, деки сплющиваются и освобождают для него место — это напоминает расположение приборов на диджейском столе.
При выборе трека медиатека, обычно прижатая к низу окна, разворачивается, а деки схлопываются. Медиатека организована в формате «список — объект».
Трактор. Две деки
Трактор. Две деки и пульт
Трактор. Выбор трека
Трактор. Две деки
Трактор. Две деки и пульт
Трактор. Выбор трека
В диджейской программе «Трактор» сверху расположена панель эффектов, а под ней — две деки. Расставить зоны как угодно нельзя, но есть несколько типовых конфигураций.
Если включить встроенный микшер, деки сплющиваются и освобождают для него место — это напоминает расположение приборов на диджейском столе.
При выборе трека медиатека, обычно прижатая к низу окна, разворачивается, а деки схлопываются. Медиатека организована в формате «список — объект».
Программа «Секьюридж» — рабочее место оператора пультовой охраны. Оператор следит за объектами и направляет группы быстрого реагирования. В программе одно окно, причём оно всегда развёрнуто на весь экран — оператору ни к чему обращаться к другим программам.
В основе дизайна программы — привычная схема «список — объект». В списке слева — сигналы, приходящие с охраняемых объектов. С помощью вкладок оператор выбирает, какие сигналы будут показаны в верхней части списка. Снизу всегда показаны необработанные тревожные сигналы — это то, что всегда должно быть в поле зрения.
При выделении любого сигнала в списке, справа открывается карточка объекта, с которого сигнал пришёл. Она тоже делится на зоны. Сверху — карта, на которой показан объект и ближайшие группы быстрого реагирования. Ниже — информация об объекте. В самом низу — «залипшая» панель отработки тревоги. После выезда группы оператор здесь указывает, что случилось на объекте.
Также к левой стороне экрана прижата панель быстрого поиска объекта по номеру, а к правой — панель групп быстрого реагирования, где оператор выбирает, кого отправить на объект.
Оператор во время работы видит всё, что нужно, и не тратит время на управление интерфейсом.
О пользе прижатия панелей к краям экрана:
Прицеливание 113
Программа «Секьюридж» — рабочее место оператора пультовой охраны. Оператор следит за объектами и направляет группы быстрого реагирования. В программе одно окно, причём оно всегда развёрнуто на весь экран — оператору ни к чему обращаться к другим программам.
В основе дизайна программы — привычная схема «список — объект». В списке слева — сигналы, приходящие с охраняемых объектов. С помощью вкладок оператор выбирает, какие сигналы будут показаны в верхней части списка. Снизу всегда показаны необработанные тревожные сигналы — это то, что всегда должно быть в поле зрения.
При выделении любого сигнала в списке, справа открывается карточка объекта, с которого сигнал пришёл. Она тоже делится на зоны. Сверху — карта, на которой показан объект и ближайшие группы быстрого реагирования. Ниже — информация об объекте. В самом низу — «залипшая» панель отработки тревоги. После выезда группы оператор здесь указывает, что случилось на объекте.
Также к левой стороне экрана прижата панель быстрого поиска объекта по номеру, а к правой — панель групп быстрого реагирования, где оператор выбирает, кого отправить на объект.
Оператор во время работы видит всё, что нужно, и не тратит время на управление интерфейсом.
О пользе прижатия панелей к краям экрана:
Прицеливание 113
Когда дизайнеру нужно добавить в программу что‑то новое, проще всего сделать «попап» — временное окно, открывающееся поверх существующего интерфейса для конкретной задачи.
На этом экране «Высшей школы главбуха» организатор теста просматривает результаты участников. Возникла задача не просто показать результаты тестов, но и как участник ответил на конкретные вопросы.
Первое, что пришло в голову — сделать такой попап с подробностями. Но это плохое решение.
Когда дизайнеру нужно добавить в программу что‑то новое, проще всего сделать «попап» — временное окно, открывающееся поверх существующего интерфейса для конкретной задачи.
На этом экране «Высшей школы главбуха» организатор теста просматривает результаты участников. Возникла задача не просто показать результаты тестов, но и как участник ответил на конкретные вопросы.
Первое, что пришло в голову — сделать такой попап с подробностями. Но это плохое решение.
Попап — самое тупое, что можно сделать
Артём Горбунов сформулировал «теорему о попапах» во внутреннем обсуждении бюро: «Доказать это очень просто. Прямоугольник — базовая примитивная форма для чего угодно. А когда не знаешь, куда пристроить новую функцию, проще всего сделать прямоугольник с этой функцией поверх всего. Это всё равно что прислонить холодильник к автомобилю и сказать, что у нас в машине теперь есть кондиционер. Сделать всплывающее окно не требует никаких интеллектуальных усилий от дизайнера. При этом оно перекрывает что‑то полезное, настойчиво требует внимания и прицельного действия, чтобы от себя избавиться».
Когда в уже свёрстанную визитку или полосу журнала нужно что‑то добавить, приходится искать новую компоновку. А на экране можно просто поставить новый элемент поверх старых. Но интерфейс с попапами кажется «не сдизайненным»: дизайнер не нашёл места элементам, а полностью положился на волшебство экрана.
Попап — самое тупое, что можно сделать
Артём Горбунов сформулировал «теорему о попапах» во внутреннем обсуждении бюро: «Доказать это очень просто. Прямоугольник — базовая примитивная форма для чего угодно. А когда не знаешь, куда пристроить новую функцию, проще всего сделать прямоугольник с этой функцией поверх всего. Это всё равно что прислонить холодильник к автомобилю и сказать, что у нас в машине теперь есть кондиционер. Сделать всплывающее окно не требует никаких интеллектуальных усилий от дизайнера. При этом оно перекрывает что‑то полезное, настойчиво требует внимания и прицельного действия, чтобы от себя избавиться».
Когда в уже свёрстанную визитку или полосу журнала нужно что‑то добавить, приходится искать новую компоновку. А на экране можно просто поставить новый элемент поверх старых. Но интерфейс с попапами кажется «не сдизайненным»: дизайнер не нашёл места элементам, а полностью положился на волшебство экрана.
Итак, в этом интерфейсе нам нужно было найти место для просмотра ответов на тест конкретного участника.
На экране уже есть список участников, а ответы участника логически ему подчинены. Напрашивается конструкция «список — объект», но справа от участников нет на это места.
Решение — при клике сдвинуть участников левее и показать вложенность анимацией.
Внутри ответы сгруппированы по темам, которые распахиваются снизу.
Анимация делает придуманное пространственное решение наглядным. Экранное волшебство становится последовательным.
Последовательное волшебство 62
Итак, в этом интерфейсе нам нужно было найти место для просмотра ответов на тест конкретного участника.
На экране уже есть список участников, а ответы участника логически ему подчинены. Напрашивается конструкция «список — объект», но справа от участников нет на это места.
Решение — при клике сдвинуть участников левее и показать вложенность анимацией.
Внутри ответы сгруппированы по темам, которые распахиваются снизу.
Анимация делает придуманное пространственное решение наглядным. Экранное волшебство становится последовательным.
Последовательное волшебство 62
Вордпад
ВС Код
Во многих программах поиск был реализован как немодальное диалоговое окно, появляющееся прямо поверх содержимого, в котором нужно искать.
Более удачен дизайн, где поиск «вырастает» из верхней части окна в виде однострочной полоски.
Вордпад
Во многих программах поиск был реализован как немодальное диалоговое окно, появляющееся прямо поверх содержимого, в котором нужно искать.
ВС Код
Более удачен дизайн, где поиск «вырастает» из верхней части окна в виде однострочной полоски.
Обычно пароль спрашивают в модальном окне. При этом привычно видеть поле пароля под полем имени. Для «Секьюриджа» такое решение не подошло: даже во время передачи поста другому оператору всё должно быть на виду.
Здесь используется немодальный и однострочный дизайн. Программа спрашивает имя и пароль прямо в строке меню. Непривычно, но зато всё управление остаётся доступным.
Привычка 25
Обычно пароль спрашивают в модальном окне. При этом привычно видеть поле пароля под полем имени. Для «Секьюриджа» такое решение не подошло: даже во время передачи поста другому оператору всё должно быть на виду.
Здесь используется немодальный и однострочный дизайн. Программа спрашивает имя и пароль прямо в строке меню. Непривычно, но зато всё управление остаётся доступным.
Привычка 25
У деления окна на зоны тоже есть предел. Когда окно программы начинает напоминать картину Мондриана, пользователь перестаёт понимать, как связаны разные зоны и что на что влияет.
Пит Мондриан. Композиция с большой красной плоскостью, жёлтым, чёрным, серым и синим, 1921
У деления окна на зоны тоже есть предел. Когда окно программы начинает напоминать картину Мондриана, пользователь перестаёт понимать, как связаны разные зоны и что на что влияет.
Пит Мондриан. Композиция с большой красной плоскостью, жёлтым, чёрным, серым и синим, 1921
Форма — концентрат интерфейса и большое препятствие для пользователя. Одно дело лениво кликать по ссылкам и крутить странички, а другое дело — думать, что вписать, чтобы получить нужный результат, а не нарваться на ошибку.
С формами жизнь на волоске. Дизайнер Людвиг Быстроновский пишет: «Вечером стою у метро, смеркается, холодно, покупаю через смартфон билет на эржедешном сайте. Тык‑тык‑тык. Вбиваю данные паспорта, всё время переключаюсь между программами, начинаю нервничать.
В конце процедуры жму случайно мимо инпута, попадаю пальцем в какой‑то левый банер, ухожу на другой сайт, прошу браузер вернуться — всё, капец, данные потеряны, начинаем всё сначала».
Если без формы не получается, задача проектировщика — упростить человеку её заполнение. На это влияет и конструкция, и поведение формы.
Форма — концентрат интерфейса и большое препятствие для пользователя. Одно дело лениво кликать по ссылкам и крутить странички, а другое дело — думать, что вписать, чтобы получить нужный результат, а не нарваться на ошибку.
С формами жизнь на волоске. Дизайнер Людвиг Быстроновский пишет: «Вечером стою у метро, смеркается, холодно, покупаю через смартфон билет на эржедешном сайте. Тык‑тык‑тык. Вбиваю данные паспорта, всё время переключаюсь между программами, начинаю нервничать.
В конце процедуры жму случайно мимо инпута, попадаю пальцем в какой‑то левый банер, ухожу на другой сайт, прошу браузер вернуться — всё, капец, данные потеряны, начинаем всё сначала».
Если без формы не получается, задача проектировщика — упростить человеку её заполнение. На это влияет и конструкция, и поведение формы.
Было
Хорошая вёрстка формы вызывает доверие. Сравните эти две формы интерфейса флюорографического комплекса «ПроСкан». До редизайна поля карточки пациента стояли как попало и были какого попало размера — ими просто замощалось пространство экрана.
Стало
После редизайна те же поля собрались в последовательность и стали занимать небольшую колонку в правой части окна.
Было
Хорошая вёрстка формы вызывает доверие. Сравните эти две формы интерфейса флюорографического комплекса «ПроСкан». До редизайна поля карточки пациента стояли как попало и были какого попало размера — ими просто замощалось пространство экрана.
Стало
После редизайна те же поля собрались в последовательность и стали занимать небольшую колонку в правой части окна.
В этой форме нет прямого пути к цели. Такую вёрстку полей в бюро называют «кирпичной кладкой». Заполнять неприятно: всё время думаешь, не пропустил ли что.
Лучше ставить поля друг под другом.
О расположении радиокнопок:
Близость 93
О подписях внутри полей:
Взгляд новичка 81
В этой форме нет прямого пути к цели. Такую вёрстку полей в бюро называют «кирпичной кладкой». Заполнять неприятно: всё время думаешь, не пропустил ли что.
Лучше ставить поля друг под другом.
О расположении радиокнопок:
Близость 93
О подписях внутри полей:
Взгляд новичка 81
В этой форме покупки билета на итальянский поезд одинаковые по размеру поля стоят на одинаковом расстоянии. Из‑за этой монотонности кажется, что полей слишком много. Если разделить их на две‑три группы, будет проще.
Список принимаемых карт тоже оформлен как одно из полей; имя с фамилией разделены — это тоже удлиняет форму зря. Кнопка отмены не нужна — кто передумает покупать билет, просто уйдёт.
О группировке полей:
Близость 95
В этой форме покупки билета на итальянский поезд одинаковые по размеру поля стоят на одинаковом расстоянии. Из‑за этой монотонности кажется, что полей слишком много. Если разделить их на две‑три группы, будет проще.
Список принимаемых карт тоже оформлен как одно из полей; имя с фамилией разделены — это тоже удлиняет форму зря. Кнопка отмены не нужна — кто передумает покупать билет, просто уйдёт.
О группировке полей:
Близость 95
Хорошо
Плохо
Плохо
Хорошо
Хорошо
Подпись и текст полей набирают одним шрифтом и ставят на общую базовую линию.
Длинная подпись может перенестись на две строки. Бывает, что она сползает вверх и выравнивается вертикально с серединой поля. Когда строк две, проблемы можно не заметить, решив, что подпись «как раз» сравнялась по высоте с полем.
Но когда строк больше, из‑за центровки уже сами поля начинают сползать по вертикали. При этом это сползание будет происходить при изменении размеров окна — форма будет выглядеть расхлябанно.
Первая строка подписи должна всегда оставаться на месте.
Тот же принцип с многострочными полями: подпись стоит на базовой линии с первой строкой.
Хорошо
Плохо
Плохо
Хорошо
Хорошо
Подпись и текст полей набирают одним шрифтом и ставят на общую базовую линию.
Длинная подпись может перенестись на две строки. Бывает, что она сползает вверх и выравнивается вертикально с серединой поля. Когда строк две, проблемы можно не заметить, решив, что подпись «как раз» сравнялась по высоте с полем.
Но когда строк больше, из‑за центровки уже сами поля начинают сползать по вертикали. При этом это сползание будет происходить при изменении размеров окна — форма будет выглядеть расхлябанно.
Первая строка подписи должна всегда оставаться на месте.
Тот же принцип с многострочными полями: подпись стоит на базовой линии с первой строкой.
Криво
Ровно
Подписи иногда выравнивают по правому краю, чтобы они были ближе к своим полям. Но из‑за этого ломается левый край, читается труднее и выглядит неряшливее.
Эта форма имеет вид таблицы, поэтому подписи естественно выравнивать как боковик таблицы — по левому краю.
Близость 86
Криво
Подписи иногда выравнивают по правому краю, чтобы они были ближе к своим полям. Но из‑за этого ломается левый край, читается труднее и выглядит неряшливее.
Ровно
Эта форма имеет вид таблицы, поэтому подписи естественно выравнивать как боковик таблицы — по левому краю.
Близость 86
Если длинная подпись поля «распирает» форму, отодвигая остальные подписи от полей, то её стоит перенести или сократить.
Если длинная подпись поля «распирает» форму, отодвигая остальные подписи от полей, то её стоит перенести или сократить.
Если нет места на две колонки, подписи полей допустимо расположить над полями. Но на широких экранах лучше придерживаться «табличной» компоновки — с ней место расходуется более равномерно.
Форма в движке блога «Эгея» на большом экране и на экране телефона
Форма в движке блога «Эгея» на большом экране и на экране телефона
Если нет места на две колонки, подписи полей допустимо расположить над полями. Но на широких экранах лучше придерживаться «табличной» компоновки — с ней место расходуется более равномерно.
Размер полей подсказывает пользователю о том, чего от него ждут. Поле номера паспорта должно быть размером с номер паспорта. Поле адреса дома должно быть длинным, а адреса электронной почты — коротким.
Многострочное текстовое поле должно быть широким и высоким, чтобы человеку было комфортно написать как минимум абзац.
Размер полей подсказывает пользователю о том, чего от него ждут. Поле номера паспорта должно быть размером с номер паспорта. Поле адреса дома должно быть длинным, а адреса электронной почты — коротким.
Многострочное текстовое поле должно быть широким и высоким, чтобы человеку было комфортно написать как минимум абзац.
Порядок полей имеет большое значение.
Все привыкли, что пароль идёт сразу после имени пользователя. Поэтому эта форма
Имя, отчество и фамилия; серия и номер паспорта должны идти подряд.
Кнопка Таб должна вести по полям в том порядке, в котором они следуют на экране.
Порядок полей имеет большое значение.
Все привыкли, что пароль идёт сразу после имени пользователя. Поэтому эта форма
Имя, отчество и фамилия; серия и номер паспорта должны идти подряд.
Кнопка Таб должна вести по полям в том порядке, в котором они следуют на экране.
Если при заполнении пользователь допустил ошибку, не обязательно выводить об этом модальное сообщение — это слишком грубая обратная связь. Часто достаточно подсветить поле красным или обвести красной рамкой. На этом примере ошибка очевидна — скорее всего, человек просто случайно нажал не те кнопки.
О нежной обратной связи:
Обратная связь 154
Подсветка поля с ошибкой
Подсветка поля с ошибкой
Если при заполнении пользователь допустил ошибку, не обязательно выводить об этом модальное сообщение — это слишком грубая обратная связь. Часто достаточно подсветить поле красным или обвести красной рамкой. На этом примере ошибка очевидна — скорее всего, человек просто случайно нажал не те кнопки.
О нежной обратной связи:
Обратная связь 154
Сообщение об ошибке должно помогать человеку её исправить, а не давать ему оценку и наказывать.
Что имеет в виду «Аэрофлот» в этой форме? Что надо сделать, если я отношусь сразу к нескольким «типам пассажиров»?
Слова 285
Язык роботов 297
Сообщение об ошибке должно помогать человеку её исправить, а не давать ему оценку и наказывать.
Что имеет в виду «Аэрофлот» в этой форме? Что надо сделать, если я отношусь сразу к нескольким «типам пассажиров»?
Слова 285
Язык роботов 297
В этой форме записи на тест по английскому языку, спроектированной в бюро, пользователь ввёл неверный код — записаться на тест не получится. Но если пользователь уверен, что ввёл код правильно, текст ошибки хотя бы подсказывает ему, куда обращаться.
В этой форме записи на тест по английскому языку, спроектированной в бюро, пользователь ввёл неверный код — записаться на тест не получится. Но если пользователь уверен, что ввёл код правильно, текст ошибки хотя бы подсказывает ему, куда обращаться.
Текст ошибки следует выводить рядом с полем, в котором она допущена.
При этом если показывать ошибки под полями, то они будут «распирать» форму, отодвигая поля друг от друга.
Иногда этого пытаются избежать, отображая ошибки во всплывающих подсказках. Они навязчивы, залезают на соседние поля, а иногда и друг на друга. Бывает, их показывают по одному — в зависимости от того, какое поле в фокусе. Тогда раздражает их мигание.
Намного лучше заранее предусмотреть место для ошибок.
О модальных окнах:
Модальность 48
Теорема о попапах:
Окна 336
Текст ошибки следует выводить рядом с полем, в котором она допущена.
При этом если показывать ошибки под полями, то они будут «распирать» форму, отодвигая поля друг от друга.
Иногда этого пытаются избежать, отображая ошибки во всплывающих подсказках. Они навязчивы, залезают на соседние поля, а иногда и друг на друга. Бывает, их показывают по одному — в зависимости от того, какое поле в фокусе. Тогда раздражает их мигание.
Намного лучше заранее предусмотреть место для ошибок.
О модальных окнах:
Модальность 48
Теорема о попапах:
Окна 336
Ещё одна частая проблема — преждевременный вывод ошибок. Альфа‑банк начинает ругаться, как только я перевёл фокус в поле суммы.
Выводить сообщение об ошибке следует после выхода из поля. А если указан ноль, то ошибки вовсе нет: очевидно же, что пользователь не думал переводить ноль рублей. Нужно просто заблокировать кнопку перевода.
У всей строки очень низкая информативность: слово «сумма» написано трижды, присутствуют стоп‑слова «введите» и «подробнее», понятные из контекста слова «платёж» и «перевод», при этом минимальная допустимая сумма нигде не указана.
Информативность 126
Стоп‑слова 287
Ещё одна частая проблема — преждевременный вывод ошибок. Альфа‑банк начинает ругаться, как только я перевёл фокус в поле суммы.
Выводить сообщение об ошибке следует после выхода из поля. А если указан ноль, то ошибки вовсе нет: очевидно же, что пользователь не думал переводить ноль рублей. Нужно просто заблокировать кнопку перевода.
У всей строки очень низкая информативность: слово «сумма» написано трижды, присутствуют стоп‑слова «введите» и «подробнее», понятные из контекста слова «платёж» и «перевод», при этом минимальная допустимая сумма нигде не указана.
Информативность 126
Стоп‑слова 287
Телеграм
Телеграм недоволен и утверждает, что в имени должно быть хотя бы пять букв. Сообщение об ошибке появляется после ввода первой же буквы.
Здесь всего одно поле, и выводить ошибку при потере фокуса не получится — скорее всего, пользователь уже нажмёт на кнопку Done. Но требования к имени уже сформулированы в конце текста — их можно сократить, поставить под поле и подсвечивать красным только при попытке нажать Done, когда длины недостаёт.
Телеграм
Телеграм недоволен и утверждает, что в имени должно быть хотя бы пять букв. Сообщение об ошибке появляется после ввода первой же буквы.
Здесь всего одно поле, и выводить ошибку при потере фокуса не получится — скорее всего, пользователь уже нажмёт на кнопку Done. Но требования к имени уже сформулированы в конце текста — их можно сократить, поставить под поле и подсвечивать красным только при попытке нажать Done, когда длины недостаёт.
В идеале, вместо того чтобы сообщать об ошибке пользователю, нужно сделать её невозможной или исправить молча.
использовать маску для ввода;
автоматически расставлять пробелы и дефисы в номерах телефонов или документов;
исправлять кириллицу на латиницу и наоборот;
вместо простого поля ввода предлагать выбор из набора вариантов;
забледнять недоступные даты в календаре.
В идеале, вместо того чтобы сообщать об ошибке пользователю, нужно сделать её невозможной или исправить молча.
использовать маску для ввода;
автоматически расставлять пробелы и дефисы в номерах телефонов или документов;
исправлять кириллицу на латиницу и наоборот;
вместо простого поля ввода предлагать выбор из набора вариантов;
забледнять недоступные даты в календаре.
Некоторые программисты считают ошибкой незаполненное обязательное поле. У них получаются формы, в которых достаточно пройти по полям фокусом — и экран заливает кровью.
Форму можно заполнять в любом порядке, заходить и выходить из полей, и никакой ошибки в этом нет. Если человек не заполнил обязательное поле, сказать об этом лучше при отправке.
Некоторые программисты считают ошибкой незаполненное обязательное поле. У них получаются формы, в которых достаточно пройти по полям фокусом — и экран заливает кровью.
Форму можно заполнять в любом порядке, заходить и выходить из полей, и никакой ошибки в этом нет. Если человек не заполнил обязательное поле, сказать об этом лучше при отправке.
Плохая привычка — помечать обязательные поля звёздочками. Это некрасиво и технозависимо.
Звёздочки — изобретение веба, в операционных системах даже самые сложные окна обходятся без них.
В большинстве форм все поля должны быть обязательными: если без поля можно обойтись, его убирают, и тогда ничего не нужно специально помечать.
Если поле технически необязательно, но мы хотим, чтобы люди его заполняли, можно передать это подписью.
Ещё лучше — объяснить пользу в мире человека. Зачем ему заполнять это поле?
Это касается и обязательных полей. Если человек не будет понимать, почему поле требуют, а без него форма не отправляется, он впишет мусор.
Наконец, необязательные поля лучше отделить от обязательных.
Плохая привычка — помечать обязательные поля звёздочками. Это некрасиво и технозависимо.
Звёздочки — изобретение веба, в операционных системах даже самые сложные окна обходятся без них.
В большинстве форм все поля должны быть обязательными: если без поля можно обойтись, его убирают, и тогда ничего не нужно специально помечать.
Если поле технически необязательно, но мы хотим, чтобы люди его заполняли, можно передать это подписью.
Ещё лучше — объяснить пользу в мире человека. Зачем ему заполнять это поле?
Это касается и обязательных полей. Если человек не будет понимать, почему поле требуют, а без него форма не отправляется, он впишет мусор.
Наконец, необязательные поля лучше отделить от обязательных.
В этом примере кнопка отправки отключена, потому что поля не заполнены. Это помогает избежать вывода бессмысленных сообщений об ошибках вроде «Чтобы оставить комментарий, укажите комментарий».
Но отключать кнопки стоит осторожно. Так не стоит делать в формах с единственным полем поиска: из‑за отключенной кнопки кажется, что вся форма недоступна:
Об отключении кнопок в форме:
Обратная связь 158
В этом примере кнопка отправки отключена, потому что поля не заполнены. Это помогает избежать вывода бессмысленных сообщений об ошибках вроде «Чтобы оставить комментарий, укажите комментарий».
Но отключать кнопки стоит осторожно. Так не стоит делать в формах с единственным полем поиска: из‑за отключенной кнопки кажется, что вся форма недоступна:
Об отключении кнопок в форме:
Обратная связь 158
Аренда машины на сайте «Энви»
См. также: Кнопка «Купить» всегда доступна
Ещё один важный случай, когда отключение кнопок нежелательно — страницы, где пользователь принимает решение о покупке. В интересах бизнеса сделать всё, чтобы кнопка сработала, раз уж человек её нажал.
На сайте автопроката «Энви», созданном в бюро, кнопка «Арендовать» нажимается, даже если вдруг выбранная машина оказалась занята на выбранные даты. Если клиент готов заплатить, не стоит ему мешать. Если что, прокат предоставит взамен автомобиль более высокого класса, и клиент будет доволен.
Аренда машины на сайте «Энви»
См. также: Кнопка «Купить» всегда доступна
Ещё один важный случай, когда отключение кнопок нежелательно — страницы, где пользователь принимает решение о покупке. В интересах бизнеса сделать всё, чтобы кнопка сработала, раз уж человек её нажал.
На сайте автопроката «Энви», созданном в бюро, кнопка «Арендовать» нажимается, даже если вдруг выбранная машина оказалась занята на выбранные даты. Если клиент готов заплатить, не стоит ему мешать. Если что, прокат предоставит взамен автомобиль более высокого класса, и клиент будет доволен.
Если отключённая кнопка вызывает вопросы, можно её подписать, не дожидаясь, пока человек попытается её нажать.
По мере заполнения сложной формы подпись под кнопкой может меняться, подсказывая, что осталось заполнить. Перечислены незаполненные группы полей.
Теперь остались отдельные поля. Каждое название — ссылка на поле. Кстати, можно сделать, чтобы клик по отключённой кнопке также переводил фокус на первое из незаполненных полей.
Осталось последнее поле.
Когда всё заполнено, под кнопкой полезно написать, что будет дальше.
Нижняя часть формы получения электронной подписи в сервисе «Отчёты»
Нижняя часть формы получения электронной подписи в сервисе «Отчёты»
Если отключённая кнопка вызывает вопросы, можно её подписать, не дожидаясь, пока человек попытается её нажать.
По мере заполнения сложной формы подпись под кнопкой может меняться, подсказывая, что осталось заполнить. Перечислены незаполненные группы полей.
Теперь остались отдельные поля. Каждое название — ссылка на поле. Кстати, можно сделать, чтобы клик по отключённой кнопке также переводил фокус на первое из незаполненных полей.
Осталось последнее поле.
Когда всё заполнено, под кнопкой полезно написать, что будет дальше.
В длинной форме финальную кнопку хорошо поставить на плашку. Это отделит её от других кнопок формы и сделает очевиднее путь к победе.
Если чекбокс стоит на плашке вместе с кнопкой, это показывает, что без него она не сработает.
Форма получения кредитной карты в «Связном банке». Фрагмент
Форма получения кредитной карты в «Связном банке». Фрагмент
В длинной форме финальную кнопку хорошо поставить на плашку. Это отделит её от других кнопок формы и сделает очевиднее путь к победе.
Если чекбокс стоит на плашке вместе с кнопкой, это показывает, что без него она не сработает.
В главе «Окна» мы рассмотрели, как скомпоновать экраны. А теперь поговорим о том, как между ними перемещаться — то есть о навигации.
Способы навигации связаны со структурой информации: на иерархическом сайте может быть древовидное меню, а в программе‑мастере — кнопки «Вперёд» и «Назад».
Но способ навигации и структура — не одно и то же: в древовидной файловой системе тоже можно перемещаться кнопками «Вперёд» и «Назад», а в линейной книге может работать поиск.
Рассмотрим способы навигации и их сочетания в приложениях и на сайтах.
В главе «Окна» мы рассмотрели, как скомпоновать экраны. А теперь поговорим о том, как между ними перемещаться — то есть о навигации.
Способы навигации связаны со структурой информации: на иерархическом сайте может быть древовидное меню, а в программе‑мастере — кнопки «Вперёд» и «Назад».
Но способ навигации и структура — не одно и то же: в древовидной файловой системе тоже можно перемещаться кнопками «Вперёд» и «Назад», а в линейной книге может работать поиск.
Рассмотрим способы навигации и их сочетания в приложениях и на сайтах.
Гиперссылка (далее — ссылка) появилась как элемент прямого перехода между документами в гипертексте.
Сегодня это основной инструмент навигации в интернете. Ссылка позволяет мгновенно телепортироваться между произвольными узлами любой информационной структуры.
Почитайте февральскую статью о налогах
Почитайте февральскую статью о налогах
Гиперссылка (далее — ссылка) появилась как элемент прямого перехода между документами в гипертексте.
Сегодня это основной инструмент навигации в интернете. Ссылка позволяет мгновенно телепортироваться между произвольными узлами любой информационной структуры.
Панель управления Виндоусом
Виндоус использует текст, похожий на ссылки, подчёркивает его при наведении и меняет курсор на палец.
Но на самом деле это не ссылки. Их не открыть в новом окне, не сохранить в закладки, не скопировать и не отправить другу.
Панель управления Виндоусом
Виндоус использует текст, похожий на ссылки, подчёркивает его при наведении и меняет курсор на палец.
Но на самом деле это не ссылки. Их не открыть в новом окне, не сохранить в закладки, не скопировать и не отправить другу.
В приложениях для прямого перехода используют кнопки, иконки, горячие клавиши.
Системные настройки Макоса
Системные настройки Макоса
В приложениях для прямого перехода используют кнопки, иконки, горячие клавиши.
Ссылка в почте на Айфоне
Мы привыкли считать ссылки частью веба, поэтому даже если мы встречаем ссылку в приложении, мы ожидаем попасть на веб‑страницу. Ссылка в письме не ведёт на другой экран почтовой программы, а открывает статью.
Ссылка в почте на Айфоне
Мы привыкли считать ссылки частью веба, поэтому даже если мы встречаем ссылку в приложении, мы ожидаем попасть на веб‑страницу. Ссылка в письме не ведёт на другой экран почтовой программы, а открывает статью.
Важнейшее свойство ссылки — наличие адреса, который можно сохранить или переслать. Мы рассчитываем, что по ссылке откроется одна и та же страница в любой день и с любого компьютера, иначе мы воспринимаем ссылку сломанной.
Адрес ссылки — техническая информация, но поскольку люди его видят и используют, к его виду стоит подходить внимательно.
В адресах часто видны названия файлов на сервере, переменные и другие технические данные — им там не место.
Адрес с числовым идентификатором страницы невозможно запомнить, и нельзя догадаться, что за ним скрывается.
Смешивать текстовое название для человека и числовой идентификатор для машины — тоже плохая практика. Всё, что не имеет смысла в мире пользователя, не должно попадать в адрес.
Адрес показывает, какое место в иерархии сайта занимает страница. Поэтому мы ожидаем, что, стерев фрагмент адреса до последнего слеша, мы попадём на родительскую страницу.
Часто пары «параметр‑значение» можно превратить в иерархию без ущерба для смысла. Без /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 не просто не существует; этот адрес не имеет смысла — невозможно даже предположить, что могло бы там находиться.
Оставлять «голые» переменные в адресе допустимо только на страницах с фильтрами, когда их несколько, и они все имеют смысл для пользователя. Но даже в этом случае часто можно найти способ превратить адрес в иерархический.
Страницы сайта или экраны приложения могут образовывать последовательность. В дополнение к кнопкам линейного перемещения вперёд и назад иногда используют ссылки для прямого перехода к определённому шагу.
Мастер установки программы «Микрософт Офис»
Страницы сайта или экраны приложения могут образовывать последовательность. В дополнение к кнопкам линейного перемещения вперёд и назад иногда используют ссылки для прямого перехода к определённому шагу.
Мастер установки программы «Микрософт Офис»
Пошаговый процесс добавляет порядка. Если слишком длинную форму разбить на шаги, она может стать проще в глазах пользователя.
Но иногда дизайнеры без повода усложняют интерфейс нумерацией шагов. Например, так один из студентов‑дизайнеров организовал терминал покупки билетов на метро. У пользователя складывается впечатление, что ему предстоит целое путешествие.
Получение билетов и сдачи разделять ни к чему: автомат может выдать всё сразу.
Но даже это странно считать отдельным шагом. Это уже результат, пользователю делать ничего не нужно.
Подтверждение бессмысленно — это мы знаем из главы о привычках.
Выходит, чтобы купить билеты, нужно их выбрать и оплатить.
Но это очевидно, и явное деление на шаги ни к чему.
О бесполезности подтверждений:
Привычка 27
Сложная форма. Нумерация шагов помогает не заблудиться
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Сложная форма. Нумерация шагов помогает не заблудиться
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Пошаговый процесс добавляет порядка. Если слишком длинную форму разбить на шаги, она может стать проще в глазах пользователя.
Но иногда дизайнеры без повода усложняют интерфейс нумерацией шагов. Например, так один из студентов‑дизайнеров организовал терминал покупки билетов на метро. У пользователя складывается впечатление, что ему предстоит целое путешествие.
Получение билетов и сдачи разделять ни к чему: автомат может выдать всё сразу.
Но даже это странно считать отдельным шагом. Это уже результат, пользователю делать ничего не нужно.
Подтверждение бессмысленно — это мы знаем из главы о привычках.
Выходит, чтобы купить билеты, нужно их выбрать и оплатить.
Но это очевидно, и явное деление на шаги ни к чему.
О бесполезности подтверждений:
Привычка 27
Последовательная навигация используется в вебе. Кнопки «Назад» и «Вперёд» можно считать частью «силуэта» браузера. Правда, перемещают они не по заранее созданной последовательности страниц, а по истории переходов.
Последовательная навигация используется в вебе. Кнопки «Назад» и «Вперёд» можно считать частью «силуэта» браузера. Правда, перемещают они не по заранее созданной последовательности страниц, а по истории переходов.
В функциях сложного продукта приходится наводить порядок. Связать всё простыми ссылками невозможно — непонятно, где искать нужную. Последовательность тоже не подходит — получается слишком длинной.
Функции неизбежно соединяются в группы, в них возникают подгруппы. Не то чтобы кто‑то решал «у нас будет иерархическая навигация», но в результате группировки она возникает сама собой.
В функциях сложного продукта приходится наводить порядок. Связать всё простыми ссылками невозможно — непонятно, где искать нужную. Последовательность тоже не подходит — получается слишком длинной.
Функции неизбежно соединяются в группы, в них возникают подгруппы. Не то чтобы кто‑то решал «у нас будет иерархическая навигация», но в результате группировки она возникает сама собой.
Сайт «Биатлонтайм» с результатами биатлонных гонок устроен иерархически. На первом уровне — спортивные сезоны. Внутри каждого сезона — набор этапов кубка мира. Каждый этап состоит из нескольких гонок.
Сайт «Биатлонтайм» с результатами биатлонных гонок устроен иерархически. На первом уровне — спортивные сезоны. Внутри каждого сезона — набор этапов кубка мира. Каждый этап состоит из нескольких гонок.
На многих сайтах встречается меню с подобным набором пунктов:
Новости Продукты О компании Контакты
С одной стороны, это привычно: пользователи воспринимают слово «Контакты» как иероглиф и ищут по очертанию в конце. «Новости», наоборот, обычно в начале.
С другой, такое меню неинформативно: слова «продукты» и «услуги» не говорят о том, чем именно занимается компания. Меню видишь одним из первых элементов — хорошо воспользоваться им, чтобы рассказать о себе.
На многих сайтах встречается меню с подобным набором пунктов:
Новости Продукты О компании Контакты
С одной стороны, это привычно: пользователи воспринимают слово «Контакты» как иероглиф и ищут по очертанию в конце. «Новости», наоборот, обычно в начале.
С другой, такое меню неинформативно: слова «продукты» и «услуги» не говорят о том, чем именно занимается компания. Меню видишь одним из первых элементов — хорошо воспользоваться им, чтобы рассказать о себе.
Традиционно меню в настольных программах начинается с пунктов File, Edit и заканчивается пунктами Window, Help, но между ними могут быть любые пункты в зависимости от программы.
Имеет смысл так же делать и на сайтах: оставлять привычные пункты по краям, а остальное место использовать для информативных пунктов.
Традиционно меню в настольных программах начинается с пунктов File, Edit и заканчивается пунктами Window, Help, но между ними могут быть любые пункты в зависимости от программы.
Имеет смысл так же делать и на сайтах: оставлять привычные пункты по краям, а остальное место использовать для информативных пунктов.
Меню на сайте Т2
Неинформативно
Продукты
Информативно
Услуги
Вместо безымянных «продуктов» и «услуг» лучше использовать названия этих продуктов и услуг. На сайте Т2 первый пункт меню называется
Меню на сайте Т2
Вместо безымянных «продуктов» и «услуг» лучше использовать названия этих продуктов и услуг. На сайте Т2 первый пункт меню называется
Неинформативно
Продукты
Информативно
Услуги
Неинформативно
Мебель
Информативно
Инвентарь
На сайте «Икеи» меню перечисляет отделы магазина.
На сайте «Икеи» меню перечисляет отделы магазина.
Неинформативно
Мебель
Информативно
Инвентарь
Неинформативно
Продукты
Информативно
Картриджи, бумага и плёнка
Услуги
Копирование и печать
Бытовая техника
Стиральные машины, холодильники
Утюги, чайники, кофеварки
Когда в группе много элементов, автор пытается подыскать общее слово, которое бы подошло для всего, что внутри. Так возникают гиперонимы: «аксессуары», «бытовая химия», «бакалея».
В компьютерном интернет‑магазине невозможно найти флешку в меню. Она может быть и в «аксессуарах», и в «комплектующих», и в «устройствах хранения», и в «модулях памяти». Но если бы существовал раздел «Память, флешки, диски», то человек нашёл бы там даже твёрдотельный накопитель: нам естественнее продолжить ряд по аналогии, чем раскрыть абстрактные понятия.
Когда в группе много элементов, автор пытается подыскать общее слово, которое бы подошло для всего, что внутри. Так возникают гиперонимы: «аксессуары», «бытовая химия», «бакалея».
В компьютерном интернет‑магазине невозможно найти флешку в меню. Она может быть и в «аксессуарах», и в «комплектующих», и в «устройствах хранения», и в «модулях памяти». Но если бы существовал раздел «Память, флешки, диски», то человек нашёл бы там даже твёрдотельный накопитель: нам естественнее продолжить ряд по аналогии, чем раскрыть абстрактные понятия.
Неинформативно
Продукты
Информативно
Картриджи, бумага и плёнка
Услуги
Копирование и печать
Бытовая техника
Стиральные машины, холодильники
Утюги, чайники, кофеварки
Отбеливатель сопутствует колбасе
Человек, не работающий в супермаркете, никогда не скажет, что ему нужны сопутствующие товары.
В магазине бестолковую табличку спасают сами полки с дезодорантами, шампунями и зубной пастой.
Отбеливатель сопутствует колбасе
Человек, не работающий в супермаркете, никогда не скажет, что ему нужны сопутствующие товары.
В магазине бестолковую табличку спасают сами полки с дезодорантами, шампунями и зубной пастой.
Какой бы продуманной ни была иерархия, её придумал кто‑то другой. Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор. Это приводит к ошибкам, и чем больше в иерархии уровней, тем сложнее что‑то найти. В отличие от последовательности, иерархия сопротивляется даже поиску перебором.
Человеку трудно удержать в голове, в каких ветках он уже был, и можно отклониться от правильной дороги слишком сильно. На следующем развороте — демонстрация этого эффекта.
Какой бы продуманной ни была иерархия, её придумал кто‑то другой. Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор. Это приводит к ошибкам, и чем больше в иерархии уровней, тем сложнее что‑то найти. В отличие от последовательности, иерархия сопротивляется даже поиску перебором.
Человеку трудно удержать в голове, в каких ветках он уже был, и можно отклониться от правильной дороги слишком сильно. На следующем развороте — демонстрация этого эффекта.
Найдите котика в трёхдоменной классификации биологических видов.
Найдите котика в трёхдоменной классификации биологических видов.
Меню — не единственный способ навигации по иерархии.
Шаблон «список — объект» из главы «Окна» — пример реализации двухуровневой иерархии. В почтовой программе уровней уже больше: на первом уровне почтовые ящики, на втором — список писем, на третьем — отдельные письма. В Файндере на Маке уровней может быть сколько угодно — он умеет показывать иерархию файловой системы колонками.
Устроенные таким образом приложения хорошо адаптируются к узким экранам — на мобильном телефоне мы видим только одну колонку, но внутренности каждой из колонок устроены так же, как на компьютере.
Меню — не единственный способ навигации по иерархии.
Шаблон «список — объект» из главы «Окна» — пример реализации двухуровневой иерархии. В почтовой программе уровней уже больше: на первом уровне почтовые ящики, на втором — список писем, на третьем — отдельные письма. В Файндере на Маке уровней может быть сколько угодно — он умеет показывать иерархию файловой системы колонками.
Устроенные таким образом приложения хорошо адаптируются к узким экранам — на мобильном телефоне мы видим только одну колонку, но внутренности каждой из колонок устроены так же, как на компьютере.
В иерархическом приложении кнопка «Назад» может вести не на предыдущий, а на родительский экран. Когда в интерфейсе сочетается иерархическая и последовательная навигация, кнопок «Назад» становится две — как в левом верхнем углу Айфона. Маленькая чёрная кнопочка ведёт в предыдущее приложение, из которого я перешёл по ссылке. Большая синяя — на родительский экран этого приложения. К сожалению, это порождает путаницу.
Кстати, кнопка «домой» при этом тоже ведёт назад по иерархии — на домашний экран.
В иерархическом приложении кнопка «Назад» может вести не на предыдущий, а на родительский экран. Когда в интерфейсе сочетается иерархическая и последовательная навигация, кнопок «Назад» становится две — как в левом верхнем углу Айфона. Маленькая чёрная кнопочка ведёт в предыдущее приложение, из которого я перешёл по ссылке. Большая синяя — на родительский экран этого приложения. К сожалению, это порождает путаницу.
Кстати, кнопка «домой» при этом тоже ведёт назад по иерархии — на домашний экран.
Данные обладают множеством «измерений». Одежду можно классифицировать по типу, бренду, отделу, стилю, сценариям носки, полу, цвету, материалу, размеру, цене. При этом однозначную иерархию построить не получается: свитер «Напапийри» может жить и в разделе Зима → Свитеры → Напапийри, и в Мужчинам → Напапийри → Трикотаж.
Когда пользователю нужно найти что‑то среди тысяч предметов, помогут фильтры. Вместо того, чтобы угадывать, какую иерархию задумал автор, человек настраивает параметры независимо.
Фильтры
Яндекс.Маркета
Фильтры
Яндекс.Маркета
Данные обладают множеством «измерений». Одежду можно классифицировать по типу, бренду, отделу, стилю, сценариям носки, полу, цвету, материалу, размеру, цене. При этом однозначную иерархию построить не получается: свитер «Напапийри» может жить и в разделе Зима → Свитеры → Напапийри, и в Мужчинам → Напапийри → Трикотаж.
Когда пользователю нужно найти что‑то среди тысяч предметов, помогут фильтры. Вместо того, чтобы угадывать, какую иерархию задумал автор, человек настраивает параметры независимо.
Хороший фильтр не вываливает на пользователя параметры из базы данных, а помогает решить задачу: подобрать подходящее жильё по цене или найти интересные концерты на определённые даты.
Фильтр картинок в «Гугле» помогает найти картинки по размеру, цвету, правам на использование. Для запроса «листья» даже добавлен специальный фильтр по деревьям.
Хороший фильтр не вываливает на пользователя параметры из базы данных, а помогает решить задачу: подобрать подходящее жильё по цене или найти интересные концерты на определённые даты.
Фильтр картинок в «Гугле» помогает найти картинки по размеру, цвету, правам на использование. Для запроса «листья» даже добавлен специальный фильтр по деревьям.
Фильтр по цене
Сортировка по цене
При фильтрации остаются только удовлетворяющие условию объекты. При сортировке отображаются все объекты, но в выбранном порядке.
Для пользователя фильтрация и сортировка часто работают похоже.
Сортировка по цене — простой способ увидеть перед собой дешёвые товары, не указывая конкретную цену.
Ещё о фильтрах:
Технозависимость 15
Фильтр по цене
При фильтрации остаются только удовлетворяющие условию объекты. При сортировке отображаются все объекты, но в выбранном порядке.
Для пользователя фильтрация и сортировка часто работают похоже.
Сортировка по цене
Сортировка по цене — простой способ увидеть перед собой дешёвые товары, не указывая конкретную цену.
Ещё о фильтрах:
Технозависимость 15
Теги — слова, которые как‑то описывают страницу или объект. Обычно это тема: «кино», «музыка», «искусство» в журнале. Но теги могут отражать и другие признаки, например в моём блоге любая заметка, где я задаю вопрос аудитории, получает тег «вопрос». Если заметка будет полезна начинающим дизайнерам, я добавляю тег «студентам».
Само слово tag означает этикетку, бирку, ярлык — некую маленькую пометку, закреплённую за объектом. Care tag — это ярлык с информацией о стирке и глажке, а price tag — ценник.
Теги — слова, которые как‑то описывают страницу или объект. Обычно это тема: «кино», «музыка», «искусство» в журнале. Но теги могут отражать и другие признаки, например в моём блоге любая заметка, где я задаю вопрос аудитории, получает тег «вопрос». Если заметка будет полезна начинающим дизайнерам, я добавляю тег «студентам».
Само слово tag означает этикетку, бирку, ярлык — некую маленькую пометку, закреплённую за объектом. Care tag — это ярлык с информацией о стирке и глажке, а price tag — ценник.
В беспорядке сила тегов: ими можно описать любые свойства. Скажем, в каталоге одежды есть стандартные признаки: марка, цвет, размер — на них легко построить фильтры. Но все возможные параметры трудно заранее предусмотреть в базе данных. А с помощью тегов предметы одежды можно в любой момент пометить: «на молнии», «со стразами», «глубокие карманы».
Конечно, такие свойства можно отразить и в описании предмета. Но тег — метаинформация и инструмент навигации. Тег «глубокие карманы» не только рассказывает о свойствах конкретных штанов; по нему ещё можно перейти и просмотреть все штаны с таким свойством.
Также теги объединяют разнородные предметы: с глубокими карманами могут быть не только штаны, но и куртки. На сайте дизайнерского бюро по тегу «типографика» могут найтись новости, книги, статьи, работы в портфолио. На сайте о готовке по тегу «рыба» — и рецепты, и как разделывать, и как хранить, и где купить.
На основе совпадения тегов сайты могут автоматически создавать подборки и давать рекомендации.
В беспорядке сила тегов: ими можно описать любые свойства. Скажем, в каталоге одежды есть стандартные признаки: марка, цвет, размер — на них легко построить фильтры. Но все возможные параметры трудно заранее предусмотреть в базе данных. А с помощью тегов предметы одежды можно в любой момент пометить: «на молнии», «со стразами», «глубокие карманы».
Конечно, такие свойства можно отразить и в описании предмета. Но тег — метаинформация и инструмент навигации. Тег «глубокие карманы» не только рассказывает о свойствах конкретных штанов; по нему ещё можно перейти и просмотреть все штаны с таким свойством.
Также теги объединяют разнородные предметы: с глубокими карманами могут быть не только штаны, но и куртки. На сайте дизайнерского бюро по тегу «типографика» могут найтись новости, книги, статьи, работы в портфолио. На сайте о готовке по тегу «рыба» — и рецепты, и как разделывать, и как хранить, и где купить.
На основе совпадения тегов сайты могут автоматически создавать подборки и давать рекомендации.
Теги под заметкой в блоге
Страница тега «Будущее»
Страница всех тегов
Тег в результатах поиска
Для навигации на страницах или у объектов перечисляют их теги.
Тег ведёт на страницу со списком всех связанных с ним объектов.
Иногда делают страницу с полным списком тегов — «облако тегов». В силу неорганизованности тегов, обычно неясно, что там искать.
Хорошо также, когда поиск знает теги.
Теги под заметкой в блоге
Страница тега «Будущее»
Страница всех тегов
Тег в результатах поиска
Для навигации на страницах или у объектов перечисляют их теги.
Тег ведёт на страницу со списком всех связанных с ним объектов.
Иногда делают страницу с полным списком тегов — «облако тегов». В силу неорганизованности тегов, обычно неясно, что там искать.
Хорошо также, когда поиск знает теги.
Теги коллекции примеров дизайна Ильи Бирмана
Теги коллекции примеров дизайна Ильи Бирмана
Обычно для указания тегов в продуктах выделяют отдельное поле.
«Лайтрум» предлагает вероятные теги для фотографии и даже позволяет создавать независимые наборы тегов.
Теги сами по себе могут образовывать иерархии или более сложные структуры. Если известно, что тег «автобус» дочерний по отношению к тегу «транспорт», то по последнему логично автоматически показывать все фотографии с первым. К сожалению, такие структуры сложно поддерживать.
Лучше, когда программа сама понимает, какие теги связаны теснее. Если дизайнер, описывая картинку, ставит тег «логотип», система может также предложить ему теги «знак», «эмблема», «фирстиль».
Работа с тегами в «Лайтруме»
Работа с тегами в «Лайтруме»
Обычно для указания тегов в продуктах выделяют отдельное поле.
«Лайтрум» предлагает вероятные теги для фотографии и даже позволяет создавать независимые наборы тегов.
Теги сами по себе могут образовывать иерархии или более сложные структуры. Если известно, что тег «автобус» дочерний по отношению к тегу «транспорт», то по последнему логично автоматически показывать все фотографии с первым. К сожалению, такие структуры сложно поддерживать.
Лучше, когда программа сама понимает, какие теги связаны теснее. Если дизайнер, описывая картинку, ставит тег «логотип», система может также предложить ему теги «знак», «эмблема», «фирстиль».
Хештеги в твиттере
Во многих соцсетях тегами становятся любые слова из сообщения, в начале которых добавлен
Когда у всех пользователей общее пространство тегов, тоже возникают проблемы. Для дизайнера интерфейса и спортсмена тег «форма» будет означать разное.
Хештеги в твиттере
Во многих соцсетях тегами становятся любые слова из сообщения, в начале которых добавлен
Когда у всех пользователей общее пространство тегов, тоже возникают проблемы. Для дизайнера интерфейса и спортсмена тег «форма» будет означать разное.
Поиск — идеальный способ навигации для человека с конкретным пожеланием. С хорошим поиском можно не думать, как устроена информация, а просто сразу переходить в нужное место.
Поиск в Гугль‑картах
Поиск в Гугль‑картах
Поиск — идеальный способ навигации для человека с конкретным пожеланием. С хорошим поиском можно не думать, как устроена информация, а просто сразу переходить в нужное место.
Официальные правила русского языка организованы иерархически. Но люди теряются при виде их оглавления.
Поэтому на сайте правил работает умный поиск. К примеру, если написать «например», сайт найдёт правило, по которому ставится запятая вокруг этого слова.
Официальные правила русского языка организованы иерархически. Но люди теряются при виде их оглавления.
Поэтому на сайте правил работает умный поиск. К примеру, если написать «например», сайт найдёт правило, по которому ставится запятая вокруг этого слова.
Форма поиска хоть и состоит всего из одного поля, но всё же составляет препятствие для пользователя. В хорошем интерфейсе всё организовано так, чтобы дойти до нужного элемента получалось и более «ленивыми» способами. Например, в интернет‑магазине обязательно нужны подборки, новинки, рекомендации.
И только когда речь идёт обо всей информации в мире, в качестве первого шага подойдёт поиск и ничего больше.
Форма как препятствие:
Формы 341
Сначала данные, потом фильтры:
Технозависимость 15
Форма поиска хоть и состоит всего из одного поля, но всё же составляет препятствие для пользователя. В хорошем интерфейсе всё организовано так, чтобы дойти до нужного элемента получалось и более «ленивыми» способами. Например, в интернет‑магазине обязательно нужны подборки, новинки, рекомендации.
И только когда речь идёт обо всей информации в мире, в качестве первого шага подойдёт поиск и ничего больше.
Форма как препятствие:
Формы 341
Сначала данные, потом фильтры:
Технозависимость 15
Иногда важно, чтобы поиск не просто находил объект, а ещё показывал, где он находится в иерархии или другой структуре. Поиск по меню на Маке огромной анимированной стрелкой показывает, где именно нашёлся нужный пункт. В следующий раз можно идти к нему напрямую, без клавиатуры.
А поиск приложений в Ай‑ОСе 11 не показывает, в какой папке что нашлось, поэтому потерявшееся в папках приложение приходится всегда запускать через него.
Макос Сьерра
Иногда важно, чтобы поиск не просто находил объект, а ещё показывал, где он находится в иерархии или другой структуре. Поиск по меню на Маке огромной анимированной стрелкой показывает, где именно нашёлся нужный пункт. В следующий раз можно идти к нему напрямую, без клавиатуры.
А поиск приложений в Ай‑ОСе 11 не показывает, в какой папке что нашлось, поэтому потерявшееся в папках приложение приходится всегда запускать через него.
Макос Сьерра
Поиск в почте на Маке
Поиск развивается в сторону структуризации. Отдельные смысловые элементы запроса превращаются в объекты, подобные фильтрам.
Поиск в почте на Маке
Поиск развивается в сторону структуризации. Отдельные смысловые элементы запроса превращаются в объекты, подобные фильтрам.
Задача поиска давно перестала быть чисто навигационной. Поисковые системы отвечают на типовые вопросы о погоде и курсах валют. С развитием голосовых ассистентов и чатботов поиск научится лучше понимать контекст и заодно с выдачей результатов задавать встречные вопросы, помогая человеку сформулировать запрос:
— Найди браслеты для часов.
— Есть металлические, пластиковые, дорогие и дешёвые, разных цветов. Ещё бывают кожаные и нейлоновые ремешки. Что именно вы ищете?
И не растеряется, если человек проигнорирует подсказки и спросит что‑то своё:
— Как они крепятся?
— К часам или на руке?
Голосовая помощница Яндекса «Алиса»
Задача поиска давно перестала быть чисто навигационной. Поисковые системы отвечают на типовые вопросы о погоде и курсах валют. С развитием голосовых ассистентов и чатботов поиск научится лучше понимать контекст и заодно с выдачей результатов задавать встречные вопросы, помогая человеку сформулировать запрос:
— Найди браслеты для часов.
— Есть металлические, пластиковые, дорогие и дешёвые, разных цветов. Ещё бывают кожаные и нейлоновые ремешки. Что именно вы ищете?
И не растеряется, если человек проигнорирует подсказки и спросит что‑то своё:
— Как они крепятся?
— К часам или на руке?
Голосовая помощница Яндекса «Алиса»
⅟₁₂
⅜
⅟₁₂
⅜
⅟₁₂
Большинство интерфейсов визуальны. Даже при голосовом управлении диалог, как правило, отображается на экране, дополняется кнопками и другими графическими элементами. Чтобы уметь всё это скомпоновать, дизайнер интерфейса должен быть знаком с основами вёрстки.
Универсальный способ наведения порядка в дизайне — сетка, то есть система отступов и выравнивания.
Большинство интерфейсов визуальны. Даже при голосовом управлении диалог, как правило, отображается на экране, дополняется кнопками и другими графическими элементами. Чтобы уметь всё это скомпоновать, дизайнер интерфейса должен быть знаком с основами вёрстки.
Универсальный способ наведения порядка в дизайне — сетка, то есть система отступов и выравнивания.
Предположим, вы спроектировали форму. Слева отвели место под подписи, а справа сделали все поля такого размера, какого требует смысл. Несмотря на то, что расположению и размеру каждого элемента есть объяснение, форма выглядит неряшливой.
Если внедрить сетку, будет опрятнее. В данном случае мы просто округлили все размеры до кратных 20% ширины.
Предположим, вы спроектировали форму. Слева отвели место под подписи, а справа сделали все поля такого размера, какого требует смысл. Несмотря на то, что расположению и размеру каждого элемента есть объяснение, форма выглядит неряшливой.
Если внедрить сетку, будет опрятнее. В данном случае мы просто округлили все размеры до кратных 20% ширины.
Вертикальные отступы также требуют систематизации.
Из соображений близости мы ставим связанные поля рядом, а несвязанные — разделяем большим расстоянием.
При увеличении числа элементов связи усложняются: чекбокс и подпись относятся к конкретным полям, и их хочется сблизить сильнее, чем сами поля. А группы хочется, наоборот, отделить бо́льшим расстоянием.
Если подпись перенесётся, то по правилу внутреннего и внешнего следует её интерлиньяж сделать меньше отступа от поля, и все расстояния «поплывут».
Как и в примере с прошлого разворота, каждому отступу есть объяснение, но в целом они выглядят случайными.
Чтобы форма выглядела аккуратнее, упростим систему вертикальных отступов, оставив только два размера.
Обойтись двумя получится не всегда, но всегда стоит попробовать.
Близость 86
Артём Горбунов.
О правиле внутреннего и внешнего
Вертикальные отступы также требуют систематизации.
Из соображений близости мы ставим связанные поля рядом, а несвязанные — разделяем большим расстоянием.
При увеличении числа элементов связи усложняются: чекбокс и подпись относятся к конкретным полям, и их хочется сблизить сильнее, чем сами поля. А группы хочется, наоборот, отделить бо́льшим расстоянием.
Если подпись перенесётся, то по правилу внутреннего и внешнего следует её интерлиньяж сделать меньше отступа от поля, и все расстояния «поплывут».
Как и в примере с прошлого разворота, каждому отступу есть объяснение, но в целом они выглядят случайными.
Чтобы форма выглядела аккуратнее, упростим систему вертикальных отступов, оставив только два размера.
Обойтись двумя получится не всегда, но всегда стоит попробовать.
Близость 86
Артём Горбунов.
О правиле внутреннего и внешнего
Обычно сетку вводят в конце, когда элементы расставлены и осталось упорядочить то, как они стоят. Но минимальный порядок хочется поддерживать и в процессе расстановки элементов. Если выверять все расстояния вручную, теряется много времени.
Один из способов ускорить работу — использовать частую сетку на этапе рисования.
Скажем, все размеры и отступы можно сделать кратными восьми пикселям.
Обычно сетку вводят в конце, когда элементы расставлены и осталось упорядочить то, как они стоят. Но минимальный порядок хочется поддерживать и в процессе расстановки элементов. Если выверять все расстояния вручную, теряется много времени.
Один из способов ускорить работу — использовать частую сетку на этапе рисования.
Скажем, все размеры и отступы можно сделать кратными восьми пикселям.
В программах, работающих в текстовом режиме, сетка получается сама собой — просто технически невозможно поставить что‑то неровно. Это выглядит архаично, но и в современном интерфейсе стоит попробовать добиться подобного ощущения. Что будет, если все отступы сделать кратными одной текстовой строке?
Турбо‑паскаль: безупречно ровно
Турбо‑паскаль: безупречно ровно
В программах, работающих в текстовом режиме, сетка получается сама собой — просто технически невозможно поставить что‑то неровно. Это выглядит архаично, но и в современном интерфейсе стоит попробовать добиться подобного ощущения. Что будет, если все отступы сделать кратными одной текстовой строке?
Выравнивание нужно не только для аккуратности. Оно также помогает пользователю понять, как взаимосвязаны элементы.
В программе «Ангстрем» чтобы перевести число из одной единицы измерения в другую, сначала нужно ввести число и исходную единицу измерения.
Подсказки выравниваются с местом ввода слева, и человек понимает, что варианты относятся именно к этому полю — не требуется рисовать дополнительных рамок.
После этого человек выбирает, в какую единицу переводить. Связь между значением и списком снова очевидна благодаря выравниванию.
Выравнивание нужно не только для аккуратности. Оно также помогает пользователю понять, как взаимосвязаны элементы.
В программе «Ангстрем» чтобы перевести число из одной единицы измерения в другую, сначала нужно ввести число и исходную единицу измерения.
Подсказки выравниваются с местом ввода слева, и человек понимает, что варианты относятся именно к этому полю — не требуется рисовать дополнительных рамок.
После этого человек выбирает, в какую единицу переводить. Связь между значением и списком снова очевидна благодаря выравниванию.
Если формально выравнивать несвязанные элементы, можно получить обратный эффект: человек подумает, что они как‑то связаны. На странице оплаты Вебмани валюты выровнены кнопками. Если нужна валюта WMZ, невольно нажимаешь «Отказаться», ведь кажется, что кнопка относится к этой валюте.
См. также о выравнивании и смысловой связи:
Близость 92
Если формально выравнивать несвязанные элементы, можно получить обратный эффект: человек подумает, что они как‑то связаны. На странице оплаты Вебмани валюты выровнены кнопками. Если нужна валюта WMZ, невольно нажимаешь «Отказаться», ведь кажется, что кнопка относится к этой валюте.
См. также о выравнивании и смысловой связи:
Близость 92
Экран приложения в «Апсторе»
Текст — неотъемлемая часть интерфейса. В простых случаях удаётся обойтись отдельными подписями к элементам, но часто в продуктах встречаются большие фрагменты текста — приветственные экраны, описания функций, диалоги с помощником.
На следующем развороте приведены краткие рекомендации по вёрстке текстовых экранов.
Текст — неотъемлемая часть интерфейса. В простых случаях удаётся обойтись отдельными подписями к элементам, но часто в продуктах встречаются большие фрагменты текста — приветственные экраны, описания функций, диалоги с помощником.
На следующем развороте приведены краткие рекомендации по вёрстке текстовых экранов.
Экран приложения в «Апсторе»
Колонка основного текста занимает
Текст на экране выравнивают по левому краю, а не по ширине формата. При выравнивании по ширине между словами возникают огромные пробелы, и текст выглядит неряшливо.
Текст делится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этом тексте.
Основной текст дробится на части с помощью подзаголовков.
Заголовки второго уровня обычно крупнее основного текста. Под заголовком оставляют межабзацный отступ, а над — в 2‑3 раза больший. Так заголовок оказывается ближе к «своему» тексту, чем к «чужому».
Заголовки третьего уровня удобно набирать полужирным шрифтом кегля основного текста и не отбивать от последующего текста, как здесь. Благодаря отсутствию лишнего отступа, в самой системе отступов проще навести порядок.
Заголовки четвёртого и следующих уровней — признак плохой редактуры. Они оправданы только в сложных юридических и технических документах.
В тексте встречаются другие элементы — цитаты, списки, таблицы, примечания, формулы, ссылки, иллюстрации, кнопки, пиктограммы. Размеры и отступы вокруг этих элементов также систематизируют и приводят в соответствие с параметрами текста.
Как и в случае с отступами между элементами, текст в интерфейсе выигрывает от уменьшения числа разных кеглей и стилей.
Более подробно — у Артёма Горбунова. Типографика и вёрстка
Колонка основного текста занимает
Текст на экране выравнивают по левому краю, а не по ширине формата. При выравнивании по ширине между словами возникают огромные пробелы, и текст выглядит неряшливо.
Текст делится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этом тексте.
Основной текст дробится на части с помощью подзаголовков.
Заголовки второго уровня обычно крупнее основного текста. Под заголовком оставляют межабзацный отступ, а над — в 2‑3 раза больший. Так заголовок оказывается ближе к «своему» тексту, чем к «чужому».
Заголовки третьего уровня удобно набирать полужирным шрифтом кегля основного текста и не отбивать от последующего текста, как здесь. Благодаря отсутствию лишнего отступа, в самой системе отступов проще навести порядок.
Заголовки четвёртого и следующих уровней — признак плохой редактуры. Они оправданы только в сложных юридических и технических документах.
В тексте встречаются другие элементы — цитаты, списки, таблицы, примечания, формулы, ссылки, иллюстрации, кнопки, пиктограммы. Размеры и отступы вокруг этих элементов также систематизируют и приводят в соответствие с параметрами текста.
Как и в случае с отступами между элементами, текст в интерфейсе выигрывает от уменьшения числа разных кеглей и стилей.
Более подробно — у Артёма Горбунова. Типографика и вёрстка
Приведённые выше рекомендации о формах и тексте помогут навести порядок в пределах отдельного экрана.
Но для продукта важны узнаваемость, привычка, ощущение порядка и неслучайности. Для единообразия экранов создаются гайдлайны, где систематизируются размеры и расстояния между элементами.
Пример типографических гайдлайнов для элементов управления
Приведённые выше рекомендации о формах и тексте помогут навести порядок в пределах отдельного экрана.
Но для продукта важны узнаваемость, привычка, ощущение порядка и неслучайности. Для единообразия экранов создаются гайдлайны, где систематизируются размеры и расстояния между элементами.
Пример типографических гайдлайнов для элементов управления
Использование единой сетки не только улучшает восприятие дизайна, но и помогает создавать сложные продукты.
Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного
Использование единой сетки не только улучшает восприятие дизайна, но и помогает создавать сложные продукты.
Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного
Рассмотрим сетку виджетов справочных систем «Актиона».
Сверху всегда заголовок и блок статистики. Снизу может быть поле поиска или специальный элемент типа кнопки или ссылки. В центральной части чаще всего — список. В разных виджетах используются разные цвета и шрифты, но сетка сохраняется.
Если специального элемента снизу нет, в списке на один пункт больше. Если списка нет, в центре может находиться таблица или график. В центре виджета видеосеминаров — кадр свежего видео.
Эта сетка была придумана для второй версии «Системы Кадры» и позже распространилась на новые версии всех справочных систем, получив чуть больше свободы. Тогда виджет видеосеминаров избавился от заголовка.
Новый виджет «Высшей школы главбуха» отображает успехи в школе и мотивирует учиться дальше. Виджет сервиса «Отчёты» помогает отправлять отчёты в госорганы.
Виджет сервиса «Договоры» показывает и даёт найти нужный договор. Если каким‑то из сервисов человек не пользуется, то виджет умеет отображаться в «проморежиме» — просто рассказывает о сервисе и приглашает воспользоваться.
Для рекламы будущих продуктов создан шаблон промовиджета.
Когда есть правила и ограничения, сделать новый элемент — быстрее и дешевле, и при этом он получается хорошо почти сам собой.
Рассмотрим сетку виджетов справочных систем «Актиона».
Сверху всегда заголовок и блок статистики. Снизу может быть поле поиска или специальный элемент типа кнопки или ссылки. В центральной части чаще всего — список. В разных виджетах используются разные цвета и шрифты, но сетка сохраняется.
Если специального элемента снизу нет, в списке на один пункт больше. Если списка нет, в центре может находиться таблица или график. В центре виджета видеосеминаров — кадр свежего видео.
Эта сетка была придумана для второй версии «Системы Кадры» и позже распространилась на новые версии всех справочных систем, получив чуть больше свободы. Тогда виджет видеосеминаров избавился от заголовка.
Новый виджет «Высшей школы главбуха» отображает успехи в школе и мотивирует учиться дальше. Виджет сервиса «Отчёты» помогает отправлять отчёты в госорганы.
Виджет сервиса «Договоры» показывает и даёт найти нужный договор. Если каким‑то из сервисов человек не пользуется, то виджет умеет отображаться в «проморежиме» — просто рассказывает о сервисе и приглашает воспользоваться.
Для рекламы будущих продуктов создан шаблон промовиджета.
Когда есть правила и ограничения, сделать новый элемент — быстрее и дешевле, и при этом он получается хорошо почти сам собой.
Система Главбух
Система Кадры
Система Юрист
Единая сетка используется во всей семье справочных систем «Актиона». Поэтому некоторые виджеты, такие как «Правовая база», используются в них без изменения.
Для придания системам индивидуальности достаточно фирменной цветовой и шрифтовой схем.
Система Главбух
Единая сетка используется во всей семье справочных систем «Актиона». Поэтому некоторые виджеты, такие как «Правовая база», используются в них без изменения.
Система Кадры
Для придания системам индивидуальности достаточно фирменной цветовой и шрифтовой схем.
Система Юрист
Следующий уровень систематизации — на уровне операционной системы. В Андроиде регламентирован набор используемых кеглей и связанных с ними интерлиньяжей.
Весь текст выравнивается по четырёхпиксельной сетке базовых линий.
Следующий уровень систематизации — на уровне операционной системы. В Андроиде регламентирован набор используемых кеглей и связанных с ними интерлиньяжей.
Весь текст выравнивается по четырёхпиксельной сетке базовых линий.
Боковые поля у андроидных приложений — по 16 пк, а отступ слева до основной колонки текста — 72 пк.
Вертикальные размеры также регламентированы. Строка статуса имеет высоту 24 пк, тулбар — 56 пк, заголовок и элементы списка — по 72 пк, подзаголовок — 48 пк, отступ между группами элементов — 8 пк.
Размеры всех областей кратны 8 пк.
Благодаря последовательному использованию этих размеров в разных программах, программы узнаются как андроидные.
Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»
Боковые поля у андроидных приложений — по 16 пк, а отступ слева до основной колонки текста — 72 пк.
Вертикальные размеры также регламентированы. Строка статуса имеет высоту 24 пк, тулбар — 56 пк, заголовок и элементы списка — по 72 пк, подзаголовок — 48 пк, отступ между группами элементов — 8 пк.
Размеры всех областей кратны 8 пк.
Благодаря последовательному использованию этих размеров в разных программах, программы узнаются как андроидные.
Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»
Поддельный
Студенческая работа
Когда в операционной системе приняты определённые отступы, кегли, размеры иконок, а дизайнеры используют собственные, интерфейс кажется поддельным.
В студенческой работе неправильные отступы внутри и вокруг поля поиска, размеры верхней и нижней панели. Да и сам телефон поддельный.
Настоящий
Приложение Эпла
Поддельный
Студенческая работа
Когда в операционной системе приняты определённые отступы, кегли, размеры иконок, а дизайнеры используют собственные, интерфейс кажется поддельным.
В студенческой работе неправильные отступы внутри и вокруг поля поиска, размеры верхней и нижней панели. Да и сам телефон поддельный.
Настоящий
Приложение Эпла
Вы создаёте интерфейс программы для управления светофорами в городе. Нужны три рабочих области: список всех светофоров города с фильтром, карта города со светофорами и панель управления выбранным светофором. Известно, что оператор использует компьютер с одним монитором. Какой вариант организации интерфейса программы выбрать, чтобы минимизировать управление самим интерфейсом?
Придумать компоновку окна — работа дизайнера, а не пользователя, так что левый вариант плохой. В среднем варианте дизайнер эту работу сделал. Правый вариант с табами вынуждает переключаться между списком и сфетофором, держать часть информации в голове, а не перед глазами.
В светофорной программе из предыдущего вопроса наконец‑то добавится функция просмотра видео с камеры на конкретном перекрёстке. Предполагается, что операторы будут ей постоянно пользоваться. Какой из вариантов интерфейса лучше всего?
Согласно теореме о попапах, попапы стоит рассматривать в последнюю очередь. Отдельное окно приведёт к тому, что пользователю придётся искать ему место, а это работа дизайнера. Выделенная область на панели управления — лучшее решение из перечисленных: видео выбранного светофора доступно в один клик, располагается в постоянном месте и не пропадает при перемещении карты.
Пользователь попал в форму и кликнул в поле электронной почты. Перечислите недостатки в дизайне формы.
Подпись e‑mail надо перевести: «электронная почта» или «эл. почта». Конечно, поле должно быть доступно: пользователь может заполнять форму в любом порядке. Сообщение об ошибке выведено преждевременно: пользователь ещё даже не начал печатать. Сообщение неинформативно: если человек ошибётся при вводе адреса, оно не поможет понять, в чём именно ошибка. Приводить пример имени, тем более, дважды — полный абсурд.
Перечислите недостатки в дизайне формы.
Cрок действия выглядит не так, как на обычной карте; это усложнит ввод данных с карты. Подписи к полям выровнены по правому краю; из‑за этого левый край ломается и выглядит неряшливо. Номер карты написан шрифтом без засечек, и нет никаких причин считать это недостатком. Расстояния между полями не помогают понять их взаимоотношения. Кнопки в большинстве случаев стоят в конце форм — это привычно.
Перечислите недостатки в дизайне формы.
Чем меньше полей, тем лучше. А всё остальное — действительно недостатки.
Выберите элементы интерфейса, одна из функций которых — прямой переход на сайтах и в приложениях.
Ссылки, кнопки и иконки — элементы навигации, их используют для перехода. Чекбоксы для этого не подходят, а фальшпедали вообще не являются элементами интерфейса.
В веб‑приложении — планировщике задач есть страница задачи. Какой адрес страницы наиболее удачен с точки зрения приведённых рекомендаций?
Варианты с числовыми идентификаторами технозависимы, а без текстовой части ещё и неинформативны. Запись переменной через знак равенства следует превратить в иерархическую через слеш. Задач много, а не одна, поэтому родительской страницей должен быть tasks, а не task. Получается, что наилучший вариант — example.com/tasks/Сверстать_каталог
Перечислите недостатки иерархической навигации для пользователя.
Для иерархической навигации полно привычных интерфейсных решений, в том числе работающих на мобильных экранах. А всё остальное — действительно проблемы.
Что из перечисленного поможет навести порядок в форме и соответствует приведённым рекомендациям по использованию сетки?
Если поля выровнять левыми краями, они встанут по сетке, а последовательность заполнения станет очевиднее. Размеры полей нужно подбирать под размеры их содержимого, а зону подписей делать компактной. Восьмипиксельная сетка — действительно один из способов наведения порядка. Другой способ — сделать ширины полей кратными «модулю» — общему для всей формы шагу ширины.
Перед вами четыре скриншота постов в Фейсбуке. Два из них — настоящие, а два других — «поддельные», сделанные не по стандартной сетке Фейсбука. Изменены и вертикальные, и горизонтальные отступы. Выберите два настоящих скриншота.
Даже если вы незнакомы с сеткой Фейсбука, чтобы правильно ответить на вопрос, достаточно найти два варианта, свёрстанных одинаково. Это оба левых варианта. В правом верхнем варианте имя Трампа подпрыгнуло вверх, картинка слишком прилипла к тексту, поле комментария не дотянулось до правого края. В правом нижнем варианте имя Родиона «отвалилось» от фотографии, кнопки реакций разъехались, а поле комментария прилипло к низу.
Вы создаёте интерфейс программы для управления светофорами в городе. Нужны три рабочих области: список всех светофоров города с фильтром, карта города со светофорами и панель управления выбранным светофором. Известно, что оператор использует компьютер с одним монитором. Какой вариант организации интерфейса программы выбрать, чтобы минимизировать управление самим интерфейсом?
Придумать компоновку окна — работа дизайнера, а не пользователя, так что левый вариант плохой. В среднем варианте дизайнер эту работу сделал. Правый вариант с табами вынуждает переключаться между списком и сфетофором, держать часть информации в голове, а не перед глазами.
В светофорной программе из предыдущего вопроса наконец‑то добавится функция просмотра видео с камеры на конкретном перекрёстке. Предполагается, что операторы будут ей постоянно пользоваться. Какой из вариантов интерфейса лучше всего?
Согласно теореме о попапах, попапы стоит рассматривать в последнюю очередь. Отдельное окно приведёт к тому, что пользователю придётся искать ему место, а это работа дизайнера. Выделенная область на панели управления — лучшее решение из перечисленных: видео выбранного светофора доступно в один клик, располагается в постоянном месте и не пропадает при перемещении карты.
Пользователь попал в форму и кликнул в поле электронной почты. Перечислите недостатки в дизайне формы.
Подпись e‑mail надо перевести: «электронная почта» или «эл. почта». Конечно, поле должно быть доступно: пользователь может заполнять форму в любом порядке. Сообщение об ошибке выведено преждевременно: пользователь ещё даже не начал печатать. Сообщение неинформативно: если человек ошибётся при вводе адреса, оно не поможет понять, в чём именно ошибка. Приводить пример имени, тем более, дважды — полный абсурд.
Перечислите недостатки в дизайне формы.
Cрок действия выглядит не так, как на обычной карте; это усложнит ввод данных с карты. Подписи к полям выровнены по правому краю; из‑за этого левый край ломается и выглядит неряшливо. Номер карты написан шрифтом без засечек, и нет никаких причин считать это недостатком. Расстояния между полями не помогают понять их взаимоотношения. Кнопки в большинстве случаев стоят в конце форм — это привычно.
Перечислите недостатки в дизайне формы.
Чем меньше полей, тем лучше. А всё остальное — действительно недостатки.
Выберите элементы интерфейса, одна из функций которых — прямой переход на сайтах и в приложениях.
Ссылки, кнопки и иконки — элементы навигации, их используют для перехода. Чекбоксы для этого не подходят, а фальшпедали вообще не являются элементами интерфейса.
В веб‑приложении — планировщике задач есть страница задачи. Какой адрес страницы наиболее удачен с точки зрения приведённых рекомендаций?
Варианты с числовыми идентификаторами технозависимы, а без текстовой части ещё и неинформативны. Запись переменной через знак равенства следует превратить в иерархическую через слеш. Задач много, а не одна, поэтому родительской страницей должен быть tasks, а не task. Получается, что наилучший вариант — example.com/tasks/Сверстать_каталог
Перечислите недостатки иерархической навигации для пользователя.
Для иерархической навигации полно привычных интерфейсных решений, в том числе работающих на мобильных экранах. А всё остальное — действительно проблемы.
Что из перечисленного поможет навести порядок в форме и соответствует приведённым рекомендациям по использованию сетки?
Если поля выровнять левыми краями, они встанут по сетке, а последовательность заполнения станет очевиднее. Размеры полей нужно подбирать под размеры их содержимого, а зону подписей делать компактной. Восьмипиксельная сетка — действительно один из способов наведения порядка. Другой способ — сделать ширины полей кратными «модулю» — общему для всей формы шагу ширины.
Перед вами четыре скриншота постов в Фейсбуке. Два из них — настоящие, а два других — «поддельные», сделанные не по стандартной сетке Фейсбука. Изменены и вертикальные, и горизонтальные отступы. Выберите два настоящих скриншота.
Даже если вы незнакомы с сеткой Фейсбука, чтобы правильно ответить на вопрос, достаточно найти два варианта, свёрстанных одинаково. Это оба левых варианта. В правом верхнем варианте имя Трампа подпрыгнуло вверх, картинка слишком прилипла к тексту, поле комментария не дотянулось до правого края. В правом нижнем варианте имя Родиона «отвалилось» от фотографии, кнопки реакций разъехались, а поле комментария прилипло к низу.
В этой книге изложены фундаментальные принципы дизайна интерфейса, но за её пределами остаётся целый мир знаний, нужных проектировщику в работе.
Мы не обсуждали процесс проектирования и цикл разработки интерфейса: понимание задачи, сценарии, персонажей, интервью, итерации, тестирование, полировку, внедрение, обучение пользователей. Не касались эргономики, физических отличий взрослых и детей, особенностей людей с проблемами зрения или мелкой моторики. Не разбирали, для каких задач лучше подойдёт компьютер, планшет, телефон, часы — и чем отличаются интерфейсы на этих устройствах.
Тема вёрстки в графическом интерфейсе шире главы «Сетка» — важно понимать правило внутреннего и внешнего, правило якорных объектов; уметь собирать экраны из базовых элементов, таких как точка, линия и прямоугольник. В главе «Пиктограммы» мы коснулись их функции, но не графического дизайна.
Эстетика интерфейса меняется — кнопки сегодня выглядят иначе, чем пять лет назад. Дизайнер должен разбираться в тенях, бликах, градиентах, скруглениях и уметь добиваться нужного восприятия интерфейса с их помощью. А ещё есть шрифт, цвет, звук, анимация.
В этой книге изложены фундаментальные принципы дизайна интерфейса, но за её пределами остаётся целый мир знаний, нужных проектировщику в работе.
Мы не обсуждали процесс проектирования и цикл разработки интерфейса: понимание задачи, сценарии, персонажей, интервью, итерации, тестирование, полировку, внедрение, обучение пользователей. Не касались эргономики, физических отличий взрослых и детей, особенностей людей с проблемами зрения или мелкой моторики. Не разбирали, для каких задач лучше подойдёт компьютер, планшет, телефон, часы — и чем отличаются интерфейсы на этих устройствах.
Тема вёрстки в графическом интерфейсе шире главы «Сетка» — важно понимать правило внутреннего и внешнего, правило якорных объектов; уметь собирать экраны из базовых элементов, таких как точка, линия и прямоугольник. В главе «Пиктограммы» мы коснулись их функции, но не графического дизайна.
Эстетика интерфейса меняется — кнопки сегодня выглядят иначе, чем пять лет назад. Дизайнер должен разбираться в тенях, бликах, градиентах, скруглениях и уметь добиваться нужного восприятия интерфейса с их помощью. А ещё есть шрифт, цвет, звук, анимация.
Ещё интереснее становится, когда интерфейс выходит за экран, например для управления умным домом, дроном, подъёмным краном или когда интерфейс влияет на безопасность людей. Каким должен быть вид и форма физических рычагов и педалей? Как улучшить голосовые интерфейсы сегодня и какими они станут в будущем, когда технологии разовьются? Как эффективно использовать виртуальную реальность для повседневных задач?
У интерфейса есть и коммерческая задача. Возникает вопрос не только о том, как сделать удобно, но и как порадовать, приучить, затянуть. Как мотивировать человека пользоваться сервисом чаще?
Десять лет назад проектировщики решали задачу «сделать удобно», а сегодня — задачу «улучшить жизнь»: заниматься спортом, регулярно учиться, разумно тратить деньги, сортировать мусор. Как интерфейсом холодильника помочь человеку правильно питаться?
Буду рад, если читателю эти вопросы покажутся интересными, и он отправится читать другие книжки, разбираться в новых областях и писать свои учебники.
Ещё интереснее становится, когда интерфейс выходит за экран, например для управления умным домом, дроном, подъёмным краном или когда интерфейс влияет на безопасность людей. Каким должен быть вид и форма физических рычагов и педалей? Как улучшить голосовые интерфейсы сегодня и какими они станут в будущем, когда технологии разовьются? Как эффективно использовать виртуальную реальность для повседневных задач?
У интерфейса есть и коммерческая задача. Возникает вопрос не только о том, как сделать удобно, но и как порадовать, приучить, затянуть. Как мотивировать человека пользоваться сервисом чаще?
Десять лет назад проектировщики решали задачу «сделать удобно», а сегодня — задачу «улучшить жизнь»: заниматься спортом, регулярно учиться, разумно тратить деньги, сортировать мусор. Как интерфейсом холодильника помочь человеку правильно питаться?
Буду рад, если читателю эти вопросы покажутся интересными, и он отправится читать другие книжки, разбираться в новых областях и писать свои учебники.
Команда
Сказуемое глагольное:
Что сделать?
Глагол совершенного вида в начальной форме
Отправить
Добавить
Настроить
Сохранить
Новый документ
Печать...
Сохранять автоматически
Вернитесь к началу регистрации
Оплата
Дополнительно...
Статус
Сказуемое, отвечает на вопрос о подлежащем:
Существительное, прилагательное, причастие, числительное, наречие, глагол в личной форме
Утверждено
Класс!
В работе
Позже
Подтверждаю
Отметить как спам
Оценить на пять
Навигация
Подлежащие:
Что?
Существительное в именительном падеже
Поиск
Шрифты
Оплата
К регистрации
В начало
Открыть настройки
Навигация
Подлежащее:
Что?
Существительное в именительном падеже
Магазин
Блог
На главную
Сохранить
В сплошном тексте — любой
Любые, помогающие понять, что по ссылке
Почитайте февральскую статью о налогах
В продажу поступили новые Айфоны
«Коммерсант» уже писал об этом
Перейдите по ссылке
Читайте здесь
Дополнение:
Сделать с чем? Кому?
Приложение:
Кто или что именно?
Существительное, местоимение, причастие
В плейлисте
☑ суперхиты
☐ что‑нибудь помелодичнее
☑ неизданное
Заказать
☐ борщ
☑ картошку
☑ салат
Город
☐ Москва
☐ Челябинск
☑ Включить
☐ Выключить
Выбор
Определение:
Какой?
Чей?
Который?
Приложение:
Кто или что именно?
Существительное, местоимение, прилагательное, наречие, числительное, глагол в начальной форме
Квартира
☐ хрущёвка
☑ у метро
☐ посуточно
Глаза
☑ голубые
☑ большого размера
☐ навыкате
☐ Из выделенного диапазона
☐ Со встроенной камерой
Квартира
☐ Подобрать хрущёвку
☑ Расположение: у метро
☐ Сниму посуточно
Искать у метро?
☐ Да
Уточнение действия
Обстоятельство:
Сделать как?
где?
когда?
Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом
Сыграть на фортепиано
☐ громко
☑ не запинаясь
☐ одной рукой
☑ по нотам
☑ Печатать рисунки?
☐ Если не...
☐ Несмотря на...
☑ Включите этот чекбокс чтобы подыскать...
Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)
Настройка принтера
☑ Раскладывать по копиям
Печать
☑ Разложить по копиям
Дополнение:
Сделать с чем? Кому?
Существительное в косвенном падеже
Печатать
☑ рисунки
☐ колонтитулы
Параметры печати☐ Не печатать рисунки
☐ Отключить колонтитулы
Дополнение:
Сделать с чем? Кому?
Приложение:
Кто или что именно?
Существительное, местоимение, причастие
Купить
🔘 Айфон
○ Андроид
Плательщик
🔘 Частное лицо
○ Организация
Выберите марку
Вы кто?
Выбор
Определение:
Какой?
Чей?
Который?
Приложение:
Кто или что именно?
Существительное, местоимение, прилагательное, наречие, числительное, глагол в начальной форме
Тема оформления
🔘 классическая
○ современная
○ по умолчанию
Пришёл
○ по записи
○ в порядке очереди
🔘 только спросить
Вы согласны?
🔘 да
○ нет
Уточнение действия
Обстоятельство:
Сделать как?
где?
когда?
Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом
Оплатить
🔘 через Эпл‑пей
○ передав деньги в конверте
Доставить
🔘 быстро
○ Почтой России
Никогда — Всегда — При выделении
Обливаясь потом
Вторым процессором
Лицевой стороной
В обратном порядке
Облаками
Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)
Обновления
○ не проверять
○ проверять
○ только скачивать
🔘 сразу устанавливать
Дополнение:
Сделать с чем? Кому?
Существительное в косвенном падеже
Разрешить
○ всем
🔘 только модераторам
Выбор
Определение:
Какой?
Чей?
Который?
Приложение:
Кто или что именно?
Существительное, прилагательное, наречие, числительное, глагол в начальной форме
Бесшумный ... Оглушить соседей
Низкая громкость
Высокая громкость
Сделать тише
Увеличьте яркость с помощью данного ползунка:
Уточнение действия
Обстоятельство:
Сделать как?
где?
когда?
Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом
Быстро ... Качественно
Ближе ... Дальше
С лёгкостью ... Обливаясь потом
Голышом ... В полном обмундировании
Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)
При нарушении:
Выносить устное предупреждение ... Сажать на кол
Дополнение:
Сделать с чем? Кому?
Существительное в косвенном падеже
Предпочитать:
Маленький файл ... Высокое качество
Только мне ... Друзьям ... Всем
Член
Часть речи
Примеры хорошие
и плохие
Команда
Сказуемое глагольное:
Что сделать?
Глагол совершенного вида в начальной форме
Отправить
Добавить
Настроить
Сохранить
Новый документ
Печать...
Сохранять автоматически
Вернитесь к началу регистрации
Оплата
Дополнительно...
Статус
Сказуемое, отвечает на вопрос о подлежащем:
Существительное, прилагательное, причастие, числительное, наречие, глагол в личной форме
Утверждено
Класс!
В работе
Позже
Подтверждаю
Отметить как спам
Оценить на пять
Навигация
Подлежащие:
Что?
Существительное в именительном падеже
Поиск
Шрифты
Оплата
К регистрации
В начало
Открыть настройки
Навигация
Подлежащее:
Что?
Существительное в именительном падеже
Магазин
Блог
На главную
Сохранить
В сплошном тексте — любой
Любые, помогающие понять, что по ссылке
Почитайте февральскую статью о налогах
В продажу поступили новые Айфоны
«Коммерсант» уже писал об этом
Перейдите по ссылке
Читайте здесь
Дополнение:
Сделать с чем? Кому?
Приложение:
Кто или что именно?
Существительное, местоимение, причастие
В плейлисте
☑ суперхиты
☐ что‑нибудь помелодичнее
☑ неизданное
Заказать
☐ борщ
☑ картошку
☑ салат
Город
☐ Москва
☐ Челябинск
☑ Включить
☐ Выключить
Выбор
Определение:
Какой?
Чей?
Который?
Приложение:
Кто или что именно?
Существительное, местоимение, прилагательное, наречие, числительное, глагол в начальной форме
Квартира
☐ хрущёвка
☑ у метро
☐ посуточно
Глаза
☑ голубые
☑ большого размера
☐ навыкате
☐ Из выделенного диапазона
☐ Со встроенной камерой
Квартира
☐ Подобрать хрущёвку
☑ Расположение: у метро
☐ Сниму посуточно
Искать у метро?
☐ Да
Уточнение действия
Обстоятельство:
Сделать как?
где?
когда?
Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом
Сыграть на фортепиано
☐ громко
☑ не запинаясь
☐ одной рукой
☑ по нотам
☑ Печатать рисунки?
☐ Если не...
☐ Несмотря на...
☑ Включите этот чекбокс чтобы подыскать...
Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)
Настройка принтера
☑ Раскладывать по копиям
Печать
☑ Разложить по копиям
Дополнение:
Сделать с чем? Кому?
Существительное в косвенном падеже
Печатать
☑ рисунки
☐ колонтитулы
Параметры печати☐ Не печатать рисунки
☐ Отключить колонтитулы
Дополнение:
Сделать с чем? Кому?
Приложение:
Кто или что именно?
Существительное, местоимение, причастие
Купить
🔘 Айфон
○ Андроид
Плательщик
🔘 Частное лицо
○ Организация
Выберите марку
Вы кто?
Выбор
Определение:
Какой?
Чей?
Который?
Приложение:
Кто или что именно?
Существительное, местоимение, прилагательное, наречие, числительное, глагол в начальной форме
Тема оформления
🔘 классическая
○ современная
○ по умолчанию
Пришёл
○ по записи
○ в порядке очереди
🔘 только спросить
Вы согласны?
🔘 да
○ нет
Уточнение действия
Обстоятельство:
Сделать как?
где?
когда?
Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом
Оплатить
🔘 через Эпл‑пей
○ передав деньги в конверте
Доставить
🔘 быстро
○ Почтой России
Никогда — Всегда — При выделении
Обливаясь потом
Вторым процессором
Лицевой стороной
В обратном порядке
Облаками
Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)
Обновления
○ не проверять
○ проверять
○ только скачивать
🔘 сразу устанавливать
Дополнение:
Сделать с чем? Кому?
Существительное в косвенном падеже
Разрешить
○ всем
🔘 только модераторам
Выбор
Определение:
Какой?
Чей?
Который?
Приложение:
Кто или что именно?
Существительное, прилагательное, наречие, числительное, глагол в начальной форме
Бесшумный ... Оглушить соседей
Низкая громкость
Высокая громкость
Сделать тише
Увеличьте яркость с помощью данного ползунка:
Уточнение действия
Обстоятельство:
Сделать как?
где?
когда?
Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом
Быстро ... Качественно
Ближе ... Дальше
С лёгкостью ... Обливаясь потом
Голышом ... В полном обмундировании
Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)
При нарушении:
Выносить устное предупреждение ... Сажать на кол
Дополнение:
Сделать с чем? Кому?
Существительное в косвенном падеже
Предпочитать:
Маленький файл ... Высокое качество
Только мне ... Друзьям ... Всем
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Теперь питание компьютера
можно отключить
Теперь питание компьютера
можно отключить