Интерфейс — это набор правил взаимодействия: человека с программой, человека с устройством, устройства с устройством, программы с программой. Слова «способ», «правило» — очень важные в этих определениях. Проектировщик интерфейса в первую очередь придумывает правило, сценарий, уменьшая количество необходимых жестов и сообщений.
Хороший интерфейс начинается с человечности. Человечность дизайна выражается в том, чтобы подстроить предмет дизайна под человека с его слабостями, а не заставлять человека подстраиваться под предмет.
Хороший дизайнер расположит надписи над, а не под кнопками, чтобы не загораживать их пальцами.
Хороший интерфейс не заставляет человека делать то, что он делает плохо: считать в уме, запоминать путь к файлу или сверять с бумажкой пятнадцатизначный код. Принцип: пусть потеет машина.
На вопрос: «Сохранить?» Отвечайте «да» за пользователя.
Принцип: данные пользователя бесконечно ценны.
Когда человек обращается к программе, он думает о своей задаче, а не готовит данные для формы в нужном порядке и формате. Намного удобнее одно поле, куда можно ввести всё, что есть в голове. И уточнить пожелания позже, если предложенные варианты не подойдут.
Принцип: сначала данные, потом фильтры.
Можно смеяться над теми, кто хранит сотню файлов «в бардаке» на рабочем столе, но это совершенно естественно. Рабочий стол — единственное место, где файлы можно расположить пространственно или объединить в группы.
Формированию привычки нельзя противостоять, она образуется сама собой. Поэтому бесполезны подтверждающие диалоговые окна: человек привыкает подтверждать, не читая.
Люди привыкают к порядку кнопок и не читают, что на них написано.
Обычно подтверждающая кнопка в Виндоусе — слева, а на Маке — справа от отменяющей. Разве? (Мое замечание).
Чтобы привычка помогала человеку, интерфейс приложения лучше проектировать отдельно для каждой платформы и соблюдать её традиции. Сравните приложения Фейсбука для Айфона и Андроида: внешний вид поля поиска и расположение «табов» соответствуют принятым в системе.
Хороший дизайн не противостоит человеческой натуре, а использует силу привычки для повышения производительности и уменьшения количества ошибок.
Управление привычкой — коммерческий инструмент.
Один и тот же жест может вызывать разные действия в разных состояниях интерфейса. Кнопка ↵ в текстовом редакторе начинает новую строку, а в чате — отправляет сообщение. Педаль газа обычно значит «ехать вперёд», но если включена задняя передача, то уже «ехать назад». Интерфейс называется модальным, если в нём есть состояния, которые человек не осознаёт во время жеста, но в которых этот жест интерпретируется по‑разному. Ошибка, совершённая человеком из‑за того, что он не осознавал, в каком состоянии находился интерфейс, и получил не тот результат жеста, которого ожидал, называется модальной ошибкой.
(Про выпадающие сообщения в верху экрана) Немодальные лишены такой проблемы. Было бы ещё лучше, если бы они не исчезали с экрана, пока не смахнёшь. Тогда можно было бы спокойно доделать, что делаешь, а потом перейти к уведомлению.
Модальность — признак плохого интерфейса.
Дизайнеры рассуждают так: раз человек не осознаёт состояние интерфейса, сделаем его заметнее. Покажем выбранный инструмент Фотошопа не только на панели инструментов сбоку, но курсором мыши. Он всегда будет виден ровно в том месте, куда смотрит пользователь. Сделаем, чтобы Айфон тряс иконками домашнего экрана в режиме их перетаскивания, чтобы пользователь не мог этого не заметить.
Квазирежимом Джеф Раскин называет такое состояние интерфейса, в котором пользователь его удерживает физически. Квазирежим невозможно не заметить.
Сначала дизайнер придумывает требуемое поведение элементов в важнейших для него случаях. Но потом он должен сформулировать общий закон, из которого это поведение следует.
Человек пользуется интерфейсами в произвольном порядке. Нельзя рассчитывать, что он помнит, что видел «только что» — в реальности это могло быть час назад или вчера. Поэтому любой экран интерфейса или его самостоятельная область должны иметь смысл и быть понятны во всех состояниях, даже если это состояние «на одну секундочку». Компьютер одновременно держит в уме много задач и легко переключается между ними. А человек при переключении мучительно вспоминает, на чём остановился и что собирался делать дальше.
Принцип: каждый экран имеет смысл.
Дизайнеры часто рисуют формы незаполненными. Опасность представляют поля с названиями внутри. Компактность таких полей — это плюс, особенно значимый на узких экранов телефонов. Но если форму заполнить, подписи уже не прочитать, а значит такое состояние становится непонятным. Представьте, что вам нужно проверить, правильно ли вы ввели банковские реквизиты. Если браузер предзаполнил поля автоматически, проверить правильность ещё сложнее.
Закон близости. Объекты, расположенные рядом, воспринимаются связанными. Это кажется очевидным, но ошибки встречаются слишком часто.
Иногда желание увеличить элемент вступает в противоречие с требованием занять им как можно меньше места на экране. Тогда достаточно увеличить не сам объект, а лишь область нажатия.
Пункты меню операционных систем нажимаются на всей ширине строки, в том числе там, где уже нет текста. Полезно повторять то же поведение в меню на сайтах. Обратная связь в виде подсветки дополнительно помогает прицеливанию.
Если в зависимости от состояний интерфейса расположение иконки меняется, люди тратят время на то, чтобы её найти. Поэтому важные элементы не должны перемещаться
«Правило семи элементов» — заблуждение, возникшее из‑за неправильной интерпретации. Попытка спрятать «лишние» элементы затрудняет доступ к функциям. Путь к упрощению интерфейса лежит через пересмотр сценариев использования и структуры информации.
Когда информация в поле зрения, ресурсы мозга не тратятся на её удержание в голове. Спрятать её — всё равно что связать человеку руки.
Действия пользователя должны вызывать в интерфейсе адекватную и заметную реакцию — обратную связь. Кнопка на экране нажимается при клике. Курсор мыши при наведении на ссылку превращается в руку, а сама ссылка — подсвечивается. При попытке прокрутки за пределы списка экран Айфона оттягивается и отпружинивает обратно, чтобы не было ощущения, что телефон перестал работать. При отправке письма почтовая программа на Маке издаёт «улетающий» звук.
С помощью анимации компьютер показывает, что работает. Без неё пользователь мог бы не дождаться завершения длительной операции, решив, что компьютер завис.
Если кнопка не может быть нажата по какой‑то причине, она должна быть отключена.
Ускорить программу можно не всегда, но сделать, чтобы она казалась быстрее — почти всегда. Если нельзя загрузить программу сразу, нужно показать хоть что‑нибудь. В простейшем случае это может быть заставка.
Заглушка информативнее заставки: пока пользователь смотрит на неё, он понимает, как устроен экран и готовится к следующему действию.
Хорошо составленная форма, анкета или бланк после заполнения складываются в связный текст. Поэтому мы предлагаем смотреть на форму как на предложение.
Подобно тому, как в предложении есть главные члены — подлежащее и сказуемое, у формы главные члены — это её заголовок и кнопка. Заголовок, как подлежащее в предложении, выражается существительным в именительном падеже. Кнопка, как сказуемое, выражается глаголом. Но поскольку это команда, а не повествовательное предложение, глагол на кнопке — в начальной форме.
Поля между заголовком и кнопкой — это второстепенные члены предложения. Они отвечают на вопросы: куда отправить сообщение? кому поставить задачу? при каких обстоятельствах? Простая форма похожа на простое предложение.
Все радиокнопки — обстоятельства, указывают на способ совершения действия, отвечают на вопрос «как?». По‑русски на вопрос «как?» можно ответить многими частями речи, но не любым набором слов, как в примере «Выбрать город».
Интерфейс ждёт команд, а не командует пользователем.
Команда Сказуемое глагольное: Что сделать? Главная функция кнопки — дать команду компьютеру. В синтаксисе элементов интерфейса это отглагольное сказуемое, отвечает на вопрос «Что сделать?». Используется глагол совершенного вида в начальной форме.
Для команды компьютеру не годятся кнопки, названные существительными.
Статус Сказуемое: (Подлежащее) — Это что? какое? как? Вторая функция кнопки или пункта меню — изменение статуса или отношения к объекту.
В синтаксисе элементов интерфейса это тоже сказуемое, чаще всего — именное, отвечает на вопрос о подлежащем: это что? какое? Используется существительное, прилагательное, причастие, числительное: «Класс!», «Готово». Сказуемое может отвечать на вопросы: как? когда? и выражаться наречием: «Позже». Формулировки с глаголами‑командами в таких случаях избыточны и малоинформативны: «Отметить как...», «Перевести в категорию...», «Оценить на...»
Третья функция кнопки или пункта меню — навигация. При нажатии не выполняется никакого действия, но заменяется показанный экран, открывается окно, запускается приложение. В синтаксисе элементов интерфейса это подлежащее, отвечает на вопрос «Что?» (вызвать или открыть). Используется существительное в именительном падеже. Как и в случае с изменением статуса или отношения, формулировки в виде команды избыточны («Перейти к...», «Открыть...»), то есть малоинформативны.
Формулировки с пропущенным, но подразумеваемым глаголом тоже неудачны. Если сделать сайт без регистрации не удалось, то просто «Регистрация».
Наречия «Дополнительно», «Ещё» совсем не годятся для названия кнопок: не подходят по синтаксису и не несут информации.
Многоточие предупреждает, что кнопка сработает не сразу. То есть нужно прочитать, что написано. Если при нажатии на слово мгновенно произойдёт или откроется ровно то, что оно означает, то многоточие не нужно. фраза очевидно не дописана, и кажется, будто многоточие как раз заменяет пропущенное имя файла. На самом деле необходимость многоточия не зависит ни от наличия окна после, ни от полноты фразы.
Ссылка как самостоятельный элемент просто называет страницу, на которую ведёт
Ссылка в тексте — выделение. Человек видит её раньше остального текста, поэтому её слов должно хватать для понимания того, что будет по ссылке.
Оптимальная длина ссылки — два‑три слова.
Как любые навигационные элементы, вкладки просто называют ту область, которая за ними спрятана, то есть это подлежащие.
Иногда вкладки встречаются в качестве элемента выбора в форме. Это ошибка: вкладка — элемент навигации, а не выбора. Если у вас две вкладки, это значит, что у вас есть и то, и другое, но вы просто сейчас смотрите на что‑то одно.
Чекбокс — это информативный элемент, который выбирает объект или уточняет действие, сообщает пользователю о поведении интерфейса. В интерфейсе чекбокс отвечает не на вопрос «да или нет?», а на открытые вопросы: какой, что, кому, как, где, когда?
Чекбокс означает часть предложения, которую можно добавить или убрать. Если чекбокс выключен, то его подписи как бы нет в предложении. Выключенный чекбокс может также обозначать отрицание собственной подписи.
Одна из функций чекбокса — выбор объекта.
В чекбоксах лучше использовать положительные формулировки, иначе пользователь вынужден решать логическую задачку.
Одна из функций радиокнопок — выбор объекта.
При выборе между двумя вариантами, когда третьего в принципе быть не может, используйте чекбокс. (Разве? А если это все или только некоторые?)
Чтобы иконки было легче отличать, у них нужно убирать повторяющиеся части.
Если слово просто обозначает множество, убирайте его.
Не стоит рассчитывать, что пользователь сам сделает хорошо. Придумать удобную компоновку главного окна программы — работа дизайнера.
Вкладки — ещё один способ организовать пространство без умножения окон.
Если без формы не получается, задача проектировщика — упростить человеку её заполнение. На это влияет и конструкция, и поведение формы.
Подписи иногда выравнивают по правому краю, чтобы они были ближе к своим полям. Но из‑за этого ломается левый край, читается труднее и выглядит неряшливее.
Если длинная подпись поля «распирает» форму, отодвигая остальные подписи от полей, то её стоит перенести или сократить.
Если при заполнении пользователь допустил ошибку, не обязательно выводить об этом модальное сообщение — это слишком грубая обратная связь. Часто достаточно подсветить поле красным или обвести красной рамкой.
Сообщение об ошибке должно помогать человеку её исправить, а не давать ему оценку и наказывать.
Текст ошибки следует выводить рядом с полем, в котором она допущена. При этом если показывать ошибки под полями, то они будут «распирать» форму, отодвигая поля друг от друга. Намного лучше заранее предусмотреть место для ошибок.